/* ---------------------------------------------------------------------------------------------------- | Fonts */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&display=swap');

/* ---------------------------------------------------------------------------------------------------- | Variables */

:root {
    --T1: #FFFFFF;
    --T2: #EEEEEE;
    --T3: #B7B7B7;
    --T4: #6A6A6A;
    --T5: #232323;
    --T6: #000000;
    --BL: #F8F8F8;
    --BD: #141414;
    --SC: #84D11F;
    --WN: #EBA90F;
    --DG: #D10A0A;
    --IF: #389FEC;
    --PR: #1B68EE;
}

/* ---------------------------------------------------------------------------------------------------- | Overrides */

*,
*:before,
*:after {
    margin: 0;
    font-size: 0;
    font-family: 'Manrope', sans-serif;
    box-sizing: border-box;
}

body {
    background: var(--BL);
}

/* ---------------------------------------------------------------------------------------------------- | Typography */

h1 {
    font-size: 48px;
    line-height: 60px;
    font-weight: 800;
}

h2 {
    font-size: 36px;
    line-height: 46px;
    font-weight: 800;
}

h3 {
    font-size: 24px;
    line-height: 34px;
    font-weight: 800;
}

h4 {
    font-size: 17px;
    line-height: 27px;
    font-weight: 700;
}

h5 {
    font-size: 15px;
    line-height: 25px;
    font-weight: 700;
}

h6 {
    font-size: 13px;
    line-height: 23px;
    font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--T6);
    letter-spacing: 0.2px;
}

[darkmode="true"] h1,
[darkmode="true"] h2,
[darkmode="true"] h3,
[darkmode="true"] h4,
[darkmode="true"] h5,
[darkmode="true"] h6 {
    color: var(--T1);
}

h1.is-overlay,
h2.is-overlay,
h3.is-overlay,
h4.is-overlay,
h5.is-overlay,
h6.is-overlay {
    color: var(--T1);
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}

h1,
h2,
h3 {
    color: var(--PR);
}

