/* Font Import */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap");
/* Base Variables  */
/* BASE COLORS */
/* Animations */
/* The animation code */
@-webkit-keyframes brand-intro {
  to {
    opacity: 1; } }

@keyframes brand-intro {
  to {
    opacity: 1; } }

@-webkit-keyframes fade-on {
  to {
    opacity: 1; } }

@keyframes fade-on {
  to {
    opacity: 1; } }

/******************
* Bounce in right *
*******************/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.slow {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.slower {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.slowest {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

/* Added by Andy Meetan */
.delay-250 {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  -o-animation-delay: 0.25s;
  animation-delay: 0.25s; }

.delay-500 {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s; }

.delay-750 {
  -webkit-animation-delay: 0.75s;
  -moz-animation-delay: 0.75s;
  -o-animation-delay: 0.75s;
  animation-delay: 0.75s; }

.delay-1000 {
  -webkit-animation-delay: 1.0s;
  -moz-animation-delay: 1.0s;
  -o-animation-delay: 1.0s;
  animation-delay: 1.0s; }

.delay-1250 {
  -webkit-animation-delay: 1.25s;
  -moz-animation-delay: 1.25s;
  -o-animation-delay: 1.25s;
  animation-delay: 1.25s; }

.delay-1500 {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  animation-delay: 1.5s; }

.delay-1750 {
  -webkit-animation-delay: 1.75s;
  -moz-animation-delay: 1.75s;
  -o-animation-delay: 1.75s;
  animation-delay: 1.75s; }

.delay-2000 {
  -webkit-animation-delay: 2.0s;
  -moz-animation-delay: 2.0s;
  -o-animation-delay: 2.0s;
  animation-delay: 2.0s; }

.delay-2250 {
  -webkit-animation-delay: 2.25s;
  -moz-animation-delay: 2.25s;
  -o-animation-delay: 2.25s;
  animation-delay: 2.25s; }

.delay-2500 {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -o-animation-delay: 2.5s;
  animation-delay: 2.5s; }

.delay-2750 {
  -webkit-animation-delay: 3.0s;
  -moz-animation-delay: 3.0s;
  -o-animation-delay: 3.0s;
  animation-delay: 3.0s; }

.delay-3000 {
  -webkit-animation-delay: 3.5s;
  -moz-animation-delay: 3.5s;
  -o-animation-delay: 3.5s;
  animation-delay: 3.5s; }

.delay-3250 {
  -webkit-animation-delay: 3.75s;
  -moz-animation-delay: 3.75s;
  -o-animation-delay: 3.75s;
  animation-delay: 3.75s; }

.delay-3500 {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s; }

.delay-3750 {
  -webkit-animation-delay: 4.25s;
  -moz-animation-delay: 4.25s;
  -o-animation-delay: 4,25s;
  animation-delay: 4.25s; }

.delay-4000 {
  -webkit-animation-delay: 4.5s;
  -moz-animation-delay: 4.5s;
  -o-animation-delay: 4.5s;
  animation-delay: 4.5s; }

.delay-4250 {
  -webkit-animation-delay: 4.75s;
  -moz-animation-delay: 4.75s;
  -o-animation-delay: 4.75s;
  animation-delay: 4.75s; }

.delay-4500 {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s; }

.delay-4750 {
  -webkit-animation-delay: 5.25s;
  -moz-animation-delay: 5.25s;
  -o-animation-delay: 5.25s;
  animation-delay: 5.25s; }

.bounceInRight,
.bounceInLeft,
.bounceInUp,
.bounceInDown {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px); }

.fadeInRight,
.fadeInLeft,
.fadeInUp,
.fadeInDown {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px); }

.flipInX,
.flipInY,
.rotateIn,
.rotateInUpLeft,
.rotateInUpRight,
.rotateInDownLeft,
.rotateDownUpRight,
.rollIn {
  opacity: 0; }

.lightSpeedInRight,
.lightSpeedInLeft {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px); }

/***********
* bounceIn *
************/
@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05); }
  70% {
    -webkit-transform: scale(0.9); }
  100% {
    -webkit-transform: scale(1); } }

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3); }
  50% {
    opacity: 1;
    transform: scale(1.05); }
  70% {
    transform: scale(0.9); }
  100% {
    transform: scale(1); } }

.bounceIn.go {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn; }

/****************
* bounceInRight *
****************/
@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(400px); }
  60% {
    -webkit-transform: translateX(-30px); }
  80% {
    -webkit-transform: translateX(10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(400px); }
  60% {
    transform: translateX(-30px); }
  80% {
    transform: translateX(10px); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

.bounceInRight.go {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight; }

/******************
* Bounce in left *
*******************/
@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-400px); }
  60% {
    -webkit-transform: translateX(30px); }
  80% {
    -webkit-transform: translateX(-10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-400px); }
  60% {
    transform: translateX(30px); }
  80% {
    transform: translateX(-10px); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

.bounceInLeft.go {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft; }

/******************
* Bounce in up *
*******************/
@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(400px); }
  60% {
    -webkit-transform: translateY(-30px); }
  80% {
    -webkit-transform: translateY(10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(400px); }
  60% {
    transform: translateY(-30px); }
  80% {
    transform: translateY(10px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.bounceInUp.go {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp; }

/******************
* Bounce in down *
*******************/
@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-400px); }
  60% {
    -webkit-transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-400px); }
  60% {
    transform: translateY(30px); }
  80% {
    transform: translateY(-10px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.bounceInDown.go {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown; }

/**********
* Fade In *
**********/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1;
    display: block; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1;
    display: block; } }

.fadeIn {
  opacity: 0; }

.fadeIn.go {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

/**********
* Grow in *
***********/
@-webkit-keyframes growIn {
  0% {
    -webkit-transform: scale(0.2);
    opacity: 0; }
  50% {
    -webkit-transform: scale(1.2); }
  100% {
    -webkit-transform: scale(1);
    opacity: 1; } }

@keyframes growIn {
  0% {
    transform: scale(0.2);
    opacity: 0; }
  50% {
    transform: scale(1.2); }
  100% {
    transform: scale(1);
    opacity: 1; } }

.growIn {
  -webkit-transform: scale(0.2);
  transform: scale(0.2);
  opacity: 0; }

.growIn.go {
  -webkit-animation-name: growIn;
  animation-name: growIn; }

/********
* Shake *
********/
@-webkit-keyframes shake {
  0%,
  100% {
    -webkit-transform: translateX(0); }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-10px); }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(10px); } }

