/*============EXAMPLES: START CAN DELETE =============*/

 header{
   
  margin: 0;
  padding: 0;
  outline: none;

 }

footer{
   
  margin: 0;
  padding: 0;
   

 }

/*============EXAMPLES: END CAN DELETE =============*/


body { margin: 0;

    /* background-color: #011321;  
     */

     background-color: white;

  }
canvas { 

  display: block;
  margin: 0;
  padding: 0; 
  outline: none;
 
  
}

#dlh-container{

  margin: 0;
  padding: 0;
  outline: none;

  overflow: hidden;
  position: relative;

  visibility: visible;
 
  height:80% ;
  width: 100%;

  top: 0px;
}

.dlh-header{

  background-color: rgba(225,225,225,.9);
  overflow: hidden;

  position: absolute;
  right: 0%;

  width: 100%;
  height: 192px;

  visibility: hidden;



}

/*============PRELOADER =============*/
#dlh-preloader{

  background: rgb(1,19,33);
  background: linear-gradient(0deg, rgba(1,19,33,1) 0%, rgba(111,121,129,1) 100%);
  position: absolute ;
  visibility: visible ;
 
  width: 100%;
  height: 100%;

  
}
#sat-logo{

  position: absolute;

  width: 128px;
  height: 128px;

  left: 50%;
  top: 50%;

  padding-bottom: 124px;

  
  -webkit-transform: translate( -50% , -50%);
  

}
/*============ TOUCH TO START =============*/

#dlh-starter{

  /* background: rgba(255,255,255,0.9); */
  background: rgba(01,13,21,0.9); 


  position: absolute ;
  visibility: hidden ;
 
  width: 100%;
  height: 100%;
  text-align: center ;

}

#dlh-starter-light{

  position: absolute;
  
  
  height: 256px;

  left: 50%;
  top: 50%;

  
  -webkit-transform: translate( -50% , -50%);
  

}

.dlh-txt-preloader{

  position: absolute;
  left: 50%;
  top: 50%;
  /* padding-top: 64px; */

  

  -webkit-transform: translate( -50% , 0);

  
}

/*========= FOOTER BUTTONS =====================*/

.dlh-footer-buttons{

  background-color: transparent;
  overflow: hidden;

  position: absolute;
  top : 4.54%;
  width: 100%;
  height: 26px;

}

.dlh-fullscreen {

  background-color: transparent;
  visibility: visible;

  position: relative;
  float: left;

  padding-left: 1.78%;

 
  height: 100%;
  
  
}

.dlh-audio {
  background-color: transparent;
  visibility: visible;
  
  height: 100%;

  float: left;
  padding-left: 3.57%;

  /* animation-name: audio;
  animation-duration: 2s;
  animation-direction: reverse; 
  animation-iteration-count: infinite; */
  
 
  
}

/*========= ANIMATIONS =====================*/

@keyframes audio {
  0%   {transform:scaleY(0); }
  20%  {transform:scaleY(2);}
  40%  {transform:scaleY(.6);}
  70%  {transform:scaleY(.3);}
  100% {transform:scaleY(.7);}
}

.dlh-touch {
  pointer-events: none;
 
  visibility: visible;
  
  height: 150%;

  float: left;
  padding-left: 3.57%;
  
 
  
}

/* ================================FEATURES */

.dlh-feature-container{

  background-color: white;/*===========COLOR CHECK ============*/
  border-radius: 5px;
  padding: 2% 6% 2% 6%;
  overflow: hidden;

  visibility: hidden ;
  position: absolute;

  height: 30%;
  width: 55%;

  top: 32px;
  left: 32px;
  
  

  
}

.dlh-feature-icon{

  width: 25px;
  padding-right: 10px;
}

.dlh-close-icon {
  width: 13px;
  height: 13px;
  right:25px;
  top: 25px;
  position: absolute;
}

 /* ==================================================TABLE TECH SPECS */
 table {
  border-collapse:collapse;

}

 .dlh-div-table {

  visibility: hidden;
  position: absolute;
  background-color: white;
  margin:auto;
  text-align: justify;
  overflow: hidden;

  border-radius: 5px;
  padding: 30px; 
 
  width: 40%;
  height: 70%;

  top: 16px;
  left: 16px;
 
}

tr td {
  border:0px solid white;
  padding: 7px;
  color:  #011321;
  font-family:"Neue-Haas"; 
  font-size: 11px;
  font-style: bold;
  font-weight: 400;
  line-height: 12px;
}

.dlh-tr-grey {
  background-color: rgb(240, 240, 240);
}

.dlh-table-icon{

  width: 25px;
  height: 25px;
}

/*===================================== CTRL FONTS ============================*/

