/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {  font-family: 'Overpass'; display: flex; flex-wrap: wrap; align-items: center; min-height: 100vh; align-content: center;}
section { width: 100%; overflow:hidden}
.logo_band { padding-bottom: 50px; padding-top: 15px;}
.hero_image { padding-top: 10vh; padding-bottom: 15vh; position: relative; min-height: 500px; padding-left: 15px; padding-right: 15px;  border-bottom: 20px solid #d7b785; }
.hero_image .contact-details { position: absolute; bottom: -30px; left: 0; right: 0; margin: 0 auto; max-width: 370px; background-color: #fcfcfc; padding: 30px; z-index: 4}
.hero_image p { font-size: 20px; line-height: 35px; margin-top: 30px; color: #fea621; font-weight: bold; }
.hero_image .tel { font-size: 36px; line-height: 60px; color: #d4ae74; transition: all 250ms ease; font-weight: 500; border-bottom: 2px solid transparent;}
.hero_image .tel:hover { text-decoration: none; border-bottom: 2px solid #be8630; color: #be8630; }
.hero_image .email { font-size: 20px; line-height: 35px; text-decoration: none; color: #d4ae74; transition: all 250ms ease; border-bottom: 1px solid transparent; }
.hero_image .email:hover { color: #be8630; border-bottom-color: #be8630}
.main_band:before { z-index: 1; position: absolute; content: ''; display: block; left: 0px; right: 0px; bottom: 0px; top: 0px;  background: rgb(0,0,0);
   background: -moz-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3768907221091562) 100%);
   background: -webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3768907221091562) 100%);
   background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3768907221091562) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); }

.main_band {margin-bottom: 10vh; position: relative; background-image: url(../img/beach.jpg); background-size: cover; background-position: center center; }
.main_band > .container_ { position: relative; z-index: 2;}
.s2 { font-size: 40px; line-height: 50px; font-weight: bold; color: #fff;}
.s1 { font-size: 60px; line-height: 60px; font-weight: bold; color: #fff; display: block; padding-bottom: 5vh}


@media (max-width: 767px) {
    .s1 { font-size: 40px; line-height: 50px; }
    .s2 { font-size: 30px; line-height: 40px;}
    .hero_image p { line-height: 24px; padding-top: 15px;  }
    .hero_image { min-height: 560px; }
    .logo_band { padding-bottom: 30px; }
 }