html { min-height: 100%; }
body { color: black; margin: 0px; padding: 0px; font-family: 'Playfair Display', sans-serif; font-size: 0.9em; background-color: white; }

a { color: black; text-decoration: none; }
a:hover { text-decoration: underline; }
.clear { clear: both; font-size: 0px; height: 0px; }
img { border: none; }
.left { float: left; margin: 0px 49px 20px 0px; }
.right { float: right; margin: 0px 0px 20px 49px; }
.lleft { float: left; }
.rright { float: right; }
.showPic { display: block; z-index: 1; }
.hidePic { display: none; z-index: 4; opacity: 0; }

h3 { display: block; margin: 40px 0 20px 0; font-size: 100%; font-weight: bold; text-transform: uppercase; }
h2 { display: inline-block; margin: 0px; font-size: 100%; padding: 0px; font-weight: normal; }
strong { font-size: 110%; font-weight: normal; }

#page { margin: auto; position: relative; text-align: center; height: 100%; }

/* ********* HEADER ********* */

#header { position: fixed; width: 100%; height: 70px; margin: 0px; padding: 0; background-color: #e6e7e8; z-index: 200;}
#logo { width: auto; display: block; position: absolute; top: 9.5%; right: 0; left: 0; margin: auto; padding: 3% 0 1%; font-size: 1030%; color: white; text-decoration: none; line-height: 84%; z-index: 190; text-align: center;background-image: url('../images/logo.png'); background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; }
#logo .perex {display: block; font-size: 40%;}


a.anchor { display: block; position: relative; top: -150px; visibility: hidden; }

#mainContent { position: relative; width: 100%; height: 100%; padding: 0 0 6px 0; z-index: 60; }
#mainColumn { margin: 0px auto 0px auto; height: 100%; padding: 0px; position: relative; }

/* ************ menu *********** */
/* ******************************************* */

#menu { position: fixed; width: auto; top: 0px; left: auto; right: 4%; z-index: 85; padding: 20px 0 0 0; margin: 0px 0 0 0; }
#menu ul { margin: 0; padding: 0; text-align: right; }
#menu ul li { list-style: none; display: inline-block; padding: 0px; margin: 0px 0px 5px 0px; }
#menu ul li a { font-weight: bold; text-transform: lowercase; font-size: 140%; text-decoration: none; display: block; color: #57585b; padding: 0px 10px 0px 10px; margin: 0px; cursor: pointer; border-right: 1px solid #78af43;}
#menu ul li a:hover, #menu ul a.active { color: #a9c58f; }
#menu ul li .last {border: none; }


/* ********* social LINKS ********* */
.links, .linksMobile { width:auto; position: absolute; left: 4%; top: 15px; margin: 0px auto 0 auto; text-align: right; }
.links a, .linksMobile a { display: inline-block; margin: 4px; }
.links p, .linksMobile p { border: 0px; padding: 0px; margin: 0px; }
.linksMobile a { display: inline-block; }
.linksMobile {position: relative; width: 100%; left: auto; right: auto; top: 10px; margin: 0px auto 0 auto; text-align: center; }


#menu .linksMobile, #menu .languagesMobile { display: none; }

/* ********* MENU NEW ********* */
#mobileMenu { display: none; top: 0; left: 0; }

.slicknav_menu { display: none; width: 100%; top: 0px; z-index: 85; position: fixed; }
.slicknav_btn { float: none; z-index: 999; position: fixed; top: 20px; left: auto; right: 5%; margin: auto; width: 40px; padding: 7px 6px 10px 6px; background-color: transparent; }
.slicknav_btn .close { display: absolute; left: 0; top: 0; }

.slicknav_menu .slicknav_icon { float: none; }
.slicknav_menu .slicknav_icon-bar { display: block; width: 100%; height: 2.5px; background-color: white; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; 
 -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.35em; }
.slicknav_menu .slicknav_icon .slicknav_no-text { padding: 0; }


