*::-webkit-scrollbar {
    width: 8px;
    height: 100%;
}
*::-webkit-scrollbar:disabled {
    display: none;
}
*::-webkit-scrollbar-button{
    display: none
}
*::-webkit-scrollbar-thumb {
    border-radius: 4px;
    scrollbar-color: rgba(0,0,0,.2)
}
*::-webkit-scrollbar-track {
    background-color: transparent;
}
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent
}
*:hover {
    scrollbar-color: rgba(0,0,0,.2) transparent
}
:root {
    --light: #fff;
    --light-rgb: 255,255,255;
    --dark: #262223;
    --dark-rgb: 38,34,35;
    --gray-mid: #3b3839;
    --gray-mid-rgb: 59,56,57;
    --beige: #e1c886;
    --beige-rgb: 255,200,134;
    --base-color: var(--light);
    --base-color-rgb: var(--light-rgb);
    --text-color: var(--dark);
    --text-color-rgb: var(--dark-rgb);
    --highlight-color: var(--gray-mid);
    --highlight-color-rgb: var(--bgray-mid-rgb);
    --main-font: 'League Spartan', sans-serif;
    --highlight-font: 'League Spartan', sans-serif;
    --padding: 40px;
    --max-width: 1300px;
    --flex-base: 220px;
    --font-size: 19px;
    --transition-time: 0s;
}
html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
}
html {
    overflow-x: hidden;
    position: relative;
    min-height: 550px;
    font-size: var(--font-size);
    height: 100%;
    max-width: 100%;
}
body {
    font-family: var(--main-font);
    font-weight: 300;
    overflow: hidden;
    -moz-osx-font-smoothing: blue-lightscale;
    -webkit-font-smoothing: antialiased;
    color: var(--text-color);
    min-width: 300px;
    background-color: var(--base-color);
    min-height: 100%;
    line-height: 1.3;
    max-width: 100%;
    position: relative;
}
body, body * {
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
p {
    margin: 0 0 .5rem;
}
p:last-child, p:only-child {
    margin-bottom: 0
}
.button {
    text-decoration: none
}
h1 {
    font-size: 2.2rem;
    color: var(--dark);
    text-align: center
}
h1 {
    font-weight: 600;
    line-height: 1;
    font-family: var(--highlight-font);
    text-transform: lowercase;
    margin-top: 0
}
.center {
    text-align: center;
}
a.block {
    display: block
}
a {
    display: inline-block;
    color: currentColor;
    position: relative;
    text-decoration: solid underline var(--beige) .05em;
    text-decoration-skip-ink: none;
    transition: text-decoration-color var(--transition-time) ease-in-out
}
button, .button {
    border: none;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4;
    text-align: center;
    padding: calc(.25 * var(--padding)) calc(.5 * var(--padding));
    padding-bottom: calc(.125 * var(--padding));
    background-color: var(--beige);
    color: var(--dark);
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
    filter: grayscale(0);
    transition: filter var(--transition-time) ease-in-out;
}
button:hover, .button:hover {
    filter: grayscale(1);
}

.light {
    background-color: var(--light);
}
.gray-mid {
    background-color: var(--gray-mid)
}
.beige {
    background-color: var(--beige)
}
.dark {
    background-color: var(--dark)
}

.dark-font, .dark-font * {
    color: var(--dark);
}
.white-font, .white-font *,
.light-font, .light-font * {
    color: var(--light);
}
.gray-mid-font, .gray-mid-font * {
    color: var(--gray-mid);
}
.beige-font, .beige-font * {
    color: var(--beige);
    font-weight: 900
}

/* FLEX */
.flex {
    display: flex;
    flex-flow: row wrap;
    width: auto;
    padding: var(--padding)
}
.pad {
    padding: var(--padding)
}
.padtop {
    padding-top: var(--padding)
}
.padbottom {
    padding-bottom: var(--padding)
}
.halfpad ,
.flex.halfpad {
    padding: calc(.5 * var(--padding));
    --swiper-navigation-height: calc(100% - 3 * var(--padding));
    --swiper-navigation-top-margin: calc(1.5 * var(--padding));
}
.halfpad > [class*="box"],
.flex.halfpad > [class*="box"] {
    padding: calc(.5 * var(--padding))
}
.halfpadvertical > [class*="box"] {
    padding-top: calc(.5 * var(--padding));
    padding-bottom: calc(.5 * var(--padding));
}
.content.halfpad > [class*="box"] {
    padding: calc(1 * var(--padding)) calc(.5 * var(--padding))
}
.flex.nm {
    margin: calc(-1 * var(--padding));
}
.flex.nw {
    flex-flow: row nowrap;
}
.flex.unpad {
    margin-left: calc(-1 * var(--padding));
    margin-right: calc(-1 * var(--padding));
    max-width: calc(100% + 2 * var(--padding))
}
.halfpad > .flex.unpad {
    margin: calc(-.5 * var(--padding));
    max-width: calc(100% + 1 * var(--padding))
}
.flex.wr {
    flex-flow: row wrap-reverse;
}
.flex.vcenter, .vcenter {
    align-items: center;
    align-content: center;
}
.flex.vstretch, .vstretch {
    align-items: stretch;
    align-content: stretch;
}
.flex.vstart,.vstart {
    align-items: flex-start !important;
    align-content: flex-start !important;
}
.flex.vend,.vend {
    align-items: flex-end !important;
    align-content: flex-end !important;
}
.vcenter[class*="box"]:not(.flex) {
    align-self: center;
}
.vend[class*="box"]:not(.flex) {
    align-self: flex-end;
}
.vstard[class*="box"]:not(.flex) {
    align-self: flex-start;
}
.box0s[class*="box"] {flex: 1 1 max(calc(1 * .25 * var(--flex-base)), 25%);}
.box1, .box1s[class*="box"] {flex: 1 1 max(calc(1 * .5 * var(--flex-base)), 50%);}
.box2 {flex: 2 1 max(calc(2 * .5 * var(--flex-base)), 100%);}
.box3 {flex: 3 1 max(calc(3 * .5 * var(--flex-base)), 100%);}
.box4 {flex: 4 1 max(calc(4 * .5 * var(--flex-base)), 100%);}
.box5 {flex: 5 1 max(calc(5 * .5 * var(--flex-base)), 100%);}
.box6 {flex: 6 1 max(calc(6 * .5 * var(--flex-base)), 100%);}
.box7 {flex: 7 1 max(calc(7 * .5 * var(--flex-base)), 100%);}

.boxfull, .box7 > .box7, .box6 > .box6, .box5 > .box5, .box4 > .box4, .box3 > .box3, .box2 > .box2, .box1 > .box1 {flex: 1 1 100%;}
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .boxnf, .boxfull {padding: var(--padding);min-width: 0;max-width: 100%;position: relative;order: 2;}
.boxnf {
    padding-top: calc(0 * var(--padding) + var(--largeicon-size))
}
body:after,
body:before {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(20% + 2 * var(--padding));
    left: 0;
    top: 0;
    z-index: -1;
    background-color: var(--light);
    transform: skew(-3deg) rotate(-3deg);
    transform-origin: top left;
}
body:after{
    background-color: rgba(var(--beige-rgb), .27);
}

@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/league-spartan.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}