/**
// SECTION 00. COMMON
// 
**/

html {
    min-height: 100%;    
}

body {
    height: 100%; 
    overflow-x: hidden;
    background-color: #15212F;
}

html, body {
    position: relative;
    font-size: 1em;
    font-family: 'Roboto Condensed', sans-serif;
}

body * {
    font-family: 'Roboto Condensed', sans-serif;
}

*:focus {
    outline: 0 !important;
}

:-moz-any-link:focus {
    outline: none;
}

a[href^="tel"],
a[href^="mailto"] {
    color: inherit; 
    text-decoration: none !important; 
}

.hidden {
    display: none;
}

.form-control:focus {
    border-color: var(--color-green) !important;
    box-shadow: 0 0 0 0.2rem var(--color-green);
} 

.mt1 {
    margin-top: 1rem !important;
}

.mt2 {
    margin-top: 2rem !important;
}

.mt3 {
    margin-top: 3rem !important;
}

.mt4 {
    margin-top: 4rem !important;
}

@media (max-width: 991.98px) {
    .mt1 {
        margin-top: .5rem !important;
    }
    
    .mt2 {
        margin-top: 1rem !important;
    }
    
    .mt3 {
        margin-top: 2rem !important;
    }
    
    .mt4 {
        margin-top: 2.5rem !important;
    }
}

.hint {
    position: relative;
    padding-left: 2.75rem;
}

.hint::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/blink.svg); 
}

.fancybox-caption__body {
    margin: 0 auto;
    max-width: 900px;
    font-size: 1.125rem;
}

p.saved {
    display: inline-block;
    position: relative;
    margin: 0 0 2rem 0;
    padding: .5rem 0;
    text-align: left;
}

p.saved::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 0.125rem;
    background-color: var(--color-primary);
}

p.error {
    position: relative;
    display: inline-block;
    margin: 0 0 2rem 0;
    padding: .5rem 0;
    text-align: left;
}

p.error::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 0.125rem;
    background-color: var(--color-action-1);
}

/**
// SECTION 00.1 Colors
**/
:root {
    --color-primary: #EBD049;
    --color-secondary: #596776;    
    --color-action: #FAB420;
    --color-hover: #C32668;
    --color-button: #C32668;
    --color-button-secondary: #4D4D4D;
    --color-posuvne-brany: #FAB420;
    --color-rotacni-brany: #E83D4D;
    --color-garazova-vrata: #009FE3;
    --color-dopravni-zavory: #833F91;
    --color-ovladaci-prvky: #0DAA6B;
    --color-ridici-jednotky: #EA5927;
    --color-sady: #B2B2B2;
    --color-automaticke-sloupy: #E1B000;
    --color-poloautomaticke-sloupy: #E2334A;
    --color-odnimatelne-sloupy: #D881A8;
    --color-pevne-sloupy: #009BA8;
    --color-prislusenstvi: #00A783;
    --color-action-1: #FF3838;
    --color-background: #15212F;
}

/**
// !SECTION
**/

/**
// SECTION 00.2 Fonts & headings
**/
.f-medium {
    font-weight: 500 !important;    
}

.f-action {
    font-weight: 500 !important; 
    color: var(--color-action);   
}

.text {
    margin: 0;
    padding: 0 0 0.5rem 0;
}

.t1 {
    font-size: 1rem;
}

.t125 {
    font-size: 1.25rem;
}

h1 {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 2.625rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-action);
}

h1.black {
    color: #000000;
}

h1.done::before {
    content: "";
    position: absolute;
    left: -2rem;
    top: calc(50% - 0.59375rem - 1.780rem);
    display: block;
    width: 1.1875rem;
    height: 1.1875rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/icon-check-colour.svg);    
}

h1.line {
    display: flex;
    position: relative;
}

h1.line span {
    position: relative;
}

h1.line span:last-child {    
    flex-grow: 1;
    padding-left: 1.75rem;
} 

h1.line span:last-child::after {
    content: "";
    position: absolute;
    left: 1.75rem;
    top: 0;
    display: block;
    width: calc(100% - 1.75rem);
    height: 1px;
    background-color: #000000;
}

@media (max-width: 991.98px) {
    h1.done {
        padding-top: 4rem !important;
    }
    h1.done::before {
        left: 0;
        top: 0;
        width: 3rem;
        height: 3rem;
    }
}

h2.black {
    color: #000000 !important;
}


/**
// !SECTION
**/

/**
// SECTION 00.3 Dialogs
**/
.dialog {
    min-width: 44.375rem;
    max-width: 44.375rem;
    padding: 3.37rem 1.88rem .75rem 1.88rem;
}

.dialog h2 {
    display: flex;
    position: relative;
    margin: 0 0 5rem 0;
    padding: 0;
    color: #000;
    font-size: 2.625rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.dialog h2 span {
    position: relative;
}

.dialog h2 span:last-child {    
    flex-grow: 1;
    padding-left: 1.75rem;
} 

.dialog h2 span:last-child::after {
    content: "";
    position: absolute;
    left: 1.75rem;
    top: 0;
    display: block;
    width: calc(100% - 1.75rem);
    height: 1px;
    background-color: #000000;
}

@media (max-width: 991.98px) {
    .dialog {
        min-width: unset;
        padding: 1rem 0;
    }
    .dialog h2 {
        display: flex;
        position: relative;
        margin: 0 0 2.5rem 0;
        padding: 0;
        color: #000;
        font-size: 2.625rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-transform: uppercase;
    }
}

/**
// !SECTION
**/

/**
// SECTION 00.4 Forms
**/

.form-row > div {
    position: relative !important;
}

.form-row > div.required::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.3125rem);
    right: 0;
    display: block;
    width: 0.625rem;
    height: 0.625rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/star.svg);
}

.form-row.textarea > div.required::after {
    top:.25rem;
    right: 0;
}

.form-row input {
    position: relative;
}

.form-radio input[type=radio] {
    position: relative;
    appearance: none;
    border: none;
    margin: 0;
    padding: 0;
    display: block;
    height: 100%;
}

.form-radio input[type=radio]::before { 
    content: "";
    position: absolute;
    top: calc(50% - 0.4065rem);
    left: 3px;
    display: block;
    width: 13px;
    height: 13px;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.3s;
}

.form-radio input[type=radio]:checked::before {
    background-color: var(--color-action);
}

.form-radio input[type=radio]::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.59375rem);
    left: 0;
    display: block;
    width: 1.1875rem;
    height: 1.1875rem;
    border-radius: 50%;
    border: 1px solid var(--color-action);
}	

.form-radio input[type=radio]:checked::after {
    border: 1px solid var(--color-action);
}

.form-row input[type="text"], 
.form-row input[type="password"] {
    margin: 0 0 1.87rem 0;
    padding: 0;
    height: 2rem;
    border: none;
    border-bottom: 1px solid #DFDFDF;
    border-radius: 0 !important;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
}

.form-row input:-webkit-autofill,
.form-row input:-webkit-autofill:hover, 
.form-row input:-webkit-autofill:focus,
.form-row textarea:-webkit-autofill,
.form-row textarea:-webkit-autofill:hover,
.form-row textarea:-webkit-autofill:focus,
.form-row select:-webkit-autofill,
.form-row select:-webkit-autofill:hover,
.form-row select:-webkit-autofill:focus {
    /*border: 1px solid green;*/
    /*-webkit-text-fill-color: var(--color-secondary);*/
    -webkit-box-shadow: none;
    transition: background-color 5000s ease-in-out 0s;
}

.form-row textarea {
    position: relative;
    margin: 0 0 1.87rem 0;
    padding: .25rem 0 0 0;
    border: none;
    border-bottom: 1px solid #DFDFDF;
    border-radius: 0 !important;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: bold;
    line-height: normal;
}

.form-row label {
    display: block;
    position: absolute;
    left: 0;
    top: calc(50% - .5rem - 1px);
    pointer-events: none;
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    transition: .2s top;
}

.form-row.textarea label {
    top: 0;
}

.form-row ::placeholder {
    color: #000;
    font-size: 1rem;
    font-style: normal;
    /*font-weight: 300;*/
    line-height: normal;
}

.form-row input[type="text"]:focus + label,
.form-row input[type="text"].has-value + label,
.form-row input[type="text"].is-invalid + label,
.form-row input[type="password"]:focus + label,
.form-row input[type="password"].has-value + label,
.form-row input[type="password"].is-invalid + label,
.form-row input:autofill + label,
.form-row input:-webkit-autofill + label,
.form-row textarea:autofill + label,
.form-row textarea:-webkit-autofill + label
{
    top: calc(-50% - .25rem);
}

.form-row.textarea textarea:focus + label,
.form-row.textarea textarea.has-value + label {
    top: -1.25rem;
}

.form-row input[type="text"].is-invalid {
    margin-bottom: 4.5rem;;
}

.form-row input.is-valid::after {
    display: none;
}

.form-row .invalid-feedback {
    position: absolute;
    top: calc(100%);
}

.form-check-box {
    display: block;
    position: relative;
    margin: 0;
    padding: 0 0 0 2.2185rem;
    
    color: #000;
    font-size: 1rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    cursor: pointer;
}

.form-check-box.disabled {
    color: #ccc !important;
}

.form-check-box input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.form-check-box .checkmark {
    position: absolute;
    top: calc(50% - 0.59375rem);
    left: 0;
    width: 1.1875rem;
    height: 1.1875rem;
    background: #FFFFFF;
    border: 1px solid var(--color-action);
    box-sizing: border-box;

    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    transition-property: all;
}

/*
.form-check-box:hover input~.checkmark {
    background-color: #ccc;
}
*/

.form-check-box input[disabled]~.checkmark {
    background-color: #ccc;
}

.form-check-box input:checked~.checkmark {
    background-color: var(--color-action);
}

.form-check-box .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 0;
    top: 0;
    width: 1.1875rem;
    height: 1.1875rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/icon-check.svg);
}

.form-check-box input:checked ~ .checkmark::after {
    display: block;
}

.button {
    position: relative;
    display: inline-block;
    min-width: 9rem;
    padding: 1rem;
    border: 0;
    background: none;
    background-color: #000;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    color: #FFF;
    cursor: pointer;
}

.button.white {
    color: #000;
    background-color: #FFF;
}

.button.action {
    background-color: var(--color-action);
}

.button.primary {
    background-color: var(--color-button);
}
.button.small {
    min-width: 6.5rem;
}

