html { min-height: 100%;height: 100%;}
  body {
  color: rgb(34,38,38);
  background-color: white;
  margin: 0px; 
  padding: 0px;
  font-family: 'Oxygen', sans-serif; 
  font-size: 0.9em;background-color: rgba(34,38,38,0.5);
  height: 100%;

  }
  
a {color: rgb(114,183,110)/*rgb(175,167,151)*/;text-decoration: none;}
a:hover {text-decoration: underline;}
.clear {clear: both; font-size: 0px; height: 0px;}
img {border: none;}


h3  {display: block; margin: 40px 0 20px 0; font-size: 120%; 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%; z-index: 2;}

/* ********* HEADER ********* */  
#headerCont {position: fixed; top: 0; left: 0; width: 92px; height: 100%; margin: 0; padding: 0px; background-color: rgb(175,167,151); z-index:88;}
 
.header {position: relative; height: 100%;}
#logo {position: relative; display: block; width: 180px; top:30px; right: 0; left: 0; margin: auto; padding: 0; z-index: 65; }
#logoGd  {display: block; position: absolute;  top:30px; left:22px; width: 45px;padding: 0; margin: 0; }
                           
#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; }




/* ********* top LINKS ********* */
#links {width: 100px; position: absolute; right: 40px; top: 30px; margin: 0px auto 0 auto; z-index:90;}
#links a {float: left; margin: 4px;}

 /********** PAGE SLIDES ********* */
#firstSlide {padding: 0; margin: 0; position: relative; height:100vh}

/**************MENU******************/

#menuToggle {display:block;position: relative;top: 50px;left: 50px;z-index: 900;-webkit-user-select: none;user-select: none;min-height: 100%;} 
#menuToggle a{text-decoration: none;color: white;transition: color 0.3s ease;font-family: 'Cardo', serif; font-size:220%; line-height: 105%; font-weight:normal;}
#menuToggle a:hover{color: white;}
#menuToggle input {display: block;width: 40px; height: 32px;position: absolute;top: -7px; left: -5px;cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */-webkit-touch-callout: none;}

/* Just a quick hamburger */
#menuToggle span {display: block;width: 50px;height: 2px; margin-bottom: 5px;position: relative;background: white;border-radius: 3px;z-index: 1;transform-origin: 4px 0px;transition: transform 0.1s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease;}
#menuToggle span:first-child {transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2) {transform-origin: 0% 100%;}

/*  Transform all the slices of hamburger
 * into a crossmark.*/
#menuToggle input:checked ~ span {opacity: 1;transform: rotate(50deg) translate(-9px, -2px);background: white;width: 34px;}

/*But let's hide the middle one.*/
#menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0;transform: rotate(0deg) scale(0.2, 0.2);}

/*Ohyeah and the last one should go the other direction*/
#menuToggle input:checked ~ span:nth-last-child(2) {transform: rotate(-50deg) translate(-2px, -2px);width: 34px;}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu {position: absolute;width: 300px;min-height: 100%;margin: -100px 0 0 -50px; padding: 125px 50px 80px 50px;background: rgb(175,167,151);list-style-type: none; -webkit-font-smoothing: antialiased;/* to stop flickering of text in safari */
  transform-origin: 0% 0%;transform: translate(-100%, 0);transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);}
#menu li{padding: 10px 0; font-size: 140%;} 

a:focus{ color:rgb(138, 169, 104);}
#menuToggle .active{ color:white;}

/*And let's slide it in from the left*/
#menuToggle input:checked ~ ul {transform: none;}




#menuToggle{
   position:fixed;
   left: 22px;
   top:calc(100vh - 50px);
}

#menu{
   top: calc(-100vh + 50px);
   left: -20px;
   margin: 0;
   margin-top: -100px;
   height: 100vh;
}

html{
   max-width: 100vw;
   overflow-x: hidden;
}