@keyframes shake {
  0%,
  100% {
    transform: translateX(0); }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px); }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px); } }

.shake.go {
  -webkit-animation-name: shake;
  animation-name: shake; }

/********
* ShakeUp *
********/
@-webkit-keyframes shakeUp {
  0%,
  100% {
    -webkit-transform: translateX(0); }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateY(-10px); }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateY(10px); } }

@keyframes shakeUp {
  0%,
  100% {
    transform: translateY(0); }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateY(-10px); }
  20%,
  40%,
  60%,
  80% {
    transform: translateY(10px); } }

.shakeUp.go {
  -webkit-animation-name: shakeUp;
  animation-name: shakeUp; }

/*************
* FadeInLeft *
*************/
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-400px); }
  50% {
    opacity: 0.3; }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-400px); }
  50% {
    opacity: 0.3; }
  100% {
    opacity: 1;
    transform: translateX(0); } }

.fadeInLeft {
  opacity: 0;
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px); }

.fadeInLeft.go {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

/*************
* FadeInRight *
*************/
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(400px); }
  50% {
    opacity: 0.3; }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(400px); }
  50% {
    opacity: 0.3; }
  100% {
    opacity: 1;
    transform: translateX(0); } }

.fadeInRight {
  opacity: 0;
  -webkit-transform: translateX(400px);
  transform: translateX(400px); }

.fadeInRight.go {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

/*************
* FadeInUp *
*************/
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(400px); }
  50% {
    opacity: 0.3; }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(400px); }
  50% {
    opacity: 0.3; }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.fadeInUp {
  opacity: 0;
  -webkit-transform: translateY(400px);
  transform: translateY(400px); }

.fadeInUp.go {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

/*************
* FadeInDown *
*************/
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-400px); }
  50% {
    opacity: 0.3; }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-400px); }
  50% {
    opacity: 0.3; }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.fadeInDown {
  opacity: 0;
  -webkit-transform: translateY(-400px);
  transform: translateY(-400px); }

.fadeInDown.go {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

/*****************
* rotateIn *
*****************/
@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateIn {
  0% {
    transform-origin: center center;
    transform: rotate(-200deg);
    opacity: 0; }
  100% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1; } }

.rotateIn.go {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn; }

/*****************
* rotateInUpLeft *
*****************/
@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpLeft.go {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft; }

/*******************
* rotateInDownLeft *
*******************/
@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownLeft.go {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft; }

/******************
* rotateInUpRight *
*******************/
@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0; }
  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpRight.go {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight; }

/********************
* rotateInDownRight *
********************/
@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0; }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0; }
  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownRight.go {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight; }

/*********
* rollIn *
**********/
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg); } }

@keyframes rollIn {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg); }
  100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg); } }

.rollIn.go {
  -webkit-animation-name: rollIn;
  animation-name: rollIn; }

/*********
* wiggle *
**********/
@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: skewX(9deg); }
  10% {
    -webkit-transform: skewX(-8deg); }
  20% {
    -webkit-transform: skewX(7deg); }
  30% {
    -webkit-transform: skewX(-6deg); }
  40% {
    -webkit-transform: skewX(5deg); }
  50% {
    -webkit-transform: skewX(-4deg); }
  60% {
    -webkit-transform: skewX(3deg); }
  70% {
    -webkit-transform: skewX(-2deg); }
  80% {
    -webkit-transform: skewX(1deg); }
  90% {
    -webkit-transform: skewX(0deg); }
  100% {
    -webkit-transform: skewX(0deg); } }

@keyframes wiggle {
  0% {
    transform: skewX(9deg); }
  10% {
    transform: skewX(-8deg); }
  20% {
    transform: skewX(7deg); }
  30% {
    transform: skewX(-6deg); }
  40% {
    transform: skewX(5deg); }
  50% {
    transform: skewX(-4deg); }
  60% {
    transform: skewX(3deg); }
  70% {
    transform: skewX(-2deg); }
  80% {
    transform: skewX(1deg); }
  90% {
    transform: skewX(0deg); }
  100% {
    transform: skewX(0deg); } }

.wiggle.go {
  -webkit-animation-name: wiggle;
  animation-name: wiggle;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

/********
* swing *
*********/
@-webkit-keyframes swing {
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transform-origin: top center; }
  20% {
    -webkit-transform: rotate(15deg); }
  40% {
    -webkit-transform: rotate(-10deg); }
  60% {
    -webkit-transform: rotate(5deg); }
  80% {
    -webkit-transform: rotate(-5deg); }
  100% {
    -webkit-transform: rotate(0deg); } }

@keyframes swing {
  20% {
    transform: rotate(15deg); }
  40% {
    transform: rotate(-10deg); }
  60% {
    transform: rotate(5deg); }
  80% {
    transform: rotate(-5deg); }
  100% {
    transform: rotate(0deg); } }

.swing.go {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing; }

/*******
* tada *
********/
@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1); }
  10%,
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg); }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(3deg); }
  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg); }
  100% {
    -webkit-transform: scale(1) rotate(0); } }

@keyframes tada {
  0% {
    transform: scale(1); }
  10%,
  20% {
    transform: scale(0.9) rotate(-3deg); }
  30%,
  50%,
  70%,
  90% {
    transform: scale(1.1) rotate(3deg); }
  40%,
  60%,
  80% {
    transform: scale(1.1) rotate(-3deg); }
  100% {
    transform: scale(1) rotate(0); } }

.tada.go {
  -webkit-animation-name: tada;
  animation-name: tada; }

/*********
* wobble *
**********/
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%); }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg); }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg); }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg); }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg); }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg); }
  100% {
    -webkit-transform: translateX(0%); } }

@keyframes wobble {
  0% {
    transform: translateX(0%); }
  15% {
    transform: translateX(-25%) rotate(-5deg); }
  30% {
    transform: translateX(20%) rotate(3deg); }
  45% {
    transform: translateX(-15%) rotate(-3deg); }
  60% {
    transform: translateX(10%) rotate(2deg); }
  75% {
    transform: translateX(-5%) rotate(-1deg); }
  100% {
    transform: translateX(0%); } }

.wobble.go {
  -webkit-animation-name: wobble;
  animation-name: wobble; }

