.flex {
    display: flex;
    gap: var(--gap)
}

.flex .space {
    flex-grow: 2
}

.flex.-n {
    gap: 0
}

.flex.-mini {
    gap: 5px
}

.-ac {
    align-items: center
}

.-jc {
    justify-content: center;
}

.-jsb {
    justify-content: space-between
}

.-txt-c,.text-center {
    text-align: center
}

.flex.-txt-c {
    justify-content: center
}

.flex.-txt-r {
    justify-content: flex-end
}

.flex.-txt-l {
    justify-content: flex-start
}

p.-txt-c {
    margin: 0 auto 1em
}

.-txt-r {
    text-align: right
}

.-txt-l {
    text-align: left
}

.-txt-l p {
    margin-left: 0
}

.r {
    position: relative
}

.-wrap {
    flex-wrap: wrap
}

.image {
    position: relative;
}

.image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.image:before {
    display: block;
    content: "";
    padding-top: var(--defaultRatio)
}

.hero .slide-caption h2 {
    font-family: var(--accentFont);
    font-style: italic;
    font-weight: normal;
    font-size: 4em;
    margin-bottom: var(--smallGap);
}

.hero .slide-caption p {
    font-family: var(--accentFont);
}

.hero .slide {
    background: var(--dark);
}

.default.hero .slide .image, .default.hero .slide:hover .image {
    opacity: 0.6;
}

.default .slide-caption {
    color: var(--bg);
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    max-width: var(--textContainer);
    width: 80%;
    margin: 0 auto;
    text-shadow: 0 0 5px rgba(0,0,0,.5)
}

.slide-caption h2 {
    text-align: inherit
}

.ratio1-1 .image:before {
    padding-top: 100%
}

.ratio1-2 .image:before {
    padding-top: 200%
}

.ratio2-1 .image:before {
    padding-top: 50%
}

.ratio2-3 .image:before {
    padding-top: 150%
}

.ratio3-1 .image:before {
    padding-top: 33%
}

.ratio3-2 .image:before {
    padding-top: 66%
}

.ratio3-4 .image:before {
    padding-top: 133%
}

.ratio4-1 .image:before {
    padding-top: 25%
}

.ratio4-3 .image:before {
    padding-top: 75%
}

.container>section {
    margin: var(--gap) 0
}

[class*=grid-] {
    display: grid;
    grid-gap: var(--gap)
}

.grid-2 {
    grid-template-columns: repeat(2,1fr)
}

.grid-3 {
    grid-template-columns: repeat(3,1fr)
}

.grid-4 {
    grid-template-columns: repeat(4,1fr)
}

.grid-5 {
    grid-template-columns: repeat(5,1fr)
}

.grid-6 {
    grid-template-columns: repeat(6,1fr)
}

.grid-7 {
    grid-template-columns: repeat(7,1fr)
}

.grid-12 {
    grid-template-columns: repeat(12,1fr)
}

[class*=span] {
    min-width: 100%
}

.col-sm-1,.span-1 {
    grid-column: span 1
}

.col-sm-2,.span-2 {
    grid-column: span 2;
    flex-basis: 16.5%
}

.col-sm-3,.span-3 {
    grid-column: span 3;
    flex-basis: 25%
}

.col-sm-4,.span-4 {
    grid-column: span 4;
    flex-basis: 33%
}

.col-sm-5,.span-5 {
    grid-column: span 5
}

.col-sm-6,.span-6 {
    grid-column: span 6;
    flex-basis: 50%
}

.col-sm-7,.span-7 {
    grid-column: span 7
}

.col-sm-8,.span-8 {
    grid-column: span 8
}

.col-sm-9,.span-9 {
    grid-column: span 9
}

.col-sm-10,.span-10 {
    grid-column: span 8
}

.col-sm-11,.span-11 {
    grid-column: span 9
}

.col-sm-12,.span-full {
    grid-column: 1/-1;
    flex-basis: 100%
}

.span-r-2 {
    grid-row: span 2
}

.auto-grid {
    display: grid;
    grid-gap: var(--gap);
    grid-template-columns: repeat(auto-fill,minmax(var(--productCard),1fr))
}

