@charset "UTF-8"; 

/* GLOBAL */
* {margin:0; padding:0;}
html {width:100%; font-size:100%; -webkit-text-size-adjust:100%;}
body {width:100%; display:inline; height:100%; background:#EFE9E3; border-top:12px solid #ddd;}
ol, ul {list-style:none; margin:0;}
ul li {font-family:'Hind', sans-serif; margin:0; padding:0; line-height:50px; display:inline;}
a {outline:none; border:none; text-decoration:none; margin:0; }
img {outline:none; border:none; text-decoration:none; margin:0; display:block; max-width:100%; height:auto;}


/* ALIGNMENT */
.center {float:none; margin-left:auto; margin-right:auto; text-align:center;}
.middle {position:relative; top:50%; float:none;}
.float-left {float:left;}
.float-right {float:right;}
.margin-none {margin:0;}
.margin-bottom {margin-bottom:6%;}
.margin-bottom-full {margin-bottom:3%;}

/* LINK */ 
a:link {color:#bbb; transition:1s; }
a:visited {color:#bbb;}
a:hover {color:#000; transition:1s;}
a:active {color:#bbb;}

/* DESKTOP VERSION */
#global {width:1024px; height:100%;}

/* LOGO */
#logo {width:100%; height:140px;}
.logo-symbol {width:55px; padding-right:0%; padding-top:15%;}
.logo-typo {width:190px; padding-left:0%; padding-top:3%;}


/* MENU */
.menu {text-align:center; width:100%; height:40px; line-height:0px; padding-top:25%; font-size:0.89em; color:#ccc; font-family:'Hind', sans-serif; font-weight:150; }
.menu li {margin-left:16px; font-size:0.9em; letter-spacing:0.12em; text-transform: uppercase;}

/* PHOTOS */
#photo-content {width:100%; height:0%; padding-top:4%;}
.titre {width:100%; height:70px; padding-top:90px;  font-family:"Times"; font-size:1.4em; color:#707070; font-weight:100; font-style: italic; letter-spacing:0.06em;}
.sous-titre {width:70%;margin-left: auto; margin-right: auto; padding-top:70px; padding-bottom:110px; font-size:0.8em; color:#838282; font-family:'Hind', sans-serif; font-weight:100; letter-spacing:0.05em;}
.titre-img {width:70%;margin-left: auto; margin-right: auto; padding-top:10px; padding-bottom:10px; font-size:0.8em; color:#838282; font-family:'Times', sans-serif; font-weight:100; letter-spacing:0.05em;}

.titre-cap {width:100%; height:30px; padding-top:70px; font-size:1.4em; color:#000; font-family:"Hind", sans-serif;  letter-spacing:0.05em;}
.titre-caps {width:100%; height:90px; padding-top:10px; font-size:1.3em; color:#000; font-family:'Hind', sans-serif; font-weight:100; letter-spacing:0.6em;}
.sous-titre-index {width:50%;margin-left: auto; margin-right: auto; padding-top:50px; padding-bottom:70px; font-size:0.8em; color:#838282; font-family:'Hind', sans-serif; font-weight:100; letter-spacing:0.05em;}

.photo-block {float:left; width:100%; height:auto;}

.photo-content-column-1 {float:left; width:48.5%; padding-right:1.5%;height:auto;}
.photo-content-column-2 {float:right; width:48.5%; padding-left:1.5%;height:auto;}

.photo-content-column-full {float:left; width:100%; height:auto; padding-bottom:0px;}

 
 /* BLOCK SLIDER */
#accueil-slider-container {width:100%;}
#accueil-slider-container img {width:100%;}
.show {width:100%; position:relative; height:0; padding-bottom:59%; min-height:100%;}
.slide {position:absolute; width:100%; height:100%; min-height:100%; overflow:hidden; padding-top:4%;}

.img1 {animation:img1 40s infinite; -o-animation:img1 40s infinite; -moz-animation:img1 40s infinite; -webkit-animation:img1 40s infinite;}
.img2 {animation:img2 40s infinite; -o-animation:img2 40s infinite; -moz-animation:img2 40s infinite; -webkit-animation:img2 40s infinite;}
.img3 {animation:img3 40s infinite; -o-animation:img3 40s infinite; -moz-animation:img3 40s infinite; -webkit-animation:img3 40s infinite;}
.img4 {animation:img4 40s infinite; -o-animation:img4 40s infinite; -moz-animation:img4 40s infinite; -webkit-animation:img4 40s infinite;}
.img5 {animation:img5 40s infinite; -o-animation:img5 40s infinite; -moz-animation:img5 40s infinite; -webkit-animation:img5 40s infinite;}
.img6 {animation:img5 40s infinite; -o-animation:img5 40s infinite; -moz-animation:img5 40s infinite; -webkit-animation:img5 40s infinite;}

.fade {animation:fade 10s; -o-animation:fade 10s; -moz-animation:fade 10s; -webkit-animation:fade 10s;}


@-webkit-keyframes img1 {0% {opacity:0;} 10% {opacity:1;} 20% {opacity:1;} 30% {opacity:0;} 40% {opacity:0;} 50% {opacity:0;} 60% {opacity:0;} 70% {opacity:0;} 80% {opacity:0;} 90% {opacity:0;} 100% {opacity:0;}}
@keyframes img1 {0% {opacity:0;} 10% {opacity:1;} 20% {opacity:1;} 30% {opacity:0;} 40% {opacity:0;} 50% {opacity:0;} 60% {opacity:0;} 70% {opacity:0;} 80% {opacity:0;} 90% {opacity:0;} 100% {opacity:0;}}
@-moz-keyframes img1 {0% {opacity:0;} 10% {opacity:1;} 20% {opacity:1;} 30% {opacity:0;} 40% {opacity:0;} 50% {opacity:0;} 60% {opacity:0;} 70% {opacity:0;} 80% {opacity:0;} 90% {opacity:0;} 100% {opacity:0;}}
@-webkit-keyframes img2 {0% {opacity:0;} 10% {opacity:0;} 20% {opacity:0;} 30% {opacity:1;} 40% {opacity:1;} 50% {opacity:0;} 60% {opacity:0;} 70% {opacity:0;} 80% {opacity:0;} 90% {opacity:0;} 100% {opacity:0;}}
@keyframes img2 {0% {opacity:0;} 10% {opacity:0;} 20% {opacity:0;} 30% {opacity:1;} 40% {opacity:1;} 50% {opacity:0;} 60% {opacity:0;} 70% {opacity:0;} 80% {opacity:0;} 90% {opacity:0;} 100% {opacity:0;}} 
@-moz-keyframes img2 {0% {opacity:0;} 10% {opacity:0;} 20% {opacity:0;} 30% {opacity:1;} 40% {opacity:1;} 50% {opacity:0;} 60% {opacity:0;} 70% {opacity:0;} 80% {opacity:0;} 90% {opacity:0;} 100% {opacity:0;}}
@-webkit-keyframes img3 {0% {opacity:0;} 10% {opacity:0;} 20% {opacity:0;} 30% {opacity:0;} 40% {opacity:0;} 50% {opacity:1;} 60% {opacity:1;} 70% {opacity:0;} 80% {opacity:0;} 90% {opacity:0;} 100% {opacity:0;}} 
@keyframes img3 {0% {opacity:0;} 10% {opacity:0;} 20% {opacity:0;} 30% {opacity:0;} 40% {opacity:0;} 50% {opacity:1;} 60% {opacity:1;} 70% {opacity:0;} 80% {opacity:0;} 90% {opacity:0;} 100% {opacity:0;}}
@-moz-keyframes img3 {0% {opacity:0;} 10% {opacity:0;} 20% {opacity:0;} 30% {opacity:0;} 40% {opacity:0;} 50% {opacity:1;} 60% {opacity:1;} 70% {opacity:0;} 80% {opacity:0;} 90% {opacity:0;} 100% {opacity:0;}} 
@-webkit-keyframes img4 {0% {opacity:0;} 10% {opacity:0;} 20% {opacity:0;} 30% {opacity:0;} 40% {opacity:0;} 50% {opacity:0;} 60% {opacity:0;} 70% {opacity:1;} 80% {opacity:1;} 90% {opacity:0;} 100% {opacity:0;}}
@keyframes img4 {0% {opacity:0;} 10% {opacity:0;} 20% {opacity:0;} 30% {opacity:0;} 40% {opacity:0;} 50% {opacity:0;} 60% {opacity:0;} 70% {opacity:1;} 80% {opacity:1;} 90% {opacity:0;} 100% {opacity:0;}}
@-moz-keyframes img4 {0% {opacity:0;} 10% {opacity:0;} 20% {opacity:0;} 30% {opacity:0;} 40% {opacity:0;} 50% {opacity:0;} 60% {opacity:0;} 70% {opacity:1;} 80% {opacity:1;} 90% {opacity:0;} 100% {opacity:0;}}
@-webkit-keyframes img5 {0% {opacity:1;} 10% {opacity:0;} 20% {opacity:0;} 30% {opacity:0;} 40% {opacity:0;} 50% {opacity:0;} 60% {opacity:0;} 70% {opacity:0;} 80% {opacity:0;} 90% {opacity:1;} 100% {opacity:1;}}
 @keyframes img5 {0% {opacity:1;} 10% {opacity:0;} 20% {opacity:0;} 30% {opacity:0;} 40% {opacity:0;} 50% {opacity:0;} 60% {opacity:0;} 70% {opacity:0;} 80% {opacity:0;} 90% {opacity:1;} 100% {opacity:1;}}
@-moz-keyframes img5 {0% {opacity:1;} 10% {opacity:0;} 20% {opacity:0;} 30% {opacity:0;} 40% {opacity:0;} 50% {opacity:0;} 60% {opacity:0;} 70% {opacity:0;} 80% {opacity:0;} 90% {opacity:1;} 100% {opacity:1;}}

@-webkit-keyframes fade {0% {opacity:0;} 10% {opacity:1;} 30% {opacity:1;} 40% {opacity:1;} 50% {opacity:1;} 60% {opacity:1;} 70% {opacity:1;} 80% {opacity:1;} 90% {opacity:1} 100% {opacity:1;} 100% {opacity:1;} 300% {opacity:1;}}
@-moz-keyframes fade {0% {opacity:1;} 10% {opacity:1;} 20% {opacity:1;} 30% {opacity:1;} 40% {opacity:1;} 50% {opacity:1;} 60% {opacity:1;} 70% {opacity:1} 80% {opacity:1;} 90% {opacity:1;} 100% {opacity:1;} 300% {opacity:1;}}


/* LIGHTBOX */
.lightbox {display:none; position:fixed; z-index:2000; width:100%; height:100%; text-align:center; top:0; left:0; background-color:rgba(165, 160, 154, 0.84); }
.lightbox img {max-width:100%; max-height:100%; position:relative; top:49%; transform: translateY(-49%); float:none; margin-left:auto; margin-right:auto;}
.lightbox:target {outline:none; display:block;}

 
 /* CONTACT */
.container-text{width:100%; height:150px; padding-bottom:0px}
.container-text li{font-family: Hind; font-size:14px; letter-spacing:1.5px; list-style-type: none; line-height:25px; top:10px; position:relative;}

.container-a-propos{width:100%; height:;}
.container-a-propos p{font-family: Hind; font-size:13px; letter-spacing:0.2px; list-style-type: none; line-height:27px; margin:95px 40px 40px 40px;}

.container-mentions{width:100%; height:auto;top:50%; line-height:10px;}
.container-mentions p{font-family: Hind; color:#555; font-size:11px; letter-spacing:0.3px; line-height:20px;padding-bottom:40px;}

/* FOOTER */
#footer-content {float:left; width:100%; height:70px; line-height:0px; margin-top:6%; color:#ccc; font-family:'Hind'; font-weight:400; text-transform: uppercase; letter-spacing:1px; font-size:12px;}
.footer-content-1 {float:left; width:100%; height:50px; margin-bottom:2%; text-transform: uppercase; letter-spacing:1px; font-size:12px;}
.top-icon-image {width:40px; padding-bottom:5%; }



figure {width:100%; height:100%; overflow:hidden; position:relative; margin-bottom:0px;}
figcaption {position:absolute; right:0; display:block; width:30%; padding:5%; background-color:rgba(0,0,0,0.7); -moz-transform:translateY(50%); -o-transform:translateY(50%); -webkit-transform:translateY(50%); transform:translateY(50%); z-index:2000;}
figure:hover figcaption {bottom:0; -moz-transform:translate(0); -o-transform:translate(0); color:#bbb; -webkit-transform:translate(0); transform:translate(0); -moz-transition:.5s; -o-transition:.5s; -webkit-transition:.5s; transition:.5s;}
figcaption h1 {margin:0; font-family:'Times' sans-serif; font-size:0.75em; color:#FFF; letter-spacing:0.1em; margin-top:0px; font-weight:300; text-transform: uppercase;}


/* END DESKTOP VERSION */



/* TABLET PORTRAIT */
@media only screen and (min-width:764px) and (max-width:1023px) and (orientation:portrait) {
#global {width:96%;}

/* END TABLET PORTRAIT */
}	





/* TABLET LANDSCAPE */
@media only screen and (min-width:764px) and (max-width:1024px) and (orientation:landscape) {
#global {width:96%;}
/* END TABLET LANDSCAPE */
}





/* SMARTPHONE PORTRAIT */
@media only screen and (min-width:321px) and (max-width:767px) and (orientation:portrait) {
#global {width:95%;}
.photo-content-column-1 {float:left; width:100%; padding-right:0; height:auto;}
.photo-content-column-2 {float:left; width:100%; padding-left:0;height:auto;}

#titre  {padding-top:30px; height:100px;}
.sous-titre  {width:70%;}

.menu {text-align: left; width:100%; height:40px; line-height:10px; padding-top:20%; font-size:0.8em; color:#ccc; font-family:'Hind', sans-serif; font-weight:400; }
.menu li {margin-right:0px; font-size:0.80em; letter-spacing:0.01em; text-transform: uppercase;}

figure {width:100%; height:100%; margin-bottom:12px;}
figcaption:hover {position:absolute; right:0; width:30%; padding:5%; background-color:rgba(0,0,0,0.7); -moz-transform:translateY(50%); -o-transform:translateY(50%); -webkit-transform:translateY(50%); transform:translateY(50%); z-index:2000;}
figcaption h1 {margin:0; font-family:'Times' sans-serif; font-size:0.75em; color:#FFF; letter-spacing:0.1em; margin-top:0px; font-weight:300; text-transform: uppercase;}

/* END SMARTPHONE PORTRAIT */
}







/* SMARTPHONE LANDSCAPE */
@media only screen and (min-width:321px) and (max-width:767px) and (orientation:landscape){
#global {width:95%;}
.photo-content-column-1 {float:left; width:100%; padding-right:0; height:auto;}
.photo-content-column-2 {float:left; width:100%; padding-left:0;height:auto;}

#titre  {padding-top:50px; height:60px;}
.sous-titre  {width:70%;}
/* END SMARTPHONE LANDSCAPE */
}





/* MINI SMARTPHONE PORTRAIT */
@media only screen and (max-width:320px) and (orientation:portrait) {
#global {width:98%;}
.photo-content-column-1 {float:left; width:100%; padding-right:0; height:auto;}
.photo-content-column-2 {float:left; width:100%; padding-left:0;height:auto;}

/* END SMARTPHONE PORTRAIT */
}






/* MINI SMARTPHONE LANDSCAPE */
@media only screen and (max-width:564px) and (orientation:landscape){
#global {width:98%;}
.photo-content-column-1 {float:left; width:100%; padding-right:0; height:auto;}
.photo-content-column-2 {float:left; width:100%; padding-left:0;height:auto;}
/* END SMARTPHONE LANDSCAPE */
}