/*BASE*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, nav, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

a:focus {
  outline: none;
  outline: none;
}

* {
  cursor: default;
}

a {
  cursor: pointer;
}


img {
    max-width: 100%;
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;}

@font-face {
    font-family: 'montserratbold';
    src: url('../font/montserrat-bold-webfont.eot');
    src: url('../font/montserrat-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/montserrat-bold-webfont.woff2') format('woff2'),
         url('../font/montserrat-bold-webfont.woff') format('woff'),
         url('../font/montserrat-bold-webfont.ttf') format('truetype'),
         url('../font/montserrat-bold-webfont.svg#montserratbold') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'lato';
    src: url('../font/lato-webfont.eot');
    src: url('../font/lato-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/lato-webfont.woff2') format('woff2'),
         url('../font/lato-webfont.woff') format('woff'),
         url('../font/lato-webfont.ttf') format('truetype'),
         url('../font/lato-webfont.svg#latolight') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'latoblack';
    src: url('../font/lato-black-webfont.woff2') format('woff2'),
         url('../font/lato-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'latoregular';
    src: url('../font/lato-regular-webfont-webfont.woff2') format('woff2'),
         url('../font/lato-regular-webfont-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'montserratmedium';
    src: url('../font/montserrat-medium-webfont.woff2') format('woff2'),
         url('../font/montserrat-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
  /*background-color: #ECECEC;*/
}

/*NAVIGATION, FIXED + ALL PAGE*/

a.menu {
  text-decoration: none;
  color: #000;
  font-family: "montserratmedium";
  font-size: 17px;
  position: fixed;
  z-index: 990;
}

a.home {
  top: 40px;
  left: 50px;
}

a.projects, a.about {
  top: 40px;
  padding-bottom: 8px;
}

a.about {
  right: 50px;
}

a.projects {
  right: 130px;
}

a.menu div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  opacity: 0;
  transition: all 0.5s ease;
}

a.menu:hover div {
  opacity: 1;
  transition: all 0.5s ease;
}

/*LES PROJETS*/

section#selected {
  width: calc(100% - 100px);
  height: auto;
  position: relative;
  margin: 100px 50px 0px 50px;
}


section#selected article {
  padding-top: 30%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  float: left;
  cursor: pointer;
  margin: 15px 0;
  position: relative;
}

section#selected article#projet1 {
  width: calc(60% - 15px);
  margin-right: 15px;
}

section#selected article#projet2 {
  width: calc(40% - 15px);
  margin-left: 15px;
  background-color: #EDEBE4;
}

section#selected article#projet3, section#selected article#projet7 {
  width: calc(50% - 15px);
  margin-right: 15px;
  background-color: #EEEDEB;
}

section#selected article#projet4, section#selected article#projet8 {
  width: calc(50% - 15px);
  margin-left: 15px;
}

section#selected article#projet5 {
  width: calc(40% - 15px);
  margin-right: 15px;
  background-color: #A6D8E3;
}

section#selected article#projet6 {
  width: calc(60% - 15px);
  margin-left: 15px;
}

section#selected article h4 {
  margin: 0px;
  padding: 0px;
  color: #000;
  font-family: "montserratmedium";
  font-size: 17px;
  text-transform: capitalize;
  position: absolute;
  cursor: pointer;
  width: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  z-index: 600;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
}

section#selected h4 span {
  font-size: 13px;
}

section#selected article p {
  margin: 0px;
  padding: 0px;
  padding-bottom: 3px;
  color: #000;
  font-family: "montserratmedium";
  font-size: 50px;
  text-transform: capitalize;
  cursor: pointer;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.2s ease;
}

section#selected article:hover p {
  opacity: 1;
  transition: all 0.5s ease;
}

section#selected article:hover h4 {
  opacity: 0;
  transition: all 0.2s ease;
}



/*PAGE PROJET*/

h3 {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0px;
  padding: 0px;
  color: #000;
  font-family: "montserratmedium";
  font-size: 17px;
  text-transform: capitalize;
}

h3 span {
  font-size: 13px;
}

a#next {
  position: fixed;
  bottom: 32px;
  right: 50px;
  margin: 0px;
  padding: 0px;
  color: #000;
  font-family: "montserratmedium";
  font-size: 14px;
  text-transform: capitalize;
  z-index: 990;
  text-decoration: none;
  padding-bottom: 8px;
}

a#next div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  opacity: 0;
  transition: all 0.5s ease;
}

a#next:hover div {
  opacity: 1;
  transition: all 0.5s ease;
}

a#next span {
  font-size: 11px;
}


