/* cmsms stylesheet: basicstyle modified: piatok 8. augusta 2025 10:28:51 */
/* Univerzálne nastavenia */
html {
    font-size: 62.5%;
}

:root {
  --biela:#ffffff;
  --biela-rgb: 255, 255, 255;
  --svetlahneda5: #92c4df;
  --svetlahneda4: #7abcf9;
  --svetlahneda3: #1d69b0;
  --svetlahneda2: #E3F2FD;
  --svetlahneda: #877062; /*-*/
  
  
  --hneda: #775a46; 
  --zelena: #87a330;
  --tmavamodra: #003c73; /*-*/
  --tmavamodra2: #002f5a;
  
  
  --fialova: #873296;
  --zlta: #e1cc13;
  --cervena: #c31f13;
  --oranzova: #d37e04;
  --svetloseda: #FAFAFA;  /*-*/
  --svetloseda2: #efefef; /*-*/
  --svetloseda3: #e1e1e1;
  --tmavoseda: #474747; /*-*/
  --seda: #747474;
  --cierna: #222222;
  --grad-svetloseda2: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(239, 239, 239, 1) 50%);
  --svetlahneda6a: #f1f9ff;
  --svetlahneda6b: #bbdced;
  
  --ff1: "Playfair Display", serif;
  --ff2: "Raleway", sans-serif;
}

body {
    background:#fff;
    font-size: 17px;
    font-size: 1.7rem;
     font-family: var(--ff2);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: var(--cierna);

}

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

  font-family: var(--ff1);
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
   
    
}

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;
    color: var(--hneda);
    font-weight: 800;
    position:relative;
    z-index:9;
}

h3 {
    margin: 0px 0 20px 0;
    font-size: 28px;
    font-size: 2.8rem;
    color: var(--hneda);
    font-weight: 800;
}

h4 {
    margin: 0px 0 15px 0;
    font-size: 18px;
    font-size: 1.8rem;
    color: var(--hneda);
    font-weight: 600;
}


a {color: var(--cierna);}
a:hover {color: var(--hneda); text-decoration: underline;}
em { color: var(--hneda);}
span.modra em {
    color: var(--hneda);
    font-weight: 400;
    background: var(--svetlahneda2);
    border-radius: 21px;
    display: inline-block;
    padding: 30px 50px;
    position:relative;
}

span.modra em:after {
    content: url(/uploads/base/ikony/citacia.svg);
    width: 58px;
    height: 42px;
    position: absolute;
    bottom: -10px;
    right: 30px;
    z-index: 6;
}

p {
  color: var(--cierna);  /*line-height: 170%;*/
}

.svetlomodra a {color: var(--svetlomodra);}
.modra a {color: var(--hneda);}

.kontajner h2 + h3 {margin-top: -10px;}

::-moz-selection { /* Code for Firefox */
  color: var(--biela);
  background: var(--hneda);
}

::selection {
  color: var(--biela);
  background: var(--hneda);
}

.modry, .modra {color: var(--hneda);}
.sedy {color: var(--tmavoseda);}
.svetlomodra {color: var(--svetlahneda);}
.biela {color: var(--biela);}
.hmodra {
    color: var(--biela); background: var(--hneda); 
    padding: 5px 15px 5px 15px; border-radius: 15px;}
.hsvetlomodra {
    color: var(--biela); background: var(--svetlahneda); 
    padding: 5px 15px 5px 15px; border-radius: 15px;}
.hbiela {
    color: var(--cierna); background: var(--biela); 
    padding: 5px 15px 5px 15px; border-radius: 15px;}
.hcierna {
    color: var(--biela); background: var(--cierna); 
    padding: 5px 15px 5px 15px; border-radius: 15px;}   
.hblockmodra {
    color: var(--hneda); background: var(--svetlahneda2); 
    padding: 30px 50px; border-radius: 25px;}    

.velkost-m {font-size: 16px; font-size: 1.6rem;}
h2 span.velkost-m, h2.velkost-m {font-size: 24px; font-size: 2.4rem;} 
h3 span.velkost-m, h3.velkost-m {font-size: 20px; font-size: 2.0rem;}
h4 span.velkost-m, h4.velkost-m {font-size: 18px; font-size: 1.8rem;}

