@import 'reset.min.css';
@import 'text.min.css';

@import 'grid/mobile.min.css' (max-width: 720px);
@import 'grid/720.min.css' (min-width: 721px) and (max-width: 960px);
@import 'grid/960.min.css' (min-width: 961px) and (max-width: 1040px);
@import 'grid/1080.min.css' (min-width: 1041px) and (max-width: 1320px);
@import 'grid/1280.min.css' (min-width: 1321px);

@import 'common.css';

#home {position:relative;float:left;width:100%;z-index:2;overflow:hidden;}
/*#home:before {position:absolute;content:'';right:-10%;bottom:-200px;width:80%;height:500px;background:url(../medias/img/pontb.png) no-repeat top left;background-size:100%;z-index:1;opacity:.8;}*/
#home ul#visuels {position:fixed;top:0;left:0;width:100%;}
#home ul#visuels li {position:absolute;top:35%;left:0;width:100%;}
#home ul#visuels li p {float:left;width:100%;text-align:center;}
#home ul#visuels li p.titre {font:normal 3.2em/.9 'AvenirLTStd-Light', cursive;color:#fff;text-shadow:4px 4px 3px rgba(0, 0, 0, 0.6);}
#home ul#visuels li p.titre span {font-size:1.4em;}

#home form {position:absolute;bottom:15%;left:50%;width:50%;margin-left:-25%;padding:20px;transition:.6s ease;-webkit-transition:.6s ease;-moz-transition:.6s ease;-ms-transition:.6s ease;-o-transition:.6s ease;}
#home form:hover {background:rgba(0,0,0,.6);}
#home form p {float:left;position:relative;width:30%;margin:0 2px 0 0;}
#home form p input {float:left;position:relative;z-index:1;width:100%;border:0;background:#fff;padding:12px 20px;height:38px;font:normal 1em/1 'AvenirLTStd-Light', sans-serif;color:#555;}
#home form p.datedu:after, #home form p.dateau:after {position:absolute;content:'';top:6px;right:10px;width:24px;height:24px;background:url(../medias/img/pixel.png) no-repeat -77px 0;z-index:2;}
#home form p.submit {width:38%;}
#home form p.submit input {background:#78a400;color:#fff;font:700 1em/.7 "Merriweather",sans-serif;cursor:pointer;}
#home form p.submit:after {position:absolute;content:'';top:13px;left:93%;width:34px;height:34px;background:url(../medias/img/pixel.png) no-repeat -101px 0;z-index:2;}

#home form .more {float:left;width:100%;padding:10px;overflow:hidden;max-height:0;;transition:.6s ease-in;-webkit-transition:.6s ease-in;-moz-transition:.6s ease-in;-ms-transition:.6s ease-in;-o-transition:.6s ease-in;}
#home form:hover .more {max-height:100em;}
#home form .more p {float:left;width:100%;}
#home form .more input {float:left;width:8%;margin:0;}
#home form .more p input {width:auto;}
#home form .more label {float:left;width:92%;color:#fff;font-size:.9em;}
#home form .more p label {padding:12px 0 0 10px;}
#home form .more ul {float:left;width:100%;margin-top:5px;}
#home form .more ul li {float:left;width:20%;}
#home form .more ul li input {margin-top:4px;}
#home form .more ul li label {padding:2px 5px 0;}
#home form .more ul li .legend {font:700 italic 1em/1 "Merriweather",sans-serif;color:#fff;}

section {position:relative;float:left;width:100%;z-index:5;}

