/* ######################### */
/* #         FONTS         # */
/* ######################### */

@font-face {
    font-family: 'Montserrat';
    src: url(../_fonts/Montserrat.woff2) format('woff2'),
        url(../_fonts/Montserrat.woff) format('woff'),
        url(../_fonts/Montserrat.ttf) format('truetype');
}

/* ######################### */
/* #        GENERAL        # */
/* ######################### */

* {
    margin: 0px;
    color: #262626;
    font-family: 'Montserrat';
    font-size: 11px;
    padding: 0px;
    box-sizing: border-box;
}

button {
    cursor: pointer;
}

/* ######################### */
/* #        HEADER         # */
/* ######################### */

body header {
    display: block;
    float: left;
    background-color: #000;
    padding: 7px 18px;
    width: 100%;

}

@media(min-width:1024px) {
    body header {
        padding: 23px 34px;
    }
}

header img {
    display: block;
    float: left;
    width: 57px;
}

@media(min-width:1024px) {
    header img {
        width: 120px;
    }
}

/* ######################### */
/* #         MAIN          # */
/* ######################### */

body main {
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: calc(100% - 38px);
}

@media(min-width:1024px) {
    body main {
        height: calc(100% - 96px);
    }
}

main .background-video {
    display: block;
    position: fixed;
    left: 0px;
    bottom: -38px;
    object-fit: cover;
    width: 100%;
    height: calc(100% + 38px);
    z-index: -1;
}

@media(min-width:1024px) {
    main .background-video {
        bottom: 0px;
        height: 100%;
    }
}

main .content-container {
    display: none;
    position: absolute;
    left: 0px;
    bottom: 0px;
    padding: 0px 18px;
    width: 100%;
    height: 100%;
}

main .content-container.index {
    counter-reset: parts-counter;
}

main .content-container.product {
    background-color: #454545;
}

