@import url(https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif|Sansita+One);
@charset "utf-8";
html, body{margin:0;padding:0;background-color:#f5f9fa;height:100%;width:100%;font-family:'Noto Sans', sans-serif;font-size:18px;color:#333;}

h1,h2,h3,h4 {font-family:'Noto Serif', serif; font-weight:bold; padding:0;}
h1 {margin:0; padding:0 0 30px 10px; text-align:center; font-size:32px; color:#264964; line-height:1.4;}
h2 {margin:0; padding:0 0 30px 10px; text-align:left; font-size:21px; color:#007643;}
h3 {margin:0; padding:10px 0; text-align:center; font-size:15px; color:#007643;}
h4 {margin:0; padding:30px 0 20px 10px; text-align:left; font-size:20px; color:#007643;}
h5 {margin:0; padding:20px 0; text-align:center; font-family:'Sansita One', cursive; font-size:20px; color:#007643; font-weight:normal;}


a {	-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;-ms-transition: all .3s ease;transition: all .3s ease;}

p {text-align:left; padding:0 10px 20px 10px; margin:0; line-height:1.5;}

#header {margin:0; padding:30px 0; width:100%; text-align:center; background:#f5f9fa url(../graphics/top-bg.jpg) top center; background-size:cover;}
.head-content {margin:0 auto; padding:0; width:auto; max-width:80%; overflow:hidden;}
.head-left {float:left;}
.head-left img {float:left; width:auto; max-width:100%; height:auto;} 
.head-right {float:right; padding-top:70px; text-align:right; font-family:'Sansita One', cursive; font-size:20px; color:#007643;}

#menu {margin:0; padding:0; width:100%; height:46px; background:#264964 url(../graphics/menu-bg.jpg) center; border-top:2px solid #769ebe; border-bottom:2px solid #769ebe;}

nav {margin:0 auto; width:auto; max-width:1200px; padding:0; font-size:16px; text-align:center;}

nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}
	
nav ul {
	margin:0 auto;
	padding: 0;
	list-style: none;
	position: relative;
	display: inline-table;
	
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}
	
nav ul li {
	/*float: left;*/
	display:inline-block;
	font-weight:bold;
	letter-spacing:0.025em;
	margin:0; padding:0;
}

	nav ul li:hover {
		background-color:#769ebe;
	}
		nav ul li:hover a {color: #fff;}
	
	nav ul li a, nav ul li a:link, nav ul li a:visited, nav ul li a:hover {
		display: block; padding:12px 18px;
		color: #fff !important; text-decoration: none !important;
		text-align:center; 
	}
	
nav ul ul {
	background: #264964; padding: 0;
	position: absolute; top: 100%; border-top:2px solid #fff; z-index:1000;
	filter: alpha(opacity=92);  /* IE 5-7 */
	-moz-opacity: 0.92;          /* Netscape */
	-khtml-opacity: 0.92;        /* Safari 1.x */
	opacity: 0.92;
}
	nav ul ul li {
		display:block; border-bottom:1px solid #fff; border-top:none;
		position: relative;
		color:#fff;
		text-align:left;
		font-size:14px;
	}
		nav ul ul li a {
			padding:10px 25px 5px 25px;
			color: #fff !important;
			text-align:left !important;
			text-decoration:none !important;
		}	
			nav ul ul li a:hover {
				color:#fff !important;
				background-color:#007643;
				
			}

#tabmenu {display:none;}
#smallmenu{display:none;}
#smallmenu ul{display:none;}
#menu-icon{display:none;}


.row {width:100%; margin:0; padding:40px 0; overflow:hidden;}
.row-banner {width:100%; margin:0; padding:10px 0; text-align:center; overflow:hidden;} 
.row-banner img {margin:0 auto; padding:0; width:auto; max-width:100%; height:auto; border-bottom:2px solid #264964;} 
.row-alt {width:100%; margin:0; padding:40px 0; background-color:#e1ebf2; overflow:hidden;} 
.content {margin:0 auto; padding:0; width:auto; max-width:900px; text-align:center;}

.vidContainer {margin:0 auto;width:auto; max-width:900px;height:auto;} 
	.videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 25px;height: 0;}
	.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.iframe-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;margin:60px 0;}
	.iframe-container iframe,
	.iframe-container object,
	.iframe-container embed{position:absolute;top:0;left:0;width:100%;height:100%;}

/* RAINSTORE ADVANTAGE */
.rain-ad-head {margin:0 auto; width:960px; height:auto; text-align:center; background-image:url(../graphics/rs3a-logo-bg.png); border:0;}
.rain-ad-head img {margin:0 auto; width:auto; max-width:600px; height:auto;}
/*RAINSTORE3*/
.rain-3-head {margin:0 auto; width:960px; height:auto; text-align:center; background-color:#1b75bb; border:0;}
.rain-3-head img {margin:0 auto; width:auto; max-width:600px; height:auto;}
/*DRAINCORE2 */
.drain-head {margin:0 auto; width:960px; height:auto; text-align:center;  background-color:#782a90; border:0;}
.drain-head img {margin:0 auto; width:auto; max-width:600px; height:auto;}
/*GRAVELPAVE*/
.gravel-head {margin:0 auto; width:960px; height:auto; text-align:center;  background-color:#ffc312; border:0;}
.gravel-head img {margin:0 auto; width:auto; max-width:600px; height:auto;}
/*GRASSPAVE*/
.grass-head {margin:0 auto; width:960px; height:auto; text-align:center;  background-color:#007744; border:0;}
.grass-head img {margin:0 auto; width:auto; max-width:600px; height:auto;}
/*SLOPETAME*/
.slope-head {margin:0 auto; width:960px; height:auto; text-align:center;  background-color:#e21f26; border:0;}
.slope-head img {margin:0 auto; width:auto; max-width:600px; height:auto;}


.item {margin:0 auto; padding:0; width:auto; max-width:960px; overflow:hidden;}
.item-top-left {float:left; padding:20px 0; width:auto; max-width:640px;}
.item-top-right {float:right; padding:20px 0; width:300px;}

.item-left {float:left; padding:0; width:63%;}
.item-right {float:right; padding:0; width:35%;}
.item ul {margin:0 10px; padding:0 10px; list-style-type:square; text-align:left;}
.item li {text-align:left; margin:0 10px; padding:0 0 15px 10px; list-style-type:square;}
.item-right img {float:right; padding-top:10px; width:auto; max-width:100%; height:auto;}
.item-left-half {float:left; padding:0; width:48%;}
.item-right-half {float:right; padding:0; width:48%;}

a.brolink, a.brolink:link, a.brolink:visited {float:right; margin-bottom:15px; padding:15px 0; width:270px; color:#fff; text-align:center; text-decoration:none; font-size:18px; font-weight:bold; background-color:#90abda;}
a.quotelink, a.quotelink:link, a.quotelink:visited {float:right; margin-bottom:15px; padding:15px 0; width:270px; color:#fff; text-align:center; text-decoration:none; font-size:18px; font-weight:bold; background-color:#1b75bb;}
a.brolink:hover, a.quotelink:hover {background-color:#007643;}

#quote {float:right; padding:15px 0; width:270px; color:#fff; text-align:center; font-size:18px; font-weight:bold; background-color:#1b75bb;}
#quote:hover {background-color:#007643;}
#panel {display: none; float:right; width:248px; height:auto; padding:10px; background-color:#e1ebf2; border:1px solid #1b75bb;}

table {float:right; margin-top:20px; padding:5px 0; width:270px; font-size:13px; text-align:left; border:1px solid #e1ebf2; background-color:#fcfdfd;}
th,td {padding:10px; vertical-align:top; border-collapse:collapse;}

input.placeholder {color:#90abda !important; font-size:12px !important; opacity:1;}
input::input-placeholder {color:#90abda !important; font-size:12px !important; opacity:1;}
input::-webkit-input-placeholder {color: #90abda !important; font-size:12px !important; opacity:1;}
input:-moz-placeholder {  /*Firefox 18-*/ color: #90abda !important; font-size:12px !important; opacity:1;}
input::-moz-placeholder {   /*Firefox 19+*/ color: #90abda !important; font-size:12px !important; opacity:1;}
input:-ms-input-placeholder {color: #90abda !important; font-size:12px !important; opacity:1;}

input.capbox.placeholder {color:#90abda !important; font-size:12px !important; text-align:center !important; letter-spacing:normal !important; opacity:1;}
input.capbox::input-placeholder {color:#90abda !important; font-size:12px !important; text-align:center !important; letter-spacing:normal !important; opacity:1;}
input.capbox::-webkit-input-placeholder {color: #90abda !important; font-size:12px !important; text-align:center !important; letter-spacing:normal !important; opacity:1;}
input.capbox:-moz-placeholder { /* Firefox 18- */color: #90abda !important; font-size:12px !important; text-align:center !important; letter-spacing:normal !important; opacity:1;}
input.capbox::-moz-placeholder {  /* Firefox 19+ */color: #90abda !important; font-size:12px !important; text-align:center !important; letter-spacing:normal !important; opacity:1;}
input.capbox:-ms-input-placeholder {color: #90abda !important; font-size:12px !important; text-align:center !important; letter-spacing:normal !important; opacity:1;}

textarea.placeholder {color:#90abda !important; font-size:12px !important; opacity:1;}
textarea::input-placeholder {color:#90abda !important; font-size:12px !important; opacity:1;}
textarea::-webkit-input-placeholder {color: #90abda !important; font-size:12px !important; opacity:1;}
textarea:-moz-placeholder {  /*Firefox 18-*/ color: #90abda !important; font-size:12px !important; opacity:1;}
textarea::-moz-placeholder {   /*Firefox 19+*/ color: #90abda !important; font-size:12px !important; opacity:1;}
textarea:-ms-input-placeholder {color: #90abda !important; font-size:12px !important; opacity:1;}


input {width:96%; margin:0 auto 10px auto; padding:3% 2%; text-align:left; color:#264964; font-size:15px; background-color:#f5f9fa; border:1px solid #90abda; outline:none;}
input:focus {color:#007643; background-color:#fff;}
textarea {width:96%; height:150px; margin:0 auto 10px auto; padding:3% 2%; text-align:left; color:#264964; font-family:'Noto Sans', sans-serif;font-size:15px; background-color:#f5f9fa; border:1px solid #90abda; outline:none;}
textarea:focus {color:#007643; background-color:#fff;}


.form-row {width:100%; margin:10px 0; text-align:center; overflow:hidden;}
.button {padding-top:20px;}

.btn{padding:11px 0 10px 0;text-align:center;color:#fff;font-size:14px;font-weight:bold;background-color:#264964; border:none; letter-spacing:0.2em;}
.btn:hover{background-color:#007643;}

.g-recaptcha {margin:0 auto; text-align:center; transform:scale(0.82);-webkit-transform:scale(0.82);transform-origin:0 0;-webkit-transform-origin:0 0;}

#footer {width:100%; margin:0; padding:40px 0; border-top:2px solid #264964; background:#769ebe url(../graphics/btm-bg.jpg) top center; background-size:cover;}
.foot-content {margin:0 auto; padding-bottom:30px; width:auto; max-width:1200px; color:#fff; font-size:14px; overflow:hidden;}
.foot-left {float:left; text-align:left;}
.foot-right {float:right; width:120px; text-align:center;}
.foot-right img {display:block; margin:0 auto; padding-bottom:25px;}
.foot-link {margin:0 auto; padding-top:30px; width:auto; max-width:1200px; color:#fff; font-size:13px; color:#e1ebf2; text-align:center; border-top:1px solid #e1ebf2;}
.foot-link a {display:inline-block; margin:0 auto; padding:5px 20px; text-align:center; color:#e1ebf2; text-decoration:none; border-right:1px solid #fff; background-color:transparent;}
.foot-link a:last-child {border-right:none;}
.foot-link a:hover {background-color:#264964;}

a.back-to-top {
display: none;
width: 50px;
height: 50px;
text-indent: -9999px;
position: fixed;
z-index: 5000;
right: 30px;
bottom: 150px;
background: #007643 url("../graphics/up-arrow.png") no-repeat center 43%;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
opacity:0.5;
border-radius: 30px;
}
a.back-to-top:hover {opacity:1.0;}

@media screen and (max-width:960px) {
h2 {text-align:center; margin-left:0;}
.rain-ad-head, .rain-3-head, .drain-head, .gravel-head, .grass-head, .slope-head  {width:100% !important;}
.rain-ad-head img, .rain-3-head img, .drain-head img, .gravel-head img, .grass-head img, .slope-head img {max-width:100%;}

.item {max-width:96%;}
.item-top-left {float:none; padding:20px 0; width:auto; max-width:100%;}
.item-top-right {float:none; margin:0 auto; padding:30px 0 20px 0;}

.item-left {float:none; padding-bottom:20px; width:100%;}
.item-right {float:none; width:100%; text-align:center;}
.item ul {margin:0 10px 30px 10px;}

.item-right img {float:none; margin:0 auto;}
.item-left-half {float:none; padding:0; width:100%;}
.item-right-half {float:none; padding:0; width:100%;}

a.brolink, a.brolink:link, a.brolink:visited {float:none; display:block; margin:0 auto 15px auto;}
a.quotelink, a.quotelink:link, a.quotelink:visited {float:none; margin:0 auto 15px auto;}

#quote {float:none; display:block; margin:0 auto;}
#panel {display: none; float:none; margin:0 auto;}

table {float:none; margin:20px auto;}
}

@media screen and (max-width:900px) {
#header {padding:15px 0;}
.head-left {float:none; text-align:center;}
.head-left img {float:none; margin:0 auto; max-width:96%;} 
.head-right {float:none; padding-top:10px; text-align:center;font-size:18px;}
nav {display:none;}
.hidemenu {display:block; position:relative; width:100%; height:46px;border-bottom:1px solid #264964; z-index:100000;}
#menu-icon{display:block;float:left;width:100%;height:46px;margin:0; margin-top:10px;padding:0;z-index:100;background:url(../graphics/nav-icon.png) no-repeat;}
#smallmenu{display:block;clear:both;width:100%;height:auto;padding:0;background-color:#264964;overflow:hidden;}
#smallmenu ul{display:block; width:100%;padding:0;margin:0;text-align:left; border-bottom:2px solid #fff;}
#smallmenu ul li{display:block;width:100%;list-style-type:none;text-align:left; border-bottom:1px solid #fff;}
#smallmenu > ul li a, #smallmenu > a:link, #smallmenu > a:visited{display:block;font-size:16px; color:#fff;padding:15px 30px;margin:0;text-decoration:none;text-align:left;}
#smallmenu li:last-child{border:0;}
#smallmenu > ul li a:hover, #smallmenu ul li .current{text-decoration:none;color:#fff;background-color:#007643;border:0;}
.content {max-width:96%; text-align:center;}
.product {float:none !important; display:inline-block; margin:15px 10px;}
.foot-content {max-width:94% !important;}	
}

@media screen and (max-width:480px) {
.foot-left {float:none; text-align:center;}
.foot-left p {text-align:center;}
.foot-right {float:none; margin:0 auto; width:120px; text-align:center;}
.foot-right img {padding-top:25px;}
.foot-link a {display:inline-block; margin:10px 10px; padding:10px 20px; border:1px solid #e1ebf2; background-color:transparent;}
.foot-link a:last-child {border-right:1px solid #e1ebf2;}	
}