@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700');






html, body {
    height: 100%;
}


.intro {
/*     background: #11111a url("../img/intro-concept.jpg") center bottom no-repeat; */

    background: linear-gradient(rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20)), url("https://dktov1dckrirx.cloudfront.net/A7Riii/compressed/DSC00130.jpg") center bottom no-repeat;
   



    background-size: cover;

    height:80%;


    position: relative;




}



@media (min-width: 200px) and (max-width: 450px) {

.intro {

    background: linear-gradient(rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20)), url("https://dktov1dckrirx.cloudfront.net/A7Riii/compressed/DSC00130.jpg") center bottom no-repeat;
   



    background-size: cover;
    height: 100%;
    position: relative;




}




}


.intro-copy {

    position: relative;
    top: 60%;
    z-index: 1;

}
 

@media (min-width: 200px) and (max-width: 450px) {


.intro-copy {

    position: relative;
    top: 45%;
    z-index: 1;

}
 

}

  
  
  

  
  

  

.intro-copy h1 {

    color: #f4f4f4;
    font-size:72px;

font-family:'Playfair Display';

letter-spacing: 1.0px;





    -webkit-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);



    display: block;
    margin: auto;




font-weight: 400;

font-style: bold;
font-weight: 700;




padding-bottom: 10%;




}



@media (min-width: 2100px) and (max-width: 4000px) {

  

.intro-copy h1 {

    color: #f4f4f4;
    font-size:72px;


}


}



@media (min-width: 1400px) and (max-width: 2100px) {



}


@media (min-width: 850px) and (max-width: 1400px) {


}


@media (min-width: 450px) and (max-width: 850px) {


}

@media (min-width: 200px) and (max-width: 450px) {

  

.intro-copy h1 {

    color: #f4f4f4;
    font-size:54px;


}



}


/*@media only screen and (min-device-width: 481px) {


    .intro-copy h1 {

        text-align: left;
  
    }

    
    


    
}

*/

.intro-copy p {

      color: white;
      opacity: 0.8;

         margin: 0;
         font-weight:100;
         font-size:32px;

text-align: center;

padding-bottom: -10%;
margin-top: -17%;


font-family:'Playfair Display';



}







/*HERO RESPONSIVE TEXT STARTS HERE*/

/*
@media (min-width: 2100px) and (max-width: 2600px) {


    .intro-copy h1 {



padding-left:5%;
padding-bottom: 10%;
 

font-size:54px;

}



}



@media (min-width: 1600px) and (max-width: 2100px) {


  .intro-copy h1 {




 padding-left:5%;
padding-bottom: 10%;

font-size:54px;


}



}





@media (min-width: 1400px) and (max-width: 1600px) {




.intro-copy h1 {




 padding-left:5%;
padding-bottom: 10%;

}



}




@media (min-width: 1200px) and (max-width: 1399px) {



  
.intro-copy h1 {




padding-left:5%;
padding-bottom: 10%;

}



}



@media (min-width: 992px) and (max-width: 1199px) {



.intro-copy h1 {


padding-left:5%;
padding-bottom: 10%;

}



}


@media (min-width: 768px) and (max-width: 991px) {




.intro-copy h1 {


padding-left:5%;
padding-bottom: 10%;

font-size: 54px;

}


}

@media (max-width: 767px) {




.intro-copy h1 {

padding-left:5%;
padding-bottom: 10%;




}

}


@media (min-width: 751px) and (max-width: 900px) {


.intro-copy h1 {

 
 padding-left:5%;
padding-bottom: 10%;

text-align: left;

font-size: 54px;

    -webkit-transform: translateY(-100%);

    -ms-transform: translateY(-100%);

    transform: translateY(-100%);




}


}



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


.intro-copy h1 {

 
 padding-left:5%;
padding-bottom: 10%;

text-align: left;

font-size: 36px;


    -webkit-transform: translateY(-100%);

    -ms-transform: translateY(-100%);

    transform: translateY(-100%);



}


}





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


.intro-copy h1 {

 
 padding-left:5%;
padding-bottom: 10%;

text-align: left;

font-size: 36px;


    -webkit-transform: translateY(-100%);

    -ms-transform: translateY(-100%);

    transform: translateY(-100%);


}


}


@media (min-width: 200px) and (max-width: 450px) {




.intro-copy h1 {


padding-left:5%;
padding-bottom: 10%;


font-size: 36px;

    
    -webkit-transform: translateY(-150%);

    -ms-transform: translateY(-150%);

    transform: translateY(-150%);



text-align: left;




}


}

*/




/*@media (min-width: 2100px) and (max-width: 2600px) {



.intro-copy p {


padding-left:5%;
padding-bottom: 10%;


font-size: 54px;

margin-top: -19%;


}


}




@media (min-width: 1601px) and (max-width: 2100px) {



.intro-copy p {


padding-left:5%;
padding-bottom: 10%;


font-size: 42px;

margin-top: -19%;
}


}


@media (min-width: 1201px) and (max-width: 1600px) {



.intro-copy p {


padding-left:5%;
padding-bottom: 10%;


font-size: 42px;

margin-top: -21%;
}


}




 
@media (min-width: 901px) and (max-width: 1200px) {



.intro-copy p {


padding-left:5%;
padding-bottom: 10%;


font-size: 42px;
margin-top: -21%;

}


}






@media (min-width: 761px) and (max-width: 900px) {



.intro-copy p {


padding-left:5%;
padding-bottom: 10%;


font-size: 42px;

margin-top: -26%;

}


}










@media (min-width: 451px) and (max-width: 760px) {



.intro-copy p {


padding-left:5%;
padding-bottom: 10%;


font-size: 28px;

margin-top: -23%;


}


}




@media (min-width: 375px) and (max-width: 450px) {




.intro-copy p {


padding-left:5%;
padding-bottom: 10%;


font-size: 28px;

margin-top: -41%;



}


}




@media (min-width: 200px) and (max-width: 375px) {




.intro-copy p {


padding-left:5%;
padding-bottom: 10%;


font-size: 28px;

margin-top: -44%;



}


}
*/



























.intro-overlay {


    background-color: #11111a;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: background-color 0.4s ease-in-out;
    transition: background-color 0.4s ease-in-out;


}



[data-loaded="true"] .intro-overlay {
    background-color: rgba(17, 17, 26, 0.8);
}