@charset "UTF-8";

:root {
  --header-height: 72px;
  --primary-color: #F00;
  --secondary-color: #111;
  --caption-layer-color: #FF0000CC;
  --container-width: 992px;
  --container-padding: 12px;
  --z-header: 1001;
  --z-sidenav: 1003;
  --z-overlay: 1002;
  --shadow-1: 0 2px 2px 0 #00000024, 0 3px 1px -2px #0000001f, 0 1px 5px 0 #0003;
  --shadow-hover: 0 3px 3px 0 #00000024, 0 1px 7px 0 #0000001f, 0 3px 1px -1px #0003;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/CoveredByYourGrace-Regular.ttf) format('truetype');
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: var(--primary-color);
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 24px;
}

svg {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

h1, h2, h3, h4, h5, h6, .brand-logo, .card-title, header nav ul a, .sidenav__header > span, .btn, .btn-large, .btn-small, .btn-flat {
  font-weight: 400;
}

h1 { font-size: 1.75rem; line-height: 110%; margin: 1.09rem 0 .65rem; text-align: center; }
h2 { font-size: 1.75rem; line-height: 110%; margin: 1.09rem 0 .65rem; text-align: center; }
h3 { font-size: 1.25rem; line-height: 110%; margin: .76rem 0 .46rem; text-align: center; }
h4 { font-size: 1.25rem; line-height: 110%; margin: .76rem 0 .46rem; }

a { color: var(--primary-color); text-decoration: underline; }

p:not(.icon-block p, .card-content p) { padding: 0; text-align: justify; }
.row .col p:not(.inner) { padding: 0 var(--container-padding); }

.col ul.browser-default, .col ol.browser-default { text-align: left; padding-left: 0 !important; }
ul.browser-default li { list-style-type: disc; padding-left: calc(2 * var(--container-padding)) !important; list-style-position: inside; margin-bottom: .5rem; }
footer ul { list-style-type: none; padding-left: 0; }

.divider { height: 1px; overflow: hidden; background-color: #e0e0e0; }

header {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height);
  z-index: var(--z-header); background-color: var(--primary-color);
  color: var(--secondary-color); box-shadow: var(--shadow-1);
}

main.parallax-container {
  position: fixed; top: var(--header-height); bottom: 0; left: 0; right: 0;
  height: calc(100dvh - var(--header-height)); overflow-x: hidden; overflow-y: scroll;
  perspective: 1px; transform-style: preserve-3d; background-color: var(--secondary-color);
}

.header-container {
  max-width: var(--container-width); margin: 0 auto; height: 100%;
  padding: 0 calc(2 * var(--container-padding)); display: flex;
  align-items: center; justify-content: space-between;
}

.container {
  max-width: var(--container-width); margin: 0 auto; width: 100%;
  padding: 0 var(--container-padding); border-radius: 0; border: none;
}

.caption {
  color: var(--secondary-color); text-align: center; max-width: var(--container-width);
  margin: 0 auto; width: 100%; padding: 0 var(--container-padding);
}

.hero-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.content-host {
  position: relative; transform-style: preserve-3d; opacity: 0; transition: opacity .3s ease-out;
}

.hero-group {
  position: absolute; transform-style: preserve-3d;
  height: calc(100dvh - var(--header-height)); width: 100vw;
  left: 50%; transform: translateX(-50%);
}

section.content, footer.site-footer {
  position: absolute; left: 0; right: 0; transform-style: preserve-3d;
  min-height: calc(100dvh - var(--header-height)); display: flex;
  align-items: center; justify-content: center; padding: 2rem 0;
  z-index: 10; background-color: var(--secondary-color);
}

.layer-back { transform: translateZ(-1px) scale(2); }

.hero-layer {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover; background-position: center;
  background-color: var(--secondary-color); transition: opacity .5s ease-in-out; opacity: 0;
}

.hero-layer.is-loaded { opacity: 1; }
.hero-group:first-of-type .hero-layer.layer-back {
  background-image: url(../images/home_parallax_hero_1_1920_1080.webp); opacity: 1;
}

.hero-caption {
  font-size: 4rem; font-weight: 400; line-height: 1.4; display: inline-block;
  color: var(--secondary-color); background-color: var(--caption-layer-color);
  padding: .5rem; text-shadow: none; background-image: none; margin: 0; width: auto;
}

.layer-base {
  transform: translateZ(0); background-color: transparent; opacity: 1;
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.brand-logo {
  font-size: 1.5rem; white-space: nowrap; display: inline-flex; align-items: center;
  height: var(--header-height); line-height: var(--header-height); padding: 0;
  color: var(--secondary-color); text-decoration: none;
}

.brand-logo .logo-text { display: inline-block; vertical-align: middle; text-transform: capitalize; }
.brand-logo img { height: 46px; width: auto; margin-right: 12px; vertical-align: middle; flex-shrink: 0; }

header nav { height: var(--header-height); }
header nav ul { margin: 0; padding: 0; display: flex; height: 100%; list-style-type: none; }
header nav ul li { position: relative; padding: 0; }

header nav ul a {
  color: var(--secondary-color); display: inline-flex; align-items: center;
  justify-content: center; font-size: 1rem; padding: 0 16px; cursor: pointer;
  text-decoration: none; height: 100%; position: relative; overflow: hidden;
  transition: color .3s, background-color .3s;
}

header nav ul a svg { margin-left: 4px; }
header nav ul a:hover { background-color: #efeadd1a; color: var(--secondary-color); }

header nav ul a::after {
  content: ''; position: absolute; bottom: 0; left: 50%; width: 100%; height: 3px;
  background-color: transparent; transition: transform .3s ease-out, background-color .3s ease-out;
  transform: translateX(-50%) scaleX(0); transform-origin: center;
}

header nav ul a:hover::after,
header nav ul li a.active::after { transform: translateX(-50%) scaleX(1); background-color: var(--secondary-color); }
header nav ul li a.active:hover::after { background-color: var(--secondary-color); }

.sidenav-trigger { height: var(--header-height); margin: 0; padding: 0; display: flex; align-items: center; }
.sidenav-trigger svg { width: 40px; height: 40px; fill: var(--secondary-color); }

.sidenav {
  position: fixed; width: 250px; right: 0; top: 0; margin: 0; padding: 0;
  transform: translateX(100%); height: 100%; background-color: var(--secondary-color);
  z-index: var(--z-sidenav); overflow-y: auto; will-change: transform;
  transition: transform .3s ease-out; color: var(--primary-color);
}

.sidenav.is-open { transform: translateX(0); }

.sidenav__overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; height: 100vh;
  background-color: #00000080; z-index: var(--z-overlay);
  transition: opacity .3s ease-out; pointer-events: none;
}

.sidenav__overlay.is-open { opacity: 1; pointer-events: auto; }

.sidenav li { float: none; line-height: 48px; list-style-type: none; }
.sidenav li > a {
  display: block; font-size: 32px; font-weight: 400; height: 72px;
  line-height: 72px; padding: 0 32px;
}
.sidenav li > a:hover { background-color: #1838251a; }

.sidenav__header-li { padding: 0; }
.sidenav__header {
  background-color: var(--primary-color); height: var(--header-height);
  color: var(--secondary-color); display: flex; align-items: center;
  justify-content: space-between; padding: 0 calc(2 * var(--container-padding));
}

.sidenav__close { display: flex; align-items: center; padding: 0; cursor: pointer; }
.sidenav__close svg { width: 40px; height: 40px; fill: var(--secondary-color); }
.sidenav__header > span { font-size: 32px; }

.btn, .btn-large, .btn-small, .btn-flat {
  border: none; border-radius: 2px; display: inline-block; height: 36px;
  line-height: 36px; padding: 0 16px; text-transform: uppercase;
  vertical-align: middle; font-size: 14px; outline: 0; text-decoration: none;
  text-align: center; letter-spacing: .5px; transition: background-color .2s ease-out, box-shadow .2s ease-out;
  cursor: pointer; background-color: var(--primary-color); color: var(--secondary-color); box-shadow: var(--shadow-1);
}

.btn-large { height: 54px; line-height: 54px; font-size: 15px; padding: 0 28px; }
.btn-flat { box-shadow: none; background-color: transparent; }
.btn:hover, .btn-large:hover { box-shadow: var(--shadow-hover); }
.btn-flat:hover { box-shadow: none; background-color: #0000001a; }
.btn[href][class*="wws-"], .btn-large[class*="wws-"] { background-color: var(--primary-color); color: var(--secondary-color); }

article.card {
  position: relative; margin: .5rem 0 1rem; background-color: #fff;
  transition: box-shadow .25s; border-radius: 2px; text-align: center; box-shadow: var(--shadow-1);
}

article.card .card-image { position: relative; overflow: hidden; }
article.card .card-image .card__teaser-image {
  display: block; border-radius: 2px 2px 0 0; position: relative;
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; height: auto; min-height: 0;
}

article.card .card-content { padding: 24px; border-radius: 0 0 2px 2px; text-align: center; }
article.card .card-content p { margin: 0; padding: 0; }
article.card .card-content .card-title, .icon-block h2 { font-weight: 500; font-size: 1.38rem; }
article.card .card-content .card-title { display: block; line-height: 32px; margin-bottom: 8px; }

article.card .card-action {
  background-color: inherit; border-top: 1px solid #a0a0a033;
  position: relative; padding: 16px 24px; text-align: center;
}
article.card .card-action:last-child { border-radius: 0 0 2px 2px; }

.icon-block { text-align: center; }
.icon-block h2 {
  display: flex; flex-direction: column; align-items: center;
  margin-top: .5rem; margin-bottom: .5rem;
}
.icon-block h2 svg { width: 4.025rem; height: 4.025rem; fill: var(--primary-color); margin-bottom: .5rem; }

footer.site-footer {
  background-color: var(--primary-color); color: var(--secondary-color);
  padding: 1.5rem 0 0 0; align-items: flex-end; min-height: 0;
}
.site-footer p { text-align: justify; padding: 0 var(--container-padding); }
.site-footer a { text-decoration: underline; color: var(--secondary-color); }
.site-footer ul { list-style-type: none; padding-left: 0; text-align: left; }
.copyright { padding: 10px 0; min-height: auto; text-align: center; }

.circle { border-radius: 50%; }
img.responsive-img { max-width: 100%; height: auto; }
.padding-top-1rem { padding-top: 1rem; }

@media (min-width: 601px) {
  .row.valign-wrapper-med-up { display: flex; align-items: center; }
}

section.content .row .col img.responsive-img.circle {
  max-width: 75%; height: auto; margin: 0 auto; display: block;
}

@media only screen and (max-width: 992px) {
  .hide-on-med-and-down { display: none !important; }
}

@media only screen and (min-width: 993px) {
  .hide-on-large-only { display: none !important; }
}

@media (max-width: 992px) {
  .hero-caption { font-size: 2.5rem; }
}

.video-wrapper { margin: 2rem 0; width: 100%; }
.video-container {
  position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9;
  background-color: #000; overflow: hidden; border-radius: 2px;
  box-shadow: var(--shadow-1); transform: translateZ(0);
}

.embedded-video { width: 100%; height: 100%; object-fit: cover; display: block; }

@supports not (aspect-ratio: 16 / 9) {
  .video-container { height: 0; padding-bottom: 56.25%; }
  .embedded-video { position: absolute; top: 0; left: 0; height: 100%; }
}

.embeddedPlayButton {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 80px; height: 80px; background: rgba(0, 0, 0, 0.6);
  border: 2px solid #fff; border-radius: 50%; cursor: pointer;
  display: flex; justify-content: center; align-items: center;
  transition: all 0.3s ease; z-index: 2; -webkit-tap-highlight-color: transparent;
}

.embeddedPlayButton svg { width: 40px; height: 40px; fill: #fff; margin-left: 4px; }
.embeddedPlayButton:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--primary-color); border-color: var(--primary-color);
}

.video-playing .embeddedPlayButton { opacity: 0; pointer-events: none; }

.row { margin-left: auto; margin-right: auto; margin-bottom: 40px; display: flex; flex-wrap: wrap; }
.row .col { box-sizing: border-box; padding: 0 var(--container-padding); }

.row .col.s1 { flex-basis: 8.33333%; max-width: 8.33333%; margin-left: auto; left: auto; right: auto; }
.row .col.s2 { flex-basis: 16.66667%; max-width: 16.66667%; margin-left: auto; left: auto; right: auto; }
.row .col.s3 { flex-basis: 25%; max-width: 25%; margin-left: auto; left: auto; right: auto; }
.row .col.s4 { flex-basis: 33.33333%; max-width: 33.33333%; margin-left: auto; left: auto; right: auto; }
.row .col.s5 { flex-basis: 41.66667%; max-width: 41.66667%; margin-left: auto; left: auto; right: auto; }
.row .col.s6 { flex-basis: 50%; max-width: 50%; margin-left: auto; left: auto; right: auto; }
.row .col.s7 { flex-basis: 58.33333%; max-width: 58.33333%; margin-left: auto; left: auto; right: auto; }
.row .col.s8 { flex-basis: 66.66667%; max-width: 66.66667%; margin-left: auto; left: auto; right: auto; }
.row .col.s9 { flex-basis: 75%; max-width: 75%; margin-left: auto; left: auto; right: auto; }
.row .col.s10 { flex-basis: 83.33333%; max-width: 83.33333%; margin-left: auto; left: auto; right: auto; }
.row .col.s11 { flex-basis: 91.66667%; max-width: 91.66667%; margin-left: auto; left: auto; right: auto; }
.row .col.s12 { flex-basis: 100%; max-width: 100%; margin-left: auto; left: auto; right: auto; }
.row .col.offset-s1 { margin-left: 8.33333%; }
.row .col.offset-s2 { margin-left: 16.66667%; }
.row .col.offset-s3 { margin-left: 25%; }

@media only screen and (min-width: 601px) {
  .row .col.m1 { flex-basis: 8.33333%; max-width: 8.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.m2 { flex-basis: 16.66667%; max-width: 16.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.m3 { flex-basis: 25%; max-width: 25%; margin-left: auto; left: auto; right: auto; }
  .row .col.m4 { flex-basis: 33.33333%; max-width: 33.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.m5 { flex-basis: 41.66667%; max-width: 41.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.m6 { flex-basis: 50%; max-width: 50%; margin-left: auto; left: auto; right: auto; }
  .row .col.m7 { flex-basis: 58.33333%; max-width: 58.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.m8 { flex-basis: 66.66667%; max-width: 66.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.m9 { flex-basis: 75%; max-width: 75%; margin-left: auto; left: auto; right: auto; }
  .row .col.m10 { flex-basis: 83.33333%; max-width: 83.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.m11 { flex-basis: 91.66667%; max-width: 91.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.m12 { flex-basis: 100%; max-width: 100%; margin-left: auto; left: auto; right: auto; }
  .row .col.offset-m1 { margin-left: 8.33333%; }
  .row .col.offset-m2 { margin-left: 16.66667%; }
  .row .col.offset-m3 { margin-left: 25%; }
}

@media only screen and (min-width: 993px) {
  .row .col.l1 { flex-basis: 8.33333%; max-width: 8.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.l2 { flex-basis: 16.66667%; max-width: 16.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.l3 { flex-basis: 25%; max-width: 25%; margin-left: auto; left: auto; right: auto; }
  .row .col.l4 { flex-basis: 33.33333%; max-width: 33.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.l5 { flex-basis: 41.66667%; max-width: 41.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.l6 { flex-basis: 50%; max-width: 50%; margin-left: auto; left: auto; right: auto; }
  .row .col.l7 { flex-basis: 58.33333%; max-width: 58.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.l8 { flex-basis: 66.66667%; max-width: 66.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.l9 { flex-basis: 75%; max-width: 75%; margin-left: auto; left: auto; right: auto; }
  .row .col.l10 { flex-basis: 83.33333%; max-width: 83.33333%; margin-left: auto; left: auto; right: auto; }
  .row .col.l11 { flex-basis: 91.66667%; max-width: 91.66667%; margin-left: auto; left: auto; right: auto; }
  .row .col.l12 { flex-basis: 100%; max-width: 100%; margin-left: auto; left: auto; right: auto; }
  .row .col.offset-l1 { margin-left: 8.33333%; }
  .row .col.offset-l2 { margin-left: 16.66667%; }
  .row .col.offset-l3 { margin-left: 25%; }
}

@keyframes arrow-pulse {
  0% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(10px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.7; }
}

.scroll-down-arrow {
  position: absolute; bottom: 15%; left: 50%; margin-left: -48px;
  width: 96px; height: 96px; animation: arrow-pulse 2s infinite ease-in-out;
  cursor: pointer; transition: transform 0.2s; z-index: 10;
}

.scroll-down-arrow svg { width: 100%; height: 100%; fill: var(--primary-color); }