body { margin: 5; }

h1,h2{
	font-family: arial;
}

@media (orientation: landscape) and (pointer: fine){
	#pageContainer {
		display: grid;
		grid-template-columns: 50% 48%;
		grid-template-rows: 5% 20% 25% 25%;
		grid-gap: 15px;
		height: 95vh;
	}
	
	#portraitMessageContainer {
		visibility: hidden;
	}

	#sceneContainer {
		grid-column: 1;
		grid-row: 1/5;
		background: black;
		border-style: solid;
	}
	
	#loadingDiv{
		grid-column: 1;
		grid-row: 1/5;
		text-align: center;
	}
	
	#loadingSpan{
		position: relative;
		top: 50%;
		color: white;
		background-color: black;
		font-size: xx-large;
	}
	
	#playbackControls{
		grid-column: 2/4;
		grid-row: 1;
		position: relative;
	}
	
	#animationControlSlider{
		position: relative;
		top: 30%;
	}

	#controls {
		grid-column: 2;
		grid-row: 2;
	}

	#logoImage{
		height: 7vh;
	}

	#telephoneLink{
		position: absolute;
		right: 20px;
		top: 20px;
		font-size: x-large;
		color: black;
		font-family: Arial, Helvetica;
	}

	#stepSelection{
		display: flex;
		flex-flow: row wrap;
		overflow: auto;
	}
	
	.stepButton{
		width: 200px;
		height: 45px;
	}
	
	#info {
		grid-column: 3;
		grid-row: 2;
	}

	#contact {
		grid-column: 3;
		grid-row: 3;
	}

	input{
		padding: 5px;
	}
	
	#phoneIcon{
		height: 80px;
	}

	#logoImage{
		height: 80px;
	}
	
	#banner{
		height: 100px;
	}
	
}

@media (orientation: landscape) and (pointer: coarse){
	#pageContainer{
		visibility: hidden;
	}
	
	#portraitMessageContainer {
		visibility: visible;
		position: absolute;
		width: 100vw;
		height: 50vh;
		top: 40vh;
	}
	
	#portraitMessage{
		margin: auto;
		width: 50%;
		padding: 10px;
		top: 10px;
	}
	
	#logoImage{
		height: 105;
	}

	#telephoneLink{
		position: absolute;
		right: 20px;
		top: 20px;
		color: black;
		font-family: Arial, Helvetica;
	}

	#phoneIcon{
		height: 105px;
	}

	#logoImage{
		height: 105px;
	}
}

@media (orientation: portrait){
	#pageContainer {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: 40vh auto auto 40vh;
		grid-gap: 10px;
	}
	
	#portraitMessageContainer {
		visibility: hidden;
	}

	#sceneContainer {
		grid-column: 1;
		grid-row: 1;
		border-style: solid;
	}
	
	#loadingDiv{
		grid-column: 1;
		grid-row: 1;
		text-align: center;
	}
	
	#loadingSpan{
		position: relative;
		top: 50%;
		color: white;
		background-color: black;
		font-size: xx-large;
	}

	#playbackControls{
		grid-column: 1;
		grid-row: 2;
		margin: auto;
		width:100%;
	}
	
	#animationControlSlider{
		position: relative;
		top: 30%;
		width: 60%;
		padding: 5px;
		margin: 10px;
	}
	
	#playButton{
		padding: 5px;
		margin: 10px;
		width: 15%;
	}
	
	#pauseButton{
		padding: 5px;
		margin: 10px;
		width: 15%;
	}

	#displaySwitchButtonsContainer{
		grid-column: 1;
		grid-row: 3;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.displaySwitchButton{
		width: 30vw;
	}


	#controls {
		grid-column: 1;
		grid-row: 4;
	}

	#info {
		grid-column: 1;
		grid-row: 4;
	}

	#contact {
		grid-column: 1;
		grid-row: 4;
	}

	#stepSelection{
		display: flex;
		flex-direction: column;
		overflow: scroll;
	}
	
	#telephoneLink{
		position: absolute;
		right: 20px;
		top: 20px;
		color: black;
		font-family: Arial, Helvetica;
	}

	#phoneIcon{
		height: 105px;
	}

	#logoImage{
		height: 105px;
	}
	
	#banner{
		height: 140px;		
	}
}

@media(any-pointer: coarse){
	input{
		font-size: x-large;
		min-height: 60px;
	}
}