/* Fonts */

@font-face {
	font-family: 'Chaparral Pro';
	src: url("../fonts/chaparral-pro/bold-italic.eot");
	src: url("../fonts/chaparral-pro/bold-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/chaparral-pro/bold-italic.woff") format("woff"), url("../fonts/chaparral-pro/bold-italic.ttf") format("truetype"), url("../fonts/chaparral-pro/bold-italic.svg#6907c3c8455b0e3c9428566fec2b5b89") format("svg");
	font-style: italic;
	font-weight: bold;
}

@font-face {
	font-family: 'Chaparral Pro';
	src: url("../fonts/chaparral-pro/bold.eot");
	src: url("../fonts/chaparral-pro/bold.eot?#iefix") format("embedded-opentype"), url("../fonts/chaparral-pro/bold.woff") format("woff"), url("../fonts/chaparral-pro/bold.ttf") format("truetype"), url("../fonts/chaparral-pro/bold.svg#1f106c2e2502195fcad5f3b08b9f1ed9") format("svg");
	font-style: normal;
	font-weight: bold;
}

@font-face {
	font-family: 'Chaparral Pro';
	src: url("../fonts/chaparral-pro/regular-italic.eot");
	src: url("../fonts/chaparral-pro/regular-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/chaparral-pro/regular-italic.woff") format("woff"), url("../fonts/chaparral-pro/regular-italic.ttf") format("truetype"), url("../fonts/chaparral-pro/regular-italic.svg#ba58dfe155ca410f0ebb2f101d571d37") format("svg");
	font-style: italic;
	font-weight: normal;
}

@font-face {
	font-family: 'Chaparral Pro';
	src: url("../fonts/chaparral-pro/regular.eot");
	src: url("../fonts/chaparral-pro/regular.eot?#iefix") format("embedded-opentype"), url("../fonts/chaparral-pro/regular.woff") format("woff"), url("../fonts/chaparral-pro/regular.ttf") format("truetype"), url("../fonts/chaparral-pro/regular.svg#4aeabe0f77e25172918f03c0cd8383cd") format("svg");
	font-style: normal;
	font-weight: normal;
}

@font-face {
	font-family: 'DIN';
	src: url('../fonts/din/din-light.eot');
	src: local('☺'), url('../fonts/din/din-light.woff') format('woff'), url('../fonts/din/din-light.ttf') format('truetype'), url('../fonts/din/din-light.svg') format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'DIN';
	src: url('../fonts/din/DINBek-Regular.eot');
	src: local('☺'), url('../fonts/din/DINBek-Regular.woff') format('woff'), url('../fonts/din/DINBek-Regular.ttf') format('truetype'), url('../fonts/din/DINBek-Regular.svg') format('svg');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'DIN';
	src: url('../fonts/din/DIN-Medium.eot');
	src: local('☺'), url('../fonts/din/DIN-Medium.woff') format('woff'), url('../fonts/din/DIN-Medium.ttf') format('truetype'), url('../fonts/din/DIN-Medium.svg') format('svg');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'DIN';
	src: url('../fonts/din/DINPro-Bold.eot');
	src: local('☺'), url('../fonts/din/DINPro-Bold.woff') format('woff'), url('../fonts/din/DINPro-Bold.ttf') format('truetype'), url('../fonts/din/DINPro-Bold.svg') format('svg');
	font-weight: 700;
	font-style: normal;
}

/* main styles */

body,
html {
    width: 100%;
	 height: 100%;
	 margin: 0;
	 padding: 0;
	 font-family: "Din","Helvetica Neue",Helvetica,Arial,sans-serif;
	 color: #353795;
	 font-size: 19px;
}

html {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
 }
 *, *:before, *:after {
	box-sizing: inherit;
 }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
}

h2 {
	font-size: 16px;
	text-transform: uppercase;
	color: #c24e10;
	font-weight: 300;
}

h3 {
	font-size: 30px;
	line-height: 35px;
}

a {
	opacity: 1;
	transition: all 500ms;
}

