@font-face {font-family: "UniversNextW01-Bold";
    src: url("/assets/fonts/UniversNextW01-Bold.woff2") format("woff2"),
    url("/assets/fonts/UniversNextW01-Bold.woff") format("woff"),
    url("/assets/fonts/UniversNextW01-Bold.ttf") format("truetype");
}


body {
	background: #fff;
	margin: 0;
	padding: 0;
	font-family: sans-serif;;
}

a {
	transition: opacity 0.2s;
}

a:hover {
	opacity: 0.6;
}

#wrapper {
  overflow-x: hidden;
}

#wrapper > section {
    position: relative;
}
#wrapper section {
    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-template-rows: 1fr;
}

#wrapper section.side-a {
    grid-template-areas: "info art";
}

#wrapper section.side-b {
    grid-template-areas: "art info";
}

#wrapper section.audio {
	padding: 4%;
	text-align: center;
	display: block;
  z-index: 999;
  background: #fff;
}

#wrapper section.audio.black {
  background: #000;
}

.side-a .info,
.side-b .info {
  z-index: 999;
	background: #0101ff;
	display: flex;
}

.side-b .info {
	background: #000;
}

.side-a .pfrep,
.side-b .pfrep {
	width: 100%;
	margin-left: auto;
	margin-bottom: 4%;
}

.side-a .pfrep svg {
  position: relative;
  right: -2px;
}

.cover-art a {
    text-decoration: none;
}

.cover-art a:hover {
  opacity: 1;
}

.side-a .cover-art {
	background: #fff;
}

.side-b,
.side-b .cover-art {
	background: #000;
}

.side-a .cover-art > img,
.side-b .cover-art > img {
	width: 100%;
	max-width: 960px;
}

.info {
	grid-area: info;
}

.cover-art {
	grid-area: art;
}


.pfrep {
	grid-area: pfrep;
}

.atm {
	grid-area: atm;
}

.artists.first {
	grid-area: artists;
}

.artists.second {
	grid-area: artists2;
}

.warning {
	grid-area: warning;

	color: #fff;
	font-family: sans-serif;
	padding: 4% 7% 4% 2%;
	font-size: 1.3vw;
}

.side-a .info,
.side-b .info {
    display: grid;
    grid-template-areas: "pfrep pfrep pfrep pfrep pfrep" ". atm . artists artists2" ". warning warning warning warning";
    grid-template-columns: 7% 15% 8% 42% 28%;
}

.side-a .artists a,
.side-b .artists a {
	font-family: UniversNextW01-Bold, sans-serif;
	font-size: 2vw;
	color: #fff;
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.25vw;
}

.coming {
	padding-top: 4%;
	text-align: center;
	font-weight: bold;
	font-family: UniversNextW01-Bold, sans-serif;
	font-size: 2vw;
	color: #0101ff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.25vw;
  transition: letter-spacing 0.2s ease-in-out;
}

.side-b .coming {
	color: #fff;
	margin-bottom: 7%;
}

.cover-art a:hover .coming {
  letter-spacing: 0.5vw;
}

img {
	max-width: 100%; 
}

.logo {
	max-width: 100%;
}
#mock {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	mix-blend-mode: overlay;
	z-index: 999;
}

body.is-preload #Swoosh {
	transform: translate3d(100%,0,0);
}

#Swoosh {
    transition: transform 0.5s ease-out;
	transform: translate3d(0,0,0);
}

body.is-preload #Freakz {
    transform: translate3d(0,-80%,0);
}

#Freakz {
    transition: transform 0.5s ease-in;
    transform: translate3d(0,0,0);
}


body.is-preload #Pocari {
    transform: translate3d(0,-80%,0);
}

#Pocari {
    transition: transform 0.5s ease-in;
    transition-delay: 0.1s;
    transform: translate3d(0,0,0);
}

body.is-preload #Remix_EP {
    transform: translate3d(-100%,0,0);
}

body.is-preload #SIDE_A,
body.is-preload #Sweaty_Side,
body.is-preload #SIDE_B,
body.is-preload #FREAKY_SIDE,
body.is-preload .cover-art,
body.is-preload .logo,
body.is-preload .artists,
body.is-preload .warning {
    opacity: 0;
}

#SIDE_A,
#Sweaty_Side,
#SIDE_B,
#FREAKY_SIDE {
    transition: opacity 0.5s ease-in;
    opacity: 1;
}

