:root {
    --color1: #0099FF;
    --color2: rgba(0, 153, 204, .0788);
    --color3: rgba(0, 102, 255, .0623);
    --fondo: #66CCFF;
    --titulos: 35px;
    --margenes: 60px;
    --espacios: 10px;
    --espacios-contenido: 45px;

}

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

body {
    font-family: 'sans-serif';
    background: var(--fondo);
}


img {
    vertical-align: top;
}

/* PREOLADER*/
.hidden{
    overflow: hidden;
}

.centrado {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lds-hourglass {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

.lds-hourglass:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 6px;
    box-sizing: border-box;
    border: 26px solid #cef;
    border-color: #cef transparent #cef transparent;
    animation: lds-hourglass 1.2s infinite;
}

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}

/*header*/

header {
    width: 100%;
    height: 600px;
    background: linear-gradient(to bottom, rgba(25, 35, 234, 0.6) 0%, rgba(23, 234, 234, 0.6) 59%,
            rgba(12, 35, 56, 0.65) 100%), url("../img/banner.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    position: relative;
    color: white;
}


nav {
    width: 100%;
    position: fixed;
    z-index:10;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}

.nav1 {
    background: transparent;
    height: 80px;
    color: #fff;
}

.nav2 {
    background: var(--fondo);
    height: 100px;
    color: #000;
}

.contenedor-nav {
    display: flex;
    margin: auto;
    width: 90%;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    height: inherit;
    overflow: hidden;
}

nav .enlaces a {
    display: inline-block;
    padding: 5px 0;
    margin-right: 17px;
    font-size: 17px;
    font-weight: 300;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    color: inherit;
}

nav .enlaces a:hover {
    border-bottom: 3px solid white;
    transition: 0.3s;
}

.logo,
.logo img {
    height: 80px;
}

.icono {
    display: none;
    font-size: 24px;
    padding: 23.5px 20px;
}


.content-snta {
        margin: auto;
        padding: var(--margenes) 0;
        width: 90%;
        max-width: 1000px;
        text-align: center;
        overflow: hidden;
    }


.snta img{
    height: 320px;
    margin-top: 120px;
    margin-left: 300px;
}

.textos>h1 {
    font-size: 85px;
}

.textos>h2 {
    font-size: 30px;
    font-weight: 300;
}

/*MAIN*/

.contenedor {
    margin: auto;
    padding: var(--margenes) 0;
    width: 90%;
    max-width: 1000px;
    text-align: center;
    overflow: hidden;
}

.contenedor h3 {
    font-size: var(--titulos);
    color: white;
    margin-bottom: var(--espacios);
}

.contenedor p {
    font-size: 30px;
    font-weight: 300px;
    color: white;
}

.after::after {
    content: '';
    display: block;
    margin: auto;
    margin-top: var(--espacios);
    width: 100px;
    height: 2px;
    background: white;
    margin-bottom: var(--espacios-contenido);
    font-size: 20px;
}

.card {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.content-card {
    width: 31%;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    overflow: hidden;
    height: 400px;
   
   
}

.people {
    height: 80%;
   }

   .peoples{
       height: 80%;
   }

.content-cards{
    width: 100%;
    height: 300%;
}
.content-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;  

}

.content-cards img{
    width: 40%;
    height: 40%;
    object-fit: cover;  
}

.texto-team {
    height: 20%;
    width: 100%;
    padding: var(--espacios) 0;
    color:white;
}

.texto-teams{
    height: 20%;
    width: 100%;
    padding: var(--espacios) 0;
    color:black;
    font-size: 30px;
}


.texto-team p {
    color: white;
    height: 10%;
    width: 100%;
    padding: var(--espacios) 0;
    font-size: 20px;
}

.about {
    background: url('../img/teclado.jpg');
    height: auto;
}

.formatos {
    display: flex;
    color: white;
    justify-content: space-between;
    margin: auto;
    flex-wrap: wrap;
}
.formatos .caja-formatos img {
    width: 100%;
    max-width: 100px;
    height: auto;
}

.caja-formatos>h4 {
    margin-bottom: var(--espacios);

}

.caja-formatos>p {
    text-align: center;
	

}

.descarga{
    font-size: 25px;
    text-decoration:underline;
    color:red;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.botones-work {
    overflow: hidden;

}

.botones-work li {
    display: inline-block;
    text-align: center;
    margin-left: var(--espacios);
    margin-bottom: var(--espacios-contenido);
    padding: 6px 12px;
    border: 3px solid white;
    list-style: none;
    color: var(--color1);

}

.botones-work li:hover {
    background: var(--color1);
    color: white;
    cursor: pointer;
    text-decoration: none;
}

.botones-work .active {
    background: var(--color1);
    color: white;
    text-decoration: none;
}

.galeria-work {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

}

.galeria-work .cont-work {
    width: 31%;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    height: 300px;
    overflow: hidden;
    margin-bottom: var(--espacios-contenido);

}

.img-work {
    height: 90%;
    width: 100%;
}

.img-work img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.textos-work {
    height: 10%;
}
.botones-work a {
    text-decoration: none;
}

.textos-work h4 {
    line-height: 20px;
    font-weight: 300;
    color: white;
    text-align: center;
    padding: 5px;
}

/*FOOTER*/
footer {
    background: url("../img/teclado.jpg");
}

.marca-logo {
    width: 80%;
    margin: auto;
    margin-bottom: var(--espacios);
}

.marca-logo img {
    width: 100%;
}

.iconos {
    font-size: 60px;
    margin: auto;
    display: flex;
    justify-content: space-around;
    width: 50%;
    height: 40%;
    object-fit: cover;
}

footer p {
    margin-top: var(--espacios);
    font-size: 10px;
}

@media screen and (max-width: 700px) {
    .nav2 {
        color: white;
    }

    .icono {
        display: block;
        cursor: pointer;
    }

    .enlaces {
        position: fixed;
        top: 80px;
        background: #80C9FC;
        left: 0;
        height: 100%;
        transition: 1s;
        width: 0;
        overflow: hidden;
    }

    .enlaces a {
        display: block;
        width: 100%;
        height: 50px;
        padding: 20px;
        text-align: center;
        background: #94C6FF;
        color: white;
    }

    .textos>h1 {
        font-size: 70px;
    }

    .textos>h2 {
        font-size: 35px;
    }

    .content-card {
        width: 48%;
        margin-bottom: var(--margenes);
    }

    :root {
        --margenes: 30px;
    }

}

@media screen and (max-width: 500px) {
    :root {
        --espacios-contenido: 25px;
    }

    .content-card {
        width: 90%;
    }

    .caja-formatos{
        width: 90%;
        margin-bottom: var(--margenes);

    }

    .cont-work{
        width: 85%;
    }

    .marca-logo{
        width: 80%;
    }

    .iconos{
        margin: auto;
    }


}