html,
body{margin:0;padding:0;font-size:17px; line-height:27px;color:#ffffff; background:#000000 ;
font-family: 'Montserrat', arial, tahoma, helvetica, sans-serif;
}


    @font-face {
      font-family: 'fontello';
      src: url('../font/fontello.eot?52761503');
      src: url('../font/fontello.eot?52761503#iefix') format('embedded-opentype'),
           url('../font/fontello.woff?52761503') format('woff'),
           url('../font/fontello.ttf?52761503') format('truetype'),
           url('../font/fontello.svg?52761503#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }


  * {
    margin:0;
    padding:0;
    
  }

* {
  box-sizing: border-box;
}

.bkadar { display:block; float:left; position:absolute; top:0px; left:0px; z-index:0; width:110px; height:100%;  background:#000}
.bkadar2 { display:block; float:right; position:absolute; top:0px; right:0px; z-index:0; width:200px; height:100%;  background:#000}

.otext2 ul {
    margin:15px; 
    padding-left:20px; 
    
}

.otext2 a {
    color:#000 
    
}

.pos {position:absolute;margin:0 auto; bottom:0px;   transform: translate(-50%, 0%);  }
.pos2 {position:absolute;margin:0 auto; bottom:20px;   transform: translate(-50%, 0%);  }
.pos3 {position:absolute;margin:0 auto; bottom:40px;   transform: translate(-50%, 0%);  }


.foto_xic { display:block; float:left; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:0; overflow:hidden; }
.foto_xic img {     width: 100%; height:100%;    object-fit: cover; animation: zoom-in-zoom-out 10s ease infinite;}



@keyframes zoom-in-zoom-out {
  0% {
    scale: 100%;
  }
  50% {
    scale: 110%;
    filter: grayscale(1);
  }
  100% {
    scale: 100%;
    filter: grayscale(0);
  }
}

.foto_xic2 { display:block; float:left; width:40%;  
border:0px solid #ff0000; margin-right:40px; margin-bottom:40px; 
 }
 
 
.foto_xic2 img {     width: 100%;    object-fit: contain;  }




.hand { cursor: pointer; }
.otext { display:block; float:left; border-left: 5px solid #333;  width:55%;  
  padding-left: 30px; }



.otext2 { display:block; float:left; border-left: 5px solid #ddd;  width:55%;  
  padding-left: 30px; }







.down-arrow {height:100px;width:55px;border:0px solid #FFF;}
.down-arrow:before,.down-arrow:after {content:'';position:absolute;top:26px;width:18px;border:2px solid #FFF;transition:all 0.3s;-webkit-transition:all 0.3s;}
.down-arrow:before {transform:rotateZ(45deg);-webkit-transform:rotateZ(45deg);left:9px;}
.down-arrow:after {transform:rotateZ(-45deg);-webkit-transform:rotateZ(-45deg);left:22px;}
.down-arrow:hover {cursor:pointer;border-width:0;}
.down-arrow:hover:before,.down-arrow:hover:after {top:40px;}


.menu {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: 0.5s ease;
  height: 34px;
  border:0px solid #fff; 
  font-size:15px; 
}


.en {
  position: absolute;
  top: 42px;
  right: 70px;
  transform: translate(-50%, -50%);
  cursor: pointer;
text-align: center;
  height: 27px;
  border:0px solid #fff; 
    width: 27px;
  font-size:14px;  
  border-top:2px solid #000; 
}

.en_act {
  position: absolute;
  top: 42px;
  right: 70px;
  transform: translate(-50%, -50%);
  cursor: pointer;
text-align: center;
  height: 27px;
  border:0px solid #fff; 
    width: 27px;
  font-size:17px;  
  font-weight:bold; 
  border-top:2px solid #fff; 
}



.pl {
  position: absolute;
  top: 42px;
  right: 110px;
  transform: translate(-50%, -50%);
  cursor: pointer;
text-align: center;
  height: 27px;
  width: 27px;
  border:0px solid #fff; 
  font-size:17px; 
    border-top:2px solid #000; 
    color:#999
}

.pl_act {
  position: absolute;
  top: 42px;
  right: 110px;
  transform: translate(-50%, -50%);
  cursor: pointer;
text-align: center;
  height: 27px;
  width: 27px;
  border:0px solid #fff; 
  font-size:17px; 
    border-top:2px solid #fff; 
    color:#fff;
  font-weight:bold; 
}





  .bar {
    width: 30px;
    height: 4px;
    background: #fff;
    border-radius: 0px;
    transition: 0.4s ease;
     margin-top: 2px;
    &:not(:first-child) {
      margin-top: 6px;
    }
  }

#hi {
  position: absolute;
  left: -100px;
  top: -100px;
}


.transform { transform: rotate(45deg); }

#hi:checked + .menu {
  transform: translate(-50%,-50%) rotatey(180deg);
  .bar {
    transform: rotatey(180deg) rotatex(360deg);
    &:first-child {
      transform: rotate(-45deg);
      margin-top: 15px;
    }
    &:nth-child(2) {
      opacity: 0;
    }
    &:nth-child(3) {
      margin-top: -15px;
      transform: rotate(45deg);
    }

  }

  
}

.menux{ display:none;

  position:fixed; 
  width:100vw; 
  top:0px;  
  z-index:99;
  background:#000;
min-height: 100vh;
font-size:22px; 
text-align:center; 
line-height:40px;


 }





























.bhide2 {opacity:0;  }
.bhide { 
display:none;
}


.lgx3 {
  border: 0px solid #ff0000;
  width: 100%;
  height: 400px;
  font-size:40px;
  overflow: hidden;
  text-align:center;
  display:flex;
  margin-top:120px; 
}
.lat {
  color: #fff;
  position:relative; 

}

.csf { position:absolute; width:100%; text-align:center; 
opacity:0; 
margin: auto;
border: 0px solid #ffcc00;
position: absolute;
top: 50%;
transform: translate(0, -50%);
 }

.line1 {   font-size:80px; }
.line2 {   font-size:80px; }
.line3 {   font-size:80px; }
.line5 { opacity:0;  }

.menu_bar { position:fixed; width:calc(100% - 0px); top:0px;  z-index:100;
border-bottom:0px solid #fff;
background:#000;
padding:7px 0px; 

}
.menu_bar img { width:70px; display:block; padding:0px; margin:0px 5px 0px 20px; }
.menu_bar a { color:#fff; text-decoration:none; }
.menu_bar td { border:0px solid #ddd; padding:0px 0px; }








.bottom_tyt {
position: absolute;
top:100px; 
left:-200px;
display:block; 
    font-size:120px;
    font-weight:bold; 
    color:#cccccc;
    text-align:left; 

    
    line-height:80px;
    z-index:1;
    border:1px solid #000;
   overflow:hidden; 
    rotate: -270deg;

}


.demo-icon {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  display: block;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  font-size: 50px;

  padding:0px;
  margin:10px 0px 10px 0px;

  
  
}


.demo-icon2 {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  font-size: 28px;
  padding:0px;
  margin:0px 10px 0px 10px;

  color:#fff
  
}




.estra { 
background-image: url('../images/bg7.jpg');
background-position: center;

  background-color: #000;
  background-attachment: fixed;
color:#fff;
background-size: cover;
}

.onas { 
background-image: url('../images/pop3.png');
background-position: 0px 0px;
  background-size: 300px;
  background-color: #000;
  background-attachment: fixed;

}


.kontaktc { 
background-image: url('../images/pop2.png');
background-position: 0px 0px;
  background-size: 300px;
  background-color: #e5300f;
  background-attachment: fixed;

}

.kontakt { 
background-image: url('../images/pop2.png');
background-position: 0px 0px;
  background-size: 300px;
  background-color: #000;
  background-attachment: fixed;

}

.kontaktccc { 
background-image: url('../images/pop2.png');
background-position: 0px 0px;
  background-size: 300px;
  background-color: #e2e2e2;
  background-attachment: fixed;

}


.kontakt22 { 
background-position: 0px 0px;
  background-size: 300px;
  background-color: #fff;
  background-attachment: fixed;

}



.kontakt2 { 
background-image: url('../images/nau-transpa.png');
background-position: 0px 0px;
  background-size: 100px;
  background-color: #fff;
  background-attachment: fixed;

}




.rec1 { 
background-image: url('../images/bg4.jpg');
background-position: 0px 0px;
  background-color: #000;
background-size: contain;
  background-attachment: fixed;


}


.rec2 { 
background-image: url('../images/bg6.jpg');
background-position: 0px 0px;
  background-color: #000;
background-size: cover;
  background-attachment: fixed;


}








.onas2 { 
background-image: url('../images/s3.png');
  background-position: center center;
  display:block; 
  width:30%;
  height:100%;
  bottom:0px;
  right:0%;
  position:absolute;

}


.onas3 { 
background-image: url('../images/s33.png');
  background-position: center center;
  display:block; 
  width:10%;
  height:100%;
  bottom:0px;
  right:30%;
  top:0%; 
  position:absolute;
}





 
 .tel:hover { background:#666;  }
 .mail:hover { background:#666;  }
 .tel2:hover { background:#666; color:#ffffff;  }
 .mail2:hover { background:#666; color:#ffffff;  }
 
 .soc1:hover { background:#666; color:#ffffff;  }
 .soc2:hover { background:#666; color:#ffffff;  }
 
 
 .tel a { color:#ffffff;  text-decoration:none;  border:0px solid #fff; display:block; padding:10px; }
 .mail a { color:#ffffff; text-decoration:none;   border:0px solid #fff; display:block; padding:10px; }
 
 .soc1 a {  color:#000;  text-decoration:none;  border:0px solid #000; display:block; padding:10px; }
 .soc2 a {  color:#000; text-decoration:none; border:0px solid #000; display:block;  padding:10px;  }
 
 .soc1 a:hover {  color:#fff;  text-decoration:none;  }
 .soc2 a:hover  {  color:#fff; text-decoration:none;  }
 
  .tel2 a:hover { color:#fff; text-decoration:none;  }
 .mail2 a:hover  {  color:#fff; text-decoration:none;  }
 
 
  .tel2 a { color:#000;  text-decoration:none;  border:0px solid #fff; display:block; padding:10px; }
 .mail2 a { color:#000; text-decoration:none;   border:0px solid #fff; display:block; padding:10px; }
 
 
 
 
 
 
.tel { background:#000000; color:#ffffff;  padding:0px; margin:30px auto; font-weight:700;  font-size:22px; letter-spacing:0px;
width: 300px;rotate: 1deg;text-align:center;
 }
 
 

.mail { background:#000000; color:#ffffff;  padding:0px; margin:30px auto; font-weight:700;  font-size:22px; letter-spacing:0px;
width: 450px;rotate: -1deg;text-align:center;

 }


.tel2 { background:#ffffff; color:#000;  padding:0px; margin:30px auto; font-weight:700;  font-size:22px; letter-spacing:0px;
width: 300px;rotate: -1deg;text-align:center;
 }
 
 

.mail2 { background:#ffffff; color:#000;  padding:0px; margin:30px auto; font-weight:700;  font-size:22px; letter-spacing:0px;
width: 250px;rotate: 1deg;text-align:center;
 }



.soc1 {  background:#fff; color:#000;  padding:0px; margin:30px auto; font-weight:700;  font-size:22px; letter-spacing:0px;
width: 300px;rotate: -1deg;text-align:center;

 }

.soc2 { background:#fff; color:#000;  padding:0px; margin:30px auto; font-weight:700;  font-size:22px; letter-spacing:0px;
width: 350px;rotate: 2deg; text-align:center;

 }





.bcolor1 { background:#000000; color:#ffffff; }
.bcolor2 { background:#333333; color:#ffffff;}
.bcolor3 { background:#666666; color:#ffffff;}
.bcolor4 { background:#999999; color:#000000;}
.bcolor5 { background:#ffffff; color:#000000;}
.bcolor5a { background:#1b1d1c; color:#ffffff;}
.bcolor5b { background:#e5300f; color:#ffffff;}


.foot a { color:#999; }
.sec_page {
  width:100%; 

  position: relative;
}

.item {border: 0px dotted #000; 
  display:grid;    
  height:100%; 
  width:100%; 
  display:grid;
  place-items: center;
position: relative;
  grid-gap: 10px;
 }


.grid { 
  display:grid;
  border:0px solid #ff0000; 
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 0px;
  padding: 0px;
  justify-items: center;
  align-items: center;

}

.grid > div {
  padding: 0px 0;
}

.grid_col0 { 
grid-template-columns: 1fr;
}


.grid_col1 { 
min-height: 100vh;
grid-template-columns: 1fr;
}

.grid_col2 { 

grid-template-columns: 1fr 1fr;

}


.grid_col12 { 

grid-template-columns: 1fr 2fr;

}

.grid_col12k { 
min-height: 100vh;
grid-template-columns: 2fr 1fr;

}

.grid_col21k {
min-height: 100vh;
  grid-template-columns: 2fr 1fr;
}

.grid_col21 { 

grid-template-columns: 2fr 1fr;

}

.grid_col23 { 

grid-template-columns: 2fr 1fr;

}

.grid_col3 { 
min-height: 100vh;
grid-template-columns: 1fr 1fr 1fr 
}


.grid_col4 { 

grid-template-columns: 1fr 1fr 1fr 1fr
}

.foto { display:block;  width:70%; padding:35% 0; margin:0 auto; background:#000000; margin-bottom:0px;

  position: relative;
  overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
border-radius: 1000px;clear:both; 
 }

b.artname { font-size:25px; margin:30px 0px; display:block; float:left; width:100%; text-align:center;
display:block; float:left;
clear:both; 

}

.art_opis {display:block; float:left; width:100%; 
border-left:5px solid #ddd; padding-left:30px; 

 }
 
 .rec_opis {display:block; float:left; width:100%; 
border-bottom:0px solid #ddd; padding-bottom:0px; margin-top:50px; 

 }
 
.foto_xic3 {
  display: block;
  float: left;
  width: 40%;
  border: 0px solid #ff0000;
  margin-right: 40px;
  margin-bottom: 40px;
}
 .foto_xic3 img {     width: 100%;    object-fit: contain;  }

 
 
.art_opis2 {display:block; float:left; width:100%; 
border-left:5px solid #333; padding-left:30px; 

 }



.artname:first-word {
  font-weight: bold;
  border-bottom:1px solid #000;
  
}


.pad10 { 
padding:40px; 
border:0px solid #ddd;
font-size:17px;

}

.pad20 { 
padding:100px 40px; 
border-left:0px solid #ddd;
margin:00px; 
}

.pad22 { 
padding:40px 40px; 
border-left:0px solid #ddd;
margin:00px; 
}




.art { 
grid-column-start: auto; 
place-items: flex-start !important;
border-right:0px solid #000000; 
margin-bottom:0px;
}




.hide1 { display:grid;}
.show1 { display:none; }

img.logo_red { width:300px; margin-bottom:20px }
img.logo_black { width:200px; margin-bottom:20px }
img.logo_white { width:300px; margin-bottom:40px  }
img.podpis { width:300px; }

.sdfsdf{margin-top:100px; }


.rec_cont { padding:100px 40px 100px 40px !important}



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


  .foto_xic3 {
    display: block;
    float: left;
    width: 38%;
    border: 0px solid #ff0000;
    margin-right: 40px;
    margin-bottom: 40px;
  }
  
  .otext2 {
    display: block;
    float: left;
    border-left: 5px solid #ddd;
    width: 55%;
    padding-left: 30px;
  }
  

}



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

.grid_col4 {
  grid-template-columns: 1fr 1fr 1fr;
}

.soc2 {  width: 270px;}
.soc1 {  width: 270px;}
.mail {  width: 400px;}


  .foto_xic3 {
    display: block;
    float: left;
    width: 100%;
    border: 0px solid #ff0000;
    margin-right: 0px;
    margin-bottom: 40px;
  }
  
  .otext2 {
    display: block;
    float: left;
    border-left: 5px solid #ddd;
    width: 100%;
    padding-left: 30px;
  }
  





}



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


.foto_xic2 {  width:50%;  }
.otext { display:block; float:left; border-left: 5px solid #333;  width:calc(50% - 60px);  padding-left: 30px; }

.grid_col4 {
  grid-template-columns: 1fr 1fr;
}
.grid_col12k {
min-height: 100vh;
  grid-template-columns: 1fr 1fr;
}

.grid_col12 {
  min-height: inherit;
  grid-template-columns: 1fr 1fr;
}

.grid_col3 {
  min-height: inherit;
  grid-template-columns: 1fr 1fr;
}

 .grid_col21k {
     
     min-height: 100vh;
  grid-template-columns: 1fr 1fr;
 }



.hide1 { display:none;}
.show1 { display:block }

img.logo_red { width:200px; margin-bottom:20px }
img.logo_black { width:200px; margin-bottom:20px }
img.logo_white { width:300px; margin-bottom:40px  }
img.podpis { width:300px; }

}

@media only screen and (max-width:960px){
  .grid_col12k {
    min-height: inherit;
    grid-template-columns: 1fr;
  } 
  
 .grid_col21k {
     
    min-height: inherit;
  grid-template-columns: 1fr;
 }
  
  
}


@media only screen and (max-width:720px){
  .grid_col12k {
    min-height: inherit;
    grid-template-columns: 1fr;
  } 
  .grid_col3 {
    min-height: inherit;
    grid-template-columns: 1fr;
  }
  .grid_col12 {
    min-height: inherit;
    grid-template-columns: 1fr;
  }
  

.sdfsdf{margin-top:00px; }

  
  
  
  .grid_col4 {
    grid-template-columns: 1fr;
  } 
}


@media only screen and (max-width:680px){
img.logo_white { width:200px; margin-bottom:40px  }

.soc2 {  width: 250px; font-size: 20px;}
.soc1 {  width: 250px; font-size: 20px;}
.mail {  width: 250px; font-size: 20px; overflow-wrap: break-word;}
.tel {  width: 250px; font-size: 20px;}
.tel2 {  width: 250px; font-size: 20px;}
.mail2 {  width: 250px; font-size: 20px;}
.onas21 { text-align:center; margin-top:20px;  }

.lgx3 {
  font-size: 30px;
  text-align: center;
}
.line1 {   font-size:70px; }
.line2 {   font-size:70px; }
.line3 {   font-size:70px; }

.foto_xic2 {  width:100%; margin-right:0px;  }

.otext { display:block; float:left; border-left: 5px solid #333;  width:calc(100% - 30px);  padding-left: 30px; }


}


@media only screen and (max-width:480px){
img.podpis { width:80%; }
.pad22 {
  padding: 20px;
}

.pad10 { 
padding:20px; 
}

.pad20 { 
padding:50px 20px; 
}




}


@media only screen and (max-width:450px){
td.sdf { width: 150px;
    line-height: 20px; }


.bkadar2 {

  width: 170px;

}

}