body {
	margin: auto;
	width: 100%;
	background-color: #114A52 !important;
}


#header {
	background: #009AAF;
	margin: auto;
	padding: 0;
	max-width: 100%;
	height: 79px;
	overflow: visible;
	z-index: 22;
	top: 0;
	left: 0;
	right: 0;
	padding: 0;
	border-top: 5px solid #1AC4DB;
	box-shadow: 0px 5px 21px 7px rgba(0,0,0,0.32);
}


#logo {
	position: absolute;
	float: left;
	width: 252px;
	margin: 20px 0 0 10px;
	margin-left: 10px;
}

#lang {
	float: right;
	font-size:12px;
	margin: 20px 15px 0;
}

#lang a {
	color: #fff;
	text-decoration: none;
	margin-left: 6px;
}

.nav-collapse {
	float: right;
	width: 390px;
	height: auto;
	margin: 20px 0 0 0;
	clear: both;
}

.nav-collapse ul{
	margin: 0;
}

.nav-collapse li{
	display: list-item ;
	float: left;
	list-style-type: none;
}

.nav-collapse li a {
	font-family: 'Dosis', helvetica, sans-serif;
	text-transform: uppercase;
	color: #fff;
	font-size: 20px;
	display: block;
	height: 29px;
	padding: 6px 0 0 20px;
	text-decoration: none;
	border: none;
	font-weight: 400;
}

.nav-collapse li a:hover{color: rgb(239,163,17)}

#header_image {
	background: #114A52;
	margin-bottom: -1px;
	padding: 0;
	width: 100%;
}

#header_page {
	max-width: 1997px;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 410px;
	position: relative;
}

#header_page:not(.cat_page) .overlay_game {
	position: absolute;
	width: 100%;
	height: 150px;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(-180deg, rgba(17,73,82,0.00) 17%, #114A52 50%);
}

#video {
	width: 100%;
}

#page #video .border-top-header {
	position: absolute;
	top: -67px;
	left: 0;
}
	
.videocontainer, .gamecontainer {
	width: 100%;
	position: relative;
	text-align: center;
	margin-top: 15px;
}

.videocontainer .border-top-header {
	max-width: 1000px;
	width: 100%;
	height: 67px;
	margin: 0 auto;
	background: url("img/bg-top.svg") center;
	margin-bottom: -1px;
}

.videocontainer img {
	max-width: 1000px;
}


#fContent{
	left: 16px;
	top: 0px;
	font-size: 15px;
	width: 100%;
	height: 100%;
}


#page {
	position: relative;
	width: 100%;
	margin: auto;
}

#corps {
	max-width: 1000px;
	background: #fff;
	display: block;
	margin: 0 auto;
}

#corps:not(.home) {
	margin-top: -70px;
}

#container {
	padding: 10px 0 10px 0;
	width: 686px;
	margin-left: 20px;
}


#gamepage {
	background: white;
	max-width: 1000px;
	margin: auto
}

#contact {
	width: 600px;
	height: 500px;
	margin-left: 55px;
}


#footer {
	background: #114A52;
	margin: auto;
	height: 80px;
	padding: 0
}

#footerResa {
	background: #EBECE7;
	margin: auto;
	height: 40px;
	padding: 0
}

#footerResa p{
	padding-top: 10px;
	margin: 0;
	font-size: 10px;
	color: #000;
	text-align: center;
}


	
#footer p{
	padding-top: 15px;
	margin: 0;
	font-size: 10px;
	color: #fff;
	text-align: center;
}

#footer a, #footerResa a{
	color: #fff;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size:	10px;
}

p {
	color: #666;
	font-family: Helvetica, arial, sans-serif;
	font-size: 16px;
	font-weight: lighter;
	text-align: justify;
	-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
}

a {font-family: helvetica, arial, sans-serif;font-weight: lighter}

