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

a {
	transition: opacity 0.2s;
}

a:hover {
	opacity: 0.6;
}

#wrapper > section {
    position: relative;
}

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

#wrapper section.services .two-col {
  margin: 20px;
}

#wrapper section.services,
#wrapper section.services .two-col:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

#wrapper section.services .two-col a {
  margin: 10px;
}

#wrapper section.lyrics {
  display: none;
}

#wrapper section.upsidedown {
    text-align: center;
    font-size: 2.5vw;
    color: #ccc;
    margin-bottom: 4vh;
    padding: 20px;
}

#wrapper section.upsidedown .flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    font-size: 3vw;
    padding: 20px 0;
}

.flex-item:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    }

.flex-item:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    }

.flex-item:nth-child(3) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    }

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

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

.cover-art img {
	/*width: 100%;*/
	max-width: 90% !important;
  max-height: 90vh;
}

#GuyAkimotoMIP {
    max-width: 960px;
    max-height: 90vh;
}

.title {
  padding-top: 4%;
  font-size: 4vw;
}
.title, .coming {
	text-align: center;
	font-weight: bold;
	font-family: Helvetica, Arial, sans-serif;
	color: #000;
	text-decoration: none;
	text-transform: uppercase;
}
.cover-art a .coming {
  padding-top: 1vh;
  font-size: 2vw;
	letter-spacing: 0.25vw;
  transition: letter-spacing 0.2s ease-in-out;
}
.cover-art a:hover .coming {
  letter-spacing: 0.5vw;
}

img {
	max-width: 100%; 
}

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 #GUYAKIMOTO {
    transform: translate3d(0,-80%,0);
}

#GUYAKIMOTO {
    transition: transform 1s;
    /*transition-delay: 0.1s;*/
    transform: translate3d(0,0,0);
}

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

body.is-preload .cover-art,
body.is-preload .logo,
body.is-preload .title,
body.is-preload .coming
 {
    opacity: 0;
}

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

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

.logo {
    opacity: 0.5;
}

.logo:hover {
  opacity: 1;
}

.logo img {
  max-width: 20vw;
}

.title {
    transition-delay: 0.4s;
}

.coming {
    transition-delay: 0.6s;
}

/* 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,
#MakeBlue:hover #Make,
#ItRed:hover #It,
#PopYellow:hover #Pop,
#PeaceWhite:hover #Peace {
  -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;
}

path {
    transform-origin: center center;
}


@-webkit-keyframes fade-pulse-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
    transform: rotate(-1deg);
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-pulse-out {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
    transform: rotate(-1deg);
  }
  100% {
    opacity: 1;
  }
}

#GUYAKIMOTO:hover path {
  animation-name: fade-pulse-out;
  -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;
}

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

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

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

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

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

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

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

#GUYAKIMOTO path:nth-of-type(8) {
  animation-delay: 350ms;
}

#GUYAKIMOTO path:nth-of-type(9) {
  animation-delay: 400ms;
}

#GUYAKIMOTO path:nth-of-type(10) {
  animation-delay: 450ms;
}


@media only screen and (max-width: 768px) {
  .title,
	.coming {
		font-size: 4.20vw;
	}

	.cover-art {
		width: 90%;
    margin: 0 auto;
	}
}