html{height: 100%; background: #000;}
body{background-color:#EEEEEE;height: 100%;}
a:hover{color:inherit;}
a{color:#0062cc;}

.gencontenttop{background: #222; height: 56px;}

.gencontent .gamevideo{background: #26796c; position: relative; }
.gencontent .gamemap{background: #fff; padding-bottom: 15px;}
.gencontent .gametexteintro {    background: #fff;}
.gencontent .gamewinwinwin {    background: #fff;    display: none;}
.gencontent .gamelooseloose {    background: #fff;    display: none;}

.navbar {
padding: 5px 5px 10px 5px;
}

#gameidwin h2{
    font-family: 'amatic_scregular', sans-serif;
    font-size: 45px;
    font-weight: 200;
    text-align: center;
    line-height: 1.4;
    text-align: center;
}
#gameidwin p{
    font-family: 'amatic_scregular', sans-serif;
    font-size: 65px;
    font-weight: 200;
    text-align: center;
    line-height: 1.4;
    text-align: center;
}

.gencontent .gamegame{
    background: #26796c; 
/*    height: 400px;
*/    margin-bottom: 0px }

p{ font-family: 'Roboto', sans-serif;}
b, strong {
    font-weight: 600;
}

@font-face {
    font-family: 'amaticbold';
    src: url('../font/amatic-bold-webfont.woff2') format('woff2'),
         url('../font/amatic-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'amatic_scregular';
    src: url('../font/amaticsc-regular-webfont.woff2') format('woff2'),
         url('../font/amaticsc-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
.container-fluid {
    background: #222;
}


/* CSS DU QUIZZ */
.qsm-page{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.quiz_section{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    background: #26796c; 
    height: 380px;
    padding: 0 15px !important;
    margin: 0 0 15px 0 !important;

}

.ingametop{
    height: 50px;    background: #999;    height: 100px;

}
.ingamebottom{
    height: 80px;
}
.ingamebottomabandon{
    height: 40px;    background: #222;

}
.ingamegauche{
    height: 360px;
    background-color: #333;
        overflow: hidden;

}
.ingamegauche .row .fluid-width-video-wrapper iframe{
    height: 360px;
}

.ingamedroite{
    /*height: 360px;*/
    padding-bottom: 25px;
    background-color: #eee
}

.rephidden{
    display: none;
}
.togiveup{
      font-family: 'amatic_scregular', sans-serif;
    position: absolute;
    color: #fff;
    font-size: 90px;
    text-align: center;
    width: 100%;
    padding-top: 130px;
    background-color: rgba(9, 31, 16, 0.8);
    height: 100%;
    display: none;
    text-transform: uppercase;  
}
.towin {
    font-family: 'amatic_scregular', sans-serif;
    position: absolute;
    color: #fff;
    font-size: 90px;
    text-align: center;
    width: 100%;
    padding-top: 130px;
    background-color: rgba(9, 31, 16, 0.8);
    height: 100%;
    display: none;
    text-transform: uppercase;
}

.toloose {
    font-family: 'amatic_scregular', sans-serif;
    position: absolute;
    color: #fff;
    font-size: 70px;
    text-align: center;
    width: 100%;
    padding-top: 10px;
    background-color: rgba(9, 31, 16, 0.8);
    height: 100%;
    display: none;
    text-transform: uppercase;
}
.toloose p{
/*    font-size: 40px;
*/
}

.retryornot{
    margin-top: 15px;
    font-size: 44px;
    background: #778e286e;
}
.retryornotnot{
    font-size: 35px;
    background: #8e632894;
    margin-bottom: 0;
}
.hinthint{
    font-size: 32px;
    background: #ffffffc2;
    color: #000;
    font-family: 'amaticbold', sans-serif;
    display: none;
}

.toloose p a{
/*    text-decoration: underline !important;
*/    font-family: 'amaticbold', sans-serif;
    cursor: pointer
}

.croppedimagame{
    width: 100%;
    height: 360px;
    position: relative;
}

.croppedimagamesingle{
    height: 100%;
    position:relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.gamemapin{
    background-color: #fff; min-height: 300px;
}
.gamemap img{
    width: 100%;
    position: absolute;
    opacity: 0;
/*    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    height: 100%;
    background-size: cover;
    position: relative;
    background-size: 100%;
    background-repeat: no-repeat;*/
}
.gamemap #imgame-0{opacity:1;} 

.gencontent .gameintro{background: #555; height: 350px;}

#imdh {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
        position: absolute;
        
}

#imdh h1{
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 70px;
    font-weight: 200;
    text-align: center;
    bottom: 20px;
    position: absolute;
    line-height: 0.95;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.fluid-width-video-wrapper {
    padding-top: 0 !important;
    height: 400px;
    overflow: hidden;
}

#gamemailto{
    position: relative;
    width: 100%;
/*    height: 200px;
*/    padding: 100px 25px
}
#gamemailto h3{
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 50px;
    font-weight: 200;
    text-align: center;
}
#gamemailto p{
    color: #fff;
    font-family: 'Roboto', sans-serif;    
    font-size: 20px;
    font-weight: 200;
    text-align: center;
}

#gamemailto form{
        text-align: center;
}
#gamemailto input{
        text-align: center;
        height: 35px;
        border: none;
        float: left;
}
#gamemailto input[type="text"]{width: 80%;}
#gamemailto input[type="submit"]{width: 19%; border-left: 1px solid #26796c;}


#gamevideoint {
    position: relative;
    width: 100%;
    height: 400px;
}

#gamevideoint iframe{
    position: absolute;
    width: 100%;
        height: 400px;
}

#gametexteint{
    text-align: center;
    padding: 15px;
}

#gameidwin, #gameidloose {
    text-align: center;
    padding: 30px 15px 15px 15px;
    width: 100%;
}
#gameidwin h2, #gameidloose h2{
    font-family: 'amatic_scregular', sans-serif;
    color: #26796c;
    text-transform: uppercase;
    font-size: 65px;
    font-weight: 200;
    text-align: center;
        line-height: 1.4;    text-align: center;
}
#gameidwinshare {
    background-color: #26796c;
    text-align: center;
    padding: 30px 15px 15px 15px;
    width: 100%;
}
#gameidwinshare h4{
    font-family: 'amatic_scregular', sans-serif;
    color: #333;
    text-transform: uppercase;
    font-size: 20px;
    text-align: center;
    width: 100%;
    line-height: 2.8;
}


