@font-face {
    font-family: 'kis_btitalic';
    src: url('../fonts/kisbtitalic-webfont.woff2') format('woff2'),
        url('../fonts/kisbtitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'radio_canada_bigitalic';
    src: url('../fonts/radiocanadabig-italic-variablefont_wght-webfont.woff2') format('woff2'),
        url('../fonts/radiocanadabig-italic-variablefont_wght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'radio_canada_bigregular';
    src: url('../fonts/radiocanadabig-variablefont_wght-webfont.woff2') format('woff2'),
        url('../fonts/radiocanadabig-variablefont_wght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sequel_sansbook_body';
    src: url('../fonts/sequel_sans_book_body-webfont.woff2') format('woff2'),
        url('../fonts/sequel_sans_book_body-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sequel_sansbold_body';
    src: url('../fonts/sequel_sans_bold_body-webfont.woff2') format('woff2'),
        url('../fonts/sequel_sans_bold_body-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sequel_sansheavy_head';
    src: url('../fonts/sequel_sans_heavy_head-webfont.woff2') format('woff2'),
        url('../fonts/sequel_sans_heavy_head-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'FreightBig Pro';
    src: local('FreightBig Pro Light Italic'), local('FreightBig-Pro-Light-Italic'),
        url('../fonts/FreightBigProLight-Italic.woff2') format('woff2'),
        url('../fonts/FreightBigProLight-Italic.woff') format('woff'),
        url('../fonts/FreightBigProLight-Italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'FreightBig_medium Pro';
    src: local('FreightBig Pro Medium Italic'), local('FreightBig-Pro-Medium-Italic'),
        url('../fonts/FreightBigProMedium-Italic.woff2') format('woff2'),
        url('../fonts/FreightBigProMedium-Italic.woff') format('woff'),
        url('../fonts/FreightBigProMedium-Italic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    width: fit-content;
}

a:hover {
    text-decoration: none;
}

body {
    font-family: "Radio Canada Big", sans-serif;
    font-family: "Radio Canada Big";
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #000000;
    /*opacity: 0;*/
    overflow-x: hidden;
    font-variant-ligatures: common-ligatures;
}

.wrapper {
    width: 90%;
    margin: 0 5%;
}




#home #top {
    position: fixed;
    padding: 2.6041667vw 0 0;
    background: rgba(0, 0, 0, 0);
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 1000;
    transition: all 0.5s;
    mix-blend-mode: normal;
}

#home #top.diff {
    mix-blend-mode: difference;
}

.interna #top {
    position: fixed;
    padding: 2.6041667vw 0 0;
    background: rgba(0, 0, 0, 0);
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 1000;
    transition: all 0.5s;
    mix-blend-mode: difference;
}

.interna #top.diff {
    mix-blend-mode: normal;
}

.top_logo {
    width: 16.09375vw;
    margin-left: 2.6041667vw;
    height: auto;
    transform-origin: top left;
}

.toggle_menu {
    position: relative;
    transform-origin: center center;
    width: 2.8125vw;
    height: 2.8125vw;
    margin-right: 2.6041667vw;
    transition: all .3s;
    cursor: pointer;
}

.toggle_menu div {
    position: absolute;
    top: 24px;
    top: 1.25vw;
    width: 54px;
    width: 2.8125vw;
    height: 6px;
    height: 0.3125vw;
    background: #FFFFFF;
}

.desktop_only {
    display: block;
}

.mobile_only {
    display: none;
}

@media (max-width: 768px) {
    .desktop_only {
        display: block;
    }

    .mobile_only {
        display: none;
    }

    #home #top {
        padding: 4vw 0 0;
    }

    .top_logo {
        width: 26vw;
        margin-left: 4vw;
        height: auto;
        transform-origin: top left;
    }

    .toggle_menu {
        width: 34px;
        height: 34px;
        margin-right: 4vw;
        transition: all .3s;
        cursor: pointer;
    }

    .toggle_menu div {
        top: 15px;
        width: 34px;
        height: 4px;
    }
}

@media (max-width: 430px) {
    .desktop_only {
        display: none;
    }

    .mobile_only {
        display: block;
    }

    .top_logo {
        width: 40vw;
        margin-left: 4vw;
        height: auto;
        transform-origin: top left;
        margin-top: 1vw;
    }
}



.toggle_menu.active {
    position: relative;
    transform-origin: center center;
    width: 54px;
    width: 2.8125vw;
    height: 54px;
    height: 2.8125vw;
    margin-right: 2.6041667vw;
    transform: rotate(45deg);
}

.toggle_contact {
    position: absolute;
    transform-origin: center center;
    width: 27px;
    height: 27px;
    margin: auto 0;
    transform: rotate(0);
    top: 24px;
    right: 0;
    cursor: pointer;
    transition: all 0.6s ease;
}

.toggle_contact div {
    position: absolute;
    top: 12px;
    width: 27px;
    height: 3px;
    background: #FFFFFF;
}

#top .toggle_menu div:nth-child(2),
.toggle_contact div:nth-child(2) {
    transform: rotate(90deg)
}

.active .toggle_contact {
    transform: rotate(45deg);
    cursor: pointer;
    transition: all 0.6s ease;
}

#side_menu.active {
    position: fixed;
    top: -1vh;
    right: 0;
    width: calc(50vw - 20vh);
    height: calc(102vh - 10vh);
    background: #000000;
    padding: 5vh 10vh;
    font-size: 6.25vw;
    line-height: 6.944427083vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 101;
    transform: translateX(0);
    transition: all .3s;
}

#side_menu {
    position: fixed;
    top: -1vh;
    right: 0;
    width: calc(50vw - 20vh);
    height: calc(102vh - 10vh);
    background: #000000;
    padding: 5vh 10vh;
    font-size: 6.25vw;
    line-height: 6.944427083vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 101;
    transform: translateX(100%);
    transition: all .3s;
}

#side_menu.hidd {
    opacity: 0;
}

#side_menu a {
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    margin-bottom: 0.175em;
}

#side_menu a::after {
    content: '';
    background: #000000;
    width: 100%;
    display: block;
    height: 0.1em;
}

#side_menu a:hover::after {
    content: '';
    background: #FFFFFF;
    width: 100%;
    display: block;
    height: 0.1em;
}

/*
#side_menu a:hover {
    text-decoration: underline;
}
*/
@media (max-width: 768px) {
    #side_menu.active {
        width: calc(50vw - 16vw);
        height: calc(102vh - 16vw);
        padding: 8vw;
        font-size: 6vw;
        line-height: 6.6vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 101;
        transform: translateX(0);
        transition: all .3s;
        row-gap: 2vh;
    }

    #side_menu {
        width: calc(50vw - 16vw);
        height: calc(1002vh - 16vw);
        padding: 8vw;
        font-size: 6vw;
        line-height: 6.6vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 101;
        transform: translateX(100%);
        transition: all .3s;
        row-gap: 2vh;
    }

    .toggle_menu.active {
        width: 34px;
        height: 34px;
        margin-right: 4vw;
    }

}

@media (max-width: 430px) {
    #side_menu.active {
        width: calc(100vw - 8vw);
        height: calc(102vh - 8vw);
        padding: 4vw;
        font-size: 12.25vw;
        line-height: 14vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 101;
        transform: translateX(0);
        transition: all .3s;
        row-gap: 3vh;
    }

}

/* =Main */
#intro {
    height: 100vh;
    position: relative;
    width: 100%;
    max-width: 100%;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    text-align: center;
    overflow: hidden;
    background: #666;
    background: url(../img/bg_reel.jpg);
    z-index: 10;
}

#intro:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#intro video {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-height: 120%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.contact_bar {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: start;
    margin: 0 auto;
    width: 100%;
    padding: 10px 0;
    background: #000000;
    color: #FFFFFF;
    font-size: 16pt;
    font-size: 1.111109375vw;
    line-height: 58pt;
    line-height: 4.027776042vw;
    column-gap: 1%;
}

.calltoA {
    display: flex;
    justify-content: space-between;
    width: 36%;
    padding: 10px 0;
}

.calltoA p {
    margin: 1px 0;
    line-height: 2.760416667vw;
}

.letswork {
    margin-left: 2.604166667vw;
}

.form-wrapper form {
    display: flex;
    flex-direction: column;
    row-gap: 0;
    align-items: flex-start;
}

.form-wrapper P {
    margin: 0;
}

