@font-face {
    font-family: gotham-light;
    src: url(../tipografias/gotham/gotham-light.otf);
    font-weight: normal;
}
@font-face {
    font-family: gotham-light;
    src: url(../tipografias/gotham/gotham-lightitalic.ttf);
    font-weight: italic;
}
@font-face {
    font-family: gotham-medium;
    src: url(../tipografias/gotham/gotham-medium.ttf);
    font-weight: normal;
}


body {
    font-family: gotham-medium;
}
.container{
    width: 100%;
    max-width: 960px;
    padding: 2%;
    font-family: gotham-medium;
    /*background: #e6e7eb;*/
}

.img_juego img{
    width: 60%;
}

.div_logo_gobernacion img{
    width: 50%;
    padding-top: 1%;
}

.link_caja_herramientas:hover{
    text-decoration: none;
}

.links_juegos_guias{
    margin: 3% 0;
}

.links_juegos_guias .arrow center a i{
    font-size: 80px;
}

.links_juegos_guias .arrow center p{
    font-size: 15px;
    color: #337ab7;
    font-weight: 600;
}

.links_juegos_guias div center a img{
    width: 60%;
}

/*index.html*/

.caja_herraminetas_img{
    padding: 0 5%;
}

.caja_herraminetas_img img{
    width: 100%;
}

.btns_caja_herramientas{
    width: 100%;
    padding: 2% 0 0 4%;
}

.btns_caja_herramientas_home{
    width: 100%;
    padding: 2% 0 0 4%;
}
.btns_caja_herramientas_xs{
    width: 100%;
    padding: 2% 0 0 10%;
}

.btns_guias{
    width: 100%;
    padding: 2%;
}

.guia:hover{
    text-decoration: none;
}

.nombre_guia{
    font-size: 20px;
}

.nav_capsulas .div_btn_volver a:hover{
    text-decoration: none;
}

.nav_capsulas .div_btn_volver a p{
    background: #56AADD;
    color: #fff;
    font-size: 25px;
    margin: 0 10%;
    text-align: center;
    padding: 2% 5%;
}

.nav_capsulas .div_txt_capsula p{
    background: #56AADD;
    color: #fff;
    font-size: 25px;
    margin: 0 10%;
    text-align: center;
    padding: 2% 5%;
}

.nav_capsulas .div_caja_herramientas p{
    background: transparent;
    font-weight: 600;
    color: #000;
    font-size: 18px;
    margin: 0;
    text-align: center;
    padding: 4% 0 2% 0;
}

.cajas_herramientas{
    padding: 0 3.4%;
}

.cajas_herramientas .caja{
    padding: 0;
}

/*.cajas_herramientas .caja img{
    width: 100%;
}*/

/*guias.html*/

.nav_guias .div_btn_volver a:hover{
    text-decoration: none;
}

.nav_guias .div_btn_volver a p{
    background: #fff;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    margin: 0 10%;
    text-align: center;
    padding: 2% 5%;
}

.nav_guias .div_txt_capsula p{
    background: #fff;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    margin: 0 10%;
    text-align: center;
    padding: 2% 5%;
}

.nav_guias .div_caja_herramientas p{
    background: transparent;
    font-weight: 600;
    color: #000;
    font-size: 18px;
    margin: 0;
    text-align: center;
    padding: 4% 0 2% 0;
}

.div_img_gui_cap{
    padding: 2%;
}

.div_img_gui_cap .img_gui_cap img{
    width: 90%;
    padding-top: 6%;
}

.div_img_gui_cap .img_gui_cap_xs img{
    width: 40%;
    padding: 6% 0;
}

.div_img_gui_cap .text_gui_cap p{
    text-align: justify;
    font-weight: 600;
    color: #000;
    font-size: 16px;
}

.div_img_gui_cap .text_gui_cap_xs p{
    text-align: justify;
    font-weight: 600;
    color: #000;
    font-size: 13px;
}

/*juegos.html*/

.nav_juegos .div_btn_volver a:hover{
    text-decoration: none;
}

.nav_juegos .div_btn_volver a p{
    background: #fff;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    margin: 0 10%;
    text-align: center;
    padding: 2% 5%;
}

