@charset "utf-8";
/* CSS Document */



 .herocontent-pages {
	position: absolute;
	top: 0;
	margin: 70px 0 0 5%;
    background: linear-gradient(90deg,#000a 37.9%,#333a 121.27%);
    background-size: 100% 100%;
    padding: 50px 40px 50px 40px;
    max-width: 90%;
    border-top-left-radius: 70px;
    border-bottom-right-radius: 70px;
	color: #EEE;
}

#deck-staining-experts {
	position: relative;
	width: 100%;
	max-width: max-content;
    margin: 0 auto;
    overflow-x: hidden;
	overflow-y: visible;
    height: auto;
	background: #fff;
}

#fence-staining-experts {
	position: relative;
	width: 100%;
	max-width: max-content;
    margin: 0 auto;
    overflow-x: hidden;
	overflow-y: visible;
    height: auto;
	background: #fff;
}

#paver-sealing-experts {
	position: relative;
	width: 100%;
	max-width: max-content;
    margin: 0 auto;
    overflow-x: hidden;
	overflow-y: visible;
    height: auto;
	background: #fff;
}

#brick-sealing-experts {
	position: relative;
	width: 100%;
	max-width: max-content;
    margin: 0 auto;
    overflow-x: hidden;
	overflow-y: visible;
    height: auto;
	background: #fff;
}

#stone-sealing-experts {
	position: relative;
	width: 100%;
	max-width: max-content;
    margin: 0 auto;
    overflow-x: hidden;
	overflow-y: visible;
    height: auto;
	background: #fff;
}

#concrete-sealing-experts {
	position: relative;
	width: 100%;
	max-width: max-content;
    margin: 0 auto;
    overflow-x: hidden;
	overflow-y: visible;
    height: auto;
	background: #fff;
}

.bannerimage-pages-left {
	position: relative;
	top: 0;
	left: -150%;
	margin: 0;
	padding: 0;
}

.bannerimage-pages-stone {
	position: relative;
	top: 0;
	left: -300%;
	margin: 0;
	padding: 0;
}

#section1 {
	width: 100%;
	display: inline-block;
	background: linear-gradient(180deg,#fff 40%,#eee);
	padding: 0 0 40px 0;
}

.section1-top-content {
	width: 100%;
	padding: 20px 5% 50px 5%;
	color: #555;
}

.section1-image1 {
	width: 100%;
	height: 250px;
	overflow: hidden;
	margin-bottom: 10px;
	background: #ccc;
}

.section1-image1 img {
	width: 100%;
	height: auto;
}

.section1-image2 {
	width: 100%;
	height: 250px;
	overflow: hidden;
	border-bottom-left-radius: 33px;
}

.section1-image2 img {
	width: 100%;
	height: auto;
}

#section2-container {
	background: #fff;
	height: auto;
	border-radius: 0 33px 0 0;
}

#section2 {
	background: linear-gradient(90deg,#00953a 37.9%,rgba(77,164,58,.48) 121.27%);
	border-radius: 0 33px 33px 0; 
	height: auto;
	color: #fff;
}

.section2-heading {
	padding: 40px 0px 40px 0px;
	font-size: 24px;
	font-weight: 500;
	text-align: center;
}

.section2-text {
	font-size: 16px;
	padding: 0 5% 25px 5%;
}

#section3 {
	width: 100%;
	display: inline-block;
	background: linear-gradient(180deg,#fff 40%,#eee);
	color: #555;
}

.section3-top-content {
	padding: 60px 0 60px 0;
}

.x4-section3-top-content {
	padding: 60px 1% 60px 1%;
}

.section3-bottom-content {
	padding: 60px 0 60px 0;
	float: left;
	width: 100%;
}

.x4-section3-bottom-content {
	padding: 60px 0 60px 0;
	float: left;
	width: 100%;
}

.section3-heading {
	font-size: 24px;
	font-weight: 500;
	text-align: center;
}
.x4-section3-heading {
	font-size: 24px;
	font-weight: 500;
	text-align: center;
}

.display3 {
	display: none;
}

.image-caption {
	position: absolute;
	bottom: 0;
	z-index: 2;
	color: #FFFFFF;
	right: 0;
	margin: 0 20px 20px 0;
	font-size: 24px;
	font-weight: 500;
	/*box-shadow: 0px 0px 4px 4px #000;*/
	text-shadow: 1px 1px 10px #000;
}

.section3-image1 {
	width: 100%;
	height: auto;
	overflow: hidden;
	max-width: 450px;
	margin: 0 auto 10px auto;
	position: relative;
}

