
html.aAX {
    overflow: hidden;
}

body {
  background: black;	
  font-family: "Anton SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  opacity: 0;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1s;  
  animation-fill-mode: forwards; 
}

.wrapper {

    display: flex;
    justify-content: center;
    align-items: center;
	min-height: 100vh;
	border: 0px solid red;
}


.leftEarlug {

	stroke: #ffffff;
	stroke-width: 16;	
	fill: #ffffff;
	animation: pulse-stroke .5s infinite;
	_animation: shake .7s infinite;
	
}

.rightEarlug {
	animation: pulse-stroke .5s infinite;
	_animation: shake 1s infinite;
	stroke: #ffffff;
	stroke-width: 16;	
	fill: #ffffff;
}




.right-soundwave-small {
	
	stroke: #ffffff;
	fill: #ffffff;	
	animation: right-soundwave-small-wave .5s ease-out infinite;
}

@keyframes right-soundwave-small-wave {
  0% {
    opacity: 0.1;
  }	
	
  20% {
    opacity: 0.6;
  }
  
  75% {
	transform: translate(74px,0px);
	-ms-transform: translate(74px,0px); /* IE 9 */
	-webkit-transform: translate(74px,0px); /* Safari and Chrome */
	-o-transform: translate(74px,0px); /* Opera */
	-moz-transform: translate(74px,0px); /* Firefox */		
  }
  
  100% {
    opacity: 0;  
	transform: translate(74px,0px);
	-ms-transform: translate(74px,0px); /* IE 9 */
	-webkit-transform: translate(74px,0px); /* Safari and Chrome */
	-o-transform: translate(74px,0px); /* Opera */
	-moz-transform: translate(74px,0px); /* Firefox */		
  }  
  
}


.right-soundwave-large {
	
	stroke: #ffffff;
	fill: #ffffff;	
	animation: right-soundwave-large-wave .5s ease-out infinite;
}


@keyframes right-soundwave-large-wave {
	
  0% {
    opacity: 0.6;	
  }
  
  65% {
    opacity: 0;  
   }
   
  75% {
    opacity: 0;  
	  
	transform: translate(74px,0px);
	-ms-transform: translate(74px,0px); /* IE 9 */
	-webkit-transform: translate(74px,0px); /* Safari and Chrome */
	-o-transform: translate(74px,0px); /* Opera */
	-moz-transform: translate(74px,0px); /* Firefox */		
  }
  
  
  100% {
    opacity: 0;  	  
	transform: translate(74px,0px);
	-ms-transform: translate(74px,0px); /* IE 9 */
	-webkit-transform: translate(74px,0px); /* Safari and Chrome */
	-o-transform: translate(74px,0px); /* Opera */
	-moz-transform: translate(74px,0px); /* Firefox */		
  }  
  
}






.left-soundwave-small {
	
	stroke: #ffffff;
	fill: #ffffff;	
	animation: left-soundwave-small-wave .5s ease-out infinite;
}

@keyframes left-soundwave-small-wave {
	
  0% {
    opacity: 0.1;
  }	
	
  20% {
    opacity: 0.6;
  }
  
  75% {
	transform: translate(-74px,0px);
	-ms-transform: translate(-74px,0px); /* IE 9 */
	-webkit-transform: translate(-74px,0px); /* Safari and Chrome */
	-o-transform: translate(-74px,0px); /* Opera */
	-moz-transform: translate(-74px,0px); /* Firefox */		
  }
  
  100% {
    opacity: 0;  
	transform: translate(-74px,0px);
	-ms-transform: translate(-74px,0px); /* IE 9 */
	-webkit-transform: translate(-74px,0px); /* Safari and Chrome */
	-o-transform: translate(-74px,0px); /* Opera */
	-moz-transform: translate(-74px,0px); /* Firefox */		
  }  
  
}





.left-soundwave-large {
	
	stroke: #ffffff;
	fill: #ffffff;	
	animation: left-soundwave-large-wave .5s ease-out infinite;;
}


@keyframes left-soundwave-large-wave {
	
  0% {
    opacity: 0.6;	
  }
  
  65% {
    opacity: 0;  
   }
   
  75% {
    opacity: 0;  
	  
	transform: translate(-74px,0px);
	-ms-transform: translate(-74px,0px); /* IE 9 */
	-webkit-transform: translate(-74px,0px); /* Safari and Chrome */
	-o-transform: translate(-74px,0px); /* Opera */
	-moz-transform: translate(-74px,0px); /* Firefox */		
  }
  
  
  100% {

    opacity: 0;  	  
	transform: translate(-74px,0px);
	-ms-transform: translate(-74px,0px); /* IE 9 */
	-webkit-transform: translate(-74px,0px); /* Safari and Chrome */
	-o-transform: translate(-74px,0px); /* Opera */
	-moz-transform: translate(-74px,0px); /* Firefox */		
  }  
  
}








.earphones {
	stroke: #ff0000;
	stroke-width: 0;	
	fill: #ffffff;
	
	
  /* Start the shake animation and make the animation last for 0.5 seconds */
  _animation: shake 1s;

  /* When the animation is finished, start again */
  _animation-iteration-count: infinite;	
}



@keyframes pulse-stroke {
	0% {
		stroke: #ffffff;
		stroke-width: 0;	
	}
	
	70% {
		stroke: #ffffff;
		stroke-width: 16;		
	}
	
	100% {
		stroke: #ffffff;
		stroke-width: 12;
	}
	

}

@keyframes pulse-white {
	0% {
		transform: scale(.98);
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
	}
	
	100% {
		transform: scale(.98);
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}



@keyframes lights {
  0% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
  30% { 
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  40% { 
    color: hsl(230, 100%, 95%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }
  
  70% {
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  100% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
}

.city-nights {
  margin: auto;
  _font-size: 3.5rem;
  _font-weight: 300;
  animation: lights 5s 750ms linear infinite;
}


@keyframes fadeInOpacity {
	0% {
		opacity: 0;

	}
	100% {
		opacity: 1;		
	}
}