/* Total Fencing Solutions responsive stylesheet v1 Oct 2015 */


/* Table of Content
==================================================
	
	#1.1040
	#2.740
	#3.640
	#4.480
	#5.320
	*/
	

/* 1. 1040---------------------------------------------------------------------------------------------------------*/	
@media screen  and (max-width:1040px) {
header
{
}

.wwa article p
{
	padding:0;
}
.wwa article img
{
	margin-top:40px;
	width:30%;
}
.wwd article img
{
	margin:10px 5px;
	width:23%;
	}
footer.pageFooter  div.container
{
	background:none;
	}
footer.pageFooter section div
{
	width:40%;
}
footer.pageFooter section div.contact
{
	border-right:none;
}
footer.pageFooter  div.container
{
	margin:0 auto;
	width:98%;
}
form label
{
	float: left;
	width:100%;
	text-align:left;
		}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea
 {
	width:100%;
	}
select
{
	width:102%;
	}
.pg main ul
{
	margin-left:3%;
	width:96%;
	}
}
/* 2. 740---------------------------------------------------------------------------------------------------------*/	
	@media screen  and (max-width:740px) {
header
{
	}
header div.logo
{
	 width:40%;
	}
header div.logo p 
{
	display:none;
}
header div.phone
{
	font-size:1em;
	width:35%;
	padding-right:43px;
 	right:0;
 	top:48px;
 	background: url(../i/phone_mobile_740.gif) no-repeat  right -1px; 
}
header div.phone b
{
	 font-size:80%;
	 margin:0;
	}
nav
{
	height:30px;
}
nav a
{
	font-size:1em;
}
main
{
	padding-top: 30px;
}
p.intro
{
	margin:5px 0 15px;
}
article
{
	float:none;
	width:100%;
	margin:10px auto 20px ;
	height:180px;
}
article p
{
	padding:5px 0 5px 6px;
	margin-top:5px;
	height:105px;
	width:77%;
}
article img 
{
	margin-top:10px;
	width:22%;
}
.wwd article img
{
	margin:10px 4px;
	width:23%;
	}
.sec article h1,
.sec article h2
{
	width:100%;
	float:none;
	}
.wwa article p
{
	float:none;
	width:100%;
}
.wwa article img
{
	float:right;
	width:40%;
	margin-top:0;
	margin-left:3px;
}
.content_wrap
{
	padding-bottom:100px;
}
footer.pageFooter div a
{
	font-size:0.9em;
}
footer.pageFooter p
{
	margin-top:40px ;
	font-size:0.8em;
	}
.contact aside,
form
{
	float:none;
	width:90%;
}
p.sent
{
	width:90%;
	float:none;
}
.pg main ul
{
	margin-left:10%;
	width:89%;
	}
}


/* 3. 640-------------------------------------------------------*/
@media  screen and (max-width:640px) {
header
{
		}
header div.logo
{
	top:35px; 
	margin-bottom:35px;
}
header div.phone
{
	font-size:1em;
	width:30%;
	padding-right:40px;
 	right:1%;
 	top:8px;
 	background-position:  right 18px;
}
header div.phone b
{
	 display:none;
	}
nav
{
	height:20px;
}
nav ul
{
	display:none;
}
.mobile_nav_link,
#mobile_nav
{
	display:block;
}
.mobile_nav_link
{
	background:  url(../i/mobile_nav_icon.png) no-repeat 50%; 
	position:absolute;
	right:1%;
	height:12px;
	width:40px;
}

article p
{
	padding:0 ;
	height:105px;
	width:75%;
}
.wwd article p
{
	width:98%;
}
article img 
{
	width:22%;
}
.content_wrap
{
	padding-bottom:50px;
}
footer.pageFooter section div
{
	width:96%;
	float:none; 
	border-right:none;
	padding:0 2% 10px;
	height:200px;
	}
footer.pageFooter section div.contact
{
	margin-left:0;
	border-top:1px solid #fff;
	padding-top:20px;
}
footer.pageFooter section div.quote
{
	padding-bottom:20px;
}
footer.pageFooter  ul li
{
	padding-left: 54px ;
	 }
footer.pageFooter div a
{
	font-size:1.1em;
}
.mobile_nav_wrap
{
	background:#333;
	padding:50px 0 340px;
	border-top:red 1px solid;
}
.mobile_nav
{
	background:#333;
	color:white;
}
.mobile_nav li
{
	border-top:1px dotted #222;
}
.mobile_nav li:last-child
{
	border-bottom:1px dotted #222;
}
.mobile_nav a
{
	display:block;
	padding:20px 0 20px 20px;
}
.mobile_top_link
{
	background:  url(../i/mobile_top_icon.png) no-repeat 97% 50%;
	height:30px;
}
.pg main ul
{
	margin-left:0;
	width:100%;
	}
.pg main ul li
{
	width:145px;
	margin:7px;
}
}

/* 4. 480------------------------------------------------- */
@media  screen and (max-width:480px) {
header
{
}
header div.logo
{
	top:30px; 
	margin-bottom:35px;
	width:50%;
	}
header div.phone
{
	font-size:0.9em;
	height:26px;
	padding-top:14px;
	width:30%;
	padding-right:28px;
 	top:25px;
 	background: url(../i/phone_mobile_480.gif) no-repeat   right 50%; 
}
header div.phone span
{
	 display:none;
	}
main
{
	padding-top:20px;
}
article
{
	height:163px;
}
.wwd article img
{
	width:40%;	
	margin:5px 5px 5px 20px;
}
article p
{
	height:98px;
	width:77%;
	font-size:0.8em;
}
.sec article h1
{
	font-size:1.7em;	
}
.sec article h2
{
	font-size:1.4em;
}
.wwa article img
{
	width:55%;
	}
footer.pageFooter section div.contact
{
	padding-top:10px;
}
footer.pageFooter section div.quote
{
	padding-bottom:50px;
}
footer.pageFooter  ul li
{
	padding-left: 48px;
	 }
footer.pageFooter div a
{
	font-size:0.9em;
}
.mobile_nav_wrap
{
	padding:50px 0 100px;
	}
dt
{
	width:20%;
}
dd
{
	width:100%;
	}
.pg main ul li
{
	width:130px;
	margin:7px;
}

}
	

	
/* 5. 320---------------------------------------------------------------------------------------------*/
@media  screen and (max-width:320px)
 {
header
{	
}
footer.pageFooter section div.contact
{
	margin-left:-1%;
}
dt
{
	width:20%;
}
dd
{
	width:100%;
	}
footer.pageFooter  ul li
{
	padding-left:43px;
	
}
.pg main ul li
{
	width:125px;
	margin:5px;
}
	 }