.x4-section3-image1 {
	width: 100%;
	height: auto;
	overflow: hidden;
	max-width: 450px;
	margin: 0 auto 10px auto;
	position: relative;
}

.section3-image1 img {
	width: 100%;
	height: auto;
	border-radius: 33px 0 0 0;
}

.x4-section3-image1 img {
	width: 100%;
	height: auto;
	border-radius: 33px 0 0 0;
}

.section3-image2 {
	width: 100%;
	height: auto;
	overflow: hidden;
	max-width: 450px;
	margin: 0 auto 10px auto;
	position: relative;
}

.x4-section3-image2 {
	width: 100%;
	height: auto;
	overflow: hidden;
	max-width: 450px;
	margin: 0 auto 10px auto;
	position: relative;
}

.section3-image2 img {
	width: 100%;
	height: auto;
}

.x4-section3-image2 img {
	width: 100%;
	height: auto;
}

.section3-image3 {
	width: 100%;
	height: auto;
	overflow: hidden;
	max-width: 450px;
	margin: 0 auto 10px auto;
	position: relative;
}

.x4-section3-image3 {
	width: 100%;
	height: auto;
	overflow: hidden;
	max-width: 450px;
	margin: 0 auto 10px auto;
	position: relative;
}

.section3-image3 img {
	width: 100%;
	height: auto;
	border-radius: 0 0 0 33px;
}

.x4-section3-image3 img {
	width: 100%;
	height: auto;
}

.x4-section3-image4 {
	width: 100%;
	height: auto;
	overflow: hidden;
	max-width: 450px;
	margin: 0 auto 10px auto;
	position: relative;
}

.x4-section3-image4 img {
	width: 100%;
	height: auto;
	border-radius: 0 0 0 33px;
}

#deck-stain-colors-container {
	background: #fff;
	height: auto;
	border-radius: 0 33px 0 0;
}

#fence-stain-colors-container {
	background: #fff;
	height: auto;
	border-radius: 0 33px 0 0;
}

#deck-stain-colors {
	width: 100%;
	display: inline-block;
	background: linear-gradient(180deg,#fff 40%,#eee);
	padding: 70px 0 40px 0;
	border-radius: 0 33px 33px 0;
	color: #555;
}

#fence-stain-colors {
	width: 100%;
	display: inline-block;
	background: linear-gradient(180deg,#fff 40%,#eee);
	padding: 70px 0 40px 0;
	border-radius: 0 33px 33px 0;
	color: #555;
}

.deck-stain-colors-top-content {
	width: 100%;
	padding: 20px 5% 50px 5%;
}

.fence-stain-colors-top-content {
	width: 100%;
	padding: 20px 5% 50px 5%;
}

.stain-options-heading {
	font-size: 24px;
	font-weight: 500;
	padding: 0 0 80px 0;
	text-align: center;
}

.bga-logo {
	width: 100%;
	text-align: center;
	padding: 0 0 40px 0;
}

.bga-logo img {
	max-width: 100%;
	height: auto;
}

.colorchart {
	width: 100%;
	padding: 0 2% 0 3%;
	display: grid;
	grid-template-columns: auto auto;
}

.bakers-color {
	width: 100%;
	height: auto;
	padding: 0 1% 10px 0;
}

.bga-heading {
	padding: 20px 0 20px 6%;
	font-weight: 500;
}

#sealer-options-container {
	background: #fff;
	height: auto;
	border-radius: 0 33px 0 0;
}

#sealer-options {
	width: 100%;
	display: inline-block;
	background: linear-gradient(180deg,#fff 40%,#eee);
	padding: 70px 0 40px 0;
	border-radius: 0 33px 33px 0;
	color: #555;
}

.sealer-options-top-content {
	width: 100%;
	padding: 20px 5% 50px 5%;
}

.sealer-options-heading {
	font-size: 24px;
	font-weight: 500;
	padding: 0 0 50px 0;
}

.color-options-heading {
	font-size: 22px;
	font-weight: 500;
	padding: 0 0 8px 0;
}

.product-option {
	font-weight: 500;
	font-size: 18px;
	padding: 10px 0 10px 0;
}

.estimate-container-pages {
	border-radius: 33px 0 0 0;
}

.formFooter {
}

div.thankyou-footer-wrapper {
	display: none !important; 
}

#estimate-form {
	position: relative;
	z-index: 1;
}

#estimate-form iframe {
	position: relative;
	z-index: -1;
}

