/* 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;
}




.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: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}




    
/* FONTS */


.overlayfont1 {
font-family: 'Sulphur Point', sans-serif;
font-weight : normal;
font-size: 32px;
line-height:30px;
}

.overlayfont2 {
font-family : arial, helvetica, sans-serif;
font-weight : normal;
font-size: 32px;
}

.overlayfont3 {
font-family: 'Raleway', sans-serif;
font-weight : normal;
font-size: 21px;
}

.overlayfont4 {
font-family : arial, helvetica, sans-serif;
font-weight : normal;
font-size: 18px;
}

.overlayfont5 {
font-family : arial, helvetica, sans-serif;
font-weight : normal;
font-size: 16px;
}

.overlayfont6 {
font-family : arial, helvetica, sans-serif;
font-weight : normal;
font-size: 15px;
}








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

.overlayfont1 {
font-size: 28px;
line-height:26px;
}

.overlayfont2 {
font-size: 32px;
}

.overlayfont3 {
font-size:19px;
}

.overlayfont4 {
font-size: 18px;
}

.overlayfont5 {
font-size: 16px;
}

.overlayfont6 {
font-size: 15px;
}

}





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

.overlayfont1 {
font-size: 25px;
line-height:23px;
}

.overlayfont2 {
font-size: 28px;
}

.overlayfont3 {
font-size:18px;
}

.overlayfont4 {
font-size: 17px;
}

.overlayfont5 {
font-size: 15px;
}

.overlayfont6 {
font-size: 14px;
}

}






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

.overlayfont1 {
font-size: 24px;
line-height:22px;
}

.overlayfont2 {
font-size: 27px;
}

.overlayfont3 {
font-size:17px;
}

.overlayfont4 {
font-size: 17px;
}

.overlayfont5 {
font-size: 15px;
}

.overlayfont6 {
font-size: 14px;
}


}



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

.overlayfont1 {
font-size: 22px;
line-height:20px;
}

.overlayfont2 {
font-size: 24px;
}

.overlayfont3 {
font-size:16px;
}

.overlayfont4 {
font-size: 15px;
}

.overlayfont5 {
font-size: 14px;
}

.overlayfont6 {
font-size: 13px;
}


}



/* Tablet */



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

.overlayfont1 {
font-size: 20px;
line-height:18px;
}

.overlayfont2 {
font-size: 22px;
}

.overlayfont3 {
font-size: 15px;
}

.overlayfont4 {
font-size: 15px;
}

.overlayfont5 {
font-size: 14px;
}

.overlayfont6 {
font-size: 13px;
}

}





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

.overlayfont1 {
font-size: 19px;
line-height:17px;
}

.overlayfont2 {
font-size: 20px;
}

.overlayfont3 {
font-size: 14px;
}

.overlayfont4 {
font-size: 14px;
}

.overlayfont5 {
font-size: 13px;
}

.overlayfont6 {
font-size: 12px;
}

}




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

.overlayfont1 {
font-size: 24px;
line-height:22px;
}


.overlayfont2 {
font-size: 19px;
}

.overlayfont3 {
font-size:16px;
}

.overlayfont4 {
font-size: 14px;
}

.overlayfont5 {
font-size: 13px;
}

.overlayfont6 {
font-size: 12px;
}

}



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

.overlayfont1 {
font-size: 22px;
line-height:20px;
}

.overlayfont2 {
font-size: 18px;
}

.overlayfont3 {
font-size:14px;
}

.overlayfont4 {
font-size: 14px;
}

.overlayfont5 {
font-size: 13px;
}

.overlayfont6 {
font-size: 12px;
}

}





/* Phone */



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

.overlayfont1 {
font-size:21px;
line-height:19px;
}

.overlayfont2 {
font-size: 21px;
}

.overlayfont3 {
font-size: 16px;
}

.overlayfont4 {
font-size: 17px;
}

.overlayfont5 {
font-size: 14px;
}

.overlayfont6 {
font-size: 14px;
}

}




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

.overlayfont1 {
font-size:19px;
line-height:17px;
}


.overlayfont2 {
font-size: 20px;
}

.overlayfont3 {
font-size: 15px;
}

.overlayfont4 {
font-size: 17px;
}

.overlayfont5 {
font-size: 14px;
}

.overlayfont6 {
font-size: 14px;
}

}



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

.overlayfont1 {
font-size:18px;
line-height:16px;
}

.overlayfont2 {
font-size: 18px;
}

.overlayfont3 {
font-size: 15px;
}

.overlayfont4 {
font-size: 15px;
}

.overlayfont5 {
font-size: 14px;
}

.overlayfont6 {
font-size: 14px;
}

}





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

.overlayfont1 {
font-size:17px;
line-height:15px;
}

.overlayfont2 {
font-size: 17px;
}

.overlayfont3 {
font-size: 14px;
}

.overlayfont4 {
font-size: 14px;
}

.overlayfont5 {
font-size: 13px;
}

.overlayfont6 {
font-size: 13px;
}

}





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

.overlayfont1 {
font-size:16px;
line-height:14px;
}

.overlayfont2 {
font-size: 17px;
}

.overlayfont3 {
font-size: 13px;
}

.overlayfont4 {
font-size: 14px;
}

.overlayfont5 {
font-size: 13px;
}

.overlayfont6 {
font-size: 13px;
}

}