/* ********* ARTICLE ********* */
.articleTitle {  display: block; font-family: 'Cardo', serif; display: block; line-height: 100%; font-size: 590%; font-weight: normal; margin: 0 0 15px 0; padding: 0;  color: rgb(175,167,151);}
    

.articleTextHome { position: relative;margin: 90px auto; width:auto; padding:30px 15%;color: white; text-align: left;line-height: 180%;font-size: 125%; }
.articleTextHome h1  { margin:0; padding: 0; display: inline;font-size:100%; color: white;font-weight: normal;}
.articleTextHome .mainText, #contacts .mainText  { padding: 2.5% 0 0 22%; margin:0;font-weight: normal; }
#contacts .mainText  { padding: 2.5% 0 0 0; font-size: 125%; background-image:none;}

.colored { color: white;}
.next { display: block; font-weight: bold;margin: 5px 0 0 6px ; font-size: 140%;}
.next:hover { text-decoration: none; color: white;}
.articleTextHome .nextChap, #contacts .nextChap  {display: block;position: relative; margin: 4% auto 2% auto; right:0;  }

.articleHoriz { height: auto!important; }

.articleHoriz #detail { min-height: auto!important; height: auto; background-color: black; text-align: left;font-size:130%;color: white;line-height: 150%; padding: 20px 3% 10px 7%;}
.articleHoriz .articleTitle { font-size:220%; color: white; }
.articleHoriz h3 { font-size:140%;margin:0 0 20px 0; font-weight: normal;}

.articleHoriz .radek { display: table;}
.articleHoriz .col { display: table-cell;padding: 3vh 3vw 3vh 0;box-sizing: border-box;width:20%; vertical-align: top; font-size:80%;}
.ruzova {color:rgb(215,125,142);}
.zluta {color:rgb(255,197,43);}
.modra {color:rgb(101,171,223);}
.zelena {color:rgb(129,197,109);}
.bezova {color:rgb(197,159,119);}

.articleHoriz .nextChap {position: relative;bottom: 15%;right: 0;left:0;margin: auto;}
.articleHoriz .pics {position: relative; bottom: 0;padding: 0 0 0 92px; margin: 0;z-index:75;box-sizing: border-box;}
.articleHoriz .pics img {display: block; float: left; width: 33.3%; height: auto; padding: 0; margin: 0;}
.articleHoriz .pics .long {width: 66.6%; }

/* ********* next chap arrow ********* */
.nextChap {display: block; width: 45px; height: 45px; position: absolute; bottom: 15%; right: 40px; background-image: url('../images/arrowDown.png');background-position: left top; padding: 0; }
.nextChap:hover {background-position: left bottom;} 


/* ************** News homepage*********** */
#news {margin: 0 auto 0 auto; padding: 0; width: 100%;}
#news .item  { height: 100%;text-align: left; border: none; position: relative; margin: 0 0 0 72px;padding: 0;background-color: white;}
#news .item .itemHalf { padding: 0; margin: 0; }
#news .item .articleTitle {  background-color: white; position: relative; z-index:76; color: rgb(175,167,151); padding: 40px 0 30px 10%;}

#news .item .pics img {display: block; width: 33.3%; height: auto; padding: 0; margin: 0;}
#news .item .pics .long {width: 66.6%; }
.pics {display:flex; padding: 0; margin: 0;}
#news .item .text  {position: relative; top: 0; color: white; margin: 0; padding: 0; font-weight: bold; line-height: 170%; font-weight: normal;background-color: rgb(34,38,38); }
#news .item .text .inside  {margin: 0 32% 0 10%; padding: 20px; }
#news .item .text h3  {display: inline-block; margin:0; padding:0;font-weight: normal; text-transform: none; font-size:100%; }

#news .item .white  {background-color: white; position: relative;}
#news .item .dark, #news .item .dark .text { background-color: rgb(34,38,38);position: relative; z-index:74;}

