/* Font Imports from Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
@import url('https://fonts.googleapis.com/css?family=Cinzel:400,700');
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');

/* Base/Initial Styles */
body {
	background-color: #485460;

	color: #fff;
	font-family: 'Open Sans Condensed', sans-serif;


	margin: 0 auto;
	padding: 0;
}

._nopad {
	padding:0;
}

._floatleft {
	float:left;
}

._floatright {
	float:right;
}

._margo {
	margin: 5% 0;
}

iframe {
	width: 100%;
}

p {
	font-size: 175%;
}

/* Header Styles */
header {
	margin-bottom:2em;
	background: #808e9b;
	text-align:center;
}

header > div {
	padding-top: 5%;
    padding-bottom: 5%;
}

._title {
	color: #fff;
	text-align: center;
	margin: 0;
	padding: 10px;
	/* font-family: 'Cinzel', serif; */
	font-family: 'Press Start 2P', cursive;
	text-shadow: 3px 3px 6px #1a1a1a;
    font-size: 285%;
}

._subtitle {
	text-align: center;
	color: #fff;
	margin: 0 auto;
	padding: 10px;
	font-size: 210%;
	font-family: 'Open Sans Condensed', sans-serif;
}

._titlebar {
	width: 45%;
	margin: 0 auto;
	border: 1px solid #d2dae2;
}

._creators {
	background-color: #fff;
    color: #1e272e;
    font-size: 140%;
    padding: .5em 0;
    text-align: center;
    border: solid #1a1a1a;
    border-width: 2px 0 1px;
    box-shadow: inset 0px 5px 15px -2px #1a1a1a;
}

#merch {
	background-color: #9DB25F !important;
}

#merch a {
	color: #932F47 !important;
}

/* Body/Main Content Styles */
._alternate {
	padding: 1em 0;
}

._colored {
    background-color: #808e9b;
    box-shadow: inset 0px 5px 15px -2px #1a1a1a;
    border: solid #1a1a1a;
    border-width: 2px 0 1px;	
}

._host {
	display: inline-flex;
	margin: 0 2em;
	font-weight: 600;
}

._host2 {
	text-shadow: 1px 1px #5E5E5E;
}

._plight {
	text-shadow: 1px 1px #5E5E5E !important;
}

._names {
	font-weight: 500;
    margin-left: 1em;
}

._more {
	text-align: center;
	z-index: 2;
	position: relative;
	background: #485460;
	margin: 2em auto 0;
}
	
._fab {
	border: 1px solid #d2dae2;
	position: relative;
	z-index: 1;
	margin-bottom: 3em;
}

._team h2 {
	font-size: 145%;
	margin: 0;
	padding: 5% 0 4%;
	font-family: 'Press Start 2P', cursive;
	text-shadow: 3px 3px 6px #1a1a1a;
}

._team h3 {
	font-size:150%;
	font-weight:600;	
	color:#00ff88;
	border-top:1px dashed #d2dae2;
}
._team img {
	margin: 0 .75em;
	display: inline-block;
} 	

._highlight {
	color:#00ff88;
}

._listen img {
	width: 70%;
}

._listen h3 {
	margin-bottom: .25em;
}

._listen ._titlebar {
	margin: 1em auto;
}

._sidenav {
	padding-left:1em;
	border-left:1px solid #d2dae2;
}

/* Footer Styles*/
footer {
	background-color: #fff;
    color: #1e272e;
    font-size: 140%;
    padding: .5em 0;
    text-align: center;
    border: solid #1a1a1a;
    border-width: 1px 0;
}

footer a {	
	color:#05c46b;
}

/* Soundcloud Widget Styles */
#recent-ep-toggle
{
	clear: both;
	text-align: center;
	display: none;
}

#recent-ep-label
{
	font-family: 'Press Start 2P', cursive;
	font-size: 80%;
	padding: .5em 0;
}

#recent-ep-container
{
	text-align: left;
	margin-top: 20px;
}

/* Small devices (portrait phones, 320px and up) */
@media only screen and (min-width: 320px){ 

	._host {
   		 width: 100%;
	} 
	._listen a {
		/* float: left; */
		width: 33%;
	}

header img {
      width:50%;
  }
  
	._more {
		width: 90%;
		font-size: 235%;
	}
	
	._fab {
		margin-top: -5.5%;
	}
	
	._team  > div {
		text-align:center;
	}
	
	._team h3 {
		font-size: 215%;
		text-align:center;
	}
	
	._team img {
		float: none;
		width: 15%;
	}
}

/* Small devices (landscape phones, 576px and up) */
@media only screen and (min-width: 576px){
		header img {
		width:150%;
	}
}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px){  
	
	._host {
    		width: auto;
	}	

	header img {
		width:150%;
	}
	
	
	._more {
		width: 50%;
	}
	
	._fab {
		margin-top: -3%;
	}
	
	._team h2 {
		text-align:left;
	}
	
	._team h3 {
		text-align: left;
	}
	
	._team img {
		width: 10%;
	}
}

/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px){ 
	._team img {
		float: right;
		width: 5%;
	} 	

	._more {
		width: 40%;
		font-size: 260%;
	}
	
	._fab {
		margin-top: -2.5%;
	}
	
	._team  > div h2 {
		text-align:left;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px){  
}