@media only screen
and (orientation: portrait) {
	#spinner {top: calc(50% - 0.5em);}

	#trains, #fn, #throttle, #dir {width: calc(50% - 5px);}
	#trains {
		height: calc(12% - 4px);
		text-align: left;
	}
	#trains > p {
		bottom: 0.25em;
		left: 0.25em;
	}
	#trainlist{
		right: 0.1em;
		top: 0.35em;
		white-space: nowrap;
	}
	#trainlist .prev, #trainlist .next {
		display: inline-block;
		height: 100%;
		width: 25%;
		margin: 0 0 1em;
	}
	#trainlist .prev {
		background: url('chevron-left.svg') no-repeat center/66%;
	}
	#trainlist .next {
		background: url('chevron-right.svg') no-repeat center/66%;
	}
	#trainlist .list {
		overflow-x: auto;
		white-space: nowrap;
		width: 50%;
	}
	#trainlist .list label {
		margin: 0 27% 1.5em;
		padding: 0.1em 10%;
	}
	#fn {
		height: calc(78% - 8px);
		top: calc(12% + 2px);
	}
	#fn ul li {margin: 4% 5%;}
	#fnscroll {
		bottom: 1vh;
		height: calc(15% + 2vh);
	}

	#throttle {height: calc(75% - 8px);}
	#throttle #bars {height: 85%;}
	#throttle input[type=range]::-moz-range-thumb {
		height: 5.5%; /* 1.8em;*/
		width: 70%; /*12em;*/
	}
	#throttle input[type=range]::-webkit-slider-thumb {
		height: 5.5%; /* 1.8em;*/
		width: 70%; /*12em;*/
	}
		

	#dir {
		height: calc(15% - 4px);
		right: 0;
		top: calc(75% - 2px);
	}
	#dir label {
		margin: 0.4em 0.2em;
		height: 2em;
		width: 1.25em;
	}
	#dir label[for=rev] {
		background: url('chevron-left.svg') no-repeat center;
		float: left;
	}
	#dir label[for=fwd] {
		background: url('chevron-right.svg') no-repeat center;
		float: right;
	}
	#dir #loco {
		height: 1.6em;
		top: 0.6em;
	}

	.tabs {
		height: calc(10% - 4px);
		width: calc(100% - 4px);
	}
	.tabs .page img.svg {
		margin-top: 22%;
		height: 70%;
	}
	#tab2 #config_page i {line-height: 1.8em;}
	#tab_clock, #tab_messages {font-size: 50%;}

	#config {height: calc(90% - 6px);}
	.page_menu button {
		display: block;
		margin: 0.95em auto;
		padding: 0.2em;
		width: 10em;
	}
/*
	.page_menu button:nth-child(odd) {margin-right: 3em;}
	.page_menu button:nth-child(even) {margin-left: 3em;}
*/	
}
@media only screen
and (orientation: landscape) {
	#spinner {top: calc(44% - 0.5em);}

	#trains, #dir {
		left: calc(40% + 1px);
		height: calc(44% - 6px);
		width: calc(20% - 6px);
	}
	#trains {
		text-align: center;
		top: 0;
	}
	#trains > p {
		right: 0.25em;
		top: 0.25em;
	}
	#trainlist {}
	#trainlist > div {}
	#trainlist .prev, #trainlist .next {
		display: block;
		height: 25%;
		width: 100%;
	}
	#trainlist .prev {
		background: url('chevron-up.svg') no-repeat center;
	}
	#trainlist .next {
		background: url('chevron-down.svg') no-repeat center;
	}
	#trainlist .list {
		height: 50%;
		overflow-y: auto;
	}
	#trainlist .list label {
		margin: calc(5vh + 1em) 1em;
		padding: 0 0.5em;
	}

	#fn, #throttle {width: calc(40% - 5px);}
	#fn {height: calc(100% - 4px);}
	#fn ul li {margin: 3% 5%;}
	#fnscroll {
		bottom: 3%;
		height: 12%;
	}

	#throttle {height: calc(88% - 6px);}
	#throttle #bars {height: 80%;}
	#throttle input[type=range]::-moz-range-thumb {
		height: 6.5%;
		width: 50%;
	}
	#throttle input[type=range]::-webkit-slider-thumb {
		height: 6.5%;
		width: 50%;
	}

	#dir {bottom: calc(12% + 2px);}
	#dir label {
		position: absolute;
		height: 38%;
		width: 100%;
	}
	#dir label[for=rev] {
		background: url('chevron-down.svg') no-repeat center;
		bottom: 0;
	}
	#dir label[for=fwd] {
		background: url('chevron-up.svg') no-repeat center;
		top: 0;
	}
	#dir #loco {
		height: 30%;
		top: 35%;
		width: 100%;
	}

	.tabs {
		right: 0;
		height: calc(12% - 4px);
	}
	#tab, #tab1 {
		width: calc(60% - 5px);
		white-space: nowrap;
	}
	#tab.cfg, #tab2 {width: calc(100% - 4px);}
	#tab2 #config_page i {line-height: 1.5em;}
	.tabs .page img.svg {
		margin-top: 15%;
		height: 75%;
	}
	#tab_clock, #tab_messages {font-size: 40%;}

	#config {height: calc(88% - 6px);}
	.page_menu button {
		display: inline-block;
		margin: 1% 5%;
		padding: 1.75%;
		width: 35%;
	}
}

/**********/

@media only screen
and (max-width: 720px)
and (orientation: portrait) {
	#popup {
		background: #300;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}
	#popup > div:first-child {
		border-radius: 0 0 0 50%;
		top: 0;
		right: 0;
	}
	#popup p {margin: 2vh;}

	#wrapper {
		font-size: 5vh;
		max-width: unset;
		max-height: unset;
	}
}
@media only screen
and (max-width: 1024px)
and (orientation: landscape) {
	#popup {
		background: #300;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}
	#popup > div:first-child {
		border-radius: 0 0 0 50%;
		top: 0;
		right: 0;
	}
	#popup p {margin: 2vh;}

	#wrapper {
		font-size: 7vh;
		max-width: unset;
		max-height: unset;
	}
}
@media only screen
and (min-width: 721px)
and (orientation: portrait) {
	body {background: #f0f0f0;}
	#popup {
		background: #666;
		border-radius: 0.5em;
		box-shadow: 0 0 0.25em 0.35em #fff, 0 0 0.25em 0.2em #fff inset;
		top: 20%;
		left: 10%;
		height: 60%;
		width: 80%;
	}
	#popup.verify {height: 4.25em;}
	#popup > div:first-child {
		border-radius: 50%;
		top: -0.25em;
		right: -0.25em;
	}
	#popup p {margin: 2%;}

	#wrapper {
		font-size: 24px;
		max-width: 480px;
		max-height: 720px;
		margin: 10vh auto 0;
	}
}
@media only screen
and (min-width: 1024px)
and (orientation: landscape) {
	body {background: #f0f0f0;}
	#popup {
		background: #666;
		border-radius: 0.5em;
		box-shadow: 0 0 0.25em 0.35em #fff, 0 0 0.25em 0.2em #fff inset;
		top: 5%;
		left: 20%;
		height: 90%;
		width: 60%;
	}
	#popup.verify {height: 4.25em;}
	#popup > div:first-child {
		border-radius: 50%;
		top: -0.25em;
		right: -0.25em;
	}
	#popup p {margin: 2%;}

	#wrapper {
		font-size: 24px;
		max-width: 720px;
		max-height: 480px;
		margin: 10vh auto 0;
	}
}