/*==============================================================================

FONTS

==============================================================================*/

@font-face {
  font-family: 'Flight_Corps';
  src: url('../fonts/FLIGHT-CORPS-8D26.eot');
  src: local('?'), url('../fonts/FLIGHT-CORPS-8D26.woff2') format('woff'),
    url('../fonts/FLIGHT-CORPS-8D26.ttf') format('truetype'),
    url('../fonts/FLIGHT-CORPS-8D26.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Changa_Bold';
  src: url('../fonts/Changa-Bold.eot');
  src: local('?'), url('../fonts/Changa-Bold.woff2') format('woff'),
    url('../fonts/Changa-Bold.ttf') format('truetype'),
    url('../fonts/Changa-Bold.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Changa_Regular';
  src: url('../fonts/Changa-Regular.eot');
  src: local('?'), url('../fonts/Changa-Regular.woff2') format('woff'),
    url('../fonts/Changa-Regular.ttf') format('truetype'),
    url('../fonts/Changa-Regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'United_Sans_Bold';
  src: url('../fonts/UnitedSansCond-Bold.eot');
  src: local('?'), url('../fonts/UnitedSansCond-Bold.woff2') format('woff'),
    url('../fonts/UnitedSansCond-Bold.ttf') format('truetype'),
    url('../fonts/UnitedSansCond-Bold.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'United_Sans_Heavy';
  src: url('../fonts/UnitedSansCond-Black.eot');
  src: local('?'), url('../fonts/UnitedSansCond-Black.woff2') format('woff'),
    url('../fonts/UnitedSansCond-Black.ttf') format('truetype'),
    url('../fonts/UnitedSansCond-Black.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'tekoregular';
  src: url('../fonts/teko-regular-webfont.eot');
  src: local('?'), url('../fonts/teko-regular-webfont.woff2') format('woff'),
    url('../fonts/teko-regular-webfont.ttf') format('truetype'),
    url('../fonts/teko-regular-webfont.svg#tekoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*
*	================================================================
*	HTML BOILERPLATE
*
*	================================================================
*/

.introText {
  width: 100%;
  padding: 0;
  margin: 0;
  /* font-family: 'Flight_Corps', sans-serif; */
  font-family: 'United_Sans_Heavy', sans-serif;
  font-size: 1.4rem;
  line-height: 1rem;
  text-transform: uppercase;
  pointer-events: none;
  position: relative;
  /* color:#e61010; */
  color: #fff;
}

.introText2 {
  width: 100%;
  padding: 0;
  margin: 0;
  /* font-family: 'Flight_Corps', sans-serif; */
  font-family: 'United_Sans_Heavy', sans-serif;
  font-size: 3.2rem;
  line-height: 2.7rem;
  text-transform: uppercase;
  pointer-events: none;
  position: relative;
  /* color:#e61010; */
  color: #fff;
}
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio[controls],
canvas,
video {
  display: inline-block;
  /* display: inline;
  zoom: 1; */
}

html {
  font-size: 100%; /*overflow-y: scroll;*/
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: 13px;
  line-height: 1.231;
}

body,
button,
input,
select,
textarea {
  font-family: sans-serif;
  color: #222;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gbackgroundagher: http://nicolasgbackgroundagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
  content: ' ';
  display: table;
}
.clearfix:after {
  clear: both;
}

::-moz-selection {
  background: #e61010;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #e61010;
  color: #fff;
  text-shadow: none;
}

/*
*	================================================================
*	MSCROLLBAR STYLES
*
*	================================================================
*/

.mCustomScrollbar {
  -ms-touch-action: none;
  touch-action: none; /* MSPointer events - direct background pointer events to js */
}
.mCustomScrollbar.mCS_no_scrollbar,
.mCustomScrollbar.mCS_touch_action {
  -ms-touch-action: auto;
  touch-action: auto;
}

.mCustomScrollBox {
  /* contains plugin's markup */
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
  outline: none;
  direction: ltr;
}

.mCSB_container {
  /* contains the original content */
  overflow: hidden;
  width: auto;
  height: auto;
}
/*
.mCSB_inside > .mCSB_container{ margin-right: 1.875rem; }*/

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
} /* non-visible scrollbar */

.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
  /* RTL direction/left-side scrollbar */
  margin-right: 0;
  margin-left: 1.875rem;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-left: 0;
} /* RTL direction/left-side scrollbar */

.mCSB_scrollTools {
  /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
  position: absolute;
  width: 1rem;
  height: auto;
  left: auto;
  top: 0;
  right: 0;
  bottom: 0;
}

.mCSB_outside + .mCSB_scrollTools {
  /*right: -66px;*/
  right: -4.875rem;
} /* scrollbar position: outside */

.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  /* RTL direction/left-side scrollbar */
  right: auto;
  left: 0;
}

.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  left: -1.625rem;
} /* RTL direction/left-side scrollbar (scrollbar position: outside) */

.mCSB_scrollTools .mCSB_draggerContainer {
  /* contains the draggable element and dragger rail markup */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto;
}

.mCSB_scrollTools a + .mCSB_draggerContainer {
  margin: 1.25rem 0;
}

.mCSB_scrollTools .mCSB_draggerRail {
  width: 1rem;
  height: 100%;
  margin: 0 auto;
}

.mCSB_scrollTools .mCSB_dragger {
  /* the draggable element */
  cursor: pointer;
  width: 100%;
  height: 1.875rem; /* minimum dragger height */
  z-index: 1;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  /* the dragger element */
  position: relative;
  width: 1rem;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand
  .mCSB_dragger.mCSB_dragger_onDrag_expanded
  .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand
  .mCSB_draggerContainer:hover
  .mCSB_dragger
  .mCSB_dragger_bar {
  width: 12px; /* auto-expanded scrollbar */
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand
  .mCSB_dragger.mCSB_dragger_onDrag_expanded
  + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand
  .mCSB_draggerContainer:hover
  .mCSB_draggerRail {
  width: 8px; /* auto-expanded scrollbar */
}

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown {
  display: block;
  position: absolute;
  height: 1.25rem;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}

.mCSB_scrollTools .mCSB_buttonDown {
  bottom: 0;
}

/* HORIZONTAL SCROLLBAR
=================================================== */

.mCSB_horizontal.mCSB_inside > .mCSB_container {
  margin-right: 0;
  margin-bottom: 1.875rem;
}

.mCSB_horizontal.mCSB_outside > .mCSB_container {
  min-height: 100%;
}

.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0;
} /* non-visible scrollbar */

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  /* width: auto; */
  width: 80%;
  height: 0.25rem;
  top: auto;
  right: 0;
  bottom: 0;
  /* left: 0; */
  left: -1rem;
  /*NEW*/
  margin: 0 auto;

  opacity: 0;
  visibility: hidden;

  transition: opacity 0.5s linear;
}

.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox
  + .mCSB_scrollTools
  + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: 4.375rem; /*0.438rem;*/
} /* scrollbar position: outside */

.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {
  margin: 0 20px;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 0.063rem;
  margin: 0 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 30px; /* minimum dragger width */
  height: 100%;
  left: 0;
  /*THIS LINE BLOW IS NEW!!!!*/
  bottom: 0.219rem;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 0.5rem;
  margin: 0 auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand
  .mCSB_dragger.mCSB_dragger_onDrag_expanded
  .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand
  .mCSB_draggerContainer:hover
  .mCSB_dragger
  .mCSB_dragger_bar {
  height: 12px; /* auto-expanded scrollbar */
  margin: 0 auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand
  .mCSB_dragger.mCSB_dragger_onDrag_expanded
  + .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand
  .mCSB_draggerContainer:hover
  .mCSB_draggerRail {
  height: 8px; /* auto-expanded scrollbar */
  margin: 0 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  display: block;
  position: absolute;
  width: 20px;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {
  left: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  right: 0;
}

/* SYNTAX theme  */

.mCSB_scrollTools {
  opacity: 1;
  filter: 'alpha(opacity=100)';
  -ms-filter: 'alpha(opacity=100)';
}

.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
  opacity: 0;
  filter: 'alpha(opacity=0)';
  -ms-filter: 'alpha(opacity=0)';
}

.mCustomScrollbar
  > .mCustomScrollBox
  > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollbar
  > .mCustomScrollBox
  ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollBox:hover > .mCSB_scrollTools,
.mCustomScrollBox:hover ~ .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools {
  opacity: 1;
  filter: 'alpha(opacity=100)';
  -ms-filter: 'alpha(opacity=100)';
}

.mCSB_scrollTools .mCSB_draggerRail {
  /*
	border-left:0.063rem #313135 solid;
	border-top:0.063rem #313135 solid;
	border-bottom:0.063rem #313135 solid;
	border-right:none;
	background-color: #202023; background-color: rgba(32,32,35,1);

	filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)";*/

  border: 0.063rem #313135 solid;

  background-color: transparent;
  -webkit-transition: background-color 0.25s linear;
  -moz-transition: background-color 0.25s linear;
  -o-transition: background-color 0.25s linear;
  -ms-transition: background-color 0.25s linear;
  transition: background-color 0.25s linear;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  border-left: none;
  border-top: 0.063rem #313135 solid;
  border-bottom: none;
  border-right: none;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #2d2d31;
  background-color: rgba(45, 45, 49, 1);
  filter: 'alpha(opacity=75)';
  -ms-filter: 'alpha(opacity=75)';

  -webkit-transition: background-color 0.25s linear;
  -moz-transition: background-color 0.25s linear;
  -o-transition: background-color 0.25s linear;
  -ms-transition: background-color 0.25s linear;
  transition: background-color 0.25s linear; /**/
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #2d2d31;
  background-color: rgba(45, 45, 49, 1);
  filter: 'alpha(opacity=100)';
  -ms-filter: 'alpha(opacity=100)';
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  /*
	background-color: #2d2d31; background-color: rgba(102,102,102,1);
	background-color: #2d2d31; background-color: rgba(237,36,60,1);
	filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100";
	border-radius:0.250rem;*/
}

.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #e61010;
  background-color: rgba(230, 16, 16, 1);
  filter: 'alpha(opacity=100)';
  -ms-filter: 'alpha(opacity=100)';
}

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight {
  background-image: url(mCSB_buttons.png); /* css sprites */
  background-repeat: no-repeat;
  opacity: 0.4;
  filter: 'alpha(opacity=40)';
  -ms-filter: 'alpha(opacity=40)';
}

.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 0;
}

.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -1.25rem;
}

.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -2.5rem;
}

.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -3.5rem;
}

.mCSB_scrollTools .mCSB_buttonUp:hover,
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover {
  opacity: 0.75;
  filter: 'alpha(opacity=75)';
  -ms-filter: 'alpha(opacity=75)';
}
.mCSB_scrollTools .mCSB_buttonUp:active,
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active {
  opacity: 0.9;
  filter: 'alpha(opacity=90)';
  -ms-filter: 'alpha(opacity=90)';
}

/* ===============================================================

CSS ANIMATION KEYFRAMES

===============================================================


@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg);}}*/

/* KEYFRAMES FOR THE EQUALIZER SVG ANIMATION
=================================================== */

@keyframes equalize {
  0% {
    height: 0.563rem;
  }
  4% {
    height: 0.313rem;
  }
  8% {
    height: 0.625rem;
  }
  12% {
    height: 0.5rem;
  }
  16% {
    height: 0.625rem;
  }
  20% {
    height: 0.313rem;
  }
  24% {
    height: 0.188rem;
  }
  28% {
    height: 0.625rem;
  }
  32% {
    height: 0.313rem;
  }
  36% {
    height: 0.375rem;
  }
  40% {
    height: 0.25rem;
  }
  44% {
    height: 0.625rem;
  }
  48% {
    height: 0.5rem;
  }
  52% {
    height: 0.625rem;
  }
  56% {
    height: 0.625rem;
  }
  60% {
    height: 0.5rem;
  }
  64% {
    height: 0.438rem;
  }
  68% {
    height: 0.125rem;
  }
  72% {
    height: 0.563rem;
  }
  76% {
    height: 0.625rem;
  }
  80% {
    height: 0.536rem;
  }
  84% {
    height: 0.438rem;
  }
  88% {
    height: 0.313rem;
  }
  92% {
    height: 0.625rem;
  }
  96% {
    height: 0.25rem;
  }
  100% {
    height: 0.5rem;
  }
}

/*	GLITCH EFFECT FOR TEXT / HOME HERO NEEDS A SOLID BACKGROUND COLOR!!!!
*	================================================================ */

@keyframes noise-anim {
  0% {
    clip-path: inset(77% 0 23% 0);
  }
  5% {
    clip-path: inset(53% 0 28% 0);
  }
  10% {
    clip-path: inset(5% 0 65% 0);
  }
  15% {
    clip-path: inset(43% 0 45% 0);
  }
  20% {
    clip-path: inset(47% 0 2% 0);
  }
  25% {
    clip-path: inset(28% 0 40% 0);
  }
  30% {
    clip-path: inset(36% 0 42% 0);
  }
  35% {
    clip-path: inset(30% 0 61% 0);
  }
  40% {
    clip-path: inset(59% 0 17% 0);
  }
  45% {
    clip-path: inset(43% 0 52% 0);
  }
  50% {
    clip-path: inset(91% 0 6% 0);
  }
  55% {
    clip-path: inset(62% 0 4% 0);
  }
  60% {
    clip-path: inset(1% 0 50% 0);
  }
  65% {
    clip-path: inset(8% 0 37% 0);
  }
  70% {
    clip-path: inset(16% 0 11% 0);
  }
  75% {
    clip-path: inset(1% 0 18% 0);
  }
  80% {
    clip-path: inset(18% 0 58% 0);
  }
  85% {
    clip-path: inset(38% 0 1% 0);
  }
  90% {
    clip-path: inset(16% 0 45% 0);
  }
  95% {
    clip-path: inset(69% 0 1% 0);
  }
  100% {
    clip-path: inset(88% 0 10% 0);
  }
}

@keyframes noise-anim-2 {
  0% {
    clip-path: inset(8% 0 34% 0);
  }
  5% {
    clip-path: inset(48% 0 41% 0);
  }
  10% {
    clip-path: inset(78% 0 17% 0);
  }
  15% {
    clip-path: inset(100% 0 1% 0);
  }
  20% {
    clip-path: inset(38% 0 26% 0);
  }
  25% {
    clip-path: inset(62% 0 14% 0);
  }
  30% {
    clip-path: inset(70% 0 9% 0);
  }
  35% {
    clip-path: inset(61% 0 40% 0);
  }
  40% {
    clip-path: inset(36% 0 62% 0);
  }
  45% {
    clip-path: inset(59% 0 1% 0);
  }
  50% {
    clip-path: inset(30% 0 60% 0);
  }
  55% {
    clip-path: inset(7% 0 90% 0);
  }
  60% {
    clip-path: inset(51% 0 49% 0);
  }
  65% {
    clip-path: inset(7% 0 73% 0);
  }
  70% {
    clip-path: inset(21% 0 56% 0);
  }
  75% {
    clip-path: inset(68% 0 20% 0);
  }
  80% {
    clip-path: inset(87% 0 11% 0);
  }
  85% {
    clip-path: inset(11% 0 63% 0);
  }
  90% {
    clip-path: inset(19% 0 29% 0);
  }
  95% {
    clip-path: inset(15% 0 72% 0);
  }
  100% {
    clip-path: inset(78% 0 2% 0);
  }
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  /* ... anything needed to make it identical */

  /* variation */
  left: -0.125rem;
  text-shadow: -0.063rem 0 red;

  overflow: hidden;
  animation: noise-anim 2s infinite linear alternate-reverse;

  /* important: opaque background masks the original */
  background: #0f0f0f none;
}
.glitch::after {
  /* ... anything needed to make it identical */

  /* variation */
  left: -0.125rem;
  text-shadow: -0.063rem 0 blue;

  /* important: opaque background masks the original */
  background: #0f0f0f none;

  overflow: hidden;
  animation: noise-anim-2 15s infinite linear alternate-reverse;
}