.nav_juegos .div_txt_capsula p{
    background: #fff;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    margin: 0 10%;
    text-align: center;
    padding: 2% 5%;
}

.nav_juegos .div_caja_herramientas p{
    background: transparent;
    font-weight: 600;
    color: #000;
    font-size: 18px;
    margin: 0;
    text-align: center;
    padding: 4% 0 2% 0;
}

.div_img_jue_cap{
    padding: 2%;
}

.div_img_jue_cap .img_jue_cap img{
    width: 50%;
    padding-top: 6%;
}

.div_img_jue_cap .img_jue_cap_xs img{
    width: 40%;
    padding: 6% 0;
}

.div_img_jue_cap .text_jue_cap p{
    text-align: justify;
    font-weight: 600;
    color: #000;
    font-size: 16px;
}

.div_img_jue_cap .text_jue_cap_xs p{
    text-align: justify;
    font-weight: 600;
    color: #000;
    font-size: 13px;
}

/*capsulas_cajas*/

.nav_capsulas .div_btn_volver a:hover{
    text-decoration: none;
}

.nav_capsulas .div_btn_volver a p{
    background: #56AADD;
    color: #fff;
    font-size: 25px;
    margin: 0 10%;
    text-align: center;
    padding: 2% 5%;
}

.nav_capsulas .div_txt_capsula p{
    background: #56AADD;
    color: #fff;
    font-size: 25px;
    margin: 0 10%;
    text-align: center;
    padding: 2% 5%;
}

.nav_capsulas .div_caja_herramientas p{
    background: transparent;
    font-weight: 600;
    color: #000;
    font-size: 18px;
    margin: 0;
    text-align: center;
    padding: 4% 0 2% 0;
}

.div_img_cajas{
    padding: 0 2% 3% 2%;
}

.div_img_cajas .img_caja img{
    width: 100%;
    padding-top: 0;
}

.text_caja p{
    padding-top: 5%;
    text-align: justify;
    font-weight: 600;
    color: #000;
    font-size: 16px;

}

/*divs nombre de la capsula*/

.titulo{
    color: #000;
    font-size: 22px;
    text-align: center;
    font-weight: 600;
}

.div_salud_ambiental{
    background: #49ccab;
    border-top: solid 1px #e6e7eb;
    border-bottom: solid 1px #e6e7eb;
}

