@font-face {
    font-family: 'cinzel';
    src: url('../fonts/CinzelDecorative-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'italiana';
    src: url('../fonts/Italiana-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
}

h1 {
    font-size: 9vw;
}

.a_center {
    text-align: center !important;
    align-items: center !important;
}


/* VAR */

:root {
    --f1: #ffffff;
    --f2: #f8f8f8;
    --f3: #282828;
    --f4: #304BB2;
    --t1: #ffffff;
    --t2: rgba(0, 0, 0, 1);
    --b1: #ffffff;
    --b2: rgba(0, 0, 0, 1);
    --tt1: 0.7vw;
    --tt2: 1vw;
    --tt3: 1.5vw;
    --tt4: 2vw;
    --tt4: 2.5vw;
}

*::selection {
    background-color: rgb(109 158 70 / 10%);
    /* text-shadow: 0vw 0vw 0.3vw white; */
    /* color: var(--t1); */
}


/* LARGE */

@media screen and (min-width:976px),
print {
    body {
        position: relative;
        background-size: cover;
        /* background-image: url(../images/if.png); */
        background-repeat: repeat-x;
        /* background-position: 100% top; */
        /* text-align: center; */
    }
    .popupKO {
        width: 0vw;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.3);
        position: fixed;
        top: 0;
        left: -110vw;
        z-index: 9999;
        transition: 0.5s;
    }
    .popupOK {
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(0.3vw);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        transition: 0.5s;
    }
    .pp_i {
        margin-top: 1.5vw;
        max-width: 90vw;
        max-height: 80vh;
        border-radius: 0.9vw;
        /* box-shadow: 0vw 0.5vw 1.5vw 0vw rgba(0, 0, 0, 0.4); */
        transition: all 0.3s;
    }
    .pp_i:hover {
        box-shadow: 0vw 0.5vw 1.5vw 0.2vw var(--f2);
        transition: all 0.3s;
    }
    .sup {
        /* border: solid red; */
        position: fixed;
        /* background-color: white; */
        width: 5vw;
        height: 5vw;
        right: 1vw;
        z-index: 100;
        bottom: -20vw;
        border-radius: 50%;
        box-shadow: 0vw 0.3vw 0.3vw rgb(0 0 0 / 30%);
    }
    .supKO {
        transition: bottom 1s;
        bottom: -20vw;
    }
    .supOK {
        transition: bottom 1s;
        bottom: 1vw;
    }
    .sup_im {
        opacity: 0.8;
        transition: all 1s;
        background-image: url(../images/scrollto.png);
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .sup_im:hover {
        transition: all 1s;
        opacity: 1;
    }
    .upHeaderAir {
        width: 100%;
        height: 6vw;
        overflow: hidden;
    }
    .upHeader {
        /* backdrop-filter: blur(0.3vw); */
        width: 100%;
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        /* height: 10vw; */
        z-index: 150;
        display: inline-block;
    }
    .z_logo {
        background-image: url(../images/logohead.png);
        position: absolute;
        left: 3%;
        top: 2vw;
        height: 5vw;
        width: 17%;
    }
    .menuSdModal {
        display: none;
    }
    /* z */
    .dc1up {
        width: 100%;
        /* border: solid red; */
        position: relative;
        height: 7vw;
        transition: all 0.3s;
        overflow: hidden;
    }
    .dc1dw {
        overflow: hidden;
        width: 100%;
        /* border: solid red; */
        position: relative;
        height: 4.5vw;
        background-color: rgb(48 75 178 / 98%);
        transition: all 0.3s;
        box-shadow: 0vw 0.5vw 0.5vw rgb(0 0 0 / 15%);
        /* backdrop-filter: blur(0.3vw);*/
    }
    .dc2up {
        position: absolute;
        left: 10vw;
        top: 1vw;
        width: 10vw;
        height: 5vw;
        /* border: solid blue; */
        background-image: url(../images/logo_mix.png);
        background-position: center top;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: top 0.5s, background 2s;
    }
    .dc2dw {
        position: absolute;
        left: 10vw;
        top: 0vw;
        width: 10vw;
        height: 4.5vw;
        /* border: solid blue; */
        background-image: url(../images/logo_mix.png);
        background-position: center bottom;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: top 0.5s, background 2s;
    }
    .dc2dw:hover {
        background-size: 105%;
        transition: top 0.5s;
    }
    .dc3up {
        font-size: 1.33vw;
        position: absolute;
        right: 10vw;
        top: 1vw;
        color: white;
        transition: all 0.2s;
    }
    .dc3dw {
        font-size: 1.33vw;
        position: absolute;
        right: 10vw;
        top: 0.2vw;
        /* font-weight: bold; */
        color: white;
        transition: all 0.2s;
    }
    .dc5 {
        cursor: pointer;
        float: left;
        padding: 1vw;
        border-radius: 0.3vw;
        transition: all 0.3s;
    }
    .dc5:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transition: all 0.3s;
    }
    .dc5ok {
        cursor: pointer;
        float: left;
        padding: 1vw;
        border-radius: 0.3vw;
        transition: all 0.3s;
        border-bottom: 0.5vw solid rgba(255, 255, 255, 0.5);
    }
    /* slider */
    .dc6 {
        overflow: hidden;
        width: 100%;
        background-color: var(--f4);
        height: 50vw;
        display: inline-block;
        position: relative;
    }
    .sld_line {
        position: absolute;
        top: 0vw;
        left: 0vw;
        /* dyn*/
        width: 7000vw;
        height: 100%;
        position: relative;
        /* border: solid red; */
        transition: 1s;
    }
    .sld_item {
        position: relative;
        width: 100vw;
        height: 100%;
        float: left;
        /* border: solid greenyellow; */
    }
    .sld_txt {
        position: absolute;
        width: 33vw;
        left: 10vw;
        top: 17vw;
        color: white;
        display: inline-block;
    }
    .sld_txt_titulo {
        color: white;
        font-size: 3vw;
        line-height: 3.3vw;
        font-weight: bold;
        transition: all 0.2s;
    }
    .sld_txt_det {
        margin-top: 2vw;
        font-size: 1.1vw;
        line-height: 1.8vw;
        transition: all 0.2s;
    }
    .sld_shape {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .sld_btn {
        font-size: 1.3vw;
        color: white;
        /* border: solid 0.19vw rgba(255, 255, 255, 0.9); */
        border-radius: 77vw;
        padding: 0.8vw;
        padding-left: 3vw;
        padding-right: 3vw;
        margin-top: 1vw;
        cursor: pointer;
        color: white;
        /* border: solid 0.19vw var(--f4); */
        background-color: var(--f4);
        transition: all 0.3s;
    }
    .sld_btn:hover {
        /* letter-spacing: 0.2vw; */
        /* text-shadow: 0vw 0.3vw 1vw rgb(9, 9, 6); */
        transition: all 0.3s;
        box-shadow: 0vw 0.5vw 0.5vw rgba(0, 0, 0, 0.3);
        background-color: #23398b;
    }
    .sld_video {
        width: 100%;
        height: 100%;
        display: grid;
        overflow: hidden;
        justify-content: center;
        /* border: solid black; */
        object-fit: cover;
    }
    .sld_video video {
        /* object-fit: cover; */
        /* border: yellow solid; */
        /* width: 160vw; */
        /* height: 100vh; */
        width: 100vw;
        /* height: 100%; */
        text-align: center;
        /* background-size: cover; */
    }
    .sld_bar {
        position: absolute;
        bottom: 2vw;
        width: 60vw;
        left: 20vw;
        display: inline-block;
        text-align: center;
    }
    .sld_bar_it {
        cursor: pointer;
        display: inline-block;
        float: left;
        width: 20%;
        /* font-weight: bold; */
        text-align: center;
    }
    .sld_bar_it_txt {
        display: flex;
        /* border: solid yellow; */
        height: 3.3vw;
        /* text-shadow: 0vw 0.5vw 0.5vw black; */
        color: white;
        font-size: 1vw;
        width: 70%;
        margin-left: 15%;
        opacity: 0;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
    }
    .sld_bar_it_line {
        margin-top: 0.2vw;
        /* opacity: 0.3; */
        width: 80%;
        border-radius: 50vw;
        display: inline-block;
        height: 0.1vw;
        background-color: rgba(255, 255, 255, 0.3);
        overflow: hidden;
        text-align: left;
    }
    .sld_bar_it:hover .sld_bar_it_txt {
        opacity: 0.9;
        transition: all 0.3s;
    }
    .sld_bar_it:hover .sld_bar_it_line {
        /* opacity: 0.9; */
        transition: all 0.3s;
    }
    .sld_bar_it_line_play {
        background-color: rgba(255, 255, 255, 0.8);
        width: 100%;
        height: 100%;
        transition: all 8s linear;
    }
    .sld_bar_it_line_stop {
        background-color: rgba(255, 255, 255, 0.8);
        width: 0%;
        height: 100%;
        transition: all 0s linear;
    }
    .dc7 {
        position: relative;
        width: 100%;
        height: 214vw;
        display: inline-block;
        background-color: white;
        overflow: hidden;
        /* border: solid red; */
        scroll-margin: 50vw;
    }
    .dc8_1 {
        position: absolute;
        width: 20vw;
        height: 20vw;
        top: -10vw;
        left: 40vw;
        background-color: var(--f4);
        border-radius: 50%;
        transition: all 1s;
        z-index: 1;
    }
    .dc8_2 {
        position: absolute;
        width: 76vw;
        height: 8vw;
        top: 35.9vw;
        left: 12vw;
        background-color: var(--f4);
        border-radius: 1vw;
        transition: all 1s;
        box-shadow: 0vw 0.8vw 0.8vw rgb(0 0 0 / 50%);
        z-index: 1;
    }
    .dc9 {
        position: absolute;
        width: 20vw;
        text-align: center;
        top: 2.2vw;
        left: 40vw;
        color: white;
        font-size: 2.5vw;
        z-index: 2;
    }
    .dc9sm {
        top: -4vw;
        left: 0;
        z-index: 9;
        position: absolute;
    }
    .dc10_1 {
        width: 100%;
        position: absolute;
        top: 13vw;
        left: 0;
        display: flex;
        justify-content: center;
    }
    .dc10_2 {
        position: relative;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
        width: 13vw;
        height: 17.5vw;
        border-radius: 1vw;
        box-shadow: 0vw 0.7vw 0.9vw rgba(0, 0, 0, 0.15);
        background-repeat: no-repeat;
        background-position: center 3vw;
        background-size: 55%;
        transition: all 0.33s;
    }
    .dc10_2:hover {
        background-size: 200%;
        background-position: center center;
        background-color: var(--f4);
        transition: all 0.33s;
    }
    .dc10_2:hover .dc10_3 {
        top: 7vw;
        color: white;
        transition: all 0.33s;
    }
    .dc10_3 {
        transition: all 0.33s;
        color: #444444;
        width: 80%;
        margin-left: 10%;
        position: absolute;
        top: 11.5vw;
        text-align: center;
        font-size: 1.2vw;
        font-weight: bold;
    }
    .dc10_2_1 {
        background-image: url(../images/i1h.png);
    }
    .dc10_2:hover .dc10_2_1 {
        background-image: url(../images/i1.png);
    }
    .dc10_2_2 {
        background-image: url(../images/i2h.png);
    }
    .dc10_2:hover .dc10_2_2 {
        background-image: url(../images/i2.png);
    }
    .dc10_2_3 {
        background-image: url(../images/i3h.png);
    }
    .dc10_2:hover .dc10_2_3 {
        background-image: url(../images/i3.png);
    }
    .dc10_2_4 {
        background-image: url(../images/i4h.png);
    }
    .dc10_2:hover .dc10_2_4 {
        background-image: url(../images/i4.png);
    }
    .dc10_2_5 {
        background-image: url(../images/i5h.png);
    }
    .dc10_2:hover .dc10_2_5 {
        background-image: url(../images/i5.png);
    }
    .dc11_1 {
        margin-top: 9vw;
        position: absolute;
        top: 33vw;
        left: 0vw;
        width: 100%;
        height: 40vw;
        /* background-color: var(--f4); */
        text-align: center;
        scroll-margin: 4vw;
    }
    .dc11_2 {
        position: absolute;
        top: 16vw;
        left: 0;
        text-align: center;
        width: 100%;
        color: white;
        font-weight: bold;
        font-size: 4vw;
        /* border: solid red; */
    }
    .dc11_3 {
        transition: all 1s;
        position: absolute;
        top: 37.5vw;
        left: 0;
        text-align: center;
        left: 20vw;
        width: 60vw;
        color: white;
        z-index: 1;
        font-weight: bold;
        font-size: 1.2vw;
    }
    .dc11_4 {
        position: absolute;
        top: 29vw;
        /* left: 0; */
        left: 79vw;
        height: 13vw;
        width: 10vw;
        z-index: 1;
        transition: all 1s;
        /* border: solid red; */
        background-position: 0% center;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url(../images/i7.png);
    }
    .dc11_5up {
        background-image: url(../images/i6.jpg);
        background-position: 0% center;
        background-size: 101%;
        background-repeat: repeat-x;
        background-attachment: fixed;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all 0.3s;
    }
    .dc11_5dw {
        background-image: url(../images/i6.jpg);
        background-position: 0vw center;
        background-size: 101%;
        background-repeat: repeat-x;
        /* background-attachment: fixed; */
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all 0.3s;
        animation-name: dc11_5dw_ani;
        animation-duration: 120s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes dc11_5dw_ani {
        0% {
            background-position: 0vw center;
        }
        100% {
            background-position: -100vw center;
        }
    }
    .dc12up {
        position: absolute;
        width: 1vw;
        height: 1vw;
        background-color: var(--f4);
        top: -5vw;
        left: 75vw;
        border-radius: 50%;
        transition: all 1s;
    }
    .dc12dw {
        position: absolute;
        width: 75vw;
        height: 33vw;
        background-color: var(--f4);
        top: -13vw;
        left: 50vw;
        border-radius: 50%;
        transition: all 1s;
    }
    .dc13_0 {
        background-color: var(--f4);
        border-radius: 50%;
        position: absolute;
        left: -50vw;
        top: 110vw;
        width: 200vw;
        height: 62vw;
        transition: all 0.3s;
    }
    .dc13_1 {
        background-image: url(../images/i8.png);
        background-position: center center;
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        left: 13vw;
        top: 80vw;
        width: 74vw;
        height: 62vw;
        transition: all 0.3s;
    }
    .dc13_2 {
        position: absolute;
        top: 118.5vw;
        /* left: 0; */
        left: 23vw;
        height: 16vw;
        width: 7vw;
        z-index: 1;
        /* border: solid red; */
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url(../images/i9.png);
        transition: all 0.3s;
    }
    .dc13_3 {
        position: absolute;
        top: 96vw;
        left: 0;
        text-align: center;
        width: 100%;
        color: white;
        font-weight: bold;
        font-size: 2vw;
    }
    .dc13_3_2 {
        padding-left: 1vw;
        padding-right: 1vw;
        background-color: var(--f4);
        animation-name: dc13_3_2_ani;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        /* animation-timing-function: linear; */
    }
    @keyframes dc13_3_2_ani {
        0% {
            background-color: var(--f4);
        }
        50% {
            background-color: #1d2f77;
        }
        100% {
            background-color: var(--f4);
        }
    }
    .dc13_4_1 {
        position: absolute;
        top: 105vw;
        left: 25vw;
        width: 50vw;
        text-align: center;
        color: white;
        font-weight: bold;
        font-size: 2vw;
        /* border: solid red; */
        display: flex;
        align-items: flex-start;
        justify-content: center;
        text-align: center;
    }
    .dc13_4_2 {
        width: 22%;
        margin-left: 1.5%;
        margin-right: 1.5%;
        text-align: center;
        color: white;
        font-weight: bold;
        font-size: 1.2vw;
        line-height: 1.5vw;
        /* position: relative; */
        /* height: 12vw; */
        /* border: solid red; */
    }
    .dc13_4_3 {
        width: 100%;
        height: 8vw;
        /* border: solid red; */
        display: block;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: auto 65%;
    }
    .dc13_4_4 {
        margin-top: 1vw;
        /* border: solid red; */
        width: 90%;
        display: inline-block;
    }
    .dc14_1 {
        scroll-margin: 7vw;
        position: absolute;
        top: 141vw;
        left: 0;
        text-align: center;
        width: 100%;
        color: white;
        font-weight: bold;
        font-size: 2vw;
    }
    .dc14_2 {
        position: absolute;
        top: 145vw;
        left: 0;
        text-align: center;
        width: 100%;
        color: white;
        /* font-weight: bold; */
        font-size: 1.2vw;
        line-height: 1.5vw;
    }
    .dc14_3 {
        position: absolute;
        top: 150vw;
        left: 35vw;
        width: 30vw;
        height: 52vw;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(../images/i14.png);
        overflow: hidden;
        text-align: center;
        background-color: black;
        overflow: hidden;
        border-radius: 2.9vw;
        box-shadow: 0vw 1vw 1vw rgb(5 8 20 / 36%);
    }
    .dc14_4 {
        display: block;
        width: 27.7vw;
        height: 49vw;
        position: absolute;
        top: 1vw;
        left: 1.25vw;
        margin: 0 auto;
        padding: 0px;
        border: 0px none;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 2vw;
    }
    .dc15 {
        width: 100%;
        display: inline-block;
        position: relative;
        /* height: 20vw; */
    }
    .dc15_1 {
        position: relative;
        background-color: white;
        /* border: solid red; */
        width: 100%;
        display: inline-block;
        position: relative;
        height: 40vw;
        overflow: hidden;
    }
    .dc15_2 {
        background-color: var(--f4);
        /* border: solid red; */
        width: 200vw;
        height: 100vw;
        position: absolute;
        left: -50vw;
        top: 20vw;
        border-radius: 50%;
    }
    .dc15_2_1 {
        background-color: rgb(48 75 178 / 15%);
        /* border: solid red; */
        width: 100vw;
        height: 100vw;
        position: absolute;
        left: -50vw;
        top: 10vw;
        border-radius: 50%;
    }
    .dc15_2_2 {
        background-color: rgb(48 75 178 / 15%);
        /* border: solid red; */
        width: 100vw;
        height: 100vw;
        position: absolute;
        left: -40vw;
        top: 15vw;
        border-radius: 50%;
    }
    .dc15_2_3 {
        background-color: rgb(48 75 178 / 15%);
        /* border: solid red; */
        width: 100vw;
        height: 100vw;
        position: absolute;
        right: -50vw;
        top: 10vw;
        border-radius: 50%;
    }
    .dc15_2_4 {
        background-color: rgb(48 75 178 / 15%);
        /* border: solid red; */
        width: 100vw;
        height: 100vw;
        position: absolute;
        right: -40vw;
        top: 15vw;
        border-radius: 50%;
    }
    .dc15_3 {
        width: 40vw;
        height: 26vw;
        position: absolute;
        left: 30vw;
        top: 0vw;
        /* border: solid red; */
        background-image: url(../images/equipo.png);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .dc15_4 {
        width: 20vw;
        height: 5vw;
        position: absolute;
        left: 40vw;
        top: 25vw;
        /* border: solid red; */
        background-image: url(../images/2cingenieria.png);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .dc15_5 {
        width: 100%;
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        /* margin-top: 37vw; */
        font-size: 1.3vw;
        position: absolute;
        top: 30vw;
        display: flex;
        /* border: solid red; */
        justify-content: center;
        align-items: center;
    }
    .dc15_6 {
        width: 100%;
        /* border: solid red; */
        text-align: center;
        /* margin-top: 3vw; */
        color: rgba(255, 255, 255, 0.7);
        font-size: 1vw;
        position: absolute;
        top: 35vw;
    }
    .dc16 {
        background-color: var(--f4);
        position: relative;
        width: 100%;
        height: 20vw;
        /* border: solid red; */
        display: inline-block;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        animation: dc16_ani 7s;
        animation-timing-function: linear;
        animation-duration: 12s;
        /* margin-bottom: 3.7vw; */
    }
    @keyframes dc16_ani {
        from {
            background-position: center bottom;
        }
        to {
            background-position: center top;
        }
    }
    .dc16_1_1 {
        background-image: url(../images/hd_aplicaciones_mision_critica.jpg);
    }
    .dc16_1_2 {
        background-image: url(../images/hd_facturacion_electronica.jpg);
    }
    .dc16_1_3 {
        background-image: url(../images/hd_integracion_con_medios_de_pago.jpg);
    }
    .dc16_1_4 {
        background-image: url(../images/hd_comercio_online.jpg);
    }
    .dc16_1_5 {
        background-image: url(../images/hd_desarrollo_sitio_web_corporativo.jpg);
    }
    .dc16_2 {
        /* color: white;
        font-size: 3vw;
        line-height: 3.3vw;
        font-weight: bold; */
        display: inline-block;
        /* border: solid red; */
        text-align: center;
        width: 100%;
        margin-top: 10vw;
        position: relative;
        z-index: 1;
    }
    .dc16_3 {
        /* padding-top: 3vw; */
        /* padding-bottom: 3vw; */
        width: 100%;
        height: 144vw;
        background-color: white;
        position: relative;
        /* margin-left: 10%; */
        /* background-color: silver; */
        /* z-index: 2; */
        position: relative;
        overflow: hidden;
        display: inline-block;
    }
    .dc16_4 {
        position: absolute;
        height: 100vw;
        width: 100vw;
        right: -50vw;
        top: 9vw;
        background-color: var(--f4);
        border-radius: 50%;
    }
    .dc16_5 {
        position: absolute;
        height: 107vw;
        width: 107vw;
        right: -53.5vw;
        top: 6vw;
        border: dashed 0.13vw var(--f4);
        border-radius: 50%;
        animation-name: dc16_5_ani;
        animation-duration: 200s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        /**/
    }
    @keyframes dc16_5_ani {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .dc16_6 {
        position: absolute;
        height: 115vw;
        width: 115vw;
        right: -57.5vw;
        top: 2vw;
        border: solid 0.1vw var(--f4);
        border-radius: 50%;
        opacity: 0.5;
    }
    .dc16_7 {
        position: absolute;
        top: 3vw;
        left: 0;
        width: 100%;
        height: 26vw;
        /* border: solid red; */
        display: flex;
        justify-content: center;
        /* perspective: 1px;
        transform-style: preserve-3d; */
    }
    .dc16_8 {
        width: 35%;
        /* border: solid red; */
        margin-right: 3vw;
        margin-left: 5vw;
    }
    .dc16_9 {
        width: 40%;
        position: relative;
        /* border: solid blue; */
        /* transform: translateZ(-3px); */
        perspective: 50vw;
    }
    .dc16_10 {
        margin-top: 5vw;
        margin-bottom: 2vw;
        font-size: 1.8vw;
        line-height: 2vw;
        font-weight: bold;
        color: var(--f4);
        transition: all 0.25s;
        border-radius: 0.5vw;
        display: block;
    }
    .dc16_7:hover .dc16_10 {
        background-color: var(--f4);
        color: white;
        padding: 1vw;
        transition: all 0.25s;
    }
    .dc16_18:hover .dc16_10 {
        background-color: var(--f4);
        color: white;
        padding: 1vw;
        transition: all 0.25s;
    }
    .dc16_11 {
        font-size: 1.1vw;
        line-height: 2vw;
        color: var(--f3);
    }
    .dc16_12 {
        border-radius: 0.55vw;
        width: 40vw;
        height: 27vw;
        /* background-attachment: fixed; */
        opacity: 0.2;
        background-size: cover;
        background-position: left top;
        position: absolute;
        top: 0;
        left: 3vw;
        transition: all 1.8s;
        /* animation-name: dc16_12_ani;
        animation-duration: 1.5s;
        animation-iteration-count: 1;
        animation-timing-function: linear; */
        transform-style: preserve-3d;
        transform: rotateY(0deg);
    }
    .dc16_7:hover .dc16_12 {
        transition: all 1.5s;
        transform: rotateY(-15deg);
    }
    .dc16_7:hover .dc16_13 {
        transition: all 0.8s;
        transform: rotateY(-15deg);
    }
    .dc16_13 {
        background-color: var(--f4);
        box-shadow: 0vw 0vw 2vw rgba(0, 0, 0, 0.3);
        border-radius: 0.55vw;
        width: 35vw;
        height: 23vw;
        /* background-attachment: fixed; */
        background-size: cover;
        background-position: left top;
        position: absolute;
        top: 2vw;
        left: 0;
        transition: all 1s;
        /* animation-name: dc16_13_ani;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-timing-function: linear; */
        transform-style: preserve-3d;
        transform: rotateY(0deg);
    }
    .dc16_18:hover .dc16_12 {
        transition: all 1.5s;
        transform: rotateY(-15deg);
    }
    .dc16_18:hover .dc16_13 {
        transition: all 0.8s;
        transform: rotateY(-15deg);
    }
    .dc16_14 {
        width: 57vw;
        height: 33vw;
        background-attachment: fixed;
        background-size: auto 35vw;
        background-position: center center;
        position: absolute;
        /* background-repeat: no-repeat; */
        top: 33vw;
        left: 0;
        transition: all 0.3s;
        animation-name: dc16_14_ani;
        animation-duration: 70s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes dc16_14_ani {
        0% {
            background-position: 0vw 10vw;
        }
        100% {
            background-position: -159.7vw 10vw;
        }
    }
    .dc16_14_1 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgb(48 75 178 / 10%);
    }
    .dc16_15 {
        position: absolute;
        color: white !important;
        top: 39vw;
        left: 57vw;
        width: 35vw;
    }
    .dc16_16 {
        margin-top: 5vw;
        margin-bottom: 2vw;
        font-size: 1.8vw;
        line-height: 2vw;
        font-weight: bold;
        color: white;
        display: block;
    }
    .dc16_17 {
        font-size: 1.1vw;
        line-height: 2vw;
        color: white;
    }
    .dc16_18 {
        position: absolute;
        top: 74vw;
        left: 0;
        width: 100%;
        height: 26vw;
        /* border: solid red; */
        display: flex;
        justify-content: center;
        /* perspective: 1px;
        transform-style: preserve-3d; */
    }
    .dc17_1 {
        width: 100%;
        height: 40vw;
        /* border: solid red; */
        position: absolute;
        top: 110vw;
        left: 0;
        text-align: center;
        display: inline-block;
    }
    .dc17_2 {
        -webkit-text-stroke: 0.15vw var(--f4);
        color: transparent;
        font-size: 5vw;
        display: inline-block;
        width: 100%;
        font-weight: bold;
    }
    .dc17_3 {
        display: inline-block;
        /* border: solid red; */
        width: 50%;
        /* margin-left: 25%; */
        font-size: 1.1vw;
        line-height: 2vw;
        color: var(--f3);
    }
    .dc17_4 {
        margin-top: 2vw;
        width: 70%;
        /* border: solid red; */
    }
    .dc17_5 {
        width: 100%;
        height: 10vw;
        /* border: solid red; */
        background-size: auto 70%;
        transition: all 1s !important;
        transform: rotate(-10deg);
    }
    .dc17_5:hover {
        transition: all 1s !important;
        transform: rotate(10deg);
    }
    .dc17_6 {
        /* border: solid blue; */
        width: 70%;
        color: var(--f4);
        font-size: 1.3vw;
        line-height: 1.5vw;
        font-weight: bold;
    }
    /* it */
    .dc17_5_1_1 {
        background-image: url(../images/amc_4.svg);
    }
    .hit:hover .dc17_5_1_1 {
        background-image: url(../images/amc_4h.svg);
    }
    .dc17_5_2_1 {
        background-image: url(../images/amc_5.svg);
    }
    .hit:hover .dc17_5_2_1 {
        background-image: url(../images/amc_5h.svg);
    }
    .dc17_5_3_1 {
        background-image: url(../images/amc_6.svg);
    }
    .hit:hover .dc17_5_3_1 {
        background-image: url(../images/amc_6h.svg);
    }
    .dc17_5_4_1 {
        background-image: url(../images/amc_7.svg);
    }
    .hit:hover .dc17_5_4_1 {
        background-image: url(../images/amc_7h.svg);
    }
    /* it */
    .dc17_5_1_2 {
        background-image: url(../images/fe_4.svg);
    }
    .hit:hover .dc17_5_1_2 {
        background-image: url(../images/fe_4h.svg);
    }
    .dc17_5_2_2 {
        background-image: url(../images/fe_5.svg);
    }
    .hit:hover .dc17_5_2_2 {
        background-image: url(../images/fe_5h.svg);
    }
    .dc17_5_3_2 {
        background-image: url(../images/fe_6.svg);
    }
    .hit:hover .dc17_5_3_2 {
        background-image: url(../images/fe_6h.svg);
    }
    .dc17_5_4_2 {
        background-image: url(../images/fe_7.svg);
    }
    .hit:hover .dc17_5_4_2 {
        background-image: url(../images/fe_7h.svg);
    }
    /* it */
    .dc17_5_1_3 {
        background-image: url(../images/imp_4.svg);
    }
    .hit:hover .dc17_5_1_3 {
        background-image: url(../images/imp_4h.svg);
    }
    .dc17_5_2_3 {
        background-image: url(../images/imp_5.svg);
    }
    .hit:hover .dc17_5_2_3 {
        background-image: url(../images/imp_5h.svg);
    }
    .dc17_5_3_3 {
        background-image: url(../images/imp_6.svg);
    }
    .hit:hover .dc17_5_3_3 {
        background-image: url(../images/imp_6h.svg);
    }
    .dc17_5_4_3 {
        background-image: url(../images/imp_7.svg);
    }
    .hit:hover .dc17_5_4_3 {
        background-image: url(../images/imp_7h.svg);
    }
    /* it */
    .dc17_5_1_4 {
        background-image: url(../images/cocc_4.svg);
    }
    .hit:hover .dc17_5_1_4 {
        background-image: url(../images/cocc_4h.svg);
    }
    .dc17_5_2_4 {
        background-image: url(../images/cocc_5.svg);
    }
    .hit:hover .dc17_5_2_4 {
        background-image: url(../images/cocc_5h.svg);
    }
    .dc17_5_3_4 {
        background-image: url(../images/cocc_6.svg);
    }
    .hit:hover .dc17_5_3_4 {
        background-image: url(../images/cocc_6h.svg);
    }
    .dc17_5_4_4 {
        background-image: url(../images/cocc_7.svg);
    }
    .hit:hover .dc17_5_4_4 {
        background-image: url(../images/cocc_7h.svg);
    }
    /* it */
    .dc17_5_1_5 {
        background-image: url(../images/ddwc_4.svg);
    }
    .hit:hover .dc17_5_1_5 {
        background-image: url(../images/ddwc_4h.svg);
    }
    .dc17_5_2_5 {
        background-image: url(../images/ddwc_5.svg);
    }
    .hit:hover .dc17_5_2_5 {
        background-image: url(../images/ddwc_5h.svg);
    }
    .dc17_5_3_5 {
        background-image: url(../images/ddwc_6.svg);
    }
    .hit:hover .dc17_5_3_5 {
        background-image: url(../images/ddwc_6h.svg);
    }
    .dc17_5_4_5 {
        background-image: url(../images/ddwc_7.svg);
    }
    .hit:hover .dc17_5_4_5 {
        background-image: url(../images/ddwc_7h.svg);
    }
    .dc18_1 {
        top: 0vw;
        left: 40vw;
        position: absolute;
        width: 9.7vw;
        height: 5.3vw;
        /* box-shadow: 5vw 7vw 4vw rgba(0, 0, 0, 0.3); */
        /* border: solid red; */
        background-image: url(../images/nube.png);
        animation-name: dc18_1_ani;
        animation-duration: 70s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        z-index: 3;
        transition: all 0.3s;
    }
    .dc18_1:hover {
        background-image: url(../images/nubeh.png);
        transition: all 0.3s;
    }
    @keyframes dc18_1_ani {
        0% {
            /* box-shadow: 0vw 30vw 5vw rgba(0, 0, 0, 0.0); */
            left: -16vw;
        }
        100% {
            /* box-shadow: 5vw 30vw 5vw rgba(0, 0, 0, 0.0); */
            left: 103vw;
        }
    }
    .dc18_2 {
        top: 0vw;
        left: 105vw;
        position: absolute;
        width: 0vw;
        height: 0vw;
        /* box-shadow: 5vw 7vw 4vw rgba(0, 0, 0, 0.3); */
        /* border: solid red; */
        background-image: url(../images/nubeb.png);
        animation-name: dc18_2_ani;
        animation-duration: 300s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        /* z-index: 3; */
        transition: all 0.3s;
    }
    @keyframes dc18_2_ani {
        0% {
            left: 101.5vw;
            top: 7vw;
            width: 4vw;
            height: 2vw;
        }
        50% {
            left: -5.5vw;
            top: 7vw;
            width: 5vw;
            height: 2.5vw;
        }
        50.001% {
            left: 101.5vw;
            top: 0vw;
            width: 2vw;
            height: 1vw;
        }
        100% {
            left: -2.5vw;
            top: 0vw;
            width: 2vw;
            height: 1vw;
        }
    }
}


/* MEDIUM */

@media (min-width: 600px) and (max-width:976px) {
    body {
        position: relative;
        background-size: cover;
        /* background-image: url(../images/if.png); */
        background-repeat: repeat-x;
        /* background-position: 100% top; */
        /* text-align: center; */
    }
    .popupKO {
        width: 0vw;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.3);
        position: fixed;
        top: 0;
        left: -110vw;
        z-index: 9999;
        transition: 0.5s;
    }
    .popupOK {
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(0.3vw);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        transition: 0.5s;
    }
    .pp_i {
        margin-top: 1.5vw;
        max-width: 90vw;
        max-height: 80vh;
        border-radius: 0.9vw;
        /* box-shadow: 0vw 0.5vw 1.5vw 0vw rgba(0, 0, 0, 0.4); */
        transition: all 0.3s;
    }
    .pp_i:hover {
        box-shadow: 0vw 0.5vw 1.5vw 0.2vw var(--f2);
        transition: all 0.3s;
    }
    .sup {
        /* border: solid red; */
        position: fixed;
        /* background-color: white; */
        width: 5vw;
        height: 5vw;
        right: 1vw;
        z-index: 100;
        bottom: -20vw;
        border-radius: 50%;
        box-shadow: 0vw 0.3vw 0.3vw rgb(0 0 0 / 30%);
    }
    .supKO {
        transition: bottom 1s;
        bottom: -20vw;
    }
    .supOK {
        transition: bottom 1s;
        bottom: 1vw;
    }
    .sup_im {
        opacity: 0.8;
        transition: all 1s;
        background-image: url(../images/scrollto.png);
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .sup_im:hover {
        transition: all 1s;
        opacity: 1;
    }
    .upHeaderAir {
        width: 100%;
        height: 6vw;
        overflow: hidden;
    }
    .upHeader {
        /* backdrop-filter: blur(0.3vw); */
        width: 100%;
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        /* height: 10vw; */
        z-index: 150;
        display: inline-block;
    }
    .z_logo {
        background-image: url(../images/logohead.png);
        position: absolute;
        left: 3%;
        top: 2vw;
        height: 5vw;
        width: 17%;
    }
    .menuSdModal {
        display: none;
    }
    /* z */
    .dc1up {
        width: 100%;
        /* border: solid red; */
        position: relative;
        height: 7vw;
        transition: all 0.3s;
        overflow: hidden;
    }
    .dc1dw {
        overflow: hidden;
        width: 100%;
        /* border: solid red; */
        position: relative;
        height: 4.5vw;
        background-color: rgb(48 75 178 / 98%);
        transition: all 0.3s;
        box-shadow: 0vw 0.5vw 0.5vw rgb(0 0 0 / 15%);
        /* backdrop-filter: blur(0.3vw);*/
    }
    .dc2up {
        position: absolute;
        left: 10vw;
        top: 1vw;
        width: 10vw;
        height: 5vw;
        /* border: solid blue; */
        background-image: url(../images/logo_mix.png);
        background-position: center top;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: top 0.5s, background 2s;
    }
    .dc2dw {
        position: absolute;
        left: 10vw;
        top: 0vw;
        width: 10vw;
        height: 4.5vw;
        /* border: solid blue; */
        background-image: url(../images/logo_mix.png);
        background-position: center bottom;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: top 0.5s, background 2s;
    }
    .dc2dw:hover {
        background-size: 105%;
        transition: top 0.5s;
    }
    .dc3up {
        font-size: 1.33vw;
        position: absolute;
        right: 10vw;
        top: 1vw;
        color: white;
        transition: all 0.2s;
    }
    .dc3dw {
        font-size: 1.33vw;
        position: absolute;
        right: 10vw;
        top: 0.2vw;
        /* font-weight: bold; */
        color: white;
        transition: all 0.2s;
    }
    .dc5 {
        cursor: pointer;
        float: left;
        padding: 1vw;
        border-radius: 0.3vw;
        transition: all 0.3s;
    }
    .dc5:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transition: all 0.3s;
    }
    .dc5ok {
        cursor: pointer;
        float: left;
        padding: 1vw;
        border-radius: 0.3vw;
        transition: all 0.3s;
        border-bottom: 0.5vw solid rgba(255, 255, 255, 0.5);
    }
    /* slider */
    .dc6 {
        overflow: hidden;
        width: 100%;
        background-color: var(--f4);
        height: 50vw;
        display: inline-block;
        position: relative;
    }
    .sld_line {
        position: absolute;
        top: 0vw;
        left: 0vw;
        /* dyn*/
        width: 7000vw;
        height: 100%;
        position: relative;
        /* border: solid red; */
        transition: 1s;
    }
    .sld_item {
        position: relative;
        width: 100vw;
        height: 100%;
        float: left;
        /* border: solid greenyellow; */
    }
    .sld_txt {
        position: absolute;
        width: 33vw;
        left: 10vw;
        top: 17vw;
        color: white;
        display: inline-block;
    }
    .sld_txt_titulo {
        color: white;
        font-size: 3vw;
        line-height: 3.3vw;
        font-weight: bold;
        transition: all 0.2s;
    }
    .sld_txt_det {
        margin-top: 2vw;
        font-size: 1.1vw;
        line-height: 1.8vw;
        transition: all 0.2s;
    }
    .sld_shape {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .sld_btn {
        font-size: 1.3vw;
        color: white;
        /* border: solid 0.19vw rgba(255, 255, 255, 0.9); */
        border-radius: 77vw;
        padding: 0.8vw;
        padding-left: 3vw;
        padding-right: 3vw;
        margin-top: 1vw;
        cursor: pointer;
        color: white;
        /* border: solid 0.19vw var(--f4); */
        background-color: var(--f4);
        transition: all 0.3s;
    }
    .sld_btn:hover {
        /* letter-spacing: 0.2vw; */
        /* text-shadow: 0vw 0.3vw 1vw rgb(9, 9, 6); */
        transition: all 0.3s;
        box-shadow: 0vw 0.5vw 0.5vw rgba(0, 0, 0, 0.3);
        background-color: #23398b;
    }
    .sld_video {
        width: 100%;
        height: 100%;
        display: grid;
        overflow: hidden;
        justify-content: center;
        /* border: solid black; */
        object-fit: cover;
    }
    .sld_video video {
        /* object-fit: cover; */
        /* border: yellow solid; */
        /* width: 160vw; */
        /* height: 100vh; */
        width: 100vw;
        /* height: 100%; */
        text-align: center;
        /* background-size: cover; */
    }
    .sld_bar {
        position: absolute;
        bottom: 2vw;
        width: 60vw;
        left: 20vw;
        display: inline-block;
        text-align: center;
    }
    .sld_bar_it {
        cursor: pointer;
        display: inline-block;
        float: left;
        width: 20%;
        /* font-weight: bold; */
        text-align: center;
    }
    .sld_bar_it_txt {
        display: flex;
        /* border: solid yellow; */
        height: 3.3vw;
        /* text-shadow: 0vw 0.5vw 0.5vw black; */
        color: white;
        font-size: 1vw;
        width: 70%;
        margin-left: 15%;
        opacity: 0;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
    }
    .sld_bar_it_line {
        margin-top: 0.2vw;
        /* opacity: 0.3; */
        width: 80%;
        border-radius: 50vw;
        display: inline-block;
        height: 0.1vw;
        background-color: rgba(255, 255, 255, 0.3);
        overflow: hidden;
        text-align: left;
    }
    .sld_bar_it:hover .sld_bar_it_txt {
        opacity: 0.9;
        transition: all 0.3s;
    }
    .sld_bar_it:hover .sld_bar_it_line {
        /* opacity: 0.9; */
        transition: all 0.3s;
    }
    .sld_bar_it_line_play {
        background-color: rgba(255, 255, 255, 0.8);
        width: 100%;
        height: 100%;
        transition: all 8s linear;
    }
    .sld_bar_it_line_stop {
        background-color: rgba(255, 255, 255, 0.8);
        width: 0%;
        height: 100%;
        transition: all 0s linear;
    }
    .dc7 {
        position: relative;
        width: 100%;
        height: 214vw;
        display: inline-block;
        background-color: white;
        overflow: hidden;
        /* border: solid red; */
        scroll-margin: 50vw;
    }
    .dc8_1 {
        position: absolute;
        width: 20vw;
        height: 20vw;
        top: -10vw;
        left: 40vw;
        background-color: var(--f4);
        border-radius: 50%;
        transition: all 1s;
        z-index: 1;
    }
    .dc8_2 {
        position: absolute;
        width: 76vw;
        height: 8vw;
        top: 35.9vw;
        left: 12vw;
        background-color: var(--f4);
        border-radius: 1vw;
        transition: all 1s;
        box-shadow: 0vw 0.8vw 0.8vw rgb(0 0 0 / 50%);
        z-index: 1;
    }
    .dc9 {
        position: absolute;
        width: 20vw;
        text-align: center;
        top: 2.2vw;
        left: 40vw;
        color: white;
        font-size: 2.5vw;
        z-index: 2;
    }
    .dc9sm {
        top: -4vw;
        left: 0;
        z-index: 9;
        position: absolute;
    }
    .dc10_1 {
        width: 100%;
        position: absolute;
        top: 13vw;
        left: 0;
        display: flex;
        justify-content: center;
    }
    .dc10_2 {
        position: relative;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
        width: 13vw;
        height: 17.5vw;
        border-radius: 1vw;
        box-shadow: 0vw 0.7vw 0.9vw rgba(0, 0, 0, 0.15);
        background-repeat: no-repeat;
        background-position: center 3vw;
        background-size: 55%;
        transition: all 0.33s;
    }
    .dc10_2:hover {
        background-size: 200%;
        background-position: center center;
        background-color: var(--f4);
        transition: all 0.33s;
    }
    .dc10_2:hover .dc10_3 {
        top: 7vw;
        color: white;
        transition: all 0.33s;
    }
    .dc10_3 {
        transition: all 0.33s;
        color: #444444;
        width: 80%;
        margin-left: 10%;
        position: absolute;
        top: 11.5vw;
        text-align: center;
        font-size: 1.2vw;
        font-weight: bold;
    }
    .dc10_2_1 {
        background-image: url(../images/i1h.png);
    }
    .dc10_2:hover .dc10_2_1 {
        background-image: url(../images/i1.png);
    }
    .dc10_2_2 {
        background-image: url(../images/i2h.png);
    }
    .dc10_2:hover .dc10_2_2 {
        background-image: url(../images/i2.png);
    }
    .dc10_2_3 {
        background-image: url(../images/i3h.png);
    }
    .dc10_2:hover .dc10_2_3 {
        background-image: url(../images/i3.png);
    }
    .dc10_2_4 {
        background-image: url(../images/i4h.png);
    }
    .dc10_2:hover .dc10_2_4 {
        background-image: url(../images/i4.png);
    }
    .dc10_2_5 {
        background-image: url(../images/i5h.png);
    }
    .dc10_2:hover .dc10_2_5 {
        background-image: url(../images/i5.png);
    }
    .dc11_1 {
        margin-top: 9vw;
        position: absolute;
        top: 33vw;
        left: 0vw;
        width: 100%;
        height: 40vw;
        /* background-color: var(--f4); */
        text-align: center;
        scroll-margin: 4vw;
    }
    .dc11_2 {
        position: absolute;
        top: 16vw;
        left: 0;
        text-align: center;
        width: 100%;
        color: white;
        font-weight: bold;
        font-size: 4vw;
        /* border: solid red; */
    }
    .dc11_3 {
        transition: all 1s;
        position: absolute;
        top: 37.5vw;
        left: 0;
        text-align: center;
        left: 20vw;
        width: 60vw;
        color: white;
        z-index: 1;
        font-weight: bold;
        font-size: 1.2vw;
    }
    .dc11_4 {
        position: absolute;
        top: 29vw;
        /* left: 0; */
        left: 79vw;
        height: 13vw;
        width: 10vw;
        z-index: 1;
        transition: all 1s;
        /* border: solid red; */
        background-position: 0% center;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url(../images/i7.png);
    }
    .dc11_5up {
        background-image: url(../images/i6.jpg);
        background-position: 0% center;
        background-size: 101%;
        background-repeat: repeat-x;
        background-attachment: fixed;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all 0.3s;
    }
    .dc11_5dw {
        background-image: url(../images/i6.jpg);
        background-position: 0vw center;
        background-size: 101%;
        background-repeat: repeat-x;
        /* background-attachment: fixed; */
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all 0.3s;
        animation-name: dc11_5dw_ani;
        animation-duration: 120s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes dc11_5dw_ani {
        0% {
            background-position: 0vw center;
        }
        100% {
            background-position: -100vw center;
        }
    }
    .dc12up {
        position: absolute;
        width: 1vw;
        height: 1vw;
        background-color: var(--f4);
        top: -5vw;
        left: 75vw;
        border-radius: 50%;
        transition: all 1s;
    }
    .dc12dw {
        position: absolute;
        width: 75vw;
        height: 33vw;
        background-color: var(--f4);
        top: -13vw;
        left: 50vw;
        border-radius: 50%;
        transition: all 1s;
    }
    .dc13_0 {
        background-color: var(--f4);
        border-radius: 50%;
        position: absolute;
        left: -50vw;
        top: 110vw;
        width: 200vw;
        height: 62vw;
        transition: all 0.3s;
    }
    .dc13_1 {
        background-image: url(../images/i8.png);
        background-position: center center;
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        left: 13vw;
        top: 80vw;
        width: 74vw;
        height: 62vw;
        transition: all 0.3s;
    }
    .dc13_2 {
        position: absolute;
        top: 118.5vw;
        /* left: 0; */
        left: 23vw;
        height: 16vw;
        width: 7vw;
        z-index: 1;
        /* border: solid red; */
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url(../images/i9.png);
        transition: all 0.3s;
    }
    .dc13_3 {
        position: absolute;
        top: 96vw;
        left: 0;
        text-align: center;
        width: 100%;
        color: white;
        font-weight: bold;
        font-size: 2vw;
    }
    .dc13_3_2 {
        padding-left: 1vw;
        padding-right: 1vw;
        background-color: var(--f4);
        animation-name: dc13_3_2_ani;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        /* animation-timing-function: linear; */
    }
    @keyframes dc13_3_2_ani {
        0% {
            background-color: var(--f4);
        }
        50% {
            background-color: #1d2f77;
        }
        100% {
            background-color: var(--f4);
        }
    }
    .dc13_4_1 {
        position: absolute;
        top: 105vw;
        left: 25vw;
        width: 50vw;
        text-align: center;
        color: white;
        font-weight: bold;
        font-size: 2vw;
        /* border: solid red; */
        display: flex;
        align-items: flex-start;
        justify-content: center;
        text-align: center;
    }
    .dc13_4_2 {
        width: 22%;
        margin-left: 1.5%;
        margin-right: 1.5%;
        text-align: center;
        color: white;
        font-weight: bold;
        font-size: 1.2vw;
        line-height: 1.5vw;
        /* position: relative; */
        /* height: 12vw; */
        /* border: solid red; */
    }
    .dc13_4_3 {
        width: 100%;
        height: 8vw;
        /* border: solid red; */
        display: block;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: auto 65%;
    }
    .dc13_4_4 {
        margin-top: 1vw;
        /* border: solid red; */
        width: 90%;
        display: inline-block;
    }
    .dc14_1 {
        scroll-margin: 7vw;
        position: absolute;
        top: 141vw;
        left: 0;
        text-align: center;
        width: 100%;
        color: white;
        font-weight: bold;
        font-size: 2vw;
    }
    .dc14_2 {
        position: absolute;
        top: 145vw;
        left: 0;
        text-align: center;
        width: 100%;
        color: white;
        /* font-weight: bold; */
        font-size: 1.2vw;
        line-height: 1.5vw;
    }
    .dc14_3 {
        position: absolute;
        top: 150vw;
        left: 35vw;
        width: 30vw;
        height: 52vw;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(../images/i14.png);
        overflow: hidden;
        text-align: center;
        background-color: black;
        overflow: hidden;
        border-radius: 2.9vw;
        box-shadow: 0vw 1vw 1vw rgb(5 8 20 / 36%);
    }
    .dc14_4 {
        display: block;
        width: 27.7vw;
        height: 49vw;
        position: absolute;
        top: 1vw;
        left: 1.25vw;
        margin: 0 auto;
        padding: 0px;
        border: 0px none;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 2vw;
    }
    .dc15 {
        width: 100%;
        display: inline-block;
        position: relative;
        /* height: 20vw; */
    }
    .dc15_1 {
        position: relative;
        background-color: white;
        /* border: solid red; */
        width: 100%;
        display: inline-block;
        position: relative;
        height: 40vw;
        overflow: hidden;
    }
    .dc15_2 {
        background-color: var(--f4);
        /* border: solid red; */
        width: 200vw;
        height: 100vw;
        position: absolute;
        left: -50vw;
        top: 20vw;
        border-radius: 50%;
    }
    .dc15_2_1 {
        background-color: rgb(48 75 178 / 15%);
        /* border: solid red; */
        width: 100vw;
        height: 100vw;
        position: absolute;
        left: -50vw;
        top: 10vw;
        border-radius: 50%;
    }
    .dc15_2_2 {
        background-color: rgb(48 75 178 / 15%);
        /* border: solid red; */
        width: 100vw;
        height: 100vw;
        position: absolute;
        left: -40vw;
        top: 15vw;
        border-radius: 50%;
    }
    .dc15_2_3 {
        background-color: rgb(48 75 178 / 15%);
        /* border: solid red; */
        width: 100vw;
        height: 100vw;
        position: absolute;
        right: -50vw;
        top: 10vw;
        border-radius: 50%;
    }
    .dc15_2_4 {
        background-color: rgb(48 75 178 / 15%);
        /* border: solid red; */
        width: 100vw;
        height: 100vw;
        position: absolute;
        right: -40vw;
        top: 15vw;
        border-radius: 50%;
    }
    .dc15_3 {
        width: 40vw;
        height: 26vw;
        position: absolute;
        left: 30vw;
        top: 0vw;
        /* border: solid red; */
        background-image: url(../images/equipo.png);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .dc15_4 {
        width: 20vw;
        height: 5vw;
        position: absolute;
        left: 40vw;
        top: 25vw;
        /* border: solid red; */
        background-image: url(../images/2cingenieria.png);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .dc15_5 {
        width: 100%;
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        /* margin-top: 37vw; */
        font-size: 1.3vw;
        position: absolute;
        top: 30vw;
        display: flex;
        /* border: solid red; */
        justify-content: center;
        align-items: center;
    }
    .dc15_6 {
        width: 100%;
        /* border: solid red; */
        text-align: center;
        /* margin-top: 3vw; */
        color: rgba(255, 255, 255, 0.7);
        font-size: 1vw;
        position: absolute;
        top: 35vw;
    }
    .dc16 {
        background-color: var(--f4);
        position: relative;
        width: 100%;
        height: 20vw;
        /* border: solid red; */
        display: inline-block;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        animation: dc16_ani 7s;
        animation-timing-function: linear;
        animation-duration: 12s;
        /* margin-bottom: 3.7vw; */
    }
    @keyframes dc16_ani {
        from {
            background-position: center bottom;
        }
        to {
            background-position: center top;
        }
    }
    .dc16_1_1 {
        background-image: url(../images/hd_aplicaciones_mision_critica.jpg);
    }
    .dc16_1_2 {
        background-image: url(../images/hd_facturacion_electronica.jpg);
    }
    .dc16_1_3 {
        background-image: url(../images/hd_integracion_con_medios_de_pago.jpg);
    }
    .dc16_1_4 {
        background-image: url(../images/hd_comercio_online.jpg);
    }
    .dc16_1_5 {
        background-image: url(../images/hd_desarrollo_sitio_web_corporativo.jpg);
    }
    .dc16_2 {
        /* color: white;
        font-size: 3vw;
        line-height: 3.3vw;
        font-weight: bold; */
        display: inline-block;
        /* border: solid red; */
        text-align: center;
        width: 100%;
        margin-top: 10vw;
        position: relative;
        z-index: 1;
    }
    .dc16_3 {
        /* padding-top: 3vw; */
        /* padding-bottom: 3vw; */
        width: 100%;
        height: 144vw;
        background-color: white;
        position: relative;
        /* margin-left: 10%; */
        /* background-color: silver; */
        /* z-index: 2; */
        position: relative;
        overflow: hidden;
        display: inline-block;
    }
    .dc16_4 {
        position: absolute;
        height: 100vw;
        width: 100vw;
        right: -50vw;
        top: 9vw;
        background-color: var(--f4);
        border-radius: 50%;
    }
    .dc16_5 {
        position: absolute;
        height: 107vw;
        width: 107vw;
        right: -53.5vw;
        top: 6vw;
        border: dashed 0.13vw var(--f4);
        border-radius: 50%;
        animation-name: dc16_5_ani;
        animation-duration: 200s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        /**/
    }
    @keyframes dc16_5_ani {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .dc16_6 {
        position: absolute;
        height: 115vw;
        width: 115vw;
        right: -57.5vw;
        top: 2vw;
        border: solid 0.1vw var(--f4);
        border-radius: 50%;
        opacity: 0.5;
    }
    .dc16_7 {
        position: absolute;
        top: 3vw;
        left: 0;
        width: 100%;
        height: 26vw;
        /* border: solid red; */
        display: flex;
        justify-content: center;
        /* perspective: 1px;
        transform-style: preserve-3d; */
    }
    .dc16_8 {
        width: 35%;
        /* border: solid red; */
        margin-right: 3vw;
        margin-left: 5vw;
    }
    .dc16_9 {
        width: 40%;
        position: relative;
        /* border: solid blue; */
        /* transform: translateZ(-3px); */
        perspective: 50vw;
    }
    .dc16_10 {
        margin-top: 5vw;
        margin-bottom: 2vw;
        font-size: 1.8vw;
        line-height: 2vw;
        font-weight: bold;
        color: var(--f4);
        transition: all 0.25s;
        border-radius: 0.5vw;
        display: block;
    }
    .dc16_7:hover .dc16_10 {
        background-color: var(--f4);
        color: white;
        padding: 1vw;
        transition: all 0.25s;
    }
    .dc16_18:hover .dc16_10 {
        background-color: var(--f4);
        color: white;
        padding: 1vw;
        transition: all 0.25s;
    }
    .dc16_11 {
        font-size: 1.1vw;
        line-height: 2vw;
        color: var(--f3);
    }
    .dc16_12 {
        border-radius: 0.55vw;
        width: 40vw;
        height: 27vw;
        /* background-attachment: fixed; */
        opacity: 0.2;
        background-size: cover;
        background-position: left top;
        position: absolute;
        top: 0;
        left: 3vw;
        transition: all 1.8s;
        /* animation-name: dc16_12_ani;
        animation-duration: 1.5s;
        animation-iteration-count: 1;
        animation-timing-function: linear; */
        transform-style: preserve-3d;
        transform: rotateY(0deg);
    }
    .dc16_7:hover .dc16_12 {
        transition: all 1.5s;
        transform: rotateY(-15deg);
    }
    .dc16_7:hover .dc16_13 {
        transition: all 0.8s;
        transform: rotateY(-15deg);
    }
    .dc16_13 {
        background-color: var(--f4);
        box-shadow: 0vw 0vw 2vw rgba(0, 0, 0, 0.3);
        border-radius: 0.55vw;
        width: 35vw;
        height: 23vw;
        /* background-attachment: fixed; */
        background-size: cover;
        background-position: left top;
        position: absolute;
        top: 2vw;
        left: 0;
        transition: all 1s;
        /* animation-name: dc16_13_ani;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-timing-function: linear; */
        transform-style: preserve-3d;
        transform: rotateY(0deg);
    }
    .dc16_18:hover .dc16_12 {
        transition: all 1.5s;
        transform: rotateY(-15deg);
    }
    .dc16_18:hover .dc16_13 {
        transition: all 0.8s;
        transform: rotateY(-15deg);
    }
    .dc16_14 {
        width: 57vw;
        height: 33vw;
        background-attachment: fixed;
        background-size: auto 35vw;
        background-position: center center;
        position: absolute;
        /* background-repeat: no-repeat; */
        top: 33vw;
        left: 0;
        transition: all 0.3s;
        animation-name: dc16_14_ani;
        animation-duration: 70s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes dc16_14_ani {
        0% {
            background-position: 0vw 10vw;
        }
        100% {
            background-position: -159.7vw 10vw;
        }
    }
    .dc16_14_1 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgb(48 75 178 / 10%);
    }
    .dc16_15 {
        position: absolute;
        color: white !important;
        top: 39vw;
        left: 57vw;
        width: 35vw;
    }
    .dc16_16 {
        margin-top: 5vw;
        margin-bottom: 2vw;
        font-size: 1.8vw;
        line-height: 2vw;
        font-weight: bold;
        color: white;
        display: block;
    }
    .dc16_17 {
        font-size: 1.1vw;
        line-height: 2vw;
        color: white;
    }
    .dc16_18 {
        position: absolute;
        top: 74vw;
        left: 0;
        width: 100%;
        height: 26vw;
        /* border: solid red; */
        display: flex;
        justify-content: center;
        /* perspective: 1px;
        transform-style: preserve-3d; */
    }
    .dc17_1 {
        width: 100%;
        height: 40vw;
        /* border: solid red; */
        position: absolute;
        top: 110vw;
        left: 0;
        text-align: center;
        display: inline-block;
    }
    .dc17_2 {
        -webkit-text-stroke: 0.15vw var(--f4);
        color: transparent;
        font-size: 5vw;
        display: inline-block;
        width: 100%;
        font-weight: bold;
    }
    .dc17_3 {
        display: inline-block;
        /* border: solid red; */
        width: 50%;
        /* margin-left: 25%; */
        font-size: 1.1vw;
        line-height: 2vw;
        color: var(--f3);
    }
    .dc17_4 {
        margin-top: 2vw;
        width: 70%;
        /* border: solid red; */
    }
    .dc17_5 {
        width: 100%;
        height: 10vw;
        /* border: solid red; */
        background-size: auto 70%;
        transition: all 1s !important;
        transform: rotate(-10deg);
    }
    .dc17_5:hover {
        transition: all 1s !important;
        transform: rotate(10deg);
    }
    .dc17_6 {
        /* border: solid blue; */
        width: 70%;
        color: var(--f4);
        font-size: 1.3vw;
        line-height: 1.5vw;
        font-weight: bold;
    }
    /* it */
    .dc17_5_1_1 {
        background-image: url(../images/amc_4.svg);
    }
    .hit:hover .dc17_5_1_1 {
        background-image: url(../images/amc_4h.svg);
    }
    .dc17_5_2_1 {
        background-image: url(../images/amc_5.svg);
    }
    .hit:hover .dc17_5_2_1 {
        background-image: url(../images/amc_5h.svg);
    }
    .dc17_5_3_1 {
        background-image: url(../images/amc_6.svg);
    }
    .hit:hover .dc17_5_3_1 {
        background-image: url(../images/amc_6h.svg);
    }
    .dc17_5_4_1 {
        background-image: url(../images/amc_7.svg);
    }
    .hit:hover .dc17_5_4_1 {
        background-image: url(../images/amc_7h.svg);
    }
    /* it */
    .dc17_5_1_2 {
        background-image: url(../images/fe_4.svg);
    }
    .hit:hover .dc17_5_1_2 {
        background-image: url(../images/fe_4h.svg);
    }
    .dc17_5_2_2 {
        background-image: url(../images/fe_5.svg);
    }
    .hit:hover .dc17_5_2_2 {
        background-image: url(../images/fe_5h.svg);
    }
    .dc17_5_3_2 {
        background-image: url(../images/fe_6.svg);
    }
    .hit:hover .dc17_5_3_2 {
        background-image: url(../images/fe_6h.svg);
    }
    .dc17_5_4_2 {
        background-image: url(../images/fe_7.svg);
    }
    .hit:hover .dc17_5_4_2 {
        background-image: url(../images/fe_7h.svg);
    }
    /* it */
    .dc17_5_1_3 {
        background-image: url(../images/imp_4.svg);
    }
    .hit:hover .dc17_5_1_3 {
        background-image: url(../images/imp_4h.svg);
    }
    .dc17_5_2_3 {
        background-image: url(../images/imp_5.svg);
    }
    .hit:hover .dc17_5_2_3 {
        background-image: url(../images/imp_5h.svg);
    }
    .dc17_5_3_3 {
        background-image: url(../images/imp_6.svg);
    }
    .hit:hover .dc17_5_3_3 {
        background-image: url(../images/imp_6h.svg);
    }
    .dc17_5_4_3 {
        background-image: url(../images/imp_7.svg);
    }
    .hit:hover .dc17_5_4_3 {
        background-image: url(../images/imp_7h.svg);
    }
    /* it */
    .dc17_5_1_4 {
        background-image: url(../images/cocc_4.svg);
    }
    .hit:hover .dc17_5_1_4 {
        background-image: url(../images/cocc_4h.svg);
    }
    .dc17_5_2_4 {
        background-image: url(../images/cocc_5.svg);
    }
    .hit:hover .dc17_5_2_4 {
        background-image: url(../images/cocc_5h.svg);
    }
    .dc17_5_3_4 {
        background-image: url(../images/cocc_6.svg);
    }
    .hit:hover .dc17_5_3_4 {
        background-image: url(../images/cocc_6h.svg);
    }
    .dc17_5_4_4 {
        background-image: url(../images/cocc_7.svg);
    }
    .hit:hover .dc17_5_4_4 {
        background-image: url(../images/cocc_7h.svg);
    }
    /* it */
    .dc17_5_1_5 {
        background-image: url(../images/ddwc_4.svg);
    }
    .hit:hover .dc17_5_1_5 {
        background-image: url(../images/ddwc_4h.svg);
    }
    .dc17_5_2_5 {
        background-image: url(../images/ddwc_5.svg);
    }
    .hit:hover .dc17_5_2_5 {
        background-image: url(../images/ddwc_5h.svg);
    }
    .dc17_5_3_5 {
        background-image: url(../images/ddwc_6.svg);
    }
    .hit:hover .dc17_5_3_5 {
        background-image: url(../images/ddwc_6h.svg);
    }
    .dc17_5_4_5 {
        background-image: url(../images/ddwc_7.svg);
    }
    .hit:hover .dc17_5_4_5 {
        background-image: url(../images/ddwc_7h.svg);
    }
    .dc18_1 {
        top: 0vw;
        left: 40vw;
        position: absolute;
        width: 9.7vw;
        height: 5.3vw;
        /* box-shadow: 5vw 7vw 4vw rgba(0, 0, 0, 0.3); */
        /* border: solid red; */
        background-image: url(../images/nube.png);
        animation-name: dc18_1_ani;
        animation-duration: 70s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        z-index: 3;
        transition: all 0.3s;
    }
    .dc18_1:hover {
        background-image: url(../images/nubeh.png);
        transition: all 0.3s;
    }
    @keyframes dc18_1_ani {
        0% {
            /* box-shadow: 0vw 30vw 5vw rgba(0, 0, 0, 0.0); */
            left: -16vw;
        }
        100% {
            /* box-shadow: 5vw 30vw 5vw rgba(0, 0, 0, 0.0); */
            left: 103vw;
        }
    }
    .dc18_2 {
        top: 0vw;
        left: 105vw;
        position: absolute;
        width: 0vw;
        height: 0vw;
        /* box-shadow: 5vw 7vw 4vw rgba(0, 0, 0, 0.3); */
        /* border: solid red; */
        background-image: url(../images/nubeb.png);
        animation-name: dc18_2_ani;
        animation-duration: 300s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        /* z-index: 3; */
        transition: all 0.3s;
    }
    @keyframes dc18_2_ani {
        0% {
            left: 101.5vw;
            top: 7vw;
            width: 4vw;
            height: 2vw;
        }
        50% {
            left: -5.5vw;
            top: 7vw;
            width: 5vw;
            height: 2.5vw;
        }
        50.001% {
            left: 101.5vw;
            top: 0vw;
            width: 2vw;
            height: 1vw;
        }
        100% {
            left: -2.5vw;
            top: 0vw;
            width: 2vw;
            height: 1vw;
        }
    }
}


/* SMALL */

@media (max-width:600px) {
    .menuSdModal {
        display: inline-block;
    }
    .hamok {
        position: absolute;
        top: 1vw;
        width: 10vw;
        height: 10vw;
        cursor: pointer;
        right: 2vw;
        transform: rotate(0deg);
        transition: all 1s;
    }
    .hamko {
        position: absolute;
        top: 1vw;
        width: 10vw;
        height: 10vw;
        cursor: pointer;
        right: 2vw;
        transform: rotate(360deg);
        transition: all 1s;
    }
    .he1ok {
        position: absolute;
        width: 70%;
        height: 9%;
        top: 25%;
        left: 15%;
        background-color: white;
        border-radius: 50vw;
        transition: all 1s;
    }
    .he2ok {
        position: absolute;
        width: 70%;
        height: 9%;
        top: 50%;
        left: 15%;
        background-color: white;
        border-radius: 50vw;
        transition: all 1s;
    }
    .he3ok {
        position: absolute;
        width: 70%;
        height: 9%;
        top: 75%;
        left: 15%;
        background-color: white;
        border-radius: 50vw;
        transition: all 1s;
    }
    .he1ko {
        position: absolute;
        width: 70%;
        height: 9%;
        top: 45%;
        left: 15%;
        background-color: white;
        border-radius: 50vw;
        transform: rotate( 45deg);
        transition: all 1s;
    }
    .he2ko {
        position: absolute;
        width: 0%;
        height: 9%;
        top: 50%;
        left: 50%;
        background-color: white;
        border-radius: 50vw;
        transition: all 1s;
    }
    .he3ko {
        position: absolute;
        width: 70%;
        height: 9%;
        top: 45%;
        left: 15%;
        background-color: white;
        border-radius: 50vw;
        transform: rotate( -45deg);
        transition: all 1s;
    }
    .menuSdModalOK {
        z-index: 0;
        position: absolute;
        width: 100vw;
        height: 100vh;
        background-color: rgb(48 75 178 / 88%);
        left: 0vw;
        top: 0vw;
        transition: 0.3s;
    }
    .menuSdModalKO {
        z-index: 0;
        position: absolute;
        width: 100vw;
        height: 100vh;
        background-color: rgb(48 75 178 / 33%);
        left: -100vw;
        top: 0vw;
        transition: 0.5s;
    }
    .menuBarKO {
        top: 16vw;
        z-index: 1;
        left: -100vw !important;
        transition: all 0.9s !important;
        /* border: solid red; */
    }
    .menuBarOK {
        top: 16vw;
        z-index: 1;
        left: 0vw !important;
        transition: all 0.4s !important;
    }
    /*---*/
    body {
        position: relative;
        background-size: cover;
        /* background-image: url(../images/if.png); */
        background-repeat: repeat-x;
        /* background-position: 100% top; */
        /* text-align: center; */
    }
    .popupKO {
        width: 0vw;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.3);
        position: fixed;
        top: 0;
        left: -110vw;
        z-index: 9999;
        transition: 0.5s;
    }
    .popupOK {
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(0.3vw);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        transition: 0.5s;
    }
    .pp_i {
        margin-top: 1.5vw;
        max-width: 90vw;
        max-height: 80vh;
        border-radius: 0.9vw;
        /* box-shadow: 0vw 0.5vw 1.5vw 0vw rgba(0, 0, 0, 0.4); */
        transition: all 0.3s;
    }
    .pp_i:hover {
        box-shadow: 0vw 0.5vw 1.5vw 0.2vw var(--f2);
        transition: all 0.3s;
    }
    .sup {
        /* border: solid red; */
        position: fixed;
        /* background-color: white; */
        width: 12vw;
        height: 12vw;
        right: 2vw;
        z-index: 100;
        bottom: -20vw;
        border-radius: 50%;
        box-shadow: 0vw 0.3vw 0.3vw rgb(0 0 0 / 30%);
    }
    .supKO {
        transition: bottom 1s;
        bottom: -20vw;
    }
    .supOK {
        transition: bottom 1s;
        bottom: 1vw;
    }
    .sup_im {
        opacity: 0.8;
        transition: all 1s;
        background-image: url(../images/scrollto.png);
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
    .sup_im:hover {
        transition: all 1s;
        opacity: 1;
    }
    .upHeaderAir {
        width: 100%;
        height: 6vw;
        overflow: hidden;
    }
    .upHeader {
        /* backdrop-filter: blur(0.3vw); */
        width: 100%;
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        /* height: 10vw; */
        z-index: 150;
        display: inline-block;
    }
    .z_logo {
        background-image: url(../images/logohead.png);
        position: absolute;
        left: 3%;
        top: 2vw;
        height: 5vw;
        width: 17%;
    }
    /* z */
    .dc1up {
        width: 100%;
        /* border: solid red; */
        position: relative;
        height: 15vw;
        transition: all 0.3s;
        /* overflow: hidden; */
    }
    .dc1dw {
        /* overflow: hidden; */
        width: 100%;
        /* border: solid red; */
        position: relative;
        height: 13vw;
        background-color: rgb(48 75 178 / 98%);
        transition: all 0.3s;
        box-shadow: 0vw 0.5vw 0.5vw rgb(0 0 0 / 15%);
        /* backdrop-filter: blur(0.3vw);*/
    }
    .dc2up {
        /* position: absolute; */
        position: absolute;
        left: 5vw;
        top: 0vw;
        width: 21vw;
        height: 12vw;
        /* border: solid blue; */
        background-image: url(../images/logo_mix.png);
        background-position: center top;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: top 0.5s, background 2s;
    }
    .dc2dw {
        position: absolute;
        left: 5vw;
        top: 0vw;
        width: 21vw;
        height: 12vw;
        /* border: solid blue; */
        background-image: url(../images/logo_mix.png);
        background-position: center bottom;
        background-size: 100%;
        background-repeat: no-repeat;
        transition: top 0.5s, background 2s;
    }
    .dc2dw:hover {
        background-size: 105%;
        transition: top 0.5s;
    }
    .dc3up {
        font-size: 5.33vw;
        position: absolute;
        /* right: 0vw; */
        /* border: solid red; */
        color: white;
        transition: all 0.2s;
        margin-left: 20%;
        width: 60%;
    }
    .dc3dw {
        font-size: 5.33vw;
        position: absolute;
        right: 0vw;
        top: 16vw;
        /* border: solid red; */
        color: white;
        transition: all 0.2s;
        width: 100%;
    }
    .dc5 {
        margin-bottom: 4vw;
        cursor: pointer;
        /* float: left; */
        padding: 3vw;
        width: 50vw;
        border-radius: 11.3vw;
        border: solid 0.2vw rgba(255, 255, 255, 0.3);
        transition: all 0.3s;
    }
    .dc5:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transition: all 0.3s;
    }
    .dc5ok {
        cursor: pointer;
        float: left;
        padding: 1vw;
        border-radius: 0.3vw;
        transition: all 0.3s;
        border-bottom: 0.5vw solid rgba(255, 255, 255, 0.5);
    }
    /* slider */
    .dc6 {
        overflow: hidden;
        width: 100%;
        background-color: var(--f4);
        height: 120vw;
        display: inline-block;
        position: relative;
    }
    .sld_line {
        position: absolute;
        top: 0vw;
        left: 0vw;
        /* dyn*/
        width: 7000vw;
        height: 100%;
        position: relative;
        /* border: solid red; */
        transition: 1s;
    }
    .sld_item {
        position: relative;
        width: 100vw;
        height: 100%;
        float: left;
        /* border: solid greenyellow; */
    }
    .sld_txt {
        position: absolute;
        width: 77vw;
        left: 10vw;
        top: 36vw;
        text-align: center;
        /* border: solid red; */
        color: white;
        display: inline-block;
    }
    .sld_txt_titulo {
        color: white;
        font-size: 8vw;
        line-height: 9vw;
        width: 100%;
        font-weight: bold;
        /* border: solid red; */
        transition: all 0.2s;
    }
    .sld_txt_det {
        margin-top: 5vw;
        font-size: 3.8vw;
        line-height: 3.99vw;
        transition: all 0.2s;
    }
    .sld_shape {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .sld_btn {
        font-size: 5.3vw;
        color: white;
        /* border: solid 0.19vw rgba(255, 255, 255, 0.9); */
        border-radius: 77vw;
        padding: 2.8vw;
        padding-left: 8vw;
        padding-right: 8vw;
        margin-top: 10vw;
        cursor: pointer;
        color: white;
        /* border: solid 0.19vw var(--f4); */
        background-color: var(--f4);
        transition: all 0.3s;
    }
    .sld_btn:hover {
        /* letter-spacing: 0.2vw; */
        /* text-shadow: 0vw 0.3vw 1vw rgb(9, 9, 6); */
        transition: all 0.3s;
        box-shadow: 0vw 0.5vw 0.5vw rgba(0, 0, 0, 0.3);
        background-color: #23398b;
    }
    .sld_video {
        width: 100%;
        height: 100%;
        display: grid;
        overflow: hidden;
        justify-content: center;
        /* border: solid black; */
        object-fit: cover;
    }
    .sld_video video {
        /* object-fit: cover; */
        /* border: yellow solid; */
        /* width: 160vw; */
        /* height: 100vh; */
        width: 218vw;
        height: 100%;
        text-align: center;
        /* background-size: cover;*/
    }
    .sld_bar {
        position: absolute;
        bottom: 2vw;
        width: 80vw;
        left: 10vw;
        display: inline-block;
        text-align: center;
    }
    .sld_bar_it {
        cursor: pointer;
        display: inline-block;
        float: left;
        width: 20%;
        /* font-weight: bold; */
        text-align: center;
    }
    .sld_bar_it_txt {
        display: flex;
        /* border: solid yellow; */
        height: 3.3vw;
        /* text-shadow: 0vw 0.5vw 0.5vw black; */
        color: white;
        font-size: 1vw;
        width: 70%;
        margin-left: 15%;
        opacity: 0;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        /* display: none; */
    }
    .sld_bar_it_line {
        margin-top: 0.2vw;
        /* opacity: 0.3; */
        width: 80%;
        border-radius: 50vw;
        display: inline-block;
        height: 1.1vw;
        background-color: rgba(255, 255, 255, 0.3);
        overflow: hidden;
        text-align: left;
    }
    .sld_bar_it:hover .sld_bar_it_txt {
        opacity: 0;
        transition: all 0.3s;
        /* display: none; */
    }
    .sld_bar_it:hover .sld_bar_it_line {
        /* opacity: 0.9; */
        transition: all 0.3s;
    }
    .sld_bar_it_line_play {
        background-color: rgba(255, 255, 255, 0.8);
        width: 100%;
        height: 100%;
        transition: all 8s linear;
    }
    .sld_bar_it_line_stop {
        background-color: rgba(255, 255, 255, 0.8);
        width: 0%;
        height: 100%;
        transition: all 0s linear;
    }
    .dc7 {
        position: relative;
        width: 100%;
        height: 654vw;
        display: inline-block;
        background-color: white;
        overflow: hidden;
        /* border: solid red; */
        scroll-margin: 50vw;
    }
    .dc8_1 {
        position: absolute;
        width: 50vw;
        height: 50vw;
        top: -27vw;
        left: 25vw;
        background-color: var(--f4);
        border-radius: 50%;
        transition: all 1s;
        z-index: 1;
    }
    .dc8_2 {
        position: absolute;
        width: 76vw;
        height: 65vw;
        top: 116vw;
        left: 12vw;
        background-color: var(--f4);
        border-radius: 4vw;
        transition: all 1s;
        box-shadow: 0vw 2.8vw 2.8vw rgb(0 0 0 / 50%);
        z-index: 1;
    }
    .dc9 {
        position: absolute;
        width: 40vw;
        text-align: center;
        top: 4.2vw;
        left: 30vw;
        color: white;
        font-size: 6.5vw;
        z-index: 2;
    }
    .dc9sm {
        top: -10vw;
        left: 0;
        z-index: 9;
        position: absolute;
    }
    .dc10_1 {
        width: 70%;
        margin-left: 15%;
        position: absolute;
        top: 29vw;
        left: 0;
        display: inline-block;
        justify-content: center;
    }
    .dc10_2 {
        position: relative;
        margin-left: 1.5vw;
        margin-right: 1.5vw;
        width: 29vw;
        height: 36.5vw;
        border-radius: 3vw;
        box-shadow: 0vw 0.7vw 0.9vw rgb(0 0 0 / 15%);
        background-repeat: no-repeat;
        background-position: center 3vw;
        background-size: 55%;
        transition: all 0.33s;
    }
    .dc10_2:hover {
        background-size: 200%;
        background-position: center center;
        background-color: var(--f4);
        transition: all 0.33s;
    }
    .dc10_2:hover .dc10_3 {
        top: 14vw;
        color: white;
        transition: all 0.33s;
    }
    .dc10_3 {
        transition: all 0.33s;
        color: #444444;
        width: 80%;
        margin-left: 10%;
        position: absolute;
        top: 21.5vw;
        text-align: center;
        line-height: 4vw;
        font-size: 3.2vw;
        font-weight: bold;
    }
    .dc10_2_1 {
        background-image: url(../images/i1h.png);
    }
    .dc10_2:hover .dc10_2_1 {
        background-image: url(../images/i1.png);
    }
    .dc10_2_2 {
        background-image: url(../images/i2h.png);
    }
    .dc10_2:hover .dc10_2_2 {
        background-image: url(../images/i2.png);
    }
    .dc10_2_3 {
        background-image: url(../images/i3h.png);
    }
    .dc10_2:hover .dc10_2_3 {
        background-image: url(../images/i3.png);
    }
    .dc10_2_4 {
        background-image: url(../images/i4h.png);
    }
    .dc10_2:hover .dc10_2_4 {
        background-image: url(../images/i4.png);
    }
    .dc10_2_5 {
        background-image: url(../images/i5h.png);
    }
    .dc10_2:hover .dc10_2_5 {
        background-image: url(../images/i5.png);
    }
    .dc11_1 {
        /* margin-top: 9vw; */
        position: absolute;
        top: 155vw;
        left: 0vw;
        width: 100%;
        height: 133vw;
        /* background-color: var(--f4); */
        text-align: center;
        scroll-margin: 10vw;
    }
    .dc11_2 {
        position: absolute;
        top: 55vw;
        left: 0;
        text-align: center;
        width: 100%;
        color: white;
        font-weight: bold;
        font-size: 8vw;
        /* border: solid red; */
    }
    .dc11_3 {
        position: absolute;
        top: 124.5vw;
        left: 0;
        text-align: center;
        left: 20vw;
        width: 60vw;
        color: white;
        z-index: 1;
        font-weight: bold;
        font-size: 3.8vw;
        line-height: 7.99vw;
        transition: all 1s;
    }
    .dc11_4 {
        position: absolute;
        top: 93vw;
        /* left: 0; */
        left: 64vw;
        height: 44vw;
        width: 30vw;
        z-index: 1;
        transition: all 1s;
        /* border: solid red; */
        background-position: 0% center;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url(../images/i7.png);
    }
    .dc11_5up {
        background-image: url(../images/i6.jpg);
        background-position: 0% center;
        background-size: 101%;
        background-repeat: repeat-x;
        background-attachment: fixed;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all 0.3s;
    }
    .dc11_5dw {
        background-image: url(../images/i6.jpg);
        background-position: 0vw center;
        background-size: auto 100%;
        background-repeat: repeat-x;
        /* background-attachment: fixed; */
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: all 0.3s;
        animation-name: dc11_5dw_ani;
        animation-duration: 120s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes dc11_5dw_ani {
        0% {
            background-position: 0vw center;
        }
        100% {
            background-position: -100vw center;
        }
    }
    .dc12up {
        position: absolute;
        width: 1vw;
        height: 1vw;
        background-color: var(--f4);
        top: -5vw;
        left: 75vw;
        border-radius: 50%;
        transition: all 1s;
    }
    .dc12dw {
        position: absolute;
        width: 75vw;
        height: 33vw;
        background-color: var(--f4);
        top: -13vw;
        left: 50vw;
        border-radius: 50%;
        transition: all 1s;
    }
    .dc13_0 {
        background-color: var(--f4);
        border-radius: 50%;
        position: absolute;
        left: -50vw;
        top: 381vw;
        width: 200vw;
        height: 178vw;
        transition: all 0.3s;
    }
    .dc13_1 {
        background-image: url(../images/i8.png);
        background-position: center center;
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        left: 0vw;
        top: 348vw;
        width: 100vw;
        height: 77vw;
        transition: all 0.3s;
    }
    .dc13_2 {
        position: absolute;
        top: 391.5vw;
        /* left: 0; */
        left: 13vw;
        height: 30vw;
        width: 13vw;
        z-index: 1;
        /* border: solid red; */
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url(../images/i9.png);
        transition: all 0.3s;
    }
    .dc13_3 {
        position: absolute;
        top: 377vw;
        left: 0;
        text-align: center;
        width: 100%;
        color: white;
        font-weight: bold;
        font-size: 4.5vw;
    }
    .dc13_3_2 {
        padding-left: 1vw;
        padding-right: 1vw;
        background-color: var(--f4);
        animation-name: dc13_3_2_ani;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        /* animation-timing-function: linear; */
    }
    @keyframes dc13_3_2_ani {
        0% {
            background-color: var(--f4);
        }
        50% {
            background-color: #1d2f77;
        }
        100% {
            background-color: var(--f4);
        }
    }
    .dc13_4_1 {
        position: absolute;
        top: 426vw;
        left: 5vw;
        width: 90vw;
        text-align: center;
        color: white;
        font-weight: bold;
        font-size: 2vw;
        /* border: solid red; */
        display: flex;
        align-items: flex-start;
        justify-content: center;
        text-align: center;
    }
    .dc13_4_2 {
        width: 22%;
        margin-left: 1.5%;
        margin-right: 1.5%;
        text-align: center;
        color: white;
        font-weight: normal;
        font-size: 3vw;
        line-height: 4.5vw;
        /* position: relative; */
        /* height: 12vw; */
        /* border: solid red;*/
    }
    .dc13_4_3 {
        filter: brightness(10);
        width: 100%;
        height: 13vw;
        /* border: solid red; */
        display: block;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: auto 65%;
    }
    .dc13_4_4 {
        margin-top: 1vw;
        /* border: solid red; */
        width: 90%;
        display: inline-block;
    }
    .dc14_1 {
        scroll-margin: 18vw;
        position: absolute;
        top: 470vw;
        left: 0;
        text-align: center;
        width: 100%;
        color: white;
        font-weight: bold;
        font-size: 6vw;
    }
    .dc14_2 {
        position: absolute;
        top: 482vw;
        left: 10%;
        text-align: center;
        width: 80%;
        color: white;
        /* font-weight: bold; */
        font-size: 3.8vw;
        line-height: 3.9vw;
    }
    .dc14_3 {
        position: absolute;
        top: 500vw;
        left: 10.6vw;
        width: 80vw;
        height: 139vw;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(../images/i14.png);
        overflow: hidden;
        text-align: center;
        background-color: black;
        overflow: hidden;
        border-radius: 6.9vw;
        box-shadow: 0vw 1vw 1vw rgb(5 8 20 / 36%);
    }
    .dc14_4 {
        display: block;
        width: 75.7vw;
        height: 155vw;
        position: absolute;
        top: 1vw;
        left: 2.25vw;
        margin: 0 auto;
        padding: 0px;
        border: 0px none;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 2vw;
    }
    .dc15 {
        width: 100%;
        display: inline-block;
        position: relative;
        /* height: 20vw; */
    }
    .dc15_1 {
        position: relative;
        background-color: white;
        /* border: solid red; */
        width: 100%;
        display: inline-block;
        position: relative;
        height: 77vw;
        overflow: hidden;
    }
    .dc15_2 {
        background-color: var(--f4);
        /* border: solid red; */
        width: 200vw;
        height: 100vw;
        position: absolute;
        left: -50vw;
        top: 44vw;
        border-radius: 50%;
    }
    .dc15_2_1 {
        background-color: rgb(48 75 178 / 15%);
        /* border: solid red; */
        width: 100vw;
        height: 100vw;
        position: absolute;
        left: -50vw;
        top: 27vw;
        border-radius: 50%;
    }
    .dc15_2_2 {
        background-color: rgb(48 75 178 / 15%);
        /* border: solid red; */
        width: 100vw;
        height: 100vw;
        position: absolute;
        left: -40vw;
        top: 33vw;
        border-radius: 50%;
    }
    .dc15_2_3 {
        background-color: rgb(48 75 178 / 15%);
        /* border: solid red; */
        width: 100vw;
        height: 100vw;
        position: absolute;
        right: -50vw;
        top: 27vw;
        border-radius: 50%;
    }
    .dc15_2_4 {
        background-color: rgb(48 75 178 / 15%);
        /* border: solid red; */
        width: 100vw;
        height: 100vw;
        position: absolute;
        right: -40vw;
        top: 33vw;
        border-radius: 50%;
    }
    .dc15_3 {
        width: 70vw;
        height: 50vw;
        position: absolute;
        left: 15vw;
        top: 10vw;
        /* border: solid red; */
        background-image: url(../images/equipo.png);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .dc15_4 {
        width: 40vw;
        height: 10vw;
        position: absolute;
        left: 30vw;
        top: 54vw;
        /* border: solid red; */
        background-image: url(../images/2cingenieria.png);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100%;
    }
    .dc15_5 {
        width: 100%;
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        /* margin-top: 37vw; */
        font-size: 1.3vw;
        position: absolute;
        top: 30vw;
        display: flex;
        /* border: solid red; */
        justify-content: center;
        align-items: center;
        display: none;
    }
    .dc15_6 {
        width: 100%;
        /* border: solid red; */
        text-align: center;
        /* margin-top: 3vw; */
        color: rgba(255, 255, 255, 0.7);
        font-size: 2.5vw;
        position: absolute;
        top: 67vw;
    }
    .dc16 {
        background-color: var(--f4);
        position: relative;
        width: 100%;
        height: 38vw;
        /* border: solid red; */
        display: inline-block;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        animation: dc16_ani 7s;
        animation-timing-function: linear;
        animation-duration: 12s;
        /* margin-bottom: 3.7vw; */
    }
    @keyframes dc16_ani {
        from {
            background-position: center bottom;
        }
        to {
            background-position: center top;
        }
    }
    .dc16_1_1 {
        background-image: url(../images/hd_aplicaciones_mision_critica.jpg);
    }
    .dc16_1_2 {
        background-image: url(../images/hd_facturacion_electronica.jpg);
    }
    .dc16_1_3 {
        background-image: url(../images/hd_integracion_con_medios_de_pago.jpg);
    }
    .dc16_1_4 {
        background-image: url(../images/hd_comercio_online.jpg);
    }
    .dc16_1_5 {
        background-image: url(../images/hd_desarrollo_sitio_web_corporativo.jpg);
    }
    .dc16_2 {
        display: inline-block;
        /* border: solid red; */
        text-align: center;
        width: 80%;
        font-size: 7vw;
        line-height: 7vw;
        margin-top: 17vw;
        margin-left: 10%;
        position: relative;
        z-index: 1;
    }
    .dc16_3 {
        /* padding-top: 3vw; */
        /* padding-bottom: 3vw; */
        width: 100%;
        height: 600vw;
        background-color: white;
        position: relative;
        /* margin-left: 10%; */
        /* background-color: silver; */
        /* z-index: 2; */
        position: relative;
        overflow: hidden;
        display: inline-block;
    }
    .dc16_4 {
        position: absolute;
        height: 130vw;
        width: 130vw;
        right: -15vw;
        top: 183vw;
        background-color: var(--f4);
        border-radius: 50%;
    }
    .dc16_5 {
        position: absolute;
        height: 150vw;
        width: 150vw;
        right: -25.5vw;
        top: 173vw;
        border: dashed 0.5vw var(--f4);
        border-radius: 50%;
        animation-name: dc16_5_ani;
        animation-duration: 200s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        /**/
    }
    @keyframes dc16_5_ani {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .dc16_6 {
        position: absolute;
        height: 170vw;
        width: 170vw;
        right: -36.5vw;
        top: 163vw;
        border: solid 0.5vw var(--f4);
        border-radius: 50%;
        opacity: 0.5;
    }
    .dc16_7 {
        position: absolute;
        top: 3vw;
        left: 0;
        width: 100%;
        height: 107vw;
        text-align: center;
        /* border: solid red; */
        /* display: flex; */
        /* justify-content: center;*/
    }
    .dc16_8 {
        width: 80vw;
        text-align: left;
        /* border: solid red; */
        /* margin-right: 3vw; */
        margin-left: 10vw;
        display: block;
    }
    .dc16_9 {
        width: 70vw;
        margin-left: 15vw;
        position: relative;
        margin-top: 5vw;
        display: block;
        /* border: solid blue; */
        /* transform: translateZ(-3px); */
        perspective: 50vw;
    }
    .dc16_10 {
        margin-top: 5vw;
        margin-bottom: 2vw;
        font-size: 4.8vw;
        line-height: 6vw;
        font-weight: bold;
        color: var(--f4);
        transition: all 0.25s;
        border-radius: 0.5vw;
        display: block;
    }
    /* .dc16_7:hover .dc16_10 {
        background-color: var(--f4);
        color: white;
        padding: 2vw;
        transition: all 0.25s;
    }
    .dc16_18:hover .dc16_10 {
        background-color: var(--f4);
        color: white;
        padding: 1vw;
        transition: all 0.25s;
    } */
    .dc16_11 {
        margin-top: 5vw;
        font-size: 3.5vw;
        line-height: 5vw;
        color: var(--f3);
    }
    .dc16_12 {
        border-radius: 0.55vw;
        width: 40vw;
        height: 27vw;
        /* background-attachment: fixed; */
        opacity: 0.2;
        background-size: cover;
        background-position: left top;
        position: absolute;
        top: 0;
        left: 3vw;
        transition: all 1.8s;
        /* animation-name: dc16_12_ani;
        animation-duration: 1.5s;
        animation-iteration-count: 1;
        animation-timing-function: linear; */
        transform-style: preserve-3d;
        transform: rotateY(0deg);
        display: none;
    }
    /* .dc16_7:hover .dc16_12 {
        transition: all 1.5s;
        transform: rotateY(-15deg);
    }
    .dc16_7:hover .dc16_13 {
        transition: all 0.8s;
        transform: rotateY(-15deg);
    } */
    .dc16_13 {
        background-color: var(--f4);
        box-shadow: 0vw 0vw 2vw rgb(0 0 0 / 30%);
        border-radius: 2.55vw;
        width: 69vw;
        height: 45vw;
        /* background-attachment: fixed; */
        background-size: cover;
        background-position: left top;
        position: absolute;
        top: 2vw;
        left: 0;
        transition: all 1s;
        transform-style: preserve-3d;
        transform: rotateY(0deg);
    }
    /* .dc16_18:hover .dc16_12 {
        transition: all 1.5s;
        transform: rotateY(-15deg);
    }
    .dc16_18:hover .dc16_13 {
        transition: all 0.8s;
        transform: rotateY(-15deg);
    } */
    .dc16_14 {
        width: 100%;
        height: 100vw;
        /* background-attachment: fixed; */
        background-size: auto 100vw;
        background-position: center top;
        position: absolute;
        /* background-repeat: no-repeat; */
        top: 130vw;
        left: 0;
        transition: all 0.3s;
        animation-name: dc16_14_ani;
        animation-duration: 70s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    @keyframes dc16_14_ani {
        0% {
            background-position: 0vw top;
        }
        100% {
            background-position: -159.7vw top;
        }
    }
    .dc16_14_1 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgb(48 75 178 / 10%);
    }
    .dc16_15 {
        position: absolute;
        color: white !important;
        top: 204vw;
        left: 15vw;
        width: 70vw;
    }
    .dc16_16 {
        margin-top: 5vw;
        margin-bottom: 6vw;
        font-size: 4.8vw;
        line-height: 6vw;
        font-weight: bold;
        color: white;
        display: block;
    }
    .dc16_17 {
        font-size: 3.5vw;
        line-height: 5vw;
        color: white;
    }
    .dc16_18 {
        position: absolute;
        top: 353vw;
        left: 0;
        width: 100%;
        height: 107vw;
        text-align: left;
        /* border: solid red; */
        /* display: flex; */
        /* justify-content: center;*/
    }
    .dc17_1 {
        width: 100%;
        height: 40vw;
        /* border: solid red; */
        position: absolute;
        top: 465vw;
        left: 0;
        text-align: center;
        display: inline-block;
    }
    .dc17_2 {
        -webkit-text-stroke: 0.35vw var(--f4);
        color: transparent;
        font-size: 12vw;
        display: inline-block;
        width: 100%;
        font-weight: bold;
    }
    .dc17_3 {
        display: inline-block;
        /* border: solid red; */
        width: 80%;
        /* margin-left: 25%; */
        font-size: 3.5vw;
        line-height: 5vw;
        color: var(--f3);
    }
    .dc17_4 {
        margin-top: 7vw;
        width: 70%;
        /* border: solid red; */
    }
    .dc17_5 {
        width: 100%;
        height: 26vw;
        /* border: solid red; */
        background-size: auto 70%;
        transition: all 0.3s;
    }
    .dc17_6 {
        /* border: solid blue; */
        width: 70%;
        color: var(--f4);
        font-size: 3.3vw;
        line-height: 3.5vw;
        margin-bottom: 5vw;
        font-weight: bold;
    }
    /* it */
    .dc17_5_1_1 {
        background-image: url(../images/amc_4.svg);
    }
    .hit:hover .dc17_5_1_1 {
        background-image: url(../images/amc_4h.svg);
    }
    .dc17_5_2_1 {
        background-image: url(../images/amc_5.svg);
    }
    .hit:hover .dc17_5_2_1 {
        background-image: url(../images/amc_5h.svg);
    }
    .dc17_5_3_1 {
        background-image: url(../images/amc_6.svg);
    }
    .hit:hover .dc17_5_3_1 {
        background-image: url(../images/amc_6h.svg);
    }
    .dc17_5_4_1 {
        background-image: url(../images/amc_7.svg);
    }
    .hit:hover .dc17_5_4_1 {
        background-image: url(../images/amc_7h.svg);
    }
    /* it */
    .dc17_5_1_2 {
        background-image: url(../images/fe_4.svg);
    }
    .hit:hover .dc17_5_1_2 {
        background-image: url(../images/fe_4h.svg);
    }
    .dc17_5_2_2 {
        background-image: url(../images/fe_5.svg);
    }
    .hit:hover .dc17_5_2_2 {
        background-image: url(../images/fe_5h.svg);
    }
    .dc17_5_3_2 {
        background-image: url(../images/fe_6.svg);
    }
    .hit:hover .dc17_5_3_2 {
        background-image: url(../images/fe_6h.svg);
    }
    .dc17_5_4_2 {
        background-image: url(../images/fe_7.svg);
    }
    .hit:hover .dc17_5_4_2 {
        background-image: url(../images/fe_7h.svg);
    }
    /* it */
    .dc17_5_1_3 {
        background-image: url(../images/imp_4.svg);
    }
    .hit:hover .dc17_5_1_3 {
        background-image: url(../images/imp_4h.svg);
    }
    .dc17_5_2_3 {
        background-image: url(../images/imp_5.svg);
    }
    .hit:hover .dc17_5_2_3 {
        background-image: url(../images/imp_5h.svg);
    }
    .dc17_5_3_3 {
        background-image: url(../images/imp_6.svg);
    }
    .hit:hover .dc17_5_3_3 {
        background-image: url(../images/imp_6h.svg);
    }
    .dc17_5_4_3 {
        background-image: url(../images/imp_7.svg);
    }
    .hit:hover .dc17_5_4_3 {
        background-image: url(../images/imp_7h.svg);
    }
    /* it */
    .dc17_5_1_4 {
        background-image: url(../images/cocc_4.svg);
    }
    .hit:hover .dc17_5_1_4 {
        background-image: url(../images/cocc_4h.svg);
    }
    .dc17_5_2_4 {
        background-image: url(../images/cocc_5.svg);
    }
    .hit:hover .dc17_5_2_4 {
        background-image: url(../images/cocc_5h.svg);
    }
    .dc17_5_3_4 {
        background-image: url(../images/cocc_6.svg);
    }
    .hit:hover .dc17_5_3_4 {
        background-image: url(../images/cocc_6h.svg);
    }
    .dc17_5_4_4 {
        background-image: url(../images/cocc_7.svg);
    }
    .hit:hover .dc17_5_4_4 {
        background-image: url(../images/cocc_7h.svg);
    }
    /* it */
    .dc17_5_1_5 {
        background-image: url(../images/ddwc_4.svg);
    }
    .hit:hover .dc17_5_1_5 {
        background-image: url(../images/ddwc_4h.svg);
    }
    .dc17_5_2_5 {
        background-image: url(../images/ddwc_5.svg);
    }
    .hit:hover .dc17_5_2_5 {
        background-image: url(../images/ddwc_5h.svg);
    }
    .dc17_5_3_5 {
        background-image: url(../images/ddwc_6.svg);
    }
    .hit:hover .dc17_5_3_5 {
        background-image: url(../images/ddwc_6h.svg);
    }
    .dc17_5_4_5 {
        background-image: url(../images/ddwc_7.svg);
    }
    .hit:hover .dc17_5_4_5 {
        background-image: url(../images/ddwc_7h.svg);
    }
    .dc18_1 {
        top: 0vw;
        left: -22vw;
        position: absolute;
        width: 21.7vw;
        height: 11.3vw;
        /* box-shadow: 5vw 7vw 4vw rgba(0, 0, 0, 0.3); */
        /* border: solid red; */
        background-image: url(../images/nube.png);
        animation-name: dc18_1_ani;
        animation-duration: 40s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        z-index: 3;
        transition: all 0.3s;
    }
    .dc18_1:hover {
        background-image: url(../images/nubeh.png);
        transition: all 0.3s;
    }
    @keyframes dc18_1_ani {
        0% {
            /* box-shadow: 0vw 30vw 5vw rgba(0, 0, 0, 0.0); */
            left: -22vw;
        }
        100% {
            /* box-shadow: 5vw 30vw 5vw rgba(0, 0, 0, 0.0); */
            left: 103vw;
        }
    }
    .dc18_2 {
        top: 0vw;
        left: 105vw;
        position: absolute;
        width: 0vw;
        height: 0vw;
        /* box-shadow: 5vw 7vw 4vw rgba(0, 0, 0, 0.3); */
        /* border: solid red; */
        background-image: url(../images/nubeb.png);
        animation-name: dc18_2_ani;
        animation-duration: 300s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        /* z-index: 3; */
        transition: all 0.3s;
    }
    @keyframes dc18_2_ani {
        0% {
            left: 101.5vw;
            top: 7vw;
            width: 4vw;
            height: 2vw;
        }
        50% {
            left: -5.5vw;
            top: 7vw;
            width: 5vw;
            height: 2.5vw;
        }
        50.001% {
            left: 101.5vw;
            top: 0vw;
            width: 2vw;
            height: 1vw;
        }
        100% {
            left: -2.5vw;
            top: 0vw;
            width: 2vw;
            height: 1vw;
        }
    }
}


/* PRINT ----------------------------------------------------- */

@media print {}