.slogan {font-style: italic; font-family: 'Dosis', helvetica, sans-serif; font-size: 26px; color: #CCCCCC; letter-spacing: 2px; margin-top: 10px;text-align: center}

img {border: none;margin: 0;}

iframe {border: none;}

h1.home{margin-top: 0;color:#fff;font-size:54px;font-family:'Dosis',helvetica,sans-serif;padding-top:40px;margin-bottom:0;text-align:center;line-height:60px}

span.header{color:#fff;font-size:58px;font-family:'Dosis',helvetica,sans-serif;padding-top:40px;margin-bottom:0;text-align:center;line-height:40px;margin-top:10px;display:block}

h2.home{
	color: #07930B; font:30px 'Dosis', helvetica, arial, sans-serif;margin:0 0 15px 15px; padding-top: 30px; border-bottom: solid 1px #ddd;
}

h1.page{color: #07BED6; font:55px 'Dosis', helvetica, arial, sans-serif;text-align: center;margin:0 auto 0 auto}


h1 {
	color: #C60;
	font-size: 16px;
	font-family: 'Dosis', Arial, Helvetica, sans-serif;
	margin-top: 10px;
	font-weight: normal;
	text-transform: uppercase;
}

h2 {
	color:#C72370;
	font-family: 'Dosis', Helvetica, Arial, sans-serif;
	font-size:14px;
	font-weight: lighter;
}

h3 {
	color:#CCC;
	font-family: 'Dosis', Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: lighter;
}

h4 {
	color: white;
	font-family: 'Dosis', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: lighter;
	margin-left: 30px;
}

p.itali {color:white; padding-left: 30px;font-family: Helvetica, arial, sans-serif;font-weight:lighter;font-style:italic}

.clearer {clear:both}
.alignleft {float: left;margin:5px;}
.alignright {float: right;margin:5px}
#content h2.mt {margin-top: 40px}



@import url('https://fonts.googleapis.com/css?family=Dosis');

.nav-collapse.opened {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 9999;
	margin-top: 0 !important;
	background: #07BED6 !important;
}

ul#navi {
	margin:30px auto;
	padding:0;
	max-width:977px
}
ul#navi li {
	list-style:none;
	width:317px;
	display: inline-block;
	margin-bottom: 7px;
}

@media screen and (max-width: 1000px) {
	
	ul#navi {
		padding-left: 15px;
	}
	
	ul#navi li {
		width: 49%;
	}
}

ul#navi li a {
	font-size: 20px;
	color: #1D442B;
	width: 317px;
	padding-top:7px;
	display: block;
	text-transform: uppercase;
	text-decoration: none;
	background: #EBE6C0;
	border-radius: 5px;
	line-height: 40px;
	padding-left: 10px;
	box-shadow: 0 4px 0 #BCB899;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	height: 47px;
	width: 100%;
}

ul#navi li a img {
	float: right;
	margin-right: 10px;
}

ul#navi li#trois a img {
	margin-top: 2px;
}

ul#navi li#anglaises a img {
	margin-top: 3px;
}

ul#navi li:hover a {
	height: 45px;
	box-shadow: 0 2px 0 #BCB899;
	text-decoration: none;
	-webkit-transform: translate(0,4px);
	-moz-transform: translate(0,4px);
	-o-transform: translate(0,4px);
	transform: translate(0,4px);
}

li#progressives, li#classiques, li#anglaises{margin-bottom:7px}
li#themes, li#video, li#3dimensions{margin-bottom:7px}

.ac-menu a.yse {
	height:170px;
	margin:5px 0;
	font-family:"Dosis",arial, sans-serif;
	font-size:50px;
	text-indent: -9999px;
	border-bottom: 2px solid white;
	border-top: 2px solid white;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background-size: 100% !important;
}

.ac-menu a.yse:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