.div_salud_ambiental p{
    padding-top: 1%;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

.div_sexualidad{
    background: #a0d169;
    border-top: solid 1px #e6e7eb;
    border-bottom: solid 1px #e6e7eb;
}

.div_sexualidad p{
    padding-top: 1%;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

.div_convivencia_social{
    background: #f7cf4a;
    border-top: solid 1px #e6e7eb;
    border-bottom: solid 1px #e6e7eb;
}

.div_convivencia_social p{
    padding-top: 1%;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

.div_salud_publica{
    background: #ff6666;
    border-top: solid 1px #e6e7eb;
    border-bottom: solid 1px #e6e7eb;
}

.div_salud_publica p{
    padding-top: 1%;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

.div_salud_publica_xs{
    background: #ff6666;
    border-top: solid 1px #e6e7eb;
    border-bottom: solid 1px #e6e7eb;
}

.div_vida_saludable{
    background: #fa6e52;
    border-top: solid 1px #e6e7eb;
    border-bottom: solid 1px #e6e7eb;
}

.div_vida_saludable p{
    padding-top: 1%;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

.div_seguridad_alimentaria{
    background: #50c0e6;
    border-top: solid 1px #e6e7eb;
    border-bottom: solid 1px #e6e7eb;
}

.div_seguridad_alimentaria p{
    padding-top: 1%;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

.div_enfermedades_transmitibles{
    background: #eb86bd;
    border-top: solid 1px #e6e7eb;
    border-bottom: solid 1px #e6e7eb;
}

.div_enfermedades_transmitibles p{
    padding-top: 1%;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

.div_ambito_laboral{
    background: #ab91eb;
    border-top: solid 1px #e6e7eb;
    border-bottom: solid 1px #e6e7eb;
}

.div_ambito_laboral p{
    padding-top: 1%;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

/*informacion sobre capsula de "Salud ambiental"*/

.info_capsulas_salud_ambiental .text_info_salud_ambiental .titulo_text_info{
    color: #000;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
}

.info_capsulas_salud_ambiental .text_info_salud_ambiental .text_info{
    color: #000;
    font-size: 16px;
    font-weight: 600;
    padding: 0 2%;
    text-align: justify;
}

.info_capsulas_salud_ambiental .imagenes_salud_ambiental{
    padding-top: 2%;
}

.info_capsulas_salud_ambiental .imagenes_salud_ambiental .img_1 img{
    width: 200px;
}

.imagen_grande center img{
    padding-top: 3%;
    width: 60%;
    padding-left: 5%;
}

.imagen_grande_2 center img{
    padding-top: 3%;
    width: 100%;
    padding-left: 5%;
}

.imagen_grande_3 center img{
    padding-top: 3%;
    width: 80%;
    padding-left: 5%;
}

.imagen_grande_4 center img{
    margin-top: -5%;
    width: 100%;
    padding-left: 5%;
}

.img_vida_saludable_2{
    padding-top: 4%;
}

.info_capsulas_salud_ambiental .text_para_no_olvidar{
    background-color: #fde4d0;
    border: solid 1px #F8AC00;
    text-align: justify;
    padding: 1%;
    margin: 1.5%;
    font-weight: 600;
}

/*informacion sobre capsula de "Vida saludable y condiciones no transmisibles"*/

.vida_saludable_img_1 img{
    width: 70%;
}

.vida_saludable_img_2 img{
    width: 70%;
}

.info_capsulas_vida_saludable .text_info_vida_saludable .titulo_text_info{
    color: #000;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
}

.info_capsulas_vida_saludable .text_para_no_olvidar{
    background-color: #e6eeda;
    border: solid 1px greenyellow;
    text-align: justify;
    padding: 1%;
    margin: 1.5%;
    font-weight: 600;
}

/*informacion sobre capsula de "Convivencia socal y salud mental"*/

.salud_mental_img_1 img{
    width: 80%;
    height: 250px;
}

.salud_mental_img_2 img{
    width: 80%;
    margin-top: 10%;
}

.salud_mental_img_3 img{
    width: 80%;
}

.salud_mental_img_4 img{
    width: 80%;
    padding: 5% 0;
}

.info_capsulas_salud_mental .titulo_text_info{
    color: #000;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
}

.info_capsulas_salud_mental .text_para_no_olvidar{
    background-color: #e6eeda;
    border: solid 1px greenyellow;
    text-align: justify;
    padding: 1%;
    margin: 1.5%;
    font-weight: 600;
}

/*informacion sobre capsula de "Salud publica en emergencias y desastres"*/

li{
    text-align: justify;
    font-weight: 600;
    color: #333333;
    font-size: 15px;
}

.li-url{
    text-align: left;
    font-weight: 600;
    color: #333333;
    font-size: 15px;
}

.salud_publica_img_1{
    padding-top: 7%;
}

.salud_publica_img_1 center img{
    width: 100%;
}

.text_info_salud_publica .titulo_text_info{
    padding-top: 2%;
    color: #000;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
}

.text_para_no_olvidar{
    background-color: #e6eeda;
    border: solid 1px greenyellow;
    text-align: justify;
    padding: 1%;
    margin: 1.5%;
    font-weight: 600;
}

/*informacion sobre capsula de "Sexualidad y derechos sexuales y reproductivos"*/

.text_info_sexualidad .titulo_text_info{
    padding-top: 2%;
    color: #000;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
}

.text_para_no_olvidar{
    background-color: #e6eeda;
    border: solid 1px greenyellow;
    text-align: justify;
    padding: 1%;
    margin: 1.5%;
    font-weight: 600;
}

/*informacion sobre capsula de "Seguridad alimentaria y nutricional"*/

.texto_italic{
    font-style: italic;
}

.fuente_por{
    font-style: italic;
    font-size: 12px;
}

.text_info_seguridad_alimentaria .titulo_text_info{
    padding-top: 2%;
    color: #000;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
}

.text_para_no_olvidar{
    background-color: #e6eeda;
    border: solid 1px greenyellow;
    text-align: justify;
    padding: 1%;
    margin: 1.5%;
    font-weight: 600;
}

/*informacion sobre capsula de "Vida saludable y enfermedades transmitibles"*/

.fuente_por{
    font-style: italic;
    font-size: 12px;
}

.llevar_vida_saludable div ul li{
    color: #eb86bd;
}

.text_info_enfermedades_transmitibles .titulo_text_info{
    padding-top: 2%;
    color: #000;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
}

.text_para_no_olvidar{
    background-color: #e6eeda;
    border: solid 1px greenyellow;
    text-align: justify;
    padding: 1%;
    margin: 1.5%;
    font-weight: 600;
}

.texto_cc{
    background-color: #ddd !important;
    border: solid 1px #ccc !important;
}

/*informacion sobre capsula de "Salud y ambito laboral"*/

.text_info_ambito_laboral .titulo_text_info{
    padding-top: 2%;
    color: #000;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
}

.text_para_no_olvidar{
    background-color: #fde4d0;
    border: solid 1px #F8AC00;
    text-align: justify;
    padding: 1%;
    margin: 1.5%;
    font-weight: 600;
}

.url_imagen{
    font-style: italic;
    font-size: 11px;
}
/*-------------------------------------------------------------------------------------------------*/
/*ESTILOS PARA LAS GUIAS EN HTML-------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------*/
.container_guias{
    width: 100%;
    padding: 0 0 5% 0 !important;
    max-width: 800px;
    background: #fff !important;
}

.derechos{
    font-size: 10px;
}

.titulo_guia{
    font-size: 40px;
    text-align: center;
    margin: 0;
    margin: 3% 0;
}

.div_portada .portada_guia{
    width: 100%;
}

.objetivo_guia{
    background: rgba(0,0,0,0);
    margin-top: 4%;
    font-family: gotham-light;
    font-weight: bold;
}

.titulo_objetivo{
    font-size: 30px;
    text-align: center;
    padding: 3% 0 0 0;
}

.texto_objetivo{
    font-size: 20px;
    text-align: center;
    padding: 2% 0 3% 0;
}

.inicio_guia{
    margin-top: 4%;
}

.pregunta_guia_img{
    /*width: 80%;*/
    padding: 17% 0 0 0;
}

.titulo_inicio{
    font-size: 30px;
    text-align: center;
    padding: 0;
}

.texto_inicio{
    font-size: 15px;
    text-align: justify;
    padding: 2% 0 3% 0;
}

.practicar_img{
    width: 28%;
    padding-bottom: 3%;
}

.titulo_practicar_compartir{
    margin-top: 4%;
    font-size: 30px;
    text-align: center;
    padding: 0;
}

.texto_practicar_compartir{
    font-size: 20px;
    text-align: justify;
    padding: 2% 0 0 0;
}

.comparar_img{
    width: 100%;
}

.div_sabias_que{
    background: #ee6f56;
}

.sabias_que_img{
    width: 80%;
}

.sabias_que_lista ul li p{
    font-size: 18px;
    margin: 0;
}

.sabias_que_lista{
    margin: 4%;
}

.reflexionar_guia_img{
    width: 100%;
    padding: 0;
}

.titulo_bibliografia{
    font-size: 30px;
    text-align: center;
    padding: 1%;
}

.texto_bibliografia{
    font-size: 17px;
    text-align: justify;
}

.imagen_100{
    width: 100%;
}

.imagen_90{
    width: 90%;
}

.imagen_80{
    width: 80%;
}

/*-ESTILOS PARA DISPOSITIVOS COMO TABLETS (sm)-----------------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) and (max-width: 992px){

    .titulo{
        color: #000;
        font-size: 16px;
        text-align: center;
        font-weight: 600;
    }

    .imagen_grande center img{
        width: 60%;
    }

    /*links para la navegacion entre juegos, guias y capsulas*/

    .links_juegos_guias .arrow center a i{
        font-size: 60px;
    }

    .links_juegos_guias .arrow center p{
        font-size: 12px;
        color: #337ab7;
        font-weight: 600;
    }

    .links_juegos_guias div center a img{
        width: 60%;
    }

    /*estilos para la barra de navegacion en la parte superior de las capsulas*/

    .nombre_capsula{
        font-size: 16px;
        text-align: center;
        color: #000;
    }

    .nav_capsulas .div_btn_volver a:hover{
        text-decoration: none;
    }

    .nav_capsulas .div_btn_volver a p{
        background: #fff;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        margin: 0 10%;
        text-align: center;
        padding: 3% 5%;
    }

    .nav_capsulas .div_txt_capsula p{
        background: #fff;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        margin: 0 10%;
        text-align: center;
        padding: 3% 5%;
    }

    .nav_capsulas .div_caja_herramientas p{
        background: transparent;
        font-weight: 600;
        color: #000;
        font-size: 11px;
        margin: 0 0%;
        text-align: center;
        padding: 3% 0 0 0;
    }

    .div_img_cajas .img_caja img{
        width: 100%;
        padding-top: 0;
    }

    /*estilos para la capsula de salud ambiental*/

    .div_salud_ambiental p{
        padding-top: 2%;
        color: #fff;
        font-size: 13px;
        text-align: center;
    }

    .text_caja p{
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 13px;
    }

    .info_capsulas_salud_ambiental .text_info_salud_ambiental .titulo_text_info{
        padding-top: 2%;
        margin-top: -5%;
        color: #000;
        font-size: 16px;
        text-align: center;
        font-weight: 600;
    }

    .info_capsulas_salud_ambiental .text_info_salud_ambiental .text_info{
        padding-top: 0%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 13px;
    }

    .info_capsulas_salud_ambiental .text_para_no_olvidar{
        background-color: #fde4d0;
        border: solid 1px #F8AC00;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 13px;
        margin: 1.5%;
    }

    /*estilos para la capsula de Sexualidad Derechos Sexuales y Reproductivos*/

    .div_sexualidad p{
        padding-top: 2%;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    .text_info_sexualidad .titulo_text_info{
        padding-top: 2%;
        margin-top: -5%;
        color: #000;
        font-size: 16px;
        text-align: center;
        font-weight: 600;
    }

    .text_para_no_olvidar{
        background-color: #e6eeda;
        border: solid 1px greenyellow;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 13px;
        margin: 1.5%;
    }

    /*estilos para la capsula de Convivencia Social y Salud Mental*/

    .div_convivencia_social p{
        padding-top: 2%;
        color: #fff;
        font-size: 13px;
        text-align: center;
    }

    .info_capsulas_salud_mental .titulo_text_info{
        padding-top: 2%;
        margin-top: -5%;
        color: #000;
        font-size: 16px;
        text-align: center;
        font-weight: 600;
    }

    .info_capsulas_salud_mental .text_para_no_olvidar{
        background-color: #e6eeda;
        border: solid 1px greenyellow;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 13px;
        margin: 1.5%;
    }

    /*estilos para la capsula Salud Publica en Emergencias y Desastres*/

    .div_salud_publica p{
        padding-top: 2%;
        color: #fff;
        font-size: 13px;
        text-align: center;
    }

    li{
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 13px;
    }

    .salud_publica_img_1{
        padding-top: 7%;
    }

    .salud_publica_img_1 center img{
        width: 100%;
    }

    .text_info_salud_publica .titulo_text_info{
        padding-top: 2%;
        margin-top: -5%;
        color: #000;
        font-size: 16px;
        text-align: center;
        font-weight: 600;
    }

    .text_para_no_olvidar{
        background-color: #e6eeda;
        border: solid 1px greenyellow;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 13px;
        margin: 1.5%;
    }

    /*estilos para la capsula Vida Saludable y Condiciones No Transmisibles*/

    .div_vida_saludable p{
        padding-top: 2%;
        color: #fff;
        font-size: 13px;
        text-align: center;
    }

    .text_info_vida_saludable .text_para_no_olvidar .titulo_text_info{
        padding-top: 2%;
        margin-top: -5%;
        color: #000;
        font-size: 16px;
        text-align: center;
        font-weight: 600;
    }

    .info_capsulas_vida_saludable .text_para_no_olvidar{
        background-color: #e6eeda;
        border: solid 1px greenyellow;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 13px;
        margin: 1.5%;
    }

    /*estilos para la capsula Seguridad Alimentaria y Nutricional*/

    .fuente_por{
        font-style: italic;
        font-size: 11px;
    }

    .div_seguridad_alimentaria p{
        padding-top: 2%;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    .text_info_seguridad_alimentaria .titulo_text_info{
        padding-top: 2%;
        margin-top: -5%;
        color: #000;
        font-size: 16px;
        text-align: center;
        font-weight: 600;
    }

    .text_para_no_olvidar{
        background-color: #e6eeda;
        border: solid 1px greenyellow;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 13px;
        margin: 1.5%;
    }

    /*estilos para la capsula Vida Saludable y Enfermedades Transmitibles*/

    .div_enfermedades_transmitibles p{
        padding-top: 2%;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    .text_info_enfermedades_transmitibles .titulo_text_info{
        padding-top: 2%;
        margin-top: -5%;
        color: #000;
        font-size: 16px;
        text-align: center;
        font-weight: 600;
    }

    .text_para_no_olvidar{
        background-color: #e6eeda;
        border: solid 1px greenyellow;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 13px;
        margin: 1.5%;
    }

    /*estilos para la capsula Salud y Ambito Laboral*/

    .div_ambito_laboral p{
        padding-top: 2%;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    .text_info_ambito_laboral .titulo_text_info{
        padding-top: 2%;
        margin-top: -5%;
        color: #000;
        font-size: 16px;
        text-align: center;
        font-weight: 600;
    }

    .text_para_no_olvidar{
        background-color: #fde4d0;
        border: solid 1px #F8AC00;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 13px;
        margin: 1.5%;
    }

    /*estilos para guias*/

    .guia:hover{
        text-decoration: none;
    }

    .nombre_guia{
        color: #000;
        font-size: 16px;
        text-align: center;
    }

    .nav_guias .div_btn_volver a:hover{
        text-decoration: none;
    }

    .nav_guias .div_btn_volver a p{
        background: #fff;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        margin: 0 10%;
        text-align: center;
        padding: 3% 5%;
    }

    .nav_guias .div_txt_capsula p{
        background: #fff;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        margin: 0 10%;
        text-align: center;
        padding: 3% 5%;
    }

    .nav_guias .div_caja_herramientas p{
        background: transparent;
        font-weight: 600;
        color: #000;
        font-size: 12px;
        margin: 0 0%;
        text-align: center;
        padding: 3% 0 0 0;
    }

    /*estilos para juegos*/

    .nav_juegos .div_btn_volver a:hover{
        text-decoration: none;
    }

    .nav_juegos .div_btn_volver a p{
        background: #fff;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        margin: 0 10%;
        text-align: center;
        padding: 3% 5%;
    }

    .nav_juegos .div_txt_capsula p{
        background: #fff;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        margin: 0 10%;
        text-align: center;
        padding: 3% 5%;
    }

    .nav_juegos .div_caja_herramientas p{
        background: transparent;
        font-weight: 600;
        color: #000;
        font-size: 9px;
        margin: 0 0%;
        text-align: center;
        padding: 3% 0 0 0;
    }

}

/*-ESTILOS PARA DISPOSITIVO MOVIL (xs)-----------------------------------------------------------------------------------*/

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

    .titulo{
        color: #000;
        font-size: 13px;
        text-align: center;
        font-weight: 600;
    }

    .imagen_grande_3 center img{
        width: 100%;
    }

    /*links para la navegacion entre juegos, guias y capsulas*/

    .links_juegos_guias .arrow center a i{
        font-size: 40px;
    }

    .links_juegos_guias .arrow center p{
        font-size: 9px;
        color: #337ab7;
        font-weight: 600;
    }

    .links_juegos_guias div center a img{
        width: 100%;
    }

    /*estilos para la barra de navegacion en la parte superior de las capsulas*/

    .nav_capsulas .div_btn_volver a:hover{
        text-decoration: none;
    }

    .imagen_grande center img{
        padding-top: 3%;
        width: 100%;
    }

    .nav_capsulas .div_btn_volver a p{
        background: #56AADD;
        color: #fff;
        font-size: 10px;
        margin: 0 10%;
        text-align: center;
        padding: 3% 5%;
    }

    .nav_capsulas .div_txt_capsula p{
        background: #56AADD;
        color: #fff;
        font-size: 10px;
        margin: 0 10%;
        text-align: center;
        padding: 3% 5%;
    }

    .nav_capsulas .div_caja_herramientas p{
        background: transparent;
        font-weight: 600;
        color: #000;
        font-size: 9px;
        margin: 0 0%;
        text-align: center;
        padding: 3% 0 0 0;
    }

    /*estilos para la capsula de salud ambiental*/

    .div_salud_ambiental p{
        padding-top: 2%;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    .div_img_cajas .img_caja img{
        width: 50%;
        padding-top: 0;
    }

    .text_caja p{
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 12px;
    }

    .info_capsulas_salud_ambiental .text_info_salud_ambiental .titulo_text_info{
        padding-top: 2%;
        color: #000;
        font-size: 14px;
        text-align: center;
        font-weight: 600;
    }

    .info_capsulas_salud_ambiental .text_info_salud_ambiental .text_info{
        padding-top: 0%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 12px;
    }

    .info_capsulas_salud_ambiental .text_para_no_olvidar{
        background-color: #fde4d0;
        border: solid 1px #F8AC00;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 12px;
        margin: 1.5%;
    }

    /*estilos para la capsula de Sexualidad Derechos Sexuales y Reproductivos*/

    .div_sexualidad p{
        padding-top: 2%;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    .text_info_sexualidad .titulo_text_info{
        padding-top: 2%;
        color: #000;
        font-size: 14px;
        text-align: center;
        font-weight: 600;
    }

    .text_para_no_olvidar{
        background-color: #e6eeda;
        border: solid 1px greenyellow;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 12px;
        margin: 1.5%;
    }

    /*estilos para la capsula de Convivencia Social y Salud Mental*/

    .div_convivencia_social p{
        padding-top: 2%;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    .info_capsulas_salud_mental .titulo_text_info{
        padding-top: 2%;
        color: #000;
        font-size: 14px;
        text-align: center;
        font-weight: 600;
    }

    .info_capsulas_salud_mental .text_para_no_olvidar{
        background-color: #e6eeda;
        border: solid 1px greenyellow;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 12px;
        margin: 1.5%;
    }

    /*estilos para la capsula Salud Publica en Emergencias y Desastres*/

    .div_salud_publica p{
        padding-top: 2%;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    li{
        font-size: 12px;
    }

    .text_info_salud_publica .titulo_text_info{
        padding-top: 2%;
        color: #000;
        font-size: 14px;
        text-align: center;
        font-weight: 600;
    }

    .text_para_no_olvidar{
        background-color: #e6eeda;
        border: solid 1px greenyellow;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 12px;
        margin: 1.5%;
    }

    /*estilos para la capsula Vida Saludable y Condiciones No Transmitibles*/

    .div_vida_saludable p{
        padding-top: 2%;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    .info_capsulas_vida_saludable .text_info_vida_saludable .titulo_text_info{
        padding-top: 2%;
        color: #000;
        font-size: 14px;
        text-align: center;
        font-weight: 600;
    }

    .info_capsulas_vida_saludable .text_para_no_olvidar{
        background-color: #e6eeda;
        border: solid 1px greenyellow;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 12px;
        margin: 1.5%;
    }

    /*estilos para la capsula Seguridad Alimentaria y Nutricional*/

    .fuente_por{
        font-style: italic;
        font-size: 10px;
    }

    .div_seguridad_alimentaria p{
        padding-top: 2%;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    .text_info_seguridad_alimentaria .titulo_text_info{
        padding-top: 2%;
        color: #000;
        font-size: 14px;
        text-align: center;
        font-weight: 600;
    }

    .text_para_no_olvidar{
        background-color: #e6eeda;
        border: solid 1px greenyellow;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 12px;
        margin: 1.5%;
    }

    /*estilos para la capsula Vida Saludable y Enfermedades Transmitibles*/

    .div_enfermedades_transmitibles p{
        padding-top: 2%;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    .text_info_seguridad_alimentaria .titulo_text_info{
        padding-top: 2%;
        color: #000;
        font-size: 14px;
        text-align: center;
        font-weight: 600;
    }

    .text_para_no_olvidar{
        background-color: #e6eeda;
        border: solid 1px greenyellow;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 12px;
        margin: 1.5%;
    }

    /*estilos para la capsula Salud y Ambito Laboral*/

    .div_ambito_laboral p{
        padding-top: 2%;
        color: #fff;
        font-size: 12px;
        text-align: center;
    }

    .text_info_ambito_laboral .titulo_text_info{
        padding-top: 2%;
        color: #000;
        font-size: 14px;
        text-align: center;
        font-weight: 600;
    }

    .text_para_no_olvidar{
        background-color: #fde4d0;
        border: solid 1px #F8AC00;
        text-align: justify;
        padding: 1%;
        font-weight: 600;
        padding-top: 5%;
        text-align: justify;
        font-weight: 600;
        color: #000;
        font-size: 12px;
        margin: 1.5%;
    }

    /*estilos para guias*/

    .guia img{
        width: 70%;
    }

    .guia:hover{
        text-decoration: none;
    }

    .nombre_guia{
        font-size: 12px;
    }

    .nombre_guia_vida_saludable{
        font-size: 10px;
    }

    .nav_guias .div_btn_volver a:hover{
        text-decoration: none;
    }

    .nav_guias .div_btn_volver a p{
        background: #F8AC00;
        color: #fff;
        font-size: 10px;
        margin: 0 10%;
        text-align: center;
        padding: 3% 5%;
    }

    .nav_guias .div_txt_capsula p{
        background: #F8AC00;
        color: #fff;
        font-size: 10px;
        margin: 0 10%;
        text-align: center;
        padding: 3% 5%;
    }

    .nav_guias .div_caja_herramientas p{
        background: transparent;
        font-weight: 600;
        color: #000;
        font-size: 9px;
        margin: 0 0%;
        text-align: center;
        padding: 3% 0 0 0;
    }

    /*estilos para juegos*/

    .nav_juegos .div_btn_volver a:hover{
        text-decoration: none;
    }

    .nav_juegos .div_btn_volver a p{
        background: #DF0011;
        color: #fff;
        font-size: 10px;
        margin: 0 10%;
        text-align: center;
        padding: 3% 5%;
    }

    .nav_juegos .div_txt_capsula p{
        background: #DF0011;
        color: #fff;
        font-size: 10px;
        margin: 0 10%;
        text-align: center;
        padding: 3% 5%;
    }

    .nav_juegos .div_caja_herramientas p{
        background: transparent;
        font-weight: 600;
        color: #000;
        font-size: 9px;
        margin: 0 0%;
        text-align: center;
        padding: 3% 0 0 0;
    }

    .url_imagen{
        font-style: italic;
        font-size: 8px;
    }

    /*-------------------------------------------------------------------------------------------------*/
    /*ESTILOS PARA LAS GUIAS EN HTML XS-------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------------------------------*/
    .container_guias{
        width: 100%;
        padding: 0 2% 5% 2% !important;
        max-width: 800px;
        background: #fff !important;
    }

    .titulo_guia{
        font-size: 25px;
        text-align: center;
        margin: 0;
        margin: 3% 0;
    }

    .titulo_objetivo{
        font-size: 22px;
        text-align: center;
        padding: 3% 0 0 0;
    }

    .texto_objetivo{
        font-size: 16px;
        text-align: center;
        padding: 2% 0 3% 0;
    }

    .titulo_inicio{
        font-size: 22px;
        text-align: center;
        padding: 0;
    }

    .pregunta_guia_img{
        /*width: 50%;*/
        padding: 0 0 4% 0;
    }
    .texto_inicio{
        font-size: 14px;
        text-align: justify;
        padding: 1% 0;
    }

    .inicio_guia{
        margin-top: 1%;
    }

    .practicar_img{
        width: 50%;
        padding-bottom: 3%;
    }

    .titulo_practicar_compartir{
        margin-top: 4%;
        font-size: 22px;
        text-align: center;
        padding: 0;
    }

    .texto_practicar_compartir{
        font-size: 14px;
        text-align: justify;
        padding: 2% 0 0 0;
    }

    .sabias_que_img{
        width: 100%;
    }

    .sabias_que_lista ul li p{
        font-size: 14px;
        margin: 0;
    }

    .sabias_que_lista{
        margin: 4%;
    }

    .reflexionar_guia_img{
        width: 70%;
        padding: 0;
    }

    .titulo_bibliografia{
        font-size: 25px;
        text-align: center;
        padding: 1%;
    }

    .texto_bibliografia{
        font-size: 14px;
        text-align: justify;
    }

}

.titulo_caja_herramientas {
    font-size: 14px;
}