/*
Theme Name: WHOI Twilight Zone (local on host)
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.0
Description: WHOI Twilight Zone theme (child theme of Beaver Builder)
Author: Ethan Andrews/David Gaylord
Author URI: https://www.whoi.edu
template: bb-theme
*/
.password-protected #fl-main-content {
  padding-top: 150px;
}

/* BASE TYPOGRAPHY */

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700|Roboto+Slab&display=swap');

body {
	background-color: #f2f2f2;
	color: #222222;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	color: #222222;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	line-height: 1.4;
	text-transform: none;
    margin:0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: #438da2;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
	text-decoration: none;
}

h1 {
	font-size: 60px;
	line-height: 1.4;
	letter-spacing: 0px;
    margin:0 0 .3em 0;
}

h2 {
    font-size: 48px;
    margin: .5em 0;
	line-height: 1.4;
	letter-spacing: 0px;
}

h3 {
	font-size: 24px;
	line-height: 1.4;
	letter-spacing: 0px;
    margin:0 0 .25em 0;
}

h4 {
	font-size: 18px;
	line-height: 1.4;
	letter-spacing: 0px;
}

h5 {
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0px;
    font-weight: bold;
    text-transform: uppercase;
}

h6 {
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0px;
}

a {
	color: #438da2;
}

a:hover, a:focus {
	color: #54c7df;
}

/* Typograph (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    h1 {
    	font-size: 36px;
    }

    h2 {
    	font-size: 30px;
    	line-height: 1.4;
    	letter-spacing: 0px;
    }
}
/* HEADER STYLES */

#otz_header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.fl-page-header-wrap {
	padding-top: 15px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(11,18,35, 0.4);
}





.post-template-default .fl-page-header-wrap  {
	background-image: url("images/bg-banner.jpg");
}	

.post-template-default #fl-main-content {
	margin-top: 70px;
}
.post-template-default #otz_header {
	position: relative;
}

.category .fl-page-header-wrap  {
	background-image: url("images/bg-banner.jpg");
}
.category  #fl-main-content {
	margin-top: 70px;
}
.category #otz_header {
	position: relative;
}

.nav-up {
	position: fixed !important;
	top: 0 !important;
	width: 100%;
}

.nav-up .fl-page-header-wrap {
    background-color: #08101d;
	background-image: none;
}

/* Navigation */

.fl-page-nav-collapse {
    padding: 15px 0 0 0;
}

.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li > a {
    color: white;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
	/*margin-top: 20px;*/
}

.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li > a * {
    color: white;
}

.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li > a:hover,
.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li > a:focus,
.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li > a:hover i,
.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li > a:focus i {
    color: #438da2;
}

.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li.current-menu-ancestor>a,
.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li.current-menu-parent>a,
.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li.current-menu-item>a {
    color: #438da2;
}

.fl-page-nav-right .fl-page-nav-search a.fa-search {
    padding: 6px;
    border-radius: 50%;
    border: 1px solid #666666;
    background-color: #666666;
    height: 30px;
    width: 30px;
    font-size: 16px;
    margin-left: 5px;
}

.fl-page-nav-right .fl-page-nav-wrap a.fas {
    color: white;
}

.fl-page-bar {
	position: relative;
	z-index: 150;
	background-color: #02829d;
	padding: 5px 0px 5px 0px;
}

#topbar-menu {
	position: relative;
	margin-top: 10px;
	right: 0px;
	color: #3f8599;
}
.email-nav a {
	color: #3f8599 !important;
	text-decoration: none;
}
.email-nav img{
	margin-right: 5px;
}


#top-social .fl-icon {
	display: inline-block;
	text-align: right;
	margin-top: 0;
}
#top-social .fl-icon-group {
	width: 154px;
	margin: 10px auto;
	text-align: right !important;
}

/* Home page slideshow banner */
.home-banner-slider .bx-viewport {
    height: 100vh !important;
}

.home-banner-slider .fl-slide {
    height: 100vh;
}

#home-banner-navrow {
    width: 100%;
    position: absolute;
    bottom: 45px;
    background-color: rgba(11,18,35, 0.4);
    padding: 20px 0;
}

#home-banner-navrow div {
    text-align: center;
}

#home-banner-navrow span {
    padding: 5px 8px;
}

#home-banner-navrow a {
    color: white;
    font-size: 20px;
    font-weight: bold;
}

#home-banner-navrow a:hover {
    color: #54c7df;
}

#home-banner-navrow-mobile {
    display: none;
}

/* Home page slideshow banner iPad pro landscape/Small computer screens  */
@media (max-width: 1366.98px) {
    #home-banner-navrow a {
        font-size: 18px;
    }
}
/* Home page slideshow banner landscape tablet/Small computer screens */
@media (max-width: 1024.98px) {

    .fl-page-nav-right .fl-page-nav-search a.fa-search {
        margin-left: 0;
    }

    .fl-module-content-slider.home-banner-slider .fl-slide .fl-slide-text h1 {
        font-size: 30px;
    }

    .fl-module-content-slider.home-banner-slider .fl-slide-content-wrap {
        width: auto;
    }

    #home-banner-navrow span {
        padding: 5px 4px;
    }

    #home-banner-navrow a {
        font-size: 14px;
    }

    .navrow-arrow img {
        width: 15px;
    }
}