/********
* pulse *
*********/
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1); } }

@keyframes pulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }

.pulse.go {
  -webkit-animation-name: pulse;
  animation-name: pulse; }

/***************
* lightSpeedInRight *
****************/
@-webkit-keyframes lightSpeedInRight {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0; }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    opacity: 1; }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

@keyframes lightSpeedInRight {
  0% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; }
  60% {
    transform: translateX(-20%) skewX(30deg);
    opacity: 1; }
  80% {
    transform: translateX(0%) skewX(-15deg);
    opacity: 1; }
  100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

.lightSpeedInRight.go {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

/***************
* lightSpeedInLeft *
****************/
@-webkit-keyframes lightSpeedInLeft {
  0% {
    -webkit-transform: translateX(-100%) skewX(30deg);
    opacity: 0; }
  60% {
    -webkit-transform: translateX(20%) skewX(-30deg);
    opacity: 1; }
  80% {
    -webkit-transform: translateX(0%) skewX(15deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

@keyframes lightSpeedInLeft {
  0% {
    transform: translateX(-100%) skewX(30deg);
    opacity: 0; }
  60% {
    transform: translateX(20%) skewX(-30deg);
    opacity: 1; }
  80% {
    transform: translateX(0%) skewX(15deg);
    opacity: 1; }
  100% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

.lightSpeedInLeft.go {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

/*******
* Flip *
*******/
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotateY(0);
    -webkit-animation-timing-function: ease-out; }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
    -webkit-animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in; }
  80% {
    -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in; }
  100% {
    -webkit-transform: perspective(400px) scale(1);
    -webkit-animation-timing-function: ease-in; } }

@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
    animation-timing-function: ease-out; }
  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg);
    animation-timing-function: ease-out; }
  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in; }
  80% {
    transform: perspective(400px) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in; }
  100% {
    transform: perspective(400px) scale(1);
    animation-timing-function: ease-in; } }

.flip.go {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flip;
  backface-visibility: visible !important;
  animation-name: flip; }

/**********
* flipInX *
**********/
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg); }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg); }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  40% {
    transform: perspective(400px) rotateX(-10deg); }
  70% {
    transform: perspective(400px) rotateX(10deg); }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

.flipInX.go {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  backface-visibility: visible !important;
  animation-name: flipInX; }

/**********
* flipInY *
**********/
@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0; }
  40% {
    -webkit-transform: perspective(400px) rotateY(-5deg); }
  70% {
    -webkit-transform: perspective(400px) rotateY(2deg); }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

@keyframes flipInY {
  0% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; }
  40% {
    transform: perspective(400px) rotateY(-5deg); }
  70% {
    transform: perspective(400px) rotateY(2deg); }
  100% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

.flipInY.go {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  backface-visibility: visible !important;
  animation-name: flipInY; }

/*****************
* Out animations *
*****************/
/************
* bounceOut *
*************/
@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1); }
  25% {
    -webkit-transform: scale(0.95); }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3); } }

@keyframes bounceOut {
  0% {
    transform: scale(1); }
  25% {
    transform: scale(0.95); }
  50% {
    opacity: 1;
    transform: scale(1.1); }
  100% {
    opacity: 0;
    transform: scale(0.3); } }

.bounceOut.goAway {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut; }

/************
* bounceOutUp *
*************/
@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px); } }

@keyframes bounceOutUp {
  0% {
    transform: translateY(0); }
  20% {
    opacity: 1;
    transform: translateY(20px); }
  100% {
    opacity: 0;
    transform: translateY(-2000px); } }

.bounceOutUp.goAway {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp; }

/************
* bounceOutDown *
*************/
@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px); } }

@keyframes bounceOutDown {
  0% {
    transform: translateY(0); }
  20% {
    opacity: 1;
    transform: translateY(-20px); }
  100% {
    opacity: 0;
    transform: translateY(2000px); } }

.bounceOutDown.goAway {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown; }

/************
* bounceOutLeft *
*************/
@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px); } }

@keyframes bounceOutLeft {
  0% {
    transform: translateX(0); }
  20% {
    opacity: 1;
    transform: translateX(20px); }
  100% {
    opacity: 0;
    transform: translateX(-2000px); } }

.bounceOutLeft.goAway {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft; }

/************
* bounceOutRight *
*************/
@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0); }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px); } }

@keyframes bounceOutRight {
  0% {
    transform: translateX(0); }
  20% {
    opacity: 1;
    transform: translateX(-20px); }
  100% {
    opacity: 0;
    transform: translateX(2000px); } }

.bounceOutRight.goAway {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight; }

/************
* fadeOut *
*************/
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.fadeOut.goAway {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

/************
* fadeOutUp *
*************/
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px); } }

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0;
    transform: translateY(-2000px); } }

.fadeOutUp.goAway {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp; }

/************
* fadeOutDown *
*************/
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px); } }

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0;
    transform: translateY(2000px); } }

.fadeOutDown.goAway {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown; }

/************
* fadeOutLeft *
*************/
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px); } }

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0;
    transform: translateX(-2000px); } }

.fadeOutLeft.goAway {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft; }

/************
* fadeOutRight *
*************/
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px); } }

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translateX(0); }
  100% {
    opacity: 0;
    transform: translateX(2000px); } }

.fadeOutRight.goAway {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight; }

/************
* flipOutX *
*************/
@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

@keyframes flipOutX {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }
  100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

.flipOutX.goAway {
  -webkit-animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  animation-name: flipOutX;
  backface-visibility: visible !important; }

/************
* flipOutY *
*************/
@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

@keyframes flipOutY {
  0% {
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; }
  100% {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  backface-visibility: visible !important;
  animation-name: flipOutY; }

/************
* lightSpeedOutRight *
*************/
@-webkit-keyframes lightSpeedOutRight {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

@keyframes lightSpeedOutRight {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1; }
  100% {
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

.lightSpeedOutRight.goAway {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

/************
* lightSpeedOutLeft *
*************/
@-webkit-keyframes lightSpeedOutLeft {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: translateX(-100%) skewX(30deg);
    opacity: 0; } }

@keyframes lightSpeedOutLeft {
  0% {
    transform: translateX(0%) skewX(0deg);
    opacity: 1; }
  100% {
    transform: translateX(-100%) skewX(30deg);
    opacity: 0; } }

.lightSpeedOutLeft.goAway {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

/************
* rotateOut *
*************/
@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(200deg);
    opacity: 0; } }

@keyframes rotateOut {
  0% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1; }
  100% {
    transform-origin: center center;
    transform: rotate(200deg);
    opacity: 0; } }

.rotateOut.goAway {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut; }

/************
* rotateOutUpLeft *
*************/
@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    opacity: 0; } }

