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: rgb(34,38,38);
  height: 100%;

  }
  
a {color: 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%; background-color: rgba(34,38,38,0.5);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;}


/* ********* MENU NEW ********* */
    #mobileMenu{display:absolute; top: 0; left: 0;}
  	.js #menu {display:none;}
    .js .slicknav_menu {display:block; z-index: 80;}

    /*.slicknav_menu {width: 100%; top: 0; margin:0; padding:0;} */
    .slicknav_menu {width: 100%; top: 0; margin:0; padding:0;}
    .slicknav_btn {   float: none; z-index: 980; position: absolute; margin: 0; bottom: 6%; top: auto; right: auto; left: 25px;width: 38px; padding: 0;  background-color: transparent;  }

    .slicknav_menu .slicknav_icon { float: none;}
    .slicknav_menu .slicknav_icon-bar { display: block; width: 100%; height: 3px; padding: 0; margin: 0;  background-color: /*rgb(34,38,38)*/ white; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; box-shadow: none; -webkit-box-shadow: 0; -moz-box-shadow: 0; box-shadow: 0; }
    .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.5em }
    .slicknav_menu .slicknav_icon .slicknav_no-text { padding: 0; }
 

    .slicknav_nav ul  {  margin: 9% 0; text-align: left; }
    .slicknav_nav ul a, .slicknav_nav ul li a:hover  { font-family: 'Cardo',monospace; font-size:440%; /*text-transform: uppercase; */ text-decoration: none; color: white; line-height: 105%; font-weight:normal; padding: 5px 10px 0px 20px; margin: 0px 0 10px; }
    
    .slicknav_nav ul li a:hover {color: white;background-color:transparent;}
  
    .slicknav_nav ul li .links {display: block; width: 100px; margin: 30px 0 15px 20px; padding: 0px;}
    
    .slicknav_nav ul li .links a {display: block; float: left; margin: 4px; padding: 0px; font-size: 0px; background-image: url();}
     .slicknav_nav ul li .links a:hover {padding:0;margin: 4px;}

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



/* ********* ARTICLE ********* */
.articleTitle {  display: block; font-family: 'Cardo',monospace; 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%; }

.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;  }


/* ********* 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; min-height:600px;}
#news .item .articleTitle {  background-color: white; position: relative; z-index:76; color: rgb(175,167,151); padding: 30px 0 0px 10%;}
#news .white .pics, #news .dark .pics {position: absolute; bottom: 0;padding: 0; margin: 0;z-index:75;}
#news .dark .pics {z-index: 73;}
#news .item .pics img {display: block; float: left; width: 33.3%; height: auto; padding: 0; margin: 0;}
#news .item .pics .long {width: 66.6%; }

#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; min-height: 150px;}
#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/arrowDown3.png');}
.end .nextChap {background-image: url('../images/arrowTop.png');background-position: bottom left;}
.end .nextChap:hover { background-position: top left;}
#news .item .white .nextChap {background-image: url('../images/arrowDown2.png');}



/* ************** 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;}


/* ********* homepage BG********* */
#bg { position: fixed !important; top: 0px; z-index: 0; width: 100%; min-height: 100%; }
#bg div { width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat;  }


/* ************** 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;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: 410%; padding: 0; margin: 0 0 10px; text-transform: none;}

#detail .item .text   {position: relative; top: 0; width: 48%; height: 80%; margin: 0; padding: 0; font-size: 110%; font-weight: bold; line-height: 170%; font-weight: normal; }
#detail .item .text .inside  {margin: 80px 0 20px 0; padding: 0px 20px 30px 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: auto; height: auto; font-size: 95%; text-transform: uppercase; padding: 0 0 0 30px; z-index:78;  margin: 30px 0 0 0; background-image: url('../images/greenArrowDown.png');background-position: 0% 50%; background-repeat: no-repeat;}


      
@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: 140%;}
   #news .item .pics img {width: 100%;}
   #news .item .pics img {width: 33.3%;}
      }

@media screen and (max-width: 1200px) {
#detail .item .text .inside  {position: relative; bottom: auto; }
}
      
@media screen and (max-width: 1080px) {  
  #news .item .pics img {width: 50% ;}
  #news .item .pics .last {display: none;}  
  #news .item .pics .long {width: 100%; }   
  
  /*.articleTitle {  padding-left:15%;} */
  .articleTextHome { width: 100%; padding:5% 0;}
  .articleTextHome .mainText { padding: 2% 0 0 15%;  }
  .articleTextHome .articleTitle { margin-left: 15%; }

      } 

@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: 820px) {  
    #news .item .nextChap { right:15px}
} 
               
@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: 110px;}
      .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%;}

  
}  

@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; }

        #links {display: none;}
        
    
  
    
}



@media screen and (max-width: 500px) {
    .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 { 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; }
    .slicknav_btn {   bottom: auto; top: 15px; right: 15px; left: auto;}
    .btnClose { position: absolute; margin:0; padding:0;top: 15px; right: 15px; left: 0;} 
    
    
    
    #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%; line-height: 110%; }
      #detail #pic {  height: 100px; }

       
}

@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; }
     
}