:root {
  /* spacing */
  --spacing-small: 10px;
  --spacing-medium: 20px;
  --spacing-medium-2: 40px;
  --spacing-large: 60px;
  --spacing-extra-large: 140px;
  /* colours */
  --white: #FFFFFF;
  --primary: #002F87;
  --secondary: #00A6CE;
  --accent: #FF6B00;
  --yellow-accent: #FFD100;
  --magenta-accent: #D41367;
  --lt-green-accent: #CDDE00;
  --light: #a5d6e5;
  --light2: #64b7d2;
  --light3: #fac29c;
  /* lt orange*/
  /* fonts */
  --font1: futura-pt;
  --font2: futura-pt-bold;
  --font3: cubano;
}
/* make all icon box clickable*/
.elementor-widget-icon-box a:after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.elementor-icon-box-icon {
  z-index: 2;
}
/* bg colours */
.bg-primary {
  background-color: var(--primary);
}
/* dk blue  */
.bg-secondary {
  background-color: var(--secondary);
}
/* lt blue  */
.bg-accent {
  background-color: var(--accent);
}
/* orange */
.bg-light {
  background-color: var(--light);
}
.bg-light2 {
  background-color: var(--light2);
}
.bg-light3 {
  background-color: var(--light3);
  /* lt orange */
}
.bg-yellow {
  background-color: var(--yellow-accent);
}
.elementor-element h1,
.elementor-element h2,
.elementor-element h3,
.elementor-element h4,
.elementor-element h5,
.elementor-element h6 {
  padding-top: var(--spacing-small);
  padding-bottom: var(--spacing-small);
}
p {
  text-wrap: pretty;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-family: 'futura-pt';
}
p a {
  color: var(--accent);
}
p a:hover {
  color: var(--primary);
}
h1,
.h1 {
  font-size: clamp(5rem, 3vw, 8rem);
  font-family: 'cubano';
  color: var(--primary);
  line-height: 1;
}
h2,
.h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-family: 'cubano';
  color: var(--primary);
  padding-bottom: var(--spacing-small);
}
/* for fortis alberta title */
.to-lowercase {
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
}
h3,
.h3 {
  font-size: clamp(1.25rem, 1.875rem, 1.875rem);
  font-family: 'cubano';
  color: var(--primary);
  padding-bottom: var(--spacing-medium);
}
.name {
  text-wrap: pretty;
  font-size: clamp(1rem, 1.25rem, 1.25rem);
  line-height: 16px;
  font-family: 'futura-pt';
  text-transform: uppercase;
  margin-bottom: 8px;
}
.title {
  text-wrap: pretty;
  font-size: 14px;
  line-height: 16px;
  font-family: 'futura-pt';
  margin-bottom: 20px;
}
.names {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 900;
  margin: 0px;
}
.name-title {
  font-size: 16px;
  text-transform: uppercase;
  margin: 0px;
}
/* photo caption */
.wp-caption {
  font-size: 8px;
  font-family: 'futura-pt';
  text-transform: uppercase;
  color: var(--primary);
}
p.small {
  font-size: 12px;
  font-weight: 600;
  margin: 0px;
}
.photocredit p {
  font-size: 12px;
  text-transform: uppercase;
}
.callout p {
  text-wrap: pretty;
  font-size: clamp(1rem, 1.25rem, 1.25rem);
  font-family: 'cubano';
  margin-top: var(--spacing-medium);
  margin-bottom: var(--spacing-medium);
  padding: var(--spacing-medium);
  border-radius: 20px;
  border: 6px solid var(--accent);
}
.caps {
  text-transform: uppercase;
}
/* white type */
.white h1,
.white h2,
.white h3,
.white h4,
.white p {
  color: white;
}
/* orange type */
.type-accent h2,
.type-accent h3,
.type-accent h4,
.type-accent p {
  color: var(--accent);
}
/* lt blue type */
.type-accent2 h2,
.type-accent2 h3,
.type-accent2 h4,
.type-accent2 p {
  color: var(--secondary);
}
.elementor-menu-toggle:before {
  font-family: "futura-pt";
  font-weight: 400;
  content: "MENU";
}
.elementor-menu-toggle.elementor-active:before {
  font-family: "futura-pt";
  font-weight: 400;
  content: 'CLOSE';
}
.elementor-nav-menu__container {
  width: 300px;
}
.elementor-nav-menu--dropdown .elementor-nav-menu__container {
  width: 300px;
}
.menu-anchor-container {
  position: absolute;
}
.arrow-container {
  font-size: 20px;
  font-family: 'futura-pt';
  text-transform: uppercase;
  margin-bottom: 8px;
}
/* .arrow-down is applied to the a in html */
.arrow-down,
.arrow-up {
  background-color: var(--accent);
  padding: var(--spacing-small);
  border-radius: 20px;
  border: 4px solid white;
  color: white;
}
/* containers */
/* section */
.flex-100 {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 40px;
  padding: 0px;
  margin: 0px;
}
/* column with padding l and r */
.flex-section {
  padding-left: var(--spacing-extra-large);
  padding-right: var(--spacing-extra-large);
}
/* for cases where gap needs to be 0 */
.gap-zero {
  gap: 0px;
}
/* widths */
.width-15 {
  width: 15%;
}
.width-25 {
  width: 25%;
}
.width-33 {
  width: 33%;
}
.width-50 {
  width: 48%;
}
.width-66 {
  width: 66%;
}
.width-75 {
  width: 75%;
}
.width-100 {
  width: 100%;
}
/* spacing */
.zero-pad-left {
  padding-left: 0px;
}
.zero-pad-right {
  padding-right: 0px;
}
.zero-pad-all {
  padding: 0px;
}
/* padding */
.all-padding-medium {
  padding: var(--spacing-medium);
}
.top-medium-space {
  padding-top: var(--spacing-medium);
}
.bottom-medium-space {
  padding-bottom: var(--spacing-medium);
}
.top-large-space {
  padding-top: var(--spacing-large);
}
.bottom-large-space {
  padding-bottom: var(--spacing-large);
}
.right-medium-space {
  padding-right: var(--spacing-medium);
}
.left-medium-space {
  padding-left: var(--spacing-medium);
}
.all-medium-space {
  padding: var(--spacing-medium);
}
.all-large-space {
  padding: var(--spacing-large);
}
/* margins */
.right-medium-margin {
  margin-right: var(--spacing-medium);
}
.left-medium-margin {
  margin-left: var(--spacing-medium);
}
.right-large-margin {
  margin-right: var(--spacing-large);
}
.left-large-margin {
  margin-left: var(--spacing-large);
}
.top-large-margin {
  margin-top: var(--spacing-large);
}
.bottom-large-margin {
  margin-bottom: var(--spacing-large);
}
/* feature image on ft mac */
/* for footer, for board header */
.line-right {
  border-right: 2px solid #fff;
  margin-right: 20px;
  padding-right: 20px;
}
.line-right-ltblue {
  border-right: 2px solid white;
  margin-right: 20px;
  padding-right: 20px;
}
.border-bottom {
  border-bottom: 6px solid white;
  margin-bottom: 20px;
}
.clip {
  overflow: hidden;
}
.image-container {
  padding: 0px;
  padding-bottom: var(--spacing-medium);
}
.image-container img {
  border-radius: 20px;
  border: 6px solid var(--secondary);
}
/* style gallery images */
.e-gallery-image {
  border-radius: 20px;
  border: 6px solid var(--secondary);
}
.border-white {
  border: 6px solid white;
  border-radius: 20px;
}
.border-blue {
  border: 6px solid var(--secondary);
  border-radius: 20px;
}
.border-dark-blue {
  border: 6px solid var(--primary);
  border-radius: 20px;
}
.border-orange {
  border: 6px solid var(--accent);
  border-radius: 20px;
}
.sponsor-logo-level-2 {
  width: 30%;
  padding: 30px;
  justify-content: center;
}
.button1 .elementor-button {
  background: var(--primary);
  color: white;
  font-family: var(--font3);
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  margin-top: 10px;
}
.button1 .elementor-button:hover {
  color: white;
  background: #0071CE;
}
/* alberta map  */
.map-section-title {
  padding: 0px;
  font-family: var(--font1);
}
.map-section-interns h4,
.map-section-employers h4 {
  font-size: 18px;
  font-family: var(--font3);
  text-transform: uppercase;
}
.map-section-interns {
  color: white;
  width: 200px;
  padding: 0px;
  background-color: #002F87;
  border: 2px solid white;
}
.map-section-employers {
  font-family: var(--font3);
  text-transform: uppercase;
  color: white;
  width: 200px;
  padding: 0px;
  background: #00A6CE;
  border: 2px solid white;
}
#left .elementor-counter .elementor-counter-number-prefix {
  text-align: right;
  display: none;
}
#left .elementor-counter-title {
  text-align: left;
}
span.director {
  text-transform: uppercase;
  font-family: 'futura-pt-bold';
  color: #FFD100;
}
#light-blue .elementor-button-link {
  box-shadow: 4px 4px 0px #00A6CE;
  transition: all 0.3s ease 0s;
}
#light-blue .elementor-button-link:hover {
  box-shadow: 7px 7px 0px #00A6CE;
  color: #00A6CE;
  transform: translate(-7px, -7px);
}
#dark-blue .elementor-button-link {
  box-shadow: 4px 4px 0px #002F87;
  transition: all 0.3s ease 0s;
}
#dark-blue .elementor-button-link:hover {
  box-shadow: 7px 7px 0px #002F87;
  color: #002F87;
  transform: translate(-7px, -7px);
}
#orange .elementor-button-link {
  box-shadow: 4px 4px 0px #FF6B00;
  transition: all 0.3s ease 0s;
}
#orange .elementor-button-link:hover {
  box-shadow: 7px 7px 0px #FF6B00;
  color: #FF6B00;
  transform: translate(-7px, -7px);
}
#pink .elementor-button-link {
  box-shadow: 4px 4px 0px #D41367;
  transition: all 0.3s ease 0s;
}
#pink .elementor-button-link:hover {
  box-shadow: 7px 7px 0px #D41367;
  color: #D41367;
  transform: translate(-7px, -7px);
}
#green .elementor-button-link {
  box-shadow: 4px 4px 0px #CDDE00;
  transition: all 0.3s ease 0s;
}
#green .elementor-button-link:hover {
  box-shadow: 7px 7px 0px #CDDE00;
  color: #CDDE00;
  transform: translate(-7px, -7px);
}
#yellow .elementor-button-link {
  box-shadow: 4px 4px 0px #FFD100;
  transition: all 0.3s ease 0s;
}
#yellow .elementor-button-link:hover {
  box-shadow: 7px 7px 0px #FFD100;
  color: #FFD100;
  transform: translate(-7px, -7px);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
