/* Portfolio CSS */

/*Pages*/
html{height:100%;overflow: hidden}
body{color:#717171;height:100%;font-family:'DINLight', "Trebuchet Ms", Arial, Helvetica, sans-serif;font-size:16px;background:#f3f3f3;overflow: hidden;}
* {margin:0;padding:0;border:none;list-style-type:none}
.clr {clear:both}
a {color:#010101;text-decoration:none}
a:hover {color:#686868}
#wrapper {min-height:100%;position:relative;font-size:0.8em;overflow: hidden}
#top {/*position:absolute;width:100%;top:0*/text-align:right}
#menu {float:right;margin:20px 10px 0 0}
#menu li {float:left;height:11px;border-right:1px solid #000;font-size:0.937em}
#menu li a {text-transform:uppercase;padding:0 9px;display:block;margin-top:-2px}
#menu li.active a {color:#686868}
#menu li.content {/*display:none;*/}
#menu li.last {border:0}
#middle {padding-top:75px;padding-bottom:120px}
#logo {position:absolute;left:20px;top:75px;text-align: left;}
#logo h1, #photography h1{font-size:1.35em;font-family:'DINMedium', "Trebuchet Ms", Arial, Helvetica, sans-serif;font-weight:normal;line-height:15px;color:#010101}
#logo h1 span, #photography h1 span { font-family:'DINLight';font-weight:normal;font-size:0.741em; line-height:10px;color:#686868}
#logo h1 span #lien, #photography h1 span #lien { font-family:'DINLight';font-weight:normal;font-size:16px; line-height:10px;color:#000000}
#photography h1 {margin-left: 5px}
#page {width:990px;height:500px;margin:auto;overflow:hidden;position:relative}
#footer {position:fixed;bottom:0;width:100%;height:36px;background:#f3f3f3;z-index:10}
#footer .inner {margin:auto;width:900px}
#footer p.info {float:left;width:20%;}
#footer td.info {white-space: nowrap;}
#footer .tools {height:30px;width:100%;padding-bottom: 0px}
#footer .tools td {width:15%;text-align:center}
#footer .tools td.nav {width:40%;border:1px solid #d0d0d0;border-bottom:0;border-top:0}
#footer .tools a, #footer .tools span {}
#footer a.home {}
#footer a.prev {float:left;margin-left:25px}
#footer span.current {margin:0}
#footer span.total {margin:0;color:#000}
#footer a.next {float:right;margin-right:25px}
#footer a.audio {display:none}
#footer a.mentions, #footer span.mentions {white-space: nowrap;}
#footer a.fullscreen {}
#footer .tools span.bar {display:block;height:12px;border:1px solid #d0d0d0;border-bottom:0;border-top:0;border-right:0;float:right;margin-right:-18px;margin-top:2px}
#footer .tools span.bar2 {margin-right:0px}

#footer .about a.prev {display:none}
#footer .about a.next {display:none}
#slides {overflow:hidden;height:513px;text-align:center;position:relative;padding-top:30px;width:990px;margin:auto}
/*#slides img {width:700px}*/
#slides .slide {/*height:500px;*/line-height:500px;width:990px;/*background:#f3f3f3*/padding-left:0px !important}
#slides .slide img {visibility:visible;vertical-align:middle;border:1px solid #FFFFFF;max-width:100%}
#slides .slide.in img {-moz-box-shadow:-4px 4px 4px #e6e6e6;-webkit-box-shadow:-4px 4px 4px #e6e6e6;-o-box-shadow:-4px 4px 4px #e6e6e6;box-shadow: -4px 4px 4px #e6e6e6;}
#slides .slide.out {left:100%;position: absolute;}
#slides .slide.out img {-moz-box-shadow:none;-webkit-box-shadow:none;-o-box-shadow:none;box-shadow:none;border:0px solid #f3f3f3;}
#slides .slide img.noshadow {-moz-box-shadow:none;-webkit-box-shadow:none;-o-box-shadow:none;box-shadow:none;border:0;}
#slides .off {display:none}
.horizontal{background-color:#f3f3f3;}
.vertical{max-height:469px;}

/*Projets*/

#projets {width:990px;margin:15px auto;position: relative;min-height: 470px}
#projets .item a.img  {display:block;position:relative;overflow:hidden;width:233px;height:131px;background:#e1e1e1;}
/*.projet .img a {float:left}*/
#projets .item {width:233px;height:203px;margin:-1px 7px 0;float:left;text-align:center;padding:15px 0;border:1px solid #d3d3d3;border-left:0;border-right:0;border-bottom:0}
#projets .item img {}
#projets .item h2 {font-family:'DINMedium', "Trebuchet Ms", Arial, Helvetica, sans-serif;margin-top:10px;font-size:1.05em;font-weight:normal}
#projets .item h2 a{color:#686868;text-decoration:none}
#projets .item h2 a:hover {color:#000}
#projets .item span.desc {font-size:1.05em}
.projet  {margin-top:-30px;width:990px;margin:auto}
.projet  h2, .projet  p.desc {font-size:1em;text-align:center}
.projet  h2 {margin-top: 2px;font-family:'DINMedium', "Trebuchet Ms", Arial, Helvetica, sans-serif;font-weight: normal}
#container {max-height: calc(100vh - 75px);overflow: hidden}
#container, #projets .page {position:absolute;width:990px;background:#f3f3f3;left:0;min-height:468px}
#projets .page {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#projets .page.out  {left:100%}
#projets .page.in {left:0}

/*About, Legal*/

#about, #legal, #photography {width:990px;margin:15px auto;overflow:hidden;}
#about h2, #legal h2, #photography h2 {margin:-1px 7px 0 0px;font-family:'DINMedium', "Trebuchet Ms", Arial, Helvetica, sans-serif;font-size:1.05em;font-weight:normal;}
#about .col, #legal .col, #photography .col {width:233px;border:1px solid #d3d3d3;border-left:0;border-right:0;border-bottom:0;float:left; margin:0px 7px 0;padding:15px 0px 0px 0px;}

#about .cola, #legal .cola, #photography .cola {width:464px;margin-left:20px;border:1px solid #d3d3d3;border-left:0;border-right:0;border-bottom:0;float:left; padding:15px 0px 0px 0px;margin:0px 7px 0px 0px;}
#about .cola p, #legal .cola p, #photography .cola p{margin:-1px 0px 0 0px;padding:15px 0; text-align:justify}
#about .col p, #legal .col p, #photography .col p{padding:15px 0; text-align:justify}

#about .col img , #legal .col img, #photography .col img {width:233px;margin-bottom:15px}
#about .col ul, #legal .col ul, #photography .col ul{margin:-1px 7px 0 0px;padding:15px 0;}

/*About*/

#photography {max-width:990px;margin:15px auto;overflow:hidden;}
#comingsoon{position:absolute;left:20px;padding-top:75px;}


@media (max-width:1337px) {
  #logo {
    top:20px;
  }
}
@media (max-width:987px) {
  #top {
    width: 750px;
    margin: auto;
    position: relative;
  }
  #logo {
    left: 10px;
  }
  #menu {
    margin-right: 0px;
  }
  #photography, #about, #container, #projets, #projets .page, .projet, #slides .slide, #slides, #page, #footer .inner  {
    padding-left:4px;
    width:750px;
  }
  #page {
    /*overflow:visible !important;*/
  }
}
@media (max-width:757px) {
  #photography, #about, #container, #projets, #projets .page, .projet, #slides .slide, #slides, #page, #footer .inner  {
    width:524px;
  }
}
@media (max-height:757px) {
  #slides {
    padding-top: 0px;
    /*height:400px;*/
  }
  #slides .slide {
    height: 100%;
    line-height: 100%;
  }
  #slides .slide:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  #slides .slide img {
    max-height: calc(100% - 30px);
  }
}
@media (max-width:527px) {
  #photography, #about, #container, #projets, #projets .page, .projet, #slides .slide, #slides, #page, #footer .inner  {
    width:291px;
  }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  #wrapper {
    height: 100%;
  }
  #middle {
    height: 100%;
    padding-top: 60px;
    padding-bottom: 50px;
    box-sizing: border-box;
  }
  #photography, #about, #container, #projets, #projets .page, .projet, #slides .slide, #slides, #page, #footer .inner  {
    width:291px;
  }

  #top {
    width: 100%;
    margin: auto;
    position: relative;
  }
  #logo {
    left: 10px;
    font-size: 0.8em;
    top: 5px;
    width: 25%;
  }
  #menu {
    font-size: 0.8em;
    margin-right: 0px;
    margin-top: 10px;
  }
  #photography, #about, #container, #projets, #projets .page, .projet, #slides .slide, #slides, #page, #footer .inner  {
    padding-left:4px;
    width:414px;
    max-width: 100%;
  }
  #projets {
    height: auto;
    padding: 0;
  }
  #projets:after {
    content: "";
    clear: both;
  }
  #page {
    overflow-y:visible !important;
    height: 100%;
    max-width: 100%;
    min-height: auto;
    padding: 0;
  }
  #container {
    max-height: 100%;
    /* position: relative; */
    min-height: auto;
    height: 100%;
    padding: 0;
  }
  .projet {
    height: 100%;
    padding: 0;
  }
  #slides {
    max-height: 100%;
    min-height: 100%;
    padding: 0;
  }
  #slides .slide {
    padding: 0;
  }
  #slides .slide img {
    max-height: 80%;
    max-width: 80%;
  }
  #page .page {
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap:         wrap;
    -webkit-justify-content: center; /* Safari */
    justify-content:         center;
    -webkit-align-content: flex-start; /* Safari */
    align-content:         flex-start;
    padding: 0;
  }
}
/*shimmy shimmy yo !-*/
.shimmer {
  text-align: center;
  color: rgba(255,255,255,0.1);
  background: -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
  background: -moz-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
  background: gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff));
  -webkit-background-size: 125px 100%;
  -moz-background-size: 125px 100%;
  background-size: 125px 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-animation-name: shimmer;
  -moz-animation-name: shimmer;
  animation-name: shimmer;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: #222;
}
@-moz-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-webkit-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@-o-keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}
@keyframes shimmer {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top right;
  }
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
  #footer {
    font-size: 0.85em;
  }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
  #menu {
    margin-right: 15px;
  }
  /*#projets .item a.img  {width:350px;height:197px;}*/
  /*.projet .img a {float:left}*/
  /*#projets .item {width:350px;height:269px}
  #projets .item img {}*/
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
  #menu {
    margin-right: 13px;
  }
  div#about, div#legal {
      padding-left: 5px !important;
  }
  div#about .cola {
      width: 46.87%;
  }
  div#about .col {
      width: 24.547%;
  }
  div#about .col img {
      width: 100%;
  }
  div#projets {
      margin-left: -4px;
  }
  #projets .item {
      margin: -1px 8px 0 8px;
  }
  #projets .item:nth-of-type(4n) {
      margin-right: 0;
  }
  div#container {
      margin-top: -35px;
  }
  #slides .slide img {
    width: 93%;
  }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
  #projets, #page {
    min-height: 800px;
  }
  #menu {
    margin-right: 7px;
  }
  #menu li.last a {
    padding-right: 0;
  }
  #photography, #about, #container, #projets, #projets .page, .projet, #slides .slide, #slides, #page, #footer .inner {
    padding-left: 0;
  }
  #projets, #projets .page {
    padding-left: 4px;
  }
  #projets .item {
    width: 31%;
    margin: -1px 8px 0;
  }
  div#photography {
      padding-left: 6px !important;
  }
  div#about, div#legal {
      padding-left: 11px !important;
  }
  div#about div.col:last-of-type {
      margin-left: 0;
      line-height: 1.01em
  }
  div#container {
      margin-top: -35px;
  }
  #container .slide {
    background: #f3f3f3;
    /*min-height: ;*/
  }
  #slides .slide img {
    width: 100%;
  }
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}