.form-wrapper *:focus {
    outline: none;
}

input[type=text],
input[type=email],
textarea {
    width: 25em;
    padding: 0;
    height: 53px;
    height: 2.760416667vw;
    box-sizing: border-box;
    border: none;
    background: #000000;
    border-bottom: 1px solid #ffffff;
    color: #ffffff !important;
    display: block;
    clear: both;
    margin: 20px auto;
}

label#message {
    width: 100%;
    padding-top: 30px;

    font-weight: 100;
    color: #777777;
    text-align: left;
    line-height: 1.2;
}

textarea {
    width: 100%;
    margin-top: 10px;
    height: calc(2.760416667vw * 4);
    padding-top: 10px;
    border: 1px solid #FFFFFF;
}

input[type=email] {
    margin-top: 10px;
}

input[type=button],
input[type=submit],
input[type=reset] {
    background-color: #000000;
    border: 1px #ffffff solid;
    color: #FFFFFF !important;
    padding: 0 1em;
    height: 53px;
    height: 2.760416667vw;
    box-sizing: border-box;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
}

input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover {
    background-color: #ffffff;
    border: 1px #ffffff solid;
    color: #000000 !important;
    padding: 0 1em;
    height: 53px;
    height: 2.760416667vw;
    box-sizing: border-box;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
}

.contact_bar {
    padding-bottom: 0;
    height: calc(2.760416667vw + 30px);
    overflow: hidden;
    transition: all .6s ease;
}

.contact_bar #message,
.contact_bar #first,
.contact_bar #msg,
.contact_bar input[type=submit] {
    /*display: none;*/
}

.contact_bar.active {
    padding-bottom: 20px;
    height: 28em;
    height: calc(20.65624792vw + 148px);
    transition: all .6s ease;
}

.contact_bar.active #message,
.contact_bar.active #first,
.contact_bar.active #msg,
.contact_bar.active input[type=submit] {
    /*display: block;*/
}


.send {
    margin-left: 4.947916667vw;
}



@media (max-width: 768px) {
    .contact_bar {
        font-size: 14px;
    }

    .contact_bar.active {
        height: calc(20.65624792vw + 110px);
    }

    .letswork {
        margin-left: 4vw;
    }

    input[type=text],
    input[type=email],
    textarea {

        margin: 10px auto;
    }


    input[type=submit] {
        height: 4vw;
    }

    .toggle_contact {
        width: 20px;
        height: 20px;
        top: 17px;
    }

    .toggle_contact div {
        top: 9px;
        width: 20px;
        height: 2px;
    }

}

@media (max-width: 430px) {
    .contact_bar {
        font-size: 16px;
        flex-wrap: wrap;
        line-height: 1.2;
        justify-content: flex-start;
    }

    .contact_bar.active {
        height: calc(20.65624792vw + 210px);
    }

    .calltoA {
        display: flex;
        justify-content: space-between;
        width: fit-content;
        padding: 10px 0;
        column-gap: .4em;
    }

    .letswork {
        /* margin-left: 4vw; */
        /* line-height: 1.2; */
    }

    .form-wrapper {
        flex-wrap: wrap;
        margin-left: 4vw;
        /* margin-top: 1em; */
        width: 92%;
    }

    .form-wrapper form {
        display: flex;
        flex-direction: column;
        row-gap: 0;
        align-items: flex-start;
        width: 100%;
    }

    input[type=text],
    input[type=email],
    textarea {
        margin: 10px auto;
        height: 1.5em;
        width: 100%;
    }

    textarea {
        height: auto;
        padding-top: 10px;
    }

    input[type=text] {
        /* width: 19.66em; */
        /* height: 27px; */
        /* padding: 0; */
    }

    input[type=button],
    input[type=submit],
    input[type=reset] {
        height: 30px;
        margin: 1em 0;
    }

    .toggle_contact {
        position: absolute;
        right: 1vw;
        width: 18px;
        height: 18px;
    }

    .toggle_contact div {
        position: absolute;
        top: 9px;
        width: 18px;
        height: 2px;
        background: #FFFFFF;
    }
}


#main {
    position: relative;
    background-color: #FFF;
}

#laClinika {
    /* min-height: calc(100vh - 4.027776042vw - 20px - 5.208333334vw);
    min-height: calc(100vh - 5.208333334vw);*/
    align-content: center;
    background: #ffffff;
    z-index: 3;
}

#lck {
    z-index: 100;
    position: relative;
}

#laClinika .byline {
    text-transform: uppercase;
    font-size: 1.22vw;
    font-size: max(10px, 1.22vw);
    font-family: "Radio Canada Big", sans-serif;
    font-weight: 700;
    text-align: right;
    margin: .9em 0;
}

#laClinika .h2 {
    text-align: center;
    font-size: 2.77760417vw;
    font-size: clamp(30px, 2.77vw, 50px);
    line-height: 3.1250015622vw;
    line-height: 1.2;
    max-width: 18em;
    margin: 10vh auto;
    font-family: "Radio Canada Big", sans-serif;
    font-weight: 100;
}

.h2 em {
    font-family: 'FreightBig Pro';
    font-size: 1.15em;
    line-height: 1;
}

@media (max-width: 768px) {
    #laClinika {
        min-height: calc(100vh - 4.027776042vw - 20px - 5.208333334vw);
        min-height: calc(50vh - 5.208333334vw);
        /* align-content: center; */
        background: #ffffff;
        padding-top: 10vh;
    }

    #laClinika .byline {
        /* font-size: 2.6vw;
        font-family: "Radio Canada Big", sans-serif;
        font-weight: 700;
        text-align: right;
        margin: 1em 0;*/
    }

    #laClinika .h2 {}

    #laClinika .h2 h2 {
        font-family: "Radio Canada Big", sans-serif;
        text-align: center;
        font-size: 1em;
        line-height: 1.1;
        margin: 0 auto;
        font-weight: 100;
    }

    h2 em {
        font-family: 'FreightBig Pro';
        font-size: 8vw;
    }
}

@media (max-width: 430px) {
    #laClinika {
        padding: 0 4vw;
        padding-top: 8vh;
        min-height: 60vh;
        min-height: 1px;
    }

    #laClinika .byline {
        /*  font-size: 4.3vw;
        text-align: center;*/
    }

    #laClinika .h2 {
        font-size: 5.5vw;
    }

    #laClinika .h2 h2 {
        font-family: "Radio Canada Big", sans-serif;
        text-align: center;
        font-size: 1em;
        line-height: 1.2;
        margin: 0 auto;
        font-weight: 100;
    }

    h2 em {
        font-size: 9.33vw;
    }
}

#laClinika .h2 h2 {
    transition: transform .1s;

}

.content-wrapper {
    padding: 50px;
    padding: 2.604166667vw;
    position: relative;
}

.project {
    height: 100vh;
    position: relative;
    width: 100%;
    max-width: 100%;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    text-align: center;
    overflow: hidden;
    background: #000000;
    /*background: url(../img/bg_reel.jpg);   */

    /* due to pinSpacing being disabled */
    margin-bottom: 50vh;

}

@media (max-width: 430px) {
    .project {
        height: 50vh;

        /* due to pinSpacing being disabled */
        margin-bottom: 0;

    }
}

