.principal_cont_banner{ /*esto maneja el alto del contenedor*/
    height: 100vh; /*Toma el alto total de la pantalla*/
    background-attachment: fixed; /*Mantiene la imagen de fondo fija*/
    background-position: center; /*Mantiene la imagen centrada*/
    background-repeat: no-repeat; /*para que la imagen de fondo no se repita*/
    background-size: cover ; /*Se le indica que tome el valor original de la imagen*/
}

.principal_sombra{
    position: absolute ;
    left: 50%; /*que flote del lado izquierdo un 50%*/
    top: 50%; /*que flote a lo altoun 50%*/
    -ms-transform: translate(-50%,-50%); /*esto es para que funcione en otros navegadores*/
    -webkit-transform: translate(-50%,-50%); /*esto es para que funcione en otros navegadores*/
    transform: translate(-50%,-50%); /*se le indica que se traslada 50% de izq a derecha y 50% de arriba ha abajo*/
    padding: 20px; /*que el contenido esté separado de los bordes*/
    width: 80%; /*que el ancho del sombreado*/
    text-align: center; /*que el texto se alinie de forma central*/
    background-color: rgba(0, 0, 0, 0.6); /*para dar un poco de sombra*/
    color: #ffff; /*para el color de la letra que sea blanco*/
    margin:auto;
}

.principal_sombra hr{ /*Esto es cambiar la linea en principal_sombra hr*/
    border-top: 1px solid #fff;
}

.principal_sombra h1{ /*Esto cambia el tamaño de letra en el contenedor principal en los h1*/
    font-size: 4vw;
    margin-bottom: 10px;
}

.principal_sombra p{
    font-size: 2vw;
    margin-bottom: 10px;
}

.principal_cont_banner link{
    margin: 15px;
    position: relative;
}

.principal_cont_banner_link a{
    position: relative;
    display: inline-block; /*Esto es para que los link tenga un espacion lineal entre ellos*/
    color: #fff;
    text-decoration: none; /*para que no tenga ningun color de decoración*/
    border: 1px solid #fff;
    padding: 1px;
    margin-bottom: 5px;
    width: 150px; /*esto es para que tenga un ancho estatico*/
}
/*Aqui empieza la animación de la sección principal*/
.principal_cont_banner_link a:hover{ /*Esto es para agregar un sombreado cuando pone el mouse */
    background-color: #111;
    color:#111;
}

.principal_banner_link{
    opacity: 0;
    animation: principal_keyframes_aparecer_de_arriba 1s;
    -webkit-animation: principal_keyframes_aparecer_de_arriba 1s;
    animation-fill-mode:forwards;
}

.principal_banner_link_1{
    opacity: 0;
    animation: principal_keyframes_aparecer_de_arriba 1s;
    -webkit-animation: principal_keyframes_aparecer_de_arriba 1s;
    animation-fill-mode:forwards;
    animation-delay: 0.5s;
}


.principal_banner_link_2{
    opacity: 0;
    animation: principal_keyframes_aparecer_de_arriba 1s;
    -webkit-animation: principal_keyframes_aparecer_de_arriba 1s;
    animation-fill-mode:forwards;
    animation-delay: 1s;
}
/*Aqui termina la animación de la sección principal*/

.nosotros{
    height: 100vh; /*Toma el alto total de la pantalla*/
    background-attachment: fixed; /*Mantiene la imagen de fondo fija*/
    background-position: center; /*Mantiene la imagen centrada*/
    background-repeat: no-repeat; /*para que la imagen de fondo no se repita*/
    background-size: cover ; /*Se le indica que tome el valor original de la imagen*/
    position: relative;
    padding: 10%;

}

.nosotros_sombra{
    position: absolute ;
    left: 50%; /*que flote del lado izquierdo un 50%*/
    top: 50%; /*que flote a lo altoun 50%*/
    -ms-transform: translate(-50%,-50%); /*esto es para que funcione en otros navegadores*/
    -webkit-transform: translate(-50%,-50%); /*esto es para que funcione en otros navegadores*/
    transform: translate(-50%,-50%); /*se le indica que se traslada 50% de izq a derecha y 50% de arriba ha abajo*/
    padding: 20px; /*que el contenido esté separado de los bordes*/
    width: 80%; /*que el ancho del sombreado*/
    text-align: center; /*que el texto se alinie de forma central*/
    background-color: rgba(0, 0, 0, 0.6); /*para dar un poco de sombra*/
    color: #ffff; /*para el color de la letra que sea blanco*/
    margin:auto;
}


.nosotros_sombra hr{ /*Esto es cambiar la linea en el contenerdor sombra hr*/
    border-top: 1px solid #fff;
}

.nosotros_sombra h2{ /*Esto cambia el tamaño de letra en el contenedor en los h1*/
    font-size: 4vw;
    margin-bottom: 10px;
}

.nosotros_sombra p{
    font-size: 2vw;
    margin-bottom: 10px;
}

/*
.servicios{
    height: 100vh;
    width: 100%;
    background-color: rgba(1, 1, 1, 0.7);
    text-align: center;
    position: relative;
    color: #fff;
}
*/

.servicios{
    height: 100vh; /*Toma el alto total de la pantalla*/
    background-attachment: fixed; /*Mantiene la imagen de fondo fija*/
    background-position: center; /*Mantiene la imagen centrada*/
    background-repeat: no-repeat; /*para que la imagen de fondo no se repita*/
    background-size: cover ; /*Se le indica que tome el valor original de la imagen*/
    position: relative;
    padding: 2%;
    color:#fff;
}
.servicios h2{
    font-size: 4vw;
    margin-bottom: 10px;
}

.servicios h3{
    font-size: 2vw;
    margin-bottom: 10px;
}

.servicios p{
    font-size: 1vw;
    margin-bottom: 10px;
}