:root {
    --color: #1F2226;
    --font-size: 12px;
}

/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3960fa");

@font-face {
    font-family: 'Gilroy';
    font-weight: 400;
    font-style: italic;
    src: url('fonts/3960FA_2_0.eot');
    src: url('fonts/3960FA_2_0.eot?#iefix') format('embedded-opentype'),url('fonts/3960FA_2_0.woff2') format('woff2'),url('fonts/3960FA_2_0.woff') format('woff'),url('fonts/3960FA_2_0.ttf') format('truetype'),url('fonts/3960FA_2_0.svg#wf') format('svg');
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 400;
    font-style: normal;
    src: url('fonts/3960FA_3_0.eot');
    src: url('fonts/3960FA_3_0.eot?#iefix') format('embedded-opentype'),url('fonts/3960FA_3_0.woff2') format('woff2'),url('fonts/3960FA_3_0.woff') format('woff'),url('fonts/3960FA_3_0.ttf') format('truetype'),url('fonts/3960FA_3_0.svg#wf') format('svg');
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 500;
    font-style: italic;
    src: url('fonts/3960FA_0_0.eot');
    src: url('fonts/3960FA_0_0.eot?#iefix') format('embedded-opentype'),url('fonts/3960FA_0_0.woff2') format('woff2'),url('fonts/3960FA_0_0.woff') format('woff'),url('fonts/3960FA_0_0.ttf') format('truetype'),url('fonts/3960FA_0_0.svg#wf') format('svg');
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 500;
    font-style: normal;
    src: url('fonts/3960FA_1_0.eot');
    src: url('fonts/3960FA_1_0.eot?#iefix') format('embedded-opentype'),url('fonts/3960FA_1_0.woff2') format('woff2'),url('fonts/3960FA_1_0.woff') format('woff'),url('fonts/3960FA_1_0.ttf') format('truetype'),url('fonts/3960FA_1_0.svg#wf') format('svg');
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 700;
    font-style: italic;
    src: url('fonts/3960FA_6_0.eot');
    src: url('fonts/3960FA_6_0.eot?#iefix') format('embedded-opentype'),url('fonts/3960FA_6_0.woff2') format('woff2'),url('fonts/3960FA_6_0.woff') format('woff'),url('fonts/3960FA_6_0.ttf') format('truetype'),url('fonts/3960FA_6_0.svg#wf') format('svg');
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 700;
    font-style: normal;
    src: url('fonts/3960FA_7_0.eot');
    src: url('fonts/3960FA_7_0.eot?#iefix') format('embedded-opentype'),url('fonts/3960FA_7_0.woff2') format('woff2'),url('fonts/3960FA_7_0.woff') format('woff'),url('fonts/3960FA_7_0.ttf') format('truetype'),url('fonts/3960FA_7_0.svg#wf') format('svg');
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 900;
    font-style: italic;
    src: url('fonts/3960FA_4_0.eot');
    src: url('fonts/3960FA_4_0.eot?#iefix') format('embedded-opentype'),url('fonts/3960FA_4_0.woff2') format('woff2'),url('fonts/3960FA_4_0.woff') format('woff'),url('fonts/3960FA_4_0.ttf') format('truetype'),url('fonts/3960FA_4_0.svg#wf') format('svg');
}

@font-face {
    font-family: 'Gilroy';
    font-weight: 900;
    font-style: normal;
    src: url('fonts/3960FA_5_0.eot');
    src: url('fonts/3960FA_5_0.eot?#iefix') format('embedded-opentype'),url('fonts/3960FA_5_0.woff2') format('woff2'),url('fonts/3960FA_5_0.woff') format('woff'),url('fonts/3960FA_5_0.ttf') format('truetype'),url('fonts/3960FA_5_0.svg#wf') format('svg');
}

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
}

html {
    font-size: 14px;
}

body {
    height: 100%;
    font-size: 1rem;
    font-family: Gilroy,Arial,Helvetica Neue,Helvetica,sans-serif;
    line-height: 1.5625;
    background-color: #15171A;
    color: #fff;
}

h1 {
    font-weight: 900;
    font-size: 2.75rem;
    line-height: 1.1363636364;
    margin: 0 0 0.5rem 0;
}

h2 {
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.2307692308;
    margin: 3rem 0 0.5rem 0;
}

p {
    margin: 0 0 1rem 0;
}

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

.lead {
    max-width: 1230px;
    margin: 8rem auto 6rem auto;
    text-align: center;
    font-size: 1.25rem;
    padding: 0 1.875rem;
}


.lead-xmas{
    padding: 1.875rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    cursor: pointer;
}
.lead-xmas:before{
    background-color: #1E1C24 !important;
    cursor: pointer;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 4px;
    box-shadow: 0 2px 7px 0 rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    z-index: -1;
}
.lead-xmas:hover::before {
    transform: scale(1.05) rotate(2deg);
}
.lead-xmas > img{
    width:20%;
}
.lead-xmas > .text{
    width:50%;
    text-align: left;
    color:#fff;
}
.lead-xmas > .link{
    width:fit-content;
}
.lead-xmas h1{
    font-size: 1.625rem;
}
.lead-xmas p{
    font-size: 1rem;
    margin:0;
}
.lead-xmas:hover .btn--white{
    background-color: #F1F1F2;
}

