/* DISEÑO PARA PANTALLA CHICA */
@media (max-width:850px){
/* ============================================================================================================================= */
/* INICIO AREA DE ANIMACION MENU MOVIL */
    .elementos-chicos {
        clear:both;
        overflow: hidden;
        height:0;
        transition: height 0.4s ease-in-out 0s, background-color 2s ease 0s;
    }  

    #navegacion-chiquita:target .elementos-chicos {
        background: #161675 none repeat scroll 0 0;
        height:12em;
        width: 40%;
        list-style: none;
        position: relative;
        z-index: 3;
        transition: height 0.4s ease-in-out 0s, background-color 0.9s ease 0s;
    }

    .menu .cerrar {
        display:none;
    }

    #navegacion-chiquita:target .abrir {
        display:none;
    }

    #navegacion-chiquita:target .cerrar {
        display:block;
    }
/* FIN AREA DE ANIMACION MENU MOVIL */
/* ============================================================================================================================= */

    #navegacion {
        display:none;
    }
    #logo {
        display: none;
    }

    * {
        margin: 0;
        padding: 0;
    }

    a {
        display: block;
        color: white;   
        text-decoration: none;
    }

    ul {
        padding-top: 5mm;
        z-index: 4;
    }

    li {
        z-index: 4;
        padding-top: 2mm;
        list-style: outside none none;
        font-size: 1.5rem;
        list-style: none;
        padding-left: 5mm;
    }

    #navegacion-chiquita {
        position: sticky;
        overflow: auto;
        width: 100%;
        top: 0;       
        flex-wrap: wrap;
        background-color: #161675;
        border-bottom: 5px solid #fff;
        z-index: 3;
    }

    .elemento:hover {     
        background: #7575a1;
    } 

    .menu {
        background-color: transparent; 
        border-color: transparent;
        display: block;
        float: left; 
        cursor: pointer;
    }

    #icono {
        display: flex;
        width: 30px;
        height: 30px;
        margin-top: 20px;
        margin-left: 20px;
        flex-direction: column;
        justify-content: space-between;
    }

    .barrita {
        background-color: white;
        z-index: 3;
        display: block;
        height: 3px;
        border-radius: 10px;
        transform: rotate(0);
    }

    .barrita1 {
        background-color: white;
        z-index: 3;
        display: block;
        height: 3px;
        border-radius: 10px;
        transform: rotate(45deg) translate(5px,10px);
    }

    .barrita2 {
        background-color: white;
        z-index: 3;
        display: block;
        height: 3px;
        border-radius: 10px;
        transform: rotate(-45deg) translate(8px,-14px);
    }

    #logo-chico p {
        position: fixed;
        margin-top: 1%;
        top: 0px;
        width: 100%;
        text-align: center;
    }

    #logo-chico img {
        width:15%;
    }

    #opciones {
        position: relative;
        width: 100%;
        margin: auto;
        padding-top: 5%;
        padding-bottom: 5%;
    }

    #opciones .botones #atajo:active {
        border: 5px solid rgb(84, 84, 207);
    }

    #opciones .botones {
        padding-bottom: 10%;
    }

/*======================================================================================================================*/
    /*PIE DE PAGINA*/
    footer {
        clear: both;
        width: 100%;
        overflow: none;
    }

    footer * {
        font-size: 1rem;
    }

    footer img {
        position: relative;
        width: 10%;
        top: 10px;
        margin-right: 10px;
    }

    footer .informacion {
        display: flex;
        flex-direction: column;
        position: sticky;
        margin-top: 50%;
    }

    footer a:link {
        color: white;
    }

    footer a:visited {
        color:  white;
    }

    footer a:hover {
        color: aquamarine;
    }

    footer a:active {
        color: navy;
        background-color: lightblue;
    }

    footer .renglon1, .renglon2 {
        clear: both;
        padding: 1%;
        margin-bottom: 1%;
    }

    footer .renglon3 {
        clear: both;
        text-align: center;
        margin-top: 5px;
    }

    footer .izq {
        clear: left;
        width: 75%;
        text-align: left;
        float: left;
    }

    footer .izq .text {
        float: left;
    }

    footer .der { 
        clear: right;
        width: 60%;
        text-align: right;
        float: right;
    }

    footer .forma-de-fondo {
        position: relative;
        z-index: 0;
        padding-bottom: 40px;
        border-top: 4px solid #161675;
        color: #fff;
        background-color: #161675;
        overflow: hidden;
    }

    footer .forma-de-fondo::after {
        top: 5px;
        width: 120px;
        height: 120px;
        background-position: center;
        background-image: url(RECURSOS/ph_logo_pie.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    footer .forma-de-fondo::before {
        top: -990px;
        width: 1500px;
        height: 1120px;
        background-color: #4e4e99;
        z-index: 0;
        border-radius: 50%;
    }
    footer .forma-de-fondo::after, .forma-de-fondo::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
    }
/*======================================================================================================================*/
}

