@charset "utf-8";
html, body
{
	width:100%;
}

#phoneNav
{
	display:none;
}
.swipeTablet
{
	display: none;
}
.swipeTablet2
{
	display: none;
}
#myElement {
	display:none;
	background: white;
	font: Helvetica, Arial, sans-serif;
}
.main
{
	max-width: 920px;
    margin: auto;
    margin-top: 52px;
}
p
{
	line-height: 17px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #666;
}
.slides
{
	display:none;
}
#first
{
	display:block;
}
h2 
{
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
}
.titleSmall
{
	display:none;
}

.pods
{
	margin:auto;
	margin-bottom:22px;
	margin-left: 15%;
}
.pods img
{
	width: 97%;
    margin: auto;
    display: block;
    margin-top: 4px;
	margin-bottom: 4px;
}
.pods p
{
	width: 97%;
    margin: auto;
    display: block;
    font-size: 13px;
	margin-bottom:4px;
}
.pods a
{
	color:#01a0c6 !important;
	padding-left:4px;
	font-weight: 500;
	font-size: 16px;
}
.box
{
	width:100%;
	margin:0px 3px 10px 3px;
	min-height: 104px;
	background: #ececec;
	padding: 5px;
	height: 100%;
}
.pods .w3-col.s3 
{
    padding: 4px;
	height: 200px;
}
.carousel
{
	display:none;
}
.indexheadline 
{
	font-size: 26px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	color: #000000;
}
.ifenceblue, a.ifenceblue 
{
	color: #01a0c6
}
a.ifenceblue:hover, a.ifence18blue:hover
{
	color: #FF6633;
}
.ifencebluebold 
{
	color: #01a0c6; font-weight: bold;
}
.mySlides 
{
	display:none;
}
#first
{
	display:block;
}
.slideIndex
{
	display:block;
	max-width:920px;
	margin:auto;
}
.slideIndex img
{
	display:block;
	width:100%;
}

.slideIndex2
{
	display:none;
	max-width:920px;
	margin:auto;
}
.slideIndex2 img
{
	display:none;
	width:100%;
}
#mobileNav1
{
	background-color: #f63;
    max-width: 100%;
	color: white;
	height:50px;
	border-radius:4px;
	overflow: visible;
	z-index: 2;
}


#mobileNav2
{
	display:none;
	color: white;
	border-radius:4px;
	z-index: 1002;
}
#navLinks
{
	max-width: 920px;
    display: block;
    margin: 0px auto;
	font-size: 11px;
}
#navLinks a
{
	padding: 15px 8px;
}	
#demo a 
{
    padding: 12px 12px;
}
#titleBlock
{
	max-width:920px;
	margin:auto;
}
#titleBlock2
{
	display:none;
}
#titleBlockSmall
{
	display:none;
}
#titleLeft
{
    padding: 10px 0px 10px 10px;
    display: inline-block;
    width: 30%;
}
#titleRight
{
	padding-right: 0px;
	display: inline-block;
	width: 68%;
	vertical-align: bottom;
	padding-bottom: 10px;
}
#c1
{
	padding-top: 21px;
}
#c2
{
	padding-top: 21px;
}
#c3
{
	padding-top: 21px;
}
#c4
{
	padding-top: 21px;
}
#c5
{
	padding-top: 21px;
}
#c6
{
	padding-top:9px;
}
#main
{
	max-width:920px;
}
.title
{
	max-width:920px;
	margin:auto;
}
.title p
{
	padding: 14px;
    padding-left: 28px;
    padding-right: 28px;
}
.round_button
{
	display:table-cell;
	vertical-align:middle;
	background-color:#00b1d2;
	border-radius:60px;
	text-align:center;
	height:60px;
	width:60px;
	color:#fff !important;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10pt;
	transition:1s all;
}

.round_button.orange 
{
	background-color:#ff6633;
}

.break_up
{
	display:table-cell;
	width:7px;	
}
.round_button:hover
{
	background-color:#67c6dd;	
}

.valign 
{
	display: table-cell;
	vertical-align: middle;
}

a:visited 
{
    text-decoration: none;
    color: #333333;
    line-height: inherit;
}
a:link 
{
    text-decoration: none;
    color: #333333;
    line-height: inherit;
}