/* Home page slideshow banner Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

    #topbar-menu {
        display: none;
    }

    .fl-page-nav-wrap {
        background: none;
        border-bottom: none;
        border-top: none;
    }

    .fl-page-nav-collapse {
        padding-top: 0;
    }

    .home-banner-slider .fl-slide-mobile-photo {
        display: none;
    }

    .home-banner-slider .fl-content-slider .fl-slide-bg-photo {
        position: absolute;
    }

    .home-banner-slider .fl-slide-foreground {
        position: absolute;
        bottom: 169px;
        width: 100%;
    }

    .home-banner-slider .fl-slide-content {
        background-color: rgba(11,18,35, 0.4) !important;
    }

    #home-banner-navrow {
        bottom: 45px;
    }
}

/* Home page slideshow banner Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

    #top-social, #home-banner-navrow {
        display: none;
    }

    .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile .fl-page-nav .navbar-toggle {
        top: 50px;
    }

    .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile .fl-page-nav .navbar-toggle * {
        color: white;
    }

    .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile.fl-page-nav-right
    .fl-page-header-row .fl-page-header-logo {
        padding-bottom: 15px;
	padding-left: 35px;
        padding-top: 15px;

    }

    .fl-logo-img {
        width: 280px;
    }

    .fl-page-nav-collapse {
        background:#031c33;
        background-color: rgba(11,18,35, .9);
    }

    .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile .fl-page-nav-collapse ul.navbar-nav > li > a,
    .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile .fl-page-nav ul.sub-menu li a {
        color: white;
    }
    .fl-module-content-slider.home-banner-slider .fl-slide .fl-slide-text h1 {
        font-size: 18px !important;
    }

    .home-banner-slider .fl-slide-foreground {
        bottom: 140px;
    }

    #home-banner-navrow-mobile {
        display: block;
        position: absolute;
        bottom: 50px;
        width: 100%;
    }

    #home-banner-navrow-mobile .carousel-inner {
        text-align: center;
    }

    #home-banner-navrow-mobile .carousel-item {
        height: 70px;
    }

    #home-banner-navrow-mobile .carousel-caption {
        position: static;
        padding-top: 5px;
        font-size: 18px;
    }
    #home-banner-navrow-mobile img {
        max-height: 32px;
    }


}

/*footer styles*/
footer.fl-page-footer-wrap {
	 background: #252525;
 }
.fl-page-footer {
	background: #252525;
	color: #737373;
	font-size: 13px;
}
.fl-page-footer-widget {
	background-color: #252525;

}
.fl-page-footer-widgets {
	background-color: #252525;

}
.footer-widget-copy {
	color: #737373;
	font-size: 13px;
}
.footer-widget-copy a {
	color: #cccccc;
}

.footer-widget-links h4 {
	color: #ffffff;
	font-size: 16px;
}

.footer-widget-links ul  {
	list-style: none;
	margin-left: 0;
	padding-left: 0;

}

.footer-widget-links {
	color: #737373;
	font-size: 16px;

}
.footer-widget-links a {
	color: #cccccc;
}

.footer-widget-join {
	background-color: #02829d;
	background-image: url("images/fish_background.png");
	color: #ffffff;
	text-align: center;
	font-size: 16px;
}
.footer-widget-join h1 {
	color: #ffffff;
}
.footer-widget-join h3 {
	color: #ffffff;
}
.footer-widget-join h3 {
	color: #ffffff;
}
#join-us {
	padding: 0px 0px 10px 0px;
	display: inline-block;
}
.join-us-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 15%;	 
}
.join-us-iframe-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 
}
@media (max-width: 1024.98px) {
	.join-us-iframe-container {
	  position: relative;
	  width: 100%;
	  padding-bottom: 25%;
 
}
}
@media (max-width: 991.98px) {
.join-us-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
 
}
}
@media (max-width: 767.98px) {
  .join-us-iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
 
  }
}
#join-us-form input[type=text] {

	justify-content: center;
	border: 0px;
	border-radius: 0px;
	margin-right: 10px;
	font-size: 14px;
	height: 40px;
	padding: 8px 16px 8px 8px;
}
#join-us-btn-submit {
	background-color:#000000;
	border: 0;
	border-radius: 0;
	font-size: 18px;
	height: 40px;
	padding: 8px 16px 0px 16px;
}
#footer-social img {
	margin-left: 15px;
}

#footer-social .fl-icon {
	font-size: 24px;
	padding-right: 15px;
	margin-top: 0;
}
#footer-social .fl-icon-group {
	width: 230px;
	margin: 10px auto;
	text-align: center;
	padding: 15px 0 0px 0;
}

@media (max-width: 767.98px) {
	.form-inline .form-control {
		display: inline-block;
		width: auto;
		vertical-align: middle;
	}
	.form-inline .form-group {
		display: inline-block;
		margin-bottom: 0;
		vertical-align: middle;
	}
	.footer-widget-links {
		border-bottom-style: dashed;
		margin: 8px 8px 8px 8px;


	}

}