/*	GLITCH EFFECT FOR IMAGES AND HERO SOLID
*	================================================================ */

@keyframes glitch-anim-1 {
  0% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0);
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  2% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  4% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  6% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  8% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  10% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  12% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  14% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  16% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  18% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0);
  }
  22%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  3% {
    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  5% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  7% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  9% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  11% {
    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  13% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  15% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  17% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }
  19% {
    -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }
  20% {
    -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
  }
  22%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-3 {
  0% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0)
      scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }
  1.5% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }
  2% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }
  2.5% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  3% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }
  5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }
  5.5% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }
  7% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }
  8% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  9% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }
  10.5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }
  11% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }
  13% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }
  14% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }
  14.5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }
  15% {
    -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }
  16% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  18% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }
  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0)
      scale3d(-1, -1, 1);
  }
  22%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-text {
  0% {
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0)
      scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  2% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  4% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  6% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  7% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  8% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  9% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
  9.9% {
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0)
      scale3d(-1, -1, 1);
  }
  10%,
  100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

/* Flash */
@keyframes glitch-anim-flash {
  0%,
  5% {
    opacity: 0.2;
    transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
  }
  5.5%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

/* PRELOADER keyframes
=================================================== */

@keyframes preloader-anti-clockwise {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes preloader-clockwise {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes stop-preloader {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/*
*	================================================================
*	DEV STYLES
*
*	================================================================
*/

#dev {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../img/dev/baseline.svg') left top repeat,
    url(../img/dev/grid.svg) left top repeat-y;
  pointer-events: none;
}

/*
*	================================================================
*	GLOBAL STYLES
*
*	================================================================
*/

html,
body {
  font: normal normal normal 100%/1.5 Helvetica Neue, Helvetica, Arial,
    sans-serif;
  background: #0f0f0f none;
  color: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;

  --color-text: #fff;
  --color-bg: #000;
  --color-link: #f9d77e;
  --color-link-hover: #fff;
  --color-info: #efc453;
  --glitch-width: 100vw;
  --glitch-height: 100vh;
  --gap-horizontal: 10px;
  --gap-vertical: 5px;
  --time-anim: 4s;
  --delay-anim: 2s;
  --blend-mode-1: none;
  --blend-mode-2: none;
  --blend-mode-3: none;
  --blend-mode-4: none;
  --blend-mode-5: overlay;
  --blend-color-1: transparent;
  --blend-color-2: transparent;
  --blend-color-3: transparent;
  --blend-color-4: transparent;
  --blend-color-5: #af4949;
}

div.loader {
  display: none;
} /* Hide the node in charge of the loading of images*/

div.anim-holder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

div.controls {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  height: 3rem;
  color: #fff;
  font-size: 0.625rem;
  text-transform: uppercase;
  text-align: center;
  width: 35%;
  margin: 0 auto;

  transform: translateY(-100%);

  transition: transform 0.25s ease;
}

div.controls ul {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: 'Press Start 2P', sans-serif;
  font-size: 0.45rem;
  text-transform: uppercase;
  text-align: center;
  height: 3rem;

  display: inline-block;
  vertical-align: middle;

  transform: translateY(-100%);

  transition: transform 0.25s ease-in-out;

  border-bottom: 0.063rem rgba(255, 255, 255, 0.25) solid;
}

div.controls ul:before {
  content: attr(data-balls);
  position: absolute;
  width: 100%;
  bottom: -2rem;
  display: none;
  pointer-events: none;
  font-size: 0.5rem;
  text-shadow: #000 0 0.063rem 0.0125rem;
}

div.controls ul:after {
  content: 'controls';
  width: 100%;
  position: absolute;
  bottom: -2rem;
  display: block;
  pointer-events: none;
  font-size: 0.5rem;

  text-shadow: #000 0 0.063rem 0.0125rem;
}

div.controls ul li {
  cursor: pointer;
  margin: 0.25rem;
  padding: 1rem 0;
  pointer-events: auto;
  display: inline-block;
  vertical-align: middle;

  text-shadow: #000 0 0.063rem 0.0125rem;
}

div.controls:hover ul {
  transform: translateY(0);
}

div.controls:hover ul:after {
  content: '';
}

div.controls:hover ul:before {
  display: block;
}

div.settings {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  color: #fff;

  text-transform: uppercase;
  height: 3rem;
  text-align: center;
  width: 70%;

  transform: translateY(100%);

  transition: transform 0.25s ease;
}

div.settings .centered {
  position: relative;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  font-family: 'Press Start 2P', cursive;

  transform: translateY(100%);

  transition: transform 0.25s ease-in-out;

  border-top: 0.063rem rgba(255, 255, 255, 0.25) solid;
}

div.settings .centered:before {
  content: 'settings';
  width: 100%;
  position: absolute;
  top: -2rem;
  display: block;
  pointer-events: none;
  font-size: 0.5rem;
  text-shadow: #000 0 0.063rem 0.0125rem;
}

div.settings .centered h6 {
  margin: 1rem 0;
  font-size: 0.45rem;
  padding: 0;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

div.settings .centered h6:before {
  position: absolute;
  width: auto;
  top: -3.313rem;
  display: none;
  content: attr(data-value);
}

div.settings .centered input {
  display: inline-block;
  vertical-align: middle;
  width: 5rem;
  margin: 1rem 0;
  position: relative;
}

div.settings .centered * {
  pointer-events: auto;
  text-shadow: #000 0 0.063rem 0.0125rem;
}

div.settings:hover .centered {
  transform: translateY(0);
}

div.settings:hover .centered:before {
  content: '';
}

div.settings:hover .centered h6:before {
  display: block;
}

/*	Classes to vertically align in the unknown
*
*	div.centering-holder -> parent. needs to have its own width and height declared separately
*	div.centering-container -> child of div.centering-holder with centered content. Needs to have its own width declared separately
*
*
*
*	================================================================ */

div.centering-holder {
  text-align: center;
}

div.centering-holder:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

div.centering-holder div.centering-container {
  display: inline-block;
  vertical-align: middle;
}

/*	Classes to scrolling content
*
*	div.container-scroller -> parent. its overflow remains hidden
*	div.container-scroller div.container-scroller---holder -> child of div.container-scroller. Its overflow changes to auto to allow inside elements to be scrollable
*
*	by default it has 100% width and height acting as container for div.centering-holder and its children / Vertical aligment on page
*
*	================================================================================================================================== */

div.container-scroller {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

div.container-scroller div.container-scroller---holder {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*	Classes for the background sliders at the back of pages
*
*	================================================================ */

div.bg-slider {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

div.bg-slider ul {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  height: 100%;

  position: relative;
}

div.bg-slider ul li {
  width: 100%;
  height: 100%;
  /* background:transparent url('../img/backgrounds/01.jpg') no-repeat center; */
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;

  transition: opacity 1s linear;

  /*	This needs to change dinamically via js
	*	================================================================ */
  opacity: 0;
}

div.bg-slider ul li.current {
  opacity: 0.1;
}

/*	Styles for rotator container -- generic
*
*	================================================================ */

div.rotatorContainer {
  display: inline-block;
  vertical-align: middle;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  position: relative;
  text-overflow: ellipsis;
  color: inherit;
}

/*	Styles for video at background -- generic
*
*	================================================================ */

div.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: opacity 0.5s linear;

  opacity: 0.25;
}

div.video-bg.hide {
  opacity: 0;
}

div.video-bg div.video-container {
  width: 100%;
  height: 100%;
  white-space: nowrap;

  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

div.video-bg div.video-container video {
  min-width: 100%;
  min-height: 100%;

  display: inline-block;
  vertical-align: top;

  /* opacity:.25; */
}

/*	Styles for audio at background -- generic
*
*	================================================================ */

audio {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5rem;
  z-index: 10000;
}

/*	STYLES FOR THE HOLDER MOVING HORIZONTALLY
*	================================================================ 	*/

div.holder {
  /*position:absolute;
	top:0;
	left:0;*/
  width: auto;
  height: 100%;
  white-space: nowrap;

  filter: blur(0);

  transform: translateX(0);
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1),
    filter 0.05s ease 0.15s;
}

div.holder > section {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  white-space: normal;
  /*
	overflow-y:hidden;
	*/

  overflow: hidden;
  position: relative;
}

div.holder > section > div.vertical-holder {
  width: 100%;
  transform: translateY(0);
  filter: blur(0);
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
    filter 0.05s ease 0.15s;
}

div.holder > section > div.vertical-holder section {
  width: 100%;
  height: 100%;
  overflow: hidden;

  position: relative;
}

/*	THE HEIGHT OF THE THE section.projects>div.vertical-holder HAS TO CHANGE
*	DINANAMICALLY BASED ON THE AMOUNT OF PROJECTS COMING FROM DB ???
*	================================================================ */

div.holder section.projects > div.vertical-holder {
  /*height:500%;*/
  /*
	Looks like 100% is working instead of giving the parent a fixed dimmension?
	*/
  height: 100%;
}

div.holder section.services > div.vertical-holder {
  height: 100%;
}

/*	CHANGE HEIGHT HERE IF MORE STUDIO SLIDES ARE ADDED
*	================================================================ */

div.holder section.studio > div.vertical-holder {
  height: 100%;
}

/*	Classes to commonn footer on pages with div.vertical-holder nodes (projects and studio)
*
*	div.slide-ui--main -> parent. located at bottom. acting as container for the whole ui
*	ul.slide-ui--main---nav -> possible referenced without class. The <ul> node containing the buttons
*
*	PROJECTS CAN TRIGGER VIA section.projects.showcasing THE APPEREANCE OF THE CLOSE ARROW WHICH WILL REMAIN HIDDEN ON section.studio
*
*	================================================================================================================================== */

div.slide-ui--main {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5.15rem;
  width: 100%;
  padding: 0 5.052083333333333%;

  pointer-events: none;

  filter: blur(0) !important;
}

div.slide-ui--main ul.slide-ui--main---nav {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
}

div.slide-ui--main ul.slide-ui--main---nav li {
  display: inline-block;
  vertical-align: top;
  transition: width 0.5s ease;
  pointer-events: none;
}

/*	counter <li>
*	================================================================ */

div.slide-ui--main ul.slide-ui--main---nav li.counter {
  width: 4.813rem;
  height: 100%;
  font-family: 'Changa_Regular', sans-serif;
  font-size: 0.75rem;

  padding: 0 0 0 4.75rem;
}

/*	prev <li>
*	================================================================ */

div.slide-ui--main ul.slide-ui--main---nav li.prev {
  height: 100%;
  /*
	width:calc(100% - 2.625rem - 2.625rem - 4.813rem);
	*/

  width: calc(100% - 2.625rem - 4.813rem);

  text-align: right;
}

div.slide-ui--main ul.slide-ui--main---nav li.prev span {
  display: inline-block;
  width: 2.625rem; /* This li.span does not have 100% but the calculated size of the other parent <li> so clickable button area is adjusted	*/
  height: 100%;
  pointer-events: auto;
  cursor: pointer;

  background: transparent url('../img/ui/arrow_up.svg') no-repeat top center;
}

/*	next <li>
*	================================================================ */

div.slide-ui--main ul.slide-ui--main---nav li.next {
  height: 100%;
  width: 2.625rem;
}

div.slide-ui--main ul.slide-ui--main---nav li.next span {
  display: inline-block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: auto;
  background: transparent url('../img/ui/arrow_down.svg') no-repeat top right;
}

div.slide-ui--main ul.slide-ui--main---nav li.prev span.active {
  background: transparent url('../img/ui/arrow_up_active.svg') no-repeat top
    center;
}

div.slide-ui--main ul.slide-ui--main---nav li.next span.active {
  background: transparent url('../img/ui/arrow_down_active.svg') no-repeat top
    right;
}

/*	close <li>
*	================================================================ */

div.slide-ui--main ul.slide-ui--main---nav li.close {
  height: 100%;
  width: 0;
  opacity: 0;
  transition: opacity 0.5s linear;
}

div.slide-ui--main ul.slide-ui--main---nav li.close span {
  display: inline-block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: auto;
  background: transparent url('../img/ui/close_rounded.svg') no-repeat top right;
}

/*
*	================================================================
*	PRELOADER
*
*	================================================================
*/

div.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0f0f0f url('../img/preloader/Loading BKG.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  z-index: 102;

  transform: translateY(0);

  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);

  /* display:none; */
}

div.preloader.hide {
  transform: translateY(100%);
}

div.preloader-holder {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent none;
}

div.preloader-holder div.preloader-content {
  width: 50%;
  font-family: 'tekoregular', sans-serif;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.125rem;
}

div.preloader-holder div.preloader-content div {
  width: 9.375rem;
  height: 10rem;
  margin: 0 auto;
  position: relative;
}

div.preloader span {
  display: block;
  text-align: center;
  margin: auto;
  margin-left: 5.5%;
  text-transform: uppercase;
  color: #fff;
  font-family: 'tekoregular', sans-serif;
  letter-spacing: 0.125rem;
}

div.preloader-holder div.preloader-content div svg {
  position: absolute;
}

div.preloader-holder div.preloader-content div svg:first-of-type {
  left: calc(50% - (4.519rem / 2));
  top: calc(50% - (4.737rem / 2));

  animation: preloader-anti-clockwise 2s linear 0s infinite normal;
} /*inner-ring*/

div.preloader-holder div.preloader-content div svg:nth-child(2) {
  left: calc(50% - (6.119rem / 2));
  top: calc(50% - (6.129rem / 2));

  animation: preloader-clockwise 2s linear 0s infinite normal;
} /*inner-middle-ring*/

div.preloader-holder div.preloader-content div svg:nth-child(3) {
  left: calc(50% - (6.974rem / 2));
  top: calc(50% - (7.224rem / 2));

  animation: preloader-anti-clockwise 2s linear 0s infinite normal;
} /*outter-middle-ring*/

div.preloader-holder div.preloader-content div svg:last-of-type {
  left: calc(50% - (7.688rem / 2));
  top: calc(50% - (7.88rem / 2));

  animation: preloader-clockwise 2s linear 0s infinite normal;
} /*outter-ring*/

div.preloader-holder div.preloader-content div svg.stop {
  animation: stop-preloader 1s cubic-bezier(0.19, 1, 0.22, 1) 0s 1 !important;
}

div.preloader-holder div.preloader-content div svg path,
div.preloader-holder div.preloader-content div svg circle,
div.preloader-holder div.preloader-content div svg ellipse {
  transition: fill 0.5s linear;
}
.preloader-bar {
  width: 13%;
  margin: auto;
  position: relative;
  top: 61.5%;
}
.preloader-bar .cls-2 {
  -webkit-animation-name: preloader-bar-flash;
  -webkit-animation-duration: 0.7s;
  -webkit-animation-iteration-count: infinite;

  animation-name: preloader-bar-flash;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
}
@keyframes preloader-bar-flash {
  75% {
    opacity: 0.5;
  }
}

/* COLORS
=================================================== */
div.preloader-holder div.preloader-content div svg.loading ellipse,
div.preloader-holder div.preloader-content div svg.loading circle,
div.preloader-holder div.preloader-content div svg.loading path {
  fill: #fff !important;
}

div.preloader-holder div.preloader-content div svg.loaded ellipse,
div.preloader-holder div.preloader-content div svg.loaded circle,
div.preloader-holder div.preloader-content div svg.loaded path {
  fill: #e61010 !important;
}

/* MUSIC PLAYER BUTTON
=================================================== */

div.music-player-btn {
  position: fixed;
  left: 5.052083333333333%;
  bottom: 0;
  width: 1.438rem;
  height: 8rem;

  opacity: 1;

  z-index: 101;
  cursor: pointer;

  transform: translateY(0);

  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.25s linear;
}

div.music-player-btn:hover {
  opacity: 0.25;
}

div.music-player-btn div.music-player-btn--equalizer {
  width: 100%;
  height: 80%;
  display: inline-block;
}

div.music-player-btn div.music-player-btn--equalizer svg.equalizer {
  width: 100%;
  height: 100%;
  transform: rotate(180deg);

  display: block;
}

/* div.music-player-btn div.music-player-btn--equalizer svg.equalizer_muted {
	width:100%;
	height:100%;
	transform:rotate(180deg);
	display:none;

} */

/* div.music-player-btn div.music-player-btn--equalizer svg.equalizer_muted rect.bar{
	fill: white;
  width:0.188rem;
	height:0.313rem;
} */

div.music-player-btn div.music-player-btn--equalizer svg.equalizer rect.bar {
  fill: #666666;
  width: 0.188rem;
  animation: equalize 2.75s steps(25, end) 0s infinite;
}

div.music-player-btn
  div.music-player-btn--equalizer
  svg.equalizer
  rect.bar:nth-child(1) {
  animation-duration: 2.9s;
}

div.music-player-btn
  div.music-player-btn--equalizer
  svg.equalizer
  rect.bar:nth-child(2) {
  animation-duration: 3s;
}

div.music-player-btn
  div.music-player-btn--equalizer
  svg.equalizer
  rect.bar:nth-child(3) {
  animation-duration: 3.3s;
}

div.music-player-btn
  div.music-player-btn--equalizer
  svg.equalizer
  rect.bar:nth-child(4) {
  animation-duration: 3.4s;
}

div.music-player-btn
  div.music-player-btn--equalizer
  svg.equalizer
  rect.bar:nth-child(5) {
  animation-duration: 3.1s;
}

/* CSS OVERRIDES - PLAYING MUSIC
=================================================== */

div.music-player-btn.playing div.music-player-btn--equalizer svg.equalizer {
  display: block;
}

div.music-player-btn.playing
  div.music-player-btn--equalizer
  svg.equalizer
  rect.bar {
  fill: white;
}
/* div.music-player-btn.playing div.music-player-btn--equalizer svg.equalizer_muted {
	display:none;
} */

/*
*	================================================================
*	NAV STYLES
*
*	================================================================
*/

nav {
  width: 100%;
  height: 10.313rem;
  padding: 2.625rem 5.052083333333333%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  /*
	background:rgba(255,0,0,.25) none;
	*/

  transform: translateY(0);

  pointer-events: none;
}

nav header {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}

nav header div.main_logo {
  width: 10.375rem;
  height: 3.75rem;
}

nav header div.main_logo a {
  background: transparent url('../img/logo_nav.svg') no-repeat center center;
  width: 100%;
  height: 100%;
  display: inline-block;
  padding: 0;
  margin: 0 0 0 0.5rem;
  border: none;
  outline: none;
  pointer-events: auto;
}

nav header div.nav_menu {
  display: none;
}

nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline-block;
  vertical-align: middle;
  font-family: 'United_Sans_Heavy', sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  text-align: right;
  width: 50%;
}

nav ul li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4.25% 0 0;
  width: auto;
  position: relative;
}

nav ul li:before {
  content: '';
  display: block;
  position: absolute;
  left: -10%;
  bottom: -0.25rem;
  height: 0.063rem;
  width: 0;
  transition: width 0s ease, background 0.5 ease;
}
nav ul li:after {
  content: '';
  display: block;
  position: absolute;
  right: -10%;
  bottom: -0.25rem;
  height: 0.063rem;
  width: 0;
  background: #e61010;
  transition: width 0.5s ease;
}

nav ul li:hover:before,
nav ul li.current:before {
  width: 120%;
  background: #e61010;
  transition: width 0.5s ease;
}
nav ul li:hover:after,
nav ul li.current:after {
  width: 120%;
  background: transparent;
  transition: all 0s ease;
}

nav ul li:last-of-type {
  margin: 0;
}
nav ul li a {
  text-decoration: none;
  color: inherit;
  display: block;
  border: none;
  outline: none;

  pointer-events: auto;
}

/*
*	================================================================
*	FOOTER STYLES / ANIM BUTTON + SOCIAL ICONS FOR HOME
*
*	================================================================
*/

footer {
  width: 100%;
  height: 8rem;
  padding: 2.625rem 5.052083333333333%;
  position: fixed;
  bottom: 0;
  left: 0;
  white-space: normal;
  /*
	background:rgba(255,0,0,.15) none;
	*/

  display: flex;
  justify-content: space-between;
  vertical-align: middle;

  /* transform:translateY(100%); */
  transform: translateY(0);

  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);

  pointer-events: none;

  z-index: 100;
}

footer div {
  display: inline-block;
  vertical-align: middle;
  width: 10.875rem;
  margin: 0 0 0 4.75rem;
  height: 100%;
}

footer div span {
  display: inline-block;
  vertical-align: middle;
}

footer div span.game-btn {
  width: 1.563rem;
  height: 1.563rem;
  background: transparent url('../img/ui/play_anim_icon.svg') no-repeat center
    left;
  cursor: pointer;
  opacity: 1;
  padding: 0 0 0 10.875rem;
  transition: opacity 0.25s linear;

  pointer-events: auto;
}

footer div span.game-btn:hover {
  opacity: 0.25;
}

/* footer div a.syntax {
	width:5.938rem;
	height:0.438rem;
	background:transparent url('../img/ui/madeby_syntaxcgi.svg') no-repeat center center;
	margin:0 0 0 1.250rem;
	display:inline-block;

	opacity:1;

	transition:opacity .25s linear;

	pointer-events: auto;


}

footer div a.syntax:hover {
	opacity:.25;
}*/

footer p a.home-disclaimerLink {
  text-decoration: none;
  font-family: 'tekoregular';
  color: #8d191b;
  pointer-events: auto;
  cursor: pointer;
}
footer p.home-disclaimer {
  width: 68rem;
  margin-left: 3.2%;
  align-self: center;
  margin-top: 0;

  text-align: center;
  line-height: 1;

  font-size: 1.058vw;
  font-weight: 600;
  cursor: pointer;
}
footer p.about-disclaimer {
  width: 68rem;
  margin-left: 3.2%;
  align-self: center;

  text-align: center;
  line-height: 1;

  font-size: 1.058vw;
  cursor: pointer;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 20rem;
  display: flex;
  justify-content: center;
  align-items: baseline;
  height: 100%;

  pointer-events: none;
}
footer ul li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.8rem;
  height: 100%;
  padding: 0;

  opacity: 0.5;

  transition: opacity 0.25s linear;
}

footer ul li:last-of-type {
  margin: 0 0 0 1rem;
}

footer ul li:hover {
  opacity: 0.25;
}

footer ul li a {
  display: inline-block;
  text-decoration: none;
  width: 100%;
  height: 100%;

  pointer-events: auto;
}

footer ul li.twitter {
  width: 1.137rem;
  height: 0.919rem;
}

footer ul li.twitter a {
  background: transparent url('../img/social_icons/twitter.svg') no-repeat
    center center;
  background-size: contain;
}

footer ul li.facebook {
  width: 0.6125rem;
  height: 1.0941rem;
}

footer ul li.facebook a {
  background: transparent url('../img/social_icons/facebook.svg') no-repeat
    center center;
  background-size: contain;
}

footer ul li.instagram {
  width: 1.007rem;
  height: 0.9625rem;
}

footer ul li.instagram a {
  background: transparent url('../img/social_icons/instagram.svg') no-repeat
    center center;
  background-size: contain;
}

footer ul li.linkedin {
  width: 0.875rem;
  height: 0.832rem;
}

footer ul li.linkedin a {
  background: transparent url('../img/social_icons/linkedin.svg') no-repeat
    center center;
  background-size: contain;
}

footer ul li.behance {
  width: 1.563rem;
  height: 1rem;
}

footer ul li.behance a {
  background: transparent url('../img/social_icons/behance.svg') no-repeat
    center center;
  background-size: contain;
}

footer ul li.youtube {
  width: 1.094rem;
  height: 0.7875rem;
}

footer ul li.youtube a {
  background: transparent url('../img/social_icons/youtube.svg') no-repeat
    center center;
  background-size: contain;
}

footer ul li.email {
  width: 1.05rem;
  height: 0.774rem;
}

footer ul li.email a {
  background: transparent url('../img/social_icons/email.svg') no-repeat center
    center;
  background-size: contain;
}

/*
*	================================================================
*	HOME STYLES
*
*	================================================================
*/

section.home div.home-holder {
  width: 100%;
  height: 100%;

  perspective: 0.625rem; /* 3D EFFECT MOUSE MOVE */
}
section.home div.home-holder div.home-content {
  max-width: 31.875rem;
  width: 100%;
  text-decoration: "none";
  transition: transform 0.5s; /* 3D EFFECT MOUSE MOVE */
}

section.home div.home-holder div.home-content a{
  text-decoration: none;
  pointer-events: all;
}

section.home div.home-holder div.home-content h3 {
  width: 100%;
  padding: 0;
  margin: 0;
  /* font-family: 'Flight_Corps', sans-serif; */
  font-family: 'United_Sans_Heavy', sans-serif;
  font-size: 5rem;
  line-height: 3.7rem;
  text-transform: uppercase;
  pointer-events: none;
  position: relative;
  /* color:#e61010; */
  color: #fff;

  /* text-shadow: #e61010 -0.063rem -0.063rem 0, #1010e6 0.063rem 0.063rem 0; */

  /* -webkit-text-stroke: 0.063rem #e61010;
	-webkit-text-fill-color: #fff; */

  /* animation-name: glitch-anim-text;
	animation-duration: var(--time-anim);
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25); */
}

/*
*	================================================================
*	ABOUT STYLES
*
*	================================================================
*/

section.about div.about-holder {
  width: 100%;
  height: 100%;
}

section.about div.about-holder div.about-content {
  width: 89%;
}

section.about div.about-holder div.about-content > div {
  display: inline-block;
  vertical-align: middle;
}

/*===== FULL DISCLAIMER STYLE ===========*/
section.about div.about-holder div.full-disclaimer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

section.about div.about-holder div.full-disclaimerBKG {
  width: 100%;
  height: 100%;
  position: absolute;

  background-color: black;
  opacity: 0.95;
}

section.about div.about-holder div.full-disclaimerText {
  width: 85%;

  position: relative;
  margin: 22.7% 7.5% 10% 7.5%;

  display: flex;
  flex-flow: column;
  align-items: center;

  font-family: tekoregular;
  font-size: 1.1vw;
  color: white;
  font-weight: 600;

  text-align: justify;
  text-justify: inter-word;
  text-transform: uppercase;
  word-spacing: 0.051rem;
  line-height: 1.07;
}

section.about
  div.about-holder
  div.full-disclaimerText
  span.full-disclaimerClose {
  cursor: pointer;
  font-size: 1.4vw;
}
section.about
  div.about-holder
  div.full-disclaimerText
  span.full-disclaimerTitle {
  font-size: 1.4vw;
}
section.about div.about-holder div.full-disclaimerText span#redText {
  color: #8d191b; /*for the text in red*/
}
section.about div.about-holder div.full-disclaimerText span#greyText {
  margin: 0 8.5%;

  font-size: 1.17vw;
  color: #878484;
  text-align: center;
}