/*** ZONE 1 ***/
section#zone1 {background:#000;}
section#zone1 article {overflow:hidden;}
section#zone1 article #atouts {position:relative;float:left;transition:.6s ease;}
/*section#zone1 article #atouts.culture {width:140%;margin-left:-10%;}
section#zone1 article #atouts.nature {width:140%;margin-left:-30%;}*/
section#zone1 article #atouts h2 {position:absolute;width:300px;height:300px;top:50%;left:50%;margin-top:-150px;margin-left:-150px;background:#fff;padding:80px 20px;border-radius:50%;text-align:center;font:700 1.5em/1 "Merriweather",sans-serif;z-index:4;transition:.6s ease;-webkit-transition:.6s ease;-moz-transition:.6s ease;-ms-transition:.6s ease;-o-transition:.6s ease;}
section#zone1 article #atouts h2:before {position:absolute;content:'';width:112%;height:112%;top:-6%;left:-6%;border-radius:50%;background:#fff;opacity:.4;z-index:-1}
section#zone1 article #atouts h2 span {float:left;position:relative;width:100%;font-size:1.2em;padding-top:20px;margin-top:20px;font-style:italic;font-weight:900;}
section#zone1 article #atouts h2 span:before {position:absolute;content:'';top:0;left:50%;width:60%;height:1px;margin-left:-30%;background:#9d7c5c;}
section#zone1 article .w50 {position:relative;float:left;width:50%;overflow:hidden;z-index:1;transition:.6s ease;-webkit-transition:.6s ease;-moz-transition:.6s ease;-ms-transition:.6s ease;-o-transition:.6s ease;}

section#zone1 article #atouts .offre {position:absolute;top:50%;margin-top:-300px;left:0;width:100%;padding:20px;opacity:0;transition:.6s ease;-webkit-transition:.6s ease;-moz-transition:.6s ease;-ms-transition:.6s ease;-o-transition:.6s ease;z-index:4}
section#zone1 article #atouts .w50:after {position:absolute;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.6);top:50%;margin-top:-30px;text-align:center;padding:10px 0;font:normal 2em/1 'AvenirLTStd-Light', sans-serif;color:#333;z-index:5;transition:.6s ease;-webkit-transition:.6s ease;-moz-transition:.6s ease;-ms-transition:.6s ease;-o-transition:.6s ease;}
section#zone1 article #atouts .offre .objets {position:relative;float:left;width:320px;padding:0;}
section#zone1 article #atouts .offre .objets li {position:relative;float:left;overflow:hidden;width:100%;margin-bottom:10px;padding:10px;height:190px;border:10px solid #fff;cursor:pointer;transition:.3s ease;-webkit-transition:.3s ease;-moz-transition:.3s ease;-ms-transition:.3s ease;-o-transition:.3s ease;}

section#zone1 article #atouts .offre .objets li figure {position:absolute;top:0;left:0;width:100%;height:170px;overflow:hidden;z-index:1;}
section#zone1 article #atouts .offre .objets li figure img {float:left;position:relative;width:100%;transition:.3s ease;-webkit-transition:.3s ease;-moz-transition:.3s ease;-ms-transition:.3s ease;-o-transition:.3s ease;}
section#zone1 article #atouts .offre .objets li:hover figure img {transform:scale(1.15);}

section#zone1 article #atouts .offre .objets li h3 {position:absolute;margin:0;z-index:2;bottom:0;left:0;font:700 1.1em/1 "Merriweather",sans-serif;color:#fff;padding:20px;background: rgba(0,0,0,0);background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(19,19,19,1) 100%);background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(19,19,19,1)));background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(19,19,19,1) 100%);background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(19,19,19,1) 100%);background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(19,19,19,1) 100%);background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(19,19,19,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#131313', GradientType=0 );transition:.3s ease;-webkit-transition:.3s ease;-moz-transition:.3s ease;-ms-transition:.3s ease;-o-transition:.3s ease;}
section#zone1 article #atouts .offre .objets li:hover h3 {padding:40px 20px;}
section#zone1 article #atouts .offre .objets li h3:after {position:absolute;content:'en savoir +';left:20px;bottom:-30px;width:100%;font:normal .7em/1 'AvenirLTStd-Light',sans-serif;transition:.3s ease;-webkit-transition:.3s ease;-moz-transition:.3s ease;-ms-transition:.3s ease;-o-transition:.3s ease;}
section#zone1 article #atouts .offre .objets li:hover h3:after {bottom:25px;}

