@font-face {
    font-family: 'Estienne';
    src: url('EstienneNormal.woff2') format('woff2'),
        url('EstienneNormal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {
	border-top: 3px solid #BA870C;
	font-family: 'Open Sans', sans-serif;	
}

h1, h2, h3, h4, h5 {
	font-family: 'Estienne', serif;	
	text-transform: uppercase;
} 

h1 {
	color: #0C5A74;
	font-size: 3.2em;
}

h2 { 
	color: #33839E;
	font-size: 2.7em;
}

h3 { 
	color: #BA870C;
	font-size: 2.2em;
}
 
 img {
	max-width: 100%;
	height: auto;
}

.site-header img {
	width: 100%;
}

#top-content {
    background-color: #33849e;
	margin: 0;
	padding: 10px 0 10px 0;		
	border-bottom: 3px solid #BA870C;
}

.logo {
	height: 150px;
	width: auto;
}

#top-content a {
	text-decoration: none;
	color: #FFF;
}

.top-right {
	font-family: 'Estienne', sans-serif;
	font-size: 2.2em;
	text-align: right;
	padding-top: 10px;
	color: #FFF;
}
	
.navbar-nav {
	 margin-left: auto;
}

nav .navbar-nav > li > a{
  color: white !important;
  text-transform: uppercase;
  }

/* Dropdown Fade-in */

.dropdown-menu.show  {
  animation-name: slidenavAnimation;
  animation-duration:.5s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;

  -webkit-animation-name: slidenavAnimation;
  -webkit-animation-duration:.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: slidenavAnimation;
  -moz-animation-duration:.5s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: forwards;
}
@keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.content-image {
	margin: 0 0 10px 10px;
	max-width: 500px;
	border: 3px solid #BA870C;
	height: auto;
	float: right;
}

.sigplus-preview {
	border: 3px solid #BA870C!important;
}

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* hero video */

.hero-block {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: gray;
    overflow: hidden;
	border-top: 3px solid #BA870C;
	border-bottom: 3px solid #BA870C;
}

@media (min-width: 768px) { 
    .hero-block { height: 80vh }
}

.hero-text-container {
	padding: 20px;
	z-index: 2;
	background: rgba(0,0,0,.7);
	max-width: 800px;
	margin: 0 auto;
}

.hero-bg-media {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; 
    z-index: 0;
}

.hero-bg-media * {
    object-fit: cover; width: 100%; height: 100%;
}


.hero-block h1, .hero-block h3, .hero-block p {
    color: #FFF;
}

.hero-block p {
	
}

.header {
	border-top: 3px solid #BA870C;
	border-bottom: 3px solid #BA870C;
	height: 500px;
	background-position: center top;
	background-size: cover;
}

.marine-header {
	background-image: url(/images/headers/boat-ramp-header.jpg);
	
}

.about-header {
	background-image: url(/images/headers/marine-park-drone-view.jpg);
	
}

.contact-header {
	background-image: url(/images/headers/turtle-log.jpg);
	
}

.siteBody {
	margin-top: 30px;
}

.footer {
	margin-top: 30px!important;
	padding: 30px 0!important;
	background-color: #333;
	color: #FFF;
	border-top: 3px solid #BA870C;
	border-bottom: 3px solid #BA870C;
}

.copyright {
	text-align: center;
	font-size: .9em;
}

@media (max-width: 991.98px) { 
	.top-left, .top-right {
		text-align: center;
	}
	.logo {
		height: 100px;		
	}
	.content-image {
		max-width: 300px;
	}
}

@media (max-width: 767.98px) { 	
	.content-image {
		width: 100%;
		max-width: 100%;
		clear: both;
		float: none;
		margin: 0;
		margin-bottom: 10px;
	}
}

	
}