.project:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.project video {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-height: 110%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

img.fit,
video.fit {
    width: 100.1%;
    height: 100.1%;
    object-fit: cover;
    object-position: 50% 50%;
}

.project .project_name {
    position: absolute;
    bottom: 5vw;
    left: 2.6vw;
    width: calc(100% - 5.2vw);
    text-align: left;
    color: #FFFFFF;
    font-size: 1.8749999997vw;
    font-size: clamp(18px, 1.87vw, 36px);
    line-height: 1;
    font-weight: 700;
}

.txt-shdw {
    text-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
}

.project .project_name a {
    padding-left: 3.3vw;
    color: #FFFFFF;
    width: calc(100% - 3.3vw);
}

.project .project_name a:hover {
    color: #000000;
}

.pnamewrapper {
    /*clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);*/
    position: relative;
    width: 100%;
}

.project_name a::before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    width: 1.2em;
    height: 1.2em;
    background: url(../img/arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    top: 50%;
    transform: translateY(-50%);
}

.project_name a:hover:before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    width: 1.2em;
    height: 1.2em;
    background: url(../img/arrow_hover.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    top: 50%;
    transform: translateY(-50%);
}

.project .project_name em {
    font-family: 'FreightBig Pro';
    font-size: 1.1em;
    font-weight: 100;
}

.project .project_name em span {
    display: inline-block;
    transform: translateY(-3px);
}

.pname,
.pbrand {
    display: inline-block;
    position: relative;
}

.pinfo {
    position: absolute;
    font-size: .9rem;
    font-size: clamp(14px, 1vw, 20px);
    font-weight: 100;
    line-height: 1.1;
    padding: .5em 0;
    width: calc(100% - 3.3vw);
    max-width: 100%;
}

@media (max-width: 768px) {
    .project .project_name {
        bottom: 10vw;
        left: 4vw;
        font-size: 4vw;
        width: calc(100% - 8vw);
    }

    .project .project_name a {
        padding-left: 5vw;
        color: #FFFFFF;
        width: calc(100% - 5vw);
    }

    .project_name a::before {
        content: '';
        display: inline-block;
        position: absolute;
        left: 0;
        width: 3.8vw;
        height: 3.8vw;
        background: url(../img/arrow.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        top: 50%;
        transform: translateY(-50%);
    }

    .project .project_name em {}

    .pinfo {
        width: calc(100% - 10vw);
    }
}

@media (max-width: 430px) {
    .project .project_name {
        bottom: 20vw;
        width: calc(100% - 8vw);

    }

    .project .project_name a {
        padding-left: 26px;
        color: #FFFFFF;
    }

    .project_name a::before {
        width: 22px;
        height: 22px;
    }

    .project .project_name em {}

    .pinfo {
        width: calc(100% - 15vw);
        font-size: 13px;
    }
}

#numbers {
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding-top: 10vh;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.number-wrapper {
    display: flex;
    padding: 2.66vw;
    position: relative;
}

#numbers .content-wrapper {
    z-index: 100;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 4vw;
}



.seeMore a {
    display: block;
    width: 100%;
    background: #ffffff;
    color: #000000;
    border-bottom: #ffffff 1px solid;
    letter-spacing: .22em;
}

.seeMore a:hover {
    display: block;
    width: 100%;
    background: #000000;
    color: #FFFFFF;
    opacity: 1;
    border-bottom: #ffffff 1px solid;
}

.seeMore {
    font-size: 1.25vw;
    font-weight: 700;
    text-align: center;
    line-height: 7vw;
    border-top: 1px solid #000000;
}

.bigNumber {
    font-size: 220pt;
    font-size: 15.27776042vw;
    font-weight: 700;
    line-height: .75;
    padding-bottom: 11px;
    transform: translateX(-0.036em);
    max-width: 100%;
}

.bigNumber div.mas {
    display: inline-block;
    position: relative;
    height: 176px;
    height: 9.266666667vw;
    width: 154px;
    width: 8.020833333vw;
}

.bigNumber div.mas span {
    position: absolute;
    top: 67px;
    top: 3.489583333vw;
    width: 154px;
    width: 8.020833333vw;
    height: 20px;
    height: 1.041666667vw;
    background: #000000;
}

.bigNumber div span:nth-child(2) {
    transform: rotate(90deg);
}

.bigNumberText {
    font-size: 117pt;
    font-size: 8.125vw;
    font-size: clamp(46px, 8.125vw, 160px);
    line-height: .9;
    text-transform: uppercase;
    transform: translateX(-0.06em);
    max-width: 94.791666666vw;
}


.slide {
    position: relative;
    display: inline-block;
    width: calc(100vw - 5.2vw - 6px);
    min-width: calc(100vw - 5.2vw - 6px);
}

.slide img {
    width: 100%;
}

#slide-2 {
    transform: translateX(-100%);
}

#slide-3 {
    transform: translateX(-200%);
}

.char {
    transform: translateY(150px);
    transition: transform .3s;
    opacity: 0;
}

.bigNumber .char {
    transform: translateY(150px);
    transition: transform .3s;
    opacity: 0;
}

@media (max-width: 768px) {
    #numbers {
        /*min-height: 50vw;*/
        display: flex;
        flex-direction: column;
        justify-content: end;
        padding-top: 10vh;
    }

    .number-wrapper {
        /*display: flex;
        padding:0 4vw 2.66vw 4vw;*/
    }

    .slide {
        position: relative;
        display: inline-block;
        width: calc(100vw - 8vw);
        min-width: calc(100vw - 8vw);
    }

    .seeMore {
        font-size: 2vw;
        font-weight: 700;
        text-align: center;
        line-height: 7vw;
        border-top: 1px solid #000000;
    }
}

@media (max-width: 430px) {

    .seeMore {
        font-size: 4.2vw;
        line-height: 12vw;
    }
}


/* =Footer */
.footer-container {
    background: #000000;
    color: #FFFFFF;
    font-size: 18pt;
    font-size: 1.25vw;
}

.footer-container .socialNetworks {
    display: flex;
    flex-direction: column;
    text-align: right;
    line-height: 2;
    align-items: end;
    padding: 2.604166667vw;
}

.socialNetworks a {
    color: #ffffff !important;
    text-decoration: none;
    letter-spacing: 0.22em;
    font-weight: 700;
}

.footer-container .content-wrapper {
    display: flex;
    flex-direction: column;

}

.footer-container .letstalk {
    font-size: 30pt;
    font-size: 2.4vw;
    font-size: clamp(16px, 2.4vw, 46px);
}

.footer-container .madeinlima {
    text-align: right;
    font-size: clamp(16px, 1.8vw, 34px);
}

.footer-container a {
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .footer-container {
        background: #000000;
        color: #FFFFFF;
        font-size: 2vw;
    }

    .footer-container .content-wrapper {
        display: flex;
        flex-direction: column;
        padding: 4vw;
    }

    .footer-container .socialNetworks {
        line-height: 1.5;
        padding: 4vw;
        padding-bottom: 0;
    }

    .socialNetworks a {
        color: #ffffff !important;
        text-decoration: none;

        line-height: 2;
    }

    .footer-container .letstalk {
        font-size: 3vw;
    }
}

@media (max-width: 430px) {
    .footer-container .socialNetworks {
        line-height: 1.5;
        padding: 0;
    }

    .socialNetworks a {
        display: block;
        width: 100%;
        border-bottom: 1px solid #FFF;
        font-size: 4.2vw;
        line-height: 12vw;
        text-align: center;
    }

    .footer-container .content-wrapper {
        padding-top: 14vw;
        padding-bottom: 14vw;
    }

    .footer-container {
        font-size: 3.66vw;
    }

    .footer-container .letstalk {
        font-size: 6vw;
    }
}

.vglinel {
    position: fixed;
    top: 0;
    height: 100vh;
    left: 2.6041667vw;
    width: 1px;
    background: pink;
    z-index: 10000000;
}

.vgliner {
    position: fixed;
    top: 0;
    height: 100vh;
    right: 2.6041667vw;
    width: 1px;
    background: pink;
    z-index: 10000000;
}

.vglinec {
    position: fixed;
    top: 0;
    height: 100vh;
    left: calc(50% - 0.5px);
    width: 1px;
    background: pink;
    z-index: 10000000;
}

/*  ----------------------------------------------------------------------------------------------------------------
    Project*/
.interna #top {
    position: fixed;
}

.project_title {
    padding-top: 8vw;
    background: #FFFFFF;
}

.project_title h1 {
    padding: 5.9vw 2.6041667vw 1vw;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    font-size: 10.6vw;
    letter-spacing: -.02em;
    margin: 0;
    line-height: .8;
    display: flex;
    padding-left: calc(2.6041667vw - 0.0666em);
}

.project_title h1 span {
    font-family: 'FreightBig Pro';
    font-size: clamp(22px, 2.25vw, 43px);
    line-height: 1.15;
    padding: 0 .3em;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.project_title h3 {
    padding: 2.41667vw 2.6041667vw;
    max-width: 60em;
    font-weight: 500;
    letter-spacing: 0.055em;
    margin: 0;
    line-height: 1.3;
    font-size: 1.08vw;
    font-size: clamp(13px, 1.08vw, 20px);
    text-transform: uppercase;
}

.project_title .banner {
    height: calc(100vh - 8vw);
    height: auto;
    border-top: #000 1px solid;
    box-sizing: border-box;
}

.project_title .banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;

}

.vid_30vh {
    height: fit-content;
}

