@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap);
:root {
    --main-color: #c50511;
    --black-color: #000000;
    --grey-color: #4b4b4b;
    --light-grey-color: #b7b7b7;
    --lightest-grey-color: #f6f6f6;
    --white-color: #ffffff;
}

body,
input,
.input,
select,
option,
textarea,
button,
.button,
table {
    color: unset;
    font-family: Poppins, "Times New Roman", Helvetica, sans-serif;
    font-size: 12pt;
    line-height: 22pt;
    margin: 0;
    padding: 0;
    text-align: unset;
}

input,
.input,
select {
    padding-left: 10px;
}

h1 {
    font-size: 28pt;
    font-weight: bold;
    line-height: 38pt;
    margin: 0 0 20px 0;
}

h2 {
    color: var(--black-color);
    font-size: 24pt;
    font-weight: bold;
    margin: 0 0 20px 0;
}

h2 a {
    color: var(--main-color);
    font-size: 13pt;
    padding: 0;
    margin-bottom: 10px;
}

h3 {
    font-size: 20pt;
}

a {
    color: var(--main-color);
    font-weight: normal;
    text-decoration: none;
}

input[type="submit"] {
    border: none;
}

.wrap {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
}

.mainwrap {
    display: flex;
    margin: 0 auto;
    max-width: 1400px;
    padding: 20px;
}

.leftwrapper {
    box-sizing: border-box;
    flex-shrink: 0;
    margin-right: 20px;
    padding-bottom: 20px;
    width: 295px;
}

.mainwrap.no-tree {
    flex-direction: column-reverse;
}

.mainwrap.no-tree .leftwrapper {
    width: 100%;
    margin-right: 0;
}

.mainwrap.no-tree .leftwrapper .product-tree {
    display: none;
}

.middle {
    box-sizing: border-box;
    padding: 0;
    width: 100%;
}

.page-info {
    position: relative;
}

.page-info .helpinfo {
    position: absolute;
    top: 0;
    right: 0;
}

.notes-style img {
    margin: 0;
    max-width: 100%;
}

/********************* New CSS styles for responsive design ***********************/
.action-button,
.cat .product-list .tile .basket form button,
.cat .filter-all .action-button,
.product .info-tile .basket form .button {
    box-sizing: border-box;
    background-color: var(--main-color);
    color: var(--white-color);
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    height: 54px;
    border-radius: 27px;
    padding: 10px 41px;
}

a.action-button {
    text-decoration: none;
}

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

.action-button.small {
    height: 32px;
    padding: 0 34px;
}

ul li {
    color: var(--black-color);
    list-style: square;
    padding: 0 0 0 10px;
}

ul li span {
    position: relative;
    top: -4px;
}

ul li::marker {
    color: var(--main-color);
    font-size: 19pt;
}

.ibox {
    box-sizing: border-box;
    overflow: hidden;
}

.ibox.rounded {
    border: 1px solid var(--light-grey-color);
    border-radius: 10px;
    padding: 10px;
}

.env-box {
    margin: 0 0 20px 0;
}

.env-box.inner {
    margin: 0 0 10px 0;
}

.r-container {
    display: flex;
    flex-wrap: wrap;
    align-items: normal;
    justify-content: normal;
    margin: 0 auto;
    width: 100%;
    max-width: 1400px;
}

.r-container.justified {
    justify-content: space-between;
}

.half {
    width: 50%;
    max-width: 700px;
}

.third {
    width: 32%;
    max-width: 460px;
}

.quarter {
    width: 23.5%;
    max-width: 350px;
}

.sixth {
    max-width: 16.66%;
}

.r-image {
    text-align: center;
    position: relative;
}

.r-image img {
    max-width: 100%;
    max-height: 100%;
    width: unset; /* application generates preview picture with "width" attribute, which distorts some pictures */
}

.closable {
    position: relative;
}

.closable .close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px;
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.r-form .row {
    padding-bottom: 20px;
}

.r-form .row .label {
    display: block;
    padding-bottom: 15px;
}

.r-form .row:last-child {
    padding-bottom: 0;
}

.r-form .row.send {
    padding-top: 20px;
    text-align: center;
}

.r-form .input-text,
.r-form .input-textarea {
    background-color: var(--lightest-grey-color);
    box-sizing: border-box;
    border: 1px solid #bcbcbc;
    display: flex;
    align-items: center;
    height: 50px;
    width: 100%;
}

