.hide{display: none;}
#title{font-size:18px;text-align:center;}
.box, .content{width:400px;height:360px;}
.box img{max-width:400px;max-height: 360px;}
.box{position:relative;overflow:hidden;margin:0 auto;}
.content{position: relative;overflow:hidden;text-align:center;background:#FFF;}
.mask{position:absolute;top:0;left:0;width:400px;height:360px;cursor: pointer;}


body {
/*    padding: 10px 0;*/
}

.container {
    border: 1px solid #fff;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.canvas {
    position: absolute;
    top: 0;
    border-radius: 10px;
}
.img_scratch_text {
    position: absolute;
    left: 50%;
    top:10%;
    transform: translate(-50%, -50%);
    text-align: center;
}
#game_loader {
    border-radius: 10px;
}
#subcr_errpor_div{
/*    width: 320px;
    height: 340px;*/
}
input[type=email]{
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    height: 27px;
    padding-left: 7px;
    margin-bottom: 4px;
    font-size: 14px;
}
input[type=number]{
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    height: 27px;
    padding-left: 7px;
    margin-bottom: 4px;
    font-size: 14px;
}
input[type=text]{
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    /*display: none;*/
    height: 27px;
    padding-left: 7px;
    font-size: 14px;
}
#submit_btn1{
    width: 104%; 
/*    background-color: #4CAF50;
    color: white;*/
    border: none;
    border-radius: 4px;
    height:30px;
    margin-bottom: 5px;
    font-size: 14px;
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
   }
   
 input:focus {
  border: 1px solid black;
 
}
a {
    color: #116EFF;
    text-decoration: none;
}

#option_screen_preview {
    padding: 15px;
}
#optin_text, #thanku_text{
    padding: 0px 15px;
}
#iAgreeDiv{
    padding: 0px 0px 15px;
}
.name_field input, .email_field input{
    margin: 3px 0px 5px;
}
/* #display_text {
    padding-top: 8px;
    padding-right: 11px;
    padding-bottom: 5px;
    padding-left: 10px;
    height: 55px;
} */
#lead_form {
/*    height:180px;
    padding-right: 20px;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    visibility: hidden;*/
}
#thankyou_page {
    display:none;
/*    padding-top: 20px;
    padding-left: 10px;
    padding-right: 5px;
    padding-bottom: 0px;*/
}
#thanks_msg_text {
/*    padding: 10px;
    height: 288px;*/
}
#error_msg_div {
    text-align: center; 
    height:325px;
}
#subcr_errpor_div {
    display:none; 
    font-size: 25px;
}
#loader-div {
    display:none;
    position: relative;
}
#thnk_page_without_autores{
    height: 290px;
/*    padding: 20px;*/
}

#optin_text::before {
    box-sizing: border-box; 
}
#optin_text::after {
    box-sizing: border-box; 
}

#lead_name_p {
    padding-bottom: 5px;
}

#game_loader {
    width: 100px;
    margin: 0;
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#loader_text{
    font-size: 14px;
    font-family: Rubik,sans-serif;
    margin: 40px 4px 25px -5px;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.confetti {
  height: 5px;
  width: 5px;
  position: absolute;
  opacity: 0.75;
  z-index: 0;
  /* gpu acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.confetti.blue {
  background: #00a8ff;
}
.confetti.green {
  background: #4cd137;
}
.confetti.yellow {
  background: #fbc531;
}
.confetti.red {
  background: #e84118;
}
.confetti.pink {
  background: #ff9ff3;
}
.confetti.circle {
  border-radius: 50%;
}
.confetti.rectangle {
  padding: 0 1px;
}
.closetag {
  position: absolute;
  width: 25px;
  height: 25px;
  opacity: 1;
  z-index: 99999999;
  border-radius:20px;
  background: #555;
}
.closetag:hover {
  opacity: 1;
}
.closetag:before, .closetag:after {
  position: absolute;
  left: 11px;
  content: ' ';
  height: 15px;
  width: 3px;
  background-color: #FFF;
  top:5px;
}
.closetag:before {
  transform: rotate(45deg);
}
.closetag:after {
  transform: rotate(-45deg);
}
#horizontal-name-field1{
    width:48%;
    float:left;
    color: #e4e7ea!important;
}
#horizontal-email-field1{
    width:48%;
    float:left;
    color: #e4e7ea!important;
}
#horizontal-name-field1 input{
    padding: 0px 0px 0px 10px;
    color: #000!important;
    border: 1px solid #e4e7ea;
}
#horizontal-email-field1 input{
    margin-left: 5px;
    padding: 0px 0px 0px 10px;
    color: #000!important;
    border: 1px solid #e4e7ea;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.clearfix{
    clear:both;
}
::placeholder {
    color: #afafaf;
    opacity: 1; /* Firefox */
}
#privacy_link{
    font-family: Rubik,sans-serif;
}
@-moz-document url-prefix() { 
  #body-container {
     position: static;
  }
  #js-container #option_screen_preview{
      position: absolute;
  }
}
.justCheck{
      height:300px;
   }
@media only screen and (max-device-width:425px){
   
}


