@font-face {
    font-family: 'cairomedium';
    src: url('fonts/cairo-medium-webfont.woff2') format('woff2'),
         url('fonts/cairo-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cairobold';
    src: url('fonts/cairo-bold-webfont.woff2') format('woff2'),
         url('fonts/cairo-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'merriweatherbold';
    src: url('fonts/merriweather-bolditalic-webfont.woff2') format('woff2'),
         url('fonts/merriweather-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -1rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

:root {
  --gradient-color-1: #0d0712; 
  --gradient-color-2: #361358; 
  --gradient-color-3: #160830;  
  --gradient-color-4: #621f6b;

  --palette--page-base: var( --gradient-color-1 );
  --palette--page-contrast: #fff;
  --palette--primary: #93fcff;
  --palette--secondary: #fee27f;
  --palette--tertiary: #f45ef5;

  --typography--face-body: cairomedium, sans-serif;
  --typography--face-heading: merriweatherbold, sans-serif;

  --typography--weight-heading: 600;

  --spacer--gutter: 40px;
  --spacer--xs: .625rem;
  --spacer--sm: 1.25rem;
  --spacer--md: 2.5rem;
  --spacer--lg: 5rem;
  --spacer--xl: 7.5rem;

  --menuicon-width: var( --spacer--sm );
  --menuicon-height: 2px;
  --menuicon-spacing: 4px;

  --grid-columns: 12;

  --animate-duration: .2s;
  --animate-delay: 1s;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  background-color: var(--gradient-color-1);
  color: var(--palette--page-contrast);
  box-sizing: border-box;
  font-family: var(--typography--face-body);
  font-size: 1rem;
  line-height: 2em;
}

@media screen and (min-width: 3000px) {
  html {
    font-size: 2rem;
  }
}

body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

.image--wide {
  max-width: none;
  width: 100%;
}

h1,
.h1,
h2,
.h2 {
  font-family: var(--typography--face-heading);
  font-weight: var(--typography--weight-heading);
}

h1,
.h1 {
  font-size: 3.5rem;
  line-height: 1em;
}

@media screen and (min-width: 767px) {
  h1,
  .h1 {
    font-size: 6rem;
  }
}

h2,
.h2 {
  font-size: 2.5rem;
  line-height: 1em;
}

@media screen and (min-width: 767px) {
  h2,
  .h2 {
    font-size: 4rem;
  }
}

h3,
.h3 {
  font-size: 1.5rem;
  line-height: 1em;
}

@media screen and (min-width: 767px) {
  h3,
  .h3 {
    font-size: 2.75rem;
  }
}

a {
  color: inherit;
}

.text--uc,
.text--cta,
.c-btn,
.text--card {
  text-transform: uppercase;
}

.text--md {
  font-size: 1rem;
  line-height: 1.8;
}

@media screen and (min-width: 767px) {
  .text--md {
    font-size: 1.25rem;
    line-height: 2em;
  }
}

.text--lg {
  font-size: 1.25rem;
  line-height: 1.8;
}

@media screen and (min-width: 767px) {
  .text--lg {
    font-size: 1.5rem;
    line-height: 2em;
  }
}

.text--card {
  font-family: inherit;
}

.text--xl,
.text--card {
  font-size: 1.5rem;
  line-height: 1.5em;
}

.text--xxl {
  font-size: 1.75rem;
  line-height: 1.6;
}

@media screen and (min-width: 767px) {
  .text--xxl {
    font-size: 2.5rem;
  }
}

.text--sm,
.text--cta,
.c-btn {
  font-family: var(--typography--face-body);
  font-size: .9rem;
  letter-spacing: .075em;
}

#gradient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width:100%;
  height:100%;

}

.o-container {
  width: 100%;
  max-width: 1432px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacer--gutter);;
  padding-right: var( --spacer--gutter );
}

@media screen and (min-width: 3000px) {
  .o-container {
    max-width: 2500px;
  }
}

.o-container--sm {
  max-width: 1188px;
}

@media screen and (min-width: 3000px) {
  .o-container--sm {
    max-width: 1900px;
  }
}

.o-container--xs {
  max-width: 940px;
}

@media screen and (min-width: 3000px) {
  .o-container--xs {
    max-width: 1200px;
  }
}

/**
 * Section
 */

.o-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  padding-top: var( --spacer--lg );
  padding-bottom: var( --spacer--lg );
  position: relative;
  width: 100%;
}

@media screen and ( min-width: 768px ) {
  .o-section {
    padding-top: var( --spacer--xl );
    padding-bottom: var( --spacer--xl );
  }
}

.o-section--tall {
  min-height: 80vh;
}

@media screen and ( min-width: 767px ) {
  .o-section--tall {
    min-height: 100vh;
  }
}

@media screen and ( min-width: 1920px ) {
  .o-section--tall {
    min-height: 1000px;
  }
}

.o-section__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.o-section__media img {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center;
}

.o-section__content {
  width: 100%;
}

.o-section--gradient-media .o-section__media::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(13,7,18,1) 0%, rgba(13,7,18,0) 30%, rgba(13,7,18,0) 70%, rgba(0,0,0,1) 100%);
}

