/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/*//////////////////////////////////////*/
/*//////////////////////////////////////*/
/*///////////////// DE /////////////////*/
/*//////////////////////////////////////*/
/*//////////////////////////////////////*/
@keyframes animTranslateXN0to108 {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-108%);
    }
}
.animTranslateXN0to108 {
    animation-duration: 0.5s;
    animation-name: animTranslateXN0to108;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateXN108to216 {
    0% {
        transform: translateX(-108%);
    }
    100% {
        transform: translateX(-216%);
    }
}
.animTranslateXN108to216 {
    animation-duration: 0.5s;
    animation-name: animTranslateXN108to216;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateXN216to108 {
    0% {
        transform: translateX(-216%);
    }
    100% {
        transform: translateX(-108%);
    }
}
.animTranslateXN216to108 {
    animation-duration: 0.5s;
    animation-name: animTranslateXN216to108;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateXN108to0 {
    0% {
        transform: translateX(-108%);
    }
    100% {
        transform: translateX(0%);
    }
}
.animTranslateXN108to0 {
    animation-duration: 0.5s;
    animation-name: animTranslateXN108to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateXN0to216 {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-216%);
    }
}
.animTranslateXN0to216 {
    animation-duration: 1s;
    animation-name: animTranslateXN0to216;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateXN216to0 {
    0% {
        transform: translateX(-216%);
    }
    100% {
        transform: translateX(0%);
    }
}
.animTranslateXN216to0 {
    animation-duration: 1s;
    animation-name: animTranslateXN216to0;
    animation-fill-mode: forwards;
}
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/*//////////////////////////////////////*/
/*//////////////////////////////////////*/
/*///////////////// CC /////////////////*/
/*//////////////////////////////////////*/
/*//////////////////////////////////////*/
@keyframes translateY26to0 {
    0% {
        transform: translateY(26vh);
    }
    100% {
        transform: translateY(0);
    }
}
.translateY26to0 {
    animation-duration: 0.5s;
    animation-name: translateY26to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes translateY0to26 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(26vh);
    }
}
.translateY0to26 {
    animation-duration: 0.5s;
    animation-name: translateY0to26;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX0to108Y26to0 {
    0% {
        transform: translate(0, 26vh);
    }
    50% {
        transform: translate(108%, 26vh);
    }
    100% {
        transform: translate(108%, 0);
    }
}
.animTranslateX0to108Y26to0 {
    animation-duration: 0.5s;
    animation-name: animTranslateX0to108Y26to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX108to0Y0to26 {
    0% {
        transform: translate(108%, 0);
    }
    50% {
        transform: translate(108%, 26vh);
    }
    100% {
        transform: translate(0, 26vh);
    }
}
.animTranslateX108to0Y0to26 {
    animation-duration: 0.5s;
    animation-name: animTranslateX108to0Y0to26;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateXN0to108Y26to0 {
    0% {
        transform: translate(0, 26vh);
    }
    50% {
        transform: translate(-108%, 26vh);
    }
    100% {
        transform: translate(-108%, 0);
    }
}
.animTranslateXN0to108Y26to0 {
    animation-duration: 0.5s;
    animation-name: animTranslateXN0to108Y26to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateXN108to0Y0to26 {
    0% {
        transform: translate(-108%, 0);
    }
    50% {
        transform: translate(-108%, 26vh);
    }
    100% {
        transform: translate(0, 26vh);
    }
}
.animTranslateXN108to0Y0to26 {
    animation-duration: 0.7s;
    animation-name: animTranslateXN108to0Y0to26;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX0to108Y0to0 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(108%, 0);
    }
}
.animTranslateX0to108Y0to0 {
    animation-duration: 0.5s;
    animation-name: animTranslateX0to108Y0to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX108to0Y0to0 {
    0% {
        transform: translate(108%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
.animTranslateX108to0Y0to0 {
    animation-duration: 0.5s;
    animation-name: animTranslateX108to0Y0to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateXN0to108Y0to0 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-108%, 0);
    }
}
.animTranslateXN0to108Y0to0 {
    animation-duration: 0.5s;
    animation-name: animTranslateXN0to108Y0to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateXN108to0Y0to0 {
    0% {
        transform: translate(-108%, 0);
    }
    100% {
        transform: translate(0%, 0);
    }
}
.animTranslateXN108to0Y0to0 {
    animation-duration: 0.5s;
    animation-name: animTranslateXN108to0Y0to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX108toXN108Y0to0 {
    0% {
        transform: translate(108%, 0);
    }
    100% {
        transform: translate(-108%, 0);
    }
}
.animTranslateX108toXN108Y0to0 {
    animation-duration: 1s;
    animation-name: animTranslateX108toXN108Y0to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateXN108toX108Y0to0 {
    0% {
        transform: translate(-108%, 0);
    }
    100% {
        transform: translate(108%, 0);
    }
}
.animTranslateXN108toX108Y0to0 {
    animation-duration: 1s;
    animation-name: animTranslateXN108toX108Y0to0;
    animation-fill-mode: forwards;
}
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/*//////////////////////////////////////*/
/*//////////////////////////////////////*/
/*///////////////// AS /////////////////*/
/*//////////////////////////////////////*/
/*//////////////////////////////////////*/
@keyframes translateY52to0 {
    0% {
        transform: translateY(52vh);
    }
    100% {
        transform: translateY(0);
    }
}
.translateY52to0 {
    animation-duration: 0.5s;
    animation-name: translateY52to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes translateY0to52 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(52vh);
    }
}
.translateY0to52 {
    animation-duration: 0.5s;
    animation-name: translateY0to52;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX0to108Y52to0 {
    0% {
        transform: translate(0, 52vh);
    }
    50% {
        transform: translate(108%, 52vh);
    }
    100% {
        transform: translate(108%, 0);
    }
}
.animTranslateX0to108Y52to0 {
    animation-duration: 0.5s;
    animation-name: animTranslateX0to108Y52to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX108to0Y0to52 {
    0% {
        transform: translate(108%, 0);
    }
    50% {
        transform: translate(108%, 52vh);
    }
    100% {
        transform: translate(0, 52vh);
    }
}
.animTranslateX108to0Y0to52 {
    animation-duration: 0.5s;
    animation-name: animTranslateX108to0Y0to52;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX0to216Y52to0 {
    0% {
        transform: translate(0, 52vh);
    }
    50% {
        transform: translate(216%, 52vh);
    }
    100% {
        transform: translate(216%, 0);
    }
}
.animTranslateX0to216Y52to0 {
    animation-duration: 1s;
    animation-name: animTranslateX0to216Y52to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX216to0Y0to52 {
    0% {
        transform: translate(216%, 0);
    }
    50% {
        transform: translate(216%, 52vh);
    }
    100% {
        transform: translate(0, 52vh);
    }
}
.animTranslateX216to0Y0to52 {
    animation-duration: 1s;
    animation-name: animTranslateX216to0Y0to52;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX0to108Y0to0 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(108%, 0);
    }
}
.animTranslateX0to108Y0to0 {
    animation-duration: 0.5s;
    animation-name: animTranslateX0to108Y0to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX108to0Y0to0 {
    0% {
        transform: translate(108%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
.animTranslateX108to0Y0to0 {
    animation-duration: 0.5s;
    animation-name: animTranslateX108to0Y0to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX0to216Y0to0 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(216%, 0);
    }
}
.animTranslateX0to216Y0to0 {
    animation-duration: 1s;
    animation-name: animTranslateX0to216Y0to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX216to0Y0to0 {
    0% {
        transform: translate(216%, 0);
    }
    100% {
        transform: translate(0%, 0);
    }
}
.animTranslateX216to0Y0to0 {
    animation-duration: 1s;
    animation-name: animTranslateX216to0Y0to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX108to216Y0to0 {
    0% {
        transform: translate(108%, 0);
    }
    100% {
        transform: translate(216%, 0);
    }
}
.animTranslateX108to216Y0to0 {
    animation-duration: 0.5s;
    animation-name: animTranslateX108to216Y0to0;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes animTranslateX216to108Y0to0 {
    0% {
        transform: translate(216%, 0);
    }
    100% {
        transform: translate(108%, 0);
    }
}
.animTranslateX216to108Y0to0 {
    animation-duration: 0.5s;
    animation-name: animTranslateX216to108Y0to0;
    animation-fill-mode: forwards;
}
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/*//////////////////////////////////////*/
/*//////////////////////////////////////*/
/*///////////////// BR /////////////////*/
/*//////////////////////////////////////*/
/*//////////////////////////////////////*/
@keyframes BradiusON {
    0% {
        border-radius: 20px 20px 20px 20px;
    }
    100% {
        border-radius: 20px 20px 0 0;
    }
}
.BradiusON {
    animation-duration: 0.33s;
    animation-name: BradiusON;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes BradiusOFF {
    0% {
        border-radius: 20px 20px 0 0;
    }
    100% {
        border-radius: 20px 20px 20px 20px;
    }
}
.BradiusOFF {
    animation-duration: 0.33s;
    animation-name: BradiusOFF;
    animation-fill-mode: forwards;
}

/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/*//////////////////////////////////////*/
/*//////////////////////////////////////*/
/*/////////////// HEIGHT ///////////////*/
/*//////////////////////////////////////*/
/*//////////////////////////////////////*/
@keyframes heightON {
    0% {
        height: 0;
    }
    100% {
        height: 120vh;
    }
}
.heightON {
    animation-duration: 1s;
    animation-name: heightON;
    animation-fill-mode: forwards;
}
/****************************************/
@keyframes heightOFF {
    0% {
        height: 120vh;
    }
    100% {
        height: 0;
    }
}
.heightOFF {
    animation-duration: 1s;
    animation-name: heightOFF;
    animation-fill-mode: forwards;
}
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
/****************************************/
#divBoxServiceDE,
#divBoxServiceCC,
#divBoxServiceAS {
    width: 80%;
    overflow: hidden;
}
#divServiceDE,
#divServiceCC,
#divServiceAS {
    margin: 2vh auto 0 auto;
}
#btnDELS,
#btnCCLS,
#btnASLS {
    margin-bottom: 20px;
}
.translateX {
    transform: translate(-108%, 0);
}