/*
The media.css file should use the same formatting as the main style.css file

Media queries should be treated the same as JavaScript in terms of formatting
*/
@media (max-width: 1199px) {
	.footer_locations li {font-size: 19px;}
}

@media (max-width: 992px) {
	.container{
		width:100%;
	}
	.content_image{
		margin-bottom:10px;
	}
	.content_image_narrow {
	    padding-top: 99%;
	}
	.footer_locations li {
	    margin: 0 1rem;
	    font-size: 16px;
	}
	.hours{
		font-size:16px;
	}
	.header_nav li a{
		padding:3rem 1rem;
	}
	.header_cart{
		margin-left:1rem;
	}

}

@media (max-width: 850px){
	.footer_locations li {font-size: 14px;}
}

@media (max-width: 767px){
	.footer_locations li {font-size: 22px;}
}

@media (max-width: 767px) {
	.container{
		height:100%;
	}
	.header_nav{
		display:none;
		position: absolute;
		z-index:1;
		background:rgba(0,9,141,0.8);
		width: 60%;
		right: 0;
		text-align: center;
		top: -7rem;
		height: 110vh;
    	padding: 9rem 0;
	}
	.header_nav li{
		display:block;
	}
	.header_nav li a{
		color:white;
		padding:1rem 2rem;
	}
	.header_menu{
		display: inline-block;
		float:right;
		text-transform: uppercase;
		color: #00098d;
		font-size: 26px;
		top: 0;
		margin-top: -6rem;
		position:relative;
		z-index:2;
	}
	.header_cart{
		display:none;
		margin-left:0;
	}
	.hero{
		height:400px;
	}
	.hero_carousel img{
		height:100%;
		width:auto;
	}
	.footer_location_image img{
		position:absolute;
		width:100%;
		height:auto;
		top:0;
		left:0;
	}
	.shop_link{
		margin-bottom:2rem;
	}
}

@media (max-width: 600px) {
	.header_logo{
		height:70px;
	}
	.header_menu{
		margin-top:-5rem;
	}
	.footer h1{
		font-size:36px;
	}
	.hours_labels{
		font-size:16px;
	}
	.hours{
		font-size:14px;
		width:53%;
	}
	.footer_locations li{
		font-size:16px;
	}
	.content h1{
		font-size:46px;
	}
	#mule_byline {
		float:none !important;
	}
}


@media (max-width: 445px){
	.footer_locations li {font-size: 13px;}
}