@font-face {
  font-family: Neue-Haas ;
  font-weight: regular;
  src: url("./font/Neue Haas Unica W1G.ttf") format("opentype");
}

@font-face {
  font-family: Digital ;
  font-weight: bold;
  src: url("./font/Neue Haas Unica W1G.ttf") format("opentype");
}

.font-normal {
  color: #011321;
  font-family: "Neue-Haas";
  font-size: 12px;
  font-style: bold;
  font-weight: 400;
  line-height: 14px;


 
}

.font-title {
  color: #011321;
  font-family: "Neue-Haas";
  font-size: 30px;
  font-style: normal;
  font-weight: 900;
  line-height: 18px;


}

.font-percentage{

  color: #ffffff;
  font-family: "Digital";
  font-size: 25px;
  font-style: bold;
  font-weight: 900;
  line-height: 18px;
}

.dlh-font-table {
  color: #011321;
  font-family: "Neue-Haas"; 
  font-size: 30px;
  font-style: bold;
  font-weight: 400;
  line-height: 14px;
}




/* =========================== RESPONSIVNESS LANDSCAPE====================  */

@media all and (orientation:landscape) and (max-height: 400px) {
/*red*/

  .dlh-feature-container{

    background-color: white;/*===========COLOR CHECK ============*/
    overflow: scroll;
    
  
    height: 70%;
    width: 75%;
  
    left: 10px;
    top: 2% ;

  }

  .dlh-div-table {
    overflow: scroll;

    background-color: whites;

    padding: 7px; 
   
    width: 80%;
    height: 90%;

    top:4px;
    left: 4px;

  }

  tr td { 

    padding: 4px;
    font-size: 10px;
    line-height: 11px;
  }

  .dlh-font-table {


    font-size: 20px;
    font-style: bold;
    font-weight: 400;
    line-height: 21px;
  }

  .dlh-table-icon{

    width: 25px;
    height: 25px;
  }

}


@media all and (orientation:landscape) and (min-height: 401px) and (max-height: 800px) {
/* orange */
  .dlh-feature-container{

    background-color: white;/*===========COLOR CHECK ============*/
    
  
    height: 40%;
    width: 60%;
  
    left: 10px;
    top: 2% ;

  }

  .dlh-div-table {
    overflow: scroll;

    background-color: white;

    padding: 10px; 
   
    width: 80%;
    height: 70%;

    top:4px;
    left: 4px;

  }

  tr td { 

    padding: 8px;
    font-size: 10px;
    line-height: 11px;
  }

  .dlh-font-table {


    font-size: 30px;
    font-style: bold;
    font-weight: 400;
    line-height: 30px;
  }

  .dlh-table-icon{

    width: 25px;
    height: 25px;
  }


}

/* =========================== RESPONSIVNESS PORTRAIT====================  */

@media all and (orientation:portrait)  and (max-width: 400px) {
/*green*/
  .dlh-feature-container{

    background-color: white;/*===========COLOR CHECK ============*/
    
  
    height: 70%;
    width: 80%;
  
    left:50%;
 
    -webkit-transform: translate( -50% , 0%);  
    
  }

  .font-title {
    
    
    font-size: 20px;
    
  
  
  }
  .dlh-feature-icon{

    width: 20px;
    height: 20px;

    padding-right: 10px;
  }

  .dlh-div-table {
    overflow: scroll;

    background-color: white;

    padding: 7px; 
   
    width: 90%;
    height: 80%;

    top:8px;
    left: 8px;

  }

  tr td { 

    padding: 8px;
    font-size: 10px;
    line-height: 11px;
  }

  .dlh-font-table {


    font-size: 20px;
    font-style: bold;
    font-weight: 400;
    line-height: 16px;
  }

  .dlh-table-icon{

    width: 20px;
    height: 20px;
  }


}

/* iPad */
@media all and (orientation:portrait) and (min-width: 401px) and (max-width: 800px) {
  /*greenyellow*/

  .dlh-feature-container{

    background-color: white;/*===========COLOR CHECK ============*/
    
  
    height: 50%;
    width: 80%;
  
    left:50%;
 
    -webkit-transform: translate( -50% , 0);
  
  
    
  }

  .dlh-div-table {
    overflow: scroll;

    background-color: white;

    padding: 10px; 
   
    width: 90%;
    height: 70%;

    top:16px;
    left: 16px;

  }

  tr td { 

    padding: 4px;
    font-size: 10px;
    line-height: 11px;
  }

  .dlh-font-table {


    font-size: 30px;
    font-style: bold;
    font-weight: 400;
    line-height: 30px;
  }

  .dlh-table-icon{

    width: 25px;
    height: 25px;
  }





}