.ingametop h2{
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 35px;
    font-weight: 200;
    text-align: left;
        line-height: 1.4;
        bottom: 0;
    position: absolute;
}
.ingametop h2 span{

    font-weight: 300;
}

.ingamebottom h2{
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 65px;
    font-weight: 200;
    line-height: 1.3;
    /* float: right; */
    /* margin-right: 10px; */
    text-align: center;
}
.ingamebottomabandon h2{
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 35px;
    font-weight: 200;
    line-height: 1.3;
    /* float: right; */
    /* margin-right: 10px; */
    text-align: center;
}
.boutonvalidation, .boutonreset {
    text-align: center;
    width: 100%;
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 55px;
    font-weight: 200;
    background: transparent;
    border: none;
    line-height: 1.5;
    padding: 0;
    cursor: pointer;
}

.boutonvalidation:hover, .boutonreset:hover {
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    background: transparent;
    border: none;
}

.boutonabandon {
    text-align: center;
    width: 100%;
    font-family: 'amatic_scregular', sans-serif;
    color: #717171;
    text-transform: uppercase;
    font-size: 23px;
    font-weight: 200;
    background: transparent;
    border: none;
    line-height: 1.7;
    padding: 0;
    cursor: pointer;
    background: #222;
}
.btn {
    border-radius: 0;
}

.boutonabandon:hover,.boutonabandon:active,.boutonabandon:focus,.boutonabandon:visited{
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    background: initial !important;
    border: none !important;
    box-shadow: none !important;
}

.boutonabandoncertain:hover,.boutonabandoncertain:active,.boutonabandoncertain:focus,.boutonabandoncertain:visited{
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    border: none !important;
    box-shadow: none !important;
    background-color: #589645 !important;

}

.boutonabandonnon:hover,.boutonabandonnon:active,.boutonabandonnon:focus,.boutonabandonnon:visited{
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    border: none !important;
    box-shadow: none !important;
    background-color: #965545 !important;

}
.boutonabandoncertain {
    text-align: center;
    width: 50%;
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 23px;
    font-weight: 200;
    border: none;
    line-height: 1.7;
    padding: 0;
    cursor: pointer;
    background-color: #589645;
    float: left;
    display: none;
    height: 40px;
}
.boutonabandonnon {
    text-align: center;
    width: 50%;
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 23px;
    font-weight: 200;
    border: none;
    line-height: 1.7;
    padding: 0;
    cursor: pointer;
    background-color: #965545;
    float: left;
    display: none;
        height: 40px;
}