@media (max-width: 768px) {
    .project_title {
        padding-top: 10vw;
        background: #FFFFFF;
    }

    .project_title h3 {
        max-width: 55em;
    }
    .project_title .banner {
        height: calc(100vh - 42.32vw);
        height: auto;
        border-top: #000 1px solid;
    }

}

@media (max-width: 430px) {
    .project_title {
        padding-top: 14vw;
        background: #FFFFFF;
    }

    .project_title .banner {
        height: calc(100vh - 42.32vw);
        height: auto;
        border-top: #000 1px solid;
    }

    .project_title h1 {
        /*
        letter-spacing: -0.03em;
        font-size: 12vw;*/
    }

    .project_title h1 span {
        font-size: 18px;
    }

    .project_title h3 {
        padding: 4vw 2.6041667vw;
        letter-spacing: 0.025em;
        margin: 0;
    }

    .vid_30vh {
        height: 70vw;
    }
}

.challenge {
    padding-top: 5vmax;
    color: #FFFFFF;
    font-size: 1.25vw;
    font-size: clamp(15px, 1.125vw, 21px);
    font-weight: normal;
}

.challenge_row {
    max-width: 75%;
    padding: 2.41667vw 0;
    display: flex;
    margin: 0 auto;
}

.the_chall {
    /*width: 33.333%;*/
    letter-spacing: .15em;
    font-weight: 700;
}

.the_mid {
    text-align: left;
    padding-inline: 0.5em;
    flex-grow: 2;
    width: max-content;
}

.the_chat p {
    max-width: 21em;
}

.the_chat p:first-child {
    margin-top: 0;
}

.the_chat p:last-child {
    margin-bottom: 0;
}

.foto-challenge {
    display: block;
    position: relative;
}

.foto-challenge img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.foto-challenge .layer {
    position: absolute;
    top: 0;
    left: 0;
}

.foto-challenge .layer:nth-child(1) {
    z-index: 3;
}

.foto-challenge .layer:nth-child(2) {
    z-index: 2;
}

.foto-challenge .layer:nth-child(3) {
    z-index: 1;
}

.foto img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.row {
    display: flex;
    flex-direction: row;
}

.two_col {
    width: 50%;
    justify-content: center;
    display: flex;
}

.col_35 {
    width: 35%;
    justify-content: center;
    display: flex;
}

.col_63 {
    width: 63%;
    justify-content: center;
    display: flex;
}



@media (max-width: 768px) {
    .challenge {
        /*padding-top: 5vh;*/
        /*background: #d70012;*/
        /*font-size: 2vw;*/
    }

    #red_power .challenge {
        /* padding-top: 10vh;
        color: #FFFFFF;
        background: #d70012;*/
        /*font-size: 2vw;*/
    }

    .challenge_row {
        /*max-width: 94.68%;
        padding: 0 0 3vw;
        display: flex;
        margin: 0 auto;*/
    }

    .three_cols {
        flex-direction: column;
    }

    .three_cols .two_col {
        width: 100%;
        flex-direction: column;
    }

    .three_cols .the_chat {
        max-width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .three_cols .the_chall {
        width: 100%;
        text-align: center;
        margin-bottom: 1em;
    }

    .the_mid {
        text-align: center;
        min-width: 100%;
        margin-bottom: 1em;
    }

    .the_chat {
        max-width: 21em;
    }
}

@media (max-width: 430px) {

    .challenge {
        /*padding-top: 2vh;*/
    }

    #red_power .challenge {
        /* padding-top: 12vw;
        color: #FFFFFF;
        background: #d70012;
        margin-top: -1px;*/
    }

    .challenge_row {
        /*max-width: 80%;
        padding: 2.41667vw 0;
        display: flex;
        margin: 0 auto;*/
        flex-direction: column;
        max-width: 80%;
    }

    .row {
        display: flex;
        flex-direction: row;
    }

    .two_col {
        width: 100%;
        flex-direction: column;
    }

    .col_35 {
        width: 100%;
        justify-content: center;
        display: flex;
    }

    .col_63 {
        width: 100%;
        justify-content: center;
        display: flex;
    }

    .the_chall {
        letter-spacing: 2px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 1em;
    }

    .the_chat {
        max-width: 100%;
        text-align: center;
    }
}




.insight {
    position: relative;
    padding: 5.833333vw;
    background: #FFF;
}

.insight .foto {
    max-width: 100%;
}

#red_power .insight .foto-overlay {
    position: absolute;
    top: 5vw;
    left: 5vw;
    right: 5vw;
    bottom: 5vw;
    color: #FFF;
    padding: 6.822916667vw;
    align-content: center;
}

#red_power .insight h3 {
    font-size: 1.25vw;
    font-weight: 600;
    margin: 20vw 0 1.5em 0;
    letter-spacing: 2px;
}

#red_power .insight h4 {
    font-size: 3.472223958vw;
    line-height: 4.861111094vw;
    margin: 0;
}

#red_power .insight h4 em {
    font-size: 5.555572917vw;
    line-height: 5.902760417vw;
    font-family: 'FreightBig Pro';
    font-weight: 100;
    padding-top: .2em;
    display: block;
}

@media (max-width: 768px) {
    .insight {
        position: relative;
        padding: 5.8vw;
        background: #FFF;
    }

    #red_power .insight h3 {
        font-size: 2vw;
        font-weight: 600;
        margin: 20vw 0 1.5em 0;
        letter-spacing: 2px;
    }

    #red_power .insight h4 {
        font-size: 5.5555583328vw;
        line-height: 1.3;
        margin: 0;
    }

    #red_power .insight h4 em {
        font-size: 8vw;
        line-height: 9.6vw;
        font-family: 'FreightBig Pro';
        font-weight: 100;
    }

}

@media (max-width: 430px) {
    .insight {
        position: relative;
        padding: 5vw;
        background: #FFF;
    }

    #red_power .insight h3 {
        font-size: 15px;
        font-weight: 600;
        margin: 14vw 0 1.5em 0;
        letter-spacing: 1px;
    }

    #red_power .insight h4 {
        font-size: 8vw;
        line-height: 1.3;
        margin: 0;
    }

    #red_power .insight h4 em {
        font-size: 12vw;
        line-height: 1.2;
        font-family: 'FreightBig Pro';
        font-weight: 100;
    }

}


.marquee-container {
    position: relative;
    width: 100%;
    max-width: 99.99vw;
    overflow: hidden;
    font-size: 8.9vw;
    letter-spacing: -0.03em;
    line-height: 1;
    font-weight: 700;
    height: 1em;
    z-index: 1;
    padding: 2.99vw 0;
    border-top: #000 1px solid;
    border-bottom: #000 1px solid;
}

.marquee-container em {
    font-family: 'FreightBig Pro';
    font-size: 13vw;
    font-weight: 500;
    line-height: 8.9vw;
    letter-spacing: .018em;
}

@media (max-width: 768px) {
    .marquee-container {
        font-size: 8vw;
    }
}

@media (max-width: 430px) {
    .marquee-container {
        font-size: 12vw;
    }
}


.marquee-container .marquee {
    text-align: justify;
    top: 2vw;
    left: 100%;
    overflow: visible;
    position: absolute;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
}

.delayed,
.marquee-container .marquee2 {
    animation-delay: 10s;
}

.marquee .big {
    line-height: 0.75;
}

@media (max-width: 430px) {
    .marquee .big {
        line-height: 0.8;
        font-size: 12vw;
    }
}

@keyframes marquee {
    0% {
        left: 100%;
    }

    100% {
        left: -100%;
    }
}




.slider_insight {
    position: relative;
    width: 100%;
    max-width: 99.99vw;
    overflow: hidden;
    height: 10vw;
    height: clamp(4rem, 11vw, 220px);
    z-index: 1;
    /*padding: 2.99vw 0 3.11vw 0;*/
    border-top: #000 1px solid;
    border-bottom: #000 1px solid;
}

.slider_insight.fotos {
    height: 18vw;
    height: 24vw;
    border: 0;
}

.slider_insight.fotos img {
    width: 32.5vw;
    width: auto;
    height: 24vw;
    margin: 0 0.25vw;
}

.slide_insight .big {
    font-size: 8.9vw;
    letter-spacing: -0.03em;
    line-height: 1;
    font-weight: 700;
}