.button.add-to-cart {
    min-width: 7.5rem;
    padding: .5rem 1rem .5rem 1rem;
    background-color: var(--color-action);
}

.button.in-cart {
    min-width: 7.5rem;
    padding: .5rem 1rem .5rem 1.91rem;
    background-color: var(--color-primary);
}

.button.in-cart::before {
    content: "";
    position: absolute;
    left: 0.44rem;
    top: calc(50% - .5rem);
    display: block;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/icon-check.svg);
}

.button.download {
    background-color: var(--color-primary);
}

/**
// !SECTION
**/

/**
// !SECTION
**/

/**
// SECTION 01. HEADER
// 
**/
#header {
    display: flex;
    width: 100%;
    height: 5.75rem;
    padding: 0 3rem;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-primary);
}

#header > div:last-child {
    display: none;
}

#header > div.menu-tools { 
    display: none;
}

#header .logo {
    display: block;
    width: 7.6875rem;
    height: 3.75rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/logo.png);
    font-size: 0;
}

#header .menu {
    position: relative;
    display: flex;
    flex-grow: 3;
    justify-content: flex-end;
    height: 5.75rem;
}

#header .menu > ul {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

#header .menu > ul > li {
    position: relative;
    height: 5.75rem;
    margin: 0;
    padding: 0;
}

#header .menu  > ul > li > a {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0 1.315rem;
    color: #FFF;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .25s;
    z-index: 1;
}

#header .menu  > ul > li:last-child > a {
    margin-right: 2.630rem;
}

#header .menu  > ul > li > a:hover {
    color: #000;
    cursor: pointer;
}

#header .menu-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.13rem;
    margin: 0;
    padding: 0;
}

#header .menu-tools > a {
    text-decoration: none;
}

#header a.menu-switch {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/icon-menu.svg);
    font-size: 0;
    cursor: pointer;
}

#header .menu-tools a.favorite {
    width: 1.25rem;
    height: 1.25rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/icon-heart.svg);
    font-size: 0;
}

#header .menu-tools a.login,
#header .menu-tools a.shopping-cart {
    position: relative;
    padding: 0.63rem 1.25rem 0.63rem 2.432rem;
    border-radius: 25px;
    border: 1px solid #FFF;
    color: #FFF;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: 0;
    z-index: 1;
}

#header .menu-tools a.login::before,
#header .menu-tools a.shopping-cart::before {
    content: "";
    position: absolute;
    left: 0.63rem;
    top: calc(50% - 0.65625rem);
    display: block;
    width: 1.3125rem;
    height: 1.3125rem;
    background-repeat: no-repeat;
    background-size: contain;
}

#header .menu-tools a.login::before {
    background-image: url(../gfx/icon-user.svg);
}

#header .menu-tools a.shopping-cart::before {
    background-image: url(../gfx/icon-cart.svg);
}

#header .dropdown {
    display: none;
    position: absolute;
    top: 5.75rem;
    left: -3.185rem;
    padding: 2.5rem 4.5rem;
    background-color: var(--color-primary);
    text-align: left;
    z-index: 999;
}

#header .dropdown ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#header .dropdown ul li {
    margin: 0;
    padding: 0;
}

#header .dropdown ul li a {
    display: block;
    padding: 0.750rem 0;
    color: #000;
    font-size: 1.125rem;
    font-weight: 400;
    text-decoration: none;
    transition: color .25s;
}

#header .dropdown ul li a:hover {
    color: var(--color-hover);
}

#header .dropdown .menu-products {
    display: flex;
    width: 100%;
    position: relative;
}

#header .dropdown .menu-products > div {
    flex: 1;
    width: 20rem;
}

#header .dropdown .menu-products h2 {
    position: relative;
    display: flex;
    width: 100%;
    margin: 0 0 2.88rem 0;
    padding: 0;
    color: #FFF;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
}

#header .dropdown .menu-products h2 > span:first-child {
    padding-right: .86rem;
}

#header .dropdown .menu-products h2 > span:last-child {
    flex-grow: 1;
    border-top: 1px solid #FFF;
}

#header .dropdown .menu-products > div:first-child {
    padding-right: 4rem;
}

@media (max-width: 991.98px) {
    body {
        padding-top: 3rem;
    }
    #header {
        position: fixed;
        top: 0;
        height: 3rem;
        padding: 0.25rem 0.63rem;
        z-index: 999;
    }

    #header > div:last-child {
        display: block;
    }

    #header > div.menu-tools {
        display: flex;
        flex-grow: 1;
        padding-right: 1rem;
    }

    #header .logo {
        width: 4rem;
        height: 1.625rem;
        background-image: url(../gfx/logo-sm.png);
    }

    #header .menu {
        display: none;
        position: absolute;
        top: 3rem;
        left: 0;
        width: 100%;
        height: unset;
        padding: 1rem 0 3rem 0;
        background-color: var(--color-primary);
        z-index: 2000;
        overflow-y: scroll;
        position: absolute;
        height: 100vh;
    }

    #header a {
        text-decoration: none;
    }

    #header .menu > ul {
        position: relative;
        display: block;
    }

    #header .menu > ul > li,
    #header .menu > ul > li > a {
        height: unset;
        color: #FFF;
    }

    #header .menu > ul > li {
        border-bottom: 1px solid #868686;
    }

    #header .menu > ul > li.submenu::after {
        content: "";
        position: absolute;
        right: 1rem;
        top: 1.25rem;
        display: block;
        width: 1rem;
        height: 1rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../gfx/icon-arrow-down.svg);
        transition: transform .25s;
    }

    #header .menu > ul > li.submenu.active::after {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);    
    }

    #header .menu > ul > li.submenu a {
        color: #FFF;
    }

    #header .menu > ul > li.submenu.active a {
        color: #000;
    }

    #header .menu > ul > li > a {
        padding: 1rem 0;
    }

    #header .dropdown {
        display: none;
        position: relative;
        top: unset;
        left: unset;
        padding: 0 0 1rem 1rem;
    }

    #header .dropdown ul li a {
        padding: 0.35rem 1.315rem 0.35rem 1rem; 
    }

    #header .dropdown .menu-products {
        display: block;
        width: 100%;
        padding: 0;
    }
    
    #header .dropdown .menu-products > div {
        display: block;
        flex: unset !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    #header .dropdown .menu-products > div > h2 {
        display: flex;
        margin: 0;
        padding-top: 1rem;        
        padding-left: 1rem;
        padding-bottom: 1rem;
    }

    #header .menu .menu-tools {
        position: relative;
        display: block;
        align-items: unset;
        justify-content: unset;
        gap: unset;
        margin: 2.875rem 0 0 0;
        padding: 0 1.315rem;
    }

    #header .menu .menu-tools > a {
        position: relative;
        display: block;
        width: 100%;
        height: unset;
        text-align: center;
        margin-bottom: 1rem;
        padding: 0.63rem 1.25rem 0.63rem 2.432rem;
        border-radius: 25px;
        border: 1px solid #FFF;
        color: #FFF;
        font-size: 0.875rem;
        font-weight: 500;
        text-transform: uppercase;
        text-decoration: 0;
        z-index: 1;        
    }
    #header .menu .menu-tools > a::before {
        display: none;
    }

    #header .menu .menu-tools > a > span {
        position: relative;
    }
    #header .menu .menu-tools > a > span::before {
        content: "";
        position: absolute;
        left: -2.3125rem;
        top: calc(50% - 0.65625rem);
        display: block;
        width: 1.3125rem;
        height: 1.3125rem;
        background-repeat: no-repeat;
        background-size: contain;
    }

    #header .menu .menu-tools > a.shopping-cart {
        display: none;
    }

    #header .menu .menu-tools > a.favorite {
        width: unset;
        height: unset;
        border: none;
        background-image: unset;
        text-align: center;
    }

    #header .menu .menu-tools > a.favorite > span::before {
        background-image: url(../gfx/icon-heart.svg);
    }

    #header .menu .menu-tools > a.login > span::before {
        background-image: url(../gfx/icon-user.svg);
    }
}

/**
// !SECTION
**/

/**
// SECTION 02. FOOTER
// 
**/
#footer {
    padding: 5.25rem 0 2.75rem 0;
    background-color: #15212F;
}

#footer h3 {
    position: relative;
    margin: 0 0 2.37rem 0;
    padding: 0;
    color: #FFF;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
}

#footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#footer ul li {
    margin: 0;
    padding: .25rem 0;
}

#footer ul li a {
    display: block;
    color: #FFF;
    font-size: 1.125rem;
    font-weight: 400;
    text-decoration: none;
    transition: color .25s;
}

#footer ul li a:hover {
    color: var(--color-hover);
}

#footer ul.contacts li a {
    position: relative;
    padding-left: 2.5rem;
}

#footer ul.contacts li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.6875rem);
    display: block;
    width: 1.375rem;
    height: 1.375rem;
    background-repeat: no-repeat;
    background-size: contain;
}

#footer ul.contacts li.mail a::before {
    background-image: url(../gfx/icon-mail-w.svg);
}

#footer ul.contacts li.phone a::before {
    background-image: url(../gfx/icon-phone-w.svg);
}

#footer ul.contacts li {
    display: block;
    padding-bottom: 1rem;
}

#footer .address {
    position: relative;
}

#footer .address::before {
    content: "";
    position: absolute;
    left: 0;
    top: .25rem;
    display: block;
    width: 1.375rem;
    height: 1.375rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/icon-pin-w.svg);
}

#footer .address p {
    margin: 0;
    padding: 0 0 .75rem 2.5rem;
    color: #FFF;
}

#footer .copyright {
    padding-top: 3.5rem;
    color: #FFF;
    font-size: 0.875rem;
    text-align: center;
}

#footer .copyright span {
    color: var(--color-secondary);
}

#footer .partners {
    display: flex;
    width: 100%;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 3.5rem;
}

#footer .partners a {
    display: block;
    height: 1.315rem;
    font-size: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

#footer .partners a.visa {
    width: 2.5rem;
    background-image: url(../gfx/logo-visa.png);
}

#footer .partners a.mc {
    width: 2.5rem;
    background-image: url(../gfx/logo-mastercard.svg);
}

#footer .partners a.ppl {
    width: 2.5rem;
    background-image: url(../gfx/logo-ppl.png);
}

#footer .partners a.toptrans {
    width: 2.5rem;
    background-image: url(../gfx/logo-toptrans.png);
}

