@font-face {
    font-family: 'f-bold';
    src: url('../fonts/SpaceGrotesk-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-feature-settings: 'ss03' on;
}

@font-face {
    font-family: 'f-medium';
    src: url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-feature-settings: 'ss03' on;
}

@font-face {
    font-family: 'f-light';
    src: url('../fonts/SpaceGrotesk-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-feature-settings: 'ss03' on;
}

@font-face {
    font-family: 'f-semibold';
    src: url('../fonts/SpaceGrotesk-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-feature-settings: 'ss03' on;
}

@font-face {
    font-family: 'f-regular';
    src: url('../fonts/SpaceGrotesk-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-feature-settings: 'ss03' on;
}

/* Loader effects is here because of the variables that we are using with the js script */

:root {
    --scaleHeight: 0;
    --tx: 0;
}

/* ---------------------CODIGO ORIGINAL ------------------------*/

@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false
}

.counter {
    transition: --num 2s;
    counter-set: num var(--num);
}

.is-inview .counter.c_services_1 {
    --num: 45;
}

.is-inview .counter.c_services_2 {
    --num: 65;
    transition: --num 3s;
}

.is-inview .counter.c_services_3 {
    --num: 40;
    transition: --num 3s;
}

.is-inview .counter.c_services_4 {
    --num: 57;
    transition: --num 3s;
}

.is-inview .counter.c_services_5 {
    --num: 90;
    transition: --num 3s;
}

.is-inview .counter.c_services_6 {
    --num: 87;
    transition: --num 3s;
}

.is-inview .counter.c_services_7 {
    --num: 25;
    transition: --num 3s;
}

.is-inview .counter.c_services_8 {
    --num: 65;
    transition: --num 3s;
}

.counter::after {
    content: counter(num) '%';
}




/* ---------------------------------------------*/


/* .loader-logo-line-1 {
    transform: translateY(700%) translateX(-5.3vw) rotate(14deg) scaleY(var(--scaleHeight));
}

.loader-logo-line-3 {
    transform: translateY(-700%) translateX(5.3vw) rotate(14deg) scaleY(var(--scaleHeight));
} */

.step1 .loader-logo-line-1,
.step1 .loader-logo-line-3 {
    transition: all 1s cubic-bezier(0.77, 0, 0.175, 1);
    transform: rotate(14deg) scaleY(var(--scaleHeight)) translate(0, 0);
}

.step2 .loader-logo-line-1,
.step2 .loader-logo-line-3 {
    transition: all 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    transform: rotate(14deg) scaleY(1) translate(0, 0);
}

.step2 .loader-logo-line-2,
.step2 .loader-logo-line-4 {
    transition: all 1s;
    transition-delay: .85s;
    transform: scaleX(1);
}

.step3 .loader-logo-line {
    opacity: 0 !important;
}

.step3 .loader-logo-final svg {
    opacity: 1;
}

.step3 .loader-logo-progress {
    transform: scaleY(1);
}

@media only screen and (min-width: 950px) {  
    .loader-logo-line-1 {
        transform: translateY(700%) translateX(-5.3vw) rotate(14deg) scaleY(var(--scaleHeight));
    }
    
    .loader-logo-line-3 {
        transform: translateY(-700%) translateX(5.3vw) rotate(14deg) scaleY(var(--scaleHeight));
    }
}  

@media only screen and (max-width: 950px) {  
    .loader-logo-line-1 {
        transform: translateY(700%) translateX(-1.3vw) rotate(14deg) scaleY(var(--scaleHeight));
    }
    
    .loader-logo-line-3 {
        transform: translateY(-700%) translateX(1.3vw) rotate(14deg) scaleY(var(--scaleHeight));
    }
}