/* Extra extra small devices (iPhone 5 and smaller) */

@media (max-width: 360.98px) {
     :root {
        --font-large-plus: 32px;
        --font-large: 32px;
        --font-medium-plus: 20px;
        --font-medium: 17px;
        --font-small-plus: 17px;
        --font-small: 14px;
        --font-extra-small: 11px;
        --font-button: 13px;
        --font-button-large: 16px;
        --display-mobile: block;
        --display-desktop: none;
        --margin-small: 1rem;
        --button-padding: 8px 17px;
        --button-padding-large: 12px 26px;
        --button-padding-small: 8px 10px;
    }
}


/* Extra small devices (portrait phones, less than 576px)*/

@media (min-width: 361px) and (max-width: 575.98px) {
     :root {
        --font-large-plus: 35px;
        --font-large: 35px;
        --font-medium-plus: 22px;
        --font-medium: 19px;
        --font-small-plus: 19px;
        --font-small: 15px;
        --font-extra-small: 12px;
        --font-button: 15px;
        --font-button-large: 19px;
        --display-mobile: block;
        --display-desktop: none;
        --margin-small: 1rem;
        --button-padding: 10px 20px;
        --button-padding-large: 15px 32px;
        --button-padding-small: 10px 18px;
    }
}


/* Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) and (max-width: 767.98px) {
     :root {
        --font-large-plus: 35px;
        --font-large: 35px;
        --font-medium-plus: 22px;
        --font-medium: 19px;
        --font-small-plus: 19px;
        --font-small: 15px;
        --font-extra-small: 12px;
        --font-button: 15px;
        --font-button-large: 19px;
        --display-mobile: block;
        --display-desktop: none;
        --margin-small: 1rem;
        --button-padding: 10px 22px;
        --button-padding-large: 15px 32px;
        --button-padding-small: 10px 18px;
    }
}


/* Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) and (max-width: 991.98px) {
     :root {
        --font-large-plus: 35px;
        --font-large: 35px;
        --font-medium-plus: 22px;
        --font-medium: 19px;
        --font-small-plus: 19px;
        --font-small: 15px;
        --font-extra-small: 12px;
        --font-button: 15px;
        --font-button-large: 19px;
        --display-mobile: block;
        --display-desktop: none;
        --margin-small: 1rem;
        --button-padding: 10px 22px;
        --button-padding-large: 15px 32px;
        --button-padding-small: 10px 18px;
    }
}


/* Large devices (desktops, 992px and up)*/

@media (min-width: 992px) and (max-width: 1199.98px) {
     :root {
        --font-large-plus: 55px;
        --font-large: 35px;
        --font-medium-plus: 40px;
        --font-medium: 25px;
        --font-small-plus: 19px;
        --font-small: 15px;
        --font-extra-small: 12px;
        --font-button: 15px;
        --font-button-large: 19px;
        --display-mobile: none;
        --display-desktop: block;
        --margin-small: 1rem;
        --button-padding: 10px 17px;
        --button-padding-large: 15px 32px;
        --button-padding-small: 10px 10px;
    }
}


/* Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {
     :root {
        --font-large-plus: 55px;
        --font-large: 35px;
        --font-medium-plus: 40px;
        --font-medium: 25px;
        --font-small-plus: 19px;
        --font-small: 15px;
        --font-extra-small: 12px;
        --font-button: 15px;
        --font-button-large: 19px;
        --display-mobile: none;
        --display-desktop: block;
        --margin-small: 1rem;
        --button-padding: 10px 22px;
        --button-padding-large: 15px 32px;
        --button-padding-small: 10px 18px;
    }
}

:root {
    --color-title: #212529;
    --color-primary: #eb2256;
    --color-secondary: #ffffff;
    --color-third: #000000;
    --color-muted: #9e9e9e;
    --color-primary-text: #ffffff;
    --color-secondary-text: #000000;
    --color-third-text: #ffffff;
    --color-muted-text: #9e9e9e;
    --color-primary-hover: #000000;
    --color-secondary-hover: #000000;
    --color-third-hover: #9e9e9e;
    --color-primary-text-hover: #ffffff;
    --color-secondary-text-hover: #ffffff;
    --color-third-text-hover: #000000;
    --color-kickstarter: #10CD77;
    --color-langmenu-background: #e0dfdf;
    --button-border-radius: 14px;
    --button-padding-large-narrow: 15px 15px;
    --line-height-content: 24px;
    --line-height-default: 1.5;
    --primary-font-family: 'Montserrat';
    --price-font-family: 'Montserrat';
    --font-roadie3page: 16px;
}

.display-mobile {
    display: var(--display-mobile);
}

.display-desktop {
    display: var(--display-desktop);
}

.btn-roadie {
    padding: var(--button-padding);
    font-family: var(--primary-font-family);
    font-size: var(--font-button);
    font-weight: 800;
    text-decoration: none !important;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--button-border-radius);
}

.btn-roadie-large {
    padding: var(--button-padding-large);
    font-size: var(--font-button-large);
}

.btn-roadie-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-text);
}

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

.btn-roadie-christmas {
    background-color: var(--color-primary-hover);
    color: var(--color-primary-text);
}

.btn-roadie-christmas:hover {
    background-color: var(--color-primary-text-hover);
    color: var(--color-primary-hover);
}

.btn-roadie-secondary {
    background-color: var(--color-secondary);
    color: var(--color-secondary-text);
}

.btn-roadie-secondary:hover {
    background-color: var(--color-secondary-hover);
    color: var(--color-secondary-text-hover);
}

.btn-roadie-third {
    background-color: var(--color-third);
    color: var(--color-third-text);
}

.btn-roadie-third:hover {
    background-color: var(--color-third-hover);
    color: var(--color-third-text-hover);
}

.btn-roadie-muted {
    padding: var(--button-padding-small);
    background-color: var(--color-muted);
    color: var(--color-primary-text);
    cursor: default;
}

.btn-roadie-muted-large {
    padding: var(--button-padding-large-narrow);
}

.btn-roadie-muted:hover {
    background-color: var(--color-muted);
    color: var(--color-primary-text);
    cursor: default;
}

.text-roadie {
    font-family: var(--primary-font-family);
}

.text-roadie-primary {
    font-family: var(--primary-font-family);
    color: var(--color-primary-text);
}

.text-roadie-secondary {
    font-family: var(--primary-font-family);
    color: var(--color-secondary-text);
}

.text-roadie-header {
    font-size: var(--font-large-plus);
    font-weight: 200;
    color: var(--color-primary-text);
}

.text-roadie-title {
    font-size: var(--font-large);
    font-weight: 200;
}

.text-roadie-content {
    font-size: var(--font-small-plus);
    line-height: var(--line-height-content);
}

.text-roadie-name {
    font-size: var(--font-medium-plus);
    font-weight: 900;
}

.text-roadie-small {
    font-size: var(--font-small);
    font-weight: 400;
}

.text-roadie-xxs {
    font-size: var(--font-extra-small);
    font-weight: 500;
}

.text-roadie-height-default {
    line-height: var(--line-height-default);
}

.full-width {
    display: block;
    width: 100%;
    height: auto;
}

.overlay-back {
    position: absolute;
    z-index: -10;
}

.roadie-weight-400 {
    font-weight: 400;
}

.roadie-weight-500 {
    font-weight: 500;
}

.roadie-weight-600 {
    font-weight: 600 !important;
}

.roadie-weight-700 {
    font-weight: 700;
}

.price-roadie {
    font-size: var(--font-medium-plus);
    font-weight: 400;
    font-family: var(--price-font-family);
}

.price-roadie-small {
    font-size: var(--font-medium);
    font-weight: 400;
    font-family: var(--price-font-family);
}

.price-roadie-discount {
    font-size: var(--font-medium);
    font-weight: 400;
    font-family: var(--price-font-family);
    text-decoration: line-through;
}

.price-roadie-discount-lg {
    font-size: var(--font-medium-plus) !important;
}

.price-roadie-discount-small {
    font-size: var(--font-small);
    font-weight: 400;
    font-family: var(--price-font-family);
    text-decoration: line-through;
}

.decoration-null {
    text-decoration: none !important;
}

.text-roadie-bold {
    font-weight: 900;
}

.text-roadie-italic {
    font-style: italic;
}

.font-weight-500 {
    font-weight: 500;
}

.font-weight-200 {
    font-weight: 200;
}

.line-height-15 {
    line-height: 1.5;
}

.text-roadie-xl {
    font-size: var(--font-large-plus) !important;
}

.text-roadie-lg {
    font-size: var(--font-large) !important;
}

.text-roadie-xm {
    font-size: var(--font-medium-plus) !important;
}

.text-roadie-md {
    font-size: var(--font-medium) !important;
}

.text-roadie-sm {
    font-size: var(--font-small-plus) !important;
}

.text-roadie-xs {
    font-size: var(--font-small) !important;
}

.outline-none {
    outline: none !important;
}

.centered {
    margin: auto;
}

html,
body {
    overscroll-behavior-y: contain!important;
}

.lazyload {
    background: none !important;
    background-color: #e7e7e7 !important;
}

.lazyloading {
    background: none !important;
    background-color: #e7e7e7 !important;
}

.slick-slide {
    outline: none !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.slick-next:before,
.slick-prev:before {
    font-size: 35px!important;
}

.slick-next:before {
    background-image: url(/Assets/header/artboard_right.svg);
    background-size: auto;
    background-repeat: no-repeat;
    color: transparent!important;
}

.slick-prev:before {
    background-image: url(/Assets/header/arrow_left.svg);
    background-size: auto;
    background-repeat: no-repeat;
    color: transparent!important;
}


/*Hero images*/

.hero {
    position: absolute;
    bottom: 0;
    right: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


/*Extra small devices (phones, 361px and up)*/

@media (max-width: 575.98px) {
    .hero {
        top: 4%;
        width: 100vw;
        height: calc(100vw * 1.333333);
        max-height: 100vh;
        background-size: contain;
        background-position: top;
    }
}


/* Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) and (max-width: 767.98px) {
    .hero {
        height: 100vh;
        width: calc(100vh * 1.777777);
        max-width: 100vw;
        max-height: calc(100vw / 1.777777);
        background-size: contain;
        background-position: top;
    }
}


/* Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) and (max-width: 991.98px) {
    .hero {
        width: 100vw;
        height: calc(100vw * 1.333333);
        max-height: 100vh;
        background-size: cover;
        background-position: top;
    }
}


/* Large devices (desktops, 992px and up)*/

@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero {
        width: 100vw;
        height: 100vh;
        max-height: calc(100vw / 1.333333);
        background-size: cover;
        background-position: top right;
    }
}


/* Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {
    .hero {
        height: 100vh;
        width: 100vw;
        background-size: cover;
        background-position: top left;
    }
}

.signup_btn {
    color: white;
    text-decoration: none;
}

.signup_btn:hover {
    color: white;
    text-decoration: none;
}

input:focus, textarea:focus, select:focus,li:focus,a:focus{
    outline: none !important;
}

.woocommerce-order-received .entry-title {
    font-family: var(--primary-font-family)!important;
    color: var(--color-title)!important;
    font-size: var(--font-large)!important;
    font-weight: 700!important;
    text-align: center!important;
}

.app{
    width: 300px;
    display: block;
    margin: auto;
}