.modal-fade {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.7;
    z-index: 1;
    left: 0;
    top: 0;
}

input[type="checkbox"].switcher {
    position: absolute;
    visibility: hidden;
}

input[type="checkbox"].switcher + label {
    cursor: pointer;
    padding-left: 25px;
    position: relative;
}

input[type="checkbox"].switcher + label::before {
    content: "";
    background-color: white;
    position: absolute;
    display: block;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--light-grey-color);
    border-radius: 3px;
    z-index: 1;
}

input[type="checkbox"].switcher:checked + label::before {
    background: url(img/new/check.svg) no-repeat center center;
    background-size: 90%;
}

/********************************* Homepage ********************************/
.r-title .our-advantages .r-container,
.write-to-us .r-container {
    align-items: center;
}

.r-title h2 {
    color: var(--grey-color);
    font-size: 24pt;
    max-width: 1400px;
    padding-bottom: 40px;
    padding-top: 0;
}

.r-title h3 {
    padding-bottom: 20px;
}

.r-title a.action-button {
    margin-top: 30px;
}

.r-title .mainbanner {
    background-color: var(--grey-color);
    color: var(--white-color);
    position: relative;
 }

.r-title .mainbanner .r-image {
    color: var(--white-color);
    position: relative;
}

.r-title .mainbanner .r-image img {
    display: flex;
}

.r-title .mainbanner h2 {
    color: var(--white-color);
    font-size: 37pt;
    line-height: 50px;
}

.r-title .mainbanner .banner-text {
    box-sizing: border-box;
    position: absolute;
    top: 20%;
    left: 0;
    margin: 0;
    padding: 0 30px;
    width: 100%;
}

.r-title .mainbanner .banner-text .eshop-button {
    width: 100%;
}

.r-title .section,
.write-to-us,
.r-title .kariera .text,
.footer {
    padding: 50px 30px;
}

.r-title .about,
.r-title .kariera {
    padding-bottom: 0;
}

.r-title .about h2 {
    display: block;
    background: url(img/new/sipka-about.svg) no-repeat right 4px;
}

.r-title .about h2 span {
    background-color: var(--white-color);
    padding-right: 25px;
}

.r-title .about .left {
    width: 33%;
    max-width: 460px;
}

.r-title .about .right {
    box-sizing: border-box;
    width: 65%;
    color: #262626;
    max-width: 930px;
    padding-left: 10px;
}

.r-title .about ul li {
    padding: 0 0 10px 10px;
}

ul {
    padding-left: 27px;
}

.r-title .highlights {
    color: var(--grey-color);
}

.r-title .highlights .quarter {
    line-height: 15pt;
}

.r-title .highlights h2 {
    color: var(--main-color);
    font-size: 33pt;
}

.r-title .our-brands,
.r-title .info {
    background-color: #f7f7f7;
}

.r-title .our-brands .third,
.r-title .info .third {
    background-color: var(--white-color);
    border: 1px solid var(--light-grey-color);
    border-radius: 9px;
    padding: 7% 4% 4%;
}

.r-title .our-brands .third {
    text-align: center;
}

.r-title .our-brands .third div {
    padding-top: 30pt;
}

.r-title .our-advantages h2 {
    color: var(--main-color);
    line-height: 40px;
}

.r-title .our-advantages .text {
    padding-right: 100px;
}

.r-title .section.kariera {
    padding: 0;
}

.r-title .section.kariera .r-container {
    max-width: unset;
}

.r-title .kariera .half {
    max-width: 1024px;
}

.r-title .kariera h2 {
    color: var(--white-color);
}

.r-title .kariera .text {
    background: url(img/new/kariera-pozadi.png) no-repeat right;
    background-size: cover;
    color: var(--white-color);
    display: flex;
    align-items: center;
}

.r-title .kariera .text div {
    max-width: 450px;
}

.r-title .kariera .r-image {
    display: flex;
}

.r-title .info .third {
    padding: 2% 4% 8em 4%;
    position: relative;
}

.r-title .info .rubric {
    color: var(--grey-color);
    padding-bottom: 20px;
}

.r-title .info h3 {
    color: var(--grey-color);
    font-size: 14pt;
    padding: 30px 0 40px;
}

.r-title .info a.more {
    color: var(--main-color);
    font-weight: normal;
    position: absolute;
    bottom: 2em;
}