.extrafont {font-size: 25px; font-size: 2.5rem;}
h2 span.extrafont, h2.extrafont {font-size: 42px; font-size: 4.2rem;}
h3 span.extrafont, h3.extrafont {font-size: 36px; font-size:3.6rem;}

.velkyfont {font-size: 20px; font-size: 2.0rem;}
h2 span.velkyfont, h2.velkyfont {font-size: 38px; font-size: 3.8rem;}
h3 span.velkyfont, h3.velkyfont {font-size: 32px; font-size: 3.2rem;}

.malyfont {font-size: 12px; font-size: 1.2rem;}

/*.button:after,.button-inverzny:after,.button-zeleny:after, .button-karta:after, .makler-detail a:after, .odkaz-hnedy:after, .button-svetlohnedy:after {
 width: 10px;
 height: 10px;
    display:inline-block;
    margin-left: 2px;
    top: -6px;
    right: -4px;
    position: relative;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
  content: '';
  -webkit-mask: url(/uploads/base/link2.svg) no-repeat 50% 50%;
  mask: url(/uploads/base/link2.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}*/


.mobilelangs img {
    width: 25px;
    height: 25px;
}


/*left side - lavy box */
#leftside {
   position: absolute;
    top: 0;
    bottom: 0; 
    left: 0;

    height: 100%;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    color: var(--biela);
    vertical-align: top;
    box-sizing: border-box;
    width: 260px !important;
    padding: 0px 30px 10px 30px;
    border-right: 0px #e5e5e5 solid;
    overflow: auto;
    background-color: var(--hneda);
    background-image: url(https://vistatatry.sk/uploads/base/sidebar.webp);
    background-position: top center;
    background-repeat: no-repeat;
}


#rightside {
   position: fixed;
    top: 0; 
    left: 260px; /*Set left value to WidthOfFrameDiv*/
    right: 0;
    bottom: 0;
    overflow: auto; 
    /*width: 100%;
    max-width: 1620px;
   vertical-align: top;*/
   color: var(--cierna);
}



/** left side - lavy box **/
#leftside .kontajner {height:100%;}

#logo h1{
    text-indent: -9999px;                 /* sends the text off-screen */
    overflow: hidden;
    width: 1px;
    height: 0px;
    margin: 0;
    padding: 0;
}

#logo img {margin-top:70px;  width: 160px;}

#navigacia {
    position: relative;
    /*margin-top: 100px;*/
    font-family: var(--ff1);
    font-weight: 600;
    text-align:center;
    top:45%;
}

#navigacia ul {list-style:none; padding-left:0px;}
#navigacia ul li {padding: 8px 0px;}

#navigacia ul li a {
    color: var(--biela); 
    text-decoration:none;
    font-size: 20px;
    font-size: 2rem;
    text-transform: uppercase;
    font-family: var(--ff1);
    border-bottom: 1px solid transparent;
    padding: 8px 0px;
    }

#navigacia ul li:hover a, #navigacia ul li a.current {
border-bottom: 1px solid var(--svetlahneda);


}

#navigacia ul ul li:hover {

}    
    
 

#navigacia ul ul li a {
    text-transform: none;
    font-size: 1.6rem;
}
#navigacia ul ul li {padding-left:20px;}

#navigacia ul ul {margin-left:-20px;}
#navigacia ul ul li:before {
  content: '\2011';
  position: absolute;
  margin-left: -10px;
  
}
    
#bottomleftside .quickinfo{text-align:center;}  
#bottomleftside .quickinfo p{
    margin-top: 5px;
    font-family: var(--ff1);
    color: var(--biela);    
    
}    

#bottomleftside .mobilelangs {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--svetlahneda);
}

#bottomleftside .mobilelangs a, #bottomleftside .mobilelangs span.active {
display: inline-block;
padding: 6px 8px;
margin: 0px;
color:#fff;
 
}

#bottomleftside .mobilelangs a:hover, #bottomleftside .mobilelangs span.active{
color:#deb05f;
 
text-decoration:none;
}

#bottomleftside .social {margin:20px 0; text-align:center;}
#bottomleftside .social a {display:inline-block;}
#bottomleftside .social img {width: auto; height: 25px; display:inline-block; margin: 0 5px;}


/* scrollbar */
#leftside::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F7f7f7;
}

