@charset "UTF-8";
.centrarHorizontal{
    text-align:center;
    margin:0 auto;
}
.centrarVertical{
    position:relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.ajustarImg{
    background-size:cover;
}

/**********Bloque de la pantalla de inicio**********/
#iniciar{
    width:100%;
    height:100%;
}
#encabezadoPortada{
    width:inherit;
    height:55%;
}

#botonesPrin{
	width:209px;
    height:35%;
	position:relative;
}

.btnPortada{
	width:209px;
    height:50px;
	position:relative;
	margin-top:20px;
	cursor:pointer;
	color:#000000;
    font-family:Century Gothic;
	font-size:15px;
}

/**********Bloque de la pantalla del reto**********/
.fndPopUp{
    width:inherit;
    height:inherit;
    position:absolute;
    top:0px;
    left:0px;
    background-color:rgba(10,10,10,.7);
}
.popUp{
	width:80%;
    height:80%;
    background-color:#ffffff;
    border-radius:10px;
	position: relative;
}


.btnPopUp{
    width:209px;
    height:50px;
    position:relative;
    cursor:pointer;
    color:#000000;
    font-family:Century Gothic;
    font-size:15px;
}

#imagenReto{
	width:inherit;
	height:44px;
	position:relative;
	background-image: url("../img/nubesPop.png");
	background-size:contain;
}
.tituloPopUp{
	width:inherit;
    height:30px;
	position:relative;
	color:#284765;
    font-family:Century Gothic;
	font-size:28px;
	font-weight:bold;
	margin-bottom: 5px;
}
.msgRetro{
    width:inherit;
    position:relative;
    color:#284765;
    font-family:Century Gothic;
    font-size:36px;
    font-weight:bold;
    margin-bottom: 5px;
    text-align:center;
}
#insReto{
	width: 100%;
	height: 40%;
	position: relative;
	float:left;
	color:#284765;
	text-align:center;
    font-family:Century Gothic;
    font-size:20px;
}

#insRetoBoton{
	width: 100%;
	height: 15%;
	position: relative;
	float: left;
}

/**********Bloque de la pantalla de instrucciones**********/
#imgagenInstr{
	width:inherit;
	height:44px;
	position:relative;
	float:left;
	background-image: url("../img/nubesPop.png");
	background-size:contain;
}

hr{ 
   position:relative;
   width:90%;
   background-color:#284765; 
   height:0.5px;
 }

/**********Bloque de la pantalla dell interactivo**********/

.btnJuego{
    width:115px;
    height:30px;
    font-family:"Century Gothic";
    font-size:12pt;
    color:#FFFFFF;
    border:1px #FFFFFF solid;
    margin:9px;
    cursor:pointer;
    position:relative;
    float:left;
    margin-left: 10px;
}

/********************************Seccion 1**************************************/

#selector{
	width:inherit;
    height:60px;
	position:relative;
	float:left;
}
#contSelect{
	width:172px;
	height:50px;
	position:relative;
}
.btnOpcionJuego{
	width:46px;
	height:46px;
	position:relative;
	float:left;
	margin-right:40px;
	cursor:pointer;	
	box-shadow: 3px 3px 10px #555555;
}

/**********Inicia bloque de retroalimentacion bien**********/

.imgCabecera{
	height:60%;
}

#botonesPrin2{
	width:inherit;
    height:50px;
	position:relative;
}
#botonInstrucciones2{
	width:214px;
    height:50px;
	position:relative;
	top:0px;
	cursor:pointer;
	color:#000000;
    font-family:Century Gothic;
	font-size:15px;
	
}

.txtScoreFinal{
    width:inherit;
    height:30px;
    font-family:Century Gothic;
    font-size:24px;
    font-weight:bold;
    color:#274665;
    text-align:center;
    position:relative;
}

#puntosNiveles{
	width:240px;
    height:170px;
	position:relative;
	text-align:center;
}

/***********************************Final****************************/

