@font-face {
	font-family: 'Sketch';
	src: url(../fonts/Sketch.eot);
	src: url(../fonts/Sketch.eot?#iefix) format('embedded-opentype'),
		url(../fonts/Sketch.woff2) format('woff2'),
		url(../fonts/Sketch.woff) format('woff'),
		url(../fonts/Sketch.ttf) format('truetype'),
		url(../fonts/Sketch.svg#Sketch) format('svg');
	font-weight: normal;
	font-style: normal;
}

@keyframes tada {
  from { transform: scale3d(1, 1, 1); }
  10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to { transform: scale3d(1, 1, 1); }
}

@keyframes shake {
  from, to { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}

@keyframes pulse {
  from { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.05, 1.05, 1.05); }
  to { transform: scale3d(1, 1, 1); }
}

html{font-size:14px; background: url(../images/verreetbiere/bg_general.jpg) no-repeat left top / cover; font-family:'Neuton', sans-serif; padding-top:150px;min-height: 100%;box-sizing: border-box; /* overflow: hidden */}
html body{margin: 0;min-height: 1000px;position: relative;}
html body.ingame{min-height: 0;position: static;}

img{max-width:100%; height: auto}

.container{/*max-width:1170px;*/max-width: 1400px; margin: 0 auto; }
.container:after {
  content: "";
  display: table;
  clear: both;
}

.col-sm-1{width: 8.33333%; float: left; padding: 15px; box-sizing: border-box; font-size:14px;}
.col-sm-2{width: 16.6667%; float: left; padding: 15px; box-sizing: border-box; font-size:14px;}
.col-sm-3{width: 25%; float: left; padding: 15px; box-sizing: border-box; font-size:14px;}
.col-sm-4{width: 33.33%; float: left; padding: 15px; box-sizing: border-box; font-size:14px;}
.col-sm-6{width: 50%; float: left; padding: 15px; box-sizing: border-box; font-size:14px;}
.col-sm-8{width: 66.66%; float: left; padding: 15px; box-sizing: border-box; font-size:14px;}
.col-sm-9{width: 75%; float: left; padding: 15px; box-sizing: border-box; font-size:14px;}
.col-sm-10{width: 83.3333%; float: left; padding: 15px; box-sizing: border-box; font-size:14px;}
.col-sm-12{width: 100%; float: left; padding: 15px; box-sizing: border-box; font-size:14px;}

#jeu, #formulaire, #ajax_loader, #merci, #concourstermine, .swiper-button-prev, .swiper-button-next{display: none}
#ajax_loader{
	position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,.8);
    text-align: center;
    z-index: 1000;
    line-height: 100vh;
}
#content{z-index: 100; position: relative; width: 100%; /*float: left; position: relative*/ position: absolute;left:0;bottom: 0;height:100%;overflow:hidden;}
#inner_wrapper{z-index: 100; width: 100%;height:100%;}

header{background: #000; position: fixed; top: 0; left: 0; width: 100%; height: 93px; font-size:16px; z-index: 600}
header a{color: #fff; text-decoration:none}

header .container{position: relative}
header #reglement_header{position: absolute; left: 0; top: 40px;}
header #logo{margin: 0 auto; width: 160px;}
header #social_icones_header{position: absolute; right: 0; top: 40px; font-size:20px}
header #social_icones_header a{margin-right:10px}
header a:hover{color: #fece25}


#intro{z-index: 100; position: relative;height:100%;}
#intro .titre{color: #fece25; font-size:32px}
#intro #introduction{color: #fff; font-size:42px; margin: 15px 0 0}
#intro #bouton_participe{background: #fece25; color: #000; text-align: center; padding: 15px 25px; font-size:26px; font-style:italic; cursor: pointer; width: auto; display:inline-block}
#intro:after {
  content: "";
  display: table;
  clear: both;
}
#intro .col-sm-3{
	position: absolute;
    left: 0;
    bottom: 7%;
    float:none;
}
#intro .col-sm-8{
	position: absolute;
    right: 0;
    bottom: 0;
    float:none;
}

#jeu{position: relative; height: 100%; z-index: 100; position: relative; overflow: hidden}

#jeu #tireuses{position: fixed; /*height: 500px;*/height:55%; left: 0; right: 0; width:80%;/*width: 100%; max-width:1170px;max-width: 1400px;*/ margin: 0 auto; bottom: 100px !important;}
#jeu #tireuses > div{padding: 0;  /* margin-right:-25px;*/ cursor: pointer; width: 16.6667%; float: left; box-sizing: border-box; font-size:14px;
	-webkit-transition: opacity .3s;
	-moz-transition: opacity .3s;
	-ms-transition: opacity .3s;
	transition: opacity .3s;}
