/* Conditional Statements */
.mobile-only, .small-only{display: none}
@media only screen and (max-width: 1200px){
	div.threecoll img,div.threecolmid img,div.threecolr img{width:98% !important;height:auto!important}
	div.threecoll,div.threecolmid,div.threecolr{width:50%}
}
/* Mid sized screen:  or ((max-device-width: 990px) and (orientation: landscape))*/
@media only screen and (max-width: 996px){
	div.head, div.wrapper, div.footer, div.container, div.downloads, div.twocoll, div.twocolr{width: 100%}	
	div.topnav{
		width: calc(100% - 20px);
		padding: 10px;
		text-align: right;
	}
	div.footer{padding:0}
	div.menu{margin: 6px 0 0 6px}
	div.containertwo, div.containerone{width: calc(100% - 243px)}
	#recaptcha_widget_div{clear: both}
	div.twocolr{margin-top:20px}
	div.twocolr .social-media{float:none}
	div.twocolr iframe{width:95%}
	input.contact, textarea.contact{width: calc(100% - 200px)}
}

@media only screen and (max-width: 930px) and (min-width: 20px)
{
	div.metal-logo img, div.logo img{max-width: 100%}
	div.social-media{top:100px}
	div.tagline{width:55%}
}

@media only screen and (max-width: 800px) and (min-width: 20px){
	div.topnav{
		background-image: url(/images/design/background2015.png);
		background-position: -175px center;
	}
	div.container img{max-width: 100%!important}
}

/* Screen Size Below 770px: - Move to Mobile Menu */
@media all and (max-width: 770px) and (min-width: 20px){
	/* Top Menu */
  	div.topnav{
  		height: inherit;
		min-height: 20px;
  	}
  	div.topnav ul{
  		width: 100%;
		padding: 7px 0;
		z-index: 100;
  	}
  	div.topnav ul li{
		display: none;
		text-align: left;
		clear:both;
		font-size: 1.2em;
		padding: 4px 0;
	}
	.mobile-only, div.topnav ul li.mobile-only{display:inherit}
  	div.topnav ul a{
  		border: 0 solid #000;
		padding-left: 0;
  	}
  	div.topnav ul a:hover{background-color: inherit}
  	/*a.menu{display: none}*/
  	.menuicon{
  		display: block;
		background-image: url(/images/design/menu-icon.png);
		background-repeat: no-repeat;
		background-size: 100% auto;
		width: 30px;
		height: 25px;
		margin: 0;
		float: left;
  	}	
	.divider{display: none}
	div.contact-details, div.social-media{display:none}
}

/* Screen Size Below 700px: */
@media all and (max-width: 700px) and (min-width: 20px){
	div.menu{
		width:calc(100% - 12px);
		clear: both;
	}
	div.containertwo, div.containerone{    
		padding: 0 10px;
    	width: calc(100% - 20px);
		float: none;
		font-size: 1.2em;
	}
	div.address{
		margin-bottom: 10px;
    	width: calc(60% - 30px);
	}
	div.address span{
		font-size: 1em !important;
		word-wrap: break-word;
	}
	div.twitter{
		width: calc(40% - 20px);
		padding: 10px;
		margin: 0;
	}
	div.footer{
		font-size:1em;
		margin: 0;
		padding: 20px 5px;
		width: calc(100% - 10px);
		background-color: #bbb;
	}
	div.head{min-height: 150px}
	div.metal-logo, div.logo{
		/*width: calc(50% - 40px);*/
		padding: 10px 10px 0;
	}
	div.tagline{width: 400px }
	a.babymenu{font-size: 1em}
	.form{max-width:100%}
	.form label, .form input.contact, .form textarea.contact, .form select.contact, .containertwo select{
		font-size: 1em;
		width: 95%;
		clear: left;
	}
}

@media all and (max-width: 500px) and (min-width: 20px){
	div.address, div.twitter{width: calc(100% - 30px)}
	div.metal-logo, div.logo{
		width: calc(50% - 20px);
		text-align: center;
	}
	div.tagline{width: 100% }
}

@media all and (max-width: 450px) and (min-width: 20px){
	div.tagline{font-size:25px}
	div.head{min-height:155px}	
	div.container img{
		width:95% !important;
		height:auto !important;
		margin:5px 0 !important;
		float: none !important;
		clear:both;
	}
	div.container .meettheteam img, div.container .downloads img{
		width: 45% !important;
		margin: 5px !important;
		float: left !important;
		clear:inherit;
	}
	.form iframe {
    	width: 84% !important;
		overflow:hidden;
	}
	div.container .downloads p{ clear:both}
}
@media all and (max-width: 400px) and (min-width: 20px){
	div.head{min-height:135px}	
}

@media all and (max-width: 370px) and (min-width: 20px){
	p{ word-wrap: break-word}
	div.head{min-height:125px}	
}