.ac-menu{
	margin: 30px 0;
	padding:0;
	border:0;
	outline:none;
}
.ac-menu ul, .ac-menu li, 
.ac-menu a, .ac-menu span {
	margin:0;
	padding:0;
	border:0;
	outline:none;
}
.ac-menu li {
	float: left;
	width: calc(25% - 52px);
	margin: 10px 26px;
}
.ac-menu li > a {
	display: block;
	position: relative;
	min-width: 160px;
	text-align: center;
	color: #FFFFFF;
	text-decoration: none;
}
.ac-menu li a:hover {background:rgb(95,20,21)}

#title_top {
	background-color: #07BED6;
	color: #fff !important;
	padding: 5px;
	margin-bottom: 0 !important;
}

#about {max-width:1000px;background:#fff;}

#about h2{color:white;font-size:85px;text-align:center;margin-top:-30px;margin-bottom:20px}
#about h3{color:white;font-size:30px;text-align:left;margin:0}

.container {max-width:720px;display:inline-block;float:right}
#about .container p {color: white;font-size:15px;font-weight:lighter}

span#spanPage{text-align:center;border-bottom:1px solid #000;display:block;width:350px;margin:auto;text-transform:uppercase;color:#1E523A;font:20px 'Dosis',helvetica,arial,sans-serif;margin-top:-60px;padding-bottom:3px}

#reservation {max-width: 970px;margin: 15px auto;}

.container_resa_top {
	padding-top: 100px;
	position: relative;
	z-index: 20;
}

#reservationPage,
#fResa {
	position: relative;
	z-index: 20;
	background: #07BED6;
	max-width:1000px;
	margin-top:30px;
	border-top: solid 5px #006884;
	border-bottom: solid 5px #006884;
	text-align: center;
}

#fResa {
	margin-bottom: 50px;
}

#contentCate #fResa {
	width: calc(100% + 30px);
	margin-left: -15px;
}

#reservationPage {
	margin: 0 auto;
	text-align: center;
	padding: 10px;
	font-family: "Dosis", helvetica,arial,sans-serif;
}

#reservationPage:not(.cat_page) {
	max-width: 740px;
	background: rgba(6, 191, 215, 0.49);
	margin-top: 100px;
}

#reservationPage a, #reservationPage a:hover,
a.btnReservation,a.btnReservation:hover {
	max-width:210px;
	background:#D0021B;
	padding: 10px 20px;
	font-size:20px;
	font-family: "Dosis", helvetica,arial,sans-serif;
	text-decoration:none;
	text-transform: uppercase;
	color:#FFF;
	letter-spacing:1px;
	display: inline-block;
	height: 47px;
	box-shadow: 0 4px 0 #920012;
	border-radius: 4px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	font-weight: 600;
	margin-top: 30px;
}

#reservationPage a:hover,
a.btnReservation:hover {
	height: 45px;
	box-shadow: 0 2px 0 #920012;
	text-decoration: none;
	-webkit-transform: translate(0,4px);
	-moz-transform: translate(0,4px);
	-o-transform: translate(0,4px);
	transform: translate(0,4px);
}

#reservationPage p,
p.sloganResa {
	text-align: left;
	display: inline-block;
	font: 20px helvetica,arial,sans-serif italic;
	color:#fff;
	height:auto;
	padding:15px;
	margin-left:2%;
	font-weight:lighter;
	letter-spacing:.8px;
	margin: 0;
	border: none;
}