.r-title .reference .third.r-container .r-image {
    width: 50%;
}

.r-title .reference .text {
    padding-bottom: 40px;
}

/*********************************** Header **********************************************/
.header {
    border-bottom: 1px solid var(--light-grey-color);
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    height: 100px;
    padding: 0 20px;
    position: relative;
}

.header a.action-button {
    margin-top: 0;
}

.header .r-container div {
    margin: 0 2px;
}

.header .r-container div:first-child  {
    margin-left: 0;
}

.header .r-container div:last-child {
    margin-right: 0;
}

.header .logo {
    display: flex;
    width: 200px;
}

.header .logo a {
    display: flex;
}

.header .search {
    display: flex;
    align-items: center;
    margin: 0 4px;
}


.header .search .search-form {
    display: flex;
    flex-grow: 0.5;
    width: 270px;
}

.header .search .open {
    background: url(img/new/icon-search.png) no-repeat center center;
    cursor: pointer;
    display: none;
    width: 24px;
    height: 24px;
}

.header .search form {
    position: relative;
    width: 100%;
}

.header .search .search-input {
    background-color: var(--lightest-grey-color);
    border: 1px solid var(--light-grey-color);
    border-radius: 22px;
    box-sizing: border-box;
    padding: 0 20px;
    height: 45px;
    width: 100%;
}

.header .search .search-button {
    background: url(img/new/icon-search.png) no-repeat right center;
    border: none;
    height: 45px;
    width: 45px;
    position: absolute;
    right: 20px;
}

.header .topmenu {
    display: flex;
    align-items: center;
    flex-grow: 0.5;
    margin: 0 4px;
}

.header .topmenu .items {
    display: flex;
    align-items: center;
    width: 100%;
}

.header .topmenu ul {
    display: flex;
    place-content: center space-around;
    padding: 0;
    width: 100%;
}

.header .topmenu ul li {
    float: left;
    list-style: none;
    margin: 0 4px;
}

.header .topmenu .items a {
    color: var(--black-color);
}

.header .topmenu .open {
    background: url(img/new/menu-open.svg) no-repeat center center;
    cursor: pointer;
    display: none;
    margin-left: 10px;
    width: 24px;
    height: 24px;
}

.header .lang a {
    color: var(--main-color);
}

.topmenu-items .login a,
.header .topmenu .items .login a {
    color: var(--white-color);
}

.header .logged-user {
    background-color: var(--main-color);
    cursor: pointer;
    display: block;
    width: 20px;
    height: 20px;
    mask: url(img/new/icon-osoba.svg) no-repeat;
    mask-size: contain;
}

.topmenu-items,
.login-div,
.logged-user-menu {
    background-color: var(--white-color);
    box-sizing: border-box;
    display: none;
    padding: 40px 20px;
    position: absolute;
    right: 0;
    width: 100%;
    max-width: 400px;
    height: 100%;
    z-index: 6;
}

.topmenu-items .login {
    text-align: center;
}

.topmenu-items ul,
.logged-user-menu ul {
    padding: 0;
}

.topmenu-items ul li,
.logged-user-menu ul li {
    float: none;
    list-style: none;
    padding: 20px 0;
    border-bottom: 1px solid var(--light-grey-color);
}

.topmenu-items ul li:last-child,
.logged-user-menu ul li:last-child {
    border-bottom: none;
}

.topmenu-items ul li.user-name,
.logged-user-menu ul li.user-name {
    font-weight: bold;
}

.topmenu-items a,
.logged-user-menu a {
    color: var(--black-color);
}

.logged-user-menu a.logout {
    color: var(--main-color);
}

.header .basket {
    color: var(--light-grey-color);
    cursor: pointer;
    display: block;
    width: 30px;
    height: 20px;
}

.header .basket.active {
    color: var(--main-color);
}

.header .basket svg {
    position: relative;
    top: -5px;
}

.cat-tree-show {
    display: none;
    padding: 20px 0;
}

.r-title .cat-tree-show {
    display: none; /* Never display on the home page */
}

.cat-tree-show .r-container {
    place-content: center;
}

.cat-tree-show button {
    background-color: var(--white-color);
    border: 1px solid var(--grey-color);
    color: var(--black-color);
    font-weight: normal;
}

/**************************************** Left column **************************************/
.product-tree {
    background-color: var(--white-color);
    box-sizing: border-box;
}