.slider_insight em {
    font-family: 'FreightBig Pro';
    font-size: 13.8vw;
    font-weight: 500;
    line-height: 7.9vw;
    letter-spacing: .018em;
}

.slide_insight {
    text-align: justify;
    height: 100%;
    transform: translate(100%);
    overflow: visible;
    position: absolute;
    white-space: nowrap;
    animation: marquee2 20s linear infinite;
}

.slide_insight img {
    height: 100%;
}

.fotos .slide_insight {
    top: 0;
}

.slide_insight:nth-child(2) {
    animation-delay: 10s;
}

@media (max-width: 768px) {}

@media (max-width: 430px) {
    .slide_insight {}

}

@keyframes marquee2 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}





.estrategia {
    padding-block: 10vmin;
    padding-block: max(10vmin, 3em);
    padding-inline: max(1em, 2.66vw);
    border-bottom: #000 1px solid;
}

.strat-wrapper {
    font-size: 2.025vw;
    font-size: clamp(18px, 1.88vw, 37px);
    /* viene de la 3141*/
    line-height: 1.2;
    letter-spacing: 0.002em;
    text-align: center;
    margin: 0 auto;
}

.strat-wrapper p {
    max-width: 24em;
    margin-inline: auto;
}

.strat-wrapper p em {
    font-family: 'FreightBig Pro';
    font-size: 1.2em;
    line-height: .5;
}

.strat-wrapper p:first-child {
    margin-top: 0;
}

.strat-wrapper p:last-child {
    margin-bottom: 0;
}

.gotop {
    position: absolute;
    top: 0;
    width: 11vw;
    left: calc(100vw - 11vw - 2.76666vw);
    z-index: 2;
    cursor: pointer;
    transition: all .6s ease;
}

@media (max-width: 430px) {
    .gotop {
        display: none;
    }
}

.gotop img {
    max-width: 100%;
}

@-webkit-keyframes rotating

