/* ********* definice obecnych HTML znacek ********* */
html {
    scroll-behavior: smooth;
}
body {
    padding: 0px;
    margin: 0px 0px 0px 0px;
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8em;
    background-color: rgb(236,239,232);
    color: rgb(81,81,81);
    text-align: center;

}

img {border: none;}
form {padding: 0px;margin: 0px;}
a {color: rgb(234,163,44);text-decoration: none;}
a:hover {color: rgb(0,130,68);}

h1 {font-weight: normal;margin: 0px; padding-top: 0px;font-size: 160%;}
h2 {margin: 5px 0px 5px 0px;padding: 0px;font-size: 126%;font-weight: normal;display:block;}
h3 {margin: 0px;font-size: 120%;font-weight: normal;display:block;}
h4 {color: rgb(128,132,105);font-size: 100%;font-weight: bold;margin: 0px;}

textarea {font-family: sans-serif;font-size: 100%;}
.clear {clear: both;font-size: 1px;line-height: 1px;height: 1px;}
.back { margin: 10px 0px 10px 7px; clear: both;}
.back a {background-color: #58585a;padding: 2px 10px 2px 10px;text-decoration: none;color: White; border-radius: 22px;}
.layout {border-collapse: collapse;}
.imgRight {float: right;}
.imgLeft {float: left;margin: 0px 10px 0px 0px;}
/********************* lists **********************/
ul li { margin: 0px 0px 10px 0px;padding: 0px;}
ul li .sub { margin: 0px; padding: 0px;}

.odrazky1 { margin: 10px 0px 25px 10px;padding: 0px 0px 0px 15px;}
.odrazky1 li {list-style-image: URL('../images/odrazka1.gif');padding: 0px 0px 0px 0px;margin: 0px 0px 8px 0px;}
.odrazkyA {margin: 10px 0px 25px 10px;padding: 0px 0px 0px 15px;}
.odrazkyA li {list-style-image: URL('../images/listIco.gif'); padding: 0px 0px 0px 0px;margin: 0px 0px 10px 0px;}



/********************* page **********************/
#top {position: relative;width: 100%;height: 100%;text-align: left;margin: auto;height: 100%; padding: 0;}
#header {position: fixed; background-color: rgb(236,239,232); width: 100%; text-align: left;height: 100px;z-index: 240;border-bottom: 5px solid white;}

#logo {display: block; position: absolute;top: 0px;left: 0px;z-index: 2;border-right: 5px solid white;background-color: rgb(218,224,210); }

#webTitle {display: block; text-align: center; margin:23px 0 0 292px; font-size:3.0vw;color: rgb(81,81,81);font-family:'Italianno', cursive;box-sizing: border-box;}
#webTitle a {text-decoration: none;color: white;}


#socialLinks { float: right; position: absolute; top:30px; right:30px;display: table;}
#socialLinks a { display: table-cell; vertical-align: top; padding:0 1px; width:31px; }
#socialLinks a img { width:100%; }

#header .contact { margin: 0; padding: 39px 0px 0px 325px;font-weight: bold; color: rgb(76,84,92);font-size: 110%;text-align: left;text-transform: uppercase;}
#header .contact a {color: rgb(76,84,92);font-weight: bold; }
#header .contact .divider {color: rgb(235,163,44);font-weight: bold; margin: 0 4px; }




/********************* main content **********************/


#mainContent { padding:0;margin: 0; position: relative; width: 100%; height: auto;  top: 100px; background-color: white;}


.listIcons {display: flex;flex-wrap: wrap;justify-content: center; align-items: center; text-transform: uppercase ;gap: 0.3em;}
.listIcons img { padding:0 0.1em 0 1em; width:20px!important;}
.listIcons span { display: flex;justify-content: center; align-items: center;}
/********************* footer ****************************/

#footer, .sectionFooter {margin: 10px auto 20px auto; color: rgb(76,84,92);text-align: center; padding: 10px; font-size: 80%;}
#footer p, .sectionFooter p { margin: 0px;padding: 0px;}



#homeIllustration {position: relative; display: block; z-index: 50; width: auto;height: calc(100vh - 100px); position: relative; top: 0;  margin-left: 295px; box-sizing: border-box; 
     }
#homeIllustration div { 
    position: absolute; /* Stack all slides on top of each other */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 1%;
    opacity: 0; /* Start with invisible */
    transition: opacity 3s ease-in-out; /* Slower fade effect */
    z-index: 0; /* Ensure inactive slides are below */
}
#homeIllustration div.active {
    opacity: 1; /* Fully visible */
    z-index: 1; /* Bring the active slide to the top */
}

