@media screen and (max-width: 1680px){
	.container {
		width: 100%;
		height: auto;
	}
	
	
	body{
		width: 100%;
			}
	
	#bg{
		width: 100%;
		height: 200%;
		}
	
	#bg img{
		width: 100%;
		height: 200%;
	}
	
	header{
		width: 100%;
	}
	
	h1{
		width: 100%;
	}
	
	p{
		width: 90%;
		margin-right: 5%;
		padding: 5%;
			  }
	  
	h2{
		width: 100%;
	} 
	
	h3{
		width: 100%;
	} 
	
	/* Add media queries for smaller screens */
@media screen and (max-width:720px) {
    .weekdays li, .days li {width: 13.1%;}
}

@media screen and (max-width: 420px) {
    .weekdays li, .days li {width: 12.5%;}
    .days li .active {padding: 2px;}
}

@media screen and (max-width: 290px) {
    .weekdays li, .days li {width: 12.2%;}
}
	
	.menu-vertical {
		width: 80%;
	}
	
	#menu{
		width: 80%;	
	}
	nav{
		float: right;
		position: relative;
		width: 100%;
		height: auto;
		margin-right: 15%;
		text-align: right;
	}

	
	#boom {
		width: 90%;
		margin: 5%;
		}
	
	#map{
		width: 100%;
	}
	
	#feature {
		width: 80%;
	}
	
	footer {
		width: 100%;
	}
	

	
	#form {
		width: 100%;
	}
} 		

@media screen and (max-width: 1024px){
	.container {
		width: 100%;
		height: auto;
	}
	
	
	body{
		width: 100%;
			}
	
	#bg{
		width: 100%;
		height: 100%;
		}
	
	#bg img{
		width: 100%;
		height: 100%;
	}
	
	header{
		width: 100%;
	}
	
	h1{
		width: 100%;
	}
	
	p{
		width: 90%;
		margin-right: 5%;
		padding: 5%;
			  }
	  
	h2{
		width: 100%;
	} 
	
	h3{
		width: 100%;
	} 
	
	.menu-vertical {
		width: 80%;
	}
	
	#menu{
		width: 80%;	
	}
	nav{
		float: right;
		position: relative;
		width: 100%;
		height: auto;
		margin-right: 15%;
		text-align: right;
	}
				
	#sidebar{
		width: 30%;
	}
	
	#quote{
		width: 70%;
	}
		
	#daneel{
		width: 90%;
		margin: 5%;
	}
	
		
	#ashley{
		width: 90%;
		margin: 5%;
		}
	
	
	#boom {
		width: 90%;
		margin: 5%;
		}
	
	#map{
		width: 100%;
	}
	
	#feature {
		width: 80%;
	}
	
	footer {
		width: 100%;
	}
	
	#audio {
		width: 80%;
	}
	
	#form {
		width: 100%;
	}
}

@media screen and (max-width: 768px){
	.container {
		width: 100%;
		height: auto;
	}
	
	
	body{
		width: 100%;
			}
	
	#bg{
		width: 100%;
		height: 100%;
		}
	
	#bg img{
		width: 100%;
		height: 100%;
	}
	
	header{
		width: 100%;
	}
	
	h1{
		width: 100%;
	}
	
	p{
		width: 90%;
		margin-right: 5%;
		padding: 5%;
			  }
	  
	h2{
		width: 100%;
	} 
	
	h3{
		width: 100%;
	} 
	
	.menu-vertical {
		width: 80%;
	}
	
	#menu{
		width: 80%;	
	}
	nav{
		float: right;
		position: relative;
		width: 100%;
		height: auto;
		margin-right: 15%;
		text-align: right;
	}
				
	#sidebar{
		width: 30%;
	}
	
	#quote{
		width: 70%;
	}
		
	#daneel{
		width: 90%;
		margin: 5%;
	}
	
		
	#ashley{
		width: 90%;
		margin: 5%;
		}
	
	
	#boom {
		width: 90%;
		margin: 5%;
		}
	
	#map{
		width: 100%;
	}
	
	#feature {
		width: 80%;
	}
	
	footer {
		width: 100%;
	}
	
	#audio {
		width: 80%;
	}
	
	#form {
		width: 100%;
	}
}

@media screen and (max-width: 480px) {
	.container {
		width: 100%;
		height: auto;
	}
	
	
	body{
		width: 100%;
			}
	
	#bg{
		width: 100%;
		height: 100%;
		}
	
	#bg img{
		width: 100%;
		height: 100%;
	}
	
	header{
		width: 100%;
	}
	
	h1{
		width: 100%;
	}
	
	p{
		width: 90%;
		margin-right: 5%;
		padding: 5%;
			  }
	  
	h2{
		width: 100%;
	} 
	
	h3{
		width: 100%;
	} 
	
	.menu-vertical {
		width: 80%;
	}
	
	#menu{
		width: 80%;	
	}
	nav{
		float: right;
		position: relative;
		width: 100%;
		height: auto;
		margin-right: 15%;
		text-align: right;
	}
				
	#sidebar{
		width: 30%;
	}
	
	#quote{
		width: 70%;
	}
		
	#daneel{
		width: 90%;
		margin: 5%;
	}
	
		
	#ashley{
		width: 90%;
		margin: 5%;
		}
	
	
	#boom {
		width: 90%;
		margin: 5%;
		}
	
	#map{
		width: 100%;
	}
	
	#feature {
		width: 80%;
	}
	
	footer {
		width: 100%;
	}
	
	#audio {
		width: 80%;
	}
	
	#form {
		width: 100%;
	}
}

@media screen and (max-width: 320px){
	.container {
		width: 100%;
		height: auto;
	}
	
	
	body{
		width: 100%;
			}
	
	#bg{
		width: 100%;
		height: 100%;
		}
	
	#bg img{
		width: 100%;
		height: 100%;
	}
	
	header{
		width: 100%;
	}
	
	h1{
		width: 100%;
	}
	
	p{
		width: 90%;
		margin-right: 5%;
		padding: 5%;
			  }
	  
	h2{
		width: 100%;
	} 
	
	h3{
		width: 100%;
	} 
	
	.menu-vertical {
		width: 80%;
	}
	
	#menu{
		width: 80%;	
	}
	nav{
		float: right;
		position: relative;
		width: 100%;
		height: auto;
		margin-right: 15%;
		text-align: right;
	}
				
	#sidebar{
		width: 30%;
	}
	
	#quote{
		width: 70%;
	}
		
	#daneel{
		width: 90%;
		margin: 5%;
	}
	
		
	#ashley{
		width: 90%;
		margin: 5%;
		}
	
	
	#boom {
		width: 90%;
		margin: 5%;
		}
	
	#map{
		width: 100%;
	}
	
	#feature {
		width: 80%;
	}
	
	footer {
		width: 100%;
	}
	
	#audio {
		width: 80%;
	}
	
	#form {
		width: 100%;
	}
}