:root {
  --spacing-small: 10px;
  --spacing-medium: 20px;
  --spacing-medium-2: 40px;
  --spacing-large: 60px;
  --spacing-extra-large: 100px;
  --neg-spacing-large: -80px;
  --hero-height: 650px;
  /* colours */
  --primary: #343434;
  /* black */
  --secondary: #7D7C73;
  /* gray  */
  --accent: #F58220;
  /* orange */
  --red-accent: #D12726;
  /* red */
  /* fonts */
  --font1: oswald;
  --font2: 'open sans';
  --font3: 'work sans';
}
/* Text sizes - with CLAMP to make fluid */
/* body text */
p {
  text-wrap: pretty;
  font-size: clamp(1rem, 1.25rem, 1.25rem);
  font-family: var(--font2);
  font-weight: 400;
}
p a {
  color: var(--accent);
}
p a:hover {
  color: var(--primary);
}
p strong {
  color: var(--accent);
  font-weight: 900;
}
h1,
.hero-title h1,
.h1 {
  font-size: clamp(1.875rem, 3.875rem, 3.875rem);
  font-family: var(--font1);
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
}
h2,
.h2 {
  font-size: clamp(2.125rem, 3.167rem, 3rem);
  font-family: var(--font1);
  font-style: normal;
  font-weight: 600;
  color: var(--primary);
  padding-bottom: var(--spacing-medium);
}
h3,
.h3 {
  font-size: clamp(1.25rem, 1.875rem, 1.875rem);
  font-family: var(--font1);
  font-weight: 600;
  color: var(--primary);
  padding-bottom: 0px;
}
.photocredit p {
  font-size: 12px;
  text-transform: uppercase;
}
.callout p {
  text-wrap: pretty;
  font-size: clamp(1rem, 1.25rem, 1.25rem);
  font-family: var(--font2);
  margin-top: var(--spacing-medium);
  margin-bottom: var(--spacing-medium);
  padding: var(--spacing-medium);
  border-radius: 20px;
  border: 6px solid var(--accent);
}
.text-container .footer-text {
  font-size: 14px;
}
/* for bullets */
.text-container .left-column .elementor-widget-text-editor ul {
  padding-top: 8px;
  display: inline-block;
  list-style: inside none;
  margin-left: 0px;
  text-indent: -40px;
}
.text-container .left-column .elementor-widget-text-editor ul li::before {
  font-family: var(--font1);
  font-weight: 900;
  content: ">>>";
  color: var(--accent);
  padding-right: 18px;
}
.text-container .left-column .elementor-widget-text-editor ul li {
  font-family: var(--font2);
  font-size: clamp(1rem, 1.25rem, 1.25rem);
  padding-bottom: 18px;
}
/* reverse type  */
.white h1,
.white h2,
.white h3,
.white h4,
.white p {
  color: white;
}
/* layout containers - classes applied in ele */
.spacer {
  height: var(--spacing-extra-large);
}
.text-container {
  padding: 0px;
}
.text-container-top {
  padding: 0px;
  padding-top: var(--spacing-large);
}
.two-columns {
  padding-left: var(--spacing-large);
}
.left-column {
  padding-top: var(--spacing-large);
  padding-bottom: var(--spacing-large);
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
.left-column-top {
  padding-top: 0;
  padding-bottom: var(--spacing-large);
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
.right-column {
  padding-top: var(--spacing-large);
  padding-bottom: var(--spacing-large);
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
.right-column-top {
  padding-top: 0;
  padding-bottom: var(--spacing-large);
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
.column-title {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
.four-column {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--spacing-medium-2);
  padding-right: var(--spacing-medium-2);
}
.small-column {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
}
.hero {
  padding: 0px;
  height: var(--hero-height);
}
.hero-overlay {
  width: 42%;
  margin-top: var(--spacing-large);
  margin-bottom: -60px;
  margin-right: var(--spacing-large);
  padding-top: var(--spacing-large);
  padding-bottom: var(--spacing-large);
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
.hero-title {
  border: 0px;
  border-left: solid 20px var(--accent);
  margin-left: var(--neg-spacing-large);
  padding-left: var(--spacing-large);
}
.page-title {
  padding: 0px;
}
.page-title-overlay {
  width: 42%;
  margin-top: var(--spacing-large);
  margin-bottom: -60px;
  margin-right: var(--spacing-large);
  margin-left: var(--spacing-large);
  padding-top: var(--spacing-large);
  padding-bottom: var(--spacing-large);
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
/* feature images */
.image-container {
  padding-bottom: var(--spacing-medium);
  border: solid var(--accent) 2px;
  border-radius: 20px;
}
.product-image img {
  border-bottom: solid var(--accent) 20px;
}
/* feature button */
.button1 a {
  font-family: 'oswald';
  font-weight: 700;
  text-transform: uppercase;
  font-size: 28px;
  border-left: solid 12px black;
}
.button1 a:hover {
  background: var(--accent);
  border-left: solid 0px black;
  border-right: solid 12px black;
}
/* logos */
/* SPONSOR LOGOS - assigned to container*/
.sponsor-logo-level-2 {
  padding: 30px;
}
/* ANIMATIONS - base*/
/* Code to add 'in-view' class in code snippets
JS to detect on page elements is in JS widget on the page 
*/
@keyframes entry-fade-up {
  0% {
    transform: translate(0px, 30px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-down {
  0% {
    transform: translate(0px, -60px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-right {
  0% {
    transform: translate(-60px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-right-long {
  0% {
    transform: translate(-500px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-right-map {
  0% {
    transform: translate(-60px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-left {
  0% {
    transform: translate(60px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-left-long {
  0% {
    transform: translate(500px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-left-map {
  0% {
    transform: translate(60px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes entry-fade-in {
  0% {
    transform: translate(0px, 20px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
/* CALL animations. 
Add .animated-element class to element that will animate
Then add animation type to element. In ele css class: 
animation-element entry-fade-up
*/
.entry-fade-up.in-view {
  animation-name: entry-fade-up;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-down.in-view {
  animation-name: entry-fade-down;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-right.in-view {
  animation-name: entry-fade-right;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 200ms;
}
.entry-fade-right-long.in-view {
  animation-name: entry-fade-right;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-right-500.in-view {
  animation-name: entry-fade-right;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-left.in-view {
  animation-name: entry-fade-left;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-left-long.in-view {
  animation-name: entry-fade-left;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-left-1000.in-view {
  animation-name: entry-fade-left;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-left-1000.in-view {
  animation-name: entry-fade-left;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 1000ms;
}
.entry-fade-in.in-view {
  animation-name: entry-fade-in;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
.entry-fade-in-500.in-view {
  animation-name: entry-fade-in;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 500ms;
}
.entry-fade-in-1000.in-view {
  animation-name: entry-fade-in;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-fill-mode: both;
  animation-delay: 1000ms;
}
/* crossbuck effect */
@keyframes cb-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes cb-fade-in-out {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* blinking light */
.cb-fade-in-out.in-view {
  animation-name: cb-fade-in-out;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-delay: 0ms;
}
/* blinking light fade in */
.cb-fade-in {
  opacity: 0;
}
.cb-fade-in:hover {
  opacity: 1;
}
/* animated track */
@keyframes lineacross {
  0% {
    transform: translate(-6400px, 0px);
  }
  100% {
    transform: translate(1800px, 0px);
  }
}
@keyframes lineacross-2 {
  0% {
    transform: translate(-6400px, 0px);
  }
  100% {
    transform: translate(1800px, 0px);
  }
}
/* container */
.track-across {
  z-index: 10;
  margin-top: -40px;
}
/* container */
.track-animate {
  opacity: 0.5;
  padding: 0px;
  animation-name: lineacross;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.track-animate-2 {
  opacity: 0.5;
  padding: 0px;
  animation-name: lineacross-2;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 00ms;
}
@media (max-width: 1300px) {
  :root {
    /* add spacing to column containers for smaller screens */
    --spacing-small: 20px;
    --spacing-large: 20px;
    --spacing-medium-2: 0px;
    /* adjust left col spacing*/
    --spacing-extra-large: 60px;
    --neg-spacing-large: -40px;
    --hero-height: 500px;
    --spacing-extra-large: 100px;
  }
}
@media (max-width: 768px) {
  :root {
    /* add spacing to column containers for smaller screens */
    --spacing-small: 10px;
  }
  /* width 65% */
  .logo-container {
    width: 65%;
    padding: 10px;
  }
  .menu-toggle-container {
    width: 35%;
  }
  /* SPONSOR LOGOS - assigned to container*/
  .sponsor-logo-level-2 {
    width: 50%;
    padding: 20px;
  }
}
@media (max-width: 400px) {
  .sponsor-logo-level-2 {
    width: 100%;
    padding: 20px;
  }
}