#leftside::-webkit-scrollbar
{
	width: 10px;
	background-color: #736054;
}

#leftside::-webkit-scrollbar-thumb
{
	background-color: #736054;
	border: 2px solid #736054;
}


/************* pravybox obsah formatovanie *******************/


#rightside pre {
    color:#deb05f; 
    text-decoration:none;
    font-size: 16px;
    font-size: 1.6rem;
    text-transform: uppercase;
    font-family: var(--ff2);
    font-weight: 700;
    border: 0px solid transparent;
    background:transparent;
    padding: 5px 0px;
    margin:0;
}
.button-back:before{
 width: 10px;
 height: 10px;
    display:inline-block;
    margin-left: 2px;
    top: -6px;
    right: 8px;
    position: relative;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
  content: '';
  -webkit-mask: url(/uploads/base/link2r.svg) no-repeat 50% 50%;
  mask: url(/uploads/base/link2r.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.button:after, .button-inverzny:hover:after, .button-back:before, .makler-detail a:after, .odkaz-hnedy:after {
    background-color: var(--hneda);
}
.button:hover:after, .button-inverzny:after,.button-zeleny:hover:after, .call-to-action .button-zeleny:hover:after, .button-back:hover:before, .button-karta:hover:after, .button-karta:after, .button-svetlohnedy:hover:after {
    background-color: var(--biela);
}   
.button-zeleny:after {
    background-color: var(--hneda);
}

.button-svetlohnedy:after {
    background-color: var(--svetlahneda);
}


.button, .button-svetlohnedy, .button-back, .button-karta, .button-ikony {
    display: inline-block;
    color: var(--hneda);
    border: 2px solid var(--hneda);
    padding: 0px 25px;
    text-align: center;
    text-decoration:none;
    margin: 0 8px;
    font-size: 14px;
    font-size: 1.4rem;
    background: transparent;
    line-height: 4.5rem;
    text-transform: none;
     /*white-space: nowrap;*/
     border-radius: 0px;
    font-weight: 600;
    position:relative;
    z-index:1;
    box-shadow: 0px 20px 10px -15px rgba(0, 0, 0, .15);
}

.button:hover, .button-svetlohnedy:hover, .button-back:hover, .button-karta:hover, .button-ikony:hover {
    background: var(--hneda);
    color:#fff;
    text-decoration:none;
    border-color: var(--hneda);
    box-shadow: 0px 20px 10px -15px rgba(0, 0, 0, .25);

}

.button-svetlohnedy, .button-karta {
    color: var(--svetlahneda);
    border: 2px solid var(--svetlahneda);
}

.button-svetlohnedy:hover {
    background: var(--svetlahneda);
    border-color: var(--svetlahneda);
}



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

.button-inverzny:hover {
    background: transparent;
    border-color: var(--hneda);
    text-decoration:none;
    color: var(--hneda);
}

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

.button-zeleny:hover {
    background: var(--svetlahneda);
    border-color: var(--svetlahneda);
    text-decoration:none;
    color: var(--biela);
    box-shadow: 0px 10px 15px -5px rgba(0, 0, 0, .25);
}

.button, .button-inverzny, .button-zeleny, .button-back, .button-karta, .button-svetlohnedy, .button-ikony  {
    border-radius: 7px;
    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-zeleny:hover, .button-back:hover, .button-ikony:hover {
-webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.odkaz-hnedy {color: var(--hneda);}
.odkaz-hnedy:after {width: 7px; height: 7px;}

.button-center-250 {position:relative; display:block; width: 250px;
    margin: 20px auto 0 auto;
}

.button-center-200 {position:relative; display:block; width: 200px;
    margin: 20px auto 0 auto; line-height: 3.5rem;  font-size: 1.3rem;
}


.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;}  
    
.infowrapper {
    position:relative;
    max-width: 1760px;
    margin: 0px auto;
    padding: 0 20px;
    } 

.infowrapper.sirka16 {max-width:1600px;} 
.infowrapper.sirka11 {max-width:1100px;}
.infowrapper.sirka9 {max-width:900px;}
    
 
#logo h1{
    text-indent: -9999px;    
     overflow: hidden;
    width: 1px;
    height: 0px;
padding: 0;
    margin: 0;
} 

@keyframes float {
	0% {
	    rotate: 0deg;
		transform: translatey(0px);
		transform: scale(0.8,0.8);
	}
	25% {
	    rotate: 90deg;
		transform: translatey(-20px);
		transform: scale(1,1);
	}
	50% {
	    rotate: 180deg;
		transform: translatey(-10px);
		transform: scale(0.9,0.9);
	}
	75% {
	    rotate: 270deg;
		transform: translatey(-20px);
		transform: scale(1,1);
	}
	100% {
	    rotate: 360deg;
		transform: translatey(0px);
		transform: scale(0.8,0.8);
	}
}

@keyframes spin {
	0% {
	    rotate: 0deg;
		transform: translatey(0px);
		transform: scale(0.8,0.8);
	}
	100% {
	    rotate: 360deg;
		transform: translatey(0px);
		transform: scale(0.8,0.8);
	}
}

@keyframes float2 {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}


.br12 {border-radius: 15px}
.br30 {border-radius: 30px}


/** začiatok hero sekcia **/

.hero-container {}

.hero-container.right-side {
    padding: 40px 0 40px 40px;
     min-height: 300px;
    justify-content: left;

    background-image: url(https://vistatatry.sk/uploads/base/andrzej-rusinowski-photo.webp);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: auto;
    
    -webkit-border-radius: 25px 0 0 25px;
    -moz-border-radius: 25px 0 0 25px;
    border-radius: 25px 0 0 25px;
}

.hero-container.left-side {
     
    min-height: 300px;
    padding: 120px 60px 30px 30px;
    
    background-size: cover;     
    flex-direction: initial;
    justify-content: center;
    
}

.herobox {}

.herobox.align-left {
 margin-left: -80px;
}

.herobox.align-right {
    background: #eee; 
}











.kontajnerbgimg {position:relative;}

.obrazoktextu {position:relative; z-index: 5;
}
.kontajnerbgimg.t1:before {
    content: url(/uploads/base/imgcanvas/bodky-18.svg);
    position:absolute;
    width:90px;
    height: 90px;
    top: 0px;
    right: 0px;
    z-index: 6;
    transform: translatey(0px);
    transform: rotate(0deg);
	animation: spin 6s ease-in-out infinite;
}

/*.kontajnerbgimg.t1:after {
    content: url(/uploads/base/imgcanvas/bg-07.svg);
    position:absolute;
    width: 170px;
    height: auto;
    top: -60px;
    right: -20px;
    z-index: 4;
    transform: translatey(0px);
    transform: rotate(0deg);
	animation: float2 6s ease-in-out infinite;
}*/
/* pozadie 2 */
.kontajnerbgimg.t2:before {
    content: url(/uploads/base/imgcanvas/bodky-19.svg);
    position:absolute;
    width:90px;
    height: 90px;
    bottom: 0px;
    left: 0px;
    z-index: 6;
    transform: translatey(0px);
    transform: rotate(0deg);
	animation: float 6s ease-in-out infinite;
}

/*.kontajnerbgimg.t2:after {
    content: url(/uploads/base/imgcanvas/bg-07.svg);
    position:absolute;
    width: 170px;
    height: auto;
    top: -40px;
    right: -40px;
    z-index: 4;
    transform: translatey(0px);
    transform: rotate(0deg);
	animation: float2 6s ease-in-out infinite;
}*/

.kontajnerbgimg.t3:before {
    content: url(/uploads/base/imgcanvas/bodky-20.svg);
    position:absolute;
    width:75px;
    height: 75px;
    bottom: -15px;
    left: 0px;
    z-index: 6;
    transform: translatey(0px);
    transform: rotate(0deg);
	animation: float2 6s ease-in-out infinite;
}

.kontajnerbgimg.imgcut1 .obrazoktextu {


}


.kontajnerbgimg #imgcut1 {
transform-origin: center;
transform: scale(.98);
transition: all 1s;
}

.kontajnerbgimg:hover #imgcut1 {
transform-origin: center;
transform: scale(1);
transition: all 1s;
}

.kontajerbgimg.imgcut1 {

}

.imground .kontajnerbgimg .obrazoktextu, .imground img {border-radius:30px;

}


.kontajnerbgimg.imgcut2 .obrazoktextu {
-webkit-clip-path: polygon(0 20%, 20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
clip-path: polygon(0 20%, 20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
}





.uk-offcanvas-bar .logotyp {
    margin: 0 auto;
    display: block;
    max-width: 250px;
}


#paralax {
    position:absolute;
    width:100%;
    height:100vh;
    z-index:0;
    overflow:hidden;
}



/****************** Navigácia ***********************/

#topbar {
/*background: var(--tmavamodra);*/
color: var(--oranzova);
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 35%, rgba(0,180,216,1) 100%);
position:relative;
}




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


