:root {
    --header-height-desktop: 90px;
    --header-height-mobile: 39px;
    --xs-min: 320px;
    --xs-max: 374px;
    --sm-min: 375px;
    --sm-max: 767px;
    --md-min: 768px;
    --md-max: 1023px;
    --lg-min: 1024px;
    --lg-max: 1279px;
    --xl-min: 1280px;
}

html {
    overflow-x: hidden;
}

body {
    position: relative;
    background-color: #051854;
    min-height: 100vh;
    box-sizing: border-box;
    font-family: "Styrene A LC", Helvetica, Arial, sans-serif;
    color: white;
    overflow-x: hidden;
    min-width: var(--xs-min);
}

.container {
    padding: 0 64px;
    max-width: var(--xl-min);
    margin: 0 auto;
    box-sizing: border-box;
}

a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media screen and (max-width: 1023px) {
    .container {
        padding: 0 16px;
    }
}

.btn {
    display: inline-block;
    min-height: 56px;
    text-decoration: none;
    color: #fff;
    z-index: 0;
    position: relative;
    padding: 14px 32px 10px;
    font-size: 24px;
    line-height: 32px;
    font-weight: bold;
    box-sizing: border-box;
}

.btn:before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #EE4226;
    transform: skewX(-13deg) translate3d(0, 0, 0);
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: box-shadow 200ms ease-out;
}

.btn:hover:before {
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .5);
}

.btn--lg {
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 31.2px;
    line-height: 42px;
    min-height: 73px;
    padding: 15.5px 40px;
}

.btn--lg:before {
    border-top-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

@media screen and (max-width: 767px) {
    .btn, .btn--lg {
        min-height: 40px;
        font-size: 16px;
        line-height: 16px;
        padding: 13px 20px 11px;
    }

    .btn:before {
        border-top-left-radius: 17px;
        border-bottom-right-radius: 17px;
    }
}