html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'century gothic',Helvetica,Arial,Lucida,sans-serif;
    font-size: 18px;
}
* {
    box-sizing: border-box;
}
.body-content {
    max-width: 1200px;
    margin: 0 auto;
}
a { text-decoration: none; }
.col {
    width: 100%;
    clear: both;
    text-align: center;

}
.col-2 {
    width: 46%;
    display: inline-block;
    vertical-align: top;
}
.col-3 {
    display: inline-block;
    width: 28%;
    vertical-align: top; 
    margin: 20px;
}
.col-4 { width: 16%; display: inline-block; }


.topnav {
  overflow: hidden;
}

.topnav a {
    display: inline-block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}

header {
    z-index: 9999;
    width: 100%;
    clear: both;
    background-color: #fff;
    border-bottom: 1px solid; 
   text-align: center;
}

#header-hyperlink, #header-hyperlink1 { color: #000; font-size: 16px; }
header a { font-weight: 700; font-size: 10px; padding: 0 20px 0 20px; }
.information-line { background-color: #02447b; width: 100%; clear: both; color: #fff; height: 40px; line-height: 40px; margin: 0; text-transform: uppercase;  }


#About, #whyChoose, #Services, #Gallery, #Meet {
        clear: both;
    width: 100%;
    padding: 50px 0 50px 0;
}

#Gallery {
    background-color: #02447b;
    color: #fff;
}

#header-hyperlinks {
    color: #000;
    font-size: 16px;
}