svg {
  display: block;
  fill: currentColor;
}
.credits {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  font-size: 0.75rem;
}
.credits > span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* 1300px and smaller screen sizes */
/* 768px and smaller screen sizes */
/* 400px and smaller screen sizes */
/* ANIMATIONS - base*
Add class .animation-element to any element to be animated only in window/

/* Code to add 'in-view' class in elementor custom code 
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;
  }
}
@keyframes entry-default {
  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
*/
/* The default entrance animation assigned to sections */
.entry-default.in-view {
  animation-name: entry-default;
  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: 00ms;
}
.entry-fade-up.in-view {
  animation-name: entry-fade-up;
  animation-duration: 0.7s;
  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-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;
  animation-delay: 500ms;
}
.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;
}
/* text going across screen */
.left-to-right-infinite-crawl {
  animation-name: bgimageacross;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
@keyframes bgimageacross {
  0% {
    transform: translate(-1500px, 0px);
  }
  100% {
    transform: translate(1500px, 0px);
  }
}
/* ALBERTA map animations */
.entry-fade-down-map.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-map.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: 1000ms;
}
.entry-fade-left-map.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: 1500ms;
}
@media (max-width: 1300px) {
  :root {
    --spacing-small: 20px;
    --spacing-large: 20px;
    --spacing-extra-large: 60px;
  }
  /* image float for ft mac image */
}
@media (max-width: 768px) {
  :root {
    --spacing-small: 10px;
    --spacing-large: 10px;
    --spacing-extra-large: 20px;
  }
  /* make columns full width */
  .width-15 {
    width: 100%;
  }
  .width-25 {
    width: 100%;
  }
  .width-33 {
    width: 100%;
  }
  .width-50 {
    width: 100%;
  }
  .width-66 {
    width: 100%;
  }
  .width-75 {
    width: 100%;
  }
  .sponsor-logo-level-2 {
    width: 50%;
    padding: 20px;
  }
  /* for footer, for board header */
  .line-right {
    border-right: none;
    margin-right: 20px;
    padding-right: 20px;
    border-bottom: 2px solid white;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
  .line-right-ltblue {
    border-right: none;
    margin-right: 0px;
    padding-right: 0px;
    border-bottom: 2px solid white;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
}
@media (max-width: 400px) {
  :root {
    --spacing-small: 10px;
    --spacing-large: 10px;
    --spacing-extra-large: 20px;
  }
  .sponsor-logo-level-2 {
    width: 100%;
    padding: 20px;
  }
}