/*** CONFIGURACAO GLOBAL *****************************************************************************************************************/
body { background-color:#CDDD9F; background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(.25,rgba(255,255,255,.2)),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,rgba(255,255,255,.2)),color-stop(.75,rgba(255,255,255,.2)),color-stop(.75,transparent),to(transparent));background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);-webkit-background-size:50px 50px;-moz-background-size:50px 50px;background-size:50px 50px; }

.column, .columns{margin:0 0 0 1%;}

.container{overflow:hidden; padding:0px 5px;}

.ctn_stage{margin: 0 auto; width: 1024px;}

#stage .questions .howToDo { margin-bottom: 5px !important;}

.ctn-btns { margin-top: 2px !important;   }
    
#footer {
  margin: 5px 0 0  0 !important;
}
/*** CONFIGURACAO RELOGIO *****************************************************************************************************************/
.relogio-digital {background:url('../images/bg-relogio-digital.png') no-repeat; border:5px solid #b7db70; border-radius:20px; height:500px; width:469px; position:relative; margin:0 auto 0 25px;}
.relogio-digital .relogio  {background:url('../images/relogio-digital.png') no-repeat; width:428px; height:268px; position:absolute; top:44px; left:16px;}
.relogio-digital .relogio p.periodo  { background-color:transparent; font-family:"Digital7Regular"; font-weight:bold; font-size:38px; border:none; width:53px; position:absolute; top:60px; left: 208px; text-align:center; }
.relogio-digital .relogio p.hora  { background-color:transparent; font-family:"Digital7Regular"; font-weight:bold; font-size:96px; border:none; width:225px; position:absolute; top:100px; left:118px; text-align:center; }
.relogio-digital .relogio .bt-12h  { position:absolute; top:0; left:65px; width: 103px; height: 34px; background: url('../images/bt-12h.png') no-repeat;}
.relogio-digital .relogio .bt-24h  { position:absolute; top:0; right:34px; width: 103px; height: 34px; background: url('../images/bt-24h.png') no-repeat;}
.relogio-digital .relogio .bt-mais-dir  { position:absolute; top:56px; right:42px; }
.relogio-digital .relogio .bt-menos-dir  { position:absolute; bottom:60px; right:42px; }
.relogio-digital .relogio .bt-mais-esq  { position:absolute; top:57px; left:75px; }
.relogio-digital .relogio .bt-menos-esq  { position:absolute; bottom:60px; left:74px; }
.relogio-digital .relogio .bt-12h:hover, .relogio-digital .relogio .bt-24h:hover{background-position: 0 -34px;} 

.relogio-analogico { background:url('../images/bg-relogio-analogico.png') no-repeat; border:5px solid #b7db70; border-radius:20px; height:500px; width:469px; position:relative; margin:0 auto;}
.relogio-analogico .relogio  { background:url('../images/relogio-analogico.png') no-repeat; width:347px; height:379px; position:absolute; top:18px; left:65px; }
.relogio-analogico .relogio .meio-ponteiros  { position:absolute; top:184px; left:156px;}
.relogio-analogico .relogio .ponteiro-minuto { position:absolute; top:92px; left:145px;}
.relogio-analogico .relogio .ponteiro-hora { position:absolute; top:114px; left:151px;}
.relogio-analogico .relogio .bts-controle {background-color: rgba(255, 255, 255, 0.5); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; width:404px; overflow:hidden; position:absolute; bottom:-100px; left:-30px; }
.relogio-analogico .relogio .bts-controle li { float:left; margin:8px 10px; }
.relogio-analogico .relogio .bts-controle li a { display:block; }

.bt-1m-menos, .bt-15m-menos, .bt-1m-mais, .bt-15m-mais, .bt-5m-menos, .bt-1h-menos, .bt-5m-mais, .bt-1h-mais{width: 80px; height: 27px; background: url('../images/botoes-analogico.png') no-repeat;}

.bt-1m-menos{background-position: 0 -27px}
.bt-1m-menos:active{background-position: 0 0}
.bt-15m-menos{background-position: -103px -27px}
.bt-15m-menos:active{background-position: -103px 0}
.bt-1m-mais{background-position: -201px -27px}
.bt-1m-mais:active{background-position: -201px 0}
.bt-15m-mais{background-position: -302px -27px}
.bt-15m-mais:active{background-position: -302px 0}

.bt-5m-menos{background-position: -401px -27px}
.bt-5m-menos:active{background-position: -401px 0}
.bt-1h-menos{background-position: -501px -27px}
.bt-1h-menos:active{background-position: -501px 0}
.bt-5m-mais{background-position: -602px -27px}
.bt-5m-mais:active{background-position: -602px 0}
.bt-1h-mais{background-position: -703px -27px}
.bt-1h-mais:active{background-position: -703px 0}

.bloqueia-btns{background-color: transparent; display:none; width:404px; height: 120px; overflow:hidden; position:absolute; bottom:-100px; left:-30px; z-index: 11;}

.relogio-digital img.relogio-digital-desativado,
.relogio-analogico img.relogio-analogico-desativado{ display: none; border-radius:20px; position: absolute; top: 0; left: 0; z-index: 5; width: 469px; height: 500px;}

.como-resolver,
.video-como-resolver{background:#DFECB8; display: none; border-radius:15px; position: absolute; top: 0; left: 0; z-index: 5; width: 469px; height: 500px;}

.video-como-resolver{
    display: block;
    height: 376px;
    margin-top: 35px;
}

.ok-como-resolver{
    min-width: 28px;
    position: absolute;
    z-index: 7;
    bottom: 10px;
    left: 185px;
}

.img-como-resolver{
    position: absolute;
    z-index: 6;
    top: -5px;
}


/*** CONFIGURACAO MASCARA PONTEIRO RELOGIO *****************************************************************************************************************/
.ui-rotatable-handle {
	cursor: pointer;
	background-size: 100%;
	position:relative;
}

.ponteiro-minuto .ui-rotatable-handle {
	background: transparent !important;
	height: 110px;
	width: 60px;
	top: -120px;
}

.ponteiro-hora .ui-rotatable-handle {
	background: transparent !important;
	height: 88px;
	width: 47px;
	top: -96px;
}

/*** CONFIGURACAO DOS RADIO BUTTON DO RODAPÉ*****************************************************************************************************************/
label#label1,
label#label2{
	font-family:Arial;
  	font-size:24px;
  	text-shadow:rgba(0, 0, 0, 0.5) 0 -1px 0;
  	cursor: pointer;
}

label#label2:last-child{
	margin-left: 25px;
}

input#check1,
input#check2{
	cursor: pointer;
}


