@charset "utf-8";

@media handheld{

/*Content*/
	
	.galleryphoto {
		width: 80%;
		margin: auto;
		border: .2em solid black;
	}
	
	.galleryphotocontainer {
		display : flex;
		align-content: center;
		align-items: center;
		border: .5em solid maroon;
		margin: 2em 4em;
		padding: 2em 1em;
	}
	
	.biobox {
		border: .5em solid maroon;
		margin: 1em 2em;
	}
	
	.biobox img {
		margin: auto;
		display: block;
		border: .2em solid black;
		border-radius: 2em;
		width: 100%;
	}
	
	.biobox p {
		margin: 1em 2em;
	}
	
	#radiohead, #radioheadtext {
		display: inline;
		text-align: left;
	}
	
	#radiohead p, #radiohead h1, #radiohead h2, #radiohead h3 {
		margin: 0;
		text-align: inherit;
	}
	
	#radiohead h1 {
		font-size: 7.5vw;
		color: olivedrab;
	}
	
	#radiohead h2 {
		font-size: 5vw;
	}
	
	#radiohead p {
		font-size: 3.1vw;
	}
	
	#radiohead h3 {
		font-size: 3.3vw;
	}
	
	#radiohead img {
		display: block;
		margin: auto;
		width: 50%;
	}
	
	.episodebox p, #episodeboxlist p {
		font-size: 3vw;
	}
	
	.episodebox iframe {
		margin: auto;
		width: 35.5em;
		height: 20em;
	}
	
	#speedwaybox {
		width: 100%;
		display: block;
		margin: auto;
		text-align: center;
	}
	
	#page2content {
		display: grid;
	}
	
	
	.imageholder {
		position: relative;
		text-align: center;
		padding-bottom: 200px;
	}
	
	.contentbox p, .contentbox h1 {
		text-align: center;	
	}
	
	.contentrow {
		display: grid;
	}
	
	.contentrow img {
		margin-left: auto;
		margin-right: auto;
	}
	
	.contentbox p {
		font-size: 3vw;
	}
	
	.imageholder img {
		width: 100%;
		margin-bottom: 10em;
	}
	
	.centertext {
		position: absolute;
		top: 55%;
		left: 5%;
		transform: translate(-5%, -60%);
	}
	
	#homebody p {
		font-size: 3vw;
	}
	
	h3 {
		font-size: 7vw;
		padding-bottom: 0px;
		margin-bottom: 0px;
	}
	
	h3, h4 {
		text-align: left;
	}
	

/* Header/Footer */
	header {
		display: block;
	}
	
	.openbtn {
		display: block;
		font-size: 48px;
		overflow-x: hidden;
		z-index: 1;
		top: 10vw;
		padding: 0 2vw;
		position: fixed;
		border-radius: 2em;
		
		background-color: maroon;
	}
	
	#navbar {
		overflow-x: hidden;
		z-index: 1;
		top: 0;
		position: fixed;
		width: 60%;
		background-color: black;
		height: 100%;
		border: .5em solid maroon;
		display: none; /* This changes via javascript */
	}
	
	#navbar a, #closebtn {
		font-family: Aero;
		text-decoration: none;
		display: block;
		text-align: left;
		color: maroon;
		width: 100%;
		border: solid 2px black;
		border-radius: 0px 6px 6px 0px;
		padding: 20px 8px;
	}
	
	#closebtn {
		background-color: grey;
	}
	
	#navbar a:hover, #closebtn:hover {
		color: silver;
	}
	
	#logo {
		width: 100%;
		grid-template-columns: 40% 60%;
	}
	
	#logo h1 {
		font-size: 6vw;
		text-align: right;
	}
	
	#logo h2  {
		font-size: 4vw;
		text-align: right;
	}
	

}