body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: auto;
    background-color: #F5F4F4!important;
    font-family: Arial,Helvetica,sans-serif!important;
    letter-spacing: 2px;
}

a:hover p{
    text-decoration: none;
}

hr{
    width: 80%;
    border: 2px solid #0C67BE!important;
    border-radius: 50%;
}

h2{
    text-align: center;
}

.centrar{
    text-align: center;
}

.grid{
    display: grid;
}

.fancybox__content {
    padding: 2px!important;
}

.card:hover{
    box-shadow: 10px 10px 15px red!important;
    transition: 1s;
}

.grid-seccionuno p{
    color: white;
    text-decoration: none;
}

.p-black{
    color: black!important;
}

/*INICIO*/
#inicio{
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/fondo.jpg) no-repeat center top/cover;
    color: white;
    background-attachment: fixed;
}

/*PAGINAS WEB*/
.grid-seccionuno{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 10px;
}

/*IMAGOTIPOS*/
.grid-secciondos{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 10px;
}

/*VECTORES*/
.grid-secciontres{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding-bottom: 50px;
}

/*TARJETAS*/
.grid-seccioncuatro{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

/*VIDEO*/
.grid-seccioncinco{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/*MARKETING*/
.grid-seccionseis{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.bg-black{
    background-color: black!important;
}

.bg-rsl{
    background-color: #595b3c!important;
}

.columna{
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*texto btn whatsapp*/
.shake.svelte-19dp4zf, .svelte-19dp4zf{
    bottom: 40px !important;
}

.box.svelte-lyhjhx.svelte-lyhjhx.svelte-lyhjhx a{ 
    display: none;
}

footer h5{
    color: rgba(255,255,255,.5);
}

.ocultar{
    display: none;
}

.mostrar{
    display: block;
}

/*Movil--*/
@media only screen and (min-width: 320px) and (max-width: 576px){
    #inicio{
        padding-top: 80px;
        flex-direction: column;
        align-items: center;
    }

    .foto_perfil{
        width: 160px;
    }

    .morelink {
        text-decoration: underline;
    }

    .encabezado{
        font-size: 1.6rem;
    }

    h2{
        font-size: 1.7rem!important;
        text-align: center;
    }

    h3 {
        font-size: 1rem!important;
    }

    p{
        font-size: 13px;
        text-align: center;
    }

    .logo{
        width: 40px;
    }

    .grid-seccionuno{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        row-gap: 1.5rem;
    }

    .grid-secciondos{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        padding-bottom: 0px;
        row-gap: 1.5rem;
    }

    .grid-secciontres{
        grid-template-columns: 1fr;

    }

    .grid-seccioncuatro{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }

    .grid-seccionseis{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(1, 1fr);
    }

    .card{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        width: 280px;
        height: 420px;
        border-radius: 0 6.25rem!important;
        box-shadow: 10px 10px 15px black!important;
    }

    .at{
        width: 260px;
        margin-left: 10px;
    }

    .elysian,
    .rsl,
    .lu,
    .cuervos,
    .m_cuervos,
    .v_cuervos,
    .f_cuervos,
    .firma,
    .tarjeta1,
    .tarjeta2,
    .edi,
    .f_ads,
    .e_ads{
        width: 250px;
        margin: 0 12px 0 12px;
    }

    .lu,
    .cuervos,
    .edi{
        height: 270px!important;
    }

    .lu{
        margin-top: 50px;
        margin-left: 15px;
    }

    .lu-p{
        color: white;
    }

    .cuervos{
        margin-top: 30px;
        margin-left: 15px;
    }

    .edi{
        margin-top: 50px;
        margin-left: 15px;
    }

    .edi-p{
        margin-top: -33px;
    }

    .m_cuervos,
    .v_cuervos,
    .f_cuervos{
        height: 350px!important;
    }

    .f_ads{
        height: 251px!important;
    }

    .video{
        width: 290px;
    }
    footer{
        padding: 20px 0 20px 0;
    }

    footer h5 {
        font-size: 0.4rem;
        text-align: center;
    }

    .ocultar{
        display: block;
    }
    
    .mostrar{
        display: none;
    }
}

/*Movil-*/
@media screen and (min-width: 368px) and (max-width: 455px) {
    h3{
        font-size: 1.3rem!important;
    }
    #inicio{
        padding-top: 100px;
        flex-direction: column;
        align-items: center;
    }

    .foto_perfil{
        width: 190px;
    }

    .morelink {
        text-decoration: underline;
    }

    .encabezado{
        font-size: 2rem;
    }

    p{
        font-size: 13px;
        text-align: center;
    }

    .logo{
        width: 60px;
    }

    .grid-seccionuno{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        row-gap: 1.5rem;
    }

    .grid-secciondos{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        padding-bottom: 30px;
        row-gap: 1.5rem;
    }

    .grid-secciontres{
        grid-template-columns: 1fr;

    }

    .grid-seccioncuatro{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }

    .grid-seccionseis{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(1, 1fr);
    }

    .card{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        width: 355px;
        height: 470px;
        border-radius: 0 6.25rem!important;
        box-shadow: 10px 10px 15px black!important;
    }

    .at{
        width: 315px;
        margin-left: 20px;
    }

    .elysian{
        margin-left: 60px;
        margin-top: 35px;
    }
    .elysian_p{
        margin-top: 38px;
    }

    .rsl{
        margin-left: 60px;
        margin-top: 128px;
    }
    .rsl_p{
        margin-top: 38px;
    }

    .elysian,
    .rsl,
    .lu,
    .cuervos,
    .m_cuervos,
    .v_cuervos,
    .f_cuervos,
    .firma,
    .tarjeta1,
    .tarjeta2,
    .edi,
    .f_ads,
    .e_ads{
        width: 320px;
        margin: 0 10px 0 10px;
    }

    .lu,
    .cuervos,
    .edi{
        height: 290px!important;
        margin-top: 55px;
    }

    .lu-p{
        color: white;
    }

    .m_cuervos,
    .v_cuervos,
    .f_cuervos{
        height: 350px!important;
    }

    .f_ads{
        height: 251px!important;
    }

    .video{
        width: 340px;
    }
    footer{
        padding: 20px 0 20px 0;
    }

    footer h5 {
        font-size: 0.5rem;
    }

    .ocultar{
        display: block;
    }
    
    .mostrar{
        display: none;
    }
}

/*Movil+*/
@media screen and (min-width: 456px) and (max-width: 767px) {
    #inicio{
        padding-top: 110px;
        flex-direction: column;
        align-items: center;
    }

    .foto_perfil{
        width: 225px;
    }

    .encabezado{
        font-size: 2.5rem;
    }

    p{
        font-size: 14px;
        text-align: center;
    }

    .logo{
        width: 60px;
    }

    .grid-seccionuno{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }
    .grid-secciondos{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        padding-bottom: 30px;
    }

    .grid-secciontres{
        grid-template-columns: 1fr;

    }

    .grid-seccioncuatro{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }

    .grid-seccionseis{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(1, 1fr);
    }

    .at,
    .elysian,
    .rsl,
    .lu,
    .cuervos,
    .m_cuervos,
    .v_cuervos,
    .f_cuervos,
    .firma,
    .tarjeta1,
    .tarjeta2,
    .edi,
    .f_ads,
    .e_ads{
        width: 370px;
        margin: 0 10px 0 10px;
    }

    .f_ads{
        height: 290px!important;
    }

    .video{
        width: 480px;
    }
    footer{
        padding: 20px 0 20px 0;
    }

    footer h5 {
        font-size: 0.8rem;
    }

    .ocultar{
        display: block;
    }
    
    .mostrar{
        display: none;
    }
}

/*Laptop*/
@media screen and (min-width: 1024px) and (max-width: 1439px) {
    #inicio{
        padding-top: 125px;
        flex-direction: column;
        align-items: center;
    }

    .foto_perfil{
        width: 280px;
    }

    .encabezado{
        font-size: 2.5rem;
    }

    .descripcion{
        width: 1200px;
    }

    p{
        font-size: 16px;
        text-align: center;
        margin: 140px;
    }

    h3{
        font-size: 1rem!important;
    }

    .grid-secciontres{
        padding-bottom: 50px;
    }

    .logo{
        width: 70px;
    }

    .card{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        width: 355px;
        height: 470px;
        border-radius: 0 6.25rem!important;
        box-shadow: 10px 10px 15px black!important;
    }

    .at,
    .elysian,
    .rsl,
    .lu,
    .cuervos,
    .m_cuervos,
    .v_cuervos,
    .f_cuervos,
    .firma,
    .tarjeta1,
    .tarjeta2,
    .edi,
    .f_ads,
    .e_ads{
        width: 328px;
        margin: 0 10px 0 10px;
    }

    .at{
        margin-left: 59px;
    }

    .elysian{
        margin-left: 60px;
        margin-top: 35px;
    }
    .elysian_p{
        margin-top: 38px;
    }

    .rsl{
        margin-left: 60px;
        margin-top: 128px;
    }
    .rsl_p{
        margin-top: 38px;
    }

    .lu,
    .cuervos,
    .edi{
        height: 320px!important;
    }

    .lu{
        margin-top: 14px;
        margin-left: 88px;
        width: 243px;
    }
    .lu-p{
        color: white;
    }

    .cuervos{
        margin-top: 23px;
        margin-left: 50px;
    }

    .edi{
        margin-top: 50px;
        margin-left: 65px;
    }
    .edi-p{
        margin-top: -33px;
    }

    .m_cuervos,
    .v_cuervos,
    .f_cuervos{
        height: 350px!important;
    }

    .f_ads{
        height: 290px!important;
    }

    .e_ads{
        height: 292px!important;
    }

    .video{
        width: 720px;
    }

    footer{
        padding: 30px 0 30px 0;
    }

    footer h5 {
        font-size: 1.1rem;
    }
}

