/*CONFIGURACIONES GENERALES*/

/*Encabezado de la pagina*/
.contenedor{
    width: 100%;
}
.encabezado{
    margin: -1% 0% 0% 0%;
    width: 99%;
    position: fixed;
    background-color: white;
}
.nombre_empresa {
    padding: 0.5% 0% 0% 0%;
    margin: 0% 0% 0% 0%;
    color: black;
    text-align: center;
}
.eslogan {
    padding: 0.5% 0% 1% 0%;
    margin: 0% 0% 0% 0%;
    color: black;
    text-align: center;
}
    /*Barra de menu*/
.barra ul{
        list-style: none;
}
.menu{
    font-size: 120%;
    text-align: center;
}
.menu li{
    margin: 0% 0%;
    font-family: Arial, Helvetica, sans-serif;
}

/*-----------------ESTILO PARA PC Y NOTEBOOK-----------------*/

@media(min-width: 1024px)
{
    body{
        width: 99%;
        }
    /*Encabezado de la pagina*/
    .nombre_empresa {
        font-size: 350%;
    }
    .eslogan {
        font-size: 150%;
    }
    /*Barra de menu*/
    .menu{
        margin: 0% 5%;
    }
    .menu li{
        width: 15%;
    }
    .menu > li{
        position: relative;
        display: inline-block;
    }
    .menu > li > a{
        display: block;
        padding: 5% 10%;
        text-decoration: none;
        color: black;
    }
    .menu li a:hover{
        background-color: #f1f1f1;
        transition: all .5s;
    }
    .submenu{
        display: none;
        position: absolute;
        padding: 0%;
        margin: 0%;
        width: 100%;
    }
    .submenu li{
        background-color: white;
        text-align: center;
        width: 100%;
    }
    .submenu li a{
        display: block;
        padding: 5% 5%;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        color: black;
        transition: all .5s;
    }
    .menu > li:hover .submenu {
        display: block;
    }
    .submenu2{
        display: none;
        position: absolute;
        padding: 0%;
        margin: 0%;
        width: 100%;
    }
    .submenu2 li{
        background-color: white;
        text-align: center;
        width: 100%;
    }
    .submenu2 li a{
        display: block;
        padding: 5% 5%;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        color: black;
        transition: all .5s;
    }
    .submenu > li:hover .submenu2 {
        display: block;
    }
    /*Cuerpo de la pagina parte 1*/
    .principal1 {
        margin: 0% 0% 0% 0%;
        display: flex;
        width: 100%;
    }
    .central1 {
        padding: 5% 0%;
        margin: 0% auto;
        text-align: center;
        font-size: 200%;
        width: 60%;
    }
    .usuario {
        text-align: center;
        font-size: 120%;
    }
    .lateral_a {
        padding: 0% 0% 0% 0%;
        margin: 0% 0% 0% 0%;
        width: 20%;
    }
    .lateral_b {
        padding: 0% 0% 0% 0%;
        margin: 0% 0% 0% 0%;
        width: 20%;
    }
    .enlace_1 {
        padding: 3% 3%;
        border: 1px #042578 solid;
        color: #042578;
        font-size: 110%;
    }
    .redes {
        font-size: 150%;
        color:  #042578;
    }
    /*Cuerpo de catalogo*/
    .central_c {
        padding: 0% 0%;
        margin: 0% 0%;
        width: 100%;
      }
    .titulo_1 {
        padding: 3% 0%;
        margin: 0% 0% 0% 0%;
        width: 100%;
        font-size: 300%;
        text-align: center;
    }
    .seccion_a {
        padding: 3% 5%;
        margin: 0% 0% 0% 0%;
        background-position: center;
        width: 100%;
    }
    .subtitulo_1 {
        width: 100%;
        font-size: 250%;
        color:  rgba(5, 5, 5, 0.897);
        text-decoration: none;
    }
    .seccion_1 {
        width: 100%;
        display: flex;
    }
    .subseccion_1 {
        padding: 0% 1%;
        width: 100%;
        font-size: 100%;
    }
    .subseccion_2 {
        padding: 0% 0.5% 0% 0%;
        margin: -1% 0% 0% 0%;
        width: 100%;
        font-size: 100%;
        text-align: center;
    }
    /*Cuerpo de la pagina parte 2*/
    .principal2 {
        width: 100%;
    }
    .central2 {
        padding: 2% 0%;
        margin: 0% 0%;
        text-align: center;
        font-size: 320%;
        width:100%;
    }
    .central3 {
        display: flex;
        padding: 0% 0% 0% 0%;
        margin: -1% 0% 0% 0%;
        width:100%;
    }
    .catalogolink{
        font-size: 170%;
        color:  rgba(5, 5, 5, 0.897);
    }
}

/*--------------------ESTILO PARA TABLETS--------------------*/

