* { box-sizing: border-box; transition: all 0.5s linear; -webkit-transition: all 0.5s linear; }
::selection { color: #fff; background: #333333; }
html,body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { background: url(../images/bcg.jpg) no-repeat center top; background-size:cover; background-attachment: fixed; width: 100%; height: 100%; color: #282828; font-family: "Open Sans", sans-serif; font-size: 17px; margin:0; padding: 0;}
#logo { content: ''; display: block; background: url(../images/sprites.png) no-repeat; background-position: 0 1px; width: 147px; height: 137px;  opacity: 1; margin: 0px auto; float: left; transition: all 1s ease; -webkit-transition: all 1s ease; }

#page { min-height: 100%; margin-top: 50px; position: relative; background: #fff; box-shadow: inset 0 0 7px #282828; }
.wrapper { margin: 40px 70px; }

.container { width: 1170px; margin: 0px auto; }
#page:before,
#page:after,
.bloc:after,
.header:after { content: ''; display: table; clear:both; }

.header-text { margin: 50px 0 0 30px; float: left; }
.header-text h1 { font-size: 48px; line-height: 40px; }

/* NAVBAR */
.navbar-header { display:none; line-height: 50px; font-size: 18px; }
.navbar-brand span { color: #fff; padding: 0 0 0 10px; }
.navbar-brand span+span:before { content: ' - '; display: inline-block; }

.navbar { position: relative; display: table; width: 100%; min-height: 50px; overflow: visible; background-color: #d10000; border-radius: 0; border: none; }
.navbar-nav { float: none; }
.navbar-toggle { background: #272727; border-radius: 6px; border: none; float:right; margin: 8px; padding: 10px; }
.navbar-toggle span.icon-bar { display: block; background: #fcfcfc; height: 2px; width: 22px; border-radius: 1px; }
.navbar-toggle .icon-bar+.icon-bar { margin-top: 4px; }
.nav { margin: 0 auto; padding: 0; list-style: none; display: table; }
.nav>li { display: inline-block; margin: 0 10px; position:relative; }
.nav>li a { line-height: 50px; padding: 0; font-size: 18px; white-space: nowrap; color: #fff; text-decoration: none; text-transform: uppercase; }
.nav>li>a:hover,
.nav .open>a:hover { color: #000; }
.navbar.fixed { top: 0px; left: 0px; position: fixed; z-index: 500; box-shadow: 0 0 5px #282828; }

/* PHOTO */
#photo { margin: 30px 0; text-align: center; }
#photo img { box-shadow: 0 0 7px #282828; }
.gallery { margin: 30px 0; }
.container-picture a { display: inline-block; text-align: center; margin: 10px; padding: 10px; background-color: #f5f5f5; font-size: 12px; text-decoration: none; border: 1px solid #ccc; border-radius: 2px; } 
.container-picture a:hover { background-color: #ccc; }
.container-picture img { width: 100%; height: auto; display: block; }
.container-picture span { display: block; }
.w25 { width: 25%; float: left; }

/* HTML elements */
h1 { font-family: 'Oswald', cursive; }
h1 { font-size: 36px; margin: 10px 0 0 0; line-height: 36px; font-weight: 500; }
h1>a { color: #000; }
h1+h2 { margin: 0; color: #d10000; font-weight: 400; }
h2 { font-size: 24px; font-weight: 500; margin: 0 0 5px 0; }
h3 { font-size: 20px; margin: 15px 0 5px 0; }
h3+p { margin: 5px 0 10px 0; }
a { color: #282828; text-decoration: underline; }
a:hover { color: #d10000; text-decoration: none; }
img { max-width: 100%; height: auto; }
iframe { max-width: 100%; border: 10px solid #000; }
blockquote { padding: 15px; border-radius: 6px; background-color: #E6E6E6;font-weight: bold; margin: 15px 0; }

.map { width: 100%; height: 300px; box-shadow: 0 0 6px; }
.external-link:hover:after { background-position: 0 -166px; }
.external-link:after { content: ''; background: url(../images/sprites.png) no-repeat; display: inline-block; width: 24px; height: 16px; background-position: 0 -150px; vertical-align: bottom; margin: 0 2px; text-decoration: none; }
.list-infos { text-align: center; padding: 0; margin: 0; }
.list-infos li { display: inline-block; padding: 10px 20px; margin: 10px 10px 0 0; color: #fff; background-color: #282828; border-radius: 6px; font-weight: bold; }
.list-infos li:hover { background-color: #d10000; }

.bloc { margin-bottom: 50px; } 
.bloc:before { content: ''; position: absolute; left: -70px; display: block; background: url(../images/sprites.png) no-repeat; width: 50px; height: 50px; margin: 25px; background-color: #282828; border-radius: 6px; transform: rotate(-15deg); transition: width 1.5s ease,height 1.5s ease; -webkit-transition: width 1.5s ease,height 1.5s ease,margin 1s ease,left 1s ease,background 0s ease; }
#informations:before,
.nav li .informations { background-position: -300px 0px; }
#situation:before,
.nav li .situation { background-position: -300px -50px; }
#prix:before,
.nav li .prix { background-position: -300px -100px; }
#photos:before,
.nav li .photos { background-position: -300px -150px; }
#activites:before,
.nav li .activites { background-position: -300px -200px; }
#contact:before,
.nav li .contact { background-position: -300px -250px; }

.bloc.active:before { width: 100px; height: 100px; left: -85px; margin: 0; }
#informations.active:before { background-position: -200px 0px; }
#situation.active:before { background-position: -200px -100px; }
#prix.active:before { background-position: -200px -200px; }
#photos.active:before { background-position: -200px -300px; }
#activites.active:before { background-position: -200px -400px; }
#contact.active:before { background-position: -200px -500px; }

/* FORMULAIRE CONTACT */
#reservation-form { border-radius: 6px; border: 1px solid #CCC; }
#reservation-form fieldset { border: none; margin: 10px 0 0 0; border-bottom: 1px dotted #C5C5C5; }
#reservation-form legend { font-weight: bold; margin: 10px 0 0 0; }
#reservation-form label { display: block; font-size: 14px; }
#reservation-form input[type=text],
#reservation-form input[type=date],
#reservation-form input[type=number],
#reservation-form select,
#reservation-form textarea { border-radius: 2px; text-indent: 10px; padding: 10px 0; border-color: #C5C5C5; border-style: solid; border-width: 1px; width: 100%; }
#reservation-form input[type=submit] { border-radius: 3px; background: #C5C5C5; padding: 20px 20px; font-size: 16px; font-weight: bold; display: block; width: 100%; text-align: center; border: none; }
#reservation-form input[type=submit]:hover { background: #d10000; color: #fff; }
#reservation-form p { margin: 5px 0 10px 0; }
#reservation-form .w33 { width: 30%; margin-right: 3%; float: left; }
#reservation-form .cf { clear: both; }
#reservation-form .btn-container { text-align: center; background-color: #C5C5C5; margin: 0; padding: 0; }
#reservation-form textarea { width: 100%; padding: 10px; text-indent: 0px;  min-height: 10em;}
#reservation-form .error { border-color: #C30 !important; }
#reservation-form .message { font-size: 18px; font-weight: bold; border-radius: 3px; padding: 5px; margin: 10px; }
#reservation-form .valid { color: rgba(0,204,0,1); border: 1px solid rgba(0,204,0,1); }
#reservation-form .message.error { color: #CC0000; border: 1px solid #CC0000; }

/* FOOTER */
#footer { color: #fff; font-size: 14px; }
#footer p { margin: 5px 10px 20px 10px; }
#footer a { color: #fff; }
#footer>p { float: left; }
#footer>p+p { float: right; }

@media (max-width: 1170px){
	.container { width: 960px; margin: 0 auto; }
}

@media (max-width: 1024px){
	.container { width: auto; margin: 30px; }
	.wrapper { margin: 40px; }
	.header-text h2 { font-size: 20px; }
}

@media (max-width: 768px){
	.w25 { width: 50%; float: left; }
}

@media (max-width: 640px){
	h1 { font-size: 30px; }
	h2 { font-size: 24px; }
	h3 { font-size: 20px; }
	.header-text { margin: 0; float: none; text-align: center; }
	
	#banner { min-height: inherit; }
	#text { display: none; }
	#logo { margin: 0 auto; float: none; position: relative; top: auto; }
	.navbar-header { display: block; }
	.navbar.fixed { min-height: 50px; position: relative; top: auto; box-shadow: none; }
	.navbar { position: relative; top: auto; margin: 0; background-color: transparent; }
	.nav { display: table; text-align: center; }
	.nav>li { display: inline-block; margin: 0 5px; font-size: 1px; }
	.nav>li a { display: inline-block; background-color: #d10000; width: 50px; height: 50px; background-image: url(../images/sprites.png); background-repeat: no-repeat; border-radius: 3px; }
	.nav>li a:hover { background-color: #282828; }
	.nav>li a span { display:none; }
	
	.bloc:before { width: 50px; height: 50px; left: -65px; margin: 15px; }
	.bloc.active:before { width: 50px; height: 50px; left: -45px; margin: 15px; }
	#informations.active:before { background-position: -300px 0px; }
	#situation.active:before { background-position: -300px -50px; }
	#prix.active:before { background-position: -300px -100px; }
	#photos.active:before { background-position: -300px -150px; }
	#activites.active:before { background-position: -300px -200px; }
	#contact.active:before { background-position: -300px -250px; }

	#reservation-form .w33 { width: 100%; float: none; }
	
	#footer p { text-align: center; margin: 10px; float: none !important; }
}