/* 1600px - XYZ */
@media (min-width: 1600px) {
    
/*.hero-container.right-side {padding: 0px; width:50%;}    
    .hero-container.left-side {
    width:50%;
    min-height: 300px;
    padding: 120px 60px 30px 30px;
    
    background-size: cover;     
    flex-direction: initial;
    justify-content: right;
    
}*/


} 

/* 1200px - 1600px */
@media (max-width: 1600px) and (min-width: 1200px) {
/*    
    .hero-container.left-side {
    width:35%;
    min-height: 300px;
    padding: 120px 30px 30px 30px;
    
    background-size: cover;     
    flex-direction: initial;
    justify-content: center;
    
}
.hero-container.right-side {padding: 0px; width:65%;}*/
.herobox.align-right { margin-right: 0px; }
.herobox.align-left { max-width: 100%;}
.herobox .multiobrazok {width:65vw; min-height:600px;}




}

/* 960px - 1200px */
@media (max-width: 1200px) and (min-width: 960px) {

.navigacka li a {    padding: 12px 12px;}
/*.hero-container.left-side {
    background-size: cover;     
    flex-direction: initial;
    justify-content: center;}
.herobox.align-right { margin-right: 0px; }
.herobox.align-left {max-width: 365px; }*/

.hero-container.left-side {
    width:50%;
    min-height: 300px;
    padding: 60px 30px 30px 30px;
    
    background-size: cover;     
    flex-direction: initial;
    justify-content: center;
    
}
.hero-container.right-side {padding: 0px; width:50%; border-left:10px solid var(--biela);}
.herobox.align-right { margin-right: 0px; }
.herobox.align-left { max-width: 100%;}
.herobox .multiobrazok {width:50vw; min-height:600px;}
.slider-kontainer img, .herobox .multiobrazok {border-radius:0;}


}