#contBtnFinalizar{
	width:inherit;
    height:50px;
	position:relative;
}
#btnFinalizar{
	width:151px;
    height:50px;
	position:relative;
	cursor:pointer;
	color:#000000;
    font-family:Century Gothic;
	font-size:15px;
	}

@media(max-width:479px){
    /**********Div principal**********/
    #principal{
        width:320px;
        height:480px;
        background-color:#446F95;
        border:10px #274665 solid;
        position:relative;
        margin-right:auto;
        margin-left:auto;
    }
    
    #interactivo{
        width:320px;
        height:480px;
        background-color:#FFFFFF;
    }
    
    #contOpciones{
    width:inherit;
    height:40px;
    }
    
    #pregunta{
        width:100%;
        height:60px;
        position:relative;
        font-family: Century Gothic;
        color:#446f95;
        font-size:14px;
        font-weight:bold;
        text-align:center;
        }
    /* ---- Marcadores -----*/
   
    #tiempo{
        width:107px;
        height:50px;
        position:relative;
        float:left;
        color:#e1a23f;
        font-family:Century Gothic;
        font-size:36px;
        font-weight:bold;
        margin-top:5px;
        margin-left:10px;
    }
    .datosTiempo{
        width:46px;
        height:48px;
        position:relative;
        background-color: #ffffff;
        float: left;
        text-align:center;
    }
    .separadorTiempo{
        width:15px;
        height:48px;
        position:relative;
        float: left;
        text-align:center;
    }

    #puntos{
        width:167px;
        height:48px;
        background-color: #c4e1f6;
        position:relative;
        float:left;
        margin-top:5px;
        margin-left:20px;
        font-family: Century Gothic;
        color:#274665;
        font-family:Century Gothic;
        font-size:48px;
        text-align: right;
        box-shadow: 3px 3px 10px #555555;
    }
    
    #puntaje{
        width:70px;
        height:60px;
        position:relative;
        float:left;
        color:#274665;
        font-family:Century Gothic;
        font-size:32px;
        font-weight:bold;
        }

    #textoPuntos{
        width:90px;
        height:23px;
        position:relative;
        float:left;
        color:#274665;
        font-family:Century Gothic;
        font-size:20px;
        }
    
    #contenedorLeft{
        width:320px;
        height:110px;
        background-color: #77A3E8;
        position:relative;
        float:right;
        text-align:center;
        box-shadow: 3px 3px 10px #555555;
        }
    #contenedorRight{
        width:320px;
        height:370px;
        background-image:url("../img/fondoprincipal.png");
        background-size:100px 100px;
        position:relative;
        float:right;
        }
    #tarjetas{
        width:225px;
        height:300px;
        position:relative;
        }
    .contTarjeta{
        width:65px;
        height:65px;
        margin:5px;
        position:relative;
        float:left;
        }
    .tarjeta{
        width:65px;
        height:65px;
        background-color:#ecc278;
        box-shadow: 3px 3px 10px #555555;
        font-family:Century Gothic;
        font-weight: bold;
        font-size:14px;
        color:#E1A23F;
        text-align:center;
        }
    .encabezadoPopUp{
        width:100%;
        height:117px;
        position:relative;
        margin-top:20px;
        }
    .txtPopUp{
        position: relative;
        color:#284765;
        text-align:left;
        font-family:Century Gothic;
        font-size:14px;
        padding-left:10px;
        }
    #contNube{
        width:inherit;
        height:100px;
        position:relative;
        float: left;
        background-image:url("../img/nubesPop2.png");
        background-size:contain;
        }
    .imgCabecera{
        height:100px;
        }
    #contPuntosNiveles{
        width:inherit;
        height:170px;
        }
    #mensajeRetro{
        width:inherit;
        height:40px;
        font-family:Century Gothic;
        font-size:38px;
        font-weight:bold;
        color:#274665;
        text-align:center;
        }
        
        .contScore{
            width:240px;
            height:30px;
            margin-top:5px;
            }
        .txtScore{
            width:80px;
            height:30px;
            font-family:Century Gothic;
            font-size:14px;
            color:#274665;
            position:relative;
            float:left;
            }
       #txtInstrucciones{
           height:200px;
            overflow: auto;
         }
    }
    