#news .item .nextChap { z-index:78; bottom: auto; left: auto; top: 30px; margin:0; background-image: url('../images/arrowDown2.png');/*background-image: url('../images/greenArrowDown.png');*/background-repeat: no-repeat;}
.end .nextChap {background-image: url('../images/arrowTop.png');}

#news .item .white .nextChap {background-image: url('../images/arrowDown2.png');}

#news .item .more { display: block; /*color: rgb(179,179,179);*/ text-align: right; padding: 0 40px 20px 0;text-transform: uppercase; font-size: 90%;}
#news .item .more .ico {display: inline-block; margin: 0 0 0 10px; padding: 0; width:21px; height: 24px;top: 2px;position: relative; background-position: 0% 0; background-repeat: no-repeat; background-image: url('../images/kolecko.png');}
#news .item .more .ico:hover {background-position: 100% 0; }

#news .item .vysoky { min-height:1547px!important;}
/* ************* vystavni cinnost***************/
#vystavni-cinnost #news, #vystavni-cinnost #news .item .text{background-color: white; color:rgb(34,38,38);}


#news .pics .cubeText{display: block; float: left; width: 66.6%; height: auto; padding: 0; margin: 0; background-color: rgb(34,38,38); color:rgb(34,38,38);}
#news .pics .cubeText p {display: block; color: rgb(175,167,151); font-size: 220%; line-height: 120%; width: 40%;padding: 5%; margin: 0; background-color: transparent;}
#news .pics .cubeText p a {text-decoration: none; color: rgb(175,167,151);}

#news .item .pics .cubeText img {display: block; float: right; width: 50%; height: auto; padding: 0; margin: 0;}
#news .item .pics .cubeRight img, #news .pics .cubeRight p {float: left;}

#vystavni-cinnost #news .pics {position: relative;}
#vystavni-cinnost #news .item .articleTitle {  float: left; width: 15%;font-size: 440%;}
#vystavni-cinnost #news .item .text .inside{  margin: 0 10% 0 32%;}


/* ************** kontakty*********** */
#contacts {margin: 0 auto 0 auto; padding: 10% 0 0 0; width: 100%; text-align: center; color: white;}
#contacts .nextChap {display: block;position: relative; margin: 10% auto 2% auto; right:0;  }

/* ************** footer*********** */

#footer a {text-decoration: none;}
#footer {width: 100%; margin: 10px auto 0px auto; padding-bottom: 20px; color: white; text-align: center;}
#vystavni-cinnost #footer {color: rgb(34,38,38);}


/* ********* homepage BG********* */
#bg { position: fixed !important; top: 0px; z-index: 0; width: 100%; min-height: 100%;background-image:url('../images/bg.jpg');background-repeat: no-repeat; background-size: cover;  background-position: center; }



/* ************** DETAIL - ARTICLE*********** */
.detailNavigation  {z-index:50; position: fixed; top: 0px; left: 88px; width: 39%; margin: 0 0 0 5%; padding: 20px 2px 5px 2px; border-bottom: 1px solid rgb(179,170,154); font-size: 90%; text-transform: uppercase;text-align: left; color: rgb(175,167,151); background-color: white;}
.detailNavigation .sectionTitle {margin: 0; padding: 0; color:rgb(114,183,110); }
.detailNavigation .backToHome {float: right; margin: 0; padding: 0; color: rgb(179,170,154); }
.detailNavigation .backToHome:hover {color:green; text-decoration: none;}
.detailNavigation .backToHome .ico {display: inline-block; margin: 0 0 0 5px; padding: 0; width:21px; height: 24px;top: -3px;position: relative; background-position: 0% 0; background-repeat: no-repeat; background-image: url('../images/kolecko.png');}
.detailNavigation .backToHome .ico:hover {background-position: 100% 0; }

#detail {position: relative;z-index: 49; top: 0; left: 0; bottom: 0; margin: 0 0 0 92px; height: 100%; padding: 20px 20px 10px 7%; background-color: white;color: rgb(34,38,38);}
#detail a { color: rgb(114,183,110);}
#detail .item  { height: 88%; min-height: 90%; width: 90%; text-align: left; border: none; position: absolute; top:0; left: 0; margin:0 ;padding: 20px 5% 0 5%;}