/* Safari and Chrome */
    {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#GtopCircle,
.rotating {
    transform-origin: center center;
    -webkit-animation: rotating 10s linear infinite;
    -moz-animation: rotating 10s linear infinite;
    -ms-animation: rotating 10s linear infinite;
    -o-animation: rotating 10s linear infinite;
    animation: rotating 10s linear infinite;
}

.mid-container {
    width: min(900px, 90%);
    margin-inline: auto;
}

.textblock {
    padding-inline: 2.66vw;
    padding-block: max(4.2vw, 2em);
    text-align: center;
}

.textblock h3 {
    font-size: 1.98vw;
    font-size: clamp(18px, 1.98vw, 38px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

.textblock p {
    max-width: 22em;
    font-size: 1.3vw;
    font-size: clamp(17px, 1.33vw, 24px);
    line-height: 1.3;
    margin: 1em auto 0;
}

.textblock.wide_left {
    text-align: left;
    padding-inline: 0;
    padding-top: 0;
}

.textblock.wide_left p {
    max-width: none;
}

.textblock.wide_left p em {
    font-family: 'FreightBig Pro';
    font-size: 1.2em;
    line-height: .5;
}

.mid-container .three_cols {
    display: flex;
    flex-direction: row;
    gap: 5vmax;
}

.mid-container .three_cols div {
    flex-grow: 2;
}

.mid-container .three_cols div img {
    max-width: 100%;
}

.interview {
    display: flex;
    margin-bottom: max(4.2vw, 2em);
    width: min(1200px, 94%);
    margin-inline: auto;
}

.interview-text {
    background: #000000;
    font-size: clamp(17px, 1.3vw, 24px);
    color: #FFFFFF;
    padding: 3vmax;
    width: 50%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.interview-text p:first-child {
    margin-top: 0;
}
.interview-text p:last-child {
    margin-bottom: 0;
}
.interview-pic {
    width: 50%;
}

.interview-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.row {
    width: min(1200px, 94%);
    margin-inline: auto;
}

.row>div:last-child {
    padding: 3em;
    box-sizing: border-box;
    font-size: clamp(17px, 1.3vw, 24px);
}

@media (max-width: 768px) {
    .interview {
        width: 80%;
    }
}

@media (max-width: 430px) {
    .interview {
        display: flex;
        flex-direction: column;
        margin-bottom: max(4.2vw, 2em);
        width: 80%;
        margin-inline: auto;
    }
    .interview-pic {
        width: 100%;
    }
    .interview-text {
        background: #000000;
        font-size: clamp(17px, 1.3vw, 24px);
        color: #FFFFFF;
        padding: 3vmax;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
.textblockbig {
    padding-inline: 2.66vw;
    padding-block: max(4.2vw, 2em);
    text-transform: uppercase;
}

.textblockbig h4 {
    font-weight: 700;
    /*max-width: 36.875vw;*/
    font-size: 1.98vw;
    font-size: clamp(18px, 1.98vw, 38px);
    letter-spacing: 0.08em;
    line-height: 1;
    margin: 0
}

.textblockbig h2 {
    font-size: 8.5vw;
    line-height: 7.5vw;
    margin: 0.24em 0 0;
    letter-spacing: -0.02em;
    transform: translateX(-0.03em);
}

.hugetext {
    padding-inline: 2.66vw;
    padding-block: max(4.2vw, 1em);
}

.hugetext h2 {
    font-size: 22vw;
    font-size: clamp(75px, 22vw, 420px);
    line-height: .72;
    margin: 0 auto;
    text-align: center;
    letter-spacing: -0.03em;
}


@media (max-width: 768px) {
    .estrategia {
        padding-block: max(4.2vw, 2em);
    }

    .strat-wrapper {}

    .textblock {
        /*padding: 5.1vw 2.66vw 5vw 2.66vw;/
    }

    .textblock h3 {
        font-size: 3.75vw;
        font-size: clamp(17px, 3.75vw, 28px);
    }

    .textblock p {
        /*font-size: 3vw;
        line-height: 3.3vw;*/
    }

    .textblockbig h4 {
        /*font-size: 3vw;
        font-size: clamp(17px, 3.75vw, 28px);
        line-height: 1;
        margin: 2vw 0 0;*/
    }

    .textblockbig h2 {
        font-size: 12vw;
        line-height: .9;
        margin: 2vw 0;
    }
}

@media (max-width: 430px) {
    .estrategia {
        /*padding-inline: 5.22vw;*/
    }

    .strat-wrapper {
        text-align: center;
        margin: 0 auto;
    }

    .textblock {
        /*padding: 6vw 2.66vw;
        text-align: center;*/
    }

    .textblock h3 {
        /* text-transform: uppercase;
        line-height: 1;
        margin: 0;*/
    }

    .textblock p {
        display: none;
        max-width: 17em;
        font-size: 15px;
        line-height: 1.2;
        margin: 1.5625vw auto 0;
    }

    .textblockbig {
        /*padding: 6vw 2.66vw;*/
        /*padding-left: 50%;*/
        /*text-transform: uppercase;*/
    }

    .textblockbig h4 {
        /*max-width: 40vw;*/
        /*font-size: 15px;*/
        /*line-height: 1;
        margin: 2.66vw 0;*/
    }

    .textblockbig h2 {
        transform: translateX(0);
    }
}




.accordion-wrapper {
    background: #000000;
    border-bottom: #000 1px solid;
    margin-bottom: 2.66vw;
}

.accordion {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-top: 1px;
    background-color: #ffffff;
}

.accordion__intro {
    position: relative;
    padding: 1.8vw 0;
    cursor: pointer;
}

.accordion__content {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    will-change: max-height;
    transition: all 0.25s ease-out;
    color: #f1f1f1;
    opacity: 0;
}

.accordion h4,
.accordion p {
    margin: 0;
    line-height: 1.2;
}

.accordion h4 {
    position: relative;
    font-family: 'FreightBig_medium Pro';
    font-size: 1.55vw;
    font-size: clamp(20px, 1.55vw, 28px);
    line-height: 1.2;
    letter-spacing: 0.033em;
    font-weight: 700;
    color: #000000;
    max-width: 49.47916667vw;
    margin: 0 auto;
}

.accordion h4 .accordion_mas {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
}

.accordion h4 .accordion_mas span {
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;
    width: 24px;
    height: 2px;
    background: #000;
}

/*
.accordion h4 .accordion_mas span:nth-child(1) {
    transform: rotate(-180deg);
    transition: all .3s;
}*/
.accordion h4 .accordion_mas span:nth-child(2) {
    transform: rotate(90deg);
    transition: all .3s;
}

/*
.accordion__active h4 .accordion_mas span:nth-child(1) {
    transform: rotate(180deg);
    transition: all .3s;
}*/

.accordion__active h4 .accordion_mas span:nth-child(2) {
    transform: rotate(90deg);
    scale: 0;
    transition: all .3s;
}



.accordion p {
    color: #000000;
    font-size: 1.125vw;
    font-size: clamp(15px, 1.125vw, 20px);
    margin: 0 auto;
    max-width: 50vw;
    text-align: center;
}

.accordion__active .accordion__content {
    padding: 1vw 2vw 2.6vw;
    opacity: 1;
}


@media (max-width: 768px) {
    .accordion__intro {
        padding: 2.66vw 0;
    }

    .accordion h4 {
        max-width: 56vw;
    }

    .accordion__active .accordion__content {
        padding: 0 0 4vw;
    }

    .accordion p {}
}

@media (max-width: 430px) {
    .accordion__intro {
        padding: 3vw 0;
    }

    .accordion h4 {
        max-width: 70%;
    }

    .accordion__active .accordion__content {
        padding: 2vw 2vw 5.6vw;
        opacity: 1;
    }

    .accordion p {
        color: #000000;
        font-size: 4.3vw;
        margin: 0 auto;
        max-width: 80%;
        text-align: center;
    }
}


.digital {
    padding-inline: 0;
    padding-block: max(4.2vw, 2em);
}



.digital_row {
    max-width: 75%;
    padding: 2.41667vw 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*flex-wrap: wrap;*/
    margin: 0 auto;
}

.digital_row h3 {
    font-size: 1.98vw;
    font-size: clamp(1rem, 1.98vw, 38px);
    font-weight: 500;
    font-size: clamp(1rem, 1.98vw, 38px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

.digital_row p {
    max-width: 27em;
    font-size: 1.17vw;
    font-size: clamp(15px, 1.125vw, 21px);
    max-width: 21em;
    line-height: 1.3;
}


.digital_row .left_col {
    width: 12.13541667vw;
    font-weight: 700;
    font-size: 1.25vw;
    line-height: 1.6;
}

.digital_row .the_chat {
    max-width: 21em;
}

.spotify-plugin {
    display: flex;
    padding-inline: 2.66vw;
    padding-block: max(4.2vw, 2em);
    justify-content: center;
    max-width: 75%;
    margin: 0 auto;
}

.big-slim-italic {
    font-size: 15.66vw;
    font-family: 'FreightBig Pro';
    margin: 0;
    line-height: 1;
    margin-top: -0.1em;
    margin-bottom: 0.5vw;
    padding-left: 0.08em;
}

.med-bold {
    font-size: 4.2vw;
    font-size: clamp(27px, 3.4vw, 65px);
    font-weight: 700;
    line-height: .9;
}

.digital_row .med-bold {
    line-height: .9;
    margin-top: 0;
}

.digital_row .med-bold em {
    line-height: .3;
    margin-top: 0;
}

.text267 p {
    font-size: 2.5vw;
    line-height: 1.2;
    margin: 0;
}

.med-bold em {
    display: inline-block;
    font-size: 6.7vw;
    font-size: clamp(41.4px, 5.418vw, 108px);
    font-size: clamp(43px, 5.418vw, 108px);
    font-family: 'FreightBig Pro';
    line-height: 4vw;
    font-weight: 200;
}

#eightM .med-bold em {
    font-size: 5.2vw;
    font-weight: normal;
}

#eightM .digital_row .foto {
    width: 35vw;
    max-width: 35vw
}

.celu {
    width: 20vw;
    min-width: 20vw;
    max-width: 20vw;
    box-sizing: border-box;

}

.celu-wrapper {
    overflow: hidden;
    position: relative;
    border-radius: 2.6vw;
}

.celu-wrapper video.fit {
    position: absolute;
    z-index: 0;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    top: 1px;
    left: 1px;
}

/*
.celu-bar {
    margin-top: -1px;
    
}*/
.celu-bar {
    position: relative;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.celu-bar img {
    max-width: 100%;
    height: auto;
}

.celu-text {
    width: fit-content;
    max-width: 50vw;
    display: flex;
    flex-direction: column;
    padding: 0 2.66vw;
}

#eightM .celu-text {
    width: 33vw;
    max-width: 33vw;
    display: flex;
    flex-direction: column;
    padding: 0 2.66vw;
}

.inflower {
    height: 5vw;
    width: auto;
    max-width: fit-content;
    margin-bottom: 1em;
}



.gotoph,
.gotopi {
    position: relative;
}


@media (max-width: 768px) {
    .celu {
        width: 30vw;
        min-width: 30vw;
        max-width: 30vw;
    }

    .digital_row {
        max-width: 75%;
        padding: 3vw 0;
    }

    .digital_row h3 {
        font-size: 3.75vw;
        font-size: clamp(17px, 3.75vw, 28px);
    }

    .digital_row p {}

    .digital_row .text267 p {
        font-size: 2.5vw;
        line-height: 1.2;
        margin: 0;
    }

    .digital_row .two_col {
        width: 50%;
        display: flex;
        justify-content: flex-start;
    }

    .digital_row .left_col {
        width: 76%;
        letter-spacing: 2px;
        font-weight: 700;
        font-size: 3.3VW;
        line-height: 1;
        text-align: right;
    }

    .celu-wrapper {
        border-radius: 3.7vw;
    }

    .med-bold {}

    .med-bold em {}

}

@media (max-width: 430px) {

    .spotify-plugin {
        /*display: flex;
        padding: 4vw;
        justify-content: center;
        margin-bottom: -12vw;*/
        max-width: 100%;
        /*margin: 0 auto;*/
    }

    .digital_row {
        flex-direction: column;
        max-width: 100%;
        padding: 4vw;
    }

    .digital_row h3 {}

    .digital_row p {
        margin-inline: auto;
    }

    .digital_row .text267 p {
        font-size: 4.3vw;
        line-height: 1.2;
        margin: 0;
    }

    .celu-text {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
        text-align: center;
    }

    #eightM .celu-text {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    .inflower {
        height: 12vw;
        width: auto;
        max-width: fit-content;
        margin-bottom: 1em;
    }

    .digital_row .two_col {
        width: 100%;
        display: flex;
        justify-content: end;
    }

    .big-slim-italic {
        font-size: 30vw;

        margin-top: 0;
        margin-bottom: 4vw;
    }

    .digital_row .left_col {
        width: 100%;
        letter-spacing: 2px;
        font-weight: 700;
        font-size: 4vw;
        line-height: 1;
        padding-right: 0;
        text-align: left;
    }

    .med-bold {}

    .med-bold em {}

    #eightM .med-bold em {
        font-size: 12vw;
        font-weight: normal;
    }

    .celu {
        width: 50vw;
        max-width: 50vw;
        margin-bottom: 1.5em;
    }

    #eightM .digital_row .foto {
        width: 60vw;
        max-width: 60vw;
        margin: 0 auto;
        margin-bottom: 10vw;
    }

    .celu-wrapper {
        max-width: 96%;
        margin: auto;
        border-radius: 6.5vw;
    }

    .gotoph,
    .gotopi {
        display: none;
    }
}


.scrollToTopBtn {
    position: fixed;
    bottom: 0.9375vw;
    right: calc(0.9375vw - 6px);
    width: 24px;
    height: 24px;
    display: none;
    background: url(../img/arrow.svg);
    background-size: contain;
    font-size: 0;
    transform-origin: center center;
    transform: rotate(-90deg);
    border: none;
    cursor: pointer;
}

/* COLORFIX */

.award-row {
    display: flex;
    background: #000000;
    border-bottom: #FFFFFF 1px solid;
}

.award-name {
    color: #FFFFFF;
    border-right: #FFFFFF 1px solid;
    flex-grow: 4;
    align-content: center;
    padding: 0 2.66vw;
    font-size: 1.55vw;
}

.award-logo {
    width: 37%;
    align-content: center;
    text-align: center;
}

.award-logo img {
    max-width: 55%;
}

#colorfix-reto {
    background: url(../img/color-fix-reto.jpg);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    min-height: 88.64vw;
}

#colorfix-reto .foto-challenge {
    padding-bottom: 73.5%;
}

#colorfix .insight .foto-overlay {
    position: absolute;
    top: 0;
    left: 5vw;
    right: 5vw;
    bottom: 0;
    color: #FFF;
    padding: 6.822916667vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#colorfix .insight h3 {
    font-size: 1.25vw;
    font-weight: 600;
    margin: 6vw 0 1.5em 0;
    letter-spacing: 2px;
}