@media(min-width:1024px) {
    main .content-container {
        padding: 0px 34px;
    }

    main .content-container.parts {
        pointer-events: none;
        z-index: 1;
    }

    main .content-container.product {
        background-color: transparent;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

.content-container.parts li {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 15px 0px 0px 15px;
    background-color: #5692D4;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    counter-increment: parts-counter;
    line-height: 16px;
    padding: 7px 14px 7px 38px;
    max-width: 140px;
}

.content-container.parts li.red {
    background-color: #C76A57;
}

@media(min-width:1024px) {
    .content-container.parts li {
        border-radius: 25px 0px 0px 25px;
        font-size: 22px;
        line-height: 26px;
        padding: 12px 16px 12px 60px;
        max-width: 225px;
    }
}

.content-container.parts li:before {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 50%;
    background-color: #2A2A2A;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    content: counter(parts-counter);
    line-height: 28px;
    width: 28px;
}

@media(min-width:1024px) {
    .content-container.parts li:before {
        top: 2px;
        left: 2px;
        font-size: 32px;
        line-height: 46px;
        width: 46px;
    }
}

.content-container h1,
.content-container h2 {
    display: block;
    float: left;
    margin-top: -38px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    line-height: 38px;
    width: 100%;
}

.content-container h2 {
    font-weight: 500;
}

@media(min-width:640px) {

    .content-container h1,
    .content-container h2 {
        font-size: 20px;
    }
}

@media(min-width:1024px) {

    .content-container h1,
    .content-container h2 {
        margin-top: -96px;
        font-size: 30px;
        line-height: 96px;
    }
}

@media(min-width:1280px) {

    .content-container h1,
    .content-container h2 {
        font-size: 40px;
    }
}

.content-container h2 span {
    color: inherit;
    font-size: inherit;
    font-weight: bold;
}

.content-container .sections-grid {
    display: grid;
    float: left;
    margin-top: 9px;
    grid-template-columns: repeat(3, 1fr);
    counter-reset: section-count;
    gap: 23px;
    width: 100%;
}

@media(min-width:1024px) {
    .content-container .sections-grid {
        margin-top: 15px;
    }
}

.content-container .section-container {
    display: flex;
    position: relative;
    align-items: stretch;
    padding: 1px;
}

@media(min-width:1024px) {
    .content-container .section-container {
        padding: 2px;
    }
}

.content-container .section-container.green {
    border: 1px solid #A6E47C;
    box-shadow: inset 0px 0px 0px 2px #5B9732;
}

.content-container .section-container.yellow {
    border: 1px solid #DCAD3A;
    box-shadow: inset 0px 0px 0px 2px #CB9A5B;
}

.content-container .section-container.red {
    border: 1px solid #d66048;
    box-shadow: inset 0px 0px 0px 2px #ac2d12;
}

@media(min-width:1024px) {
    .content-container .section-container.green {
        border: 2px solid #A6E47C;
        box-shadow: inset 0px 0px 0px 4px #5B9732;
    }

    .content-container .section-container.yellow {
        border: 2px solid #DCAD3A;
        box-shadow: inset 0px 0px 0px 4px #CB9A5B;
    }

    .content-container .section-container.red {
        border: 2px solid #d66048;
        box-shadow: inset 0px 0px 0px 4px #ac2d12;
    }
}

.section-container .section-content {
    display: block;
    float: left;
    background-position: center center;
    background-repeat: repeat-y;
    background-size: contain;
    padding: 6px 5px 20px;
    width: 100%;
}

@media(min-width:1024px) {
    .section-container .section-content {
        padding: 20px 26px 46px;
    }
}

.section-container.green .section-content {
    border: 1px solid #A6E47C;
    background-color: #7AC149;
    background-image: url(../_img/bg-green.webp);
}

.section-container.yellow .section-content {
    border: 1px solid #F9E8BE;
    background-color: #DCAD3A;
    background-image: url(../_img/bg-yellow.webp);
}

.section-container.red .section-content {
    border: 1px solid #fea796;
    background-color: #e3846f;
    background-image: url(../_img/bg-red.webp);
}

.section-content h3 {
    display: block;
    float: left;
    position: relative;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.58);
    padding-left: 32px;
    width: 100%;
}

@media(min-width:640px) {
    .section-content h3 {
        font-size: 14px;
        padding-left: 38px;
    }
}

@media(min-width:1024px) {
    .section-content h3 {
        font-size: 20px;
        line-height: 25px;
        padding-left: 68px;
    }
}

@media(min-width:1280px) {
    .section-content h3 {
        font-size: 28px;
        line-height: 37px;
        padding-left: 88px;
    }
}

.section-content h3:before {
    display: block;
    position: absolute;
    top: 0px;
    left: 1px;
    border-radius: 50%;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    content: counter(section-count, upper-alpha);
    counter-increment: section-count;
    text-shadow: none;
    line-height: 20px;
    width: 22px;
}

@media(min-width:640px) {
    .section-content h3:before {
        font-size: 18px;
        line-height: 26px;
        width: 28px;
    }
}

@media(min-width:1024px) {
    .section-content h3:before {
        font-size: 30px;
        line-height: 46px;
        width: 48px;
    }
}

@media(min-width:1280px) {
    .section-content h3:before {
        font-size: 45px;
        line-height: 70px;
        width: 72px;
    }
}

.section-container.green .section-content h3:before {
    border: 1px solid #A6E37C;
    background-color: #A6E37C;
    box-shadow: 0px 0px 0px 2px #5B9733, inset 0px 0px 0px 2px #D0FFAF;
}

.section-container.yellow .section-content h3:before {
    border: 1px solid #F2C555;
    background-color: #F2C555;
    box-shadow: 0px 0px 0px 2px #CB9A5B, inset 0px 0px 0px 2px #FFEEC7;
}

.section-container.red .section-content h3:before {
    border: 1px solid #F07C63;
    background-color: #F07C63;
    box-shadow: 0px 0px 0px 2px #AD2B12, inset 0px 0px 0px 2px #FEA796;
}

.section-content h3 span {
    display: block;
    color: inherit;
    font-size: inherit;
    font-weight: bolder;
    max-width: 150px;
}

@media(min-width:1024px) {
    .section-content h3 span {
        display: inline;
        max-width: 100%;
    }
}

.section-content ul,
.section-content ul.subproduct-1,
.section-content ul.subproduct-2,
.section-content ul.subproduct-3 {
    display: none;
}

.section-content ul.subproduct-1,
.section-content ul.subproduct-2,
.section-content ul.subproduct-3 {
    height: 0px;
}

@media(max-width:1023px) {

    .section-content ul.subproduct-1,
    .section-content ul.subproduct-2,
    .section-content ul.subproduct-3 {
        float: left;
        margin-top: 1px;
        margin-bottom: -1px;
        list-style: none;
        padding-left: 38px;
    }

    .section-content ul.subproduct-1 li,
    .section-content ul.subproduct-2 li,
    .section-content ul.subproduct-3 li {
        font-size: 12px;
    }
}

@media(min-width:1024px) {
    .section-content ul {
        display: block;
        float: left;
        margin-top: 30px;
        padding-left: 19px;
        width: 100%;
    }

    .section-content ul.subproduct-1,
    .section-content ul.subproduct-2,
    .section-content ul.subproduct-3 {
        position: absolute;
        top: 97px;
        left: 29px;
    }
}

.section-content ul li {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.58);
}