.orangeBG 
{
    background-color: #ff6633;
    transition: 1s all;
}
#testimonial
{
	max-width:600px;
	min-height:186px;
}
.footer
{
	width:100%;
	background-color:#f2f2f2;
	bottom: 0px;
	padding:16px;
	font-size:11px;
}
.footer img 
{
    width: 160px;
    padding-bottom: 8px;
}
.footer div
{
	padding:4px;
}
.quality
{
	margin:auto;
	margin-bottom:16px;
	padding-top: 16px;
}
.quality img
{
	margin-top: 14px;
	max-width: 140px;
    width: 15%;
    margin-right: 15px;
}
.quality i
{
	font-size:38px;
	margin-right: 23px;
	margin-top:8px;
	color:#CAC8C8
}
#tabPills
{
	margin-top: 20px;
	margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
}
#tabPills img
{
	margin-bottom:7px;
}
#tabPills2
{
	margin-top: 20px;
	margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
}
#tabPills2 ul
{
	min-width: 320px;
}
#tabPills2 li
{
	width: 15%;
    padding: 0px;
	max-width: 82px;
}
#tabPills2 a
{
	padding-left: 3px;
    padding-right: 4px;
    padding-top: 4.3px;
    padding-bottom: 3px;
    margin: 0px;
    font-size: 12.33px;
    text-align: center;
}
#tabPills2 img
{
	margin-bottom: 7px;
    margin-top: 9px;
    width: 100%;
    max-width: 220px;
}
#poolPics
{
	margin:auto;
}
#poolPics img
{
	margin: auto;
    margin-bottom: 5px;
    display: block;
    width: 100%;
    max-width: 420px;
}
#poolPics img.listimg {
    width: auto;
    margin: 5px 5px 0 0; 
    display: inline;
    float: right;
	width: 90px;
}
#poolPics .ifenceblue {
    font-size: 13px;
    padding-top: 5px;
    float: left;
    display: inline-block;
}
#residentPics
{
	margin:auto;
}
#residentPics img
{
	margin: auto;
    display: block;
	max-width: 420px;
    width: 100%;
}
#drivewayPics
{
	margin:auto;
}
#drivewayPics img
{
	margin: auto;
    margin-bottom: 5px;
    display: block;
    width: 100%;
    max-width: 420px;
}
#railingPics
{
	margin:auto;
}
#railingPics img
{
	margin: auto;
    display: block;
    width: 100%;
    max-width: 320px;
}
#betterPics
{
	margin:auto;
}
#betterPics img
{
	margin: auto;
    margin-bottom: 5px;
    display: block;
    width: 100%;
    max-width: 320px;
}
#videoPics
{
	margin: auto;
}
#videoPics img
{
	margin: auto;
    margin-bottom: 5px;
    display: block;
    width: 100%;
    max-width: 320px;
}
.ifence9 p
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
	padding-left: 25px;
    padding-right: 25px;
}
.pageTitle h1
{
	font-size: 18px;
}
.pageTitle 
{
    margin-left: 16px;
	margin-right: 16px;
}
#pmbLarge
{
	display: block;
}
#pmbSmall
{
	display: none;
}
.mobile_header_1 
{ 
	display: inline-block; 
	float: right; 
	width: calc(100% - 75px);
	text-align: center; 
	padding-right: 75px;
	box-sizing: border-box;
}
.fen_gate_mobile 
{
    width: 44%;
    display: inline-block;
	margin-bottom: 20px;
}
.fen_gate_img_mobile 
{
    width: 100%;
}
.freequotestep .fen_gate_mobile * 
{
	margin-top: 5px;
}
.freequotestep .DGopener 
{
	margin-top: 5px;
}
.freequotestep .fg_mobile_quan 
{
	padding: 0px 0px 0px 0px;
}
.submit_mobile 
{
	background-color: #f63;
	width: 100%;
	max-width: 300px;
}
#contactUs a 
{
	font-weight: bold;
	padding: 5px 10px;
	border-radius: 5px;
	width: 101.66px;
	max-width: 31.39%;
	display: inline-block;
	color: #FFF;
	text-align: center;
	vertical-align: top;
}
#contactUs 
{
    margin-top: 5px;
	font-size: 14px;
	width: 100%;
	position: relative;
	margin-bottom: 2px; 
	text-align: left; 
}
#commercialPics
{ 
	margin: auto; 
}
#commercialPics img.listimg 
{   
	width: auto;  
	margin: 5px 5px 0 0;   
	display: inline;  
	float: right;
	width: 90px;	
	height: auto;
}
#commercialPics .ifenceblue 
{    
	font-size: 13px;  
	padding-top: 5px;  
	float: left; 
	display: inline-block; 
}
#commercialPics .ifenceorange 
{
    font-size: 13px;
    padding-top: 5px;
    float: left;
    display: inline-block;
}
#commercialPics img
{
	margin: auto;
    display: block;
	max-width: 420px;
    width: 100%;
}
#commercialPics .ifencebluebold 
{
    font-size: 13px;
	font-weight: bold;
    padding-top: 5px;
    float: left;
    display: inline-block;
}
#residentPics img.listimg 
{    
	width: auto; 
	margin: 5px 5px 0 0;   
	display: inline;   
	float: right;	
	width: 90px;
	height: auto;
}
#residentPics .ifenceblue 
{    
	font-size: 13px; 
	padding-top: 5px;
    float: left;   
	display: inline-block;
}
#titleRight .round_button
{
	font-size: 9pt;
}
#tabPills2 .quality img {
    margin-top: 14px;
    max-width: 140px;
    width: 15%;
    margin-right: 15px;
}
#gradespecsmain {
	width: 90%;
	margin: 0 auto;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333; 
}
#gradespecsmain .row div {
	padding-right: 5px;
	padding-left: 5px;

}
#gradespecsmain .row div:first-child {
	padding-left: 0px;

}
#gradespecsmain .r0 {
	background-color: #4ebdd7;
	text-align: center;
}
#gradespecsmain .r2 {
	padding-left: 5px;
}
#gradespecsmain .r2 div div {
	font-weight: bold;
	padding-left: 15px;
}
#gradespecsmain .r2 div ul {
	margin-top: 10px;
}
#gradespecsmain .r3 div {
	text-align: center;
    margin-top: 10px;
}
#mobile_btns {
	display: none;
}
#topbar {
	height: 50px;
	border-radius: 4px;
	background: #fff;
}
#hamburger {
	font-size: 30px;
	color: black;
	margin-top: 12px;
	margin-right: 6px;
}
#toplogo {
	width: auto;
	height: 40px;
	margin: 5px 0 5px 5px;
}
#fenceReviews .w3-third img {
	width: 100%;
}
@media screen and (max-width: 1000px) 
{
	#residentPics img.listimg 
	{	
		display: inline-block;
	}
	#poolPics img.listimg 
	{
		display: inline-block;
	}
	#commercialPics img.listimg 
	{	
		display: inline-block; 
	} 
}
@media screen and (max-width: 920px) 
{
	#mobileNav1
	{
		display: none;
	}
	#mobileNav2
	{	
		display: block;
		color: white;
	}
	#titleRight {
		
	}
	.slideIndex
	{
		display: none;
		max-width: 920px;
		margin: auto;
	}
	.slideIndex img
	{
		display: none;
		width: 100%;
	}
	.slideIndex2
	{
		display: block;
		max-width: 920px;
		margin: auto;
	}
	.slideIndex2 img
	{
		display: block;
		width: 100%;
	}
	body, html 
	{
		width: 100%;
		background-color: white; 
		background-image: none;
		
	}
	html 
	{
		overflow: visible;
	}

	.sideNavi
	{
		color: #8e8e8e;
		background-color: #fff;
		display: none;
		right: 0;
		width: 75%;
	}
	#myElement {
		display: block;
		background: white;
		font: Helvetica, Arial, sans-serif;
	}
	#testimonial
	{
		max-width: 600px;
		min-height: 210px;
	}
}
@media screen and (max-width: 720px) 
{
	#toplogo {
		width: auto;
		height: 40px;
		margin: 5px 0 50px 5px;
	}
	#hamburger {
		margin-top: 30px;
	}
	#topbar {
		height: 80px;
	}
	#mobile_btns {
		margin: 0;
		display: inline-block;
	}
	#phoneNav
	{
		display: block;
	}
	.title
	{
		display: none;
	}
	.titleSmall
	{
		display: block;
	}
	.titleSmall h1
	{
		font-size: 34px;
		font-weight: bold;
		text-align: center;
	}
	p
	{
		padding-left: 20px;
		padding-right: 20px;
		line-height: 18px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
		color: #666;
		margin-bottom: 16px;
	}
	.indexheadline 
	{
		font-size: 20px;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		color: #000000;
	}
	.carousel a 
	{
		font-size: 18px;
	}
	.carousel 
	{	
		display: block;
		overflow: hidden;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
	.carousel .w3-half
	{
		padding: 0px 15px 0px 15px;
	}
	#rightArrow
	{
		font-size: 48px;
		color: #bbbbbb;
		right: 0px;
		top: 38%;
		position: absolute;
	}
	#leftArrow
	{
		font-size: 48px;
		color: #bbbbbb;
		left: 0px;
		top: 38%;
		position: absolute;
	}
	.pane-container 
	{	
		height: 100%;
		width: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
	}

	.pane-container.transition 
	{
		transition: left .4s ease-in-out;
	}

	.pane 
	{
		float: left;
		height: 100%;
		width: 100%;
	}

	.carousel li.pane:nth-child(1) 
	{
	}

	.carousel li.pane:nth-child(2) 
	{
	}

	.carousel li.pane:nth-child(3)
	{
	}

	.carousel li.pane:nth-child(4) 
	{
	}
	#titleBlock
	{
		display: none;
	}
	#titleBlock2
	{
		
		display: none;
	}
	#titleBlockSmall
	{
		display: block;
		padding: 3px;
	}
	#titleBlockSmall button
	{
		margin: 0;
		background: none;
		color: white;
	}
	#titleBlockSmall button:hover
	{
		opacity: .82;
		color: white;
	}
	#titleBlockSmall img
	{
		width: 42px;
	}
	#c1
	{
		padding-top: 0px;
	}
	#c2
	{
		padding-top: 0px;
	}
	#c3
	{
		padding-top: 0px;
	}
	#c4
	{
		padding-top: 0px;
	}
	.pods
	{
		display: none;
	}

	.boxsmall
	{
		margin: auto;
		width: 100%;
		max-width: 375px;
		min-height: 109px;
		background: #ececec;
		margin-bottom: 18px;
		padding: 5px;
	}
	.boxsmall img
	{
		width: 97%;
		margin: auto;
		display: block;
		margin-top: 4px;
		margin-bottom: 4px;
	}
	.boxsmall p
	{
		padding-left: 4px;
		margin: auto;
		display: block;
		font-size: 15px;
		margin-bottom: 4px;
	}
	.boxsmall a
	{
		color: #01a0c6 !important;
		padding-left: 4px;
		font-weight: 500;
	}
	#myElement 
	{
		display: block;
		background: white;
		font:  Helvetica, Arial, sans-serif;
	}
	.quality
	{
		margin: auto;
		margin-bottom: 16px;
	}
	#testimonial
	{
		max-width: 600px;
		min-height: 266px;
	}
	.quality
	{
		margin: auto;
		margin-bottom: 16px;
		padding-top: 0px;
	}
}
@media screen and (max-width: 500px) {
	#gradespecsmain .r0 {
		font-size: 9px;
	}
	#gradespecsmain .row div {
		font-size: 9px;
	}
	#mobile_btns {
		margin-left: 7.5%;
	}
	#contactUs {
		height: 50px;
	}
	#contactUs a {
		height: 100%;
		line-height: 37.5px;
		font-size: 12px;
	}
	.freequotestep .fen_gate_mobile * 
	{
		font-size: 12px;
	}
}
@media screen and (max-width: 420px) 
{
	#headerBig
	{
		display: none;
	}
	#headerSmall
	{
		display: block;
	}
	#pmbLarge
	{
		display: none;
	}
	#pmbSmall
	{
		display: block;
	}
	.mobile_header_1 {
		padding: 0px;
	}
	#mobile_btns {
		margin-left: 2.5%;
	}
}
@media screen and (max-width: 330px)
{
	#toplogo {
		width: 30%;
	}
	#titleBlockSmall 
	{
		font-size: 12px;
	}
	#gradespecsmain .r0 {
		font-size: 8px;
	}
	#gradespecsmain .row div {
		font-size: 8px;
	}
	#mobile_btns {
		margin-left: 0;
	}
	.freequotestep .fen_gate_mobile * 
	{
		font-size: 10px;
	}
}