html, body
{
    height: 100%;
}
.wrapper{
    background-color: #191917;
}
/*START HEADER*/
header {
    background-color: #000000;
    color: white;
}
.logo img {
  height: 90px;
  margin-top: 3px;
  max-width: 150px;
}

header h2 {
  color: #d9d9d9;
  font-size: 55px;
  font-weight: 500;
  letter-spacing: 2px;
  margin-top: 15px;
}
/*END HEADER*/
/*START HERO SECTION*/
.hero-area{
    background-image: url(images/hero.jpg);
    height: 390px;
    background-size: cover;
    background-position: center center;
}
@media only screen and (max-width: 767px) {
.hero-area{
   height: 250px;
}
}

@media only screen and (max-width: 475px) {
.hero-area{
   height: 250px!important;
}
}

@media only screen and (max-width: 800px) {
.hero-area{
   height: 300px;
}
}


/*END HERO SECTION*/

/*START FOOTER SECTION*/
footer {
    background-color: #191917;
    color: #afafaf;
    padding: 8px 0;
}
footer a {
    color: #afafaf;
    display: inline-block;
    font-size: 30px;
    padding-bottom: 20px;
}
footer h4 {
    font-size: 20px;
    font-weight: 500;
}
/*END FOOTER SECTION*/