/* Importing Roboto Webfont */
@import url('https://fonts.googleapis.com/css?family=Roboto:light, medium, bold, 100');

/*
  ## Color Definitions

  - Background:            #fcfcfc
  - Text:                  #050505
  - Links:                 #3F5351
  - Hovered Links:         #050505

*/

/* =====  1 Global Rules & Definitions  ===================================== */

/* -----  1.1 Font Definitions  --------------------------------------------- */

/* Junicode */
@font-face {
  font-family: 'Junicode';
  src: url(../fonts/Junicode/Junicode-Regular-webfont.woff2) format('woff');
  src: url(../fonts/Junicode/Junicode-Regular-webfont.woff) format('woff');
  src: url(../fonts/Junicode/Junicode-Regular-webfont.eot?iefix) format('eot');
  src: url(../fonts/Junicode/Junicode-Regular-webfont.eot);
  font-style: normal;
}

@font-face {
  font-family: 'Junicode-Italic';
  src: url(../fonts/Junicode/Junicode-Italic-webfont.woff2) format('woff');
  src: url(../fonts/Junicode/Junicode-Italic-webfont.woff) format('woff');
  src: url(../fonts/Junicode/Junicode-Italic-webfont.eot?iefix) format('eot');
  src: url(../fonts/Junicode/Junicode-Italic-webfont.eot);
  font-style: normal;
}

@font-face {
  font-family: 'Junicode-Bold';
  src: url(../fonts/Junicode/Junicode-Bold-webfont.woff2) format('woff');
  src: url(../fonts/Junicode/Junicode-Bold-webfont.woff) format('woff');
  src: url(../fonts/Junicode/Junicode-Bold-webfont.eot?iefix) format('eot');
  src: url(../fonts/Junicode/Junicode-Bold-webfont.eot);
  font-style: normal;
}

@font-face {
  font-family: 'Junicode-Bold-Italic';
  src: url(../fonts/Junicode/Junicode-BoldItalic-webfont.woff2) format('woff');
  src: url(../fonts/Junicode/Junicode-BoldItalic-webfont.woff) format('woff');
  src: url(../fonts/Junicode/Junicode-BoldItalic-webfont.eot?iefix) format('eot');
  src: url(../fonts/Junicode/Junicode-BoldItalic-webfont.eot);
  font-style: normal;
}


/* -----  1.2 Reset & Normalization  ---------------------------------------- */

/* -----  1.3 General Typography  ------------------------------------------- */

body {
  font-family: "Junicode", Times, Arial;
  font-size: 18px;
  background-color: #fcfcfc;
}

/* Headings */

/* Links */

a {
  color: #3F5351;
  text-decoration: none;
  transition: color 0.25s cubic-bezier(0.55, 0, 0.1, 1);
}

a:hover,
li.is-active a {
  color: #050505;
  text-decoration: underline;
}

/* -----  1.4 Images & Figures  --------------------------------------------- */




/* =====  2 Layout Helpers & Reusable Components  =========================== */

/* The Clearfix™: A classic … */
.cf::after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

/* -----  2.1 Kirbytext  ---------------------------------------------------- */

@supports (-webkit-overflow-scrolling: touch) {
  .text pre > code {
    /* Enables smoother scrolling for code sections on
       mobile (i.e. touch) devices. */
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
}


/* -----  2.2 Button  ------------------------------------------------------- */


/* -----  2.3 Grid & Layout  ------------------------------------------------ */


/* =====  3 Site Layout  ==================================================== */

img {
  max-width: 100%;
  height: auto;
  margin-top: 20px;
  margin-bottom: 40px;
}

/* ----- 3.1  Header  ------------------------------------------------------- */

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* margin: 5vh max(20px, 5vw); */
}

@media screen and (max-width: 768px) {
  header {
    justify-content: flex-start;
  }
}

@media screen and (max-width: 480px) {
  header { 
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
}

.container-fluid {
  margin-top: 4vh;
}

.menu {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: flex-end;
  font-family: "Roboto", Helvetica, Arial;
  margin: 2.5vh 5vw;
}

.menu a {
  display: block;
  font-size: 16px;
  margin: 0 1em 0 1em; 
}

@media screen and (max-width: 768px) {
  .menu {
    margin: 2.5vh 0;
  }

  .menu a {
    font-size: 14px;
  }
}

.menu, .languages ul {
  padding: 0;
  list-style-type: none;
}

.languages ul {
  display: flex;
  justify-content: flex-end;
  font-family: "Roboto", Helvetica, Arial;
  font-weight: 300;
}

.languages a {
  display: block;
  font-size: 12px;
}

.languages ul li:not(:last-child) {
  margin-right: 0.5em;
}

.languages ul a:hover {
  font-weight: 400;
}

#logo {
  position: fixed;
  top: 4vh;
  left: 2vw;
}

