/* cmsms stylesheet: basicstyle modified: nedeľa 15. februára 2026 17:11:53 */
/* Univerzálne nastavenia */
html {
    font-size: 62.5%;
}

/*
@font-face {
  font-family: 'Satoshi';
  src: url('uploads/base/font/Satoshi-Regular.woff2') format('woff2'),
       url('uploads/base/font/Satoshi-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}*/

:root {
  --biela: #ffffff;
  --cierna: #000000;
  
  --hneda: #a58e74;
  --svetlohneda00: #fcf6f1;
  --svetlohneda05: #ffefcd;
  --svetlohneda10: #d7cabb;
  --svetlohneda20: #eadcd0;
  --svetlohneda30: #b69e85;
  
  --oranzova: #fb5b07;

  --zelena: #424531;
  --svetlozelena: #565848;
  
  --font1: "Poppins", sans-serif;
  --font2: "Manrope", sans-serif;
  
}

body {
    background:var(--biela);
    font-size: 16px;
    font-size: 1.6rem;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-style: normal;
    color: var(--zelena);

}

body.svetlohneda {background: var(--svetlohneda00);}

h1, h2, h3, h4, h5, h6, .uk-accordion-title {text-transform: none;

 font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  color: var(--zelena);
  line-height: 1.0;
}

h1 {
    font-size: 24px;
    font-size: 2.4rem;
}   

h2 {
    font-size: 32px;
    font-size: 3.2rem;
    padding-bottom: 0px;
    position: relative;
    margin-bottom: 0px;
    margin-top: 3px;
    font-weight: 800;
    position:relative;
    z-index:9;
}

h3 {
    margin: 0px 0 20px 0;
    font-size: 28px;
    font-size: 2.8rem;
    font-weight: 600;
}

h4 {
    margin: 0px 0 15px 0;
    font-size: 18px;
    font-size: 1.8rem;
}





a {color: var(--oranzova);}
a:hover {color: var(--oranzova); text-decoration: none;}
em { color: var(--oranzova);}


p { color: var(--zelena); }



.wrapper {
    position:relative;
    max-width: 1280px;
    margin: 0px auto;
    padding: 20px;
    }
    
.wrapper.size16 {max-width: 1600px;} 
.wrapper.size11 {max-width: 1100px;}  
.wrapper.size9 {max-width: 960px;}  
.wrapper.size6 {max-width: 640px;}  
  
/************** formatovanie textu ************/

.oranzova, .oranzova h2, .oranzova h3, .oranzova h4, .oranzova p, .podnadpis.oranzova, .usp .green-one .podnadpis.oranzova {color: var(--oranzova);}
.zelena, .zelena h2, .zelena h3, .zelena h4, .zelena p {color: var(--zelena);}
.hneda, .hneda h2, .hneda h3, .hneda h4, .hneda p {color: var(--hneda);}
.biela, .biela h2, .biela h3, .biela h4, .biela p {color: var(--biela);}

.nadpis h2 {color: var(--hneda); font-size: 35px; font-size: 3.5rem;}
.podnadpis {position: relative; display:inline-block; font-family: var(--font1); font-weight: 600; color: var(--zelena);}
h2 .podnadpis  {position: relative; display:inline-block; font-size: 2.0rem; margin-bottom: 10px;}
.nadnadpis {
    position: relative;
    display: inline-block;
    font-size: 2.0rem;
}
.nadnadpis2 {}

.hblockhneda {
    color: var(--zelena);
    background: var(--svetlohneda20);
    padding: 30px 50px;
    border-radius: 25px;
}

/************* buttony *************/

.button-wrapper {
    text-align:center;
}

.button, .button-inverzny, .button-biely, .button-hnedy{
    display: inline-block;
    color: var(--biela);
    border: 2px solid var(--zelena);
    padding: 0px 25px 2px 25px;
    text-align: center;
    text-decoration:none;
    margin: 0 8px;
    font-size: 14px;
    font-size: 1.4rem;
    background: var(--zelena);
    line-height: 3.7rem;
    text-transform: none;
     /*white-space: nowrap;*/
    border-radius: 20px;
        position:relative;
    z-index:1;
   /* box-shadow: 0px 20px 10px -15px rgba(0, 0, 0, .15);   */
}

.button-inverzny {
 color: var(--zelena);
 border: 2px solid var(--zelena);  
 background: var(--transparent);
}

.button-biely {
 color: var(--zelena);
 border: 2px solid var(--biela);  
 background: var(--biela);
}

.button-hnedy {
 color: var(--biela);
 border: 2px solid var(--hneda);  
 background: var(--hneda);
}


.button:hover {
   color: var(--biela);
   border: 2px solid var(--hneda);
   background: var(--hneda);
}

.button-inverzny:hover, .button-biely:hover {
   color: var(--biela);
   border: 2px solid var(--hneda);
   background: var(--hneda);   
}

.button-hnedy:hover {
   color: var(--biela);
   border: 2px solid var(--zelena);
   background: var(--zelena);   
}