/*===============================================================================================================================*/
/* DISEÑO PARA PANTALLA MEDIANA */
@media (min-width:851px){

    * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 100%;
    }

    #navegacion-chiquita, #logo-chico {
        display: none;
    }

    #navegacion {
        position: sticky;
        overflow: auto;
        width: 100%;
        top: 0;       
        flex-wrap: wrap;
        background-color: #161675;
        border-bottom: 10px solid #fff;
        z-index: 3;
    }

    #navegacion a:hover {
        background-color: skyblue;
    }

    #navegacion .elementosizq {
        position: relative;
        float: left;
        width: 50%;
        margin: 0;
    }

    #navegacion .elementosder {
        position: relative;
        float: right;
        width: 50%;
        margin: 0;
    }

    #navegacion .elementosizq li {
        position: relative;
        z-index: 4;
        display: inline-block;
        float: left;
        vertical-align: middle;
        box-sizing: border-box;
        padding: 5mm;
    }

    #navegacion .elementosder li {
        position: relative;
        z-index: 4;
        display: inline-block;
        float: right;
        vertical-align: middle;
        box-sizing: border-box;
        padding: 5mm;
    }

    #elemento {
        color:white;
        font-size: 1.7rem;
        text-decoration: none;
    }

    #logo p {
        position: fixed;
        top: 5px;
        width: 100%;
        text-align: center;
    }

    #logo img{
        width:12%;
    }

    #opciones {
        position: relative;
        width: 90%;
        margin: auto;
        padding-top: 5%;
        padding-bottom: 5%;
    }

    #opciones .botones #atajo:hover {
        border: 5px solid rgb(84, 84, 207);
    }

    #opciones .botones {
        display: flex;
        flex-direction: column;
        position: relative; 
        width: 40%; 
        float: left;      
    }

    #opciones .zonaNovedades {
        position: relative; 
        width: 42%;
        float: right;        
    }

