/*  
Nom du site		:
URL du site		:
Description		:
Date			:
Auteur			:
*/

@import url("normalize.css");

/****************************************************
					COULEURS
****************************************************

brun 		#766
jaune		#ea0
vert		#796
tomate		#d43

*/

/****************************************************
					GENERAL
****************************************************/

*, *:before, *:after {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

/*	STYLES
----------------------------------------------------*/
@font-face {
	font-family: 'Montserrat-Regular';
	src: url('fonts/Montserrat-Regular.eot?') format('eot'), 
	     url('fonts/Montserrat-Regular.woff') format('woff'), 
	     url('fonts/Montserrat-Regular.ttf')  format('truetype'),
	     url('fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
}
@font-face {
    font-family: 'bellotabold';
    src: url('fonts/bellota-bold-webfont.eot');
    src: url('fonts/bellota-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bellota-bold-webfont.woff') format('woff'),
         url('fonts/bellota-bold-webfont.ttf') format('truetype'),
         url('fonts/bellota-bold-webfont.svg#bellotabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font-style:normal; font-weight:normal;
	font-size:16px;
	font-family: 'Montserrat-Regular';
	background:#796; color:#766;
}

/*	vertical rythm	*/
h1, h2, h3, h4, h5, h6, p, ol, ul, dl {line-height:150%; margin:0 0 20px;}

/*	titres	*/
h1, h2, h3, h4, h5, h6 {text-transform:uppercase; font-weight:normal; color:#ea0; line-height:125%;}
h1 {	font-size:	2em;}
h2 {	font-size:	1.5em; }
	h2:not(:first-child) { padding-top: 30px; }
h3 {	font-size:	1.25em; color:#796;}
h4, h5, h6 {font-size:	1em;}

/*	paragraphes	*/
strong {font-weight:bold;}
em {font-style:italic; color:#796;}

/*	listes	*/
ol, ul, dl {list-style-position:inside; padding:0; margin-left:0;}
ol {list-style-type:decimal}
	ol li {margin-bottom:15px;}
ul ul, ol ol {margin-bottom:0; margin-left:20px;}
	dt {font-weight:bold;}
	dd {margin:0 0 20px 20px;}

/*	liens	*/
a {color:#ea0;}
a:hover, a:active {color:#a60;}
a:focus {outline:none;}
a.bouton {padding:10px; background-color:#ea0; color:#fff; text-transform:uppercase; border-radius:3px; text-decoration:none; font-size:75%;}

/*	divers	*/
acronym {cursor:help; border-bottom:1px dotted;}
code {display:block; margin-bottom:20px; padding:20px; font:0.75em/*12px/16px*/ "Courier New", Courier, monospace; border:1px dotted;}
blockquote {margin:0 0 20px 0; padding-left:20px; font-style:italic; text-align:justify; border-left:1px solid #cbb;}
	blockquote p {margin:0;}
hr {
	margin:20px 0; border:0; height:1px;
	background-color:#cbb; color:#cbb;
}
/*	images	*/
img {max-width:100%;}
img.ronde {border-radius:50%;}
figure { margin-bottom: 30px; }
figcaption { text-align:center; font-size:1em; }

/*	formulaires	*/
form {margin-bottom:20px;}
form fieldset {padding:10px; margin:0;}
form fieldset legend {padding:2px; width:auto; font-size:1em; border:1px solid;}
form p label {display:block;}
form p input,
form p select,
form p textarea {padding:5px; width:100%; font:normal normal 0.75em/*12px/16px*/ Tahoma, Arial, Helvetica, sans-serif; border:1px solid #cbb;}
form ul {list-style:none;}
	form ul li {white-space:nowrap;}
form p input.bouton {width:50%; padding:10px 0; cursor:pointer; background-color:#ea0; color:#fff; text-transform:uppercase; font-family: 'Montserrat-Regular'; border:none; border-radius:3px;}

/*	tableaux	*/
table {margin-bottom:20px; border:1px solid;}
table th, table td {padding:5px; text-align:left;}
table thead th {border:1px solid;}
table tbody th {}
table tbody th, table tbody td {border:1px solid;}
table tfoot td {text-align:center;}

/****************************************************
					MISE EN PAGE
****************************************************/

.container {margin:0 auto; width:920px; clear:both; overflow:hidden;}
.colonne {float:left; margin-left:40px;}
	.moitie {width:440px;}
	.un-tiers {width:280px;}
	.deux-tiers {width:600px;}
.premiere {margin-left:0; clear:both;}
.droite {float:right;}
	.colonne .colonne {margin-left:4%;}
	.colonne .colonne.premiere {margin-left:0;}
	.colonne .colonne.moitie {width:48%;}

/*	popup
----------------------------------------------------*/
.hidden { display:none; }
.popup { z-index:101; position:fixed; top:0; left:0; display:block; width:100%; height:100%; padding-top:150px; background-color:rgba(0,0,0,0.6); text-align:center; overflow:hidden; }
.popup p { position:relative; display:inline-block; background-color:white; padding:50px; box-shadow: 0 0 10px #000; }
.popup a.popup_close { position:absolute; top:0; right:0; display:block; width:30px; height:30px; background-color:#000; text-decoration:none; color:white; line-height:30px; font-size:2.4rem; }
	.popup a.popup_close:hover { background-color:#766; }


/*	HEADER
----------------------------------------------------*/
header {height:170px; background:#766 url(../images/header_big-bg.jpg) center top repeat-x; overflow:hidden;}
#home header {height:560px;}

ul#lang {float:right; margin:10px 0 0 0; list-style:none;}
	ul#lang li {float:left;}
	ul#lang li a {display:block; background-color:#ea0; background-position:5px 9px; background-repeat:no-repeat; text-decoration:none; color:#fff; padding:0 5px 0 25px; height:30px; line-height:30px;}
	ul#lang li a:hover {background-color:#776;}
	ul#lang li a.activelang {background-color:#fff; color:#ea0;}
	ul#lang li a.fr {background-image:url(../images/drapeau_FR.png);}
	ul#lang li a.en {background-image:url(../images/drapeau_EN.png);}

header p {text-align:center; font-family: 'bellotabold'; color:#fff; font-size:5em; padding-top:70px; text-transform:lowercase;}
header nav ul {clear:right; background-color:#fff; list-style:none; overflow:auto; height:90px; box-shadow: 0 5px 20px #211;}
header nav ul li {float:left; padding-right:30px;}
header nav ul li a {display:block; line-height:90px; text-transform:uppercase; text-decoration:none; color:#766; font-size:0.8125em;}
header nav ul li a.home {width:90px; height:90px; background:#766 url(../images/logo-toque.png) center center no-repeat;}
header nav ul li a.active, header nav ul li a:hover {color:#ea0;}


/*	SLIDER
----------------------------------------------------*/
#recommandations {background-color:#ea0; padding:30px 0; color:#fff; font-size:1.75em;}
#recommandations ul {list-style:none; height:120px; overflow:hidden;}
#recommandations ul li {}
#recommandations ul li em {display:block; text-align:right;}

a.banner {color:#fff; text-decoration:none;}

.slider li {display: none;}
.slider li.current-slide {display: block;}

/*	SLIDER PHOTOS
----------------------------------------------------*/
#photos {padding:0; color:#766;}

ul.slider_photos {list-style:none; margin:0; padding:0; overflow:hidden;}
#home ul.slider_photos { }
ul.slider_photos li {display: none;}
ul.slider_photos li.current-slide {display: block;}


/*	LOTERIE
----------------------------------------------------*/
#loterie {background-color:#d43; padding:30px 0; color:#fff; font-size:1em;}


/*	PRESENTATION
----------------------------------------------------*/
#presentation {background-color:#eee; padding:60px 0;}
#presentation h1 {line-height:1.25em;}
#presentation h2 {color:#796; line-height:1.25em; font-size:1.1875em;}


/*	CONTENT
----------------------------------------------------*/
#content {padding:30px 0; background-color:#fff;}
#side {float:right; width:280px; margin-right:40px; font-size:87.5%;}
#main {float:right; width:600px;}
.youtubecontainer {position:relative; padding-bottom:56.25%; /* 16:9 */ padding-top:25px; margin-bottom:20px; height:0;}
.youtubecontainer iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
.videocontainer { margin-bottom:20px; overflow:auto; }

ul#partage { list-style:none; margin:0 0 30px 0; padding:0; text-align:right;}
ul#partage li { display:inline-block; margin-left:5px;}
ul#partage a { display:block; width:20px; height:20px; background-image:url(../images/ico_partage.png); background-repeat:no-repeat;}
a.share_facebook { background-position:0 0; }
a.share_twitter { background-position:-20px 0; }
a.share_linkedin { background-position:-40px 0; }
a.share_mail { background-position:-60px 0; }
a.share_facebook:hover { background-position:0 -20px; }
a.share_twitter:hover { background-position:-20px -20px; }
a.share_linkedin:hover { background-position:-40px -20px; }
a.share_mail:hover { background-position:-60px -20px; }


/*	FOOTER
----------------------------------------------------*/
footer {padding:30px 0; background-color:#796; color:#fff; font-family: 'Montserrat-Regular'; text-transform:uppercase;}
p.adresse {text-align:left; line-height:66px; padding-left:60px; background:url(../images/logo-toque.png) 0 0 no-repeat; border-bottom:1px solid #9a8;}

footer ul {list-style:none;}
footer ul a {color:#fff; text-decoration:none;}
footer ul a:hover {color:#ea0;}
ul li.signature {font-size:75%;}


/*	CLASSES UTILES
----------------------------------------------------*/

.justify {text-align:justify;}
.center {text-align:center;}
.right {text-align:right;}
.error {padding:20px 10px; color:#F00; border:1px solid #F00; border-width:3px 0; background:#fcc; font-style:italic;}
.message {padding:20px 10px; color:#483; border:1px solid #7b6; border-width:3px 0; background:#bfa; font-style:italic;}
.uppercase {text-transform:uppercase;}
.hidden {display:none;}
.bold {font-weight:bold;}
.italic {font-style:italic;}
.clear {clear:both;}
p.small {font-size:0.6875em/*11px/16px*/;}
.widthauto {width:auto;}
.rounded {-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}


/*	LIGHTBOX
----------------------------------------------------*/
/*
#imagelightbox {position: fixed; z-index: 9999; -ms-touch-action: none; touch-action: none;}
*/
/* IMAGE LIGHTBOX SELECTOR */

#imagelightbox
{
	cursor: pointer;
	position: fixed;
	z-index: 10000;

	-ms-touch-action: none;
	touch-action: none;

	-webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
	box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
}


/* ACTIVITY INDICATION */

#imagelightbox-loading,
#imagelightbox-loading div
{
	border-radius: 50%;
}
#imagelightbox-loading
{
	width: 2.5em; /* 40 */
	height: 2.5em; /* 40 */
	background-color: #444;
	background-color: rgba( 0, 0, 0, .5 );
	position: fixed;
	z-index: 10003;
	top: 50%;
	left: 50%;
	padding: 0.625em; /* 10 */
	margin: -1.25em 0 0 -1.25em; /* 20 */

	-webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40 */
	box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 ); /* 40 */
}
	#imagelightbox-loading div
	{
		width: 1.25em; /* 20 */
		height: 1.25em; /* 20 */
		background-color: #fff;

		-webkit-animation: imagelightbox-loading .5s ease infinite;
		animation: imagelightbox-loading .5s ease infinite;
	}

	@-webkit-keyframes imagelightbox-loading
	{
		from { opacity: .5;	-webkit-transform: scale( .75 ); }
		50%	 { opacity: 1;	-webkit-transform: scale( 1 ); }
		to	 { opacity: .5;	-webkit-transform: scale( .75 ); }
	}
	@keyframes imagelightbox-loading
	{
		from { opacity: .5;	transform: scale( .75 ); }
		50%	 { opacity: 1;	transform: scale( 1 ); }
		to	 { opacity: .5;	transform: scale( .75 ); }
	}


/* OVERLAY */

#imagelightbox-overlay
{
	background-color: #fff;
	background-color: rgba( 255, 255, 255, .9 );
	position: fixed;
	z-index: 9998;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}


/* "CLOSE" BUTTON */

#imagelightbox-close
{
	width: 2.5em; /* 40 */
	height: 2.5em; /* 40 */
	text-align: left;
	background-color: #666;
	border-radius: 50%;
	position: fixed;
	z-index: 10002;
	top: 2.5em; /* 40 */
	right: 2.5em; /* 40 */

	-webkit-transition: color .3s ease;
	transition: color .3s ease;
}
	#imagelightbox-close:hover,
	#imagelightbox-close:focus
	{
		background-color: #111;
	}
	#imagelightbox-close:before,
	#imagelightbox-close:after
	{
		width: 2px;
		background-color: #fff;
		content: '';
		position: absolute;
		top: 20%;
		bottom: 20%;
		left: 50%;
		margin-left: -1px;
	}
	#imagelightbox-close:before
	{
		-webkit-transform: rotate( 45deg );
		-ms-transform: rotate( 45deg );
		transform: rotate( 45deg );
	}
	#imagelightbox-close:after
	{
		-webkit-transform: rotate( -45deg );
		-ms-transform: rotate( -45deg );
		transform: rotate( -45deg );
	}


/* CAPTION */

#imagelightbox-caption
{
	text-align: center;
	color: #fff;
	background-color: #666;
	position: fixed;
	z-index: 10001;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.625em; /* 10 */
}


/* NAVIGATION */

#imagelightbox-nav
{
	background-color: #444;
	background-color: rgba( 0, 0, 0, .5 );
	border-radius: 20px;
	position: fixed;
	z-index: 10001;
	left: 50%;
	bottom: 3.75em; /* 60 */
	padding: 0.313em; /* 5 */

	-webkit-transform: translateX( -50% );
	-ms-transform: translateX( -50% );
	transform: translateX( -50% );
}
	#imagelightbox-nav button
	{
		width: 1em; /* 20 */
		height: 1em; /* 20 */
		background-color: transparent;
		border: 1px solid #fff;
		border-radius: 50%;
		display: inline-block;
		margin: 0 0.313em; /* 5 */
	}
	#imagelightbox-nav button.active
	{
		background-color: #fff;
	}


/* ARROWS */

.imagelightbox-arrow
{
	width: 3.75em; /* 60 */
	height: 7.5em; /* 120 */
	background-color: #444;
	background-color: rgba( 0, 0, 0, .5 );
	vertical-align: middle;
	display: none;
	position: fixed;
	z-index: 10001;
	top: 50%;
	margin-top: -3.75em; /* 60 */
}
.imagelightbox-arrow:hover,
.imagelightbox-arrow:focus
{
	background-color: #666;
	background-color: rgba( 0, 0, 0, .75 );
}
.imagelightbox-arrow:active
{
	background-color: #111;
}
	.imagelightbox-arrow-left
	{
		left: 2.5em; /* 40 */
	}
	.imagelightbox-arrow-right
	{
		right: 2.5em; /* 40 */
	}
	.imagelightbox-arrow:before
	{
		width: 0;
		height: 0;
		border: 1em solid transparent;
		content: '';
		display: inline-block;
		margin-bottom: -0.125em; /* 2 */
	}
		.imagelightbox-arrow-left:before
		{
			border-left: none;
			border-right-color: #fff;
			margin-left: -0.313em; /* 5 */
		}
		.imagelightbox-arrow-right:before
		{
			border-right: none;
			border-left-color: #fff;
			margin-right: -0.313em; /* 5 */
		}

#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav,
.imagelightbox-arrow
{
	-webkit-animation: fade-in .25s linear;
	animation: fade-in .25s linear;
}
	@-webkit-keyframes fade-in
	{
		from	{ opacity: 0; }
		to		{ opacity: 1; }
	}
	@keyframes fade-in
	{
		from	{ opacity: 0; }
		to		{ opacity: 1; }
	}

@media only screen and (max-width: 41.250em) /* 660 */
{
	#container
	{
		width: 100%;
	}
	#imagelightbox-close
	{
		top: 1.25em; /* 20 */
		right: 1.25em; /* 20 */
	}
	#imagelightbox-nav
	{
		bottom: 1.25em; /* 20 */
	}

	.imagelightbox-arrow
	{
		width: 2.5em; /* 40 */
		height: 3.75em; /* 60 */
		margin-top: -2.75em; /* 30 */
	}
	.imagelightbox-arrow-left
	{
		left: 1.25em; /* 20 */
	}
	.imagelightbox-arrow-right
	{
		right: 1.25em; /* 20 */
	}
}

@media only screen and (max-width: 20em) /* 320 */
{
	.imagelightbox-arrow-left
	{
		left: 0;
	}
	.imagelightbox-arrow-right
	{
		right: 0;
	}
}


/****************************************************
					RESPONSIVE DESIGN
****************************************************/

@media only screen and (min-width: 768px) and (max-width: 930px) {
body {font-size:14px;}
.container {width:760px;}
.colonne {float:left; margin-left:30px;}
	.moitie {width:365px;}
	.un-tiers {width:230px;}
	.deux-tiers {width:500px;}
.premiere {margin-left:0; clear:both;}
.droite {float:right;}
#side {width:230px; margin-right:30px;}
#main {width:500px;}

header {background-position:center -80px;}
#home header {height:460px;}
header h1 {padding-top:40px;}

p.adresse {line-height:50px; padding-left:45px; background-size:27px;}

}

@media only screen and (min-width: 320px) and (max-width: 767px) {
body {font-size:12px;}
.container {width:320px;}
	.colonne {float:none; margin:0 0 15px 0;}
	.moitie,
	.un-tiers,
	.deux-tiers {
		width:100%;
	}
.premiere {margin-left:0; clear:both;}
.droite {float:right;}
	.colonne .colonne {margin-left:0;}
	.colonne .colonne.premiere {margin-left:0;}
	.colonne .colonne.moitie {width:100%;}
#side, #main {float:none; width:100%; margin:0 0 15px 0;}

header {height:300px;}
#home header {height:450px;}
header h1 {line-height:0.8em; padding-top:0;}

header nav ul {height:auto;}
header nav ul li {float:none; padding-right:0;}
header nav ul li a {line-height:30px; font-size:1em; padding-left:0; text-align:center;}
header nav ul li a.home {width:100%; height:60px; background-size:24px;}

#recommandations {padding:30px 0; color:#fff; font-size:1.5em;}
#recommandations ul {height:130px;}

p.adresse {line-height:15px; padding-left:0; padding-bottom:15px; background-image:none;}
}