/*=======================================================*/

section.about div.about-holder div.about-content div.about-content-main {
  text-align: justify;
  width: 50%;
  /*
	background:rgba(255,0,0,.2) none;*/
}

section.about div.about-holder div.about-content div.about-content-main h3 {
  font-family: 'Changa_Bold', sans-serif;
  font-size: 1.5rem;
  line-height: 2.25rem;
  padding: 0;
  margin: 0;
  font-weight: 400;
  color: #fff;
}

section.about div.about-holder div.about-content div.about-content-info {
  width: 45%;
  /*background:rgba(0,255,0,.2) none;*/
  text-align: right;
}

section.about div.about-holder div.about-content div.about-content-info ul {
  margin: 0 0 2.25rem 0;
  list-style: none;
  display: inline-block;
  vertical-align: top;
  width: 18.188rem;
  text-align: left;
  color: #fff;
  font-family: 'Changa_Regular', sans-serif;
  line-height: 1.125rem;
  /*
	background:rgba(0,0,255,.2) none;
	*/
}
section.about
  div.about-holder
  div.about-content
  div.about-content-info
  ul:last-of-type {
  margin-top: -10%;
}

section.about
  div.about-holder
  div.about-content
  div.about-content-info
  ul
  li.about-content-info-header {
  color: #e61010;
  font-family: 'United_Sans_Bold', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
}

section.about
  div.about-holder
  div.about-content
  div.about-content-info
  ul
  li
  a {
  border: none;
  outline: none;
}

section.about
  div.about-holder
  div.about-content
  div.about-content-info
  ul
  li.link
  a {
  color: #e61010;
  text-decoration: none;
}

section.about
  div.about-holder
  div.about-content
  div.about-content-info
  ul
  li.mail
  a {
  color: inherit;
  text-decoration: none;
}
section.about
  div.about-holder
  div.about-content
  div.about-content-info
  ul
  li.flying-wild-hog-logo
  a {
  display: inline-block;
  width: 5.875rem;
  height: 3.844rem;
  background: transparent url('../img/logos/Flying_Wild_Hog.svg') no-repeat
    center;
  background-size: contain;
  margin: 1.125rem 0 0 0;

  opacity: 1;

  transition: opacity 0.25s linear;
}

section.about
  div.about-holder
  div.about-content
  div.about-content-info
  ul
  li.flying-wild-hog-logo
  a:hover {
  opacity: 0.25;
}

section.about
  div.about-holder
  div.about-content
  div.about-content-info
  ul
  li.vicon-logo
  a {
  display: inline-block;
  width: 5.75rem;
  height: 1.325rem;
  background: transparent url('../img/logos/Vicon.svg') no-repeat center;
  background-size: contain;
  margin: 1.125rem 0 0 0;

  opacity: 1;

  transition: opacity 0.25s linear;
}

