@font-face {
    font-family: Druk;
    src: url(../fonts/Druk/Druk-Super.eot);
    src: url(../fonts/Druk/Druk-Super.eot?#iefix) format('embedded-opentype'), url(../fonts/Druk/Druk-Super.woff) format('woff'), url(../fonts/Druk/Druk-Super.ttf) format('truetype'), url(../fonts/Druk/Druk-Super.svg) format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: Druk Web;
    src: url(../fonts/Druk/Druk-Medium-Cy-Web.062158b0.woff2);
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Druk Navbar;
    src: url(../fonts/Druk/Druk-Medium-Cy-Web.062158b0.woff2),
        url(../fonts/Druk/Druk-Medium-Cy-Web.ee9e3f2a.woff);
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Druk Wide Web";
    src: url(../fonts/Druk/DrukWide-Super.otf);
    font-weight: 900;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: Druk Web Second;
    src: url(../fonts/Druk/Druk-Medium.otf);
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* vendors */
.container-fluid,
.container {
    margin-right: auto;
    margin-left: auto;
}

.row {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

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

.col.reverse {
    flex-direction: column-reverse;
}

.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.col-xs {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%;
}

.col-xs-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
}

.col-xs-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
}

.col-xs-3 {
    flex-basis: 25%;
    max-width: 25%;
}

.col-xs-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
}

.col-xs-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
}

.col-xs-6 {
    flex-basis: 50%;
    max-width: 50%;
}

.col-xs-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
}

.col-xs-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
}

.col-xs-9 {
    flex-basis: 75%;
    max-width: 75%;
}

.col-xs-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
}

.col-xs-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
}

.col-xs-12 {
    flex-basis: 100%;
    max-width: 100%;
}

.col-xs-offset-0 {
    margin-left: 0;
}

.col-xs-offset-1 {
    margin-left: 8.33333333%;
}

.col-xs-offset-2 {
    margin-left: 16.66666667%;
}

.col-xs-offset-3 {
    margin-left: 25%;
}

.col-xs-offset-4 {
    margin-left: 33.33333333%;
}

.col-xs-offset-5 {
    margin-left: 41.66666667%;
}

.col-xs-offset-6 {
    margin-left: 50%;
}

.col-xs-offset-7 {
    margin-left: 58.33333333%;
}

.col-xs-offset-8 {
    margin-left: 66.66666667%;
}

.col-xs-offset-9 {
    margin-left: 75%;
}

.col-xs-offset-10 {
    margin-left: 83.33333333%;
}

.col-xs-offset-11 {
    margin-left: 91.66666667%;
}

.start-xs {
    justify-content: flex-start;
    text-align: start;
}

.center-xs {
    justify-content: center;
    text-align: center;
}

.end-xs {
    justify-content: flex-end;
    text-align: end;
}

.top-xs {
    align-items: flex-start;
}

.middle-xs {
    align-items: center;
}

.bottom-xs {
    align-items: flex-end;
}

.around-xs {
    justify-content: space-around;
}

.between-xs {
    justify-content: space-between;
}

.first-xs {
    order: -1;
}

.last-xs {
    order: 1;
}

@media only screen and (min-width: 46.5em) {
    .container {
        width: 43rem;
    }

    .col-sm,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-offset-0,
    .col-sm-offset-1,
    .col-sm-offset-2,
    .col-sm-offset-3,
    .col-sm-offset-4,
    .col-sm-offset-5,
    .col-sm-offset-6,
    .col-sm-offset-7,
    .col-sm-offset-8,
    .col-sm-offset-9,
    .col-sm-offset-10,
    .col-sm-offset-11,
    .col-sm-offset-12 {
        box-sizing: border-box;
        flex: 0 0 auto;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .col-sm {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%;
    }

    .col-sm-1 {
        flex-basis: 8.33333333%;
        max-width: 8.33333333%;
    }

    .col-sm-2 {
        flex-basis: 16.66666667%;
        max-width: 16.66666667%;
    }

    .col-sm-3 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }

    .col-sm-5 {
        flex-basis: 41.66666667%;
        max-width: 41.66666667%;
    }

    .col-sm-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-sm-7 {
        flex-basis: 58.33333333%;
        max-width: 58.33333333%;
    }

    .col-sm-8 {
        flex-basis: 66.66666667%;
        max-width: 66.66666667%;
    }

    .col-sm-9 {
        flex-basis: 75%;
        max-width: 75%;
    }

    .col-sm-10 {
        flex-basis: 83.33333333%;
        max-width: 83.33333333%;
    }

    .col-sm-11 {
        flex-basis: 91.66666667%;
        max-width: 91.66666667%;
    }

    .col-sm-12 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .col-sm-offset-0 {
        margin-left: 0;
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }

    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-sm-offset-9 {
        margin-left: 75%;
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }

    .start-sm {
        justify-content: flex-start;
        text-align: start;
    }

    .center-sm {
        justify-content: center;
        text-align: center;
    }

    .end-sm {
        justify-content: flex-end;
        text-align: end;
    }

    .top-sm {
        align-items: flex-start;
    }

    .middle-sm {
        align-items: center;
    }

    .bottom-sm {
        align-items: flex-end;
    }

    .around-sm {
        justify-content: space-around;
    }

    .between-sm {
        justify-content: space-between;
    }

    .first-sm {
        order: -1;
    }

    .last-sm {
        order: 1;
    }
}