/***BOTAO AUDIO*****************************************************************************************************************/

/* Audio icon */
div.audio-icon{
    width: 10px;
    height: 10px;
    background: #333;
    margin: 15px 0 0 7px;
}

div.audio-icon:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent #333 transparent transparent;
    border-width: 12px 16px 12px 15px;
    left: -8px;
    top: 8px;
}

div.audio-icon:before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-style: double;
    border-color: #333;
    border-width: 8px 8px 0 0;
    -webkit-border-radius: 0 50px 0 0;
    -moz-border-radius: 0 50px 0 0;
    border-radius: 0 50px 0 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 24px;
    top: 14px;
}

/* Audio Button */
.btn-audio-titulo{
	display: block;
    float: right;
    margin:-5px 10px 0 0;
}
        		
.ctn-btns{
	position:relative;
	cursor:pointer;
	
    -moz-box-shadow: 0px 1px 0px 0px #1c1b18;
    -webkit-box-shadow: 0px 1px 0px 0px #1c1b18;
    box-shadow: 0px 1px 0px 0px #1c1b18;
    
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #eae0c2), color-stop(1, #ccc2a6));
    background:-moz-linear-gradient(top, #eae0c2 5%, #ccc2a6 100%);
    background:-webkit-linear-gradient(top, #eae0c2 5%, #ccc2a6 100%);
    background:-o-linear-gradient(top, #eae0c2 5%, #ccc2a6 100%);
    background:-ms-linear-gradient(top, #eae0c2 5%, #ccc2a6 100%);
    background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eae0c2', endColorstr='#ccc2a6',GradientType=0);

    background-color:#eae0c2;
    
    -moz-border-radius:40px;
    -webkit-border-radius:40px;
    border-radius:40px;
    
    border:1px solid #FFF;
    
    margin:0 auto;
    
    display:inline-block;
    color:#505739;
    height:40px;
	width:40px;
    text-decoration:none;
    
    text-shadow:0px 1px 0px #ffffff;
}

.ctn-btns:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ccc2a6), color-stop(1, #eae0c2));
    background:-moz-linear-gradient(top, #ccc2a6 5%, #eae0c2 100%);
    background:-webkit-linear-gradient(top, #ccc2a6 5%, #eae0c2 100%);
    background:-o-linear-gradient(top, #ccc2a6 5%, #eae0c2 100%);
    background:-ms-linear-gradient(top, #ccc2a6 5%, #eae0c2 100%);
    background:linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc2a6', endColorstr='#eae0c2',GradientType=0);
    
    background-color:#ccc2a6;
}

/*** MEDIA QUERIE *****************************************************************************************************************/
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {

    .relogio-digital {margin:0 auto;}

	#stage .questions .howToDo{
		font-size:18px;
	}

	label#label1,
	label#label2{
	  	font-size:20px;
	}

	.labelcheck{
		margin:5px 0 0 0;
	}

	input[type=checkbox]:not(old):checked + label > span:before{
		margin-left: -3px; 
	}

}