/* 480 - 960px */
@media (max-width: 960px) and (min-width: 640px) { 

h2 {font-size: 30px; font-size:3rem; line-height: 35px; line-height: 3.5rem;} 
h3 {font-size: 24px; font-size:2.4rem; line-height: 30px; line-height: 3rem;}  
h4, h5 {font-size: 20px; font-size:2.0rem; line-height: 25px; line-height: 2.5rem;} 

#rightside {
    position: relative;
    top: initial;
    left: initial;
    right: initial;
    bottom: initial;
    overflow: auto;
    color: var(--cierna);
}

#header .logobox {margin-left:35px;}


.naviicon {margin: 0;}
.naviicon .menuikona {width: 40px;}
.naviicon span {font-size: 18px; font-size: 1.8rem;}

.hero {margin-top: -65px;}
.hero-container.left-side {
    min-height: 300px;
    padding: 30px 0;
    margin-top: 0px;
    background-size: cover;     
    flex-direction: initial;
    justify-content: center;
   
}
.hero-container.right-side {margin-top: 0px; padding: 0px; border-left: 0px solid var(--biela);}
.herobox.align-right { margin-right: 0px; }
.herobox.align-left { max-width: 100%;}
.herobox .multiobrazok {width:100vw; min-height:600px;}
.hero-container.right-side .uk-slider-container {border-radius: 0;}
.slider-kontainer img, .herobox .multiobrazok {border-radius:0;}


}

