.page-header .x.icon {
    display: none
}

.invisible {
    opacity: 0 !important;
    pointer-events: none !important
}

.ui * {
    transition: 1s all !important
}

.getproductbtn {
    background-color: #5AACDF;
    border: none;
    border-radius: 10px;
    margin-top: 16px;
    width: 100%;
    height: 50px;
    color: #fff;
    font-weight: 700;
    font-size: 1.5em;
    transition: 0.5s all;
    cursor: pointer
}

.getproductbtn:hover {
    background-color: #f3753b
}

#header-product-sel {
    transition: all 1s;
    position: absolute;
    background-color: #4F4F4F;
    transform: translate(-200px, 30px);
    border-radius: 5px;
    padding: 8px
}

#header-product-sel::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    top: -8px;
    left: 48.5%;
    position: absolute;
    border-bottom: 8px solid #4F4F4F
}

body {
    margin: 0;
    font-family: Helvetica !important;
    font-weight: 400;
    line-height: normal
}

.page-header {
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 20px;
    padding-bottom: 20px;
    transition: background 0.8s;
    z-index: 2
}

.page-header * {
    display: inline-block
}

.header-logo {
    width: 250px
}

.header-list * {
    display: inline-block
}

.header-list {
    float: right;
    margin-top: 15px
}

.header-list a {
    color: #000;
    text-decoration: none;
    font-size: 1.4em;
    transition: 0.35s all;
    margin-left: 30px
}

.header-list a * {
    transition: 0.35s all
}

.header-list a:hover {
    color: #f17f4a
}

.header-list a:hover * {
    fill: #f17f4a
}

.chevron {
    width: 15px;
    margin-bottom: 3px
}

.onpage {
    color: #1C83C4 !important
}

.onpage:hover {
    color: #116294 !important
}

@media (max-width:1460px) {
    .page-header {
        padding-left: 2vw;
        padding-right: 2vw
    }
}

@media (max-width:1250px) {
    .header-list a {
        font-size: 1em;
        margin-left: 15px
    }

    .header-list {
        margin-top: 20px
    }

    .header-list .ui.selection.dropdown {
        font-size: .7em;
        margin-left: 15px !important
    }
}

@media (max-width:960px) {
    .ui.selection.dropdown {
        padding-left: 15px !important;
        min-height: 0 !important
    }

    .menu.transition * {
        color: #000
    }

    #header-bg-mobile {
        transition: background 1s, opacity 1s;
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, .2);
        z-index: 1
    }

    .header-closed {
        transform: translateX(200vw)
    }

    .panckaketop {
        transform: rotate(45deg) scaleX(.83)
    }

    .panckakebtm {
        transform: rotate(-45deg) scaleX(.85)
    }

    .page-header .x.icon {
        display: block;
        color: #fff;
        position: fixed;
        right: calc(15px + 10vw);
        cursor: pointer;
        z-index: 4;
        overflow: visible !important;
        transform: translateY(5px)
    }

    .page-header .x.icon * {
        transition: 1s all
    }

    .page-header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw
    }

    .white * {
        stroke: #fff
    }

    .header-list {
        transition: 1s all;
        padding-top: 20px;
        z-index: 2;
        position: fixed;
        right: 0;
        background-color: rgba(0, 0, 0, .8);
        top: 0;
        margin-top: 0;
        height: 100vh;
        width: 360px;
        font-size: 23px;
        font-weight: 700
    }

    .header-list .chevron {
        display: inline;
        margin: 0 !important;
        margin-bottom: 3px !important
    }

    .default.text {
        display: inline !important;
        color: whitesmoke !important
    }

    .header-list * {
        display: block;
        margin-top: 30px
    }

    .header-list a {
        color: whitesmoke !important
    }

    .header-list path {
        fill: whitesmoke !important
    }

    .header-list .ui.selection.dropdown {
        margin-left: 0 !important
    }

    #header-product-sel {
        width: 200px;
        transform: translate(105px, 0)
    }

    #header-product-sel .default.text {
        color: inherit !important
    }

    #header-product-sel .ui.selection.dropdown {
        width: 90% !important;
        min-width: 1px !important
    }

    #header-product-sel button {
        font-size: .7em
    }

    #header-product-sel .ui.input {
        font-size: 0.7em !important;
        width: 90% !important
    }

    #header-product-sel .text {
        margin: 0
    }

    #header-product-sel .item {
        margin-top: 10px !important
    }
}

.none {
    display: none !important
}

.switch {
    --line: #b4b4b4;
    --dot: #F58957;
    --circle: #b4b4b4;
    --background: #fff;
    --duration: .3s;
    --text: #9EA0BE;
    --shadow: 0 1px 3px rgba(0, 9, 61, .2);
    cursor: pointer;
    position: relative
}