@media only screen and (min-width: 64em) {
    .container {
        width: 65rem;
    }

    @media screen and (min-width:768px) and (max-width:1180px) {
        .container {
            width: 55rem;
        }
    }

    .col-md,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-offset-0,
    .col-md-offset-1,
    .col-md-offset-2,
    .col-md-offset-3,
    .col-md-offset-4,
    .col-md-offset-5,
    .col-md-offset-6,
    .col-md-offset-7,
    .col-md-offset-8,
    .col-md-offset-9,
    .col-md-offset-10,
    .col-md-offset-11,
    .col-md-offset-12 {
        box-sizing: border-box;
        flex: 0 0 auto;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .col-md {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%;
    }

    .col-md-1 {
        flex-basis: 8.33333333%;
        max-width: 8.33333333%;
    }

    .col-md-2 {
        flex-basis: 16.66666667%;
        max-width: 16.66666667%;
    }

    .col-md-3 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .col-md-4 {
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }

    .col-md-5 {
        flex-basis: 41.66666667%;
        max-width: 41.66666667%;
    }

    .col-md-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-md-7 {
        flex-basis: 58.33333333%;
        max-width: 58.33333333%;
    }

    .col-md-8 {
        flex-basis: 66.66666667%;
        max-width: 66.66666667%;
    }

    .col-md-9 {
        flex-basis: 75%;
        max-width: 75%;
    }

    .col-md-10 {
        flex-basis: 83.33333333%;
        max-width: 83.33333333%;
    }

    .col-md-11 {
        flex-basis: 91.66666667%;
        max-width: 91.66666667%;
    }

    .col-md-12 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .col-md-offset-0 {
        margin-left: 0;
    }

    .col-md-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-md-offset-3 {
        margin-left: 25%;
    }

    .col-md-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-md-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-md-offset-6 {
        margin-left: 50%;
    }

    .col-md-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-md-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-md-offset-9 {
        margin-left: 75%;
    }

    .col-md-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-md-offset-11 {
        margin-left: 91.66666667%;
    }

    .start-md {
        justify-content: flex-start;
        text-align: start;
    }

    .center-md {
        justify-content: center;
        text-align: center;
    }

    .end-md {
        justify-content: flex-end;
        text-align: end;
    }

    .top-md {
        align-items: flex-start;
    }

    .middle-md {
        align-items: center;
    }

    .bottom-md {
        align-items: flex-end;
    }

    .around-md {
        justify-content: space-around;
    }

    .between-md {
        justify-content: space-between;
    }

    .first-md {
        order: -1;
    }

    .last-md {
        order: 1;
    }
}

@media only screen and (min-width: 75em) {
    .container {
        width: 76rem;
    }

    .col-lg,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-offset-0,
    .col-lg-offset-1,
    .col-lg-offset-2,
    .col-lg-offset-3,
    .col-lg-offset-4,
    .col-lg-offset-5,
    .col-lg-offset-6,
    .col-lg-offset-7,
    .col-lg-offset-8,
    .col-lg-offset-9,
    .col-lg-offset-10,
    .col-lg-offset-11,
    .col-lg-offset-12 {
        box-sizing: border-box;
        flex: 0 0 auto;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .col-lg {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%;
    }

    .col-lg-1 {
        flex-basis: 8.33333333%;
        max-width: 8.33333333%;
    }

    .col-lg-2 {
        flex-basis: 16.66666667%;
        max-width: 16.66666667%;
    }

    .col-lg-3 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .col-lg-4 {
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }

    .col-lg-5 {
        flex-basis: 41.66666667%;
        max-width: 41.66666667%;
    }

    .col-lg-6 {
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-lg-7 {
        flex-basis: 58.33333333%;
        max-width: 58.33333333%;
    }

    .col-lg-8 {
        flex-basis: 66.66666667%;
        max-width: 66.66666667%;
    }

    .col-lg-9 {
        flex-basis: 75%;
        max-width: 75%;
    }

    .col-lg-10 {
        flex-basis: 83.33333333%;
        max-width: 83.33333333%;
    }

    .col-lg-11 {
        flex-basis: 91.66666667%;
        max-width: 91.66666667%;
    }

    .col-lg-12 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .col-lg-offset-0 {
        margin-left: 0;
    }

    .col-lg-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-lg-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-lg-offset-3 {
        margin-left: 25%;
    }

    .col-lg-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-lg-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-lg-offset-6 {
        margin-left: 50%;
    }

    .col-lg-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-lg-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-lg-offset-9 {
        margin-left: 75%;
    }

    .col-lg-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-lg-offset-11 {
        margin-left: 91.66666667%;
    }

    .start-lg {
        justify-content: flex-start;
        text-align: start;
    }

    .center-lg {
        justify-content: center;
        text-align: center;
    }

    .end-lg {
        justify-content: flex-end;
        text-align: end;
    }

    .top-lg {
        align-items: flex-start;
    }

    .middle-lg {
        align-items: center;
    }

    .bottom-lg {
        align-items: flex-end;
    }

    .around-lg {
        justify-content: space-around;
    }

    .between-lg {
        justify-content: space-between;
    }

    .first-lg {
        order: -1;
    }

    .last-lg {
        order: 1;
    }
}


@media only screen and (min-width: 100em) {
    .container {
        width: 101rem;
    }
}

/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -webkit-tap-highlight-color: transparent;
    /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
    margin: 0;
}

/**
 * Render the main element consistently in IE.
 */
main {
    display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
    margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
    font-weight: bold;
}

dd {
    margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
    border-top-width: 1px;
    margin: 0;
    clear: both;
    color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd em font sizing in all browsers.
 */
pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: inherit;
    /* 2 */
}

address {
    font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    text-decoration: underline;
    /* 2 */
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd em font sizing in all browsers.
 */
code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: inherit;
    /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent sub and sup elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
img,
embed,
object,
iframe {
    /*vertical-align: bottom;*/
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type="checkbox"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

[type="radio"] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
    cursor: default;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Remove arrow in IE10 & IE11
 */
select::-ms-expand {
    display: none;
}

/**
 * Remove padding
 */
option {
    padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
    margin: 0;
    padding: 0;
    min-width: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from fieldset elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    fieldset elements in all browsers.
 */
legend {
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
    overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type="search"] {
    outline-offset: -2px;
    /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to inherit in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
    cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
    display: list-item;
}

/* Table */
/* ============================================ */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption {
    text-align: left;
}

td,
th {
    vertical-align: top;
    padding: 0;
}

th {
    text-align: left;
    font-weight: bold;
}

/* Misc */
/* ============================================ */
/**
 * Add the correct display in IE 10+.
 */
template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
    display: none;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
}

:root {
    --font-default: 55px 'Roboto', sans-serif;
    --font-title: 28px 'Druk', sans-serif;
    --font-btn: 16px Druk Navbar, sans-serif;
    --font-quote: var(--font-default);
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

:root {
    --skew: -17deg;
    --unskew: 17deg;
}

:root {
    --transition-easing: cubic-bezier(0.7, 0, 0.305, 0.995);
    --transition-slow: all 0.6s var(--transition-easing);
    --transition: all 0.3s var(--transition-easing);
    --transition-fast: all 0.1s var(--transition-easing);
}

/* generic */
[in-viewport='fade'] {
    opacity: 0;
    transition: all 0.4s ease-in;
}

[in-viewport='fade'].in-viewport {
    opacity: 1;
}

[in-viewport='zoom'] {
    transform: scale(1) skewY(var(--unskew)) !important;
    transition: all 1.5s ease-in;
}

[in-viewport='zoom'].in-viewport {
    transform: scale(1.0) skewY(var(--unskew)) !important;
}

@-webkit-keyframes autofill {

    0%,
    100% {
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s;
    /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

.form-input-select {
    font: 16px Roboto, sans-serif;
    letter-spacing: 0.04em;
    padding: 0 15px;
    /* background: ld.color(lightergrey); */
    border-bottom: 1px solid;
    border-color: var(--color-darkgrey);
    height: 50px;
    position: relative;
    z-index: 1;
}

.is-error>.form-input-select {
    border-color: var(--color-error);
}

.form-input-select:hover,
.form-input-select:focus {
    border-color: var(--color-red-product);
}

.form-input-select~.form-input-icons {
    position: absolute;
    right: 10px;
    top: calc(50% + 0.15em);
    font-size: 1em;
    transform: translate(0, -50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 0;
}

.form-select-wrap {
    background: var(--color-lightergrey);
}

.form-input-text {
    font: 16px Roboto, sans-serif;
    letter-spacing: 0.04em;
    padding: 10px 15px;
    background: var(--color-lightergrey);
    border-bottom: 1px solid;
    border-color: var(--color-darkgrey);
    height: 50px;
}

.is-error>.form-input-text {
    border-color: var(--color-error);
}

.form-input-text[readonly] {
    opacity: 0.5;
}

.form-input-text::-moz-placeholder {
    color: var(--color-grey);
}

.form-input-text:-ms-input-placeholder {
    color: var(--color-grey);
}

.form-input-text::placeholder {
    color: var(--color-grey);
}

.form-input-text:-moz-placeholder-shown {}

.form-input-text:-ms-input-placeholder {}

.form-input-text:placeholder-shown {}

.form-input-text:hover,
.form-input-text:focus {
    border-color: var(--color-red-product);
}

.form-input-text~.form-input-icons {
    position: absolute;
    right: 10px;
    top: calc(50% + 0.15em);
    font-size: 1em;
    transform: translate(0, -50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.is-error .form-input-text~.form-input-icons {
    color: var(--color-error);
}

.form-input-text~.form-input-icons .__error {
    display: none;
}

.is-error>.form-input-text~.form-input-icons .__error {
    display: inline-block;
}

.form-input-text~.form-input-icons .__visibility-off {
    cursor: pointer;
    display: none;
}

.form-input-text~.form-input-icons .__visibility-on {
    cursor: pointer;
    display: inline-block;
}

.form-input-text~.form-input-icons.is-visibility-on .__visibility-off {
    display: inline-block;
}

.form-input-text~.form-input-icons.is-visibility-on .__visibility-on {
    display: none !important;
}

.form-input-text[type='date']~.form-input-icons {
    right: 40px;
}

.is-error .form-input-text:not([type='date']) {
    padding-right: 45px;
}

.is-error .form-input-text[name='phonePrefix'] {
    padding-right: 0;
}

.form-input-text[name='phonePrefix'] {
    padding-right: 0 !important;
    color: var(--color-darkgrey) !important;
    -webkit-text-fill-color: var(--color-darkgrey);
}

.form-input-text:not([type='date']) {
    padding-right: 45px;
}

input[type='date']::-webkit-calendar-picker-indicator {
    width: 15px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
}

.form-label {}

.form-label-radio .__label {
    -webkit-margin-after: 15px;
    margin-block-end: 15px;
}

.form-label-radio .__options {
    display: flex;
}

.form-label-radio .__option {
    flex-grow: 1;
    cursor: pointer;
}

.form-label-radio .__option input {
    -webkit-margin-end: 5px;
    margin-inline-end: 5px;
    position: relative;
    top: -0.1em;
}

.form-label-checkbox {
    display: flex;
}

.form-label-checkbox input {
    flex-shrink: 0;
}

.form-label-checkbox .__label {
    -webkit-margin-start: 15px;
    margin-inline-start: 15px;
    -webkit-margin-before: 5px;
    margin-block-start: 5px;
    font-size: 0.8em;
}

.form-label-checkbox .__label a {
    font-weight: bold;
    text-decoration: underline;
}

.form-label-switch {
    display: flex;
}

.form-label-switch input {
    flex-shrink: 0;
    order: 1;
}

.form-label-switch .__label {
    -webkit-margin-end: 15px;
    margin-inline-end: 15px;
    -webkit-margin-before: 5px;
    margin-block-start: 5px;
    font-size: 0.8em;
    flex-grow: 1;
}

.form-label-switch .__label a {
    font-weight: bold;
    text-decoration: underline;
}

.form-label-float {
    display: block;
    line-height: 1;
    position: relative;
}

.form-label-float>*:first-child {
    -webkit-margin-start: 0;
    margin-inline-start: 0;
}

.form-label-float {

    --delta: 0.1em;
    --top: 10px;
    --left: 15px;
}

.form-label-float>*:not(input):not(textarea):not(select):not(.form-input-icons) {
    top: calc(var(--top) + 0.5em + var(--delta));
    left: 0;
    padding-inline: 15px;
    position: absolute;
    z-index: 1;
    transform: scale(1);
    transform-origin: 0 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: var(--transition-fast);
}

.form-label-float:focus>*:not(input):not(textarea):not(select):not(.form-input-icons),
.form-label-float:focus-within>*:not(input):not(textarea):not(select):not(.form-input-icons) {
    top: calc(var(--top) + 0.1em);
    left: 0.3em;
    transform: scale(0.7);
}

.form-label-float:focus[hidden-when-active]>*:not(input):not(textarea):not(select):not(.form-input-icons),
.form-label-float:focus-within[hidden-when-active]>*:not(input):not(textarea):not(select):not(.form-input-icons) {
    opacity: 0;
}

.form-label-float input:not(:-moz-placeholder-shown)~*:not(.form-input-icons),
.form-label-float textarea:not(:-moz-placeholder-shown)~*:not(.form-input-icons) {
    top: calc(var(--top) + 0.1em) !important;
    left: 0.3em !important;
    transform: scale(0.7) !important;
}

.form-label-float input:not(:-ms-input-placeholder)~*:not(.form-input-icons),
.form-label-float textarea:not(:-ms-input-placeholder)~*:not(.form-input-icons) {
    top: calc(var(--top) + 0.1em) !important;
    left: 0.3em !important;
    transform: scale(0.7) !important;
}

.form-label-float input:not(:placeholder-shown)~*:not(.form-input-icons),
.form-label-float textarea:not(:placeholder-shown)~*:not(.form-input-icons) {
    top: calc(var(--top) + 0.1em) !important;
    left: 0.3em !important;
    transform: scale(0.7) !important;
}

.form-label-float[hidden-when-active] input:not(:-moz-placeholder-shown)~*:not(.form-input-icons),
.form-label-float[hidden-when-active] textarea:not(:-moz-placeholder-shown)~*:not(.form-input-icons) {
    opacity: 0;
}

.form-label-float[hidden-when-active] input:not(:-ms-input-placeholder)~*:not(.form-input-icons),
.form-label-float[hidden-when-active] textarea:not(:-ms-input-placeholder)~*:not(.form-input-icons) {
    opacity: 0;
}

.form-label-float[hidden-when-active] input:not(:placeholder-shown)~*:not(.form-input-icons),
.form-label-float[hidden-when-active] textarea:not(:placeholder-shown)~*:not(.form-input-icons) {
    opacity: 0;
}

.form-label-float input,
.form-label-float textarea {
    width: 100%;
    margin: 0;
    -webkit-padding-before: calc(10px + 0.35em + var(--delta));
    padding-block-start: calc(10px + 0.35em + var(--delta));
    -webkit-padding-after: calc(10px + 0.35em + var(--delta));
    padding-block-end: calc(10px + 0.35em + var(--delta));
    transition: var(--transition-fast);
}

.form-label-float input::-moz-placeholder,
.form-label-float textarea::-moz-placeholder {
    color: rgba(0, 0, 0, 0);
}

.form-label-float input:-ms-input-placeholder,
.form-label-float textarea:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0);
}

.form-label-float input::placeholder,
.form-label-float textarea::placeholder {
    color: rgba(0, 0, 0, 0);
}

.form-label-float input:focus::-moz-placeholder,
.form-label-float textarea:focus::-moz-placeholder {
    color: var(--color-grey);
}

.form-label-float input:focus:-ms-input-placeholder,
.form-label-float textarea:focus:-ms-input-placeholder {
    color: var(--color-grey);
}

.form-label-float input:focus::placeholder,
.form-label-float textarea:focus::placeholder {
    color: var(--color-grey);
}

.form-label-float select {
    width: 100%;
    margin: 0;
}

.form-label-float:focus>input,
.form-label-float:focus>textarea,
.form-label-float:focus-within>input,
.form-label-float:focus-within>textarea {
    -webkit-padding-before: calc(10px + 0.75em + calc(var(--delta) * 2));
    padding-block-start: calc(10px + 0.75em + calc(var(--delta) * 2));
    -webkit-padding-after: 10px;
    padding-block-end: 10px;
}

.form-label-float>input:not(:-moz-placeholder-shown),
.form-label-float>textarea:not(:-moz-placeholder-shown) {
    padding-block-start: calc(10px + 0.75em + calc(var(--delta) * 2));
    padding-block-end: 10px;
}

.form-label-float>input:not(:-ms-input-placeholder),
.form-label-float>textarea:not(:-ms-input-placeholder) {
    padding-block-start: calc(10px + 0.75em + calc(var(--delta) * 2));
    padding-block-end: 10px;
}

.form-label-float>input:not(:placeholder-shown),
.form-label-float>textarea:not(:placeholder-shown) {
    -webkit-padding-before: calc(10px + 0.75em + calc(var(--delta) * 2));
    padding-block-start: calc(10px + 0.75em + calc(var(--delta) * 2));
    -webkit-padding-after: 10px;
    padding-block-end: 10px;
}

.__select .form-label-float .select-label,
.__select:focus .select-label,
.__select:active .select-label {
    top: 3px !important;
    left: 0.3em;
    transform: scale(0.7);
}

.form-label-error {
    color: var(--color-error);
    font-size: 10px;
    -webkit-margin-before: 10px;
    margin-block-start: 10px;
}

.form-label-error a {
    color: var(--color-dark);
    text-decoration: underline;
    opacity: 0.7;
}

html {
    scroll-behavior: auto !important;
}

html[smooth-scroll-enabled] {
    scroll-behavior: smooth !important;
}

body {
    overflow-x: hidden;
    height: 100%;
}

.main-layout {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

body.loaded .main-layout {
    opacity: 1 !important;
}

body.loaded .page-loader {
    transition: opacity 0.05s ease-out;
    opacity: 0;
    pointer-events: none;
}

body.loading .page-loader {
    opacity: 1;
    pointer-events: all;
}

body.no-scroll {
    overflow: hidden !important;
    position: relative;
    height: 100vh;
}

/* fix safari mobile */
body.no-scroll .main-layout {
    height: 100vh;
    overflow: hidden;
}

.main-layout {
    position: relative;
    height: 100%;
    /*background-image: url("../assets/img/background-texture.png");*/
}

.skew {
    transform: skewY(var(--skew));
}

.skew .__content-wrap {
    transform: skewY(var(--unskew));
}

.skew .unskew {
    transform: skewY(var(--unskew));
}

@media screen and (min-width: 1630px) {
    .container-fluid.wide {
        max-width: 1630px;
    }

    .container-fluid.wide .__content-wrap {
        margin: 0 90px;
    }

    .container-fluid.offset-right {
        transform: skewY(var(--skew)) translateX(-50px);
    }

    .container-fluid.offset-right .__content-wrap {
        transform: skewY(var(--unskew)) translateX(50px);
    }

    .container-fluid.offset-left {
        transform: skewY(var(--skew)) translateX(50px);
    }

    .container-fluid.offset-left .__content-wrap {
        transform: skewY(var(--unskew)) translateX(-50px);
    }
}

.form-layout {
    min-height: 100vh;
    height: 100%;
    background-color: var(--color-current);
    overflow-y: hidden;
}

.form-layout.error {
    --color-current: var(--color-error);
    --color-current-foreground: var(--color-error-foreground);
}

.form-section {
    background-color: var(--color-light);
    margin: auto;
    overflow: hidden;
    padding-top: 300px;
    padding-bottom: 150px;
    text-align: center;
    min-height: 60vh;
}

.form-section:before,
.form-section:after {
    z-index: 10;
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 200%;
    background: var(--color-current);
}

.form-section:before {
    background: var(--color-current);
    bottom: 100%;
}

.form-section:after {
    top: 100%;
}

.anim-in .form-section:before {
    background: var(--color-current);
    bottom: 50%;
    -webkit-animation: form-in-before 0.5s ease-out forwards 0.5s;
    animation: form-in-before 0.5s ease-out forwards 0.5s;
}

.anim-in .form-section:after {
    top: 50%;
    -webkit-animation: form-in-after 0.5s ease-out forwards 0.5s;
    animation: form-in-after 0.5s ease-out forwards 0.5s;
}

@-webkit-keyframes form-in-before {
    from {
        bottom: 50%;
    }

    to {
        bottom: 100%;
    }
}

@keyframes form-in-before {
    from {
        bottom: 50%;
    }

    to {
        bottom: 100%;
    }
}

@-webkit-keyframes form-in-after {
    from {
        top: 50%;
    }

    to {
        top: 100%;
    }
}

@keyframes form-in-after {
    from {
        top: 50%;
    }

    to {
        top: 100%;
    }
}

@media screen and (max-width: 639px) {
    .form-section {
        min-height: 30vh;
        padding-top: 120px;
        padding-bottom: 90px;
    }
}

@media screen and (max-width: 639px) {
    .form-section .container {
        margin: auto 20px
    }
}

.form-section .h1 {
    font-size: 4em;
    margin-bottom: 40px;
    color: var(--color-current);
}

@media screen and (max-width: 639px) {
    .form-section .h1 {
        font-size: 3em
    }
}

.form-section .btn {
    min-width: 150px;
    margin-bottom: 20px;
}

@media screen and (min-width: 1280px) {
    .form-section .btn {
        margin: 0 20px 40px 20px
    }
}

.form-section.error {
    --color-current: var(--color-error);
    --color-current-foreground: var(--color-error-foreground);
}

.form-section .global-error {
    color: var(--color-error);
}

.ajax-feedback {
    font-size: 0.8em;
    margin-bottom: 20px;
}

html {
    color: var(--color-darkgrey);
    font: var(--font-default);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html ::-moz-selection {
    background-color: var(--color-darkgrey);
    color: var(--color-red-product-foreground);
}

html ::selection {
    background-color: var(--color-darkgrey);
    color: var(--color-red-product-foreground);
}

.logout-message {
    position: fixed;
    z-index: 9999999;
    top: calc(50% - 130px);
    max-width: 30ch;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.4;
    transform: translate(-50%, -50%);
    left: 50%;
    color: var(--color-red-product);
    font-family: Druk;
    font-style: italic;
    font-size: 30px;
}

@media screen and (max-width: 639px) {
    .logout-message {
        width: 80%;
        font-size: 24px
    }
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 1000px;
    z-index: 99999;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease-out;
}

@media screen and (max-width: 639px) {
    .modal {
        max-width: 95%;
    }
}

.modal.is-open {
    opacity: 1;
    pointer-events: all;
}

.modal:before {
    content: '';
    position: absolute;
    z-index: -1 !important;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    background: var(--color-light);
    opacity: 0.4;
}

.ld-slider {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
}

@media screen and (max-width: 639px) {
    .ld-slider {
        flex-wrap: nowrap;
        transition: transform 0.3s cubic-bezier(0.835, 0, 0.165, 1.01);
        transform: translateX(calc(var(--slider-item) * -100%))
    }

    .ld-slider>* {
        max-width: 100%;
    }
}

.slider-nav {
    text-align: center;
    -webkit-margin-after: 10px;
    margin-block-end: 10px;
    display: none;
}

@media screen and (max-width: 639px) {
    .slider-nav {
        display: flex;
    }
}

.slider-nav li {
    width: calc(100% / var(--slider-total));
    background: var(--color-lightgrey);
    height: 4px;
    margin: 0 5px;
    transition: all 0.3s ease-out;
}

.slider-nav li.active {
    background: var(--color-darkgrey);
}

.tooltip {
    font-family: Druk Navbar, sans-serif;
    position: absolute;
    bottom: calc(100% + var(--margin-20));
    left: 50%;
    transform: translate(-50%, 0);
    background: var(--color-dark);
    font-size: 11px;
    line-height: 12.85px;
    font-weight: 500;
    color: white;
    padding: var(--padding-10) var(--padding-20);
    text-align: center;
    display: inline-block;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: all 0.2s var(--transition-easing);
    letter-spacing: 1px;
}

.tooltip::after {
    content: ' ';
    position: absolute;
    top: 100%;
    /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-dark) transparent transparent transparent;
}

@media screen and (max-width: 639px) {
    .tooltip {
        width: 150px;
        white-space: normal;
    }
}

.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltip-container:focus .tooltip,
.tooltip-container:focus-within .tooltip,
.tooltip-container:hover .tooltip {
    opacity: 1;
    bottom: calc(100% + var(--margin-10));
}

.title {
    font: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.h1 {
    font: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 0.02em
}

.h1 .hash-card {
    text-transform: uppercase;
    text-align: center;
    padding: 0 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em
}

.h1 .auctions-rules .hash-card {
    color: var(--color-light);
    text-transform: uppercase;
    text-align: center;
    padding: 40px 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em;
    position: relative;
    z-index: 1
}

.h1 .order .product-info {
    letter-spacing: 0.04em;
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase
        /* margin-bottom: 40px; */
}

.h1 .order .border-box {
    letter-spacing: 0.04em;
    color: var(--color-dark);
    text-transform: uppercase;
    font-size: 1.3em;
}

.h1 .order .border-box .material-icons {
    float: right;
}

.h1 .summary .product-reccap {
    -webkit-margin-after: 12px;
    margin-block-end: 12px
}

.h1 {
    font-family: Druk Web, sans-serif;
    font-size: 100px;
    line-height: 95px;
    font-weight: 900;
    font-style: italic;
}

@media screen and (max-width: 639px) {
    .h1 {
        font-size: 3.5em;
    }
}

.h2 {
    font: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 0.02em
}

.h2 .hash-card {
    text-transform: uppercase;
    text-align: center;
    padding: 0 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em
}

.h2 .auctions-rules .hash-card {
    color: var(--color-light);
    text-transform: uppercase;
    text-align: center;
    padding: 40px 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em;
    position: relative;
    z-index: 1
}

.h2 .order .product-info {
    letter-spacing: 0.04em;
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase
        /* margin-bottom: 40px; */
}

.h2 .order .border-box {
    letter-spacing: 0.04em;
    color: var(--color-dark);
    text-transform: uppercase;
    font-size: 1.3em;
}

.h2 .order .border-box .material-icons {
    float: right;
}

.h2 .summary .product-reccap {
    -webkit-margin-after: 12px;
    margin-block-end: 12px
}

.h2 {
    font-size: 5em;
    font-weight: bold;
    line-height: 0.8em;
    font-style: italic;
}

@media screen and (max-width: 639px) {
    .h2 {
        font-size: 3em;
    }
}

.h3 {
    font: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 0.02em
}

.h3 .hash-card {
    text-transform: uppercase;
    text-align: center;
    padding: 0 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em
}

.h3 .auctions-rules .hash-card {
    color: var(--color-light);
    text-transform: uppercase;
    text-align: center;
    padding: 40px 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em;
    position: relative;
    z-index: 1
}

.h3 .order .product-info {
    letter-spacing: 0.04em;
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase
        /* margin-bottom: 40px; */
}

.h3 .order .border-box {
    letter-spacing: 0.04em;
    color: var(--color-dark);
    text-transform: uppercase;
    font-size: 1.3em;
}

.h3 .order .border-box .material-icons {
    float: right;
}

.h3 .summary .product-reccap {
    -webkit-margin-after: 12px;
    margin-block-end: 12px
}

.h3 {
    font-size: 4em;
    font-weight: bold;
    line-height: 1em;
    font-style: italic;
}

@media screen and (max-width: 639px) {
    .h3 {
        font-size: 2.5em;
    }
}

.h4 {
    font: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 0.02em
}

.h4 .hash-card {
    text-transform: uppercase;
    text-align: center;
    padding: 0 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em
}

.h4 .auctions-rules .hash-card {
    color: var(--color-light);
    text-transform: uppercase;
    text-align: center;
    padding: 40px 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em;
    position: relative;
    z-index: 1
}

.h4 .order .product-info {
    letter-spacing: 0.04em;
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase
        /* margin-bottom: 40px; */
}

.h4 .order .border-box {
    letter-spacing: 0.04em;
    color: var(--color-dark);
    text-transform: uppercase;
    font-size: 1.3em;
}

.h4 .order .border-box .material-icons {
    float: right;
}

.h4 .summary .product-reccap {
    -webkit-margin-after: 12px;
    margin-block-end: 12px
}

.h4 {
    font-size: 3em;
    font-weight: bold;
    line-height: 0.8em;
    font-style: italic;
}

@media screen and (max-width: 639px) {
    .h4 {
        font-size: 2em;
    }
}

.h5 {
    font: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 0.02em
}

.h5 .hash-card {
    text-transform: uppercase;
    text-align: center;
    padding: 0 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em
}

.h5 .auctions-rules .hash-card {
    color: var(--color-light);
    text-transform: uppercase;
    text-align: center;
    padding: 40px 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em;
    position: relative;
    z-index: 1
}

.h5 .order .product-info {
    letter-spacing: 0.04em;
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase
        /* margin-bottom: 40px; */
}

.h5 .order .border-box {
    letter-spacing: 0.04em;
    color: var(--color-dark);
    text-transform: uppercase;
    font-size: 1.3em;
}

.h5 .order .border-box .material-icons {
    float: right;
}

.h5 .summary .product-reccap {
    -webkit-margin-after: 12px;
    margin-block-end: 12px
}

.h5 {
    font-size: 2em;
    font-weight: bold;
    line-height: 0.8em;
}

@media screen and (max-width: 639px) {
    .h5 {
        font-size: 1.5em;
    }
}

.h6 {
    font: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 0.02em
}

.h6 .hash-card {
    text-transform: uppercase;
    text-align: center;
    padding: 0 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em
}

.h6 .auctions-rules .hash-card {
    color: var(--color-light);
    text-transform: uppercase;
    text-align: center;
    padding: 40px 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em;
    position: relative;
    z-index: 1
}

.h6 .order .product-info {
    letter-spacing: 0.04em;
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase
        /* margin-bottom: 40px; */
}

.h6 .order .border-box {
    letter-spacing: 0.04em;
    color: var(--color-dark);
    text-transform: uppercase;
    font-size: 1.3em;
}

.h6 .order .border-box .material-icons {
    float: right;
}

.h6 .summary .product-reccap {
    -webkit-margin-after: 12px;
    margin-block-end: 12px
}

.h6 {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 0.8em;
}

@media screen and (max-width: 639px) {
    .h6 {
        font-size: 1em;
    }
}

.p {
    line-height: 1.5em;
    letter-spacing: 0.05em;
}

.link {
    color: var(--color-darkgrey);
    text-decoration: underline;
}

.link:hover {
    opacity: 0.6;
}

.strong {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

video source {
    width: 100%;
    height: auto;
}

/* views */
.footer {
    padding-bottom: 0;
    overflow: hidden;
}

@media screen and (max-width: 639px) {
    .footer {
        padding-bottom: 0;
    }
}

.footer {
    position: relative;
}

.footer .container-fluid {
    /*padding-top: 180px;*/
    margin-left: 55px;
    position: relative;
}

@media screen and (max-width: 639px) {
    .footer .container-fluid {
        /*padding-top: 150px*/
    }
}

.footer ul,
.footer li {
    list-style: none;
}

.footer .__texture-bg {
    /*background-image: url("../assets/img/background-texture.png");*/
}

@media screen and (min-width: 1280px) {
    .footer .col-2 .__sub-items {
        flex-flow: row wrap;
    }

    .footer .col-2 .__sub-items li {
        width: 35%;
    }
}

.footer .__main {
    padding-bottom: 150px;
}

@media screen and (max-width: 639px) {
    .footer .__main {
        padding-bottom: 0
    }
}

.footer .__content {
    transform: skewY(var(--unskew));
    padding: 0 20px;
}

@media screen and (min-width: 640px) and (max-width: 1279px) {
    .footer .__content {
        padding: 0 120px
    }
}

@media screen and (min-width: 1280px) {
    .footer .__content {
        padding: 0 240px
    }
}

@media screen and (max-width: 1279px) {
    .footer .__content {
        min-width: 100%;
        justify-content: space-between;
        align-items: space-between
    }
}

.footer .__main-items {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-grow: 1;
}

@media screen and (max-width: 1279px) {
    .footer .__main-items>div {
        width: 100%;
        margin: auto;
        text-align: center;
        margin-bottom: 40px;
    }
}

.footer .__content-bottom {
    transform: skewY(var(--unskew));
    margin-top: 20px;
    padding: 0 20px;
}

@media screen and (min-width: 640px) and (max-width: 1279px) {
    .footer .__content-bottom {
        padding: 0 120px
    }
}

@media screen and (max-width: 1279px) {
    .footer .__content-bottom {
        min-width: 100%;
        justify-content: space-between
    }
}

@media screen and (min-width: 1280px) {
    .footer .__content-bottom {
        padding: 0 240px
    }
}

.footer .logo {
    padding-right: 25px;
}

@media screen and (max-width: 1279px) {
    .footer .logo {
        padding-right: 0;
        width: 20%
    }
}

.footer .__main-item {
    text-transform: uppercase;
    font-family: 'Druk';
    font-size: 1.3em;
    letter-spacing: 0.15em;
    font-weight: 500;
    padding-top: 15px;
}

.footer .__main-item:hover,
.footer .__main-item.active {
    color: var(--color-red-product);
}

@media screen and (max-width: 1279px) {
    .footer .__main-item {
        width: 50%;
        padding-top: 35px;
    }
}

.footer .__sub-items {
    display: flex;
    flex-direction: column;
    opacity: 0.5;
    text-transform: none;
    letter-spacing: 0.08em;
    padding-top: 5px;
    color: var(--color-darkgrey);
}

.footer .__sub-items li {
    margin-top: 15px;
}

.footer .__sub-items li:hover,
.footer .__sub-items li a.active {
    color: var(--color-red-product);
}

.footer .__terms {
    display: flex;
    flex-direction: column;
}

.footer .__terms>* {
    padding-top: 10px;
}

@media screen and (min-width: 1280px) {
    .footer .__terms {
        flex-direction: row-reverse;
        justify-content: space-between;
    }
}

.footer .__terms .copyright {
    width: 50%;
    font-size: 0.8em;
}

@media screen and (max-width: 1279px) {
    .footer .__terms .copyright {
        margin-top: 40px;
        width: 100%
    }
}

.footer .hr {
    display: block;
    padding-top: 10px;
}

.footer .p {
    color: var(--color-dark);
    margin-bottom: 10px;
    font-size: 0.9em;
}

.footer .link {
    text-transform: uppercase;
    color: var(--color-dark);
    font-size: 0.8em;
}

.footer .__bottom-mask {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: -20%;
    z-index: -1;
}

.footer-decorator {
    position: relative;
}

.footer-decorator .__top {
    transform: skewY(var(--skew));
    position: absolute;
    right: 0;
    width: 45%;
    height: 2px;
    top: -10px;
    z-index: 1;
}

header {
    width: 100%;
    z-index: 101;
    top: 0;
}

header.sticky:not(.no-shadow) {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.05));
}

@media screen and (max-width: 639px) {
    header .container-fluid {
        min-width: 100%
    }
}

header .__content {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 0 20px 0 240px;
}

@media screen and (max-width: 639px) {
    header .__content {
        padding: 0 20px
    }
}

@media screen and (max-width: 1279px) {
    header .__content {
        padding: 0 20px
    }
}

header .logo {
    padding-right: 15px;
    transition: all var(--transition-easing) 0.3s;
    max-width: 55px;
}

header.sticky .logo {
    max-width: 35px;
}

/* main nav */
.main-nav {
    /* TODO add select dropdown >>> waiting for design */
}

@media screen and (max-width: 1279px) {
    .main-nav {
        width: 50%;
        left: 140px;
        position: absolute;
    }
}

@media screen and (max-width: 639px) {
    .main-nav {
        transform: translate(100%, 0);
        position: absolute;
        top: 100%;
        width: 100%;
        left: 0;
        transition: all 0.2s ease-in-out;
    }

    .main-nav .__close-label {
        position: absolute;
        top: 100%;
        left: -100%;
        width: 200%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: all 0.2s ease-in-out;
        pointer-events: none;
    }
}

.main-nav ul {
    position: relative;
    display: flex;
    transition: all 0.5s ease;
    flex-direction: row;
}

@media screen and (max-width: 639px) {
    .main-nav ul {
        /*background-image: url("../assets/img/background-texture.png");*/
        flex-direction: column
    }

    .main-nav ul li {
        padding: var(--padding-20);
        border-top: 1px solid var(--color-grey);
    }
}

.main-nav li {
    position: relative;
    text-transform: uppercase;
    font-family: 'Druk';
    font-size: 1.3em;
    letter-spacing: 0.15em;
    font-weight: 500;
    padding: 0 var(--padding-30);
    vertical-align: middle;
}

.main-nav li:hover,
.main-nav li.active {
    color: var(--color-red-product);
}

.main-nav li a {
    padding: var(--padding-20) 0;
    display: inline-block;
}

.main-nav li a:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
    content: '';
    background-color: rgba(0, 0, 0, 0);
}

input#mobile-menu {
    display: none;
}

input#mobile-menu:checked~.main-nav {
    transform: translate(0, 0);
}

input#mobile-menu:checked~.main-nav .__close-label {
    opacity: 1;
    pointer-events: all;
}

.__notifications-mobile {
    position: absolute;
    top: 16px;
    right: 70px;
    display: none;
    color: var(--color-darkgrey);
    padding: 5px 10px;
    transition: all 0.3s ease-out;
}

.sticky .__notifications-mobile {
    top: 1px;
}

.__notifications-mobile span {
    position: relative;
    top: 5px;
    font-size: 2.5em;
}

@-webkit-keyframes notifications-dot {
    0% {
        background: var(--color-red-product);
    }

    50% {
        background: var(--color-light);
    }

    100% {
        background: var(--color-red-product);
    }
}

@keyframes notifications-dot {
    0% {
        background: var(--color-red-product);
    }

    50% {
        background: var(--color-light);
    }

    100% {
        background: var(--color-red-product);
    }
}

.__notifications-mobile .__notifications-dot {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    width: 1em;
    height: 1em;
    background: var(--color-light);
    border-radius: 50%;
    -webkit-animation: notifications-dot 0.5s forwards infinite;
    animation: notifications-dot 0.5s forwards infinite;
}

.__notifications-mobile.has-notifications .__notifications-dot {
    display: block;
}

.__notifications-mobile .__notifications-count {
    position: absolute;
    top: calc(50% - 2px);
    width: 100%;
    text-align: center;
    left: 50%;
    font-size: 0.8em;
    font-weight: bold;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 639px) {
    .__notifications-mobile {
        display: inline-block;
    }
}

/* profile login */
.profile-info {
    font-family: "Druk Wide Web";
    transition: all 0.3s ease-out;
    flex-grow: 1;
    text-transform: uppercase;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    right: -300px;
    top: -25px;
    transform: skewY(var(--skew));
    min-width: 40%;
}

.sticky .profile-info {
    top: -80px;
    right: -300px;
    /* transform: skewY(0); */
}

@media screen and (max-width: 1279px) {
    .profile-info {
        top: -20px;
        right: -100px;
    }

    .sticky .profile-info {
        top: -20px;
        right: -100px;
    }
}

@media screen and (max-width:1180px) {
    .profile-info {
        left: -370px;
        top: 250px;
        transform: skewY(0);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .sticky .profile-info {
        top: 20px !important;
    }
}

@media screen and (max-width:1024px) {
    .profile-info {
        left: -300px;
    }
}

@media screen and (max-width:980px) {
    .profile-info {
        left: -260px;
        top: 200px;
    }
}

@media screen and (max-width:914px) {
    .profile-info {
        left: -200px;
        top: 200px;
        transform: skewY(0);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .sticky .profile-info {
        top: 20px !important;
    }
}

@media screen and (max-width:834px) {
    .profile-info {
        left: -190px;
        top: 250px;
    }
}

@media screen and (max-width:820px) {
    .profile-info {
        left: -250px;
        top: 250px;
    }
}

@media screen and (max-width:800px) {
    .profile-info {
        left: -250px;
        top: 250px;
    }
}

@media screen and (max-width: 768px) {
    .profile-info {
        left: -260px;
        top: 280px;
        transform: skewY(0);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .sticky .profile-info {
        top: 20px !important;
    }
}

@media screen and (max-width:744px) {
    .profile-info {
        left: -240px;
    }
}

@media screen and (max-width:712px) {
    .profile-info {
        left: -255px;
    }
}

@media screen and (max-width: 639px) {
    .profile-info {
        left: -125px;
        top: 260px;
        transform: skewY(0);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .sticky .profile-info {
        top: 20px !important;
    }
}

@media screen and (min-width:19001) {
    .profile-info {
        position: fixed !important;
    }
}

/* @media screen and (max-width:412px) {
    .profile-info {
        left: -133px;
    }
} */

.profile-info .__username {
    overflow: visible;
    position: relative;
    line-height: 10px;
    /*height: 20px;*/
    left: 0;
    top: 40px;
    display: block;
    padding: 0 10px;
    color: var(--color-darkgrey);
    background: var(--color-light);
    transition: all 0.3s ease-out;
}


.profile-info .__username span {
    font-size: 8px !important;
}

.sticky .profile-info .__username {
    left: 0;
}

@media screen and (max-width:1180px) {
    .profile-info .__username {
        background: none;
        position: relative;
        top: -320px !important;
        left: 550px !important;
    }
}

@media screen and (max-width:1024px) {
    .profile-info .__username {
        left: 430px !important;
    }
}

@media screen and (max-width:980px) {
    .profile-info .__username {
        top: -260px !important;
        left: 470px !important;
    }
}

@media screen and (max-width:914px) {
    .profile-info .__username {
        left: 370px !important;
    }
}


@media screen and (max-width:834px) {
    .profile-info .__username {
        top: -320px !important;
        left: 330px !important;
    }
}

@media screen and (max-width:820px) {
    .profile-info .__username {
        background: none;
        position: relative;
        top: -320px !important;
        left: 380px !important;
    }
}

@media screen and (max-width: 768px) {
    .profile-info .__username {
        background: none;
        position: relative;
        top: -415px !important;
        left: 360px !important;
    }
}

@media screen and (max-width: 768px) {
    .profile-info .__username {
        top: -345px !important;
        left: 360px !important;
    }
}

@media screen and (max-width:712px) {
    .profile-info .__username {
        top: -335px !important;
        left: 310px !important;
    }
}


@media screen and (max-width: 639px) {
    .profile-info .__username {
        background: none;
        position: relative;
        top: -310px !important;
        left: 180px !important;
    }
}

.profile-info .__codes {
    padding: 0 10px;
    padding-top: 8px;
    padding-bottom: 10px;
    text-transform: uppercase;
    background: var(--color-red-product);
    color: var(--color-light);
    height: 50px;
    margin-top: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    font-size: 18px;
    height: 40px;
    transition: all 0.3s ease-out;
}

.sticky .profile-info .__codes {
    left: -60px;
    font-size: 1.2em;
    padding-top: 10px;
}

@media screen and (max-width: 1279px) {
    .profile-info .__codes {
        height: 40px;
        left: 0 !important;
    }
}

@media screen and (max-width:1180px) {
    .profile-info .__codes {
        text-align: center;
        max-width: 210%;
        background: none;
        color: var(--color-red-product);
    }
}

@media screen and (max-width: 768px) {
    .profile-info .__codes {
        text-align: center;
        max-width: 210%;
        background: none;
        color: var(--color-red-product);
    }
}

@media screen and (max-width: 639px) {
    .profile-info .__codes {
        text-align: center;
        max-width: 160%;
        background: none;
        color: var(--color-red-product);
    }
}

@-webkit-keyframes codes-delta {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    20% {
        opacity: 1;
        transform: translateY(0px);
    }

    80% {
        opacity: 1;
        transform: translateY(0px);
    }

    100% {
        opacity: 0;
        transform: translateY(-15px);
    }
}

@keyframes codes-delta {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    20% {
        opacity: 1;
        transform: translateY(0px);
    }

    80% {
        opacity: 1;
        transform: translateY(0px);
    }

    100% {
        opacity: 0;
        transform: translateY(-15px);
    }
}

@-webkit-keyframes codes-delta-mobile {
    0% {
        opacity: 0;
        transform: translateY(15px) skewY(var(--skew));
    }

    20% {
        opacity: 1;
        transform: translateY(0px) skewY(var(--skew));
    }

    80% {
        opacity: 1;
        transform: translateY(0px) skewY(var(--skew));
    }

    100% {
        opacity: 0;
        transform: translateY(-15px) skewY(var(--skew));
    }
}

@keyframes codes-delta-mobile {
    0% {
        opacity: 0;
        transform: translateY(15px) skewY(var(--skew));
    }

    20% {
        opacity: 1;
        transform: translateY(0px) skewY(var(--skew));
    }

    80% {
        opacity: 1;
        transform: translateY(0px) skewY(var(--skew));
    }

    100% {
        opacity: 0;
        transform: translateY(-15px) skewY(var(--skew));
    }
}

.profile-info .__codes-delta {
    width: 5ch;
    position: absolute;
    top: 0;
    right: 100%;
    text-align: center;
    padding: var(--padding-20) 0;
    background: var(--color-blue-product);
    color: var(--color-light);
    -webkit-animation: codes-delta 2s ease-in-out forwards;
    animation: codes-delta 2s ease-in-out forwards;
}

@media screen and (max-width: 639px) {
    .profile-info .__codes-delta {
        font-size: 30px;
        padding: var(--padding-20);
        padding-right: var(--padding-30);
        width: auto;
        top: 100px;
        right: 65px;
        transform: skewY(var(--skew));
        -webkit-animation: none;
        animation: none;
        -webkit-animation: codes-delta-mobile 2s ease-in-out forwards;
        animation: codes-delta-mobile 2s ease-in-out forwards
    }
}

.profile-info .__profil-button {
    position: absolute;
    top: 40px;
    height: 40px;
    width: 46px;
    left: 170px;
    background: var(--color-red-wine);
    display: block;
    color: var(--color-light);
    padding: 0px 10px;
    padding-left: 16px;
    padding-top: 10px;
    margin-left: 0px;
    transition: all 0.3s ease-out;
}

.profile-info .__profil-button .user-icon {
    transform: skewY(20deg);
}

.sticky .profile-info .__profil-button {
    top: 40px;
    left: 162px;
    height: 38px;
}

@media screen and (max-width:1180px) {
    .profile-info .__profil-button {
        left: 670px;
        top: -305px;
        background: transparent;
    }

    .profile-info .__profil-button .user-icon {
        transform: skewY(0deg);
    }
}

@media screen and (max-width:1024px) {
    .profile-info .__profil-button {
        left: 500px;
    }
}

@media screen and (max-width:980px) {
    .profile-info .__profil-button {
        top: -255px;
        left: 530px;
    }
}

@media screen and (max-width:914px) {
    .profile-info .__profil-button {
        left: 430px;
    }
}

@media screen and (max-width:834px) {
    .profile-info .__profil-button {
        top: -305px;
        left: 400px;
    }
}

@media screen and (max-width:820px) {
    .profile-info .__profil-button {
        left: 450px;
        top: -310px;
    }
}

@media screen and (max-width:768px) {
    .profile-info .__profil-button {
        left: 420px;
        top: -405px;
        background: transparent;
    }

    .profile-info .__profil-button .user-icon {
        transform: skewY(0deg);
    }
}

@media screen and (max-width:744px) {
    .profile-info .__profil-button {
        left: 420px;
        top: -335px;
    }
}


@media screen and (max-width: 639px) {
    .profile-info .__profil-button {
        left: 240px;
        top: -314px;
    }
}

.profile-info .__notifications-button {
    position: absolute;
    top: 40px;
    left: 214px;
    cursor: pointer;
    background: var(--color-red-wine);
    display: inline-block;
    vertical-align: top;
    color: var(--color-light);
    padding: 5px 10px;
    margin-left: 0px;
    transition: all 0.3s ease-out;
    height: 44px;
}

.sticky .profile-info .__notifications-button {
    top: 40px;
    left: 144px;
    height: 38px;
}

.profile-info .__notifications-button span {
    position: relative;
    top: 5px;
}

@keyframes notifications-dot {
    0% {
        background: var(--color-red-product);
    }

    50% {
        background: var(--color-light);
    }

    100% {
        background: var(--color-red-product);
    }
}

.profile-info .__notifications-button .__notifications-dot {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    width: 1em;
    height: 1em;
    background: var(--color-light);
    border-radius: 50%;
    -webkit-animation: notifications-dot 0.5s forwards infinite;
    animation: notifications-dot 0.5s forwards infinite;
}

.profile-info .__notifications-button.has-notifications .__notifications-dot {
    display: block;
}

.profile-info .__notifications-button .__notifications-count {
    position: absolute;
    top: calc(50% - 2px);
    width: 100%;
    text-align: center;
    left: 50%;
    font-size: 0.8em;
    font-weight: bold;
    transform: translate(-50%, -50%);
}

.sticky .profile-info .__notifications-button .__notifications-count {
    top: calc(50%);
}

@media screen and (max-width: 639px) {
    .profile-info .__notifications-button {
        display: none;
    }
}

.profile-info .__notifications-mobile {
    left: auto;
    right: 100px;
}

.__dropdown {
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: var(--padding-20) 0;
    top: 0;
}

@media screen and (max-width: 639px) {
    .__dropdown {
        position: relative;
    }
}

.__dropdown .__arrow {
    transition: all 0.2s ease-in-out;
    position: absolute;
    top: calc(var(--padding-20) - 0.1em);
    padding-bottom: calc(var(--padding-20) - 0.1em);
}

.__dropdown .__dropdown-item {
    width: 100%;
    position: relative;
}

@media screen and (max-width: 639px) {
    .__dropdown .__dropdown-item {
        border-bottom: 0
    }

    .__dropdown .__dropdown-item:first-child {
        margin-top: var(--margin-10);
    }
}

.__dropdown:focus-within .__arrow,
.__dropdown:focus .__arrow {
    line-height: 0;
    transform-origin: 50% calc(50% - 1.5px);
    transform: rotate(180deg) !important;
}

.__dropdown:focus-within .__dropdown-items,
.__dropdown:focus .__dropdown-items {
    max-height: 500px;
}

.__dropdown:focus-within+.__dropdown-closer,
.__dropdown:focus+.__dropdown-closer {
    display: block;
}

.__dropdown-closer {
    position: absolute;
    top: 0;
    left: 125px;
    width: 250px;
    height: 100%;
    transform: translate(-50%, 0);
    display: none;
}

.__dropdown-items {
    /*background-image: url("../assets/img/background-texture.png");*/
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    text-transform: none;
    position: relative;
    left: calc(var(--margin-20) * -1);
}

@media screen and (max-width: 639px) {
    .__dropdown-items {
        left: 0
    }
}

.__dropdown-item {
    padding: var(--padding-20) !important;
    border-bottom: 1px solid var(--color-grey);
    white-space: nowrap;
    color: var(--color-darkgrey);
    transition: all 0.2s ease-out;
}

.__dropdown-item:hover {
    color: var(--color-red-product);
}

.__mobile-icons {
    cursor: pointer;
    width: 45px;
    height: 45px;
    color: var(--color-red-product);
    transform: skewY(var(--skew));
    display: none;
    position: absolute;
    right: var(--margin-20);
    transition: all 0.3s ease-in-out;
}

.__mobile-icons span {
    font-size: 45px;
}

.__mobile-icons .__burger {
    font-size: 30px;
    position: relative;
    top: 0.5em;
    width: 1em;
    height: 4px;
    background-color: currentColor;
    transition: all 0.3s ease-in-out;
}

.__mobile-icons .__burger:before,
.__mobile-icons .__burger:after {
    content: '';
    width: 100%;
    height: 4px;
    background-color: currentColor;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease-in-out;
    opacity: 1;
}

.__mobile-icons .__burger:before {
    transform-origin: 0 0;
    top: calc(-0.5em + 4px);
}

.__mobile-icons .__burger:after {
    transform-origin: 100% 100%;
    top: calc(0.5em - 4px);
}

/* transform: skewY(0); */
input#mobile-menu:checked~.__mobile-icons .__burger {
    transform: rotate(45deg);
}

input#mobile-menu:checked~.__mobile-icons .__burger:before {
    transform: translateX(5%) translateY(-2px) rotate(90deg);
}

input#mobile-menu:checked~.__mobile-icons .__burger:after {
    transform: translateX(-50%) rotate(80deg);
    opacity: 0;
}

@media screen and (max-width: 639px) {
    .__mobile-icons {
        display: block;
    }
}

.__mobile-icons .__open,
.__mobile-icons .__close {
    position: absolute;
    transition: all 0.2s ease-out;
}

.__mobile-icons .__open {
    transform: rotate(0) scale(1);
}

.__mobile-icons .__close {
    opacity: 0;
    transform: rotate(0) scale(0);
}

input#mobile-menu:checked~.__mobile-icons .__open {
    opacity: 0;
    transform: rotate(-180deg) scale(0);
}

input#mobile-menu:checked~.__mobile-icons .__close {
    opacity: 1;
    transform: rotate(180deg) scale(1);
}

/* add sticky behavior */
.sticky .container-fluid {
    height: 60px;
}

.accordion .accordion-item {
    position: relative;
}

.accordion .accordion-item .accordion-arrow {
    transition: all 0.3s var(--transition-easing);
}

.accordion .accordion-item .accordion-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 0;
    transition: all 0.3s var(--transition-easing);
}

.accordion .accordion-title {
    position: relative;
    display: block;
    font-family: Druk;
    font-size: 20px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-dark);
    padding: var(--padding-20) 0;
    border-bottom: 1px solid var(--color-dark);
}

.accordion .accordion-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

.accordion input[type='radio'] {
    display: none;
}

.accordion input[type='radio']:checked+.accordion-item .accordion-arrow {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%) rotate(180deg);
}

.accordion input[type='radio']:checked+.accordion-item .accordion-body {
    max-height: 2000px;
    padding: var(--padding-30) 0;
}

.section-account {
    background-color: var(--color-light);
    padding-top: 150px;
    padding-bottom: 300px;
}

@media screen and (max-width: 639px) {
    .section-account {
        padding-top: 100px;
        padding-bottom: 150px;
    }
}

.section-account .__content-wrap {
    padding: 0 20px;
}

@media screen and (min-width: 640px) and (max-width: 1279px) {
    .section-account .__content-wrap {
        padding: 0 120px
    }
}

@media screen and (min-width: 1280px) {
    .section-account .__content-wrap {
        padding: 0 240px
    }
}

.section-account .border-box {
    border: 1px solid var(--color-grey);
}

@media screen and (max-width: 639px) {
    .section-account .border-box {
        border: none
    }
}

.section-account .account-menu {
    margin-top: 100px;
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 500;
    font-size: 1.4em;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
}

/* Firefox */
.section-account .account-menu::-webkit-scrollbar {
    /* Hide scrollbar for Chrome, Safari and Opera */
    display: none;
}

.section-account .account-menu li {
    margin-bottom: 20px;
}

.section-account .account-menu li>* {
    vertical-align: middle;
}

.section-account .account-menu li.active {
    color: var(--color-red-product);
}

.section-account .account-menu li:hover {
    opacity: 0.7;
}

.section-account .account-menu .logout {
    color: var(--color-dark);
    text-decoration: underline;
}

@media screen and (max-width: 639px) {
    .section-account .account-menu {
        overflow: auto;
        white-space: nowrap;
        margin-top: 30px;
    }

    .section-account .account-menu li {
        padding-bottom: 5px;
        display: inline-block;
        margin-bottom: 20px;
        margin-right: 10px;
    }

    .section-account .account-menu li .material-icons {
        display: none;
    }

    .section-account .account-menu li.active {
        border-bottom: 3px solid var(--color-red-product);
    }
}

.section-account+.register-codes .register-codes-btn {
    /* display: none; */
}

.breadcrumb ul,
.breadcrumb a {
    display: flex;
    align-items: center;
}

.breadcrumb li {
    margin-right: 10px;
    margin-left: 5px;
    font-size: 1.3em;
}

.breadcrumb a:hover {
    color: var(--color-red-product);
}

.btn {
    position: relative;
    display: inline-block;
    padding: 5px 40px;
    text-transform: uppercase;
    font: var(--font-btn);
    font-size: 30px;
    line-height: 50px;
    letter-spacing: 4px;
    min-width: 280px;
    text-align: center;
    /* overflow: hidden; */
    /*color: var(--color-red-product-foreground);*/
    color: #000;
    transition: var(--transition);
    z-index: 0;
    cursor: pointer;
    background-color: #D9D9D9;
    /*background-color: var(--color-red-product);*/
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.btn:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border: 1px solid #D9D9D9;
    /*border: 1px solid var(--color-red-product);*/
}

.btn:before {
    z-index: -1;
    content: '';
    position: absolute;
    top: 160%;
    left: -100%;
    background-color: var(--color-red-product-foreground);
    transform: skewY(-17deg);
    transition: var(--transition);
    height: 400%;
    width: 400%;
}

.btn:hover:before {
    transform: skewY(-17deg);
    top: -290%;
}

.btn[disabled] {
    opacity: 0.3;
    pointer-events: none;
}

@media screen and (max-width: 639px) {
    .btn {
        display: block;
        min-width: 100%;
    }
}

.btn.btn--outlined {
    color: #d71921;
    background-color: var(--color-light);
}

.btn.btn--outlined:after {
    border: 0px;
}

.btn.btn--outlined:before {
    background-color: var(--color-red-product);
}

.btn.btn--outlined:hover {
    color: var(--color-light);
}

.btn.btn--outlined.no-border {
    /* border: 1px solid transparent; */
}

.btn:hover {
    color: var(--color-red-product);
}

.btn:hover:before {
    opacity: 1;
}

.btn.btn--blue {
    background-color: var(--color-blue-product);
    color: var(--color-blue-product-foreground);
}

.btn.btn--blue:after {
    border-color: var(--color-blue-product);
}

.btn.btn--blue:before {
    background-color: var(--color-blue-product-foreground);
}

.btn.btn--blue:hover {
    color: var(--color-blue-product);
}

.btn-confirm {
    position: relative;
}

.btn-confirm>* {
    transition: all 0.2s ease-out;
    transform-origin: 0 100%;
}

.btn-confirm>*:nth-child(1) {
    transform: rotateX(0);
}

.btn-confirm>*:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    transform: rotateX(90deg);
}

