/* COLORS */

.overlayblack {
position: relative;
}

.overlayblack :hover .overlayblackhover {
opacity: 0.85;
}

.overlayblackhover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: 550ms ease;
background-color: #000000;
}



.overlaywhite {
position: relative;
}

.overlaywhite :hover .overlaywhitehover {
opacity: 0.85;
}

.overlaywhitehover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: 550ms ease;
background-color: #ffffff;
}




.overlaygray {
position: relative;
height:250px;
}

.overlaygray :hover .overlaygrayhover {
opacity: 0.65;
}

.overlaygrayhover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0.0;
transition: 550ms ease;
background-color: #ffffff;
}







.overimagewhite {
position: relative;
}

.overimagewhite :hover .overimagewhitehover {
opacity: 0.30;
}

.overimagewhitehover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: 550ms ease;
background-color: #ffffff;
}





/* CONTAINERS */

.overlaytext {
position: absolute;
top: 40%;  
width:100%;
left:auto;
right:auto;
text-align: center;
}


.overlaytext2 {
position: absolute;
top: 22%;  
width:100%;
left:auto;
right:auto;
text-align: center;
}





    
/* FONTS */


.overlayfont1 {
font-family: 'Roboto Condensed', sans-serif;
font-weight : normal;
font-size: 40px;
}

.overlayfont2 {
font-family: 'Roboto Condensed', sans-serif;
font-weight : normal;
font-size: 28px;
}

.overlayfont3 {
font-family: 'Roboto Condensed', sans-serif;
font-weight : normal;
font-size: 22px;
}

.overlayfont4 {
font-family: 'Roboto Condensed', sans-serif;
font-weight : normal;
font-size: 18px;
}

.overlayfont5 {
font-family: 'Roboto Condensed', sans-serif;
font-weight : normal;
font-size: 16px;
}

.overlayfont6 {
font-family: 'Roboto Condensed', sans-serif;
font-weight : normal;
font-size: 15px;
}








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

.overlaygray {
height:250px;
}

.overlayfont1 {
font-size: 40px;
}

.overlayfont2 {
font-size: 28px;
}

.overlayfont3 {
font-size: 20px;
}

.overlayfont4 {
font-size: 18px;
}

.overlayfont5 {
font-size: 16px;
}

.overlayfont6 {
font-size: 15px;
}

.overlaytext2 {
top: 28%;  
}

}





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

.overlaygray {
height:250px;
}

.overlayfont1 {
font-size: 36px;
}

.overlayfont2 {
font-size: 24px;
}

.overlayfont3 {
font-size: 18px;
}

.overlayfont4 {
font-size: 17px;
}

.overlayfont5 {
font-size: 15px;
}

.overlayfont6 {
font-size: 14px;
}

.overlaytext2 {
top: 28%;  
}

}






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

.overlaygray {
height:250px;
}

.overlayfont1 {
font-size: 35px;
}

.overlayfont2 {
font-size: 23px;
}

.overlayfont3 {
font-size: 17px;
}

.overlayfont4 {
font-size: 17px;
}

.overlayfont5 {
font-size: 15px;
}

.overlayfont6 {
font-size: 14px;
}

.overlaytext2 {
top: 28%;  
}


}



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

.overlaygray {
height:250px;
}

.overlayfont1 {
font-size: 32px;
}

.overlayfont2 {
font-size: 22px;
}

.overlayfont3 {
font-size: 16px;
}

.overlayfont4 {
font-size: 15px;
}

.overlayfont5 {
font-size: 14px;
}

.overlayfont6 {
font-size: 13px;
}

.overlaytext2 {
top: 28%;  
}


}



/* Tablet */



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

.overlaygray {
height:225px;
}

.overlayfont1 {
font-size: 30px;
}

.overlayfont2 {
font-size: 19px;
}

.overlayfont3 {
font-size: 16px;
}

.overlayfont4 {
font-size: 15px;
}

.overlayfont5 {
font-size: 14px;
}

.overlayfont6 {
font-size: 13px;
}

.overlaytext2 {
top: 28%;  
}

}





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

.overlaygray {
height:200px;
}

.overlayfont1 {
font-size: 30px;
}

.overlayfont2 {
font-size: 19px;
}

.overlayfont3 {
font-size: 16px;
}

.overlayfont4 {
font-size: 15px;
}

.overlayfont5 {
font-size: 14px;
}

.overlayfont6 {
font-size: 13px;
}

.overlaytext2 {
top: 30%;  
}

}




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

.overlaygray {
height:190px;
}

.overlayfont1 {
font-size: 22px;
}

.overlayfont2 {
font-size: 21px;
}

.overlayfont3 {
font-size: 17px;
}

.overlayfont4 {
font-size: 14px;
}

.overlayfont5 {
font-size: 13px;
}

.overlayfont6 {
font-size: 12px;
}

.overlaytext2 {
top: 28%;  
}

}



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

.overlaygray {
height:210px;
}

.overlayfont1 {
font-size: 20px;
}

.overlayfont2 {
font-size: 20px;
}

.overlayfont3 {
font-size: 16px;
}

.overlayfont4 {
font-size: 14px;
}

.overlayfont5 {
font-size: 13px;
}

.overlayfont6 {
font-size: 12px;
}

.overlaytext2 {
top: 24%;  
}

}





/* Phone */



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

.overlaygray {
height:200px;
}

.overlayfont1 {
font-size: 26px;
}

.overlayfont2 {
font-size: 27px;
}

.overlayfont3 {
font-size: 19px;
}

.overlayfont4 {
font-size: 17px;
}

.overlayfont5 {
font-size: 14px;
}

.overlayfont6 {
font-size: 14px;
}

.overlaytext2 {
top: 24%;  
}

}




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

.overlaygray {
height:180px;
}

.overlayfont1 {
font-size: 24px;
}

.overlayfont2 {
font-size: 24px;
}

.overlayfont3 {
font-size: 18px;
}

.overlayfont4 {
font-size: 17px;
}

.overlayfont5 {
font-size: 14px;
}

.overlayfont6 {
font-size: 14px;
}

.overlaytext2 {
top: 22%;  
}

}



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

.overlaygray {
height:160px;
}

.overlayfont1 {
font-size: 21px;
}

.overlayfont2 {
font-size: 21px;
}

.overlayfont3 {
font-size: 16px;
}

.overlayfont4 {
font-size: 15px;
}

.overlayfont5 {
font-size: 14px;
}

.overlayfont6 {
font-size: 14px;
}

.overlaytext2 {
top: 23%;  
}

}





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

.overlaygray {
height:150px;
}

.overlayfont1 {
font-size: 20px;
}

.overlayfont2 {
font-size: 20px;
}

.overlayfont3 {
font-size: 16px;
}

.overlayfont4 {
font-size: 14px;
}

.overlayfont5 {
font-size: 13px;
}

.overlayfont6 {
font-size: 13px;
}

.overlaytext2 {
top: 22%;  
}

}





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

.overlaygray {
height:150px;
}

.overlayfont1 {
font-size: 20px;
}

.overlayfont2 {
font-size: 17px;
}

.overlayfont3 {
font-size: 15px;
}

.overlayfont4 {
font-size: 14px;
}

.overlayfont5 {
font-size: 13px;
}

.overlayfont6 {
font-size: 13px;
}

.overlaytext2 {
top: 22%;  
}


}