@charset "utf-8";
/* CSS nymall */
/* version 180222 */
/* update */
/* AUTHOR: Kiki Desplat webbmaster@alexandredesplat.net */

/* ---------------------

*  1/ GENERAL
*  2/ LIENS
*  3/ HAMBURGER NAVIGATION
*  4/ CONTENT
*  5/ MEDIA QUERIES
*/

/* ----------- 1/ GENERAL  ---------- */

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/SourceSansPro-Light.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/SourceSansPro-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/SourceSansPro-Light.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/SourceSansPro-Light.woff') format('woff'), /* Modern Browsers */
       url('../fonts/SourceSansPro-Light.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/SourceSansPro-Light.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

* {
   margin: 0;
   padding: 0;
   border: 0;
   font: inherit;
   }
html, body {
   overflow: hidden;
   width:100%;
   height: 100%;
   }
body {
   color: #fff;
   background-color: #060606;
   text-align: left;
   font-size: 100%;
   font-size: 16px;
   -webkit-text-size-adjust: 100%;
   line-height: 1.5;
   font-family: 'Source Sans Pro', sans-serif;
   font-weight:300;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-smoothing: antialiased;
   background-image: url(https://www.alexandredesplat.net/images/big/AlexandreDesplat-photo-BrigitteLacombe.jpg);
   background-repeat: no-repeat;
   background-position: 208px top;
   background-size: cover;
   }

/* ------------------------- 2/ LIENS ---------------------------*/

a, a:link {
   text-decoration:none;
   color: #fff;
   -webkit-transition: color 0.3s ease;
   -o-transition: color 0.3s ease;
   transition: color 0.3s ease;
   }
a:hover, a:focus {
   text-decoration: none;
   color: #fff;
   border-bottom: 1px solid currentColor;
   -webkit-transition: color 0.3s ease;
   -o-transition: color 0.3s ease;
   transition: color 0.3s ease;
   }

/* ----------- 3/ HAMBURGER NAVIGATION  ---------- */
#menu-principal {
   height: 25%;
   }
#menuToggle {
   display: block;
   position: relative;
   top: 32px;
   left: 48px;
   z-index: 5;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   -ms-grid-column: 2;
   grid-column: 2;
   -ms-grid-row: 1;
   grid-row: 1;
   }
   #menuToggle input {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      cursor: pointer!important;
      opacity: 0;
      z-index: 6;
      -webkit-touch-callout: none;
      }
   #menuToggle span {
      display: block;
      width: 36px;
      height: 2px;
      margin-bottom: 8px;
      position: relative;
      background: #fff;
      border-radius: 3px;
      z-index: 5;
      -webkit-transform-origin: 4px 0px;
      -ms-transform-origin: 4px 0px;
      transform-origin: 4px 0px;
      -webkit-transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      opacity 0.55s ease,
      -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
      transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      opacity 0.55s ease,
      -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
      -o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      opacity 0.55s ease;
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      opacity 0.55s ease;
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
      opacity 0.55s ease,
      -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
      }
      #menuToggle span:first-child {
         -webkit-transform-origin: 0% 0%;
             -ms-transform-origin: 0% 0%;
                 transform-origin: 0% 0%;
      }
      #menuToggle span:nth-last-child(2) {
         -webkit-transform-origin: 0% 100%;
             -ms-transform-origin: 0% 100%;
                 transform-origin: 0% 100%;
      }
      #menuToggle input:checked ~ span {
         opacity: 1;
         -webkit-transform: rotate(45deg) translate(-2px, -1px);
             -ms-transform: rotate(45deg) translate(-2px, -1px);
                 transform: rotate(45deg) translate(-2px, -1px);
         background: #fff;
      }
         #menuToggle input:checked ~ span:nth-last-child(3) {
            opacity: 0;
            -webkit-transform: rotate(0deg) scale(0.2, 0.2);
                -ms-transform: rotate(0deg) scale(0.2, 0.2);
                    transform: rotate(0deg) scale(0.2, 0.2);
         }
         #menuToggle input:checked ~ span:nth-last-child(2) {
            -webkit-transform: rotate(-45deg) translate(0, -1px);
                -ms-transform: rotate(-45deg) translate(0, -1px);
                    transform: rotate(-45deg) translate(0, -1px);
         }
#mainmenu {
   position: absolute;
   width: 100%;
   margin: -104px 0 0 -48px;
   padding: 128px 48px 9999px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   list-style-type: none;
   -webkit-font-smoothing: antialiased;
   -webkit-transform-origin: 0% 0%;
   -ms-transform-origin: 0% 0%;
   transform-origin: 0% 0%;
   -webkit-transform: translate(-100%, 0);
   -ms-transform: translate(-100%, 0);
   transform: translate(-100%, 0);
   -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
   transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
   -o-transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
   background-image: -webkit-gradient(linear,left top, right top,from(rgba(31, 31, 31, 1)), to(rgba(31, 31, 31, 0.74)));
   background-image: -webkit-linear-gradient(left,rgba(31, 31, 31, 1), rgba(31, 31, 31, 0.74));
   background-image: -o-linear-gradient(left,rgba(31, 31, 31, 1), rgba(31, 31, 31, 0.74));
   background-image: linear-gradient(to right,rgba(31, 31, 31, 1), rgba(31, 31, 31, 0.74));
   background-size: contain;
   }