@media (max-width: 991.98px) {
    #footer .container {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        margin-right: auto;
        margin-left: auto;
        max-width:unset;
    }

    #footer .container > div {
        width: 100% !important;
        margin: 0;
        padding: 0;
    }

    #footer .container > div > div {
        margin: 0;
        padding: 0;
    }
    
    #footer .footer-info {
        display: none;
        padding: 1rem 1.5rem; 
    }

    #footer h3 {
        display: block;
        margin: 0;
        padding: 1.2rem 1.5rem;
        border-bottom: 1px dotted #FFF;
        cursor: pointer;
    }

    #footer h3::after {
        content: "";
        position: absolute;
        right: 1rem;
        top: 1.325rem;
        display: block;
        width: 1rem;
        height: 1rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../gfx/icon-arrow-down.svg);
        transition: transform .25s;
    }

    #footer h3.active::after {
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);    
    }

    #footer h3.active {
        border-bottom: none;
    }
}

/**
// !SECTION
**/

/**
// SECTION 03. CONTENT
// 
**/
#content {
    position: relative;
    background-color: #FFF;
}

.tag {
    padding: 0.36rem 0.63rem;
    border-radius: 6px;
    border: 1px solid;
    font-size: 1rem;
    text-transform: uppercase;
}

p.annotation {
    color: #FFF;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


/**
// !SECTION
**/

/**
// SECTION 04. HOMEPAGE
// 
**/
.carousel-inner {
    background-color: #FFF;
}
.carousel-item {
    padding: 3.5rem 2rem;
}
.carousel-indicators button {
    background-color: var(--color-button) !important;
}

#carousel {
    height: 52rem;
}

#carousel .carousel-item-background-box {
    height: 100%;
}

#carousel h2 {
    margin: 0;
    padding: 1rem 0 0 0;
    font-size: 6rem;
    font-weight: 700;
}

#carousel p {
    margin: 0 0 2rem 0;
    padding: 0;
}

#carousel .carousel-item.a-color-1 span,
#carousel .carousel-item.a-color-1 h2,
#carousel .carousel-item.a-color-1 .button {
    color: var(--color-action-1) !important;
}
#carousel .carousel-item.a-color-1 .button {
    background-color: var(--color-action-1);
    color: #FFF !important;
}

#carousel .carousel-item.a-color-2 span,
#carousel .carousel-item.a-color-2 h2,
#carousel .carousel-item.a-color-2 .button {
    color: var(--color-background) !important;
}
#carousel .carousel-item.a-color-2 .button {
    background-color: var(--color-background);
    color: #FFF !important;
}


#carousel .carousel-item.a-color-3 h2,
#carousel .carousel-item.a-color-3 .button,
#carousel .carousel-item.a-color-3 p {
    color: var(--color-action) !important;
}

#carousel .carousel-item.a-color-3 span,
#carousel .carousel-item.a-color-3 p 
{
    color: #fff !important;
}

#carousel .carousel-item.a-color-3 .button {
    background-color: var(--color-action);
    color: #FFF !important;
}

#carousel .slide1 {
    background-color: #D9D9D9;
    background-image: url(../img/slide1.png);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: 55% auto;
}

#carousel .slide2 {    
    background: linear-gradient(180deg, #EFE4F1 0%, rgba(217, 217, 217, 0.00) 100%);    
}

#carousel .slide2 .carousel-item-background-box {
    background-image: url(../img/slide2.png);
    background-repeat: no-repeat;
    background-position: 80% center;
    background-size: 55% auto;   
}

#carousel .slide3 {    
    background: #272727;
}

#carousel .slide3 .carousel-item-background-box {
    background-image: url(../img/slide3.png);
    background-repeat: no-repeat;
    background-position: 80% center;
    background-size: auto 80%;   
}

@media (max-width: 991.98px) {
    #carousel h2 {
        font-size: 3rem;
    }
}

@media (max-width: 767.98px) {
    #carousel, .carousel-inner, .carousel-item {  
        height: 24rem !important;
    }
    .carousel-item {
        padding: 3.5rem 4rem;
    }
}

@media (max-width: 575.98px) {
    #carousel, .carousel-inner, .carousel-item {  
        height: 24rem !important;
    }
    .carousel-item {
        padding: 2.5rem 3rem;
    }
    #carousel .slide1 {
        background-position: 100% 82%;
        background-size: 55% auto;
    }
}

@media (max-width: 390px) {
    #carousel, .carousel-inner, .carousel-item {  
        height: 24rem !important;
    }
    .carousel-item {
        padding: 2.5rem 2rem;
    }
    #carousel .slide1 {
        background-position: 100% 82%;
        background-size: 55% auto;
    }
    #carousel .slide2 .carousel-item-background-box {
        background-position: 100% 100%;
    }
    #carousel .slide3 .carousel-item-background-box {
        background-size: 55% auto;
        background-position: 100% 100%; 
    }
}

@media (min-width: 768px) {
    #carousel, .carousel-inner, .carousel-item {  
        height: 28rem !important;
    }
    .carousel-item {
        padding: 3.5rem 6rem;
    }
}

@media (min-width: 992px) {
    #carousel, .carousel-inner, .carousel-item {  
        height: 32rem !important;
    }
    .carousel-item {
        padding: 3.5rem 6rem;
    }
}

@media (min-width: 1200px) {
    #carousel, .carousel-inner, .carousel-item {  
        height: 38rem !important;
    }
    .carousel-item {
        padding: 3.5rem 8rem;
    }
}

@media (min-width: 1362px) {
    #carousel, .carousel-inner, .carousel-item {  
        height: 42rem !important;
    }
}

@media (min-width: 1400px) {
    .carousel-item {
        padding: 5.5rem 8rem;
    }
}

@media (min-width: 1500px) {
    #carousel, .carousel-inner, .carousel-item {  
        height: 52rem !important;
    }
    #carousel .slide1 {
        background-color: #D9D9D9;
        background-image: url(../img/slide1.png);
        background-repeat: no-repeat;
        background-position: 90% 100%;
        background-size: auto 90%;
    }
}

.banners-50 {
    display: flex;
}

.banners-50 > div {
    flex: 1;
    min-height: 49rem;
}

.banner {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
}

.banner h2 {
    display: block;
    margin: 0;
    padding: 1rem 0 0 0;
    font-size: 6rem;
    font-weight: 700;
    color: #fff;
}

.banner h2 > span {
    display: inline-block;
    font-size: 2rem;
    margin: 0;
    padding: 0;
}

.banner p {
    display: block;
    margin: 0 0 2rem 0;
    padding: 0;
    color: #FFF;
}

.banner .tag {
    border-color: #FFF;
    color: #FFF;
}

.banner-left > div {
    position: absolute;
    right: 1rem;
    bottom: 11rem;
    max-width: 18rem;
}

.banner-right > div {
    position: absolute;
    left: 3.19rem;
    top: 5rem;
    max-width: 18rem;
}

.banner-talos {
    background-image: url(../img/banner-talos.png);
    background-color: #000;
    background-position: 0% 100%;
}

.banner-zero {
    background-image: url(../img/banner-zero.png);
    background-color: #4C6971;
    background-position: 0% 100%;
    background-size: contain;
}

@media (max-width: 991.98px) {
    .banners-50 {
        display: block;
    }
    
    .banners-50 > div {
        flex: unset;
        min-height: 38rem;
    }

    .banner-right > div {
        left: 1rem;
    }
    .banner-talos {
        background-position: 100% 0%;
    }
    
}

/**
// !SECTION
**/

/**
// SECTION 05. CATALOG
// 
**/
#catalog {
    min-height: 100vh;
    position: relative;
    padding-top: 4.69rem;
    padding-bottom: 4.69rem;
    background-color: #FFF;
}

#catalog.set {
    padding-top: 0;
}

#content.catalog h1 {
    padding: 0 0 3.56rem  0;
}

.catalog-menu-box {
    position: absolute;
    top: 4.69rem;
    left: 0;
    height: 100%;
    z-index: 2;
}

.catalog-menu {
    display: flex;
    position: sticky;
    top: 4.69rem;
    left: 0;
    flex-direction: column;
    gap: .25rem;
    width: 4.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 2;
}

.catalog-menu li {
    position: relative;
    margin: 0;
    padding: 0;
}

.catalog-menu li > a {
    position: relative;
    display: block;
    width: 3.25rem;
    height: 2.875rem; 
    font-size: 0;
    background-color: #000;            
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transition: all .25s ease-in-out;  
    color: #000;   
    z-index: 2;
}

.catalog-menu li > a.cat-posuvne-brany {
    background-color: var(--color-posuvne-brany);
    background-image: url(../gfx/cat-1.png);
}
.catalog-menu li > a.cat-rotacni-brany {
    background-color: var(--color-rotacni-brany);
    background-image: url(../gfx/cat-2.png);
}
.catalog-menu li > a.cat-garazova-vrata {
    background-color: var(--color-garazova-vrata);
    background-image: url(../gfx/cat-3.png);
}
.catalog-menu li > a.cat-dopravni-zavory {
    background-color: var(--color-dopravni-zavory);
    background-image: url(../gfx/cat-4.png);
}
.catalog-menu li > a.cat-ovladaci-prvky {
    background-color: var(--color-ovladaci-prvky);
    background-image: url(../gfx/cat-5.png);
}
.catalog-menu li > a.cat-ridici-jednotky {
    background-color: var(--color-ridici-jednotky);
    background-image: url(../gfx/cat-6.png);
}
.catalog-menu li > a.cat-sady {
    background-color: var(--color-sady);
    background-image: url(../gfx/cat-7.png);
}
.catalog-menu li > a.cat-automaticke-sloupy {
    background-color: var(--color-automaticke-sloupy);
    background-image: url(../gfx/cat-8.png);
}
.catalog-menu li > a.cat-poloautomaticke-sloup {
    background-color: var(--color-poloautomaticke-sloupy);
    background-image: url(../gfx/cat-9.png);
}
.catalog-menu li > a.cat-odnimatelne-sloupy {
    background-color: var(--color-odnimatelne-sloupy);
    background-image: url(../gfx/cat-10.png);
}
.catalog-menu li > a.cat-pevne-sloupy {
    background-color: var(--color-pevne-sloupy);
    background-image: url(../gfx/cat-11.png);
}
.catalog-menu li a.cat-prislusenstvi {
    background-color: var(--color-prislusenstvi);
    background-image: url(../gfx/cat-12.png);
}