@media (max-width: 767px) {
    .lead{
        margin-bottom: 1.875rem;
    }
    .lead-xmas img{
        margin-bottom: 1rem;
    }
    .lead-xmas h1{
        margin-bottom: 1rem;
    }
    .lead-xmas .text{
        width: 100%;
    }
    .lead-xmas p{
        margin-bottom: 1rem;
    }
    .lead-xmas > img{
        width:50%;
    }
}


.block__wrapper {
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 1.875rem;
}

.block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding: 1.5rem 2rem;
    color: #1F2226;
    margin-bottom: 1.875rem;
}

.block::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 4px;
    box-shadow: 0 2px 7px 0 rgba(0,0,0,0.15);
    background-color: #fff;
    transition: all 0.2s ease;
    z-index: -1;
}

.block:hover::before {
    transform: scale(1.05) rotate(-2deg);
}

.block p {
    flex-grow: 1;
}

.block--it {
    --accent: #7448FF;
    --accent-hover: #511fff;
}

.block--ag {
    --accent: #14CC81;
    --accent-hover: #04aC61;
}

.block--ag:hover::before {
    transform: scale(1.05) rotate(2deg);
}

.logo {
    height: 3.25rem;
    width: 100%;
}

.logo svg {
    width: auto;
    height: 100%;
}

.logo svg #claim path {
    fill: var(--accent);
}

.btn__wrapper {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 100%;
}

.btn {
    display: inline-block;
    min-width: 100%;
    padding: 1rem 1.33rem 0.8rem 1.33rem;
    box-sizing: border-box;

    color: var(--color);
    font-size: 1rem;
    text-align: center;
    font-weight: 500;

    border: none;
    border-radius: 5rem;

    white-space: nowrap;
    text-overflow: ellipsis;

    transition: all .2s ease;
}

.btn--primary:hover {
    background-color: var(--accent-hover);
}

.btn--primary {
    color: white;
    background-color: var(--accent);
}
.btn--white {
    color: #1E1C24;
    background-color: #FFFFFF;
}

.btn.btn--plain {
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    min-width: 0;
    color: var(--accent);
}

.btn.btn--plain:hover,
.btn.btn--plain:focus {
    color: var(--accent-hover);
}

.btn.btn--support {
    position: relative;
    display: flex;
    align-items: center;
}

.btn.btn--support .icon {
    width: 1.1rem;
    height: auto;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
    transform: translate(0, 0);
}

.btn.btn--support .icon [fill] {
    fill: var(--accent);
}

.btn.btn--support:hover .icon,
.btn.btn--support:focus .icon {
    transform: translate(3px, 0);
}

.btn.btn--support:hover .icon [fill],
.btn.btn--support:focus .icon [fill] {
    fill: var(--accent-hover);
}

.btn.btn--outline {
    border: 2px solid white;
    border-radius: 999px;
    color: white;
    font-size: 0.85714rem;
    background-color: transparent;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.btn.btn--outline:hover {
    color: var(--color);
    background-color: white;
}

.btn--white::after,
.btn--primary::after,
.btn.btn--outline::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#background-video{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.waves {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.wrapper {
    position: relative;
    z-index: 1;
}

.linear-border-wrapper { /* used to fake border-radius on child-div with gradient-border */
    border-radius: 4px;
    overflow: hidden;
}

.jobs-section {
    background: linear-gradient(105.03deg, rgba(239, 239, 239, 0.08) 21.13%, rgba(239, 239, 239, 0.016) 96.51%);
    backdrop-filter: blur(3.5px);
    border: 4px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to left, #7336FA 0%, #4ECB85 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 24px 24px 20px;
}

.jobs-section img {
    width: 58px;
    margin-bottom: 16px;
}

.jobs-section .text {
    text-align: left;
    margin-bottom: 32px;
}

.jobs-section .text h1 {
    font-size: 1.5rem;
}

.jobs-section .text p {
    font-size: 1rem;
}

.jobs-section .btn {
    min-width: initial;
}

@media (min-width: 480px) {
    .btn__wrapper {
        justify-content: space-between;
    }

    .btn {
        min-width: 46%;
    }
}

@media (min-width: 768px) {
    .block__wrapper {
        display: grid;
        grid-gap: 3.75rem;
        grid-template-columns: 1fr 1fr;
    }

    .block {
        padding: 2.5rem;
    }

    .btn__wrapper {
        justify-content: flex-end;
    }

    .btn {
        min-width: 100%;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 16px;
    }

    .block__wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .block {
        padding: 3.75rem;
    }

    .btn__wrapper {
        margin-top: 4rem;
    }

    .btn.btn--outline {
        border-width: 3px;
        font-size: 1rem;
    }

    .jobs-section {
        flex-direction: row;
        align-items: center;
        padding: 40px 73px 40px 59px;
    }

    .jobs-section img {
        width: 70px;
        margin-right: 53px;
        margin-bottom: 0;
    }

    .jobs-section .text {
        margin-right: 43px;
        margin-bottom: 0;
    }

    .jobs-section .btn {
        min-width: 200px;
    }
}

@media (min-width: 1200px) {
    .btn__wrapper {
        justify-content: space-between;
    }

    .btn {
        min-width: 46%;
    }
}