* {margin: 0; padding: 0;}

/*
	COLOR SCHEME
	#D9CEB1
	#C9E4ED
	#45515C
	#456B86
	#76BED6

	#A2C5D8
*/

/*
	font-family: 'Zilla Slab', ;
	font-family: 'Muli', ;
	font-family: 'Inconsolata', ;
*/


body{
	background-color:#C9E4ED;
	display:grid;
	overflow-x:hidden;
	font-family: 'Times New Roman', 'Inconsolata';
}


header{
	grid-area: h;
	background-color:#D9CEB1;
	color:#45515C;
	vertical-align:middle;
	font-family: 'Muli',sans-serif;
	text-align:center;
	text-transform:uppercase;
	z-index:6;
}

nav{
	grid-area: n;
	background-color:#76BED6;
	font-family: 'Inconsolata',monospace;
}

footer{

	text-align:center;
	font-family: 'Inconsolata',monospace;
}

@media (orientation:landscape) and (min-width: 50em){
	p, main ul, main ol{
		font-size: 18pt;
	}
	body{
		grid-template-areas: 	". ."
								"h h"
								"n m"
								"f f";
		grid-template-columns: 20vw 80vw;
		grid-template-rows: 5vh 15vh max-content 2vh;
	}

	header{
		font-size:4vw;
		line-height:15vh;
	}

	nav{
		font-size:1.5vw;
		line-height:2;
		padding: 2.5vh 0 2.5vh 3vw;
	}

	nav ul{
		margin-left: 0.5vw;
		position: sticky;
		top:0;
		z-index: 10;
	}

	footer{
		grid-area: f;
	}

	h1{
		font-size:32pt;
	}

	h2{
		font-size:24pt;
	}

	h3{
		font-size:18pt;
	}

	h4{
		font-size:14pt;
	}

	.expandable li{
		height: 0;
		opacity: 0;
		transition-timing-function: ease;
		transition-duration: 0.5s;
	}

	.parent:hover + .expandable li, .expandable:hover li{
		opacity: 1;
		height:100%;
	}

	.child1{
		transition-delay: 0.275s;
	}
	.child2{
		transition-delay: 0.3s;
	}
	.child3{
		transition-delay: 0.325s;
	}
	.child4{
		transition-delay: 0.35s;
	}
	.child5{
		transition-delay: 0.375s;
	}
	.child6{
		transition-delay: 0.4s;
	}
	.child7{
		transition-delay: 0.425s;
	}
	.child8{
		transition-delay: 0.45s;
	}
	.child9{
		transition-delay: 0.475s;
	}
	.child10{
		transition-delay: 0.5s;
	}
	.child11{
		transition-delay: 0.525s;
	}
	.child12{
		transition-delay: 0.55s;
	}

	.nav_id_links{
		margin-left: 2vw;
	}
	.curved_img{
		width: 30%;
	}
}

@media (orientation:portrait), (max-width: 50em) {
	.nav_id_links{
		display:none;
	}

	body{
		grid-template-areas: 	"."
								"h"
								"n"
								"m"
								".";
		grid-template-columns: 100vw;
		grid-template-rows: 5vh 10vh max-content;
		position:relative;
	}

	header{
		font-size:5vw;
		line-height:10vh;
		position: sticky;
		top:0;
		z-index: 10;
	}


	nav{
		padding: 2.5vh 0 2.5vh 2vw;
		top:10vh;
		position: sticky;
		z-index: 10;
	}

	nav ul{
		display:flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	nav ul li{
		margin: auto 2vw;
		font-size:3.5vw;
		list-style:none;
	}

	main ul, main ul li, main ol, main ol li{
		line-height:1.5;
		margin-top:2vh;
		margin-bottom:2vh;
	}
	p, main ul, main ul li, main ol, main ol li{
		font-size: 20pt;
	}

	.sub{
		display:none;
	}

	footer{
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
	}

	h1{
		font-size:40pt;
	}

	h2{
		font-size:30pt;
	}

	h3{
		font-size:25pt;
	}

	h4{
		font-size:20pt;
	}

	.curved_img{
		width: 100%;
	}
}

main{
	grid-area: m;
	padding: 5vh 5vw 15vh 5vw;
	text-align:justify;
	min-height: 63vh;
}

footer div{
	position:relative;
}

nav ul{
	text-decoration: none;
}
nav a:hover{
	text-decoration: underline;
	cursor: pointer;
	color:#456B86;
}
nav a, nav a:visited{
	color:black;
	text-decoration: none;
}

nav a:target{
	background-color:black;
}

.sub{
	font-size:1.25vw;
	padding-left: 2vw;
	line-height:1.75;
}

p, main ul, main ol{
	color:#45515C;
	line-height:1.5;
}

p{
	margin: 3vh 0 4vh 0;
}

main ul, main ol{
	margin: 1vh 0 2vh 4vw;
}

h1, h1 a, h2,h3,h4, h4 a, h3 a{
	color:#456B86;
	text-transform:uppercase;
	font-family: 'Muli',sans-serif;
	text-decoration:none;
	text-align: left;
}

h3 a:hover{
	text-decoration:underline;
}

h1{
	clear:both;
}

main ul li div{
	line-height:1.25;
	margin-bottom:1vh;
}

.curved_img{
	padding: 2vh 0 2vh 2vw;
	border-radius: 0 5vw 0 5vw;
	height:auto;
	margin: 0 0.5vw;
}

.small_img{
	width:15%;
}

.right{
	float:right;
}

.left{
	clear:right;
	float:left;
	margin-right:5vw;
}

.extend{
	margin-bottom:5vh;
}

.no_style, .nostyle{
	text-decoration: none;
	list-style:none;
}

h4 a:hover, h1 a:hover{
	text-decoration:underline;
}

.right_text{
	margin-top:7.5vh;
}

.extrabold{
	font-weight:900;
	font-size:120%;
	line-height:83%;
}

.bar{
	margin-bottom:2.5vh;
	height:8vh;
	background-color:#D9CEB1;
	display: flex;
	justify-content: center;
	align-items: center;
}

footer div{
	width:100vw;
}