section.about
  div.about-holder
  div.about-content
  div.about-content-info
  ul
  li.vicon-logo
  a:hover {
  opacity: 0.25;
}

/*
*	================================================================
*	PROJECT STYLES
*
*	================================================================
*/

/*	VARS 4 .glitch-img effect
*	================================================================ */

section.projects {
  /* --color-text: #fff;
	--color-bg: #000;
	--color-link: #f9d77e;
	--color-link-hover: #fff;
	--color-info: #efc453;
	--glitch-width: 100vw;
	--glitch-height: 100vh;
	--gap-horizontal: 10px;
	--gap-vertical: 5px;
	--time-anim: 4s;
	--delay-anim: 2s;
	--blend-mode-1: none;
	--blend-mode-2: none;
	--blend-mode-3: none;
	--blend-mode-4: none;
	--blend-mode-5: overlay;
	--blend-color-1: transparent;
	--blend-color-2: transparent;
	--blend-color-3: transparent;
	--blend-color-4: transparent;
	--blend-color-5: #af4949; */
}

section.projects section.project-slide div.glitch-img {
  position: absolute;
  width: var(--glitch-width);
  height: var(--glitch-height);
  overflow: hidden;
  z-index: -1;

  transform: scale(1);

  transition: transform 0.5s ease;

  pointer-events: none;

  /*
	width:100%;
	height:100%;
	*/
}

section.projects section.project-slide div.glitch-img div.glitch--img {
  position: absolute;
  top: calc(-1 * var(--gap-vertical));
  left: calc(-1 * var(--gap-horizontal));
  width: calc(100% + var(--gap-horizontal) * 2);
  height: calc(100% + var(--gap-vertical) * 2);
  /* background: url(../img/backgrounds/04.jpg) no-repeat 50% 0; */
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-color: var(--blend-color-1);
  background-size: cover;
  transform: translate3d(0, 0, 0);
  background-blend-mode: var(--blend-mode-1);

  /*
	width:100%;
	height:100%;
	*/
}

section.projects
  section.project-slide:nth-child(2)
  div.glitch-img
  div.glitch--img {
  background: url(../img/backgrounds/01.jpg) no-repeat 50% 0;
}

section.projects
  section.project-slide
  div.glitch-img
  div.glitch--img:nth-child(n + 2) {
  opacity: 0;
}

section.projects
  section.project-slide
  div.glitch-img
  div.glitch--img:nth-child(n + 2) {
  animation-duration: var(--time-anim);
  animation-delay: var(--delay-anim);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

section.projects
  section.project-slide
  div.glitch-img
  div.glitch--img:nth-child(2) {
  background-color: var(--blend-color-2);
  background-blend-mode: var(--blend-mode-2);
  animation-name: glitch-anim-1;
}

section.projects
  section.project-slide
  div.glitch-img
  div.glitch--img:nth-child(3) {
  background-color: var(--blend-color-3);
  background-blend-mode: var(--blend-mode-3);
  animation-name: glitch-anim-2;
}

section.projects
  section.project-slide
  div.glitch-img
  div.glitch--img:nth-child(4) {
  background-color: var(--blend-color-4);
  background-blend-mode: var(--blend-mode-4);
  animation-name: glitch-anim-3;
}

section.projects
  section.project-slide
  div.glitch-img
  div.glitch--img:nth-child(5) {
  background-color: var(--blend-color-5);
  background-blend-mode: var(--blend-mode-5);
  animation-name: glitch-anim-flash;
}

section.projects section.project-slide div.project-hero-holder {
  width: 100%;
  height: 100%;
} /* Already has .centering-holder class (parent) */

section.projects
  section.project-slide
  div.project-hero-holder
  div.project-hero--content {
  max-width: 49.75rem;
  width: 100%;
  transition: margin 0.5s ease;
  position: relative;
}

section.projects
  section.project-slide
  div.project-hero-holder
  div.project-hero--content
  span.project-hero--desktop---arrow----prev,
section.projects
  section.project-slide
  div.project-hero-holder
  div.project-hero--content
  span.project-hero--desktop---arrow----next {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background: transparent url('../img/ui/Mocap_Desktop_Hero_Arrow.svg')
    no-repeat center center;
  cursor: pointer;
  padding: 0.5rem;
  transition: opacity 0.25s linear, height 0.25s ease, padding 0.25s ease;
  opacity: 1;
}

section.projects
  section.project-slide
  div.project-hero-holder
  div.project-hero--content
  span.project-hero--desktop---arrow----prev:hover,
section.projects
  section.project-slide
  div.project-hero-holder
  div.project-hero--content
  span.project-hero--desktop---arrow----next:hover {
  opacity: 0.5;
}

section.projects
  section.project-slide
  div.project-hero-holder
  div.project-hero--content
  span.project-hero--desktop---arrow----next {
  transform: rotate(180deg);
}

section.projects
  section.project-slide
  div.project-hero-holder
  div.project-hero--content
  h2.project-hero--content---title {
  width: 100%;
  font-size: 5.25rem;
  font-weight: 400;
  padding: 1.5rem 0;
  margin: 0;
  font-family: 'United_Sans_Heavy', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  transition: padding 0.25s ease, opacity 0.25s linear;
  opacity: 1;

  /*
	line-height:4.313rem;
	*/

  /*
	transform:scale(1);

	transition:transform 0.5s ease !important;
	*/

  cursor: pointer;

  animation-name: glitch-anim-text;
  animation-duration: var(--time-anim);
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.25);
}

section.projects
  section.project-slide:not(.active)
  div.project-hero-holder
  div.project-hero--content
  h2.project-hero--content---title:hover {
  opacity: 0.25;
}

section.projects
  section.project-slide
  div.project-hero-holder
  div.project-hero--content
  p.project-hero--content---desc {
  font-family: 'Changa_Bold', sans-serif;
  padding: 0;
  margin: 0;
  /* color:#383838; */
  color: #666666;
  line-height: 1.5rem;

  opacity: 0;
  visibility: hidden;
  height: 0;

  transition: visibility 0s linear, opacity 0.5s linear;

  text-shadow: #000 0 0.063rem 0.063rem;

  /*
	we can hide or animate properties later on


	display:none;*/
}

section.projects
  section.project-slide
  div.project-hero-holder
  div.project-hero--content
  div.project-hero--content---closer {
  background: #ff0000 none;
  display: inline-block;
  margin: 2.5rem 0 0 0;
  display: none;
  overflow-y: hidden;

  transition: box-shadow 0.25s linear;

  box-shadow: 0 0 0.313rem 0.313rem rgba(0, 0, 0, 0);
}

section.projects
  section.project-slide
  div.project-hero-holder
  div.project-hero--content
  div.project-hero--content---closer
  span.project-hero--content---closer----btn:after {
  content: 'back to projekts';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0.75rem 2rem;
  letter-spacing: 0.063rem;
}

section.projects
  section.project-slide
  div.project-hero-holder
  div.project-hero--content
  div.project-hero--content---closer
  span.project-hero--content---closer----btn {
  text-transform: uppercase;
  font-size: 1rem;
  font-family: 'United_Sans_Heavy', sans-serif;
  color: #fff;
  letter-spacing: 0.063rem;
  cursor: pointer;
  display: inline-block;
  padding: 0.75rem 2rem;
  position: relative;

  transform: translateY(0);

  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

section.projects
  section.project-slide
  div.project-hero-holder
  div.project-hero--content
  div.project-hero--content---closer:hover {
  box-shadow: 0 0 0.313rem 0.313rem rgba(0, 0, 0, 0.25);
}

section.projects
  section.project-slide
  div.project-hero-holder
  div.project-hero--content
  div.project-hero--content---closer:hover
  span.project-hero--content---closer----btn {
  transform: translateY(-100%);
}

/*	FOLLOWING STYLES ARE TO BE REFACTORED - DEV PURPOSES section.project-slide.active
*	================================================================ */

section.projects section.project-slide.active div.glitch-img {
  transform: scale(1.25);
}

section.projects
  section.project-slide.active
  div.project-hero-holder
  div.project-hero--content {
  margin: -7rem 0 0 0;
}

section.projects
  section.project-slide.active
  div.project-hero-holder
  div.project-hero--content
  h2.project-hero--content---title {
  animation-name: none;
  font-size: 3.125rem;
  padding: 0;

  /*transform:scale(0.75) !important;*/
}

section.projects
  section.project-slide.active
  div.project-hero-holder
  div.project-hero--content
  span.project-hero--desktop---arrow----prev,
section.projects
  section.project-slide.active
  div.project-hero-holder
  div.project-hero--content
  span.project-hero--desktop---arrow----next {
  opacity: 0;
  height: 0;
  padding: 0;
}

section.projects
  section.project-slide.active
  div.project-hero-holder
  div.project-hero--content
  p.project-hero--content---desc {
  height: auto;
  visibility: visible;
  opacity: 1;
}
section.projects
  section.project-slide.active
  div.project-hero-holder
  div.project-hero--content
  div.project-hero--content---closer {
  display: inline-block;
}

section.projects section.project-slide.active div.glitch--img {
  animation-name: none !important;
}

section.projects
  section.project-slide.active
  .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  opacity: 1;
  visibility: visible;
}

/* Specific styles for the navigation on projects
=================================================== */

section.projects div.slide-ui--main ul.slide-ui--main---nav li.prev,
section.projects div.slide-ui--main ul.slide-ui--main---nav li.next {
  opacity: 0;
  transition: opacity 0.25s linear;
}

/*
*	================================================================
*	PROJECTS THUMBS (BOTTOM)
*
*	================================================================
*/

section.projects section.project-slide div.projects-ui--thumbs {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 16.875rem;
  width: 89.895833333%;
  padding: 0;
  margin: 0 auto;
  overflow-x: auto;

  z-index: 1000;
}

section.projects
  section.project-slide
  div.projects-ui--thumbs
  ul.projects-ui--thumbs---list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  overflow-y: hidden;
  /*height:8.438rem;


	text-align:left;
	*/

  white-space: nowrap;
}