#jeu #tireuses:hover > div {
  opacity: 0.5;
}
#jeu #tireuses:hover > div:hover {
  opacity: 1;
}
#jeu #tireuses > div img{ margin-left: -12%;position: absolute;left:0;bottom:0;width: 100%;height: auto;}

.swiper-container {bottom: 100px; height: 500px; left: 0; margin-left: auto; margin-right: auto; overflow: hidden; position: absolute; width: 100%; z-index: 1}

#jeu .titre{color: #fff; font-size:32px; display: block; clear: both; text-align: center; margin: 25px 0}
#jeu #indice{width: auto; height: auto; position: absolute; bottom: 7vh; right: 0; z-index: 100; max-width:35vw}
#jeu #indice a{   background: transparent none repeat scroll 0 0; box-sizing: border-box; color: #fff; float: left; font-size: 20px; margin: 0 -1rem 0 0; padding: 0; position: relative; text-align: right; text-decoration: none;  width: 40%; z-index: 105;}
#jeu #indice a.fond_noir{background: #000 none repeat scroll 0 0; box-sizing: border-box;  color: #fff; float: left;  font-size: 1rem; margin: 2rem 0 0; padding: 1rem; position: relative;  text-align: center; text-decoration: none; width: 60%; z-index: 100;}
#jeu #indice a.fond_noir:hover{color: #fece25}
/*#jeu #indice a::before{background: url(../images/verreetbiere/help.png) no-repeat left top; width: 125px; height: 125px; position: absolute; bottom: -45px; left: -110px; z-index: 100; content: ''}*/

#jeu #verres{text-align: center; display: block; width: 100%; position: absolute; bottom: 30px; left: 0; right: 0; z-index: 300 !important;pointer-events:none;
	
	left:-100%;
	-webkit-transition: left 0s;
	-moz-transition: left 0s;
	-ms-transition: left 0s;
	transition: left 0s;
}
#jeu #verres.goingin{
	left:0;
	-webkit-transition: left 1s;
	-moz-transition: left 1s;
	-ms-transition: left 1s;
	transition: left 1s;
}
#jeu #verres.goingout{
	left:100%;
	-webkit-transition: left 1s;
	-moz-transition: left 1s;
	-ms-transition: left 1s;
	transition: left 1s;
}
#jeu #verres.incorrect{
  animation-name: shake;
  animation-duration: 1s;
  animation-fill-mode: both;
}
#jeu #verres img{max-width:14%;   margin-left: -4%;}

.mauvaise_reponse{font-family: 'Sketch'; background: #000; color: #fff; font-size: 3em; width: auto; height: auto; display: none; z-index: 300; position: absolute; top: 12%; left: 0; right: 0; margin: 0 auto; width: 33%; text-align: center;animation-name:pulse;animation-duration:1s;animation-fill-mode:both;}
.bonne_reponse{font-family: 'Sketch'; background: #fece25; color: #000; font-size: 3em; border: 10px solid #fff; padding: 15px; width: auto; height: auto; display: none; z-index: 300; position: absolute; top: 12%; left: 0; right: 0; margin: 0 auto; width: 33%; text-align: center;animation-name:tada;animation-duration:1s;animation-fill-mode:both;}
.mauvaise_reponse img, .bonne_reponse img{
	width: 100%;
	display: block;
}
#formulaire{position: relative; height: 100%; z-index: 100; position: relative}

#formulaire > p{float: left}
#formulaire > p img{
	width: 50%;
	height: auto;
}
#formulaire >p:last-child{
	float:none;
	clear:both;
}

#formulaire .titre{color: #fff; font-size:32px; display: block; clear: both; text-align: center; margin: 25px 0}
#formulaire .intro{color: #fff; font-size:22px; display: block; clear: both; text-align: center; margin: 0; text-align:center}

#formulaire .col-sm-6 input[type=text], #formulaire .col-sm-6 input[type=email]{display: block; width: 100%; box-sizing: border-box; color: #fff; font-size: 25px; border: 2px solid #fece25; padding: 15px 25px; background: transparent;}
#formulaire .col-sm-6 input[type=text].error, #formulaire .col-sm-6 input[type=email].error{border: 2px solid red}
#formulaire #bouton_je_minscris{background: #fece25; color: #000; text-align: center; padding: 15px 25px; font-size:26px; font-style:italic; cursor: pointer; width: auto; display:inline-block}
#formulaire .error_feedback{ display: none; }
#formulaire .error_feedback.active{ background:red;color:white;padding:20px;display: block; }

