@font-face {
  font-family: "librebaskerville";
  src: url('fonts/librebaskerville-regular-webfont.eot');
  src: url('fonts/librebaskerville-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/librebaskerville-regular-webfont.woff2') format('woff2'), url('fonts/librebaskerville-regular-webfont.woff') format('woff'), url('fonts/librebaskerville-regular-webfont.ttf') format('truetype'), url('fonts/librebaskerville-regular-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "librebaskerville";
  src: url('fonts/librebaskerville-bold-webfont.eot');
  src: url('fonts/librebaskerville-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/librebaskerville-bold-webfont.woff2') format('woff2'), url('fonts/librebaskerville-bold-webfont.woff') format('woff'), url('fonts/librebaskerville-bold-webfont.ttf') format('truetype'), url('fonts/librebaskerville-bold-webfont.svg') format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "librebaskerville";
  src: url('fonts/librebaskerville-italic-webfont.eot');
  src: url('fonts/librebaskerville-italic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/librebaskerville-italic-webfont.woff2') format('woff2'), url('fonts/librebaskerville-italic-webfont.woff') format('woff'), url('fonts/librebaskerville-italic-webfont.ttf') format('truetype'), url('fonts/librebaskerville-italic-webfont.svg') format('svg');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "belgika";
  src: url('fonts/belgika-5th-webfont.eot');
  src: url('fonts/belgika-5th-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/belgika-5th-webfont.woff2') format('woff2'), url('fonts/belgika-5th-webfont.woff') format('woff'), url('fonts/belgika-5th-webfont.ttf') format('truetype'), url('fonts/belgika-5th-webfont.svg') format('svg');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "belgika";
  src: url('fonts/belgika-8th-webfont.eot');
  src: url('fonts/belgika-8th-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/belgika-8th-webfont.woff2') format('woff2'), url('fonts/belgika-8th-webfont.woff') format('woff'), url('fonts/belgika-8th-webfont.ttf') format('truetype'), url('fonts/belgika-8th-webfont.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "belgika";
  src: url('fonts/belgika-16th-webfont.eot');
  src: url('fonts/belgika-16th-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/belgika-16th-webfont.woff2') format('woff2'), url('fonts/belgika-16th-webfont.woff') format('woff'), url('fonts/belgika-16th-webfont.ttf') format('truetype'), url('fonts/belgika-16th-webfont.svg') format('svg');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "belgika";
  src: url('fonts/belgika-40th-webfont.eot');
  src: url('fonts/belgika-40th-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/belgika-40th-webfont.woff2') format('woff2'), url('fonts/belgika-40th-webfont.woff') format('woff'), url('fonts/belgika-40th-webfont.ttf') format('truetype'), url('fonts/belgika-40th-webfont.svg') format('svg');
  font-weight: 100;
  font-style: normal;
}
/* plouc */
@font-face {
  font-family: "sitespec";
  src: url('fonts/sitespec-webfont.eot');
  src: url('fonts/sitespec-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/sitespec-webfont.woff2') format('woff2'), url('fonts/sitespec-webfont.woff') format('woff'), url('fonts/sitespec-webfont.ttf') format('truetype'), url('fonts/sitespec-webfont.svg') format('svg');
  font-weight: 400;
  font-style: normal;
}




/**PROPORTIONAL FONTSIZE & LINE-HEIGHT**/

/*@media (min-width: 200px) and (max-width: 800px) {
  body {
    font-size: calc( 4pt + 2 * ( ( 100vw - 200px) / 600 )) !important;
    line-height: calc( 5.5pt + 2.75 * ( ( 100vw - 200px) / 600 )) !important;
  }
}*/

@media (max-width: 767px) {
  body {
    font-size: 12px !important;
    line-height: 16.5px !important;
  }

  .picto-spec, .picto-langue {
    font-size: 22px;
    line-height: 27.5px;
  }
}

@media (min-width: 767px) and (max-width: 1280px) {
  body {
    font-size: calc( 12px + 2 * ( ( 100vw - 800px) / 480 )) !important;
    line-height: calc( 16.5px + 2.75 * ( ( 100vw - 800px) / 480 )) !important;
  }
  .picto-spec, .picto-langue {
    font-size: calc( 22px + 2 * ( ( 100vw - 800px) / 480 )) !important;
    line-height: calc( 27.5px + 2.75 * ( ( 100vw - 800px) / 480 )) !important;
  }
}

@media (min-width: 1280px) {
  body {
    font-size: 14px !important;
    line-height: 19.25px !important;
  }

  .picto-spec, .picto-langue {
    font-size: 24px;
    line-height: 30.25px;
  }
}



/**IMAGES**/


@media (max-width: 400px) {
  .back-img-about {background: url('../images/about-400.jpg') no-repeat center; }
  .back-img-home {background: url('../images/home-400.jpg') no-repeat center; }
}

@media (min-width: 400px) and (max-width: 800px) {
  .back-img-about {background: url('../images/about-800.jpg') no-repeat center; }
  .back-img-home {background: url('../images/home-800.jpg') no-repeat center; }
}

@media (min-width: 800px) and (max-width: 1200px) {
  .back-img-about {background: url('../images/about-1200.jpg') no-repeat center; }
  .back-img-home {background: url('../images/home-1200.jpg') no-repeat center; }
}

@media (min-width: 1200px) and (max-width: 1600px) {
  .back-img-about {background: url('../images/about-1600.jpg') no-repeat center; }
  .back-img-home {background: url('../images/home-1600.jpg') no-repeat center; }
}

@media (min-width: 1600px) and (max-width: 2000px){
  .back-img-about {background: url('../images/about-2000.jpg') no-repeat center; }
  .back-img-home {background: url('../images/home-2000.jpg') no-repeat center; }
}

@media (min-width: 2000px) and (max-width: 2400px){
  .back-img-about {background: url('../images/about-2400.jpg') no-repeat center; }
  .back-img-home {background: url('../images/home-2400.jpg') no-repeat center; }
}

@media (min-width: 2400px) and (max-width: 2800px){
  .back-img-about {background: url('../images/about-2800.jpg') no-repeat center; }
  .back-img-home {background: url('../images/home.jpg') no-repeat center; }
}

@media (min-width: 2800px) and (max-width: 3200px){
  .back-img-about {background: url('../images/about-3200.jpg') no-repeat center; }
  .back-img-home {background: url('../images/home.jpg') no-repeat center; }
}

@media (min-width: 3200px) and (max-width: 3600px){
  .back-img-about {background: url('../images/about-3600.jpg') no-repeat center; }
  .back-img-home {background: url('../images/home.jpg') no-repeat center; }
}

@media (min-width: 3600px) and (max-width: 4000px){
  .back-img-about {background: url('../images/about-4000.jpg') no-repeat center; }
  .back-img-home {background: url('../images/home.jpg') no-repeat center; }
}

@media (min-width: 4000px) {
  .back-img-about {background: url('../images/about.jpg') no-repeat center; }
  .back-img-home {background: url('../images/home.jpg') no-repeat center; }
}

.back-img-about, .back-img-home {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 30vw;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/**-----GENERAL CSS------**/


body {
  font-family: "librebaskerville";
}

a,
a:link,
a:hover,
a:visited {
  color: #000;
text-decoration: none;
text-decoration-color: #aaa; /* plouc unknown property name in chrome */
text-decoration-style: dotted; /* plouc unknown property name in chrome */
display:inline;
}



.hide-scroll-menu {
  position: absolute;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30vw; /*define the final width of the menu*/
  height: 100vh;
  overflow: hidden; /*used to hide the scrollbar*/
  padding: 2vw;
  background-color: #fff;
  border-bottom: solid 2vw #fff;
}

.menu {
 position: absolute;
 width: 34vw;        /*used to pull the scrollbar out of the parent div .hide-scroll-menu*/
 padding-right: 8vw; /*used to pull the scrollbar out of the parent div .hide-scroll-menu*/
 height: 100vh;
 overflow-y: auto;
}



.picto {
  font-family: "sitespec";
  font-weight: 400;
  font-style: normal;
  display:inline;
}
.menu .author-infos {
  font-weight: 120;
  font-style: italic;
  padding-bottom: 2vw;
}
.menu .author-infos .picto-spec {
  font-family: "sitespec";
  font-style: normal;
  margin-left: 1px;
  cursor: pointer;
}

.menu .author-infos .spec-name {
  cursor: pointer;
}


.menu .author-infos .wrapper-langue {
  font-family: "sitespec";
  font-style: normal;
  margin-top: -5px;
}
.menu .author-infos .wrapper-langue .langue {
  text-transform: uppercase;
  font-family: "belgika";
  font-weight: 400;
  letter-spacing: 1.5px;
  font-style: normal;
  display:inline;
}
.menu .author-infos .section-title {
  text-transform: uppercase;
  font-family: "belgika";
  font-weight: 400;
  letter-spacing: 1.5px;
  font-style: normal;
  padding: 2vw 0 0 0;
}
.menu .author-infos .section-spec {
  text-transform: uppercase;
  font-family: "belgika";
  font-weight: 400;
  letter-spacing: 1.5px;
  font-style: normal;
  padding: 0 0 0 0;
}
.menu .author-infos .menu-items {
  font-style: normal;
  padding: 0.25vw 0 0 0;
}
.menu .author-infos .menu-items p {
  font-family: "librebaskerville";
  font-weight: 120;
  font-style: italic;
  display:inline;
}
.menu .section-menu {
  position: absolute;
  bottom: 4vh;
  max-height: calc(100vh - 20vh - 4vh - 1vw);
  overflow: auto;
  width: calc(100% - 4 * 1vw);
}
.menu ul {
 list-style: none;
 margin-left: 0;
 padding-left: 1em;
 text-indent: -1em;
}
.menu li {
}
.menu li::before {
       content: "─ ";
}


/*MEDIA QUERIES MEDIUM AND LANDSCAPE ---> change layout */
@media only screen and (max-device-width: 767px) and (orientation: landscape), (max-width: 767px) {
  .hide-scroll-menu {
    width: 40vw;
  }

  .menu {
   width: 44vw;
  }
}

/*MEDIA QUERIES SMALL AND PORTRAIT ---> change layout */
@media only screen and (max-device-width: 767px) and (orientation: portrait), only screen and (max-width: 479px) {

  .back-img-about, .back-img-home {
    position: absolute;
    top: 66vh;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .hide-scroll-menu {
    width: 100vw;
    height: 66vh;
  }

  .menu {
   width: 104vw;
   padding-bottom: 35vh;
  }

}