/* GENERAL */
html { width: 100%; height: 100%; padding: 0px; margin: 0px; }


/* TYPE */
h1, h2, h3, h4, p, ul, li, a { font-family: 'Montserrat', sans-serif;}

h1 { text-transform: uppercase; font-size: 30px; color: #0078A0; }
h2 { text-transform: uppercase; font-weight: bold; font-size: 26px; color: #0078A0; }
h3 { font-weight: bold; font-size: 18px; color:#0078A0; }
h4 { font-weight: bold; font-size: 18px; color: white;}

p { font-size: 16px; color: #444B54;}

ul, li {font-size: 14px;}
a { text-decoration: none; color: #0078A0;}

/* HEADER */
#header {height: auto;}

.header-img { background: url('../assets/images/home-header.jpg'); background-size: cover; height: 80vh; width: 100%; margin: 0; position: relative; overflow: hidden;}
.header-img h1 {font-size: 60px; color:#444B54; margin-top: 100px; text-align: center; line-height: 70px;}

/* NAV */
nav {width: 100%; height: 175px; background-color: #0078A0; color: white;}
nav ul {list-style-type: none; text-align: center; height: 100%; margin: 0; border-top: solid 15px #03506B; }
nav ul li {display: inline-block; font-size: 20px; width: 19%; height: 100%;}
nav ul li a {display: block; height: 100%; text-decoration: none; text-transform: uppercase; color: white; font-weight: 700; padding-top: 13%;}
nav ul li a, .nav-desk ul li a:after, .nav-desk ul li a:before {transition: all 0.5s;}
nav ul li a:hover {color: #3D9991;}
nav.fill ul li a { transition: all 2s; position: relative;}
nav.fill ul li a:after { text-align: left; content: '.'; margin: 0; opacity: 0;}
nav.fill ul li a:after { position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 0%; content: '.'; color: transparent; background: #3D9991; height: 1px;}
nav.fill ul li a:hover { color: #fff; z-index: 1;}
nav.fill ul li a:hover:after { z-index: -10; animation: fill 1s forwards; -webkit-animation: fill 1s forwards; -moz-animation: fill 1s forwards; opacity: 1; }
/* Keyframes */
@-webkit-keyframes fill { 0% { width: 0%; height: 10px;}  50% { width: 100%; height: 10px;}  100% { width: 100%; height: 100%; background: #03506B;}}
nav a.active  {background-color: #03506B; color: white; height: 100%; }

/* CONTENT */
#content {width: 70%; margin: 0 auto; margin-top: 50px;}
.columns {margin-bottom: 30px;}
.end {margin-bottom:0;}

/* UPCOMING EVENTS */
#upcoming {height: 430px}
.upcoming { background: url('../assets/images/footer.jpg'); background-size: cover; width: 100%; margin: 0; position: relative; overflow: hidden;}
.upcoming h1 { font-size: 60px; color: #444B54; text-align: center; padding-top: 50px; padding-bottom: 10px; border-bottom: solid 5px #444B54; width: 80%; margin: 0 auto; }


.events {padding-top: 30px; margin: 0 auto; text-align: center;}
.events h3 {color: white; font-weight: bold; font-size: 25px;}
.events p { color: white; font-size: 20px;}

/* FOOTER */
#footer {width: 100%; height: auto; background: #03506B;}
#footer h4 {margin-bottom: 25px;}
#footer a {color: white;}
.footer-logo {padding-top: 5%;}
.footer-logo img {width: 90%;}
.footer-line { border-right: 3px solid #FFFFFF;}


.footer-contact {padding: 100px; }
.footer-contact svg {display: inline-block; vertical-align: middle; margin-right: 15px;}
.footer-contact p {color: white; display: inline-block; vertical-align: middle; margin-bottom:0;}



/* ABOUT */
.about-img {background: url('../assets/images/about-header.jpg'); background-size: cover; height: 60vh; width: 100%; margin: 0; position: relative; overflow: hidden;}
.about-img h1 {width: 60%; font-size: 50px; background-color: rgba(3, 80, 107, 0.9); color: white; padding: 30px; margin-top: 50px;}


/* EVENTS IMAGE */
.events-img { background: url('../assets/images/events-header.jpg'); background-size: cover; width: 100%; margin: 0; position: relative; overflow: hidden;}
.events-img h1 {width: 60%; font-size: 50px; background-color: rgba(3, 80, 107, 0.9); color: white; padding: 30px; margin-top: 50px;}


/* FEEDBACK IMAGE */
.feedback-img { background: url('../assets/images/map-header.jpg'); background-size: cover; width: 100%; margin: 0; position: relative; overflow: hidden;}
.feedback-img h1 {width: 60%; font-size: 50px; background-color: rgba(3, 80, 107, 0.9); color: white; padding: 30px; margin-top: 50px;}


/* FAQ SLIDER */
.faq-slider { color: #231f20; cursor: pointer; padding: 8px; margin-bottom:0; width: 95%; text-align: left; border: none;  outline: none; transition: 0.5s all; font-size: 12px;}
.faq-slider h4 { font-size: 16px; color:#333;}
.faq-slider p { font-size: 14px;}
.faq-slider .fa { font-size: 16px; margin-right: 10px; color:#3D9991;}
.faq-slider li { font-size: 14px;}
.faq-slider h4:hover {color: rgba(35,31,32,0.7);}
.faq-slider a {color:#333;}

div.panel { background-color: #FFF!important; padding-top: 5px; border: none; display: none; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s;}
div.panel ul{ padding-left: 10px;}
div.panel.show { display: block; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s;}
div.panel a:hover { text-decoration: underline;}


/* MAP */
#map-area { height: 560px; position: relative; }
#map { height: 100%; }
#buttons { bottom: 0; padding: 10px 1%; position: absolute; width: 96%; }
#buttons a { background-color: #0078a0; border-radius: 4px; color: #fff; display: inline-block; font-size: .9em; padding: 4px; text-align: center; transition: background-color .2s; width: 48%; }
#buttons a:hover { background-color: #035a77; }
.gm-style-iw-d div { padding: 5px; width: 300px; }

/* GOOGLE FORM */
.comment-forma {display: none;}
.wrapper { width: 80%; margin: 0 auto; }
h1 { font-size: 48px; font-family: 'Montserrat', sans-serif; margin-bottom: 10px;}
form p { font-family: 'Montserrat', sans-serif; font-size: 18px; margin: 20px 0 20px;  line-height: 1.6;}
form p,
label[for="email"],
label[for="first"],
label[for="last"],
label[for="phone"],
label[for="address1"],
label[for="address2"],
label[for="city"],
label[for="state"],
label[for="zip"],
label[for="feedback"]{ font-family: 'Montserrat', sans-serif; padding-bottom: 6px; border-bottom: 2.5px solid #8CCFB9; width: 100%;}

label[for="Latitude"],
label[for="Longitude"],
#Latitude, #Longitude {display: none;}
/* SECTION */
section { background: #ffffff; padding: 20px 0; width: 100%; margin: 0 auto; display: block; }
.col6 {width: 50%; padding-right: 10px; display: inline-block;}
.col3 {width: 33%; padding-right: 10px; display: inline-block;}

/* FORM STYLES */
select { display: block; margin-bottom: 50px;}
input[type="checkbox"], input[type="radio"] { margin-right: 5px;}
#phone {padding-right:10px;}
input[type='tel'],
input[type="text"],
textarea { width: 100%; padding: 6px; font-size: 16px; border: 1px solid #8CCFB9; background: #f4f5f7; margin-bottom: 12px; }
.input-wrap.select-box { border: 1px solid #8CCFB9; background: #f4f5f7; width: 75%; height: 34px; padding: 0px 10px; margin-left: 15px;margin-bottom: 20px}  
.input-wrap.select-box:hover { background: #8CCFB9;}
.input-wrap.select-box:hover select { color: #fff;}
textarea { min-height: 80px;}
select { border: none; background: transparent; font-family: 'Montserrat', sans-serif; letter-spacing: 0.5px; height: 34px; width: 75%;}
select:hover { cursor: pointer; }
input[type="submit"] { display: block; margin: 20px auto; font-family: 'Montserrat', sans-serif; letter-spacing: 0.5px; background: #03506B; border: 0px solid; color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 1.25px; }
input[type="submit"]:hover { background: #fff; color: #333; cursor: pointer; border: 2.5px solid #8CCFB9; }


.study ul li a { color: #333!important;}
.study a:hover { color: #035a77!important;}

button {background-color: #035a77;}
button a {color: #fff;}
button:hover {background-color: #444B54;}
button a:hover {color: #fff;}

@media screen and (max-width: 1340px) {
    .footer-contact {padding: 50px;}
}

@media screen and (max-width: 1230px) {
   #header .about-img h1 {font-size: 41px; margin-bottom: 50px;}
   #header .feedback-img h1 {font-size: 41px; margin-bottom: 50px;}

}


@media screen and (max-width: 1140px) {
    #header h1 {font-size: 50px; margin-top: 80px}
    #content { width: 96%;}
    .footer-contact {padding: 30px;}
    #footer h4 {margin-bottom: 10px;}
    .footer-contact p {font-size: 14px;}

}

@media screen and (max-width: 1050px) {
    #header h1 {font-size: 40px; margin-top: 50px}

}


@media screen and (max-width: 900px) {
    nav ul li {display: block; float: left;}

}


@media screen and (max-width: 950px) {
    h2 {font-size: 20px;}
}

@media screen and (max-width: 850px) {
    #header h1 {font-size: 30px; margin-top: 40px; line-height: normal;}
    p {font-size: 14px;}

    
    .footer-contact {padding: 20px 5px; }
    #footer h4 {font-size: 14px; margin-bottom: 5px;}
    #footer p {font-size: 12px;}
    .footer-contact svg { display: block; margin-right: 0;}
    .footer-line {border-right: 0 solid transparent;}
    .footer-line p {display: none;}


}

@media screen and (max-width: 640px) {
    nav {height: 215px;}
    nav ul li {width: 100%; height: auto;}
    nav ul li a {padding-top: 5px;}
    /* nav {height: 150px;} */
    #header h1 {font-size: 25px; margin-top: 30px; line-height: normal;}
    .header-img {height: 40vh;}

    .goals img {width: 50%;}
    .goals h2 {font-size:20px;}

    #upcoming, .upcoming { height: auto; padding-bottom: 12px; }
    .upcoming h1 { font-size: 38px; line-height: 38px; padding-bottom: 18px; }

}

@media screen and (max-width: 500px) {
    #header img { width: 140px; padding-top: 24px;  }
    nav {height: 150px;}
    nav ul li {width: 100%; height: auto;}
    nav ul li a {padding: 0;}

}