.catalog-menu li > a:hover,
.catalog-menu li.active > a {
    width: 4.875rem;
    height: 4.3125rem; 
}

.catalog-menu li span {
    position: absolute;
    top: 0;
    left: -1000%;
    display: block;
    width: auto;
    height: 4.3125rem; 
    background-color: #FFF; 
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap; 
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.13);
    background-color: #FFF;
    z-index: 1;
}

.catalog-menu li span::after {
    content: "";
    position: absolute;
    right: 0.81rem;
    top: calc(50% - 0.5625rem);
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/icon-arrow-right.svg);
}

.catalog-menu li span > a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 4.3125rem; 
    padding: 0.81rem 3.435rem 0.81rem 1rem;
    color: #000;
    text-decoration: none;
}

.catalog-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    padding-bottom: 12.75rem;
}

.catalog-item {
    position: relative;
    width: calc(100% * (1/4) - 1.75rem);
    padding: 1rem 0;
    box-sizing: border-box;
    background: #FBFBFB;
    box-shadow: 0px 2px 36px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.catalog-item h2 {
    position: absolute;
    bottom: 4.5rem;
    margin: 2rem 0 0 0;
    padding: 0 1rem;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
}

.catalog-item h2 > span {
    display: block;
    color: var(--color-action);
}

.catalog-item-image {
    position: relative;
    overflow: hidden;
}

.catalog-item-image > img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: scale-down;
    margin-bottom: 6rem;
}

.catalog-item .item-info {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 4.5rem;
    bottom: -100%;
}

.catalog-item .item-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.catalog-item .item-info ul li {
    margin: 0;
    padding: .09rem 0;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: uppercase;
}

.catalog-item .item-info ul li.f-action {
    text-transform: none;
}

.catalog-item .item-info ul li.half {
    display: flex;
    flex-direction: row;
}

.catalog-item .item-info ul li.half > span {
    width: 50%;
}

.catalog-item .item-info ul li.half > span:first-child {
    padding-right: .75rem;
    text-align: left;
}

.catalog-item .item-info ul li.half > span:last-child {
    padding-left: calc(0.75rem + 1px);
    border-left: 1px solid #DFDFDF;
    text-align: right;
}

.catalog-item .item-info ul li.half:last-child > span:last-child {
    border: none;
}

.catalog-item .item-action {
    position: absolute;
    width: calc(100% - 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: 1rem;
    right: 1rem;
    /*bottom: 1rem;*/
    bottom: -100%;
}

.catalog-item .item-action a.favorite {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    background-color: var(--color-button-secondary);
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    background-position: center center;
    background-image: url(../gfx/icon-heart.svg);
}

.catalog-item .item-action a.favorite.is-favorite {
    background-color: var(--color-button);
}

.catalog-item .item-action a.favorite:hover {
    background-color: var(--color-primary);
}

@media (max-width: 991.98px) {
    #catalog {
        padding-top: 2rem;
    }

    .catalog-menu {
        display: none;
    }

    .catalog-items {
        padding-bottom: 2rem;
    }

    .catalog-item {
        width: 100%;
    }
}

/**
// SECTION 05.1 Detail
// 
**/
.favorite-item {
    position: absolute;
    right: 1rem;
    top: 2rem;
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    background-image: url(../gfx/icon-heart-big.svg);
}
.favorite-item.is-favorite {
    background-image: url(../gfx/icon-heart-big-favorite.svg);
}

.product-meta {
    display: flex;
    width: 100%;
}

.product-meta > div {
    flex-grow: 1;
}

.product-meta-icons {
    display: flex;
    justify-content: flex-end;
    gap: 0.62rem;
}

.product-meta-icons img {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    cursor: pointer;
}

.product-meta-params > table {
    width: auto;
    margin: 0;
    padding: 0;
}

.product-meta-params > table tr > td {
    position: relative;
    padding: .62rem;
}

.product-meta-params > table tr > td:nth-child(even){
    border-left: 1px solid #DFDFDF;
}

.product-meta-params > table tr.power > td:first-child,
.product-meta-params > table tr.weight > td:first-child {
    padding-left: 2.62rem;
}

.product-meta-params > table tr.power > td:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.75rem);
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-image: url(../gfx/param-power.svg);
}

.product-meta-params > table tr.weight > td:first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.75rem);
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-image: url(../gfx/param-weight.svg);
}

.product-meta-params .dimensions {
    max-width: 12rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    background-color: #000;
    color: #fff;
}

.product-meta-params .dimensions > ul, .product-meta-params .dimensions > li {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
}

.product-meta-params .dimensions h3 {
    margin: 0;
    padding: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
}

.product-anotation > span {
    display: block;
    padding: .25rem 0;
}