section.projects
  section.project-slide
  div.projects-ui--thumbs
  ul.projects-ui--thumbs---list
  li {
  display: inline-block;
  width: 16.938rem;
  height: 8.438rem;
  margin: 0 1.25rem 0 0;
  position: relative;
  background: #181818 none;
  border: transparent 0.313rem solid;

  transform: translateY(100%);
  transition: border 0.5s linear, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

section.projects
  section.project-slide
  div.projects-ui--thumbs
  ul.projects-ui--thumbs---list
  li
  div.projects-ui-thumbs---img {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  top: 0;
  left: 0;

  filter: grayscale(100%);
  opacity: 0.15;

  transition: opacity 0.5s linear, filter 0.5s linear;
}

section.projects
  section.project-slide
  div.projects-ui--thumbs
  ul.projects-ui--thumbs---list
  li
  a.projects-ui-thumbs---title {
  display: inline-block;
  width: 100%;
  height: 100%;

  text-decoration: none;
  font-size: 0.813rem;
  font-family: 'United_Sans_Bold', sans-serif;
  letter-spacing: 0.063rem;
  text-transform: uppercase;
  text-align: center;
  color: #fff;

  line-height: 8.438rem;
}

section.projects
  section.project-slide
  div.projects-ui--thumbs
  ul.projects-ui--thumbs---list
  li
  a.projects-ui-thumbs---title
  div.rotatorContainer {
  width: calc(100% - 3.25rem);
  /* height:100%; */
}

section.projects
  section.project-slide
  div.projects-ui--thumbs
  ul.projects-ui--thumbs---list
  li
  a.projects-ui-thumbs---title
  div.rotatorContainer
  span {
  pointer-events: none;
  text-shadow: #000 0 0.063rem 0.063rem;
}

section.projects
  section.project-slide
  div.projects-ui--thumbs
  ul.projects-ui--thumbs---list
  li:last-of-type {
  margin: 0;
}

section.projects
  section.project-slide
  div.projects-ui--thumbs
  ul.projects-ui--thumbs---list
  li:hover {
  border: #e61010 0.313rem solid;
}

section.projects
  section.project-slide
  div.projects-ui--thumbs
  ul.projects-ui--thumbs---list
  li:hover
  div.projects-ui-thumbs---img {
  filter: grayscale(50%);
  opacity: 0.5;
}

/*	FOLLOWING STYLES ARE TO BE REFACTORED - DEV PURPOSES section.project-slide.active
*	================================================================ */

section.projects
  section.project-slide.active
  div.projects-ui--thumbs
  ul.projects-ui--thumbs---list
  li {
  transform: translateY(0);
}

/*	OVERRIDE STYLES FOR ACTIVE SHOWCASE div.projects.showcasing
*	================================================================ */

/* section.projects.showcasing div.slide-ui--main ul.slide-ui--main---nav li.prev {
	width:calc(100% - 2.625rem - 2.625rem - 4.813rem);
	background-position:top left;
}

section.projects.showcasing div.slide-ui--main ul.slide-ui--main---nav li.close {
	width:2.625rem;
	opacity:1;

	transition-delay:.25s;
}

section.projects.showcasing div.slide-ui--main ul.slide-ui--main---nav li.next span {

	background-position:top center;
}*/

section.projects.showcasing div.slide-ui--main ul.slide-ui--main---nav li.prev,
section.projects.showcasing div.slide-ui--main ul.slide-ui--main---nav li.next {
  opacity: 1;
}

/*
*	================================================================
*	CLIENT STYLES
*
*	================================================================
*/

section.clients div.clients-slider {
  /* max-width:82.50rem; */
  max-width: 72.5rem;
  width: 100%;
  height: 100%;

  margin: 0 auto;

  overflow-y: auto;
}

section.clients div.clients-slider ul {
  list-style: none;
  padding: 0;
  margin: 0;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-flow: row wrap;
}

section.clients div.clients-slider ul li {
  width: 16.5rem;
  height: 10rem;
  padding: 0;
  margin: 0;
}

section.clients div.clients-slider ul li div {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;

  opacity: 1;

  transition: opacity 0.5s linear;
}

section.clients div.clients-slider ul li div.loading {
  opacity: 0;
  transition-duration: 0s;
}

section.clients div.clients-slider ul li:nth-child(1) div {
  background-size: 40% auto;
}

section.clients div.clients-slider ul li:nth-child(2) div {
  background-size: 65% auto;
}

section.clients div.clients-slider ul li:nth-child(3) div {
  background-size: 70% auto;
}

section.clients div.clients-slider ul li:nth-child(4) div {
  background-size: 70% auto;
}

section.clients div.clients-slider ul li:nth-child(5) div {
  background-size: 45% auto;
}

section.clients div.clients-slider ul li:nth-child(6) div {
  background-size: 75% auto;
}

section.clients div.clients-slider ul li:nth-child(7) div {
  background-size: 55% auto;
}

section.clients div.clients-slider ul li:nth-child(8) div {
  background-size: 60% auto;
}

section.clients div.clients-slider ul li:nth-child(9) div {
  /* background-size:60% auto; */
}

section.clients div.clients-slider ul li:nth-child(10) div {
  background-size: 23% auto;
}

/* section.clients div.clients-slider ul {
	list-style:none;
	padding:0;
	margin:0;
	white-space: nowrap;
	height:100%;

	transform:translateX(0);

	transition:transform 1s cubic-bezier(0.190, 1.000, 0.220, 1.000) .25s;
}

section.clients div.clients-slider ul li {
	width:100%;
	height:100%;
	display:inline-block;

	background-repeat:no-repeat;
	background-position:center center;

	opacity:0;

	transition:opacity 0.5s linear;

}

section.clients div.clients-slider ul li.current {
	opacity:1;
	transition-delay:0.5s;
}

section.clients div.clients-slider ul li:nth-child(1) {
	background-image:url('../img/logos/11_Bit.svg');
	background-size:10% auto;
}

section.clients div.clients-slider ul li:nth-child(2) {
	background-image:url('../img/logos/Astronauts.svg');
}

section.clients div.clients-slider ul li:nth-child(3) {
	background-image:url('../img/logos/CD_Project_Red.svg');
}

section.clients div.clients-slider ul li:nth-child(4) {
	background-image:url('../img/logos/Ethan_Carter.svg');
}

section.clients div.clients-slider ul li:nth-child(5) {
	background-image:url('../img/logos/Flying_Wild_Hog_Full.svg');
}

section.clients div.clients-slider ul li:nth-child(6) {
	background-image:url('../img/logos/Shadow_Warrior.svg');
}

section.clients div.clients-slider ul li:nth-child(7) {
	background-image:url('../img/logos/Vicon.svg');
	background-size:12% auto;
}

section.clients div.clients-slider ul li:nth-child(8) {
	background-image:url('../img/logos/Witcher_3.svg');
	background-size:12% auto;
} */

/*
*	================================================================
*	STUDIO STYLES
*
*	================================================================
*/

/*	studio main
*	================================================================ */

section.studio section.studio-slide div.studio-main-hero-holder {
  width: 100%;
  height: 100%;
} /* Sub class of div.centering-holder*/

section.studio
  section.studio-slide
  div.studio-main-hero-holder
  div.studio-main-hero--content {
  width: 50%;
} /* Sub class of div.centering-container */

section.studio section.studio-slide p.studio-main-hero--content---desc {
  font-size: 1.5rem;
  line-height: 2.25rem;
  font-family: 'Changa_Bold', sans-serif;
  color: #fff;
  padding: 0;
  margin: 0;
}

section.studio section.studio-slide ul.studio-main-hero--content--logos {
  padding: 0;
  margin: 2.5rem 0 0 0;
  list-style: none;
  width: 100%;
}

section.studio section.studio-slide ul.studio-main-hero--content--logos li {
  display: inline-block;
  vertical-align: middle;
  width: 20%;
  height: 4.438rem;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
}

section.studio
  section.studio-slide
  ul.studio-main-hero--content--logos
  li:nth-child(1) {
  background-image: url('../img/studio_logos/11_Bit.svg');
}

section.studio
  section.studio-slide
  ul.studio-main-hero--content--logos
  li:nth-child(2) {
  background-image: url('../img/studio_logos/CD_Project_Red.svg');
}

section.studio
  section.studio-slide
  ul.studio-main-hero--content--logos
  li:nth-child(3) {
  background-image: url('../img/studio_logos/Astronauts.svg');
}

section.studio
  section.studio-slide
  ul.studio-main-hero--content--logos
  li:nth-child(4) {
  background-image: url('../img/studio_logos/Witcher_3.svg');
}

section.studio
  section.studio-slide
  ul.studio-main-hero--content--logos
  li:nth-child(5) {
  background-image: url('../img/studio_logos/Flying_Wild_Hog.svg');
  background-size: auto 70%;
}

section.studio
  section.studio-slide
  ul.studio-main-hero--content--logos
  li:nth-child(6) {
  background-image: url('../img/studio_logos/Shadow_Warrior.svg');
}

section.studio
  section.studio-slide
  ul.studio-main-hero--content--logos
  li:nth-child(7) {
  background-image: url('../img/studio_logos/Ethan_Carter.svg');
}

section.studio
  section.studio-slide
  ul.studio-main-hero--content--logos
  li:nth-child(8) {
  background-image: url('../img/studio_logos/syntaxcgi.svg');
}

section.studio
  section.studio-slide
  ul.studio-main-hero--content--logos
  li:nth-child(9) {
  background-image: url('../img/studio_logos/Dontnod_gray.svg');
}

section.studio
  section.studio-slide
  ul.studio-main-hero--content--logos
  li:nth-child(10) {
  background-image: url('../img/studio_logos/Aljazeera_gray.svg');
  background-size: auto 85%;
}

/*	studio what is motion graphics + how motion graphics work
*	================================================================ */

section.studio section.studio-slide div.studio-info-hero-holder {
  width: 100%;
  height: 100%;
} /* Sub class of div.centering-holder*/

section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content {
  width: 49.47916666666667%;
} /* Sub class of div.centering-container */

section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content  
  div.studio-info-hero--content---desc-container {
    width: inherit;
    display: inline-block;
    vertical-align: middle;
}

section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content  
  div.studio-info-hero--content---desc-container 
  p.studio-info-hero--content---desc {
    width : 100%;
    
  }

section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content
  h4.studio-info-hero--content---title,
section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content
  p.studio-info-hero--content---desc {
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content
  h4.studio-info-hero--content---title {
  font-size: 5rem;
  line-height: 4.5rem;
  text-align: right;
  color: #e61010;
  font-family: 'United_Sans_Heavy', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  padding-right: 3.656rem; /* 117px / 2	*/
  padding-left: 5%; /* reduce a little the inner space so words fall into separate lines*/
  width: 35%;
  direction: rtl;
  position: relative;
}

section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content
  p.studio-info-hero--content---desc {
  font-family: 'Changa_Regular', sans-serif;
  padding-left: 3.656rem; /* 117px / 2	*/
  text-align: left;
  width: 65%;
}

section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content
  ul.studio-info-hero--content---list {
  display : flex ;
  justify-items: center; 
  font-family: 'Changa_Regular', sans-serif;
  align-items: center;
  justify-content: center;
}

section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content
  ul.studio-info-hero--content---list
  div.studio-info-hero--content---list-item-wrapper {
  display : flex ;
  /* justify-items: center; 
  font-family: 'Changa_Regular', sans-serif;*/
  align-items: center; 
}

section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content
  ul.studio-info-hero--content---list li{
    display: inline;
    font-family: 'Changa_Regular', sans-serif;
    text-align: center;
    width: 100%;
    padding: 0px 20px;
}

section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content
  ul.studio-info-hero--content---list
  hr.studio-info-hero--content---list--divider{
  display : block; 
  border : 1px solid #e61010; 
  font-family: 'Changa_Regular', sans-serif;
  height: 30px;
  
}

/*	studio studio layout and sepcs
*	================================================================ */

section.studio section.studio-slide div.studio-layout-hero-holder {
  width: 100%;
  height: 100%;
} /* Sub class of div.centering-holder*/

section.studio
  section.studio-slide
  div.studio-layout-hero-holder
  div.studio-layout-hero--content {
  width: 39.3757%;
} /* Sub class of div.centering-container */

section.studio
  section.studio-slide
  div.studio-layout-hero-holder
  div.studio-layout-hero--content
  h4.studio-layout-hero--content---title {
  font-size: 5rem;
  line-height: 4.5rem;
  color: #e61010;
  font-family: 'United_Sans_Heavy', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  padding: 0;
  margin: 0;
  width: 100%;
  position: relative;
}

section.studio
  section.studio-slide
  div.studio-layout-hero-holder
  div.studio-layout-hero--content
  ul.studio-layout-hero--content---desc {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0 0;
  font-family: 'Changa_Bold', sans-serif;
}

section.studio section.studio-slide div.studio-layout-map {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

section.studio
  section.studio-slide
  div.studio-layout-map
  div.studio-layout-map--holder {
  width: 100%;
  height: 100%;
}

section.studio
  section.studio-slide
  div.studio-layout-map
  div.studio-layout-map--holder
  div.studio-layout-map--container {
  width: 75%;
  height: 75%;
}

section.studio
  section.studio-slide
  div.studio-layout-map
  div.studio-layout-map--holder
  div.studio-layout-map--container
  div.studio-layout-full {
  width: 100%;
  height: 100%;
  position: relative;
}

section.studio
  section.studio-slide
  div.studio-layout-map
  div.studio-layout-map--holder
  div.studio-layout-map--container
  div.studio-layout-full
  div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  background-size: contain !important;
}

section.studio
  section.studio-slide
  div.studio-layout-map
  div.studio-layout-map--holder
  div.studio-layout-map--container
  div.studio-layout-full
  div.studio-layout--frame {
  background: transparent url('../img/studio_layout/frame.svg') no-repeat center;
}

section.studio
  section.studio-slide
  div.studio-layout-map
  div.studio-layout-map--holder
  div.studio-layout-map--container
  div.studio-layout-full
  div.studio-layout--grid {
  background: transparent url('../img/studio_layout/grid.svg') no-repeat center;
}

section.studio
  section.studio-slide
  div.studio-layout-map
  div.studio-layout-map--holder
  div.studio-layout-map--container
  div.studio-layout-full
  div.studio-layout--cameras {
  background: transparent url('../img/studio_layout/cameras.svg') no-repeat
    center;
}

section.studio section.studio-slide div.studio-layout-legend {
  position: absolute;
  bottom: 4.294rem; /* 5.625rem which is the height of the div.studio-ui--main (arrows) - the height of the div.studio-layout-legend span logo 	*/
  right: calc(
    5.052083333333333% + 6rem
  ); /* the padding of the div.studio-ui--main (arrows) + aprox width of the arrows + some extra space 	*/
  text-transform: uppercase;
  font-size: 0.625rem;
  color: #e61010;
  font-family: 'Changa_Regular', sans-serif;
}

section.studio section.studio-slide div.studio-layout-legend span {
  display: inline-block;
  vertical-align: top;
  width: 5.719rem;
  height: 1.331rem;
  background: transparent url('../img/logos/Vicon_gray.svg') no-repeat center;
}

/*
*	================================================================
*	VIDEO PLAYER STYLES
*
*	================================================================
*/

div.video-player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  transform: translateY(100%);

  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);

  background: #0f0f0f none;
}

div.video-player div.video-player-scroller {
  width: 100%;
  height: 100%;
}

div.video-player div.video-player--container {
  width: 100%;
  height: 72.22222222222222%;
  width: 100%;

  /* background:yellow none; */

  position: absolute;
  bottom: 12.5%;
  padding: 0 5.052083333333333%;
}

div.video-player
  div.video-player--container
  div.video-player--container--frame-holder,
div.video-player
  div.video-player--container
  div.video-player--container--text-holder {
  display: inline-block;
  vertical-align: bottom;
  height: 100%;

  /*=================================================
	POSSIBLE IMPORTANT CHANGE. UNCOMMENT IF PROBLEMS ON
	OTHER VIEWPORTS
	=================================================== */
  /* overflow:hidden; */
}

div.video-player
  div.video-player--container
  div.video-player--container--frame-holder {
  width: 60.66048667439166%;

  /* NEW CODE TO ALIGN VERTICALLY
	=================================================== */

  text-align: center;
}

div.video-player
  div.video-player--container
  div.video-player--container--frame-holder:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

div.video-player
  div.video-player--container
  div.video-player--container--frame-holder
  div.video-player--container--frame-holder----heading {
  width: 100%;

  /*=================================================
	HIDE THIS FOR NEW ELEMENT ALIGNMENTON DESKTOP
	=================================================== */

  display: none;
}

div.video-player
  div.video-player--container
  div.video-player--container--frame-holder
  div.video-player--container--frame-holder----heading
  h4,
div.video-player
  div.video-player--container
  div.video-player--container--frame-holder
  div.video-player--container--frame-holder----heading
  h6 {
  font-weight: 400;
  display: inline-block;
}

div.video-player
  div.video-player--container
  div.video-player--container--frame-holder
  div.video-player--container--frame-holder----heading
  h4 {
  padding: 0;
  margin: 0;
  font-size: 3.375rem;
  /*


	line-height:2.250rem;*/
  font-family: 'United_Sans_Heavy', sans-serif;
  text-transform: uppercase;
  max-width: 65%;
}

div.video-player
  div.video-player--container
  div.video-player--container--frame-holder
  div.video-player--container--frame-holder----heading
  h4
  div.rotatorContainer {
  max-width: calc(100% + 1.35rem);
}

div.video-player
  div.video-player--container
  div.video-player--container--frame-holder
  div.video-player--container--frame-holder----heading
  h6 {
  padding: 0 0 0 0.5rem;
  margin: 0 0 0 1rem;
  font-size: 0.875rem;
  line-height: 2.25rem;
  font-family: 'Changa_Regular', sans-serif;
  color: #666666;
  display: inline-block;
  opacity: 0;

  transition: opacity 0s linear 0s;
}

div.video-player
  div.video-player--container
  div.video-player--container--frame-holder
  div.video-player--container--frame-holder----heading
  h6.show {
  opacity: 1;
  transition-duration: 1s;
  transition-delay: 2s;
}

div.video-player
  div.video-player--container
  div.video-player--container--frame-holder
  div.video-player--container---frame-holder----source {
  width: 100%;
  /*height:calc(98.22132471728595% - 2.875rem);  Total height of div.video-player--container--frame-holder----heading */
  padding: 0;
  margin: 0;

  display: inline-block;
  vertical-align: middle;

  /* background:gray none; */
}