/* 0 - 480px */
@media (max-width: 640px) and (min-width: 480px) {
h2 {font-size: 28px; font-size:2.8rem; line-height: 35px; line-height: 3.5rem;} 
h3 {font-size: 24px; font-size:2.4rem; line-height: 30px; line-height: 3rem;}  
h4, h5 {font-size: 20px; font-size:2.0rem; line-height: 25px; line-height: 2.5rem;} 

.extrafont {font-size: 20px; font-size: 2.0rem;}
h2 span.extrafont {font-size: 36px; font-size: 3.6rem;}
h3 span.extrafont {font-size: 32px; font-size:3.2rem;}

.velkyfont {font-size: 18px; font-size: 1.8rem;}
h2 span.velkyfont {font-size: 32px; font-size: 3.2rem;}
h3 span.velkyfont {font-size: 28px; font-size: 2.8rem;}

#rightside {
    position: relative;
    top: initial;
    left: initial;
    right: initial;
    bottom: initial;
    overflow: auto;
    color: var(--cierna);
}

.zahlavie {
        margin-top: -90px;
        padding-top: 110px;

background-position: right top;
background-repeat: no-repeat;
background-size: cover;
}
.zahlavie .wrapper {padding: 30px 20px;} 

#header .logobox {margin-left:35px;}




.naviicon {margin: 0;}
.naviicon .menuikona {width: 40px;}
.naviicon span {font-size: 18px; font-size: 1.8rem;}

.hero {margin-top: -65px;}
.hero-container.left-side {
    min-height: 300px;
    padding: 30px 30px;
    margin-top: -30px;
    background-size: cover;     
    flex-direction: initial;
    justify-content: center;
   
}
.hero-container.right-side {margin-top: 0px; padding: 0px; border-left: 0px solid var(--biela);}
.herobox.align-right { margin-right: 0px; }
.herobox.align-left { max-width: 100%;}


.herobox.align-left .kontajnerreferencie {padding: 0 20px;}

.herobox .multiobrazok {width:100vw; min-height:600px;}
.hero-container.right-side .uk-slider-container {border-radius: 0;}
.slider-kontainer img, .herobox .multiobrazok {border-radius:0;}

}


@media all and (max-width: 480px) {
    h2 {font-size: 28px; font-size:2.8rem; line-height: 35px; line-height: 3.5rem;} 
h3 {font-size: 24px; font-size:2.4rem; line-height: 30px; line-height: 3rem;}  
h4, h5 {font-size: 20px; font-size:2.0rem; line-height: 25px; line-height: 2.5rem;} 

.extrafont {font-size: 20px; font-size: 2.0rem;}
h2 span.extrafont {font-size: 36px; font-size: 3.6rem;}
h3 span.extrafont {font-size: 32px; font-size:3.2rem;}

.velkyfont {font-size: 18px; font-size: 1.8rem;}
h2 span.velkyfont {font-size: 32px; font-size: 3.2rem;}
h3 span.velkyfont {font-size: 28px; font-size: 2.8rem;}

#rightside {
    position: relative;
    top: initial;
    left: initial;
    right: initial;
    bottom: initial;
    overflow: auto;
    color: var(--cierna);
}

#header {background: transparent;}

.zahlavie {
        margin-top: -90px;
        padding-top: 110px;
       /* background: url(/uploads/base/hp-slider-bg-1.webp);*/
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
}
.zahlavie .wrapper {padding: 30px 20px;} 



#header .logobox {margin-left:35px; min-width: 193px;}
#header .logobox::before {width: 280px; height: auto;}
.sidemenumobile { 
    top: 11px; 
    right: 0px;
    background: var(--biela);
    padding: 0px 0 0px 0;
    
    
}
    


.naviicon {margin: 0; padding: 9px 10px 6px 10px;}
.naviicon .menuikona {width: 40px;}
.naviicon span {font-size: 18px; font-size: 1.8rem; color: var(--modra);
        text-shadow: none; margin-right: 0; padding-left: 15px;}

#header.uk-sticky.uk-active img.logotyp {
    margin-top: 0px;
    margin-left: 0;
}        
        

.hero {margin-top: -65px;}
.hero-container.left-side {
    min-height: 300px;
    padding: 30px 30px;
    margin-top: -30px;
    background-size: cover;     
    flex-direction: initial;
    justify-content: center;
    
}
.hero-container.right-side {margin-top: 0px; padding: 0px; border-left: 0px solid var(--biela);}
.herobox.align-right { margin-right: 0px; }
.herobox.align-left { max-width: 100%;}


.herobox.align-left .kontajnerreferencie {padding: 0 20px;}

.herobox .multiobrazok {width:100vw; min-height:500px;}
.hero-container.right-side .uk-slider-container {border-radius: 0;}

    

}