hr {
	margin-top: 25px;
}

section {
	margin-top: 5px;
	margin-bottom: 35px;
}

clearfix:after {
	content: "";
	display: table;
	clear: both;
 }

/* header */

.logo {
	display: inline-block;
	margin: 15px 25px;
}

.navbar-default {
	background-color: transparent;
	border: none;
	margin-bottom: 0;
	z-index: 10;
}

.navbar-nav {
	margin:	20px 0;
}

.navbar-default .navbar-nav>li>a {
	color: #ffffff;
	opacity: 1;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{
	color: #e6ccb2;
	opacity: 1;
	border-top: 1px solid #e6ccb2;
	border-bottom: 1px solid #e6ccb2;
}

.navbar-nav li a:before {
	content: " ";
	position: absolute;
	height: 1px;
	width: 100%;
	left: 0;
	bottom: 5px;
	background-color: transparent;
	transition: all 500ms;
}

.navbar-nav li a:hover:before, .navbar-nav li a:active:before {
	transition: all 500ms;
	/* background-color: #ffffff; */
}

.navbar-brand > * {
	position: relative;
}

/* Keep the collapsed (hamburger) navbar up to 1199px. The inline menu only
   fits the logo + all nav items once the container hits 1200px, so below that
   we stay collapsed instead of letting the menu wrap/break. */
@media (max-width: 1199px) {
	.navbar-header {
		float: none;
	}
	.navbar-toggle {
		display: block;
	}
	.navbar-collapse.collapse {
		display: none !important;
	}
	.navbar-collapse.collapse.in {
		display: block !important;
	}
	.navbar-nav {
		float: none !important;
		margin: 7.5px 0;
	}
	.navbar-nav > li {
		float: none;
	}
	/* solid header background while the hamburger menu is in use */
	.navbar-default {
		background-color: #25303d;
	}
	/* clean outer edges: no border above the first item or below the last,
	   including on hover/focus (the global hover rule re-adds them) */
	.navbar-default .navbar-nav > li:first-child > a,
	.navbar-default .navbar-nav > li:first-child > a:hover,
	.navbar-default .navbar-nav > li:first-child > a:focus {
		border-top: 0;
	}
	.navbar-default .navbar-nav > li:last-child > a,
	.navbar-default .navbar-nav > li:last-child > a:hover,
	.navbar-default .navbar-nav > li:last-child > a:focus {
		border-bottom: 0;
	}
}

header {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background: url(../img/banner.webp) no-repeat center center;
	 background-size: cover;
	 margin-top: -150px;
	 margin-bottom: 35px;
	 position: relative;
}

.intro-message {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
}

header .intro-sub {
	font-family: "Chaparral Pro","Times New Roman",serif;
	font-weight: normal;
	font-size: 30px;
	line-height: 35px;
	max-width: 650px;
	margin: 25px auto;
}

.arrow-down {
	position: relative;
	top: 50px;
}

.lead {
	font-family: "Chaparral Pro","Times New Roman",serif;
}

.energy{
	margin-top: 20px;
}

.lead span {
	font-family: "Din","Helvetica Neue",Helvetica,Arial,sans-serif;
	text-transform: uppercase;
	font-weight: 500;
}

.line {
	padding: 25px 0;
	border-bottom: 1px solid #eee;
	margin-top: 0;
}

.line.energy{
	padding-top: 0;
}

.line h2 {
	color: #7d6748; /* 5.4:1 on white (was #a38a6c, 3.27:1) */
}

.line.no-border {
	border-bottom: none;
	padding-bottom: 0;
}

.line img {
	margin-bottom: 2px;
}

.banner {
	background: #353795;
	color: #fff;
	line-height: 28px;
	position: relative;
}

.banner h2 {
	font-family: "Din","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 500;
	color: #fff;
}

/* footer */
footer {
	background-color: #25303d;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	margin-top: 55px;
	text-transform: uppercase;
	line-height: 14px;
}

/* banner sits flush against the footer when it's the last section.
   footer is a sibling of <main> (not of .banner), so match the case where
   .banner is main's last child. Falls back to the 55px gap if :has is absent. */
main:has(> .banner:last-child) + footer {
	margin-top: 0;
}

footer section{
	padding: 65px 0 100px;
	margin: 0;
}

footer .logo {
	margin: 0 0 50px;
}

footer hr {
	border-top: 1px solid #676f78;
}

footer a {
	color: #fff;
}

footer a:hover{
	color: rgba(255, 255, 255, 0.5);
	transition: all 500ms;
}

footer .contact a:hover {
	color: rgba(255, 255, 255, 0.5);
}

footer .copyright {
	font-size: 12px;
	color: #aab7c4; /* 6.5:1 on #25303d (bootstrap .text-muted #777 was ~3:1) */
}

.contact, .copyright{
	padding-top: 50px;
}

footer .contact > li {
	line-height: 1.8;
	vertical-align: top;
	margin-bottom: 1rem;
}

/* offices line always on its own row */
footer .contact > li:last-child {
	display: block;
	margin-top: 1em;
	margin-bottom: 0;
}

/* breathing room between the section title and its person group */
footer .contact-section-title {
	margin-bottom: 1em;
}

/* name + email read as one unit: tighter leading than the li's 1.8 */
footer .contact-person {
	margin: 0;
	line-height: 1.4;
}

footer .contact-person__name {
	margin-bottom: 0;
}

.contact a {
	text-decoration: underline;
}

.contact a:hover {
	text-decoration: underline;
}

/* fadein animation */

@keyframes fadein {
	0% {
		opacity: 0;
		transform: translate3d(0, 10%, 0);
	}

	20% {
		opacity: 0;
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.fade-in.animate {
	animation-name: fadein;
	animation-duration: 1000ms;
	animation-fill-mode: forwards;
}

.fade-in.faded {
	opacity: 0;
}

@media (min-width: 1200px) {
	.container {
		max-width: 1200px;
	}

	header h1 {
		margin: 0;
		font-size: 4em;
	}
}

@media (min-width: 992px) {

	.list-inline li{
		padding-left: 25px;
	}

	.lead {
		font-size: 28px;
		line-height: 32px;
		padding-right: 25px;
	}

	.lead span {
		font-size: 25px;
	}

	.banner h2 {
		font-size: 2.0em;
		padding: 50px 0 10px;
	}
}

@media (max-width: 991px) {
	.banner h2 {
		font-size: 1.8em;
		padding: 0 0 10px 0;
	}
	.banner {
		padding: 15px 0;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	header h1 {
		font-size: 3.5em;
	}
}

@media(max-width:767px) {
	header {
		margin: 0 0 15px;
	}

	header h1 {
		 font-size: 2.0em;
	}

	header .intro-sub {
		font-size: 25px;
	}

	.navbar-default {
		background-color: #25303d;
	}

	.intro-message {
		 padding-bottom: 15%;
	}

	section {
		margin: 15px 0;
	}

	footer p, footer a {
		font-size: 13px;
	}
}

@media(max-width:691px) {
	.lead {
		font-size: 18px;
	}

	footer .list-inline>li {
		display: block;
		padding: 10px 0 10px 15px;
	}

	.contact, .copyright {
		padding-top: 25px;
	}
}

/* skip link: off-screen until focused, then visible top-left */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 10px 16px;
	background: #25303d;
	color: #fff;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

/* visible keyboard focus indicator */
a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* touch targets >= 44px: pad the hit area, negative margin cancels the
   visual footprint so the footer keeps its tight line rhythm */
footer .contact a,
footer .list-inline > li > a {
	display: inline-block;
	padding-top: 15px;
	padding-bottom: 15px;
	margin-top: -15px;
	margin-bottom: -15px;
}

.navbar-toggle {
	padding-top: 15px;
	padding-bottom: 15px;
}

/* respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.fade-in.animate {
		animation: none;
	}

	.fade-in.faded {
		opacity: 1;
	}
}