p,
a {
    font-size: 15px;
    line-height: 25px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

p {
    color: var(--T4);
}

p.is-overlay {
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}

[darkmode="true"] p {
    color: var(--T3);
}

a {
    color: var(--PR);
    cursor: pointer;
    text-decoration: none;
}

a.is-overlay {
    color: var(--T1);
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
    text-decoration: underline;
}

a:not(.is-disabled):not(.btn):hover {
    cursor: pointer;
    color: var(--PR);
}

p.is-big,
a.is-big {
    font-size: 17px;
    line-height: 27px;
}

p.is-small,
a.is-small {
    font-size: 13px;
    line-height: 23px;
}

h1.is-disabled,
h2.is-disabled,
h3.is-disabled,
h4.is-disabled,
h5.is-disabled,
h6.is-disabled,
 p.is-disabled,
 a.is-disabled {
    color: var(--T3);
}

[darkmode="true"] h1.is-disabled,
[darkmode="true"] h2.is-disabled,
[darkmode="true"] h3.is-disabled,
[darkmode="true"] h4.is-disabled,
[darkmode="true"] h5.is-disabled,
[darkmode="true"] h6.is-disabled,
[darkmode="true"]  p.is-disabled,
[darkmode="true"]  a.is-disabled {
    color: var(--T4);
}

h1.is-overlay.is-disabled,
h2.is-overlay.is-disabled,
h3.is-overlay.is-disabled,
h4.is-overlay.is-disabled,
h5.is-overlay.is-disabled,
h6.is-overlay.is-disabled,
 p.is-overlay.is-disabled,
 a.is-overlay.is-disabled {
    color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------------------------------------------- | Buttons */

.btn {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: var(--T1);
    line-height: 40px;
    border-radius: 3px;
    background: var(--PR);
    transition: all 0.2s ease-in-out;
    padding: 0 20px;
    text-align: center;
}

.btn:not(.is-disabled):hover {
    cursor: pointer;
    transform: scale(1.05);
}

.btn.is-disabled {
    opacity: 0.5;
}

.btn.is-block {
    width: 100%;
}

.btn.is-white {
    background: var(--T1);
    color: var(--PR);
    outline: 0px solid rgba(255, 255, 255, 0);
}

/* ---------------------------------------------------------------------------------------------------- | Icons */

.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.icon-instagram-black { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_43' data-name='Rectangle 43' width='48' height='48' fill='none'/%3E%3Crect id='Rectangle_44' data-name='Rectangle 44' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_36' data-name='Path 36' d='M24,7.6h8.1a10.8,10.8,0,0,1,3.7.7,6.7,6.7,0,0,1,3.8,3.8,10.8,10.8,0,0,1,.7,3.7c.1,2.1.1,2.8.1,8.1s0,6-.1,8.1a10.8,10.8,0,0,1-.7,3.7,6.7,6.7,0,0,1-3.8,3.8,10.8,10.8,0,0,1-3.7.7H15.9a10.8,10.8,0,0,1-3.7-.7,6.7,6.7,0,0,1-3.8-3.8A10.8,10.8,0,0,1,7.7,32c-.1-2.1-.1-2.8-.1-8.1s0-6,.1-8.1a10.8,10.8,0,0,1,.7-3.7,6.7,6.7,0,0,1,3.8-3.8,10.8,10.8,0,0,1,3.7-.7H24M24,4H15.8a17.9,17.9,0,0,0-4.9.9A10,10,0,0,0,7.4,7.4a8.5,8.5,0,0,0-2.3,3.5,14.5,14.5,0,0,0-1,4.9C4,17.9,4,18.6,4,24s0,6.1.1,8.2a14.5,14.5,0,0,0,1,4.9,8.5,8.5,0,0,0,2.3,3.5,8.5,8.5,0,0,0,3.5,2.3,14.5,14.5,0,0,0,4.9,1H32.2a14.5,14.5,0,0,0,4.9-1,8.5,8.5,0,0,0,3.5-2.3A10,10,0,0,0,43,37.1a17.9,17.9,0,0,0,.9-4.9c.1-2.1.1-2.8.1-8.2s0-6.1-.1-8.2a17.9,17.9,0,0,0-.9-4.9,10,10,0,0,0-2.4-3.5A10,10,0,0,0,37.1,5a17.9,17.9,0,0,0-4.9-.9H24'/%3E%3Cpath id='Path_37' data-name='Path 37' d='M24,13.7A10.3,10.3,0,1,0,34.3,24,10.3,10.3,0,0,0,24,13.7m0,17A6.7,6.7,0,1,1,30.7,24,6.7,6.7,0,0,1,24,30.7'/%3E%3Cpath id='Path_38' data-name='Path 38' d='M37.1,13.3a2.4,2.4,0,1,1-2.4-2.4,2.4,2.4,0,0,1,2.4,2.4'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.icon-instagram-white { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_43' data-name='Rectangle 43' width='48' height='48' fill='none'/%3E%3Crect id='Rectangle_44' data-name='Rectangle 44' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_36' data-name='Path 36' d='M24,7.6h8.1a10.8,10.8,0,0,1,3.7.7,6.7,6.7,0,0,1,3.8,3.8,10.8,10.8,0,0,1,.7,3.7c.1,2.1.1,2.8.1,8.1s0,6-.1,8.1a10.8,10.8,0,0,1-.7,3.7,6.7,6.7,0,0,1-3.8,3.8,10.8,10.8,0,0,1-3.7.7H15.9a10.8,10.8,0,0,1-3.7-.7,6.7,6.7,0,0,1-3.8-3.8A10.8,10.8,0,0,1,7.7,32c-.1-2.1-.1-2.8-.1-8.1s0-6,.1-8.1a10.8,10.8,0,0,1,.7-3.7,6.7,6.7,0,0,1,3.8-3.8,10.8,10.8,0,0,1,3.7-.7H24M24,4H15.8a17.9,17.9,0,0,0-4.9.9A10,10,0,0,0,7.4,7.4a8.5,8.5,0,0,0-2.3,3.5,14.5,14.5,0,0,0-1,4.9C4,17.9,4,18.6,4,24s0,6.1.1,8.2a14.5,14.5,0,0,0,1,4.9,8.5,8.5,0,0,0,2.3,3.5,8.5,8.5,0,0,0,3.5,2.3,14.5,14.5,0,0,0,4.9,1H32.2a14.5,14.5,0,0,0,4.9-1,8.5,8.5,0,0,0,3.5-2.3A10,10,0,0,0,43,37.1a17.9,17.9,0,0,0,.9-4.9c.1-2.1.1-2.8.1-8.2s0-6.1-.1-8.2a17.9,17.9,0,0,0-.9-4.9,10,10,0,0,0-2.4-3.5A10,10,0,0,0,37.1,5a17.9,17.9,0,0,0-4.9-.9H24' fill='%23fff'/%3E%3Cpath id='Path_37' data-name='Path 37' d='M24,13.7A10.3,10.3,0,1,0,34.3,24,10.3,10.3,0,0,0,24,13.7m0,17A6.7,6.7,0,1,1,30.7,24,6.7,6.7,0,0,1,24,30.7' fill='%23fff'/%3E%3Cpath id='Path_38' data-name='Path 38' d='M37.1,13.3a2.4,2.4,0,1,1-2.4-2.4,2.4,2.4,0,0,1,2.4,2.4' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-facebook-black { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_37' data-name='Rectangle 37' width='48' height='48' fill='none'/%3E%3Crect id='Rectangle_38' data-name='Rectangle 38' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_33' data-name='Path 33' d='M44,6.1V41.9a.3.3,0,0,1-.1.2,1.9,1.9,0,0,1-1.8,1.8H31.6V28.5h4.9c.3,0,.3,0,.4-.3l.3-2.5c.1-1,.2-2,.4-3s0-.3-.2-.3H31.6V18.5c0-.3.1-.7.1-1a1.8,1.8,0,0,1,1.6-1.6l1.3-.2h3c.2,0,.2,0,.2-.2V10.4c0-.1,0-.2-.2-.2H33a7.2,7.2,0,0,0-3.3.7A6,6,0,0,0,26.2,14a7.3,7.3,0,0,0-.8,3.6c-.1,1.5,0,3.1,0,4.7H20.3c-.2,0-.2.1-.2.2v5.7c0,.2,0,.2.2.2h5.1V43.8a.3.3,0,0,0-.1.2H5.9a1.9,1.9,0,0,1-1.8-1.8c-.1,0-.1-.1-.1-.2V6.1c0-.1,0-.2.1-.2A1.9,1.9,0,0,1,5.9,4.1H42.1a1.9,1.9,0,0,1,1.8,1.8Z'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.icon-facebook-white { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_37' data-name='Rectangle 37' width='48' height='48' fill='none'/%3E%3Crect id='Rectangle_38' data-name='Rectangle 38' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_33' data-name='Path 33' d='M44,6.1V41.9a.3.3,0,0,1-.1.2,1.9,1.9,0,0,1-1.8,1.8H31.6V28.5h4.9c.3,0,.3,0,.4-.3l.3-2.5c.1-1,.2-2,.4-3s0-.3-.2-.3H31.6V18.5c0-.3.1-.7.1-1a1.8,1.8,0,0,1,1.6-1.6l1.3-.2h3c.2,0,.2,0,.2-.2V10.4c0-.1,0-.2-.2-.2H33a7.2,7.2,0,0,0-3.3.7A6,6,0,0,0,26.2,14a7.3,7.3,0,0,0-.8,3.6c-.1,1.5,0,3.1,0,4.7H20.3c-.2,0-.2.1-.2.2v5.7c0,.2,0,.2.2.2h5.1V43.8a.3.3,0,0,0-.1.2H5.9a1.9,1.9,0,0,1-1.8-1.8c-.1,0-.1-.1-.1-.2V6.1c0-.1,0-.2.1-.2A1.9,1.9,0,0,1,5.9,4.1H42.1a1.9,1.9,0,0,1,1.8,1.8Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-twitter-black { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_39' data-name='Rectangle 39' width='48' height='48' fill='none'/%3E%3Crect id='Rectangle_40' data-name='Rectangle 40' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_34' data-name='Path 34' d='M46,10.2a18.3,18.3,0,0,1-5.2,1.5,9.4,9.4,0,0,0,4-5,23.2,23.2,0,0,1-5.7,2.2A9.1,9.1,0,0,0,23.4,15a7.6,7.6,0,0,0,.3,2.1A25.8,25.8,0,0,1,5.1,7.7a8.5,8.5,0,0,0-1.3,4.5,8.9,8.9,0,0,0,4.1,7.5,8.1,8.1,0,0,1-4.1-1.1h0A8.9,8.9,0,0,0,11,27.5a8.6,8.6,0,0,1-2.4.4l-1.7-.2A9.2,9.2,0,0,0,15.4,34,18.2,18.2,0,0,1,4.2,37.8H2a25.1,25.1,0,0,0,13.8,4.1c16.6,0,25.7-13.8,25.7-25.7V14.9A18.3,18.3,0,0,0,46,10.2Z'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.icon-twitter-white { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_39' data-name='Rectangle 39' width='48' height='48' fill='none'/%3E%3Crect id='Rectangle_40' data-name='Rectangle 40' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_34' data-name='Path 34' d='M46,10.2a18.3,18.3,0,0,1-5.2,1.5,9.4,9.4,0,0,0,4-5,23.2,23.2,0,0,1-5.7,2.2A9.1,9.1,0,0,0,23.4,15a7.6,7.6,0,0,0,.3,2.1A25.8,25.8,0,0,1,5.1,7.7a8.5,8.5,0,0,0-1.3,4.5,8.9,8.9,0,0,0,4.1,7.5,8.1,8.1,0,0,1-4.1-1.1h0A8.9,8.9,0,0,0,11,27.5a8.6,8.6,0,0,1-2.4.4l-1.7-.2A9.2,9.2,0,0,0,15.4,34,18.2,18.2,0,0,1,4.2,37.8H2a25.1,25.1,0,0,0,13.8,4.1c16.6,0,25.7-13.8,25.7-25.7V14.9A18.3,18.3,0,0,0,46,10.2Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-linkedin-black { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_41' data-name='Rectangle 41' width='48' height='48' fill='none'/%3E%3Crect id='Rectangle_42' data-name='Rectangle 42' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_35' data-name='Path 35' d='M41,4.1H7A2.9,2.9,0,0,0,4,7V41.1A2.9,2.9,0,0,0,7,44H41a2.9,2.9,0,0,0,2.9-2.9V7A2.9,2.9,0,0,0,41,4.1Zm-25.1,34h-6v-19h6Zm-3-21.6A3.5,3.5,0,0,1,9.5,13a3.4,3.4,0,1,1,6.8,0,3.5,3.5,0,0,1-3.4,3.5ZM38,38.1H32.1V28.8c0-2.2,0-5-3.1-5s-3.5,2.4-3.5,4.9v9.4H19.6v-19h5.6v2.6h.1a6.2,6.2,0,0,1,5.6-3.1c6,0,7.1,3.9,7.1,9.1Z'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.icon-linkedin-white { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_41' data-name='Rectangle 41' width='48' height='48' fill='none'/%3E%3Crect id='Rectangle_42' data-name='Rectangle 42' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_35' data-name='Path 35' d='M41,4.1H7A2.9,2.9,0,0,0,4,7V41.1A2.9,2.9,0,0,0,7,44H41a2.9,2.9,0,0,0,2.9-2.9V7A2.9,2.9,0,0,0,41,4.1Zm-25.1,34h-6v-19h6Zm-3-21.6A3.5,3.5,0,0,1,9.5,13a3.4,3.4,0,1,1,6.8,0,3.5,3.5,0,0,1-3.4,3.5ZM38,38.1H32.1V28.8c0-2.2,0-5-3.1-5s-3.5,2.4-3.5,4.9v9.4H19.6v-19h5.6v2.6h.1a6.2,6.2,0,0,1,5.6-3.1c6,0,7.1,3.9,7.1,9.1Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-angle_up-black { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_37' data-name='Rectangle 37' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_34' data-name='Path 34' d='M24,20.8,13.4,31.4a1.9,1.9,0,0,1-3-.2,2.1,2.1,0,0,1,.2-2.7l12-11.9a1.9,1.9,0,0,1,2.8,0l12,11.9a2.1,2.1,0,0,1,.2,2.7,1.9,1.9,0,0,1-3,.2Z'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.icon-angle_up-white { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_37' data-name='Rectangle 37' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_34' data-name='Path 34' d='M24,20.8,13.4,31.4a1.9,1.9,0,0,1-3-.2,2.1,2.1,0,0,1,.2-2.7l12-11.9a1.9,1.9,0,0,1,2.8,0l12,11.9a2.1,2.1,0,0,1,.2,2.7,1.9,1.9,0,0,1-3,.2Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.icon-angle_up-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_1' data-name='Rectangle 1' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_1' data-name='Path 1' d='M24,20.8,13.4,31.4a1.9,1.9,0,0,1-3-.2,2.1,2.1,0,0,1,.2-2.7l12-11.9a1.9,1.9,0,0,1,2.8,0l12,11.9a2.1,2.1,0,0,1,.2,2.7,1.9,1.9,0,0,1-3,.2Z' fill='%231b68ee'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-angle_down-black { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_38' data-name='Rectangle 38' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_35' data-name='Path 35' d='M24,27.2,13.4,16.6a1.9,1.9,0,0,0-3,.2,2.1,2.1,0,0,0,.2,2.7l12,11.9a1.9,1.9,0,0,0,2.8,0l12-11.9a2.1,2.1,0,0,0,.2-2.7,1.9,1.9,0,0,0-3-.2Z'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.icon-angle_down-white { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_38' data-name='Rectangle 38' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_35' data-name='Path 35' d='M24,27.2,13.4,16.6a1.9,1.9,0,0,0-3,.2,2.1,2.1,0,0,0,.2,2.7l12,11.9a1.9,1.9,0,0,0,2.8,0l12-11.9a2.1,2.1,0,0,0,.2-2.7,1.9,1.9,0,0,0-3-.2Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.icon-angle_down-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_2' data-name='Rectangle 2' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_2' data-name='Path 2' d='M24,27.2,13.4,16.6a1.9,1.9,0,0,0-3,.2,2.1,2.1,0,0,0,.2,2.7l12,11.9a1.9,1.9,0,0,0,2.8,0l12-11.9a2.1,2.1,0,0,0,.2-2.7,1.9,1.9,0,0,0-3-.2Z' fill='%231b68ee'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-angle_left-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_1' data-name='Rectangle 1' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_1' data-name='Path 1' d='M20.8,24,31.4,13.4a1.9,1.9,0,0,0-.2-3,2.1,2.1,0,0,0-2.7.2l-11.9,12a1.9,1.9,0,0,0,0,2.8l11.9,12a2.1,2.1,0,0,0,2.7.2,1.9,1.9,0,0,0,.2-3Z' fill='%231b68ee'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-angle_right-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_2' data-name='Rectangle 2' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_2' data-name='Path 2' d='M27.2,24,16.6,34.6a1.9,1.9,0,0,0,.2,3,2.1,2.1,0,0,0,2.7-.2l11.9-12a1.9,1.9,0,0,0,0-2.8l-11.9-12a2.1,2.1,0,0,0-2.7-.2,1.9,1.9,0,0,0-.2,3Z' fill='%231b68ee'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-pencil-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_3' data-name='Rectangle 3' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_3' data-name='Path 3' d='M43.4,18.8,29.3,4.6a1.9,1.9,0,0,0-2.8,0L4.6,26.5A2,2,0,0,0,4,27.9V42a2,2,0,0,0,2,2H20.1a2,2,0,0,0,1.4-.6L43.4,21.6a1.9,1.9,0,0,0,0-2.8ZM19.3,40H8V28.7L20.5,16.3,31.7,27.6ZM34.6,24.8,23.3,13.5l4.6-4.7L39.2,20.2Z' fill='%231b68ee'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-box-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_5' data-name='Rectangle 5' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_5' data-name='Path 5' d='M42.9,12.2l-18-9L24,3l-.9.2-18,9A1.9,1.9,0,0,0,4,14V33.8a1.9,1.9,0,0,0,1.1,1.8l18,9.2.9.2.9-.2,18-9.2A1.9,1.9,0,0,0,44,33.8V14A1.9,1.9,0,0,0,42.9,12.2ZM24,7.2l14.6,7.3L24,21.9,9.4,14.5ZM8,18.3l14,7.1V39.7L8,32.6ZM26,39.7V25.4l14-7.1V32.6Z' fill='%231b68ee'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-bug-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_4' data-name='Rectangle 4' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_4' data-name='Path 4' d='M42,32a2,2,0,0,0,0-4H35.9a15.7,15.7,0,0,0-.4-2.3A10,10,0,0,0,43,16a2,2,0,0,0-4,0,6.1,6.1,0,0,1-4.6,5.9,15.5,15.5,0,0,0-3.1-4.6A7.2,7.2,0,0,0,32,14a8.7,8.7,0,0,0-1-3.9h0a4,4,0,0,1,4-4,2,2,0,0,0,0-4A8.1,8.1,0,0,0,27.6,7a7.7,7.7,0,0,0-7.2,0A8.1,8.1,0,0,0,13,2a2,2,0,1,0,0,4,4,4,0,0,1,4,4h0a8.7,8.7,0,0,0-1,4,7.5,7.5,0,0,0,.7,3.3,16.1,16.1,0,0,0-3,4.5A5.9,5.9,0,0,1,9,16a2,2,0,1,0-4,0,10.2,10.2,0,0,0,7.5,9.7,15.7,15.7,0,0,0-.4,2.3H6a2,2,0,0,0,0,4h6.1a15.7,15.7,0,0,0,.4,2.3A10.2,10.2,0,0,0,5,44a2,2,0,1,0,4,0,6.1,6.1,0,0,1,4.7-5.9c2,4.7,5.9,7.9,10.3,7.9s8.3-3.2,10.4-7.9A6,6,0,0,1,39,44a2,2,0,0,0,4,0,10.2,10.2,0,0,0-7.5-9.7,15.7,15.7,0,0,0,.4-2.3ZM24,10a4,4,0,0,1,4,4,2.8,2.8,0,0,1-.1.9,8.9,8.9,0,0,0-7.8,0A2.8,2.8,0,0,1,20,14,4,4,0,0,1,24,10ZM16,30c0-5.6,2.6-10.3,6-11.6V41.6C18.6,40.3,16,35.6,16,30ZM26,41.6V18.4c3.4,1.3,6,6,6,11.6S29.4,40.3,26,41.6Z' fill='%231b68ee'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-devices-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_6' data-name='Rectangle 6' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cg id='Group_1' data-name='Group 1'%3E%3Cpath id='Path_6' data-name='Path 6' d='M42,23V41H34V23h8m2-4H32a2,2,0,0,0-2,2V43a2,2,0,0,0,2,2H44a2,2,0,0,0,2-2V21A2,2,0,0,0,44,19Z' fill='%231b68ee'/%3E%3Cpath id='Path_7' data-name='Path 7' d='M38,7H7A2,2,0,0,0,5,9V31a2,2,0,0,0,2,2H26V29H9V11H36v4h4V9A2,2,0,0,0,38,7Z' fill='%231b68ee'/%3E%3Cpath id='Path_8' data-name='Path 8' d='M26,37v4H4a2,2,0,0,1,0-4Z' fill='%231b68ee'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-dash-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_1' data-name='Rectangle 1' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Crect id='Rectangle_2' data-name='Rectangle 2' width='34' height='4' rx='2' transform='translate(7 22)' fill='%231b68ee'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-television-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_45' data-name='Rectangle 45' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_42' data-name='Path 42' d='M44,4H4A2,2,0,0,0,2,6V34a2,2,0,0,0,2,2H18v4H12a2,2,0,0,0,0,4H36a2,2,0,0,0,0-4H30V36H44a2,2,0,0,0,2-2V6A2,2,0,0,0,44,4ZM42,8V24H6V8ZM26,40H22V36h4ZM6,32V28H42v4Z' fill='%231b68ee'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-camera-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_46' data-name='Rectangle 46' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='Q3_icons' data-name='Q3 icons'%3E%3Cpath id='Path_43' data-name='Path 43' d='M45.2,9l-.6.2L34,15.9V11a2,2,0,0,0-2-2H4a2,2,0,0,0-2,2V37a2,2,0,0,0,2,2H32a2,2,0,0,0,2-2V32.1l10.6,6.7.6.2c.5,0,.8-.4.8-1.1V10.1C46,9.4,45.7,9,45.2,9ZM30,35H6V13H30Zm12-2.6-8-5V20.6l8-5Z' fill='%231b68ee'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-message-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_48' data-name='Rectangle 48' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_48' data-name='Path 48' d='M40,8V32H13.6l-1.2,1.1L8,37.3V8H40m2-4H6A2,2,0,0,0,4,6V42a1.98,1.98,0,0,0,3.4,1.4L15.2,36H42a2,2,0,0,0,2-2V6A2,2,0,0,0,42,4Z' fill='%231b68ee'/%3E%3Crect id='Rectangle_49' data-name='Rectangle 49' width='20' height='4' rx='2' transform='translate(14 14)' fill='%231b68ee'/%3E%3Crect id='Rectangle_50' data-name='Rectangle 50' width='12' height='4' rx='2' transform='translate(14 22)' fill='%231b68ee'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-squares-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_52' data-name='Rectangle 52' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='Q3_icons' data-name='Q3 icons'%3E%3Cg id='Group_40' data-name='Group 40'%3E%3Cpath id='Path_50' data-name='Path 50' d='M20,4H6A2,2,0,0,0,4,6V20a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V6A2,2,0,0,0,20,4ZM18,18H8V8H18Z' fill='%231b68ee'/%3E%3Cpath id='Path_51' data-name='Path 51' d='M42,4H28a2,2,0,0,0-2,2V20a2,2,0,0,0,2,2H42a2,2,0,0,0,2-2V6A2,2,0,0,0,42,4ZM40,18H30V8H40Z' fill='%231b68ee'/%3E%3Cpath id='Path_52' data-name='Path 52' d='M20,26H6a2,2,0,0,0-2,2V42a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V28A2,2,0,0,0,20,26ZM18,40H8V30H18Z' fill='%231b68ee'/%3E%3Cpath id='Path_53' data-name='Path 53' d='M42,26H28a2,2,0,0,0-2,2V42a2,2,0,0,0,2,2H42a2,2,0,0,0,2-2V28A2,2,0,0,0,42,26ZM40,40H30V30H40Z' fill='%231b68ee'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-shopping-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_51' data-name='Rectangle 51' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='icons_Q2' data-name='icons Q2'%3E%3Cpath id='Path_49' data-name='Path 49' d='M44.3,10A3.3,3.3,0,0,0,42,9H11.5l-.4-3.4A3,3,0,0,0,8.1,3H5A2,2,0,0,0,5,7H7.2l3.2,26.9A5.9,5.9,0,0,0,7.5,39a6,6,0,0,0,6,6,6.2,6.2,0,0,0,5.7-4H29.8a6.2,6.2,0,0,0,5.7,4,6,6,0,0,0,0-12,6.2,6.2,0,0,0-5.7,4H19.2a6,6,0,0,0-4.9-3.9L14.1,31H39.4a3,3,0,0,0,2.9-2.6L45,12.6a3.6,3.6,0,0,0-.7-2.6ZM37.5,39a2,2,0,1,1-2-2A2,2,0,0,1,37.5,39Zm-22,0a2,2,0,1,1-2-2A2,2,0,0,1,15.5,39Zm23-12H13.6L12,13H40.8Z' fill='%231b68ee'/%3E%3C/g%3E%3C/svg%3E%0A"); }

.icon-boxing-colored { background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' data-name='Layer 2' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg id='invisible_box' data-name='invisible box'%3E%3Crect id='Rectangle_53' data-name='Rectangle 53' width='48' height='48' fill='none'/%3E%3C/g%3E%3Cg id='Q3_icons' data-name='Q3 icons'%3E%3Cg id='Group_41' data-name='Group 41'%3E%3Cpath id='Path_54' data-name='Path 54' d='M36,2H19a6,6,0,0,0-6,6v3H12a6,6,0,0,0-6,6V27a8,8,0,0,0,7,7.9V43a2.9,2.9,0,0,0,3,3H32a2.9,2.9,0,0,0,3-3V34.9A8,8,0,0,0,42,27V8A6,6,0,0,0,36,2ZM17,42V35H31v7ZM38,27a4,4,0,0,1-4,4H14a4,4,0,0,1-4-4V17a2,2,0,0,1,2-2h1v7a2,2,0,0,0,4,0V8a2,2,0,0,1,2-2H36a2,2,0,0,1,2,2Z' fill='%231b68ee'/%3E%3Cpath id='Path_55' data-name='Path 55' d='M27,37H21a1.5,1.5,0,0,0,0,3h6a1.5,1.5,0,0,0,0-3Z' fill='%231b68ee'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A"); }

/* ---------------------------------------------------------------------------------------------------- | Grid */

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    min-height: 1px;
}

.row {
    display: inline-block;
    width: 100%;
}

.col {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding: 15px;
    min-height: 1px;
}

.col-center {
    display: table;
    margin: 0 auto;
}

.col-2  { width: calc(100% / 12 *  2); }
.col-3  { width: calc(100% / 12 *  3); }
.col-4  { width: calc(100% / 12 *  4); }
.col-5  { width: calc(100% / 12 *  5); }
.col-6  { width: calc(100% / 12 *  6); }
.col-7  { width: calc(100% / 12 *  7); }
.col-8  { width: calc(100% / 12 *  8); }
.col-9  { width: calc(100% / 12 *  9); }
.col-10 { width: calc(100% / 12 * 10); }
.col-11 { width: calc(100% / 12 * 11); }
.col-12 { width: calc(100% / 12 * 12); }

@media only screen and (max-width: 1240px) {
    
    .container {
        padding: 0 15px;
    }

}

@media only screen and (max-width: 960px) {

    .col    { width: calc(100% / 12 *  1); }
    .col-2  { width: calc(100% / 12 *  2); }
    .col-3  { width: calc(100% / 12 *  4); }
    .col-4  { width: calc(100% / 12 *  4); }
    .col-5  { width: calc(100% / 12 * 12); }
    .col-6  { width: calc(100% / 12 * 12); }
    .col-7  { width: calc(100% / 12 * 12); }
    .col-8  { width: calc(100% / 12 * 12); }
    .col-9  { width: calc(100% / 12 * 12); }
    .col-10 { width: calc(100% / 12 * 12); }
    .col-11 { width: calc(100% / 12 * 12); }
    .col-12 { width: calc(100% / 12 * 12); }

    .col-full {
        width: 100%;
    }

    .cols-join .col {
        padding: 15px 15px 0 15px;
    }

    .cols-join .col ~ .col {
        padding: 0 15px 0 15px;
    }

}

@media only screen and (max-width: 560px) {

    .col    { width: calc(100% / 12 *  6); }
    .col-2  { width: calc(100% / 12 *  12); }
    .col-3  { width: calc(100% / 12 *  12); }
    .col-4  { width: calc(100% / 12 *  12); }
    .col-5  { width: calc(100% / 12 * 12); }
    .col-6  { width: calc(100% / 12 * 12); }
    .col-7  { width: calc(100% / 12 * 12); }
    .col-8  { width: calc(100% / 12 * 12); }
    .col-9  { width: calc(100% / 12 * 12); }
    .col-10 { width: calc(100% / 12 * 12); }
    .col-11 { width: calc(100% / 12 * 12); }
    .col-12 { width: calc(100% / 12 * 12); }

}

/* ---------------------------------------------------------------------------------------------------- | Form elements */

.form {
    display: inline-block;
    width: calc(100% + 30px);
    margin: 0 -15px 0;
}

.input-container {
    display: inline-block;
    width: calc(100% - 30px);
    margin: 0 15px 30px 15px;
    vertical-align: top;
}

.input-container.is-half {
    width: calc(50% - 30px);
}

.input-label {
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
}

input {
    display: inline-block;
    width: 100%;
    height: 40px;
    border: 1px solid var(--T2);
    outline: none;
    border-radius: 3px;
    font-size: 15px;
    line-height: 38px;
    padding: 0 15px;
    color: var(--T4);
}

textarea {
    display: inline-block;
    width: 100%;
    height: 200px;
    border: 1px solid var(--T2);
    outline: none;
    border-radius: 3px;
    font-size: 15px;
    line-height: 25px;
    padding: 6.5px 15px;
    color: var(--T4);
    resize: none;
}

::-webkit-input-placeholder {
    color: var(--T3);
  }
  
:-ms-input-placeholder {
    color: var(--T3);
}
  
::placeholder {
    color: var(--T3);
}

.form-footer {
    display: inline-block;
    width: 100%;
}

.form-footer .btn {
    display: table;
    margin: 0 auto;
}

.form-message {
    display: none;
    width: 100%;
    margin-top: 15px;
    text-align: center;
}

.form.has-message .form-message {
    display: inline-block;
}

.form .input-container-checkbox {
    padding-left: 25px;
    position: relative;
    margin-top: 15px;
}

.form .input-container-checkbox .input-checkbox {
    width: 100%;
    position: absolute;
    z-index: 1;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    left: 0;
    top: 0;
    display: inline-block;
}

.input-checkbox-field {
    position: absolute;
    left: 0;
    top: 7.5px;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    background: var(--T1);
    border: 1px solid var(--T2);
}

.form .input-container-checkbox .input-checkbox:checked ~ .input-checkbox-field {
    background: var(--PR);
}

/* ---------------------------------------------------------------------------------------------------- | Generic */

.filter {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid var(--T2);
    white-space: nowrap;
    overflow-x: auto;
    height: 37px;
}

.filter.is-center {
    text-align: center;
}

.filter.is-overlay {
    border-bottom: none;
}

.filter-item {
    display: inline-block;
    vertical-align: top;
    line-height: 20px;
    margin: 0 30px 15px 0;
    cursor: pointer;
    position: relative;
}

.filter-item:not(.is-active):hover {
    color: var(--T6);
}

.filter-item.is-overlay:not(.is-active):hover {
    color: var(--T1);
}

.filter-item.is-active {
    font-weight: 700;
    color: var(--PR);
}

.filter-item.is-active.is-overlay {
    color: var(--T1);
}

.filter-item:before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    background: var(--PR);
    border-radius: 2px;
    position: absolute;
    bottom: -16px;
    left: 0;
}

.filter-item.is-overlay:before {
    background: var(--T1);
}

.filter-item.is-active:before {
    height: 2px;
}

.filter-groups {
    margin-top: 30px;
}

.filter-group-card {
    display: inline-block;
    width: 100%;
    padding: 30px;
    background: var(--T1);
    border-radius: 3px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
}

.filter-group-card h5 {
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
}

.filter-group {
    transition: all 0.2s ease-in-out;
    opacity: 0;
    transform: scale(0);
    display: none;
}

.filter-group.is-active {
    opacity: 1;
    transform: scale(1);
    display: inline-block;
}

.filter-group.is-animating {
    opacity: 0;
    transform: scale(0.5);
}

#features .filter-group.is-animating {
    transform: translateX(-30px);
}

/* ---------------------------------------------------------------------------------------------------- | Components */

.component {
    display: inline-block;
    width: 100%;
    padding: 60px 0;
    position: relative;
}

.component.no-padding {
    padding: 0;
}

.component-before,
.component-before.is-light {
    display: inline-block;
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 6.77%;
    margin-bottom: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1919.997' height='129.997' viewBox='0 0 1919.997 129.997'%3E%3Cpath id='Path_33' data-name='Path 33' d='M1920,1.125s-634.484,130-960,130A3597.063,3597.063,0,0,1,0,1.125Z' transform='translate(-0.004 -1.125)' fill='%23f8f8f8'/%3E%3C/svg%3E%0A");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

[darkmode="true"] .component-before,
.component-before.is-dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1919.997' height='129.997' viewBox='0 0 1919.997 129.997'%3E%3Cpath id='Path_33' data-name='Path 33' d='M1920,1.125s-634.484,130-960,130A3597.063,3597.063,0,0,1,0,1.125Z' transform='translate(-0.004 -1.125)' fill='%23141414'/%3E%3C/svg%3E%0A");
}

.component-after,
.component-after.is-light {
    display: inline-block;
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 6.77%;
    margin-top: 50px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1919.997' height='129.997' viewBox='0 0 1919.997 129.997'%3E%3Cpath id='Path_33' data-name='Path 33' d='M1920,131.122s-634.484-130-960-130A3597.062,3597.062,0,0,0,0,131.122Z' transform='translate(-0.004 -1.125)' fill='%23f8f8f8'/%3E%3C/svg%3E%0A");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.component-after.is-fixed {
    position: absolute;
    left: 0;
    bottom: 0;
}

[darkmode="true"] .after-before,
.component-after.is-dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1919.997' height='129.997' viewBox='0 0 1919.997 129.997'%3E%3Cpath id='Path_33' data-name='Path 33' d='M1920,131.122s-634.484-130-960-130A3597.062,3597.062,0,0,0,0,131.122Z' transform='translate(-0.004 -1.125)' fill='%23141414'/%3E%3C/svg%3E%0A");
}

.component-title {
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}

.component-subtitle {
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}

.col-center .component-title,
.col-center .component-subtitle {
    text-align: center;
}

/* ---------------------------------------------------------------------------------------------------- | Header */

#header {
    background-image: url('./assets/images/other/header.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100vh;
}

#header:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}

#header .container {
    height: 100%;
}

.header-intro {
    margin-top: 200px;
    animation: header-intro 1s ease-in-out;
}

@keyframes header-intro {
    0% { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}

.header-intro h1 {
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}

.header-intro h1 span {
    color: var(--PR);
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

.header-intro p {
    display: inline-block;
    width: 100%;
}

.targets-header {
    position: absolute;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
}

.targets {
    position: absolute;
    left: 50%;
    bottom: 45px;
    transform: translateX(-50%);
    z-index: 20;
    width: 100%;
    max-width: 1140px;
}

.target {
    display: inline-block;
    width: 100%;
    padding: 30px;
    background: var(--T1);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}

.targets .col:nth-child(1) .target { animation: target 0.5s ease-in-out; }
.targets .col:nth-child(2) .target { animation: target 0.8s ease-in-out; }
.targets .col:nth-child(3) .target { animation: target 1.2s ease-in-out; }
.targets .col:nth-child(4) .target { animation: target 1.5s ease-in-out; }

@keyframes target {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.target .icon {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 15px auto;
}

.target h5 {
    text-align: center;
}

@media only screen and (max-width: 960px) {

    .targets-header {
        text-align: center;
        text-shadow: none!important;
        color: var(--T6)!important;
        position: relative;
        top: auto;
        margin-bottom: 30px;
    }

    h1 {
        font-size: 36px;
        line-height: 50px;
    }

    .header-intro {
        margin-top: 100px;
    }

    .targets .col {
        width: calc(100% / 12 * 6);
    }

    .targets {
        transform: 0;
        position: relative;
        margin-top: 100px;
    }

}

@media only screen and (max-width: 550px) {

    .target {
        height: 180px;
        position: relative;
    }

    .target-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

}

/* ---------------------------------------------------------------------------------------------------- | Topbar */

#topbar {
    display: inline-block;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    padding: 30px 15px;
    transition: all 0.2s ease-in-out;
    background: rgba(0, 0, 0, 0);
}

#topbar.is-scrolled {
    padding: 10px 0;
    background: rgba(0, 0, 0, 1);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
}

#topbar .container {
    padding: 0 15px;
}

.topbar-left {
    float: left;
}

.topbar-logo {
    display: inline-block;
    margin: 5px 0;
    animation: topbar-logo 1s ease-in-out;
}

@keyframes topbar-logo {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

.topbar-right {
    float: right;
}

#topbar .btn ~ .btn {
    margin-left: 15px;
}

#topbar .btn {
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
    animation: topbar-btn 1s ease-in-out;
}

@keyframes topbar-btn {
    0% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* ---------------------------------------------------------------------------------------------------- | features */

#features .filter-group {
    width: 100%;
    padding: 0;
    margin-bottom: 30px;
}

.features-img {
    display: inline-block;
    width: 100%;
}

#features .filter {
    margin-top: 30px;
    height: 37px;
}

#features .filter-group .icon {
    display: inline-block;
    vertical-align: top;
}

#features .filter-group p {
    display: inline-block;
    width: calc(100% - 54px);
    vertical-align: top;
    margin-left: 30px;
}

@media only screen and (max-width: 960px) {

    #features {
        margin-top: 400px;
    }

    .features-img {
        margin-top: 30px;
    }

}

/* ---------------------------------------------------------------------------------------------------- | Testimonials */

#testimonials {
    background-image: url('./assets/images/other/testimonials.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.testimonial-nav {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--T1);
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-size: 24px;
    z-index: 10;
    transition: all 0.2s ease-in-out;
}

.testimonial-nav:hover {
    transform: translateY(-50%) scale(1.05);
}

.testimonial-nav.icon-angle_right-colored {
    left: auto;
    right: 0;
}

#testimonials:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(27, 104, 238, 0.5);
}

