﻿body {background-color: #eee;}
/** Archivo creado para dar estilo al componente Menú de Selección de las secciones colocadas en la lección **/
/** Componente: Menú de Selección de la Ruta de la Lección **/
/*************************************************************************************************************************************************/
/******************** Contenido Plantilla con Menú de Clases *************************************************************************************/
/*************************************************************************************************************************************************/
#contenedor-menu-plantilla {position: relative;}
#menu-plantilla-tab {position: relative; width: 90%; margin-left: 5%; margin-right: 5%;}
#leccion_tabContent {position: relative; width: 94%; margin-left: 3%; margin-right: 3%;}
.titulo-menu-plantilla {position: relative; width: 90%; margin-left: 5%; margin-right: 5%; margin-top: 10px;
text-align: center; font-family: Merriweather;}
#content-imgmenu-leccion {position: relative; display: flex; background-color: #341869; margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px; border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; height: 100px;}
#img-menu-leccion {position: relative; height: 70px; margin-left: 20px; margin-top: 15px;}
#content-rutamenu-leccion {position: relative; overflow: hidden; display: grid; padding-left: 0rem;}
#item-menu-leccion {position: relative; width: 100%; display: flex; align-items: center; 
justify-content: space-between; color: #fff; font-weight: 700; background-color: #06478b;
padding: 1.4rem 1rem 1.4rem 1rem;}
.renglon-menu-plantilla {position: relative; color: #363636; font-family: Arial;}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link .renglon-menu-plantilla {position: relative; 
background-color: #40296b; color: #FFF; border-style: none;}
.renglon-menu-plantilla {position: relative; font-family: Arial; color:#5f5e5e; border-style: solid;
border-color: #06478b; border-width: 1px; font-weight: 600;}
.renglon-menu-plantilla:hover {position: relative; background-color: #06478b; color: #FFF;
font-family: Arial; border-style: none;}
.referencia-intro-plantilla {position: relative; text-align: justify; font-family: Merriweather;}
.titulo-contenido-plantilla {position: relative; text-align: center; font-family: Merriweather;}
.subtitulo-contenido-plantilla {position: relative; text-align: left; font-family: Merriweather;}
.descrip-contenido-plantilla {position: relative; text-align: justify; font-family: Arial;}

/*************************************************************************************************************************************************/
/********************Ajustes Personalizados del Framework a los distintos Tipos de Pantallas******************************************************/
/*************************************************************************************************************************************************/
/*Condiciones Particulares para Aplicaciones de Escritorio y Tablas de Resolución HD (1280x720)*/
@media screen and (min-width: 1200px){
/*** Contenido Plantilla con Menú de Clases ***/
#contenedor-menu-plantilla {position: sticky; top: 0px; height: 100vh; overflow-y: scroll; margin-bottom: 30px;}   
.titulo-menu-plantilla {font-size: 1.5em; margin-bottom: 20px;}
.renglon-menu-plantilla {font-size: 0.95rem; margin-bottom: 10px;}
.referencia-intro-plantilla {font-size: 1.5em; margin-bottom: 30px;}
.titulo-contenido-plantilla {font-size: 1.5em; margin-bottom: 30px;}
.subtitulo-contenido-plantilla {font-size: 1.5em; margin-bottom: 30px;}
.descrip-contenido-plantilla {font-size: 1.2em; margin-bottom: 30px;}
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
/*** Contenido Plantilla con Menú de Clases ***/
#contenedor-menu-plantilla {position: sticky; top: 0px; height: 100vh; overflow-y: scroll; margin-bottom: 20px;}    
.titulo-menu-plantilla {font-size: 1.5em; margin-bottom: 20px;}
.renglon-menu-plantilla {font-size: 1rem; margin-bottom: 10px;}
.referencia-intro-plantilla {font-size: 1.5em; margin-bottom: 20px;}
.titulo-contenido-plantilla {font-size: 1.5em; margin-bottom: 20px;}
.subtitulo-contenido-plantilla {font-size: 1.5em; margin-bottom: 20px;}
.descrip-contenido-plantilla {font-size: 1.2em; margin-bottom: 20px;}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
/*** Contenido Plantilla con Menú de Clases ***/
#contenedor-menu-plantilla {position: sticky; top: 0px; height: 100vh; overflow-y: scroll; margin-bottom: 20px;}   
.titulo-menu-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.renglon-menu-plantilla {font-size: 1.1em; margin-bottom: 10px;}
.referencia-intro-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.titulo-contenido-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.subtitulo-contenido-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.descrip-contenido-plantilla {font-size: 1.15em; margin-bottom: 20px;}
}

/*Condiciones Particulares para Aplicaciones de Teléfonos Celulares de Amplia Resolución SD (720x1080)*/
@media screen and (min-width: 576px) and (max-width: 767px) {
/*** Contenido Plantilla con Menú de Clases ***/   
#contenedor-menu-plantilla {position: relative; border-bottom-style: solid; border-bottom-color: #363636; 
border-bottom-width: 2px; margin-bottom: 20px;}   
.titulo-menu-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.renglon-menu-plantilla {font-size: 1.1em; margin-bottom: 10px;}
.referencia-intro-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.titulo-contenido-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.subtitulo-contenido-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.descrip-contenido-plantilla {font-size: 1.15em; margin-bottom: 20px;}
}

/*Condiciones Particulares para Aplicaciones de Teléfonos Celulares*/
@media screen and (min-width: 451px) and (max-width: 575px) { 
/*** Contenido Plantilla con Menú de Clases ***/
#contenedor-menu-plantilla {position: relative; border-bottom-style: solid; border-bottom-color: #363636;
border-bottom-width: 2px; margin-bottom: 20px;}
#leccion_tabConten {margin-bottom: 20px;}   
.titulo-menu-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.renglon-menu-plantilla {font-size: 1.1em; margin-bottom: 10px;}
.referencia-intro-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.titulo-contenido-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.subtitulo-contenido-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.descrip-contenido-plantilla {font-size: 1.15em; margin-bottom: 20px;}
}

@media screen and (min-width: 360px) and (max-width: 450px) {
/*** Contenido Plantilla con Menú de Clases ***/    
#contenedor-menu-plantilla {position: relative; border-bottom-style: solid; border-bottom-color: #363636;
border-bottom-width: 2px; margin-bottom: 20px;}
#leccion_tabConten {margin-bottom: 20px;}    
.titulo-menu-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.renglon-menu-plantilla {font-size: 1.1em; margin-bottom: 10px;}
.referencia-intro-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.titulo-contenido-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.subtitulo-contenido-plantilla {font-size: 1.4em; margin-bottom: 20px;}
.descrip-contenido-plantilla {font-size: 1.15em; margin-bottom: 20px;}
}

@media screen and (max-width: 359px) {
/*** Contenido Plantilla con Menú de Clases ***/
#contenedor-menu-plantilla {position: relative; border-bottom-style: solid; border-bottom-color: #363636;
border-bottom-width: 2px; margin-bottom: 20px;}
#leccion_tabConten {margin-bottom: 20px;}   
.titulo-menu-plantilla {font-size: 1.3em; margin-bottom: 20px;}
.renglon-menu-plantilla {font-size: 1.1em; margin-bottom: 10px;}
.referencia-intro-plantilla {font-size: 1.3em; margin-bottom: 20px;}
.titulo-contenido-plantilla {font-size: 1.3em; margin-bottom: 20px;}
.subtitulo-contenido-plantilla {font-size: 1.3em; margin-bottom: 20px;}
.descrip-contenido-plantilla {font-size: 1.1em; margin-bottom: 20px;}
}