.section-content .section-btn {
    display: block;
    position: absolute;
    left: 50%;
    bottom: -15px;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.58);
    transform: translateX(-50%);
    line-height: 28px;
    width: 100px;
}

@media(min-width:1024px) {
    .section-content .section-btn {
        bottom: -25px;
        font-size: 22px;
        line-height: 48px;
        width: 156px;
    }
}

.green .section-content .section-btn {
    border: 1px solid #669B41;
    background-color: #4F8828;
    box-shadow: inset 0px 0px 0px 2px #CEFFAD;
}

.yellow .section-content .section-btn {
    border: 1px solid #a17913;
    background-color: #b98a17;
    box-shadow: inset 0px 0px 0px 2px #ffeec7;
}

.red .section-content .section-btn {
    border: 1px solid #ac2d12;
    background-color: #c76a57;
    box-shadow: inset 0px 0px 0px 2px #fea796;
}

.section-content .section-btn:before {
    color: inherit;
    font-size: 18px;
    content: '\0025B6\0000A0';
    text-shadow: inherit;
}

@media(min-width:1024px) {
    .section-content .section-btn:before {
        font-size: 28px;
    }
}

.content-container .back-btn {
    display: block;
    float: right;
    margin-top: -33px;
    margin-right: 1px;
    border: 1px solid #BDBDBD;
    border-radius: 6px;
    background-color: #77B3F1;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.58);
    line-height: 26px;
    width: 163px;
    box-shadow: 0px 0px 0px 1px #D6D6D6, inset 0px 0px 0px 2px #4A8EB2;
}

@media(min-width:1024px) {
    .content-container .back-btn {
        margin-top: -67px;
        font-size: 18px;
        line-height: 36px;
        width: 238px;
    }
}

.content-container .back-btn:before {
    color: inherit;
    font-size: 13px;
    content: '\0025C4\0000A0';
    text-shadow: inherit;
    line-height: 10px;
}

@media(min-width:1024px) {
    .content-container .back-btn:before {
        font-size: 18px;
    }
}

.content-container .product-container {
    display: grid;
    float: left;
    margin-top: 9px;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px;
    width: 100%;
}

@media(min-width:1024px) {
    .content-container .product-container {
        margin-top: 15px;
        grid-template-columns: 1fr;
        width: 32.5054%;
    }
}

.product-container .parts-container {
    display: flex;
    float: left;
    grid-column: span 2;
    width: 100%;
}