#homeIllustration a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none; /* Remove underline */
    cursor: url('../images/arrowBottom.png'), auto;
}

#homeIllustration a > div {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;

}
/*#homeIllustration a {
    border-bottom: 5px solid white;
}*/

#leftColumnIllustration {position: absolute;z-index: 51; left:0;top:0; width: 297px;border-right: 5px solid white; box-sizing: border-box; background-repeat: no-repeat;background-size: 100% auto; background-image: url('../images/leftColumnBg.png');background-color: rgb(236,239,232);height: 100%;}
.madeInFinland {display: block; position: absolute; bottom:20px; left: 30px; width: 50px;}
.arrowDown  {display: none; position: absolute; bottom:0px; right: 0; left: 0; margin: auto;text-align: center;}





/* *********    WELCOME TEXT********* */
#info { position: relative; height:100%;padding: 50px 0 0 0;top:95px;}

.description { margin: 10px auto 0 auto; width: 85%; background-color: rgb(249,250,247);box-sizing: border-box; padding: 3% 15vw;font-size: 120%;text-align: center;line-height: 170%;}

.nextChapBottom, .nextChapTop {width: 45px; height: 33px; background-image: url('../images/arrowBottom.png');background-position: left top;background-repeat: no-repeat;}
.nextChapBottom {display: inline-block; margin:0 0 0 40px; }

.nextChapTop {background-image: url('../images/arrowTop.png');display: block;  padding: 0; margin: 20px auto;}



/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { display: block;}
/* in case script does not load */
.cycle-slideshow img:first-child { position: static; z-index: 100;}
/* pager */
.cycle-pager { 
    text-align: right; width: 100%;top: 10px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}


ul { width:auto; text-align:left;margin: 1vh 10vw;}


/*KALKULACE*/
#kalkulace {margin:3em 0 2em;}



@media screen and (min-width: 1800px) {  
    #webTitle {font-size:2.5vw;}
    .description {padding: 7vh 20vw;font-size: 130%;}


}

@media screen and (max-width: 1500px) {  
    #webTitle {font-size:3.5vw;}
    #homeIllustration {height:60vh;}
}

@media screen and (max-width: 1300px) {  
    #webTitle {font-size:3.9vw;}
    .description { padding: 3% 8vw;font-size: 120%;}

}

@media screen and (max-width: 1100px) {  
    #webTitle {font-size:4vw;text-align:left; margin-left:330px;}
    #info .description img {width:100%;}    
}

@media screen and (max-width: 1200px) {  

    #info { top: 0;padding: 4em 0 0 0;}
    .description {width: 100%;  margin-left: 0; padding: 90px 2.9vw 5vw 2.9vw;}
}

@media screen and (max-width: 850px) {  
    #header  { top: 0; width: 100%; position: fixed; border-bottom: 75px solid white;} 
    #mainContent  { padding-top: 76px; }        
    #leftColumnIllustration {display: none;}
    #homeIllustration {margin-left: 0;height:50vh;} 
     #webTitle {margin: 105px auto 20px auto;font-size:4.0vw;text-align:center;}
    
     ul { margin: 1vh 5vw;}
 }

@media screen and (max-width: 850px) {  
    #webTitle {font-size:6vw; margin-top:110px;}
    .description {padding: 60px 2.9vw 5vw 2.9vw;}
} 
@media screen and (max-width: 700px) {  
    #webTitle {font-size:6.8vw; margin-top:110px;}
} 
@media screen and (max-width: 620px) {  
    #webTitle {font-size:8vw;}
    #homeIllustration{height:30vh;}
} 

@media screen and (max-width: 500px) {  
    #socialLinks { right:10px;}
    #socialLinks a { display: inline-block; }

}

@media screen and (max-width: 470px) {  
    #header  {  border-bottom: 106px solid white;}
    #mainContent  { padding-top: 96px; }   
    #socialLinks {right: 0;top: 165px;left: 0;text-align:center;display:block; }
    #webTitle {font-size: 9vw;margin-top: 103px;}
    #logo {position: absolute;
        top: 0px;left: 0; right:0;text-align:center;border:none;}

}

@media screen and (max-width: 440px) {  
    #webTitle {font-size: 10vw;}
    ul { margin: 1vh 0;}
}

@media screen and (max-width: 360px) {  



}