/**************************************
Colores:

fresh: #4ABDAC;
vermillion: #FC4A1A;
sunshine: #F7B733;
clean: #DFDCE3;

Texto: black;

**************************************/

/***********************************************
CONTENIDO
***********************************************/
#contenido {
    width: 980px;
    margin: 10px auto;
    min-height: 600px;
}

#contenido h1 {
    font-size: 30px;
    text-align: center;
    color: var(--fresh);
    font-weight: bold;
    border-bottom: 2px solid var(--fresh);
    padding: 10px 0px;
    margin: 10px 0px;
}

#contenido img#volver {
    width: 40px;
    float: left;
}

/***********************************************
INFORMACIÓN
***********************************************/
#contenido img#info {
    float: right;
    width: 40px;
}

#contenido #informacion {
    font-size: 1.2em;
    line-height: 1.5em;
    border-bottom: 2px solid  var(--fresh);
    margin-bottom: 30px;
    padding: 10px 10px 20px 40px;
}

#contenido #informacion p {
    margin: 20px 0px;
    text-align: justify;

}

#contenido #informacion img {
    max-height: 200px;
    float: right;
    margin: 15px;
}

/********************************************
LOS RETOS DE LA GINCANA
********************************************/
#contenido #retos {
    width: 972px;
    margin: 10px auto;
    overflow-x: auto;
}

#contenido #retos #fila {
    display: table-row;
}

#contenido #retos #fila .unreto {
    display: table-cell;
    width: 102px;
    border: 3px solid white;
}

#contenido #retos #fila .hecho {
    background: #7e7;
    display: table-cell;
    width: 102x;
    border: 3px solid var(--clean);
}


#contenido #retos #fila .unreto:hover {
    border: 3px solid var(--fresh);
}

#contenido #retos #fila .unreto img {
    width: 100px;
    margin: 0px;
    border: 1px solid var(--fresh);
    filter: grayscale(100%) opacity(30%);  
}
#contenido #retos #fila .hecho img {
    width: 102px;
    margin: 0px;
    border: 1px solid var(--fresh);
}

#contenido #retos #fila .unreto:hover img {    
    filter: grayscale(0%);
}

#contenido #retos #fila .activo {
    background: #FFD071;
    display: table-cell;
    width: 102x;
    border: 3px solid white;
}

#contenido #retos #fila .activo img {
    filter: grayscale(0%);    
}

#contenido #retos #fila .unreto p,
#contenido #retos #fila .hecho p {
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    margin: 0px 10px 20px 10px;
}

#contenido .reto {
    display: none;
    width: 800px;
    margin: 10px auto;
    border: 3px solid var(--fresh);
}

#contenido .reto h1 {
    font-size: 1.2em;
    padding: 5px 0px;
    margin: 5px;
}


/**********************************************
LATERAL
**********************************************/
#contenido #retolateral #enunciado p {
    margin: 10px 40px;
    font-size: 1.5em;
    line-height: 1.5em;
    text-align: center;
}


#contenido #retolateral #enunciado img,
#contenido #retolateral #solucionLateral img {
    margin: 20px auto;
    border: 2px solid var(--fresh);
}

#contenido #retolateral #enunciado p.imagen {
    text-align: center;
}

#contenido #retolateral #botonSolucionLateral {
    display: blocK;
    width: 150px;
    background: var(--clean);
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--fresh);
    margin: 10px auto;
    padding: 10px;
}

#contenido #retolateral #botonSolucionLateral:hover {
    background: var(--fresh);
    color: var(--sunshine);
}

#contenido #retolateral #solucionLateral {
    display: none;
    width: 760px;
    margin: 10px auto;
    border: 2px dotted black;
    background: var(--clean);
}

#contenido #retolateral #solucionLateral p {
    margin: 10px 40px;
    font-size: 1.5em;
    line-height: 1.5em;    
}

#contenido #retolateral #solucionLateral p {
    text-align: center;
}

#contenido #retolateral #imagenSolucion {
    max-width: 720px;
    max-height: 250px;
}

/**********************************************
ANAGRAMA
**********************************************/
#contenido #retoanagramas #enunciado p {
    margin: 10px 40px;
    font-size: 1.5em;
    line-height: 1.5em;
}

#contenido #retoanagramas #enunciado p.tema {
    text-align: center;
    font-size: 1.8em;
    font-weight: bold;
    margin: 10px 50px;
    padding: 20px 0px;
    border-top: 2px solid black;
}

#contenido #retoanagramas #enunciado img {
    max-width: 720px;
    max-height: 300px;
    margin: 20px auto;
    border:2px solid var(--fresh);
}

#contenido #retoanagramas #enunciado p.imagen {
    text-align: center;
}

