.masthead {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 50rem; /*@xs 30*/
 /* padding: 10rem 0;*/
    height: 100vh;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 75%, rgb(0, 0, 0) 100%), url("../assets/img/intro-bg7.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

.imphead {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 50rem; /*@xs 30*/
 /* padding: 10rem 0;*/
    height: 100vh;
    
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 75%, rgba(0, 0, 0, 1) 100%), url("../assets/img/intro-bg7.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
    background-color: black!important;
    margin-top: 6.5rem;
    
}






.masthead h1 {
  font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.8rem;
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

/*responsive logo*/
@media (min-height:675px){ 
    
    .logo {
        margin-top: 100%;
        height: calc(1vh*23);
        width:auto;
    }
    
    .LoadFx .down {
        margin-top: 40%;
         margin-bottom: 10%;   
    }
    
    
    
}


@media (max-height:676px){ 
    
    .logo {
        margin-top: 100%;
        height: 160px;
        width:auto;
    }
        .LoadFx .down {

        margin-top: 20%;
        margin-bottom: 10%;    
    }
    

}


.masthead {
    min-height: 10rem;
    padding: 0;
  }

.masthead h1 {
    font-size: 6.5rem;
    line-height: 6.5rem;
    letter-spacing: 0.8rem;
  }
  
.masthead h2 {
    max-width: 30rem;
    font-size:  0.7rem;
    /*0.75rem*/
  }
/*
    .masthead h3 {
    font-size:calc(3.5*1vw);
  }
*/
       
.masthead h3 {
    font-size:1.4rem;
    /*1.1*/
}

    
.masthead i {
       font-size: 1.3rem; 
    /*1*/
    }
@media (min-width:412px){
    .masthead h2 {
    max-width: 30rem;
    font-size:  calc(1vh*1.6);
    /*0.75rem*/
  }
    
}

@media (max-width:768px){
    .masthead h3 {
    max-width: 30rem;
    font-size: 1.2rem;
    /*0.75rem*/
  }
    .masthead i {
       font-size: 1.1rem; 
    /*1*/
    }
    
    
}

/*responsive footer*/
@media (max-width:576px) {
    
    .masthead h3 {
    font-size:calc(3.5*1vw);
  }
    
    .masthead i {
      font-size:calc(3.2*1vw);
    }
    
}

/*Device Viewport*/
/**/
@media only screen and (max-height:533) and (min-width: 320px) and (orientation: portrait){
    .logo {
        margin-top: 8rem;
        height: 150px;
        width: auto;
    }

   /* .masthead h2 {

        font-size: 2.1rem;
    }

    .masthead h3 {

        font-size: 0.7rem;

    }
*/

}

@media only screen and (max-width:360px) and (max-height:640px) and (orientation: portrait) {
    .logo {
        margin-top: 27vh;
        height: 10rem;
    }



}

@media only screen and (max-width:280px) and (min-height:640px) and (orientation: portrait){
    .logo {
        margin-top: 8rem;
        height: 150px;
        width: auto;
    }
}

@media only screen and (max-width:412px) and (min-height:914px) and (orientation: portrait){
    .logo {
        margin-top: 18rem;
        height: 190px;
        width: auto;
    }
}

@media only screen and (max-width:412px) and (min-height:767px) and (orientation: portrait){
    
    .logo {
        margin-top: 14rem;
        height: 190px;
        width: auto;
    }
} 


/*portrait lock
@media screen and (min-width: 360px) and (max-width: 640px) and (orientation: landscape) {
  body {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
   height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

*/
/*teaser text
.masthead h2 {
 
  font-size: 1rem;
}
*/


/*bottom text*/


/*
.masthead-disclaimer {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 15rem;
  padding: 10rem 0;
 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000000 100%), url("../assets/img/intro-bg7.jpg"); 
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}
.a-masthead-disclaimer {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 5rem;
  padding: 7rem 0;
 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000000 100%), url("../assets/img/intro-bg7.jpg"); 
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}
.masthead-disclaimer h1 {
 
  font-size: 2.5rem;
  line-height: 2.5rem;
  letter-spacing: 0.5rem;
    color: white;
 
}
.masthead-disclaimer h2 {
  max-width: 20rem;
  
}

@media (min-width: 576px) {
    .masthead {
    min-height: 30rem;
    padding: 0;
  }
  .masthead h1 {
    font-size: 4rem;
    line-height: 4rem;
      max-width: 30rem;
  }
    .masthead h2 {
    max-width: 20rem;
    font-size: 2rem;
  }
    
}

@media (max-width: 576px) {
  .masthead {
    min-height: 10rem;
    padding: 0;
  }
  .masthead h1 {
    font-size: 6.5rem;
    line-height: 6.5rem;
    letter-spacing: 0.8rem;
  }
  .masthead h2 {
    max-width: 30rem;
    font-size: 0.75rem;
  }
    .masthead h3 {

  }
    .masthead i {
       font-size: 0.74rem; 
    }
}


@media (max-width: 576px){
      .teaser h1{
        font-size: 2.3rem;
    }
    .teaser h2{
        font-size: 1.7rem;
        
       
    }
    
}

*/