/*======================================================================================================================*/
    /*PIE DE PAGINA*/
    footer {
        clear: both;
        width: 100%;
        overflow: none;
    }

    footer * {
        font-size: 1rem;
    }

    footer img {
        position: relative;
        width: 5%;
        top: 10px;
        margin-right: 10px;
    }

    footer .informacion {
        position: sticky;
        margin-top: 0;
    }

    footer a:link {
        color: white;
    }

    footer a:visited {
        color:  white;
    }

    footer a:hover {
        color: aquamarine;
    }

    footer a:active {
        color: navy;
        background-color: lightblue;
    }

    footer .renglon1, .renglon2 {
        clear: both;
        padding: 1%;
        margin-bottom: 1%;
    }

    footer .renglon3 {
        clear: both;
        margin-top: 10%;
        text-align: center;
    }

    footer .izq {
        clear: left;
        width: 50%;
        text-align: left;
        float: left;
    }

    footer .izq .text {
        float: left;
    }

    footer .der { 
        clear: right;
        width: 50%;
        text-align: right;
        float: right;
    }

    footer .forma-de-fondo {
        position: relative;
        z-index: 0;
        padding-bottom: 40px;
        border-top: 4px solid #161675;
        color: #fff;
        background-color: #161675;
        overflow: hidden;
    }

    footer .forma-de-fondo::after {
        top: 5px;
        width: 120px;
        height: 120px;
        background-position: center;
        background-image: url(RECURSOS/ph_logo_pie.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    footer .forma-de-fondo::before {
        top: -990px;
        width: 2000px;
        height: 1120px;
        background-color: #4e4e99;
        z-index: 0;
        border-radius: 50%;
    }
    footer .forma-de-fondo::after, .forma-de-fondo::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
    }
/*======================================================================================================================*/

}
/*===============================================================================================================================*/
/* DISEÑO PARA PANTALLA GRANDE */
@media (min-width:1280px){
    * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 100%;
    }

    #navegacion-chiquita, #logo-chico {
        display: none;
    }

    #navegacion {
        position: sticky;
        overflow: auto;
        width: 100%;
        top: 0px;        
        z-index: 3;
        flex-wrap: wrap;
        background-color: #161675;
        border-bottom: 10px solid #fff;
    }

    #navegacion a:hover {
        background-color: skyblue;
    }

    #navegacion .elementosizq {
        position: relative;
        float: left;
        width: 50%;
        margin: 0;
    }

    #navegacion .elementosder {
        position: relative;
        float: right;
        width: 50%;
        margin: 0;
    }

    #navegacion .elementosizq li {
        display: inline-block;
        float: left;
        vertical-align: middle;
        box-sizing: border-box;
        padding: 9mm;
    }

    #navegacion .elementosder li {
        display: inline-block;
        float: right;
        vertical-align: middle;
        box-sizing: border-box;
        padding: 9mm;
    }

    #elemento {
        color:white;
        font-size: 2rem;
        text-decoration: none;
    }

    #logo p {
        position: fixed;
        z-index: 3;
        top: 5px;
        width: 100%;
        text-align: center;
    }

    #logo img{
        width:12%;
    }

    #opciones {
        position: relative;
        width: 90%;
        padding-bottom: 10%;
    }

    #opciones .botones {
        width: 40%; 
        float: left;   
    }

    #opciones .botones #atajo:hover {
        border: 5px solid rgb(84, 84, 207);
    }

    #opciones .zonaNovedades {
        position: relative; 
        width: 43%;
        float: right;       
    }
/*======================================================================================================================*/
    /*PIE DE PAGINA*/
    footer {
        clear: both;
        width: 100%;
        overflow: none;
        padding-top: 10%;
    }

    footer * {
        font-size: 1.5rem;
    }

    footer img {
        position: relative;
        width: 5%;
        top: 10px;
        margin-right: 10px;
    }

    footer .informacion {
        position: sticky;
        margin-top: 1%;
    }

    footer a:link {
        color: white;
    }

    footer a:visited {
        color:  white;
    }

    footer a:hover {
        color: aquamarine;
    }

    footer a:active {
        color: navy;
        background-color: lightblue;
    }

    footer .renglon1, .renglon2 {
        clear: both;
        padding: 1%;
        margin-bottom: 1%;
    }

    footer .renglon3 {
        clear: both;
        margin-top: 3.5%;
        text-align: center;
    }

    footer .izq {
        clear: left;
        width: 50%;
        text-align: left;
        float: left;
    }

    footer .izq .text {
        float: left;
    }

    footer .der { 
        clear: right;
        width: 50%;
        text-align: right;
        float: right;
    }

    footer .forma-de-fondo {
        position: relative;
        z-index: 0;
        padding-bottom: 40px;
        border-top: 4px solid #161675;
        color: #fff;
        background-color: #161675;
        overflow: hidden;
    }

    footer .forma-de-fondo::after {
        top: 5px;
        width: 120px;
        height: 120px;
        background-position: center;
        background-image: url(RECURSOS/ph_logo_pie.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    footer .forma-de-fondo::before {
        top: -990px;
        width: 1550px;
        height: 1120px;
        background-color: #4e4e99;
        z-index: 0;
        border-radius: 50%;
    }
    footer .forma-de-fondo::after, .forma-de-fondo::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
    }
/*======================================================================================================================*/
}
/* ============================================================================================================================= */