#contenido #retoanagramas #botonSolucionAnagrama {
    display: blocK;
    width: 150px;
    background: var(--clean);
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--fresh);
    margin: 10px auto;
    padding: 10px;
}

#contenido #retoanagramas #botonSolucionAnagrama:hover {
    background: var(--fresh);
    color: var(--sunshine);
}

#contenido #retoanagramas #solucionAnagrama {
    display: none;
    width: 760px;
    margin: 10px auto;
    border: 2px dotted black;
    background: var(--clean);
}

#contenido #retoanagramas #solucionAnagrama p {
    margin: 10px 40px;
    font-size: 1.5em;
    line-height: 1.5em;    
    text-align: center;
}

/**********************************************
FORMARPALABRAS
**********************************************/
#contenido #retoformarpalabras #enunciado p {
    margin: 10px 40px;
    font-size: 1.5em;
    line-height: 1.5em;
}

#contenido #retoformarpalabras #enunciado img {
    max-width: 720px;
    max-height: 300px;
    margin: 20px auto;
    border:2px solid var(--fresh);
}

#contenido #retoformarpalabras #enunciado p.imagen {
    text-align: center;
}

#contenido #retoformarpalabras #botonSolucionFormarpalabras {
    display: blocK;
    width: 150px;
    background: var(--clean);
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--fresh);
    margin: 10px auto;
    padding: 10px;
}

#contenido #retoformarpalabras #botonSolucionFormarpalabras:hover {
    background: var(--fresh);
    color: var(--sunshine);
}

#contenido #retoformarpalabras #solucionFormarpalabras {
    display: none;
    width: 760px;
    margin: 10px auto;
    border: 2px dotted black;
    background: var(--clean);
}

#contenido #retoformarpalabras #solucionFormarpalabras p {
    margin: 10px 40px;
    font-size: 1.5em;
    line-height: 1.5em;    
    text-align: center;
}


/**********************************************
SOPA DE LETRAS
**********************************************/
#contenido #retosopa p {
    margin: 10px 40px;
    font-size: 1.5em;
    line-height: 1.5em;
}

#contenido #retosopa p#imagenSopa,
#contenido #retosopa p#imagenSolucion {
    text-align: center;
    display: block;
}

#contenido #retosopa #imagenSopa img,
#contenido #retosopa #imagenSolucion img{
    margin: 10px auto;
    border: 2px solid var(--fresh);
}

#contenido #retosopa #solucionSopa {
    display: none;
}

#contenido #retosopa #botonSolucionSopa {
    display: blocK;
    width: 150px;
    background: var(--clean);
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--fresh);
    margin: 10px auto;
    padding: 10px;
}

#contenido #retosopa #botonSolucionSopa:hover {
    background: var(--fresh);
    color: var(--sunshine);
}


/**********************************************
CIFRAS
**********************************************/
#contenido #retocifras p {
    margin: 10px 40px;
    font-size: 1.5em;
    line-height: 1.5em;
}

#contenido #retocifras .parrafoReto p {
    text-align: center;
}

#contenido #retocifras .imagenEnunciado,
#contenido #retocifras .imagenSolucion{
    text-align: center;
}

#contenido #retocifras .imagenEnunciado img,
#contenido #retocifras .imagenSolucion img{
    max-width: 700px;
    max-height: 450px;
    border: 2px solid var(--fresh);
}

#contenido #retocifras #botonSolucionCifras {
    display: blocK;
    width: 150px;
    background: var(--clean);
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--fresh);
    margin: 10px auto;
    padding: 10px;
}

#contenido #retocifras #botonSolucionCifras:hover {
    background: var(--fresh);
    color: var(--sunshine);
}

#contenido #retocifras .numeros {
    margin: 30px auto;
    text-align: center;
    font-size: 2.5em;
    line-height: 2.5em;
    border-bottom: 2px solid var(--fresh);
}

#contenido #retocifras .objetivo {
    font-size: 3em;
    text-align: center;
    font-weight: bold;
    margin: 20px;
}

#contenido #retocifras .palabraObjetivo {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

#contenido #retocifras #cifras1,
#contenido #retocifras #objetivo {
    text-align: center;
    font-size: 1.3em;
    padding: 20px;
}


#contenido #retocifras #cifras1 strong {
    font-size: 2em;
    padding: 10px;
    border: 1px solid var(--fresh);
    margin: 10px;
}

#contenido #retocifras #objetivo strong{
    background: var(--fresh);
    padding: 10px;
    font-size: 2.5em;
    color: white;
}

/**********************************************
TEXTO
**********************************************/
#contenido #retotexto p,
#contenido #retotexto #solucionTexto {
    margin: 10px 40px;
    font-size: 1.5em;
    line-height: 1.5em;
}