p.srbottom {margin-top: 14px}
.etoile {color: #C30F2D; font-size: 45px; line-height: 35px;float: left;padding: 0;margin-right: 10px;height: 12px;}

.playreal {
	background-color: #082529;
	width: 100%;
	height: 90px;
	margin-top:10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.playreal span {
	color: #fff;
	font-size: 20px;
	margin: 15px;
}

a.create,
a.btnPlay {
	font-size: 18px;
	color: #fff;
	padding-top: 10px;
	display: block;
	text-transform: uppercase;
	text-decoration: none;
	background: #7ED321;
	border-radius: 5px;
	line-height: 40px;
	padding-left: 10px;
	box-shadow: 0 4px 0 #457511;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	height: 57px;
	width: 437px;
	margin: 15px;
}

a.create {
	background: #07BED6;
	box-shadow: 0 4px 0 #017D8E;
	max-width: 250px;
	padding-left: 0;
	text-align: center;
}

a.btnPlay:hover {
	height: 55px;
	border: none;
	box-shadow: 0 2px 0 #457511;
	color: #fff;
	text-decoration: none;
	-webkit-transform: translate(0,4px);
	-moz-transform: translate(0,4px);
	-o-transform: translate(0,4px);
	transform: translate(0,4px);
}

a.create:hover {
	height: 55px;
	border: none;
	box-shadow: 0 2px 0 #017D8E;
	color: #fff;
	text-decoration: none;
	-webkit-transform: translate(0,4px);
	-moz-transform: translate(0,4px);
	-o-transform: translate(0,4px);
	transform: translate(0,4px);
}

a.btnPlay img {
	float: right;
	margin-right: 10px;
	margin-top: 5px;
	width: 42px;
}

ul#navi li a img {
	float: right;
	margin-right: 10px;
}


#sidebar {
	width:25%;
	float:right;
	display:inline-block;
	margin-top:20px;
}

#sidebar img {
	margin: 0 auto;
	display: block;
}

.sidebarMenu, .sidebarTech {padding:20px 0;width:180px;margin-left:20px;text-align:center}
.sidebarMenu Span, .sidebarTech Span {text-transform: uppercase; font-family: 'DosisBold', arial, sans-serif;font-size:19px;color:#07BED6}
.sidebarMenu ul, .sidebarTech ul{border-bottom:2px #07BED6 solid;border-top:2px #07BED6 solid;padding: 0}
.sidebarMenu li{text-align:center;list-style: none;line-height:25px;border-bottom: 2px solid white;height: 30px;padding-top: 5px;vertical-align: middle;background: #D9E9EB}
.sidebarTech li{text-align:center;list-style: none;line-height:25px;border-bottom: 2px solid white;height: 30px;padding-top: 5px;vertical-align: middle;background: #f5faf7;font-size: 15px}
.sidebarMenu li:hover {background: #c5c7be}
.sidebarMenu li a{text-decoration: none;color: #07BED6;text-transform: uppercase;font-size: 14px}
.sidebarMenu li a:hover{text-decoration: underline; color: #1E523A}

#about,
#content {
	width:70%;
	max-width:698px;
	display:inline-block;
	margin:30px 0 0 15px;
	height:auto;
	text-align:justify;
}

#about h2,
#content h2 {
	color:#000;
	font-size:30px;
	text-align:left;
	margin:0;
	margin-bottom: 15px;
	text-transform:uppercase;
	font-weight: 300;
	margin-top: 30px;
}

#about h3,
#content h3,
#contentCate h3,
#content h2:nth-of-type(2) {
	color:#1E523A;
	font-size:25px;
	text-align:left;
	text-transform: none;
	margin-top: 15px;
	margin-bottom: 15px;
	font-weight: 300;
}

blockquote{margin:30px 50px;border-left:1px solid black;padding-left: 10px;font-style: italic;text-align: left;}
cite a{padding-left: 10px;font-size: 12px;text-decoration: none;color: #666}

#contentCate {
	width: 100%;
	padding: 15px;
	clear: both;
}

#contentCate h2,
#contentCate h3 {
	font-size: 30px;
	color: #000000;
}

#contentCate p {
	margin-left: 15px;
}

strong {font-family: helvetica, arial, sans-serif;font-weight: 600;color: #666;text-align: center;padding: 2%}
#content li{color: #666;font-family: Helvetica, arial, sans-serif;font-size: 12px;font-weight: lighter;line-height: 18px;text-align: justify;
	-webkit-margin-before: 0em;
	-webkit-margin-after: 0em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
}
#content ul{margin-left: 4%;padding-right: 2%;}


/* desktop */
@media only screen and (min-width: 580px) {
	
	#fResa a.btnReservation,#fResa a.btnReservation:hover {
		float:right;
		margin:10px 17px 0 0;
	}
	
	p.sloganResa {
		margin-top: 7px;
	}
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 580px) {
	#reservation {
		text-align:center;
	}
	
	#reservation p.sloganResa {
		margin:20px auto;
	}
	
	#fResa {
		background:url("img/bgResa.jpg") repeat;
		padding-top:25px;
		height:115px;
	}
}

