/*PÁGINA COMPLETA*/

@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

*{
    font-family: 'Jost', sans-serif;
    
}

body{
    background: rgba(219, 219, 219, 0.26);
    margin: 0px;
    padding:0px;
    height: auto;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    display: inline-flex;
    flex-flow: row wrap;
    align-content: center;

    animation-name: pagetransition;
    animation: 7s 0s 1 initial forwards;
    animation-duration: 1s;
    animation-delay: 0s;
  animation-iteration-count:1;
  animation-direction: normal;
  animation-fill-mode:forwards; /*cómo acaba la animacion*: foward: se queda como último elemento, color rojo, backwards: se queda como el primer elemento*/
  animation-play-state:running;
  -webkit-animation:7s 0s 1 initial forwards;
  -moz-animation: 1s 0s 1 initial forwards;
}
    @keyframes pagetransition{
        0%{ opacity: 0%;}
        100% {opacity: 100%}
    }
    @-webkit-keyframes pagetransition{
        0%{ opacity: 0%;}
        100% {opacity: 100%}
    }
    @-moz-keyframes pagetransition{
        0%{ opacity: 0%;}
        100% {opacity: 100%}
    }





/*CABECERA*/
        header{
           
        width: 100%;
        border-bottom: 1px solid #dedede;

            /*flexbox*/
            display:flex;
            flex-flow: row wrap;
            justify-content: space-around;
            align-items: center;
           
        }
      
  
.logo{
    width:8%;
    
    padding:5px 0px;
margin-left:-100px}
    

.titulo{
        font-family: 'Oswald', sans-serif;
        font-weight: 530;
        font-size: 16px;
         width: 40%;
         cursor: pointer;
         text-decoration: none;
         color:black;
         padding: 15px 0px;
         margin-right: -100px;
         text-align: right;
        }

strong{
            font-family: 'Oswald', sans-serif;
            color: rgb(52, 189, 52);
            font-weight: 530;
            font-size:16px;
        }
        
.titulo:hover{
            color: rgb(52,189,52);
        }

 /*MENÚ*/
nav{
            width: 30%;
            height:100%;
            
            margin-top: 0%;
            left: 0px;
            float: left;
            position:relative;
            z-index: 1;
        }
  
/*lista menu nivel 1*/
ol.navegador{
    width: 100%;
    height: 100%;
    padding: 0px;
    margin-top: 40px;
    }

ol.navegador li {
    padding:8px 0px;
    margin-left: 30px;
    font-family: 'Jost', sans-serif;
    border-bottom: dotted 4px rgb(52,189,52);
    font-size: 14px;
    font-weight: 500;
    color:rgb(194, 194, 194);
    transition: all 0.5s;
    }

a{
    font-family: 'Jost', sans-serif;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    color:rgb(99, 99, 99);
    cursor: pointer;
    transition: all 0.5s;
    text-decoration: none;   
}

ol .nav li:hover{
   color: rgb(52, 189, 52);
   padding-left: 10px;
   transition: all 1s;
}

a:hover{
    color: rgb(52, 189, 52)
}

/*lista menu nivel 2*/
li>ul{
    display:none;
    position:absolute;
    left: 70%;
    transition: all 1s;
    }
    
li:hover>ul{
    display:block;
    padding: 5px;
    background-color: rgb(255, 255, 255);
    width: 400px;
    height: auto;
    border-radius: 0%;
    transition: all 2s;
    }

/*lista menu nivel 3*/  
li>ul li>ul{
        display:none;
        position:absolute;
        left:200px;
        transition: all 1s;

        }
   li>ul li:hover>ul {
        display:block;
        top:0px;
        padding: 5px;
        width: 600px;
        height: auto;
        border-radius: 0%;
        left:90%;
        }

/*páginas marcador activo*/
#active{
    color: rgb(52, 189, 52);
}

/*boton descargar informe*/
.extra{
    list-style-image: url(imagenes/pdf_icono.png);
    list-style-position: inside;
    text-align: left;
    width: 60%;
    height: 50%;
    margin-top: 45px;
    margin-left: 0px;
    margin-bottom: 20px;
    padding:5px;
    border-radius: 0px;
    cursor:pointer;
    transition: all 1s;
    background: rgba(133, 187, 72, 0.774);
}

 .extra:hover{
width: 100%;
 }

 .extra li{
     padding-left: 10px;
     transition: all 1s;
 }

 .extra li a{
     text-transform:uppercase;
     color:rgb(225,225,225);
     text-align: center;
 }
 
 .extra li a:hover{
     color:rgb(23, 105, 23);
     
 }