.o-section--gradient-media.js-in-view .o-section__media {
  opacity: 0;
  position: fixed;
  transition: all .75s ease;
}

.o-section--gradient-media.js-in-view.in-view .o-section__media {
  opacity: .4;
}

.o-section--cta .o-section__media {
  background-color: rgba( 0, 0, 0, .3 );
}

.o-section--cta h2 {
  max-width: 15em;
  margin-left: auto;
  margin-right: auto;
}

.c-media-text {
  max-width: 30rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 992px) {
  .c-media-text {
    margin-left: 0;
    text-align: left;
  }
}

/**
 * Icons
 */
svg {
  width: 1.5em;
  height: 1.5em;
  fill: currentColor;
}

.o-icon--lg {
  width: 3em;
  height: 3em;
}

.o-icon--xl {
  width: 5em;
  height: 5em;
}

.o-icon--xxl {
  width: 14em;
  height: 14em;
}

@media screen and (min-width: 767px) {
  .o-icon--xxl {
    width: 20em;
    height: 20em;
  }
}

/**
 * Header
 */
.c-header {
  position: relative;
  z-index: 10;
  margin-bottom: -100px;
  opacity: 0;
  transform: translateY(-1rem);

  animation-name: fadeInDown;
  animation-duration: var(--animate-duration);
  animation-fill-mode: both;
  animation-delay: .5s;
}

.c-header__primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}

.c-header__logo {
  padding-top: var( --spacer--sm );
  padding-bottom: var( --spacer--sm );
  margin-right: 10%;
  position: relative;
  z-index: 5;
}

.c-header__toggle {
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: hidden;
  height: auto;
  margin-left: auto;
  position: relative;
  z-index: 5;
}

.c-header__toggle > * {
  pointer-events: none;
}

@media screen and (min-width: 767px) {
  .c-header__toggle {
    display: none;
  }
}

@media screen and (max-width: 766px) {
  .c-header__toggle[aria-expanded="false"] + .c-header__nav {
    display: none;
  }

  .c-header__toggle[aria-expanded="true"] + .c-header__nav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba( 13, 7, 18, .9 );
    padding-top: 90px;
  }
}

.c-header__nav {
  width: 100%;
}

@media screen and (min-width: 767px) {
  .c-header__nav {
    width: auto;
    flex-grow: 1;
  }
}

.c-header__nav ul {
  display: flex;
  flex-grow: 1;
  list-style: none;
  flex-direction: column;
  padding-left: 0;
}

@media screen and (min-width: 767px) {
  .c-header__nav ul {
    justify-content: space-between;
    flex-direction: row;
  }
}

.c-header__nav ul li {
  list-style: none;
}

.c-header__nav a {
  display: block;
  padding: var( --spacer--xs ) var( --spacer--gutter );
  text-decoration: none;
  position: relative;
}

.c-header__nav a::after,
.c-header__nav a::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  z-index: -1;
  transition: all .2s ease;
  border-radius: var( --spacer--md );
  opacity: 0;
}

.c-header__nav a::before {
  height: 100%;
  width: 0;
  top: 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}

