@media screen and (max-width: 1440px)
{
    .xlabonQuienes
    {
        width: 100%;
        margin: 0 auto;
    }
    .xlabonEquipo 
    {
        margin: 0 auto;
    }
    .xlabonEquipo figure {
        padding: 4%;
        margin: 0 auto;
        max-width: 75%;
    }
    .xlabonEquipo h3 {
        font-size: 1.4em;
    }
    .xlabonEquipo h4 {
        font-size: 1.2em;
        margin-bottom: 10px;
    }
    .xlabonEquipo p {
        font-size: 1.1em;
    }
    .scrollLink {
        top: 90%;
        left: 90%;
    }
}
@media screen and (max-width: 1280px) 
{
    #xlab {
        margin-top: 0;
    }
    #luna {
        margin-top: 68px;
        margin-left: -45px;
    }
}
@media screen and (max-width: 1024px)
{
    .xlabonQuienes
    {
        border-radius: 0;
    }
    .xlabonQuienes article {
        width: 80%;
    }
    .quienes {
        font-size: 1em;
    }
    .xlabonServicios {
        padding: 6% 0;
    }
    .serviciosSs {
        width: 100%;
    }
    .serviciosSs article {
        width: auto;
        flex: 1 1 200px;
        max-width: 280px;
    }
    .serviciosCTA {
        margin-top: 5%;
        margin-bottom: 4%;
    }
}
@media screen and (max-width: 960px) 
{
    #xlab {
        width: 100%;
        left: 0;
    }
    .CTAbutton {
        padding: 2%;
    }
}
@media screen and (max-width: 834px) 
{
    header h3 
    {
        font-size: 1.5em;
    }
    header svg:not(:root).svg-inline--fa
    {
        font-size: 1.5em;
    }
    .burgerMenuContainer {
        display: flex;
    }
    #check {
        display: block;
    }
    nav {
        position: fixed;
        height: fit-content;
        top: 65px;
        left: 0;
        width: 100%;
        background: #9a5c5d;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(100%);
        transition: .65s;
    }

    #check:checked ~ nav {
        transform: translateX(0);
    }

    #check:checked ~ nav a {
        animation: animation .5s ease forwards var(--i);
        color: #FEF2E8;
        width: 100%;
    }
    #check:checked ~ nav a:hover {
        background: #FEF2E8;
        color: #9a5c5d;
    }

    #xlab {
        left: 3%;
        margin-top: -12px;
    }
    section.xlabonIntro {
        display: none;
        height: 32vh; 
    }
    .xlabonContenido {
        display: flex;
    }
    #xlabon {
        font-size: 4em;
    }
    #xlabon .flecha{
        top: 48%;
    }
    #xlabon .flecha span
    {
        width: 25px;
        height: 25px;
    }

}
@media screen and (max-width: 800px)
{
    header a 
    {
        padding: 0 10px;
    }
    .xlabonContenido
    {
        min-height: 70vh;
    }
}
@media screen and (max-width: 769px)
{
    .quienes {
        padding: 10%;
        font-size: 2em;
    }
    .quienes > p {
        font-size: 0.7em;
    }
    .xlabonQuienes 
    {
        flex-wrap: wrap;
        padding: 50px 60px;
        justify-content: center;
    }
    .xlabonQuienes h2 {
        font-size: 2em;
    }
    .xlabonQuienes figure 
    {
        padding: 0;
        margin: 0 auto 25px;
    }
    .xlabonQuienes article
    {
        width: 100%;
        font-size: 1.1em;
    }
    .xlabonQuienes article > div {
        margin-left: 30px;
    }
    .xlabonServicios .seccionesRedes {
        font-size: 2em;
    }
    .xlabonServicios h2 {
        margin: 6% auto;
    }
    .serviciosSs article {
        width: auto;
        flex: 1 1 200px;
        max-width: 320px;
    }
    .serviciosSs article div i {
        font-size: 3.5em;
        color: #00628b;
    }
    .serviciosSs article div h3{
        font-size: 1.3em;
        margin: 3% 0;
    }
    .serviciosCTA {
        line-height: 1.5em;
        margin-left: 5%;
        margin-right: 5%;
    }
    /* .CTAbutton a, .CTAbutton a i {
        font-size: 1.7em;
    } */
    .xlabonClientes {
        margin: 6% auto;
    }
    .clientesLogos {
        width: 100%;
        padding: 2% 4%;
    }
    .clientesLogos > div {
        width: 40%;
    }
    .clientesLogos div img {
        width: 100%;
    }
    section.xlabonIntro2 img {
        object-fit: none;
    }
    .xlabonClientes h2 {
        font-size: 1.8em;
        margin-top: 30px;
    }
    .scrollLink 
    {
        left: 86%;
    }
    footer {
        font-size: 1.3em;
    }
} 

