body {
    background: url('images/bg.jpg') #A0AEB6;
    background-repeat: repeat-x;
    background-size: 80px;
}

#lockQuestion{width:100%; height:482px; position: absolute; z-index:95; }

.columns { 
    margin-top:0px !important; 
    margin-bottom:20px; 
}

.rowDrop{}

.rowDrop div{
    display: inline;
    float: left;
    margin: 0 7px 15px;
    width: 31.9149%;
}

.text{
    width: 31.9149%;

}

.container { 


    max-width:1100px; 
    margin:0 auto; 
    padding:5px 10px 0; 
    text-align:center; 
    overflow:hidden;

}
.quadro {
    background: url(images/quadro.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 195px;
    position: relative;
    top: 30px;
}
.quadro_label {
    width: 187px !important;
    padding: 20px  !important;
    position: relative  !important;
    color: #222  !important;
    font-size: 21px  !important;
    font-weight: lighter  !important;
    font-family: Arial  !important;
}

.quadro_resposta {
    display: inline-block; 
    background-color: white; 
    border: #222 3px solid; 
    height: 30px; 
    line-height: 30px;
    padding-left: 5px;
    float: left;
    width: 4em; 
    margin-left: 20px;
    margin-right: 5px;
    border-radius: 5px;
    font-size: 16px;
    color: #222;
}

.quadro_botao {
    display: inline-block; height: 30px; line-height: 30px;
    cursor: pointer;
}

.rowDrop p { 
    background:#fff; 
    border:3px dashed #000; 
    font-family:"anime"; 
    font-size:14px; 
    padding:2px; 
    text-align:left; cursor: pointer;
}

#stage .questions .howToDo {
    font: 22px Arial,Verdana,sans-serif;
    background-color: rgba(255, 255, 255, 0.8);
    margin-bottom: 5px !important;
    padding: 5px 0;
    max-width: 880px;
    margin: 0 auto;
    min-height: 50px;
    position: relative;
    top: 5px;
}

#stage {
    height: 510px;
}

.buttons {
    color: #fff !important;
    background-color: #656672 !important;
    box-shadow: none;
    background-image: none;
    text-shadow: none;
    font-weight: lighter;
    border-radius: 5px;
}

#header .menuItens a {
    color: rgba(0, 0, 0, 0.9) !important;
}

.incorrectWords{
    width: 100%;
    height: 20%;
    margin: -20% 0 0;
    position: absolute;
    z-index: 1;
}

a.error{
    width: 60px;
    height: 61px;
    background: url('images/exclamacao.png') no-repeat;
    float: right;
    margin: 0 10px;
    z-index: 1;	
}

.abaco {
    width: 750px;
    height: 419px;
    background-image: url('abaco-A.png');
    margin: 0 auto;
    position: relative;
    margin-top: 25px;
    z-index: 20;
    background-size: contain;
    background-repeat: no-repeat;
}

.abaco.decimal {
    width: 631px;
    height: 494px;
    background-image:url('abaco-D.png');
    margin:0 auto;
    display: inline-flex;
}

.contadores {
    width: 595px;
    margin: 0 auto;
    position: relative;
    bottom: 68px;
    font-size: 27px;
    z-index: 25;
    margin-left: 35px;
}

.contador {
    display: inline;
    text-align: center;
    width: 98px;
    color: #664636;
    font-weight: lighter;
    text-shadow: 1px 0px 1px #4D3939;
    position: relative;
    float: left;
}

.haste {
    width: 24px;
    height: 288px;
    margin-left: 5.08em;
    position: relative;
    float: left;
}

.haste.active {
    width: 23px;
    height: 288px;
    display: inline-block;
    background-color: yellow;
    opacity: 0.2;
    margin-left: 5.08em;
}