.topline-left, .topline-right { color: #fff; font-size: 12px; text-decoration: none; }
.topline-right { float: right; padding-right: 100px; }
.topline-left { float: left; padding-left: 100px; }

.sun-nav-menu { padding: 20px 0 20px 0; }

#About { width: 40%; margin: 0 auto; text-align: center; }
.about-header { clear: both; text-align: center; font-weight: 700; font-size: 36px; line-height: 45px; }
.about-information { font-size: 16px; line-height: 26px; font-weight: 400; }
.about-small-header { padding: 20px;  line-height: 24px; }

#Banner { background-color: #02447b; clear: both; width: 100%; height: 230px; line-height: 230px; color: #fff; text-align: center; font-size: 20px; }
#button-book { border: 3px solid black; background-color: #fff; padding: 10px 20px 10px 20px; letter-spacing: 1px; font-size: 16px; font-weight: 700; margin: 40px;  }
#button-book:hover { background-color: #000; color: #fff; }

#whyChoose { color: #000; background-color: #eaeaea; border-top: 1px solid #333; border-bottom: 1px solid #333;   }
.whychoose-header { font-weight: 700; font-size: 40px; line-height: 22px; text-transform: uppercase; padding: 50px; }
.whychoose-subheader { font-weight: 600; text-transform: uppercase; font-size: 16px; line-height: 12px; letter-spacing: 2px; }
.whychoose-information { color: #626262; font-size: 14px; line-height: 23px; font-weight: 400; }
.whychoose-line { border: 1px solid #ffa103; width: 30px; text-align: left; margin: 0; margin: 20px 0 20px 0; }

.contact-header { font-weight: 600; font-size: 14px; line-height: 26px; text-transform: uppercase; height: 75px; }
.contact-information { font-weight: 400; font-size: 14px; line-height: 26px; color: #626262;}
.contact-window { clear: both; width: 100%; text-align: center; font-size: 60px; font-weight: 700; }
.background-contact { background-size: cover; background-image: url("images/contact-back.jpg"); height: 250px; padding-top: 100px; font-size: 25px; text-align: center; text-transform: uppercase; font-weight: 600; color: #fff;  }

.service-window-description { color: #626262; font-size: 13px; line-height: 23px; font-weight: 400; width: 95%; text-align: left; padding-left: 10px; padding-bottom: 50px; }

#contact-hyperlink-orange { color: #ffa103; font-size: 13px; line-height: 23px; font-weight: 400; }
.contact-name-subheader { font-size: 13px; line-height: 17px; color: #626262; font-weight: 600; }


#meet-images { } 
.dj-information { font-size: 20px; }

.pad-left {
    padding-left: 20px;
}

.bold {
    font-weight: 900;
}
#Contact { clear: both; padding: 30px 0; }
.contact-window {
    width: 80%;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    font-size: 18px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height: 400px;

}

#dj-image { vertical-align: middle; }
iframe {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.fa {
    font-size: 24px;
}
p {
    display: inline-block;
}

#service-images {
    width: 100%;
    
}
.service-subheader {
    font-size: 23px;
    text-align: center;
}
.service-header {
    font-size: 63px;
    text-align: center;
}
.service-window-header {
    font-weight: 900;
    font-size: 24px;
    padding: 13px;
}
#service-button {
    background-color: #001e37;
    width: 240px;
    color: #fff;
    padding: 7px;
    border-radius: 5px;
    font-size: 16px;
    margin-top: 20px;
}


.contentWindow {
    display: inline-block;
    vertical-align: top;
}
#contentImages {
    max-width: 100vw;
}
.fa {
    font-size: 30px !important;
    margin: 0 10px 0 10px;
}
.left {
    text-align: left;
}
.right {
    text-align: right;
}
.center {
    text-align: center;
}
.column {
    display: inline-block;
    vertical-align: top;
}
.pad-50 { padding: 50px 0 50px 0; }
.dj-information { font-size: 13px; line-height: 23px; color: #626262; font-weight: 400; }

.padBar {
    padding: 20px 0 20px 0;
}

.header-text {
    text-align: center;
    font-size: 48px;
    font-weight: 900;
}
.booking-subheader {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    margin: 30px;
}
input[type=text] {
    border: 1px solid #000;
    width: 100%;
}
input[type=submit] {

    background-color: #000;
    color: #fff;
    border: 1px solid black;
    font-weight: 700;
    padding: 13px;
    border-radius: 5px;
    width: 150px;
}

textarea {
    width: 100%;
    height: 200px;
    resize: none;
    border: 1px solid #000;

}

#redstar { color: red; }
input[type=text], input[type=submit], textarea {
    font-family: 'Open Sans', sans-serif;
  
}
/* End Booking */

.float-left { float: left; width: 48%; }
.float-right { float: right; width: 48%; }

.div-window {
    height: 630px;
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin: 15px;
    border: 1px solid #000;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.div-window img {
    width: 100%;
}


.topLine {
    width: 100%;
    clear: both;
    font-size: 60px;
    font-weight: 900;
}

.topLine img { vertical-align: middle; width: 200px; }

#sun-nav { display: inline-block; font-size: 20px; line-height: 130px; padding: 0 20px 0 20px; }
#sun-nav:hover { color: #ffa103; }
.nav-side { display: inline-block; line-height: 150px; }
    .nav-side a:hover { color: #ffa103; }

/* On screens that are 992px wide or less, the background color is blue */
@media screen and (max-width: 992px) {
    body { background-color: white; color: black; }
    #About { width: 50%; }
    .header-fix { height: 200px; }
    .div-window { margin: 9px !important; width: 29%; }
    .service-window-header { font-size: 16px; } 
    .gallery-images img { width: 30%; display: inline-block; }
    .topLine { text-align: center; }
    .footer-baseline { line-height: 91px !important; text-align: center;   }
    #sun-nav { display: inline-block; font-size: 20px; line-height: 130px; padding: 0 20px 0 20px; }
    footer { height: 1050px !important; }
    .left-side, .right-side { float: none !important; text-align: center; display: block; }
}

/* On screens that are 600px wide or less, the background color is olive */
@media screen and (max-width: 600px) {
    body {
        background-color: #fff;
        color: #000;
    }
    header {
        background-color: #fff;
        z-index: 9;
        width: 100%;
        clear: both;
    }
    
     #meetImages { width: 80%; margin: 0 auto;  } 
    #About { clear: both; width: 95%; }
    #Banner { clear: both; font-size: 14px; height: 100px; line-height: 100px; font-weight: 700; }
    #sun-nav { display: inline-block; font-size: 14px; line-height: 30px; padding: 0 5px 0 5px; font-weight: 700; }
    #header-logo { margin: 0 auto;}
    .nav-side { display: block; text-align: center; line-height: 50px; }
    .nav-side a { padding: 0 10px 0 10px; }
    .nav-side a:hover { color: #ffa103; }
    .topLine { text-align: center; }
    .topLine img { width: 80%; }
    .header-fix { height: 300px; }
    .col-2, .col-3, .col-4 { display: block; width: 90%; margin: 0 auto; }
    .col-2 { float: none !important; text-align: center; }
    .fa { float: none !important; padding: 15px; text-align: center; }
    .footer-hyperlink { margin: 0; }
    .gallery-images img { width: 80%; margin: 0 auto; padding-bottom: 20px; display: block; }
    .footer-baseline { line-height: 20px !important; text-align: center; padding-top: 30px;  }
    .whychoose-information { padding-bottom: 30px; }
    .whychoose-header { font-size: 17px; }
    .information-line { height: 80px; }
    .footer-navMenu a  {
        display: block;
    }
    p {
        display: none;
    }
    .footer-sides {
        display: block;
        text-align: center;
        width: 100%;
    }
    .footer-middle {
        display: block;
        text-align: center;
        width: 100%;
    }
    .borderline {
    }
    input[type=submit], input[type=text], textarea {
        width: 100%;
    }
    textarea {
    }
    .body-content {
        width: 95%;
        margin: 0 auto;
    }
    .div-window {
        display: block;
        width: 95%;
        margin: 0 auto;
    }
.col-2 {padding: 40px; }
}

#fullscreen-fader {
    height: 100vh;
    width: 100vw;
}
#fader-fix {
    height: 100vh;
}
#fullscreen-images {
    width: 100vw;
    height: 100vh;
}


.largeFont { font-size: 60px; color: red; }


@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive .dropdown {
        float: none;
    }
    .topnav.responsive .dropdown-content {
        position: relative;
    }
    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
      .topnav a:not(:first-child) {display: none;}
  
  .topnav a.icon {
    float: right;
    display: block;
  }
   #header-hyperlink1 {
 display: none;
}
.non-profit-image-window { width: 90% !important; }
}