/*PC*/
@media (min-width: 1440px) {
    h3 {
        font-size: 1.65rem!important;
    }

    #inicio{
        padding-top: 170px;
        flex-direction: column;
        align-items: center;
    }

    .foto_perfil{
        width: 410px;
    }

    .encabezado{
        font-size: 2.5rem;
    }

    .descripcion{
        width: 1800px;
    }

    p{
        font-size: 20px;
        text-align: center;
        margin: 230px;
    }

    .logo{
        width: 110px;
    }

    .card{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        width: 520px;
        height: 600px;
        border-radius: 0 6.25rem!important;
        box-shadow: 10px 10px 15px black!important;
    }

    .at,
    .elysian,
    .rsl,
    .lu,
    .cuervos,
    .m_cuervos,
    .v_cuervos,
    .f_cuervos,
    .firma,
    .tarjeta1,
    .tarjeta2,
    .edi,
    .f_ads,
    .e_ads{
        width: 480px;
        margin: 0 10px 0 10px;
    }

    .at{
        margin-left: 87px;
    }

    .elysian{
        margin-left: 90px;
        margin-top: 35px;
    }
    .elysian_p{
        margin-top: 38px;
    }

    .rsl{
        margin-left: 87px;
        margin-top: 128px;
    }
    .rsl_p{
        margin-top: 38px;
    }

    .lu,
    .cuervos,
    .edi{
        height: 400px!important;
    }

    .lu{
        margin-top: 45px;
        margin-left: 68px;
    }
    .lu-p{
        color: white;
    }

    .cuervos{
        margin-top: 60px;
        margin-left: 70px;
    }

    .edi{
        margin-top: 95px;
        margin-left: 85px;
    }
    .edi-p{
        margin-top: -33px;
    }
    
    .m_cuervos,
    .v_cuervos,
    .f_cuervos{
        height: 420px!important;
    }

    .f_ads{
        height: 377px!important;
    }

    .video{
        width: 990px;
    }

    footer{
        padding: 40px 0 40px 0;
    }

    footer h5 {
        font-size: 1.3rem;
    }
}