.product-category {
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.product-type {
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.product-category-secondary {
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

@media (max-width: 991.98px) {
    .product-meta {
        display: block;
    }

    .product-meta-params {
        padding: 1.5rem 0;
    }
    .product-meta-icons {
        justify-content: flex-start;
    }
    .detail .product-image {
        margin-top: 1.5rem;
    }
}

.product-description {
    margin-top: 4.25rem;
}

.product-description h2 {
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.product-description p {
    margin: 0;
    padding: 0 0 1.75rem 0;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.product-image {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: scale-down;
}

.product-variants h2 {
    margin: 4.12rem 0 3rem 0;
    padding: 0;
    color: var(--color-action);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

table.variants {
    width: 100%;
}

table.variants thead td {
    padding: 1.25rem;
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: uppercase;
    text-align: center;
}

table.variants tbody {
    border-bottom: 3px solid #000;
}

table.variants tbody td {
    padding: 1.25rem;
    text-align: center;
}

table.variants tbody tr {
    position: relative;
    background-position: bottom;
    background-size: 6px 1px;
    background-repeat: repeat-x;
    background-image: radial-gradient(circle, #DFDFDF 1px, white 1px);
    cursor: help;
}

table.variants thead > tr:first-child  {
    background-position: bottom;
    background-size: 6px 1px;
    background-repeat: repeat-x;
    background-image: radial-gradient(circle, #DFDFDF 1px, white 1px);
}

table.variants div.variant-caption {
    position: absolute;
    display: none;
    top: calc(100% - 1rem);
    left: calc(50% - 300px);
    width: 600px;
    padding: 2rem;
    border-radius: 0.3125rem;
    background: #FFF;
    box-shadow: 0px 6px 42px 0px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

table.variants div.variant-caption > p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;    
}

table.variants tbody td:first-child {
    width: 6.5rem;
}

table.variants td > img.product-image {
    width: 100%;
    object-fit: scale-down;
    cursor: zoom-in;
}

table.variants .variant-image > a {
    cursor: zoom-in;
}

table.variants td.code {
    width: 2.5rem;
    font-weight: 700;
}

table.variants thead td.variant-title,
table.variants td.variant-title {
    text-align: left;
}

table.variants td.contains {
    font-weight: 700;
    font-size: 2rem;
}

table.variants td.variant-action {
    width: 10rem;
}

table.variants .variant-code {
    padding-left: .5rem;
    font-weight: 700;
}

table.variants thead .variant-code {
    font-weight: 300;
}

table.variants .variant-description {
    display: none;
}

table.variants .variant-price {
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    width: 5rem;
}

table.variants .variant-price-novat {
    padding-left: 1.5rem;
}

table.variants .price-vat {
    display: block;
    color: var(--color-action);
    font-family: Roboto Condensed;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

table.variants .price-novat {
    display: block;
    color: #000;
    font-family: Roboto Condensed;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.price-sale {
    display: block;
    color: #000;
    font-family: Roboto Condensed;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-decoration-line: strikethrough;
    text-decoration: line-through;
}

.sale {
    position: absolute;
    left: 0;
    top: calc(50% - 0.25rem);
    color: #C32668;
    font-family: Roboto Condensed;
    font-size: 0.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.out-of-stock {
    color: var(--color-button-secondary);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.not-available {
    color: var(--color-button);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .product-variants h2 {
        text-align: center;
    }
    table.variants, table.variants tr, table.variants td {
        margin: 0 !important;
        padding: 0 !important;
    }
    table.variants thead {
        display: none;
    }
    table.variants td {
        width: unset !important;
        height: unset !important;
        padding-top: .25rem !important;
        padding-bottom: .25rem !important;
    }
    table.variants .variant-param {
        display: none;
    }

    table.variants td:nth-child(3) {
        display: table-cell;
        font-size: 0.875rem;
        line-height: normal;
    }

    table.variants .variant-image {
        width: 2rem !important;
        padding: 0 !important;
    }

    table.variants td > img.product-image {
        width: 2rem;
    }
    
    table.variants .product-image {
        padding: 0;
        margin: 0;
    }
    table.variants .variant-code {
        font-size: 0.875rem;
        text-align: right;
    }
    table.variants .variant-price {
        font-size: 0.875rem;
    }
    table.variants .variant-title,
    table.variants .variant-code,
    table.variants .variant-price {
        padding-left: .15rem !important;
        padding-right: .15rem !important;
    }
    table.variants .variant-action {
        padding-right: 0;
    }
    table.variants .variant-action .button.add-to-cart {
        float: right !important;
    }  
    .product-variants h2 {
        margin-bottom: 0;
        padding-bottom: .69rem;
        border-bottom: 1px solid #DFDFDF;
    }    
}

.product-info {
    margin-top: 8rem;
}

.product-info h3 {
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.tabs {
    display: flex;
    gap: 1.87rem;
}

.tabs > div {
    position: relative;
    display: inline-block;
    min-width: 13rem;
    padding: 0 2rem 1rem 2rem;
    border-bottom: 6px solid #fff;
    cursor: pointer;
    text-align: center;
}

.tabs > div > span {
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: #000000;
}

.tabs > div::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #000;
    transition: border 0.2s;
}

.tabs > div:hover::after {
    background-color: var(--color-action);
}

.tabs > div.active {
    padding-bottom: calc(1rem - 6px);
    border-bottom: 6px solid var(--color-action);
}

.tabs > div.active::after {
    display: none;
}

.tab-data {
    display: none;
    overflow-x: hidden;
}

.tabs-data {
    min-height: 600px;
    padding: 3.25rem 0;
}

.tabs-data > div.tab {
    display: none;
}

.tabs-data > div.tab.active {
    display: block;
}

.tabs-data div.tab-img {
    text-align: center;
}

.tabs-data div.tab-img > img {
    max-height: 600px;
    margin: 0 auto;
}

.table-params .row {
    width: 100%;
    display: flex;
    margin: 0 !important;
    padding: 0 !important;
    align-content: flex-start;
}

.table-params .col {
    flex-grow: 0;
    flex: 0 0 20%;
    padding: .35rem 0;
    font-weight: 300;
    pointer-events: none;
}

.table-params.multi .col {
    flex: 0 0 15%;
}

.table-params .col > a {
    text-decoration:none; 
    color:inherit;
}

.table-params .col.row-title {
    min-width: 12.5rem;
    font-weight: 700;
    flex-grow: 0; 
    flex: 0 0 25%;
    padding-right: 0.5rem;
}

.table-params .row.th > .col {
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .product-info {
        margin-top: 4rem;
    }
    .tabs {
        display: block;
    }

    .tabs > div {
        position: relative;
        display: block;
        padding: 1rem 1rem;
        border-bottom: 1px solid #DFDFDF;
    }

    .tabs > div > span {
        color: var(--color-action);
    }

    .tabs > div:hover {
        border-bottom: 1px solid #DFDFDF;
    }
    
    .tabs > div.active {
        padding: 1rem 1rem;
        border-bottom: 1px solid #DFDFDF;
    }

    .tabs > div::after {
        content: "";
        position: absolute;
        left: unset;
        right: .25rem;
        top: 1.325rem;
        display: block;
        width: 1rem;
        height: 1rem;
        background-color: unset !important;
        border: none;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url(../gfx/icon-arrow-down-black.svg);
        transition: transform .25s;
    }

    .tabs > div.active::after {
        display: block;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);    
    }

    .tab-data {
        padding: 3.5rem 0;
    }

    .tab-data div.tab-img > img {
        position: relative;
        display: block;
        max-width: 100%;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: scale-down;
        max-height: unset;
    }
    
    .tabs-data {
        display: none;
    }

    .table-params .row {
        display: table;    
        width: 100%;   
    }

    .table-params .row > .col {
        display: table-cell;
        vertical-align: middle;
        text-align: left;
        width: 50%;
    }

    .table-params .row > .col:first-child {
        width: 65%;
    }

    .table-params .row > .col:nth-child(2) {
        width: 36%;
    }   

    .table-params.multi .row.th {
        display: none;
    }
    
    .table-params.multi  .row {
        padding: 0;
    }

    .table-params.multi  > div {
        display: block;
    }

    .table-params.multi .col  {
        display: block;
        width: 100% !important;
        padding: 0.5rem 1.25rem !important;
        line-height: normal;
        font-size: 0.8125rem;
        font-weight: 400;
        text-align: right;
    }

    .table-params.multi  .col::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
        color: #000;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: uppercase;
        font-size: 0.8125rem;
    }
    .table-params.multi  .col.row-title {
        display: block;
        text-align: center;
        flex-grow: 1; 
    }
}

.tab-files {
    text-align: center;
}

.download-box {
    display: table;
    width: 100%;
    max-width: 640px;
    min-height: 480px;
    margin: 0 auto;
}

.download-box > div {
    display: table-cell;
    width: 50%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

.download-box > div:nth-child(2) {
    border-left: 1px solid #D9D9D9;
}

.download-box .file {
    position: relative;
    display: block;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
}

.download-box .file::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 1rem);
    left: calc(50% - 2.8125rem);
    display: block;
    width: 5.625rem;
    height: 5.625rem;
    background-repeat: no-repeat;
    background-size: contain;
}

.download-box .file.manual::before {
    background-image: url(../gfx/file-manual.svg);
}

.download-box .file.brochure::before {
    background-image: url(../gfx/file-pdf.svg);
}

/**
// SECTION 05.1.1 Detail - sets
// 
**/
.set-header {
    position: relative;
    padding-top: 4.69rem;
    min-height: 38.375rem;
    background-color: #FBFBFB;
}

.set-header h1 > span {
    font-weight: 300;
}

.set-code {
    padding: 1.5rem 0;
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}
.set-code > span {
    font-weight: 700;
}
.set-description {
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.set-meta {
    position: absolute;
    bottom: -5.14rem;
    display: flex;
}

.set-meta > div {
    position: relative;
}

.set-meta > div:first-child {
    width: 25rem;
    padding-right: 5rem;
}

.set-meta > div:last-child {
    padding-left: 1rem;
}

.set-image {
    max-width: 20rem;
}

.set-meta-code {
    width: 20rem;
    padding-left: 2.45rem;
    padding-bottom: 0.75rem;
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.set-meta-desc {
    width: 20rem;
    padding-left: 2.45rem;
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.set-meta-quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 1rem;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--color-primary);
    color: #000;
    font-family: Roboto;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.set-items {
    padding-top: 6.14rem;
}

.set-item {
    display: flex;
}

.set-item > div {
    position: relative;
    padding-bottom: 3rem;
}

.set-item > div:first-child {
    width: 25rem;
    padding-right: 5rem;
}

.set-item > div:last-child {
    padding-left: 1rem;
    background-position: left;
    background-size: 1px 6px;
    background-repeat: repeat-y;
    background-image: radial-gradient(circle, #DFDFDF 1px, white 1px);
}
.set-item-image {
    position: absolute;
    top: 0;
    right: 3.63rem;
    display: block;
    width: 7.5625rem;
    height: 6.125rem;
    object-fit: contain;
}
.set-add-to-cart {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-bottom: 1px solid #DFDFDF;
    height: 6.69rem;
}

.set-add-to-cart > div {
    position: relative;
    display: flex;
    align-items: center;
    height: 6.69rem;
    border-bottom: 2px solid #000;
}

.set-price {
    padding-right: 2.25rem;
    color: var(--color-action);
    font-family: Roboto;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-align: right;
}

.set-sale {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}


/**
// !SECTION
**/


/**
// !SECTION
**/

/**
// SECTION 05.2 Cart
// 
**/
.total-price {
    color: var(--color-action);
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.total-text {
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

#cart {
    min-height: 100vh;
    position: relative;
    padding-top: 4.69rem;
    padding-bottom: 4.69rem;
    background-color: #FFF;
}

#cart #content h1 {
    padding: 0 0 3.56rem 0;
    text-align: center;
}

@media (max-width: 991.98px) {
    #cart {
        padding-top: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.cart {
    display: table;
    width: 100%;
}

.cart.one {
    padding-bottom: 5.38rem;
}

.cart-row {
    display: table-row;
    width: 100%;
    background-position: bottom;
    background-size: 6px 1px;
    background-repeat: repeat-x;
    background-image: radial-gradient(circle, #DFDFDF 1px, white 1px);
}

.cart-row > div {
    display: table-cell;
    padding: .35rem 0;
    text-align: center;
    vertical-align: middle;
}

.cart-row.th > div {
    color: #000;
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: uppercase;
}

.cart-row .cart-row-check {
    min-width: 2rem;
    min-height: 2rem;
    background-repeat: no-repeat;
    background-size: 2rem 2rem;
    background-position: center center;
    background-image: url(../gfx/icon-check-colour.svg);
}

.cart-row.th .cart-row-check {
    background: none;
}

.cart-row .cart-row-img {
    width: 5.25rem;
    text-align: left !important;
}

.cart-row img.product-image {
    position: relative;
    display: block;
    width: 4.25rem;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: scale-down;
    margin: auto 0;
}

.cart-row .cart-row-code {
    padding-left: .635rem;
    padding-right: .635rem;
    color: #000;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.cart-row .cart-row-title {
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    text-align: left;
}

.cart-row .cart-row-amount {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}

.cart.one .cart-row-amount {
    padding-right: 0;
}

.cart-row .cart-row-remove a.remove {
    display: block;
    width: 1rem;
    height: 1rem;
    font-size: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-image: url(../gfx/trash.svg);
}

.cart-row .cart-row-price {
    padding-left: 1rem;
    padding-right: 1rem;
}

.cart-row .cart-row-total {
    padding-left: 1rem;
    padding-right: 1rem;
    color: var(--color-action);
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.cart-row .cart-row-total.price-novat {
    color: #000;
}

.amount-change {
    display: flex;
    justify-content: center;
    width: 100%;
}

.amount-change input.amount {
    display: block;
    width: 3.5rem;
    border: none;
    background: none;
    border-bottom: 1px solid #DFDFDF;
    text-align: center;
}

.amount-change a.minus {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-image: url(../gfx/minus.svg);
    cursor: pointer;
}

.amount-change a.plus {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-image: url(../gfx/plus.svg);
    cursor: pointer;
}

.cart-total {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    padding: 2rem 0;
}

.cart-total > div:first-child {
    padding-right: 4.5rem;
}

.cart-total > div:last-child {
    padding-right: 1rem;
}

.cart-total .total-price {
    display: block;
}

.cart-total .price-novat {
    color: #000;
    font-size: 1rem;
}

.price-info {
    font-weight: 300;
    font-size: 0.875rem;
}

.price-novat {
    color: #000;
}

.buttons-box {
    display: flex;
    align-items: center;        
    width: 100%;
    padding: .75rem 0 0 0;
    border-top: 1px solid #DFDFDF;
}

.buttons-box > div {
    flex-grow: 1;
}

.buttons-box > div:last-child {
    text-align: right;
}

.buttons-box a.back {
    position: relative;
    display: inline-block;
    padding-left: 2.190rem;
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
}

.buttons-box a.back::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.625rem);
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-image: url(../gfx/arrow-left.svg);
}

@media (max-width: 991.98px) {

    .cart-row .cart-row-item > span {
        position: relative;
        display: none;
    }

    .cart-row.th .cart-row-code {
        position: relative;
    }

    .cart .cart-row.th .cart-row-code::after {
        content: "Položka";
        text-align: left;
    }
    .cart-row .cart-row-amount {
        padding-left: 0;
        padding-right: 0;
    }

    .cart .cart-row-price {
        display: none;
    }

    .cart .cart-row-img {
        width: 2rem;
        text-align: left;
    }

    .cart .cart-row-img .product-image {
        width: 2rem;
    }

    .cart .cart-row-title {
        display: none;
    }

    .cart .cart-row-code {
        text-align: left;
    }

    .cart .cart-row-code::after {
        position: relative;
        bottom: 0;
        content: attr(data-label);;
        display: block;
        max-height: 3rem;
        overflow: hidden;
        color: #000;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }

    .cart .cart-row-total {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .cart .cart-row-item {
        content: "Pol." !important;
    }

}

/**
// !SECTION
**/
/**
// SECTION 05.3 Order
// 
**/
#order {
    min-height: 100vh;
    position: relative;
    padding-top: 4.69rem;
    padding-bottom: 4.69rem;
    background-color: #FFF;
}

#order #content h1 {
    padding: 0 0 3.56rem 0;
}

#order #content h2 {
    margin: 0;
    padding: 0 0 1.35rem 0;
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

#order .buttons-box {
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    margin-top: 2.56rem;
    border: 0;
}

@media (max-width: 991.98px) {
    #order {
        padding-top: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.order-options {
    display: table;
    width: 100%;
    margin-bottom: 4.62rem;
}

.order-options .order-option {
    position: relative;
    display: table-row;
    background-position: top;
    background-size: 6px 1px;
    background-repeat: repeat-x;
    background-image: radial-gradient(circle, #DFDFDF 1px, white 1px);
    cursor: pointer;
}

.order-options .order-option:last-child::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 1px;
    display: block;
    width: 100%;
    height: 1px;
    background-position: top;
    background-size: 6px 1px;
    background-repeat: repeat-x;
    background-image: radial-gradient(circle, #DFDFDF 1px, white 1px);
}

.order-options .order-option * {
    cursor: pointer;
}

.order-options .order-option > div {
    display: table-cell;
    vertical-align: middle;
    padding: 0.87rem 0;
}

.order-options .order-option > div:first-child {
    width: 1.1875rem;
}

.order-options .order-option > div:nth-child(2) {
    width: 6.060rem;
    padding-left: 1.25rem;
    padding-right: 0.56rem; 
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.order-options .order-option.delivery-PP > div:nth-child(2) {
    background-image: url(../gfx/delivery-ppl.png);
    background-size: 4.25rem auto;
}
.order-options .order-option.delivery-TT > div:nth-child(2) {
    background-image: url(../gfx/delivery-toptrans.png);
    background-size: 4.25rem auto;
}
.order-options .order-option.delivery-OS > div:nth-child(2) {
    background-image: url(../gfx/delivery-box.svg);
    background-size: 1.375rem 1.375rem;
}
.order-options .order-option.payment-card > div:nth-child(2) {
    background-image: url(../gfx/payment-card.svg);
    background-size: 1.375rem 1.375rem;
}
.order-options .order-option.payment-bank > div:nth-child(2) {
    background-image: url(../gfx/payment-bank.svg);
    background-size: 1.375rem 1.375rem;
}
.order-options .order-option.payment-cod > div:nth-child(2) {
    background-image: url(../gfx/payment-cash.svg);
    background-size: 1.375rem 1.375rem;
}

.order-options .order-option > div:nth-child(3) {
    padding-right: 2.5rem;
}

.order-options .order-option > div:nth-child(4) {
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-align: right;
}

.order-options .order-option label {
    display: block;
    margin: 0;
    padding: 0 0 0.25rem 0;
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.order-options .order-option p {
    margin: 0;
    padding: 0;
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;   
}

@media (max-width: 991.98px) {
    .order-options .order-option label {
        font-size: 0.875rem;  
    }
    .order-options .order-option p {
        font-size: 0.875rem;  
    }
    .order-options .order-option > div:nth-child(2) {
        width: 5rem;
        padding-left: 1.25rem;
        padding-right: 0.56rem; 
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
    }
    
    .order-options .order-option.delivery-PP > div:nth-child(2) {
        background-size: auto 2rem;
    }
    .order-options .order4-option.delivery-TT > div:nth-child(2) {
        background-size: auto .5rem;
    }

    .order-options .order-option > div:nth-child(3) {
        padding-left: .5rem; 
        padding-right: .5rem;
    }

    .order-options .order-option > div:nth-child(4) {
        font-size: 0.875rem;
    }
}

.order-box-delivery {
    display: none;
    padding-top: 1.87rem;
}

.order-box-delivery.active {
    display: block;
}

.resume-box {
    position: sticky;
    top: 2rem;
    padding-left: 3.5rem;
}

@media (max-width: 991.98px) {
    .resume-box {
        padding-top: 4rem;
        padding-left: 0;
    }
}

.resume {
    padding: 2.25rem 1rem;
    background: #FFF;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.06);
}

.resume-cart {
    display: table;
    width: 100%;
}

.resume-cart .cart-row {
    position: relative !important;
    width: 100%;
    background: none;
}

.resume-cart .cart-row.th {
    margin-bottom: 2.37rem;
    background-position: bottom;
    background-size: 6px 1px;
    background-repeat: repeat-x;
    background-image: radial-gradient(circle, #DFDFDF 1px, white 1px);
}

.resume-cart .cart-row:nth-child(2) > div {
    padding-top: 2.37rem;
}

.resume-cart .cart-row img.product-image {
    position: relative;
    display: block;
    width: 3rem;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: scale-down;
    margin: auto 0;
}

.resume-cart .cart-row .cart-row-img {
    width: 3rem;
}

.resume-cart .cart-row .cart-row-title {
    font-size: 0.8125rem;
    text-align: left;
}

.resume-cart .cart-row .cart-row-amount,
.resume-cart .cart-row .cart-row-total {
    color: #000;
    font-family: Roboto Condensed;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.resume-cart .cart-row .cart-row-total {
    text-align: right;
}

.resume-cart .cart-row-delivery-label {
    color: #000;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: left;
}

.resume-cart .cart-row-delivery-title {
    text-transform: none;
}

.resume-cart .cart-row.delivery > div {
    padding-top: 0.655rem;
    padding-bottom: 0.655rem;
}

.resume-cart .cart-row:nth-last-child(3) > div {
    padding-bottom: 1.75rem;
}

.resume-cart .cart-row:nth-last-child(2) > div {
    padding-top: 1.75rem;
    background-position: top;
    background-size: 6px 1px;
    background-repeat: repeat-x;
    background-image: radial-gradient(circle, #DFDFDF 1px, white 1px);
}

.resume-cart .cart-row:last-child > div {    
    padding-bottom: 5.75rem;
}

.resume-cart .plus-more {
    margin: 0 !important;
    padding: 0 !important;
    width: 6.5625rem;
    height: 1.75rem;
    flex-shrink: 0;
    position: absolute;
    left: calc(50% - 3.28125rem);
    bottom: -0.75rem;
    border-radius: 1.5625rem;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    text-align: center;
    z-index: 1;
}

.resume-cart .plus-more > span {
    color: #FFF;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.75rem;
    text-transform: uppercase;
}

.resume .cart-total {
    padding-bottom: 0;
    background-position: top;
    background-size: 6px 1px;
    background-repeat: repeat-x;
    background-image: radial-gradient(circle, #DFDFDF 1px, white 1px);
}

.cart-total .total-price {
    text-align: right;
}

.resume .cart-total > div:last-child {
    padding-right: 0;
}

@media (max-width: 991.98px) {   
    .resume {
        padding: 2.25rem .5rem;
    } 
    
    .resume-cart.cart-row-price {
        display: none;
    }
        
    .resume-cart .cart-row-img {
        width: 2rem;
        text-align: left;
    }

    .resume-cart .cart-row-img .product-image {
        width: 2rem;
    }

    .resume-cart .cart-row-title {
        display: none;
    }

    .resume-cart .cart-row-code {
        text-align: left;
    }

    .resume-cart .cart-row-code::after {
        position: relative;
        bottom: 0;
        content: attr(data-label);;
        display: block;
        max-height: 3rem;
        overflow: hidden;
        color: #000;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }

    .resume-cart .cart-row-total {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    } 
    
    .resume-box .buttons-box {
        justify-content: center !important;
    }

    .resume-box .buttons-box button {
        width: 100%;
    }
    .resume .cart-total {
        justify-content: center;
        flex-direction: column;
    }
    .resume .cart-total > div {
        padding: 0 0 1rem 0;
    }

    .resume-cart .cart-row:last-child > div {    
        padding-bottom: 2.37rem;
    }
    
}

.conditions {
    position: relative;
    margin-top: 2.56rem;
    padding-left: 2.1875rem;
    color: #000;
    font-family: Roboto Condensed;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.conditions a {
    color: #000;
    text-decoration: underline;
}

.conditions::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.59375rem);
    display: block;
    width: 1.1875rem;
    height: 1.1875rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/icon-check-black.svg);
}

.payment-info {
    display: table;
    width: 100%;
    padding: 1.75rem 0;
    border-top: 1px solid #DFDFDF;
    border-bottom: 1px solid #DFDFDF;
}

.payment-info > div {
    display: table-cell;
    vertical-align: middle;
}

.payment-info > div:first-child {
    width: 9.125rem;
    padding-right: 2rem;
}
.payment-info-details {
    display: table;
    width: 100%;
}

.payment-info-details > div {
    display: table-cell;
}

.payment-info-details > div:first-child {
    text-align: left;
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 300;
    line-height: 150%;
}

.payment-info-details > div:last-child {
    text-align: right;
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 1.875rem */
}

.qr {
    width: 9.125rem;
    height: 9.125rem;
}

.qr > img {
    margin: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: scale-down;
}

.qr-payment {
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    text-align: center;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .payment-info,
    .payment-info > div {
        display: block;
    }

    .payment-info > div:first-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        margin: 0 0 2rem 0;
        padding: 0;
    }
    .qr {
        width: 100%;
        height: unset;
        text-align: center;
    }
    .qr > img {
        margin: 0;
        padding: 0;
        width: 15rem;
        aspect-ratio: 1/1;
        object-fit: fill;
    }
    .payment-info-details {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .payment-info-details > div {
        font-size: 0.875rem !important;
    }
}
/**
// !SECTION
**/
/**
// !SECTION
**/

/**
// SECTION 06. LOGIN
// 
**/

#login {
    min-height: 100vh;
    position: relative;
    padding-top: 4.69rem;
    padding-bottom: 4.69rem;
    background-color: #FFF;
}

#login #content h1 {
    padding: 0 0 3.56rem 0;
}

@media (max-width: 991.98px) {
    #login {
        padding-top: 2rem;
    }
}

#login .buttons-box {
    justify-content: flex-end;
    border-top: 0;
}

.login-box .col {
    padding: 0 2rem;
}

form.login input[type="text"],
form.login input[type="password"] {
    padding-right: 3rem;
    height: 3.25rem;
    background-color: #FAFAFA;
}

.lost-password a {
    color: #000;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-decoration: none;
}

.lost-password a:hover {
    color: var(--color-hover);
}

.form-row .login-user::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.59375rem);
    right: 1rem;
    display: block;
    width: 1.1875rem;
    height: 1.1875rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/icon-user-black.svg);
}

.form-row .login-pass::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.59375rem);
    right: 1rem;
    display: block;
    width: 1.1875rem;
    height: 1.1875rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/icon-lock-black.svg);
}
@media (max-width: 991.98px) {
    .registration-info {
        margin-top: 4rem;
    }
}
/**
// !SECTION
**/

/**
// SECTION 07. ACCOUNT
// 
**/
#account {
    min-height: 100vh;
    position: relative;
    padding-top: 4.69rem;
    padding-bottom: 4.69rem;
    background-color: #FFF;
}

@media (max-width: 991.98px) {
    #account {
        padding-top: 2rem;
    }
}

#account .info {
    margin-top: 4rem;
    text-align: center;
}

#account .info a {
    font-weight: 700;
    color: var(--color-hover);
    text-decoration: none;
    transition: color .25s;
}

#account .info a:hover {
    color: #000;
}

.account-info-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.user-info {
    position: relative;
    padding-left: 1.87225rem;
}

.user-info::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.65625rem);
    display: block;
    width: 1.3125rem;
    height: 1.3125rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/icon-user-black.svg);
}

.user-info .user-name {
    color: #000;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.user-info .user-mail {
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.user-discount > span {
    display: block;
    margin-right: 2.5rem;
}

.user-discount > span:first-child {
    color: #C32668;
    font-family: Roboto Condensed;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.user-discount > span:last-child {
    position: relative;
    color: #000;
    font-family: Roboto Condensed;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.user-discount > span:last-child::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #000;
}

a.logout {
    position: relative;
    padding: 0.63rem 1.25rem;
    border-radius: 25px;
    border: 1px solid #000000;
    color: #000;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: 0;
    z-index: 1;
}

.account-menu-box {
    margin-top: 4rem;
    border-bottom: 1px solid #DFDFDF;
}

@media (max-width: 991.98px) {
    .account-info-box {
        justify-content: flex-start;
        padding-top: 1rem;
    }
    .account-info-box > div:first-child {
        flex-grow: 1;
    }
    a.logout {
        float: right;
    }    
    .account-menu-box { 
        margin-top: 2rem;
    }
}

.account-menu {
    display: flex;
    justify-content: flex-start;
    gap: 1px;
}

.account-menu > a {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 14.75rem;
    height: 4rem;
    padding-left: 3.75rem;
    background-color: var(--color-secondary);
    color: #FFF;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.3s;
}

.account-menu > a::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: calc(50% - 0.59375rem);
    display: block;
    width: 1.1875rem;
    height: 1.1875rem;
    background-repeat: no-repeat;
    background-size: contain;
}

.account-menu > a.active {
    background-color: var(--color-button);
}

.account-menu > a.user-orders::before {
    background-image: url(../gfx/user-orders.svg);  
}

.account-menu > a.user-contacts::before {
    background-image: url(../gfx/user-check-icon.svg);  
}

.account-menu > a:hover {
    background-color: #000;
}

@media (max-width: 991.98px) {
    .account-menu {
        display: block;
    }

    .account-menu > a {
        width: 100%;
    }
}

.pagination {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

.pagination > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: #D9D9D9;
    text-align: center;
    border-radius: 50%;
    text-decoration: none;
    color: #000;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    transition: all 0.3s;
}

.pagination > a.active {
    background-color: var(--color-button);
    color: #FFF;
}

.pagination > a:hover {
    background-color: #000;
    color: #FFF;
}

.orders {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    gap: 0.81rem;
    flex-wrap: wrap;
    padding-top: 6rem;
}

.orders > div {
    width: calc(100% / 3 - 0.540rem);
}

.order-card {
    position: relative;
    height: 40rem;
}

.order-card .resume {
    position: relative;
    cursor: pointer;
    height: calc(100% - 3rem);
}

.order-card .resume:hover::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    background-image: url(../gfx/icon-magnifier-white.svg);
    background-size: 1.625rem 1.625rem;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 2;
    cursor: pointer;
}

.order-card .cart-row-title {
    flex-grow: 1;
}

.order-card .cart-row-title > div { 
    display: table-cell;
    vertical-align: middle;
    height: 3rem;
    overflow: hidden;
}

.order-card .cart-row-delivery-title {
    flex-grow: 1;
}

.order-card .cart-row-delivery-title > span {
    display: flex;
    height: 2rem;
    align-items: center;
    overflow: hidden;
}

.order-card .cart-row-amount,
.order-card .cart-row-total {
    padding-left: .25rem;
    padding-right: .25rem;
}

.order-card .cart-total {
    position: absolute;
    bottom: 4rem;
    left: 1rem;
    width: calc(100% - 2rem);
}

.order-meta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .5rem;
    padding-bottom: 1rem;
}