@media(min-width:1024px) {
    .product-container .parts-container {
        grid-column: span 1;
    }
}

.parts-container .parts-list {
    align-self: center;
    flex-basis: calc(100% - 165px);
    padding-right: 23px;
}

@media(min-width:1024px) {
    .parts-container .parts-list {
        flex-basis: 100%;
        padding: 7px 30px;
    }
}

.parts-list p,
.parts-list li {
    display: block;
    float: left;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.58);
    line-height: 13px;
    width: 100%;
}

@media(min-width:640px) {

    .parts-list p,
    .parts-list li {
        font-size: 12px;
        line-height: 15px;
    }
}

@media(min-width:1024px) {

    .parts-list p,
    .parts-list li {
        font-size: 22px;
        line-height: 27px;
    }
}

.parts-list li .subproduct-btn {
    display: block;
    float: left;
    margin-top: 6px;
    border: 1px solid #ac2d12;
    border-radius: 6px;
    background-color: #c76a57;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.58);
    line-height: 28px;
    padding: 0px 15px;
    box-shadow: inset 0px 0px 0px 2px #fea796;
}

@media(min-width:1024px) {
    .parts-list li .subproduct-btn {
        font-size: 14px;
        line-height: 38px;
        width: min(360px, 100%);
    }
}

@media(min-width:1400px) {
    .parts-list li .subproduct-btn {
        font-size: 22px;
        line-height: 48px;
    }
}

.parts-list li .subproduct-btn:after {
    color: inherit;
    font-size: 14px;
    content: '\0000A0\0025BA';
    text-shadow: inherit;
}

@media(min-width:1024px) {
    .parts-list li .subproduct-btn:after {
        font-size: 16px;
    }
}

@media(min-width:1400px) {
    .parts-list li .subproduct-btn:after {
        font-size: 22px;
    }
}

@media(max-width:1023px) {
    .parts-list p {
        display: none;
    }

    .red .parts-list li+li {
        display: inline;
        margin-right: 8px;
        width: auto;
    }

    .parts-list li .subproduct-btn {
        margin-top: 0px;
    }

    .parts-list li+li .subproduct-btn {
        margin-top: 10px;
    }
}

.product-container .video-btn {
    display: block;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.58);
    align-self: flex-start;
    flex-basis: auto;
    line-height: 28px;
    width: 165px;
}

.product-container .video-btn.subproduct-1,
.product-container .video-btn.subproduct-2,
.product-container .video-btn.subproduct-3 {
    display: none;
}

.green .product-container .video-btn {
    border: 1px solid #669B41;
    background-color: #4F8828;
    box-shadow: inset 0px 0px 0px 2px #CEFFAD;
}

.yellow .product-container .video-btn {
    border: 1px solid #AB872F;
    background-color: #B98A17;
    box-shadow: inset 0px 0px 0px 2px #FFEEC7;
}

.red .product-container .video-btn {
    border: 1px solid #AA523F;
    background-color: #C76A57;
    box-shadow: inset 0px 0px 0px 2px #F9B1A1;
}

@media(min-width:1024px) {
    .product-container .video-btn {
        position: absolute;
        top: calc(49.1269% + 25px);
        right: 34px;
        font-size: 18px;
        text-align: center;
        line-height: 38px;
        width: 310px;
    }
}

