:root {
    --brand-light-blue: #29a9e1;
    --brand-dark-blue: #005db9;
    --brand-gray: #242424;


}

#banner {
    padding: 0em 0 4.75em 0;
}
#banner a.button {
  font-size: 2vh;
}
video {
  display: block;
  width: auto;
  height: auto;
  min-width: 100%;
}
.hasvideo video {
    margin: auto;
    display: block;
    width: auto;
  min-width: 100%;
  height: auto;
}
.hasVideo .inner {
    position: absolute;
    top: -10vh;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;

    min-height: 75vh;
}
#banner.hasVideo {
        width: 100%;
  height: 75vh;
  overflow: hidden;
  top: 0;
  right: 0;
  z-index: -100;
}
#banner.hasVideo .inner {
    width: 100%;
    background: #00000060;
}

.home #banner.hasVideo .inner {
    padding-top: 8vh;
    min-height: 85vh;
    height: 100%;
}

#wrapper > header p {
    font-size: .9em;
    font-weight: bold;
}

#logo {
    max-height: 15vh;
    margin-top: 0;
}
#banner.hasVideo .inner p {
    max-width: 60vw;
    font-size: .9em;
    font-weight: bold;
   
}

.logo img {max-height: 150px;}

#banner h2 {
    letter-spacing: auto;
    font-size: 3vh;
    line-height: initial;
    text-align: center !important;
    
    margin-top: -5vh;
}

.spotlight p {
    font-size: 1.5rem;
}

#header h1 img {
    height: 50px;
    margin-top: 5px;
}

.wrapper {
    background-color: #005db9;
}
.wrapper:before {
    box-shadow: inset 0 -1px 0 0 #005db9, 0 1px 0 0 #005db9;
}

.wrapper:before, .wrapper.spotlight:after {
    background-image: url(images/dark-blue.svg);
    box-shadow: none;
}
#four:after {
    background-image: url(images/dark-blue.svg);
    box-shadow: none;
}
.wrapper.spotlight {
    background-color: #29a9e1;
}
.wrapper.spotlight:before {
    box-shadow: inset 0 -1px 0 0 #29a9e1, 0 1px 0 0 #29a9e1;
   
}
.wrapper.spotlight:before, .wrapper.spotlight:after {
    background-image: url(images/light-blue.svg);
}

.wrapper.spotlight.style2 {
				background-color: #005db9;
			}

.wrapper.spotlight.style2:before, .wrapper.spotlight.style2:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23005db9' /%3E%3C/svg%3E");
	    box-shadow: none;
}

.wrapper.spotlight.style2:before {
	box-shadow: inset 0 -1px 0 0 #005db9, 0 1px 0 0 #005db9;
	    box-shadow: none;
}

.wrapper.spotlight.style2:after {
	box-shadow: inset 0 -1px 0 0 #005db9, 0 1px 0 0 #005db9;
	    box-shadow: none;
}


.wrapper.spotlight.odd {
    background-color: #29a9e1 !important;
}

.wrapper.spotlight.even {
    background-color: #005db9 !important;
}

.wrapper.spotlight.even:after, .wrapper.spotlight.even:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23005db9' /%3E%3C/svg%3E") !important;
    box-shadow:inset 0 -1px 0 0 #005db9, 0 1px 0 0 #005db9!important;
}

.wrapper.spotlight.odd:before, .wrapper.spotlight.odd:after {
    background-image: url(images/light-blue.svg) !important;
}

section#map {
    /*background-image: url('../../images/maps/BSB Corridor Website Map 051622_Home All.jpg');
    
    min-height: 863px;
    width: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    */
    object-fit: fill;
    width: 100vw;
}
#map img {
    width: 100%;
}
#three {
    margin-bottom: 0;
}
#three:after {display:none;}

#footer .small {
    max-height: 45px;
}

ul.contact li {
    margin-top: 1.5em;
}

.single::after {
    background-image: url(images/dark-blue.svg);
    transform: scaleY(-1);
    box-shadow:none;
}

.single article {
    padding-bottom: 5vh; 
}
#wrapper .has-image .image {
    border-radius: 100%;
    margin: 0 30px 20px 0;
    width: 15em;
    overflow: hidden;
    width: 225px;
    aspect-ratio: 1;    
}

header.has-image .inner .image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
}