#formulaire label{color: #fff; font-size:14px}

input[type=text], input[type=email]{
	font-family:'Neuton', sans-serif;color:white;
}

#formulaire input[type=text]::-webkit-input-placeholder, #formulaire input[type=email]::-webkit-input-placeholder  { /* Chrome/Opera/Safari */
  color: white;font-style: italic;opacity: 1;
}
#formulaire input[type=text], #formulaire input[type=email]::-moz-placeholder { /* Firefox 19+ */
  color: white;font-style: italic;opacity: 1;
}
#formulaire input[type=text]:-ms-input-placeholder, #formulaire input[type=email]:-ms-input-placeholder { /* IE 10+ */
  color: white;font-style: italic;opacity: 1;
}
#formulaire input[type=text]:-ms-input-placeholder:-moz-placeholder, #formulaire input[type=email]:-ms-input-placeholder:-moz-placeholder { /* Firefox 18- */
  color: white;font-style: italic;opacity: 1;
}

#formulaire .concours_checkboxes label{font-family:'Neuton', sans-serif;color:white; display: block; margin-top: 15px}
#formulaire .concours_checkboxes label.error, #formulaire .concours_checkboxes label.error a{
	color:red;
}
#formulaire .concours_checkboxes label input{display: none}
#formulaire .concours_checkboxes label span {-moz-user-select: none; cursor: pointer; display: inline-block; padding-left: 1.5em; position: relative; font-size:1.2em; letter-spacing:0.5px}

#formulaire .concours_checkboxes label span::before {border: 2px solid #fece25; content: ""; height: 1em; left: 0; line-height: 1em; position: absolute; top: 0; width: 1em}
#formulaire .concours_checkboxes label input:checked + span::before {color: black; background:#fece25; content: "\f00c"; font-family: FontAwesome;}
#formulaire .concours_checkboxes label.error span::before{
	border-color:red;
}
#formulaire .concours_checkboxes label.error input:checked + span::before{
	color:red;
}

#formulaire label a{color:#fece25; text-decoration:none}
#formulaire label a:hover{text-decoration: underline}

#merci{position: relative; height: 100%; z-index: 100; position: relative}
#merci .titre{color: #fff; font-size:32px; display: block; clear: both; text-align: center; margin: 25px 0}
#merci .intro{color: #fff; font-size:22px; display: block; clear: both; text-align: center; margin: 0; text-align:center}
#merci #sharebt{background: #fece25; color: #000; text-align: center; padding: 15px 25px; font-size:26px; font-style:italic; cursor: pointer; display:block; text-decoration:none; text-align: center; margin: 40px auto 70px; width: 20%}
#merci .sharewrapper{
	text-align: center;
}
#merci .sharewrapper .backtobattin{
	color:white;
	font-size: 1.25em;
}
#merci #gamme_bieres{width: 100%; position: relative;}
#merci #gamme_bieres:after {
  content: "";
  display: table;
  clear: both;
}
#merci #gamme_bieres .col-sm-2{padding: 0 0 34% 0;position: relative;}
#merci #gamme_bieres .col-sm-2 img{
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    bottom: 0;
}

#table_bois{background: url(../images/verreetbiere/bar_en_bois.jpg) no-repeat center top / cover; width: 100%; position: absolute; bottom: 0; left: 0; height: 272px;z-index: 1}
#comptoir{background: url(../images/verreetbiere/comptoir.jpg) no-repeat center top / cover; width: 100%; position: absolute; bottom: 0; left: 0; height: 272px;z-index: 1; display: none}

#footer_mobile{display: none}

#concourstermine{color: #fff; font-size:38px; margin: 75px 0 0; text-align: center}
#concourstermine h2{color: #fece25; font-size:32px;}

@media only screen and (min-width: 1025px){
	#jeu #tireuses{
		-webkit-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		transform: none !important;
	}
}

	/* Mobile */
