*, *:before, *:after { box-sizing:border-box; -webkit-box-sizing:border-box; }
body { font-family:'Arial'; margin:0; padding:0; font-size:20px; line-height:160%; background-color: white;}
a, a:hover, a:active { text-decoration:none; color:inherit; }
#ipad { padding: 20px; max-width:768px; position:relative; color:#691260; margin:0 auto; overflow:hidden; display: flex; flex-direction: column; min-height: 100vh;}

.borderRouge{
    width: 526px;
    border: 20px #d63531 solid;
    border-radius: 20px;
    margin-left: 80px;
    background-color:#720063 ;
}
.logo{width: 100%; display: flex; justify-content: center;text-align: center;}
#confirm_modal, #errormodal{display: none;}
#manchot { position:relative; margin: 150px 0; }
#manchot .poignee { position: absolute; right: 45px; top: -50px; -webkit-transition: all .2s linear; transition: all .2s linear; }
#manchot .poignee img { height: 200px; }
#manchot .poignee.active { transform: scaleY(-1); -webkit-transform: scaleY(-1); top: 60px; /*transform-origin: 0px 159px; -webkit-transform-origin: 0px 159px;*/ }
#slots { padding:0; display:table; background-color: #fff; border-spacing:15px; margin: 0 auto; }
#slots li { display:table-cell; width:142px; height:142px; background:#FFFFFF url('/theme/charte/imgs/jeu/slot.png') 0 0 repeat-y; transition: all 1500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); -webkit-transition: all 1500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); }


.bandit a img{margin-bottom: 30px; width: 90%; max-width: max-content;}
.bandit p, .win-content p, .lose-content p{color: #691260; font-weight: bold; font-size: 32px; line-height: 1.0em; text-transform: uppercase;}
.conditions{font-size: 12px!important;text-align: center;height: auto;margin-bottom: 0px;margin-top: auto;}
.conditions p{line-height: 1.5em;}
.win-content p.code{color:#d63531; font-size: 48px;}
.win-content form{margin-top: 30px;display: flex; flex-direction: column; align-items: center;}
.win-content form span{color: #691260;font-size: 24px;}
.win-content form>*{margin: 20px auto;}
.win-content form>input[type='email']{width: 50%;padding-left: 10px;border: 1px solid #691260;}
.win-content form>input[type='submit'], #lancer.mobile, .return-home{color:white; background-color: #d63531; border: none; padding: 10px;min-width: 100px;transition: transform 0.3s;}
.win-content form>input[type='submit']:hover{transform: scale(1.1);}

.win-content img,
.lose-content img{
    max-width: 100%;
}
#lancer.mobile{margin: 0 auto;font-size: 32px;padding: 10px 30px;}


/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
    padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
    top: 0;
    bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
    padding: 0;
}

#code_window{max-width: 600px; width: 90%; background-color: white; height: 40vh; display: flex; justify-content: center; align-items: center; margin: 0 auto;}
#code_window p{font-size: 32px;color: #720063; text-align: center;}
#code_window .code{font-size: 48px;color: #d63531;}
#code_window .code_content{display: flex; flex-direction: column;justify-content: space-between;}

/* This css is for normalizing styles. You can skip this. */
.check-bloc {postiton:relative; width: 50%;}
.check-bloc input {padding: 0;height: initial;width: initial;margin-bottom: 0;display: none;cursor: pointer;}
.check-bloc label {position:relative;padding-left:30px;margin-bottom:20px;display: inline-block;text-align: left;font-size: 16px;}
.check-bloc label a{color:#d63531 }
.check-bloc label:before, .check-bloc label:after {content:'';position:absolute;}
.check-bloc label:before {width:20px;height:20px;border:2px solid #720063;top:10px;left:0;}
.check-bloc label:after {width:0px;height:0px;transition:width 0.2s;top: 6px;left: 4px;transform:rotate(-45deg);}
.check-bloc input:checked + label:after {content: '';display: block;position: absolute;top: 12px;left: 9px;width: 6px;height: 14px;border: solid #720063;border-width: 0 2px 2px 0;transform: rotate(45deg);}

@media screen and (max-width: 768px) {
    #manchot{margin: 80px 0;}
    #manchot .poignee { display: none; }
    .mobile { display: block !important;}
    .borderRouge {margin: 0 auto;}
    .bandit p{width: 80%; margin: 0 auto;font-size: 24px;}
    .win-content form>input[type='email']{height: 50px;}
}

@media screen and (max-width: 600px) {
    #manchot{margin: 40px 0;}
    .bandit a img{
        margin: 0px;
    }
    #ipad { width:100%; min-height:100vh; height: 100%; }
    #form { padding: 10px 30px;}
    .win-content>img{max-width: 100%;}

    #slots { width: auto;  border-spacing: 0px;}
    #slots li{ width: 106px;  height: 106px; background-image: url("/theme/charte/imgs/jeu/slot_mobile.png")}
    .mobile { display: block !important;}
    #manchot .poignee { display: none; }

    .borderRouge {
        width: 100%;
        border-radius: 0;
        margin-left: 0;
    }
    .bandit p{width: 80%; margin: 0 auto;font-size: 20px;}

    .owl-theme .owl-controls .owl-buttons div{
        margin-top: 120px;
    }
    .win-content form>input[type='email'], .check-bloc{font-size: 18px; width: 90%;}
    .win-content>p{font-size: 24px;}
}

@media (max-width: 480px){
    #ipad { padding: 0px;}
}