.product-tree a {
    font-weight: bold;
}

.product-tree .tabs {
    background-color: var(--lightest-grey-color);
    border: 1px solid var(--light-grey-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.product-tree .tabs .tab {
    border-right: 1px solid var(--light-grey-color);
    display: flex;
    align-items: center;
    place-content: center;
    padding: 15px 0;
    width: 50%;
}

.product-tree .tabs .tab:first-child {
    border-radius: 10px 0 0 10px;
}

.product-tree .tabs .tab:last-child {
    border-right: none;
    border-radius: 0 10px 10px 0;
}

.product-tree .tabs .tab a {
    color: var(--light-grey-color);
}

.product-tree .tabs .tab.active {
    background-color: var(--white-color);
    font-weight: bold;
    color: var(--black-color);
}

.product-tree .nav {
    border: 1px solid var(--light-grey-color);
    border-radius: 10px;
    margin-top: 20px;
    padding: 0;
}

.product-tree .nav ul {
    background-color: unset;
    margin: 0;
    padding: 0;
}

.product-tree .nav ul li {
    background: none;
    border-left: none;
    border-bottom: 1px solid var(--light-grey-color);
    list-style: none;
    padding: 0;
}

.product-tree .nav li a,
.product-tree .nav li.akt a.akt {
    background: none;
    display: block;
    color: var(--main-color);
    padding: 15px 20px;
}

.product-tree .nav ul li:last-child {
    border-bottom: none;
}

.product-tree .nav ul ul {
    background-color: var(--lightest-grey-color);
    border-top: 1px solid var(--light-grey-color);
    border-bottom: none;
    padding: 15px 0 15px 20px;
}

.product-tree .nav ul ul li {
    background: none;
    border-bottom: none;
}

.product-tree .nav ul ul li a {
    background: none;
    color: var(--grey-color);
    font-weight: normal;
    padding: 0 20px 10px 0;
}

.product-tree .nav ul ul li.akt {
    background: unset;
}

.product-tree .nav ul ul li.akt a,
.product-tree .nav ul ul li.akt a.akt {
    padding: 0 20px 10px 0;
}

.product-tree .nav ul ul li.akt a.akt {
    color: var(--black-color);
    font-weight: bold;
}

.product-tree .nav ul ul ul {
    border-top: none;
    padding: 0 0 0 5px;
}

.product-tree .nav ul ul ul li,
.product-tree .nav ul ul ul li.akt {
    border-left: 1px solid #dbdbdb;
    background: url(img/new/icon-tree.png) no-repeat left top;
    padding-left: 30px;
}

.product-tree .nav ul ul ul li:last-child {
    border-left: none;
    background: url(img/new/icon-tree-end.png) no-repeat left top;
}

.lbox-hotline {
    border: 1px solid var(--light-grey-color);
    border-radius: 10px;
    margin-top: 20px;
}

.lbox-hotline .top {
    padding: 20px;
    border-bottom: 1px solid var(--light-grey-color);
    margin-bottom: 20px;
}

.lbox-hotline .contacts {
    padding: 0 20px 10px 20px;
}

.lbox-hotline .contacts:last-child {
    padding-bottom: 20px;
}

.lbox-hotline .contacts .title {
    font-weight: bold;
    padding-bottom: 5px;
}

.lbox-hotline .contacts .detail {
    display: flex;
    align-items: center;
    padding: 0;
}

.contact:before {
    content: ' ';
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    margin-right: 10px;
    width: 20px;
    height: 1em;
}

.contact.mail:before {
    background-image: url(img/new/icon-email.svg);
}

.contact.phone:before {
    background-image: url(img/new/icon-telefon.svg);
}

.contact.support:before {
    background-image: url(img/new/icon-servis.svg);
}

.contact.share:before {
    background-image: url(img/new/icon-doporucit.svg);
}

.contact.print-page:before {
    background-image: url(img/new/icon-tisk.svg);
}

/**************************************** Article list *************************************/
.articles .article {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 0 20px 0;
}

.articles .article .r-image {
    width: 100px;
}

.articles .article .r-image a {
    display: inline-block;
}

.articles .article .texts {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0 0 0 10px;
    width: 100%;
}

.articles .article h2 {
    flex-grow: 1;
}

.articles .article .info,
.articles .article .perex {
    width: 100%;
    margin: 0 0 10px 0;
}

.articles .article .perex {
    color: var(--grey-color);
    max-height: 120px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4; /* row num */
    -webkit-box-orient: vertical;
}

/**************************************** Product list *************************************/
.cat {
    position: relative;
}

.cat .cesta,
.product .cesta {
    color: var(--black-color);
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 0 20px 0;
}

.cat .cesta a {
    color: var(--main-color);
    font-weight: normal;
    text-decoration: underline;
}

.cesta .eshop {
    background: url(img/new/logo-breadcrumbs.svg) no-repeat center center;
    background-size: contain;
    display: inline-block;
    width: 22px;
    height: 34px;
}

.cesta .sep {
    background: url(img/new/breadcrumbs-sipka.svg) no-repeat center center;
    background-size: contain;
    display: inline-block;
    width: 35px;
    height: 10px;
}

.cat h2,
.fulltext h2 {
    color: var(--black-color);
}

.cat .more-arts {
    text-align: right;
}

.cat .more-arts a {
    color: var(--main-color);
    display: inline-block;
    height: 30px;
    background: url(img/new/sipka-prava.svg) no-repeat right center;
    background-size: contain;
    padding: 0 40px 0 0;
}

.cat .filter-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 0 10px 0;
}

.cat .filter-layout .menu {
    background: none;
    left: unset;
    padding: 0 10px 10px 0;
}

.cat .filter-layout .menu .items {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.cat .filter-layout .menu form .item {
    padding: 0 0 0 10px;
}

.cat .filter-layout .menu .item:first-child {
    padding-left: 0;
}

.cat .filter-layout .menu .item a {
    color: var(--black-color);
    font-weight: normal;
    padding: 0 10px;
}

.cat .filter-layout .filter {
    padding: 0 10px 10px 0;
}

.cat .filter-layout .cards {
    color: var(--main-color);
    padding: 0 0 10px 0;
}

.cat .compare {
    padding: 0 0 10px 0;
    text-align: left;
}

.cat .compare a.red {
    background: url(img/new/icon-porovnat-produkty.svg) no-repeat left center;
    background-size: contain;
    color: var(--main-color);
    display: inline-block;
    height: 20px;
    font-weight: normal;
    padding: 0 0 0 30px;
}

.cat .compare .selection {
    margin: 20px 0 0 0;
}

.cat .compare .product-select div {
    padding-bottom: 20px;
}

.cat .compare .product-select select {
    max-width: 100%;
}

.cat .product-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
    gap: 2%;
    margin: 0;
    overflow: hidden;
    width: 100%;
}

.cat .product-list .tile {
    margin-bottom: 20px;
    position: relative;
    width: 32%;
}

.cat .product-list .tile h2 {
    padding: 0;
}

.cat .product-list .tile .r-image {
    height: 250px;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 20px;
}

.cat .product-list .tile .state-img {
    display: flex;
    flex-direction: column;
    text-align: right;
    position: absolute;
    left: 0;
    z-index: 1;
}

.cat .product-list .tile .state-img .state-label {
    color: var(--white-color);
    display: inline-block;
    font-weight: bold;
    padding: 5px 15px;
    margin: 0 0 5px 0;
}

.cat .product-list .tile .state-img .state-label.akce {
    background-color: var(--main-color);
}

.cat .product-list .tile .state-img .state-label.new {
    background-color: #5a8b2e;
}

.cat .product-list .tile .state-img .state-label.sleva {
    background-color: #df7645;
}

.cat .product-list .tile .state-img .state-label.doprodej {
    background-color: var(--grey-color);
}

.cat .product-list .tile .title {
    margin-bottom: 20px;
}

.cat .product-list .tile .title h2 a {
    color: var(--black-color);
    font-size: 12pt;
    font-weight: bold;
    max-height: 90px;
    padding: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3; /* row num */
    -webkit-box-orient: vertical;
}

.cat .product-list .tile .description {
    color: var(--grey-color);
    max-height: 120px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4; /* row num */
    -webkit-box-orient: vertical;
    margin-bottom: 20px;
}

.cat .product-list .tile .price {
    /*display: flex;
    justify-content: space-between;*/
    font-weight: bold;
    padding-bottom: 10px;
}

.cat .product-list .tile .price div {
    float: left;
    min-width: 50%;
    text-align: right;
    white-space: nowrap;
}

.cat .product-list .tile .price .r {
    color: var(--main-color);
}

.cat .product-list .tile .basket {
    padding-bottom: 10px;
}

.cat .product-list .tile .basket form,
.product .info-tile .basket form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cat .product-list .tile .basket form input[type="text"],
.product .info-tile .basket form input[type="text"]{
    border: 1px solid var(--light-grey-color);
    border-radius: 3px;
    margin-right: 10px;
    padding: 3px 10px;
    text-align: right;
}

.cat .product-list .tile .basket form button,
.cat .product-list .tile .basket form .input {
    margin-top: 10px;
}

.cat .product-list .tile .basket form button img,
.product .info-tile .basket form button img {
    display: none;
}

.cat .product-list .tile .del-info {
    color: var(--grey-color);
    margin-bottom: 10px;
    padding: 10px 0;
    text-align: center;
}

.del-info .immediately {
    color: #4ea50d;
    font-weight: bold;
}

.cat .product-list .tile .more {
    text-align: center;
    margin-bottom: 20px;
}

.cat .show-filter-button .action-button,
.cat .hide-filter-button .action-button,
.cat .product-list .tile .more .action-button {
    background-color: var(--white-color);
    color: var(--main-color);
    border: 1px solid var(--main-color);
    padding: 12px 15%;
}

.cat .show-filter-button,
.cat .hide-filter-button {
    text-align: center;
}

.cat .show-filter-button .action-button,
.cat .hide-filter-button .action-button {
    margin-bottom: 20px;
    padding: 12px 20px;
    width: 260px;
}

.cat .show-filter-button,
.cat .hide-filter-button {
    display: none;
}

.cat .opener {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
    padding: 10px 0;
}

.paging {
    display: flex;
    flex-wrap: wrap;
    align-items: normal;
    justify-content: space-between;
    padding-bottom: 10px;
    width: 100%;
}

.paging.line2 {
    padding-bottom: 20px;
}

.paging div {
    padding-bottom: 10px;
}

.paging select {
    margin-left: 10px;
}

.paging .pages a {
    color: var(--main-color);
}

/**************************************** Product detail ***********************************/
.product .main {
    margin-bottom: 20px;
}

.product .pictures {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    width: 49%;
}

.product .pictures .picture {
    width: 100%;
}

.product .pictures .gallery,
.product .photo {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.product .pictures .gallery .r-arrow {
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: absolute;
}

.product .pictures .gallery .r-arrow.left {
    background: url(img/new/sipka-leva.svg) no-repeat center center;
    background-size: contain;
    left: -12px;
}

.product .pictures .gallery .r-arrow.right {
    background: url(img/new/sipka-prava.svg) no-repeat center center;
    background-size: contain;
    right: -12px;
}

.product .pictures .thumb-gallery,
.product .photo .thumb-gallery {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

.product .photo .thumb-gallery {
    flex-wrap: wrap;
}

.product .pictures .thumb-gallery .thumb,
.product .photo .thumb-gallery .thumb {
    width: 32%;
}

.product .pictures .thumb-gallery .thumb {
    height: 171px;
}

.product .photo .thumb-gallery .thumb {
    margin-bottom: 20px;
}

.product .info-tile {
    border: 1px solid var(--light-grey-color);
    border-radius: 10px;
    padding: 0;
    width: 49%;
}

.product .info-tile .section {
    color: var(--grey-color);
    padding: 20px;
}

.product .info-tile .points {
    border-bottom: 1px solid var(--light-grey-color);
}

.product .info-tile .label {
    color: var(--black-color);
    font-weight: bold;
}

.product .info-tile .value a {
    color: var(--main-color);
    font-weight: normal;
}

.product .info-tile .description,
.product .info-tile .prices {
    color: var(--grey-color);
}

.product .info-tile .prices,
.product .info-tile .basket {
    padding-top: 0;
}

.product .info-tile .prices .price.wo-vat {
    color: var(--black-color);
    font-size: 14pt;
    font-weight: bold;
}

.product .info-tile .prices .price.dealer {
    color: var(--main-color);
}

.product .info-tile .basket,
.product .info-tile .info-about {
    border-bottom: 1px solid var(--light-grey-color);
}

.product .info-tile .basket form .button,
.product .info-tile .basket form .qty-input,
.product .info-tile .basket form .del-info {
    margin-top: 10px;
}

.product .info-tile .info-about,
.product .info-tile .tools {
    display: flex;
    align-items: normal;
    flex-wrap: wrap;
}

.product .info-tile .info-about .title {
    padding-right: 20px;
}

.product .info-tile .tools .contact a {
    color: var(--grey-color);
    margin-right: 20px;
}

.product .section-menu {
    border-bottom: 1px solid var(--light-grey-color);
    color: var(--grey-color);
}

.product .section-menu h3.item {
    font-size: 12pt;
}

.product .section-menu .item {
    background-color: var(--white-color);
    border: 1px solid var(--light-grey-color);
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    width: 19%;
    position: relative;
    top: 1px;
}

.product .section-menu .item.selected {
    border-bottom: none;
    color: var(--black-color);
    cursor: auto;
}

.product .tab-content {
    display: none;
    padding-top: 20px;
}

.product .tab-content.description {
    display: block;
}

.product .popis iframe,
.product .popis img {
    max-width: 100%;
}

.product .helpbox,
.product #dwnld-help-box {
    background-color: var(--light-grey-color);
    border: 1px solid var(--grey-color);
    border-radius: 3px;
    padding: 5px;
    position: absolute;
    z-index: 1;
}

.product .related,
.product .similar {
    margin-top: 40px;
}

/******************************************* Article ***************************************/
.clanek-detail a,
.notes-style a {
    color: var(--main-color);
    font-weight: normal;
}

.clanek-detail .notes-style {
    border-bottom: 1px solid var(--light-grey-color);
    color: var(--grey-color);
    padding: 0 0 10px 0;
}

.clanek-detail .perex {
    color: var(--grey-color);
}

.clanek-detail .bottom-info {
    padding: 10px 0;
    text-align: right;

}

/****************************************** Fulltext ***************************************/
.fulltext h2 {
    font-size: 12pt;
}

/******************************************* Basket ****************************************/
.progress-bar {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0;
    width: 100%;
}

.progress-bar .basket-step {
    background-color: var(--main-color);
    border: none;
    color: var(--white-color);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 22%;
}

.progress-bar .basket-step.marked {
    background-color: var(--grey-color);
}

.progress-bar .next-step {
    background: url(img/new/sipka-prava.svg) no-repeat center center;
    background-size: contain;
    display: block;
    width: 20px;
    height: 20px;
}

.basket-buttons,
.order-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: right;
}

.order-buttons {
    justify-content: space-between;
}

.basket-buttons .button{
    margin: 20px 0 0 20PX;
    padding: 5px 10px;
}

.basket-buttons select {
    margin-top: 20px;
}

.basket-buttons .action-button.button {
    height: unset;
}

.basket-items {
    margin: 20px 0 50px 0;
}

.basket-items th {
    padding: 3px;
    background-color: var(--grey-color);
    color: var(--white-color);
}

.basket-items td {
    vertical-align: middle;
    padding: 3px;
    border: 0;
    background-color: var(--lightest-grey-color);
}

.basket-items .input {
    text-align: right;
    padding-right: 2px;
    width: 30px;
}

.kosik-select th, table.pokladna th {
    text-align: right;
    padding-right: 4px;
    width: unset;
}

/******************************************* Footer ****************************************/
.write-to-us {
    background: url(img/new/background-write-to-us.png) center center var(--grey-color);
    background-size: cover;
}

.write-to-us .text-info {
    padding-right: 100px;
}

.write-to-us h2 {
    color: var(--white-color);
}

.write-to-us .text {
    color: var(--white-color);
    padding-bottom: 20px;
}

.write-to-us .text.intro {
    color: var(--light-grey-color);
}

.write-to-us .contact-form {
    padding: 55px 65px;
    background-color: var(--white-color);
    border-radius: 10px;
    color: var(--black-color);
}

.write-to-us .contact-form .input-textarea {
    height: 130px;
}

.footer .left {
    box-sizing: border-box;
    padding-right: 20px;
    width: 30%;
    max-width: 420px;
}

.footer .right {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 70%;
    max-width: 980px;
}

.footer .logo {
    max-width: 200px;
}

.footer .right .col {
    box-sizing: border-box;
    color: var(--grey-color);
    padding: 0 15px 0 0;
}

.footer h2 {
    color: var(--grey-color);
    font-size: 12pt;
    padding-bottom: 20px;
}

.footer a {
    color: var(--grey-color);
    font-weight: normal;
}

/********************************************Error pages ***********************************/
.not-found-box-wrapper,
.dlg-wrapper {
    padding: 20px 0;
    text-align: center;
}

.not-found-box,
.dlg {
    background: unset;
    border: 1px solid var(--light-grey-color);
    border-radius: 10px;
    padding: 20px;
    width: unset;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.not-found-box .content,
.not-found-box .not-found-box-end {
    background: unset;
}

.not-found-box h2,
.dlg h2 {
    font-size: 16pt;
    margin-bottom: 20px;
}

.dlg .link {
    text-align: right;
}

/********************************************* "Tablet" ************************************/
@media screen and (max-width: 1024px) {
    .header .logo {
        flex-grow: 1;
    }

    .header .topmenu {
        flex-grow: 0;
    }

    .header .topmenu .items {
        display: none;
    }

    .header .topmenu .open {
        display: block;
    }

    .r-title .mainbanner h2 {
        font-size: 31pt;
    }

    .r-title .about .left,
    .r-title .about .right {
        width: 50%;
    }

    .r-title .highlights h2 {
        font-size: 22pt;
    }

    .r-container.kariera {
        display: unset;
    }

    .r-title .kariera .half {
        width: 100%;
    }

    .sixth {
        max-width: unset;
        width: 33.33%;
    }

    .r-title .mainbanner .banner-text {
        top: 5%;
    }

    .r-title .our-advantages .text {
        padding-right: 35px;
    }

    .r-title .kariera .text div {
        max-width: unset;
    }

    .write-to-us .text-info {
        padding-right: 50px;
    }

    .write-to-us .contact-form {
        padding: 40px 25px;
    }

    .cat .product-list .tile {
        width: 49%;
    }

    .footer .left {
        padding-right: 15px;
    }

    .footer .right .col {
        padding: 0 10px 20px 0;
        width: 50%;
    }

}

/********************************************* "Small tablet" ************************************/
@media screen and (max-width: 800px) {

    .header .search .search-form {
        display: none;
        width: 100%;
    }

    .header .search .open {
        display: block;
    }

    .r-title .our-advantages .half {
        width: 100%;
        max-width: unset;
    }

    .r-title .our-advantages .text {
        padding: 0 0 20px 0;
    }

    .mainwrap {
        flex-direction: column-reverse;
    }

    .leftwrapper {
        width: 100%;
        margin-right: 0;
    }

    .leftwrapper .product-tree {
        display: none;
    }

    .cat-tree-show {
        display: block;
    }

    .product-tree {
        position: absolute;
        top: 0;
        left: 0;
        padding: 20px 20px 100px 20px;
        width: 100%;
        z-index: 5;
    }

}

/********************************************* "Mobile" ************************************/
@media screen and (max-width: 560px) {

    .r-title h2 {
        padding-bottom: 20px;
    }

    .half {
        width: 100%;
    }

    .r-title .about .left,
    .r-title .about .right{
        width: 100%;
        max-width: unset;
        padding-left: 0;
    }

    .third {
        width: 100%;
        margin-bottom: 20px;
    }

    .quarter {
        width: 100%;
        margin-bottom: 20px;
    }

    .sixth {
        width: 100%;
    }

    .r-title .mainbanner .banner-text {
        text-align: center;
    }

    .r-title .about h2 {
        background: none;
    }

    .r-title .highlights {
        padding-top: 20px;
    }

    .r-title .highlights .quarter {
        padding-top: 30px;
        text-align: center;
        max-width: unset;
    }

    .write-to-us .text-info {
        padding-right: 0;
    }

    .cat .show-filter-button {
        display: block;
    }

    .cat .filter-all {
        display: none;
    }

    .cat .filter-all .hide-filter-button {
        display: block;
    }

    .cat .product-list .tile {
        width: 100%;
    }

    .product .pictures,
    .product .info-tile {
        width: 100%;
    }

    .product .pictures {
        margin-bottom: 20px;
    }

    .footer .r-container {
        flex-direction: column-reverse;
    }

    .footer .left {
        padding: 20px 0 0 0;
        width: 100%;
    }

    .footer .right {
        width: 100%;
    }

    .footer .right .col {
        padding: 0 0 20px 0;
        width: 100%;
    }

}

@media print {
    .noprint {
        display: none;
    }
}