@media screen and (max-width: 1440px){
    .agile_form h2 {
	font-size: 12px;
	color: ee8226;
	font-family: Arial, Helvetica, sans-serif;
}
	
	.agile_form input[type=text], .agile_form input[type="email"] {
		width: 90%;}
	
}	
@media screen and (max-width: 1024px){
    h1.agile_head {
       font-size: 2.3em;}
	.wrap {
    width: 90%;}
	.agile_form input[type=text], .agile_form input[type="email"] {
    width: 90%;}
	
}
@media screen and (max-width: 991px){
	.wrap {
    width: 90%;}
	
	.w3layouts_main h3 {
    font-size: 0.9em;}
	
	.agile_form ul li label {
	font-size: 0.9em;
    padding: 0.7em 0em 0.5em 2.5em;
	margin: 0px 0 0px 1.2em;}
    	
}
@media screen and (max-width: 900px){
  
	.wrap {
    width: 90%;}
}
@media screen and (max-width: 800px){
	.wrap {
    width: 55%;}
	.agile_form input[type=text], .agile_form input[type="email"] {
    width: 41.4%;}
	.agile_form textarea {
    width: 93%;}
}
@media screen and (max-width: 768px){
	.wrap {
    width: 57%;}
}
@media screen and (max-width: 736px){
	.wrap {
    width: 59%;}
	
	.agile_form textarea {
    font-size: 0.8em;}
	
	.agile_form input[type=text], .agile_form input[type="email"] {
    font-size: 0.8em;}
	
	.agile_form input[type="submit"] {
    font-size: 0.8em;}
	
	h1.agile_head {
	font-size: 1.5em;
}
 }   
@media screen and (max-width: 667px){
	
	.wrap {
    width: 63%;}
}
@media screen and (max-width: 640px){
}
@media screen and (max-width: 600px){
}
@media screen and (max-width: 568px){
}
@media screen and (max-width: 480px){
	 
	 .agile_form textarea {
	width: 400px;
	margin-bottom:0;
	background-color: #CCC;
}
	
	.agile_form input[type=text], .agile_form input[type="email"] {
    width: 91%;
	margin: 1em 0 0;
	font-size: 0.7em;}

	.agile_form input[type="submit"] {
	margin-top: 1em;
	font-size: 0.8em;}
	
	.w3layouts_main h3,.agile_form h2{
     font-size: 0.9em;}
	 
	.agile_form ul li label {
     font-size: 0.9em;
	 padding: 0.7em 0em 0.5em 2.5em;}
	 
	 ul li .check {
     height: 10px;
	 width: 10px;
     top: 11px;
	 }
	 
	 .agile_form ul li .check::before {
	 height: 4px;
     width: 4px;
     top: 3px;
	 left: 3px;}

}
	
@media screen and (max-width: 480px){
	.w3layouts_main h3, .agile_form h2 {
    font-size: 0.9em;}
}
@media screen and (max-width: 320px){
    .wrap {
	 padding: 1.5em;
    margin: 0.5em auto;}
	
	h1.agile_head {
    font-size: 1.3em;
    padding-top: 1em;
	letter-spacing: 2px;}
	
	.w3layouts_main h3, .agile_form h2 {
	font-size: 0.5em;
}
	
	input[type=radio]:checked ~ label {
    font-size: 0.9em;}
	
	.agile_form ul li label {
     padding: 0.7em 0em 0.5em 2.5em;}
	
	ul li .check {
    top: 9px;}

    .agile_form textarea {
	height: 3em;
}
	
	.agile_form input[type=text], .agile_form input[type="email"] {
      font-size: 0.7em;}
	
	.agile_form input[type="submit"] {
    font-size: 0.7em;}
		
}
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-black w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:46px">
  <a href="#band" class="w3-bar-item w3-button w3-padding-large">BAND</a>
  <a href="#tour" class="w3-bar-item w3-button w3-padding-large">TOUR</a>
  <a href="#contact" class="w3-bar-item w3-button w3-padding-large">CONTACT</a>
  <a href="#" class="w3-bar-item w3-button w3-padding-large">MERCH</a>
</div>