.btn-confirm>*:nth-child(2).btn--blue {
    color: var(--color-light);
}

.btn-confirm>*:nth-child(2):before,
.btn-confirm>*:nth-child(2):after {
    display: none;
}

.btn-confirm:focus>*:nth-child(1),
.btn-confirm:focus-within>*:nth-child(1) {
    pointer-events: none;
    transform: rotateX(90deg);
}

.btn-confirm:focus>*:nth-child(2),
.btn-confirm:focus-within>*:nth-child(2) {
    pointer-events: all;
    transform: rotateX(0);
}

.feedback .h4 {
    font-weight: 500;
    color: var(--color-current);
    margin-bottom: 20px;
}

.feedback-link {
    background-color: var(--color-current);
    margin: auto;
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 50px;
    text-align: center;
    color: var(--color-light);
}

@media screen and (max-width: 639px) {
    .feedback-link {
        padding-top: 150px;
        padding-bottom: 150px;
        padding-right: 20px;
        padding-left: 20px;
    }
}

.feedback-link .__content-wrap {
    max-width: 400px;
}

@media screen and (max-width: 639px) {
    .feedback-link .p span {
        display: block
    }
}

.feedback-link a {
    text-decoration: underline;
}

.error .feedback-link {
    --color-current: var(--color-error);
    --color-current-foreground: var(--color-error-foreground);
}

.gift-card {
    font-size: 1rem;
    position: relative;
    width: 100%;
    align-self: stretch;
    background: var(--color-light);
    min-height: 96%;
    display: flex;
    flex-direction: column;
}

.gift-card .__info {
    color: var(--color-darkgrey) !important;
    font-size: 14px;
    margin-top: var(--margin-20);
}

.gift-card .gift-card-tag {
    position: absolute;
    z-index: 1;
    color: var(--color-red-product);
    top: 0.7em;
    transform: skewY(var(--skew));
    border-bottom: solid 2px;
    border-color: var(--color-red-product);
    font-family: Druk;
    font-weight: 800;
    font-style: italic;
    font-size: 1.5em;
    letter-spacing: 0.1em;
    padding: 0 0.5em;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.81, 0.005, 0.16, 1);
}

.gift-card:hover .gift-card-new {
    top: 6em;
}

.gift-card .gift-card-units-left {
    position: absolute;
    z-index: 1;
    top: 15px;
    right: 15px;
    font-family: Druk;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9em;
    color: var(--color-red-product);
}

.gift-card .gift-card-image-wrapper {
    position: relative;
    background: var(--color-lightgrey);
}

.gift-card .gift-card-image-wrapper:before {
    content: '';
    display: block;
    padding-bottom: 100%;
    width: 100%;
}

.gift-card .gift-card-image-wrapper:after {
    content: '';
    display: block;
    width: 50%;
    height: 30%;
    background: var(--color-light);
    position: absolute;
    top: 40%;
    left: 0;
    transform: skewY(var(--skew));
    opacity: 0.6;
    transition: all 0.3s cubic-bezier(0.81, 0.005, 0.16, 1);
}

.gift-card .gift-card-image-wrapper img {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 55%;
    max-height: 90%;
    transition: all 0.3s cubic-bezier(0.81, 0.005, 0.16, 1);
}

.gift-card:hover .gift-card-image-wrapper:after {
    top: 30%;
}

.gift-card:hover .gift-card-image-wrapper img {
    transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
}

.gift-card .gift-card-content {
    background: var(--color-light);
    padding: 1.25em;
    text-align: center;
    /* min-height: 200px; */
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    flex-grow: 1;
}

.gift-card .gift-card-title {
    font-family: Druk;
    font-weight: medium;
    font-size: 1.3em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    -webkit-margin-after: 0.5em;
    margin-block-end: 0.5em;
}

.gift-card .gift-card-codes {
    position: relative;
    font-family: Druk;
    font-weight: medium;
    font-size: 1.1em;
    color: var(--color-red-product);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    -webkit-padding-after: 0.8em;
    padding-block-end: 0.8em;
    -webkit-margin-after: 0.8em;
    margin-block-end: 0.8em;
}

.gift-card .gift-card-codes:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-lightgrey);
}

.gift-card .gift-card-codes:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% / var(--codes-total) * var(--codes-left));
    height: 2px;
    background: var(--color-red-product);
    max-width: 100%;
}

.gift-card .gift-card__more {
    color: var(--color-darkgrey);
    -webkit-margin-after: var(--margin-10);
    margin-block-end: var(--margin-10);
    position: relative;
}

.gift-card .gift-card__more:hover {
    color: var(--color-red-product);

    /* span {
                opacity: 1;
            } */
}

.gift-card .gift-card__more span {
    /* opacity: 0; */
    pointer-events: none;
    font-size: 0.5em;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(calc(100% + 5px)) translateY(-1em);
    transition: all 0.3s var(--transition-easing);
}

@media screen and (max-width: 639px) {
    .gift-card .gift-card__more span {
        opacity: 1;
        color: var(--color-red-product);
    }
}

.gift-card .__spacer {
    flex-grow: 1;
}

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

.gift-card .codes {
    text-transform: uppercase;
    font-family: Druk;
    font-weight: medium;
    font-size: 1.1em;
    letter-spacing: 0.15em;
}

.gift-card .error {
    text-transform: uppercase;
    color: var(--color-error);
    font-family: Druk;
    font-weight: medium;
    font-size: 1.1em;
    letter-spacing: 0.15em;
}

.gift-card .out {
    opacity: 0.3;
}

.gift-card .__loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 11;
}

.gift-card .__loading ld-loader {
    height: 100px;
    position: absolute;
    top: calc(50% - 10px);
    left: 50%;
    transform: translate(-50%, -100%);
}

.gift-card .__loading p {
    font-size: 18px;
    position: absolute;
    top: calc(50% + 10px);
    left: 50%;
    width: 80%;
    transform: translate(-50%, 0);
}

.gift-card .__error,
.gift-card .__success {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(215, 25, 34, 0.9);
    color: var(--color-light);
    text-align: center;
    z-index: 11;
}

.gift-card .__error span,
.gift-card .__success span {
    font-size: 120px;
    position: absolute;
    top: calc(50% - 10px);
    left: 50%;
    transform: translate(-50%, -100%);
}

.gift-card .__error p,
.gift-card .__success p {
    font-size: 18px;
    position: absolute;
    top: calc(50% + 10px);
    left: 50%;
    width: 80%;
    transform: translate(-50%, 0);
}

.gift-card .__error {
    background: rgba(91, 16, 139, 0.9);
}

.hash-card {
    margin-top: 50px;
    position: relative;
    background-color: var(--color-light);
    padding-top: 40px;
}

.hash-card .number {
    font: 28px Druk, sans-serif;
    font-weight: 900;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    color: var(--color-current);
    position: absolute;
    top: -50px;
    left: 50%;
    font-size: 3em;
    font-weight: 900;
    font-style: italic;
    transform: translateX(-50%);
}

.hash-card .title {
    text-transform: uppercase;
    text-align: center;
    padding: 0 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em;
}

.hash-card img {
    position: absolute;
    max-width: 100%;
}

@media screen and (min-width: 640px) and (max-width: 1279px) {
    .hash-card img {
        max-width: none;
        width: 100%
    }
}

.hash-card .content {
    /* background-color: ld.color(grey); */

    position: relative;
    overflow: hidden;
    min-height: 300px;
    padding-bottom: 0;
}

.hash-card .content:before {
    content: '';
    display: block;
    position: absolute;
    transform: skewY(var(--skew));
    background-color: var(--color-lightgrey);
    top: 16%;
    left: 0;
    right: 0;
    bottom: -30%;
    min-height: 100px;
    z-index: 0;
}

.hash-card .button-wrapper {
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 50px;
}

.hash-card .button-icon {
    background: var(--color-lightgrey);
    border-bottom: 1px solid var(--color-light);
    padding: 20px;
    width: 50%;
    min-height: 100px;
    text-align: center;
    cursor: pointer;
}

.hash-card .button-icon .material-icons {
    font-size: 2em;
}

.hash-card .button-icon span {
    display: block;
    padding-bottom: 10px;
}

.hash-card .button-icon.active {
    background: var(--color-red-product);
    box-shadow: 7px 6px 9px 2px rgba(0, 0, 0, 0.24);
}

.hash-card .button-icon.active span {
    color: var(--color-light);
}

.hash-card .details {
    margin-top: 50px;
    position: relative;
    padding: 0 20px;
    text-align: center;
}

.hash-card .details p {
    display: none;
    visibility: hidden;
}

.hash-card .details p.active {
    display: block;
    visibility: visible;
}

.form-input-checkbox {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    font-size: 1rem;
}

.form-input-checkbox:disabled {
    opacity: 0.3;
}

.form-input-checkbox {

    border: 1px solid;
    border-color: var(--color-grey);
    border-radius: 1px;
    background-color: transparent;
    transition: var(--transition-fast);
}

.form-input-checkbox:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.6em;
    height: 0.6em;
    border-radius: 1px;
    transform: translate(-50%, -50%);
    background: var(--color-red-product);
    opacity: 0;
    transition: var(--transition-fast);
}

label:hover>.form-input-checkbox:not(:disabled):after,
.form-input-checkbox:hover:not(:disabled):after {
    opacity: 0.2;
}

.form-input-checkbox:checked:not(:disabled):after {
    opacity: 1 !important;
}

.form-input-checkbox:focus:not(:hover):not(:active):not(:disabled) {}

.form-input-picture-input {
    display: none;
}

.form-input-picture-card {
    background: var(--color-lightgrey);
    padding: 20px;
    max-width: 300px;
    display: block;
    position: relative;
}

/* cursor: pointer; */
input[type='file']:valid+.form-input-picture-card {
    background: var(--color-success) !important;
}

input[type='file']:valid+.form-input-picture-card .__check {
    opacity: 1;
}

.form-input-picture-card,
.form-input-picture-card * {
    transition: var(--transition-fast);
}

/* &:hover,
    input[type='file']:valid + & {
        background: ld.color(red-product);

        .__picture,
        .__card-id {
            background: ld.color(light);
            &:before {
                background: ld.color(light);
            }
        }
    } */
input[type='file']:valid+.form-input-picture-card {
    display: none;
}

.form-input-picture-card .__portrait,
.form-input-picture-card .__check {
    position: absolute;
    top: 50%;
    left: 45px;
    font-size: 50px;
    transform: translate(0, -50%);
    color: var(--color-lightgrey);
}

.form-input-picture-card .__preview {
    max-width: 100%;
}

.form-input-picture-card .__picture {
    background: var(--color-grey);
    width: 100px;
    height: 100px;
}

.form-input-picture-card .__card-id {
    background: var(--color-grey);
    width: calc(100% - 160px);
    height: 20px;
    position: absolute;
    top: calc(50% - 30px);
    left: 140px;
}

.form-input-picture-card .__card-id:before {
    transition: var(--transition-fast);
    background: var(--color-grey);
    content: '';
    display: block;
    width: 100%;
    height: 20px;
    position: absolute;
    top: 40px;
    left: 0;
}

.form-input-picture-card.hidden {
    display: none;
}

.hide-placeholder .form-input-picture-card {
    display: none;
}

.form-input-radio {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 1.5em;
    height: 1.5em;
    font-size: 1rem;
}

.form-input-radio:disabled {
    opacity: 0.3;
}

.form-input-radio {

    border: 1px solid;
    border-color: var(--color-grey);
    border-radius: 99999px;
    background-color: transparent;
    transition: var(--transition-fast);
}

.form-input-radio:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.6em;
    height: 0.6em;
    border-radius: 999999px;
    transform: translate(-50%, -50%);
    background: var(--color-red-product);
    opacity: 0;
    transition: var(--transition-fast);
}

label:hover>.form-input-radio:not(:disabled):after,
.form-input-radio:hover:not(:disabled):after {
    opacity: 0.2;
}

.form-input-radio:checked:not(:disabled):after {
    opacity: 1 !important;
}

.form-input-radio:focus:not(:hover):not(:active):not(:disabled) {}

.form-input-radio:checked:disabled:after {
    opacity: 4 !important;
}

.form-input-switch {
    font-size: 1rem;

    --thumb-size: 1em;
    --thumb-color-active: var(--color-red-product);
    --thumb-color-inactive: var(--color-light);
    --thumb-color-highlight: var(--color-grey);

    --track-size: calc(var(--thumb-size) * 2);
    --track-padding: 0em;
    --track-color-active: var(--color-grey);
    --track-color-inactive: var(--color-grey);

    --isLTR: 1;

    --thumb-position: 0%;
    --thumb-transition-duration: 0.25s;

    padding: var(--track-padding);
    inline-size: var(--track-size);
    block-size: var(--thumb-size);

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;
    pointer-events: all;
    cursor: pointer;
    touch-action: pan-y;
    outline-offset: 5px;
    box-sizing: content-box;

    flex-shrink: 0;
    display: grid;
    align-items: center;
    grid: [track] 1fr / [track] 1fr;
}

.form-input-switch::before {
    --highlight-size: 0;
    border-radius: 50%;
    content: '';
    cursor: pointer;
    pointer-events: none;
    grid-area: track;
    inline-size: var(--thumb-size);
    block-size: var(--thumb-size);
}

.form-input-switch::after {
    content: '';
    border-radius: 50%;
    cursor: pointer;
    pointer-events: none;
    grid-area: track;
    inline-size: var(--thumb-size);
    block-size: var(--thumb-size);
}

.form-input-switch:checked {
    --thumb-position: calc((var(--track-size) - 100%) * var(--isLTR));
}

.form-input-switch {

    background: var(--track-color-inactive);
    transition: all 0.2s ease-out;
    border-radius: 9999px;
}

.form-input-switch::before {
    border: 2px solid var(--color-grey);
    background: var(--thumb-color-inactive);
    transform: translateX(var(--thumb-position));
    transition: all 0.2s ease-out;
}

.form-input-switch::after {
    background: rgba(255, 255, 25, 0);
    box-shadow: 0;
    transition: all 0.2s ease-out;
}

.form-input-switch:checked::before {
    border: 2px solid var(--color-red-product);
    background: var(--thumb-color-active) !important;
}

ld-loader {
    display: inline-block;
}

