/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

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

html {color: #ffffff; font-size: 1em; line-height: 1.4; background: #467BBF;}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

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

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */color: #ffffff; opacity: 1; /* Firefox */ font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 100;}
:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #ffffff; font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 100;}
::-ms-input-placeholder { /* Microsoft Edge */color: #ffffff; font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 100;}

/*
 * A better looking default horizontal rule
 */

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

/*
 * 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;}
input:focus, textarea:focus, select:focus, button:focus {outline: none !important;}

body {}
a {font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 300; color: #ffffff;}
a:hover {text-decoration: none;}
img {width: 100%; height: auto;}

/* ==========================================================================
   Backgrounds
   ========================================================================== */

.navy {background: #0B0F35;}
.teal {background: #467BBF;}
.orange {background: orange;}
.white {background: white;}
.grey {background: #f5f5f5;}
.darkgrey {background: #101010;}

body header, body main, body footer, .contactBanner {animation-name: main; animation-delay: 0.5s; animation-duration: 1s; animation-fill-mode: both; outline: 1px solid transparent;}

@keyframes main {
    0%   {transform: translate(0,0); opacity: 0;}
    100% {transform: translate(0,0); opacity: 1;}
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Styles by neilirwin.uk
   ========================================================================== */

/* ==========================================================================
   Default Fonts
   ========================================================================== */
   
h1 {font-family: "proxima-nova-n7", "proxima-nova",sans-serif; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;}
h2 {font-family: "proxima-nova-n7", "proxima-nova", sans-serif; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;}
h3 {font-family: "proxima-nova-n5", "proxima-nova",sans-serif; font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;}
h4 {font-family: "proxima-nova-n5", "proxima-nova",sans-serif; font-style: normal; font-weight: 500; text-transform: uppercase;}
h5 {font-family: "proxima-nova-n5", "proxima-nova",sans-serif; font-style: normal; font-weight: 500; text-transform: uppercase;}
h6 {font-family: "proxima-nova-n5", "proxima-nova",sans-serif; font-style: normal; font-weight: 500; text-transform: uppercase;}
p {font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 100;}
span {font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 100;}
ul li {font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 100;}
ol li {font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 100;}
small {font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 100;}
select {font-family: "proxima-nova-n3", "proxima-nova",sans-serif; font-style: normal; font-weight: 300; letter-spacing: 0.05em;}
.date {display: none;}

@media screen and (min-width: 480px) {
	p {font-family: "proxima-nova-n3", "proxima-nova",sans-serif; font-style: normal; font-weight: 300;}
}
   
   
   

/* ==========================================================================
   Containers
   ========================================================================== */
   
.container {margin: 0 auto; padding: 0;}

@media screen and (min-width: 1350px) {
	.container {font-size: 100%; width: 1350px;}
}

@media screen and (max-width: 1400px) {
	.container {margin: 0 auto; width: 90%;}
	.headerMain .container {margin: 0 auto; width: 96%;}
}


/* ==========================================================================
   Header
   ========================================================================== */

.home .header {margin: 0; padding: 0; min-height: 90vh; position: relative;}
.home .header .headerMain {margin: 0 auto; z-index: 300; position: relative; width: 100%;}

.header .mobile {display: none;}

.header .headerLogo {margin: 0 0 0 -100px; padding: 0; z-index: 300; left: 50%; position: absolute; text-align: center; width: 200px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
.header .headerLogoImg img {min-height: 150px; max-height: 200px; min-width: 180px;}
.header .headerLogoImgAlt {display: none;}
.header .headerLogoImgAlt img {margin-top: 1em; min-height: 60px; max-height: 60px; min-width: 80px;}
.header .headerLogoTitle {display: none;}
.header .headerMenu {margin: 0 auto; padding: 0; width: 100%; text-align: center; vertical-align: top; position: relative;}

@media screen and (max-height: 600px) {
	.header .headerLogoImg {display: none;}
	.header .headerLogoImgAlt {display: block;}
}

@media screen and (max-width: 800px) {
	.header .headerLogo {padding: 1em 0;}
	.header .headerLogoImg img {min-height: 150px; max-height: 150px; min-width: 135px;}
	.header .headerLogoImgAlt img {margin-top: 0.5em; min-height: 70px; max-height: 70px; min-width: 70px;}
}

@media screen and (max-width: 640px) {
	.header .headerLogoImg {display: none;}
	.header .headerLogoImgAlt {display: block;}
	.header .headerLogoImgAlt img {margin-top: 0; min-height: 60px; max-height: 60px; min-width: 80px;}
}



/* ==========================================================================
   Nav
   ========================================================================== */

.menu {margin: 0; padding: 0 0 0 0; position: relative; display: block; z-index: 100;}
.headerScroll .logo img {opacity: 1; visibility: inherit; transition-delay: 1s;}

.menu .nav {margin: 0; padding: 0; height: 135px; width: 100%; overflow: hidden;}

.menu .nav .links {text-align: center;}
.menu .nav .links ul {margin: 0; padding: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; height: 135px;}
.menu .nav .links li {margin: 0; padding: 0; line-height: 50px; list-style: none; flex: 1;}
.menu .nav .links li.item2 {margin-right: 150px;}
.menu .nav .links li.item3 {margin-left: 150px;}
.menu .nav .links li a {text-decoration: none;}
.menu .nav .links li a span {margin: 0; padding: 0 1em; text-decoration: none; color: rgb(255,255,255); color: rgba(255,255,255,0.9); display: inline-block; font-weight: 500; letter-spacing: 0.2em; font-size: 1.1em; text-align: center; line-height: 50px; transition: all 0.3s; text-transform: uppercase; text-shadow: 0px 0 8px rgba(0,0,0,0.9);}
.menu .nav .links li a:hover span {color: rgb(255,255,255); color: rgba(255,255,255,1);}
.menu .nav .links li.selected a span {color: rgb(255,255,255); color: rgba(255,255,255,1); font-weight: 500;}

.menu .nav .links li.last a span {padding: 0 1.5em 0 1.5em; text-decoration: none; color: rgb(255,255,255); color: rgba(255,255,255,1); display: inline-block; font-size: 1.1em; font-weight: 300; letter-spacing: 0.1em; text-align: center; line-height: 46px; transition: all 0.3s; text-transform: uppercase; background: rgba(71,123,191,1); border: 2px solid rgba(71,123,191,1); border-radius: 3px; text-shadow: none;}
.menu .nav .links li.last a:hover span {background: rgba(71,123,191,0.9);}
.menu .nav .links li.last.selected a span {color: #ffffff;}
.menu .nav .links li.last a i {display: none;}

@media screen and (max-width: 1300px) {
	.menu .nav {margin: 0 0 0 0;}
	.menu .nav .links li {display: none;}
	.menu .nav .links li.last {display: block; position: absolute; top: 15px; left: 30px;}
	.menu .logo img {max-height: 30px;}
	.menu .nav .links li.last.selected a {color: #ffcf21;}
	.siteMenu {display: none;}
	.menu .nav {height: 80px;}
	.menu .nav .links ul {height: 80px;}
}

@media screen and (max-width: 900px) {
	.menu .nav .links li.last {left: 15px;}
}

@media screen and (max-width: 640px) {
	.menu .nav .links li.last {top: 0; left: 0;}
	.menu .nav .links li.last a {display: flex; width: 60px; height: 60px; line-height: 60px; justify-content: center; align-content: center;}
	.menu .nav .links li.last a i {display: block; width: 60px; padding-top: 3px; height: 57px; line-height: 57px; font-size: 1.75em; text-align: center;}
	.menu .nav .links li.last a span {display: none;}
}


/* ==========================================================================
   Mobile Nav
   ========================================================================== */

.mobileMenu {display: none;}

@media screen and (max-width: 1300px) {
	.mobileMenu {display: block;}
}

body.menuOpen .mobileMenu {}
   
.wrapper {right: 0; transition: 0.5s ease-in-out; width: 100%; position: relative; margin: 0; padding: 0; overflow-x: hidden;}
.sitebg {width: 100%; background: url(/img/backgrounds/site-bg.png) fixed center #4a4644;}

#mobileNav {width: 100vw; height: 100%; padding-top: 30vh; display: block; background: rgba(104,195,208,0); position: fixed; opacity: 0; z-index: -2000; transition: 0.5s ease-in-out; display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start;}
body.menuOpen #mobileNav {opacity: 1; background: rgba(104,195,208,1); z-index: 2000;}


/* Mobile Nav Button */

#openMenuButton {position: fixed; width: 60px; height: 60px; right: 0; z-index: 2001; transition: 0.5s ease-in-out; cursor: pointer; display: block;}
#openMenuButton.background {background: rgba(70,123,191,0.9);}
#openMenuButton:hover {background: rgba(70,123,191,0.9);}
body.menuOpen #openMenuButton {background: rgba(70,123,191,0.9);}

.menuIcon {display: block; position: relative; overflow: hidden; margin: 0 auto; padding: 0; width: 60px; height: 60px; font-size: 0; text-indent: -9999px; background: none; border: none; cursor: pointer;}
.menuIcon:focus {outline: none;}
.menuIcon span {display: block; position: absolute; top: 28px; left: 15px; right: 15px; height: 3px; background: #ffffff;}
.menuIcon span::before,
.menuIcon span::after {position: absolute; display: block; left: 0; width: 100%; height: 3px; background: #ffffff; content: "";}
.menuIcon span::before {top: -9px;}
.menuIcon span::after {bottom: -9px;}
.menuIconX span {transition: background 0s 0.3s;}
.menuIconX span::before,
.menuIconX span::after {transition-duration: 0.3s, 0.3s; transition-delay: 0.3s, 0s;}
.menuIconX span::before {transition-property: top, transform;}
.menuIconX span::after {transition-property: bottom, transform;}

.menuOpen .menuIconX {}
.menuOpen .menuIconX span {background: none;}
.menuOpen .menuIconX span::before {top: 0; transform: rotate(45deg);}
.menuOpen .menuIconX span::after {bottom: 0; transform: rotate(-45deg);}
.menuOpen .menuIconX span::before,
.menuOpen .menuIconX span::after {transition-delay: 0s, 0.3s;}

/* Mobile Navigation */

#mobileNavigation {transition: 0.5s ease-in-out; opacity: 0;}
body.menuOpen #mobileNavigation {opacity: 1;}
#mobileNavigation ul {margin: 0; padding: 0; text-align: center;}
#mobileNavigation ul li {margin: 0; padding: 0; line-height: 50px; list-style: none; font-size: 1.2em; letter-spacing: 0.1em; text-transform: uppercase;}
#mobileNavigation ul li span {font-family: "proxima-nova-n7", "proxima-nova",sans-serif; font-weight: 700;}
#mobileNavigation ul li a {min-height: 50px; display: block; position: relative; padding: 0 2em; line-height: 50px; color: white; transition: all 500ms; text-decoration: none;}
#mobileNavigation ul li a:hover {color: #0B0F35; text-decoration: none;}
#mobileNavigation ul li a:hover span {color: #0B0F35;}

.footer .quote ul {margin: 0 0 1em 0; padding: 0;}
.footer .quote ul li {margin: 0; padding: 0; list-style: none;}
.footer .quote li a {padding: 0 1em 0 1em; text-decoration: none; color: rgb(255,255,255); display: inline-block; font-size: 1em; font-weight: 300; letter-spacing: 0.1em; text-align: center; line-height: 46px; transition: all 0.3s; text-transform: uppercase; background: rgba(255,207,33,0.8); border: 2px solid rgba(255,207,33,1); border-radius: 3px;}
.footer .quote li a i {padding-right: 0.5em;}
.footer .quote li a span {font-weight: 300;}
.footer .quote li a:hover {background: rgba(255,207,33,1);}
.footer .quote li.selected a {color: #4a4644; background: rgba(255,207,33,1);}
.footer .quote li.selected a span {color: #4a4644;}



/* ==========================================================================
   Hero
   ========================================================================== */

.hero {margin: 0; padding: 0; display: block; background: no-repeat; content:''; position: absolute; top:0; z-index: 200; width: 100%;}
   
/* ==========================================================================
   Banner
   ========================================================================== */
   
.banner {margin: 0; padding: 0; min-height: 90vh; max-height: 90vh; top: 0; background: #0B0F35;}
.banner .item {margin: 0; padding: 0; width: 100%; display: inline-block; vertical-align: top; position: relative; overflow: hidden; min-height: 90vh; max-height: 90vh;}
.banner .item > figure {margin: 0; padding: 0; backface-visibility: hidden; background-size: cover; background-position: bottom right; background-repeat: no-repeat; left: 0px; position: absolute; top: 0px; width: 100%; min-height: 90vh; z-index: 0;}
.banner .item a {text-decoration: none;}
.banner .item.middle {margin: 0 3.5% 3em 3.5%;}

.banner .item .image img {transition: all 0.3s linear;}
.banner .item .image:hover img {transform: scale(1.05);}

.banner .item.text .detail {position: relative; z-index: 500; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 90vh; text-align: center;}
.banner .item.text .detail .info {padding: 40px 0 0 0;}
.banner .item.text .detail .info img {margin: 0 auto 2em auto; max-width: 300px;}
.banner .item.text .detail .info h2 {margin: 0; font-size: 3.5em; line-height: 1.2; color: #ffffff; padding: 0 25px; font-weight: 500; text-transform: uppercase; display: inline-block; text-shadow: 0px 0px 30px rgba(0,0,0,0.5); letter-spacing: 0.1em;}
.banner .item.text .detail .info h3 {margin: 0; font-size: 1.5em; line-height: 1.2; color: #231f20; padding: 10px 25px; text-transform: uppercase; display: inline-block; text-shadow: 0px 0px 30px rgba(0,0,0,0.5); letter-spacing: 0.1em;}
.banner .item.text .detail .info p {margin: 0 0 1em 0; font-size: 1.5em; line-height: 1.2; color: #ffffff; padding: 10px 25px; text-transform: uppercase; display: block; text-shadow: 0px 0px 30px rgba(0,0,0,0.5); letter-spacing: 0.1em;}

.banner .item.text .detail a.link span {padding: 0 1.5em; line-height: 46px; color: #ffffff; transition: all .3s linear; border-radius: 3px; border: 2px solid #ffffff; text-transform: uppercase; display: inline-block; font-size: 1.1em; font-weight: 300; letter-spacing: 0.1em;}
.banner .item.text .detail a:hover.link span {color: #4a4644; background: #ffffff;} 

.banner .overlay {margin: 0; padding: 0; min-height: 90vh; width: 100%; z-index: 299; position: absolute; top: 0; left: 0; background: linear-gradient(rgba(0,0,0, 0.7), rgba(0,0,0, 0));}
/* .banner .overlay::after {margin: 0; padding: 0; min-height: 90vh; width: 100%; z-index: 298; position: absolute; top: 0; left: 0; content:' '; background-image: url('/img/overlay.png');} */

.slick-current .container .banner .item.text .detail .info h2 {animation-name: banner; animation-delay: 1s; animation-duration: 0.5s; animation-fill-mode: both; visibility: inherit;}
.slick-current .container .banner .item.text .detail .info p {animation-name: banner; animation-delay: 1.5s; animation-duration: 0.5s; animation-fill-mode: both; visibility: inherit;}
.slick-current .container .banner .item.text .detail a.link {animation-name: banner; animation-delay: 2s; animation-duration: 0.5s; animation-fill-mode: both; visibility: inherit;}
@keyframes banner {
    0%   {transform: translate(0,50%); opacity: 0;}
    100% {transform: translate(0,0); opacity: 1;}
}

@media screen and (max-width: 1024px) {
	.banner .item.text {font-size: 90%;}
}

@media screen and (max-width: 640px) {
	.banner .item.text .detail {font-size: 90%;}
}

@media screen and (max-width: 480px) {
	.banner .item.text .detail .info p {font-weight: 300;}
	.banner .item.text .detail {font-size: 80%;}
}

@media screen and (max-height: 600px) {
	.banner .item.text .detail .info p {font-weight: 300;}
	.banner .item.text .detail {font-size: 80%;}
}

@media screen and (max-height: 400px) {
	.banner {min-height: 375px; max-height: none;}
	.banner .item {min-height: 375px; max-height: none;}
	.banner .item > figure {min-height: 375px;}
	.banner .overlay {min-height: 375px; max-height: none;}
	.banner .item.text .detail {padding: 0 0 0 0; min-height: 375px; max-height: none;}
}


/* ==========================================================================
   Contact Banner
   ========================================================================== */

.contactBanner {content: ''; height: 10vh; min-height: 100px; width: 100%; display: flex; align-items: center; justify-content: flex-start; background: #0054a4;}
.contactBanner .background {background: #467BBF;}
.contactBanner .container {margin: 0 auto; padding: 0; height: 10vh; min-height: 60px; text-align: center;}
.contactBanner ul {margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%;}
.contactBanner li {margin: 0; padding: 0; display: flex; text-align: left; align-items: center; justify-content: center; font-size: 1.5em; list-style: none; width: 50%; font-weight: 100;}
.contactBanner li a {text-decoration: none; font-weight: 100;}
.contactBanner li strong {padding: 0 0.25em 0 0; font-weight: 500;}
.contactBanner li.mobileIcon:before {margin: 0 0.5em 0 0; padding: 0; content: "\f3cd"; font-family: "Font Awesome 5 Free"; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-size: 1.25em; font-weight: 900; height: 1.75em; line-height: 1.75em; text-rendering: auto; width: 1.75em; -webkit-font-smoothing: antialiased; border: 2px solid #ffffff; border-radius: 50%; text-align: center;}
.contactBanner li.emailIcon:before {margin: 0 0.5em 0 0; padding: 0; content: "\f0e0"; font-family: "Font Awesome 5 Free"; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-size: 1.25em; font-weight: 400; height: 1.75em; line-height: 1.75em; text-rendering: auto; width: 1.75em; -webkit-font-smoothing: antialiased; border: 2px solid #ffffff; border-radius: 50%; text-align: center;}
.contactBanner li.telephoneIcon:before {margin: 0 0.5em 0 0; padding: 0; content: "\f095"; font-family: "Font Awesome 5 Free"; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-size: 1.25em; font-weight: 900; height: 1.75em; line-height: 1.75em; text-rendering: auto; width: 1.75em; -webkit-font-smoothing: antialiased; border: 2px solid #ffffff; border-radius: 50%; text-align: center;}

@media screen and (max-width: 1100px) {
	.contactBanner {font-size: 95%;}
}


@media screen and (max-width: 900px) {
	.contactBanner li strong {display: none;}
}

@media screen and (max-width: 800px) {
	.contactBanner {height: inherit; min-height: 3em;}
	.contactBanner .container {margin: 0 auto; padding: 0; height: inherit; min-height: 3em; text-align: center; width: 100%;}
	.contactBanner li.emailIcon {display: none;}
	.contactBanner ul {padding: 0.5em 0; display: flex; flex-direction: column; min-height: 3em;}
	.contactBanner li {width: 100%;}
}


/* ==========================================================================
   Content
   ========================================================================== */
   
.main .headline {margin: 0; padding: 0 0 2.5em 0; text-align: center;}
.main .headline h2 {margin: 0; padding: 0; font-size: 2.5em; line-height: 1;}
.main .headline p {margin: 0; padding: 0; font-size: 1.25em; font-weight: 100;}
   
.contentHeader {margin: 0 0 1em 0; padding: 0;}
.contentHeader h2 {margin: 0; padding: 0; font-size: 2em; line-height: 1.25;}
.contentHeader h3 {margin: 0; padding: 0; font-size: 1.6em; line-height: 1.25; text-transform: none;}

.contentArea .contentHeader h2,
.contentArea .contentHeader h3 {text-align: center;}

.content {margin: 0; padding: 0; text-align: justify; width: 100%;}
.content h1 {margin: 0; padding: 0; font-size: 2em; line-height: 1.2; letter-spacing: 0.1em;}
.content h2 {margin: 0; padding: 0.5em 0 0.5em 0; font-size: 1.75em; line-height: 1.2; letter-spacing: 0.1em;}
.content h3 {margin: 0; padding: 1em 0 0 0; line-height: 1.2; letter-spacing: 0.1em;}
.content h4 {margin: 0; padding: 1em 0 0.25em 0; line-height: 1.2; letter-spacing: 0.1em;}
.content h5 {margin: 0; padding: 0.5em 0 0 0; line-height: 1.2; letter-spacing: 0.1em;}
.content h6 {margin: 0; padding: 0.5em 0 0.25em 0; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.1em;}
#keyItems .content ul {margin: 0; padding: 0.5em 0 1em 0; font-size: 1.1em; letter-spacing: 0.025em;}
#keyItems .content ul li {margin: 0 0 0.5em 0; padding: 0; display: flex; justify-content: flex-start; align-content: flex-start; list-style: none; font-size: 1.1em; line-height: 1.5em; text-align: left; letter-spacing: 0.025em; width:100%;}
#keyItems .content ul li::before {padding: 0; content: "\f054"; font-family: "Font Awesome 5 Free"; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-size: 1em; font-weight: 900; height: 1.5em; text-rendering: auto; width: 1.5em; min-width: 1.5em; -webkit-font-smoothing: antialiased; color: #72a203;}
#services .content ul {margin: 0; padding: 0.5em 0 1em 0; font-size: 1.1em; letter-spacing: 0.025em; display: flex; flex-direction: row; justify-content: flex-start; align-content: flex-start; flex-wrap: wrap;}
#services .content ul li {margin: 0 0 1em 0; padding: 0; display: flex; justify-content: flex-start; align-content: flex-start; list-style: none; font-size: 1.25em; line-height: 1.5em; text-align: left; letter-spacing: 0.025em; width:31%;}
#services .content ul li:nth-child(3n+2) {margin: 0 3.5% 1em 3.5%;}
#services .content ul li::before {padding: 0; content: "\f00c"; font-family: "Font Awesome 5 Free"; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-size: 1em; font-weight: 900; height: 1.5em; text-rendering: auto; width: 1.5em; min-width: 1.5em; -webkit-font-smoothing: antialiased; color: #72a203;}
.content ol {margin: 0; padding: 0.5em 0 1em 1.5em; font-size: 1.1em; letter-spacing: 0.025em;}
.content ol li { margin: 0; padding: 0 0 0.5em 0.3em; list-style: decimal; line-height: 1.5; text-transform: uppercase; text-align: left;}
.content img {margin: 0 0 0.75em 0;padding: 0; width: 100%;}
.content p {margin: 0; padding: 0.25em 0 0.25em 0; font-size: 1.1em; line-height: 1.4; letter-spacing: 0.025em;}
.content p em {margin: 0; padding: 0.25em 0 0.75em 0; font-size: 1.3em; line-height: 1.4; letter-spacing: 0.025em;}
.content strong {letter-spacing: 0.025em;}
.content blockquote {margin: 0.5em 0 1em 0; padding: 2em; background: #f5f5f5; border: 1px solid #d5d5d5;}
.content blockquote p {margin: 0; padding: 0; font-size: 1.5em; line-height: 1.2;}
.content blockquote p br {margin: 0 0 0.5em 0; padding: 0 0 0.5em 0; display: block;}
.content blockquote p em {color: #777; font-size: 0.9em;}
.content a {color: #181e2a;}
.content a:hover {text-decoration: none;}

.link {margin-top: 0.5em;}
.link span {display: block;}
.link span a {margin: 0 0 0 0; padding: 1em 1.5em 1em 1.5em; border-radius: 0.2em; color: rgba(74,70,68,1); background: rgba(104,195,208,0.8); border: 2px solid rgba(104,195,208,1); text-transform: uppercase; font-family: "proxima-nova-n3", "proxima-nova",sans-serif; font-style: normal; font-weight: 300; font-size: 1.1em; letter-spacing: 0.1em; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; cursor: pointer; text-decoration: none; display: inline-block;}
.link span a:hover {background: rgba(104,195,208,1);}

.content.two {column-count: 2; column-gap: 50px;}
.content.three {column-count: 3; column-gap: 50px;}


@media screen and (max-width: 1100px) {
	#services .content ul li {width:47.5%;}
	#services .content ul li:nth-child(3n+2) {margin: 0 0 1em 0;}
	#services .content ul li:nth-child(even) {margin: 0 0 1em 5%;}
}

@media screen and (max-width: 800px) {
	.content.two {column-count: 2;}
	.content.three {column-count: 2;}
	#services .content ul li {margin: 0 0 0.5em 0;}
	#services .content ul li:nth-child(3n+2) {margin: 0 0 0.5em 0;}
	#services .content ul li:nth-child(even) {margin: 0 0 0.5em 5%;}
}

@media screen and (max-width: 640px) {
	.content.two {column-count: 1;}
	.content.three {column-count: 1;}
	#services .content ul {flex-direction: column;}
	#services .content ul li {width:100%;}
	#services .content ul li:nth-child(even) {margin: 0 0 0.5em 0;}
}



/* ==========================================================================
   Blocks
   ========================================================================== */
   
.multiCol {margin: 0; padding: 0; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; color: #000000;}

.multiCol .item {margin: 0 3.5% 3em 0; padding: 0; text-align: center; display: flex; flex-direction: column; justify-content: space-between;}
.multiCol .item p {text-align: center;}
.multiCol .image {margin: 0 0 2em 0; padding: 0; overflow: hidden;}

.multiCol.two .item {width: 48.25%;}
.multiCol.two .item.even {margin: 0 0 3em 0;}

.multiCol.three .item {width: 31%;}
.multiCol.three .item.three {margin: 0 0 3em 0;}

.multiCol.four .item {margin: 0 3.5% 3em 0; width: 22.375%;}
.multiCol.four .item.four {margin: 0 0 3em 0;}

.multiCol .contentHeader {margin: 0; padding: 0 5%; text-align: center;}
.multiCol .contentHeader h2 {margin: 0; padding: 0 0 0.25em; font-size: 1.75em; line-height: 1.2; transition: all 0.3s linear;}
.multiCol .contentHeader h3 {margin: 0; padding: 0; font-size: 1.2em; line-height: 1.2; transition: all 0.3s linear;}

@media screen and (max-width: 1300px) {
	.multiCol.four .item {width: 48.25%;}
	.multiCol.four .item.even {margin: 0 0 3em 0;}
}

@media screen and (max-width: 900px) {
	.multiImages .two li {margin: 0 5% 2em 0;}
	.multiImages .two li.singleImage.even {margin: 0 0 2em 0;}
	
	.multiCol.three .item {width: 48.25%;}
	.multiCol.three .item.three {margin: 0 3.5% 2em 0;}
	.multiCol.three .item.even {margin: 0 0 2em 0;}
}

@media screen and (max-width: 600px) {
	.multiCol .item {margin: 0 0 2em 0;}
	.multiCol.two .item {margin: 0 0 2em 0; width: 100%;}
	.multiCol.three .item {width: 100%;}
	.multiCol.three .item.three {margin: 0 0 2em 0;}
	.multiCol.four .item {margin: 0 0 2em 0; width: 100%;}
}


/* ==========================================================================
   About
   ========================================================================== */
   
#about {color: #000000;}
#about .container {padding: 3em 0;}
#about .bottom ul {margin: 0; padding: 2em 0; display: flex; flex-direction: row; justify-content: center; align-items: center;}
#about .bottom ul li {margin: 0; padding: 0 5%; list-style: none;}
#about .bottom img {margin: 0 auto; max-width: 400px; text-align: center;}
#about .bottom small {color: #555555;}

@media screen and (max-width: 600px) {
	#about .bottom ul {padding: 2em 0 0 0; flex-wrap: wrap;}
	#about .bottom ul li {padding-bottom: 1em;}
	#about .bottom img {margin: 0 auto; max-width: 200px; text-align: center;}
}


/* ==========================================================================
   Key Items
   ========================================================================== */

#keyItems {padding-bottom: 3em; color: #ffffff; text-align: center;}
#keyItems .bottom ul {margin: 0; padding: 0; display: flex; flex-direction: row; justify-content: center; align-items: center;}
#keyItems .bottom ul li {margin: 0; padding: 0 5%; list-style: none;}
#keyItems .bottom img {margin: 0 auto; max-width: 400px; text-align: center;}
#keyItems .bottom small {color: #555555;}


/* ==========================================================================
   Services
   ========================================================================== */
   
#services {color: #000000;}
#services .container {padding: 3em 0;}
#services p {padding: 0;}


/* ==========================================================================
   Social
   ========================================================================== */
   
#social {color: #000000;}
#social .container {padding: 0 0 3em 0;}

#social .social {margin: 0; padding: 0;}
#social .social ul {margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
#social .social ul li {list-style: none;}
#social .social ul li a {margin: 0.25em 0.25em; padding: 0.5em; display: block; list-style: none; font-size: 1.5em; height: 1.5em; width: 1.5em; line-height: 1.5em; text-rendering: auto; border: 1px solid #0B0F35; border-radius: 50%; text-align: center; align-self: center; color: #0B0F35; overflow: hidden; position: relative; transition: all 0.5s ease;}
#social .social ul li a:hover {border: 1px solid #ffffff; background: #ffffff;}

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

#contact .container {padding: 3em 0;}

.contactForm {margin: 0 0 0 0; padding: 0; text-align: left; font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 300; color: #ffffff; letter-spacing: 0.025em; width: 100%;}
.contactForm  h2 {margin: 0 0 0.25em 0; padding: 0; font-size: 2em; font-weight: 500; text-align: left; line-height: 1; display: block; vertical-align: middle; letter-spacing: 0.1em;}
.contactForm  h4 {margin: 0 0 0.75em 0; padding: 0; font-size: 1.15em; font-weight: 500; text-align: left; line-height: 1; display: block; vertical-align: middle; letter-spacing: 0.1em;}
.contactForm  p {margin: 0; padding: 0; font-size: 1.1em; line-height: 1.2; font-weight: 100; display: block; letter-spacing: 0.025em;}
.contactForm .input label {padding: 0; color: #ffffff; display: block; font-size: 1.1em; font-weight: 100; line-height: 1;}	
.contactForm .input label i {padding: 0; color: #ffffff; font-size: 0.9em; font-weight: 100; font-style: normal;}	
.contactForm .input input {margin: 0 0 1.5em 0; padding: 0; height: 40px; width: 100%; border: none; border-radius: 0; border-bottom: 2px solid #0B0F35; display: block; line-height: 1; font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 100; font-size: 1em; color: #ffffff; background: none; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; box-shadow: none;}	
.contactForm .input input::-webkit-input-placeholder,
.contactForm .input input::-moz-placeholder,
.contactForm .input input::placeholder-shown {color:#ffffff;}
.contactForm .input.address {display: none;}	
.contactForm .input input:hover {border-bottom: 2px solid #ffffff; color: #ffffff;}
.contactForm .input input:focus {border-bottom: 2px solid #ffffff; color: #ffffff;}
.contactForm .select label {padding: 0; color: #ffffff; display: block; font-size: 1.1em; font-style: normal; font-weight: 100; line-height: 1;}	
.contactForm .select label i {padding: 0; color: #ffffff; font-size: 0.9em; font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 100;}	
.contactForm .select .dropdown {margin: 0 0 1.5em 0; position: relative; background: none; overflow: hidden; border: none; border-bottom: 2px solid #0B0F35; border-radius: 0; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear;}
.contactForm .select .dropdown:after {content: '\f078'; font-family: "Font Awesome 5 Free"; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-size: 1em; font-weight: 900; height: 1em; line-height: 1em; text-rendering: auto; width: 1em; -webkit-font-smoothing: antialiased; position: absolute; right: 0.5em; top: 0.75em; z-index: 1; pointer-events: none; color: #ffffff;}
.contactForm .select select {margin: 0; padding: 0; height: 40px; width: 100%; border: none; display: block; font-size: 1.1em; color: #ffffff; background: transparent; box-shadow: none; background-image: none; -webkit-appearance: none; line-height: 1;}	
.contactForm .select .dropdown:hover {border-bottom: 2px solid #ffffff; color: #ffffff;}
.contactForm .select .dropdown:focus {border-bottom: 2px solid #ffffff; color: #ffffff;}
.contactForm .textarea label {padding: 0 0; color: #ffffff; display: block; font-size: 1.1em; font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 100;}	
.contactForm .textarea textarea {margin: 0; padding: 0; width: 100%; border: none; border-bottom: 2px solid #0B0F35; display: block; font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 100; font-size: 1em; color: #ffffff; background: none; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; border-radius: 0;}	
.contactForm .textarea textarea:hover {border-bottom: 2px solid #ffffff;}	
.contactForm .textarea textarea:focus {border-bottom: 2px solid #ffffff;}

.contactForm .checkbox {margin: 0 0 1em 0; display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 16px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.contactForm .checkbox input {position: absolute; opacity: 0; cursor: pointer; height: 25px; width: 25px; left: 0; z-index: 10;}
.contactForm .checkbox label {padding: 0; color: #ffffff; font-family: "proxima-nova-n1", "proxima-nova",sans-serif; font-style: normal; font-weight: 100; cursor: pointer;}	
.contactForm .checkbox .checkmark {position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee;}
.contactForm .checkbox:hover input ~ .checkmark {background-color: #E5E5E5;}
.contactForm .checkbox input:checked ~ .checkmark {background-color: #69BFBA;}
.contactForm .checkbox .checkmark:after {content: ""; position: absolute; display: none;}
.contactForm .checkbox input:checked ~ .checkmark:after {display: block;}
.contactForm .checkbox .checkmark:after {left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.contactForm .details {margin: 0 0 2em 0;}
.contactForm .submit input {margin: 0 0 0 0; padding: 1em 1.5em 1em 1.5em; border-radius: 0.2em; color: #ffffff; background: rgba(0,46,95,0.8); text-transform: uppercase; font-family: "proxima-nova-n3", "proxima-nova",sans-serif; font-style: normal; font-weight: 100; font-size: 1.1em; letter-spacing: 0.1em; -webkit-transition: all .3s linear; -moz-transition: all .3s linear; transition: all .3s linear; border: none; cursor: pointer;}
.contactForm .submit input:hover {color: #ffffff; background: rgba(0,46,95,1);}	
.contactForm .submit input:focus {color: #ffffff; background: rgba(0,46,95,1);}

.contactForm .contactFormFields {margin-bottom: 1em; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;}
.contactForm .contactFormFields{}
.contactForm .contactFormFields.full {margin-bottom: 2em; width: 100%; flex-direction: column;}
.contactForm .contactFormFields .left {margin-bottom: 2em; width: 48%;}
.contactForm .contactFormFields .right {width: 48%;}

.contactForm .contactFormHeader {margin-bottom: 3em; border-bottom: 2px solid #0B0F35; width: 100%;}
.contactForm .contactFormHeader .content {margin: 0 0 2em 0; padding-left: 1em; vertical-align: top; display: inline-block; width: 80%;}
.contactForm .contactFormSuccess .content {margin: 0 0 2em 0; padding-left: 1em; vertical-align: top; display: inline-block; width: 80%;}
.contactForm .contactFormHeader i.fa {color: #ffffff; vertical-align: top; display: inline-block;}
.contactForm .contactFormSuccess i.fa {color: #ffffff; vertical-align: top; display: inline-block;}

@media screen and (max-width: 900px) {
	.contactForm .contactFormHeader .content {margin: 0 0 2em 0; padding-left: 1em; display: inline-block; width: 80%;}
	.contactForm .contactFormSuccess .content {margin: 0 0 2em 0; padding-left: 1em; display: inline-block; width: 80%;}
}

@media screen and (max-width: 640px) {
	.contactForm {margin: 0 auto 0 auto; width: 90%;}
	.contactForm .contactFormFields {margin-bottom: 1em; width: 100%; display: flex; flex-direction: column; flex-wrap: wrap;}
	.contactForm .contactFormFields .left {margin-bottom: 0; width: 100%;}
	.contactForm .contactFormFields .right {margin-bottom: 2em; width: 100%;}
	.contactForm  p {font-weight: 300;}
	.contactForm .input label {font-weight: 300;}
	.contactForm .input input {font-weight: 300;}
	.contactForm .select label {font-weight: 300;}
	.contactForm .select select {font-weight: 300;}
	.contactForm .textarea label {font-weight: 300;}
	.contactForm .textarea textarea {font-weight: 300;}
	
	.contactForm .submit input {width: 100%;}
}

@media screen and (max-width: 480px) {
	.contactForm .contactFormHeader .content {font-size: 80%;}
	.contactForm .contactFormSuccess .content {font-size: 80%;}
	.contactForm .contactFormHeader i.fa-3x {font-size: 2em;}
	.contactForm .contactFormSuccess i.fa-3x {font-size: 2em;}
	.contactForm  p {text-align: left; font-weight: 300;}
}


/* ==========================================================================
   Back to top button
   ========================================================================== */
   
footer {}
footer > .container {padding: 3em 0;}
footer h3 {margin: 0; padding: 0;}
footer ul {margin: 0; padding: 0;}
footer ul li {list-style: none;}
footer ul li i {font-style: normal;}

footer .copyright {padding: 0 0 3em 0;}
footer .copyright small {padding: 0 4em 0 0;}

/* ==========================================================================
   Cookies
   ========================================================================== */

.cookies {position: fixed; overflow-y: scroll; top: 0; right: 0; bottom: 0; left: 0; background: rgba(40,40,40, .75); color: #000000; opacity: 0; z-index: -3000;  transition: 0.5s ease-in-out;}
body.cookiesActive {overflow: hidden;}
body.cookiesActive .cookies {opacity: 1; z-index: 3000;}

.cookies .cookiesArea {position: relative; margin: 5vh auto; width: 80%; max-width: 800px; height: 90vh; overflow-y: scroll; overflow-x: hidden; background: rgba(255,255,255, .95);}
.cookies .cookiesArea .contentArea {padding: 50px;}

.cookies #closeCookiesButton .closeCookies {position: absolute; top: 0; right: 0; width: 60px; height: 60px; transition: 0.5s ease-in-out; cursor: pointer; display: block; background: none; border: none; font-size: 1.5em;}
.cookies #closeCookiesButton .closeCookies span {display: none;}

#openCookiesButtonForm {display: inline-block;}
#openCookiesButtonForm .openCookies {margin: 0; padding: 0; background: none; color: #ffffff; text-decoration: underline; border: none; cursor: pointer;}
#openCookiesButtonForm .openCookies:hover {text-decoration: none;}

#openCookiesButton {display: inline-block;}
#openCookiesButton .openCookies {margin: 0; padding: 0; background: none; color: #ffffff; text-decoration: underline; border: none; cursor: pointer;}
#openCookiesButton .openCookies:hover {text-decoration: none;}

.cookies .content ul {flex-direction: column;}
.cookies .content ul li {margin: 0 0 0.5em 0; padding: 0; display: flex; justify-content: flex-start; align-content: flex-start; list-style: square; font-size: 1.1em; line-height: 1.25em; text-align: left; letter-spacing: 0.025em; width:100%;}
.cookies .content ul li:nth-child(3n+2) {margin: 0 0 0.5em 0;}
.cookies .content ul li::before {padding: 0; content: "\f00c"; font-family: "Font Awesome 5 Free"; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-size: 1em; font-weight: 900; height: 1.25em; text-rendering: auto; width: 1.5em; min-width: 1.5em; -webkit-font-smoothing: antialiased; color: #000000;}

#mobileNav {width: 100vw; height: 100%; padding-top: 30vh; display: block; background: rgba(70,123,191,0); position: fixed; opacity: 0; z-index: -2000; transition: 0.5s ease-in-out; display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start;}
body.menuOpen #mobileNav {opacity: 1; background: rgba(70,123,191,1); z-index: 2000;}

@media screen and (max-width: 480px) {
	.cookies .cookiesArea {margin: 5vh auto; width: 90%;}
	.cookies .cookiesArea .contentArea {padding: 50px 30px;}
	.cookies .cookiesArea h2, 
	.cookies .cookiesArea h3, 
	.cookies .cookiesArea h4, 
	.cookies .cookiesArea h5, 
	.cookies .cookiesArea p {text-align: left;}
	.cookies .cookiesArea ul {padding-left: 0;}
}

/* ==========================================================================
   Back to top button
   ========================================================================== */

#back-top {z-index: 300;}

#back-top a {padding: 0; position: fixed; right: 0; bottom: -60px; color: #ffffff; z-index: 300; width: 60px; height: 60px; line-height: 60px; display: block; background: rgba(70,123,191,0.7); /* rounded corners *//* background color transition */ transition: 0.3s; text-transform: uppercase; text-align: center; font-size: 2.5em; opacity: 0;}
#back-top a:hover {color: #ffffff; background: rgba(70,123,191,1);}

body.reveal #back-top a {bottom: 0; opacity: 1;}

body.menuOpen #back-top a {display: none!important;}







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

/*
 * Hide visually and from screen readers
 */

.hidden {display: none !important;}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; /* 1 */}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

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

@media print {
    *,
    *:before,
    *:after {background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ 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:
     * 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;}
    
}