@charset "utf-8";

/* CONTENANT */

* { margin: 0; padding: 0; border: 0;}
body { font-family: 'Didact Gothic', sans-serif; background-color: #e5e5e5;}

#header { position: relative; z-index: 0;}
#header-content { position: relative; width: 1250px; margin: 0 auto; overflow: hidden; z-index: 2;}
#header #logo { float: left; width: 330px;}
#header #logo img { margin: 20px 0 0 40px;}
#header #logo:hover img { opacity: 0.6;}
#header #menu { float: left; width: 800px; margin: 140px 0 0 0; text-align: right;}
#header #menu a { color: #58595b; font-size: 22px; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; margin: 0 20px; padding: 3px 10px;}
#header #menu a:hover { background-color: #58595b; color: #fff;}
#header #facebook { width: 32px; height: 32px; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url(../images/frame/facebook.png) center center no-repeat #58595b; border-radius: 16px; display: block; float: right; width: 32px; margin: 140px 40px 0 0;}
#header #facebook:hover { background-color: #f8981d;}
#header-bg { position: absolute; top: 0; z-index: 1; width: 100%;}
#header-bloc {height: 200px; background-color: #fff;}
#header-slope img { width: 100%; min-width: 1250px; height: 45px;}
#header-photo { position: fixed; z-index: 0; width: 100%; top: 0;}
#header-photo img { width: 100%; min-width: 1600px;}

#reservez-top a {position: absolute; top: 30px; right: 20px; color: #fff; background-color: #58595b; display: block; padding: 10px 20px; font-weight: bold; text-decoration: none; border-radius: 10px; text-transform: uppercase; font-size: 20px;}
#reservez-top a:hover {background-color: #000;}

#footer { background-color: #e5e5e5; padding: 50px 0; position: relative; z-index: 2;}
#footer p { text-align: center; color: #b1b1b1; letter-spacing: 2px;}
#footer a {color: #b1b1b1;}
#footer a:hover { color: #000;}


/* STANDARDS GLOBAUX */

h1 { font-size: 72px; color: #fff; position: absolute; top: -75px; text-transform: uppercase; letter-spacing: 3px; font-weight: bold;}
h2 { font-size: 30px; font-weight: bold; text-transform: uppercase; margin-bottom: 15px;}

p { text-align: justify; color: #616268; font-size: 18px;}
p strong { letter-spacing: 1px;}
p.special { font-weight: bold; text-align: center; background-color: #f2f2f2; padding: 15px 25px; font-size: 25px; margin-bottom: 30px;}
p.contact { font-size: 45px; font-weight: bold; text-align: center; margin: 20px 0;}
p.contact span { font-size: 20px;}

ul {color: #616268; padding-left: 30px; font-size: 18px;}

p a, ul a { color: #000; text-decoration: underline;}
p a:hover, ul a:hover { color: #e98300;}

.photo-page { height: 525px; overflow: hidden; z-index: -2}
.corps-inner { width: 1250px; margin: 0 auto;}
#corps-page {margin-top: 320px; background-color: #fff; z-index: 1; position: relative;}
#corps-page .corps-inner {padding: 50px 40px; width: 1170px;} 

#feuillage-top img { width: 100%; height: 45px;}
#feuillage-bg img { width: 100%; position: absolute; top: 45px; z-index: -1;}
#reservez { float: left; width: 430px;}
#reservez a { width: 334px; height: 178px; background: url(../images/frame/fleche.png) center 150px no-repeat rgba(0,0,0,.2); display: block; text-align: center; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 36px; letter-spacing: 5px; font-weight: bold; padding-top: 30px; border-radius: 10px; margin-top: 60px; margin-left: 40px;}
#reservez a span { font-weight: normal; color: #f8981d; font-size: 28px; letter-spacing: 3px;}
#reservez a:hover { background-color: rgba(0,0,0,0.5)}
#reservez a:hover span { color: #fff;}

#photos { background:url(../images/frame/bg-bois.jpg); padding-bottom: 40px; z-index: 1; position: relative;}
.photos-chalets { padding-bottom: 0 !important;}
.gallery a { background-color: #f8981d; display: block; float:left; margin: -40px 0 75px 45px; width: 253px; height: 232px; overflow: hidden; position: relative; box-shadow: 8px 8px 0 rgba(0,0,0,.2);}
.gallery a img { opacity: 1; border: 15px solid #fff;}
.gallery a:hover {box-shadow: 8px 8px 0 rgba(0,0,0,.5);}
.gallery a:hover > img { opacity: 0.7}
.gallery a span { position: absolute; background:url(../images/shadowbox/zoom.png) center center no-repeat; z-index: 80; opacity: 0; width: 100%; height: 100%;}
.gallery a:hover span { opacity: 1;}

#accordion { margin-bottom: 40px;}

.bulle-accordion { background: url(../images/accordion-fleche.png) 1130px top no-repeat #f5f5f5; box-shadow: 5px 5px 0 rgba(0,0,0,.2); border-radius: 15px; margin-bottom: 18px; padding: 10px 20px;}

.accordion-toggle {cursor: pointer;}
.accordion-content {display: none;}
.accordion-content p { font-size: 18px !important; margin-bottom: 15px;}
.accordion-content ul { font-size: 18px !important; margin-bottom: 15px;}
.bulle-proximite ul { padding-left: 80px;}
.accordion-content.default {display: block;}
h5 { color: #2b2b2b; font-size: 24px; font-weight: 600; height: 49px; line-height: 49px;}
.bulle-proximite h5 { padding-left: 60px;}
h5:hover { color: #f8981d;}

.accordion-un { background: url(../images/icons/1.png) left center no-repeat;}
.accordion-deux { background: url(../images/icons/2.png) left center no-repeat;}
.accordion-trois { background: url(../images/icons/3.png) left center no-repeat;}
.accordion-quatre { background: url(../images/icons/4.png) left center no-repeat;}
.accordion-cinq { background: url(../images/icons/5.png) left center no-repeat;}

.col { width: 50%; float: left;}

.clear { clear: both;}



/* TRANSITIONS */

#header #logo img, #header #menu a, #header #facebook, #reservez a, #reservez a span, #footer a, .gallery a img, .gallery a span, .photos-plus, .gallery a, .photo-chalet-accueil, #chalets-tarifs a {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;} 


/* ACCUEIL */

.photo-accueil { height: 830px; overflow: hidden;}
#corps-feuillage { position: relative; overflow: hidden; z-index: 0;}
.accueil-texte {  margin-top: 580px; height: 450px;}
#corps-feuillage .corps-inner { overflow: hidden;}
#corps-feuillage #texte { float: right; width: 820px;}
#corps-feuillage p { color: #fff; font-size: 20px; line-height: 28px; margin: 20px 40px 0 0;}

.photo-chalet-accueil { display: block; margin: -40px 0 8px 45px; width: 550px; overflow: hidden; position: relative; box-shadow: 8px 8px 0 rgba(0,0,0,.2);}
.photo-chalet-accueil:hover {box-shadow: 8px 8px 0 rgba(0,0,0,.5);}
.photo-chalet-accueil img { border: 15px solid #fff;}

.photos-plus { width: 250px; height: 50px; margin: 0 auto; display: block; background: url(../images/accueil/photo-plus.png) 235px center no-repeat #fff; box-shadow: 8px 8px 0 rgba(0,0,0,.2); color: #58595b; text-decoration: none; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; padding: 20px 0 0 30px;}
.photos-plus:hover {background: url(../images/accueil/photo-plus.png) 245px center no-repeat #fff; box-shadow: 8px 8px 0 rgba(0,0,0,.5);}



/* CHALETS */

#chalets-description { width: 497px; float: left; padding-right: 30px; margin-top: -20px;}
#chalets-description p { font-size: 20px; margin-bottom: 20px; line-height: 26px;}
#chalets-description p.special { text-align: left;}
#chalets-photo { width: 643px; float: right; background:url(../images/bg-photo-chalet.png) top center no-repeat; margin-top: -132px;}
#chalets-photo img { margin: 20px 0 0 50px;}
.chalets-texte {  margin-top: -70px; height: 450px; z-index: 1 !important;}
.chalets-texte #texte p { color: #CCC; font-size: 18px; line-height: 20px;}
.chalets-texte #texte p strong { color: #fff;}
.corps-chalets { padding-bottom: 50px; z-index: 0 !important;}

#chalets-specs { width: 409px; float: left; border-right: 1px solid #666;}
#chalets-specs p { padding-right: 30px; text-align: left;}
#chalets-tarifs { width: 410px; float: right;}
#chalets-tarifs p { padding-left: 30px; padding-bottom: 30px; text-align: left;}

#note { font-size: 14px; line-height: 23px;}
.rouge { color: #C00;}

#chalets-tarifs a, #chalets-specs a { display: block; background: rgba(0,0,0,0.3); color: #fff; text-decoration: none; padding: 5px 8px; border-radius: 10px; margin: 0 0 5px 30px; float: left;}
#chalets-specs a { margin-left: 0;}
#chalets-tarifs a:hover, #chalets-specs a:hover {background: rgba(0,0,0,1);}