.slicknav_nav ul { margin: 150px 0 0 0; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.slicknav_nav ul a, .slicknav_nav ul li a:hover { font-size: 200%; text-transform: uppercase; letter-spacing: 2px; color: rgb(34,38,38); font-weight: bold; padding: 0 10px 5px 10px; margin: 0px 0 10px; }
.slicknav_nav ul li a:hover, .slicknav_nav ul li .active { color: white; background-color: transparent; }



.btnClose { display: block; width: 31px; height: 20px; margin: 0; background-image: url('../images/btn-close.png'); background-position: center top; background-repeat: no-repeat; }



.articleTextHome { cursor: auto; position: relative; margin: auto; text-align: center; padding: 30px 20%; line-height: 150%; font-size: 170%; height: 100%; }
.articleTextHome .articleTitle { display: block; margin: 0 0 40px 0; padding: 0; font-size: 250%; font-weight: normal; text-transform: uppercase; color: white; text-align: center; line-height: 100%; }
.articleTextHome .articleImage {display: block; width: 50%; height: 100%; float: right;background-position: left top; background-repeat: no-repeat; background-size: cover;}


.arrowTop, .arrowDown { width: 135px; height: 66px; display: block; position: relative; margin: 5% auto 2% auto; background-image: url('../images/arrowTop.png'); background-position: left top; background-repeat: no-repeat; }
.arrowDown { z-index:990; /*position: absolute; bottom: 6%; margin: auto; */left:0; right: 0; width: 135px; height: 66px; background-image: url('../images/arrowDown.png'); }
.arrowBlackTop{ background-image: url('../images/arrowTopBlack.png'); }

#uvod { padding: 130px 0 0 0; position: relative; z-index: 30;background-color: #e4ba4a;}
#oProjektu { padding: 70px 0 0 0; height: 100%;}
#oAutorovi { padding: 70px 0 0 0;  color: black;}
#oProjektu .articleTextHome {width: 100%; height: 100%; padding: 0;}
.articleTextHome .half { width: 100%; min-height: 50%; padding: 0; margin: 0; position: relative; z-index: 30; background-color: white; text-align: left;box-sizing: border-box;background-position: 100% 0; background-size: 50%;background-repeat: no-repeat;}
.articleTextHome .half .articleTitle { text-align: left;} 
.half .text { width: 50%; padding: 30px 20px 20px 20px; margin: 0;box-sizing: border-box;}

.articleTextHome .white { color: black; background-image: url('../images/cil.jpg');}
    .articleTextHome .white .articleTitle { color: black;}

.articleTextHome .black {  background-color: black; color:white;background-image: url('../images/technicke-pozadavky.jpg');background-position: 0 0;}
.articleTextHome .black .text {  margin: 0 0 0 50%;}

    


 #oAutorovi .articleTitle { color: black;}

/* *********HOME SLIDES********* */
#homeSlides { width: 100%; height: 100%; position: relative; top: 0; z-index: 20; }
#homeSlides div { height: 100%; width: 100%; min-height: 505px; background-repeat: no-repeat; background-size: cover; }

/* ********* news HOME********* */
#zdarma { z-index: 81; width: auto; height: auto; top: 3%; right: 4%;position: absolute; font-weight: bold;  text-transform: upperCase; font-size: 190%; line-height: 133%; color: white; text-align: center; padding: 5%  40px 100px 40px; margin: 0; background-image: url('../images/zdarma.png'); background-position: left top; background-repeat: no-repeat; background-size: contain; }
#zdarma .bigger { display: block; font-size: 155%; }

/* ********* news HOME********* */
#newsHome { z-index: 80; width: 424px; height: auto; top: 17%; left: 4%; display: block; position: absolute; font-weight: bold; color: white; text-align: left; box-sizing: border-box; padding: 0 10px 0 6px; margin: 0; background-image: url('../images/newsBg.png'); background-position: left top; background-repeat: no-repeat; }
#newsHome img { width: 100%; height:auto;}


/* ************** footer - motto *********** */
#footerMotto{ position: fixed; display: table; width: 100%; height: 62px; bottom: 0px; margin: 0px; padding: 0; z-index: 200;}
#footerMotto div{ display: table-cell; }
.leftSide{ width:16%; height: 100%; margin: 0px; padding: 0; background-color: #e6e7e8; }
.uvozovky{ width: 99px; height: 100%; margin: 0px; padding: 0; background-image: url('../images/uvozovky.png'); background-position: left top; background-repeat: no-repeat; }
.motto{ width: auto; height: 100%; margin: 0px; padding: 0;font-size: 255%; font-weight: bold; background-color: #e6e7e8;color: #57585b;white-space: nowrap;}
.rightSide{ width:16%; height: 100%; margin: 0px; padding: 0; background-color: #e6e7e8; }

/* ************** footer*********** */
#footer { width: auto; height: 100px; display: table;background-color: white; color: #8e8e8e; margin: 0 auto 0px auto; padding: 30px 10px 40px 10px; text-align: center; font-size: 90%; }
#footer a { text-decoration: none; color: #8e8e8e;}
#footer .partnerLogo { display: inline-block; padding: 0 30px 0px 30px; display: table-cell;}
.copy { margin: auto;padding: 0 0 90px 0;}


/* ****************** article *********** */
.article #logo { top: 10px; font-size: 240%; left: 4%; right: auto;  padding: 0; /*text-shadow: 1px 1px 3px rgba(20,20,20,0.3);*/background-image: url(''); color: #57585b;}
#article  { padding: 140px 0 40px 0; position: relative; z-index: 30;background-color: #e4ba4a;}
/*.article #header {height: 130px;}
.article .links {left: auto;right: 4%; top: 20px;}*/
.article #menu { top: -15px;}
.article .articleTextHome { padding: 30px 4%;  }
.article #kalend{ height: auto; }
.article .links{ display: none; }
.article .linksMobile { display: inline-block!important; border: none;}


@media screen and (max-width: 1660px) {
.leftSide{ width: 8%; }
.motto{ font-size: 220%;padding: 4px 0 0 0;}
.rightSide{width: 8%;}

}

@media screen and (max-width: 1250px) {
    .js #menu { display: none; }
    .js .slicknav_menu { display: block; }
    #mobileMenu, .linksMobile{ display: block; }
    
   #logo { font-size: 820%;top: 260px; }
   #zdarma {padding: 6% 30px 100px 30px; font-size: 160%;}
   #newsHome {width: 400px;top: 12.5%;}

   .leftSide{ width: 3%; }
   .rightSide{width: 3%;}


}

@media screen and (max-width: 1060px) {
   .leftSide{ width: 2%; }
   .motto{ font-size: 200%;padding: 8px 0 0 0;}
   .rightSide{width: 2%;}
}
@media screen and (max-width: 940px) {
    .motto{ white-space: normal;font-size: 180%;padding: 9px 0 0 0}    
    }

@media screen and (max-width: 900px) {
    #logo {font-size: 700%; top: 240px;} 
    .article #logo { } 
    #zdarma, #newsHome {left: 0; right: 0; margin: auto;}
    #zdarma { top: 90px; width: 120px; padding: 38px 6px 53px 6px;font-size: 13px;}
    #newsHome {top: 460px;}
    }



 @media screen and (max-width: 840px) {
    .motto{ font-size: 170%;padding: 2px 0 0 0}   
    .articleTextHome .half { background-size: 28%;}
.half .text { width: 72%; padding: 15px 20px 20px 20px;}
.articleTextHome .black .text { margin: 0 0 0 28%;}
 
        }


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

    #logo { font-size: 520%; }
   #newsHome {width: 400px;}
   #footer .partnerLogo { padding: 0 15px 0 15px; ;}

}

@media screen and (max-width: 570px) {
    .slicknav_btn { top: 20px; left: 0; right: 0; }
    .links, .languages { display: none; }
    .linksMobile, .languagesMobile { display: block; }
    .languagesMobile .active { display: none; }
    .articleText { margin: 0 20px; }
    .articleTextHome { padding: 8px 8% 10px 8%; }
    .articleTextHome .articleTitle { margin: 0 0 20px 0; }
    #footer .partnerLogo {padding: 0 8px 0 8px;}
    #footer .partnerLogo img {width: 100%; height: auto;}

    .article #logo {left:0; right: 0;top: 10px; }
    .article .slicknav_btn { top: 85px; }

    .articleTextHome .half { background-size: 100%;}
.half .text { width: 100%; padding: 70% 20px 20px 20px;}
.articleTextHome .black .text { margin: 0 0 0 0;}
}


@media screen and (max-width: 500px) {
    #newsHome {width: 95%;left:0; right: 0;margin: auto;}
    .articleText {margin: 0 10px;}
    .motto{ font-size: 145%;padding: 1px 0 0 0} 
    .leftSide{ width: 0.5%; }
    .rightSide{width: 0.5%;} 

}
@media screen and (max-width: 420px) {
    #logo { font-size: 380%; top: 200px;}
    .motto{ font-size: 100%; padding: 10px 0 0 0; min-width: 53%;} 
    .leftSide{ width: 0.2%; }
    .rightSide{width: 0.2%;} 
    #zdarma {top: 80px;width: 90px;padding: 28px 6px 50px 6px;font-size: 12px; } 
    #newsHome {top: 330px;}
    .articleTextHome , .articleTextHome .articleTitle {font-size: 110%;}
    .half .text {padding: 70% 10px 10px 10px;}
}






@media screen and (max-height: 960px)and (min-width: 900px) {
    #newsHome {top: 13%;}
}

@media screen and (max-height: 960px)and (min-width: 1200px) {
    .slicknav_nav ul  {   overflow: auto; } 
    #logo { font-size: 750%; }
    #newsHome {top: 16%;}
}
@media screen and (max-height: 670px){
    .slicknav_nav ul {margin: 80px 0 0 0;overflow: auto;}
    .slicknav_nav ul a, .slicknav_nav ul li a:hover { font-size: 190%;  }
    .article .slicknav_nav ul {margin: 125px 0 0 0;overflow: auto;}
}

@media screen and (max-height: 600px){
    .slicknav_nav ul a, .slicknav_nav ul li a:hover { font-size: 150%;  }
}

@media screen and (max-height: 730px) {
    body { font-size: 0.75em; }
    .articleTextHome .articleTitle {font-size: 180%;margin: 0 0 20px 0;}
    #menu ul li a { font-size: 160%;}
    .arrowTop, .arrowDown {width: 115px;height: 46px;background-size: contain;}
}

@media screen and (max-height: 730px)and (min-width: 900px) {

    #logo { font-size: 650%; top: 180px;}
    #zdarma {top: 85px;width: 100px;padding: 33px 10px 45px 10px;font-size: 14px; } 
    #newsHome {top: 390px;width: 230px;}  
}

@media screen and (max-height: 600px)and (max-width: 900px) {

    #logo { font-size: 380%; top: 200px;}
    #zdarma {top: 80px;width: 90px;padding: 28px 6px 50px 6px;font-size: 12px; } 
    #newsHome {top: 330px;}  
}