/* @ contact page Section
----------------------------------------------------------------------------------------------------*/

#contacter {max-width:600px;margin: 50px auto;text-align:center;border:3px solid #5d1118;padding:10px;height:auto;}
.contact-form {float: left;max-width: 600px}

#contact-form input, #contact-form textarea, #comment_form input, #comment_form textarea {
	padding: 5px;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0 0px 40px 0px;
	border: 1px solid black;
	height: 25px;
	color:#666;
	font-weight:lighter;
	text-align: center;
	font-size: 16px;
}

#contact-form input:hover, #contact-form textarea:hover, #comment_form input:hover, #comment_form textarea:hover 
{
	box-shadow: 1px 1px 2px black}


#contact-form input, #comment_form input {
	width:95%;
	background-color:#fff;
    background-repeat:repeat;
	position:relative !important;
	float:none;
}
#contact-form textarea, #comment_form textarea {
	height:150px;
	width:95%;
	background-color:#fff;
    background-repeat:repeat;
}
#contact-form textarea:focus, #contact-form input:focus {
	border: 1px solid #ccc;
}
#contact-form input#submit, #contact-form input#submit_comment,#comment_form input#submit, #comment_form input#submit_comment{
    text-align:center;
	color:#fff !important;
	font-size:15px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal;
	padding:4px;
	text-decoration:none;
	border-radius:5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
	position:relative;
	background-color:#5d1118;
	width:200px;
	height: 40px;
	border:none;
}
#contact-form input#submit:hover, #comment_form input#submit:hover {
	color:#fff !important;
	padding:4px;
	text-decoration:none;
	background-color:#1E523A;
	cursor:pointer;
	}
#contact-form label, #comment_form label{
	width:70px;
	margin: auto;
	text-align: center;
	padding-top: 1px;
	font-size:25px;
	font-family: 'Dosis', Helvetica, Arial, sans-serif;
	color:black;
	letter-spacing: 3px;
}
.vaidate_error {
	border:1px solid #F96E5B!important;
}
#response {
	color:#006633;
}

.socialH {
  width: 100%;
  top: 50%;
  text-align: center;
  margin-top: 15px;
  margin-left: -15px;
}

.socialH .link {
	display: inline-block;
	width: 40px;
	height: 41px;
	margin: 5px;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.socialH .link:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

.socialH .link.facebook {
	background: url("img/facebook-2.svg") no-repeat;
}

.socialH .link.twitter {
	background: url("img/twitter-2.svg") no-repeat;
}

.socialH .link.google-plus {
	background: url("img/google-plus-2.svg") no-repeat;
}

.socialH .link span {
  display: block;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.import_top table tr th {
	background-color: #006884 !important;
	font-size: 12px;
	font-weight: 500;
}

.import_top table tr td {
	background-color: #E1DECC;
	border-bottom: solid 1px #fff;
}

.import_top table tr:nth-of-type(2n+1) td {
	background-color: #f5f3e4;
}

.import_top table tr td:nth-of-type(2) a {
	color: #93A43C !important;
	text-decoration: none;
	font-size: 14px;
}

.import_top table tr td:nth-of-type(3) {
	font-weight: 500;
}