div.video-player
  div.video-player--container
  div.video-player--container--frame-holder
  div.video-player--container---frame-holder----source
  iframe {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

div.video-player
  div.video-player--container
  div.video-player--container--text-holder {
  /*
	background:purple none;
	*/

  margin: 0 0 0 7.313rem;
  width: calc(39.33951332560834% - 7.313rem);
  height: 100%;
  padding: 0 4rem 0 0;

  /* NEW CODE TO ALIGN VERTICALLY
	=================================================== */

  text-align: center;
}

div.video-player
  div.video-player--container
  div.video-player--container--text-holder:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

div.video-player
  div.video-player--container
  div.video-player--container--text-holder
  div.video-player--container--text-holder-centered {
  vertical-align: middle;
  display: inline-block;
  text-align: left;
  width: 99%;
  /* height:75%; */
  margin: 3rem 0 0 0;
}

div.video-player
  div.video-player--container
  div.video-player--container--text-holder
  div.video-player--container--text-holder-centered
  div.video-player--container--title-holder
  h4,
div.video-player
  div.video-player--container
  div.video-player--container--text-holder
  div.video-player--container--text-holder-centered
  div.video-player--container--title-holder
  h6 {
  margin: 0;
  padding: 0;
  font-weight: 400;
}

div.video-player
  div.video-player--container
  div.video-player--container--text-holder
  div.video-player--container--text-holder-centered
  div.video-player--container--title-holder
  h4 {
  font-family: 'United_Sans_Heavy', sans-serif;
  text-transform: uppercase;
  max-width: 33rem;
  font-size: 2.375rem;
}

div.video-player
  div.video-player--container
  div.video-player--container--text-holder
  div.video-player--container--text-holder-centered
  div.video-player--container--title-holder
  h4
  div.rotatorContainer {
  /* width:90%; */
  width: 100%;
}

div.video-player
  div.video-player--container
  div.video-player--container--text-holder
  div.video-player--container--text-holder-centered
  div.video-player--container--title-holder
  h4
  div.rotatorContainer
  span {
  pointer-events: none;
}

div.video-player
  div.video-player--container
  div.video-player--container--text-holder
  div.video-player--container--text-holder-centered
  div.video-player--container--title-holder
  h6 {
  font-size: 0.875rem;
  line-height: 2.25rem;
  font-family: 'Changa_Regular', sans-serif;
  color: #666666;
}

div.video-player
  div.video-player--container
  div.video-player--container--text-holder
  div.video-player--container--text-holder-centered
  div.video-player--container---text-holder----desc {
  width: 100%;
  height: calc(75% - 1rem);
  margin: 1rem 0 0 0;

  /* overflow-y:visible; */

  opacity: 0;

  transition: opacity 0s linear;
}

div.video-player
  div.video-player--container
  div.video-player--container--text-holder
  div.video-player--container--text-holder-centered
  div.video-player--container---text-holder----desc.show {
  opacity: 1;
  transition-duration: 0.5s;
}

div.video-player
  div.video-player--container
  div.video-player--container--text-holder
  div.video-player--container---text-holder----desc
  p {
  font-family: 'Changa_Regular', sans-serif;
  font-size: 1.125rem;
  line-height: 2rem;
  color: #666666;
  padding: 0 1rem 0 0;
  margin-bottom: 0;
}

div.video-player div.video-player--nav {
  position: absolute;
  width: auto;
  left: 65.71257000772499%; /* Start from left and add div.video-player--container padding and div.video-player--container--frame-holder width	*/
  bottom: 5.759259259259259%;
}

div.video-player div.video-player--nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

div.video-player div.video-player--nav ul li {
  display: inline-block;
  vertical-align: middle;
  font-family: 'United_Sans_Heavy', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  font-size: 0.875rem;
  margin: 0 2.625rem 0 0;
  cursor: pointer;
  position: relative;
  height: 100%;
  opacity: 1;
  transition: opacity 0.25s linear;
}

div.video-player div.video-player--nav ul li:not(.back):hover {
  opacity: 0.25;
}

/* BEGIN OF UNDERLINE EFFECT
=================================================== */

/* div.video-player div.video-player--nav ul li:before {
	content:'';
	display:block;
	position:absolute;
	left:-10%;
	bottom:-0.250rem;
	height:0.063rem;
	width:0;
	transition:width 0s ease, background 0.5 ease;
}
div.video-player div.video-player--nav ul li:after {
	content:'';
	display:block;
	position:absolute;
	right:-10%;
	bottom:-0.250rem;
	height:0.063rem;
	width:0;
	background:#e61010;
	transition:width 0.5s ease;
}

div.video-player div.video-player--nav ul li:hover:before {
	width:120%;
	background:#e61010;
	transition:width 0.5s ease;

}
div.video-player div.video-player--nav ul li:hover:after {
	width:120%;
	background:transparent;
	transition:all 0s ease;

} */

/* END OF UNDERLINE EFFECT
=================================================== */

div.video-player div.video-player--nav ul li.back {
  margin: 0 0 0 1.5rem;
  overflow-y: hidden;

  box-shadow: 0 0 0.313rem 0.313rem rgba(0, 0, 0, 0);
  transition: box-shadow 0.25s linear;
}

div.video-player div.video-player--nav ul li.back span {
  position: relative;
  display: inline-block;
  padding: 0.5rem 1rem;
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  background: #ff0000 none;
}

div.video-player div.video-player--nav ul li.back span:after {
  content: attr(data-hover);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  background: #ff0000 none;
  padding: 0.5rem 1rem;
}

div.video-player div.video-player--nav ul li.back:hover {
  box-shadow: 0 0 0.313rem 0.313rem rgba(0, 0, 0, 0.25);
}

div.video-player div.video-player--nav ul li.back:hover span {
  transform: translateY(-100%) !important;
}

div.video-player div.video-player--nav ul li span {
  pointer-events: none;
}

div.video-player.current {
  transform: translateY(0);
}

/*=================================================
SHARE SCREEN STYLES
=================================================== */

div.share-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  z-index: 10000;

  transform: translateY(100%);

  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.25s,
    background 0.25s linear;

  font-family: 'United_Sans_Bold', sans-serif;
  font-size: 1rem;
  color: #626367;
  letter-spacing: 0.094rem;
  text-transform: uppercase;

  background: transparent none;
}

div.share-screen div.share-screen--wrapper:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

div.share-screen div.share-screen--wrapper {
  width: 100%;
  height: 100%;
  text-align: center;
}

div.share-screen div.share-screen--wrapper---social-buttons {
  display: inline-block;
  vertical-align: middle;
  width: 90%;
}

div.share-screen div.share-screen--wrapper---social-buttons ul {
  list-style: none;
  padding: 0 0 1.5rem 0;
  margin: 0 auto;
  background: transparent none;
  border: #626367 0.063rem solid;
  line-height: 1.25rem;
  max-width: 18rem;
  width: 100%;
  color: #fff;
  position: relative;
}

div.share-screen
  div.share-screen--wrapper---social-buttons
  ul
  li:not(.bitly-content) {
  text-transform: uppercase;
  line-height: 2.5rem;
  color: #626367;
  cursor: pointer;
  width: 100%;
  height: 100%;

  overflow-y: hidden;
  transition: color 0.5s linear;
}