@-webkit-keyframes loader {
    from {
        transform: translate(-50%, -50%) rotate(0);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes loader {
    from {
        transform: translate(-50%, -50%) rotate(0);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@-webkit-keyframes loader-line {
    0% {
        transform: skewY(-17deg) translate(0%);
        opacity: 0;
    }

    50% {
        transform: skewY(-17deg) translate(-50%);
        opacity: 1;
    }

    100% {
        transform: skewY(-17deg) translate(-100%);
        opacity: 0;
    }
}

@keyframes loader-line {
    0% {
        transform: skewY(-17deg) translate(0%);
        opacity: 0;
    }

    50% {
        transform: skewY(-17deg) translate(-50%);
        opacity: 1;
    }

    100% {
        transform: skewY(-17deg) translate(-100%);
        opacity: 0;
    }
}

@-webkit-keyframes loader-line-1 {
    0% {
        transform: skewY(-17deg) translate(-100%);
        opacity: 0;
    }

    50% {
        transform: skewY(-17deg) translate(-50%);
        opacity: 1;
    }

    100% {
        transform: skewY(-17deg) translate(0%);
        opacity: 0;
    }
}

@keyframes loader-line-1 {
    0% {
        transform: skewY(-17deg) translate(-100%);
        opacity: 0;
    }

    50% {
        transform: skewY(-17deg) translate(-50%);
        opacity: 1;
    }

    100% {
        transform: skewY(-17deg) translate(0%);
        opacity: 0;
    }
}

.loader {
    --color: #d71921;
    position: relative;
}

.loader--light {
    --color: #fff;
}

.loader--lightgrey {
    --color: var(--color-lightgrey);
}

.loader .__ld {
    display: none;
}

.is-logged .loader .__ld {
    display: block;
}

.loader .__favicon {
    width: 50px;
    height: 50px;
}

.is-logged .loader .__favicon {
    display: none;
}

.loader .__lines:before,
.loader .__lines:after {
    content: '';
    width: 200%;
    height: 1px;
    background: var(--color);
    position: absolute;
    left: 50%;
    transform-origin: 0 0;
    transform: skewY(-17deg) translate(-50%);
}

.loader .__lines:before {
    top: -20px;
    -webkit-animation: loader-line 1s ease-in-out infinite;
    animation: loader-line 1s ease-in-out infinite;
}

.loader .__lines:after {
    bottom: -20px;
    -webkit-animation: loader-line-1 1s ease-in-out infinite 0.05s;
    animation: loader-line-1 1s ease-in-out infinite 0.05s;
}

.location-selector {
    position: relative;
    overflow: hidden;
}

.location-selector.is-error {
    border: solid 1px var(--color-error);
}

.location-selector.toggle .__sidebar {
    transform: translate(-100%, 0) !important;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}

@media screen and (max-width: 639px) {
    .location-selector.toggle .__sidebar {
        transform: translate(0, 0) !important
    }
}

.location-selector.sidepanel .__sidebar {
    transform: translate(0, 0) !important;
}

.location-selector.sidepanel .__map {
    width: 66.6%;
}

@media screen and (max-width: 639px) {
    .location-selector {
        height: auto;

        /*display: flex;*/
        flex-wrap: wrap;
    }
}

.location-selector .__mode {
    position: absolute;
    z-index: 10;
    top: var(--margin-20);
    right: var(--margin-20);
    display: flex;
    background: var(--color-light);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}

.location-selector .__mode li {
    cursor: pointer;
    padding: var(--padding-10) var(--padding-20);
}

.location-selector .__mode li.active {
    background: var(--color-lightgrey);
}

.location-selector .__mode li:hover {
    background: var(--color-red-product);
    color: white;
}

@media screen and (max-width: 639px) {
    .location-selector.sidepanel .__mode {
        position: relative;
        top: 0;
        left: 100%;
        transform: translate(-100%);
        margin-block: var(--margin-20);
        filter: none;
    }
}

.location-selector .__sidebar {
    height: 100%;
    width: 38%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: var(--color-lightergrey);
    transition: all 0.3s var(--transition-easing);
}

@media screen and (max-width: 639px) {
    .location-selector .__sidebar {
        position: relative;
        width: 100%;
        min-height: 150px;
        height: auto;
        max-height: 60vh;
        flex-shrink: 0;
        order: 1;
        filter: none !important
    }
}

.location-selector .__map {
    position: absolute;
    top: 0;
    right: 0;
    width: 66.66%;
    width: 100%;
    height: 100%;
    order: 0;
    transition: all 0.3s var(--transition-easing);
}

@media screen and (max-width: 639px) {
    .location-selector .__map {
        position: relative;
        flex-shrink: 0;
        aspect-ratio: 1;
        width: 100%;
        height: auto
    }
}

@media screen and (max-width: 639px) {
    .location-selector.sidepanel .__map {
        display: none;
    }
}

.location-selector .form-input-text {
    display: block;
    width: 100%;
    -webkit-margin-after: var(--margin-20);
    margin-block-end: var(--margin-20);
    padding-right: 70px !important;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.location-selector .__filter {
    position: relative;
}

.location-selector .__reset {
    position: absolute;
    top: 0;
    right: 5px;
    width: 40px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.location-selector .__reset * {
    font-size: 0.95em;
}

.location-selector .__select-more {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.location-selector .__select-more:focus+.__city-selector,
.location-selector .__select-more:focus-within+.__city-selector {
    opacity: 1;
    pointer-events: all;
}

.location-selector .__toggle {
    position: absolute;
    top: 0;
    left: 100%;
    width: 40px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    transform: translate(0, 0);
    background: var(--color-lightergrey);
}

.location-selector .__toggle>* {
    transition: all 0.3s var(--transition-easing);
    transform: rotate(0);
}

.location-selector:not(.toggle) .__toggle {
    display: none;
}

.location-selector.sidepanel .__toggle>* {
    transform: rotate(-180deg);
}

.location-selector .__city-selector {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background: var(--color-lightergrey);
}

.location-selector .__city-selector:focus,
.location-selector .__city-selector:focus-within {
    opacity: 1;
    pointer-events: all;
}

.location-selector .__city-selector:before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100vw;
    background: white;
    opacity: 0.9;
}

.location-selector .__city-selector li {
    padding: var(--padding-30);
    font-weight: bold;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-bottom: 1px solid var(--color-lightgrey);
}

.location-selector .__city-selector li:hover {
    background-color: var(--color-current);
    color: white;
}

.location-selector .__list {
    overflow: auto;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
}

@media screen and (max-width: 639px) {
    .location-selector .__list {
        display: none;
        /* position: static; */
    }
}

.location-selector .__list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.location-selector .__list::-webkit-scrollbar-track {
    background-color: var(--color-grey);
}

.location-selector .__list::-webkit-scrollbar-thumb {
    background-color: var(--color-darkgrey);
}

.location-selector .__city {
    font-size: 20px;
    font-family: 'Druk';
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--padding-20);
}

.location-selector .__store {
    position: relative;
    padding: var(--padding-20);
    margin-top: var(--margin-40);
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition-fast);
    border-bottom: 1px solid var(--color-lightgrey);
}

.location-selector .__store:hover,
.location-selector .__store.active {
    background: var(--color-current);
}

.location-selector .__store:hover,
.location-selector .__store:hover *,
.location-selector .__store.active,
.location-selector .__store.active * {
    color: var(--color-current-foreground);
}

.location-selector .__store.active {
    padding-left: var(--padding-60);
}

.location-selector .__store.active .__check {
    transform: translate(0, 0);
}

.location-selector .__info {
    font-size: 12px;
    position: relative;
    padding-left: var(--padding-30);
    margin-top: var(--margin-20);
}

.location-selector .__info span {
    color: var(--color-red-product);
    font-size: 1.5em;
    position: absolute;
    top: -0.1em;
    left: 0;
}

.location-selector .__check {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--padding-40);
    height: 100%;
    background: var(--color-red-wine);
    transform: translate(-100%, 0);
    transition: var(--transition-fast);
}

.location-selector .__name {
    color: var(--color-current);
    font-weight: bold;
    -webkit-margin-after: var(--margin-10);
    margin-block-end: var(--margin-10);
}

.location-selector .__hours,
.location-selector .__holidays {
    display: flex;
    font-size: 12px;
}

.location-selector .__hours div:first-child,
.location-selector .__holidays div:first-child {
    flex-grow: 1;
}

.location-selector .__hour {}

.notifications {
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    width: clamp(250px, 50vw, 800px);
    height: 100vh;
    background: var(--color-light);
    transform: translate(100%, 0);
    pointer-events: none;
    transition: all 0.3s var(--transition-easing);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
}

.notifications:before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    width: 100vw;
    height: 100vh;
    background: var(--color-light);
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s var(--transition-easing);
}

@media screen and (max-width: 639px) {
    .notifications {
        width: 100%;
    }
}

.notifications .__clickArea {
    position: absolute;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
}

.notifications .close-btn {
    transform: skewY(var(--skew));
    border: solid 1px var(--color-dark);
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    width: 1.6em;
    height: 1.6em;
    font-size: 24px;
    position: absolute;
    top: var(--margin-20);
    right: var(--margin-20);
}

.notifications .close-btn *,
.notifications .close-btn *:before,
.notifications .close-btn *:after {
    font-size: 1.6em;
}

.notifications.opened {
    transform: translate(0, 0);
    pointer-events: all;
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2);
}

.notifications.opened:before {
    pointer-events: all;
    opacity: 0.7;
}

.notifications .__markAllRead {
    text-decoration: underline;
}

.notifications .__header {
    padding: var(--padding-40) var(--padding-60);
    padding-bottom: var(--padding-30);
}

@media screen and (max-width: 639px) {
    .notifications .__header {
        padding: var(--padding-20) var(--padding-30);
        padding-bottom: var(--padding-20)
    }
}

.notifications .__list {
    padding: var(--padding-40) var(--padding-60);
    overflow-y: auto;
    transition: all 0.5s var(--transition-ease);
}

@media screen and (max-width: 639px) {
    .notifications .__list {
        padding: var(--padding-20) var(--padding-30);
    }
}

.notifications .__list::-webkit-scrollbar {
    width: 5px;
    height: 2px;
}

.notifications .__list::-webkit-scrollbar-track {
    background-color: var(--color-red-product);
    background: rgba(0, 0, 0, 0);
}

.notifications .__list::-webkit-scrollbar-thumb {
    background-color: var(--color-red-product);
}

.notifications .__notification {
    display: block;
    padding: var(--padding-20);
    border: solid 1px var(--color-red-product);
    border-radius: 2px;
    -webkit-margin-after: var(--margin-20);
    margin-block-end: var(--margin-20);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: all 0.2s var(--transition-ease);
}

.notifications .__notification:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.notifications .__notification.read {
    border: solid 1px var(--color-grey);
}

.notifications .__notification-header {
    display: flex;
    -webkit-margin-after: var(--margin-20);
    margin-block-end: var(--margin-20);
}

.notifications .__title {
    flex-grow: 1;
}

.notifications .__dot {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    background: var(--color-red-product);
    border-radius: 0.5em;
    -webkit-margin-start: var(--margin-10);
    margin-inline-start: var(--margin-10);
}

.notifications .__notification.read .__dot {
    display: none;
}

.notifications .__no-notification-img {
    width: 100%;
}

ld-prizes-list {
    display: block;
}

ld-prizes-list .__prizes {
    position: relative;
    margin-inline: -10px;
}

ld-prizes-list .__gifts {
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

@media screen and (max-width: 639px) {
    ld-prizes-list .__gifts {
        display: block;
        transition: transform 0.3s cubic-bezier(0.835, 0, 0.165, 1.01);
        transform: translateX(calc(var(--slider-item) * -100%))
    }
}

ld-prizes-list .__gifts-nav {
    text-align: center;
    -webkit-margin-after: 10px;
    margin-block-end: 10px;
    display: none;
}

@media screen and (max-width: 639px) {
    ld-prizes-list .__gifts-nav {
        display: flex;
    }
}

ld-prizes-list .__gifts-nav li {
    width: calc(100% / var(--slider-total));
    background: var(--color-lightgrey);
    height: 4px;
    margin: 0 5px;
    transition: all 0.3s ease-out;
}

ld-prizes-list .__gifts-nav li.active {
    background: var(--color-darkgrey);
}

ld-prizes-list .__gift {
    width: calc(33.3% - 10px);
    display: flex;
}

@media screen and (max-width: 639px) {
    ld-prizes-list .__gift {
        flex-shrink: 0;
        width: 100%;
        -webkit-margin-after: var(--margin-20);
        margin-block-end: var(--margin-20);
        -webkit-margin-end: 10px !important;
        margin-inline-end: 10px !important
    }
}

ld-prizes-list .__more-desktop {
    display: flex;
    flex-direction: column;
    width: calc(66.6% - 10px);
}

@media screen and (max-width: 639px) {
    ld-prizes-list .__more-desktop {
        display: none
    }
}

ld-prizes-list .__more-mobile {
    display: none;
}

@media screen and (max-width: 639px) {
    ld-prizes-list .__more-mobile {
        display: block
    }
}

ld-prizes-list .__more {
    display: flex;
    flex-flow: column;
    flex-grow: 1;
    justify-content: space-between;
    padding: var(--margin-60) 2em 20px 2em;
    background: var(--color-lightgrey);
}

/* position: absolute;
        bottom: 20px;
        right: 10px;
        clip-path: polygon(0 20px, 100% 20px, 100% 100%, 0 100%); */
@media screen and (max-width: 1279px) {
    ld-prizes-list .__more {
        /* top: 50%;
            bottom: 15px;
            max-height: 50%; */
    }
}

/* width: calc(66.6% - 15px); */
@media screen and (max-width: 639px) {
    ld-prizes-list .__more {
        /* clip-path: none;
            width: 100%;
            position: relative;
            bottom: auto;
            right: 0;
            padding: 2em;
            margin-block-start: 50px; */
    }
}

ld-prizes-list .__more-title {
    font-size: 4em;
    font-family: Druk;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    line-height: 0.8;
    -webkit-margin-after: 0.25em;
    margin-block-end: 0.25em;
    color: var(--color-red-product);
}

@media screen and (min-width: 640px) and (max-width: 1279px) {
    ld-prizes-list .__more-title {
        font-size: 2.3em;
    }
}

ld-prizes-list .__more-title span {
    display: block;
    font-size: 0.7em;
}

@media screen and (min-width: 1280px) {
    ld-prizes-list .__more-title span {
        font-size: 0.8em
    }
}

ld-prizes-list .__more-text {
    -webkit-margin-after: 3em;
    margin-block-end: 3em;
}

ld-prizes-list .__more-steps {
    display: flex;
}

@media screen and (max-width: 639px) {
    ld-prizes-list .__more-steps {
        display: block
    }
}

ld-prizes-list .__more-step {
    flex-grow: 1;
    text-align: center;
}

@media screen and (max-width: 639px) {
    ld-prizes-list .__more-step {
        -webkit-margin-after: 2em;
        margin-block-end: 2em
    }
}

ld-prizes-list .__more-step-image {
    max-width: 90%;
    min-height: 100px;
    -webkit-margin-after: 1em;
    margin-block-end: 1em;
}

ld-prizes-list .__more-step-title {
    font-family: Druk;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.5em;
}

ld-prizes-list .__more-step-text {
    font-size: 0.8em;
}

ld-prizes-list .__more .btn {
    -webkit-margin-before: var(--margin-50);
    margin-block-start: var(--margin-50);
}

@media screen and (max-width: 639px) {
    ld-prizes-list .__more .btn {
        min-width: auto
    }
}

ld-prizes-list .__loading {
    text-align: center;
    width: 100%;
}

.recaptcha input {
    display: none;
}

.grecaptcha-badge {
    /* pointer-events: none; */
    /* visibility: hidden; */
    box-shadow: none !important;
}

.more-images {
    position: relative;
}

.more-images .skew {
    pointer-events: none;
}

.more-images .more-images-btn {
    /*z-index: 99;*/
    transform: skewY(-17deg);
    position: fixed;
    color: white;
    left: -80%;
    bottom: 120px;
    font-family: 'Druk';
    font-size: 1.5em;
    text-align: center;
    padding: 15px 15px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1em;
    box-shadow: -7px -6px 9px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s ease;
    cursor: pointer;
}

.more-images-rich-ks-bold {
    background: var(--color-blue-royal);
}

.more-images-rich-ks-medium {
    background: var(--color-red-product);
}

.more-images-rich-ks-smooth {
    background: var(--color-red-product);
}

.more-images-smooth-ks-bold {
    background: var(--color-red-product);
}

.more-images-smooth-ks-medium {
    background: var(--color-blue-royal);
}

.more-images .more-images-btn .bigger {
    font-size: 1.4em;
}

.more-images .material-icons-outlined {
    left: -200%;
    top: -180px !important;
}

@media screen and (min-width: 1400px) {
    .more-images .more-images-btn {
        left: -100%;
        top: -180px !important;
    }

    .more-images .material-icons-outlined {
        left: -200%;
        top: -180px !important;
    }
}

@media screen and (max-width: 1279px) {
    .more-images .more-images-btn {
        left: -2300%;
        bottom: 190px;
    }

    .more-images .material-icons-outlined {
        left: -2400%;
        top: -270px !important;
    }
}

@media screen and (max-width:1194px) {
    .more-images .more-images-btn {
        left: -1800%;
        bottom: 210px;
        padding-bottom: 5px !important;
    }

    .more-images .material-icons-outlined {
        left: -2000%;
        top: -280px !important;
    }
}

@media screen and (max-width:1180px) {
    .more-images .more-images-btn {
        left: -2000%;
        bottom: 190px;
    }

    .more-images .material-icons-outlined {
        left: -2100%;
        top: -270px !important;
    }
}


@media screen and (max-width:1000px) {
    .more-images .more-images-btn {
        left: -1500%;
        bottom: 240px;
    }

    .more-images .material-icons-outlined {
        left: -1700%;
        top: -300px !important;
    }
}

@media screen and (max-width:914px) {
    .more-images .more-images-btn {
        left: -1600%;
        bottom: 190px;
    }

    .more-images .material-icons-outlined {
        left: -1700%;
        top: -270px !important;
    }
}

@media screen and (max-width:820px) {
    .more-images .more-images-btn {
        left: -1200%;
        bottom: 280px;
    }

    .more-images .material-icons-outlined {
        left: -1400%;
        top: -340px !important;
    }
}

@media screen and (max-width:768px) {
    .more-images .more-images-btn {
        left: -1500%;
        bottom: 270px;
    }

    .more-images .material-icons-outlined {
        left: -1700%;
        top: -330px !important;
    }
}

@media screen and (max-width: 639px) {
    .more-images .more-images-btn {
        display: none;
    }

    .more-images .material-icons-outlined {
        left: -100%;
        top: 130px !important;
    }
}

.more-images .more-images-btn:hover {
    transform: scale(1.1) skewY(-17deg);
}

.more-images .is-open+.more-images-btn {
    opacity: 0;
    pointer-events: none;
}

@-webkit-keyframes modal-in {
    0% {
        opacity: 0;
        transform: translate(0, 100%);
    }

    70% {
        opacity: 1;
        transform: translate(0, -10%);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes modal-in {
    0% {
        opacity: 0;
        transform: translate(0, 100%);
    }

    70% {
        opacity: 1;
        transform: translate(0, -10%);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@-webkit-keyframes modal-out {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    70% {
        opacity: 1;
        transform: translate(0, -10%);
    }

    100% {
        opacity: 0;
        transform: translate(0, 100%);
    }
}

@keyframes modal-out {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    70% {
        opacity: 1;
        transform: translate(0, -10%);
    }

    100% {
        opacity: 0;
        transform: translate(0, 100%);
    }
}

.register-codes .codes-modal {
    position: fixed;
    /* width: 100%;
        height: 100%; */
    left: 60%;
    bottom: 150px;
    opacity: 0;
    pointer-events: none;
    transform: translate(0, 150%);
}

@media screen and (max-width: 639px) {
    .register-codes .codes-modal {
        left: calc(50vw - 150px);
        bottom: calc(50% - 250px);
        /* left: 50%;
            bottom: 50%; */
    }
}

.register-codes .codes-modal.is-open {
    opacity: 1;
    /* transform: translate(0, 0); */
    -webkit-animation: modal-in 0.4s ease-in-out forwards;
    animation: modal-in 0.4s ease-in-out forwards;
}

.register-codes .codes-modal.is-open:before {
    pointer-events: all !important;
}

.register-codes .codes-modal.is-close {
    -webkit-animation: modal-out 0.4s ease-in-out;
    animation: modal-out 0.4s ease-in-out;
}

@media screen and (max-height: 850px) {
    .register-codes .codes-modal {
        bottom: 20%
    }
}

.register-codes .codes-modal:before {
    content: '';
    position: absolute;
    display: block;
    width: 500vw;
    height: 500vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--color-light);
    opacity: 0.7;
    pointer-events: none;
}

.register-codes .codes-modal .content {
    position: relative;
    text-align: center;
    box-shadow: -7px -6px 9px 2px rgba(0, 0, 0, 0.24);
    background-color: var(--color-blue-royal);
    width: 400px;
    color: var(--color-light);
    padding: 80px 60px;
    pointer-events: all;
    /* verigram */
    overflow: hidden;
}

@media screen and (max-width: 639px) {
    .register-codes .codes-modal .content {
        position: relative;
        top: 0;
        left: 0;
        width: 300px;
        padding: 60px 40px
    }
}

.register-codes .codes-modal .h5 {
    line-height: 1.2;
}

.register-codes .codes-modal .p {
    padding: 10px 0;
    font-size: 0.8em;
}

.register-codes .codes-modal .codes-register-form {
    margin-top: 40px;
}

.register-codes .codes-modal .form-input-text {
    background-color: transparent;
}

.register-codes .codes-modal .btn {
    width: auto;
    min-width: 100%;
}

@media screen and (max-width: 639px) {
    .register-codes .codes-modal .btn {
        display: inline-block;
        min-width: 70%;
        padding: 5px 20px;
        vertical-align: middle;
    }
}

.register-codes .codes-modal .btn:after {
    border-color: black;
}

.register-codes .codes-modal .btn._verigram {
    display: none;
}

@media screen and (max-width: 639px) {
    .register-codes .codes-modal .btn._verigram {
        display: inline-block;
        min-width: 15%;
        padding: 5px
    }

    .register-codes .codes-modal .btn._verigram span {
        position: relative;
        top: 3px;
    }
}

.register-codes .codes-modal .is-error span {
    color: #be71ef;
}

.register-codes .codes-modal .is-error .form-input-text {
    color: #be71ef;
    border-color: #be71ef;
}

.register-codes .codes-modal .form-input-text {
    font-size: 30px;
    font-weight: bold;
    height: 20px;
    padding: 20px 0;
    text-transform: uppercase;
}

.register-codes .codes-modal .form-input-text::-moz-placeholder {
    opacity: 0.2;
}

.register-codes .codes-modal .form-input-text:-ms-input-placeholder {
    opacity: 0.2;
}

.register-codes .codes-modal .form-input-text::placeholder {
    opacity: 0.2;
}

.register-codes .codes-modal .form-input-text~span {
    transform: translateY(-10px);
    display: block;
    width: 100%;
    text-align: center;
}

.register-codes .codes-modal .__error {
    color: #be71ef;
}

.register-codes .codes-modal .form-label-error {
    color: #be71ef;
    font-size: 14px;
}

.register-codes .codes-modal .close-btn {
    cursor: pointer;
    padding: 5px;
    border: 1px solid var(--color-light);
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 20px;
}

.register-codes .codes-modal .form-input-icons {
    display: none !important;
}

.register-codes ld-loader {
    transform: scale(0.6);
    margin-bottom: var(--margin-10);
}

.register-codes ld-loader .loader {
    --color: var(--color-lightgrey);
}

.section-register {
    background: var(--color-light);
    font-size: 1rem;
    padding: 100px 0;
}

#navbar+.section-register {
    margin-top: 90px;
}

.section-register .__title {
    text-align: center;
    color: var(--color-red-product);
    font-size: 3em;
    -webkit-margin-after: 20px;
    margin-block-end: 20px;
}

.section-register .steps {
    max-width: 300px;
    margin: 0 auto 50px auto;
}

.step-card {
    font-size: 1rem;
    position: relative;
    max-width: 400px;
    margin: 0 auto;
    padding: 40px 60px;
    border: 1px solid;
    background: var(--color-light);
    border-color: var(--color-grey);
}

@media screen and (max-width: 639px) {
    .step-card {
        padding: 30px;
        border: none
    }

    .step-card .btn {
        width: 100%;
    }
}

.step-card-title {
    position: absolute;
    top: 0;
    left: 50%;
    padding: 0.3em 1em;
    transform: translate(-50%, -50%);
    background: var(--color-light);
    font-family: Druk;
    font-weight: bold;
    color: var(--color-red-product);
    text-transform: uppercase;
    font-size: 1.5em;

    /* &:before,
    &:after {
        content: '';
        position: absolute;
        top: 50%;
        width: 9999px;
        height: 1px;
        background: ld.color(grey);
    }
    &:before {
        right: 100%;
    }
    &:after {
        left: 100%;
    } */
}

.steps {
    font-size: 1rem;
}

.steps .__previous,
.steps .__next {
    font-size: 0.8em;
    display: inline-block;
}

.steps .__next {
    float: right;
}

.steps .__bar {
    width: 100%;
    height: 2px;
    position: relative;
    background: var(--color-grey);
    margin-top: 10px;
}

.steps .__bar:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% / var(--total) * var(--current));
    background: var(--color-red-product);
}

.tabs {
    width: 100%;
    display: flex;
    justify-content: stretch;
}

.tabs .__tab-rich {
    position: relative;
    /* min-width: 20%; */
    text-align: center;
    font-family: Druk Web;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-darkgrey);
    /* border-bottom: 4px solid ld.color(grey); */
    cursor: pointer;
    padding: var(--padding-10);
    font-size: 26px;
    transition: all 0.3s var(--transition-easing);
    flex-grow: 1;
}

.tabs .__tab-rich:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: calc(100% - var(--margin-100));
    height: 3px;
    background: var(--color-grey);
    /*background: var(--color-red-product);*/
    transform: translateX(-50%);
}

.tabs .__tab-rich:hover,
.tabs .__tab-rich.active {
    color: var(--color-red-product);
}

.tabs .__tab-rich:hover:after,
.tabs .__tab-rich.active:after {
    background: var(--color-red-product);
}

.tabs .__tab-smooth {
    position: relative;
    /* min-width: 20%; */
    text-align: center;
    font-family: Druk Web;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-darkgrey);
    /* border-bottom: 4px solid ld.color(grey); */
    cursor: pointer;
    padding: var(--padding-10);
    font-size: 26px;
    transition: all 0.3s var(--transition-easing);
    flex-grow: 1;
}

.tabs .__tab-smooth:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: calc(100% - var(--margin-100));
    height: 3px;
    background: var(--color-grey);
    /*background: var(--color-red-product);*/
    transform: translateX(-50%);
}

.tabs [class*="__tab-smooth"]:hover,
.tabs [class*="__tab-smooth"].active {
    color: #0034A2;
}

.tabs [class*="__tab-smooth"]:hover:after,
.tabs [class*="__tab-smooth"].active:after {
    background: #0034A2;
}

.section-rich {
    color: var(--color-red-product) !important;
}

#rich-section p {
    font-family: Roboto, sans-serif;
}

#smooth {
    padding-bottom: 100px;
}

@media screen and (max-width: 639px) {
    #smooth {
        padding-bottom: 0;
    }
}

#smooth-section p {
    font-family: Roboto, sans-serif;
}

.section-smooth {
    color: var(--color-blue-royal) !important;
}

.__slider-red {
    background: url(../images/red-background.png);
    background-size: cover;
    --slider-page: 0;
    --slider-item: 0;
    --slider-total: 0;
}

.__slider-blue {
    background: url(../images/blue-background.png);
    background-size: cover;
    --slider-page: 0;
    --slider-item: 0;
    --slider-total: 0;
}

.__slider-grey {
    background: url(../images/grey-background.png);
    background-size: cover;
    --slider-page: 0;
    --slider-item: 0;
    --slider-total: 0;
}

.__slider-black {
    background: url(../images/black-background.png);
    background-size: cover;
    --slider-page: 0;
    --slider-item: 0;
    --slider-total: 0;
}

.__slider-light-blue {
    background: url(../images/light-blue-background.png);
    background-size: cover;
    --slider-page: 0;
    --slider-item: 0;
    --slider-total: 0;
}

.red {
    color: var(--color-red-product);
}

.more-images-red {
    background: var(--color-red-product);
}

.blue {
    color: var(--color-blue-royal);
}

.more-images-blue {
    background: var(--color-blue-royal);
}

.more-images-grey {
    background: #979797;
}

.more-images-black {
    background: #000;
}

.more-images-light-blue {
    background: #0072CE;
}

.grey {
    color: #979797;
}

.black {
    color: #000;
}

.light-blue {
    color: #0072CE;
}

.section-feedback-logout .__title {
    /* color: ld.color(redProduct); */
    text-align: center;
}

.codes-register-form {
    position: relative;
}

.c-video {
    margin-top: 200px;
    padding: 0 !important;
    position: relative;
    font-size: 1rem;

    --aspect-ratio: 16 / 6;
    --width: 100vw;
}

@media screen and (min-width: 1901px) {
    .c-video {
        width: 100%;
    }
}

@media screen and (min-width: 1500px) {
    .c-video {
        margin-top: 500px;
    }
}

@media screen and (max-width: 639px) {
    .c-video {
        margin-top: 0;
        margin-bottom: 0;
        --aspect-ratio: 1 / 1.3;
        /* --width: 100vw;  */
    }
}

.c-video .__container {
    transform: skewY(var(--skew));
    width: var(--width);
    aspect-ratio: var(--aspect-ratio);
    margin: 0 auto;
}

.c-video .__unskew {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skewY(var(--unskew));
    aspect-ratio: var(--aspect-ratio);
    width: var(--width);
}

.c-video .__teaser {
    position: absolute;
    top: 50%;
    left: 50%;
    min-height: calc(var(--aspect-ratio) * 103%);
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 639px) {
    .c-video .__teaser {
        min-height: auto
    }
}

.c-video .__play {
    position: absolute;
    top: 50%;
    left: calc(50% + 1em);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: all 0.1s ease-out
}