.order-number {
    color: #000;
    font-family: Roboto Condensed;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.order-date {
    color: #000;
    font-family: Roboto Condensed;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: uppercase;
}

.order-detail {
    display: none;
}

.order-detail-box {
    width: 50rem;
}

.order-detail-resume {
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .orders {
        flex-direction: column;
        justify-content: flex-start;
    }
    .orders > div {
        width: 100%;
    }    
}

.settings {
    padding-top: 4rem;
}

.settings h2 {
    margin-bottom: 2.12rem;
    color: #000;
    font-family: Roboto Condensed;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
}

.settings .form-check-box {
    margin-top: 3.69rem;
}

.settings .buttons-box {
    justify-content: center;
    margin-top: 3.69rem;
}

.settings .user-contacts {
    display: table;
    width: 100%;
    margin-bottom: 3.69rem;
}

.settings .user-contacts > div {
    display: table-row;
}

.settings .user-contacts > div > div {
    display: table-cell;
    padding: .5rem 0;
}

.settings .user-contacts > div > div:first-child {
    font-weight: 300;
}

.settings .user-contacts > div > div:nth-child(2) {
    font-weight: 700;
}

/**
// !SECTION
**/

/**
// SECTION 08. SINGLE PAGE
// 
**/

#page {
    min-height: 100vh;
    position: relative;
    padding-top: 4.69rem;
    padding-bottom: 4.69rem;
    background-color: #FFF;
}