.argola {
    width: 76px;
    height: 36px;
    background-image: url('rosquinha-a.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: -10px;
}

div .argola:nth-child(1) {
    z-index: 5;
}
div .argola:nth-child(2) {
    z-index: 4;
}
div .argola:nth-child(3) {
    z-index: 3;
}
div .argola:nth-child(4) {
    z-index: 2;
}

.argola.usada {
    width: 53px;
    height: 25px;
    background-image: url('rosquinha.png');
    margin-bottom: -10px;
}

.argola.usada.excedente {
    width: 53px;
    height: 25px;
    background-image: url('rosquinha-s.png');
    margin-bottom: -10px;
}

.argolas {
    margin-bottom: 0px;
    vertical-align: bottom;
    position: relative;
    right: -25px;
    top: 152px;
    z-index: 50;
    display: none;
}

.tooltip {
    min-width: 37px;
    background-color: transparent;
    display: inline-block;
}

.excedido_num_argolas {
    background-color: transparent !important;
    min-width: 53px;
    width: 91px;
    height: 27px;
}

img.tooltip.exclamacao.tooltipstered {
    max-height: 35px;
    padding: 0px;
    position: relative;
    top: 0px;
}

.left_col {
    width: 145px;
    float: left;
    height: 350px;
}

.right_col {
    width: 70px;   
    height: 200px;
    float: left;
}

.center_col {
    width: 632px;
    height: 485px;
    float: left;
}
.contem_tudo {
    min-width: 500px;
    height: 510px;
    width: 880px;
    margin: 0 auto;
}

.lixeira {
    position: relative;
    margin-top: 273px;
    height: 166px;
    width: 151px;
    background-image: url('lixeira-fechada.png');
    background-repeat: no-repeat;
    z-index: 1;
    display: none;
}


.lixeira.active {
    background-image: url('lixeira-aberta.png');
    background-repeat: no-repeat;
    width: 154px;
    height: 200px;
    margin-top: 240px;
    margin-left: -9px;
}

.borda_verde {
    border: 3px limegreen solid;
    display: inline-block;
    box-sizing: border-box;
    height: 35px;
    width: 90px;
}

#chao{

}

@keyframes blink {  
    0% { 
        border: 2px solid red;        
    }
    100% { color: black; 
           border: 2px solid transparent;
    }
}
@-webkit-keyframes blink {
    0% { 
        border: 2px solid red;
    }
    100% { color: black; 
           border: 2px solid transparent;
    }
}

.blink {
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    animation: blink 1s linear infinite;
    border: 2px solid transparent; 
    display: inline-block;
}

.lock_question {
    position: relative;
    width: 1000px;
    height: 450px;
    z-index: 999;
    display: none;
}

