@media (min-width: 320px) {
    .bloque-inteligencia {
        font-size: 2.3em;
    }
}
@media (min-width: 480px) {
    .hero-area .hero-arrow{
        grid-area: 1 / 7 / 2 / 8;
    }
    .hero-area .hero-black {
        grid-area: 1 / 1 / 5 / 13;
    }
    .hero-logo {
        grid-area: 5 / 10 / 6 / 12;
        margin-right: -10px;
    }
    .hero-area .hero-white {
        grid-area: 7 / 1 / 11 / 13;
    }
    .hero-area .hero-black .hero-black-block h1{
        font-size: 4em;
    }
    .hero-area .hero-black .hero-black-block h2{
        font-size: 1.5em;
    }
    .hero-area .hero-black .hero-black-block h3{
        font-size: 4em;
    }
    .big-text-div-1 h1 {
        font-size: 4em;
        letter-spacing: -5px;
    }
    .big-text-div-1 .replace-by-line {
        font-size: 4em;
        letter-spacing: -1px;
    }
    .bloque-pre-solucion .content .carrousel .item {
        font-size: 1.5em;
    }
    .bloque-numeros .item .numero{
        font-size: 4em;
        letter-spacing: -1px;
    }
    .bloque-numeros .item .titulo{
        font-size: 4em;
        letter-spacing: -1px;
    }
    .bloque-clientes .inicio .titulo{
        font-size: 3.5em;
        line-height: 0.8em;
    }
    .bloque-pastilla .content .top .texto-big{
        font-size: 3em;
        letter-spacing: -5px;
    }
    .bloque-tech .content .titulo {
        font-size: 3em;
    }
    .bloque-think .content .titulo{
        font-size: 7em;
    }
    .bloque-think .content .pie{
        font-size: 2em;
    }
    .bloque-tech .content .sub1{
        font-size: 1em;
    }
    .bloque-tech .content .sub2{
        font-size: 1em;
    }
    .bloque-tech .content .opciones .item.is-active > .abierto::after{
        content: "";
    }
    .bloque-tech .content .ampliaciones {
        grid-area: 3 / 1 / 10 / 7;
    }
    .bloque-tech .content .opciones {
        grid-area: 4 / 7 / 10 / 12;
    }
    .bloque-tech .content .opciones .base .base-titulo .sub {
        font-size: 0.7rem;
    }
    .bloque-tech .content .opciones .base{
        font-size: 2em;
    }
    .bloque-tech .content .opciones .base::before{
        height: 3px;
    }
    .bloque-premios .top {
        flex-direction: row;
    }
    .bloque-premios .top .text-big{
        font-size: 2em;
        margin-bottom: 0;
    }
    .bloque-premios .top .text {
        font-size: 1em;
        margin-bottom: 0;
    }
    .bloque-premios .titulo {
        font-size: 5em;
    }
    .bloque-inteligencia {
        font-size: 3.5em;
    }
}
@media (min-width: 768px) {
    .bloque-pastilla{
        margin-top: 0;
    }
    .bloque-lab .bottom .card .courtain{
        height: 100%;
    }
    .bloque-veinte{
        margin-top: 180px;
    }
    .hero-scroll-line {
        grid-area: 8 / 7 / 11 / 8;
    }
    .hero-scroll-text {
        grid-area: 6 / 7 / 8 / 8;
    }
    .hero-area {
        width: 100vw;
    }
    .hero-area .hero-black {
        grid-area: 1 / 1 / 8 / 7;
    }
    .hero-area .hero-white {
        grid-area: 7 / 7 / 11 / 12;
        margin: 0 0 0 60px;
    }
    .hero-logo {
        grid-area: 1 / 10 / 4 / 12;
    }
    .hero-scroll-text {
        grid-area: 6 / 7 / 8 / 8;
        display: flex;
    }
    .hero-scroll-line {
        grid-area: 8 / 7 / 11 / 8;
        display: block;
    }
    .hero-area .hero-arrow {
        grid-area: 1 / 7 / 2 / 8;
        display: block;
    }
    .hero-area .hero-black .hero-black-block h1{
        font-size: 4em;
    }
    .hero-area .hero-black .hero-black-block h2{
        font-size: 1.5em;
    }
    .hero-area .hero-black .hero-black-block h3{
        font-size: 4em;
    }
    .big-text-div-1 h1 {
        font-size: 7em;
    }
    .big-text-div-1 .replace-by-line {
        font-size: 7em;
    }
    .bloque-pre-solucion .content .titulo {
        font-size: 7em;
    }
    .bloque-pre-solucion .content .subtitulo {
        font-size: 2em;
    }
    .bloque-pre-solucion .content .carrousel .item {
        font-size: 2em;
    }
    .bloque-solucion {
        padding: 20px;
        padding-top:100px;

    }
    .bloque-solucion .content {
        width: unset;
        padding-left: 200px;
        padding-right: unset;
    }
    .bloque-solucion .left{
        font-size: 0.5em;
        display: flex;
    }
    .bloque-solucion .item-key .sub-text{
        font-size: 1em;
        margin-left: 50px;
    }
    .bloque-solucion .item-key .index{
        font-size: 1em;
    }
    .bloque-solucion .left .texto{
        line-height: 0.8em;
    }
    .bloque-solucion .left .barras{
        margin-bottom: 30px;
    }

    .bloque-solucion .item-key .items .item:hover .long {
        bottom: 0;
    }
    .bloque-solucion .item-key .items .item {
        width: 100px;
        height: 150px;
        flex: unset;
    }
    .bloque-solucion .item-key .items .item .long {
        display: block;
        font-size: 0.7em;
    }
    .bloque-solucion .relleno{
        display: none;
    }
    .bloque-post-solucion .content .titulo {
        font-size: 5em;
        letter-spacing: -2px;
    }
    .bloque-numeros{
        margin-top: 200px;
        margin-bottom: 200px;
    }
    .bloque-numeros .item {
        padding: 40px 20px;
    }
    .bloque-numeros .item .numero{
        font-size: 6em;
        letter-spacing: -5px;
    }
    .bloque-numeros .item .titulo{
        font-size: 6em;
        letter-spacing: -5px;
    }
    .bloque-numeros .item .texto{
        font-size: 1.5em;
    }
    .bloque-numeros .item .texto{
        position: absolute;
        top: 20px;
        right: 20px;
        width: 30%;
        text-align: right;
        font-size: 1em;
        margin-top: 0;
    }
    .bloque-clientes .inicio .titulo{
        font-size: 8em;
    }
    .bloque-pre-nosotros{
        margin-top: 300px;
    }
    .bloque-pastilla .content {
        height: 100vh;
    }
    .bloque-pastilla .content .top .texto-big{
        font-size: 4.5em;
        letter-spacing: -5px;
    }
    .bloque-pastilla .content .back{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: var(--fourthteenColor);

        /*-webkit-mask-image:
            linear-gradient(#fff 0 0),
            url("../assets/svg/mask-shape.svg");
        -webkit-mask-repeat:
            no-repeat,
            no-repeat;
        -webkit-mask-size:
            100% 100%,
            33vw 50vh;
        -webkit-mask-position:
            0 0,
            right 20px bottom 20px;
        -webkit-mask-composite: xor;

        mask-image:
            linear-gradient(#fff 0 0),
            url("../assets/svg/mask-shape.svg");
        mask-repeat:
            no-repeat,
            no-repeat;
        mask-size:
            100% 100%,
            33vw 50vh;
        mask-position:
            0 0,
            right 20px bottom 20px;
        mask-composite: exclude;*/
        z-index: -1;
    }
    .bloque-pastilla .content .top {
        flex-direction: row;
    }


    .bloque-pastilla .content .bottom{
        flex-direction: row;
        align-items: flex-end;
    }

    .bloque-lab .top {
        padding: 50px;
    }
    .bloque-lab .bottom {
        margin-top: 50px;
        flex-direction: row;
    }
    .bloque-lab .bottom .card{
        flex: 1;
        width: unset;
    }
    .bloque-lab .bottom .card.right {
        margin-top: 50px;
    }
    .bloque-think .content .titulo{
        font-size: 11em;
    }
    .bloque-tech .content .titulo {
        grid-area: 1 / 1 / 3 / 8;
        font-size: 3em;
    }
    .bloque-tech .content .sub1{
        grid-area: 4 / 1 / 5 / 4;
        font-size: 1.5em;
    }
    .bloque-tech .content .sub2{
        grid-area: 4 / 5 / 5 / 8;
        font-size: 1.5em;
    }
    .bloque-tech .content .text-mini{
        grid-area: 1 / 8 / 4 / 12;
        font-size: 1.2em;
    }
    .bloque-tech .content .opciones {
        grid-area: 4 / 8 / 10 / 12;
    }
    .bloque-tech .content .ampliaciones {
        grid-area: 3 / 1 / 10 / 8;
    }
    .bloque-tech .content .ampliaciones .item .cuerpo {
        font-size: 1.5em;
    }
    .bloque-inteligencia {
        font-size: 4em;
        margin-top: 200px;
    }
}
@media (min-width: 1024px) {
    .hero-area .hero-black .hero-black-block h1{
        font-size: 6em;
    }
    .hero-area .hero-black .hero-black-block h2{
        font-size: 2em;
    }
    .hero-area .hero-black .hero-black-block h3{
        font-size: 6em;
    }
    .bloque-pre-solucion .content button {
        left: 10%;
    }
    .bloque-pre-solucion .content .titulo {
        font-size: 8em;
    }
    .bloque-solucion .content {
        padding-left: 250px;
    }
    .bloque-solucion .left{
        font-size: 0.75em;
    }
    .bloque-solucion .item-key .sub-text{
        font-size: 1.2em;
    }
    .bloque-solucion .item-key .index{
        font-size: 2em;
    }
    .bloque-solucion .item-key .items .item {
        width: 150px;
        height: 150px;
    }
    .bloque-solucion .item-key .items .item .long {
        font-size: 1em;
    }
    .bloque-post-solucion{
        height: 100vh;
    }
    .bloque-post-solucion .content .titulo {
        margin-bottom:unset;
    }
    .bloque-post-solucion .content .bottom .logo{
        height: 100px;
    }
    .bloque-pre-clientes{
        margin-top:300px;
    }
    .bloque-clientes .comments .panel.left .texto {
        margin-left: 100px;
    }
    .bloque-clientes .comments .panel.right .texto {
        margin-righ: 100px;
    }
    .bloque-clientes .comments {
        flex-direction: row;
    }
    .bloque-pastilla .content .bottom .titulo{
        padding: 150px;
    }
    .bloque-tech .content .titulo {
        grid-area: 1 / 1 / 3 / 5;
        font-size: 3em;
    }
    .bloque-tech .content .sub1{
        grid-area: 1 / 5 / 3 / 8;
        font-size: 1.5em;
    }
    .bloque-tech .content .sub2{
        grid-area: 3 / 5 / 4 / 8;
        font-size: 1.5em;
    }
    .bloque-tech .content .text-mini{
        grid-area: 1 / 8 / 4 / 12;
        font-size: 1.2em;
    }
    .bloque-tech .content .opciones {
        grid-area: 4 / 8 / 10 / 12;
    }
    .bloque-tech .content .ampliaciones {
        grid-area: 4 / 1 / 10 / 8;
        padding: 20px;
    }
    .bloque-solucion-2{
        max-width: 900px;
    }

}
@media (min-width: 1400px) {

    .hero-area .hero-black .hero-black-block h1{
        font-size: 8em;
    }
    .hero-area .hero-black .hero-black-block h2{
        font-size: 3em;
    }
    .hero-area .hero-black .hero-black-block h3{
        font-size: 8em;
    }
    .big-text-div-1 h1 {
        font-size: 9em;
    }
    .big-text-div-1 .replace-by-line {
        font-size: 9em;
    }
    .bloque-pre-solucion .content button {
        left: 20%;
    }
    .bloque-solucion .content {
        padding-left: 300px;
    }
    .bloque-solucion .left{
        font-size: 1em;
    }
    .bloque-solucion .item-key .sub-text{
        font-size: 1.5em;
    }
    .bloque-numeros .item .numero{
        font-size: 10em;
    }
    .bloque-numeros .item .titulo{
        font-size: 10em;
    }
    .bloque-numeros .item .texto{
        font-size: 3em;
    }
    .bloque-solucion-2{
        max-width: 1600px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(1, 1fr);
    }
}
@media (min-width: 768px) and (max-height:780px) {
    .hero-area .hero-white {
        grid-area: 6 / 7 / 11 / 12;
    }
}
@media (min-width: 768px) and (max-height:630px) {
    .hero-area .hero-white {
        grid-area: 5 / 7 / 11 / 12;
    }
}
@media (max-width: 767px) and (max-height:750px) {
    .hero-area .hero-white {
        grid-area: 7 / 1 / 11 / 13;
    }
    .hero-area .hero-white .hero-buttons{
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(1, 1fr);
    }
}
@media (max-width: 767px) and (max-height:590px) {
    .hero-area .hero-white {
        grid-area: 6 / 1 / 11 / 13;
    }
    .hero-area .hero-white .hero-buttons{
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(1, 1fr);
    }
}
@media (max-width: 480px) and (max-height:750px) {
    .hero-area .hero-white {
        grid-area: 7 / 1 / 11 / 13;
    }
    .hero-area .hero-white .hero-buttons{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}
@media (max-width: 480px) and (max-height:645px) {
    .hero-area .hero-white {
        grid-area: 6 / 1 / 11 / 13;
    }
    .hero-area .hero-white .hero-buttons{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}
@media (max-width: 360px) and (max-height:720px) {
    .hero-area .hero-white {
        grid-area: 6 / 1 / 11 / 13;
    }
    .hero-area .hero-white .hero-buttons{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}
@media (max-width: 360px) and (max-height:595px) {
    .hero-area .hero-white {
        grid-area: 5 / 1 / 11 / 13;
    }
    .hero-area .hero-white .hero-buttons{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
}

@media (max-width: 767px){
    .bloque-tech .content .sub1{
        height: 100px;
    }
}
@media (max-width: 559px){
    .bloque-solucion-2 {
        display: flex;
        flex-direction: column;
    }
    .bloque-solucion-2 .solu-card .grupo-detail{
        height: auto;
        margin-bottom: 20px;

    }
    .bloque-solucion-2 .solu-card {

        /*padding-bottom: 5px;*/
    }
}
@media (max-width: 480px){
    .bloque-tech .content .opciones {
        grid-area: 4 / 1 / 10 / 12;
    }
    .bloque-tech .content .opciones .base .logo img {
        width: 50px;
        max-height: 30px;
    }
    .bloque-tech .content .ampliaciones {
        grid-area: 4 / 1 / 10 / 11;

    }
}
@media (max-height: 760px) {
    .bloque-tech .content{
        padding-top: 20px;
    }
    .bloque-tech .content .ampliaciones{
        grid-area: 2 / 1 / 10 / 8;
    }
}
@media (max-height: 760px) and (max-width: 480px){
    .bloque-tech .content .ampliaciones{
        grid-area: 2 / 1 / 10 / 11;
    }
}