@media screen and (max-width: 600px)
{
    header {
        padding: 0;
        position: fixed;
        top: -5px;
    }
    header a {
        padding-left: 2rem;
    }

    #xlabon 
    {
        margin-top: 33%;
        object-fit: scale-down;
        font-size: 5em;
    }
    #xlabon .xlabonTitulo {
        font-size: 0.4em;
    }
    #xlabon .flecha
    {
        top: 77%;
    }
    #xlabon .flecha span
    {
        width: 30px;
        height: 30px;
    }
    .serviciosSs article {
        width: auto;
        flex: 1 1 240px;
        max-width: 360px;
    }
    .xlabonProyectosRecientes ul
    {
        display: initial;
    }
    .xlabonProyectosRecientes ul li
    {
        width: 100%;
    }

    .xlabonQuienes {
        background: #efefef;
    }
    .xlabonQuienes article {
        width: 100%;
        text-align: center;
        display: block;
    }
    .xlabonQuienes figure 
    {
        margin: 0 auto 50px;
    }
    .xlabonQuienes figure img {
        box-shadow: -38px 53px 0 #9a5c5d;
    }
    .xlabonQuienes article > div {
        margin: 0 auto;
        width: 77%;
    }
    .xlabonServicios .seccionesRedes {
        text-align: center;
    }
    .serviciosCTA {
        margin-top: 10%;
        margin-bottom: 8%;
    }
    .CTAbutton a, .CTAbutton a svg:not(:root).svg-inline--fa {
        font-size: 1.3em;
    }
    .CTAbutton {
        width: 250px;
        padding: 3%;
        margin: 11% auto;
    }
    .clientesLogos {
        margin: 0;
    }
    .clientesLogos > div {
        width: 50%;
    }
}
@media screen and (max-width: 428px)
{
    header h3 {
        font-size: 1.3em;
    }
    header a {
        padding: 0 20px;
    }
    .xlabonContenido 
    {
        min-height: 100vh;
    }
    section.xlabonIntro {
        height: 23vh;
    }
    #xlabon {
        margin-top: 27%;
    }
    #xlabon .flecha
    {
        top: 70%;
    }
    #xlabon .flecha span
    {
        width: 20px;
        height: 20px;
        border-color: #939496;
    }
    #xlabon 
    {
        font-size: 3em;
    }
    .quienes > p {
        font-size: 0.6em;
        line-height: 1.7em;
    }
    .xlabonQuienes {
        max-width: 100%;
        padding: 50px 10px;
    }
    .xlabonQuienes article {
        width: 90%;
    }
    .xlabonQuienes h2 {
        font-size: 1.5em;
    }
    .xlabonQuienes p {
        margin-bottom: 10px;
    }
    .xlabonServicios .seccionesRedes, .xlabonEquipo .seccionesRedes {
        font-size: 2em;
    }
    .xlabonServicios h2 {
        font-size: 1.6em;
    }
    .xlabonServiciosTxt p {
        margin-bottom: 20px;
    }
    .serviciosSs {
        width: 100%;
        padding: 10%;
        padding-top: 0;
    }
    .serviciosSs article div svg:not(:root).svg-inline--fa {
        font-size: 3em;
    }
    .serviciosSs article div h3 {
        font-size: 1.4em;
    }
    .serviciosCTA {
        font-size: 1.5em;
    }
    .CTAbutton {
        width: 260px;
    }
    .CTAbutton a, .CTAbutton a svg:not(:root).svg-inline--fa {
        font-size: 1.2em;
        font-weight: 600;
        letter-spacing: 1px;
    }
    .xlabonClientes h2 {
        font-size: 1.5em;
    }
    .clientesLogos > div {
        width: 48%;
        padding: 0;
    }
    .scrollLink 
    {
        top: 84%;
        left: 80%;
    }
    footer {
        font-size: 1.2em;
        padding: 2em;
        line-height: 1.4em;
    }
}
@media screen and (max-width: 375px)
{
    header h3 {
        font-size: 1.1em;
    }
    #xlabon .flecha 
    {
        top: 90%;
    }
    .xlabonQuienes article {
        width: 100%;
    }
    .serviciosCTA {
        margin-left: 7%;
        margin-right: 7%;
    }
    .xlabonQuienes article > div {
        width: 80%;
    }
    footer 
    {
        padding: 2em 0;
    }
    .copy
    {
        font-size: .8em;
    }
    .scrollLink {
        left: 76%;
    }
}
@media screen and (max-width: 352px)
{
    #xlabon
    {
        font-size: 2.5em;
    }
}
@media screen and (max-width: 320px)
{
    #xlabon
    {
        font-size: 2.5em;
    }
}