/** @format */

@mixin vertical-align($position: relative) {
    position: $position;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@mixin transform($transforms) {
    -moz-transform: $transforms;
    -o-transform: $transforms;
    -ms-transform: $transforms;
    -webkit-transform: $transforms;
    transform: $transforms;
}

@mixin transition($args) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    transition: $args;
}

@mixin animation_delay($delay) {
    animation-delay: $delay;
    -webkit-animation-delay: $delay;
    -o-animation-delay: $delay;
    -moz-animation-delay: $delay;
    -ms-animation-delay: $delay;
}

@mixin animation($animation) {
    animation: $animation;
    -webkit-animation: $animation;
    -o-animation: $animation;
    -moz-animation: $animation;
    -ms-animation: $animation;
}

@mixin card($color: $greybox_border, $background: $white) {
    border: 1px solid $color;
    background: $white;
}

@mixin hovercard() {
    background: red;

    &:hover {
        background: blue;
    }
}

/**
  * FONTS
  */
@font-face {
    font-family: "Gilroy";
    src: url("../fonts/Gilroy-Regular.eot");
    src: local("Gilroy Regular"), local("Gilroy-Regular"),
        url("../fonts/Gilroy-Regular.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Gilroy-Regular.woff") format("woff"),
        url("../fonts/Gilroy-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/Gilroy-Medium.eot");
    src: local("Gilroy Medium"), local("Gilroy-Medium"),
        url("../fonts/Gilroy-Medium.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Gilroy-Medium.woff") format("woff"),
        url("../fonts/Gilroy-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Gilroy";
    src: url("../fonts/Gilroy-Bold.eot");
    src: local("Gilroy Bold"), local("Gilroy-Bold"),
        url("../fonts/Gilroy-Bold.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Gilroy-Bold.woff") format("woff"),
        url("../fonts/Gilroy-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

/*
  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Extrabold.eot');
    src: local('Gilroy Extrabold'), local('Gilroy-Extrabold'),
      url('../fonts/Gilroy-Extrabold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-Extrabold.woff') format('woff'),
      url('../fonts/Gilroy-Extrabold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-UltraLightItalic.eot');
    src: local('Gilroy UltraLight Italic'), local('Gilroy-UltraLightItalic'),
      url('../fonts/Gilroy-UltraLightItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-UltraLightItalic.woff') format('woff'),
      url('../fonts/Gilroy-UltraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-BoldItalic.eot');
    src: local('Gilroy Bold Italic'), local('Gilroy-BoldItalic'),
      url('../fonts/Gilroy-BoldItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-BoldItalic.woff') format('woff'),
      url('../fonts/Gilroy-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Semibold.eot');
    src: local('Gilroy Semibold'), local('Gilroy-Semibold'),
      url('../fonts/Gilroy-Semibold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-Semibold.woff') format('woff'),
      url('../fonts/Gilroy-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-BlackItalic.eot');
    src: local('Gilroy Black Italic'), local('Gilroy-BlackItalic'),
      url('../fonts/Gilroy-BlackItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-BlackItalic.woff') format('woff'),
      url('../fonts/Gilroy-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-ThinItalic.eot');
    src: local('Gilroy Thin Italic'), local('Gilroy-ThinItalic'),
      url('../fonts/Gilroy-ThinItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-ThinItalic.woff') format('woff'),
      url('../fonts/Gilroy-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-ExtraboldItalic.eot');
    src: local('Gilroy Extrabold Italic'), local('Gilroy-ExtraboldItalic'),
      url('../fonts/Gilroy-ExtraboldItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-ExtraboldItalic.woff') format('woff'),
      url('../fonts/Gilroy-ExtraboldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Black.eot');
    src: local('Gilroy Black'), local('Gilroy-Black'),
      url('../fonts/Gilroy-Black.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-Black.woff') format('woff'),
      url('../fonts/Gilroy-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-HeavyItalic.eot');
    src: local('Gilroy Heavy Italic'), local('Gilroy-HeavyItalic'),
      url('../fonts/Gilroy-HeavyItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-HeavyItalic.woff') format('woff'),
      url('../fonts/Gilroy-HeavyItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
  }
  */

/*
  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-RegularItalic.eot');
    src: local('Gilroy Regular Italic'), local('Gilroy-RegularItalic'),
      url('../fonts/Gilroy-RegularItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-RegularItalic.woff') format('woff'),
      url('../fonts/Gilroy-RegularItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Light.eot');
    src: local('Gilroy Light'), local('Gilroy-Light'),
      url('../fonts/Gilroy-Light.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-Light.woff') format('woff'),
      url('../fonts/Gilroy-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-LightItalic.eot');
    src: local('Gilroy Light Italic'), local('Gilroy-LightItalic'),
      url('../fonts/Gilroy-LightItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-LightItalic.woff') format('woff'),
      url('../fonts/Gilroy-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Heavy.eot');
    src: local('Gilroy Heavy'), local('Gilroy-Heavy'),
      url('../fonts/Gilroy-Heavy.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-Heavy.woff') format('woff'),
      url('../fonts/Gilroy-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-MediumItalic.eot');
    src: local('Gilroy Medium Italic'), local('Gilroy-MediumItalic'),
      url('../fonts/Gilroy-MediumItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-MediumItalic.woff') format('woff'),
      url('../fonts/Gilroy-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('../fonts/Gilroy-Thin.eot');
    src: local('Gilroy Thin'), local('Gilroy-Thin'),
      url('../fonts/Gilroy-Thin.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Gilroy-Thin.woff') format('woff'),
      url('../fonts/Gilroy-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
  }
  */

/**
 * COLORS
 * e
 */

$white: #ffffff;
$black: #1d1d1d;

$navy: #272442;
$navy_light: #303b4b;

$green: #84bd3a !default;
$green_primary: #84bd3a !default;
$green_light: #d8e69a;
$green_lightest: #f1f8cf;

$red: #e74c3c;

$dark_blue: #364469;
$blue: #272442;
$light_blue: #94969c;

$grey: #3d3d3d;
$mid_grey: #a6a5a6;
$light_grey: #c4c4c4;
$ultralight_grey: #f9fafb;
$grey_lightest: #f5f4f4;
$darK_grey: rgb(44, 47, 56);

$primary_color: #0756a3;

$blue_bright: #55c2e4;

$teal: #39bfc7;
$teal_light: #97cad1;

/* 	Fonts */
/*
*/
$primaryFont: "Gilroy", sans-serif;

.mt--1 {
    margin-top: 1em !important;
}

.mt--2 {
    margin-top: 2em !important;
}

.mt--3 {
    margin-top: 3em !important;
}

.mt--4 {
    margin-top: 4em !important;
}

.mt--5 {
    margin-top: 5em !important;
}

.mt--6 {
    margin-top: 6em !important;
}

.mb--1 {
    margin-bottom: 1em !important;
}

.mb--2 {
    margin-bottom: 2em !important;
}
@media only screen and (max-width: 768px) {
    .mobile-mb--2 {
        margin-bottom: 2em !important;
    }
}

.mb--3 {
    margin-bottom: 3em !important;
}

.mb--4 {
    margin-bottom: 4em !important;
}

.mb--5 {
    margin-bottom: 5em !important;
}

.mb--6 {
    margin-bottom: 6em !important;
}
.mr--1 {
    margin-right: 1em;
}
.ml--1 {
    margin-left: 1em;
}

.p--1 {
    padding: 1em !important;
}

.p--2 {
    padding: 2em !important;
}
.p--3 {
    padding: 3em !important;
}

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

.pt--1 {
    padding-top: 1em !important;
}

.pt--2 {
    padding-top: 2em !important;
}

.pt--3 {
    padding-top: 3em !important;
}

.pt--4 {
    padding-top: 4em !important;
}

.pt--5 {
    padding-top: 5em !important;
}

.pt--6 {
    padding-top: 6em !important;
}

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

.pb--_5 {
    padding-bottom: 0.5em !important;
}

.pb--1 {
    padding-bottom: 1em !important;
}

.pb--2 {
    padding-bottom: 2em !important;
}

.pb--3 {
    padding-bottom: 3em !important;
}

.pb--4 {
    padding-bottom: 4em !important;
}

.pb--5 {
    padding-bottom: 5em !important;
}

.pb--6 {
    padding-bottom: 6em !important;
}
.pl--1 {
    padding-left: 1em;
}
.pl--2 {
    padding-left: 2em;
}
.pr--1 {
    padding-right: 1em;
}
.pr--2 {
    padding-right: 2em;
}
.z {
    &--1 {
        z-index: 1;
    }
    &--2 {
        z-index: 2;
    }
    &--3 {
        z-index: 3;
    }
    &--4 {
        z-index: 4;
    }
    &--5 {
        z-index: 5;
    }
}
.bg--isDark {
    color: $white;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a {
        color: $white;
    }
}
.bg--white {
    background: $white;
}
.bg--lightgrey {
    background-color: $light_grey;
}
.bg--teal_light {
    background-color: $teal_light;
}
.bg--grey {
    background-color: $grey;
}
.bg--navy {
    background-color: $navy;
    color: $white;
    p {
        color: $white;
    }
    .gradient--overlay {
        position: relative;
        &:before {
            content: " ";
            z-index: 10;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, $navy 0%, rgba($navy, 0) 60%);
        }
    }
}

.bg--blue {
    background-color: $blue;
}

.bg--black {
    background-color: $black;
    color: $white;

    p {
        color: $white;
        font-weight: 300;
        font-size: 0.85em;
    }
}
.bg--lightGreen {
    background-color: $green_light;
}
.bg--blue {
    color: $white;
    background-color: $blue;

    p {
        color: $white;
        font-weight: 300;
        font-size: 0.85em;
    }
}
.foreground__wave {
    position: absolute;
    left: 0;
    right: 0;
    width: 110%;
    margin-top: 10em;
}
.bg__wave-blue {
    background-image: url(../images/icons/bg-wave-blue.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    animation: dash 1s linear;
    animation-fill-mode: forwards;
}
.bg__wave-navy {
    background-image: url(../images/icons/bg-wave-navy.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.bg__wave--top {
    background-position: top center !important;
}
.bg__wave--bottom {
    background-position: bottom center !important;
}

.text--lighter {
    font-weight: 300;
}

.text--medium {
    font-weight: 500;
}
.text--small {
    font-size: 0.85em;
}
.text--large {
    font-size: 1.4em;
    font-weight: 600;
}
.text--xlarge {
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1.2em;
}
.text--xxl {
    font-size: 3em;
    font-weight: 700;
    line-height: 1em;
}
.text--black {
    color: $black;
}
.text-darkgrey {
    color: $darK_grey;
}

.text--grey {
    color: $grey;
}
.text--green {
    color: $green !important;
}

.text--white {
    color: $white;
}

.text--lavender {
    color: $blue !important;
}
.text--light__teal {
    color: $teal_light !important;
}

.text--grotesk {
    font-family: $primaryFont !important;
}

.text--normal {
    font-weight: 400 !important;
}

.text--bold {
    font-weight: 600 !important;
}
.text--xbold {
    font-weight: 900 !important;
}

.border--bottom {
    border-bottom: 0.5em solid $light_grey;
}

.border--top {
    border-top: 0.5em solid $light_grey;
}

.border--black {
    border-color: $black;
}

.border--thin {
    border-width: 0.25em !important;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}