@media(min-width:480px) and (max-width:799px){
    /**********Div principal**********/
    #principal{
        width:480px;
        height:320px;
        background-color:#446F95;
        border:10px #274665 solid;
        position:relative;
        margin-right:auto;
        margin-left:auto;
    }
    
    #interactivo{
        width:480px;
        height:320px;
        background-color:#FFFFFF;
    }
    
    #contOpciones{
    width:inherit;
    height:40px;
    }
    
    #pregunta{
        width:100%;
        height:40px;
        position:relative;
        font-family: Century Gothic;
        color:#446f95;
        font-size:14px;
        font-weight:bold;
        text-align:center;
        }
    /* ---- Marcadores -----*/
   
    #tiempo{
        width:107px;
        height:50px;
        position:relative;
        float:left;
        color:#e1a23f;
        font-family:Century Gothic;
        font-size:36px;
        font-weight:bold;
        margin-top:5px;
        margin-left:10px;
    }
    .datosTiempo{
        width:46px;
        height:48px;
        position:relative;
        background-color: #ffffff;
        float: left;
        text-align:center;
    }
    .separadorTiempo{
        width:15px;
        height:48px;
        position:relative;
        float: left;
        text-align:center;
    }

    #puntos{
        width:117px;
        height:100px;
        background-color: #c4e1f6;
        position:relative;
        float:left;
        margin-top:5px;
        margin-left:10px;
        font-family: Century Gothic;
        color:#274665;
        font-family:Century Gothic;
        font-size:48px;
        text-align: right;
        box-shadow: 3px 3px 10px #555555;
    }
    
    #puntaje{
        width:70px;
        height:60px;
        position:relative;
        float:left;
        color:#274665;
        font-family:Century Gothic;
        font-size:32px;
        font-weight:bold;
        }

    #textoPuntos{
        width:90px;
        height:23px;
        position:relative;
        float:left;
        color:#274665;
        font-family:Century Gothic;
        font-size:20px;
        }
    
    #contenedorLeft{
        width:135px;
        height:320px;
        background-color: #77A3E8;
        position:relative;
        float:right;
        text-align:center;
        box-shadow: 3px 3px 10px #555555;
        }
    #contenedorRight{
        width:345px;
        height:320px;
        background-image:url("../img/fondoprincipal.png");
        background-size:100px 100px;
        position:relative;
        float:right;
        }
    #tarjetas{
        width:225px;
        height:260px;
        position:relative;
        }
    .contTarjeta{
        width:65px;
        height:65px;
        margin:5px;
        position:relative;
        float:left;
        }
    .tarjeta{
        width:65px;
        height:65px;
        background-color:#ecc278;
        box-shadow: 3px 3px 10px #555555;
        font-family:Century Gothic;
        font-weight: bold;
        font-size:14px;
        color:#E1A23F;
        text-align:center;
        }
    .encabezadoPopUp{
        width:100%;
        height:80px;
        position:relative;
        margin-top:20px;
        }
    .txtPopUp{
        position: relative;
        color:#284765;
        text-align:left;
        font-family:Century Gothic;
        font-size:14px;
        padding-left:10px;
        }
    #contNube{
        width:inherit;
        height:70px;
        position:relative;
        float: left;
        background-image:url("../img/nubesPop2.png");
        background-size:contain;
        }
    .imgCabecera{
        height:60px;
        }
    #contPuntosNiveles{
        width:inherit;
        height:100px;
        }
    #mensajeRetro{
        width:inherit;
        height:20px;
        font-family:Century Gothic;
        font-size:20px;
        font-weight:bold;
        color:#274665;
        text-align:center;
        }
    .contScore{
            width:240px;
            height:16px;
            margin-top:5px;
            }
        .txtScore{
            width:80px;
            height:18px;
            font-family:Century Gothic;
            font-size:16px;
            color:#274665;
            position:relative;
            float:left;
            }
       #txtInstrucciones{
           height:80px;
            overflow: auto;
         }
    }