#mainmenu li {
   color: #fff;
   padding: 8px 0;
   font-family: 'Source Sans Pro', sans-serif;
   text-transform: uppercase;
   font-size: 3em;
   font-size: 4.5vh;
   font-weight:300;
   line-height: 1.5;
   }
   #mainmenu li a, #mainmenu li a:link {
      color: #fff;
      }
   #mainmenu li a:hover, #mainmenu li a:visited {
      color: #fff;
      border-bottom: 1px solid currentColor;
      }
   #menuToggle input:checked ~ ul {
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      }

/* ----------- 4/ CONTENT ---------- */

#container {
position: relative;
top:-32px;
width: 100%;
height: 100%;
z-index:1;
display: table;
}
   #container div {
   display: inline-block;
   padding: 1em;
   width: 100%;
   height: 25%
   vertical-align: middle;
   }
      h1 {
      text-transform: uppercase;
      font-size: 3em;
      font-weight: 200;
      line-height: 1.1;
      color: #fff;
      letter-spacing: 2px;
      }
      p {
      display: none;
      }
      h5 {
      font-size: 1.25em;
      font-weight: 200;
      line-height: 2;
      }

@supports (grid-area:auto){
#menu-principal {
height: auto;
}
#container {
display:-ms-grid;
display:grid;
-ms-grid-columns: 48px 40% 1fr;
    grid-template-columns: 48px 40% 1fr;
-ms-grid-rows: 72px 3fr 1fr 3fr 72px;
    grid-template-rows: 72px 3fr 1fr 3fr 72px;
-ms-grid-row-align: center;
    align-self: center;
}
   #container div {
   width: auto;
   height: auto;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
   }
   #title {
   -ms-grid-column: 2;
   grid-column: 2;
   -ms-grid-row:2;
   grid-row:2;
   }
   #site {
   -ms-grid-column:2;
   grid-column:2;
   -ms-grid-row:3;
   grid-row:3;
   }
   #choix {
   /*background-color: #0c1f26;*/
   -ms-grid-column:2;
   grid-column:2;
   -ms-grid-row:4;
   grid-row:4;
   }
}
/* ---------------- 5/ MEDIA QUERIES -----------------*/

/*-----------------------LANDSCAPE---------------------------*/
@media all and (max-device-width: 639px) and (orientation:landscape){
body {
background-position: 108px top;
background-image: url(https://www.alexandredesplat.net/images/big/AlexandreDesplat-photo-BrigitteLacombe-700.jpg);
}
#menu-principal {
top: 96px;
top: 8rem;
left: 24px;
left: 2rem;
}
   #mainmenu {
   margin: -144px 0 0 -48px;
   padding: 160px 0 100vh 48px ;
   background-size: contain;
   }
      #mainmenu li {
      font-size: 24px;
      font-size: 5vh;
      font-size: 0.8em!important;
      }
#container {
font-size: 0.6em!important;
-ms-grid-columns: 32px 40% 1fr;
    grid-template-columns: 32px 40% 1fr;
}
}
@media all and (min-device-width: 640px) and (max-device-width: 799px) and (orientation:landscape){
body {
background-position: 144px top;
}
   #menu-principal {
   top: 132px;
   top: 11rem;
   left: 24px;
   left: 2rem;
   }
      #mainmenu {
      margin: -174px 0 0 -36px;
      margin: -14.5rem 0 0 -3rem;
      padding: 174px 48px 100vh;
      }
         #mainmenu li {
         padding: 12px 0;
         padding: 1rem 0;
         font-size: 1rem;
         }
#container {
font-size: 0.8em!important;
}
}
@media all and (min-device-width: 800px) and (max-device-width: 1023px) and (orientation:landscape){
#mainmenu li {
font-size:1.6em!important;
}
#container {
font-size: 1em!important;
}
}
@media all and (min-device-width: 1024px) and (max-device-width: 1365px) and (orientation:landscape){
#container {
font-size: 1.5em!important;
}
}
@media all and (min-device-width: 1366px) and (max-device-width: 1919px) and (orientation:landscape){
#container {
font-size: 2em!important;
}
h5 {line-height: 1.6;
}
}
@media all and (min-device-width: 1920px) and (orientation:landscape){
body {
background-position: 384px top;
}
#container {
font-size: 3em!important;
}
h5 {
line-height: 1.6;
}
}