#colorfix .insight h4 {
    font-size: 3.472223958vw;
    line-height: 4.861111094vw;
    margin: 0;
}

#colorfix .insight h4 em {
    font-size: 2.2vw;
    line-height: 1.2;
    font-family: 'FreightBig_medium Pro';
    font-weight: 500;
    display: block;
}

#colorfix .insight h4 em.grande {
    font-size: 12vw;
    line-height: .4;
    margin-bottom: 4vw;
}

#colorfix .estrategia h3 {
    font-size: 1.98vw;
    font-size: clamp(1rem, 1.98vw, 38px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

#colorfix .conceptBig {
    font-size: 3.15vw;
    margin: 0;
    font-weight: 500;
}

#colorfix .strat-wrapper {}

@media (max-width: 768px) {
    .insight {
        position: relative;
        padding: 5.8vw;
        background: #FFF;
    }

    #colorfix .estrategia h3 {
        font-size: 4vw;
    }

    #colorfix .insight h3 {
        font-size: 2vw;
        font-weight: 600;
        margin: 0 0 1.5em 0;
        letter-spacing: 2px;
    }

    #colorfix .insight h4 {
        font-size: 5.5555583328vw;
        line-height: 1.3;
        margin: 0;
    }

    #colorfix .insight h4 em {
        font-size: 8vw;
        line-height: 9.6vw;
        font-family: 'FreightBig Pro';
        font-weight: 100;
    }

}

@media (max-width: 430px) {
    .insight {
        position: relative;
        padding: 5vw;
        background: #FFF;
    }

    #colorfix .insight h3 {
        font-size: 15px;
        font-weight: 600;
        margin: 0 0 1.5em 0;
        letter-spacing: 1px;
    }

    #colorfix .insight h4 {
        font-size: 6vw;
        line-height: 1.3;
        margin: 0;
    }

    #colorfix .insight h4 em {
        font-size: 7vw;
        line-height: 1.2;
        font-family: 'FreightBig Pro';
        font-weight: 100;
    }

    #colorfix-reto .foto-challenge {
        padding-bottom: 150%;
    }

}

.concepto {
    padding: 0 2.66vw 3vw;
}

.conceptoRow {
    margin-bottom: 3.66vw;
}

.conceptoVid {
    width: 65%;
}

.conceptoVid {
    width: 61.274vw;
    height: 34.481vw;
    position: relative;
    overflow: hidden;
}

.conceptoVid .reveal {
    position: absolute;
    left: -1%;
    width: 102%;
    height: 102%;
    background: #ffffff;
    transform-origin: top left;
}

.padleft {
    margin-left: 8vw;
}

.padright {
    margin-right: 8vw;
    text-align: right;
}

.flex {
    display: flex;
    align-items: end;
    text-align: right;
    column-gap: 1vw;
}

.conceptoTxt {
    font-size: 8.9vw;
    letter-spacing: -0.03em;
    line-height: 1;
    font-weight: 100;
    margin-top: -.15em;
}

.conceptoTxt em {
    font-family: 'FreightBig Pro';
    font-size: 13.8vw;
    font-weight: 500;
    line-height: 7.9vw;
    letter-spacing: .018em;
}

.contentStrat {
    padding: 6vw 2.66vw;
}

.strat {
    position: relative;
    width: 50%;
    margin: 0 0 0 auto;
    display: block;
}

.contentStrat h2 {
    font-size: 8.9vw;
    letter-spacing: -0.03em;
    line-height: 1;
    font-weight: 700;
    margin-top: -.15em;
    margin-bottom: 3.66vw;
    text-align: center;
}

.contentStrat h3 {
    font-size: 1.98vw;
    font-size: clamp(1rem, 1.98vw, 38px);
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

.contentStrat p {
    font-size: 1.3vw;
    font-size: clamp(16px, 1.17vw, 22px);
    line-height: 1.3;
    margin: 1.6vw auto 0;
}

.grid3col {
    display: flex;
    column-gap: 1vw;
    row-gap: 1vw;
    flex-wrap: wrap;
    padding: 0 2.66vw 2.66vw;
}

.grid3item {
    width: 32.6265%;
    min-width: 32.6265%;
    position: relative;
    overflow: hidden;
}

.grid3item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center center;
}

.grid3item video.fit {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.grid3item .grid-rollover {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .5s ease-out;
}

.grid3item:hover .grid-rollover {
    top: 0;
    transition: all .3s ease-out;
}



.conceptMed {}

.compulines {
    padding: 0 0 2.66vw;
}

.monitor {
    width: 62vw;
    margin: 0 auto;
    border: #000 1px solid;
    border-radius: 27px;
    padding: 4.5vw 0;
    clear: both;
}

.monitor-screen {
    height: 32vw;
}

.monitorbase {
    width: 9.4%;
    height: 5.42vw;
    margin: 0 auto;
    clear: both;
    border: #000 1px solid;
    border-top: 0;
    position: relative;
}

.monitorbase::after {
    content: '';
    position: absolute;
    top: 100%;
    width: auto;
    height: 1px;
    border-top: #000 1px solid;
    left: -50%;
    right: -50%;
}


@media (max-width: 768px) {

    .contentStrat h3 {
        font-size: 3vw;
    }

    .contentStrat p {
        font-size: 3vw;
        line-height: 3.3vw;
    }

    .grid3item {
        width: 32.6265%;
        min-width: 32.6265%;
    }

    .conceptMed {
        font-size: 3vw;
        max-width: 86%;
    }


}

@media (max-width: 430px) {

    .conceptMed {
        font-size: 4.3vw;
    }
}


#eightM .challenge_row {
    padding: 7.41667vw 0;
}

#eightM .challenge {
    padding-top: 0;
}

@media (max-width: 768px) {
    #eightM .challenge {
        font-size: 2vw;
    }
}

@media (max-width: 430px) {
    #eightM .challenge {
        padding-top: 12vw;
        background: #000;
        font-size: 15px;
        margin-top: -1px;
        padding-bottom: 12vw;
    }
}



/* ------------------------------ dela -------------------------------------*/

/* SET DE 9 COLUMNAS ---------------------------------------------------------------------------------------- */
.ochocols {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 13vh;
}

.unocol {
    width: calc(12.5% - 0.66%);
}

.doscol {
    width: calc(25% - 0.66%);
}

.trescol {
    width: calc(37.5% - 0.66%);
}

.qtrocol {
    width: calc(50% - 0.66%);
}

#bela .estrategia {
    padding-block: 10vmin;
    padding-block: max(10vmin, 3em);
    padding-inline: max(1em, 2.66vw);
    border-bottom: #000 1px solid;
}

#bela .insight h3 {
    font-size: 1.25vw;
    font-weight: 600;
    margin: 20vw 0 1.5em 0;
    letter-spacing: 2px;
}

#bela .estrategia h3 {
    /*font-size: 2.2vw;*/
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

#bela .estrategia .ochocols {
    font-size: 1.25vw;
    font-size: clamp(15px, 1.125vw, 21px);
    font-weight: normal;
}

#bela .estrategia .strat-wrapper em {
    font-family: 'FreightBig Pro';
    font-size: 1.166em;
    line-height: .5;
}

.free-spirit {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 69.89vw;
    max-height: 90vh;
    margin-inline: 0;
    margin-block: max(8vw, 3em);
    background: url(../img/free-spirit.jpg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.free-spirit-row {
    width: 70%;
    display: flex;
    justify-content: space-between;
}

.free-spirit-row img {
    height: 23vw;
}

.textblockbigLeft {
    padding: 4.25vw 2.66vw 3.5vw;
    padding-left: 2.66vw;
    text-transform: uppercase;
}


@media (max-width: 768px) {
    #bela .estrategia .ochocols {
        font-size: 2vw;
    }
}

@media (max-width: 430px) {
    #bela .estrategia {
        padding: 8vh 2.66vw;
        border-bottom: #000 1px solid;
    }

    #bela .estrategia .ochocols {
        font-size: 15px
    }

    .ochocols {
        flex-wrap: wrap;
        text-align: center;
        margin-bottom: 13vw;
    }

    #bela .estrategia h3 {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .unocol {
        width: 100%;
    }

    .doscol {
        width: calc(100% - 0.66%);
    }

    .trescol {
        width: calc(100% - 0.66%);
    }

    .qtrocol {
        width: calc(100% - 0.66%);
    }
}



