/*--------------------------------------------------------------
# Desktop Navigation 
--------------------------------------------------------------*/

@media only screen and (min-width: 1280px) {

.indexContainer{
  width: 100%;
  padding-top: 50px;
}

.aboutUsContainer{
	position: fixed;
	top: 350px;
	left:150px;
}

.hrContainer{
  width: 100%;
  padding-top: 200px;
}

.title1{
  //font-family: Nunito Sans;
  font-family: Calibri;
  font-size:35px;
  }

.title2{
  //font-family: Open Sans;
  font-family: Calibri;
  font-size:17px;
  }
 
 .title3{
  font-family: Calibri;
  font-size:24px;
  font-weight: bold;
  }
  
 b{
  font-size: 16px;
  margin: 0;
  font-weight: 700;
  //font-family: Open Sans;
  font-family: Calibri;
  color: #000000;
 }
 
.text1{
  font-size:14px;
  margin: 0;
  font-weight: plain;
  //font-family: Open Sans;
  font-family: Calibri;
  color: #000000;
}

.emptyspace  {
padding-top: 100px;
}
.emptyspace1  {
padding-top: 40px;
}

.circleG {
  position: relative;
  background-color: #24BABA;
  color: #fff;
  //margin: 3px auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border:1px solid #24BABA;
  font-size:16px;
}
.circleCont{
padding-left:60px;

}




/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 30px;
  z-index: 995;
  background: var(--color-primary);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}
.scroll-top i {
  font-size: 24px;
  color: var(--color-white);
  line-height: 0;
}
.scroll-top:hover {
  background: rgba(var(--color-primary-rgb), 0.85);
  color: var(--color-white);
}
.scroll-top.active {
  visibility: visible;
  opacity: 1;
}  
/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/  
/*--------------------------------------------------------------
# image inside hexagon
--------------------------------------------------------------*/  
  .koanimg{
  	height:40px;
  	width:100px;
    	}
  .koanimgS{
  	height:20px;
  	width:50px;
    	}
    	
  .hrimg{
    	height:50px;
    	width:50px;
    	}  
  .altiimg{
    	height:40px;
    	width:80px;
    	}  

   .baroimg{
	height:50px;
	width:70px;
	}

  .img1{
  	width:15%;
    	} 
    	
  .imgsample{
  	height:300px;
  	width:600px;
    	}    
  .imgsampleW{
  	height:400px;
  	width:600px;
    	}    	
  .imgBrocheripma{
  	height:250px;
  	width:450px;
  	//padding-top: 10px;
  	cursor:pointer;
    	}      	
  .imgBrochersales{
  	height:250px;
  	width:400px;
  	//padding-top: 10px;
  	cursor:pointer;
    	}      	
    	
    	
/*--------------------------------------------------------------
# image inside hexagon
--------------------------------------------------------------*/

/* hrootls alti section */

im_alti {
    font-size: 0.8vw;
}

.box{
    background:#006461;
    height:2.1vw;
    width:2vw;
    //margin: 0 0 0 17%;
}

#descrip{
    //font-size: 1vw;
    font-size: 12px;
    //font-family: Open Sans;
    font-family: Calibri;
}

#plus_minus{
    width: 25%;   
}

/* hrootls koan section */
.scaletable{
   width: 60%;
   text-align: left;
   
}

.small_table{
    width: 5%;
    background-color: #48669c;
    color: white;
    font-weight: bold;
    border-style: solid;
    border-color: #FFFFCC;
    text-align: center;
    font-size: 2vw;
}

/* services page */
.srCont{
         position: fixed;
         top: 350px;
         left:100px;
         width: 30%;
}
.srCont1{
        // position: fixed;
         top: 350px;
         //left:30%;
        // padding-left:200px;
         width: 98%;
}
.abCont3{
       // position: fixed;
         top: 350px;
        //left:30%;
        // padding-left:200px;
         width: 98%;
}


.imgS{
   padding-top:50px;
   height: 330px;
   width:  220px;
}

/* Aboutus page */
.img-fluidAB {
  max-width: 100%;
  height: auto;
}

/* online test */
.otCont{
 // width: 80%;
}

  .koanimgOT{
  	height:80px;
  	width:200px;
    	}
  .hrimgOT{
    	height:80px;
    	width:80px;
    	}  
  .altiimgOT{
    	height:80px;
    	width:100px;
    	}  

   .baroimgOT{
	height:70px;
	width:100px;
	}

   .alertimgOT{
	height:60px;
	width:90px;
	}
	