.c-header__nav a::after {
  width: 100%;
  height: 0;
  bottom: 0;
  border-left: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

.c-header__nav a:hover::after,
.c-header__nav a:hover::before {
  opacity: 1;
}

.c-header__nav a:hover::after {
  height: 100%;
}

.c-header__nav a:hover::before {
  width: 100%;
}

@media screen and (min-width: 767px) {
  .c-header__nav a {
    padding: var( --spacer--xs ) var( --spacer--sm );
  }
}

/**
 * Menu icon
 */
.c-menu-icon {
  width: var( --menuicon-width );
  height: calc( var( --menuicon-height ) * 3 + var( --menuicon-spacing ) * 2 );
  display: inline-block;
  position: relative;
}

.c-menu-icon__inner {
  display: block;
  top: 50%;
  margin-top: calc( var( --menuicon-height ) * -1 );
}

.c-menu-icon__inner,
.c-menu-icon__inner::before,
.c-menu-icon__inner::after {
  width: var( --menuicon-width );
  height: var( --menuicon-height );
  background-color: currentColor;
  border-radius: 0;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.c-menu-icon__inner::before,
.c-menu-icon__inner::after {
  content: "";
  display: block;
}

.c-menu-icon__inner::before {
  left: 0;
  top: calc( ( var( --menuicon-spacing ) + var( --menuicon-height ) ) * -1 );
}

.c-menu-icon__inner::after {
  right: 0;
  top: calc(var( --menuicon-height ) + var( --menuicon-spacing ));
}


[aria-expanded="true"] .c-menu-icon__inner {
  transition-delay: 0s;
  transition-timing-function: ease-out;
  background-color: transparent !important;
}

[aria-expanded="true"] .c-menu-icon__inner::before {
  left: calc( var( --menuicon-width ) * -2 );
  top: calc( var( --menuicon-width ) * -2 );
  transform: translate3d( calc( var( --menuicon-width ) * 2 ), calc( var( --menuicon-width ) * 2 ), 0) rotate(45deg);
  transition: left 0.125s ease-out,
              top 0.05s 0.125s linear,
              transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

[aria-expanded="true"] .c-menu-icon__inner::after {
  right: calc( var( --menuicon-width ) * 0 );
  top: calc( var( --menuicon-width ) * 0 );
  transform: translate3d( calc( var( --menuicon-width ) * 0 ), calc( var( --menuicon-width ) * 0 ), 0) rotate(-45deg);
  transition: right 0.125s ease-out,
              top 0.05s 0.125s linear,
              transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}


/**
 * Buttons
 */

.c-btn {
  display: inline-block;
  padding: var( --spacer--xs ) var( --spacer--md ); 
  border-radius: var( --spacer--md );
  text-decoration: none;
  border: 1px solid var( --palette--page-contrast );
  transition: all .2s ease;
}

.c-btn:hover {
  color: var( --palette--page-base );
  background-color: var( --palette--primary );
  border-color: var( --palette--primary );
}

.c-btn {
  margin-right: var( --spacer--xs );
}

p > .c-btn:last-child {
  margin-right: 0;
}

/**
 * Card
 */
.c-card {
  padding: var( --spacer--md );
  position: relative;
}

.c-card svg {
  opacity: .8;
}

.c-card h2 a {
  text-decoration: none;
}

.c-card h2 a::after,
.c-card h2 a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.c-card h2 a::before {
  background: rgba( 255, 255, 255, .1 );
  transition: all .2s ease;
  box-shadow: 0 0 var( --spacer--md ) rgba( 0, 0, 0, 0 );
}

.c-card h2 a:hover::before {
  background: rgba( 255, 255, 255, .15 );
  box-shadow: 0 0 var( --spacer--lg ) rgba( 0, 0, 0, .1 );
}

.c-card--primary svg {
  color: var( --palette--primary );
}

.c-card--primary a::before {
  border-top: 3px solid var( --palette--primary );
}

.c-card--secondary svg {
  color: var( --palette--secondary );
}

.c-card--secondary a::before {
  border-top: 3px solid var( --palette--secondary );
}

.c-card--tertiary svg {
  color: var( --palette--tertiary );
}

.c-card--tertiary a::before {
  border-top: 3px solid var( --palette--tertiary );
}

/**
 * Hero
 */
.c-hero {
/*  min-height: 100vh;*/
  padding-top: var( --spacer--lg );
  padding-bottom: var( --spacer--lg );
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 992px) {
  main > .c-hero:first-child {
    padding-top: var( --spacer--lg );
  }
}

.c-hero > * {
  width: 100%;
}

.c-hero h1 {
  max-width: 8em;
  margin-bottom: var(--spacer--md);
  opacity: 0;
  transform: translateY(1rem);

  animation-name: fadeInUp;
  animation-duration: var(--animate-duration);
  animation-fill-mode: both;
  animation-delay: .75s;
}

.c-hero p {
  max-width: 24em;

  animation-name: fadeInUp;
  animation-duration: var(--animate-duration);
  animation-fill-mode: both;
  opacity: 0;
  transform: translateY(1rem);
  animation-delay: 1s;
}

@media screen and (min-width: 992px) {
  .c-hero p {
    margin-left: 12.5%;
  }
}

#hero-halo {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  transition: all .75s ease;
}

@media screen and (min-width: 992px) {
  #hero-halo {
    opacity: .8;
  }
}

#hero-halo.hidden {
  opacity: 0;
}

#hero-halo.remove {
  display: none;
}

/**
 * Line cards
 */
.c-line-cards {
  list-style: none;
  padding-left: 0;
}

.c-line-cards__item:first-child {
  border-top: 1px solid rgba( 255, 255, 255, .2 );
}

.c-line-cards__item {
  border-bottom: 1px solid rgba( 255, 255, 255, .2 );
}

.c-line-cards__card {
  padding-top: var( --spacer--md );
  padding-bottom: var( --spacer--md );
  clear: both;
  position: relative;
}