@media screen and (min-width:1901px) {
    .c-video .__play {
        position: absolute;
        top: 50%;
        left: 960px;
        cursor: pointer;
        transform: translate(-50%, -50%);
        transition: all 0.1s ease-out;
    }

    .c-video .__play:hover {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@media screen and (min-width:3000px) {
    .c-video .__play {
        left: calc(30% + 1em);
    }
}

.c-video .__play:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.c-video .__play-text {
    background: rgba(151, 151, 151, 0.8);
    text-transform: uppercase;
    color: #fff;
    font: var(--font-title);
    letter-spacing: 0.02em;
}

.c-video .__play-text .hash-card {
    text-transform: uppercase;
    text-align: center;
    padding: 0 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em
}

@media screen and (max-width:639px) {
    .c-video .__play-text {
        font-size: 2.5em !important;
    }
}

.c-video .__play-text .auctions-rules .hash-card {
    color: var(--color-light);
    text-transform: uppercase;
    text-align: center;
    padding: 40px 40px 20px 40px;
    letter-spacing: 0.1em;
    font-size: 1.4em;
    position: relative;
    z-index: 1
}

.c-video .__play-text .order .product-info {
    letter-spacing: 0.04em;
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase
        /* margin-bottom: 40px; */
}

.c-video .__play-text .order .border-box {
    letter-spacing: 0.04em;
    color: var(--color-dark);
    text-transform: uppercase;
    font-size: 1.3em;
}

.c-video .__play-text .order .border-box .material-icons {
    float: right;
}

.c-video .__play-text .summary .product-reccap {
    -webkit-margin-after: 12px;
    margin-block-end: 12px
}

.c-video .__play-text {
    font-family: Druk Web, sans-serif;
    font-size: 56px;
    border: 2px solid var(--color-light);
    padding: 0.5em 0.5em;
    max-width: 200px;
    text-align: center;
    line-height: 0.9em;
}

.c-video .__modal {
    width: 100%;
    background-color: var(--color-light);
    /* background-image: url('../../assets/img/logo.svg'); */
    box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
}

.c-video .__modal video {
    display: inline-block;
    width: 100%;
}

.c-video .__modal iframe {
    width: 100%;
    aspect-ratio: 16/9;
}

.c-video .__modal .content {
    text-align: center;
    padding: 20px;
    padding-top: 60px;
}

@media screen and (max-width: 639px) {
    .c-video .__modal .content {
        padding: 20px;
        padding-top: 60px
    }
}

.c-video .__modal .close-btn {
    cursor: pointer;
    padding: 5px;
    color: var(--color-darkgrey);
    border: 1px solid var(--color-darkgrey);
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 15px;
    transform: skewY(var(--skew));
}

.c-video .__modal .close-btn *,
.c-video .__modal .close-btn *:before,
.c-video .__modal .close-btn *:after {
    font-size: 0.8em;
}

.section-wrapper {
    margin: auto;
    /* do not add overflow that will fill possibility of sticky items */
    /* overflow: hidden; */
    padding-top: 300px;
    /*padding-bottom: 150px;*/
}

@media screen and (max-width: 639px) {
    .section-wrapper {
        padding-top: 150px;
        /*padding-bottom: 150px;*/
    }
}

/* background  */
.section-wrapper .__half-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 100px;
    left: 0;
    overflow: hidden;
}

.section-wrapper .__half-background .__bgImage {
    height: 155%;
    top: -26%;
}

.section-wrapper .__bgImage {
    height: 140%;
    top: -20%;
    width: 100%;
    left: 0;
    transform: skewY(var(--unskew));
    position: absolute;
    -o-object-fit: cover;
    object-fit: cover !important;
}

@media screen and (max-width:1440px) {
    .section-header-banner {
        padding-bottom: 140px !important;
    }
}

@media screen and (max-width:1250px) {
    .section-header-banner {
        padding-bottom: 20px !important;
    }
}

@media screen and (max-width:1249px) {
    .section-header-banner {
        object-fit: cover;
    }
}

@media screen and (max-width: 639px) {
    .section-wrapper .__bgImage {
        top: -9%;
        min-height: 130%;
        object-fit: cover;
    }

    .section-header-banner .__content-wrap {
        padding-bottom: 0px !important;
    }
}

.section-wrapper .__overlay {
    background-color: black;
    opacity: 0;
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 100%;
    transform: skewY(0);
}

.section-wrapper .__overlay.light {
    opacity: 0.2;
}

.section-wrapper .__overlay.medium {
    opacity: 0.4;
}

.section-wrapper .__overlay.dark {
    opacity: 0.6;
}

/* DECORATOR  */
.section-wrapper hr {
    border-top-width: 2px;
    transform-origin: 0 0;
    color: var(--color-current-decorator);
}

.section-wrapper hr.__top {
    position: absolute;
    top: 60px;
    left: 240px;
    width: 100%;
}

.section-wrapper hr.__bottom {
    position: absolute;
    bottom: 60px;
    width: 50%;
}

.section-wrapper .__content-wrap {
    padding: 0 20px;
}

@media screen and (min-width: 1441px) {
    .section-wrapper .__content-wrap {
        padding: 0 180px;
    }
}

@media screen and (max-width: 1440px) {
    .section-wrapper .__content-wrap {
        padding: 0 100px;
    }
}

@media screen and (max-width:1194px) {
    .section-wrapper .__content-wrap {
        padding: 0 80px;
    }
}

@media screen and (max-width:1180px) {
    .section-wrapper .__content-wrap {
        padding: 0 140px;
    }
}

@media screen and (max-width:980px) {
    .section-wrapper .__content-wrap .p {
        margin-bottom: 20px !important;
    }
}

@media screen and (max-width:914px) {
    .section-wrapper .__content-wrap {
        padding: 0 100px;
    }
}

@media screen and (max-width:834px) {
    .section-wrapper .__content-wrap .p {
        margin-bottom: 20px !important;
    }
}

@media screen and (max-width:820px) {
    .section-wrapper .__content-wrap {
        padding: 0 100px;
    }
}

@media screen and (max-width: 768px) {
    .section-wrapper .__content-wrap {
        padding: 0 40px;
    }
}

@media screen and (max-width: 639px) {
    .section-wrapper .__content-wrap {
        min-width: 100%;
        justify-content: space-between;
        align-items: space-between;
        padding: 0 20px;
        margin-top: -90px;
    }
}

.section-wrapper .__content-wrap .h1 {
    margin-bottom: 20px;
    color: var(--color-current);
}

@media screen and (max-width:768px) {
    .section-wrapper .__content-wrap .h1 {
        font-size: 70px !important;
        line-height: 70px !important;
    }

    .section-header-banner {
        padding-bottom: 0px !important;
    }
}

@media screen and (max-width:639px) {
    .section-wrapper .__content-wrap .h1 {
        font-size: 2.5em !important;
        line-height: 0.95em !important;
    }

    .section-wrapper .__content-wrap .p {
        font-size: 14px !important;
        margin-bottom: 20px !important;
        max-width: 40ch !important;
    }

    .section-header-banner .__content-wrap .p {
        margin-top: 16px !important;
        margin-bottom: 70px !important;
    }

    .btn {
        font-size: 1.5em;
    }
}

@media screen and (max-width:980px) {
    .section-header-banner .__bgImage {
        top: 40% !important;
        height: 86% !important;
    }
}

@media screen and (max-width:820px) {
    .section-header-banner .__bgImage {
        top: 50% !important;
        height: 71% !important;
    }
}

@media screen and (max-width:744px) {
    .section-header-banner .__bgImage {
        top: 40% !important;
        height: 91% !important;
    }
}

@media screen and (max-width:639px) {
    .section-header-banner .__bgImage {
        top: 52% !important;
        height: 70% !important;
    }
}

/* @media screen and (min-width:768px) and (max-width:1180px) {
    .section-header-banner {
        padding-top: 350px !important;
        z-index: 1;
    }

    .section-header-banner .__bgImage {
        top: 45% !important;
    }

    .section-wrapper .__content-wrap .h1 {
        font-size: 60px;
        line-height: 55px;
    }
} */

.section-wrapper .__content-wrap .p {
    margin-bottom: 60px;
    color: var(--color-current-decorator);
}

.section-wrapper .__content-wrap .h2 {
    margin-bottom: 20px;
    color: var(--color-current-decorator);
}

.section-wrapper.light,
.section-wrapper .light {
    --color-current: var(--color-light);
    --color-current-foreground: var(--color-light-foreground);
    --color-current-decorator: var(--color-light-decorator);
}

.section-wrapper .__stripes {
    position: absolute;
    width: 200%;
}

.section-wrapper .__stripes--top {
    top: 0;
    left: 100%;
    transform-origin: 0 100%;
    transform: rotate(40deg) translate(-50%, 0) scale(1.5);
}

.section-wrapper .__stripes--bottom {
    bottom: 0;
    transform-origin: 0 0;
    transform: rotate(220deg) translate(-50%, -200%) scale(1.5);
}

.section-wrapper .__stripe {
    background: rgba(0, 0, 0, 0.2);
    height: 20px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.section-wrapper .__stripe:nth-child(1) {
    top: 0px;
    height: 18px;
}

.section-wrapper .__stripe:nth-child(2) {
    top: 20px;
    height: 16px;
}

.section-wrapper .__stripe:nth-child(3) {
    top: 40px;
    height: 14px;
}

.section-wrapper .__stripe:nth-child(4) {
    top: 60px;
    height: 12px;
}

.section-wrapper .__stripe:nth-child(5) {
    top: 80px;
    height: 10px;
}

.section-wrapper .__stripe:nth-child(6) {
    top: 100px;
    height: 9px;
}

.section-wrapper .__stripe:nth-child(7) {
    top: 120px;
    height: 8px;
}

.section-wrapper .__stripe:nth-child(8) {
    top: 140px;
    height: 7px;
}

.section-wrapper .__stripe:nth-child(9) {
    top: 160px;
    height: 6px;
}

.section-wrapper .__stripe:nth-child(10) {
    top: 180px;
    height: 5px;
}

.section-wrapper .__stripe:nth-child(11) {
    top: 200px;
    height: 4px;
}

.section-wrapper .__stripe:nth-child(12) {
    top: 220px;
    height: 3px;
}

.section-wrapper .__stripe:nth-child(13) {
    top: 240px;
    height: 2px;
}

.section-wrapper .__stripe:nth-child(14) {
    top: 260px;
    height: 1px;
}

.section-wrapper .__stripe:nth-child(15) {
    top: 280px;
    height: 0px;
}

.section-404 {
    padding-block: 200px;
    text-align: center;
    position: relative;
}

@media screen and (max-width: 639px) {
    .section-404 {
        padding-block: 150px;
    }
}

.section-404 .__image01,
.section-404 .__image02 {
    position: absolute;
    transform: skewY(var(--skew));
    max-width: 33vw;
    max-height: 300px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.section-404 .__image01 img,
.section-404 .__image02 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.section-404 .__image01 {
    top: 180px;
    left: 0;
}

@media screen and (max-width: 1279px) {
    .section-404 .__image01 {
        top: 450px;
        max-width: 20%
    }
}

@media screen and (max-width: 639px) {
    .section-404 .__image01 {
        top: 110px;
        max-width: 23vw
    }
}

.section-404 .__image02 {
    top: 480px;
    right: 0;
}

@media screen and (max-width: 1279px) {
    .section-404 .__image02 {
        top: 250px;
        max-width: 20%
    }
}

@media screen and (max-width: 639px) {
    .section-404 .__image02 {
        top: 580px;
        max-width: 20vw
    }
}

.section-404 .btn {
    margin-inline: var(--margin-30);
    min-width: auto;
}

.section-404 .__title {
    font-family: Druk;
    font-size: 50px;
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;
    transform: skewY(var(--skew));
    color: #9f5cc0;
    padding-inline: var(--padding-30);
}

.section-404 .__body {
    font-family: Druk;
    font-size: 40px;
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;
    transform: skewY(var(--skew));
    margin-bottom: 100px;
    padding-inline: var(--padding-30);
}

.section-404 .__404 {
    font-family: Druk;
    font-size: 300px;
    font-weight: 800;
    text-transform: uppercase;
    transform: skewY(var(--skew));
    color: #93328e;
    text-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
}

@media screen and (max-width: 639px) {
    .section-404 .__404 {
        font-size: 200px
    }
}

@-webkit-keyframes in-up {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes in-up {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 639px) {
    .section-brand {
        padding-top: 100px;
        padding-bottom: 50px;
        margin-top: 50px;
    }
}

/* .section-brand {
    background: var(--color-light);
} */

.section-brand .h5 {
    color: var(--color-red-product);
    font-style: italic;
}

.section-brand .gallery-grid {
    list-style: none;
    padding: 20px 0;
    margin: 0 auto;
    text-align: left;
    width: 100%;
    position: relative;
}

@media screen and (max-width: 639px) {
    .section-brand .gallery-grid {
        text-align: center;
    }
}

.section-brand .gallery-grid li>* img {
    border: none;
    outline: none;
    display: block;
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.section-brand .gallery-item {
    /* position: relative; */
    margin-bottom: 42px;
    border: none;
    outline: none;
    display: block;
    max-width: 100%;
    transition: height 0.4s, visibility 1s linear;
}

.section-brand .gallery-thumb {
    position: relative;
    cursor: pointer;
}

.section-brand .gallery-thumb .ratio {
    height: 0;
    padding-top: 100%;
    overflow: hidden;
    position: relative;
}

.section-brand .gallery-thumb .material-icons {
    color: var(--color-red-product);
    background: var(--color-light);
    border: 1px solid var(--color-red-product);
    transform: skewY(var(--skew)) translateX(-50%);
    position: absolute;
    bottom: -10px;
    left: 50%;
}

.section-brand .gallery-thumb .material-icons.close {
    color: var(--color-light);
    background: var(--color-red-product);
}

.section-brand .gallery-thumb .hover-gif {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 50%;
    transition: all 0.3s ease;
    display: none;
}

.section-brand .gallery-thumb:hover .hover-gif {
    display: block;
}

.section-brand .gallery-expander {
    top: auto;
    left: 0;
    width: 100%;
    margin-top: 30px;
    text-align: left;
    height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: height 0.4s, visibility 1s linear;
}

.section-brand .gallery-expander .ratio {
    height: 0;
    padding-top: 100%;
    overflow: hidden;
    position: relative;
}

.section-brand .expanded.gallery-expander {
    height: 800px;
    visibility: visible;
    opacity: 1;
    transition: height 0.4s, visibility 0.2s linear;
}

@media screen and (max-width: 1440px) {
    .section-brand .expanded.gallery-expander {
        height: 730px;
    }
}

@media screen and (min-width: 1503px) {
    .section-brand .expanded.gallery-expander {
        /*height: 750px;*/
    }
}

@media screen and (max-width:1180px) {
    .section-brand .expanded.gallery-expander {
        height: 550px !important;
    }
}

@media screen and (max-width:768px) {
    .section-brand .expanded.gallery-expander {
        height: 450px !important;
    }
}

@media screen and (max-width: 639px) {
    .section-brand .expanded.gallery-expander {
        height: 630px !important;
    }
}

.section-brand .gallery-expander-inner {
    padding: 10px 10px;
    height: 100%;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    padding-top: 42px;
    padding-bottom: 20px;
}

@media screen and (max-width: 1440px) {
    .section-brand .expanded.gallery-expander {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

@media screen and (min-width: 1700px) {
    .section-brand .gallery-expander-inner {
        /*height: 650px;*/
    }
}

@media screen and (max-width: 639px) {
    .section-brand .gallery-expander-inner {
        height: 630px;
        max-width: 315px;
        margin: auto
    }
}

.section-brand .gallery-fullimg,
.section-brand .gallery-details {
    width: 50%;
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
}

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

    .section-brand .gallery-fullimg,
    .section-brand .gallery-details {
        height: auto;
        width: 100%;
        display: block;
        clear: both
    }
}

.section-brand .gallery-details {
    position: relative;
}

.section-brand .gallery-details img {
    position: absolute;
    /* max-width: 100%; */
    z-index: 0;
}

.overlay-red {
    background: #d6040e;
}

.overlay-blue {
    background: #005990;
}

.__section-product-variants .color-overlay {
    transition: all 1s ease;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    mix-blend-mode: multiply;
}

.__section-product-variants .color-overlay {
    width: 91%;
    height: 90%;
}

@media screen and (max-width: 639px) {
    .__section-product-variants .color-overlay {
        width: 100%;
        height: 100%;
        top: 130px;
    }
}

@media screen and (max-width: 1440px) {
    .section-portfolio .__header .__bkg img {
        height: 170% !important;
    }

    .__section-product-variants .color-overlay {
        width: 100%;
    }
}

@media screen and (max-width:1180px) {
    .section-portfolio .__header .__bkg {
        width: 130% !important;
    }

    .section-portfolio .__header .__bkg img {
        height: 140% !important;
    }
}

@media screen and (max-width:768px) {
    .section-portfolio .__header .__bkg {
        width: 90% !important;
    }

    .section-portfolio .__header .__bkg img {
        height: 150% !important;
    }
}

.section-brand .gallery-details .color-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.7;
}

.section-brand .gallery-details .color-overlay.clip {
    -webkit-clip-path: polygon(0 65%, 100% 35%, 100% 100%, 0% 100%);
    clip-path: polygon(0 65%, 100% 35%, 100% 100%, 0% 100%);
    opacity: 0.9;
}

.section-brand .gallery-details .gallery-content {
    color: var(--color-light);
    display: flex;
    align-items: center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 40px;
}

.section-brand .gallery-details .gallery-content .suptitle {
    font-family: druk;
    font-size: 1.4em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: bold;
}

.section-brand .gallery-details .gallery-content .p {
    color: var(--color-light);
    line-height: 1em;
}

@media screen and (max-width: 639px) {
    .section-brand .gallery-details .content .p {
        margin-bottom: 0;
        line-height: 1em;
        font-size: 0.8em
    }
}

@media screen and (max-width: 639px) {
    .section-brand .gallery-details .gallery-content {
        padding: 40px;
    }
}

.section-brand .gallery-details .gallery-content.layout-product>* {
    position: relative;
}

.section-brand .gallery-details .gallery-content.layout-product .left-part {
    width: 35%;
}

.section-brand .gallery-details .gallery-content.layout-product .right-part {
    width: 65%;
}

.section-brand .gallery-details .show-product {
    max-width: 100px;
    top: -100px;
    left: 50px;
    right: 0;
    bottom: 0;
    width: 140px;
    height: auto;
}

@media screen and (max-width: 639px) {
    .section-brand .gallery-details .show-product {
        max-width: 80px;
        top: -70px;
        left: 30px
    }
}

@media screen and (max-width: 639px) {
    .section-brand .gallery-details.pack .gallery-content {
        padding: 40px 20px 112px 120px
    }
}

:root {
    --card-transition-time: 0.5s;
}

.section-flip-card {
    background: url(../images/gif-background.png) 50% 50% no-repeat;
    /*background-color: var(--color-red-rubis);
    background: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 45%,
        rgba(228, 6, 70, 1) 45%
    );*/
    padding-top: 150px;
    overflow: hidden;
    padding-bottom: 120px;
}

@media only screen and (min-width:1700px) {
    .section-flip-card {
        background-size: 2500px 2200px;
    }
}

@media only screen and (min-width:1400px) and (max-width:1699px) {
    .section-flip-card {
        background-size: 2100px 2200px;
    }
}

@media only screen and (min-width:640px) and (max-width:1399px) {
    .section-flip-card {
        background-size: 1800px 2200px;
    }
}

@media screen and (max-width:1180px) {
    .section-flip-card {
        padding-bottom: 100px;
        background-size: 1430px 2200px;
    }
}

@media screen and (max-width:820px) {
    .section-flip-card {
        background-size: 1030px 2200px;
    }
}

@media screen and (max-width:768px) {
    .section-flip-card {
        padding-bottom: 100px;
        background-size: 1130px 2200px;
    }
}

@media screen and (max-width:712px) {
    .section-flip-card {
        background-size: 800px 2200px;
    }
}

@media screen and (max-width: 420px) {
    .section-flip-card {
        background: url(../images/mobile-gif-background.png) 50% 100% no-repeat;
        padding-top: 0px;
        padding-bottom: 260px;
        background-size: 410px 1000px;
    }

    .section-flip-card .__content-wrap {
        position: relative;
        top: 200px;
        padding-bottom: 200px;
        /* Adjust the value as needed */
    }
}

.section-flip-card .__content-wrap {
    padding-top: 40px;
}

.section-flip-card .__stripes--top {
    top: -50px;
    left: 100%;
}

@media screen and (max-width: 639px) {
    .section-flip-card .__stripes--top {
        top: -150px
    }
}

.section-flip-card .btn-randomize {
    display: inline-block;
    vertical-align: middle;
}

.section-flip-card .card {
    perspective: 600px;
    position: relative;
}

.section-flip-card .card.is-switched .card__wrapper {
    -webkit-animation: rotate var(--card-transition-time) var(--transition-easing) both;
    animation: rotate var(--card-transition-time) var(--transition-easing) both;
}

.section-flip-card .card .btn-randomize {
    min-width: 80px;
    min-height: 80px;
    border-color: transparent;
    color: var(--color-red-product);
    background: var(--color-light);
    /* padding: 1rem; */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    transform: skewY(var(--skew));
    transition: all 0.3s ease;
}

.section-flip-card .card .btn-randomize:hover {
    transform: skewY(var(--skew)) scale(1.05);
}

@media screen and (max-width: 639px) {
    .section-flip-card .card .btn-randomize {
        min-width: 40px;
        min-height: 40px;
        padding: 0.2rem;
    }
}

.section-flip-card .card .btn-randomize span {
    font-size: 6em;
}

@media screen and (max-width: 639px) {
    .section-flip-card .card .btn-randomize span {
        font-size: 2em
    }
}

.section-flip-card .card .btn-randomize.__prev {
    box-shadow: 0px 1px 10px 0px #000;
    position: absolute;
    left: -30%;
    top: 45%;
}

@media screen and (max-width:744px) {
    .section-flip-card .card .btn-randomize.__prev {
        left: -20%;
    }
}

@media screen and (max-width: 639px) {
    .section-flip-card .card .btn-randomize.__prev {
        left: 30%;
        top: 105%
    }
}

.section-flip-card .card .btn-randomize.__next {
    box-shadow: 0px 1px 10px 0px #000;
    position: absolute;
    right: -30%;
    top: 45%;
}

@media screen and (max-width:744px) {
    .section-flip-card .card .btn-randomize.__next {
        right: -20%;
    }
}


@media screen and (max-width: 639px) {
    .section-flip-card .card .btn-randomize.__next {
        right: 35%;
        top: 105%
    }
}

.section-flip-card .card__wrapper {
    height: 500px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
    -webkit-animation: rotate-inverse var(--card-transition-time) var(--transition-easing) both;
    animation: rotate-inverse var(--card-transition-time) var(--transition-easing) both;
    cursor: pointer;
    box-shadow: 0px 1px 20px 0px #000;
}

.section-flip-card .card__wrapper:hover {
    transform: scale(1.05);
}

@media screen and (max-width: 639px) {
    .section-flip-card .card__wrapper {
        height: 335px;
        max-width: 335px;
        margin: auto;
    }
}

.section-flip-card .card__side {
    /*height: 500px;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    -webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    visibility: visible;
    backface-visibility: hidden;
}

@media screen and (max-width: 639px) {
    .section-flip-card .card__side {
        /*height: 335px;*/
    }
}

.section-flip-card .card__side.is-active {
    position: static;
}

.section-flip-card .card__side--back {
    transform: rotateY(180deg);
}

.section-flip-card .__slice-top,
.section-flip-card .__slice-bottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.section-flip-card .__slice-top img,
.section-flip-card .__slice-bottom img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section-flip-card .is-slicing:not(.is-odd) .__current.__slice-top,
.section-flip-card .is-slicing:not(.is-odd) .__current.__slice-bottom {
    transition: transform 0.5s var(--transition-easing);
}

.section-flip-card .is-slicing:not(.is-odd) .__current.__slice-top {
    transform: translate(100%, -30%);
}

.section-flip-card .is-slicing:not(.is-odd) .__current.__slice-bottom {
    transform: translate(-100%, 30%);
}

.section-flip-card .is-slicing.is-odd .__next.__slice-top,
.section-flip-card .is-slicing.is-odd .__next.__slice-bottom {
    transition: transform 0.5s var(--transition-easing);
}

.section-flip-card .is-slicing.is-odd .__next.__slice-top {
    transform: translate(100%, -30%);
}

.section-flip-card .is-slicing.is-odd .__next.__slice-bottom {
    transform: translate(-100%, 30%);
}

.section-flip-card .is-odd .__next.__slice-top,
.section-flip-card .is-odd .__next.__slice-bottom {
    z-index: 2;
}

.section-flip-card .__slice-top {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 40%, 0 70%);
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 70%);
}

.section-flip-card .__slice-bottom {
    -webkit-clip-path: polygon(0 70%, 100% 38%, 100% 100%, 0 100%);
    clip-path: polygon(0 70%, 100% 38%, 100% 100%, 0 100%);
}

.section-flip-card .card-details {
    position: relative;
    height: 0;
    padding-bottom: 100%;
    /*background: var(--color-light);*/
}

.section-flip-card .card-details .overlay-color {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0.6;
}

.section-flip-card .card-details .overlay-color.clip {
    -webkit-clip-path: polygon(0 65%, 100% 35%, 100% 100%, 0% 100%);
    clip-path: polygon(0 65%, 100% 35%, 100% 100%, 0% 100%);
    opacity: 0.9;
}

.section-flip-card .card-details .flip-card-content {
    /* position: relative;
            z-index: 1; */
    padding: 40px;
    color: var(--color-light);

    /* here test */
    display: flex;
    align-items: center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.section-flip-card .card-details .flip-card-content .text {
    color: var(--color-light);
    font-size: 1em;
}

@media screen and (max-width: 639px) {
    .section-flip-card .card-details .flip-card-content .text {
        font-size: 0.9em;
        line-height: 1
    }
}

.section-flip-card .card-details .flip-card-content.layout-product>* {
    position: relative;
}

.section-flip-card .card-details .flip-card-content.layout-product .left-part {
    width: 35%;
}

.section-flip-card .card-details .flip-card-content.layout-product .right-part {
    width: 65%;
}

.section-flip-card .card-details .product-img {
    /* max-width: 140px; */
    max-width: 100px;
    top: -70px;
    left: 30px;
    height: auto;
}

@media screen and (max-width: 639px) {
    .section-flip-card .card-details .product-img {
        may-width: 70px;
    }
}

.section-flip-card .card-details .product-img left-part {
    width: 35%;
}

.section-flip-card .card-details .product-img .right-part {
    width: 65%;
}

/* card  */
.section-flip-card .card {
    margin: 0 auto 2rem auto;
    max-width: 500px;
}

.section-flip-card .card__side {
    overflow: hidden;
}

.section-flip-card .card__side.face-a {
    position: relative;
    border: 20px solid var(--color-light);
    transition: border 0.3s var(--transition-easing);
}

.section-flip-card .card__side.face-a.no-border {
    border: 0;
    cursor: initial;
}

.section-flip-card .card__side.face-a .btn {
    font-family: Druk, sans-serif;
    color: #000;
    display: inline-block;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    border-color: transparent;
    transition: all 0.1s ease;
    opacity: 1;
    z-index: 10;
    border: 3px solid var(--color-red-product);
    font-size: 22px;
    line-height: 29px;
}

.section-flip-card .card__side.face-a .btn:hover {
    color: #fff;
}

.section-flip-card .card__side.face-a .btn.hide {
    opacity: 0;
    transition: all 0.1s ease-in;
}

@media screen and (max-width: 639px) {
    .section-flip-card .card__side.face-a .btn {
        min-width: 70%;
    }
}

.section-flip-card .card__side.face-b {
    background: var(--color-light);
    /*border: 20px solid var(--color-light);*/
}

.section-flip-card .card__side.face-b .h3 {
    font-size: 2.5em;
}

@media screen and (max-width: 639px) {
    .section-flip-card .card__side.face-b .h3 {
        font-size: 2em
    }
}

.section-flip-card .card__side--back {
    background-color: var(--color-light);
}

.section-flip-card .item {
    visibility: hidden;
}

.section-flip-card .suptitle {
    font-family: druk;
    font-size: 1.4em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: bold;
}

.section-flip-card .invisible {
    opacity: 0;
}

@-webkit-keyframes rotate {
    0% {
        transform: rotateY(0);
    }

    70% {
        transform: rotateY(200deg);
    }

    100% {
        transform: rotateY(180deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotateY(0);
    }

    70% {
        transform: rotateY(200deg);
    }

    100% {
        transform: rotateY(180deg);
    }
}

@-webkit-keyframes rotate-inverse {
    0% {
        transform: rotateY(180deg);
    }

    70% {
        transform: rotateY(-20deg);
    }

    100% {
        transform: rotateY(0);
    }
}

@keyframes rotate-inverse {
    0% {
        transform: rotateY(180deg);
    }

    70% {
        transform: rotateY(-20deg);
    }

    100% {
        transform: rotateY(0);
    }
}

.section-header-banner {
    position: relative;
    overflow: hidden;
    color: white;
    margin-top: -300px;
    padding-top: 400px;
    padding-bottom: 240px;
}

@media screen and (max-width: 1500px) {
    .section-header-banner {
        padding-top: 400px;
    }
}

@media screen and (max-width: 639px) {
    .section-header-banner {
        padding-bottom: 110px;
    }
}

.section-header-banner .__overlay {
    background-color: black;
    opacity: 0.6;
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 0;
    transform: skewY(0);
    -webkit-animation: upup 1.5s var(--transition-easing) 1s forwards;
    animation: upup 1.5s var(--transition-easing) 1s forwards;
}

.section-header-banner .__overlay.light {
    opacity: 0.2;
}

.section-header-banner .__overlay.medium {
    opacity: 0.4;
}

.section-header-banner .__overlay.dark {
    opacity: 0.6;
}

.section-header-banner .__bgImage {
    position: absolute;
    top: 30%;
    left: 0;
    height: 100%;
}

/* @media screen and (max-width: 768px) {
    .section-header-banner .__bgImage {
        object-fit: contain !important;
        object-position: center;
    }
} */

@media screen and (max-width: 639px) {
    .section-header-banner .__bgImage {
        height: 450px;
        top: 50%;
        min-height: unset;
    }

    .section-wrapper .__content-wrap .p {
        font-size: 16px;
    }
}

.section-header-banner .__bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    /* min-height: calc(var(--aspect-ratio) * 103%); */
    transform: translate(-50%, -50%) skewY(var(--unskew));
}

@media screen and (max-width: 639px) {
    .section-header-banner .__bg-video {
        min-height: auto
    }
}

/* -- used for demo waiting for video correct format ---*/
@media screen and (min-width: 640px) and (max-width: 1279px) {
    .section-header-banner .__bg-video {
        /* used for demo */
        height: 100%;
        top: 75%
    }
}

@media screen and (min-width: 1280px) {
    .section-header-banner .__bg-video {
        /* used for demo */
        height: 100%;
        top: 75%
    }
}

@media screen and (max-width: 639px) {
    .section-header-banner .__bg-video {
        /* used for demo */
        height: 100%;
        top: 75%
    }
}

.section-header-banner .h1 {
    color: var(--color-light);
}

@media screen and (max-width:1180px) {
    .section-header-banner .h1 {
        font-size: 95px;
    }
}

@media screen and (max-width:820px) {
    .section-wrapper .__content-wrap .h1 {
        font-size: 65px;
        line-height: 70px;
    }
}

.section-header-banner .p {
    max-width: 429px;
    font-family: Roboto, sans-serif;
}

.section-header-banner hr {
    border-top-width: 2px;
}

.section-header-banner hr.__top {
    top: 270px;
    left: 240px;
    width: 100%;
}

.section-header-banner hr.__bottom {
    bottom: 60px;
    width: 36%;
}

@media screen and (max-width:820px) {
    .section-header-banner hr.__bottom {
        width: 20%;
    }
}

@media screen and (max-width:744px) {
    .section-header-banner hr.__bottom {
        width: 16%;
    }
}

@media screen and (max-width:639px) {
    .section-header-banner hr.__bottom {
        bottom: 30px;
        width: 36%;
    }
}

/* &:before {
            content: '';
            display: block;
            position: absolute;
            top: -100px;
            left: 0;
            width: 100%;
            height: calc(100% + 200px);
            background: rgba(0, 0, 0, 0);

            @ld.media mobile {
                top: 0;
                height: 100%;
            }
        } */

@-webkit-keyframes arrows {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(50%);
    }

    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

@keyframes arrows {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(50%);
    }

    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

@-webkit-keyframes arrows2 {
    0% {
        opacity: 0.5;
        transform: translateY(0);
    }

    50% {
        opacity: 0;
        transform: translateY(50%);
    }

    51% {
        opacity: 0;
        transform: translateY(-50%);
    }

    52% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
        transform: translateY(0);
    }
}

@keyframes arrows2 {
    0% {
        opacity: 0.5;
        transform: translateY(0);
    }

    50% {
        opacity: 0;
        transform: translateY(50%);
    }

    51% {
        opacity: 0;
        transform: translateY(-50%);
    }

    52% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
        transform: translateY(0);
    }
}

.location-selector-section {
    background-color: var(--color-red-product);
    padding-bottom: 300px;
    overflow: hidden;
}

@media screen and (max-width: 639px) {
    .location-selector-section {
        padding-bottom: 120px;
    }

    .location-selector-section .__content-wrap {
        margin-top: 0px;
    }
}

.location-selector-section .location-selector {
    border: solid 10px rgba(0, 0, 0, 0.3);
}

.login.form-section {
    padding-top: 150px;
}

.login .__content-wrap {
    max-width: 500px;
}

.login .login-form {
    max-width: 300px;
    margin: auto;
}

.login .login-form form {
    text-align: left;
}

.login .__phone {
    display: flex;
}

.login .__prefix {
    width: 80px;
    -webkit-margin-end: 10px;
    margin-inline-end: 10px;
}

.login .__number {
    flex-grow: 1;
}

.login .btn {
    display: block;
    min-width: 100%;
    margin: 0;
}

.login .no-account {
    margin-top: 60px;
}

.login .form-label-error {
    max-width: 210px;
}

.login ld-loader {
    margin-left: 50%;
    transform: translateX(-50%) scale(0.6);
}

.my-account .border-box {
    padding: 40px 120px;
}

@media screen and (max-width: 639px) {
    .my-account .border-box {
        padding: 40px 20px
    }
}

.my-account .__phone {
    display: flex;
}

.my-account .__prefix {
    width: 80px;
    -webkit-margin-end: 10px;
    margin-inline-end: 10px;
}

.my-account .__number {
    flex-grow: 1;
}

.my-account .__title {
    color: var(--color-dark);
    margin-bottom: 20px;
}

@media screen and (max-width: 639px) {
    .my-account .__title {
        font-size: 22px
    }
}

.my-account .__small {
    font-size: 0.7em;
}

.my-account img {
    max-width: 100%;
}

.my-account [authorize-continue].hidden {
    display: none;
}

.my-account .form-input-picture-card {
    margin-bottom: 20px;
}

.my-account .__password-checks-description,
.my-account .__password-checks-list {}

.my-account .__password-checks-item,
.my-account .__password-checks-item * {
    font-size: 0.9em;
}

.my-account .__password-checks-item span {
    -webkit-margin-end: 5px;
    margin-inline-end: 5px;
}

.my-account .__password-checks-item.is-valid {
    color: var(--color-success);
}

.my-account .__password-checks-item.is-error {
    color: var(--color-error);
}

.my-account .__edit-link,
.my-account .__resend-link {
    text-decoration: underline;
    font-weight: bold;
    display: inline-block;
}

.my-account .feedback {
    margin-top: 80px;
}

.my-account .feedback .h1 {
    font-size: 1.6em;
    --color-current: var(--color-current);
    --color-current-foreground: var(--color-current-foreground);
    --color-current-decorator: var(--color-current-decorator);
    text-align: center;
}

.my-account .feedback p {
    margin-bottom: 20px;
}

.my-account .__title {
    position: relative;
}

.my-account .anchor {
    position: absolute;
    bottom: 500%;
    height: 10px;
    left: 0;
    right: 0;
    z-index: -1;
}

.my-address .border-box {
    padding: 40px 120px;
}

@media screen and (max-width: 639px) {
    .my-address .border-box {
        padding: 40px 20px
    }
}

.my-address .__title {
    color: var(--color-dark);
    margin-bottom: 20px;
}

@media screen and (max-width: 639px) {
    .my-address .__title {
        font-size: 22px
    }
}

.my-codes .codes-heading {
    /*background-image: url("../assets/img/background-texture.png");*/
    margin-right: -0.5rem;
    margin-left: -0.5rem;
    overflow: hidden;
    text-align: center;
}

@media screen and (max-width: 639px) {
    .my-codes .codes-heading {
        margin: 0;
        padding: var(--padding-20)
    }
}

.my-codes .current-balance {
    margin-top: 30px;
    margin-bottom: 100px;
    background: var(--color-red-product);
    color: var(--color-light);
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transform: skewY(var(--skew));
}

@media screen and (max-width: 639px) {
    .my-codes .current-balance {
        margin-left: calc(var(--padding-20) * -1);
        margin-right: calc(var(--padding-20) * -1);
        margin-bottom: var(--margin-40);
    }
}

.my-codes .current-balance .label {
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    font-weight: normal;
    font-size: 22px;
    margin-bottom: 10px;
}

.my-codes .current-balance .value {
    font: 28px Druk, sans-serif;
    font-weight: 900;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    font-size: 2.6em;
}

.my-codes .totals {
    padding: var(--padding-10) var(--padding-100) var(--padding-40);
}

@media screen and (max-width: 639px) {
    .my-codes .totals {
        padding: var(--padding-30);
    }
}

@media screen and (max-width: 639px) {
    .my-codes .totals>* {
        margin-bottom: var(--margin-40)
    }
}

.my-codes .totals .value {
    color: var(--color-red-product);
    font: 28px Druk, sans-serif;
    font-weight: 900;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    font-size: 40px;
}

.my-codes .totals .label {
    color: var(--color-dark);
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    font-weight: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 1em;
    margin-top: 3px;
}

.my-codes .codes-list {
    padding: 20px 100px;
}

@media screen and (max-width: 639px) {
    .my-codes .codes-list {
        padding: 20px 0
    }
}

.my-codes .__title {
    color: var(--color-dark);
    margin-top: var(--margin-40);
    margin-bottom: var(--margin-40);
}

@media screen and (max-width: 639px) {
    .my-codes .__title {
        font-size: 22px
    }
}

.my-codes .amount {
    text-align: center;
    align-self: center;
    color: var(--color-red-product);
    font: 28px Druk, sans-serif;
    font-weight: 900;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    font-size: 40px !important;
}

.my-codes .amount.positive {
    color: var(--color-success);
}

.my-codes .code-card {
    border: 1px solid var(--color-grey);
    padding: 20px 0;
    margin-right: 120px;
    margin-bottom: 20px;
    position: relative;
    letter-spacing: 0.06em;
}

@media screen and (max-width: 639px) {
    .my-codes .code-card {
        margin-right: 0;
        margin-bottom: 120px;
    }
}

.my-codes .code-card .type {
    color: var(--color-dark);
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    font-size: 1.6em;
}

.my-codes .code-card .source,
.my-codes .code-card .date,
.my-codes .code-card .code {
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: normal;
    opacity: 0.7;
    letter-spacing: 0.1em;
}

.my-codes .code-card .source.value,
.my-codes .code-card .date.value,
.my-codes .code-card .code.value {
    opacity: 1;
    text-transform: uppercase;
    margin-bottom: 30px;
    font-size: 1.6em;
    line-height: 1.1;
}

.my-codes .code-card .source.value:last-child,
.my-codes .code-card .date.value:last-child,
.my-codes .code-card .code.value:last-child {
    margin-bottom: 0;
}

.my-codes .code-card .codes {
    position: absolute;
    right: 0;
    bottom: 20px;
    padding: 0 40px;
}

.my-codes .code-card .balance {
    position: absolute;
    background: var(--color-red-product);
    color: var(--color-light);
    right: -130px;
    top: calc(50% - 20px);
    padding: 30px 40px;
    text-transform: uppercase;
    text-align: center;
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;

    transform: skewY(var(--skew)) translateY(-50%);
}

@media screen and (max-width: 639px) {
    .my-codes .code-card .balance {
        transform: none;
        width: 100%;
        top: 100%;
        right: 0;
        padding: var(--padding-30);
    }
}

@media screen and (max-width: 639px) {
    .my-codes .code-card .balance .unskew {
        transform: none
    }
}

.my-codes .code-card .balance .label {
    margin-bottom: 5px;
    font-size: 0.8em;
    font-weight: normal;
    letter-spacing: 0.1em;
}

.my-codes .code-card .balance .value {
    font-size: 1.6em;
    margin-top: 10px;
}

.my-codes .wrapp-img {
    height: 0;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
}

.my-codes .wrapp-img img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
}