#detail #pic {  float: right; position: absolute; right: 20px; width: 43%; margin: 0; padding: 0;z-index: 0; height: 97%; background-position: center; background-size: cover; background-repeat: no-repeat;  }


#detail .item .text .inside .articleTitle {  color: rgb(179,170,154); background-color: white; position: relative; z-index:76; font-size: 370%; padding: 0; margin: 0 0 10px; text-transform: none; line-height: 110%;}

#detail .item .text   {position: relative; top: 0; width: 48%; height: 80%; margin: 0; padding: 0; font-size: 110%; font-weight: bold; line-height: 180%; font-weight: normal; }
#detail .item .text .inside  {margin: 80px 0 20px 0; padding: 0px 20px 36px 0; width: 100%; height: 100%; position: relative; overflow-y: auto; }
#detail .item .text .inside h3  {display: inline-block; margin:0; padding:0;font-weight: normal; text-transform: none; font-size:100%; }
#detail .item .text .inside p  {display: block;}

                                                                                                                         
/*#detail .item .inside .nextChap { display: block; position: relative; top: auto; left: 0; right: auto; bottom: 0; width: 125px; height: 20px; font-size: 95%; text-transform: uppercase; padding: 0 0 0 35px; z-index:78;  margin: 30px 0 0 0; background-image: url('../images/arrowDown2.png');background-position: 0% 50%; background-repeat: no-repeat;}
#detail .item .inside .top { background-image: url('../images/greenArrowTop.png');}
 */
#detail .item .nextChap { background-image: url('../images/arrowDown2.png'); position: relative; top: auto; left: 0; right: auto; bottom: auto;}
.end {background-image: url('../images/arrowTop2.png');}


      
@media screen and (min-width: 1400px) {
   .articleTitle, #news .item .articleTitle {  font-size: 700%;}
   .articleTextHome { padding-top:5%;font-size: 145%;}         
   .slicknav_btn {   bottom: 6%; } 
   .articleTextHome .nextChap {/*margin: 20% auto 2% auto;*/margin: 17% auto auto auto;  right:0;  }
   #news .item .text  {font-size: 130%;line-height: 180%;}
   #news .item .pics img {width: 100%;}
   #news .item .pics img {width: 33.3%;}
   
   #detail .item .text .inside  {margin: 30% 0 auto 0;}
   #news .pics .first p {font-size: 350%;  }
   #vystavni-cinnost #news .item .articleTitle {  font-size: 480%;}

      }
@media screen and (max-width: 1500px) {
        .articleHoriz #detail { padding: 20px 2% 10px 6%;font-size:130%;}
        
        }

@media screen and (max-width: 1400px) {
#news .pics .cubeText p {font-size: 200%; line-height: 120%; }

}

@media screen and (max-width: 1220px) {
#detail .item .text .inside  {position: relative; bottom: auto; }
#news .pics .cubeText p {font-size: 170%; }
.articleHoriz #detail { padding: 20px 2% 10px 4%;font-size:110%;}
.articleHoriz .col { padding: 20px 18px 25px 0;}
.articleHoriz h3 { }

}
      
@media screen and (max-width: 1080px) {  
  #news .item .pics img {width: 50% ;}
  #news .item .pics .last {display: none;}  
  #news .item .pics .long {width: 100%; } 
  
  #vystavni-cinnost #news .item .pics img {width: 33.3% ;}
  #vystavni-cinnost #news .item .pics .last {display: block;}  
  #vystavni-cinnost #news .item .pics .long {width: 66.6%; } 
  #vystavni-cinnost #news .item .pics .cubeText img  {width: 50% ;}
  #vystavni-cinnost #news .item .articleTitle {  float: none; width: 100%;font-size: 440%;}
#vystavni-cinnost #news .item .text .inside{  margin: 0 10% 0 10%;}  
  
  #news .pics .cubeText p {font-size: 130%; }

  
  /*.articleTitle {  padding-left:15%;} */
  .articleTextHome { width: 100%; padding:5% 0;}
  .articleTextHome .mainText { padding: 2% 0 0 15%;  }
  .articleTextHome .articleTitle { margin-left: 15%; }

  #news .item .vysoky { min-height:995px;}

      } 