.c-line-cards h3 a {
  text-decoration: none;
}

.c-line-cards__card > *:last-child {
  margin-bottom: 0;
}

.c-line-cards h3 a:hover {
  text-decoration: underline;
}

.c-line-cards h3 a::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.c-line-cards h3 {
  margin-top: 0;
  padding-right: 2em;
}

@media screen and (min-width: 768px) {
  .c-line-cards h3 {
    width: 50%;
    float: left;
  }

  .c-line-cards p {
    margin-top: 0;
    float: right;
    width: 50%;
  }
}

.c-line-cards p::after,
.c-line-cards__card::after {
  display: table;
  content: "";
  clear: both;
}

/**
 * Footer
 */

.c-footer {
  background-color: rgba( 0, 0, 0, .6 );
}

.c-footer a:hover {
  color: var( --palette--primary );
}

.c-footer a + a {
  margin-left: var( --spacer--xs );
}

.c-footer__top p {
  max-width: 20em;
  margin-top: var( --spacer--sm );
}

.c-footer__colophon p,
.c-footer__colophon dl {
  opacity: .6;
  margin-bottom: 0;
  margin-top: 0;
}

.c-footer__colophon .o-container::before {
  content: "";
  display: block;
  width:100%;
  height: 1px;
  background-color: currentColor;
  opacity: .2;
  margin-bottom: var( --spacer--sm );
}

.c-footer__colophon {
  text-align: center;
}

.c-inline-definitions {
  display: flex;
  justify-content: center;
}

@media screen and (min-width: 992px) {
  .c-footer__colophon {
    text-align: left;
  }

  .c-inline-definitions {
    justify-content: flex-end;
  }
}

.c-inline-definitions dd {
  margin-right: var( --spacer--md );
  margin-left: var( --spacer--sm );
}

.c-inline-definitions dd:last-child {
  margin-right: 0;
}

/**
 * Utility
 */
.o-row {
  display: flex;
  flex: 1 0 auto;
  flex-wrap: wrap;
  list-style: none;
  margin-left: calc( var( --spacer--gutter ) * -1 );
  margin-bottom: calc( var( --spacer--gutter ) * -1 );
  padding-left: 0;
}

.o-row--middle {
  align-items: center;
  align-content: center;
}

.o-row--right {
  justify-content: flex-end;
}

.o-row--reverse {
  flex-direction: row-reverse;
}

@media screen and (min-width: 992px) {
  .o-row--right:not(.o-row--reverse) .c-media-text {
    text-align: left;
    margin-left: auto;
  }
}

.o-col {
  width: 100%;
  list-style: none;
  padding-left: var( --spacer--gutter );
  margin-bottom: var( --spacer--gutter );
}

.o-col-6 {
  width: 50%; 
}

.o-col-3 {
  width: 25%; 
}

@media screen and (min-width: 767px) {
  .o-col-md-6 {
    width: 50%; 
  }

  .o-col-md-3 {
    width: 25%; 
  }

  .o-col-md-4 {
    width: 33.333%; 
  }
}

@media screen and (min-width: 992px) {
  .o-col-lg-6 {
    width: 50%; 
  }

  .o-col-lg-3 {
    width: 25%; 
  }

  .o-col-lg-4 {
    width: 33.333%; 
  }
}

.t-center {
  text-align: center;
}

.t-primary {
  color: var( --palette--primary );
}

.t-secondary {
  color: var( --palette--secondary );
}

.t-tertiary {
  color: var( --palette--tertiary );
}

.arrow-on-hover {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  transition: all .2s ease;
}

.arrow-on-hover::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: all .2s ease;
  margin-left: 0;
}

a:hover .arrow-on-hover::after {
  width: 1em;
  margin-left: 1em;
}

a:hover .arrow-on-hover::before {
  opacity: 1;
}

.arrow-on-hover::before {
  content: "";
  display: block;
  width: .3em;
  height: .3em;
  transform: rotate( 45deg );
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -.15em;
  opacity: 0;
  transition: all .2s ease;
}

.pb-0 {
  padding-bottom: 0;
}

.pt-0 {
  padding-top: 0;
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-lg {
  margin-top: var( --spacer--lg );
}

.mb-lg {
  margin-bottom: var( --spacer--lg );
}

.mt-xl {
  margin-top: var( --spacer--xl );
}

.animated {
  animation-duration: var(--animate-duration);
  animation-fill-mode: both;
}

.animated.delay-1s {
  animation-delay: var(--animate-delay);
}

.fadeInUp {
  animation-name: fadeInUp;
}

.fadeInDown {
  animation-name: fadeInDown;
}

.fadeIn {
  animation-name: fadeIn;
}

.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}