#testimonials .row {
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.2s ease-in-out
}

#testimonials .row.is-animating {
    opacity: 0;
}

#testimonials .row .col {
    margin: 30px 0;
    opacity: 0;
    transform: translateX(-100%);
}

#testimonials .row .col:nth-child(2) {
    margin: 30px 0;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    transform: translateX(-200%);
}

#testimonials .row .col:nth-child(3) {
    opacity: 1;
    transform: translateX(-150%);
}

#testimonials .row .col:nth-child(3) ~ .col {
    opacity: 0;
    transform: translateX(-200%);
}

.testimonial {
    white-space: normal;
}

.testimonial * {
    white-space: normal;
    text-align: center;
}

.testimonial h6 {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

@media only screen and (max-width: 960px) {

    #testimonials .row .col:nth-child(3) {
        opacity: 1;
        transform: translateX(-200%);
    }

}

/* ---------------------------------------------------------------------------------------------------- | Lists */

#lists {
    /* background-image: url('./assets/images/other/lists.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; */
    background: var(--T2);
}

.list-image-container {
    display: inline-block;
    width: 100%;
    border-radius: 10px;
    padding-top: 56.25%;
    background-color: var(--T1);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    position: relative;
}

.list-image {
    display: inline-block;
    width: calc(100% - 60px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    height: calc(100% - 60px);
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.list-image-container.is-filled .list-image {
    background-size: cover;
    width: 100%;
    height: 100%;
}

.list-item h5 {
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-top: 15px;
}

.list-image-container:hover {
    transform: scale(1.05);
}

#filter-groups-lists:hover .list-item:not(:hover) {
    opacity: 0.5;
}

.type {
    display: inline-block;
    width: 100%;
    background: var(--T1);
    border-radius: 3px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
}

/* ---------------------------------------------------------------------------------------------------- | Statistics */

#statistics {
    background-image: url('./assets//images/other/statistics.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

#statistics:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
}

#statistics .row {
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.2s ease-in-out
}