#wrapper
.has-image .inner {
    padding: 3em 0 1em 0;
    margin: 0 auto;
    /*width: 55em;*/
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
#wrapper
.has-image .content {
    max-width: 40em;
}

.is-style-light-blue-section{
    background-color: #29a9e1;
    margin: 6.5em 0;
    position: relative;
}

.is-style-light-blue-section:before, .is-style-light-blue-section:after {
    background-image: url(images/light-blue.svg);
}

.is-style-light-blue-section:before {
    left: 0;
    top: -6.5em;
}

.is-style-light-blue-section:after {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    bottom: -6.5em;
    left: 0;
}

.is-style-light-blue-section:before, .is-style-light-blue-section:after {
    background-repeat: no-repeat;
    background-size: 100% 101%;
    content: '';
    display: block;
    height: 6.5em;
    position: absolute;
    width: 100%;
}

.is-style-light-blue-section,
.inner .spotlight {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}
.is-style-light-blue-section > .wp-block-group__inner-container,
.inner .spotlight > .wp-block-group__inner-container {
    padding: 3em 0 1em 0;
    margin: 0 auto;
    width: 55em;
}

@media screen and (min-width: 1680px) {
    .features article .image{
        max-height:415px;
    }
}

@media screen and (max-width: 1280px){
    #wrapper > header.has-image {
        padding: 4em 0 6.25em 0;
    }
}
@media screen and (max-width: 736px){
    #header nav {
        justify-content: flex-start;
        flex-direction: row-reverse;
    }
    #header.alt h1,
    #header h1{
    visibility: visible;
    opacity: 1;
    max-width: 42%;
}
}
@media screen and (max-width: 765px) {
    img#logo {margin-top: 0px;}
    
    #banner h2 {font-size: 2.5vh;}
    
    #banner.hasVideo .inner {top: -25vh;}
    .sgpb-popup-dialog-main-div-theme-wrapper-5{
        top:50px !important;
    }
    .single .image.left{
        display: block;
        margin: 0 0 2em 0;
        width: 100%;
        max-width:100%;
    }
    .single .image.right img{
    width: 100%;
    }
        .single .image.right{
        display: block;
        margin: 0 0 2em 0;
        width: 100%;
        max-width:100%;
    }
    .single .image.left img{
    width: 100%;
    }
    #footer .inner .footer-half{
        width:100%;
    }
}



#footer .gfield_required {
    display:none;
}
#footer .gform_wrapper.gravity-theme .gfield_label {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform:uppercase;
}

.addresses {
    list-style-type: none;
    text-align:center;
    margin:0 auto;
}

h3{
    margin-bottom: 0.5em;
}

figure a {
    border-bottom: none;
}

/* DMS */

@media screen and (max-width: 1375px) {
	#banner.hasVideo {
		width: 100%;
		height: 65vh;
		overflow: hidden;
		max-height: 450px;
	}
	
	.home #banner.hasVideo {
		height: 75vh;
		max-height: none;
	}
	.home #banner.hasVideo .inner {
		top: -11vh;
		height: 75vh;
	}
	.home #wrapper {
		margin-top: -22vh;
	}
	
}

@media screen and (max-width: 880px) {
	.is-style-light-blue-section > .wp-block-group__inner-container, .inner .spotlight > .wp-block-group__inner-container {
	  padding: 3em 2.5em 1em 2.5em;
	  margin: 0 auto;
	  width: 100%;
	}
}

@media screen and (max-width: 830px) {
	#banner.hasVideo {
		width: 100%;
		height: 65vh;
		overflow: hidden;
		max-height: none;
	}	
	.home video {
		width: auto;
		height: 100%;
	}
}

@media screen and (max-width: 599px) {
	.home video {
		width: auto;
		height: 100%;
	}
	.home #banner.hasVideo {
		height: 80vh;
		max-height: none;
	}
	.home #banner.hasVideo .inner {
		top: -15vh;
		height: 80vh;
	}
	.home #wrapper {
		margin-top: -22vh;
	}
	#wrapper > header {
	  background-size: auto, 200%;
	}
	#wrapper .has-image .inner {
		flex-flow: column-reverse
	}
	#wrapper .has-image .content {
	  padding: 0 1.5em;
	}	
	#wrapper .has-image .image {
		max-width: 175px;
		max-height: 175px;
	}
	#header h1 img {
  		visibility: hidden;
	}	
}	

@media screen and (max-width: 736px) {
	.wrapper {
		margin: 0;
	}
	.home .wrapper {
  		margin: 2.5em 0;
	}
	.home .wrapper.spotlight, .wrapper.alt {
		margin: 0;
		padding: 3em 1em;
	}
	#wrapper > header {
	  background-size: auto, 200%;
	}
	#wrapper .has-image .inner {
		flex-flow: column-reverse
	}
	#wrapper .has-image .content {
	  padding: 0 1.5em;
	}	
	#wrapper .has-image .image {
		max-width: 175px;
		max-height: 175px;
	}	
}

