body { z-index: 10; }


/* ====== FONT ELEMENTS ====== */
h1, .h1 { color: rgb(255, 255, 255); font-weight: 300; line-height: 1.65; margin: 0 0 1em 0; font-family: 'Quicksand', sans-serif; }
h2, .h2 { font-family: 'Catamaran', sans-serif; font-size: 3em; }
p, ul { font-family: 'Catamaran', sans-serif; }

.banner h1 { font-size: 3.5em; margin-bottom: 0; }
    .banner h1::after { content: ''; background-color: rgb(255, 255, 255); display: block; height: 2px; margin: 0.325em 0 0.5em 0; width: 100%; }
.banner .content { font-size: 90%; letter-spacing: 0.2em; text-transform: uppercase; }
.page-heading { border-bottom: 2px solid; font-weight: 400; }
.subheading { font-size: 0.8em; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; width: 40%; }

.page-list-content { padding: 0.5em 1em; }
.page-list-content h3, .page-list-content h4 { display: inline-block; line-height: 1.65; }
    .page-list-content h4::after, .page-list-content h3::after { border-bottom: 2px solid; content: ' '; display: block; height: 2px; margin: 0.3em 0 0.5em; width: 100%; }
    .page-list-content p { letter-spacing: 0.025em; font-size: 1.1em; font-weight: 300; }

.page-tile, .page-tile a, .page-list-content { color: rgb(255, 255, 255); }
.ion-icon { margin-right: 0.8em; }


/* ====== MEDIA ELEMENTS ====== */
.media { margin: 1em; }
.right { float: right; margin-top: 0; margin-right: 0; }
.left { float: left; margin-top: 0; margin-left: 0; }



/* ====== PAGE BLOCK ELEMENTS ====== */

.banner, .page-header { align-items: center; display: flex; padding: 6em 0 2em 0; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; border-bottom: 0 !important; cursor: default; margin-bottom: -3.25em; max-height: 32em; min-height: 22em; position: relative; top: -3.25em; }
.banner::after, .page-header::after { -moz-transition: opacity 2.5s ease; -webkit-transition: opacity 2.5s ease; transition: opacity 2.5s ease; -moz-transition-delay: 0.75s; -webkit-transition-delay: 0.75s; transition-delay: 0.75s; pointer-events: none; background-color: rgb(36, 41, 67); content: ''; display: block; height: 100%; left: 0; opacity: 0.85; position: absolute; top: 0; width: 100%; z-index: 1; }
.major { min-height: 30em; }
.inner { color: rgba(255, 255, 255, 1); margin: 0 auto; width: calc(100% - 6em); z-index: 3; }
.banner > .inner  { -moz-transition: opacity 1.5s ease, -moz-transform 0.5s ease-out, -moz-filter 0.5s ease, -webkit-filter 0.5s ease; -webkit-transition: opacity 1.5s ease, -webkit-transform 0.5s ease-out, -webkit-filter 0.5s ease, -webkit-filter 0.5s ease; transition: opacity 1.5s ease, transform 0.5s ease-out, filter 0.5s ease, -webkit-filter 0.5s ease; margin-bottom: 8em; padding: 10em 0 0; position: relative; z-index: 2; }

.page-tile { align-items: center; display: flex; transition: transform 0.25s ease, opacity 0.25s ease, filter 1s ease, -webkit-filter 1s ease; padding: 4em 4em 2em 4em; background-position: center; background-repeat: no-repeat; background-size: cover; cursor: default; height: 40vh; max-height: 40em; min-height: 23em; position: relative; }
.page-header { background-color: rgba(142, 169, 232, 0.75); margin-top: 3em; padding: 4em 0 6em; }
.page-header::after{ background-color: rgba(0, 148, 255, 0.75); content: ''; }

.tiles article::before { background-color: rgba(142, 169, 232, 0.75); bottom: 0; content: ''; display: block; height: 100%; left: 0; position: absolute; transition: opacity 0.5s cubic-bezier(.39,.58,.57,1); width: 100%; }
.tiles article:hover::before { opacity: 0; }
.tiles article > div.row { z-index: 4; }
.tiles article:nth-child(3n+1)::before { background-color: rgba(0, 148, 255, 0.75); }

.content-article { background-color: rgb(42, 47, 74); }
    .content-article article { color: rgba(255, 255, 255, 0.95); margin: 4em auto 2em; width: calc(100% - 6em); }


.page-list-wrapper { background-color: rgba(51, 56, 86, 1); display: grid; grid-gap: 10px; grid-template-columns: 30% 70%; }

.page-list-image { grid-column: 1; }
.page-list.content { grid-column: 2; }


.footer-contact-panel { border: solid 1px rgba(212, 212, 255, 0.1); border-bottom: none; border-right: none; color: rgba(255, 255, 255, 1); padding: 3em 0 1em 3em; }
    .footer-contact-panel:first-of-type { border-top: none; }
    .footer-contact-panel:last-of-type { border-bottom: solid 1px rgba(212, 212, 255, 0.1); }

footer { background-color: rgb(36, 41, 67); min-height: 5vh; padding: 0 0 4em; }

.row { max-width: 100%; }


/* ====== FOUNDATION OVERRIDES ====== */
.sticky, .sticky-container { z-index: 100; }
.top-bar { padding: 0.25rem; }
.top-bar, .top-bar ul, .title-bar { background-color: rgba(36, 41, 67, 1); }
.menu-text { color: rgba(255, 255, 255, 1); padding: unset; }


@media screen and (max-width: 800px)
{
    .subheading { width: 80%; }
}