@media screen and (max-width: 1080px) {  
      .articleHoriz .col { width:50%; display:inline-block; font-size:90%;}
    }

@media screen and (max-width: 920px) { 
    .slicknav_nav ul a, .slicknav_nav ul li a:hover  {  font-size:300%; }
    #news .item .articleTitle {  padding-right:40px;}
}
@media screen and (max-width: 990px) {    
    #detail .item .text .inside  {margin: 50px 0 0 0; height: 88%;}
    #detail .item .text .inside .articleTitle { font-size: 340%; display: inline; background-color:transparent; }
    

}

@media screen and (max-width: 830px) {  
    #news .item .nextChap { right:15px}
    #news .pics .cubeText p {font-size: 115%; width: 44%;padding: 5% 3%; }
 
} 
               
@media screen and (max-width: 800px) {  
      .articleTextHome { width: 90%;padding:4% 0;}  
      #detail {  padding: 20px 30px 10px 30px; height: auto;}
      #detail .item  { width: auto; height: auto; min-height: auto; position: relative; padding: 20px 0 0 0;}
      #detail #pic {  float: none; position: relative; right: 0px; top: 30px; width: 100%; height: 150px;background-position: 0 0;}
      .detailNavigation  {position: fixed; top: 0px; left: 0; right: 0; width: auto; margin: 0 30px 0 122px; padding: 20px 0 5px 0;}

      #detail .item .text {width: 100%; height: auto; top: 40px;}
      #detail .item .text .inside  {margin: 20px 0 0 0; height: auto; padding-bottom: 30px;}
}

@media screen and (max-width: 700px) {
  #news .item .pics {position: relative; }
  #news .item .pics img {width: 100% ; float: none; }
  #news .item .text .inside {margin-right:20%;}
  
  .articleTitle {font-size: 390%; }
  #news .item .articleTitle {  padding: 20px 0 10px 10%;}
  
  
  #news .pics .cubeText {float: none; width: 100%; padding: 0;}
#news .pics .cubeText p {width: auto;padding: 5%; font-size: 150%;}
#news .pics .cubeRight p {float: none;}


#vystavni-cinnost #news .item .pics {position: relative; }
#vystavni-cinnost  #news .item .pics img, #news .item .pics .cubeText img, #vystavni-cinnost #news .item .pics .cubeText img ,
#vystavni-cinnost #news .item .pics .long{width: 100% ; float: none; }

#vystavni-cinnost #detail .item .nextChap {display: none;}
      
.articleHoriz .col { width:100%;  font-size:100%;}
}  

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

    #mainColumn {padding: 40px 0;}

    .article #mainColumn {padding: 0; background-color: white;}
    .articleTextHome {  margin: 20px 10px 20px 40px; font-size: 110%;}
    .articleTextHome .mainText { padding: 0 0 0 15%;  }
    #logo {top:0px; }

    #news .item .pic {width: 45%; padding: 0px; margin: 0px; }  
    #news .item .pics img  {float: none; }
    #news .item .text  {width:100%; }
    #news .item .text .inside {padding: 10px;}
    #news .item .nextChap { right: 10px; }
    #news .item .more { padding-right: 10px;}

        #links {display: none;}
        
   #vystavni-cinnost #news .item .nextChap{ position: relative; text-align: center; top: auto; left: auto; right: auto; margin: 0 auto 10px auto; padding: 0;}
   
   .articleHoriz #mainColumn {padding: 0;}
      
  
    
}