#infinito-reto {
    background: url(../img/infinito-challenge.jpg);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    min-height: 88.64vw;
}

#infinito-reto .foto-challenge {
    padding-bottom: 73.5%;
}

#infinito-reto .col_35 {
    width: 50%;
    justify-content: center;
    display: flex;
}

#infinito-reto .col_63 {
    width: 50%;
}

#infinito .strat-wrapper {
    /*font-size: 2.25vw;
    font-size: clamp(17px, 2vw, 40px);
    font-size: clamp(16px, 1.88vw, 37px);
    max-width: 24em;
    line-height: 1.2;
    letter-spacing: 0.002em;
    text-align: center;
    margin: 0 auto;*/
}

#infinito .strat-wrapper h3 {
    font-size: 1.98vw;
    font-size: clamp(1rem, 1.98vw, 38px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

#infinito .estrategia {
    /*padding: 2.6vw;
    margin: 0 auto;*/
    border-bottom: none;
}

#infinito .free-spirit {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 69.89vw;
    max-height: 90vh;
    margin: 0;
    margin-bottom: max(8vw, 3em);
    background: url(../img/infinitos-Foto-4.jpg);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}


#infinito .strat-wrapper .conceptBig {
    max-width: 20em;
    margin-inline: auto;
}

#infinito .slider_insight.fotos {
    height: 28vw;
    height: max(28vw, 28vh);
    border: 0;
}


#infinito .slider_insight.fotos img {
    width: auto;
    height: 28vw;
    height: max(28vw, 28vh);
    margin: 0 0.1vw;
}

#infinito .stickers {}

#infinito .sticker-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

#infinito .sticker-wrapper .reveal {
    position: absolute;
    left: -1%;
    top: -1%;
    width: 102%;
    height: 102%;
    background: #ffffff;
    transform-origin: top left;
}

#infinito .sticker-wrapper img {
    width: 100%;
}

#infinito .celu {
    position: relative;
}

#infinito .celu::before {
    content: '';
    position: absolute;
    width: 110%;
    height: 100%;
    top: -4.5vmax;
    left: 62%;
    background: url(../img/infinito-corazon2.jpg);
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
}

#infinito .celu-text p {
    max-width: 18em;
}

.corazon {
    background: url(../img/infinito-corazon.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
}

.corazon2 {
    background: url(../img/infinito-corazon2.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
}

.padding {
    padding-block: 4vw;
}


@media (max-width: 768px) {}

@media (max-width: 430px) {}

.wip div,
.wip div div {
    border: #242424 1px solid;
}

.weConect {
    width: 24.73vw;
}

.contacto,
.joinus {
    padding-top: 5vmax;
    width: min(1200px, 94%);
    width: 80%;
    margin-inline: auto;
}

.contacto-row {
    display: grid;
    gap: 4vw;
}

.contacto-row>div {

}
.contacto-row input[type=text], 
.contacto-row input[type=email], 
.contacto-row textarea {
    width: 100%;
    padding: 0;
    height: 53px;
    /*height: 2.760416667vw;*/
    box-sizing: border-box;
    border: none;
    background: none;
    border-bottom: 1px solid #000000;
    color: #000000 !important;
    display: block;
    clear: both;
    margin: 20px auto 40px;
}
.contacto-row textarea {
    /*height: calc(2.760416667vw + 2.760416667vw - 0.6em );*/
    height: calc(53px + 53px - 0.6em );
}
.contacto-row label#message {
    width: 100%;
    margin: 20px auto 40px;
    display: block;
    padding-top: 0.6em;
    font-weight: 100;
    color: #000000;
    text-align: left;
    line-height: 1.2;
}
.contacto input::placeholder {
    color: #000000;
  }
  
.contacto input[type=button], 
.contacto input[type=submit], 
.contacto input[type=reset] {
    width: 100%;
    background-color: #000000;
    border: 1px #000000 solid;
    color: #FFFFFF !important;
    padding: 0 1em;
    height: 44px;
    box-sizing: border-box;
    text-decoration: none;
    margin: 0;
    cursor: pointer;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
}

.contacto input[type=button]:hover,
.contacto input[type=submit]:hover,
.contacto input[type=reset]:hover {
    background-color: #ffffff;
    border: 1px #000000 solid;
    color: #000000 !important;
    padding: 0 1em;
    height: 44px;
    box-sizing: border-box;
    text-decoration: none;
    margin: 0;
    cursor: pointer;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
}

.joinus {
    display: grid;  
    gap:0;  
    align-items:center;
    padding-bottom: 5vw;
    
}
.joinus-img {
    padding: 3vw;
}
.joinus-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.joinus-txt {
    padding: 3vw;
    font-size: clamp(18px, 1.88vw, 37px);
}
.joinus-txt h3 {
    font-size: 1.6em; 
    line-height: 1;
    margin: 0;
    font-weight: 600;
}
.joinus-txt2 {
    max-width: 18em;
    font-size: 1.3vw;
    font-size: clamp(17px, 1.33vw, 24px);
    line-height: 1.3;
    margin: 1em auto 0;
}
.joinus-txt2 h4 {
    font-size: clamp(18px, 1.98vw, 38px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}
.joinus a {
    font-weight: 700;
}

@media (min-width: 600px) {
    .contacto-row,
    .joinus {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*
  @media (min-width: 900px) {
    .contacto-row { grid-template-columns: repeat(3, 1fr); }
  }*/


/* services*/
.wethink-row,
.services-row {
    display: flex;
    flex-direction: row;
    gap: 1em;
    padding-bottom: 5vmax;
    width: min(1200px, 94%);
    width: 80%;
    margin-inline: auto;
}
.wethink-row {
    border-top: 1px solid #000000;
    padding-top: 5vmax;;
}
.wethink-row p {
    font-size: 1.3vw;
    font-size: clamp(17px, 1.33vw, 24px);
    line-height: 1.3;
}
.wethink-row > div {
    width: 50%;
}
.wethink-row img {
    max-width: 100%;
    height: auto;
}
.wethink-row p:first-child {
    margin-top: 0;
}
.wethink-row p:last-child {
    margin-bottom: 0;
}
.services-row > div {
    width: calc(25% - 1em);
    font-size: 1.3vw;
    font-size: clamp(17px, 1.33vw, 24px);
    line-height: 1.3;
    margin: 1em auto 0;
}
.services-row > div h4 {
    font-size: clamp(18px, 1.98vw, 38px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}


@media (max-width: 768px) {}

@media (max-width: 430px) {
    .wethink-row,
    .services-row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1em;
        padding-bottom: 5vmax;
        width: min(1200px, 94%);
        width: 90%;
        margin-inline: auto;
    }
    .services-row > div {
        width: calc(50% - 1em);
        font-size: 1.3vw;
        font-size: clamp(15px, 1.33vw, 24px);
        line-height: 1.3;
        margin: 1em auto 0;
    }
    .wethink-row > div {
        width: 100%;
    }

}








::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-thumb {
    background: #e1e1e1;
    border: 0px none #ffffff;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
}

::-webkit-scrollbar-thumb:active {
    background: #000000;
}

::-webkit-scrollbar-track {
    background: #242424;
    border: 0px none #ffffff;
    border-radius: 0;
}

::-webkit-scrollbar-track:hover {
    background: #666666;
}

::-webkit-scrollbar-track:active {
    background: #333333;
}

::-webkit-scrollbar-corner {
    background: transparent;
}


.crop {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}


.something {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    /* wharch this video !!!
    https://www.youtube.com/watch?v=va1RrFr-gms
    */

}

.suspended {
    position: fixed;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: orangered;
    color: white;
    text-align: center;
    letter-spacing: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    z-index: 11111111111111111111111111111;

    display: none;
    
}
.suspended * { margin-block: 0;}

#countdown {
    font-size: 1em;
    font-weight: 100;   
}
#countdown::before {
    content: "Will be shot down in: ";
}

.days:after{
	content: "d ";
}

.hours:after{
	content: "h ";
}

.minutes:after{
	content: "m ";
}

.seconds:after{
	content: "s";
}