.ingamedroite h3{
    font-family: 'amatic_scregular', sans-serif;
    color: #222;
    text-transform: uppercase;
    font-size: 30px;
    margin: 25px 15px 5px 15px;
    font-weight: 500;
}
.ingamedroite p{
    font-family: sans-serif;
    color: #222;
    font-size: 17px;
    margin: 0 15px 15px 15px;
    font-weight: 200;
}
.ingamedroite h4{
    font-family: 'amatic_scregular', sans-serif;
    color: #222;
    text-transform: uppercase;
    font-size: 24px;
    margin: 15px;
    font-weight: 300;
}

.form-check {
    padding: 0 0 0 45px;
}
.form-check-label {
    padding-left: 10px;
    font-family: sans-serif;
    color: #26796b;
    font-weight: 400;
    font-size: 19px;font-family: 'Roboto', sans-serif;
}

.form-check-input {
    margin-top: 8px;
}

.form-check-label::before {
    background-color: darkorange;
}
.form-check-input:checked~.form-check-label::before,
.form-check-input:checked~.form-check-label::after {
    background-color: greenyellow;  /* green */
    /* this bg image SVG is just a white circle, you can replace it with any valid SVG code */
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E); 
    border-radius: 50%;
}
.form-check-input:active ~ .form-check-label::before {
    color: #fff;
    background-color: #ff0000; /* red */
}

.form-group{
    padding: 0 15px;
}


.blocquizz{
    margin: 0;
    padding: 0;
    font-family: 'amatic_scregular', sans-serif;
}
.blocquizz li{
background-color: #26796c;
    color: #fff;
    padding: 0px 15px 9px 15px;
    font-family: 'amatic_scregular', sans-serif;
    font-size: 25px;
    cursor: pointer;
    margin-top: 5px;
    list-style: none;
}
.blocquizz a span{
    font-size: 35px;
    font-family: 'amaticbold', sans-serif;

}
.blocquizz a:after{
    content:"OK";
    margin-left: 10px;
    font-size: 50px;
    display: none;
}

.preppar {
    background: #222;
    color: #828282 !important;
    padding: 5px 15px 5px 0px;
    text-align: center;
    font-size: 12px;
}

.navbar-toggler{
	border: none;
    padding: 0px;
}

.gamesoustitre{
	background-color: #26796c;
	height: 56px;

}
.gamesoustitre h4{
	font-family: 'amatic_scregular', sans-serif;
    color: #333;
    text-transform: uppercase;
    font-size: 20px;
    text-align: center;
    width: 100%;
    line-height: 2.8;
}

.footeryo {
    background-color: #000;
    color: #828282 !important;
    padding: 15px;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
}

.footeryo p{
    margin: 0 auto;
    right: 0px;
    left: 0px;
    width: 100%;
    text-align: center
}

#mapid { 

height: 300px;
width: 100%;

 }

.maptitle{
text-align: left;
width: 100%;
font-family: 'amatic_scregular', sans-serif;
color: #fff;
text-transform: uppercase;
font-size: 55px;
font-weight: 500;
background: transparent;
border: none;
line-height: 1.3;
padding: 30px 0 0 15px;
cursor: pointer;
}

.gotoquest a {
    width: 100%;
    display: block;
}

.globcorrect{
    margin: 0 -15px;
    background-color: #fff;
    padding-bottom: 100px;
}
.gcimg img{width: 100%;}


.gctxt{
    text-align: center;
    margin: 50px;
    font-family: 'Roboto', sans-serif;
    color: #646464;
}
.gcul{
    text-align: center;
    margin: 0 50px 50px 50px;
    font-family: 'Roboto', sans-serif;
    color: #3e5d7a;
    font-size: 1.5rem;
    list-style: none;
    padding: 0

}
.gcul li a{
    color: #3e5d7a;
    text-transform: uppercase;
    }


@media (min-width: 720px) {

body{max-width: 720px; margin: 0 auto}

.gamemapin{
    background-color: #fff; min-height: 600px;
}


#imdh h1 {
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 100px;
    font-weight: 200;
    text-align: center;
    margin-top: 240px;
}
.blocquizz{
    margin: 100px 0 0 0;
    padding: 0;
    font-family: 'amatic_scregular', sans-serif;
}

.boutonvalidation {
    text-align: center;
    width: 100%;
    font-family: 'amatic_scregular', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 55px;
    font-weight: 500;
    background: transparent;
    border: none;
    line-height: 1.3;
    padding: 0;
    cursor: pointer;
}
}