.product-container .video-btn span {
    display: inline;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

@media(max-width:1023px) {
    .product-container .video-btn span {
        display: none;
    }
}

.product-container .video-btn:before {
    display: inline-block;
    margin-left: -3px;
    margin-right: 4px;
    margin-bottom: -9px;
    background-image: url(../_img/play-btn.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 27px 27px;
    content: '';
    width: 27px;
    height: 27px;
}

@media(min-width:1024px) {
    .product-container .video-btn:before {
        margin-bottom: -7px;
    }
}

.product-section .product-description-container {
    display: block;
    position: absolute;
    top: 102px;
    left: 18px;
    right: 195px;
    bottom: 8px;
    padding: 1px;
}

.product-section.green .product-description-container {
    border: 1px solid #A6E47C;
    box-shadow: inset 0px 0px 0px 2px #5B9732;
}

.product-section.yellow .product-description-container {
    border: 1px solid #DCAD3A;
    box-shadow: inset 0px 0px 0px 2px #CB9A5B;
}

.product-section.red .product-description-container {
    border: 1px solid #d66048;
    box-shadow: inset 0px 0px 0px 2px #ac2d12;
}

@media(min-width:1024px) {
    .product-section .product-description-container {
        top: 15px;
        left: calc(32.5054% + 34px);
        right: 34px;
        bottom: auto;
        padding: 2px;
        height: 49.1269%;
    }

    .product-section.green .product-description-container {
        border: 2px solid #A6E47C;
        box-shadow: inset 0px 0px 0px 4px #5B9732;
    }

    .product-section.yellow .product-description-container {
        border: 2px solid #DCAD3A;
        box-shadow: inset 0px 0px 0px 4px #CB9A5B;
    }

    .product-section.red .product-description-container {
        border: 2px solid #d66048;
        box-shadow: inset 0px 0px 0px 4px #ac2d12;
    }
}

.product-description-container .product-description {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
}

@media(min-width:1024px) {
    .product-description-container .product-description {
        top: 2px;
        left: 2px;
        right: 2px;
        bottom: 2px;
    }
}

.green .product-description-container .product-description {
    border: 1px solid #A6E47C;
    background-color: #7AC149;
}

.yellow .product-description-container .product-description {
    border: 1px solid #F9E8BE;
    background-color: #DCAD3A;
}

.red .product-description-container .product-description {
    border: 1px solid #fea796;
    background-color: #e3846f;
}

.product-description .description-container {
    display: block;
    position: absolute;
    top: 9px;
    left: 13px;
    right: 13px;
    bottom: 21px;
    overflow: auto;
}

@media(min-width:1024px) {
    .product-description .description-container {
        top: 26px;
        left: 31px;
        right: 31px;
        bottom: 28px;
    }
}

.product-description .description-container::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.7);
}

.product-description .description-container::-webkit-scrollbar {
    width: 3px;
}

.product-description .description-container::-webkit-scrollbar-thumb {
    background-color: #fff;
}

.description-container h3 {
    display: block;
    float: left;
    font-size: 15px;
    font-weight: bolder;
    line-height: 19px;
    width: 100%;
}

@media(min-width:1024px) {
    .description-container h3 {
        font-size: 28px;
        line-height: 34px;
    }
}

.description-container p {
    display: block;
    float: left;
    margin-top: 7px;
    font-size: 12px;
    line-height: 18px;
    width: 100%;
}

@media(min-width:1024px) {
    .description-container p {
        margin-top: 14px;
        font-size: 20px;
        line-height: 28px;
    }
}

.product-section .product-image-container {
    display: block;
    position: absolute;
    top: 102px;
    right: 18px;
    bottom: 8px;
    background-color: #fff;
    width: 165px;
}

.product-section .product-image-container.subproduct-1,
.product-section .product-image-container.subproduct-2,
.product-section .product-image-container.subproduct-3 {
    display: none;
}

@media(min-width:1024px) {
    .product-section .product-image-container {
        top: calc(49.1269% + 74px);
        right: 34px;
        bottom: 74px;
        width: 310px;
    }
}

.product-image-container h3 {
    display: block;
    float: left;
    color: #000;
    font-size: 10px;
    font-weight: bolder;
    text-align: center;
    text-transform: uppercase;
    line-height: 26px;
    width: 100%;
}

.green .product-image-container h3 {
    border-bottom: 3px solid #4F8828;
}

.yellow .product-image-container h3 {
    border-bottom: 3px solid #DCAD3A;
}

.red .product-image-container h3 {
    border-bottom: 3px solid #E3846F;
}

@media(min-width:1024px) {
    .product-image-container h3 {
        font-size: 18px;
        line-height: 46px;
    }
}