.play {
    width: 30px;
    height: 30px;
    background-image: url('play.png');
    display: inline-block;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.pause {
    width: 30px;
    height: 30px;
    background-image: url('pause.png');
    display: inline-block;
    float: left;
    background-size: contain;
    background-repeat: no-repeat;
}

.close {
    width: 30px;
    height: 30px;
    background-image: url('close.png');
    display: inline-block;
    float: left;
    margin-left: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

.help_toolbar {
    margin-left: 40px;
    width: 293px;
    display: inline-block;
    top: 10px;
    position: relative;
}
#slider_ajuda {
    width: 175px;
    float: left;
    margin-left: 20px;
    margin-top: 8px;
}

/* RADIO */
.regular-radio {
    display:none;
}
.regular-radio+label {
    -webkit-appearance:none;
    background-color:#fafafa;
    border:1px solid #894717;
    box-shadow:0 1px 2px rgba(0,0,0,0.05),inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding:9px;
    border-radius:50px;
    display:inline-block;
    position:relative;
}
.regular-radio:checked+label:after {
    content:' ';
    width:12px;
    height:12px;
    border-radius:50px;
    position:absolute;
    top:3px;
    background:#894717;
    box-shadow:inset 0px 0px 10px rgba(0,0,0,0.3);
    text-shadow:0px;
    left:3px;
    font-size:32px;
}
.regular-radio:checked+label {
    background-color:white;
    color:#894717;
    border:1px solid #894717;
    box-shadow:0 1px 2px rgba(0,0,0,0.05),inset 0px -15px 10px -12px rgba(0,0,0,0.05),inset 15px 10px -12px rgba(255,255,255,0.1),inset 0px 0px 10px rgba(0,0,0,0.1);
}
.regular-radio+label:active,.regular-radio:checked+label:active {
    box-shadow:0 1px 2px rgba(0,0,0,0.05),inset 0px 1px 3px rgba(0,0,0,0.1);
}
.big-radio+label {
    padding:16px;
}
.big-radio:checked+label:after {
    width:24px;
    height:24px;
    left:4px;
    top:4px;
}

.regular-checkbox {
    display:none;
}
.regular-checkbox+label {
    background-color:#fafafa;
    border:1px solid #894717;
    box-shadow:0 1px 2px rgba(0,0,0,0.05),inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding:9px;
    border-radius:3px;
    display:inline-block;
    position:relative;
}
.regular-checkbox+label:active,.regular-checkbox:checked+label:active {
    box-shadow:0 1px 2px rgba(0,0,0,0.05),inset 0px 1px 3px rgba(0,0,0,0.1);
}
.regular-checkbox:checked+label {
    background-color:white;
    border:1px solid #894717;
    box-shadow:0 1px 2px rgba(0,0,0,0.05),inset 0px -15px 10px -12px rgba(0,0,0,0.05),inset 15px 10px -12px rgba(255,255,255,0.1);
    color:white;
}
.regular-checkbox:checked+label:after {
    content:'\2714';
    font-size:14px;
    position:absolute;
    top:0px;
    left:3px;
    color:#894717;
}
.big-checkbox+label {
    padding:18px;
}
.big-checkbox:checked+label:after {
    font-size:28px;
    left:6px;
}

#chao {
    height: 105px;
    position: absolute;
    background: #849296;
    background: -moz-linear-gradient(top, #849296 0%, #a0aeb6 58%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#849296), color-stop(58%,#a0aeb6));
    background: -webkit-linear-gradient(top, #849296 0%,#a0aeb6 58%);
    background: -o-linear-gradient(top, #849296 0%,#a0aeb6 58%);
    background: -ms-linear-gradient(top, #849296 0%,#a0aeb6 58%);
    background: linear-gradient(to bottom, #849296 0%,#a0aeb6 58%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#849296', endColorstr='#a0aeb6',GradientType=0 );
    width: 100%;
    top: 500px;
    border-top: solid 11px #818180;
    box-shadow: 0px -2px 2px #ACACAC;
}


input.chk_decimais {
    background: #fff !important;
    background-image: antiquewhite;
    height: 20px;
    width: 20px;
    color: #fff;
    position: relative;
    border: none;
    float: left;
}
span.decimais {
    position: absolute;
    top: 19px;
    left: 20px;
    vertical-align: middle;
    height: 25px;
}
.decimais label {
    color: #694F4F;
    font-size: 17px;
    position: relative;
    float: left;
    margin-top: 3px;
    text-shadow: 1px 1px 0px #E2AA7E;
}

#footer {
    position: relative;
    z-index: 45;
}
.center_col div:last-child {
    z-index: 40;
}

.center_col {
    width: 580px !important;
    
}

.btn-apagar{
    background: #FFF;
    border-radius:8px;
    display: block;
    width: 55%;
    margin: 11px auto 8px;
}

.btn-apagar img{
    display: block;
    margin:0 auto;
    padding: 11px 0;

}


.calculadora{
    display: none;
    width: 105px;
    background: #EBE4DA;
    border-radius: 8px;
    box-shadow: 1px 1px 3px 0px rgba(50, 50, 50, 0.75);
    border: 3px solid #fff;
    padding: 4px 3px 1px 8px;
    position: relative;
    z-index: 9999;
    left: 173px;
    top: -100px;
    height: 280px;
}

.calculadora ul{
    display: table;
    width: 105px;
}

.calculadora a{
    background-color: #656672 !important;
    box-shadow: 1px 1px 1px 1px rgba(255, 255, 255, 0.5) inset, -1px -1px 1px 1px rgba(51, 102, 153, 0.5) inset;    
    border: none;
    padding: 1px;
    color: white;
    font-weight: bold;
    cursor:pointer;
    display: block;
    float: left;
    text-align: center;
    text-decoration: none;
    width: 28px;
    height: 24px;
    font-size: 1.3em;
    border-radius: 10px;
    margin: 6px 10px;
    line-height: 24px;
}

.calculadora a.btn-fechar-teclado{
    display: table;
    margin-right: 15px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 30px;
}

.calculadora a.btn-limpar-calculadora{
    display: table;
    padding: 3px 12px;
    margin-left: 5px;
    line-height: 30px;
}



.totalCalculadora{
    width: 60px;
    background: #FFF;
    height: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 8px rgba(34, 50, 50, 0.55);
    margin-top: 8px;
    padding: 10px 12px 6px 12px;
    margin-left: 4px;
}



@media screen and (max-width: 875px) {

    body {
        background-size: 73px !important;
    }
    #stage .argolas {
        position: absolute;
        left: 40px;
        top : 200px;
        right: 0px;
        display: none;
    }

    #stage .contem_tudo {
        width: 780px;
    }

    #stage .questions .howToDo {
        max-width: 750px !important;

    } 

    #stage .haste {
        width: 22px;
        height: 278px;
        display: inline-block;
        margin-left: 69px;
    }

    #stage .haste.active {
        width: 20px;
        height: 288px;
        display: inline-block;
        background-color: yellow;
        opacity: 0.2;
        margin-left: 69px;
    }

     #stage  .argola.usada {
        width: 48px;
        height: 25px;
        background-image: url('rosquinha.png');
        margin-bottom: -10px;
    }
    #stage .argola.usada.excedente {
        width: 48px;
        height: 25px;
        background-image: url('rosquinha-s.png');
        margin-bottom: -10px;
    }

   #stage .abaco {
        width: 618px;
        height: 398px;
        background-size: cover;
    }

    #stage .contador {
        width: 3.45em;
    }

    #chao {
        height: 50px !important;
        
    }

}