@media only screen and (orientation: portrait) {	
    #nav-d {
        display: none;
    }
	
	#nav-m {
		display: block;
		position: sticky;
		top: 2em;
		background-color: white;
	}
	
	#container {
		width: calc(100% - 4em);
		height: calc(100% - 21em);
		margin: 2em;
		/*overflow: hidden;*/
	}	
	
	div.error {
		width: 100%;
	}

	div.success {
		width: 100%;
	}
}	

@media only screen and (orientation: landscape) {	
    #nav-d {
        display: block;
		position: sticky;
		top: 2em;
		background-color: white;
    }
	
	#nav-m {
		display: none;
	}
	
	#container {
		width: calc(100% - 4em);
		height: calc(100% - 17em);
		margin: 2em;
		/*overflow: hidden;*/
	}
	
	form {
		width: 25%;
		margin-top: 2em;
	}
	
	div.error {
		width: 25%;
	}

	div.success {
		width: 25%;
	}
}

#main {
	width: 100%;
	height: 100%;
	
	position: absolute;
	top: 0;
	left: 0;
}

body {	
    font-family:'Roboto-Light', 'Roboto';
}

span.b {
	font-size: 1.5em;
}

table {
	margin-top: 2em;
	margin-left: 2em;
}

td {
	padding-left: 2em;
	font-weight: 300;
}

i {
    font-size: 2em;
}

input[type=text],
input[type=email],
textarea {
	width: 100%;
	margin: auto;
	font-family:'Roboto-Light', 'Roboto';
	font-weight:300;
	font-size:15px;
	padding: 10px;
}

input[type=submit] {
	font-family: 'Roboto-Medium', 'Roboto'; 
	font-weight:300; 
	font-size: 15px; 
	width: 20%; 
	height: 2.13em; 
	background-color: #03BD5B; 
	border-style: solid; 
	border-color: black; 
	border-width: 1px;
	float: right;
}

input[type=radio]{
	width     : 2em;
	font-size : 1em;
	opacity   : 0;
}

input[type=radio] + label {
	display      : inline-block;
	margin-left  : -2em;
	line-height  : 1.6em;
	font-weight: 200;
}

input[type=radio] + label > span {
	display          : inline-block;
	width            : 1em;
	height           : 1em;
	margin           : 0.25em 0.5em 0.25em 0.25em;
	border           : 0.0625em solid #8493A8;
	border-radius    : 0.25em;
	background       : #ebeff3;
	vertical-align   : bottom;
}

input[type=radio]:checked + label > span:before {
	content     : 'X';
	display     : block;
	width       : 1em;
	color       : #8493A8;
	font-size   : 0.875em;
	line-height : 1.2em;
	text-align  : center;
	font-weight : bold;
}

div.error {
	color: #D1335B;
	background-color: #f1c1cd;
	border-style: solid; 
	border-color: #D1335B; 
	border-width: 2px; 
	border-radius: 5px;
	height: 60px;
	line-height: 1em;
	margin-top: 0.75em;
}

div.success {
	color: #06BC5B;
	background-color: #b4fed6;
	border-style: solid; 
	border-color: #06BC5B; 
	border-width: 2px; 
	border-radius: 5px;
	height: 60px;
	line-height: 1em;
	margin-top: 0.75em;
}

.nav-link, .nav-link-h {
    color: black;
	text-decoration: none;
}

.nav-link-h:hover {
	border-bottom: 1px solid black;
}

.logo-d {
    width: 10em;
}

.title {
	font-size: 1.5em;
}