.button, .button-inverzny, .button-biely, .button-hnedy {
    transition: all 0.3s ease;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.button:hover, .button-inverzny:hover, .button-biely:hover, .button-hnedy:hover {
-webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}


/*** header ***/

#header {
    background: var(--biela);
    border-bottom: 1px solid var(--svetlohneda10);
}

#header .wrapper {padding: 0;}


.logo-kontajner{
    position:absolute;  
    z-index: 10;
    display:block;
    top: 16px;
   /* top: 38px;
    left: 50px;*/

}



#logo .logotyp {
     
}

#logo .headline{
    text-indent: -9999px;    
     overflow: hidden;
    width: 1px;
    height: 0px;
padding: 0;
    margin: 0;
} 

.horne-menu-bg {
  position: absolute;
  right: 0;
  top: 0;
  width: 100vw;
  height: 37px;
  background: var(--zelena);
  z-index: 0;
  width: calc(100vw - 50% - 640px); /* 640px je polovica wrapperu (1280px / 2) */
  z-index: 0;
  pointer-events: none;
}

.horne-menu:before {
    content:'';
    display:block;
    position: absolute;
    margin-left: -88px;
    width: 88px;
    height: 38px;
    background-color:transparent;
    background-image: url(https://saunfit.sk/uploads/base/horne-menu.webp);
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
}
.horne-menu .linky {margin-left: 20px;}
.horne-menu .linky ul{list-style:none;
   display: flex;
    align-items: center;   
}
.horne-menu .linky ul li {/*display:inline-block;*/
     
}
.horne-menu .linky li + li:before {content: '\007C'; margin-right: 10px;}

.horne-menu .linky a {padding: 0 5px; color: var(--svetlohneda20);}
.horne-menu .linky a:hover {color: var(--oranzova);}
.horne-menu .linky a + a:before {content: '\007C'; margin-right: 10px; color: var(--svetlohneda20);
}


.header-kontajner {
  display: flex;
  flex-direction: column;
  align-items: flex-end; 
}

.header-kontajner .horne-menu {
    color: var(--svetlohneda20);
    height: 37px;
    background: var(--zelena);
    display: flex;
    align-items: center;
    font-size: 14px;
    font-size: 1.4rem;
}

.header-kontajner .hlavne-menu {
    height: 70px;
    background: transparent;
    display: flex;
    align-items: center;  
}

.header-kontajner .sidemenu-icon {
    color: var(--biela);
    background: var(--hneda);
    display:block;
    width: 40px;
    height: 40px;
    margin-top: 0px;
    margin-left: 10px;
    /*display: inline-flex;*/
    text-align: center;
    /* align-items: center; */
    align-content: center;
    border-radius: 10px;
}

#menu-hlavne{
    z-index: 10;
    position:absolute;  
    display:block;
    top: 30px;
    right: 50px;
}

#menu-hlavne .rychle-info {
    display:block;
    text-align: right;
    margin: 0px 5px 10px 0;
}




/* základné menu */

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

#horizontalmenu > li {display: inline-flex;}
#horizontalmenu > li a {padding: 15px 10px; display: block;}

#horizontalmenu a {
   /* color: var(--cierna);*/
    color: var(--cierna);
    font-weight: 400;
    padding: 5px 15px;
    border-radius: 15px;
}
#horizontalmenu a:hover {
    color: var(--oranzova); 
    text-decoration:none;
}   


/* druhá úroveň */

#horizontalmenu ul ul:before
 {
    content: '';
    position: absolute;
    top: calc(0% - 20px);
    left: 0;
    width: 100%;
    height: 37px;
    z-index: 999;
}

#horizontalmenu li ul {
  display: none;          /* skryté východzí stav */
  position: absolute;
  top: 100%;              /* hneď pod parent li */
  left: 0;
  list-style: none;
  margin: 0;
  padding: 15px;
  background: #fff;
  min-width: 160px;       /* aby malo submenu šírku */
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, .15);
  z-index: 1000;
  top: calc(100% + 10px);
  border-radius: 0 0 20px 20px;
}

#horizontalmenu li ul li a {
  display: block;
  padding: 8px 12px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

#horizontalmenu li ul li a:hover {
  background: #f5f5f5;
}

/* zobrazí submenu pri hover na parent li */
#horizontalmenu li:hover > ul {
  display: block;
}

/* východzí stav: submenu pod parentom, doľava od jeho ľavého okraja */
#horizontalmenu li { position: relative; }
#horizontalmenu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;              /* default: otvára doprava */
  min-width: 180px;
  background: #fff;
  box-shadow: 0 4px 5px rgba(0,0,0,.15);
  z-index: 1000;
  white-space: nowrap;  /* zamedzí lámaniu a preskakovaniu šírky */
}
#horizontalmenu li:hover > ul { display: block; }

/* posledná položka v hlavnom rade: zarovnaj submenu doprava (otvára doľava) */
#horizontalmenu > li:last-child > ul {
  left: auto;
  right: 0;
}


/* hero sekcia */