.order-step-1 {
    padding-bottom: 200px !important;
}

.order {
    background: var(--color-light);
    margin-top: -300px;
    min-height: 100vh;
    padding-top: 500px;
    padding-bottom: 150px;

    /* .__delivery-home,
    .__delivery-center {
        display: none;
        &.active {
            display: block;
        }
    } */
}

.order .link-togg {
    display: block;
}

.order .__content {
    transform: skewY(var(--unskew));
    padding: 0 20px;
}

@media screen and (min-width: 640px) and (max-width: 1279px) {
    .order .__content {
        padding: 0 120px
    }
}

@media screen and (min-width: 1280px) {
    .order .__content {
        padding: 0 240px
    }
}

.order .product {
    margin-bottom: 40px;
}

.order .product-visual {
    background: var(--color-lightgrey);
    padding: 50px;
    margin: auto;
    text-align: center;
}

.order .product-visual img {
    max-width: 50%;
}

.order .product-info {
    padding: 50px;
    background: var(--color-red-product);
    color: var(--color-light);
    display: flex;
    flex-direction: column;
    align-content: center;
}

.order .product-info .__metas {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.order .product-info .title {
    letter-spacing: 0.04em;
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    /* margin-bottom: 40px; */
}

.order .product-info .price {
    float: right;
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.order .border-box {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid var(--color-lightgrey);
}

.order .border-box .title {
    letter-spacing: 0.04em;
    color: var(--color-dark);
    text-transform: uppercase;
    font-size: 1.3em;
}

.order .border-box .title .material-icons {
    float: right;
}

.order .border-box .content {
    margin-top: 10px;
    border-top: 1px solid var(--color-darkgrey);
    padding-top: 40px;
}

.order .border-box .__delivery-method .__label {
    font-size: 0.8em;
}

.order .border-box .__delivery-method .__options {
    flex-direction: column;
}

.order .border-box .__delivery-method .__options .__option {
    margin-bottom: 10px;
}

.order .border-box .info {
    font-size: 0.8em;
}

.order .border-box .address {
    padding: 30px;
    background: var(--color-red-product);
    color: var(--color-light);
}

.order .border-box .name {
    font: 28px Druk, sans-serif;
    font-weight: bold;
    line-height: 0.8em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 1.3em;
    letter-spacing: 0.04em;
}

.order .border-box .__phone {
    display: flex;
}

.order .border-box .__prefix {
    width: 80px;
    -webkit-margin-end: 10px;
    margin-inline-end: 10px;
}

.order .border-box .__number {
    flex-grow: 1;
}

.order .border-box.active .material-icons {
    transform: rotate(180deg);
}

.order .hidden {
    display: none;
    visibility: hidden;
}

.summary .details-title {
    font-size: 0.8em;
}

@media screen and (max-width: 639px) {
    .summary .details-title {
        margin-top: 20px
    }
}

.summary .product-reccap {
    background: var(--color-lightgrey);
    display: flex;
    padding: 30px;
    align-items: start;
    min-height: 250px;
}

@media screen and (max-width: 639px) {
    .summary .product-reccap {
        flex-flow: column;
        text-align: center;
    }
}

.summary .product-reccap .title {
    -webkit-margin-after: 12px;
    margin-block-end: 12px;
}

.summary .product-reccap .__metas {
    flex-grow: 1;
    -webkit-padding-end: var(--padding-30);
    padding-inline-end: var(--padding-30);
}

@media screen and (max-width: 639px) {
    .summary .product-reccap .__metas {
        -webkit-padding-end: 0;
        padding-inline-end: 0;
        -webkit-margin-after: var(--margin-10);
        margin-block-end: var(--margin-10)
    }
}

.summary .product-reccap img {
    max-height: 180px;
}

@media screen and (max-width: 639px) {
    .summary .product-reccap img {
        margin: 20px 0 0 0
    }
}

.summary .product-reccap .price {
    color: var(--color-red-product);
    text-transform: uppercase;
    font-weight: bold;
}

.summary .address {
    min-height: 250px;
}

.summary .edit {
    float: right;
    font-size: 1.3em;
}


.section-portfolio-sliders .__bgImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    mix-blend-mode: multiply;
}

.section-portfolio-sliders .__close {
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 99999;
    top: calc(51% - 50vh + var(--margin-60));
    /*left: var(--margin-60);*/
    /*right: 700px;*/
    left: 470px;
    color: var(--color-light);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.section-portfolio-sliders .__close span {
    font-size: 1em;
}

.section-portfolio-sliders .__close .__text {
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.5px;
    text-align: left;
    margin-left: 10px;
    margin-bottom: 15px;
    white-space: nowrap;
}

@media screen and (max-width:1700px) {
    .section-portfolio-sliders .__close {
        top: calc(51% - 50vh + var(--margin-60));
        left: 380px;
        /*right: 650px;*/
    }
}

@media screen and (max-width:1500px) {
    .section-portfolio-sliders .__close {
        top: calc(48% - 50vh + var(--margin-60));
        left: 230px;
        /*right: 500px;*/
    }
}

.section-portfolio-sliders .__pack {
    position: absolute;
    right: 400px;
    top: calc(33% + 100vh * 0.5 - var(--margin-80));
    transform: translate(0, -100%);
    max-width: 650px;
    max-height: 650px;
    filter: drop-shadow(-20px 20px 10px rgba(0, 0, 0, 0.2));
}

@media screen and (max-width: 1700px) {
    .section-portfolio-sliders .__pack {
        right: 330px;
        top: calc(35% + 100vh * 0.5 - var(--margin-80));
    }
}

@media screen and (max-width: 1500px) {
    .section-portfolio-sliders .__pack {
        max-width: 550px;
        right: 200px;
        top: calc(33% + 100vh * 0.5 - var(--margin-80));
    }
}

@media screen and (max-width:1280px) {
    .section-portfolio-sliders .__close {
        top: calc(50% - 50vh + var(--margin-60));
        width: 30px;
        height: 30px;
    }
}

@media screen and (max-width: 1279px) {
    .section-portfolio-sliders .__pack {
        /*max-height: 400px;*/
        /*max-width: 400px;*/
    }

    .section-portfolio-sliders .__pack {
        right: 100px;
        top: calc(10% + 100vh * 0.5 - var(--margin-80));
    }

    .section-portfolio-sliders .__close {
        right: 350px;
        top: calc(50% - 50vh + var(--margin-60));
    }
}

@media screen and (max-width:1133px) {
    .section-portfolio-sliders .__close {
        top: calc(48% - 50vh + var(--margin-60));
    }
}

@media screen and (max-width: 800px) {
    .section-portfolio-sliders .__pack {
        right: 0px;
        top: calc(10% + 100vh * 0.5 - var(--margin-80));
    }

    .section-portfolio-sliders .__close {
        right: 220px;
    }
}

@media screen and (max-width:1194px) {
    .section-portfolio-sliders .__close {
        top: calc(47% - 50vh + var(--margin-60));
        left: 50px;
    }
}

@media screen and (max-width:1180px) {
    .section-portfolio-sliders .__close {
        top: calc(50% - 50vh + var(--margin-60));
        left: 80px;
    }
}

@media screen and (max-width:980px) {
    .section-portfolio-sliders .__close {
        top: calc(75% - 50vh + var(--margin-60));

    }
}

@media screen and (max-width:768px) {
    .section-portfolio-sliders .__close {
        top: calc(55% - 50vh + var(--margin-60));
        left: 300px;
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio-sliders .__pack {
        display: block;
        top: 17%;
        height: 30%;
        right: auto;
        left: 30%;
        /*transform: translate(-50%, 0);*/
        top: calc(14% + 100vh * 0.5 - var(--margin-80));
    }

    .section-portfolio-sliders .__close {
        left: 10px;
        top: calc(65% - 50vh + var(--margin-60));
    }
}

.section-portfolio-sliders .__slider:not(.pre-active) {
    display: none;
}

.section-portfolio-sliders .__slider:not(.active) {
    pointer-events: none;
}

.section-portfolio-sliders .__slider {
    z-index: 999999999;
    position: fixed;
    width: 100%;
    /* height: 100%; */
    min-height: 100vh;
    top: 50%;
    left: 0;
    /*background: var(--color);*/
    transform: translate(0, -50%);
    -webkit-clip-path: polygon(100% 33%, 100% 33%, 0 67%, 0 67%);
    clip-path: polygon(100% 33%, 100% 33%, 0 67%, 0 67%);
    transition: all 0.5s var(--transition-easing);
    aspect-ratio: 1;

    /* &:before {
            content: '';
            width: 100vw;
            height: 200vh;
            position: absolute;
            top: 50%;
            left: 50%;
            background: blue;
            transform: translate(-50%, -100%);
        } */
}


.section-portfolio-sliders .__slider.active {
    -webkit-clip-path: polygon(100% -20%, 100% 100%, 0 120%, 0 0%);
    clip-path: polygon(100% -20%, 100% 100%, 0 120%, 0 0%);
}

.section-portfolio-sliders .__slider .__previous,
.section-portfolio-sliders .__slider .__next {
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    font-size: 40px;
    width: 1em;
    height: 1em;
    z-index: 20;
    color: white;
    z-index: 10;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.section-portfolio-sliders .__slider .__previous span,
.section-portfolio-sliders .__slider .__next span {
    font-size: 1em;
}

.section-portfolio-sliders .__slider .__previous {
    transform: translate(-520px, -50%);
}

@media screen and (max-width: 1279px) {
    .section-portfolio-sliders .__slider .__previous {
        /* top: calc(60% + 90vw / 16 * 9 / 2); */
        transform: translate(-50vw, -100%);
        /*top: calc(85% - 50vh + var(--margin-60));*/
    }
}

.section-portfolio-sliders .__slider .__next {
    transform: translate(480px, -50%);
}

@media screen and (max-width: 1279px) {
    .section-portfolio-sliders .__slider .__next {
        /* top: calc(60% + 90vw / 16 * 9 / 2); */
        transform: translate(calc(50vw - 100%), -100%);
        /*top: calc(85% - 50vh + var(--margin-60));*/
    }
}

@media screen and (max-width:1180px) {
    .section-portfolio-sliders .__slider .iphone-safari .__previous {
        transform: translate(-50vw, -100%) translateX(10%) !important;
    }

    .section-portfolio-sliders .__slider .__next {
        transform: translate(calc(50vw - 140%), -100%) !important;
    }
}

@media screen and (max-width:980px) {
    .section-portfolio-sliders .__slider .__previous {
        transform: translate(-50vw, -100%) translateX(50%) !important;
    }
}

@media screen and (max-width:914px) {
    .section-portfolio-sliders .__close {
        top: calc(52% - 50vh + var(--margin-60));
        left: 30px;
        width: 30px;
        height: 30px;
    }

    .section-portfolio-sliders .__close .__text {
        display: none;
    }

    .section-portfolio-sliders .__slider .__previous {
        transform: translate(-50vw, -100%) translateX(50%) !important;
    }

    .section-portfolio-sliders .__slider .__next {
        transform: translate(calc(50vw - 180%), -100%) !important;
    }
}

@media screen and (max-width:834px) {
    .section-portfolio-sliders .__close {
        top: calc(75% - 50vh + var(--margin-60));
        left: 80px;
    }

    .section-portfolio-sliders .iphone-safari .__close {
        left: 80px;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__previous {
        transform: translate(-50vw, 0%) translateX(-200%) !important;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__next {
        transform: translate(calc(50vw - 400%), 0%) !important;
    }

    .section-portfolio-sliders .__slider .__previous {
        transform: translate(-50vw, -100%) translateX(-200%) !important;
    }
}

@media screen and (max-width:820px) {
    .section-portfolio-sliders .__close {
        top: calc(75% - 50vh + var(--margin-60));
        left: 80px;
    }

    .section-portfolio-sliders .__close .__text {
        display: block;
    }

    .section-portfolio-sliders .iphone-safari .__close {
        left: 80px;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__previous {
        transform: translate(-50vw, 0%) translateX(-200%) !important;
    }

    .section-portfolio-sliders .__slider .__previous {
        transform: translate(-50vw, -100%) translateX(-200%) !important;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__next {
        transform: translate(calc(50vw - 400%), 0%) !important;
    }
}

@media screen and (max-width:800px) {
    .section-portfolio-sliders .__slider .__previous {
        transform: translate(-50vw, -100%) translateX(0%) !important;
    }

    .section-portfolio-sliders .__slider .__next {
        transform: translate(calc(50vw - 280%), -100%) !important;
    }
}

@media screen and (max-width:768px) {
    .section-portfolio-sliders .iphone-safari .__slider .__next {
        transform: translate(calc(50vw - 310%), -100%) !important;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__previous {
        transform: translate(-50vw, -100%) translateX(-210%) !important;
    }
}

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

    .section-portfolio-sliders .__close {
        top: calc(45% - 50vh + var(--margin-60));
        left: 20px;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__next {
        transform: translate(calc(50vw - 110%), -100%) !important;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__previous {
        transform: translate(-50vw, -100%) translateX(-20%) !important;
    }
}

@media screen and (max-width:744px) {
    .section-portfolio-sliders .iphone-safari .__slider .__next {
        transform: translate(calc(50vw - 310%), -100%) !important;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__previous {
        transform: translate(-50vw, -100%) translateX(-210%) !important;
    }

    .section-portfolio-sliders .__slider .__next {
        transform: translate(calc(50vw - 300%), -100%) !important;
    }

    .section-portfolio-sliders .__close {
        top: calc(75% - 50vh + var(--margin-60));
        left: 20px;
    }
}

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

    .section-portfolio-sliders .__slider .__previous {
        transform: translate(-50vw, -100%) translateX(-0%) !important;
    }

    .section-portfolio-sliders .__slider .__next {
        transform: translate(calc(50vw - 300%), -100%) !important;
    }

}

@media screen and (max-width: 639px) {
    .section-portfolio-sliders .iphone-safari .__slider .__next {
        top: calc(100% - 50vh + var(--margin-20));
        left: 50%;
        transform: translateX(-50%);
    }

    .section-portfolio-sliders .iphone-safari .__slider .__previous {
        top: calc(100% - 50vh + var(--margin-20));
        left: 44%;
        transform: translateX(-50%);
    }

    .section-portfolio-sliders .__slider .__previous {
        transform: translate(-50vw, -100%) translateX(0%) !important;
    }

    .section-portfolio-sliders .__slider .__next {
        transform: translate(calc(50vw - 100%), -100%) !important;
    }
}

@media screen and (max-width:450px) {
    .section-portfolio-sliders .iphone-safari .__slider .__next {
        transform: translate(calc(50vw - 350%), -100%) !important;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__previous {
        transform: translate(-50vw, -100%) translateX(-200%) !important;
    }
}

@media screen and (max-width:390px) {
    .section-portfolio-sliders .iphone-safari .__slider .__next {
        transform: translate(calc(50vw - 320%), -100%) !important;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__previous {
        transform: translate(-50vw, -100%) translateX(-200%) !important;
    }
}

@media screen and (max-width: 420px) {
    .section-portfolio-sliders .__close {
        top: calc(75% - 50vh + var(--margin-60));
        left: 60px;
    }

    .section-portfolio-sliders .iphone-safari .__close {
        top: calc(75% - 50vh + var(--margin-60));
        left: 60px;
    }
}

.section-portfolio-sliders .__slider .__slides {
    width: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    list-style-type: none;
}

@media screen and (max-width: 1279px) {
    .section-portfolio-sliders .__slider .__slides {
        width: 90%
    }
}

@media screen and (max-width: 915px) {
    .section-portfolio-sliders .__slider .__slides {
        width: 80%;
    }
}

@media screen and (max-width: 834px) {
    .section-portfolio-sliders .__slider .__slides {
        width: 90%;
    }
}

@media screen and (max-width: 820px) {
    .section-portfolio-sliders .__slider .__slides {
        width: 90%;
    }
}

@media screen and (max-width: 750px) {
    .section-portfolio-sliders .__slider .__slides {
        width: 80%;
    }
}

@media screen and (max-width: 744px) {
    .section-portfolio-sliders .__slider .__slides {
        width: 90%;
    }
}

.section-portfolio-sliders .__slider .__slide {
    transform: translateX(calc((100% * var(--slider-item)) * -1));
    display: inline-block;
    padding-inline: var(--margin-30);
    transition: all 0.5s var(--transition-easing);
}

@media screen and (max-width: 915px) {
    .section-portfolio-sliders .__slider .__slide {
        padding-inline: var(--margin-80);
    }
}

@media screen and (max-width: 820px) {
    .section-portfolio-sliders .__slider .__slide {
        padding-inline: var(--margin-30);
    }
}

@media screen and (max-width: 750px) {
    .section-portfolio-sliders .__slider .__slide {
        padding-inline: var(--margin-80);
    }
}

@media screen and (max-width: 744px) {
    .section-portfolio-sliders .__slider .__slide {
        padding-inline: var(--margin-30);
    }
}

.section-portfolio-sliders .__slider .__slide img.__mobile {
    display: none;
}

@media screen and (max-width:1180px) {
    .section-portfolio-sliders .__slider .__slides {
        top: 50%;
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio-sliders .__slider .__slide img.__mobile {
        display: initial
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio-sliders .__slider .__slide img.__desktop {
        display: none
    }
}

.section-portfolio-sliders .__slider .__slide img {
    width: 100%;
}

.section-portfolio-sliders .__slider .__slide img {
    aspect-ratio: 16/9;
    -o-object-fit: cover;
    object-fit: cover;
}

@media screen and (max-width:820px) {
    .section-portfolio-sliders .iphone-safari .__slider .__slide img {
        width: 85vw;
        object-fit: cover;
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio-sliders .__slider .__slides {
        left: 50%;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__slide img {
        width: 75vw !important;
        max-height: 300px;
        width: auto;
        height: auto;
    }
}

.section-portfolio-sliders .__slider .__slide video {
    width: 100%;
    object-fit: cover;
}

.section-portfolio-sliders .__slider .__slide video:fullscreen {
    object-fit: contain;
}

.section-portfolio-sliders .__slider .__slide video.__mobile {
    display: none;
}

@media screen and (max-width:1180px) {
    .section-portfolio-sliders .__slider .__slide video {
        /*width: 75vw !important;*/
        max-height: 550px;
    }

    .section-portfolio-sliders .__slider .__slide img {
        /*width: 75vw !important;*/
        max-height: 550px;
    }

    .section-portfolio-sliders .__close {
        width: 30px;
        height: 30px;
    }
}

@media screen and (max-width:915px) {
    .section-portfolio-sliders .__slider .__slide video {
        width: 100%;
        max-height: 350px;
    }

    .section-portfolio-sliders .__slider .__slide img {
        width: 100%;
        max-height: 350px;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__slide video {
        width: 100%;
        height: auto;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__slide img {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width:834px) {
    .section-portfolio-sliders .__slider .__slide video {
        width: auto;
        max-height: 350px;
    }

    .section-portfolio-sliders .__slider .__slide img {
        width: auto;
        max-height: 350px;
    }

    .section-portfolio-sliders .__slider .__next {
        transform: translate(calc(50vw - 300%), -100%) !important;
    }
}

@media screen and (max-width: 820px) {
    .section-portfolio-sliders .__slider .__next {
        transform: translate(calc(50vw - 400%), -100%) !important;
    }

    .section-portfolio-sliders .__slider .__slide video {
        width: auto;
        max-height: 350px;
    }

    .section-portfolio-sliders .__slider .__slide img {
        width: auto;
        max-height: 350px;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__slide video {
        width: auto;
        max-height: 350px;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__slide img {
        width: auto;
        max-height: 350px;
    }
}

@media screen and (max-width: 810px) {
    .section-portfolio-sliders .__slider .__next {
        transform: translate(calc(50vw - 100%), -100%) !important;
    }
}

@media screen and (max-width: 800px) {
    .section-portfolio-sliders .__slider .__next {
        transform: translate(calc(50vw - 280%), -100%) !important;
    }
}

@media screen and (max-width:450px) {
    .section-portfolio-sliders .__slider .__next {
        transform: translate(calc(50vw - 100%), -100%) !important;
    }
}

@media only screen and (max-width: 769px) {
    .section-portfolio-sliders .iphone-safari .__slider .__slide video {
        width: 100%;
        height: auto;
    }
}

@media only screen and (max-width: 744px) {
    .section-portfolio-sliders .iphone-safari .__slider .__slide video {
        width: auto;
        height: 350px;
    }
}


@media screen and (max-width: 639px) {
    .section-portfolio-sliders .__slider .__slide video.__mobile {
        display: initial;
    }

    .section-portfolio-sliders .__slider .__slide video.__desktop {
        display: none;
    }

    .section-portfolio-sliders .iphone-safari .__slider .__slide video {
        width: 75vw !important;
        max-height: 300px;
        width: auto;
        height: auto;
    }

    .section-portfolio-sliders .__slider .__slide video {
        width: 100%;
        object-fit: cover;
    }
}

.section-portfolio-sliders .__nav {
    text-align: center;
    position: absolute;
    width: 20%;
    top: calc(50% + 100vh * 0.5 - var(--margin-80));
    left: 50%;
    z-index: 100;
    transform: translate(-50%, 0);
}

.section-portfolio-sliders .__nav li {
    display: inline-block;
    width: 50px;
    height: 2px;
    margin: 0 10px;
    background-color: var(--color-light);
    transition: all 0.4s cubic-bezier(1, -0.005, 0.025, 0.99);
    opacity: 0.3;
}

@media screen and (max-width:1180px) {
    .section-portfolio-sliders .__nav {
        top: calc(50% + 100vh * 0.6 - var(--margin-80));
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio-sliders .__nav li {
        height: 4px;
        width: 40px
    }
}

.section-portfolio-sliders .__nav li.active {
    opacity: 0.8;
}

.portfolio-tabs {
    /*background-image: url("../assets/img/background-texture.png");*/
    position: relative;
    left: 50%;
    width: 100%;
    max-width: 960px;
    transform: translate(-50%, 0);
    transition: top 0.1s var(--transition-easing);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0));
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
}

/* Firefox */
@media screen and (min-width: 1280px) {
    .portfolio-tabs {
        z-index: 102;
    }
}

@media screen and (max-width:639px) {
    .portfolio-tabs {
        margin-top: 100px;
    }
}

.portfolio-tabs::-webkit-scrollbar {
    /* Hide scrollbar for Chrome, Safari and Opera */
    display: none;
}

.portfolio-tabs .tabs {
    /*background-image: url("../assets/img/background-texture.png");*/
    position: relative;
}

.portfolio-tabs:before {
    /*background-image: url("../assets/img/background-texture.png");*/
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    width: 0;
    transition: all 0.2s var(--transition-easing);
}

@media screen and (max-width: 639px) {
    .portfolio-tabs:before {
        display: none
    }
}

.portfolio-tabs:after {
    /*background-image: url("../assets/img/background-texture.png");*/
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    width: 0;
    transition: all 0.2s var(--transition-easing);
}

@media screen and (max-width: 639px) {
    .portfolio-tabs:after {
        display: none
    }
}

@media screen and (max-width: 1279px) {
    .portfolio-tabs .tabs {
        left: 50%;
        width: 100vw;
        transform: translate(-50%);
    }

    .portfolio-tabs:before,
    .portfolio-tabs:after {
        display: none;
    }
}

@media screen and (max-width:1194px) {
    .portfolio-tabs .tabs {
        width: unset;
    }
}

@media screen and (max-width: 639px) {
    .portfolio-tabs {
        height: 71px;
        overflow-x: auto;
        display: block;
    }

    .portfolio-tabs .tabs {
        width: inherit;
        /*display: block;*/
        white-space: nowrap;
    }

    .portfolio-tabs .tabs li {
        display: inline-block;
    }
}

.portfolio-tabs.is-sticky {
    position: sticky;
    z-index: 0;
    width: 100%;
    filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.05));
}

@media screen and (max-width: 1279px) {
    .portfolio-tabs.is-sticky {
        width: 100%;
    }
}

.portfolio-tabs.is-sticky .tabs {
    /* top: 20px; */
}

.portfolio-tabs.is-sticky:after,
.portfolio-tabs.is-sticky:before {
    width: 100vw;
}

.section-portfolio {
    padding-top: 180px;
    padding-bottom: 250px;
    overflow: hidden;
}

@media screen and (max-width: 639px) {
    .section-portfolio {
        padding-top: 50px;
        padding-bottom: 0px !important;
    }
}

.section-portfolio .__body {
    margin-bottom: 100px;
    width: 75%;
    transform: skewY(var(--unskew));
}

@media screen and (max-width: 1279px) {
    .section-portfolio .__body {
        width: 100%
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio .__body {
        margin-bottom: -130px
    }
}

.section-portfolio .__category {
    position: relative;
    transform: translate(0, 0) skewY(var(--skew));
    margin-top: 30px;
}

.section-portfolio .__category:not(:first-child) {
    padding-top: 59px;
}

@media screen and (max-width: 1279px) {
    .section-portfolio .__category:not(:first-child) {
        padding-top: 120px;
    }
}

@media screen and (max-width:1180px) {
    #section-rich {
        height: 850px;
    }

    .section-portfolio {
        padding-bottom: 350px;
    }
}

@media screen and (max-width:1024px) {
    #section-rich {
        height: 1050px;
    }

    .section-portfolio {
        padding-bottom: 350px;
    }
}

@media screen and (max-width:914px) {
    #section-rich {
        height: 1050px;
    }

    .section-portfolio {
        padding-bottom: 350px;
    }
}

@media screen and (max-width:820px) {
    #section-rich {
        height: 1150px;
    }
}

@media screen and (max-width:768px) {
    #section-rich {
        height: 1050px;
    }

    .section-portfolio {
        padding-bottom: 350px;
    }
}

@media screen and (max-width:600px) {
    #section-rich {
        height: 1600px;
    }
}

@media screen and (max-width: 700px) {
    .section-portfolio .__category:not(:first-child) {
        margin-top: 330px;
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio .__category:not(:first-child) {
        margin-top: -50px
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio .__category:first-child {
        margin-top: 40px
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio .__category {
        margin-top: 0;
        padding-top: 0;
    }
}

.section-portfolio .__dots {
    font-size: 5px;
    position: absolute;
    top: calc(var(--margin-30) * -1);
    left: 50%;
    width: 100vw;
    height: 1em;
    max-width: 100vw;
    overflow: hidden;
    white-space: nowrap;
    transform: translate(-50%, 0);
}

@media screen and (max-width:639px) {
    .section-portfolio .__dots {
        top: calc(var(--margin-30) * 3);
    }
}

.section-portfolio .__dot {
    border-radius: 0.5em;
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    margin: 0 1em;
}

.__header-rich .__dot {
    background: var(--color-red-product);
}

.__header-smooth .__dot {
    background: var(--color-blue-royal);
}

@-webkit-keyframes section-in-out {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    25% {
        opacity: 0;
        transform: translate(0, 0);
    }

    75% {
        opacity: 0;
        transform: translate(0, 0);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes section-in-out {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    25% {
        opacity: 0;
        transform: translate(0, 0);
    }

    75% {
        opacity: 0;
        transform: translate(0, 0);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.section-portfolio .__section {
    position: relative;
    height: 750px;

    margin-bottom: var(--margin-100);
}

@media screen and (max-width: 639px) {
    .section-portfolio .__section {
        height: auto
    }
}

.section-portfolio .__tabs-content {
    overflow: hidden;
}

.section-portfolio .__header {
    position: relative;
    height: 330px;
    margin-top: var(--margin-30);
    display: flex;
    align-items: center;
    transform: translateX(-70%);
    transition: transform 0.8s ease;
}

.section-portfolio .__header.animate-slide-in {
    transform: translateX(0);
}

.section-portfolio .__header.animate-slide-out {
    transform: translateX(-70%);
}

.section-portfolio .__header.inactive {
    opacity: 0;
    transform: translateX(0);
    transition: all 0.3s var(--transition-easing);
}

.section-portfolio .__header.active {
    opacity: 1;
    transition: all 0.3s var(--transition-easing) 0.3s;
    transform: translateX(0);
}

@media screen and (max-width: 639px) {
    .section-portfolio .__header {
        height: 600px;
        margin-top: 200px;
        margin-left: -20px;
        margin-right: -20px;
        transform: translateX(0);
    }
}

.section-portfolio .__header:before {
    position: absolute;
    top: 0;
    left: 50%;
    height: 320px;
    z-index: 1;
    width: 120%;
    transform: translate(-85%, 0);
    mix-blend-mode: multiply;
    transition: all 0.3s var(--transition-easing);
}

@media screen and (max-width: 639px) {
    .section-portfolio .__header:before {
        width: 100%;
        height: 420px;
        left: 0;
        transform: none
    }
}

@media screen and (min-width: 640px) and (max-width: 1279px) {
    .section-portfolio .__header:before {
        left: -25%;
        transform: none
    }
}

.section-portfolio .__header .__bkg {
    position: absolute;
    top: 0;
    /* left: 50%; */
    left: 0;
    height: 110%;
    /* width: 150%; */
    width: 100%;
    overflow: hidden;
    /* transform: translate(-85%, 0); */
    transform: translate(-30%, 0);
    /*filter: grayscale(1);*/
}

@media screen and (max-width: 639px) {
    .section-portfolio .__header .__bkg {
        width: 120% !important;
        height: 100%;
        left: 0;
        transform: none;
    }
}

@media screen and (min-width: 1600px) {
    .section-portfolio .__header .__bkg {
        height: 110%;
    }
}

@media screen and (min-width: 1700px) {
    .section-portfolio .__header .__bkg {
        height: 120%;
    }
}

@media screen and (max-width:1180px) {
    .section-portfolio .__header .__bkg {
        left: -50%;
        transform: none;
    }
}

@media screen and (max-width: 768px) {
    .section-portfolio .__header .__bkg {
        left: -13%;
        transform: none;
    }
}

.section-portfolio .__header .__bkg img {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 190%;
    -o-object-fit: cover;
    object-fit: cover;
    transform: skewY(var(--unskew)) scale(1) translate(-50%, 0);
}

@media screen and (max-width: 639px) {
    .section-portfolio .__header .__bkg img {
        height: 100%
    }
}

.section-portfolio .__header .__metas {
    transform: skewY(var(--unskew));
    width: 40%;
    /*max-width: 60%;*/
    position: relative;
    z-index: 1;
    padding-left: 80px;
}

.rich-variant-detail {
    padding-left: 80px;
}

.smooth-variant-detail {
    padding-left: 80px;
}

@media screen and (max-width:1000px) {
    .rich-variant-detail {
        padding-left: 0px;
    }

    .smooth-variant-detail {
        padding-left: 0px;
    }

    .section-portfolio .__header .__metas {
        padding-left: 10px !important;
    }
}


@media screen and (max-width:834px) {
    .rich-variant-detail {
        padding-left: 0px;
    }

    .smooth-variant-detail {
        padding-left: 0px;
    }
}

@media screen and (max-width:820px) {
    .rich-variant-detail {
        padding-left: 0px;
    }

    .smooth-variant-detail {
        padding-left: 0px;
    }
}

@media screen and (max-width: 639px) {
    .rich-variant-detail {
        padding-left: 0px;
    }

    .smooth-variant-detail {
        padding-left: 0px;
    }
}

@media screen and (max-width: 1700px) {
    .section-portfolio .__header .__metas {
        width: 50%;
    }
}

@media screen and (max-width: 1500px) {
    .section-portfolio .__header .__metas {
        width: 50%;
    }
}

@media screen and (max-width:1180px) {
    .section-portfolio .__header .__metas {
        width: 80%;
    }
}

@media screen and (max-width:820px) {
    .section-portfolio .__header .__metas {
        padding-left: 0px;
    }
}

@media screen and (max-width:768px) {
    .section-portfolio .__header .__metas {
        width: 80%;
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio .__header .__metas {
        width: 100%;
        padding: var(--padding-30);
        margin-top: 350px;
    }
}

.section-portfolio .__header .__metas * {
    color: white;
}

@media screen and (min-width: 640px) and (max-width: 1279px) {
    .section-portfolio .__header .__metas .h3 {
        font-size: 40px
    }
}

.section-portfolio .__header .__metas .p {
    font-family: Roboto, sans-serif;
    width: 70%;
}

@media screen and (max-width: 639px) {
    .section-portfolio .__header .__metas .p {
        width: auto
    }
}

@media screen and (max-width: 1279px) {
    .section-portfolio .__header .__metas .p {
        width: 50%
    }
}

@media screen and (max-width: 820px) {
    .section-portfolio .__header .__metas .p {
        width: 60%;
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio .__header .__metas .p {
        width: 100%
    }
}

.section-portfolio .__variant {
    position: absolute;
    top: 360px;
    z-index: 10;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

.section-portfolio .__variant.active {
    z-index: 11;
    opacity: 1;
    pointer-events: all;
}

@media screen and (max-width: 639px) {
    .section-portfolio .__variant {
        position: static;
        display: none;
    }

    .section-portfolio .__variant.active {
        display: block;
    }
}

.section-portfolio .__variant .__variant-container {
    opacity: 0;
    transform: translateX(0px);
    transition: all 0.3s var(--transition-easing);
}

.section-portfolio .__variant.active .__variant-container {
    opacity: 1;
    transition: all 0.3s var(--transition-easing) 0.3s;
    transform: translateX(0);
}

.section-portfolio .__variant .__pack {
    position: absolute;
    z-index: 10;
    top: -500px;
    left: 40%;
    height: 600px;
    width: 600px;
    -o-object-fit: contain;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.7s ease;
    transform: translateX(-180%) skewY(var(--unskew)) translate(0, 0) rotate(0deg);
}


.section-portfolio .__pack.inactive {
    opacity: 0;
    transform: translateX(0);
    transition: all 0.3s var(--transition-easing);
}

.section-portfolio .__pack.active {
    opacity: 1;
    transition: all 0.3s var(--transition-easing) 0.3s;
    transform: translateX(0);
}

.section-portfolio .__variant .__pack.animate-slide-in {
    transform: translateX(0) skewY(var(--unskew)) translate(0, 0);
}

@media screen and (max-width: 1700px) {
    .section-portfolio .__variant .__pack {
        transform: translateX(-170%) skewY(var(--unskew)) translate(0, 0);
    }
}

@media screen and (max-width: 1600px) {
    .section-portfolio .__variant .__pack {
        transform: translateX(-160%) skewY(var(--unskew)) translate(0, 0);
    }
}

@media screen and (max-width:1180px) {
    .section-portfolio .__variant .__pack {
        left: 35%;
        transform: translateX(-130%) skewY(var(--unskew)) translate(0, 0);
    }
}

@media screen and (max-width:768px) {
    .section-portfolio .__variant .__pack {
        left: 45%;
        height: 600px;
        width: 600px;
        top: -420px;
    }
}


@media screen and (max-width:712px) {
    .section-portfolio .__variant .__pack {
        left: 35%;
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio .__variant .__pack {
        display: block;
        position: absolute;
        top: 10px;
        left: 60%;
        right: auto;
        height: 430px;
        transition: all 0.3s var(--transition-easing) 0.3s;
        transform: skewY(var(--unskew)) translate(-50%) !important;
    }
}

.section-portfolio .__slider-cta {
    position: absolute;
    top: 230px;
    right: 36%;
    z-index: 10;
    transform: skewY(var(--unskew)) translateX(50%);
    color: var(--color-darkgrey);
    text-transform: uppercase;
    font-size: 22px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

@media screen and (max-width: 1279px) {
    .section-portfolio .__slider-cta {
        top: 390px;
        left: auto;
        right: 0;
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio .__slider-cta {
        top: 130px;
        left: calc(50% - 50px);
        right: auto;
        transform: skewY(var(--unskew)) translateX(-100%);
        color: var(--color-light);
    }
}

.section-portfolio .__slider-cta span {
    position: relative;
    top: 0.25em;
}

.section-portfolio .__slider-cta img {
    position: relative;
    top: 0.25em;
}

.section-portfolio .__specs {
    width: 60%;
    display: flex;
    padding-block: var(--padding-50);
}

.section-portfolio .__specs:not(.is-under-2) {
    justify-content: space-between;
}

@media screen and (max-width: 1279px) {
    .section-portfolio .__specs {
        width: 40%;
        flex-wrap: wrap;
        /* transform: skewY(var(--unskew)); */
        margin-top: 0;
        -webkit-padding-after: 0;
        padding-block-end: 0;
    }
}

@media screen and (max-width:1000px) {
    .section-portfolio .__specs {
        width: 50%;
    }
}

@media screen and (max-width:914px) {
    .section-portfolio .__specs {
        width: 50%;
    }
}

@media screen and (max-width:820px) {
    .section-portfolio .__specs {
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    .section-portfolio .__specs {
        width: 60%;
        flex-wrap: wrap;
        /* transform: skewY(var(--unskew)); */
        margin-top: 0;
        -webkit-padding-after: 0;
        padding-block-end: 0;
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio .__specs {
        width: 100%;
    }
}

.section-portfolio .__specs:not(.is-under-2) .__spec {
    -webkit-margin-end: 0;
    margin-inline-end: 0;
}

.section-portfolio .__specs .__spec {
    font-family: Roboto, sans-serif;
    position: relative;
    transform-origin: 0 0;
    -webkit-margin-end: var(--padding-70);
    margin-inline-end: var(--padding-70);
    transform: skewY(var(--unskew));
    color: var(--color-dark);
    flex-grow: 0;
}

.section-portfolio .__specs .__spec:nth-child(1) {
    z-index: 6;
}

.section-portfolio .__specs .__spec:nth-child(2) {
    z-index: 5;
}

.section-portfolio .__specs .__spec:nth-child(3) {
    z-index: 4;
}

.section-portfolio .__specs .__spec:nth-child(4) {
    z-index: 3;
}

.section-portfolio .__specs .__spec:nth-child(5) {
    z-index: 2;
}

.section-portfolio .__specs .__spec:nth-child(6) {
    z-index: 1;
}

@media screen and (max-width: 1279px) {
    .section-portfolio .__specs .__spec {
        width: 50%;

        padding-inline: var(--padding-20);
        padding-block: var(--padding-40);
        -webkit-margin-end: 0;
        margin-inline-end: 0;
    }
}

.section-portfolio .__specs .__spec .__title {
    font-family: Druk Web;
    letter-spacing: 0.2em;
    font-size: 20px;
    line-height: 19px;
    text-transform: uppercase;
    -webkit-margin-after: var(--margin-10);
    margin-block-end: var(--margin-10);
}

@media screen and (max-width:820px) {
    .section-portfolio .__specs .__spec .__title {
        font-size: 19px;
    }

    .section-portfolio .__icons-title {
        font-size: 19px;
    }
}

@media screen and (max-width:639px) {
    .section-portfolio .__specs .__spec .__title {
        font-size: 18px;
    }

    .section-portfolio .__icons-title {
        font-size: 18px;
    }
}

.section-portfolio .__specs .__spec .__value {
    font-size: 40px;
}

.section-portfolio .__specs .__spec .__value--multiple {
    font-size: 16px;
}

.section-portfolio .__specs .__spec .__unit {
    -webkit-margin-start: 5px;
    margin-inline-start: 5px;
    font-size: 16px;
}

.section-portfolio .__specs .__spec .tooltip-container span {
    /*color: var(--color-darkgrey);*/
    position: relative;
    top: 0.15em;
}

.section-portfolio .__icons-title {
    color: var(--color-dark);
    -webkit-margin-after: var(--margin-20);
    margin-block-end: var(--margin-20);
    font-family: Druk Web;
    letter-spacing: 0.2em;
    font-size: 20px;
    line-height: 19px;
    text-transform: uppercase;
    transform-origin: 0 0;
    transform: skewY(var(--unskew));
}

@media screen and (max-width: 1279px) {
    .section-portfolio .__icons-title {
        -webkit-margin-before: 50px;
        margin-block-start: 50px;
        -webkit-margin-after: var(--margin-70);
        margin-block-end: var(--margin-70)
    }
}

.section-portfolio .__icons {
    width: 100%;
    left: -3%;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    -webkit-padding-after: var(--padding-50);
    padding-block-end: var(--padding-50);
}

@media screen and (max-width: 1279px) {
    .section-portfolio .__icons {
        left: 0;
        width: 100%;
        /* transform: skewY(var(--unskew)); */
        margin-top: 0;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 1180px) {
    .section-portfolio .__icons {
        width: 120%;
    }
}

@media screen and (max-width:1024px) {
    .section-portfolio .__icons {
        width: 100%;
    }
}

@media screen and (max-width:768px) {
    .section-portfolio .__icons {
        width: 100%;
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio .__icons {
        width: 100%;
    }
}

.section-portfolio .__icons .__icon {
    /*transform-origin: 0 0;*/
    transform: skewY(var(--unskew));
    padding: var(--padding-70) 0;
    width: calc(100% / 7);
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media screen and (max-width: 1700px) {
    .section-portfolio .__icons .__icon {
        padding: var(--padding-70) 0;
    }
}


@media screen and (max-width: 1279px) {
    .section-portfolio .__icons .__icon {
        padding: var(--padding-20);
    }
}

@media screen and (max-width:1024px) {
    .section-portfolio .__icons .__icon {
        width: 33%;
        padding-inline: var(--padding-20);
        padding-block: var(--padding-40);
    }
}

@media screen and (max-width:768px) {
    .section-portfolio .__icons .__icon {
        width: 33%;
        padding-inline: var(--padding-20);
        padding-block: var(--padding-40);
    }
}

@media screen and (max-width: 700px) {
    .section-portfolio .__icons .__icon {
        width: 25%;
        /* 
        padding-inline: var(--padding-20);
        padding-block: var(--padding-40); */
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio .__icons .__icon {
        width: 50%;
        padding-inline: var(--padding-20);
        padding-block: var(--padding-40);
    }
}

.section-portfolio .__icons .__icon [inline-svg] {
    position: relative;
    width: 100%;
    height: 130px;
    -webkit-margin-after: var(--margin-10);
    margin-block-end: var(--margin-10);
    cursor: pointer;
    left: -5px;
}

@media screen and (max-width: 639px) {
    .section-portfolio .__icons .__icon [inline-svg] {
        left: -5px;
    }
}

.section-portfolio .__icons .__icon svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: auto;
    height: 130px;
}

@media screen and (max-width: 639px) {
    .section-portfolio .__icons .__icon svg {
        height: 150px
    }
}

.section-portfolio .__icons .__icon input {
    display: none;
}

.section-portfolio .__icons .__icon .__toggle {
    transform: rotate(0);
    transition: all 0.3s var(--transition-easing);
    /*color: var(--color-darkgrey);*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    /* -webkit-margin-after: var(--margin-10);
    margin-block-end: var(--margin-10);
    margin-left: 80px; */
}

@media screen and (max-width: 1440px) {
    .section-portfolio .__icons .__icon .__toggle {
        /*margin-left: 40px;*/
    }
}

@media screen and (max-width: 500px) {
    .section-portfolio .__icons .__icon .__toggle {
        /*margin-left: 50px;*/
    }
}

.section-portfolio .__icons .__icon p {
    font-family: Roboto, sans-serif;
    font-size: 12px;
    -webkit-margin-before: var(--margin-10);
    margin-block-start: var(--margin-10);
    color: var(--color-dark);
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s var(--transition-easing);
    width: 120%;
    opacity: 0;
    transform: translateY(-10%);
    text-align: center;
}

@media screen and (max-width: 639px) {
    .section-portfolio .__icons .__icon p {
        width: 100%
    }
}

.section-portfolio .__icons .__icon.active .__toggle {
    transform: rotate(-225deg);
}

.section-portfolio .__icons .__icon.active p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
    max-height: 400px;
}

.section-portfolio .__variants-list {
    position: absolute;
    top: 300px;
    width: 200px;
    left: 82%;
    z-index: 20;
    transform-origin: 0 0;
    transform: skewY(var(--unskew));
}

@media screen and (max-width:1194px) {
    .section-portfolio .__variants-list {
        top: 320px !important;
    }
}

@media screen and (max-width:1180px) {
    .section-portfolio .__variants-list {
        top: 320px;
        width: 170px;
        left: 87%;
    }
}

@media screen and (max-width:935px) {
    .section-portfolio .__variants-list {
        top: 420px !important;
    }
}

@media screen and (max-width:914px) {
    .section-portfolio .__variants-list {
        top: 420px;
        width: 170px;
        left: 80%;
    }
}

@media screen and (max-width:820px) {
    .section-portfolio .__variants-list {
        top: 380px;
        width: 170px;
        left: 86%;
    }
}

@media screen and (max-width:768px) {
    .section-portfolio .__variants-list {
        top: 460px;
        width: 170px;
        left: 80%;
    }
}

@media screen and (max-width: 639px) {
    .section-portfolio .__variants-list {
        display: none;
    }
}

.section-portfolio .__variants-list .__title {
    color: var(--color-dark);
    -webkit-margin-after: var(--margin-20);
    margin-block-end: var(--margin-20);
    font-family: Druk web;
    letter-spacing: 0.2em;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 11px;
}

.section-portfolio .__variants-list li {
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 99999px;
    height: 1em;
    -webkit-padding-start: calc(1em + 6px);
    padding-inline-start: calc(1em + 6px);
    line-height: 0.6;
    font-size: 30px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    transition: all 0.3s var(--transition-easing);
    -webkit-margin-after: var(--margin-10);
    margin-block-end: var(--margin-10);
}

.section-portfolio .__variants-list li:hover,
.section-portfolio .__variants-list li.active {
    border-color: var(--color-darkgrey);
}

.section-portfolio .__variants-list li span {
    color: #000;
    font-size: 0.4em;
    position: relative;
    transition: all 0.2s var(--transition-easing);
    /*font-weight: bold;*/
}

.section-portfolio .__variants-list li:before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(1em - 9px);
    height: calc(1em - 9px);
    border-radius: 9999px;
    background-color: currentColor;
    transition: all 0.2s var(--transition-easing);
}

.section-portfolio .__variants-list li:hover:before {
    /* width: calc(100% - 4px); */
    /* transform: scale(1.5); */
}

.section-portfolio .__variants-list-mobile {
    display: none;
    position: absolute;
    top: 200px;
    width: 80%;
    height: 50px;
    left: 50%;
    font-size: 12px;
    z-index: 10;
    transform-origin: 0 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transform: skewY(var(--unskew)) translate(-50%, 0);
    color: var(--color-dark);
    background: var(--color-light);
    border-radius: 9999px;
}

.section-portfolio .__variants-list-mobile:after {
    content: attr(content);
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: var(--color-dark);
    pointer-events: none;
}

@media screen and (max-width: 639px) {
    .section-portfolio .__variants-list-mobile {
        top: 330px;
        display: block;
    }
}

.section-portfolio .__variants-list-mobile:before {
    content: '';
    display: block;
    z-index: 1;
    font-size: 30px;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    border-radius: 999px;
    position: absolute;
    bottom: 10px;
    left: var(--padding-10);
}

.section-portfolio .__variants-list-mobile .__arrow {
    position: absolute;
    bottom: 10px;
    right: var(--padding-10);
    font-size: 30px;
}

.section-portfolio .__variants-list-mobile .__title {
    color: var(--color-light);
    text-align: center;
    -webkit-margin-after: var(--margin-20);
    margin-block-end: var(--margin-20);
    font-family: Druk;
    letter-spacing: 0.2em;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

.section-portfolio .__variants-list-mobile select {
    position: absolute;
    top: 0;
    left: 0;
    width: 92%;
    height: 50px;
    font-size: 0;
    border-radius: 9999px;
    background: transparent;
}

.section-prizes {
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    padding-top: 150px;
}

/* background: ld.color(light); */
@media screen and (max-width: 639px) {
    .section-prizes {
        padding-bottom: 50px;
    }
}

@media screen and (min-width: 1280px) {
    .section-prizes .__half-background {
        min-height: 850px;
    }
}

.section-prizes .__redeem {
    color: var(--color-current-decorator);
    -webkit-margin-before: 0.6em;
    margin-block-start: 0.6em;
    display: flex;
}

.section-prizes .__redeem-count {
    font-family: Druk;
    font-weight: 800;
    font-size: 3em;
    font-style: italic;
}

.section-prizes .__redeem-on {
    vertical-align: top;
    -webkit-margin-start: 0.1em;
    margin-inline-start: 0.1em;
    font-size: 0.7em;
    position: relative;
    top: 0.1em;
}

.section-prizes .__redeem-text {
    position: relative;
    top: 0.3em;
    -webkit-padding-start: 1em;
    padding-inline-start: 1em;
    flex-grow: 1;
}

@media screen and (max-width: 639px) {
    .section-prizes .col-sm-12 {
        width: 100%;
    }
}

.section-prizes ld-prizes-list {
    margin-bottom: 100px;
}

@media screen and (max-width: 639px) {
    .section-prizes ld-prizes-list {
        margin-bottom: 50px
    }
}

.section-prizes .__top {
    top: 70px !important;
    left: 750px !important;
}

.section-prizes .__bottom {
    bottom: 55% !important;
    left: 0 !important;
}

.prizes-list {
    padding-bottom: 300px;
}

@media screen and (max-width: 639px) {
    .prizes-list {
        padding-bottom: 120px
    }
}

.__product {
    z-index: 2;
    position: absolute;
    transform: translateY(-50%) rotate(var(--unskew));
    left: calc(50% + 250px);
    top: -100px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    width: auto;
    height: 370px;
}

@media screen and (max-width: 639px) {
    .__product {
        left: 50%;
        top: 170px;
        transform: translate(-50%, -50%) rotate(var(--unskew)) scale(0.9);
        text-align: center;
        height: 370px;
        box-shadow: -15px 10px 10px rgba(0, 0, 0, 0.1);
    }
}

.__product img {
    height: 100%;
    box-shadow: -30px 35px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
}

.__product .__hover-effect {
    background: currentColor;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    transform: scale(0.9) translate(0);
    overflow: hidden;
    border: solid 8px currentColor;
    transition: all 0.2s ease-in-out;
    box-shadow: -45px 35px 10px rgba(0, 0, 0, 0);
}

@media screen and (max-width: 639px) {
    .__product .__hover-effect {
        display: none;
    }
}

.__product .__hover-effect .__wrap-more {
    position: relative;
    height: 100%;
    width: 100%;
    color: var(--color-light);
}

.__product .__hover-effect .more {
    position: absolute;
    white-space: nowrap;
    opacity: 0.4;
    text-transform: uppercase;
    font-size: 0.7em;
    letter-spacing: 0.3em;
}

.__product .__hover-effect .more:nth-child(1) {
    transform-origin: 0 0;
    transform: rotate(180deg);
    left: 97%;
    right: 10px;
    bottom: -13px;
    width: 100%;
}

.__product .__hover-effect .more:nth-child(2) {
    transform-origin: 0 0;
    transform: rotate(270deg);
    left: 0px;
    right: 100%;
    bottom: 10px;
    width: 100%;
}

.__product:hover .__hover-effect {
    opacity: 1;
    transition: all 0.2s ease-out;
    transform: rotate(0) scale(1) translate(-25px, 25px);
    box-shadow: -15px 10px 10px rgba(0, 0, 0, 0.1);
}

.__product:hover img {
    box-shadow: -50px 65px 20px rgba(0, 0, 0, 0.1);
}

.__product:hover {
    transform: translateX(30px) translateY(calc(-50% - 20px)) scale(1) rotate(var(--unskew));
}

@media screen and (max-width: 639px) {
    .__product:hover {
        transform: translate(-50%, -50%) scale(1) rotate(var(--unskew))
    }
}

.section-products {
    background: #fff;
    overflow: visible;
    padding-top: 200px;
    padding-bottom: 200px;
}

@media screen and (min-width:1500px) {
    .section-products {
        padding-top: 300px;
    }
}

@media screen and (max-width: 639px) {
    .section-products {
        padding-top: 200px !important;
        overflow: hidden;
    }
}

.section-products .flexbox {
    display: flex;
    margin-bottom: 140px;
}

.section-products .icon-range {
    max-height: 150px;
    flex-wrap: nowrap;
    transition: all 0.5s ease;
}

@media screen and (max-width: 639px) {
    .section-products .icon-range {
        max-height: 160px;
        transform: scale(1.1) translateX(45%)
    }
}

.section-products .overflow {
    margin-right: -240px;
    max-width: 1000px;
    margin-left: -200px;
    overflow: hidden;
    transform: translateX(0) skewY(var(--skew));
}

@media screen and (min-width: 1700px) {
    .section-products .overflow {
        padding-left: 100px;
    }
}

@media screen and (max-width: 639px) {
    .section-products .overflow {
        margin-left: -210px;
        max-width: 500px;
    }
}

.product-icon-slide {
    padding-left: 200px;
}

@media screen and (max-width:1180px) {
    .product-icon-slide {
        padding-left: 150px;
    }
}

.section-products .inner {
    align-items: end;
    transition: all 0.5s ease;
    /* transform: translateX(0) skewY(var(--skew)); */
}

/* overflow: hidden; */
@media screen and (max-width: 639px) {
    .section-products .inner {
        margin-top: 60px;
        padding: 0 0
    }
}

.section-products .icon {
    transform: skewY(var(--unskew));
    margin: 0 100px 0 0;
    margin-bottom: 90px;
    flex-basis: 33%;
    transition: all 0.5s ease;
    width: 150px;
    height: 177px;
    max-height: 100%;
}

.section-products .icon img {
    max-width: 220px;
    /*height: 177px;*/
}

@media screen and (max-width:1194px) {
    .section-products .icon {
        width: 140px;
    }
}

@media screen and (max-width:980px) {
    .section-products .icon {
        width: 180px;
    }
}

@media screen and (max-width:979px) {
    .section-products .icon {
        width: 140px;
    }
}

@media screen and (max-width:834px) {
    .section-products .icon {
        width: 150px;
    }
}

@media screen and (max-width:833px) {
    .section-products .icon {
        width: 140px;
    }
}

@media screen and (max-width: 639px) {
    .section-products .icon {
        flex-basis: 30%;
        margin: 0 20px;
        width: 90px;
    }

    .section-products .icon img {
        max-width: 220px;
        max-height: 100%;
    }
}

.section-products .icon.removed {
    opacity: 0;
    transition: all 0.5s ease-out;
    margin-left: -230px;
}

.section-products .icon.hidden {
    display: none;
}

@media screen and (max-width: 639px) {
    .section-products .icon.removed {
        margin-left: -100px
    }
}

@media screen and (max-width: 639px) {
    .section-products .products-items {
        margin-top: 50px
    }
}

.section-products .packshot {
    transition: all 0.5s ease;
    position: relative;
    height: 300px;
    max-width: 10%;
    transition: all 0.6s ease;
    z-index: 4;
}

@media screen and (min-width: 1280px) {
    .section-products .packshot:nth-child(1) {
        transform: translateX(0);
    }

    .section-products .packshot:nth-child(2n) {
        transform: translateX(-40px);
    }

    .section-products .packshot:nth-child(3) {
        transform: translateX(0);
    }
}

.section-products .packshot.animate:nth-child(1n) {
    z-index: 3;
    max-width: 830px;
}

@media screen and (max-width:1194px) {
    .section-products .packshot.animate:nth-child(1n) {
        max-width: 780px;
    }
}

@media screen and (max-width:1180px) {
    .section-products .packshot.animate:nth-child(1n) {
        max-width: 55%
    }
}

@media screen and (max-width: 768px) {
    .section-products .packshot.animate:nth-child(1n) {
        max-width: 50%
    }
}

@media screen and (max-width: 639px) {
    .section-products .packshot.animate:nth-child(1n) {
        max-width: 60%
    }
}

.section-products .packshot.animate:nth-child(2n) {
    /* transition-delay: 0.2s; */
    max-width: 1200px;
    z-index: 1;
}

@media screen and (max-width: 1194px) {
    .section-products .packshot.animate:nth-child(2n) {
        max-width: 93%
    }
}

@media screen and (max-width: 1180px) {
    .section-products .packshot.animate:nth-child(2n) {
        max-width: 70%
    }
}

@media screen and (max-width:1000px) {
    .section-products .packshot.animate:nth-child(2n) {
        max-width: 74%;
    }
}

@media screen and (max-width: 834px) {
    .section-products .packshot.animate:nth-child(2n) {
        max-width: 77%
    }
}

@media screen and (max-width: 820px) {
    .section-products .packshot.animate:nth-child(2n) {
        max-width: 74%
    }
}

@media screen and (max-width: 768px) {
    .section-products .packshot.animate:nth-child(2n) {
        max-width: 70%
    }
}

@media screen and (max-width: 639px) {
    .section-products .packshot.animate:nth-child(2n) {
        max-width: 80%
    }
}

.section-products .packshot.animate:nth-child(3n) {
    max-width: 900px;
    z-index: 4;
}

@media screen and (max-width: 639px) {
    .section-products .packshot.animate:nth-child(3n) {
        max-width: 60%
    }
}

.section-products .packshot.animate:nth-child(4n) {
    /* transition-delay: 0.2s; */
    max-width: 730px;
    z-index: 5;
}

.section-products .packshot.animate:nth-child(4n) .text {
    right: 25%;
}

@media screen and (max-width: 639px) {
    .section-products .packshot.animate:nth-child(4n) {
        max-width: 80%;
        z-index: 3;
    }
}

.section-products .packshot.animate:nth-child(5n) {
    /* transition-delay: 0.2s; */
    max-width: 900px;
    z-index: 3;
}

@media screen and (max-width: 639px) {
    .section-products .packshot.animate:nth-child(5n) {
        max-width: 60%;
        z-index: 4
    }
}

.section-products .packshot.animate .color-overlay {
    width: 100%;
}

.section-products .background-img {
    z-index: -1;
    position: absolute;
    max-width: 100%;
    height: 300px;
    overflow: hidden;
}

.section-products .background-img img {
    max-width: none;
    transform: skewY(17deg) scale(1.6) translate(-20%);
}

@media screen and (max-width: 639px) {
    .section-products .packshot {
        height: 160px !important;
        transition: all 0.8s ease;
    }

    .section-products .background-img {
        max-width: 88%;
        height: 160px !important;
    }

    .section-products .background-img img {
        transform: skewY(17deg) scale(1.1) translate(-30%)
    }

    .section-products .text {
        right: 60% !important;
        font-size: 40px !important;
    }
}

.section-products .color-overlay {
    transition: all 1s ease;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    mix-blend-mode: multiply;
}

.section-products .animate .text {
    opacity: 1;
    transition: all 0.5s ease;
}

.section-products .text {
    right: 30%;
    font-family: 'Druk';
    letter-spacing: 0.02em;
    line-height: 0.9em;
    font-size: 100px;
    text-transform: uppercase;
    color: white;
    position: absolute;
    font-weight: bold;
    top: 0;
    transform: translate(-50%, -50%);
    transform: skewY(17deg);
    font-style: italic;
    opacity: 0;
    transition: all 2s ease;
    max-width: 300px;
    display: flex;
    align-items: center;
    height: 100%;
    text-align: right;
    word-break: keep-all;
}

@media screen and (max-width: 639px) {
    .section-products .text {
        right: 40%;
        font-size: 1.5em;
        max-width: 100px
    }
}

.section-products .product-img {
    position: absolute;
    right: -240px;
    top: -120px;
    transform: skewY(17deg);
    z-index: 50;
    transition: all 0.5s ease;
    max-width: 550px;
    max-height: 550px;
    filter: drop-shadow(-20px 20px 10px rgba(0, 0, 0, 0.2));
}

.product-img-second img {
    /*max-width: 500px;
    max-height: 500px;*/
}

.section-products .product-img img {
    max-width: 100%;
}

@media screen and (max-width: 1180px) {
    .section-products .packshot {
        height: 260px;
    }

    .section-products .background-img {
        height: 260px;
    }


    .section-products .product-img {
        top: -60px;
        right: -200px;
    }

    .section-products .product-img img {
        max-width: 400px;
        max-height: 400px
    }

    .product-img-second {
        top: -55px !important;
        right: -205px !important;
    }

    .section-products .text {
        right: 40%;
        font-size: 80px;
    }
}

@media screen and (max-width:834px) {
    .section-products .text {
        right: 50%;
    }
}

@media screen and (max-width:820px) {
    .product-img-second {
        top: -51px !important;
        right: -224px !important;
    }
}

@media screen and (max-width: 768px) {
    .section-products .packshot {
        height: 260px;
    }

    .section-products .background-img {
        height: 260px;
    }


    .section-products .product-img {
        top: -60px;
        right: -200px;
    }

    .section-products .product-img img {
        max-width: 400px;
        max-height: 400px
    }

    .product-img-second {
        top: -50px !important;
        right: -220px !important;
    }

    .section-products .text {
        right: 40%;
        font-size: 80px;
    }
}

@media screen and (max-width: 639px) {
    .section-products .product-img img {
        max-width: 254px;
        max-height: 254px
    }

    .section-products .product-img {
        top: -37%;
        max-width: 200px;
        right: -20px;
    }

    .product-img-second {
        right: -51px !important;
        top: -24% !important;
    }

    .product-img-second img {
        max-width: 254px !important;
        max-height: 254px !important;
    }
}

.section-products .product-img:hover {
    transform: skewY(17deg) scale(1.05) rotate(4deg);
}

.section-register-step-1 .__phone {
    display: flex;
}

.section-register-step-1 .__prefix {
    width: 80px;
    -webkit-margin-end: 10px;
    margin-inline-end: 10px;
}

.section-register-step-1 .__number {
    flex-grow: 1;
}

.section-register-step-2 {
    font-size: 1rem;
}

.section-register-step-2 .__code {
    -webkit-margin-after: 30px;
    margin-block-end: 30px;
}

.section-register-step-2 .__phone-number {
    font-weight: bold;
    font-size: 1.3em;
}

.section-register-step-2 .__edit-link {
    display: block;
    text-decoration: underline;
}

.section-register-step-2 .__resend {
    font-size: 0.8em;
}

.section-register-step-2 .__resend-link {
    text-decoration: underline;
    font-weight: bold;
}

.section-register-step-3 {
    font-size: 1rem;
}

.section-register-step-3 .__password-checks-description,
.section-register-step-3 .__password-checks-description *,
.section-register-step-3 .__password-checks-list,
.section-register-step-3 .__password-checks-list * {
    font-size: 0.9em;
}

.section-register-step-3 .__password-checks-description span,
.section-register-step-3 .__password-checks-list span {
    -webkit-margin-end: 5px;
    margin-inline-end: 5px;
}

.section-register-step-3 .__password-checks-item.is-valid {
    color: var(--color-success);
}

.section-register-step-3 .__password-checks-item.is-error {
    color: var(--color-error);
}

.section-register-step-4 {
    font-size: 1rem;
}

.section-register-step-4 img {
    max-width: 100%;
}

.section-register-step-4 [form-auto-fill].hidden,
.section-register-step-4 [authorize-continue].hidden {
    display: none;
}

.section-register-step-4 .moderator {
    color: var(--color-error);
}

.section-reset-password .__phone {
    display: flex;
}

.section-reset-password .__prefix {
    width: 80px;
    -webkit-margin-end: 10px;
    margin-inline-end: 10px;
}

.section-reset-password .__number {
    flex-grow: 1;
}

.section-reset-password .notification {
    font-size: 0.8em;
}

.section-reset-password .notification a {
    text-decoration: underline;
}

.section-reset-password .__password-checks-description,
.section-reset-password .__password-checks-list {
    font-size: 0.8em;
}

.section-reset-password .__resend-link {
    text-decoration: underline;
    font-weight: bold;
}

.section-reset-password .__password-checks-item,
.section-reset-password .__password-checks-item * {
    font-size: 0.9em;
}

.section-reset-password .__password-checks-item span {
    -webkit-margin-end: 5px;
    margin-inline-end: 5px;
}

.section-reset-password .__password-checks-item.is-valid {
    color: var(--color-success);
}

.section-reset-password .__password-checks-item.is-error {
    color: var(--color-error);
}

.rules-tabs {
    background-color: white;
    z-index: 10;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    max-width: 960px;
    transition: all 0.5s var(--transition-easing);
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0));
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
}

/* Firefox */
@media screen and (min-width: 1280px) {
    .rules-tabs {
        z-index: 102;
    }
}

.rules-tabs::-webkit-scrollbar {
    /* Hide scrollbar for Chrome, Safari and Opera */
    display: none;
}

.rules-tabs .tabs {
    padding-top: 20px;
    position: relative;
}

.rules-tabs:before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    height: 100%;
    width: 0;
    transition: all 0.2s var(--transition-easing);
    background-color: white;
}

@media screen and (max-width: 639px) {
    .rules-tabs:before {
        display: none
    }
}

.rules-tabs:after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    width: 0;
    transition: all 0.2s var(--transition-easing);
    background-color: white;
}

@media screen and (max-width: 639px) {
    .rules-tabs:after {
        display: none
    }
}

@media screen and (max-width: 1279px) {
    .rules-tabs .tabs {
        left: 50%;
        width: 100vw;
        transform: translate(-50%);
    }

    .rules-tabs:before,
    .rules-tabs:after {
        display: none;
    }
}

@media screen and (max-width: 639px) {
    .rules-tabs {
        height: 71px;
        overflow-x: auto;
        display: block;
        width: 100vw;
    }

    .rules-tabs .tabs {
        width: inherit;
        display: block;
        white-space: nowrap;
    }

    .rules-tabs .tabs li {
        /* width: 40%; */
        display: inline-block;
    }
}

.rules-tabs.is-sticky {
    /*background-image: url("../assets/img/background-texture.png");*/
    width: 100%;
    filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.05));
    max-width: 960px;
}

@media screen and (max-width: 1279px) {
    .rules-tabs.is-sticky {
        width: 100%;
    }
}

.rules-tabs.is-sticky:after,
.rules-tabs.is-sticky:before {
    /*background-image: url("../assets/img/background-texture.png");*/
    width: 100vw;
}

.section-history {
    background: #fff;
    padding-bottom: 350px;
    margin-bottom: 100px;
}

@media only screen and (max-width:1180px) {
    .section-history-text-wrapper {
        padding-bottom: 100px;
    }

    .section-history a {
        position: unset !important;
        bottom: unset !important;
        min-width: 40% !important;
    }
}

@media only screen and (max-width: 768px) {
    .section-history-text-wrapper {
        padding-bottom: 100px;
    }

    .section-history a {
        position: unset !important;
        bottom: unset !important;
        min-width: 40% !important;
    }
}

@media only screen and (max-width:639px) {
    .section-history-text-wrapper {
        padding-bottom: 0px;
        height: 200px;
    }

    .section-history-gif {
        height: 600px;
    }
}


@media screen and (max-width: 639px) {
    .section-history {
        padding-top: 160px;
        padding-bottom: 120px;
    }
}

.section-history {
    position: relative;
    overflow: hidden;
    color: white;
}

.section-history .card-item {
    /*border: 15px solid #d71921;*/
    border: 13px solid #FFFFFF;
}

@media screen and (max-width: 639px) {
    .section-history .card-item {
        margin-top: 20px
    }
}

.section-history .card {
    height: 0;
    position: relative;
    padding-bottom: 100%;
    /*background-color: white;*/
    overflow: hidden;
}

.section-history .card img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    height: 100%;
    z-index: 0;
}

.section-history .btn.btn--outlined:before {
    background-color: var(--color-red-wine);
}


/* .fold {
        position: relative;
        max-height: 500px;
        @ld.media mobileOnly {
            max-height: 620px;
        }
        transition: all 0.7s ease;
        .super-ticket {
            box-shadow: 3px 3px 8px 3px rgb(0 0 0 / 12%);
        }
    }
    .unfold {
        & > * {
            margin-top: 20px;
            transition: all 0.7s ease;
            transform: translate(0, 0) !important;
        }
    } */

.user-feedback {
    padding-top: 200px;
}

.user-feedback .container {
    max-width: 400px;
}

.user-feedback .h1,
.user-feedback .h2 {
    font-size: 3.5em;
    letter-spacing: 0.02em;
    line-height: 1.1em;
    margin-bottom: 60px;
    color: var(--color-current);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.user-feedback p {
    margin-bottom: 20px;
}

.user-feedback .btn {
    /* min-width: 230px; */
    margin-bottom: 20px;
}

@media screen and (max-width: 639px) {
    .user-feedback .btn {
        min-width: 200px
    }
}

.user-feedback .step-card-title {
    color: var(--color-current);
}

.user-feedback .material-icons.indicator {
    font-size: 45px;
}

.user-feedback textarea {
    min-height: 200px;
}

.section-video {
    background-color: var(--color-red-wine);
    margin: auto;
    padding: 50px 0 50px 0;
    text-align: center;
    color: white;
    font-size: 0.6em;
    cursor: pointer;
}

.section-video .arrows {
    margin-top: 40px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.section-video .arrows:before {
    content: '';
    display: block;
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: calc(100% + 200px);
    background: rgba(0, 0, 0, 0);
}

@media screen and (max-width: 639px) {
    .section-video .arrows:before {
        top: 0;
        height: 100%
    }
}

@media screen and (max-width: 639px) {
    .section-video .arrows {
        margin-top: -20px;
        padding: 60px 0 40px 0;
    }
}

.section-video .arrows>* {
    font-size: 5em;
    line-height: 1em;
    font-size: 13em;
    line-height: 0.25em;
}

.section-video .arrows>*:nth-child(odd) {
    -webkit-animation: arrows 1.5s linear infinite;
    animation: arrows 1.5s linear infinite;
}

.section-video .arrows>*:nth-child(even) {
    -webkit-animation: arrows2 1.5s linear infinite;
    animation: arrows2 1.5s linear infinite;
}

@media screen and (max-width: 639px) {
    .skuLightbox+.section-video {
        margin-top: -200px;
        padding-top: 300px
    }
}

@keyframes arrows {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(50%);
    }

    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

@keyframes arrows2 {
    0% {
        opacity: 0.5;
        transform: translateY(0);
    }

    50% {
        opacity: 0;
        transform: translateY(50%);
    }

    51% {
        opacity: 0;
        transform: translateY(-50%);
    }

    52% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
        transform: translateY(0);
    }
}

/* colors */
:root {

    --color-current: #D71921;


    --color-current-foreground: #ffffff;


    --color-current-decorator: #858585;


    --color-lightergrey: #F9FAF9;


    --color-lightergrey-foreground: #ffffff;


    --color-lightgrey: #EEEFEE;


    --color-lightgrey-foreground: #ffffff;


    --color-grey: #DEDEDE;


    --color-grey-foreground: #DEDEDE;


    --color-darkgrey: #858585;


    --color-darkgrey-foreground: #ffffff;


    --color-red-product: #D71921;


    --color-red-product-foreground: #ffffff;


    --color-red-wine: #A00F32;


    --color-red-wine-foreground: #ffffff;


    --color-red-rubis: #E40646;


    --color-red-rubis-foreground: #ffffff;


    --color-green-product: #3EBD9E;


    --color-green-product-foreground: #ffffff;


    --color-blue-product: #142CDD;


    --color-blue-product-foreground: #ffffff;


    --color-blue-royal: #0034A2;


    --color-blue-royal-foreground: #ffffff;


    --color-blue-azure: #0072CE;


    --color-blue-azure-foreground: #ffffff;


    --color-orange-pumpkin: #FC982E;


    --color-orange-pumpkin-foreground: #ffffff;


    --color-dark: #000;


    --color-dark-foreground: #ffffff;


    --color-light: #fff;


    --color-light-foreground: #D71921;


    --color-light-decorator: #fff;


    --color-success: green;


    --color-success-foreground: #ffffff;


    --color-warning: orange;


    --color-warning-foreground: #ffffff;


    --color-error: #5B108B;


    --color-error-foreground: #ffffff;


    --color-info: cyan;


    --color-info-foreground: #ffffff;

}

.color-current {

    --color-current: var(--color-current);


    --color-current-foreground: var(--color-current-foreground);


    --color-current-decorator: var(--color-current-decorator);

}

.color-lightergrey {

    --color-current: var(--color-lightergrey);


    --color-current-foreground: var(--color-lightergrey-foreground);

}

.color-lightgrey {

    --color-current: var(--color-lightgrey);


    --color-current-foreground: var(--color-lightgrey-foreground);

}

.color-grey {

    --color-current: var(--color-grey);


    --color-current-foreground: var(--color-grey-foreground);

}

.color-darkgrey {

    --color-current: var(--color-darkgrey);


    --color-current-foreground: var(--color-darkgrey-foreground);

}

.color-red-product {

    --color-current: var(--color-red-product);


    --color-current-foreground: var(--color-red-product-foreground);

}

.color-red-wine {

    --color-current: var(--color-red-wine);


    --color-current-foreground: var(--color-red-wine-foreground);

}

.color-red-rubis {

    --color-current: var(--color-red-rubis);


    --color-current-foreground: var(--color-red-rubis-foreground);

}

.color-green-product {

    --color-current: var(--color-green-product);


    --color-current-foreground: var(--color-green-product-foreground);

}

.color-blue-product {

    --color-current: var(--color-blue-product);


    --color-current-foreground: var(--color-blue-product-foreground);

}

.color-blue-royal {

    --color-current: var(--color-blue-royal);


    --color-current-foreground: var(--color-blue-royal-foreground);

}

.color-blue-azure {

    --color-current: var(--color-blue-azure);


    --color-current-foreground: var(--color-blue-azure-foreground);

}

.color-orange-pumpkin {

    --color-current: var(--color-orange-pumpkin);


    --color-current-foreground: var(--color-orange-pumpkin-foreground);

}

.color-dark {

    --color-current: var(--color-dark);


    --color-current-foreground: var(--color-dark-foreground);

}

.color-light {

    --color-current: var(--color-light);


    --color-current-foreground: var(--color-light-foreground);


    --color-current-decorator: var(--color-light-decorator);

}

.color-success {

    --color-current: var(--color-success);


    --color-current-foreground: var(--color-success-foreground);

}

.color-warning {

    --color-current: var(--color-warning);


    --color-current-foreground: var(--color-warning-foreground);

}

.color-error {

    --color-current: var(--color-error);


    --color-current-foreground: var(--color-error-foreground);

}

.color-info {

    --color-current: var(--color-info);


    --color-current-foreground: var(--color-info-foreground);

}

/* margin */
:root {

    --margin-0: 0;


    --margin-10: 8px;


    --margin-20: 16px;


    --margin-30: 24px;


    --margin-40: 32px;


    --margin-50: 40px;


    --margin-60: 48px;


    --margin-70: 64px;


    --margin-80: 80px;


    --margin-90: 96px;


    --margin-100: 112px;

}

.m-0 {
    margin: 0;
}

.mbs-0 {
    -webkit-margin-before: 0;
    margin-block-start: 0;
}

.mbe-0 {
    -webkit-margin-after: 0;
    margin-block-end: 0;
}

.mb-0 {
    margin-block: 0;
}

.mis-0 {
    -webkit-margin-start: 0;
    margin-inline-start: 0;
}

.mie-0 {
    -webkit-margin-end: 0;
    margin-inline-end: 0;
}

.mi-0 {
    margin-inline: 0;
}

.m-10 {
    margin: 8px;
}

.mbs-10 {
    -webkit-margin-before: 8px;
    margin-block-start: 8px;
}

.mbe-10 {
    -webkit-margin-after: 8px;
    margin-block-end: 8px;
}

.mb-10 {
    margin-block: 8px;
}

.mis-10 {
    -webkit-margin-start: 8px;
    margin-inline-start: 8px;
}

.mie-10 {
    -webkit-margin-end: 8px;
    margin-inline-end: 8px;
}

.mi-10 {
    margin-inline: 8px;
}

.m-20 {
    margin: 16px;
}

.mbs-20 {
    -webkit-margin-before: 16px;
    margin-block-start: 16px;
}

.mbe-20 {
    -webkit-margin-after: 16px;
    margin-block-end: 16px;
}

.mb-20 {
    margin-block: 16px;
}

.mis-20 {
    -webkit-margin-start: 16px;
    margin-inline-start: 16px;
}

.mie-20 {
    -webkit-margin-end: 16px;
    margin-inline-end: 16px;
}

.mi-20 {
    margin-inline: 16px;
}

.m-30 {
    margin: 24px;
}

.mbs-30 {
    -webkit-margin-before: 24px;
    margin-block-start: 24px;
}

.mbe-30 {
    -webkit-margin-after: 24px;
    margin-block-end: 24px;
}

.mb-30 {
    margin-block: 24px;
}

.mis-30 {
    -webkit-margin-start: 24px;
    margin-inline-start: 24px;
}

.mie-30 {
    -webkit-margin-end: 24px;
    margin-inline-end: 24px;
}

.mi-30 {
    margin-inline: 24px;
}

.m-40 {
    margin: 32px;
}

.mbs-40 {
    -webkit-margin-before: 32px;
    margin-block-start: 32px;
}

.mbe-40 {
    -webkit-margin-after: 32px;
    margin-block-end: 32px;
}

.mb-40 {
    margin-block: 32px;
}

.mis-40 {
    -webkit-margin-start: 32px;
    margin-inline-start: 32px;
}

.mie-40 {
    -webkit-margin-end: 32px;
    margin-inline-end: 32px;
}

.mi-40 {
    margin-inline: 32px;
}

.m-50 {
    margin: 40px;
}

.mbs-50 {
    -webkit-margin-before: 40px;
    margin-block-start: 40px;
}

.mbe-50 {
    -webkit-margin-after: 40px;
    margin-block-end: 40px;
}

.mb-50 {
    margin-block: 40px;
}

.mis-50 {
    -webkit-margin-start: 40px;
    margin-inline-start: 40px;
}

.mie-50 {
    -webkit-margin-end: 40px;
    margin-inline-end: 40px;
}

.mi-50 {
    margin-inline: 40px;
}

.m-60 {
    margin: 48px;
}

.mbs-60 {
    -webkit-margin-before: 48px;
    margin-block-start: 48px;
}

.mbe-60 {
    -webkit-margin-after: 48px;
    margin-block-end: 48px;
}

.mb-60 {
    margin-block: 48px;
}

.mis-60 {
    -webkit-margin-start: 48px;
    margin-inline-start: 48px;
}

.mie-60 {
    -webkit-margin-end: 48px;
    margin-inline-end: 48px;
}

.mi-60 {
    margin-inline: 48px;
}

.m-70 {
    margin: 64px;
}

.mbs-70 {
    -webkit-margin-before: 64px;
    margin-block-start: 64px;
}

.mbe-70 {
    -webkit-margin-after: 64px;
    margin-block-end: 64px;
}

.mb-70 {
    margin-block: 64px;
}

.mis-70 {
    -webkit-margin-start: 64px;
    margin-inline-start: 64px;
}

.mie-70 {
    -webkit-margin-end: 64px;
    margin-inline-end: 64px;
}

.mi-70 {
    margin-inline: 64px;
}

.m-80 {
    margin: 80px;
}

.mbs-80 {
    -webkit-margin-before: 80px;
    margin-block-start: 80px;
}

.mbe-80 {
    -webkit-margin-after: 80px;
    margin-block-end: 80px;
}

.mb-80 {
    margin-block: 80px;
}

.mis-80 {
    -webkit-margin-start: 80px;
    margin-inline-start: 80px;
}

.mie-80 {
    -webkit-margin-end: 80px;
    margin-inline-end: 80px;
}

.mi-80 {
    margin-inline: 80px;
}

.m-90 {
    margin: 96px;
}

.mbs-90 {
    -webkit-margin-before: 96px;
    margin-block-start: 96px;
}

.mbe-90 {
    -webkit-margin-after: 96px;
    margin-block-end: 96px;
}

.mb-90 {
    margin-block: 96px;
}

.mis-90 {
    -webkit-margin-start: 96px;
    margin-inline-start: 96px;
}

.mie-90 {
    -webkit-margin-end: 96px;
    margin-inline-end: 96px;
}

.mi-90 {
    margin-inline: 96px;
}

.m-100 {
    margin: 112px;
}

.mbs-100 {
    -webkit-margin-before: 112px;
    margin-block-start: 112px;
}

.mbe-100 {
    -webkit-margin-after: 112px;
    margin-block-end: 112px;
}

.mb-100 {
    margin-block: 112px;
}

.mis-100 {
    -webkit-margin-start: 112px;
    margin-inline-start: 112px;
}

.mie-100 {
    -webkit-margin-end: 112px;
    margin-inline-end: 112px;
}

.mi-100 {
    margin-inline: 112px;
}

/* padding */
:root {

    --padding-0: 0;


    --padding-10: 8px;


    --padding-20: 16px;


    --padding-30: 24px;


    --padding-40: 32px;


    --padding-50: 40px;


    --padding-60: 48px;


    --padding-70: 64px;


    --padding-80: 80px;


    --padding-90: 96px;


    --padding-100: 112px;

}

.p-0 {
    padding: 0;
}

.pbs-0 {
    -webkit-padding-before: 0;
    padding-block-start: 0;
}

.pbe-0 {
    -webkit-padding-after: 0;
    padding-block-end: 0;
}

.pb-0 {
    padding-block: 0;
}

.pis-0 {
    -webkit-padding-start: 0;
    padding-inline-start: 0;
}

.pie-0 {
    -webkit-padding-end: 0;
    padding-inline-end: 0;
}

.pi-0 {
    padding-inline: 0;
}

.p-10 {
    padding: 8px;
}

.pbs-10 {
    -webkit-padding-before: 8px;
    padding-block-start: 8px;
}

.pbe-10 {
    -webkit-padding-after: 8px;
    padding-block-end: 8px;
}

.pb-10 {
    padding-block: 8px;
}

.pis-10 {
    -webkit-padding-start: 8px;
    padding-inline-start: 8px;
}

.pie-10 {
    -webkit-padding-end: 8px;
    padding-inline-end: 8px;
}

.pi-10 {
    padding-inline: 8px;
}

.p-20 {
    padding: 16px;
}

.pbs-20 {
    -webkit-padding-before: 16px;
    padding-block-start: 16px;
}

.pbe-20 {
    -webkit-padding-after: 16px;
    padding-block-end: 16px;
}

.pb-20 {
    padding-block: 16px;
}

.pis-20 {
    -webkit-padding-start: 16px;
    padding-inline-start: 16px;
}

.pie-20 {
    -webkit-padding-end: 16px;
    padding-inline-end: 16px;
}

.pi-20 {
    padding-inline: 16px;
}

.p-30 {
    padding: 24px;
}

.pbs-30 {
    -webkit-padding-before: 24px;
    padding-block-start: 24px;
}

.pbe-30 {
    -webkit-padding-after: 24px;
    padding-block-end: 24px;
}

.pb-30 {
    padding-block: 24px;
}

.pis-30 {
    -webkit-padding-start: 24px;
    padding-inline-start: 24px;
}

.pie-30 {
    -webkit-padding-end: 24px;
    padding-inline-end: 24px;
}

.pi-30 {
    padding-inline: 24px;
}

.p-40 {
    padding: 32px;
}

.pbs-40 {
    -webkit-padding-before: 32px;
    padding-block-start: 32px;
}

.pbe-40 {
    -webkit-padding-after: 32px;
    padding-block-end: 32px;
}

.pb-40 {
    padding-block: 32px;
}

.pis-40 {
    -webkit-padding-start: 32px;
    padding-inline-start: 32px;
}

.pie-40 {
    -webkit-padding-end: 32px;
    padding-inline-end: 32px;
}

.pi-40 {
    padding-inline: 32px;
}

.p-50 {
    padding: 40px;
}

.pbs-50 {
    -webkit-padding-before: 40px;
    padding-block-start: 40px;
}

.pbe-50 {
    -webkit-padding-after: 40px;
    padding-block-end: 40px;
}

.pb-50 {
    padding-block: 40px;
}

.pis-50 {
    -webkit-padding-start: 40px;
    padding-inline-start: 40px;
}

.pie-50 {
    -webkit-padding-end: 40px;
    padding-inline-end: 40px;
}

.pi-50 {
    padding-inline: 40px;
}

.p-60 {
    padding: 48px;
}

.pbs-60 {
    -webkit-padding-before: 48px;
    padding-block-start: 48px;
}

.pbe-60 {
    -webkit-padding-after: 48px;
    padding-block-end: 48px;
}

.pb-60 {
    padding-block: 48px;
}

.pis-60 {
    -webkit-padding-start: 48px;
    padding-inline-start: 48px;
}

.pie-60 {
    -webkit-padding-end: 48px;
    padding-inline-end: 48px;
}

.pi-60 {
    padding-inline: 48px;
}

.p-70 {
    padding: 64px;
}

.pbs-70 {
    -webkit-padding-before: 64px;
    padding-block-start: 64px;
}

.pbe-70 {
    -webkit-padding-after: 64px;
    padding-block-end: 64px;
}

.pb-70 {
    padding-block: 64px;
}

.pis-70 {
    -webkit-padding-start: 64px;
    padding-inline-start: 64px;
}

.pie-70 {
    -webkit-padding-end: 64px;
    padding-inline-end: 64px;
}

.pi-70 {
    padding-inline: 64px;
}

.p-80 {
    padding: 80px;
}

.pbs-80 {
    -webkit-padding-before: 80px;
    padding-block-start: 80px;
}

.pbe-80 {
    -webkit-padding-after: 80px;
    padding-block-end: 80px;
}

.pb-80 {
    padding-block: 80px;
}

.pis-80 {
    -webkit-padding-start: 80px;
    padding-inline-start: 80px;
}

.pie-80 {
    -webkit-padding-end: 80px;
    padding-inline-end: 80px;
}

.pi-80 {
    padding-inline: 80px;
}

.p-90 {
    padding: 96px;
}

.pbs-90 {
    -webkit-padding-before: 96px;
    padding-block-start: 96px;
}

.pbe-90 {
    -webkit-padding-after: 96px;
    padding-block-end: 96px;
}

.pb-90 {
    padding-block: 96px;
}

.pis-90 {
    -webkit-padding-start: 96px;
    padding-inline-start: 96px;
}

.pie-90 {
    -webkit-padding-end: 96px;
    padding-inline-end: 96px;
}

.pi-90 {
    padding-inline: 96px;
}

.p-100 {
    padding: 112px;
}

.pbs-100 {
    -webkit-padding-before: 112px;
    padding-block-start: 112px;
}

.pbe-100 {
    -webkit-padding-after: 112px;
    padding-block-end: 112px;
}

@media screen and (max-width:600px) {
    .mbe-20 {
        margin-top: 5px;
    }
}

@media screen and (max-width:600px) {
    .section-header-banner .__content-wrap h1 br {
        display: none;
    }
}

@media screen and (max-width:600px) {
    .history-content {
        margin-top: 10px !important;
    }
}