@media screen and (max-width: 768px) {
  #logo {
    position: absolute;
    left: 15px;
  }
}

#logo svg {
  width: max(150px, min(10vw, 225px));
}

@media screen and (max-width: 768px) {
  #logo svg {
    width: max(115px, min(7.5vw, 165px));
  }
}

@media screen and (max-width: 480px) {
    .menu {
      flex-direction: column;
  }
}

/* -----  3.2 Menu  --------------------------------------------------------- */

/* -----  3.3 Main Content  ------------------------------------------------- */

p {
  font-family: 'Junicode', serif;
  font-size: 18px;
  line-height: 1.3em;
}

h2 {
  font-family: 'Roboto', sans-serif;
  /* Font weight 400 = Regular */
  font-weight: 400;
  font-size: 18px;

  margin-top: 2em;
}

h3 {
  font-family: 'Roboto', sans-serif;
  /* Font weight 300 = Light */
  font-weight: 300;
  font-size: 17px;
}

/* -----  3.4 Sticky Footer  ------------------------------------------------ */

.footer {
  bottom: 0;
  padding: 1.5rem 0;
  text-align: center;
  margin-top: 2vh;
}

.footer p {
  font-size: 1rem;
}

.footer a {
  border-bottom: 0;
}


@media all and (min-width: 48em) {
  .footer-copyright, .footer-madewithkirby {
    display: inline;
  }
}


/* =====  4 Template-specific Components ==================================== */

/* -----  4.1 Homepage  ----------------------------------------------------- */



/* ----- 4.2 La Maison & Nos Prestations  -------------------------------------------------- */

.main-preview img {
  width: auto;
}

.logos {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-justify-content: space-around;
  justify-content: space-around;
  margin-top: 5vh;
}

.logos img {
  width: auto;
  height: auto;
  max-height: 150px;
}

@media screen and (max-width: 768px) {
  .logos {
    transition: all 0.25s cubic-bezier(0.55, 0, 0.1, 1) 0s;
  }
}

@media screen and (max-width: 480px) {
  .logos {
    margin-top: 10px;
  }

  .logos img {
    max-height: 120px;
    transition: all 0.25s cubic-bezier(0.55, 0, 0.1, 1) 0s;
  }
}



/* -----  4.3 Notre Savoir-faire  --------------------------------------------------------- */

.savoirfaire {
  margin-top: 20px;
}

.savoir-faire-content h3 {
  margin-top: 0;
  padding-top: 20px;
}

.sommaire {
  border-left: 1px solid #3F5351;
  margin-left: 3.5vw;
}

.sommaire a {
  font-family: "Roboto";
  font-weight: 300;
  font-size: 13px;
}

.sommaire a::after {
  content: none;
}

.sommaire li {
  margin-bottom: 5px;
  list-style-type: none;
}

/* Active anchors */
a.active {
  font-weight: 400;
  text-decoration: underline;
  color: #050505;
}

/* -----  4.4 Contact  ------------------------------------------------------ */

.contact-title {
  margin-top: 8vh;
}

@media screen and (max-width: 480px) {
  .contact-title {
    margin-top: 15%;
  }
}

#map {
  height: 400px;
  margin-top: 5vh;
}

@media screen and (max-width: 640px) {
  #map {
    width: 80vw;
    height: 300px;
  }
}


/* ----- 5. Sticky ---------------------------------------------- */

.sticky {
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: -webkit-sticky;
  position: sticky;
  top: max(100px, 15vh);
}

.sticky:before,
.sticky:after {
    content: '';
    display: table;
}


@media screen and (max-width: 768px) {
  .sticky {
    display: none;
  }
}

/* ----- 6. Lazy Load ---------------------------------------------- */

.b-lazy {
        -webkit-transition: opacity 300ms cubic-bezier(0.55, 0, 0.1, 1);
           -moz-transition: opacity 300ms cubic-bezier(0.55, 0, 0.1, 1);
             -o-transition: opacity 300ms cubic-bezier(0.55, 0, 0.1, 1);
                transition: opacity 300ms cubic-bezier(0.55, 0, 0.1, 1);
                 max-width: 100%;
                   opacity: 0;
    }

.b-lazy.b-loaded {
                   opacity: 1;
    }