@media screen and (max-width: 599px)    
	  and (min-device-width: 375px) 
	  and (max-device-width: 812px) 
	  and (-webkit-min-device-pixel-ratio: 3) {
		#banner.hasVideo .inner {
		  top: -15vh;
		}
		.home #banner.hasVideo .inner {
		  top: 0;
		  height: 52vh;
		}
		#banner.hasVideo {
			height: 45vh;
		}
		.home #banner.hasvideo {
			height: 65vh!important;
		}
		.home #wrapper {
			margin-top: -20vh;
		}
		.home .wrapper {
			margin: 2em 0;
		}
		#wrapper > header {
		  	background-size: auto, 225%;
		}		
		#wrapper .has-image .inner {
			flex-flow: column-reverse
		}
		#wrapper .has-image .content {
		  padding: 0 1.5em;
		}	
		#wrapper .has-image .image {
			max-width: 175px;
			max-height: 175px;
		}
}	


/* DMS Menu */

#header nav {
  position: relative;
  line-height: 0.9rem;
  font-size: 1rem;
  width: 100%;
  top: 0;
}
#header.alt h1 {
  width: fit-content;
  height: 50px;
}
#header {
  display: flex;
  align-items: center;
}
.top-menu {
  width: 100%;
  padding: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.top-menu ul {
  list-style: none;
  display: flex;
  margin-bottom: 0;
  text-align: center;
  align-items: center;
}

.top-menu ul li {
  position: relative;
  display: flex;
  border-bottom: 5px solid transparent;
}

.top-menu ul li:hover {
	border-bottom: 5px solid #005db9;
	cursor: pointer;
	transition: 0.2s;
	transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.top-menu ul li ul {
  display: none;
  flex-direction: column;
  background-color: #2c2f37;
  position: absolute;
  padding: 0;
  width: auto;
  top: 100%;
}

.top-menu ul li ul {
  display: none;
}

.top-menu ul li:hover > ul {
	display: flex;
	margin-top: 5px;
}

.top-menu ul li ul li {
  padding: 10px 6px;
  line-height: 1.5em;
  margin: 0;
}

.top-menu ul li ul li:hover {
  background-color: #005db9;
  border-bottom: none;
  cursor: pointer;
	transition: 0.2s;
	transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sub-menu li {
  width: 100%;
  justify-content: center;
  align-items: center;
  border-bottom: 5px solid transparent;
}

.top-menu ul li ul li, .top-menu ul li ul li:hover  {
  border-bottom: 5px solid transparent;
}

.mobile-menu {
	display: none;
}

.chevron {
    cursor: pointer;
    color: white;
    font-size: 20px;
    margin-left: 5px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.chevron.rotated {
    transform: rotate(90deg);
}

@media screen and (max-width:1200px) {
	.top-menu, #header nav {
  	padding: 0;
	}
	.top-menu ul li {
	  padding: 0 10px;
	  font-size: 0.7em;
	}
	.top-menu ul li a {
		line-height: 1rem;
	}	
}

@media screen and (max-width:570px) {
	.top-menu ul li {
	  padding: 0 5px;
	}
}

@media screen and (max-width:1050px) {
	.top-menu ul li {
	padding: 0 5px;
}

}
@media screen and (max-width: 767px) {
	#header.alt h1 {
        opacity: 0;
        display: none;
    }
    .top-menu {
	  display: none;
	}
	#mobile-menu {
	  height: fit-content;
	  background-color: #2b2e36;
	  padding: 35px 10%;
	  width: 100%;
	  border-bottom: 15px solid #005db9;		
	}

	#mobile-menu ul {
	  list-style: none;
	  font-size: 0.8rem;
	}
	#mobile-menu ul li ul {
	  display: none;
	}
	#mobile-menu ul li:hover #mobile-menu ul li ul {
	  display: block;
	  height: fit-content;
	}
	#mobile-menu ul li:hover .sub-menu {
	  display: block;
		transition: 0.3s;
	}
	#mobile-menu .submenu li:hover {
	  background-color: #005db9;
	}
}
	
/* Hamburger icon */
.hamburger-menu {
    display: none;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

.hamburger-menu .hamburger-line {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 4px 0;
    transition: 0.4s;
    display: block;
}

@media screen and (max-width: 767px) {
    .hamburger-menu {
        display: block;
        position: absolute;
        top: 5px;
        right: 15px;
    }
    .mobile-menu {
        display: none;
    }
	.menu-item {
	  display: flex;
	  flex-wrap: wrap;
	  margin: 15px 0;
	}
	.submenu {
	  width: 100%;
	  margin-bottom: 0;
	}	
}



.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    font-weight: bold;
    background: #3171c3de;
}

.contact.social {
    display: flex;
    margin: 0 auto;
    justify-content: center;
}

.contact.social a {
    border-bottom: none;
}

.nav-tabs .active {
    color: #495057 !important;
}