a#previous {
  position: fixed;
  bottom: 32px;
  left: 50px;
  margin: 0px;
  padding: 0px;
  color: #000;
  font-family: "montserratmedium";
  font-size: 14px;
  text-transform: capitalize;
  z-index: 990;
  text-decoration: none;
  padding-bottom: 8px;
}

a#previous div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
  opacity: 0;
  transition: all 0.5s ease;
}

a#previous:hover div {
  opacity: 1;
  transition: all 0.5s ease;
}

a#previous span {
  font-size: 11px;
}

section#projet img {
  width: 100%;
  height: auto;
} 

section#projet img.small {
  display: none;
}


@media screen and (min-width: 500px) {

  section#projet img.large {
    display: inline-block;
  }

  section#projet img.small {
    display: none;
  }

}

@media screen and (max-width: 500px) {

  section#projet img.large {
    display: none;
  }

  section#projet img.medium {
    display: none;
  }

  section#projet img.small {
    display: inline-block;
  }

}


/**/


.loader, .loaderhome {
  position : fixed;
  z-index: 999;
  background-color: #FFF;
  top : 0px;
  left : 0px;
  height : 100%;
  width : 100%;
  overflow: hidden;
}


.loader div {
  font-family: "montserratmedium";
  color: #000;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader div p:nth-of-type(1) {
  font-size: 100px;
  text-align: center;
}

.loader div p:nth-of-type(2) {
  font-size: 15px;
  letter-spacing: 1px;
  margin-top: 20px;
  text-align: center;
}





/**/

p#trigger-overlay {
  position: fixed;
  z-index: 997;
  top: 6px;
  left: 20px;
  font-family: "montserratmedium";
  color: #000;
  text-transform: uppercase;
  font-size: 30px;
  cursor: pointer;
  display: none;
}

/* Overlay style */
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255,255,255,1);
  z-index: 998;
}

/* Overlay closing cross */
.overlay .overlay-close {
  position: fixed;
  z-index: 999;
  top: 5px;
  left: 22px;
  font-family: "montserratmedium";
  color: #000;
  text-transform: uppercase;
  font-size: 30px;
  cursor: pointer;
}

/* Menu style */
.overlay nav {
  text-align: center;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.overlay ul li {
  padding: 10px 0px;
}

.overlay ul li a {
  font-family: "montserratmedium";
  font-size: 25px;
  font-weight: 300;
  display: block;
  color: #000;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

/* Effects */

.container {
  background: #fff;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.container.overlay-open {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

.overlay-contentscale {
  visibility: hidden;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
  transition: transform 0.5s, visibility 0s 0.5s;
}

.overlay-contentscale.open {
  visibility: visible;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

@media screen and (max-height: 30.5em) {
  .overlay nav {
    height: 70%;
    font-size: 34px;
  }
  .overlay ul li {
    min-height: 34px;
  }
}

/* CONTACT */

div#contact {
  position: absolute;
  left: 50px;
  top: 35%;
}

h1#contact {
  margin: 0px;
  padding: 0px;
  color: #000;
  font-family: "montserratmedium";
  font-size: 60px;
  z-index: 990;
  text-decoration: none;
}


p#contact {  
  margin-top: 15px;
  padding: 0px;
  color: #000;
  font-family: "montserratmedium";
  font-size: 30px;
  z-index: 990;
  text-decoration: none;
}

p#contact a {
  text-decoration: underline;
  color: #2610E3;
}


/* PAGE BLANCHE -900px */
div#format {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #FFF;
  z-index: 999;
  display: none;
}
div#format p {
  color: #000;
  font-family: "montserratmedium";
  font-size: 15px;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 900px) {
  div#format {
    display: inline-block;
  }
}


/*RESPONSIVE*/

/*@media screen and (min-width: 600px) {
  div#menu_s {
    display: none;
  }
}
*/
/*@media screen and (max-width: 600px) {

  a#next {
    font-size: 13px;
    bottom: 15px;
    right: 20px;
  }

  a#next span {
    font-size: 10px;
  }

  a#previous {
    font-size: 13px;
    bottom: 15px;
    left: 20px;
  }

  a#previous span {
    font-size: 10px;
  }

  a#next div, a#previous div {
    display: none;
  }

  h3 {
    top: 15px;
    font-size: 14px;
  }

  h3 span {
    font-size: 10px;
  }

  a.home {
    display: none;
  }

  a.projects, a.about {
    display: none;
  }

  div#menu_s {
    width: 20px;
    height: 12px;
    background-color: #000;
    position: fixed;
    top: 15px;
    left: 20px;
    z-index: 990;
  }

  p#trigger-overlay {
    display: inline-block;
  }

  section#selected article {
    clear: both;
    margin: 0px;
  }

  section#selected article#projet2 {
    margin-left: 0px;
  }

}
*/