.btn {
    padding: .5em 1em;
    border-radius: var(--borderRadius);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.btn.btn-inline {
    padding: .2em
}

.btn-sm,.btn-small {
    font-size: .8em;
    line-height: 1.5em;
    padding: .2em .5em;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.btn-lg {
    display: flex;
    text-align: center
}

.btn:hover {
    text-decoration: none
}

.btn-invisible {
    background: rgba(0,0,0,0);
    border: 2px solid transparent
}

.btn-default {
    background: var(--accentBg);
    border: 2px solid var(--accentBg)
}

.btn-default:hover {
    color: var(--accentBg);
    background: var(--accent);
    border: 2px solid var(--accent)
}

.btn-default.active {
    background: var(--accent);
    border: 2px solid var(--accent);
    color: var(--accentBg)
}

.btn-primary {
    color: var(--accentBg);
    background: var(--accent);
    border: 2px solid var(--accent)
}

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

.btn-outline {
    border: 2px solid;
    color: var(--accent)
}

.btn-outline.active {
    background: var(--accent);
    border: 2px solid var(--accent);
    color: var(--accentBg)
}

.btn-outline.active:hover {
    color: var(--accentBg)
}

.btn-outline:hover {
    color: var(--accentAlt)
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: space-between
}

.btn-icon.btn-lg {
    display: flex
}

.btn.in-basket {
    border-color: var(--success);
    background: var(--success);
    color: var(--bg)
}

@media screen and (max-width: 1100px) {
    .t-grid-1 {
        grid-template-columns:1fr
    }

    .t-grid-2 {
        grid-template-columns: repeat(2,1fr)
    }

    .t-grid-3 {
        grid-template-columns: repeat(3,1fr)
    }

    .t-grid-4 {
        grid-template-columns: repeat(4,1fr)
    }

    .t-grid-5 {
        grid-template-columns: repeat(5,1fr)
    }

    .t-grid-6 {
        grid-template-columns: repeat(6,1fr)
    }

    .t-grid-7 {
        grid-template-columns: repeat(7,1fr)
    }

    .t-grid-12 {
        grid-template-columns: repeat(12,1fr)
    }

    .t-span-1 {
        grid-column: span 1
    }

    .t-r-span-2 {
        grid-row: span 2
    }

    .t-span-2 {
        grid-column: span 2
    }

    .t-span-3 {
        grid-column: span 3
    }

    .t-span-4 {
        grid-column: span 4
    }

    .t-span-5 {
        grid-column: span 5
    }

    .t-span-6 {
        grid-column: span 6
    }

    .t-span-7 {
        grid-column: span 7
    }

    .t-span-8 {
        grid-column: span 8
    }

    .t-span-9 {
        grid-column: span 9
    }

    .t-span-10 {
        grid-column: span 10
    }

    .t-span-11 {
        grid-column: span 11
    }

    .t-span-12,.t-span-full {
        grid-column: 1/-1
    }
}

@media screen and (min-width: 651px) {
    .Horizontal_Nav_Menu li:hover .level_2-container {
        display: block;
    }
}

@media screen and (max-width: 650px) {
    :root {
        --gap:15px;
        --em: 14px;
        --h1size: 2em;
        --h2size: 1.5em;
        --h3size: 1.3em;
        --h4size: 1.2em
    }

    .s-ratio1-1 .image:before {
        padding-top: 100%
    }

    .s-ratio1-2 .image:before {
        padding-top: 200%
    }

    .s-ratio2-1 .image:before {
        padding-top: 50%
    }

    .s-ratio2-3 .image:before {
        padding-top: 150%
    }

    .s-ratio3-1 .image:before {
        padding-top: 33%
    }

    .s-ratio3-2 .image:before {
        padding-top: 66%
    }

    .s-ratio3-4 .image:before {
        padding-top: 133%
    }

    .s-ratio4-1 .image:before {
        padding-top: 25%
    }

    .s-ratio4-3 .image:before {
        padding-top: 75%
    }

    .s-grid-1 {
        grid-template-columns: 1fr
    }

    .s-grid-2 {
        grid-template-columns: repeat(2,1fr)
    }

    .s-grid-3 {
        grid-template-columns: repeat(3,1fr)
    }

    .s-grid-4 {
        grid-template-columns: repeat(4,1fr)
    }

    .s-grid-5 {
        grid-template-columns: repeat(5,1fr)
    }

    .s-grid-6 {
        grid-template-columns: repeat(6,1fr)
    }

    .s-grid-7 {
        grid-template-columns: repeat(7,1fr)
    }

    .s-grid-12 {
        grid-template-columns: repeat(12,1fr)
    }

    .s-span-1 {
        grid-column: span 1
    }

    .s-span-2 {
        grid-column: span 2
    }

    .s-span-3 {
        grid-column: span 3
    }

    .s-span-4 {
        grid-column: span 4
    }

    .s-span-5 {
        grid-column: span 5
    }

    .s-span-6 {
        grid-column: span 6
    }

    .s-span-7 {
        grid-column: span 7
    }

    .s-span-8 {
        grid-column: span 8
    }

    .s-span-9 {
        grid-column: span 9
    }

    .s-span-10 {
        grid-column: span 10
    }

    .s-span-11 {
        grid-column: span 11
    }

    .s-span-12,.s-span-full {
        grid-column: 1/-1
    }
}