@keyframes rotateOutUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1; }
  100% {
    -transform-origin: left bottom;
    -transform: rotate(-90deg);
    opacity: 0; } }

.rotateOutUpLeft.goAway {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft; }

/************
* rotateOutDownLeft *
*************/
@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0; } }

@keyframes rotateOutDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1; }
  100% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0; } }

.rotateOutDownLeft.goAway {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft; }

/************
* rotateOutUpRight *
*************/
@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(0);
    opacity: 1; }
  100% {
    -webkit-transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    opacity: 0; } }

@keyframes rotateOutUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1; }
  100% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0; } }

.rotateOutUpRight.goAway {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight; }

/************
* rollOut *
*************/
@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg); }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg); } }

@keyframes rollOut {
  0% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg); }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg); } }

.rollOut.goAway {
  -webkit-animation-name: rollOut;
  animation-name: rollOut; }

/*****************
* Short Animations
*******************/
/*********************
* fadeInUpShort
*********************/
@-webkit-keyframes fadeInUpShort {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@keyframes fadeInUpShort {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.fadeInUpShort {
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px); }

.fadeInUpShort.go {
  -webkit-animation-name: fadeInUpShort;
  animation-name: fadeInUpShort; }

/*********************
* fadeInDownShort
*********************/
@-webkit-keyframes fadeInDownShort {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@keyframes fadeInDownShort {
  0% {
    opacity: 0;
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.fadeInDownShort {
  opacity: 0;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px); }

.fadeInDownShort.go {
  -webkit-animation-name: fadeInDownShort;
  animation-name: fadeInDownShort; }

/*********************
* fadeInRightShort 
*********************/
@-webkit-keyframes fadeInRightShort {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@keyframes fadeInRightShort {
  0% {
    opacity: 0;
    transform: translateX(20px); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

.fadeInRightShort {
  opacity: 0;
  -webkit-transform: translateX(20px);
  transform: translateX(20px); }

.fadeInRightShort.go {
  -webkit-animation-name: fadeInRightShort;
  animation-name: fadeInRightShort; }

/*********************
* fadeInLeftShort 
*********************/
@-webkit-keyframes fadeInLeftShort {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@keyframes fadeInLeftShort {
  0% {
    opacity: 0;
    transform: translateX(-20px); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

.fadeInLeftShort {
  opacity: 0;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px); }

.fadeInLeftShort.go {
  -webkit-animation-name: fadeInLeftShort;
  animation-name: fadeInLeftShort; }

/***********
* bounceIn *
************/
@-webkit-keyframes myanimation {
  0% {
    -webkit-transform: perspective(1200px) rotateY(0);
    -webkit-animation-timing-function: ease-out; }
  20% {
    -webkit-transform: perspective(1200px) rotateY(25deg);
    -webkit-animation-timing-function: ease-out; }
  50% {
    -webkit-transform: perspective(1200px); }
  60% {
    -webkit-transform: perspective(1200px) rotateY(-25deg);
    -webkit-animation-timing-function: ease-out; }
  100% {
    -webkit-transform: perspective(20px);
    -webkit-animation-timing-function: ease-out; } }

@keyframes myanimation {
  0% {
    transform: perspective(1200px) rotateY(0);
    animation-timing-function: ease-out; }
  30% {
    transform: perspective(1200px) rotateY(25deg);
    animation-timing-function: ease-out; }
  60% {
    transform: perspective(1200px) rotateY(-12deg);
    -webkit-animation-timing-function: ease-out; }
  100% {
    transform: perspective(1200px) rotateY(0);
    animation-timing-function: ease-out; } }

/* Mixin helpers */
/* Modular Scale https://www.modularscale.com/ */
/* Buttons */
a {
  color: #d6d6d6; }

.button {
  padding: 1em 1.618em 1em 1.618em;
  background: #5bcfdd;
  color: #262626;
  text-decoration: none;
  display: inline-block;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s; }
  .button:hover, .button:focus {
    color: #fff;
    background: #000;
    box-shadow: inset 0 0 0 5px #5bcfdd; }

.arrow-down {
  position: relative;
  margin: 0 auto;
  margin-top: 3em;
  color: #c3c3c3;
  width: 40px;
  background: url(assets/img/arrow.svg) no-repeat;
  background-size: contain; }

.arrow-down {
  display: block;
  widows: 100px;
  height: 100px; }

/* Modals */
/*
*  Remodal - v1.0.6
*  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
*  http://vodkabears.github.io/remodal/
*
*  Made by Ilya Makarov
*  Under MIT License
*/
/* ==========================================================================
 Remodal's necessary styles
 ========================================================================== */
/* Hide scroll bar */
html.remodal-is-locked {
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none; }

/* Anti FOUC */
.remodal,
[data-remodal-id] {
  display: none; }

/* Necessary styles of the overlay */
.remodal-overlay {
  position: fixed;
  z-index: 200000000;
  top: -5000px;
  right: -5000px;
  bottom: -5000px;
  left: -5000px;
  display: none; }

/* Necessary styles of the wrapper */
.remodal-wrapper {
  position: fixed;
  z-index: 2000000000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  overflow: auto;
  text-align: center;
  -webkit-overflow-scrolling: touch; }

.remodal-wrapper:after {
  display: inline-block;
  height: 100%;
  margin-left: -0.05em;
  content: ""; }

/* Fix iPad, iPhone glitches */
.remodal-overlay,
.remodal-wrapper {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

/* Necessary styles of the modal dialog */
.remodal {
  position: relative;
  outline: none;
  overflow: auto;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%; }

.remodal-is-initialized {
  /* Disable Anti-FOUC */
  display: inline-block; }

/* Fix iPad, iPhone glitches */
.remodal-overlay,
.remodal-wrapper {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

/* Necessary styles of the modal dialog */
.remodal {
  position: relative;
  outline: none;
  overflow: auto;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%; }

.remodal-is-initialized {
  /* Disable Anti-FOUC */
  display: inline-block; }

.wrapper {
  -webkit-transform: translateZ(0);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* webkit flicker fix */
  -webkit-font-smoothing: antialiased;
  /* webkit text rendering fix */ }
  .wrapper .tooltip {
    position: absolute;
    width: 80%;
    bottom: 100%;
    font-weight: 700;
    text-align: center;
    background: #121212;
    color: #5bcfdd;
    display: block;
    margin-bottom: 15px;
    opacity: 0;
    padding: 20px;
    pointer-events: none;
    transform: translateY(10px);
    transition: all .25s ease-out;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.28);
    /* This bridges the gap so you can mouse into the tooltip without it disappearing */
    /* CSS Triangles - see Trevor's post */ }
    .wrapper .tooltip h3 {
      font-family: azo-sans-web, Arial, Helvetica, sans-serif;
      font-size: 1em;
      font-weight: 900;
      color: #FFF; }
    .wrapper .tooltip a {
      color: #5bcfdd;
      font-family: azo-sans-web, Arial, Helvetica, sans-serif;
      font-size: 0.8em;
      cursor: pointer; }
    .wrapper .tooltip:before {
      bottom: -20px;
      content: " ";
      display: block;
      height: 20px;
      left: 0;
      position: absolute;
      width: 100%; }
    .wrapper .tooltip:after {
      border-left: solid transparent 10px;
      border-right: solid transparent 10px;
      border-top: solid #5bcfdd 10px;
      bottom: -10px;
      content: " ";
      height: 0;
      left: 50%;
      margin-left: -13px;
      position: absolute;
      width: 0; }

.wrapper:hover .tooltip,
.wrapper:focus .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
  transform: translateY(0px); }

/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
  display: none; }

.lte8 .wrapper:hover .tooltip {
  display: block; }

/*
*  Remodal - v1.0.6
*  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
*  http://vodkabears.github.io/remodal/
*
*  Made by Ilya Makarov
*  Under MIT License
*/
/* ==========================================================================
 Remodal's default mobile first theme
 ========================================================================== */
/* Default theme styles for the background */
.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
  -webkit-filter: blur(3px);
  filter: blur(3px); }

/* Default theme styles of the overlay */
.remodal-overlay {
  background: rgba(43, 46, 56, 0.9); }

.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.remodal-overlay.remodal-is-opening {
  -webkit-animation-name: remodal-overlay-opening-keyframes;
  animation-name: remodal-overlay-opening-keyframes; }

.remodal-overlay.remodal-is-closing {
  -webkit-animation-name: remodal-overlay-closing-keyframes;
  animation-name: remodal-overlay-closing-keyframes; }

/* Default theme styles of the wrapper */
.remodal-wrapper {
  padding: 0; }

/* Default theme styles of the modal dialog */
.remodal {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0px;
  padding: 35px;
  font-family: azo-sans-web;
  text-align: left;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  height: 100%;
  color: #2b2e38;
  background: #fff;
  text-align: center; }
  .remodal .port-img {
    box-sizing: border-box;
    width: 100%;
    padding: 2em; }
    .remodal .port-img.no-padding {
      padding: 0; }
    .remodal .port-img img {
      max-width: 100%;
      width: 100%; }
  .remodal h2 {
    color: #3c3c3c; }

.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.remodal.remodal-is-opening {
  -webkit-animation-name: remodal-opening-keyframes;
  animation-name: remodal-opening-keyframes; }

.remodal.remodal-is-closing {
  -webkit-animation-name: remodal-closing-keyframes;
  animation-name: remodal-closing-keyframes; }

/* Vertical align of the modal dialog */
.remodal,
.remodal-wrapper:after {
  vertical-align: middle; }

/* Close button */
.remodal-close {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: visible;
  width: 35px;
  height: 35px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  text-decoration: none;
  color: #95979c;
  border: 0;
  outline: 0;
  background: transparent; }

.remodal-close:hover,
.remodal-close:focus {
  color: #2b2e38; }

.remodal-close:before {
  font-family: azo-sans-web;
  font-size: 25px;
  line-height: 35px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 35px;
  content: "\00d7";
  text-align: center; }

/* Dialog buttons */
.remodal-confirm,
.remodal-cancel {
  font: inherit;
  display: inline-block;
  overflow: visible;
  min-width: 110px;
  margin: 0 0 2em 0;
  padding: 12px 0;
  left: 50%;
  right: 50%;
  cursor: pointer;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border: 0;
  outline: 0; }

.remodal-confirm {
  color: #fff;
  background: #5bcfdd; }

.remodal-confirm:hover,
.remodal-confirm:focus {
  background: #28b2c3; }

.remodal-cancel {
  color: #fff;
  background: #e57373; }

.remodal-cancel:hover,
.remodal-cancel:focus {
  background: #ef5350; }

/* Remove inner padding and border in Firefox 4+ for the button tag. */
.remodal-confirm::-moz-focus-inner,
.remodal-cancel::-moz-focus-inner,
.remodal-close::-moz-focus-inner {
  padding: 0;
  border: 0; }

/* Keyframes
 ========================================================================== */
@-webkit-keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: translateX(2000px);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    transform: translateX(2000px);
    opacity: 1; }
  to {
    -webkit-transform: translateX(0px);
    -webkit-transform: none;
    transform: none;
    opacity: 1; } }

@keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: translateX(2000px);
    -webkit-transform: scale(2);
    transform: scale(1.05);
    transform: translateX(2000px);
    opacity: 1; }
  to {
    -webkit-transform: translateX(0px);
    -webkit-transform: none;
    transform: none;
    transform: translateX(0px);
    opacity: 1; } }

@-webkit-keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: translateX(0px);
    -webkit-transform: none;
    transform: none;
    transform: translateX(0px);
    opacity: 1; }
  to {
    -webkit-transform: translateX(-2000px);
    -webkit-transform: scale(2);
    transform: scale(1.05);
    transform: translateX(-2000px);
    opacity: 1; } }

@keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: translateX(0px);
    -webkit-transform: none;
    transform: none;
    transform: translateX(0px);
    opacity: 1; }
  to {
    -webkit-transform: translateX(-2000px);
    -webkit-transform: scale(2);
    transform: scale(1.05);
    transform: translateX(-2000px);
    opacity: 1; } }

@-webkit-keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

/* Media queries
 ========================================================================== */
@media only screen and (min-width: 641px) {
  .remodal {
    max-width: 1000%; } }

/* IE8
 ========================================================================== */
.lt-ie9 .remodal-overlay {
  background: #2b2e38; }

.lt-ie9 .remodal {
  width: 700px; }

/* Remodal Overrides */
.modal-content {
  display: block;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  text-align: center; }
  .modal-content p {
    color: #000;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 2em; }
  .modal-content h3 {
    color: #5bcfdd; }

/* Grid - CSS Grid Implementation */
/*Masonary Grid */
.ma-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 20px;
  text-align: left;
  margin-bottom: 20px; }
  .ma-grid.portfolio-grid {
    margin-top: 2em;
    grid-template-columns: 1fr;
    gap: 20px 20px; }
  .ma-grid.portfolio-holder-grid {
    margin-top: 2em;
    grid-template-columns: 1fr;
    gap: 20px 20px; }
  .ma-grid.project-grid, .ma-grid.project-grid-lg-2 {
    margin-top: 2em;
    grid-template-columns: 1fr;
    gap: 20px 20px; }

.col img {
  width: 100%; }

/* General Helpers */
#loading {
  background: #262626;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 0;
  margin: 0; }

.loadingDiv {
  background: url(assets/img/loading-cross.svg) transparent no-repeat top center;
  border-radius: 50%;
  color: #FFFFFF;
  opacity: 0;
  height: 100px;
  width: 100px;
  left: 50%;
  line-height: 100px;
  margin: -50px 0 0 -50px;
  padding: 0;
  position: absolute;
  text-align: center;
  top: 50%; }

/* General Helpers */
/* Hero */
#hero {
  box-sizing: border-box;
  overflow: hidden;
  background-size: cover;
  position: relative;
  background-position: center;
  height: 100vh; }

.coming-soon-text {
  opacity: 0; }

.hero {
  right: -80px;
  top: -110px; }
  .hero-1 {
    background: url() no-repeat top center;
    background-position: right;
    background-size: contain; }
  .hero-2 {
    background: url(assets/img/1screen.png) no-repeat top center;
    background-position: right;
    background-size: contain; }
  .hero-3 {
    background: url(assets/img/branding-3.png) no-repeat top center;
    background-position: right;
    background-size: contain; }

#csshero {
  background-size: cover;
  position: relative;
  background-position: center;
  box-sizing: border-box;
  height: 100vh; }

.hero-img {
  margin-top: 2em; }

.imageCycle {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* &2{
        background-image: url(assets/img/field-bg.jpg);
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/img/field-bg.jpg', sizingMethod='scale');
    }
    &3{
        background-image: url(assets/img/lake-bg.jpg);
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/img/lake-bg.jpg', sizingMethod='scale');
    }
    &4{
        background-image: url(assets/img/montreal-bg.jpg);
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/img/montreal-bg.jpg', sizingMethod='scale'); 
    } */ }
  .imageCycle1 {
    background-image: url(assets/img/desktop.jpg);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/img/desktop.jpg', sizingMethod='scale'); }

/* Typography */
/* TYPOGRAPHY BASE */
p {
  font-family: azo-sans-web;
  font-size: 1em;
  font-style: normal;
  font-variant: normal;
  font-weight: 100;
  letter-spacing: 0.03em;
  color: #d6d6d6;
  margin-top: 0;
  margin-bottom: 1em; }

h1,
h2,
h3,
h4,
h5 {
  font-family: azo-sans-web;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  /*	text-shadow: 4px 4px 2px rgba(0, 0, 0, 1);*/ }

h1 {
  font-size: 31.41509px;
  color: #5bcfdd;
  height: 1.4em; }

h2 {
  font-size: 1em;
  color: #FFFFFF; }

h3 {
  font-size: 2em;
  color: #FFFFFF; }

footer p {
  font-family: azo-sans-web, Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-style: normal;
  font-variant: normal;
  font-weight: 100;
  line-height: 20px;
  letter-spacing: 0.03em;
  color: #d6d6d6;
  margin-top: 0.25em; }

/* General Helpers */
/* GENRAL LAYOUT HELPERS */
.morepadd {
  top: 55px; }

.clearboth {
  clear: both; }

.mobile-only {
  display: block; }

.ttp {
  margin-top: 58px; }

.stick-body {
  position: fixed;
  display: block;
  width: 100%;
  top: 0;
  height: 58px;
  z-index: 20000000; }

/*  GROUPING  */
.group:before,
.group:after {
  content: "";
  display: table; }

.group:after {
  clear: both; }

.group:last-child {
  zoom: 1;
  /* For IE 6/7 */
  padding-bottom: 1em; }

/* Video Player */
.youtube-container {
  display: block;
  margin: 20px auto;
  width: 100%;
  max-width: 600px; }

.youtube-player {
  display: block;
  width: 100%;
  /* assuming that the video has a 16:9 ratio */
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
  height: 100%;
  cursor: hand;
  cursor: pointer; }

img.youtube-thumb {
  bottom: 0;
  display: block;
  left: 0;
  margin: auto;
  max-width: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  height: auto; }

div.play-button {
  height: 72px;
  width: 72px;
  left: 50%;
  top: 50%;
  margin-left: -36px;
  margin-top: -36px;
  position: absolute;
  background: url("http://i.imgur.com/TxzC70f.png") no-repeat; }

#youtube-iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0; }

/* General Helpers */
html {
  overflow-y: scroll;
  margin: 0;
  padding: 0; }

body {
  display: none;
  background-color: #262626;
  color: #fff;
  font-style: normal;
  text-align: center;
  background-size: cover;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  font-family: azo-sans-web; }

#wrapper {
  overflow: hidden; }

.full-container {
  position: relative;
  margin-bottom: 4em; }
  .full-container:after {
    content: "";
    clear: both;
    display: table; }

main {
  margin: 0;
  padding: 0;
  width: 100%; }

main section {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 10em;
  margin-top: 0em; }

.section {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0 1em;
  max-width: 1500px;
  box-sizing: border-box; }

main section ul {
  background-color: #337800;
  margin: 0;
  padding: 0; }

main section ul li {
  background-color: #efefef;
  display: inline-block;
  margin: 0;
  padding: 0;
  margin-bottom: 1em; }

main section ul li a {
  display: block;
  margin: 0;
  padding: 0; }

.midimage {
  max-width: 700px;
  margin: 0 auto; }

.portfolio-img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0; }

figure {
  margin: 0;
  padding: 0; }

.left-image {
  position: relative;
  width: 100%;
  height: 800px;
  background: url(assets/img/1screen.png) no-repeat top center;
  background-position: left;
  background-size: contain;
  left: 0;
  top: -360px;
  z-index: -1; }

.left-image.hero-3 {
  background: url(assets/img/branding-3.png) no-repeat top center;
  background-position: left;
  background-size: contain;
  right: 0;
  top: -400px; }

/*  SECTIONS  */
section {
  clear: both;
  padding: 0px;
  margin: 0px; }

section#contact {
  margin-top: 0; }

#content {
  display: block;
  padding: 100px 1.618em 0;
  text-align: center;
  width: auto;
  box-sizing: border-box;
  margin: 0px auto; }
  #content h2 {
    margin: 0 0 1em 0;
    letter-spacing: 0.1em; }
  #content.extraspace {
    padding-top: 160px; }

/* Portoflio Sections */
.portfolio-content {
  margin-bottom: 4em; }

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

.left-image-2 .content-block {
  width: 100%;
  float: right;
  padding-top: 3em; }

.left-image-2 {
  position: relative;
  padding-top: 3em;
  width: 99%;
  height: 800px;
  text-align: left;
  background-size: contain;
  background-position: right; }

.portfolio-main-image {
  margin-bottom: 2em; }

/* Footer */
footer {
  padding: 30px 0px;
  text-align: center;
  background: #000;
  background: url("assets/img/lake-bg-duo.jpg") no-repeat top center;
  background-size: cover; }
  footer section {
    margin-bottom: 1em; }

/* Theme */
.main-header-space {
  margin-top: -150px; }

#site-logo {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 100px;
  background: url(assets/img/ma-logo.svg) transparent no-repeat top center; }

.header {
  position: absolute;
  top: 54%;
  text-align: center;
  width: 100%;
  color: #fff;
  opacity: 0;
  /* IE 9 */
  -webkit-transform: translate(0, -50%);
  /* Safari */
  transform: translate(0, -50%); }
  .header p {
    font-size: 0.8em;
    color: #5bcfdd; }

#brand {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 1em 0;
  background-color: #efefef;
  text-align: left;
  padding-left: 5em;
  left: 0;
  background: url(assets/img/logo-symbol-sm.png) no-repeat 1em 1.2em;
  -webkit-animation-name: fade-on;
  animation-name: fade-on;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s; }

nav {
  opacity: 1;
  background-color: #121212;
  min-height: auto; }

nav ul {
  font-size: 0.8em;
  display: block;
  margin: 0;
  padding: 0; }

nav ul li {
  display: inline-block;
  padding: 0.4em 0.7em 0.45em;
  color: #d6d6d6; }

nav ul li:last-child {
  border-right: none; }

nav ul li a {
  text-decoration: none; }

nav ul li a:hover,
nav ul li a.active,
.nav-active {
  text-decoration: none;
  color: #5bcfdd;
  border-bottom: 3px solid #a5a5a5; }

nav.stick {
  position: fixed;
  display: block;
  width: 100%;
  top: 0;
  z-index: 20000000; }

/* Theme */
.primary-color {
  color: #5bcfdd; }

::-moz-selection {
  background: #9ae2ea; }

::selection {
  background: #9ae2ea; }

.tint {
  position: relative;
  float: left;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); }
  .tint:before {
    background: rgba(26, 26, 26, 0.8);
    opacity: 0;
    color: #FFF;
    padding-top: 25%;
    font-size: 2em;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: auto;
    right: 0;
    overflow: hidden;
    animation-name: fadeIn; }
  .tint:hover {
    /* Firefox */
    -webkit-animation-name: myanimation;
    animation-name: myanimation;
    animation-duration: 1s;
    -webkit-transform-style: preserve-3d;
    animation-direction: alternate;
    animation-iteration-count: once;
    animation-fill-mode: forwards;
    animation-play-state: running;
    background: rgba(13, 93, 103, 0.9);
    opacity: 1;
    }
    .tint:hover:before {
      opacity: 1; }

.title-block-hr {
  display: block;
  width: 180px;
  height: 3px;
  background: #efefef;
  border: none;
  margin: 4em auto; }

.techinical-list {
  margin: 0;
  padding: 0; }
  .techinical-list li {
    list-style: none;
    color: #000;
    margin-top: 0.5em; }
    .techinical-list li p {
      margin: 0.5em 0 0;
      padding: 0;
      color: #000; }
      .techinical-list li p span {
        color: #5bcfdd; }

/* General Helpers */
/* Hero */
#hero {
  box-sizing: border-box;
  overflow: hidden;
  background-size: cover;
  position: relative;
  background-position: center;
  height: 100vh; }

.coming-soon-text {
  opacity: 0; }

.hero {
  right: -80px;
  top: -110px; }
  .hero-1 {
    background: url() no-repeat top center;
    background-position: right;
    background-size: contain; }
  .hero-2 {
    background: url(assets/img/1screen.png) no-repeat top center;
    background-position: right;
    background-size: contain; }
  .hero-3 {
    background: url(assets/img/branding-3.png) no-repeat top center;
    background-position: right;
    background-size: contain; }

#csshero {
  background-size: cover;
  position: relative;
  background-position: center;
  box-sizing: border-box;
  height: 100vh; }

.hero-img {
  margin-top: 2em; }

.imageCycle {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* &2{
        background-image: url(assets/img/field-bg.jpg);
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/img/field-bg.jpg', sizingMethod='scale');
    }
    &3{
        background-image: url(assets/img/lake-bg.jpg);
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/img/lake-bg.jpg', sizingMethod='scale');
    }
    &4{
        background-image: url(assets/img/montreal-bg.jpg);
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/img/montreal-bg.jpg', sizingMethod='scale'); 
    } */ }
  .imageCycle1 {
    background-image: url(assets/img/desktop.jpg);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/img/desktop.jpg', sizingMethod='scale'); }

/*Social Icons SVG Code */
.soc {
  display: block;
  font-size: 0;
  list-style: none;
  margin: 0;
  padding: 48px;
  padding: 4.8rem;
  text-align: center;
  background: none; }

.soc li {
  display: inline-block;
  margin: 12px;
  margin: 0.9rem;
  background: none; }

.soc a,
.soc svg {
  display: block; }

.soc a {
  position: relative;
  height: 10px;
  height: 3rem;
  width: 10px;
  width: 3rem;
  border: none; }

.soc svg {
  height: 100%;
  width: 100%; }

.soc em {
  font-size: 14px;
  line-height: 1.5;
  margin-top: -0.75em;
  position: absolute;
  text-align: center;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0; }

.icon-1:hover,
.icon-2:hover,
.icon-3:hover,
.icon-4:hover,
.icon-5:hover,
.icon-6:hover,
.icon-7:hover,
.icon-8:hover,
.icon-9:hover,
.icon-10:hover,
.icon-11:hover,
.icon-12:hover,
.icon-13:hover,
.icon-14:hover,
.icon-15:hover,
.icon-16:hover,
.icon-17:hover,
.icon-18:hover,
.icon-19:hover,
.icon-20:hover,
.icon-21:hover,
.icon-22:hover,
.icon-23:hover,
.icon-24:hover,
.icon-25:hover,
.icon-26:hover,
.icon-27:hover,
.icon-28:hover,
.icon-29:hover,
.icon-30:hover {
  border-radius: 100%;
  color: #FFFFFF;
  fill: #FFFFFF;
  -webkit-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: background-color 0.25s, -webkit-transform 0.25s ease-out;
  transition: background-color 0.25s, -webkit-transform 0.25s ease-out;
  transition: background-color 0.25s, transform 0.25s ease-out;
  transition: background-color 0.25s, transform 0.25s ease-out, -webkit-transform 0.25s ease-out; }

.icon-1 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-1:hover {
  background: #5bcfdd; }

.icon-2 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-2:hover {
  background: #5bcfdd; }

.icon-3 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-3:hover {
  background: #5bcfdd; }

.icon-4 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-4:hover {
  background: #5bcfdd; }

.icon-5 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-5:hover {
  background: #5bcfdd; }

.icon-6 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-6:hover {
  background: #5bcfdd; }

.icon-7 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-7:hover {
  background: #5bcfdd; }

.icon-8 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-8:hover {
  background: #5bcfdd; }

.icon-9 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-9:hover {
  background: #5bcfdd; }

.icon-10 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-10:hover {
  background: #5bcfdd; }

.icon-11 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-11:hover {
  background: #5bcfdd; }

.icon-12 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-12:hover {
  background: #5bcfdd; }

.icon-13 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-13:hover {
  background: #5bcfdd; }

.icon-14 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-14:hover {
  background: #5bcfdd; }

.icon-15 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-15:hover {
  background: #5bcfdd; }

.icon-16 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-16:hover {
  background: #5bcfdd; }

.icon-17 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-17:hover {
  background: #5bcfdd; }

.icon-18 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-18:hover {
  background: #5bcfdd; }

.icon-19 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-19:hover {
  background: #5bcfdd; }

.icon-20 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-20:hover {
  background: #5bcfdd; }

.icon-21 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-21:hover {
  background: #5bcfdd; }

.icon-22 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-22:hover {
  background: #5bcfdd; }

.icon-23 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-23:hover {
  background: #5bcfdd; }

.icon-24 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-24:hover {
  background: #5bcfdd; }

.icon-25 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-25:hover {
  background: #5bcfdd; }

.icon-26 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-26:hover {
  background: #5bcfdd; }

.icon-27 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-27:hover {
  background: #5bcfdd; }

.icon-28 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-28:hover {
  background: #5bcfdd; }

.icon-29 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-29:hover {
  background: #5bcfdd; }

.icon-30 {
  color: #FFFFFF;
  fill: #FFFFFF; }

.icon-30:hover {
  background: #5bcfdd; }

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* Styles */
  section#contact {
    width: 90%;
    margin-top: 4em; } }

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
  .tint:before {
    font-size: 2em; }
  section#contact {
    width: 90%; } }

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
  /* Styles */
  section#contact {
    width: 90%;
    padding-top: 4em; } }

@media only screen and (min-width: 480px) {
  .tint:before {
    font-size: 1em; }
  section#contact {
    width: 80%;
    padding-top: 4em; } }

@media only screen and (min-width: 768px) {
  .tint:before {
    font-size: 2em; }
  section#contact {
    width: 40%;
    margin-top: 0;
    padding-top: 4em; }
  h1 {
    font-size: 2.4em; }
  .header-info h2 {
    font-size: 1em; }
  h3 {
    font-size: 0.8em; }
  #site-logo {
    width: 200px;
    height: 200px; }
  nav ul {
    font-size: 1.68em; }
  #content {
    width: 90%; }
    #content.extra-space {
      padding-top: 160px; }
  .ma-grid.ma-grid-portfolio {
    grid-template-columns: 1fr 1fr 1fr; } }

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  /* Styles */
  h1 {
    font-size: 3em; }
  .header-info h2 {
    font-size: 3em; }
  .remodal h2 {
    height: 0.9em; }
  h3 {
    font-size: 2.4em; }
  .remodal h3 {
    margin-bottom: 0.2em; }
  main h2 {
    margin: 0;
    padding: 0;
    font-size: 1.1rem; }
  #brand {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 4em 0 1em;
    background-color: #efefef;
    text-align: center;
    padding-left: 0;
    background: url(assets/img/logo-symbol.png) no-repeat top center; }
  #site-logo {
    width: 200px;
    height: 200px; }
  .mobile-only {
    display: none; }
  #content {
    width: 70%;
    padding-top: 100px; }
  .full-container {
    margin-bottom: 8em; }
  .ma-grid.ma-grid-portfolio {
    grid-template-columns: 1fr 1fr 1fr; }
  .ma-grid.portfolio-grid {
    grid-template-columns: 1fr 1fr 1fr; }
  .ma-grid.portfolio-holder-grid {
    grid-template-columns: 1fr 1fr; }
  .ma-grid.project-grid-lg-2 {
    grid-template-columns: 1fr 1fr; }
  .span_3_of_3,
  .span_2_of_3,
  .span_1_of_3 {
    width: 32.2%; }
  .left-image {
    width: 55%;
    left: -80%;
    top: 0; }
    .left-image-2 {
      text-align: right; }
      .left-image-2 .content-block {
        width: 49%; }
    .left-image.hero-3 {
      left: 0;
      top: -110px; }
  .right-image {
    width: 63%;
    right: -168px;
    top: -110px; }
    .right-image-2 .content-block {
      width: 50%; } }