/*mobile css */
/*mostly hides the hero image and changes the card flex from row to column */
@media only screen and (max-width: 1456px) {
	#about{
		margin-top: 160px;
	}
	#cards_container{
		flex-direction: column;
	}
	
	.resource-card{
		height: 240px;
		width: 430px;
		background-color: #FFEDD8;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 40px;
	}
	#hero{
		display: none;
	}
	#hero_image{
		display: none;
		transition: all .3s ease 0s;
	}
	#nav_bar{
		min-width: 928px;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		margin-right: auto;
		margin-left: auto;
	} 
	#mobile_title{
		display: block;
	}
	#mobile_title h3{
		font-weight: normal;
		font-size: 48px;
		color: #D9D9D9;
		text-transform: uppercase;
	}

}

/*mostly adjusts the navbar to a mobile-friendly vertical layout*/
@media only screen and (max-width: 1077px){
	#about{
		margin-top: 0;
	}
	.card-header h3{
		margin-top: auto;
		margin-bottom: auto;
		font-size: 32px;
	}
	#home{
		width: 100%;
	}
	#wrapper{
		margin-top: 0px;
		max-width: 100%;
	}
	#nav_bar{
		min-width: auto;
		position: fixed;
		top: 0;
		margin-right: auto;
		margin-left: auto;
	} 
	#burger_bar{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 16px;
		width: 95px;
	}
	#nav_separator{
		padding-top: 20px;
	}
	nav{
		flex-direction: column;
		align-items: center;
		margin-left: 50;
		margin-left: 0;
	}
	nav a{
		font-size: 36px;
	}
	body p{
		font-size: 24px;
	}
	h3{
		font-size: 36px;
	}
	li{
		font-size: 20px;
		line-height: 36px;
		font-weight: bold;
	}

	.embed-video iframe{
		width: 380px;
		height: 260px;
	}
	img{
		height: 260px;
	}
	fieldset h3{
		font-size: 24px;
	}
	.page-section{
		margin-top: 280px;
	}
	#serve_equip{
		padding-top: 300px;
	}
	.resource-card{
		height: 200px;
		width: 380px;
		background-color: #FFEDD8;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 40px;
	}
	#mobile_title{
		display: inline;
	}
	#mobile_title h3{
		margin-top: 315px;
		font-weight: normal;
		z-index: 0;
		font-size: 48px;
		color: #D9D9D9;
		padding-top: 0;
		text-transform: uppercase;
	}
	.page-section{
		margin-top: 0;
		padding-top: 140px;
	}
	footer p{
		font-size: 16px;
		padding-top: 40px;
	}

}

/*mostly hides the navbar if the window height is too short */
@media only screen and (max-height: 420px){
	#mobile_title h3{
		margin-top: 0px;
	}
	#nav_bar{
		display: none;
	}
}