#contenido #retotexto p.imagenEnunciado {
    text-align:center;
}

#contenido #retotexto img {
    max-width: 700px;
    max-height: 450px;
    border: 2px solid var(--fresh);
}

#contenido #retotexto #solucionTexto {
    display: none;
    width: 760px;
    margin: 10px auto;
    border: 2px dotted black;
    background: var(--clean);
}

#contenido #retotexto #solucionTexto p {
    text-align: center;    
}

#contenido #retotexto #botonSolucionTexto {
    display: blocK;
    width: 150px;
    background: var(--clean);
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--fresh);
    margin: 10px auto;
    padding: 10px;
}

#contenido #retotexto #botonSolucionTexto:hover {
    background: var(--fresh);
    color: var(--sunshine);
}

/**********************************************
VISUAL
**********************************************/
#contenido #retovisual p,
#contenido #retovisual #solucionVisual {
    margin: 10px 40px;
    font-size: 1.5em;
    line-height: 1.5em;
    text-align:center;
}

#contenido #retovisual p.imagenEnunciado {
}

#contenido #retovisual img#imagenVisual,
#contenido #retovisual img#imagenSolucionVisual{
    max-width: 700px;
    max-height: 450px;
    border: 2px solid var(--fresh);
}

#contenido #retovisual #solucionVisual p {
    text-align: center;    
}

#contenido #retovisual #botonSolucionVisual {
    display: blocK;
    width: 150px;
    background: var(--clean);
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--fresh);
    margin: 10px auto;
    padding: 10px;
}

#contenido #retovisual #botonSolucionVisual:hover {
    background: var(--fresh);
    color: var(--sunshine);
}

/**********************************************
ECUACIONES
**********************************************/
#contenido #retoecuaciones p,
#contenido #retoecuaciones #solucionEcuaciones {
    margin: 10px 40px;
    font-size: 1.5em;
    line-height: 1.5em;
    text-align:center;
}

#contenido #retoecuaciones p.imagenEnunciado {
}

#contenido #retoecuaciones img#imagenEcuaciones,
#contenido #retoecuaciones img#imagenSolucionEcuaciones{
    max-width: 700px;
    max-height: 450px;
    border: 2px solid var(--fresh);
}

#contenido #retoecuaciones #solucionEcuaciones p {
    text-align: center; 
    display: table-row;
    padding: 0px 107px;
}

#contenido #retoecuaciones #botonSolucionEcuaciones {
    display: blocK;
    width: 150px;
    background: var(--clean);
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--fresh);
    margin: 10px auto;
    padding: 10px;
}

#contenido #retoecuaciones #botonSolucionEcuaciones:hover {
    background: var(--fresh);
    color: var(--sunshine);
}

#contenido #retoecuaciones p .imgResultado {
    max-height: 60px;
    margin: 10px 10px 10px 10px;
    display: table-cell;
}
/*

#contenido #retoecuaciones p .interrogacion {
    font-weight: bold;
    color: red;
    font-size: 2.5em;
}*/

#contenido #retoecuaciones p span.resultado {
    width: 100px;
    display: table-cell;
    text-align: left;
    height: 60px;
    font-size: 30px;
    margin: 0px 10px 0px 5px;
    padding-top: 0px;
    font-weight: bold;
    vertical-align: middle;
}

#contenido #retoecuaciones p span.interrogacion {
    font-family:'Verdana';
    display: table-cell;
    font-size: 50px;
    color: var(--fresh);
    font-weight: bold;
    height: 60px;
    vertical-align: middle;
}

/**********************************************
CERILLAS
**********************************************/
#contenido #retocerillas p,
#contenido #retocerillas #solucionCerillas {
    margin: 10px 40px;
    font-size: 1.5em;
    line-height: 1.5em;
    text-align:center;
}

#contenido #retocerillas p.imagenEnunciado {
    text-align: center;
}
#contenido #retocerillas p.digitos img{
    max-width: 30px;
    margin: 20px 5px;
}

#contenido #retocerillas img#imagenCerillas,
#contenido #retocerillas img#imagenSolucionCerillas{
    max-width: 700px;
    max-height: 450px;
    border: 2px solid var(--fresh);
}

#contenido #retocerillas #solucionCerillas p {
    text-align: center;    
}

#contenido #retocerillas #botonSolucionCerillas {
    display: blocK;
    width: 150px;
    background: var(--clean);
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--fresh);
    margin: 10px auto;
    padding: 10px;
}

#contenido #retocerillas #botonSolucionCerillas:hover {
    background: var(--fresh);
    color: var(--sunshine);
}


/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : 11-ago-2023, 18:39:11
    Author     : angel
*/