#page #content.page h1 {
    padding: 0 0 3.56rem 0;
}

#page #content.page h2 {
    position: relative;
    margin: 0 0 2rem 0;
    padding: 0;
    font-size: 2.625rem;
    font-weight: 700;
}

#page #content.page h3 {
    margin: 3.69rem 0 0 0;
    padding: 0 0 2rem 0;
}

#page #content.page a {
    color: var(--color-button);
    transition: color 0.3s;
}

#page #content.page a:hover {
    color: #000;
}

.page-header {
    padding-bottom: 3.69rem;
    border-bottom: 1px solid #DFDFDF;
    background-color: #FFFFFF;
}

.page-content {
    height: 100%;
    padding: 3.69rem 0;
    background-color: #FDFDFD;
}

#content div.anotation {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#page-about .page-about-header {
    position: relative;
    height: calc(100vh - 5.75rem);
    min-height: 60rem;
    max-height: 90rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/firma.png);
}

#page-about {
    overflow: hidden;
}

#page-about .page-about-header-box {
    position: absolute;
    bottom: 35%;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}

#page-about h1, #page-about h2 { 
    position: relative;
    margin: 0;
    padding: 0 0 0.94rem 0;
    font-size: 6rem;
    font-weight: 700;
    color: #FFFFFF;
}

#page-about h2 > span { 
    position: absolute;
    left: 0;
    top: -1rem;
    color: #FFF;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

#page-about p.annotation {
    margin: 0;
    padding: 0 0 1.94rem 0;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

#page-about p.text {
    display: block;
    max-width: 56.25rem;
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}

#page-about .page-about-content-box {
    height: calc(100vh - 5.75rem);
    min-height: 37.5rem;
    max-height: 90rem;
    overflow-x: hidden;
}

#page-about .page-about-content-box.dark {
    background-color: var(--color-background);
}

#page-about .page-about-content-box.yellow {
    background-color: var(--color-primary);
}

#page-about .page-about-content-box {
    display: table;
    width: 100%;
}

#page-about .page-about-content-box > div {
    position: relative;
    display: table-cell;
}

#page-about .page-about-content-box > div:first-child {
    width: 66.6%;
    padding-left: 6rem;
    padding-right: 30%;
    vertical-align: middle;
}

#page-about .page-about-content-box > div:first-child > span {
    position: absolute;
    left: .5rem;
    top: 1rem;
    color: #2E3339;
    font-size: 6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

#page-about .page-about-content-box.yellow > div:first-child > span {
    color: #DFC645;
}

#page-about .page-about-content-box > div:last-child {
    width: 33.4%;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-about .page-about-content-box.innovation > div:last-child { 
    background-image: urL(../img/inovace.jpg);
    background-position: 100% 0%;
}

#page-about .page-about-content-box.technology > div:last-child { 
    background-image: urL(../img/technologie.jpg);
    background-position: center;
}

#page-about .page-about-content-box.quality > div:last-child { 
    background-image: urL(../img/kvalita.jpg);
    background-position: left;
}

#page-about .page-about-content-box.research > div:last-child { 
    background-image: urL(../img/vyzkum.jpg);
    background-position: left;
}

@media (max-width: 991.98px) {
    #page-about h1, #page-about h2 { 
        font-size: 3rem;
    }
    #page-about .page-about-header {
        height: 80vh;
        min-height: 37.5rem;
        max-height: 60rem;
    }
    #page-about .page-about-header-box {
        top: 3.69rem;
        bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

    #page-about .page-about-content-box > div:first-child {
        width: 76%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #page-about .page-about-content-box > div:last-child {
        width: 24%;
    }
}

#page-contact h1 { 
    position: relative;
    margin: 0 0 2rem 0;
    padding: 0;
    font-size: 2.625rem;
    font-weight: 700;
    color: #FFFFFF;
}

#page-contact h2 {
    margin: 0;
    margin-top: 1.4375rem; 
    padding: 0 0 1rem 0;
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#page-contact .page-contact-contacts-box {
    display: table;
    width: 100%;
    height: calc(100vh - 5.75rem);
    min-height: 37.5rem;
}