section#zone1 article #atouts #nature .offre {left:auto;right:0;}
section#zone1 article #atouts #nature .offre .objets {float:right;}
section#zone1 article #atouts #nature:after {content:"»";right:20px;}
section#zone1 article #atouts #culture:after {content:"«";left:20px;}

section#zone1 article #atouts.culture #culture .offre {left:3%;opacity:1;}
section#zone1 article #atouts.nature #nature .offre {right:3%;opacity:1;}
section#zone1 article #atouts.culture .w50:after, section#zone1 article #atouts.nature .w50:after {opacity:0;}

section#zone1 article #atouts .intro {position:absolute;top:5%;left:28%;width:40%;min-width:480px;padding:20px;color:#fff;opacity:0;transition:.6s ease .3s;-webkit-transition:.6s ease .3s;-moz-transition:.6s ease .3s;-ms-transition:.6s ease .3s;-o-transition:.6s ease .3s;z-index:4}
section#zone1 article #atouts .intro h4 {font:700 italic 2.4em/1 "Merriweather",sans-serif;margin-bottom:20px;}
section#zone1 article #atouts .intro p {font:300 .9em/1.2 "AvenirLTStd-Light",sans-serif;}
section#zone1 article #atouts .intro p.lien {text-align:center;margin-top:40px;}
section#zone1 article #atouts .intro p.lien a {position:relative;display:inline-block;width:auto;padding:14px 20px;font:700 1em/1 "AvenirLTStd-Light",sans-serif;color:#fff;background:#9d7c5c;text-transform:uppercase;overflow:hidden;transition:.3s ease;-webkit-transition:.3s ease;-moz-transition:.3s ease;-ms-transition:.3s ease;-o-transition:.3s ease}
section#zone1 article #atouts .intro p.lien a:after {position:absolute;content:"→";right:-40px;top:12px;font-size:1.1em;transition:.3s ease;-webkit-transition:.3s ease;-moz-transition:.3s ease;-ms-transition:.3s ease;-o-transition:.3s ease}
section#zone1 article #atouts .intro p.lien a:hover {padding-right:40px;}
section#zone1 article #atouts .intro p.lien a:hover:after {right:10px;}

section#zone1 article #atouts #nature .intro {text-align:right;left:auto;right:28%;}

section#zone1 article #atouts.culture #culture .intro {left:32%;opacity:1;}
section#zone1 article #atouts.nature #nature .intro {right:32%;opacity:1;}


section#zone1 article #atouts.culture #culture {width:80%;}
section#zone1 article #atouts.culture #nature {width:20%;opacity:.6;}
section#zone1 article #atouts.culture h2 {left:80%;}

section#zone1 article #atouts.nature #culture {width:20%;opacity:.6;}
section#zone1 article #atouts.nature #nature {width:80%;}
section#zone1 article #atouts.nature h2 {left:20%;}

section#zone1 article .w50 .fnd {position:relative;float:left;z-index:1;left:-30%;opacity:.5;transition:.6s ease;-webkit-transition:.6s ease;-moz-transition:.6s ease;-ms-transition:.6s ease;-o-transition:.6s ease;}
section#zone1 article #atouts.culture .fnd {left:0}
section#zone1 article #atouts.nature .fnd {left:0}
section#zone1 article #culture .fnd {background:url(../medias/photos/caverne2.jpg) no-repeat top left fixed;background-size:100%;}
section#zone1 article #nature .fnd {background:url(../medias/photos/gorges.jpg) no-repeat 0 -120px fixed;background-size:100%;}

/*** ZONE 2 ***/
section#zone2 {background:#fff;}
section#zone2 article {position:relative;float:none;padding:100px 0 80px;}
section#zone2 article #focus {position:relative;background:url(../medias/img/fndagenda2.jpg) no-repeat top left;background-size:cover;border-right:1px solid #fff;z-index:1;}