.terms {
	width: 100%;
	padding: 60px 1% 60px 1%;
	float: left;
	color: #555;
}

.terms ul {
	padding-left: 20px;
}



@media (min-width:481px){
	
/******** @MEDIA 481px ********/
	
	

	
.bannerimage-pages-left {
	position: relative;
	top: 0;
	left: -85%;
	margin: 0;
	padding: 0;
}
	
.bannerimage-pages-stone {
	position: relative;
	top: 0;
	left: -150%;
	margin: 0;
	padding: 0;
}

.section1-image1 {
	width: 49%;
	height: auto;
	float: left;
	margin: 0 1% 0 0;
}
	
.section1-image1 img {
	border-bottom-left-radius: 33px;
}

.section1-image2 {
	width: 49%;
	height: auto;
	float: right;
	margin: 0 0 0 1%;
	border-bottom-left-radius: 0px;
}
	
.colorchart {
	padding: 0 4% 0 5%;
}

	
	
}





@media (min-width:769px){
	
/******** @MEDIA 796px ********/
	
	
	
.bannerimage-pages-left {
	position: relative;
	top: 0;
	left: -50%;
	margin: 0;
	padding: 0;
}
	
.bannerimage-pages-stone {
	position: relative;
	top: 0;
	left: -50%;
	margin: 0;
	padding: 0;
}
	
.section1-image1 {
	width: 48.5%;
	height: auto;
	float: left;
	max-height: 350px;
	margin: 0 .5% 0 1%;
	border-bottom-left-radius: 33px;
}

.section1-image2 {
	width: 48.5%;
	height: auto;
	float: right;
	margin: 0 1% 0 .5%;
	max-height: 350px;
}
	
#x4-section3-container{
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}
	
.x4-section3-image1 {
	width: 49%;
	height: auto;
	float: left;
	margin: 0 .5% 0 .5%;
}
	
.x4-section3-image1 img {
	border-radius: 33px 0 0 0;
}
	
.x4-section3-image2 {
	width: 49%;
	height: auto;
	float: left;
	margin: 0 .5% 0 .5%;
}
	
.x4-section3-image3 {
	width: 49%;
	height: auto;
	float: left;
	margin: .5% .5% 0 .5%;
}
	
.x4-section3-image3 img {
	border-radius: 0 0 0 33px;
}
	
.x4-section3-image4 {
	width: 49%;
	height: auto;
	float: left;
	margin: .5% .5% 0 .5%;
}
	
.x4-section3-image4 img {
	border-radius: 0 0 0 0;
}
	
.colorchart {
	display: grid;
	grid-template-columns: auto auto auto;
}
	
#estimate-form {
}
	
.terms {
	width: 80%;
	padding: 60px 1% 60px 10%;
}



	
}




@media (min-width: 961px){
	
/******** @MEDIA 961px ********/

	
	
.section1-top-content {
	padding: 30px 8% 50px 8%;
}

.section1-image1 {
	width: 44.5%;
	margin: 0 .5% 0 5%;
}

.section1-image2 {
	width: 44.5%;
	margin: 0 5% 0 .5%;
}
	
.section3-image1 {
	width: 32.3%;
	height: auto;
	float: left;
	margin: 0 .5% 0 .5%;
}
	
.x4-section3-image1 {
	width: 49%;
	height: auto;
	float: left;
	margin: 0 1% 0 0;
}
	
.section3-image1 img {
	border-radius: 33px 0 0 33px;
}
	
.x4-section3-image1 img {
	border-radius: 33px 0 0 0;
}

.section3-image2 {
	width: 32.3%;
	height: auto;
	float: left;
	margin: 0 .5% 0 .5%;
}
	
.x4-section3-image2 {
	width: 49%;
	height: auto;
	float: left;
	margin: 0 0 0 1%;
}
	
.section3-image3 {
	width: 32.3%;
	height: auto;
	float: left;
	margin: 0 .5% 0 .5%;
}
	
.x4-section3-image3 {
	width: 49%;
	height: auto;
	float: left;
	margin: 1% 1% 0 0;
}
	
.section3-image3 img {
	border-radius: 0 0 0 0;
}
	
.x4-section3-image3 img {
	border-radius: 0 0 0 33px;
}
	
.x4-section3-image4 {
	width: 49%;
	height: auto;
	float: left;
	margin: 1% 0 0 1%;
}
	
.x4-section3-image4 img {
	border-radius: 0 0 0 0;
}
	
.colorchart {
	display: grid;
	grid-template-columns: auto auto auto auto;
}
	
#estimate-form {
}
	
	
	
}





