@charset "UTF-8";
 @media screen and (orientation:landscape) {
html { 
	background: url("images/landscape.jpg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
body {

}
div.logo {
	position: fixed;
  	left: 50%;
	bottom: 5px;
	transform: translate(-50%, 0%);
	margin: 0 auto; 
	width: 25%;
	text-align: center;
}
div.logo img {
	width: 100%;
	height: auto;
}
div.logo a {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 700;
	font-size: 1vw;
	color: #ff5c03;
	text-decoration: none;
	line-height: 1.7vw;
}
div.logo a.mail-live {
	margin: 1vw 1.9vw 1vw 0;
}
div.logo a.mail-remixes {
	margin: 1vw 0 1vw 1.9vw;
}
#player-container {
	height: 60px;
	width: 420px;
	margin: 20px 0px 0px 20px;
	float: left;
}
div.atari {
	height: 60px;
	width: 60px;
	margin: 20px 20px 0px 0px;
	float: right;
}
#player-container #play-pause {
	cursor: pointer;
	text-indent: -999999px;
	height: 60px;
	width: 60px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60px;
	float: left;
}
.play {
	background-image: url(images/play.gif)!important;
}
.pause {
	background-image: url(images/stop.gif)!important;
}
#player-container a.social {
	float: left;
	height: 60px!important;
	width: 60px!important;	
}
#player-container a.social img {
	height: 60px;
	width: 60px;	
}
div.atari img {
	height: 60px;
	width: 60px;	
}
svg#atari {
	height: 60px;
	width: 60px;
	will-change: filter;
	filter: drop-shadow(0px 0px 3px #ff5c03);
	animation: pulse 2s infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}
@keyframes pulse {
  0% {
    filter: drop-shadow(0px 0px 0px #000);
  }
  100% {
    filter: drop-shadow(0px 0px 8px #ff5c03);
  }
}
}

 @media screen and (orientation:portrait) {
html { 
	background: url("images/portrait.jpg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
div.logo {
	position: fixed;
  	left: 50%;
	bottom: 5px;
	transform: translate(-50%, 0%);
	margin: 0 auto; 
	width: 90%;
	text-align: center;
}
div.logo img {
	width: 100%;
	height: auto;
}
div.logo a {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: 700;
	font-size: 3.7vw;
	color: #ff5c03;
	text-decoration: none;
	line-height: 6vw;
}
div.logo a.mail-live {
	margin: 2vw 4vw 2vw 0;
}
div.logo a.mail-remixes {
	margin: 2vw 0 2vw 4vw;
}
#player-container {
  	height: 780px;
  	width: 120px;	
	margin: 10px 0px 0px 10px;
	float: left;
}
div.atari {
	height: 120px;
	width: 120px;
	margin: 10px 10px 0px 0px;
	float: right;
}
#player-container #play-pause {
	cursor: pointer;
	text-indent: -999999px;
	height: 120px;
	width: 120px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 120px;
	float: left;
}
.play {
	background-image: url(images/play.gif)!important;
}
.pause {
	background-image: url(images/stop.gif)!important;
}
#player-container a.social {
	float: left;
	height: 120px!important;
	width: 120px!important;	
}
#player-container a.social img {
	height: 120px;
	width: 120px;	
}
div.atari img {
	height: 120px;
	width: 120px;	
}
svg#atari {
	height: 120px;
	width: 120px;
	will-change: filter;
	filter: drop-shadow(0px 0px 3px #ff5c03);
	animation: pulse 2s infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}
@keyframes pulse {
  0% {
    filter: drop-shadow(0px 0px 0px #000);
  }
  100% {
    filter: drop-shadow(0px 0px 8px #ff5c03);
  }
}
}