/* PHONE CSS
*********************************************/
@media screen and (max-width: 1920px) and  (orientation: portrait) {
    h1, h2, h3,h4,h6{
        font-style: normal;
        font-family: 'Roboto';
        line-height: 100%;
      }
      a,h2,h3,h4,h5,h6{
        color: rgb(83,51,13);
      }
      h1{
        font-weight: 500;
        font-size: calc(1vw + 5vh + 0.5vmin);
        text-transform: uppercase;
        color: rgb(107,135,77);
      }
      h2{
        /*font-size: 36pt;*/
        font-size: calc(1vw + 2vh + 0.3vmin);
        line-height: 120%;
        padding: 0.2em 0 0.2em 0;
        /*font-size:150%;*/
      }
      h3{
        margin: 0;
        font-size: calc(0.5vw + 1.2vh + 0.3vmin);
        /*font-size: 22pt;*/
        font-weight: 300;
        /*text-transform: uppercase;*/
      }
      h4{
        font-style: normal;
        font-weight: 300;
        font-size: calc(0.5vw + 1vh + 0.3vmin);
      }
      h5{
          font-family: 'Roboto Condensed';
          font-style: normal;
          font-weight: 300;
          font-size: calc(1vw + 0.3vh + 0.2vmin);
      }
      h6{
        font-size: calc(0.1vw + 1vh + 0.3vmin);
        font-weight: 300;
      }
      .first-body{
        width: 96%;
        margin-top: 5%;
      }
      /*.menubar{
        height: calc(1vh + 3vw + 1vmin);
        display: flex;
        width: 96%;
        justify-content: flex-end;
    }*/
    
}
@media screen and (max-width: 1700px) {

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

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

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

      
    /****************************************/
    
    /*******************first*/
  
}
@media screen and (max-width: 1300px) {
  
}

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

@media screen and (max-width: 1100px) {
  
}
@media screen and (max-width: 1000px) {

}
@media screen and (max-width: 900px) and  (orientation: portrait) {
  h1{
    font-weight: 500;
    font-size: calc(1vw + 5vh + 0.5vmin);
    text-transform: uppercase;
    color: rgb(107,135,77);
  }
  h2{
    font-size: calc(1vw + 2vh + 0.3vmin);
    line-height: 120%;
    padding: 0.2em 0 0.2em 0;
  }
  h3{
    font-size: calc(0.5vw + 2vh + 0.3vmin);
    font-weight: 300;
  }
  h4{
    font-size: calc(0.5vw + 1.5vh + 0.3vmin);
  }
  h5{
      font-size: calc(1vw + 0.3vh + 0.2vmin);
  }
  h6{
    font-size: calc(0.1vw + 1vh + 0.3vmin);
    font-weight: 300;
  }
  li{
    font-size: calc(0.5vw + 1.5vh + 0.3vmin);
    
  }
.headerline{
 
}
.footer-all, .mob{
  display: none;
}
/**************************headerline*************************/
.header-soc, .header-tel{
  display: none;
}
.headerline{
background: none;
}
.mod-languages{
  position: absolute;
  top: 5vw;
  padding-top: 5vw;
  left: 5vw;
}
.mod-languages a{
  color: rgb(100, 100, 100);
  font-size: calc(5vw + 2vh + 0.3vmin);
}
.mod-languages a{
	font-size: calc(3vw + 1vh + 0.2vmin);
}
/*********************MENU***********************************/
#menu-button{
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  width: 50px;
  border-radius: 10px;
  position: absolute;
  cursor: pointer;
  transition: all linear .3s;
  padding: 4px;
  height: 50px;
  right: 5%;
  z-index: 99;
  top: 3%;
}

#menu-button.active{
  background: rgba(40, 23, 11, 0.952);;
}
#line-1,#line-2,#line-3{
  width: 80%;
  background: #7c9d59;
  height: 4px;
  margin: 4px auto;
  border-radius: 2px;
  transition: all linear .3s;
}

#line-1.active{
-webkit-transform: translate(0px,12px) rotate(45deg);
transform: translate(0px,12px) rotate(45deg);
}

#line-2.active{
opacity: 0;
}

#line-3.active{
-webkit-transform: translate(0px, -12px) rotate(-45deg);
transform: translate(0px, -12px) rotate(-45deg);
}

/*//////////////////////////////////////////////////////////*/

.menubar{
position: absolute;
	display: flex;
	width: 90%;
  height: 100%;
	justify-content: center;
  align-items: center;
  overflow: hidden;
}
.navbar{
  display: flex;
  position: absolute;
  top: 0;
  z-index: 88;
  left: 0;
  width: 100%;
  color: #fff;
  height: 100%;
  background: rgba(40, 23, 11, 0.89);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.topmenu{
align-items: center;
}
.mod-menu{
  align-items: center;
  flex-direction: column;
  margin-top: 30%; 
  width: 100%; 
}

	.mod-menu ul{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
  }

.topmenu, .topmenu ul, .topmenu li{
	list-style:none;
}
.mod-menu li{
  align-items: center;
    justify-content: center;
margin: 5% 0;
}

.topmenu li a:hover{	
	color: rgb(125, 156, 89);
}
.topmenu li a{
	text-decoration: none;
	font-size: 20pt;
   color:#b3d236;
   
 }
 .nav-item a{
  
 }
/*********************COntact*********************************/
.com-contact {
  flex-direction: column-reverse;
  justify-content: center;
align-items: center;
}
#contact-form{
  margin-top: 20%;
}
.contactu-all{
  justify-content: center;
}
.contact-soc{
  align-items: center;
  justify-content: center;
}
.contactu a{
  font-size: 1em;
}
.contactu h6 a{
  font-size: 2em;
}
#contact-form{

  align-items: center;
}
.kontakt .btn{
  width:calc(15vw + 15vh + 5vmin);

  
}
/*****************************************************madia************/

