@import url("symcss.css");

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

body { overflow-x: hidden;}



#cpBox { display:block; font-size:10px; font-family:Arial, Helvetica, sans-serif; margin:auto 0px 0px 0px; width:100%; bottom:0px; position: fixed; text-align:center; color:#FFFFFF; background-color:#000000; padding:5px; z-index:999999;}
#cpBox a { color:#FFFFFF;}
.cpBoxClose { cursor:pointer; color:#FFFFFF; text-decoration:underline;}
.cpBoxClose:hover { color:#CCCCCC;}

 a:hover {opacity: 0.5; }
 * { transition: 0.5s; font-family: "Barlow Condensed", serif; }

.btn { padding: 1rem 4rem !important; background-image: none !important; background-color: linear-gradient(0deg,rgba(217, 187, 142, 1) 0%, rgba(250, 247, 195, 1) 50%, rgba(217, 187, 142, 1) 100%) !important; text-transform: lowercase !important; border-radius: 100rem;}
.btn:hover {  background-color: #000000 !important;}


 header  { width: calc(100% - 7rem); position: absolute; z-index: 2; background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); align-items: center; transition: none !important;  padding: 0 4rem; display: grid; height: 20vh; min-height: 150px; max-height: 200px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr;     }
 .nonHome {  position: relative; background:#000;}


 .logo { grid-column: 1;  display: flex; align-items: center;  width: 30%;     }
 .logo img { width: auto; height: 16vh; min-height: 80px; padding: 0.5rem; border-radius: 1rem;    }
 .logo:hover { opacity: 1; }
 .logo:hover img { opacity: 0.6;  }

 

 header nav {   grid-column: 3 / 6; grid-row: 1 / 1; }
 header nav li { list-style: none; }
 header nav a { color: #fff; text-decoration: none; text-transform:  uppercase; font-size: 1.6rem; font-weight: 400;}
 header nav > ul  { display: flex; height: 50%; justify-items: end;  align-items: center; }

 header nav >  ul  ul { z-index: 2;  padding: 0.5rem 0; background-color: #0f230e; -webkit-border-radius: 0.2rem;  -moz-border-radius: 0.2rem;  border-radius: 0.2rem; }
 header nav >  ul  ul li { padding: 0.5rem 1.5rem;}
 header nav >  ul  ul a { font-size: 0.95rem; text-transform: capitalize; color: #ccc;}


 #search { all: unset; border-radius: 100rem;  left: 50%; top: calc(50% + 6rem); transform: translate(-50%,-50%);   padding: 0.5rem 0.5rem 0.5rem 2rem;  max-width: 400px; background-color: #fff; position: absolute; z-index: 3; display: flex;}
 #search input { all: unset; margin: 0; border: 0; padding-left: 0; min-width: 350px; font-size: 1.3rem; font-weight: 400; color: #444; }
 #search input[type=submit] { cursor: pointer; border-radius: 100rem; background-color: #000;  padding: 1rem 1.6rem; margin: 0; background-image: url(/images/search.svg); background-repeat: no-repeat; background-size: auto 70%;  background-position: center center;  width: 3rem; height: 1em; min-width: auto; text-indent: -100rem; display: block; overflow: hidden;}
 #search input[type=submit]:hover { opacity: 0.3; }

 .catalog-search {   border: 1px solid #000!important; position: relative !important;  margin: 0.5rem auto 0.5rem auto !important; top: auto !important; left: auto !important; transform:none !important;}

#bC { margin: 0; padding: 1rem 4rem; display: table; }
#bC  li { display: inline; padding-right: 1rem;}
#bC  li a { color: #888; font-size: 0.85rem;}
#bC  li a::before { content: "» ";}


 .systemMenu { display: flex; justify-content: center; align-items: center;}
 .systemMenu img { width: 2.5rem; height: auto;}
.systemMenu .phone { margin-right: 1.5rem; font-size: 2rem; font-weight: 300;}
.systemMenu .phone::before { content: ''; vertical-align:middle; margin-top: -0.25rem;  margin-right:0.5rem; display: inline-table;  width: 2rem; height: 2rem; background-image: url(/images/phone.svg); background-position: center; background-size: contain;}
.systemMenu .basketIcon { width: 2rem; height: auto;}
 .logout img {  width: auto; margin-left: 0.5rem; height: 1.7rem;  filter: brightness(100) grayscale(100%); }

 textarea:focus, input:focus{
    outline: none;
}

//.sm { display: flex; justify-content: end; align-items: center;} 
//.sm a { margin: 0 0.25rem 0 0.25rem;}
//.sm a:last-child {  margin: 0 0 0 0.25rem;}
.sm { position: absolute; bottom: 2rem; right: 4rem; z-index: 9; }
.sm img { width: 1.5rem; height: 1.5rem; margin-left:0.5rem;  }
.fb { position: absolute; bottom: 2rem; right: 2rem; z-index: 9; }
.insta { width: 2rem; height: 2rem; background-image: url(/images/insta.svg);}
.yt { width: 2rem; height: 2rem; background-image: url(/images/yt.svg);}

.swiper {
    width: 100%;
    height: 100vh;
    position: relative;
    min-height:600px;
  }
  
@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-1rem); }
  100% { transform: translateY(0); }
}

.ad { animation: floatY 1s ease-in-out infinite;  bottom: 2rem; left: calc(50% - 1rem); z-index: 9; position: absolute;  width: 1.8rem; height: 1rem; background-image: url(../images/ad.svg); background-size: 100% auto; background-repeat: no-repeat; background-position: center center;}
  

.label {  background-color: rgba(0, 0, 0, 0.5) !important; position: absolute;      left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); z-index: 2; display: flex; width: 100%; height: 100%; padding-bottom: 4rem;  justify-content: center; align-items: center; flex-direction:column;} 
.label p { text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); text-align: center; color: #ffffff; font-size: 4rem; font-weight: 400;   } 
.label span { display: block; font-size: 2.5rem;} 


.swiper-pagination { bottom: 8rem !important;  text-align: center !important; position:absolute !important; width:calc(100% - 4rem) !important; margin:2rem; }

.swiper-pagination-bullet { background: none !important; border: 1px solid #fff; border-radius: 100px !important;  }
.swiper-pagination-bullet-active { background: #fff !important;  }

.swiper-button-next,
.swiper-button-prev {

    right:4rem;
    padding-right: 0;
    padding-top:1rem;
    color: rgb(255, 255, 255) !important;
    fill: rgb(255, 255, 255) !important;
    stroke: rgb(255, 255, 255) !important;
font-size: 10px;
}
.swiper-button-prev { padding-left: 2rem; left:4rem; }

.swiper-slide > div {  color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; background: rgba(126, 108, 83, 0.2);}

.s1 {   background-image: url(/images/s4.jpg); background-size: cover; background-position: center center;}
.s2 {  background-image: url(/images/s1.jpg); background-size: cover; background-position: center center;}
.s3 {  background-image: url(/images/s2.jpg); background-size: cover; background-position: center center;} 

.main-text * { color: #fff;}
.main-text h1 { text-transform: uppercase; color: #fff; font-size: 4rem; margin-bottom: 2rem;}
.main-text h1 span { text-transform: uppercase; color: #fff; font-size: 3rem; display: block;}
.main-text p { font-size: 1.4rem;}
.main-text { background-color: #000;}
.main-text img { border-radius: 1rem; height: 80% !important;}
.main-text img:nth-of-type(1) {
  margin-top: 10vh;
}


.barup { background-image: url(/images/barup.svg); background-repeat: no-repeat; background-position: center top; background-size:cover; position: absolute; bottom: 0; z-index: 2;   height: 31vh; width: 100%; }


.middle {  gap: 1rem; height: auto;  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.middle > div { color: #686868;  display: flex; justify-content: center; flex-direction:column; align-items:end;}
.middle > div:nth-child(2) { align-items:flex-start; }
.middle h2 {  width: calc(100% - 1rem); margin-bottom: 1rem; font-weight: 600; text-align: left; color: #525252; font-size: 2rem; text-transform: capitalize; }
.middle h2 strong { display: block; font-size: 3.5rem; font-weight: 600;}
.middle p {  font-size: 1.1rem; width: calc(100% - 1rem); }
.middle a {font-size: 1.2rem;  text-decoration: none; color: #fff; background-image: url(/images/right.svg); background-repeat: no-repeat; background-size: auto 0.6rem; background-position: right 1rem center; background-color: #2DB7B7; text-transform: capitalize;  padding: 1rem 2.5rem 1rem 2rem; margin-top: 2.5rem;}
.middle a:hover { background: #333;}
.middle .spin-wrap {  width:80vh; height:80vh; position: relative; overflow: hidden;}
.middle .spin {     animation-name: spin; animation-duration: 15000ms; animation-iteration-count: infinite; animation-timing-function: linear; position: absolute; width:100%; height:100%; background-image: url(/images/e.svg); background-size: 50% 50%; background-position: right top; background-repeat: no-repeat; }
.middle .image { position: absolute; clip-path: circle(50% at 50% 50%); margin-top: 5%; margin-left: 5%;  width:90%; height:90%; background-image: url(/images/s2.jpg); background-size: auto 100%; background-position: center center; background-repeat: no-repeat; }

.s42 { position: relative; background-image: url(/images/s3a.jpg); background-attachment: fixed;  background-size: cover; background-position: center center; }
.s42 h2 { border-bottom: 1px solid #fff; padding-bottom: 2rem; margin-bottom: 2rem; text-shadow: 0px 0px 12px rgba(0, 0, 0, 1); color: #fff; text-align: center; text-transform: none; font-size: 3rem;}
.s42 h2 span { color: #fff; display: block; text-align: center; text-transform: none; font-size: 2rem;}

    .branches { width: 100%;  margin:0.5rem auto; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr ; }
    .branches > div { color: #fff; font-size: 0.85rem; text-align: center; border-radius: 1rem; padding: 2rem; background-color: #ff0000; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .branches > div:nth-child(even) { background-color: #000; }
    .branches > div strong {color: #fff; font-size: 1.2rem; font-weight: 400; margin-bottom: 0.5rem;}
    .branches > div::before {content: ''; vertical-align: middle; margin-bottom: 0.5rem;  width: 2rem; height: 2rem; display: inline-table; background-size: auto 100%; background-image: url(/images/location.svg); background-position: center center; background-repeat: no-repeat;}

    .branches > a { text-decoration:none; color: #fff; font-size: 0.85rem; text-align: center; border-radius: 1rem; padding: 2rem; background-color: #ff0000; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .branches > a:nth-child(even) { background-color: #000; }
    .branches > a strong {color: #fff; font-size: 1.2rem; font-weight: 400; margin-bottom: 0.5rem;}
    .branches > a::before {content: ''; vertical-align: middle; margin-bottom: 0.5rem;  width: 2rem; height: 2rem; display: inline-table; background-size: auto 100%; background-image: url(/images/location.svg); background-position: center center; background-repeat: no-repeat;}
    .branches > a:hover { background-color:#333;}


    .s42::before { background-image: url(/images/bardown.svg); background-repeat: no-repeat; background-position: center bottom; background-size:cover; top: 0; position: absolute; content: '';  width: 100%; height: 30vh;}

.s43 {
    background: #121212;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
    grid-auto-rows: minmax(200px, 40vh);
    padding: 4rem 4rem 4rem 4rem;
    gap: 1rem;
}

.s43 * {
    text-transform: uppercase;
    font-size: 1.2rem;
    color:#fff;
}

.s43>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #fff;
}

.s43>div:nth-child(2) {
    background-color: #E1C292;
    border: 1px solid #E1C292;
    color: #000;
}

.s43>div:nth-child(2) strong {
color: #000;
}


.s43>div img {
    width: auto;
    height: 5rem;
    margin-bottom: 1rem;
}

.s43>div strong {
    font-weight: 400;
    font-size: 2rem;
}


.s36 { min-height: auto; background-color: #000000; }
.s36 * { color: #ffffff80; text-decoration: none;}
.s36 ul li { list-style: none;}
.s36 ul li a { text-transform: lowercase; font-size: 0.9rem; font-weight: 300;}

.footer-contact {  flex-direction:column; align-items:end; justify-content:end !important; }
.footer-contact * { text-transform: uppercase; }
.footer-contact p { margin: 0 0 0.25rem 0; padding: 0; color: #eee; text-transform: lowercase; text-align: right;}
.footer-contact img { width:12rem; height: auto; margin-bottom: 1rem; filter: saturate(0); opacity: 1; }

.s37 { background-color: rgb(18, 55, 17); min-height: auto; }
.s37 * { color: #fff; text-decoration: none; text-transform: uppercase; }

.s40 { padding: 0; background-color: #3FAB3C; min-height:50vh !important; }
.s40 > div { min-height:auto; }
.s40 img { opacity: 0.6;}
.s40 * { color: #fff; }
.s40 > div p:last-child { font-size: 0.65rem; opacity: 0.6; }
.s40 form { display: flex; position: relative;}
.s40 label.error { color: red; position: absolute; bottom:-1.2rem; font-size: 0.75rem;}
input[type=submit] { background-color: #255B23; text-transform: uppercase;}

@keyframes bg {
    0% {
        background-position: right bottom;
    }
    50% {
        background-position: left top;
    }
    100% {
        background-position: right bottom;
    }    
}

.wrap-h1 { animation-name: bg; animation-duration: 35000ms; overflow: hidden; animation-iteration-count: infinite; animation-timing-function: linear; margin-bottom:2rem;   content:"";      background-image: url(/images/s4.jpg); background-attachment: fixed; background-size: 110%;   background-position: center bottom; }
.wrap-h1 h1 { color: #fff; background-color: rgba(0, 0, 0, 0.5);  height: 15vh; display: flex; font-weight: 300; text-transform: uppercase; font-size: 2rem; align-items: center; justify-content: center;  min-height: 100px; text-align: center; }

main { min-height: 100vh; height: auto;}


.s38 .btn {  margin: auto 4rem 2rem auto;  width: fit-content; text-transform: uppercase; padding: 1em 8rem 1rem 4rem; background: #FDEE00; color: #000; text-decoration: none; font-size: 1.2rem; font-weight: 300; clip-path: polygon(0 0, 100% 0, calc(100% - 4rem) 100%, 0% 100%); }
.s38 .btn::after {content: ''; margin-left:0.5rem; display: inline-table;  width: 0.9rem; height: 0.9rem; background-image: url(/images/btn.svg); background-repeat: no-repeat; background-size: auto 100%; background-position: center center;}

#kontakt * {
    font-size: 1.5rem;
    text-decoration: none;
    color: #000 !important;
    text-align:center;
}

#kontakt h2 {  font-size: 3rem;    text-transform: uppercase;  padding: 0; }

#kontakt {
    min-height: 80vh;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    grid-template-rows: minmax(50vh, auto);
    background-color: #000;
    margin: 4rem;
}

#kontakt > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
        padding: 4rem;
}
#kontakt > div:nth-child(2) { background-color: #E1C292;}
#kontakt > div:nth-child(1) img { margin: 1rem auto; width: 50%; height: auto; max-width: 400px; min-width: 150px; }



#kontakt .phone {
    background-image: url(../images/phone.svg);
    background-repeat: no-repeat;
    background-size: 2rem auto;
    padding-left: 2.5rem;
    background-position: left center;
    font-size: 2rem;
    margin-bottom: 1rem;
}



#kontakt .mail {
    background-image: url(../images/mail.svg);
    background-repeat: no-repeat;
    background-size: 1.8rem auto;
    padding-left: 2.5rem;
    background-position: left 0.5rem;
    font-size: 2rem;
}



#kontakt strong {
    margin-left: 1rem;
}


.pagination { display: flex; justify-content: center; align-items: center; padding: 2rem 1rem;}
.pagination li { display: block; margin: 0 1rem; border-radius: 10rem; }
.pagination li a { text-decoration: none; color:#000; padding: 0.7rem 0.3rem; }
.pagination .active { background: #000; padding: 1rem; }
.pagination .active a {color:#fff;}

.offer h3 { color: #000; font-size: 2.5rem; margin-bottom: 2rem;}

.catalog { padding: 1rem; background: #fff;  margin: 0rem 0 1rem 1rem;  }
.catalog h2 { text-transform: uppercase; margin-bottom:1.5rem; color: #bbb; font-size: 1.8rem; font-weight: 200;}
.catalog nav { display: flex; flex-direction: column; overflow-y: auto; height: 50vh;  scrollbar-color: #ccc #fff;   scrollbar-width: thin; } 
.catalog nav::-webkit-scrollbar { height: 0.2rem;  width: 0.2rem;   background: #fff;}
.catalog nav::-webkit-scrollbar-thumb {   background: #ccc;}
.catalog nav::-webkit-scrollbar-corner { background: #ffffff;}
.catalog a { padding: 0.4rem 0; text-decoration: none; font-size: 0.9rem; color: #666;  }
.active { color: #ff0000 !important; font-weight: 400;}


.mainCatalog { display:none; margin: 0.5rem 4rem; padding: 1rem 0; position: relative;    overflow: auto; white-space: nowrap; scrollbar-color: #eee #fff;   scrollbar-width: thin;}
.mainCatalog a { text-decoration: none; color: #333; font-size: 1rem; margin-right: 1.5rem; display: inline-block;}
.mainCatalog::-webkit-scrollbar { height: 0.2rem;  width: 0.2rem;   background: #fff;}
.mainCatalog::-webkit-scrollbar-thumb {   background: #eee;}
.mainCatalog::-webkit-scrollbar-corner { background: #ffffff;}

.no-result {  padding:2rem; border-radius: 1rem; display: flex;
  //justify-content: center;
  //align-items: center;
  flex-direction: column;}
.no-result p { text-align:center; font-size:1.2rem; color:#888;}
.no-result p:nth-child(2) { font-size:1.8rem; color:#666; }
.no-result p:nth-child(4), .no-result p:nth-child(5) { font-size:1.8rem; color:#666; }
.no-result p img { filter: invert(1); opacity: 0.5; width:6rem; height:auto; }

main .products { justify-items: center !important;  padding:0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;  }

.products-wrap {  padding: 0 4rem;    display: grid; grid-template-columns: 1fr; grid-template-rows: auto; }
/*.products a { display: table; width: 100%;  position: relative; text-decoration: none; -webkit-box-shadow: 2px 2px 15px -6px rgba(0, 0, 0, 1);
    -moz-box-shadow: 2px 2px 15px -6px rgba(0, 0, 0, 1);
    box-shadow: 2px 2px 15px -6px rgba(0, 0, 0, 1);  border-radius: 1rem;  padding:0.5rem; margin-bottom: 1.5rem;  background: #fff !important; }

.products a strong { font-size: 1.2rem;  color: #222; text-transform: uppercase; font-weight: 400; display: table; padding: 1rem; } 
.products a span { color: #ff0000; font-size: 1.2rem; padding: 1rem; } 
.products img   {  border-radius: 1rem; width: 30% !important; float: left; object-fit:cover; min-height: 180px;  max-height: 180px; height: 50vh;  overflow: hidden;   height: auto !important;} 
*/
.products * { text-decoration: none;}
.products a strong { font-size: 1.5rem;  color: #222; text-transform: uppercase; font-weight: 400; display: table; padding: 1rem; } 
.products a span { color: #666; font-size: 1.6rem; padding: 1rem; } 
.products { padding-bottom: 3rem !important;   padding: 0 1.5rem;  }
.products a { width: 100%; border:1px solid #eee; border-radius: 1rem; -webkit-box-shadow: 2px 2px 8px -6px rgba(0, 0, 0, 1);
    -moz-box-shadow: 2px 2px 8px -6px rgba(0, 0, 0, 1);
    box-shadow: 2px 2px 8px -6px rgba(0, 0, 0, 1); min-height: 50vh; height:auto;  text-align: center !important; align-items: center; justify-content: space-between; display: flex !important;  flex-direction: column !important;}
.products img   {  border-radius: 1rem; width: auto!important;  object-fit:cover; min-height: 180px;  max-height: 300px !important; height: 100%;  overflow: hidden;   height: auto !important;} 


.s44, .s51 { background: #f0f0f0; height: auto; min-height: 50vh;  padding: 2rem auto !important;}
.s44 h2, .s51 h2 { text-transform: uppercase; text-align: center; width: 10%; font-size: 2.5rem; display: table; padding-top: 3rem; padding-bottom: 1rem;  margin: 0 auto;}
.s44 h2 span, .s51 h2 span { font-size: 2.5rem;}
.s44 p, .s51 p { text-align: center; color: #333; padding: 1rem; font-weight: 400; font-size: 1.5rem; margin: 0;}
.s44 p:nth-of-type(2), .s51 p:nth-of-type(2) { font-size: 1.2rem; padding: 0; margin-bottom: 4rem;}
.productsSlide { padding-bottom: 3rem !important;   width: calc(100% - 10rem); padding: 0 1.5rem; min-height: auto !important; height: auto !important; }
.productsSlide a { border-radius: 1rem; background:#fff;  -webkit-box-shadow: 2px 2px 8px -6px rgba(0, 0, 0, 1);
    -moz-box-shadow: 2px 2px 8px -6px rgba(0, 0, 0, 1);
    box-shadow: 2px 2px 8px -6px rgba(0, 0, 0, 1); min-height: 60vh; height:auto;  text-align: center !important; align-items: center;  display: flex !important; flex-direction: column !important;}
.productsSlide a strong { font-size: 1.3rem; }
.productsSlide img   {  border-radius: 1rem; width: auto !important;  object-fit:cover; min-height: 180px;  max-height: 300px !important; height: 100%;  overflow: hidden;   height: auto !important;} 



.productsSlide .swiper-button-next,
.productsSlide .swiper-button-prev {

background-color: #000000;
    right:0 !important;
padding: 1.3rem 1.5rem !important;
border-radius: 100rem;
    color: rgb(255, 255, 255) !important;
    fill: rgb(255, 255, 255) !important;
    stroke: rgb(255, 255, 255) !important;
font-size: 5px;
top: calc(var(--swiper-navigation-top-offset,50%) - 8vh) !important;
--swiper-navigation-size: 15px !important;
}

.productsSlide .swiper-button-prev { left:0; }

.productsSlide .swiper-button-next:hover,
.productsSlide .swiper-button-prev:hover { background-color: #000; }

.swiper-button-prev { padding-left: 0 !important; }


.no-results {  font-size:1.3rem;  text-align: center; height: 50vh; min-height: 300px;}



.gallery { margin-top: 4rem;  display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(150px, 1fr)); grid-auto-rows: minmax(150px, 50vh);}
.gallery  img { width: 100%; height: 100%; object-fit: cover;}

.margin { padding: 2rem 4rem;}
.margin a { color:#000;}
.margin p { font-size: 1.4rem;}
.margin ul, .margin ol { margin-left: 2rem;}
.margin ul li, .margin p, .margin ol li { margin-bottom: 0.5rem;}
.margin strong { font-weight: 600;}
iframe { width: 100% !important; height:auto; max-width: 900px; min-height: 450px; margin:auto; display:table;}


.tiles { margin: 0 4rem 2rem 4rem; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: minmax(100px, 20vh);}
.tiles a { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background-color: #248221;  color: #fff; text-decoration: none; text-transform: uppercase;}   
.tiles a:nth-of-type(2n+1) { background-color: #3FAB3C;} 

.btn { background-color: #0f230e; text-transform: uppercase;}

.artImg { float: right; width: 50%; height: auto; border-radius: 1rem; margin: 0 0 1rem 2rem;}

.contact { text-align: center; margin: 0 4rem; padding: 1rem; width: calc(100% -4rem);}
.contact h3 { color: #555; text-transform: uppercase; font-size: 1.2rem; font-weight: 400; margin-bottom: 2rem; }
.contact iframe {  width: 100%; margin-top: 1rem; height: auto; min-height: 200px;}
.contact img { width: 190px; height:auto; margin-bottom: 1rem; }

.contact-head { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; height: auto; min-height: 30vh;}
.contact-head div { display: flex; flex-direction: column; padding: 3rem; }
.contact-head div:nth-child(1) {border-radius: 1rem; border: 1px solid #000;  justify-content: center; }
.contact-head div:nth-child(1) img { width:30%; max-width:350px; height:auto; display:table; margin:1rem auto;}
.contact-head div:nth-child(2) {border-radius: 1rem; background: #ff0000;   justify-content:center; align-items:baseline;}
.contact-head h2 { text-align: left; color:#000; background-image: none; text-transform: uppercase; font-size: 2rem; border-bottom: 1px solid #666; padding-left: 0; padding-bottom: 2rem;}
.contact-head h2 span { text-align: left; display: block; color:#000; text-transform: uppercase; padding: 1rem 1rem 1rem 0; font-size: 1.5rem;}
.contact-head .nip { text-align: center; color:#000; margin-top:1rem; font-size: 0.9rem;}
.contact-head div:nth-child(2) img { width:1.5rem; height:auto; vertical-align:middle;  padding:0; margin:0 0 5px;}
.contact-head div:nth-child(2) p { font-size: 1.1rem; margin: 1rem 0;}
.contact-head div:nth-child(2) p a {  font-size: 1.1rem; text-decoration: none; }
.contact-head div:nth-child(2)  * { color: #fff;}

.contact-items { gap:1rem; display: grid; grid-template-columns: 1fr 1fr 1fr; height: auto; min-height: 30vh; margin:3rem 0;}
.contact-items div {justify-content:center; align-items:center; background:#000; display: flex; flex-direction: column; padding: 2rem;}
.contact-items div * { color:#fff; text-align:center:}
.contact-items h3 { text-transform: uppercase; }
.contact-items div a { text-transform: uppercase; margin-top:1rem; font-size:0.9rem; border:1px solid #fff; padding:1rem 2rem;}
.maps { max-width: calc(100% - 9rem) !important; margin:0 auto 2rem auto !important;  }



.discount button, input[type=text], input[type=password], input[type=submit], select, textarea { border-radius: 0.2rem; background-color: #fff; margin: 1rem 0; min-width: 250px; max-width: 350px; width: 100%; border: 1px solid #333; padding: 0.5rem 1rem;}
input[type=submit], .discount button { background-color:#000000; color: #fff; border: 0; cursor: pointer; font-size: 1.2rem; padding: 1rem 2rem;}
/*input[type=checkbox] { width: 1rem; height: 1rem; -moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	outline: none;
	content: none;	}

    input[type=checkbox]:before {
        content: " ✔";
        color: transparent !important;
        background: #fff;
        display: block;
        width: 1rem;
        height: 1rem;
        border: 1px solid black;
        line-height: 0.9rem;
        text-indent: 0.1rem;
        cursor: pointer;
        border-radius: 0.2rem;
    } 
    
    input[type=checkbox]:checked:before {

        color: black !important;
    }    */

#loginUser *, #pr * { font-size: 1.2rem;}
#loginUser, #pr {  min-height: 70vh; height:auto;  padding: 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#loginUser p, #pr p { display: flex; flex-direction: column; justify-content: center; align-items: center; }
#loginUser a { color: #000;}
#rC:hover { opacity: 0.5; cursor: pointer;  }




.or, .nad { text-align: center; font-size: 1rem; position: relative;  }
.or h3 {  clip-path: polygon(0 0, 100% 0%, 100% 100%, calc(0% + 4rem) 100%); margin: 3.4rem 0 1rem 0; color: #fff; font-size: 1.2rem; background-color: #1b431a; font-weight: 200; text-transform: uppercase; text-align: center;}
.nad h3 {   clip-path: polygon(0 0, calc(100% - 4rem) 0, 100% 100%, 0 100%);  margin: 0 0 1rem 0; color: #fff; font-size: 1.2rem; background-color:#3FAB3C; font-weight: 200; text-transform: uppercase; text-align: center;}
.or strong, .nad strong { font-weight: 400; text-transform: uppercase; color: #1b431a;}
.or img, .nad img { width: 2rem; height: auto; border: 0;}
.nad strong { display: block; padding-top: 3rem; }



.s41 { display: flex; margin-bottom: 2rem;   }
.s41 > div { width: auto; min-width: 50%; width: 100%; }


#reg { padding: 1rem 4rem;}
#reg h4 { color: #000; font-size: 2rem; font-weight: 400; margin: 0  auto 2rem auto; text-transform: lowercase; }
#reg p { display: grid; grid-template-columns: minmax(150px, 250px) minmax(150px, 350px) minmax(150px, 250px);   }
#reg .score-wrap {  max-width: calc(600px + 2rem); width: 100%;  display: table !important;}
#reg p label { padding: 1rem;  display: flex; align-items: center; justify-content: end;}
#reg p label strong {color: red;}
#reg p {  margin: 0; padding: 0;}
#reg > div { padding: 1rem;}
#reg .user, #reg .firm { background-color: #eee; border-radius: 1rem;}
#reg #strength_score { border-radius: 1rem; display:table; border:1px solid #333; width:150px; padding:0.5rem 1rem; font-size:0.6rem; color:#333333; margin:auto 0 auto auto; }
 .error { color:red;  }
 #reg .isFirm { display: flex;}
#reg .isFirm input { margin: auto 1rem; }
#reg .tiny { margin-left: 250px; font-size: 0.8rem;}
#reg .tiny input { margin-bottom: 1rem;}
#reg input[type=checkbox] { margin-right: 1rem;  }
#reg .tiny .error { margin-right: 2rem;}
#reg input[type=submit] { margin-left: 250px; }
#reg .userEmail {  display: flex; color: #777; justify-content:baseline; align-items: center;}

#userMenu { display: flex; padding: 2rem 1rem 0 0; margin: 1rem 6rem; border-bottom: 2px solid #000;}
#userMenu li { display: block; margin-right: 1rem;}
#userMenu a { font-size: 1.2rem; border-radius: 0.5rem 0.5rem 0 0; display: table; padding: 0.5rem 1rem; background-color: #888; color: #fff; text-transform: lowercase; text-decoration: none;}
#userMenu .this { background-color: #000;}

.uOList { margin: 1rem 6rem; overflow-x: auto; height: auto; min-height: 100vh;}
.uOList table {width: 100%; min-width: 250px; }
.uOList table td, .uOList table th { border-bottom: 1px solid #333; text-align: center; padding: 1rem 0.5rem;}
.uOList table tr:last-child td { border:none;}
.uOList table th { text-transform: lowercase; font-weight: 400; color: #666;}
.uOList table td { text-transform: lowercase; }
.uOList a { color: #ff0000;}

.uO h4 {  padding: 1rem 2rem;  font-size: 1.2rem; color: #666; font-weight: 400; background-color:#dddddd; text-transform: lowercase; border-radius: 1rem; }
.uO .summary { text-align: right; color: #000; font-size: 1.2rem; padding: 1rem;}
.uO p { padding: 1rem;}

.product { padding: 1rem 4rem;}
.product-top { position: relative; display: grid; grid-template-columns: 70% 1fr; grid-auto-rows:auto; height: auto; gap: 1rem;  }
.product-gallery { border: 1px solid #999; background-color: #fff; position: relative; border-radius: 1rem;  overflow: hidden;   }
.product-gallery .close { display: none; z-index: 9; cursor: pointer; position: absolute; right: 0; }
.product-gallery .close:hover { opacity: 0.5;}

.product-gallery .swiper-button-next, .product-gallery .swiper-button-prev {right: 4rem;
  padding-right: 0;
  padding-top: 1rem;
  color: rgb(0, 0, 0) !important;
  fill: rgb(0, 0, 0) !important;
  stroke: rgb(0, 0, 0) !important;
  font-size: 10px;}

.full { position:fixed; top:0; left: 0; width:100%; height: 100vh; z-index: 9; border-radius: 0 !important; border: 0 !important; }
.mySwiper4 { max-height: 75vh; }
.mySwiper4 .swiper-slide > div { background-color: #fff !important; }
.mySwiper4 .swiper-slide {   height: auto;  display: flex; justify-content: center;}
.mySwiper4 .swiper-slide img { height: calc(100% -1rem); margin: 1rem; cursor: pointer; }
.full .mySwiper4 .swiper-slide img:hover { cursor: zoom-in; } 
.mySwiper3 {  min-height: auto !important; }

.mySwiper3 .swiper-slide {  height: auto;  display: flex; justify-content: center;}
.mySwiper3 .swiper-slide img { width: auto; height: 100%; max-height: 30vh; object-fit: cover; cursor: pointer; }
.mySwiper3  {  margin-top: 1rem; padding: 0 1rem 1rem 1rem; width: calc(100% - 2rem); max-height: calc(20vh - 2rem);  }
.mySwiper3 .swiper-slide img:hover { opacity: 0.5;}

.product-right * { color: #fff;  }
.product-right * { color: #fff;  }
.product-right { padding: 2rem;  background-color: #000; border-radius: 1rem;   }

.product-right h3 { color:#fff ; text-transform: uppercase; font-weight: 400; font-size: 1.8rem; margin-bottom: 1rem;}
.product-right h4 { text-transform: uppercase; font-weight: 400; color: #888; font-size: 1.4rem; margin: 1rem 0;}
.price * {color:#fff ; font-size: 1.8rem;}
.price {font-size: 1.8rem;}

.condition { margin-bottom:1rem; text-transform:uppercase; color:#fff;}

.shipments { padding: 0 1rem 1rem 1rem;}
.shipments li { display: block; padding:0.2rem 0rem 0.5rem 0rem; font-size: 1.2rem; display: flex;}
.shipments li input { margin-right: 0.5rem; }

.delete { margin: auto !important; display: table !important;}

.quantity { display: flex; justify-content: center;}
.quantity button { border-radius: 100rem;  border: 0; color: #000; cursor: pointer;  background-color: #fff  ; padding: 1rem 1.3rem; display: flex; justify-content: center; align-items: center;}
.quantity button:hover { opacity: 0.5;}

.product input[name=quantity] { border-radius: 1rem !important;  all: unset; margin-left: 1.5rem; border: 1px solid rgb(255, 255, 255); padding: 0.9rem; margin:0 1rem;  max-width:30px !important;   background: #000;}
.product input[type=submit] { display: table; margin:1rem auto; background-color: #E1C292; color:#000;   border-radius: 100rem;  }

.product .pData { margin-top: 1rem; padding: 1rem; border: 1px solid #999; border-radius: 1rem; }
.product .pData h3 { text-transform: uppercase; font-weight: 400; font-size: 1.8rem; color: #000; margin: 0 0 2rem 0;}

.swiper-slide-thumb-active { border-top: 5px solid #000;}


.mP { display: flex; flex-direction: column; justify-content: center; align-items: center;  height: 60vh; }
.mP a { text-decoration: none; background-color: red; color: #fff; text-transform: uppercase; padding: 1rem 2rem;  }
.mP p {padding: 1rem; text-align: center;}


#basket { margin: auto 4rem;}
#basket .steps { text-align: center; font-size: 1.2rem; padding: 1rem; color: #999;}
#basket table { border-spacing:0; border-collapse: collapse; width: 100%; margin: 0rem auto 1rem auto; }
#basket table td { border: 1px solid #ccc; padding: 1rem; text-align: center;}
#basket table td img { width: 100px; height: auto;}
#basket table td:nth-child(5) { background: #e8e8e8;}
#basket input { text-transform: lowercase;}
#basket input[name=discount] { text-transform: none; }
#basket .pl input {  width:3rem; min-width:5px; }
#basket .pl button {background: #000; color:#fff; padding:0.5rem 1rem; border:0; cursor:pointer;}
#basket .sum, #basket .sum * { color: #000; font-size: 1.2rem;}
#basket .discount { background: #e8e8e8; text-align: center; padding: 2rem; display: flex; flex-direction: column; align-items: center;}
#basket .discount h4 { font-weight: 400; color: #333333; text-transform: lowercase;}
#basket .discount button { width: 150px; min-width: auto; background: #000; color: #fff;  }
#basket .discount input { width: 100px; }
#basket .discount .error { color: red; display: none;}
#basket .discount .ok { color: #50ab00; }
#basket .empty { font-size: 1.8rem; padding:5rem 2rem; text-align: center;}
.basketNavi { display: flex; padding: 2rem; align-items: center; justify-content: center;}
.basketNavi a { border-radius: 0.5rem; margin: 0.5rem; background: #ccc; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 1.5rem; padding: 1rem 2rem;}
.basketNavi .goNext { background: #E1C292; color: #000;  }
#basket #bm2 { display: none;}
#basket #basketMenu { display: flex; padding: 2rem; align-items: center; justify-content: center;}
#basket #basketMenu li { margin: 0.5rem; cursor: pointer; display: table; background: #888; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 1.5rem; padding: 1rem 2rem;}
#basket #basketMenu .this { background: #000;}
#basket #reg { margin: auto; display: table; background-color: #ccc; width: 100%; max-width: 800px;}
#basket li { display: flex;}
#basket li input { margin-right: 1rem;}


.shipment { padding: 2rem;}
.shipment h4 { color: #000; margin-bottom: 2rem;  text-transform: lowercase; border-bottom: 1px solid #000; padding: 0.5rem 0.5rem 0.5rem 0; font-weight: 400; font-size: 1.4rem;}
.shipment ul li { display: block; margin: 0.5rem;}
.shipment ul { padding: 1rem;}
.shipment textarea { resize: none; border: 1px solid #333; padding: 1rem; height: 20vh; min-height: 150px; width: calc(100% - 2rem);  margin: 1rem auto;}
.shipment table td:nth-child(5) { background: none !important;}
.shipment table td:nth-child(4) { background: #e8e8e8;}



.hamburger { display: none;}


@media only screen and (max-width: 1366px) {
  * { font-size: 15px;  }
}

@media only screen and (max-width: 1280px) {
  * { font-size: 14px;  }
}

@media only screen and (max-width: 1152px) {
  * { font-size: 13px;  }   
}

@media only screen and (max-width: 1024px) {
  * { font-size: 12px;  }
   .fb img {  width:2.5em; height:auto; }
  .phone, .s58 .adress { display: none !important;}
  .hamburger {  border: 0;  text-indent: -4000px; background-color: #a48c69; background-repeat: no-repeat; background-position: right center; background-size: 100% auto; background-image: url(/images/hamburger.svg);  width: 3rem; cursor: pointer; display: table;  position: absolute; height: 3rem; right: 1rem; top:0; }
  .hamburger:hover { opacity: 0.6;} 
  
  .menu {  background-color: #a48c69; padding: 0; top:0 !important; left: 0 !important; width: 70vw; height: 100vh;  position: fixed !important; z-index: 9999 !important;}
.menu * { all: unset !important; }
.menu a { color: #fff !important;  text-transform: uppercase !important; display: block !important; padding: 1rem !important; font-size: 1.3rem !important; cursor: pointer !important;}
.menu a:hover {  opacity: 0.5 !important;}
.menu ul, .menu ul li { display: block !important;}
.menu ul { margin: 0.5rem 1rem !important;}
.menu ul ul a { color: #bbb !important; font-size: 0.8rem;}
.isSub::after { content: ""; width: 1rem; height: 1rem;  display: inline-table; background-repeat: no-repeat; background-position: right  0.18rem; background-size: 100% auto; background-image: url(/images/ad.svg);   }
.menu > ul {  margin: 2rem 1rem 6rem 1rem  !important;} 
.menu { display: none;} 
.menu .phone { display:none !important;}
.systemMenu img { width:3rem !important; height:auto !important; margin:0 !important;}


    #kontakt {
        min-height: 100vh;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    #kontakt p, #kontakt h2 {  font-size: 1.8rem; text-align: center; }
#kontakt .phone { display: block !important;}
    #kontakt > div:nth-child(1) img { margin: 1rem auto; width: 150px; height: auto; max-width: auto; min-width: auto; }


    .s43 {
       
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(200px, 40vh);
        grid-auto-rows: minmax(200px, 40vh);       
        padding: 4rem;
    }
    
    
    .s43>div:nth-child(2) {
        height: auto !important;
        margin: 0 !important; 
    }

.barup, .s42::before, .s36 ul { display:none !important;}
.branches {
  width: 100%;
  margin: 0.5rem auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr ;
  grid-template-rows: 1fr;  }
  
  
.middle {  gap: 1rem; height: auto;  min-height: 100vh; display: grid; grid-template-columns: 1fr  !important;  }
.middle .spin-wrap { display:none !important;}
.middle * { text-align:center !important;}

.s56 .label h2 { animation: rotate 5.5s infinite ease-in-out; color: #fff; text-transform: uppercase; font-size: 2.8rem;}
.s56 .label p { color: #999999; text-transform: uppercase; font-size: 1.5rem; }

.s56, .grid-two, .main-text, .s25, .s59, .choice, .wrap { margin-left: 1rem !important; margin-right: 1rem !important; }
.s56 .swiper-slide { height: 80vh; min-height: 300px; }

.s34 .swiper-button-next, .s34 .swiper-button-prev {  display: none !important;} 

.choice { padding: 0; margin-top: 1rem; margin-bottom: 2rem;}
.s44 p { padding: 1rem 2rem !important;}
.main-text {  margin:0 !important; }
.main-text img { height: 50vh !important;}

.s25 {  padding: 0;  margin: 0 auto 1rem auto!important; width: calc(100% - 2rem);}
.s25 .swiper-slide { height: 60vh; min-height: 300px;}


.s1, .s2, .s3 { animation:none;         background-size: cover; background-position: right center;}
.s56 .label { background-color: rgb(0, 0, 0, 0.2); align-items: center;   width: calc(100% - 2rem); height: calc(100% - 2rem);  padding: 1rem;}
.s56 .label h2, .s56 .label p { text-align: center; color: #fff; text-shadow: 4px 4px 6px rgba(0, 0, 0, 1);}


.main-text .field-1 h1 {  font-size: 1.8rem; }

.wrap strong { font-size: 1.5rem; font-weight: 400; line-height: 2rem; margin-bottom: 1.2rem; }
.wrap .art-p { font-size: 1.5rem; line-height: 2rem; font-weight: 400;}

.artImg { display:none;}
 .logo img { width: auto; height: 7vh; min-height: 50px; padding: 0.5rem; }
  
.wrap-h1 { margin-bottom: 0; }
 #search { all: unset; border-radius: 100rem;  left: 50%; top: calc(50% + 6rem); transform: translate(-50%,-50%);   padding: 0.5rem 0.5rem 0.5rem 2rem;  max-width: 250px; background-color: #fff; position: absolute; z-index: 3; display: flex;}
 #search input { all: unset; margin: 0; border: 0; padding-left: 0; min-width: 210px; font-size: 1.2rem; font-weight: 300; color: #696868; }
 #search input[type=submit] { cursor: pointer; border-radius: 100rem; background-color: #000; min-width:auto;  padding: 1rem 1.3rem; margin: 0; background-image: url(/images/search.svg); background-repeat: no-repeat; background-size: auto 70%;  background-position: center center;  width: 2.8rem; height: 1em; min-width: auto; text-indent: -100rem; display: block; overflow: hidden;}
 #search input[type=submit]:hover { opacity: 0.3; }
 
 .margin { padding: 2rem 1rem;}
 
 .wrap-h1 { animation-name: none; background-attachment: scroll; background-size: cover;   background-position: center center; }
 
 .contact-head { grid-template-columns: 1fr; }
 .contact {  margin: 0 1rem; }
 
  header  { align-items: center;   padding: 0 1rem;  height: 15vh; min-height: 120px; max-height: 200px; grid-template-columns: 1fr; width: calc(100% - 2rem);     }

  header p {  display: flex; align-items: center; }

.logo-wrap { display: flex; align-items: center; justify-items: center; }
 .logo { grid-column: none;  display: flex; align-items: center; justify-items: center;  margin:auto;  width:100%;    }
 .wrap-h1 h1 {  height: 10vh; min-height: 55px; font-size: 1.5rem; }
 
 #reg { padding: 1rem 1rem;}
 #reg p { grid-template-columns: 1fr;   }
    #reg p label { padding: 0.5rem;  display: block; }
    #reg #strength_score {  margin:auto auto auto 0; }
    #reg .tiny { margin-left: 0px; font-size: 0.8rem;}
    #reg input[type=submit] { margin-left: 0; }
    
    .discount button, input[type=text], input[type=password], select, textarea { border-radius: 0.2rem; background-color: #fff; margin: 1rem 0; min-width: 100px; max-width: 350px; width: 90%; border: 1px solid #333; padding: 0.5rem 1rem;}

.products-wrap {  padding: 0 1rem;    display: grid; grid-template-columns:1fr;}


.catalog { display:none; }
main .products {  grid-template-columns: repeat(2, 1fr);  }
.catalog-search { margin: 1rem auto 0.5rem auto !important; }
.product-top {  grid-template-columns: 1fr;  }
.product { padding: 1rem;}


#basket { margin: 1rem;}
#basket .steps { text-align: center; font-size: 1.2rem; padding: 1rem; color: #999;}
#basket table { border-spacing:0; border-collapse: collapse; width: 100%; margin: 0rem auto 1rem auto; }
#basket table td { border: 1px solid #ccc; padding: 0.3rem; text-align: center; font-size:1rem;}
#basket table td img { width: 100%; min-width:60px; height: auto;}
#basket table td input[type=checkbox] { margin:0; padding:0;}
#basket table td:nth-child(5) { background: #e8e8e8;}

#basket #basketMenu li { margin: 0.5rem; cursor: pointer; display: table; background: #888; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 0.9rem; padding: 0.5rem 1rem;}
.basketNavi a { border-radius: 0.5rem; margin: 0.5rem; background: #ccc; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 1.2rem; padding: 0.5rem 1rem;}

#userMenu { display: flex; padding: 2rem 1rem 0 0; margin: 1rem ; border-bottom: 2px solid #000;}
#userMenu li { display: block; margin-right: 0.5rem;}
#userMenu a { font-size: 1rem; border-radius: 0.5rem 0.5rem 0 0; display: table; padding: 0.5rem 1rem; background-color: #888; color: #fff; text-transform: lowercase; text-decoration: none;}
#userMenu .this { background-color: #000;}

.uOList { margin: 1rem; overflow-x: auto; height: auto; min-height: 100vh;}
.uOList table td, .uOList table th { border-bottom: 1px solid #333; text-align: center; font-size:0.8rem; padding: 1rem 0.5rem;}

#reg h4 { color: #000; font-size: 1.5rem; font-weight: 400; margin: 0  auto 2rem auto; text-transform: lowercase; }
 .mySwiper4 { min-height: 200px;  }
 
.mySwiper3 .swiper-slide { min-width:100px; width:25%; height:15vh; } 
.mySwiper3 .swiper-slide img {
  width: 100%;
  height: 100%;
  cursor: pointer;
} 

.ss .swiper-slide { background-size: cover; background-position: center center; }
 
}


@media only screen and (max-width: 640px) {
     .branches { grid-template-columns: 1fr; }
     main .products {  grid-template-columns: 1fr;  }
   .label p { font-size: 2.5rem; }
   
}