.product-image-container .products {
    display: flex;
    position: absolute;
    top: 29px;
    left: 0px;
    bottom: 0px;
    text-align: center;
    justify-content: center;
    gap: 20px;
    align-items: center;
    padding: 10px;
    width: 100%;
}

@media(min-width:1024px) {
    .product-image-container .products {
        top: 49px;
    }
}

.product-image img {
    display: inline-block;
    width: 100%;
    max-width: 78px;
}

.product-image p {
    display: block;
    font-size: 10px;
    font-weight: bold;
    line-height: 13px;
    padding: 8px 0px;
    width: 100%;
}

@media(min-width:1024px) {
    .product-image p {
        font-size: 16px;
        line-height: 19px;
    }
}

.product-image button {
    display: inline-block;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.58);
    align-self: flex-start;
    flex-basis: auto;
    line-height: 28px;
    width: min(100%, 60px);
}

.product-image.contact button {
    width: min(100%, 120px);
}

.green .product-image button {
    border: 1px solid #669B41;
    background-color: #4F8828;
    box-shadow: inset 0px 0px 0px 2px #CEFFAD;
}

.yellow .product-image button {
    border: 1px solid #AB872F;
    background-color: #B98A17;
    box-shadow: inset 0px 0px 0px 2px #FFEEC7;
}

.red .product-image button {
    border: 1px solid #AA523F;
    background-color: #C76A57;
    box-shadow: inset 0px 0px 0px 2px #F9B1A1;
}

@media(min-width:1024px) {
    .product-image button {
        font-size: 17px;
        line-height: 38px;
        width: min(100%, 115px);
    }

    .product-image.contact button {
        width: min(100%, 165px);
    }
}