#page-contact .page-contact-contacts-box > div {
    display: table-cell;
    vertical-align: top;
}

#page-contact .page-contact-contacts-box .contacts {
    width: 40%;
    padding-top: 4.69rem;
    padding-bottom: 3.69rem;
    padding-left: 3rem;
} 

#page-contact .page-contact-contacts-box .map {
    width: 60%;
} 

#page-contact .page-contact-contacts-box .map iframe {
    width: 100%;
    height: 100%;
}

#page-contact .contact-box {
    display: table;
    padding-bottom: 1rem;
}

#page-contact .contact-box > div {
    position: relative;
    display: table-cell;
    vertical-align: top;
    padding-left: 4.63rem;
}

#page-contact .contact-box > div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 4rem;
    height: 4rem;
    background-repeat: no-repeat;
    background-size: contain;
}

#page-contact .contact-box.address > div::before {
    background-image: url(../gfx/contact-address.svg);
}

#page-contact .contact-box.phone > div::before {
    background-image: url(../gfx/contact-phone.svg);
}

#page-contact .contact-box.mail > div::before {
    background-image: url(../gfx/contact-mail.svg);
}

#page-contact .contact-box.clock > div::before {
    background-image: url(../gfx/contact-clock.svg);
}
#page-contact .contact-box.service > div::before {
    background-image: url(../gfx/contact-service.svg);
}

#page-contact .contact-box ul {
    margin: 0;
    padding: 0 0 1rem 0;
    list-style: none;
}

#page-contact .contact-box ul li {
    margin: 0;
    padding: 0;
    color: #FFF;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#page-contact .page-contact-form {
    min-height: 100vh;
    padding: 8.56rem 0;
    background-color: #fff;
}

#page-contact .page-contact-form h1 {
    padding-bottom: 5.69rem;
    color: #000000;
}

#page-contact .panel-left {
    padding-left: 4rem;
    padding-right: 2rem;
}

#page-contact .panel-right {
    padding-left: 2rem;
    padding-right: 4rem;
}

#page-contact .page-contact-form .conditions {
    margin-top: 0.88rem;
}

#page-contact .page-contact-form .buttons-box {
    padding-top: 1.88rem;
    justify-content: flex-end;
    border: none;
}

@media (max-width: 991.98px) {
    #page-contact .page-contact-contacts-box .contacts {
        width: 70%;
        padding-top: 3.69rem;
        padding-bottom: 3.69rem;
        padding-left: 1rem;
        padding-right: 1rem;
    } 

    #page-contact .page-contact-form h1 {
        padding-bottom: 3.69rem;
        text-align: left;
    }

    #page-contact .panel-left {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    #page-contact .panel-right {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

#page-catalogs {
    min-height: 80vh;
    position: relative;
    padding-top: 4.69rem;
    padding-bottom: 4.69rem;
    background-color: #FFF;
}

#page-catalogs #content h1 {
    padding: 0 0 3.56rem 0;
}

.download-catalog-item-box {
    padding: 0 2rem;
}

.download-catalog-item {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 3.69rem;
    text-align: left;
    background: #FBFBFB;
    box-shadow: 0px 2px 36px 6px rgba(0, 0, 0, 0.08);
}

.download-catalog-item-action {
    padding: 2rem;
}

.download-catalog-item-image {
    position: relative;
    overflow: hidden;
}

.download-catalog-item img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.download-catalog-item h2 {
    margin: 0;
    padding: 1rem 0;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
}

.download-catalog-item h2 > span {
    font-weight: 300;
}

#page-download {
    min-height: 80vh;
    position: relative;
    padding-top: 4.69rem;
    padding-bottom: 4.69rem;
    background-color: #FFF;
}

#page-download #content h1 {
    padding: 0 0 1.12rem 0;
}

#page-download .page-download-menu {
    padding-top: 3.69rem;
    border-bottom: 1px solid #DFDFDF;
}

#page-download .page-download-menu .tabs > div {
    min-width: unset;
    padding-left: 0;
    padding-right: 0; 
    padding-bottom: .5rem;
}

#page-download .page-download-menu .tabs > div::after {
    background-color: #fff;
}

#page-download .page-download-menu .tabs > div > span {
    font-size: 1rem;
}

#page-download .page-download-content {
    background-color: #FDFDFD;
}

#page-download .download-items {
    display: flex;
    gap: 1.19rem;
    flex-flow: wrap;
    align-content: flex-start;
}

#page-download .download-item {
    position: relative;
    display: flex;
    align-content: center;
    align-items: center;
    flex-shrink: 0;
    flex-basis: 11.25rem;
    height: 3.5rem;
    padding-left: 2.56rem;

    border-radius: 0.3125rem;
    background: #FFF;
    box-shadow: 0px 4px 42px 0px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    text-align: left;
    color: #000;
    font-family: Roboto Condensed;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    transition: 0.15s ease-in-out;

}

#page-download .download-item:hover {
    color: var(--color-hover);
    transform: translateY(-5%);
}

#page-download .download-item::before {
    content: "";
    position: absolute;
    top: calc(50% - 0.46875rem);
    left: 0.62rem;
    display: block;
    width: 0.9375rem;
    height: 0.9375rem;
    background-repeat: no-repeat;
    background-size: contain;
}

#page-download .download-item.manual::before {
    background-image: url(../gfx/file-manual.svg);
}
#page-download .download-item.brochure::before {
    background-image: url(../gfx/file-pdf.svg);
}

#page-download .download-item.-color-posuvne-brany::before {
    filter: invert(75%) sepia(83%) saturate(1112%) hue-rotate(341deg) brightness(99%) contrast(98%);
}
#page-download .download-item.-color-rotacni-brany::before {
    filter: invert(41%) sepia(16%) saturate(4743%) hue-rotate(320deg) brightness(89%) contrast(106%);
}
#page-download .download-item.-color-garazova-vrata::before {
    filter: invert(51%) sepia(90%) saturate(3360%) hue-rotate(169deg) brightness(97%) contrast(100%);
}
#page-download .download-item.-color-dopravni-zavory::before {
    filter: invert(28%) sepia(48%) saturate(1119%) hue-rotate(249deg) brightness(96%) contrast(86%);
}
#page-download .download-item.-color-ovladaci-prvky::before {
    filter: invert(67%) sepia(73%) saturate(5600%) hue-rotate(126deg) brightness(92%) contrast(90%);
}
#page-download .download-item.-color-ridici-jednotky::before {
    filter: invert(46%) sepia(19%) saturate(3388%) hue-rotate(339deg) brightness(92%) contrast(100%);
}
#page-download .download-item.-color-sady::before {
    filter: invert(86%) sepia(1%) saturate(1071%) hue-rotate(46deg) brightness(86%) contrast(82%);
}
#page-download .download-item.-color-automaticke-sloupy::before {
    filter: invert(55%) sepia(97%) saturate(622%) hue-rotate(12deg) brightness(103%) contrast(101%);
}
#page-download .download-item.-color-poloautomaticke-sloupy::before {
    filter: invert(36%) sepia(44%) saturate(4249%) hue-rotate(330deg) brightness(88%) contrast(102%);
}
#page-download .download-item.-color-odnimatelne-sloupy::before {
    filter: invert(65%) sepia(16%) saturate(1170%) hue-rotate(284deg) brightness(91%) contrast(85%);
}
#page-download .download-item.-color-pevne-sloupy::before {
    filter: invert(49%) sepia(18%) saturate(2529%) hue-rotate(140deg) brightness(91%) contrast(101%);
}
#page-download .download-item.-color-prislusenstvi::before {
    filter: invert(38%) sepia(89%) saturate(1430%) hue-rotate(140deg) brightness(93%) contrast(101%);
}

@media (max-width: 991.98px) {
    #page-download .download-items {
        display: flex;
        gap: 1.19rem;
        flex-flow: wrap;
        align-content: flex-start;
        justify-content: center;
    }
    
    #page-download .download-item {
        flex-basis: calc(50% - 1.19rem);
    }

    #page-download .page-download-menu {
        border-bottom: none;
    }
}

#page-reference {
    min-height: 80vh;
    position: relative;
    padding-top: 4.69rem;
    padding-bottom: 0;
    background-color: #FFF;
}

#page-reference #content h1 {
    padding: 0 0 1.12rem 0;
}

#page-certificates {
    min-height: 80vh;
    position: relative;
    padding-top: 4.69rem;
    padding-bottom: 4.69rem;
    background-color: #FDFDFD;
}

.download-certificate-item-box {
    position: relative;
    padding: 0 2rem;
}

.download-certificate-item {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 1rem;
    padding: 2rem 1rem;
    text-align: left;
    background: #FBFBFB;
    box-shadow: 0px 2px 36px 6px rgba(0, 0, 0, 0.08);
}

.download-certificate-item::before {
    content: "";
    position: absolute;
    left: 0.63rem;
    top: 0.63rem;
    display: block;
    width: 0.9375rem;
    height: 0.9375rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../gfx/file-pdf.svg);
}

.download-certificate-item-image {
    position: relative;
    overflow: hidden;
}

.download-certificate-item img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: contain;
}

.download-certificate-item-box h2 {
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.gallery-background {
    padding: 2rem 0 4.69rem 0;
}

.gallery-box {
    position: relative;
    padding: 0;
    z-index: 1;
}

.gallery-box::before {
    position: absolute;
    content: "";
    display: block;
    top: 6rem;
    width: 100%;
    height: 60%;
    background-color: #2E3339;
    z-index: 0;
}

.gallery-box:nth-child(2n)::before {
    top: unset;
    bottom: -4.69rem;
    background-color: var(--color-primary);
}

.gallery {
    width: 100%;
    display: grid;
    margin-top: 1rem;
    grid-gap: 1rem;
    grid-template-columns: 33% 33% 33%;
    grid-auto-rows: 250px;
    grid-auto-flow: dense; 
    z-index: 2; 
}

.gallery > div {
    position: relative;
    overflow: hidden;
}

.gallery a > div {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.gallery > div:first-child {
    grid-column: span 2;
    grid-row: span 2;
 }
 

.gallery > div:nth-child(4n+1) {
   grid-column: span 2;
   grid-row: span 2;
}


.gallery img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    .gallery {
        width: calc(100% - 1rem);
        grid-template-columns: 50% 50%;
        grid-auto-rows: 150px;
        grid-auto-flow: dense; 
    }
}

/**
// !SECTION
**/