@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
  overflow: visible;
  box-sizing: content-box;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #f14624;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
  text-decoration: none;
  font-weight: bold;
}

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

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

body {
	font-size: 1.15em;
	font-family: 'Open Sans', sans-serif;
	position: relative;
	height: 100%;
	margin: 0;
	-webkit-text-size-adjust: 100%;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}


[hidden] {
  display: none;
}


header {
	background-color: white;
	text-align: center;
	padding: 10px;
}

header li {
	list-style-type: none;
	display: inline;
	margin: 0 10px 0 10px;
}

.btn {
	display: inline-block;
	font-size: 0.7em;
	padding: 15px;
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 15px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.btn:hover {
  background-color: #f14624;
  box-shadow: 0px 15px 20px #2c3892;
  color: #fff;
  transform: translateY(-7px);
}

#headerContent {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	align-items: flex-end;
}

.desktop-menu {
	display: none;
}

header nav a:hover { color:#f14624; }

.desktop-menu li:nth-child(-n+2) {
	border-right: 1px solid #ccc;
	padding-right: 20px;
}

.hamburger-icon {
	z-index: 6;
	cursor: pointer;
	margin-right: 20px;
	position: absolute;
	right: 0px;
	background: none;
	border: none;
	padding: 0;
}

.hamburger-icon .bar1, .bar2, .bar3 {
	width: 35px;
	height: 5px;
	background-color: #333;
	margin: 6px 0;
	transition: 0.4s;
}

.hamburger-icon-click .mobile-menu-container { opacity: 1; height: auto; overflow: visible; }
.hamburger-icon-click .mobile-menu { width: 50%; }
.hamburger-icon-click .mobile-menu-outside { width: 100%; }
.hamburger-icon-click .bar1 {  transform: rotate(-45deg) translate(-9px, 6px); }
.hamburger-icon-click .bar2 {  opacity: 0; }
.hamburger-icon-click .bar3 {  transform: rotate(45deg) translate(-8px, -8px); }

.mobile-menu-container { 
	display: block;
	opacity: 0; 
	height: 0;
	width: 0;
	transition: 0.25s;
	z-index: 5;
}

.mobile-menu-outside {
	position: fixed;
	z-index: 5;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: grey;
	opacity: 0.25;
}

.mobile-menu {
	position: fixed;
	z-index: 5;
	right: 0;
	top: 0;
	height: 100%;
	width: 0;
	opacity: 1;
	background-color: white;
	overflow: auto; 
	box-shadow: 0px 0px 8px 4px rgba(0,0,0,0.20);
	transition: width 0.25s;
}

.mobile-menu-nav {
	margin-top: 80px;
	text-align: left;
}

.mobile-menu-nav ul {
	display: grid;
	padding: 0;
}

.mobile-menu-li {
	margin: 10px 0 0 0;
	text-align: left;
	width: 100%;
	flex: none;
	padding: 10px;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	text-decoration: none;
	color: inherit;
}

.header-logo {
	width: 95%;
	max-width: 500px;
}

.main-container {
	background-color: #2c3892;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
}

section {
	flex-grow: 1;
}

.title {
	text-align: center;
	color: white;
}

.header-image-container {
	width: 100%;
	overflow: hidden;
	text-align: center;
	color: white;
}

.header-image-container img {
	max-width: 250px;
}

.header-image-container p {
	width: 90%;
	max-width: 1250px;
	margin: auto;
}

.full-width-image-container {
	width: 100%;
	max-height: 500px;
	overflow: hidden;
	text-align: center;
	color: white;
}

.full-width-image {
	width: 100%;
}

.person-image {
	margin: 25px 0 10px 0;
	border-radius: 15px;
	border: white solid 1px;
	height: auto;
}

.services {
	margin: 15px;
	margin-top: 75px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.service {
	padding: 25px;
	margin: 0 25px 50px 25px;
	width: 100%;
	max-width: 500px;
	background-color: black;
	text-align: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	overflow: hidden;
	border-radius: 15px;
	box-shadow: 2px 3px white;
	text-decoration: none;
	display: block;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service:hover {
	transform: scale(1.03);
	box-shadow: 4px 6px white;
}

.service:active {
	transform: scale(0.98);
	box-shadow: 1px 2px white;
}

.service-content {
	position: relative;
	z-index: 2;
	color: white;
	opacity: 1;
	font-size: 1.6em;
}

.service p {
	font-size: 0.8em;
}

.service-content img {
	max-width: 50%;
}

.service-btn {
	display: inline-block;
	color: white;
	background-color: #f14624;
	padding: 10px 20px;
	border-radius: 5px;
	font-size: 0.8em;
	font-weight: bold;
}

.service-background {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	opacity: 0.5;
}

.text-content {
	max-width: 1000px;
	padding: 15px;
	margin: 0 auto;
	text-align: center;
	color: white;
}

.side-by-side-container {
	margin-left: auto;
  margin-right: auto;
	max-width: 1200px;
}

.side-by-side {
	padding: 30px 50px;
	background-color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.side-by-side h2 {
	align-content: end;
	float: right;
	width: 70%;
}

.side-by-side h4 {
	align-content: center;
	font-size: small;
	font-style: italic;
	width: 100%;
}

.side-by-side div {
	width: 100%;
}

.side-by-side img {
	object-fit: contain;
	width: 25%;
	height: auto;
	max-height: 400px;
	border-radius: 10px;
}

.side-by-side li {
	margin-bottom: 0.6em;
	line-height: 1.5;
}

.side-by-side ul {
	margin-top: 1em;
}

.section-divider {
	border: none;
	border-top: 1px solid #ddd;
	margin: 0;
}

.side-by-side a {
	width: 30%;
	text-decoration: underline;
	color: #1a5fb4;
	word-break: break-all;
}

@media screen and (max-width:600px) {
	.side-by-side {
		justify-content: center;
		padding: 20px;
	}
	.side-by-side a, .side-by-side div {
		width: 100%;
	}
	.side-by-side ul {
		padding-left: 1.2em;
	}
	.side-by-side img {
		width: 40%;
		margin-bottom: 10px;
	}
	.side-by-side h2 {
		width: 100%;
		float: none;
	}
}

.anchor-links {
	margin: 0 auto 1.5em auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 750px;
}

.anchor-links a {
	margin: 0 10px 0 10px;
	text-decoration: underline;
	color: white;
}

.centered-text {
	text-align: center;
	background: white;
	padding: 20px 10% 20px 10%;
	margin-bottom: 1.5em;
}

.centered-text p {
	margin: 0 auto;
	max-width: 1000px;
}

.centered-text a {
	text-decoration: underline;
	color: #1a5fb4;
	word-break: break-all;
}

.image-grid {
  display: grid;
  grid-column-gap: 0;
	grid-template-columns: auto auto;
	max-width: 650px;
	margin: 0 auto;
}

.image-grid-3col {
  display: grid;
  grid-column-gap: 0;
	grid-template-columns: auto auto auto;
	max-width: 650px;
	margin: 0 auto;
}

.image-grid-3col img {
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  width: 100%;
  height: auto;
}

.contact-cta {
	margin: 0 auto;
	padding: 3em 0;
	text-align: center;
}

.image-grid img {
  border: 1px solid rgba(0, 0, 0, 0.8);
  text-align: center;
  width: 100%;
  height: auto;
}

.image-grid video {
  grid-column: 1 / -1;
}

footer {
	flex-shrink: 0;
	background-color: white;
  width: 100%;
}

.footer-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin: 0 auto;
	padding: 20px;
	font-size: 0.9em;
}

.footer-container div {
	width: 95%;
	max-width: 500px;
	padding: 15px;
	text-align: center;
}

footer img {
	max-width: 200px;
}

footer ul {
	padding: 0;
}

footer li {
	list-style-type: none;
	display: inline;
	margin: 0 10px 0 10px;
}

footer li img{
	margin: 5px;
}

@media only screen and (max-width: 760px) {
	.header-logo {
		width: 65%;
		max-width: 500px;
	}

	h2 {
		font-size: 1.0em;
	}

	.image-grid {
		display: grid;
		grid-column-gap: 0;
		grid-template-columns: auto auto;
	}
}

@media screen and (min-width:940px) {
	header ul, .desktop-menu {
			display:flex;
			flex-flow:row nowrap;
			justify-content:center;
			flex: 0 1 auto;
			text-align: left;
			align-items: flex-end;
	}
	header .hamburger-icon { display: none; }
}