@media only screen and (max-width: 1024px) {
	
	html{/*padding-top: 90px;*/ padding-top:0;overflow: scroll}
	html body{margin:0;}
	
	header {height: 70px; z-index: 500}
	header #social_icones_header {font-size: 30px; top: 8px; right: 20px}
	header #social_icones_header a{margin-right:15px}
	header #logo {margin: 10px 0 0 20px; width: 120px}
	#reglement_header{display: none}
	
	#content{float: left; width: 100%;height:auto;position: relative;}
	#intro{
		height:auto;
		padding-top: 90px;
	}
	#intro .col-sm-1 {display: none}
	#intro .col-sm-3 {box-sizing: border-box;position: static; float: left; font-size: 14px; padding: 15px; width: 40%; margin: 0 30%}
	#intro .col-sm-8 {box-sizing: border-box;position: static; float: left;  padding: 15px; width: 90%; margin: 0 5%}
	#intro .col-sm-8 br{display: none}
	#intro .titre {font-size: 6vw; text-align: center}
	#intro #introduction {font-size: 8.5vw; margin: 15px 0 0; text-align: center}
	#intro #bouton_participe {font-size: 8vw; margin: 25px auto; padding: 20px 25px; text-align: center; width: 100%; box-sizing:border-box}
	#intro #intro_a_gagner{max-width:60%; float: right; margin: 0}
	
	#jeu{/*min-height:120vh;*/ overflow: hidden; padding-bottom:35px; box-sizing:border-box;height:100vh;}
	/*#jeu .titre {font-size: 8vw; text-align: center; margin: 25px 5% 0}*/
	#jeu .titre{
		top: 90px;
	    font-size: 6vw;
	    width: 80%;
	    left: 10%;
	    position: absolute;
	}
	
	
	#jeu .swiper-container {width: 100%;height: 100%; position: static; bottom: 130px !important}
	.swiper-slide {
        text-align: center;
        font-size: 18px;
        background: transparent;
        width: 100% ;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-slide.swiper-slide-active{/*width: 60% !important;*/}
    .swiper-slide.swiper-slide-active img{/*margin-left:-80px !important*/}
    .swiper-slide{width: 60% !important}
    
     /*.swiper-slide.swiper-slide-next{justify-content: left !important}
     .swiper-slide.swiper-slide-next img{margin-left:-80px !important}
     
     .swiper-slide.swiper-slide-prev{justify-content: right !important}*/
     
    #jeu .swiper-button-prev{background: url(../images/verreetbiere/biere_prev.jpg) no-repeat left top; width: 63px; height: 74px; left: 0}
	#jeu .swiper-button-next{background: url(../images/verreetbiere/biere_next.jpg) no-repeat left top; width: 63px; height: 74px; right: 0}
	
	#jeu #tireuses {/*position: static; margin-top:-25px;*/ height: auto}
	#jeu #tireuses>div img{width: 80%;left:0%;}
	/* #jeu #tireuses {left: 0; margin: 0 auto; max-width: 1170px; position: fixed; right: 0; width: 100%;}
	#jeu #tireuses .col-sm-2{width: 100%} */
	
	/* #jeu .swiper-slide{width: 15% !important;}
	#jeu .swiper-slide-active{width: 70% !important;} */
	#jeu .swiper-container {width: 100%; /*height: 650px*/height:80%;}
	#jeu .swiper-button-prev{top: 40%; display: block;}
	#jeu .swiper-button-next{top: 40%;  display: block;}
	
	#jeu #verres {bottom: 50px; display: block; /*left: 14%;*/ position: absolute; /*text-align: left; width: 70%;*/width:100%; z-index: 300 !important}
	#jeu #verres img {max-width: 65%; /*max-height:325px*/max-height: 185px;}
	
	.mauvaise_reponse{top: 20%; width: 50%;}
	.bonne_reponse{top: 20%; width: 50%;}
	
	#jeu #indice {bottom: 70px; height: auto; left: 25px; margin: 0; max-width: 80vw; position: absolute; right: auto; width: 100%; z-index: 500}
	#jeu #indice a.fond_noir {margin-top:1rem;font-size: 1.2rem; padding: 1rem 1rem 1rem 1.2rem;width:70%;}
	#jeu #indice a{
		width: 30%;
	}
	#formulaire{
	    width: 90%;
	    height: auto;
	    margin: 60px auto 0 auto;
	    padding-top: 40px;
	}
	#formulaire > p img{
		width: 100%;
	}
	#formulaire_inner .col-sm-6{width: 100%}
	#formulaire .concours_checkboxes label span {line-height: 1.3em}
	
	#merci{height: 100%}
	#merci #sharebt {font-size: 26px; margin: 40px auto 40px; padding: 15px 25px; width: 80%}
	
	#table_bois{height: 185px; position: absolute}
	#table_bois.final{height: 125px}
	#comptoir {height: 185px; position: absolute; bottom: 45px}
	
	#footer_mobile{background: #000; position: fixed; bottom: 0; left: 0; width: 100%; height: 35px; line-height: 1; padding:10px 0 0 0; font-size:18px; text-align: center; display:block; z-index: 500;}
	#footer_mobile a{color: #fff; text-decoration:none}
}
/* FIN Mobile */


/* iPad portrait */
 /* @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { */
@media only screen and (min-width : 640px) and (max-width : 1024px) {

}
/* FIN iPad portrait */