body, html{
	margin: 0;	
	padding: 0;
	width: 100%;
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
}
body{
	font-family: sans-serif;
	font-size: 1em;
}
h1, h2, h3, h4, h5{
	margin: 0;
}
/*
 * Header specs
 */
.header{
	box-shadow: 0 2px 3px grey;
	margin-bottom: 5px;
}
.header ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
.header a{
	text-decoration: none;
}
#greeting{
	text-shadow: 1px 1px 5px rgba(150, 150, 150, 1);
	color: #004bc4;
	padding-top: 5px;
	padding-left: 2px;
	padding-bottom: 10px;
}

/*
 * Regular Navbar
 */
.nav{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.nav_list{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding: 0;
	margin: 0;
}
/*.nav_item{
	box-sizing: border-box;
	display: inline-block;
	width: 200px;
	text-align: center;
	line-height: 1em;
	padding: 1em;
	text-transform: uppercase;
}*/
.dropdown{
	box-sizing: border-box;
	display: inline-block;
	width: 200px;
	text-align: center;
	line-height: 1em;
	text-transform: uppercase;
	border-top: 1px solid #E0E0E0;
	border-left: 1px solid #E0E0E0;
}
.dropdown_button{
	box-sizing: border-box;
	text-align: center;
	width: 100%;
	color: #616161;
	padding: 1em;
}
.dropdown_content{
	display: none;
	position: absolute;
	background-color: white;
	width: inherit;
	z-index: 1;
	box-shadow: 0 6px 12px 0 grey;
}
.dropdown_content p{
	padding: 1em;
	border-bottom: 1px solid #E0E0E0;
	margin: 0;
}
.dropdown:hover .dropdown_content{
	display: block;
}
.dropdown:hover .dropdown_button{
	background-color: lightgrey;
}
.nav a {
	text-decoration: none;
	color: #616161;
	padding-top: 1em;
	padding-bottom: 1em;
}
.nav a:hover{
	text-decoration: underline;
	color: #212121;
}
/*
 * Content
 */
main{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.bold{font-weight: bold;}
.italic{font-style: oblique;}
.bgimg{
	width: 100%;
	position: relative;
	background-position: center center;
	background-size: cover;
	height: 300px;
	background-color: #464646;
}
#ksea{background-image: url("https://seattlevirtualatc.org/img/ksea.png");}
#clouds{background-image: url("https://seattlevirtualatc.org/img/clouds.jpg");}
#atct{background-image: url("https://seattlevirtualatc.org/img/sea_atct.jpg");}
.imgtxt{
	font-size: 1.65em;
	color: white; /*may set different color in-line*/
	font-weight: bold;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	margin: 0;
	position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	padding: 5px;
}
.section{
	position: relative;
	width: 100%;
	min-height: 200px;
}
.sectiontxt{
	text-align: center;
	color: black;
	text-shadow: -1px 0 #bac9ff, 0 1px #bac9ff, 1px 0 #bac9ff, 0 -1px #bac9ff;
	padding-top: 20px;
	padding-bottom: 10px;
	padding-right: 5px;
	padding-left: 5px;
}
.section p{
	font-size: 1.05em;
	padding-right: 5px;
	padding-left: 5px;
}
.bullet:before{
    content:"• ";
}

.section ul{
	padding: 0;
}
.section li{
	padding-bottom: 5px;
	padding-top: 5px;
}
.footer{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: #d8f1ff;
}
.footer a{
	display: inline-block;
	padding: 5px;
	text-decoration: none;
}
.cpy{
	background-color: #c4ffcc;
	font-size: 1.3em;
	width: 100%;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 15px;
}
/*
 * small screens
 */
@media screen and (max-width: 649px){
	/*
	 * Menu icon
	 */
	#greeting{
		margin-right: 35px;
	}
	#menuButton{
		display: inline-block;
		position: absolute;
		right: 5px;
		top: 5px;
		cursor: pointer;
	}
	#bar1, #bar2, #bar3{
		width: 35px;
		height: 5px;
		background-color: #333;
		margin: 6px 0;
		transition: 0.4s;
	}
	.change #bar1{
		-webkit-transform: rotate(-45deg) translate(-9px, 6px);
		transform: rotate(-45deg) translate(-9px, 6px);
	}
	.change #bar2{
		opacity: 0;
	}
	.change #bar3{
		-webkit-transform: rotate(45deg) translate(-7px, -8px);
		transform: rotate(45deg) translate(-7px, -8px);
	}
	/*
	 * Navbar
	 */
	.nav{
		z-index: 10;
		background-color: #fff;
		width: 200px;
		position: absolute;
		/* This trasform moves the drawer off canvas. */
		-webkit-transform: translate(-300px, 0);
		transform: translate(-300px, 0);
		/* Optionally, we animate the drawer. */
		transition: transform 0.3s ease;
	}
	.nav.open{
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	.dropdown{
		display: list-item;
		border-bottom: 1px solid #E0E0E0;
		width: 100%;
		text-align: left;
	}
	.dropdown_button{
		text-align: left;
	}
	.dropdown_content{
		margin-left: 100px;
	}
	.nav_item{
		display: list-item;
		border-bottom: 1px solid #E0E0E0;
		border-top: 0;
		border-left: 0;
		border-right: 0;
		width: 100%;
		text-align: left;
	}
}
/*
 * Medium Screens
 */
@media screen and (min-width: 650px) and (max-width: 1199px){
	#atct{width: 50%; order: -20;}
	#news{width: 50%; order: -19;}
	#getstarted{width: 50%; order: 10;}
	#intro{width: 50%; order: 11;}
	#how{width: 100%; order: 12;}
	#clouds{order: 12;}
}
/*
 * Large Screens
 */
@media screen and (min-width: 1200px){
	#atct{width:50%; order: -20;}
	#news{width: 50%; order: -19;}
	#intro{width: 30%; order: 10;}
	#getstarted{width: 35%; order: 11;}
	#how{width: 35%; order: 12;}
	#clouds{order: 12;}
}