div.share-screen
  div.share-screen--wrapper---social-buttons
  ul
  li:not(.bitly-content)
  span {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 100%;

  transform: translateY(0);

  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

div.share-screen
  div.share-screen--wrapper---social-buttons
  ul
  li:not(.bitly-content)
  span:after {
  content: attr(data-social);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  color: #e61010;
}

div.share-screen
  div.share-screen--wrapper---social-buttons
  ul
  li:not(.bitly-content):hover
  span {
  transform: translateY(-100%);
}

div.share-screen
  div.share-screen--wrapper---social-buttons
  ul
  li.bitly-content {
  border-bottom: #626367 0.063rem solid;
  margin: 0 0 2.5rem 0;
  font-family: 'Changa_Regular', sans-serif;
  font-weight: 500;
}

div.share-screen
  div.share-screen--wrapper---social-buttons
  ul
  li.bitly-content
  span {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  padding: 1.875rem 0;
  text-transform: none;
  letter-spacing: 0;
}

div.share-screen
  div.share-screen--wrapper---social-buttons
  ul
  li:not(.bitly-content):last-of-type {
  margin: 0 0 1.25rem 0;
}

div.share-screen
  div.share-screen--wrapper---social-buttons
  ul
  div.share-screen--wrapper---social-buttons----social-closer-----share {
  position: absolute;
  display: block;
  top: -1.5rem;
  right: -1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 1.5rem;
  color: transparent;
  font-size: 0;
  border: #626367 0.063rem solid;

  background: #0f0f0f none;

  cursor: pointer;
  transition: border 0.25s linear, background 0.25s linear;
}

div.share-screen
  div.share-screen--wrapper---social-buttons
  ul
  div.share-screen--wrapper---social-buttons----social-closer-----share
  span {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  background: transparent url('../img/ui/close.svg') no-repeat center center;

  transform: rotate(0);
  transition: transform 0.25s ease;
}

div.share-screen
  div.share-screen--wrapper---social-buttons
  ul
  div.share-screen--wrapper---social-buttons----social-closer-----share:hover {
  border: #e61010 0.125rem solid;
  background: #e61010 none;
}

div.share-screen
  div.share-screen--wrapper---social-buttons
  ul
  div.share-screen--wrapper---social-buttons----social-closer-----share:hover
  span {
  transform: rotate(180deg);
}

/* OVERRIDES FOR SHARE-SCREEN
=================================================== */

div.share-screen.current {
  transform: translateY(0);
  background: rgba(15, 15, 15, 0.98) none;
  transition-delay: 0s, 0s;
}

@media screen and (max-width: 94.063rem) {
  /* Up to 1505px */

  div.music-player-btn {
    height: 4.35rem;
    left: 3.5390625%;
  }

  /*
	*	================================================================
	*	COMMON STYLES
	*
	*	================================================================
	*/

  div.slide-ui--main {
    height: 3.75rem;
    padding: 0.875rem 2.5390625%;
  }

  div.slide-ui--main ul.slide-ui--main---nav li.prev span,
  section.projects div.slide-ui--main ul.slide-ui--main---nav li.next span {
    background-size: auto 60% !important;
  }

  div.slide-ui--main ul.slide-ui--main---nav li.close span {
    background-size: auto 70%;
  }

  /*
	*	================================================================
	*	NAV STYLES
	*
	*	================================================================
	*/

  nav {
    background: #181818 none;
    height: 3.375rem;
    padding: 0.875rem 2.5390625%;
  }

  nav header div.main_logo {
    /* width:4.813rem; */
    width: 6.5rem;
    height: 1.75rem;
  }

  nav header div.main_logo a {
    background: transparent url('../img/logo_nav.svg') no-repeat center center;
    background-size: 100% auto;
  }

  nav ul {
    font-size: 0.813rem;
    font-family: 'United_Sans_Bold', sans-serif;
  }

  nav ul li:before {
    bottom: -1rem;
  }
  nav ul li:after {
    bottom: -1rem;
  }

  /*
	*	================================================================
	*	FOOTER STYLES
	*
	*	================================================================
	*/

  footer {
    padding: 2.625rem 2.5390625%;
    height: 6.25rem;
  }

  footer div span.game-btn {
    display: none;
  }

  footer div a.syntax {
    margin: 0 0 0 0.5rem;
  }

  footer ul {
    width: 15rem;
  }

  footer ul li {
    margin: 0 0.3rem 0 0.3rem;
  }

  footer ul li:last-of-type {
    margin: 0 0 0 0.2rem;
  }

  footer ul li a {
    background-size: 80% !important;
  }

  footer p.home-disclaimer {
    margin-top: 1.5%;
    margin-left: -1%;
    font-size: 0.9vw;
  }
  footer p.about-disclaimer {
    font-size: 0.9vw;
  }

  /*
	*	================================================================
	*	HOME STYLES
	*
	*	================================================================
	*/

  section.home div.home-holder div.home-content {
    max-width: 31.875rem;
  }

  section.home div.home-holder div.home-content h3 {
    font-size: 5rem;
    line-height: 3.7rem;
  }

  /*
	*	================================================================
	*	ABOUT STYLES
	*
	*	================================================================
	*/

  section.about div.about-holder {
    width: 100%;
    height: 100%;
  }

  section.about div.about-holder:before {
    display: none !important; /* disable .centering-holder class	*/
  }

  section.about div.about-holder div.about-content {
    width: 100%;
    padding: 1.25rem 2.5390625% 3.125rem 3.5390625%; /* padding right and bottom is 3.375rem height of nav + 2.500rem */
    display: flex;
    margin-top: 25vh;
  }

  section.about div.about-holder div.about-content > div {
    display: block;
  }

  section.about div.about-holder div.about-content div.about-content-main {
    max-width: 45.625rem;
    width: 50%;
  }

  section.about div.about-holder div.about-content div.about-content-main h3 {
    font-size: 1.25rem;
    line-height: 2rem;
  }

  section.about div.about-holder div.about-content div.about-content-info {
    max-width: 45.625rem;
    width: 50%;

    margin: 0.59rem 0 0 4rem;
  }

  section.about div.about-holder div.about-content div.about-content-info ul {
    margin: 0 0 2.25rem 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    vertical-align: top;
    width: 13.188rem;
    text-align: left;
    color: #fff;
    font-family: 'Changa_Regular', sans-serif;
    line-height: 1.125rem;
  }

  section.about
    div.about-holder
    div.about-content
    div.about-content-info
    ul:last-of-type {
    margin-top: -12.5%;
  }

  section.about div.about-holder div.full-disclaimerText {
    width: 86%;
    margin-top: 40vh;
  }

  /*
	*	================================================================
	*	PROJECT STYLES
	*
	*	================================================================
	*/

  section.projects section.project-slide div.glitch-img div.glitch--img {
    animation-name: none !important;
  }

  section.projects
    section.project-slide
    div.project-hero-holder
    div.project-hero--content {
    max-width: none;
    width: 80%;
  }

  section.projects
    section.project-slide
    div.project-hero-holder
    div.project-hero--content
    h2.project-hero--content---title {
    font-size: 3.75rem;
    line-height: 2.95rem;

    animation-name: none !important;
  }

  section.projects
    section.project-slide
    div.project-hero-holder
    div.project-hero--content
    p.project-hero--content---desc {
    max-width: 46.875rem;
    width: 100%;
    margin: 0.75rem auto 0 auto;
  }

  /*	FOLLOWING STYLES ARE TO BE REFACTORED - DEV PURPOSES section.project-slide.active
*	================================================================ */

  section.projects
    section.project-slide.active
    div.project-hero-holder
    div.project-hero--content {
    margin: -8.5rem 0 0 0;
  }

  /*
	*	================================================================
	*	PROJECTS THUMBS (BOTTOM)
	*
	*	================================================================
	*/

  section.projects section.project-slide div.projects-ui--thumbs {
    height: 14.313rem;
    padding: 0 2.5390625% 3rem 2.5390625%;
  }

  section.projects
    section.project-slide
    div.projects-ui--thumbs
    ul.projects-ui--thumbs---list {
    height: 6.75rem;
  }

  section.projects
    section.project-slide
    div.projects-ui--thumbs
    ul.projects-ui--thumbs---list
    li {
    width: 13.563rem;
    height: 6.75rem;

    margin: 0 1rem 0 0;
  }

  section.projects
    section.project-slide
    div.projects-ui--thumbs
    ul.projects-ui--thumbs---list
    li
    a.projects-ui-thumbs---title {
    line-height: 6.75rem;
  }

  .mCSB_scrollTools.mCSB_scrollTools_horizontal {
    width: 100%;
    left: 0;
  }

  /*
	*	================================================================
	*	STUDIO STYLES
	*
	*	================================================================
	*/

  /*	studio main
	*	================================================================ */

  section.studio
    section.studio-slide
    div.studio-main-hero-holder
    div.studio-main-hero--content {
    width: 75%;
  }

  section.studio section.studio-slide p.studio-main-hero--content---desc {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  section.studio section.studio-slide ul.studio-main-hero--content--logos li {
    transform: scale(0.75) !important;
  }

  /*	studio.what and studio.how
	*	================================================================ */

  section.studio
    section.studio-slide
    div.studio-info-hero-holder
    div.studio-info-hero--content
    h4.studio-info-hero--content---title,
  section.studio
    section.studio-slide
    div.studio-info-hero-holder
    div.studio-info-hero--content
    p.studio-info-hero--content---desc {
    display: block;
  }

  section.studio
    section.studio-slide
    div.studio-info-hero-holder
    div.studio-info-hero--content
    h4.studio-info-hero--content---title {
    font-size: 3rem;
    direction: ltr;
    line-height: 2.5rem;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
  }

  section.studio
    section.studio-slide
    div.studio-info-hero-holder
    div.studio-info-hero--content
    p.studio-info-hero--content---desc {
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 1.5rem 0 0 0;
  }
  
  section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content
  div.studio-info-hero--content---desc-container {
    width: 100%;
  }

  /*	studio.layout
	*	================================================================ */

  section.studio
    section.studio-slide
    div.studio-layout-hero-holder
    div.studio-layout-hero--content {
    width: 50%;
  }

  section.studio
    section.studio-slide
    div.studio-layout-hero-holder
    div.studio-layout-hero--content
    h4.studio-layout-hero--content---title {
    font-size: 3rem;
    line-height: 2.5rem;
  }

  section.studio
    section.studio-slide
    div.studio-layout-map
    div.studio-layout-map--holder
    div.studio-layout-map--container {
    width: 85%;
  }

  section.studio section.studio-slide div.studio-layout-legend {
    bottom: 1.6rem;
    right: calc(
      5.052083333333333% + 4.5rem
    ); /* the padding of the div.studio-ui--main (arrows) + aprox width of the arrows + some extra space 	*/
  }

  /*
	*	================================================================
	*	VIDEO PLAYER STYLES
	*
	*	================================================================
	*/

  div.video-player div.video-player-scroller {
    overflow-y: auto;
  }

  div.video-player div.video-player--container {
    height: auto;
    position: static;
    padding: 0 2.5390625%;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--frame-holder,
  div.video-player
    div.video-player--container
    div.video-player--container--text-holder {
    display: block;
    width: 100%;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--frame-holder {
    height: auto;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--frame-holder
    div.video-player--container--frame-holder----heading {
    margin: 5.25rem 0 0 0;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--frame-holder
    div.video-player--container---frame-holder----source {
    /* width:calc(1024px - 5.078125%);
		height:576px;  */

    position: relative;
    margin: 4.5rem 0 0 0;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--frame-holder
    div.video-player--container---frame-holder----source
    iframe {
    align: left;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--text-holder:before {
    display: none;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--text-holder {
    margin: 1.6rem 0 0 0;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--text-holder
    div.video-player--container--text-holder-centered {
    display: block;
    width: 100%;
    margin: 0;
    height: auto !important;
    /* padding:0 0 2.000rem 0; */
  }

  div.video-player
    div.video-player--container
    div.video-player--container--text-holder
    div.video-player--container--text-holder-centered
    div.video-player--container--title-holder
    h4 {
    /* font-size:1.500rem; */
    max-width: 45.625rem;
    width: 100%;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--text-holder
    div.video-player--container---text-holder----desc {
    height: auto;
    max-width: 45.625rem;
    width: 100%;
    margin: 0.5rem 0 0 0;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--text-holder
    div.video-player--container---text-holder----desc
    p {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }

  div.video-player div.video-player--nav {
    position: static;
    width: 100%;
    padding: 1.95rem 2.5390625% 3rem 2.5390625%;
  }

  div.video-player div.video-player--nav ul li {
    font-size: 0.813rem;
    font-family: 'United_Sans_Bold', sans-serif;
  }
}

@media screen and (max-width: 63.938rem) {
  /* Up to 1023px */

  div.settings,
  div.controls,
  div.music-player-btn,
  div.anim-holder {
    display: none;
  }

  .mCustomScrollBox.mCSB_horizontal .mCSB_container {
    width: auto !important;
  }

  #dev {
    background: url('../img/dev/baseline_mobile.svg') left top repeat,
      url(../img/dev/grid.svg) left top repeat-y;
    z-index: 100;
  }

  /*
	*	================================================================
	*	COMMON STYLES
	*
	*	================================================================
	*/

  .preloader-bar {
    width: 13%;
    margin: auto;
    position: relative;
    top: 63%;
  }

  /*
	*	================================================================
	*	NAV STYLES
	*
	*	================================================================
	*/

  nav {
    background: transparent none;
    height: 100%;
    pointer-events: none;
    padding: 0;
  }

  nav header {
    pointer-events: auto;
    height: 2.75rem;
    padding: 0.5rem 1.125rem;
    background: #181818 none;
    width: 100%;
    border-bottom: #0f0f0f 0.063rem solid;
  }
  nav header div.main_logo {
    width: 50%;
    height: 100%;
    display: inline-block;
  }

  nav header div.main_logo a {
    width: 6rem;
    height: 100%;
    margin: 0;
  }

  nav header div.nav_menu {
    width: 50%;
    height: 100%;
    display: inline-block;
    text-align: right;
  }

  nav header div.nav_menu span {
    width: 1.063rem;
    height: 1.8rem;
    display: inline-block;
    background: transparent url('../img/ui/menu_icon.svg') no-repeat center
      center;
    cursor: pointer;

    -webkit-animation-name: nav-menu-flash;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;

    animation-name: preloader-bar-flash;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
  }

  @keyframes nav-menu-flash {
    75% {
      opacity: 0.5;
    }
  }

  nav ul {
    /* padding:0.688rem 1.250rem 0 1.250rem; */
    padding: 0rem;
    display: block;
    vertical-align: middle;
    font-family: 'United_Sans_Heavy', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0;
    text-align: left;
    width: 100%;
    height: calc(100% - 2.75rem);
    background: #181818 none;
    pointer-events: auto;

    position: absolute;
    top: 2.75rem;
    left: 0;

    transform: translateX(100%);

    transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
  }

  nav ul li {
    display: block;
    transition: color 0.5s linear;
    /* padding:4.250rem 0; */
    height: 25%;
    border-bottom: #2d2d2d 0.063rem solid;
    margin: 0;

    position: relative;
  }

  nav ul li div.phone-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    filter: grayscale(100%);
    z-index: -1;

    transition: filter 0.5s linear, opacity 0.5s linear;
  }

  nav ul li:nth-child(1) div.phone-bg {
    background: transparent url('../img/phone_menu/001.jpg') no-repeat center
      center;
    opacity: 0.35;
  }

  nav ul li:nth-child(2) div.phone-bg {
    background: transparent url('../img/phone_menu/004.png') no-repeat center
      center;
    opacity: 0.5;
  }

  nav ul li:nth-child(3) div.phone-bg {
    background: transparent url('../img/phone_menu/002.jpg') no-repeat center
      center;
    opacity: 0.15;
  }

  nav ul li:nth-child(4) div.phone-bg {
    background: transparent url('../img/phone_menu/003.jpg') no-repeat center
      center;
    opacity: 0.5;
  }

  nav ul li:nth-child(5) div.phone-bg {
    background: transparent url('../img/phone_menu/004.png') no-repeat center
      center;
    opacity: 0.5;
  }

  nav ul li:before,
  nav ul li:after {
    display: none;
  }

  nav ul li a {
    padding: 15% 0 0 1.25rem;
  }

  nav ul li:hover,
  nav ul li.current {
    color: #e61010;
  }

  nav ul li:hover div.phone-bg,
  nav ul li.current div.phone-bg {
    filter: grayscale(25%);
    opacity: 0.5;
  }

  nav.show-mobile ul {
    transform: translateX(0);
    overflow-y: auto;
  }

  /*
	*	================================================================
	*	FOOTER STYLES
	*
	*	================================================================
	*/

  footer {
    height: 7.5rem;
    bottom: 2%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  footer div {
    display: none;
  }

  footer p.copyrights {
    order: 3;
  }

  footer ul {
    width: 100%;
    text-align: center;
    align-items: center;
  }

  footer ul li {
    margin: 0 0.6rem 0 0.6rem !important;
  }

  footer ul li:first-of-type {
    margin: 0 0.6rem 0 0 !important;
  }

  footer ul li:last-of-type {
    margin: 0 0 0 0.6rem !important;
  }

  footer p.home-disclaimer {
    margin-top: 1%;
    margin-left: -1%;
    order: 3;
  }

  /*
	*	================================================================
	*	HOME STYLES
	*
	*	================================================================
	*/

  section.home div.home-holder div.home-content {
    max-width: 12.688rem;
    width: 100%;
  }

  section.home div.home-holder div.home-content h3 {
    font-size: 3rem;
    line-height: 2.5rem;
  }

  /*
	*	================================================================
	*	ABOUT STYLES
	*
	*	================================================================
	*/

  section.about {
    overflow-y: auto !important; /* allow scrolling	*/
  }

  section.about div.about-holder {
    height: auto;
  }

  section.about div.about-holder div.about-content {
    padding: 5.813rem 1.125rem 3.125rem 1.125rem;
    margin-top: 12.5%;
  }

  section.about div.about-holder div.about-content div.about-content-main {
    max-width: 28rem;
  }

  section.about div.about-holder div.about-content div.about-content-main h3 {
    font-size: 1rem;
    line-height: 1.375rem;
  }

  section.about div.about-holder div.about-content div.about-content-info {
    margin: 0 0 0 10%;
  }

  section.about div.about-holder div.about-content div.about-content-info ul {
    margin: 0.3rem 0 1.4rem 0;
    width: 50%;
    font-size: 0.875rem;
  }

  section.about
    div.about-holder
    div.about-content
    div.about-content-info
    ul:last-of-type {
    margin-left: 50%;
    margin-top: -15.5%;
  }

  /*
	*	================================================================
	*	PROJECT STYLES
	*
	*	================================================================
	*/

  section.projects section.project-slide.active div.glitch-img {
    transform: scale(1);
  }

  section.projects
    section.project-slide
    div.project-hero-holder
    div.project-hero--content
    h2.project-hero--content---title {
    font-size: 2.188rem;
    line-height: 2rem;
  }

  /*
	*	================================================================
	*	PROJECTS UI (BOTTOM)
	*
	*	================================================================
	*/

  section.projects div.slide-ui--main {
    padding: 0 1.125rem;
    background: transparent none;

    border-top: transparent 0.063rem solid;

    transition: padding 0.5s ease, background 0.5s linear,
      border-top 0.5s linear;
  }

  section.projects div.slide-ui--main ul.slide-ui--main---nav li.counter {
    width: 100%;
    text-align: center;
    padding: 1.25rem 0 0 0;
  }

  section.projects div.slide-ui--main ul.slide-ui--main---nav li.prev,
  section.projects div.slide-ui--main ul.slide-ui--main---nav li.next {
    width: 0;
  }

  section.projects div.slide-ui--main ul.slide-ui--main---nav li.close {
    opacity: 1 1important;
    transition: none !important;
  } /* Restore default values for <li> so opacity on child span performs ok 	*/

  section.projects div.slide-ui--main ul.slide-ui--main---nav li.close span {
    background-image: url('../img/ui/close.svg');
  }

  section.projects
    div.slide-ui--main
    ul.slide-ui--main---nav
    li:not(.counter)
    span {
    background-size: auto !important;
    opacity: 0 !important;
    transition: opacity 0s linear;
  }

  /*	OVERRIDES FOR <div.projects.showcasing> on the div.slide-ui--main
	*	================================================================ */

  section.projects.showcasing div.slide-ui--main {
    padding: 0;
    background: #181818 none;
    border-top: #0a0a0a 0.063rem solid;
  }

  section.projects.showcasing div.slide-ui--main ul.slide-ui--main---nav li {
    width: 25% !important;
    height: calc(100% - 0.188rem) !important;
    vertical-align: middle;
    text-align: center;
    border-top: #1e1e1e 0.063rem solid;
    border-right: #0a0a0a 0.063rem solid;
  }

  section.projects.showcasing
    div.slide-ui--main
    ul.slide-ui--main---nav
    li:last-of-type {
    border-right: none;
  }

  section.projects.showcasing
    div.slide-ui--main
    ul.slide-ui--main---nav
    li:not(.counter)
    span {
    background-position: center center !important;
    opacity: 1 !important;

    transition-timing-function: 0.5s;
  }

  div.slide-ui--main ul.slide-ui--main---nav li.close {
    opacity: 1;
  }

  /*
	*	================================================================
	*	PROJECTS THUMBS (BOTTOM)
	*
	*	================================================================
	*/

  section.projects section.project-slide.active div.project-hero-holder:before {
    display: none !important;
  }
  section.projects section.project-slide.active div.project-hero-holder {
    text-align: left;
    height: auto;
    width: 100%;
  }

  section.projects
    section.project-slide
    div.project-hero-holder
    div.project-hero--content
    h2.project-hero--content---title {
    font-size: 2.25rem !important;
    margin: 1.5rem 0 0 0;
    line-height: 1;
    letter-spacing: 0;
  }

  section.projects
    section.project-slide
    div.project-hero-holder
    div.project-hero--content
    p.project-hero--content---desc {
    font-family: 'Changa_Regular', sans-serif;
    font-size: 0.875rem;
    line-height: 1.375rem;
    margin: 1.313rem auto;
  }

  section.projects section.project-slide.active div.projects-ui--thumbs {
    position: static;
    width: 100%;
    height: auto;
  }

  section.projects
    section.project-slide.active
    div.projects-ui--thumbs
    ul.projects-ui--thumbs---list {
    width: 100%;
    height: 100%;
    white-space: normal;
    text-align: center;
  }

  section.projects
    section.project-slide
    div.projects-ui--thumbs
    ul.projects-ui--thumbs---list
    li {
    width: 20.25rem;
    height: 9.688rem;
    margin: 0 1.375rem 1.375rem 0 !important;
  }

  section.projects
    section.project-slide
    div.projects-ui--thumbs
    ul.projects-ui--thumbs---list
    li
    a.projects-ui-thumbs---title {
    line-height: 9.688rem;
  }

  /*	Overrides for the projects thumbs
	*	================================================================ */

  section.projects section.project-slide.active div.project-hero-holder {
    position: static;
  }

  section.projects
    section.project-slide.active
    div.project-hero-holder
    div.project-hero--content
    h2.project-hero--content---title {
    font-size: 1.875rem !important;
  }

  section.projects
    section.project-slide.active
    div.project-hero-holder
    div.project-hero--content {
    margin: 6.675rem 0 2.75rem 0;
    transition: none; /* Make the margin NOT to animate so title at top falls faster. Looks better	*/
    padding: 0 1.125rem;
    width: 100%;

    text-align: center;
  }

  section.projects
    section.project-slide.active
    div.container-scroller
    div.container-scroller---holder {
    width: 100%;
    overflow-y: auto;
  }

  section.projects
    section.project-slide.active
    div.project-hero-holder
    div.project-hero--content
    div.project-hero--content---closer {
    display: none;
  }

  /*
	*	================================================================
	*	CLIENTS STYLES
	*
	*	================================================================
	*/

  section.clients div.clients-slider ul {
    padding: 2.75rem 0 0 0;
  }

  /*
	*	================================================================
	*	STUDIO STYLES
	*
	*	================================================================
	*/

  /*	studio.main
	*	================================================================ */

  section.studio div.centering-holder:before {
    display: none;
  }

  section.studio div.container-scroller---holder {
    overflow-y: auto;
  }

  section.studio section.studio-slide div.studio-main-hero-holder {
    text-align: left;
    height: auto;
    width: 100%;
  }

  section.studio
    section.studio-slide
    div.studio-main-hero-holder
    div.studio-main-hero--content {
    width: 100%;
    padding: 0 1.125rem 5.813rem 1.125rem; /* Add as much padding to bottom as margin has the p.studio-main-hero--content---desc at top	*/
  }

  section.studio section.studio-slide p.studio-main-hero--content---desc {
    font-size: 1rem;
    line-height: 1.375rem;
    margin: 5.813rem 0 0 0;
  }

  section.studio section.studio-slide ul.studio-main-hero--content--logos li {
    width: 50%;
  }

  /*	studio.what + studio.how
	*	================================================================ */

  section.studio
    section.studio-slide
    div.studio-info-hero-holder
    div.studio-info-hero--content {
    width: 100%;
    padding: 0 1.125rem 5.625rem 1.125rem;
  }

  section#services.studio
    section.studio-slide
    div.studio-info-hero-holder
    div.studio-info-hero--content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  section.studio
    section.studio-slide
    div.studio-info-hero-holder
    div.studio-info-hero--content
    h4.studio-info-hero--content---title {
    font-size: 1.75rem;
    line-height: 1.5rem;
    margin: 5.625rem 0 0 0;
    text-align: left;
  }

  section#services.studio
    section.studio-slide
    div.studio-info-hero-holder
    div.studio-info-hero--content
    h4.studio-info-hero--content---title {
      width: 47%;
      font-size: 2.8rem;
      line-height: 2.8rem;
  }

  section.studio
    section.studio-slide
    div.studio-info-hero-holder
    div.studio-info-hero--content
    p.studio-info-hero--content---desc {
    font-size: 0.875rem;
    line-height: 1.375rem;
    text-align: left;
  }

  section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content
  ul.studio-info-hero--content---list {
    display: flex;
    flex-direction: column;
    justify-items: left;
    font-family: 'Changa_Regular', sans-serif;
    padding: 0;
}

section#services.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content
  ul.studio-info-hero--content---list {
    display: flex;
    flex-direction: row;
    justify-items: left;
    /* font-family: 'Changa_Regular', sans-serif;
    padding: 0; */
}

section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content
  ul.studio-info-hero--content---list li{
    display: inline;
    font-family: 'Changa_Regular', sans-serif;
    width: 100%;
    padding: 0px 20px;
}

section#services.studio 
section.studio-slide 
div.studio-info-hero-holder 
div.studio-info-hero--content 
ul.studio-info-hero--content---list 
li {
  padding: 0px 15px;
}



  /*	studio.layout +
	*	================================================================ */

  section.studio section.studio-slide div.studio-layout-hero-holder {
    height: auto;
  }

  section.studio
    section.studio-slide
    div.studio-layout-hero-holder
    div.studio-layout-hero--content {
    width: 100%;
    padding: 0 1.125rem 0 1.125rem;
  }

  section.studio
    section.studio-slide
    div.studio-layout-hero-holder
    div.studio-layout-hero--content
    h4.studio-layout-hero--content---title {
    font-size: 1.75rem;
    line-height: 1.5rem;
    margin: 5.625rem 0 0 0;
    text-align: left;
  }

  section.studio
    section.studio-slide
    div.studio-layout-hero-holder
    div.studio-layout-hero--content
    ul.studio-layout-hero--content---desc {
    text-align: left;
    font-family: 'Changa_Regular', sans-serif;
    font-size: 0.875rem;
    line-height: 1.375rem;
    text-align: left;
  }

  section.studio section.studio-slide div.studio-layout-map {
    position: static;
    margin: 2.438rem 0 0 0;
    height: 35vh;
  }

  section.studio
    section.studio-slide
    div.studio-layout-map
    div.studio-layout-map--holder
    div.studio-layout-map--container {
    width: 100%;
    height: 100%;
    padding: 0 1.125rem;
  }

  section.studio
    section.studio-slide
    div.studio-layout-map
    div.studio-layout-map--holder
    div.studio-layout-map--container
    div.studio-layout-full
    div {
    background-position: top left !important;
  }

  section.studio section.studio-slide div.studio-layout-legend {
    position: static;
    text-align: right;
    padding: 0 1.125rem;
    margin: 2rem 0 5.625rem 0;
  }

  section.studio section.studio-slide div.studio-layout-legend span {
    transform: scale(0.75);
    margin: 0 0 0 -0.5rem;
  }

  /*	section.studio ui BOTTOM
	*	================================================================ */

  section.studio div.slide-ui--main {
    padding: 0;
    background: #181818 none;
    border-top: #0a0a0a 0.063rem solid;
  }

  section.studio div.slide-ui--main ul.slide-ui--main---nav li {
    width: 33.33333% !important;
    text-align: center;
    padding: 0;
    border-top: #1e1e1e 0.063rem solid;
    border-right: #0a0a0a 0.063rem solid;
  }

  section.studio div.slide-ui--main ul.slide-ui--main---nav li.next {
    border-right: none;
  }

  section.studio div.slide-ui--main ul.slide-ui--main---nav li.counter {
    padding: 1.25rem 0 0 0;
  }

  section.studio div.slide-ui--main ul.slide-ui--main---nav li span {
    background-position: center center !important;
    background-size: 0.938rem 1.25rem !important;
    height: 100%;
    display: inline-block;
  }

  /*
	*	================================================================
	*	VIDEO PLAYER STYLES
	*
	*	================================================================
	*/

  div.video-player div.video-player-scroller {
    overflow-y: auto;
  }

  div.video-player div.video-player--container {
    height: auto;
    position: static;
    padding: 0;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--frame-holder
    div.video-player--container--frame-holder----heading {
    margin: 3.875rem 0 0 0;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--text-holder
    div.video-player--container--text-holder-centered
    div.video-player--container--title-holder
    h4 {
    font-size: 1.5rem;
    margin: 1.5rem 0 0 0;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--frame-holder
    div.video-player--container--frame-holder----heading
    h6 {
    display: none;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--frame-holder
    div.video-player--container---frame-holder----source {
    /* width:23.438rem;
		height:12.688rem;  */
    position: relative;
    margin: 2.75rem 0 0 0;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--text-holder {
    margin: 0;
    padding: 0 1.25rem;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--text-holder
    div.video-player--container--text-holder-centered {
    margin: 0;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--text-holder
    div.video-player--container--text-holder-centered
    div.video-player--container---text-holder----desc {
    height: auto;
    max-width: 45.625rem;
    width: 100%;

    margin: 0;
  }

  div.video-player
    div.video-player--container
    div.video-player--container--text-holder
    div.video-player--container---text-holder----desc
    p {
    font-size: 0.875rem;
    line-height: 1.125rem;
    margin: 1.5rem 0 4.75rem 0;
  }

  div.video-player div.video-player--nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0;
    background: #181818 none;
    border-top: #0a0a0a 0.063rem solid;
    /* height:2.750rem; */
    height: 3.75rem;
  }

  div.video-player div.video-player--nav ul {
    height: 100%;
    padding: 0;
    margin: 0;
  }

  div.video-player div.video-player--nav ul li {
    width: 25% !important;
    height: 100%;
    padding: 0;
    border-top: #1e1e1e 0.063rem solid;
    border-right: #0a0a0a 0.063rem solid;
    margin: 0;
  }
  div.video-player div.video-player--nav ul li span {
    display: inline-block;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: none;
  }

  div.video-player div.video-player--nav ul li:nth-child(1) {
    background: transparent url('../img/ui/arrow_left_active.svg') no-repeat
      center;
  }

  div.video-player div.video-player--nav ul li:nth-child(2) {
    background: transparent url('../img/ui/arrow_right_active.svg') no-repeat
      center;
  }

  div.video-player div.video-player--nav ul li:nth-child(3) {
    background: transparent url('../img/ui/share.svg') no-repeat center;
  }

  div.video-player div.video-player--nav ul li:nth-child(4) {
    background: transparent url('../img/ui/close.svg') no-repeat center;
  }

  /*=================================================
	SHARE SCREEN
	=================================================== */

  div.share-screen ul {
    border: none;
    background: transparent none;
    width: 75%;
    padding: 3.813rem 0 0 0;
  }

  div.share-screen div.share-screen--wrapper---social-buttons ul {
    border: none;
  }

  div.share-screen
    div.share-screen--wrapper---social-buttons
    ul
    li.bitly-content {
    border: #626367 0.063rem solid;
  }

  div.share-screen
    div.share-screen--wrapper---social-buttons
    ul
    div.share-screen--wrapper---social-buttons----social-closer-----share {
    position: fixed;
    width: 100%;
    border: none;
    border-top: #626367 0.063rem solid;
    border-radius: 0;
    top: auto;
    right: 0;
    left: 0;
    margin: 0 auto;
    font-size: 0.813rem;
    transition: none;
    color: #626367;
    bottom: 0;
  }

  div.share-screen
    div.share-screen--wrapper---social-buttons
    ul
    div.share-screen--wrapper---social-buttons----social-closer-----share
    span {
    background: #0e0e0e none;
    transition: color 0.5s linear;
    padding: 0.95rem 0;
    color: currentColor;
  }

  div.share-screen
    div.share-screen--wrapper---social-buttons
    ul
    div.share-screen--wrapper---social-buttons----social-closer-----share:hover {
    border: none;
    border-top: #626367 0.063rem solid;
    background: transparent none;
  }

  div.share-screen
    div.share-screen--wrapper---social-buttons
    ul
    div.share-screen--wrapper---social-buttons----social-closer-----share:hover
    span {
    color: #e61010;
    transform: none;
    background: #0e0e0e none;
  }
}

@media screen and (max-width: 46.563rem) {
  /* Up to 745px */

  div.preloader-holder div.preloader-content {
    transform: scale(0.8);
  }

  .preloader-bar {
    width: 35%;
    margin: auto;
    position: relative;
    top: 63%;
  }

  /*=================================================
	FOOTER STYLE
	=================================================== */

  footer {
    height: 7.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  footer ul {
    width: 15rem;
  }

  footer p.home-disclaimer {
    font-size: 1.8vw;
    line-height: 1.1;
  }

  /*=================================================
	ABOUT STYLE
	=================================================== */
  section.about {
    z-index: 10;
  }
  section.about div.about-holder div.full-disclaimer {
    z-index: 10;
  }

  section.about div.about-holder div.full-disclaimerText {
    font-size: 2.5vw;
    margin: 40% 7.5% 10% 7.5%;
    text-align: justify;
    text-align-last: center;
  }

  section.about
    div.about-holder
    div.full-disclaimerText
    span.full-disclaimerTitle,
  section.about
    div.about-holder
    div.full-disclaimerText
    span.full-disclaimerClose {
    font-size: 3vw;
  }

  section.about div.about-holder div.full-disclaimerText span#greyText {
    font-size: 2.55vw;
    text-align: justify;
    text-align-last: center;
  }

  section.about div.about-holder div.about-content {
    margin-top: 4%;
    flex-wrap: wrap;
    height: calc(100vh - 2.75rem - 7.5rem);
    overflow: auto;
    padding-bottom: 0;
  }

  section.about div.about-holder div.about-content div.about-content-main {
    width: 100%;
  }

  section.about div.about-holder div.about-content div.about-content-main h3 {
    font-size: 0.93rem;
  }

  section.about div.about-holder div.about-content div.about-content-info {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 4% 0 0 0;
  }

  section.about div.about-holder div.about-content div.about-content-info ul {
    margin: 0.3rem 0 1.4rem 0;
    width: 45%;
  }

  section.about
    div.about-holder
    div.about-content
    div.about-content-info
    ul:first-of-type {
    margin-right: 2rem;
  }

  section.about
    div.about-holder
    div.about-content
    div.about-content-info
    ul:last-of-type {
    margin-top: -18.5%;
  }

  section.projects
    section.project-slide
    div.projects-ui--thumbs
    ul.projects-ui--thumbs---list {
    text-align: center;
  }

  section.projects
    section.project-slide
    div.projects-ui--thumbs
    ul.projects-ui--thumbs---list
    li {
    display: block;
    margin: 0 auto 1.375rem auto;
  }

  section.studio section.studio-slide div.studio-layout-legend {
    position: static;
    text-align: right;
    padding: 0 1.125rem;
    margin: -2rem 0 5.625rem 0;
  }

  div.video-player div.video-player--nav ul li.back {
    margin: 0;
    overflow-y: initial;
    box-shadow: none;
    transition: none;
  }

  div.video-player div.video-player--nav ul li.back:hover {
    box-shadow: none;
  }

  div.video-player div.video-player--nav ul li.back span {
    position: initial;
    display: none;
    padding: 0;
    transform: none;
    transition: none;
    background: transparent none;
  }

  div.video-player div.video-player--nav ul li.back span:after {
    display: none;
  }

  section#services.studio
    section.studio-slide
    div.studio-info-hero-holder
    div.studio-info-hero--content
    h4.studio-info-hero--content---title {
      width: 50%;
      font-size: 2.8rem;
      line-height: 2.8rem;
  }

  section#services.studio 
  section.studio-slide:nth-of-type(2) 
  div.studio-info-hero-holder 
  div.studio-info-hero--content 
  ul.studio-info-hero--content---list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* justify-content: center; */
  }

  section#services.studio 
  section.studio-slide:nth-of-type(2) 
  div.studio-info-hero-holder 
  div.studio-info-hero--content 
  ul.studio-info-hero--content---list 
  div.studio-info-hero--content---list-item-wrapper{
    width : 50%;
  } 

  section#services.studio 
  section.studio-slide:nth-of-type(1) 
  div.studio-info-hero-holder 
  div.studio-info-hero--content 
  ul.studio-info-hero--content---list 
  div.studio-info-hero--content---list-item-wrapper 
  li{
    padding : 5px;
  } 

  section#services.studio
  section.studio-slide:nth-of-type(3)
  div.studio-info-hero-holder
  div.studio-info-hero--content
  ul.studio-info-hero--content---list {
  justify-content: left;
}

  section#services.studio 
  section.studio-slide:nth-of-type(3) 
  div.studio-info-hero-holder 
  div.studio-info-hero--content 
  ul.studio-info-hero--content---list 
  div.studio-info-hero--content---list-item-wrapper:nth-of-type(1)
  li {
    padding : 0px 15px 0px 0px;
  } 

  section#services.studio 
  section.studio-slide:nth-of-type(2) 
  div.studio-info-hero-holder 
  div.studio-info-hero--content 
  ul.studio-info-hero--content---list 
  div.studio-info-hero--content---list-item-wrapper:nth-of-type(2)
  hr.studio-info-hero--content---list--divider{
    display : none;
  } 
  /* section.studio
  section.studio-slide
  div.studio-info-hero-holder
  div.studio-info-hero--content
  ul.studio-info-hero--content---list
  hr.studio-info-hero--content---list--divider{
  display : none; 
  
} */
}

/*=================================================
GLOBAL OVERRIDES
=================================================== */

body.home div.holder {
  pointer-events: none; /*allow mouse interaction with landing anim */
}

body.home.playing div.controls,
body.home.playing div.settings {
  transform: translateY(0);
} /* Show controls and settings for the game when entering playing mode*/

body.home.playing nav {
  transform: translateY(-100%);
} /* hide nav when entering playing mode*/

body.home.playing footer,
body:not(.home):not(.about):not([class='']) footer,
body.home.playing div.music-player-btn,
div.video-player.current ~ div.music-player-btn,
nav.show-mobile ~ div.music-player-btn,
nav.show-mobile ~ footer {
  transform: translateY(100%);
} /* hide footer when entering playing mode*/

body:not(.home) div.anim-holder {
  display: none; /* Hide anim-holder if not on the lading page */
}

div.holder.moving {
  filter: blur(0.1rem);
  transition-delay: 0s, 0s;
}

/* OVERRIDES FOR VIDEO
=================================================== */

body.studio div.video-bg,
body.projects div.video-bg {
  opacity: 0;
}