#statistics .row.is-animating {
    opacity: 0;
}

#statistics .row .col {
    margin: 30px 0;;
    opacity: 0;
    transform: translateX(-100%);
}

#statistics .row .col:nth-child(2) {
    margin: 30px 0;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    transform: translateX(-200%);
}

#statistics .row .col:nth-child(2) ~ .col {
    opacity: 1;
    transform: translateX(-200%);
}

#statistics .row .col:nth-child(5) ~ .col {
    opacity: 0;
    transform: translateX(-200%);
}

.statistic {
    white-space: normal;
}

.statistic h2 {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.statistic p {
    display: inline-block;
    width: 100%;
    text-align: center;
}

/* ---------------------------------------------------------------------------------------------------- | News */

#news {
    background: var(--BD);
    padding-top: 0;
}

.news {
    display: inline-block;
    width: 100%;
}

#news p {
    color: var(--T3);
}

#news h5 {
    color: var(--T1);
}

.news-image {
    display: inline-block;
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.news-image-overlay {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(27, 104, 238, 0.75);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.news-image:hover .news-image-overlay {
    opacity: 1;
}

.news-image-overlay h5 {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.2s ease-in-out;
}

.news-image:hover .news-image-overlay h5 {
    transform: translate(-50%, -50%) scale(1);
}

.news-title {
    text-align: center;
    display: inline-block;
    width: 100%;
    margin: 30px 0;
}

.news-image:hover ~ .news-title {
    color: var(--PR);
}

.news-subtitle {
    text-align: center;
    display: inline-block;
    width: 100%;
}

@media only screen and (max-width: 560px) {

    .news-title {
        margin: 15px 0 5px 0;
    }

}

/* ---------------------------------------------------------------------------------------------------- | Faq */

.faq {
    display: inline-block;
    width: 100%;
    background: var(--T1);
    border-radius: 3px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
    padding: 0 30px;
    margin-bottom: 15px;
    transition: all 0.2s ease-in-out;
    position: relative;
}

.faq h5 {
    padding: 17px 54px 17px 0;
    cursor: pointer;
}

.faq h5:hover,
.faq .faq-icon:hover ~ h5,
.faq.is-open h5 {
    color: var(--PR);
}

.faq-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 18px;
    right: 30px;
    cursor: pointer;
}

.faq p {
    margin-top: 13px;
    margin-bottom: 30px;
    display: none;
}

.faq.is-open p {
    display: inline-block;
}

/* ---------------------------------------------------------------------------------------------------- | Footer */

.footer-top {
    display: inline-block;
    width: 100%;
    background: var(--T6);
    padding-bottom: 40px;
}

.footer-logo {
    display: inline-block;
    width: 100%;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
    background-image: url('./assets/images/other/creative_europe_media.png');
}

.footer-logo-container p {
    display: inline-block;
    width: 100%;
    color: var(--T3);
    margin-bottom: 30px;
}

.footer-logo ~ p {
    margin-top: 30px;
    margin-bottom: 0;
}

.footer-logo-container p b {
    font-size: 13px;
    font-weight: 700;
    color: var(--T1);
    line-height: 23px;
}

.footer-top h5 {
    color: var(--T1);
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}

.footer-top a {
    color: var(--T3);
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
}

.footer-bottom {
    display: inline-block;
    width: 100%;
    background: var(--PR);
    padding: 0 15px;
}

.footer-bottom-left {
    float: left;
}

.footer-bottom-right {
    float: right;
}

.footer-bottom p {
    color: var(--T1);
    line-height: 60px;
    display: inline-block;
    vertical-align: top;
}

.footer-socials {
    display: inline-block;
    padding: 20px 7.5px;
    vertical-align: top;
}

.footer-social {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    height: 20px;
    margin: 0 7.5px;
}

@media only screen and (max-width: 960px) {

    .footer-bottom {
        padding: 15px;
    }

    .footer-bottom-left {
        width: 100%;
        text-align: center;
    }

    .footer-socials {
        display: inline-block;
        width: 100%;
        padding: 0;
        margin: 15px 0 30px;
    }

    .footer-bottom-right {
        float: left;
        width: 100%;
        text-align: center;
    }

    .footer-bottom p {
        line-height: 25px;
    }

    .footer-top {
        text-align: center;
    }

    .footer-logo {
        margin-top: 0;
        background-position: center center;
        margin-bottom: 30px;
    }

}

@media only screen and (max-width: 780px) {

    #processes .filter-group,
    #lists .filter-group {
        width: 50%;
    }

}

@media only screen and (max-width: 550px) {

    #processes .filter-group {
        width: 100%;
    }

}