/*  HEADER  =============================================================================*/
.banner {width: 100%; max-width: 100%; height: 230px; margin: 0% auto 0% auto; padding: 0px 0% 0px 0%; border-bottom: 1px solid hsl(41, 8%, 61%); background-image: url('../img/heroDesk.png'); text-align: center; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; opacity: 1.0;}

.banner img {max-width: 100%; height: auto;}




.logo {width: 100%; position: absolute; top: 25px; margin: 0px auto 0px auto; color: #fff; font-family: 'Lobster', sans-serif;  font-optical-sizing: auto; font-weight: 400; font-style: normal; text-shadow: 10px 10px 10px #000; font-size: 9.0vw;}



/*  BEGIN RESPONSIVE  =============================================================================*/

/* 1380px */
@media only screen and (max-width: 1380px) {
.banner {height: 210px;}
.logo {top: 15px; font-size: 10.0vw;}
}

/* 1260px */
@media only screen and (max-width: 1260px) {
.banner {height: 200px;}
.logo {top: 15px; font-size: 10.0vw;}
}


/* 1080px */
@media only screen and (max-width: 1080px) {
.banner {height: 180px;}
.logo {top: 15px; font-size: 10.0vw;}
}

/* 960px */
@media only screen and (max-width: 960px) {
.banner {height: 166px;}
.logo {top: 20px; font-size: 10.25vw;}
}

/*  840px  =============================================================================*/
@media only screen and (max-width: 840px) {
.banner {height: 160px; background-size: cover; background-position: center center;}
.logo {top: 25px; font-size: 10.25vw;}

}


/* 760px */
@media only screen and (max-width: 760px) {
.banner {height: 150px; background-size: cover;}
.logo {top: 25px; font-size: 10.35vw;}
}

/* 680px */
@media only screen and (max-width: 680px) {
.banner {height: 140px; background-size: cover;}
.logo {top: 25px; font-size: 10.75vw;}
}

/*  600px  =============================================================================*/
@media only screen and (max-width: 600px) {
.banner {height: 125px; background-size: cover;}
.logo {top: 28px; font-size: 10.75vw;}
}


/*  480px  =============================================================================*/
@media only screen and (max-width: 480px) {
.banner {height: 118px; background-size: cover;}
.logo {font-size: 12.0vw; top: 30px;}
}