section#zone2 article #focus h2 {padding:100px 40px 20px;font:700 italic 2.2em/1 "Merriweather",sans-serif;color:#fff;text-align:center;text-shadow:2px 2px 3px rgba(0, 0, 0, 0.6);}
section#zone2 article #focus p.chapeau {font:normal 1.2em/1.2 'AvenirLTStd-Light', sans-serif;color:#fff;text-align:center;padding:0 14%;text-shadow:0 0 2px rgba(0, 0, 0, 0.8);}

section#zone2 article #focus ul {position:absolute;bottom:20px;left:0;width:100%;padding:0 40px;height:140px;background:rgba(255,255,255,.85);}
section#zone2 article #focus ul:before, section#zone2 article #focus ul:after {position:absolute;top:50%;margin-top:-35px;font:300 4em/1 'Merriweather', cursive;transform:rotateY(60deg);-webkit-transform:rotateY(60deg);-moz-transform:rotateY(60deg);-ms-transform:rotateY(60deg);-o-transform:rotateY(60deg);
}
section#zone2 article #focus ul:before {left:0;content:'<'} section#zone2 article #focus ul:after {right:0;content:'>';}
section#zone2 article #focus ul li {float:left;width:50%;height:140px;padding:14px 20px;border-right:2px dotted #999;cursor:pointer;transition:.6s ease;-webkit-transition:.6s ease;-moz-transition:.6s ease;-ms-transition:.6s ease;-o-transition:.6s ease;}
section#zone2 article #focus ul li:hover {background:#fff;}
section#zone2 article #focus ul li:nth-child(1) {border-left:2px dotted #999;}
section#zone2 article #focus ul li h4 {font:700 italic 1.1em/1 "Merriweather",sans-serif;}
section#zone2 article #focus ul li p, section#zone2 article #focus ul li time {font:normal .9em/1.1 'AvenirLTStd-Light', sans-serif;}

section#zone2 article #agendageneral {position:relative;background:#aec279;overflow:hidden;padding:30px;color:#fff;z-index:2;}
section#zone2 article #agendageneral h3 {font:900 1.6em/1 "Merriweather",sans-serif;width:100%;padding:0 20% 0 0;margin:5px 0 15px;}
section#zone2 article #agendageneral h3:after {position:absolute;top:47px;right:14px;width:41px;height:42px;content:'';background:url(../medias/img/pixel.png) no-repeat -36px 0;z-index:2;}
section#zone2 article #agendageneral h3:before {position:absolute;top:28px;right:-10px;width:86px;height:86px;border-radius:50%;background:#fff;z-index:1;}