@media(max-width: 1023px)
{
    body{
        font-size: 1rem;
    }
    /*Encabezado de la pagina*/
    .nombre_empresa {
        font-size: 300%;
    }
    .eslogan {
        font-size: 120%;
    }
    /*Barra de menu*/
    .menu{
        margin: 0% 5%;
    }
    .menu li{
        width: 15%;
    }
    .menu > li{
        position: relative;
        display: inline-block;
    }
    .menu > li > a{
        display: block;
        padding: 5% 10%;
        text-decoration: none;
        color: black;
    }
    .menu li a:hover{
        background-color: #f1f1f1;
        transition: all .5s;
    }
    .submenu{
        display: none;
        position: absolute;
        padding: 0%;
        margin: 0%;
        width: 100%;
    }
    .submenu li{
        background-color: white;
        text-align: center;
        width: 100%;
    }
    .submenu li a{
        display: block;
        padding: 5% 5%;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        color: black;
        transition: all .5s;
    }
    .menu > li:hover .submenu {
        display: block;
    }

    /*Cuerpo de la pagina parte 1*/
    .principal1 {
        width: 100%;
    }
    .central1 {
        padding: 0% 5%;
        text-align: center;
        font-size: 200%;
    }
    .usuario {
        text-align: center;
        font-size: 120%;
    }
    .lateral_b {
        padding: 0% 0%;
        margin: 0% 0%;
        width: 25%;
    }
    .central_c {
        padding: 0% 0%;
        text-align: center;
        width: 100%;
    }
    .enlace_1{
        padding: 3% 3%;
        border: 1px #042578 solid;
        color: #042578;
        font-size: 110%;
    }
    .redes{
        font-size: 150%;
        color:  #042578;
    }
    /*Cuerpo del catalogo*/
    .titulo_1 {
        padding: 3% 0%;
        margin: 0% 0% 0% 0%;
        width: 100%;
        font-size: 260%;
        text-align: center;
    }
    .seccion_a {
        padding: 3% 5%;
        margin: 0% 0% 0% 0%;
        background-position: center;
        text-decoration: none;
    }
    .subtitulo_1 {
        font-size: 260%;
        color:  rgba(5, 5, 5, 0.897);
        text-decoration: none;
    }
    /*Cuerpo de la pagina parte 2*/
    .principal2 {
        width: 100%;
    }
    .central2 {
        padding: 5% 0%;
        margin: 0% 0%;
        text-align: center;
        font-size: 170%;
        width:100%;
    }
    .central3 {
        display: flex;
        padding: 0% 0%;
        margin: -1% 0% 0% 0%;
        font-size: 320%;
        width:100%;
    }
}

/*--------------------ESTILO PARA MOVILES--------------------*/

@media(max-width: 767px)
{
    body{
        font-size: 0.9rem;
    }
    /*Encabezado de la pagina*/
    .nombre_empresa {
        font-size: 250%;
    }
    .eslogan {
        font-size: 100%;
    }
    /*Barra de menu*/
    .menu{
        margin: 0% 4% 0% -10%;
    }
    .menu li{
        width: 22%;
    }
    .menu > li{
        position: relative;
        display: inline-block;
    }
    .menu > li > a{
        display: block;
        padding: 5% 0%;
        text-decoration: none;
        color: black;
        background-color: white;
    }
    .menu li a:hover{
        background-color: #f1f1f1;
        transition: all .5s;
    }
    .submenu{
        display: none;
        position: absolute;
        padding: 0%;
        margin: 0%;
        width: 100%;
        z-index: 1;
    }
    .submenu li{
        background-color: white;
        text-align: center;
        width: 150%;
    }
    .submenu li a{
        display: block;
        padding: 5% 5%;
        font-family: Arial, Helvetica, sans-serif;
        text-decoration: none;
        color: black;
        transition: all .5s;
    }
    .menu > li:hover .submenu {
        display: block;
    }
    /*Cuerpo de la pagina parte 1*/
    .principal1 {
        width: 100%;
    }
    .central1 {
        padding: 0% 5%;
        text-align: center;
        font-size: 200%;
    }
    .usuario {
        text-align: center;
        font-size: 120%;
    }
    .lateral_a {
        padding: 0% 0%;
        margin: 0% 0%;
        display: flex;
        width: 100%;
    }
    .lateral_b {
        padding: 0% 0%;
        margin: 0% 0%;
        display: flex;
        width: 100%;
    }
    .central_c {
        padding: 0% 0%;
        text-align: center;
        width: 100%;
    }
    .enlace_1{
        padding: 3% 3%;
        border: 1px #042578 solid;
        color: #042578;
        font-size: 110%;
    }
    .redes{
        font-size: 150%;
        color:  #042578;
    }
        /*Cuerpo del catalogo*/
        .titulo_1 {
            padding: 3% 0%;
            margin: 0% 0% 0% 0%;
            width: 100%;
            font-size: 190%;
            text-align: center;
        }   
        .seccion_a {
            padding: 3% 5%;
            margin: 0% 0% 0% 0%;
            background-position: center;
        }
        .subtitulo_1 {
            font-size: 220%;
            color:  rgba(5, 5, 5, 0.897);
            text-decoration: none;
        }
    /*Cuerpo de la pagina parte 2*/
    .principal2 {
        width: 100%;
    }
    .central2 {
        padding: 5% 0%;
        margin: 0% 0%;
        text-align: center;
        font-size: 170%;
        width:100%;
    }
    .central3 {
        display: flex;
        padding: 0% 0%;
        margin: -1% 0% 0% 0%;
        font-size: 320%;
        width:100%;
    }
}