@media screen and (max-width: 525px) {
    .articleTitle {font-size: 330%; }
    .slicknav_nav ul  {   margin-top: 20%;text-align: center; }  
    .slicknav_nav ul a, .slicknav_nav ul li a:hover  {  font-size:250%; }
    .slicknav_nav ul a, .slicknav_nav ul li a:hover  { padding: 5px 10px 0px 10px;}
    .slicknav_nav ul li .links {margin: 30px auto 15px auto; }
    
    .articleTextHome {  margin: 0px; width: auto;text-align: center;}
    .articleTextHome .mainText { padding: 0 10px; text-align: center; }
    .articleTextHome .articleTitle {margin: 15px 0 6px 0; padding: 0;}  
    
    #news .item  { margin: 0; padding: 0;text-align: center;}
    #news .item .itemHalf { padding: 60px 0 0 0; }
    #news .item .pic {width: 45%; padding: 0px; margin: 0px; }  
    /*#news .item .pics img  {float: none; } */
    #news .item .text .inside {padding: 10px; margin: 0; }
    #news .item .articleTitle {  padding: 10px 10px 6px 10px; margin: 0;}
    #news .item .nextChap, #news .item .more, #detail .item .nextChap { position: relative; text-align: center; top: auto; left: auto; right: auto; margin: 0 auto 10px auto; padding: 0;}
                         
     
    /* ********* HEADER Mobile ********* */  
    #headerCont {position: fixed; top: 0; left: 0; width: 100%; height: 58px; margin: 0; padding: 0px;} 
    .header {position: relative; height: 100%;}
    #logo {position: relative; display: block; top:30px; right: 0; left: 0; margin: auto; padding: 0 0 16px 0;}
    #logoGd  {display: block; position: absolute;  top:10px; left:10px; width: 45px;padding: 0; margin: 0; }
    #menuToggle{position:fixed; left: calc(100vw - 80px); top:calc(2vh); right:0;}
   
   #menu{
      top: calc(1.5vh);
      left: auto;
      transform: translate(100%, 0);
      right: -7.5vw;
   }
    
    
    #contacts { padding: 60px 0 0 0; }   
    
      .detailNavigation {padding: 70px 0 0 5%; width: auto;left: 0; position: relative; margin: 0;}
      .detailNavigation .backToHome {display: none;}
      #detail {margin: 0; padding: 0 0 10px 0; }

      
      #detail .item {padding: 0px 5% 0 5%;}
      #detail .item .text {width: 100%; text-align: center;}
      #detail #pic {  height: 140px; }
      #detail .item .text .inside .articleTitle {font-size: 290%;  }

      .articleHoriz #detail {margin-top: 58px;}
      .articleHoriz .pics {padding:0;}
       
}

@media screen and (max-width: 400px) {          
    #logo img {  width: 180px;}
}

  
    
 @media screen and (max-width: 370px) {          
    #logo img {  width: 150px;}
    .slicknav_nav ul a, .slicknav_nav ul li a:hover  {  font-size:220%; }
    
    #footer {display: none}
}
@media screen and (max-width: 320px) {  
  .slicknav_nav ul a, .slicknav_nav ul li a:hover  {  font-size:150%; }
} 


@media screen and (max-height: 600px) {   
.slicknav_nav ul  {  margin: 15% 0; overflow: auto; }
.slicknav_nav ul a, .slicknav_nav ul li a:hover  {  font-size:230%; } 
#news .item .itemHalf { min-height:auto;overflow: auto;}
#news .item .text .inside { overflow: auto;} 
#firstSlide { overflow-y: auto; }
.articleTextHome { line-height: 150%;}

     
}  

@media screen and (max-height: 500px) {  
#detail .item .text .inside  {position: relative; bottom: auto; }
}



@media screen and (max-height: 600px) and (min-width: 1080px) {   
#news .item .text .inside { margin-right:7%;} 
.articleTextHome { padding:30px 3% 20px 14%; }
.articleTextHome .mainText{ padding: 2.5% 0 0 15%; margin:0; }
     
}