@media(min-width:800px){
    /**********Div principal**********/
    #principal{
        width:800px;
        height:600px;
        background-color:#446F95;
        border:10px #274665 solid;
        position:relative;
        margin-right:auto;
        margin-left:auto;
    }
    
    #interactivo{
        width:800px;
        height:600px;
        background-color:#FFFFFF;
    }
    
    #pregunta{
        width:100%;
        height:100px;
        position:relative;
        font-family: Century Gothic;
        color:#446f95;
        font-size:24px;
        font-weight:bold;
        text-align:center;
        }
        
    #contOpciones{
    width:inherit;
    height:80px;
}
    /* ---- Marcadores -----*/
    #tiempo{
        width:107px;
        height:50px;
        position:relative;
        float:left;
        color:#e1a23f;
        font-family:Century Gothic;
        font-size:36px;
        font-weight:bold;
        margin-top:20px;
    }
    .datosTiempo{
        width:46px;
        height:48px;
        position:relative;
        background-color: #ffffff;
        float: left;
        text-align:center;
    }
    .separadorTiempo{
        width:15px;
        height:48px;
        position:relative;
        float: left;
        text-align:center;
    }

    #puntos{
        width:107px;
        height:110px;
        background-color: #c4e1f6;
        position:relative;
        float:left;
        margin-top:20px;
        font-family: Century Gothic;
        color:#274665;
        font-family:Century Gothic;
        font-size:62px;
        text-align: right;
        box-shadow: 3px 3px 10px #555555;
    }
    
    #puntaje{
        width:90px;
        height:60px;
        position:relative;
        float:left;
        color:#274665;
        font-family:Century Gothic;
        font-size:40px;
        font-weight: bold;
        }
    
    #textoPuntos{
        width:90px;
        height:23px;
        position:relative;
        color:#274665;
        font-family:Century Gothic;
        font-size:20px;
        }
    
    #contenedorLeft{
        width:135px;
        height:600px;
        background-color: #77A3E8;
        position:relative;
        float:right;
        text-align:center;
        box-shadow: 3px 3px 10px #555555;
        }
    #contenedorRight{
        width:665px;
        height:600px;
        background-image:url("../img/fondoprincipal.png");
        background-size:100px 100px;
        position:relative;
        float:right;
        }
    #tarjetas{
        width:405px;
        height:505px;
        position:relative;
        }
    .contTarjeta{
        width:125px;
        height:125px;
        margin:5px;
        position:relative;
        float:left;
        }
    .tarjeta{
        width:125px;
        height:125px;
        background-color:#ecc278;
        box-shadow: 3px 3px 10px #555555;
        font-family:Century Gothic;
        font-weight: bold;
        font-size:24px;
        color:#E1A23F;
        text-align:center;
        }
    .encabezadoPopUp{
        width:100%;
        height:165px;
        position:relative;
        margin-top:20px;
        }
    .txtPopUp{
        position: relative;
        color:#284765;
        text-align:left;
        font-family:Century Gothic;
        font-size:20px;
        padding-left:10px;
        }
    #contNube{
        width:inherit;
        height:100px;
        position:relative;
        float: left;
        background-image:url("../img/nubesPop2.png");
        background-size:400px 100px;
        }
    .imgCabecera{
        height:165px;
        }
    #contPuntosNiveles{
        width:inherit;
        height:170px;
        }
    #mensajeRetro{
        width:inherit;
        height:60px;
        font-family:Century Gothic;
        font-size:38px;
        font-weight:bold;
        color:#274665;
        text-align:center;
        }
    .contScore{
            width:240px;
            height:30px;
            margin-top:5px;
            }
    .txtScore{
            width:80px;
            height:30px;
            font-family:Century Gothic;
            font-size:14px;
            color:#274665;
            position:relative;
            float:left;
            }
    #txtInstrucciones{
           height:240px;
            overflow: auto;
         }
     #contIndicadores{
         width:100px;
         height:100px;
         text-align:center;
     }
    }