.product-image.contact button:before {
    display: inline-block;
    margin-right: 3px;
    margin-bottom: -5px;
    background-image: url(../_img/contact.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 22px 19px;
    content: '';
    width: 22px;
    height: 19px;
}

@media(min-width:1024px) {
    .product-image.contact button:before {
        margin-right: 5px;
        margin-bottom: -4px;
    }
}

main .video-popup {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.85);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-popup .video {
    display: block;
    position: absolute;
    top: 9px;
    left: 15px;
    bottom: 9px;
    border: 1px solid #707070;
    border-radius: 9px;
    width: 66%;
    overflow: hidden;
}

@media(min-width:1280px) {
    .video-popup .video {
        top: 23px;
        left: 43px;
        bottom: 192px;
        border-radius: 31px;
        width: 71.0958%;
    }
}

@media(min-width:1620px) {
    .video-popup .video {
        width: 77.3958%;
    }
}

.video-popup .video video {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.video-popup .video-info-container {
    display: block;
    position: absolute;
    top: 9px;
    right: 15px;
    bottom: 9px;
    width: 28.4483%;
}

@media(min-width:1280px) {
    .video-popup .video-info-container {
        top: 23px;
        right: 43px;
        bottom: 192px;
        width: 20.5458%;
    }
}

@media(min-width:1620px) {
    .video-popup .video-info-container {
        width: 16.1458%;
    }
}

.video-info-container .description-btn {
    display: block;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.58);
    align-self: flex-start;
    flex-basis: auto;
    line-height: 28px;
    width: 100%;
}

.green .video-info-container .description-btn {
    border: 1px solid #669B41;
    background-color: #4F8828;
    box-shadow: inset 0px 0px 0px 2px #CEFFAD;
}

.yellow .video-info-container .description-btn {
    border: 1px solid #AB872F;
    background-color: #B98A17;
    box-shadow: inset 0px 0px 0px 2px #FFEEC7;
}

.red .video-info-container .description-btn {
    border: 1px solid #AA523F;
    background-color: #C76A57;
    box-shadow: inset 0px 0px 0px 2px #F9B1A1;
}

@media(min-width:1024px) {
    .video-info-container .description-btn {
        font-size: 14px;
        line-height: 38px;
    }
}

.video-info-container .description-btn:before {
    display: inline-block;
    margin-right: 7px;
    margin-bottom: -5px;
    background-image: url(../_img/desc-btn.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 23px 20px;
    content: '';
    width: 23px;
    height: 20px;
}

.video-info-container .video-info {
    display: block;
    position: absolute;
    top: 36px;
    left: 0px;
    bottom: 0px;
    background-color: #fff;
    width: 100%;
}

@media(min-width:1024px) {
    .video-info-container .video-info {
        top: 54px;
    }
}

.video-info h3 {
    display: block;
    float: left;
    color: #000;
    font-size: 10px;
    font-weight: bolder;
    text-transform: uppercase;
    line-height: 26px;
    padding: 0px 9px;
    width: 100%;
}

.green .video-info h3 {
    border-bottom: 3px solid #4F8828;
}

.yellow .video-info h3 {
    border-bottom: 3px solid #DCAD3A;
}

.red .video-info h3 {
    border-bottom: 3px solid #E3846F;
}

@media(min-width:1024px) {
    .video-info h3 {
        font-size: 18px;
        line-height: 46px;
        padding: 0px 17px;
    }
}

.video-info .video-text {
    display: block;
    position: absolute;
    top: 34px;
    left: 9px;
    right: 7px;
    bottom: 14px;
    overflow: auto;
}

@media(min-width:1024px) {
    .video-info .video-text {
        top: 72px;
        left: 17px;
        right: 17px;
        bottom: 17px;
    }
}

.video-info .video-text::-webkit-scrollbar-track {
    background-color: rgba(190, 190, 190, 0.5);
}

.video-info .video-text::-webkit-scrollbar {
    width: 3px;
}

.video-info .video-text::-webkit-scrollbar-thumb {
    background-color: #BEBEBE;
}

.video-info .video-text p {
    display: block;
    float: left;
    font-size: 11px;
    line-height: 14px;
    width: 100%;
}

.video-info .video-text p+p {
    margin-top: 14px;
}

@media(min-width:1024px) {
    .video-info .video-text p {
        font-size: 16px;
        line-height: 18px;
    }

    .video-info .video-text p+p {
        margin-top: 18px;
    }
}

main .flip-banner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 13px;
    background-color: #000;
    background-image: url(../_img/flip-smph.webp);
    background-repeat: no-repeat;
    background-position: bottom 82px center;
    background-size: 132px 132px;
    transform: translate(-50%, -50%);
    padding: 60px 44px 238px;
    width: 87%;
    max-width: 350px;
}

.flip-banner p {
    display: block;
    float: left;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    line-height: 34px;
    width: 100%;
}

/* ######################### */
/* #        LOADING        # */
/* ######################### */

.loading {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    z-index: 1;
}

.loading-logo {
    width: 300px;
    height: 120px;

    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.loading-logo svg {
    position: relative;
    left: 0;
    top: -250px;
    bottom: 0;
    right: 0;
    margin: 0;
}

.draw {
    animation: draw 6s ease-in-out;
    stroke: #5692D4;
}

@keyframes draw {
    0% {
        stroke-dasharray: 0 400;
        stroke-dashoffset: 200;
        fill-opacity: 0;
        stroke-width: 2;

    }

    37% {
        stroke-dasharray: 200 0;
        stroke-dashoffset: 200;
        fill-opacity: 0;
        stroke-width: 2;
    }

    50% {
        fill-opacity: 1;
        stroke-width: 0;
    }

    90% {
        fill-opacity: 1;
        stroke-width: 0;
    }

    100% {
        fill-opacity: 0;
        stroke-width: 0;
    }
}

.start-btn {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 100px;
    border: none;
    background-color: transparent;
    background-image: url(../_img/play-btn.webp);
    background-repeat: no-repeat;
    background-position: center center;
    transform: translate(-50%,-50%);
    width: 54px;
    height: 54px;
}