.screenp2agenda ul {float:left;width:100%;}
.screenp2agenda ul li {float:left;width:50%;padding:3px 0;} 
.screenp2agenda ul li.vosdates {width:100%;padding-top:10px;}
.screenp2agenda ul li a {color:#fff;font:normal .9em/1 'AvenirLTStd-Light', sans-serif;}
.screenp2agenda ul li form {float:left;width:100%;}
.screenp2agenda ul li form p.datedu, .screenp2agenda ul li form p.dateau {float:left;width:49%;}
.screenp2agenda ul li form p.dateau {margin-left:2px;}
.screenp2agenda ul li form p.datedu input, .screenp2agenda ul li form p.dateau input {float:left;position:relative;z-index:1;width:100%;border:0;background:#fff;padding:8px 12px;height:28px;font:normal .85em/1 'AvenirLTStd-Light', sans-serif;color:#555;}
#home form p.datedu:after, #home form p.dateau:after {position:absolute;content:'';top:6px;right:10px;width:24px;height:24px;background:url(../medias/img/pixel.png) no-repeat -77px 0;z-index:2;}
.screenp2agenda ul li form p.submit {text-align:center;}
.screenp2agenda ul li form p.submit input {border:3px solid #fff;padding:8px 12px;font:normal .85em/1 'AvenirLTStd-Light', sans-serif;color:#fff;background:#aec279;cursor:pointer;transition:.6s ease;-webkit-transition:.6s ease;-moz-transition:.6s ease;-ms-transition:.6s ease;-o-transition:.6s ease;}
.screenp2agenda ul li form p.submit input:hover {color:#aec279;background:#fff;}

section#zone2 article #tourfrance {position:relative;background:url(../medias/img/fndtour.jpg) no-repeat top left;background-size:cover;color:#fff;border-top:1px solid #fff;padding:40px;}
section#zone2 article #tourfrance:after {position:absolute;content:'';top:10%;left:-20px;width:160px;height:140px;background:url(../medias/img/bg-tdf.png) no-repeat top left;background-size:cover;z-index:4;}
section#zone2 article #tourfrance h3 {position:absolute;font:700 italic 2em/1 "Merriweather",sans-serif;margin:0;color:#fff;text-align:center;bottom:0;left:0;padding:40px;cursor:pointer;background: rgba(0,0,0,0);background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(19,19,19,.8) 100%);background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(19,19,19,.8)));background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(19,19,19,.8) 100%);background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(19,19,19,.8) 100%);background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(19,19,19,.8) 100%);background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(19,19,19,.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#131313', GradientType=0 );transition:.3s ease;-webkit-transition:.3s ease;-moz-transition:.3s ease;-ms-transition:.3s ease;-o-transition:.3s ease;}

@media screen and (max-height:680px) {
	section#zone2 article #agendageneral {padding-top:10px;}
	section#zone2 article #agendageneral h3 {font-size:1.2em;}
	section#zone2 article #agendageneral h3:before {top:12px;}
	section#zone2 article #agendageneral h3:after {top:32px;}
	section#zone1 article #atouts .offre .objets li {height:170px;}
	section#zone1 article #atouts .offre .objets li figure {height:150px;}
	section#zone1 article #atouts .offre {margin-top:-250px;}
	section#zone2 article #focus {position:relative;background:url(../medias/img/fndagenda2.jpg) no-repeat 0 -180px;background-size:cover;border-right:1px solid #fff;z-index:1;}
	section#zone2 article #tourfrance:after {transform-origin:10% 10%;-webkit-transform-origin:10% 10%;-moz-transform-origin:10% 10%;-ms-transform-origin:10% 10%;-o-transform-origin:10% 10%;transform:scale(.8);-webkit-transform:scale(.8);-moz-transform:scale(.8);-ms-transform:scale(.8);-o-transform:scale(.8);top:10px;}
}

/*** ZONE 3 ***/
section#zone3 {background:#efefef;}
section#zone3 article {position:relative;float:none;padding:100px 0 80px;}
section#zone3 #blog {position:relative;background:url(../medias/photos/baignade.jpg) no-repeat 0 -120px;background-size:100%;}
section#zone3 #blog blockquote {position:absolute;top:30px;left:50px;width:80%;font:500 italic 1.8em/1.2 "Merriweather",sans-serif;color:#fff;}
section#zone3 #blog blockquote:before {position:absolute;content:'«';top:-50px;left:-80px;font-size:3em;transform:rotateY(-33deg) rotateZ(10deg);}
section#zone3 #blog blockquote:after {position:absolute;content:'»';bottom:-45px;right:-10px;font-size:3em;transform:rotateY(33deg) rotateZ(10deg);}
section#zone3 #blog .infos {position:absolute;bottom:0;left:0;width:100%;padding:40px 0;background:#fff;}
section#zone3 #blog .infos .grid_10 {padding:10px 20px;font-size:.9em;}
section#zone3 #blog .infos .grid_10 p.lien {margin-top:15px;}
section#zone3 #blog .infos .grid_10 p.lien a {float:right;width:auto;padding:10px 20px;font:700 1.1em/1 "Merriweather",sans-serif;text-transform:uppercase;color:#fff;background:#d856da;}
#toutblog {background:#d856da;margin-top:-20px;padding:20px;color:#fff;text-align:center;}
#toutblog span:nth-child(1) {float:left;width:100%;font:700 italic 1.4em/1 "Merriweather",sans-serif;margin-bottom:20px;}
#toutblog span:nth-child(2) {display:inline-block;width:auto;padding:10px 20px;border:2px solid #fff;font:500 .85em/1 "Merriweather",sans-serif;text-transform:uppercase;}
section#zone3 #blog .infos figure {position:absolute;top:-120px;left:40px;width:160px;height:160px;border-radius:50%;border:2px solid #fff;overflow:hidden;}
section#zone3 #blog .infos figure img {float:left;width:100%;}
section#zone3 #blog .infos figcaption {position:absolute;top:-70px;left:230px;width:50%;font:normal 1.2em/1 'AvenirLTStd-Light', sans-serif;color:#fff;}
section#zone3 #blog .infos figcaption span {font:700 1.1em/1 'Merriweather', cursive;}

section#zone3 article #vousaussi {position:relative;border-right:1px solid #fff;background:url(../medias/photos/fillette.jpg) no-repeat bottom left;background-size:cover;}
section#zone3 article #vousaussi h2 {position:absolute;width:270px;height:270px;top:30%;left:50%;margin-top:-135px;margin-left:-135px;background:#fff;padding:60px 30px;border-radius:50%;text-align:center;font:700 1.1em/1 "Merriweather",sans-serif;z-index:4;transition:.6s ease;-webkit-transition:.6s ease;-moz-transition:.6s ease;-ms-transition:.6s ease;-o-transition:.6s ease;}
section#zone3 article #vousaussi h2:before {position:absolute;content:'';width:112%;height:112%;top:-6%;left:-6%;border-radius:50%;background:#fff;opacity:.4;z-index:-1}
section#zone3 article #vousaussi h2 span {float:left;position:relative;width:100%;font-size:1.2em;padding-top:20px;margin-top:20px;font-style:italic;font-weight:900;}
section#zone3 article #vousaussi h2 span:before {position:absolute;content:'';top:0;left:50%;width:60%;height:1px;margin-left:-30%;background:#9d7c5c;}

section#zone4 {background:#efefef;}
section#zone4 article {position:relative;float:none;padding:100px 0 80px;}

section#zone4 ul.instagram li {float:left;position:relative;width:31%;margin:1%;border:10px solid #fff;}
section#zone4 ul.instagram li figure {float:left;width:100%;overflow:hidden;background:#000;overflow:hidden;}
section#zone4 ul.instagram li figure img{float:left;position:relative;width:100%;z-index:1;}
section#zone4 ul.instagram li figcaption {position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;}
section#zone4 ul.instagram li figcaption:before {position:absolute;content:'';width:100%;height:100%;background:rgba(0,0,0,.08);z-index:-1;}
section#zone4 ul.instagram li figcaption .legend {display:none;}
section#zone4 ul.instagram li figcaption .social {position:absolute;width:100%;bottom:-10px;text-align:center;}
section#zone4 ul.instagram li figcaption .social span {display:inline-block;position:relative;width:80px;height:80px;border-radius:50%;overflow:hidden;text-align:center;padding:40px 0 0;background:#9d7c5c;color:#fff;font:700 1.2em/1 'Merriweather', cursive;margin:0 10px;}
section#zone4 ul.instagram li figcaption .social span:before {position:absolute;top:10px;left:50%;width:36px;height:34px;margin-left:-17px;background-image:url(../medias/img/pixel.png);background-repeat:no-repeat;}
section#zone4 ul.instagram li figcaption .social .likes:before {background-position:-178px 0;}
section#zone4 ul.instagram li figcaption .social .comments:before {background-position:0 0;}

section#zone4 #communaute {padding-top:140px;text-align:center;}
section#zone4 #communaute p {font:300 italic 1.8em/1 'Merriweather', cursive;}
section#zone4 #communaute h2 {margin:25px 0 0;font:900 1.8em/1 'Merriweather', cursive;color:#d856da;}

section#footer {z-index:2;}

#video {position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;background:url(http://www.ardechois-camping.com/static/images/carousel/home1.jpg) no-repeat top left fixed;background-size:cover;}