@media (min-width:1261px){
	
/******** @MEDIA 1261px ********/
	

.bannerimage-pages-left {
	position: relative;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	border-bottom-left-radius: 33px;
}
	
.bannerimage-pages-stone {
	position: relative;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	border-bottom-left-radius: 33px;
}
	
#section1 {
	padding: 60px 5% 60px 5%
}
	
.section1-top-content {
	width: 50%;
	padding: 20px 5% 0px 0%;
	float: left;
}

.section1-image1 {
	width: 50%;
	height: auto;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	max-height: 400px;
	max-width: 600px;
}

.section1-image2 {
	display: none;
}
	
.section2-text {
	padding: 0 10% 40px 10%;
}
	
#section3-container{
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
}
	
#x4-section3-container {
	max-width: none;
}
	
.x4-section3-top-content {
	padding: 20px 0 60px 0;
}
	
.x4-section3-image1 {
	width: 24%;
	height: auto;
	float: left;
	margin: 0 .5% 0 .5%;
}
	
.x4-section3-image1 img {
	border-radius: 33px 0 0 33px;
}
	
.x4-section3-image2 {
	width: 24%;
	height: auto;
	float: left;
	margin: 0 .5% 0 .5%;
}
	
.x4-section3-image3 {
	width: 24%;
	height: auto;
	float: left;
	margin: 0 .5% 0 .5%;
}
	
.x4-section3-image3 img {
	border-radius: 0 0 0 0;
}
	
.x4-section3-image4 {
	width: 24%;
	height: auto;
	float: left;
	margin: 0 .5% 0 .5%;
}
	
.x4-section3-bottom-content {
	padding: 60px 0 20px 0;
}
	
.bga-logo {
	width: auto;
	text-align: center;
	float: left;
	padding: 0px 30px 50px 0;
}

.deck-stain-colors-top-content {
	width: auto;
	padding: 40px 10% 50px 10%;
}
	
.fence-stain-colors-top-content {
	width: auto;
	padding: 40px 10% 50px 10%;
}
	
.colorchart {
	padding: 0 5%;
	display: grid;
	grid-template-columns: auto auto auto auto auto auto;
}
	
.sealer-options-top-content {
	width: auto;
	padding: 40px 10% 50px 10%;
}
	
#estimate-form {
}

	

	
	
}







@media (min-width:1461px){
	
/******** @MEDIA 1461px ********/
	

	
	
	
	
#section3 {
	padding: 80px 0 80px 0;
}
	
#section3-container{
	max-width: none;
}
	
.section3-top-content {
	width: 24.5%;
	padding: 60px 0 60px 0;
	margin: 0 .5% 0 1.5%;
	float: left;
}
	
.section3-heading {
	font-size: 22px;
}
	
.display3 {
	display: block;
}
	
.section3-image1 {
	width: 23.5%;
	height: auto;
	float: left;
	margin: 0 .5% 0 .5%;
}

.section3-image2 {
	width: 23.5%;
	height: auto;
	float: left;
	margin: 0 .5% 0 .5%;
}
	
.section3-image3 {
	width: 23.5%;
	height: auto;
	float: left;
	margin: 0 .5% 0 .5%;
}
	
.section3-bottom-content {
	display: none;
}
	
	
	
	
.colorchart {
	width: 100%;
	display: grid;
	grid-template-columns: auto auto auto auto auto auto auto;
}
	
	
}





@media (min-width:1661px){
	
/******** @MEDIA 1661px ********/

	
#section1 {
	padding: 60px 10% 60px 10%;
}
	
.colorchart {
	display: grid;
	grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
}
	
	
}





@media (min-width:1861px){
	
/******** @MEDIA 1861px ********/
	
		
#section3-container {
	max-width: calc(1910px + 10%);
	padding: 0 5%;
	margin: 0 auto;
}
	
#x4-section3-container {
	max-width: calc(1910px + 10%);
	padding: 0 5%;
	margin: 0 auto;
}
	
.deck-stain-colors-top-content {
	max-width: calc(1910px + 10%);
	margin: 0 auto;
}
	
.fence-stain-colors-top-content {
	max-width: calc(1910px + 10%);
	margin: 0 auto;
}
	
.bga-heading {
	max-width: calc(1910px + 10%);
	margin: 0 auto;
}
	
.colorchart {
	max-width: calc(1910px + 10%);
	margin: 0 auto;		
}
	
.sealer-options-top-content {
	max-width: calc(1910px + 10%);
	margin: 0 auto;
}
	
	

	
}