.lanstyle{
  font-family: Calibri;
  border:none;
  background: #e5e5e5;  
  }	

.lanstyleS{
  font-family: Calibri;
  border:none;
  background: #ededed;  
  }
  
}

/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/

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


.indexContainer{
  width: 100%;
  padding-top: 10px;
}

.hrContainer{
  width: 100%;
  padding-top: 100px;
}

  .title1{
   //font-family: Nunito Sans;
   font-family: Calibri;
   font-size:30px;
   }

.title2{
  //font-family: Open Sans;
  font-family: Calibri;
  font-size:13px;
  }
  
 
 .title3{
  font-family: Calibri;
  font-size:20px;
  font-weight: bold;
  }  
 
 b{
  font-size:13px;
  margin: 0;
  font-weight: 700;
  //font-family: Open Sans;
  font-family: Calibri;
  color: #000000;
 }  
 
.text1{
  font-size:8px;
  margin: 0;
  font-weight: plain;
  //font-family: Open Sans;
  font-family: Calibri;
  color: #000000;
}
 
.aboutUsContainer{
	position: fixed;
	top: 170px;
	left:100px;
}
  
.emptyspace  {
padding-top: 15px;
}

.emptyspace1  {
padding-top: 10px;
}


.circleG {
  position: relative;
  background-color: #24BABA;
  color: #fff;
  //margin: 3px auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border:1px solid #24BABA;
  font-size:9px;
}

.circleCont{
padding-left:50px;
padding-top:250px;
//left:70%;
}

/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 60px;
  z-index: 995;
  background: var(--color-primary);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}
.scroll-top i {
  font-size: 24px;
  color: var(--color-white);
  line-height: 0;
}
.scroll-top:hover {
  background: rgba(var(--color-primary-rgb), 0.85);
  color: var(--color-white);
}
.scroll-top.active {
  visibility: visible;
  opacity: 1;
}  

/*--------------------------------------------------------------
# image inside hexagon
--------------------------------------------------------------*/  
  .koanimg{
  	height:20px;
  	width:50px;
    	}
  
  .hrimg{
    	height:20px;
    	width:20px;
    	}
   .altiimg{
    	height:20px;
    	width:40px;
    	}  
   .baroimg{
	height:25px;
	width:35px;
	} 	
 
  .img1{
   	width:25%;
    	} 
/*--------------------------------------------------------------
# image inside hexagon
--------------------------------------------------------------*/  
  
  im_alti {
      font-size: 2.0vw;
	}

.box{
    background:#006461;
    height:5.1vw;
    width:5vw;
    //margin: 0 0 0 17%;
}

#descrip{
    //font-size: 2vw;
    font-size: 8px;
    //font-family: Open Sans;
    font-family: Calibri;
}

#plus_minus{
    width:60%;   
}

/* hrootls koan section */
.scaletable{
   width: 100%;
   text-align: left;
   
}

.small_table{
    width: 5%;
    background-color: #48669c;
    color: white;
    font-weight: bold;
    border-style: solid;
    border-color: #FFFFCC;
    text-align: center;
    font-size: 4vw;
}

/* services page */
.srCont{
        // position: fixed;
         top: 50px;
         left:300px;
}
.srCont1{
        // position: fixed;
         //top: 150%;
         //left:30%;
         padding-left:50px;
         width: 98%;        
}

.abCont3{
        // position: fixed;
         //top: 150%;
         //left:30%;
         padding-left:120px;
         width: 98%;       
}

.imgS{

   height: 165px;
   width:  130px;
   padding-bottom:50px;
   
}

/* Aboutus page */
.img-fluidAB {
  max-width: 50%;
  height: auto;
}

/* online test */
.otCont{
  width: 300px;
}

  .koanimgOT{
  	height:40px;
  	width:100px;
    	}
  .hrimgOT{
    	height:40px;
    	width:40px;
    	}  
  .altiimgOT{
    	height:40px;
    	width:50px;
    	}  

   .baroimgOT{
	height:35px;
	width:50px;
	}

   .alertimgOT{
	height:40px;
	width:50px;
	}
	
.lanstyle{
  font-family: Calibri;
  border:none;
  background: #e5e5e5;  
  }	

.lanstyleS{
  font-family: Calibri;
  border:none;
  background: #ededed;  
  }	

}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--color-white);
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}
#preloader:before, #preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--color-primary);
  border-radius: 50%;
  -webkit-animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
#preloader:after {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

@-webkit-keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }
  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }
  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}