#SIDE_A,
#SIDE_B {
    transition-delay: 0.1s;
}

#Sweaty_Side,
#FREAKY_SIDE {
    transition: opacity 0.5s ease-in;
    transition-delay: 0.2s;
}

#Remix_EP {
    transition: transform 0.5s ease-in;
    transition-delay: 0.5s;
    transform: translate3d(0,0,0);
}

.cover-art {
    transition-delay: 0.5s;
    transition: opacity 1s ease-in;
    opacity: 1;
}

.logo,
.artists,
.warning {
    transition: opacity 0.3s ease-in;
    opacity: 1;
}

.logo {
    transition-delay: 0.5s;
}

.artists {
    transition-delay: 0.6s;
}

.warning {
    transition-delay: 0.8s;
}

/* Wobble Horizontal */
@-webkit-keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes hvr-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }
  33.3% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }
  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }
  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.atm:hover,
.sweaty-link:hover,
.freaky-link:hover {
	opacity: 1;
}

.sweaty-link #Sweaty_Side, .freaky-link #FREAKY_SIDE {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
}
.sweaty-link:hover #Sweaty_Side, .sweaty-link:focus #Sweaty_Side, .sweaty-link:active #Sweaty_Side {
  -webkit-animation-name: hvr-wobble-horizontal;
  animation-name: hvr-wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(1px) rotate(0deg);
    transform: translateX(1px) rotate(0deg);
  }
  20% {
    -webkit-transform: translateX(-1px) rotate(0deg);
    transform: translateX(-1px) rotate(0deg);
  }
  30% {
    -webkit-transform: translateX(1px) rotate(1deg);
    transform: translateX(1px) rotate(1deg);
  }
  40% {
    -webkit-transform: translateX(-1px) rotate(-1deg);
    transform: translateX(-1px) rotate(-1deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(0);
    transform: translateX(2px) rotate(0);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(0);
    transform: translateX(-2px) rotate(0);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.freaky-link:hover #FREAKY_SIDE, .freaky-link:focus #FREAKY_SIDE, .freaky-link:active #FREAKY_SIDE {
  -webkit-animation-name: hvr-buzz-out;
  animation-name: hvr-buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}


/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  transform-origin: 0 center;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

/* Pop */
@-webkit-keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
}
@keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
}
.hvr-pop {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pop:hover, .hvr-pop:focus, .hvr-pop:active {
  -webkit-animation-name: hvr-pop;
  animation-name: hvr-pop;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Rotate */
.cover-art img {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.cover-art:hover img, .cover-art:focus img, .cover-art:active img {
  -webkit-transform: rotate(2deg);
  transform: rotate(2deg);
}

 
/* Skew Backward */
#Swoosh {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right;
}
#Swoosh:hover {
  -webkit-transform: scale(1.02, 1);
  transform: scale(1.02, 1);
}

#Swoosh:not(:hover) {}
#Pocari_Freakz path:not(:hover) {
  -webkit-animation-name: fade-pulse-out;
  animation-name: fade-pulse-out;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

@-webkit-keyframes fade-pulse-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-pulse-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

/* Float */
.pfrep:hover #Remix_EP:hover path {
  -webkit-animation-name: remix-float;
  animation-name: remix-float;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

#Remix_EP path:nth-of-type(1) {
  animation-delay: 0ms;
}

#Remix_EP path:nth-of-type(2) {
  animation-delay: 50ms;
}

#Remix_EP path:nth-of-type(3) {
  animation-delay: 100ms;
}

#Remix_EP path:nth-of-type(4) {
  animation-delay: 150ms;
}

#Remix_EP path:nth-of-type(5) {
  animation-delay: 200ms;
}

#Remix_EP path:nth-of-type(6) {
  animation-delay: 250ms;
}

#Remix_EP path:nth-of-type(7) {
  animation-delay: 300ms;
}

@-webkit-keyframes remix-float {
  0% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-8px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}

@keyframes remix-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

@media only screen and (max-width: 768px) {
	#wrapper section.side-b {
		grid-template-areas: "art art" "info info";
	}

	#wrapper section.side-a,
	#wrapper section.side-b {
		grid-template-areas: "info info" "art art";
	}

	.side-a .artists a,
	.side-b .artists a, 
	.coming {
		font-size: 4.20vw;
	}

	.warning {
	    font-size: 2.7vw;
	}

	.cover-art {
		width: 100%;
	}
}