/*CENTRO*/

/*boton imprimir*/
button{
    background:rgba(154, 230, 67, 0.726);
    border: none;
    border-radius: 10px;
    padding:10px;
    margin-bottom: 10px;
    cursor:pointer;
    transition: all 0.3s;
}

button:hover{
    background:rgba(154, 230, 67);
}

/*página central*/

article p{
    font-family: 'Jost', sans-serif;
    font-size: 18px;
}
p.centrado{
    text-align: center;
}

article{
   
    width: 70%;
    height: 100%;
    max-height: 10%;
    margin: 0%;
    margin-right: 0px;
   
    /*flex*/
    display: inline-flex;
    flex-flow: column wrap;
   }

h4{font-family: 'Jost', sans-serif;
                font-size: 15px;
                font-weight: 450;
                text-align: center;
                color: rgb(52,189,52) ;
            }

h2{font-family: 'Jost', sans-serif;
                font-size: 20px;
                font-weight: 500;
                color: rgb(52,189,52);
            }
h3{
                font-family: 'Jost', sans-serif;
                font-size: 17px;
                font-weight: 475;
                color: rgb(52,189,52);
            }
         
/*contenido páginas*/           
article .scroll{
                margin:5%;
                height: auto;
                width:90%;
                max-width: 90%;
                background: #ffffff;
                overflow:auto;
                box-sizing: border-box;
                padding:0 2rem;
                text-align: justify;
            }

/*punto 7 y 8 listas*/
.conclusiones{
    font-family:'Jost', sans-serif;
    color: black;
    text-decoration:none;
    font-size: 18px;
   
}
.conclusiones li{
    padding: 10px;  
}

/*listas comunes*/
ul, ol{
    font-size: 18px;
}
  
/*PIE DE PÁGINA*/

 footer{
                width: 100%;
                height: 100%;
                margin-right: 0px;
                background: rgba(255, 255, 255, 0.87);
                bottom: 0px;
               left: 0px;
               text-align: center;
               border-top: 1px solid #dedede;
            }

 h5{
                font-family: 'Jost', sans-serif;
                font-size: 12px;
                font-weight: 400;
                text-align:center;
                color: rgb(52,189,52);
               
                
            }
 
/*boton subir página*/
            
.boton{
                width: 45px;
                background-color: rgba(253, 249, 249, 0.596);
                height: 35px;
                border-radius: 10px;
                text-align: center; 
                padding-top: 10px;
                position: fixed;
                margin-left: 0px;
                margin-bottom: 0px;
                margin-top:45%;
                cursor: pointer; 
                z-index: 1; 
                transition: all 1s;
            }

.boton:hover{
                background: rgba(133, 187, 72, 0.774);
            }

/*configuración impresión*/
            @media print{
                nav, .boton {
                  display: none !important;
                }
              }

 /*configuración responsive*/
 @media all and (max-width: 850px) {
    body{
        margin:0px;
        padding:0px;
        padding-right:0px;
        display:flex;
        flex-flow: column wrap;
        float:none;
        align-content: flex-start;
        max-width:100%;
        max-height: 100%;
        height: 100%; }
    
    .titulo, .logo{
               font-size:14px;
               min-width: 30%;
               text-align: left;
               margin:0px;}   
    
    nav{
        float:none;
        width: auto;
        padding-right: 0px;
        max-width: 100%;
        margin: 0px;}

    ol li{
        padding-right: 10%;}

    article{
    float:none;
    width: 100%;
    height: 80%;
    justify-content: center;
    margin-bottom: 10%;}
                                          
    footer{
    bottom: 0px;
    justify-self: end;}

    .boton {
        display: none !important;
      }
    

     /*lista menu nivel 2*/
     li>ul{display: none !important;}
     li:hover>ul{display: none !important;}
     
     /*lista menu nivel 3*/
      li>ul li>ul{display: none !important;}
      li>ul li:hover>ul{display: none !important;}


 }

 @media all and (min-width: 1500px){
   a{
     font-family: 'Jost', sans-serif;
     text-align: left;
    font-size: 16px;
    font-weight: 500;
    color:rgb(99, 99, 99);
    cursor: pointer;
    transition: all 0.5s;
    text-decoration: none;}
 }
 footer{
    bottom: 0px;
    justify-self: end;}
    .titulo, strong{
        font-size:22px;
        text-align: left;
        margin:0px;
    font-weight: 200;} 
    article{
        float:none;
        width: 70%;
        height: 100%;
        justify-content: center;
        margin-bottom: 10%;
    margin-bottom: 0px;}