@import url(menu.css);
@import url(inicio.css);
@import url(nosotros.css);
@import url(cumplimiento.css);
@import url(gestion_de_integridad.css);
@import url(proyectos.css);
@import url(servicios.css);
@import url(suministros.css);
@import url(creditos.css);
@import url(copyright.css);

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);

AOS . init ( ) ;

// También puede pasar un objeto de configuración opcional 
// a continuación se enumeran las configuraciones predeterminadas 
AOS . init ( { 
  // Configuración global: 
  deshabilitar : falso ,  // acepta los siguientes valores: 'teléfono', 'tableta', 'móvil', booleano, expresión o función 
  startEvent : 'DOMContentLoaded' ,  // nombre del evento enviado en el documento, que AOS debe inicializar en 
  initClassName : 'aos-init' ,  // clase aplicada después de la inicialización 
  animatedClassName : 'aos-animate' ,  // clase aplicada en la animación 
  useClassNames :false ,  // si es verdadero, agregará el contenido de `data-aos` como clases en el scroll 
  disableMutationObserver : false ,  // deshabilita las detecciones de mutaciones automáticas (avanzado) 
  debounceDelay : 50 ,  // el retraso en el antirrebote utilizado al cambiar el tamaño de la ventana (avanzado ) 
  throttleDelay : 99 ,  // el retraso en el acelerador utilizado al desplazarse por la página (avanzado)
  

  // Configuraciones que pueden ser anuladas por elemento, por atributos `data-aos- *`: 
  offset : 120 ,  // offset (en px) desde el punto de activación original 
  delay : 0 ,  // valores de 0 a 3000 , con paso 50ms de 
  duración : 400 ,  // valores de 0 a 3000, con paso 50ms 
  suavizado : 'facilidad' ,  // suavizado predeterminado para animaciones AOS 
  una vez : falso ,  // si la animación debe ocurrir solo una vez - mientras se desplaza hacia abajo 
  espejo : false ,  // si los elementos deben animarse mientras se desplazan más allá de ellos
  anchorPlacement : 'top-bottom' ,  // define qué posición del elemento con respecto a la ventana debe activar la animación

} ) ;

html {
    background-image: url(../img/Fondo_trama.png);
    background-size: 100%;
    /* Para crear un degradado en el fondo:
    background-image: linear-gradient(270deg, rgb(22, 16, 15) 0%, rgb(22, 16, 15) 100%);
    -webkit-font-smoothing: antialiased;*/
}

:root{
    --Fuente-Titulos: 'Days One', sans-serif;
    --Fuente-Textos: 'Varela', sans-serif;
    
    --Color-Primario: #39CAB1;
    --Color-Secundario: #374760;
    --Color-Terciario: #377EF9;
    
    --Espaciado-Titulos: 1.1;
    --Espaciado-Textos: 1.3;
}