.hero {
    position:relative;
    padding: 40px 0;
    background-image: url(https://saunfit.sk/uploads/base/herobg2.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: repeat-y;
    
}

.hero-left, .hero-right {position:relative; z-index: 1;}
.hero:after {
    content: '';
    position: absolute;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    background: radial-gradient(circle at 70% 30%, rgba(255,255,255,1) 25%, rgba(255, 255, 255,0.2) 90%);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero-left {}

.hero-left h2 {font-size:55px; font-size: 5.5rem; color: var(--zelena); line-height: 120%;}
.hero-left h3 {}

.hero-title { margin-top: 80px;}
.hero-secondary {padding: 55px 0 40px 0; padding-right: 80px;}
.hero-secondary .hero-text h3 {font-size:18px; font-size: 1.8rem; margin:0; padding: 0px;}
.hero-secondary img {border-radius: 10px; min-width: 180px;}

.hero-icons, .hero-secondary {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.hero-button {
    margin-top: 40px;
    text-align: center;
}

.hero-right .uk-slider-items .button {
    margin-left: -20px;
}

.icons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.ic-text {display: flex; flex-direction: column; }
.ic-text h4 {font-size: 28px; font-size: 2.8rem;}
.ic-text h4, .ic-text h4 + p {margin:0; padding: 0;}

.hero-right {
    position:relative;
}

.slider-img {}

.slider-desc {
    position:absolute;
    padding: 40px;
    width: 380px;
    background: var(--biela);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    left: -60px;
    top: 380px;
    border-radius: 20px;
}

.slider-desc2 {
    position:absolute;
    padding: 30px 40px 20px 40px;
    background: rgba(255, 255, 255, 0.92);
    width: 380px;
    /*background: var(--biela);*/
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    left: 65px;
    bottom: 15px;
    border-radius: 20px;
}

/*** zahlavie ***/
.zahlavie {margin-bottom: 40px; background-position: center center;}
.zahlavie .kontajner {padding: 100px 0;}

#zahlavie-text {
    max-height: none;
    overflow: visible;
  }

/*** category odkazy na úvode ***/

.main-category {
    padding: 80px 0;
}


.category-img {position:relative; z-index: 5; }
.category-img img {border-radius: 20px;}

.category-link {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 50px;
    transition: all 0.3s ease;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.category-custom-image {position: absolute;
    z-index: 10;
    top: -175px;
    right: 50px;
    transition: all 0.3s ease;}

.category-link:hover {-webkit-transform: translateY(-5px); transform: translateY(-5px);}
.category-link img {display:block; width:50px;}

.category-desc h3, .category-desc2 h3 {color: var(--hneda); font-size: 22px; font-size: 2.2rem; font-weight: 700; margin-bottom:3px;}

.category-desc {
    float:right;
    position:relative;
    z-index: 6;
    margin-top: -150px;
    width: 350px;
    padding: 0 20px 20px 20px;
    
}

.category-desc2 {
    float:right;
    position:relative;
    z-index: 6;
    margin-top: -50px;
    width: 350px;
    padding: 0 20px 20px 20px;
    
}

.category-desc .card, .category-desc2 .card {
    margin-top: -7px;
    padding: 20px 30px 30px 40px;
    background-color: var(--biela);
    border-radius: 0 0 20px 20px; 
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .08);
}

/*.category-desc:before, .category-desc2:before  {
 content: '';
 display:block;
 width: 350px;
 height:59px;
 background-image: url(https://saunfit.sk/uploads/base/category-top.webp);
 background-color: transparent;
 background-size: auto;
 background-position: center center;
 background-repeat: no-repeat;
}*/

.category-desc:before, .category-desc2:before  {
 content: '';
 display:block;
 width: 350px;
 height:59px;
 background-color: white; /* Pre vizualizáciu */
 clip-path: path("M20,0h86.8c7.6,0,14.9,2.1,21.3,6.2l38.6,24.3c6.4,4,13.8,6.2,21.3,6.2h141.9c11,0,20,9,20,20v2.3H0V20C0,9,9,0,20,0Z");
}

.category-text .kontajner{
    background: var(--svetlohneda00);
    padding: 40px;
    border-radius: 20px;
    background-repeat: no-repeat;
    background-image: url(https://saunfit.sk/uploads/base/ikony/kamene2.svg);
    background-position: calc(100% + 20px) calc(100% + 50px);
}
.category-icon {    
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}
.category-icon img {}
.category-text {}
.category-text h3 {
    font-size: 20px;
    font-size: 2rem;
    color: var(--zelena);
    margin-bottom: 3px;
}
.category-buttons {}

/** usp **/

.usp-one {
 padding: 80px 0;
 min-height: 250px;
 background-image: url(https://saunfit.sk/uploads/base/usp-bg-1.webp);
 background-color: transparent;
 background-size: auto;
 background-position: center center;
 background-repeat: no-repeat;    
}

.usp-one .usp-kontajner {
    float:right;
    width: 480px;
    padding: 40px;
    border-radius: 20px;
    margin-bottom: -120px;
}

.usp-one .usp-kontajner.green-one {
    color: var(--svetlohneda05);
    background-color: var(--zelena);
    background-repeat: no-repeat;
    background-image: url(https://saunfit.sk/uploads/base/list.webp);
    background-position: calc(100% + 20px) calc(100% + 50px);
}

.usp .green-one h2, .usp .green-one p, .usp .green-one .podnadpis, .usp .green-one .podnadpis2, .usp .green-one .nadnadpis {
    color: var(--svetlohneda05);
}

.usp .green-one h2 {line-height: 100%;}

.usp ul { list-style-image: url('https://saunfit.sk/uploads/base/bullet.webp');}

.usp ul li {margin-bottom: 10px;}



/* referencie */

.unibox.referencie {
    padding: 80px 0 40px 0;
    background-color: var(--svetlohneda00);
}

#gallery-modal .uk-modal-dialog {
  min-width:800px;
  min-height:600px;
  display: flex !important;
  align-items: stretch;
  position: relative;
  background: var(--zelena);
  color: var(--svetlohneda05);
}


.modal-image-panel {
      flex: 1;
    display: flex;
    align-items: initial;
    justify-content: start!important;
}
/*.modal-image-panel img {
  max-width:100%;
  max-height:80vh;
}*/
.modal-info-panel {
  width:370px;
  padding:32px;
  box-sizing:border-box;
  overflow:auto;
}

.modal-info-panel p, .modal-info-panel h3 {color: var(--svetlohneda05);}

/* gallery slider lightbox */

.sliderlightbox {}

.slider-item img, .slider-item.uk-active img, .br20 {border-radius: 20px;}



/******** katalog *********/

/*katalog sumar*/
.uk-subnav.uk-subnav-pill li.uk-active a {color: var(--biela);}
.uk-subnav-pill > .uk-active > a {
    font-family: var(--font2); font-weight: 400; 
    background-color: var(--zelena); 
    color: var(--biela);
    border-radius: 10px;
    padding: 10px 10px;
    font-size: 14px;
    font-size: 1.4rem;
}

.uk-subnav.uk-subnav-pill li a {font-size:14px; font-size: 1.4rem; padding: 10px 10px; border-radius: 10px; color: var(--zelena);}
.uk-subnav.uk-subnav-pill li a:hover {background-color: var(--svetlohneda00); color: var(--zelena);}
.uk-subnav li {  }


/* katalog detail */
.detail-katalog {
    padding-top: 20px;
background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);    
} 

.detail-katalog .wrapper {position: relative; }

.detail-katalog .list {
    position:absolute;
    overflow: hidden;
    display:block;
    width: 354px;
    right: calc(100% - 354px);
    top: 40px;
}

.detail-katalog .hlavnagaleria {padding-top: 0px; padding-bottom: 0px; z-index:2;}
.detail-katalog .uk-slideshow-items img {border-radius: 20px;}
.detail-katalog .uk-thumbnav img {border-radius: 10px;}
.detail-katalog .hlavneinfo {padding-top: 60px;}
.detail-katalog .hlavneinfo::after {
  content: "";
  position: absolute;
  top: 75px;
  right: 0;
  width: 283px;
  height: 209px;
  background: url('/uploads/base/list2.webp') no-repeat;
  background-size: contain;
  /*transform: translateX(25%);*/
  z-index: 0;
  /*opacity: 0.9;*/
  pointer-events: none;
}

.detail-katalog .wrapper {
   /* background-image: url(https://saunfit.artystudio.sk/uploads/base/list2.webp);
    background-position: right top;
    background-repeat: no-repeat;*/
    /*background-position: calc(100% + 20px) calc(100% + 50px);*/
}



.popis.one {}

.produkt-ikony {padding: 0px; margin-top: 30px; justify-content: center;
    gap: 15px;}
.produkt-ikony .ikona {
    display: flex;
  flex-direction: column;
  align-items: center; 
    text-align: center;
}
.produkt-ikony .ikona-img {width: 45px;}
.produkt-ikony .ikona-title {font-size: 16px; font-size:1.6rem; font-family: var(--font1); font-weight:600;}
.produkt-ikony .ikona-podnadpis {font-size: 13px; font-size:1.3rem; font-family: var(--font1); font-weight:600;}

.popis.cena, .popis.cenacz  {background: var(--zelena); color: var(--svetlohneda05); border-radius: 20px; padding: 40px; margin-top: 30px; position:relative;}
.popis.cena h2, .popis.cenacz h2, .popis.cena h3, .popis.cenacz h3, .extra-vybava-text h3, .extra-vybava-text a, .extra-vybava-text a p {color: var(--svetlohneda05);}
.popis.cena p, .popis.cenacz p {color: var(--svetlohneda10);}
.popis.cena h2, .popis.cena h3,.popis.cenacz h2, .popis.cenacz h3 {margin-bottom: 0; line-height: 100%;}
.popis.cena .cena-title {}

.popis.cena .cena-suma {position:relative;}
.popis.cena .cena-suma .hodnota {
    display: flex;
  flex-direction: column;
  align-items: start; 
    text-align: left;
    color: var(--svetlohneda10);
}

.popis.cena .cena-suma .hodnota .cena {font-size: 38px; font-size:3.8rem; font-family: var(--font1); font-weight:600; color: var(--svetlohneda05); margin: -10px 0;}

.popis.cena .cena-suma .hodnota .cenacz {font-size: 28px; font-size:2.8rem; font-family: var(--font1); font-weight:600; color: var(--svetlohneda05); margin: -10px 0;}

.popis.cena .cena-suma .cta-button {position:absolute; bottom: 20px; right: -60px;}
.popis.cena .cena-suma .cta-button-center {position:relative; margin: 0 auto;}
.popis.cena .cena-suma .cta-button .button, .extra-vybava-text .cta-button .button, .popis.cena .cena-suma .cta-button-center .button, .extra-vybava-text .cta-button-center .button {background: var(--hneda); border-color: var(--hneda);}

/* akciova cena */
.stitok-zlava {
    position: absolute;
    z-index: 10;
    right: 0;
    top: 17px;
    background: var(--oranzova);
    color: var(--biela);
    padding: 3px 10px;
    font-size: 1.3rem;
}

.percento-zlava {
    position: absolute;
    padding: 20px 7px;
    font-size: 3rem;
    font-weight: bold;
    top: -20px;
    right: 20px;
    border-radius: 50px;
    background: var(--oranzova);
    color: var(--biela);
}

.percento-zlava span {font-size: 4.2rem; font-weight: bold;
        font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 600;
}

.stara-cena {width: 100%;}
.cenaold1 {display:block; color: var(--hneda);}
.cenaold2 {display:inline-block; text-decoration:line-through; width: 49%; color: var(--hneda);}
.cenaold3 {display:inline-block; text-decoration:line-through; width: 49%; color: var(--hneda);}



/** špecifikácia vyrobku **/
.nadpis-sekcie {margin-bottom: 80px; margin-top: 0px;}

.detail-katalog-podrobnosti {
    background-repeat: no-repeat;
    background-image: url(https://saunfit.sk/uploads/base/linka-vybava.webp);
    background-position: center top;  
}



.info-icon-modal {
    position: absolute;
    left: 38px;
    margin-top: 5px;
    width: 15px;
}

.detail-katalog-extra-vybava .info-icon-modal {  left: 18px;}

a.infobutton { font-size: 1.4rem;}
.infobutton .info-icon-modal { left: -20px;}

.uk-modal-body .specifikacia-img {border-radius: 20px;}


.info-kontajner *+p {margin-top: 5px;}
.info-kontajner p {margin: 5px 0;}
.info-kontajner ul {padding-left: 0px; list-style:square;}
.info-kontajner ul li::marker {color: var(--oranzova);}


.detail-katalog-extra-vybava {
    background-repeat: no-repeat;
    background-image: url(https://saunfit.sk/uploads/base/linka-extra-vybava.webp);
    background-position: right top;    
}

.extra-vybava-obrazok {position:relative; z-index:1;}
.extra-vybava-obrazok img {border-radius: 20px; z-index:1;}
.extra-vybava-text {
    position:relative;
    z-index: 2;
    float:right;
    width: 480px;
    padding: 40px;
    border-radius: 20px;
    margin-top: -420px;
    color: var(--svetlohneda05);
    background-color: var(--zelena);
    background-repeat: no-repeat;
    background-image: url(https://saunfit.sk/uploads/base/list.webp);
    background-position: calc(100% + 20px) calc(100% + 50px);
}

.produkt-nahlad3 {
    border-radius: 20px;
    margin-bottom: 10px;
    position:relative;
    z-index:1;
}

.produkt-kategoria {position:relative;}
.produkt-nahlad-link {
    display:block;
    position:absolute;
    bottom: 10px;
    right: -1px;
    z-index:3;
   width: 51px;
    height: 50px; 
   
}

.accordion-grid2 {
  column-count: 2;
  column-gap: 30px;
}

.accordion-grid2 > li {
  break-inside: avoid;
}




/********akordeón pre faq *******/
/* základ pre 2 stĺpce */
.accordion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 stĺpce */
  gap: 1rem; /* medzera medzi položkami */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* uistíme sa, že každý li je nezávislý blok */
.accordion-grid > li {
  margin: 0;
  padding: 20px;
  border-radius: 20px;
  display: block;
  align-self: start; /* keď niektoré li majú väčší obsah, neposunie všetko dolu */
  background: var(--biela);
  /*box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .28);*/
  box-shadow: 0 15px 10px -10px rgba(202, 174, 151, 0.3);
}

.detail-katalog-faq h2 {text-align:center;}

.uk-accordion-title {font-size: 1.6rem; font-weight: 500; font-family: var(--font1); line-height:normal;}

.akordeon ul {list-style: square;}
.akordeon ul li::marker {
    color: var(--oranzova);
}

/* mierne štýlovanie akordeón titulov vo vnútri grid položky */
.akordeon > li {
    padding: 20px;
  border-radius: 20px;
  background: var(--biela);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .28);
}
/*********** blog ***********/

.nahlad h2.titulokclanku {font-size: 18px; font-size:1.8rem; font-weight: 700; line-height: 135%; color: var(--zelena); font-family: var(--font2);}
.nahlad .titulokclanku a {color: var(--zelena);}
.nahlad .uk-card-media-top img{border-radius: 20px 20px 0 0;}
.nahlad { border-radius: 20px;}
.nahlad .uk-card-body {padding: 30px 40px;}
.nahlad h2 + p {margin-top: 10px;}

.blog-hlavicka {display: flex; flex-direction: column;}
.blog-obrazok { margin: 20px 0; border-radius: 20px;}

.detail-blog.part-cta {
    padding: 60px 0 40px 0;
    color: var(--biela);
    background-color: var(--zelena);
}

.detail-blog.part-cta p, .detail-blog.part-cta h2, .detail-blog.part-cta h3, .detail-blog.part-cta {color: var(--biela);}
.detail-blog.part-cta .cta h3 {margin-bottom: 0px;}
.detail-blog.part-cta .cta h3 + p {margin-top: 5px;}

.detail-blog.part-cta .uk-dotnav>*>* {border: 1px solid rgba(255, 255, 255, 0.4);}
.detail-blog.part-cta .uk-dotnav>.uk-active>* {background-color: rgba(255, 255, 255, .6);
    border-color: transparent;}
    
#content-30 .wrapper { padding: 60px 0;}    
.podlozka img { border-radius: 25px;}
.dlazdica {
    background-color: rgba(255, 255, 255, 0.65);
    color: var(--oranzova);
    border-radius: 20px;
}


/***********recenzie ***********/
.uk-slider-container-offset {margin: -11px -20px -39px -20px;}

.uk-dotnav>*>* {border: 1px solid rgba(166, 142, 116, 0.4);}
.uk-dotnav>.uk-active>* {background-color: rgba(166, 142, 116, .6);
    border-color: transparent;}


.unibox.recenzie {
    background-color: var(--svetlohneda00);
    background-repeat: no-repeat;
    background-image: url(https://saunfit.artystudio.sk/uploads/base/linka-vybava.webp);
    background-position: center top;
}
.recenzia-hodnotenie {
    width: 150px;
    margin: 0 auto 20px auto;
    
}

.recenzie .uk-card {border-radius: 20px;}
.recenzie .recenzia-uzivatel-info {font-size: 16px; font-size:1.6rem; font-family: var(--font1); font-weight:600; text-align:center; margin-top: 20px; color: var(--oranzova);}

/**** ****/
#footer {
    background-color: var(--hneda);
    color: var(--biela);
    padding: 40px 0 0px 0;
font-size: 15px;
font-size: 1.5rem;
position:relative;

}


#footer .pravypanel {padding-left: 50px;}

.foot-ikony {}
.foot-ikony + .foot-linky {margin-top: 25px; margin-bottom: 20px; 
padding-top: 40px; border-top: 1px solid var(--svetlohneda30);}

.foot-ikona-box.uk-first-column {border-left: 0px solid var(--svetlamodra3);}
.foot-ikona-box {border-left: 1px solid var(--svetlohneda30);}

.foot-ikona { width: 50px; height: auto; color: var(--svetlohneda20);}
.foot-ikona svg { width: 40px; height: 40px;}

.foot-text {}
.foot-text .subtitle {display:block; 
font-size: 1.4rem; 
color: var(--svetlohneda20);
font-weight: 400;
}
.foot-text .title {display:block; font-size: 16px;
font-size: 1.6rem; color: var(--biela); font-weight: 600;}

.foot-linky h2 {padding-left: 40px;}
.foot-linky .foot-text {padding-left: 20px;}

.foot-linky ul {
    list-style-position: inside;
    list-style-type: circle;}

.foot-linky ul li {margin: 5px 0;
padding-left: 1.23em;
text-indent: -1.23em;    
}  
#footer .foot-linky a:hover {color: var(--oranzova);} 

.quicklinks {text-align:right; margin-top: -7px;}
.quicklinks .uk-icon-button {
    background: var(--svetlohneda20); color: var(--zelena);}
.quicklinks .uk-icon-button:hover {
    background: var(--zelena); color: var(--biela);}



.autorwebky {
    display:block;
    width: 282px;
    padding-top: 25px;
    margin: 20px auto 0 auto;
    font-size: 12px;
    font-size: 1.2rem;
    color: #fff;
}

.autorwebky a, .autorwebky a span {color:var(--svetlamodra2);}
.autorwebky a:hover, .autorwebky a:hover span {color:#fed808}
.autorwebky a span {display:inline-block; margin: 0px 0 0 0px}
.autorwebky a img { }
.autorwebky a svg {display:inline-block; margin: -7px 0 0 0}

.uk-lightbox {
    color: #fff;
     background: rgb(255 255 255 / 95%)
}

/************ offcanvas menu *****/
.uk-offcanvas-bar {
    background: var(--zelena);
}

.uk-offcanvas-bar .uk-close {
    color: var(--biela);
    background: var(--svetlozelena);
    padding: 20px 20px 25px 25px;
    border-radius: 0 0 0 30px;
    top: 0;
    right: 0;
}

.uk-offcanvas-bar h3 {
    text-align:center;
    margin-top: 25px;
    color: var(--svetlohneda05);
}

.uk-modal-body { border-radius: 30px;}
.uk-modal-close-default {
    background: var(--hneda); 
    color: var(--biela);
    padding: 15px;
    border-radius: 10px;
    top: -10px;
    right: -10px;
}

.uk-light .uk-close, .uk-light .uk-slidenav {color: var(--zelena);}

#kontakt .kontaktbox .fotka {
    width: 70px;
    height: 70px;
}

#kontakt h3.meno { margin-bottom: 0px;}
#kontakt .kontaktbox { margin-bottom: 50px;}

/********* google mapy ************/
 .google-maps {
        position: relative;
        padding-bottom: 28%; 
        height: 0;
        overflow: hidden;
        margin-top: 40px;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
    
 .google-maps-footer {
        position: relative;
        padding-bottom: 80%; 
        height: 0;
        overflow: hidden;
        margin-top: 40px;
    }
    .google-maps-footer iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }   
    


/*** formular ***/

.uk-form-label {
    color:var(--hneda);
    font-size: 14px;
    font-size: 1.4rem;
}

.uk-form input, .uk-form textarea {
    width: calc(100% - 25px);
    padding: 13px 10px 13px 15px;
    background: var(--svetlohneda00);
    border: 1px solid var(--ssvetlohneda05);
    color: var(--zelena);
    border-radius: 15px;
    font-size: 16px;
    font-size: 1.6rem;
    font-family: var(--font2);
}

.uk-form .cms_submit:hover {
    background: var(--hneda);
    border-color: var(--hneda);
    text-decoration: none;
    color: var(--biela);
}


.uk-form .cms_submit {
    display: inline-block;
    color: var(--biela);
    border: 1px solid var(--zelena);
    padding: 0px 15px;
    text-align: center;
    text-decoration: none;
    margin: 0 8px;
    background: var(--zelena);
    line-height: 4.5rem;
    text-transform: none;
    /* white-space: nowrap; */
    border-radius: 15px;
    font-weight: 600;
    position: relative;
    font-size: 1.4rem;
    z-index: 1;
/*   box-shadow: 0px 20px 10px -15px rgba(0, 0, 0, .25);*/
}
.gdpr {width: 360px; margin: 0 auto;}
.gdpr input {
    display: inline-block;
    float: left;
    width: 20px;
    height: 20px;
}

/************side menu*************/

.sidemenu-logo {margin: 40px 0 30px 0!important}
.sidemenu-menu {
    border-top: 1px solid var(--svetlozelena);
    padding: 15px 0;
}
.sidemenu-menu .bocna-navigacia {
    list-style: none;
    padding: 0;
}
.sidemenu-menu .bocna-navigacia li{
   margin: 10px 0;
}

.sidemenu-menu .bocna-navigacia li a {color: var(--svetlohneda20); font-family: var(--font1); font-size: 18px; font-size: 1.8rem;}
.sidemenu-menu .bocna-navigacia li li a {color: var(--biela); font-size: 15px; font-size: 1.5rem;}

.sidemenu-menu .bocna-navigacia ul {margin-left:15px;}

.sidemenu-kontakty {border-top: 1px solid var(--svetlozelena); padding: 30px 0 0 0; margin-top: 40px;}
.kontakt-kontajner {display:flex; flex-direction: row; margin-bottom: 20px;}

.kk-ikona {width: 35px; height:auto; margin-right: 15px;}
.kk-text h4 {margin-bottom: 0; font-weight: 600; color: var(--hneda);}

/****** formatovanie obsahu *****/

/*h2 + p, h3 + p {margin-top:0px;}*/
p + h2, p + h3 {margin-bottom: 0;}

.f-xl, .f-l, .f-m, .f-s {line-height: 100%;}

.f-xl {font-size: 42px; font-size: 4.2rem;}

.f-l {font-size: 35px;font-size: 3.5rem;}

.f-m {font-size: 25px;font-size: 2.5rem;}

.f-s {font-size: 18px;font-size: 1.8rem;}

.font-style-1 {
 font-family: "Libre Baskerville", serif;
 font-weight: 600; 
}




/************* media query *************/


/* 1600px - XYZ */
@media (min-width: 1600px) {
    


} 

/* 1200px - 1600px */
@media (max-width: 1600px) and (min-width: 1200px) {
.logo-kontajner{top: 25px;}
#logo .logotyp {width: 400px;}

}

/* 960px - 1200px */
@media (max-width: 1200px) and (min-width: 960px) {
.logo-kontajner{top: 38px;}
#logo .logotyp {width: 340px;}    

    
}

/* 960 - 640px */
@media (max-width: 960px) and (min-width: 640px) { 
.logo-kontajner{top: 4px; left: 25px;}
#logo .logotyp {width: 320px;}   

.header-kontajner .horne-menu, .header-kontajner .horne-menu:before, .horne-menu-bg {display:none;}


/*** zahlavie ***/
#zahlavie-text.uk-collapsed {
    max-height: 293px;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  #zahlavie-text {
    max-height: 1000px;
    transition: max-height 0.4s ease;
  }
    
/*hero*/
.slider-img img {display: block; margin: 0 auto;}
.slider-desc, .slider-desc2 {position:relative; margin-top: -220px; left:initial; top: initial; }


}

/* 640 - 480px */
@media (max-width: 640px) and (min-width: 480px) {
    
    
.logo-kontajner{top: 4px; left: 25px;}
#logo .logotyp {width: 320px;}   

.header-kontajner .horne-menu, .header-kontajner .horne-menu:before, .horne-menu-bg {display:none;}


/*** zahlavie ***/
#zahlavie-text.uk-collapsed {
    max-height: 293px;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  #zahlavie-text {
    max-height: 1000px;
    transition: max-height 0.4s ease;
  }
    
/*hero*/
.slider-img img {display: block; margin: 0 auto;}
.slider-desc, .slider-desc2 {position:relative; margin: -120px auto 0 auto; left:initial; top: initial; }

}

/*** menej ako 480px **/
@media all and (max-width: 480px) {
    
h2 {font-size: 25px; font-size: 2.5rem;}
h3 {font-size: 20px; font-size: 2rem;}
    
/* header */
#header { margin-top: -15px;}
#logo .logotyp {max-width: 250px;}
.logo-kontajner {top: 20px; left:0px;}

.header-kontajner .horne-menu, .header-kontajner .horne-menu:before, .horne-menu-bg {display:none;}
/*.header-kontajner .sidemenu-icon {margin: 50px 20px 0 0; z-index:5;}*/
.header-kontajner .sidemenu-icon {margin: 10px 5px 0 0; padding-top: 10px; z-index: 5;}
.header-kontajner .sidemenu-icon {color: var(--hneda);background: transparent; width: 60px; height: 50px;}
.sidemenu-menu {/*display: inline-block;*/}

/*** zahlavie ***/
.zahlavie { margin-bottom: 0px;}
.zahlavie .kontajner {padding: 30px 0;}

#zahlavie-text.uk-collapsed {
    max-height: 250px;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  #zahlavie-text {
    max-height: 1000px;
    transition: max-height 0.4s ease;
  }
    
/*hero*/
.slider-img img {display: block; margin: 0 auto;}
.slider-desc, .slider-desc2 {
    width: initial;
        position: relative;
        margin: 20px auto 0 auto;
        left: initial;
        top: initial;
        box-shadow: none;
        background: transparent;
        padding: 10px;
        }
.hero-left h2 { font-size: 32px; font-size: 3.2rem; text-align: center;}        
.hero-secondary {  flex-direction: column; padding: 20px; text-align:center;} 
.hero-secondary {display:none;}
.hero-icons {margin-top: 25px;}

.hero-title { margin-top: 0px;}
.hero:after {background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0.6) 90%);}

.hero-right {margin-top: -25px;}
.hero-right .uk-slider-items .button {margin-left: 0px;}

/* main-category */
.main-category {padding: 20px 0;}
.main-category h2 {text-align: center; padding-bottom: 30px;}
.main-category .wrapper div .uk-grid-margin {margin-top: 0;}
.category-icon {float: none;margin: 0 0 10px 0;}
.category-desc, .category-desc2 {float: initial; margin: -37px auto 0 auto; padding:0;}
.category-text, .category-buttons {text-align: center;}
.button + .button-inverzny, .button + .button, .button-inverzny + .button { margin-top: 10px;}

/* usp */
.usp-one .usp-kontajner {
    float: initial;
    width: calc(100% - 80px);
     
    margin-bottom: -120px;
}

.usp .green-one h2 { line-height: 120%;}

/* katalog */
.uk-subnav.uk-subnav-pill li a {padding: 7px 8px;}

.detail-katalog .hlavnagaleria {padding-top: 20px; padding-bottom: 0px;}
.detail-katalog { padding-top: 0px;}
.detail-katalog .hlavneinfo {padding-top: 0px;}

.popis.cena .cena-title { text-align: center;}
.popis.cena .cena-suma .hodnota {align-items: center; margin-bottom: 20px;}
.popis.cena .cena-suma .cta-button {position:relative; bottom: initial; right: initial; text-align:center;}

.info-icon-modal {left: 18px;}
.detail-katalog-podrobnosti { margin-top: 60px; background-position: calc(50% - 530px) -30px;}

.detail-katalog-podrobnosti .doplnky {padding-top: 50px;}

.detail-katalog-extra-vybava {}

.extra-vybava-obrazok {}

.extra-vybava-obrazok img { border-radius: 20px 20px 0 0;}
.extra-vybava-text {
    float: initial;
    width: calc(100% - 80px);
    margin-top: 0px;
    border-radius: 0 0 20px 20px;
}

.infobutton .info-icon-modal {
    left: initial;
    position: relative;
    margin: -5px 5px 0 0;
}

.detail-katalog .hlavneinfo::after {display:none;}
.accordion-grid2 { column-count: 1; column-gap: 0px; grid-template-columns: 1fr;  }

.uk-offcanvas-bar { width: 100%; padding: 20px 50px;}

#footer .credits { margin-top: 30px;text-align: center;}
.quicklinks { text-align: center;  margin-top: 15px!important;}

}