.switch:before {
    content: "";
    width: 60px;
    height: 32px;
    border-radius: 16px;
    background: var(--background);
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: var(--shadow)
}

.switch input {
    display: none
}

.switch input+div {
    position: relative
}

.switch input+div:before, .switch input+div:after {
    --s: 1;
    content: "";
    position: absolute;
    height: 4px;
    top: 14px;
    width: 24px;
    background: var(--line);
    transform: scaleX(var(--s));
    transition: transform var(--duration) ease
}

.switch input+div:before {
    --s: 0;
    left: 4px;
    transform-origin: 0 50%;
    border-radius: 2px 0 0 2px
}

.switch input+div:after {
    left: 32px;
    transform-origin: 100% 50%;
    border-radius: 0 2px 2px 0
}

.switch input+div span {
    padding-left: 60px;
    line-height: 28px;
    color: var(--text)
}

.switch input+div span:before {
    --x: 0;
    --b: var(--circle);
    --s: 4px;
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 var(--s) var(--b);
    transform: translateX(var(--x));
    transition: box-shadow var(--duration) ease, transform var(--duration) ease
}

.switch input+div span:not(:empty) {
    padding-left: 68px
}

.switch input:checked+div:before {
    --s: 1
}

.switch input:checked+div:after {
    --s: 0
}

.switch input:checked+div span:before {
    --x: 28px;
    --s: 12px;
    --b: var(--dot)
}

.boxContainer {
    text-align: center;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100vw
}

.bigbox.box {
    width: 90vw;
    display: block
}

.bigbox.box .title {
    margin-top: 15px
}

.box div .title svg {
    width: 90% !important
}

.medbox.box {
    width: 31.3vw;
}

.medbox.box div {
    width: 95%;
    min-width: 250px
}

.box:not(.bigbox) {
    margin-left: 0;
    margin-right: 50px
}

@media (max-width:722px) {
    .box:not(.bigbox) {
        margin-left: 0;
        margin-right: 0
    }
}

.bigbox.box div {
    max-width: 75%
}

.box .title {
    display: block;
    font-size: 1.8em;
    font-weight: 700;
    line-height: 1em;
}

.box {
    font-size: 1.2em;
    margin-bottom: 50px
}

.box {
    border-radius: 15px;
    box-shadow: 3px 7px 20px 8px rgb(0 0 0 / 20%);
    width: 20vw;
    min-width: 320px;
    padding: 8px;
    padding-top: 25px;
    text-align: left;
    display: inline-block
}

.box div {
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    vertical-align: top
}

.box:not(.bigbox) div {
    width: 90%
}

html {
    scroll-behavior: smooth !important
}

.btn {
    background-color: #5AACDF;
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 1.5em;
    padding: 10px 30px;
    border-radius: 100px;
    cursor: pointer;
    margin-left: 40px;
    vertical-align: top;
    margin-top: 15px
}

.disabled {
    pointer-events: none;
    background-color: rgb(94, 94, 94) !important;
    cursor: default
}

a .nostyle {
    text-decoration: none !important;
    color: inherit !important;
    width: fit-content;
    height: fit-content;
    padding: 0
}

@media (max-width:960px) {
    .body {
        margin-top: 98px
    }
}

html * {
    line-height: 1.3em;
}

.archive .latest {
    width: 25%;
    min-width: 200px;
    height: 175px;
    text-align: left;
    display: inline-block;
    padding: 20px 50px;
}

.archive {
    background-color: rgb(238, 238, 238);
    text-align: center;
    padding-bottom: 50px;
    padding-top: 20px;
}

.swiper {
    text-align: left;
    width: 100%;
    min-width: 200px;
    height: 175px;
}

.swiper-container {
    display: inline-block;
    text-align: left;
    width: 25%;
    min-width: 200px;
    height: 175px;
    vertical-align: top;
    margin-top: 40px;
}

.swiper-wrapper {
    padding: 20px 50px;
}

:root {
    --swiper-navigation-color: rgb(0, 0, 0);
    --swiper-navigation-size: 25px
}

.archive .archive-title {
    color: rgb(245, 137, 87);
    font-weight: bold;
    font-size: 1.2em;
    display: block;
    margin-bottom: 10px;
}

.slide-wrapper {
    width: 80%;
    overflow: hidden;
}

.archive .date {
    color: rgb(0, 0, 0);
    font-size: 0.8em;
    display: block;
    margin-bottom: 10px;
}

.archive a {
    margin-top: 5px;
    display: block;
}

.archive .description {
    overflow: hidden;
    width: 100%;
}

.archive .description ul {
    padding-left: 20px
}

.description p {
    line-height: 1.1em;
    font-size: 12px;
}
body {
    min-height: 100vh;
}