@media only screen and (min-width:300px) {
    /*slot final preview*/
    .group{
        width: 80%!important;
    }
    .reel{
        width: 30px !important;
        height: 40px !important;
    }
    #slot-trigger{
        height: 50px !important;
    }
    #slot-trigger .arm{
        top: -8px !important;
    }
    /*slot final preview ends*/
    /*Memory final preview Starts*/
    .card{
        width: 40px!important;
        height: 40px!important;
}
    .deck{
        min-height: 190px !important;
    }
    /*Memory final preview ends*/
    
    /*===========================*/
    
    /*Break Dance final preview Starts*/
    .breakDanceDiv .breakDanceUL li{
        width: 40px!important;
        height: 45px!important;
        margin: 4px !important;
        box-shadow:  0px 1px 3px #000;
    }
    .breakDanceDiv .breakDanceUL li .uppertext{
        font-size: 12px !important;
        padding-top: 7px !important;
        padding-bottom: 2px !important;
    }
    .breakDanceDiv .breakDanceUL li .lowertext{
        font-size: 8px !important;
    }
    .breakDanceDiv .breakDanceUL li .breakDance_CenterBTN{
        font-size: 10px !important;
        padding-top: 9px !important;
    }
    /*Break Dance final preview ends*/
    
    /*===========================*/
    
    /*Pick A Gift final preview Starts*/
    .giftBox {
        width: 32px !important;
        height: 32px !important;
        margin: 20px 10px 20px !important;
        }
    .box-lid {
        width: 90%;
        height: 12px !important;
    }
    .lid-strip {
        width: 15px !important;
        height: 12px !important;
    }
    .box-body {
        width: 80%;
        height: 20px !important;
    }
    .body-strip {
        width: 15px !important;
        height: 20px !important;
        top: -20px !important;
    }
    .ribbon1 {
        width: 10px !important;
        height: 10px !important;
    }
    .ribbon2 {
        width: 10px !important;
        height: 10px !important;
    }
    /*Pick A Gift final preview ends*/
    
    /*===========================*/
    
    /*flip a coin final preview Starts*/
    .coin-container {
        height: 120px !important;
        width: 120px !important;
    }
    /*flip a coin final preview ends*/
}

/*============================================ 400 ==========================================*/
@media only screen and (min-width:400px) {
    /*slot final preview*/
    .group{
        width: 89%!important;
    }
    .reel{
        width: 90px !important;
        height: 100px !important;
    }
    #slot-trigger{
        height: 100px !important;
    }
    #slot-trigger .arm{
        top: -25px !important;
    }
    /*slot final preview ends*/
    
    /*===========================*/
    
    /*Spin Wheel final preview ends*/
        .spinDiv{
                width: 20em;
            }
        .center-circle {
                top: 40% !important;
                left: 43% !important;
            }
            .clicker {
                left: 221px!important;
                top: -23px!important;
            }
            .spinDiv:before{
                left: 115px!important;
                top: 15px!important;
            }
    /*Spin Wheel final preview ends*/
    
    /*===========================*/
    
    /*Memory final preview Starts*/
    .card{
        width: 80px!important;
        height: 80px!important;
}
    .deck{
        min-height: 300px !important;
    }
    /*Memory final preview ends*/
    
    /*===========================*/
    
    /*Break Dance final preview Starts*/
    .breakDanceDiv .breakDanceUL li{
        width: 80px!important;
        height: 85px!important;
        margin: 8px !important;
        box-shadow: 0px 1px 3px #000;
    }
    .breakDanceDiv .breakDanceUL li .uppertext{
        font-size: 24px !important;
        padding-top: 14px !important;
        padding-bottom: 4px !important;
    }
    .breakDanceDiv .breakDanceUL li .lowertext{
        font-size: 16px !important;
    }
    .breakDanceDiv .breakDanceUL li .breakDance_CenterBTN{
        font-size: 20px !important;
        padding-top: 18px !important;
    }
    
    /*Break Dance final preview ends*/
    
    /*===========================*/
    
    /*Pick A Gift final preview Starts*/
    .giftBox {
        width: 65px !important;
        height: 65px !important;
        margin: 20px 16px 20px !important;
        }
    .box-lid {
        width: 90%;
        height: 25px !important;
    }
    .lid-strip {
        width: 30px !important;
        height: 25px !important;
    }
    .box-body {
        width: 80%;
        height: 40px !important;
    }
    .body-strip {
        width: 30px !important;
        height: 40px !important;
        top: -42px !important;
    }
    .ribbon1 {
        width: 20px !important;
        height: 20px !important;
    }
    .ribbon2 {
        width: 20px !important;
        height: 20px !important;
    }
    /*Pick A Gift final preview ends*/
    
    /*===========================*/
    
    /*flip a coin final preview Starts*/
    .coin-container {
        height: 200px !important;
        width: 200px !important;
    }
    /*flip a coin final preview ends*/
}

/*============================================ 600 ==========================================*/
@media only screen and (min-width:600px) {
    
}
@media only screen and (min-width:700px) {
    
}
@media only screen and (min-width:750px) {
    
}
@media only screen and (min-width:1280px) {
    
}
@media only screen and (min-width:1366px) {
   
}
@media only screen and (min-width:1440px) {
    
}
@media only screen and (min-width:1600px) {
    
}