/*-----------------------PORTRAIT---------------------------*/
@media all and (orientation:portrait){
#mainmenu li {
line-height: 1.6;
}
h5 {
line-height: 2.5;
}
}
@media all and (max-device-width: 411px) and (orientation:portrait){
body {
background-position: -60px top;
background-image: url(https://www.alexandredesplat.net/images/big/AlexandreDesplat-photo-BrigitteLacombe-700.jpg);
}
#mainmenu li {
font-size: 1.4em!important;
line-height: 1.2;
}
#container {
font-size: 0.6em!important;
-ms-grid-columns: 16px 54% 1fr;
    grid-template-columns: 16px 54% 1fr;
}
}
@media all and (min-device-width: 412px) and (max-device-width: 479px) and (orientation:portrait){
body {
background-position: -88px top;
background-image: url(https://www.alexandredesplat.net/images/big/AlexandreDesplat-photo-BrigitteLacombe-700.jpg);
}
#mainmenu li {
font-size: 1.6em!important;
}
#container {
font-size: 0.8em!important;
-ms-grid-columns: 16px 60% 1fr;
    grid-template-columns: 16px 60% 1fr;
}
}
@media all and (min-device-width: 480px) and (max-device-width: 539px) and (orientation:portrait){
body {
background-position: -88px top;
background-image: url(https://www.alexandredesplat.net/images/big/AlexandreDesplat-photo-BrigitteLacombe-700.jpg);
}
#mainmenu li {
font-size: 2.5em!important;
}
#container {
font-size: 1em!important;
-ms-grid-columns: 32px 60% 1fr;
    grid-template-columns: 32px 60% 1fr;
}
}
@media all and (min-device-width: 540px) and (max-device-width: 719px) and (orientation:portrait){
body {
background-position: -144px top;
}
#mainmenu li {
font-size: 3em!important;
}
#container {
font-size: 1.2em!important;
-ms-grid-columns: 32px 60% 1fr;
    grid-template-columns: 32px 60% 1fr;
}
}
@media all and (min-device-width: 720px) and (max-device-width: 863px) and (orientation:portrait){
body {
background-position: -224px top;
}
#mainmenu li {
font-size: 3.5em!important;
}
#container {
font-size: 1.4em!important;
-ms-grid-rows: 208px 3fr 1fr 3fr 208px;
    grid-template-rows: 208px 3fr 1fr 3fr 208px;
/*grid-template-columns: 32px 60% 1fr;*/
-ms-grid-columns: 32px 54% 1fr;
    grid-template-columns: 32px 54% 1fr;
}
}
@media all and (min-device-width: 720px) and (max-device-width: 863px) and (device-height:1024px) and (orientation:portrait){
body {
background-position: -96px top;
}
}
@media all and (min-device-width: 864px) and (max-device-width: 899px) and (orientation:portrait){
body {
background-position: -240px top;
}
#menuToggle {
    top: 72px;
    }
#mainmenu li {
font-size: 4em!important;
}
#container {
font-size: 1.6em!important;
-ms-grid-rows: 256px 3fr 1fr 3fr 256px;
    grid-template-rows: 256px 3fr 1fr 3fr 256px;
-ms-grid-columns: 32px 60% 1fr;
    grid-template-columns: 32px 60% 1fr;
}
}
@media all and (min-device-width: 900px) and (max-device-width: 1023px) and (orientation:portrait){
body {
background-position: -240px top;
}
#menuToggle {
    top: 72px;
    }
#mainmenu li {
font-size: 4em!important;
}
#container {
font-size: 1.6em!important;
-ms-grid-rows: 256px 3fr 1fr 3fr 256px;
    grid-template-rows: 256px 3fr 1fr 3fr 256px;
-ms-grid-columns: 48px 50% 1fr;
    grid-template-columns: 48px 50% 1fr;
}
}
@media all and (min-device-width: 1024px) and (max-device-width: 1049px) and (orientation:portrait){
body {
background-position: -160px top;
}
#menuToggle {
    top: 72px;
    }
#mainmenu li {
font-size:4em!important;
}
#container {
font-size: 1.6em!important;
-ms-grid-rows: 528px 3fr 1fr 3fr 528px;
    grid-template-rows: 528px 3fr 1fr 3fr 528px;
-ms-grid-columns: 48px 50% 1fr;
    grid-template-columns: 48px 50% 1fr;
}
}
@media all and (min-device-width: 1050px) and (orientation:portrait){
body {
background-position: -416px top;
}
#menuToggle {
    top: 72px;
    }
#mainmenu li {
font-size: 4em!important;
}
#container {
font-size: 1.6em!important;
-ms-grid-rows: 528px 3fr 1fr 3fr 528px;
    grid-template-rows: 528px 3fr 1fr 3fr 528px;
-ms-grid-columns: 48px 50% 1fr;
    grid-template-columns: 48px 50% 1fr;
}
}