*{ 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

body {
    background-image: url(../img/Fondo_trama.png);
    background-size: cover;
    /*box-shadow: 0 0 22px rgba(0, 0, 0, 0.06);
    color: #545454;*/
    width: 100%;
    margin: auto;
    cursor: url("../img/cursor.png"), auto;
    
}

.ir-arriba{
    display:none;
    background-repeat:no-repeat;
    font-size:30px;
    color: var(--Color-Primario);
    cursor:pointer;
    position:fixed;
    bottom:10px;
    right:10px;
    z-index:2;
    animation: fadeInUp;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.ir-arriba:hover{
    color: #374760;
}

h1, h2 {
    color: var(--Color-Primario);
    font-family: var(--Fuente-Titulos);
    font-size: 30px;
    font-weight: 600;
    line-height: var(--Espaciado-Titulos);
    padding-bottom: 1vh;
}

h3 {
    color: var(--Color-Primario);
    font-family: var(--Fuente-Titulos);
    font-size: 25px;
    font-weight: 400;
    line-height: var(--Espaciado-Titulos);
    padding-bottom: 1vh;
}

h4 {
    color: var(--Color-Secundario);
    font-family: var(--Fuente-Textos);
    font-size: 22px;
    font-weight: 200;
    line-height: var(--Espaciado-Textos);
    padding-bottom: 3vh;
}

p {
    color: var(--Color-Secundario);
    font-family: var(--Fuente-Textos);
    font-size: 18px;
    font-weight: 200;
    line-height: var(--Espaciado-Textos);
    padding-bottom: 3vh;
}

li {
    color: var(--Color-Secundario);
    font-family: var(--Fuente-Textos);
    font-size: 18px;
    font-weight: 200;
    line-height: var(--Espaciado-Textos);
}


/*leftnav*/
    .leftnav{
        width:100px;
        margin:0;
        display:inline-block;
        top:30vh;
        position:absolute;
        left:10px;
        animation: bounceInLeft;
        animation-duration: 1s;
        z-index: 2;
    }

    ul.leftnav-listing{
        display:inline-block;
        padding:20px 0;
        width:58px;
        border:3px solid var(--Color-Primario);
        border-radius:40px;
    }

    ul.leftnav-listing.leftnav-fixed{
        position:fixed;
        top:30vh;
        max-width:100px;
        animation: pulse;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        z-index: 2;
    }

    ul.leftnav-listing li{
        display:block;
        border-radius:50%;
        
/* overflow:hidden; */
        text-align:center;
        max-width:25px;
        margin:0 auto 20px auto;
        font-size:0;
        position:relative;
    }

    ul.leftnav-listing li:last-child{
        margin-bottom:0;
    }

    ul.leftnav-listing li a{
        padding:7px;
        display:inline-block;
        font-size:16px;
        color:white;
        border-radius:50%;
        overflow:hidden;
        border:2px solid var(--Color-Primario);
    }

    ul.leftnav-listing li.is_visiable_section a{
        background:var(--Color-Primario);
    }

    ul.leftnav-listing li:not(:last-child):after{
        content:'';
        height:100%;
        position:absolute;
        background: var(--Color-Primario);
        left:50%;
        z-index:0;
        bottom:-100%;
        width:2px;
        margin-left:-1px;
    }

    /*Demo Extra css*/

    footer {
        height: 28vh;
        background-image: url(../img/Img__Inicio.jpg);
        background-size: cover;
        background-position: center;
    }

    @media (max-width: 450px) {
    footer{
        height: 100%;
        flex-direction: column;
        }   
    }

    .vh_one {
        height: 100%;
        background-image: url(../img/Img__Inicio.jpg);
        background-size: cover;
    }

    .vh_two {
        height: 100%;
    }

    .vh_three {
        height: 100%;
        background-image: url(../img/Img__Inicio.jpg);
        background-size: cover;
    }

    .vh_four {
        height: 100%;
    }

    .vh_five {
        height: 100vh;
        background-image: url(../img/Img__Inicio.jpg);
        background-size: cover;
    }
    
    @media (max-width: 1300px) {
    .header{
            padding: 0px 80px 0px 80px;
        }   
    }

    @media (max-width: 1150px) {
    .header{
            padding: 0px 120px 0px 120px;
        }   
    }

    @media (max-width: 840px) {
    .header{
            padding: 0px 80px 0px 80px;
        }   
    }

    @media (max-width: 645px) {
    .header{
            padding: 0px 40px 0px 40px;
        }   
    }

    @media (max-width: 450px) {
    .header{
            padding: 0px 20px 0px 20px;
        }   
    }
    
    @media (max-width: 840px) {
    .leftnav{
            display: none;
        }   
    }


    /*Res Button*/

    @media screen and (max-width: 1200px){
      .nav-button{
          display: block;
        }
        
      .show_menu #nav-toggle span:after {
          transform: translate3d(0, -10px, 0) rotate(-91deg);
        }
        
      .show_menu #nav-toggle span {
          transform: translate3d(0, 0px, 0) rotate(45deg);
        }
        
      .show_menu #nav-toggle span:before {
          transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0;
        }
    }

    @media screen and (max-width: 1200px){
       nav{
           padding: 10px 0px 8px 0px;
        }
        
       .nav-wrap ul.top_nav{
           display: none;
           position: absolute;
           left: 0;
           right: 0;
           top: 100%;
           background: var(--Color-Secundario);
           height: calc(100vh - 85px);
           overflow-y: scroll;
        }
        
       .nav-wrap > ul li{
           width: 100%;
           border-top: 1px solid #374760;
           position: relative;
        }
        
       .nav-wrap > ul > li:last-child{
           border-bottom: 1px solid var(--Color-Secundario);
        }
        
       .nav-wrap > ul > li a{
           width: 100%;
           margin: 0;
           font-size: 20px;
           width: 100%;
           display: block;
           padding: 20px 6% 21px 6%;
           color: white;
        }
        
       ul li span.down-arrow {
           position: absolute;
           height: 64px;
           width: 50px;
           top: 0;
           right: 0;
           z-index: 2;
           cursor: pointer;
           user-select: none;
        }
        
       .nav-wrap ul li a:not(:only-child){
           width: auto;
           display: inline-block;
        }
        
       .nav-wrap > ul li.has-submenu:before{
           font-family:"Font Awesome 5 Free";
           font-weight:900;
           content:"\f078";
           left:inherit;
           right: 34px;
           font-size:16px;
           margin-top:-7px;
           position:absolute;
           top: 33px;
           color: white;
        }
        
       .nav-wrap ul ul a{
           padding-left: 9%;
           padding-right: 9%;
        }
    }

    /*Nav*/

    @media screen and (max-width: 450px){
       .nav-wrap > ul > li a{
           font-size: 15px;
        }
    }