/****************************menu-footer********************/
.navbar{
	display: none;
}

.site-footer .navbar{
  margin-left: 0;
  width: 0%;
}
.mobfooter{
	display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5%;
  font-weight: 500;
}
.mobfooter a{
  font-size: 8vw;
  color: beige;
  font-weight: 500;
}
.mobfootersoc{
  flex-direction: row;
  margin-top: 5%;
  width: 100%;
}
.mobfootersoc img{
  height: calc(1vw + 2vh + 0.5vmin);
  margin-right: 2%;
}
/**************************************************/
.first-content{
background-size: contain;
height: calc(35vw + 45vh + 10vmin);
}
.first-body{
  display: flex;
  align-items: center;
  flex-direction: column;	
  margin-top: calc(20vh + 22vw + 12vmin);
  margin-bottom: 5vw;
}
.first-content-cell{
  height: 100%;
  align-items: center;
  flex-direction: column;	
justify-content: space-between;
/*margin-bottom: 5%;*/
}
.first-text{
  display:flex;
 align-items: center;
 text-align: center;
 margin-top: 5%;
/*margin-bottom: 2%;*/
}
.first-text h3{
  font-size: calc(1vw + 2vh + 0.5vmin);
}
.feeling{
  margin-top: 5vw;
  margin-bottom: 3vw;
}
.feeling-logo img{
    width: auto;
    height: calc(3vw + 5vh + 1vmin);
}
/******************************CONTENT*************************/
.content-img img{
  height: calc(25vw + 24vh + 5vmin);
}
.content-img{
  width: 100%;
}
.component{
  flex-direction: column-reverse;
  background-position: left;
  background-repeat: repeat-y;
  background-image: url(../images/chim-back-leftw.jpg);
  background-size: 50%;
}
.com-content-article__body, .item-content{
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center; 
  padding-bottom: 3%;
}
.content-all{
  width: 80%;
  text-align: justify;
  text-align: left;
}
.content-all h3{
  font-size: calc(0.5vw + 2vh + 0.3vmin);
}
.content-decor{
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
  .content-decor img{
    height: calc(10vw + 10vh + 2vmin);
    margin-left: 0px;
    margin-top: 5vw;
}

/*******************************productu********************************/
.after-img-v{ 
  display: none;
}
.after-all{

}
.after-img-h{
    display: flex;
}
.aftercontent, .after-all{
  flex-direction: column;
  justify-content: center;
  height: auto;
  width: 100%;
}
.after-text{
  width: 80%;
  margin-top: 8%;
  margin-bottom: 5%;
  line-height: 100%;
}
.after-text h3{
  font-size: 7vw;
}
.after-text h4{
  line-height: 120%;
  border: 0.5vw solid #ccc;
  border-radius: 5vw;
  padding: 2vw 5vw;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  -moz-backdrop-filter: blur(5px);
}
.after-text a{
  font-size: 5vw;
}
#mod-custom137 .youtube-all{
  margin: 5% 0;
}
/**********************************************************/
.youtube-all{
  width: 100%;
 margin-left: 10%;
}
.youtube-all{
justify-content: center;
flex-direction: column;
align-items: center;

}
.youtube-m{
display: flex;
}
.youtube-m iframe{
 
}
/****************************page items***********************/
.productu-all{
  margin-left: 3vw;
}
.productu-img{
  width: 100%;
  margin-top: 5%;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.productu-img img{
  height: calc(15vw + 15vh + 1vmin);
  margin-right: 5vw;
}
.productu-column{
  flex-direction: column;
  width: 90%;
}
.productu-text{
 display: flex;
  flex-direction: column;
  width: 90%;
  margin-top: 8%;
  margin-left: 0px;
  text-align: left;
}
.productu-text h3{
font-weight: bolder;
font-size: calc(1.5vw + 1vh + 0.5vmin);
}
.productu-text a{
  font-size: calc(2vw + 1vh + 1vmin);
  margin-top: 0;
}
.productu-text img{
  height: calc(15vw + 15vh + 10vmin);
}
.productu-icon{
flex-direction: row;
justify-content: right;
width: 100%;
border-bottom: 1px solid #bdbdbd; 
}
.productu-icon img{
  height: calc(2vw + 5vh + 5vmin);
  margin-right: 10vw;
}
.productu-icon a{
  font-size: calc(1vw + 0.5vh + 0.3vmin);
}
.productu-icon a:hover{
  opacity: 0.5;
}
.technology-all{
  flex-direction: column;
  justify-content: center;
    align-items: center;
}
.technology-all li{
  padding: 3vw 3vw;
  /*border: 0.5vw solid #ccc;*/
  border-radius: 5vw;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  -moz-backdrop-filter: blur(3px);
}
.technology-text li, .technology-text a{
  font-size: calc(0.5vw + 1.5vh + 0.3vmin);
}
.technology-text blockquote{
  font-size: calc(0.5vw + 1.5vh + 0.3vmin);
}
.technology-img img{
  height: calc(15vw + 10vh + 3vmin);
}

/**************************SOCIALLINK*******************/
.certificate{
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.certificate h1{
  font-size: 3.5vw;
}
/*********************************************************************/
}
@media screen and (max-width: 800px) and  (orientation: portrait) {
  

}

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

}

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

}

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

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

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

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

}