@charset "utf-8";
/* CSS Document */
.about-hero-container {background-image: url(../../upload/piling/about1.gif); background-position:50% 0%; background-repeat: no-repeat; background-color: #FFF; background-size: 85%;}

.service-hero-container {background-image: url(../../upload/piling/service-900.gif); background-position:center; background-repeat: no-repeat; background-color: #FFF; background-size: 860px 860px;}

.service-hero-container .hero-title {color: #000; font-size: 50px; padding-top: 80px;}

.what-matters {background-image:url(../../upload/hero/what-matters-1920.svg); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;background-color: #FFF; padding-top: 300px !important; padding-bottom: 300px !important;}

.footer{min-height: 300px; padding-top: 50px; padding-bottom: 50px;}


.water-fill {background-image:url(../../upload/piling/mms3.svg); background-size: 300px 300px; background-position: center; background-repeat: no-repeat; min-height: 300px;}
.features-desc{font-size: 16px;}

.piling-title {width: 60%; margin: auto;}

.red-highlight {background: #ef3f56; padding: 20px 10px; border: none; color: #FFFFFF; }

.yellow-highlight {background: #ffde00; padding: 20px 10px; border: none;}

.moving-circles {background-color:rgba(255, 255, 255, 0.1);}
	
.col-flex-4 {
	
	width: 30.33333333%;
	position: relative;
    min-height: 1px;
	float: left;
	display: flex;
	flex-wrap: wrap;
	margin:1.5%;
	}
	
.col-flex-2 {
	
	width: 46%;
	position: relative;
    min-height: 1px;
	float: left;
	display: flex;
	flex-wrap: wrap;
	margin:1.5%;
	}
	
.col-flex-40 {
	
	width: 33.1%;
	position: relative;
    min-height: 1px;
	float: left;
	display: flex;
	flex-wrap: wrap;
	margin:0;
	}
	
.col-flex-8 {
	
	width: 66.6666666%;
	position: relative;
    min-height: 1px;
	float: left;
	display: flex;
	flex-wrap: wrap;
	}
	
.col-flex-4-right {
	
	width: 30.33333333%;
	position: relative;
    min-height: 1px;
	margin-left:66.666666%;
	float: left;
	display: flex;
	flex-wrap: wrap;
	margin:1.5%;
	}


.row-flex {
    margin-right: -15px;
    margin-left: -15px;
	display: flex;
	flex-wrap: wrap;
	}
	
	
.row-flex:before, .row-flex:after	{
	display: table;
   content: " ";}
  
  
.cell-flex {
    position: relative;
    overflow: hidden;
    text-align: center;
	display: flex;
	flex-direction: column;
    width:100%;
	border: 1px solid #ffb5bf;
	border-radius: 15px;
	}

.cell-flex0 {
    position: relative;
    overflow: hidden;
    text-align: center;
	display: flex;
	flex-direction: column;
    width:100%;
	}
	
.text-flex {
    position: relative;
    overflow: hidden;
    text-align: center;
	display: flex;
	flex-direction: column;
    width:100%;
	}



@media only screen and (max-width: 1200px) {
	.main .section {padding-top: 40px; margin-top: 0; padding-bottom: 30px}
	
	.about-hero-container {background-image: url(../../upload/piling/about1.gif); background-position:50% 0%; background-repeat: no-repeat; background-color: #FFF; background-size: 85%;}
	
	.service-hero-container {background-image: url(../../upload/piling/service-900.gif); background-position:center; background-repeat: no-repeat; background-color: #FFF; background-size: 860px 860px;}
	
	.service-hero-container .hero-title {color: #000; font-size: 50px; padding-top: 80px;}
	
	.features-desc{font-size: 16px;}

	.piling-title{align-content: center; text-align: center;}
	
	
	.water-fill {background-image:url(../../upload/piling/mms3.svg); background-size: 300px 300px; background-position: center; background-repeat: no-repeat; min-height: 400px;}
	
	.what-matters {background-image:url(../../upload/hero/what-matters-1920.svg); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; background-color: #FFF; padding-top: 300px !important; padding-bottom: 300px !important;}
	
	.footer{min-height: 300px;}
	
	.col-flex-4 {display: block; width:100%;}
    .col-flex-8 {visibility:hidden; max-height:0px;}
    .col-flex-4-right {display: block; width:100%; margin-left:0;}
    .cell-flex {min-height:200px;}
    .row-flex {display: block;}
	
	.piling-title {width: 60%; margin: auto;}
	
	.red-highlight {padding: 20px 10px;}

.yellow-highlight {padding: 20px 10px; }
	
	
}

@media only screen and (max-width: 900px) {
	.main .section {padding-top: 50px; margin-top: 0; padding-bottom: 50px}
	
	.about-hero-container {background-image: url(../../upload/piling/about-vertical4.gif); background-position:50% 0%; background-repeat: no-repeat; background-color: #FFF; background-size: 100%;}
	
	.service-hero-container {background-image: url(../../upload/piling/service-900.gif); background-position:center; background-repeat: no-repeat; background-color: #FFF; background-size: 600px 600px;}
	
	
	.piling-title {font-size: 30px; align-content: center; text-align: center;}
	
	.about-hero-container .hero-title {margin-top: 180px !important; font-size: 40px !important; color: #000;}
	
	.service-hero-container .hero-title {color: #000; font-size: 40px; padding-top: 20px !important; margin-top: 0;}
	
	.features-desc{font-size: 16px;}

	.water-fill {background-image:url(../../upload/piling/mms3.svg); background-size: 200px 200px; background-position: center; background-repeat: no-repeat; min-height: 400px;}
	
	.what-matters {background-image:url(../../upload/hero/what-matters-1000.svg); background-position: center; background-size: 1000px 1000px; background-repeat: no-repeat; background-color: #FFF; padding-top: 200px !important; padding-bottom: 200px !important;}
	
	.footer{min-height: 300px;padding-top: 50px; padding-bottom: 50px;}
	
	.col-flex-4 {display: block; width:100%; margin-left: 0;}
	.col-flex-40 {display: block; width:100%;margin-left: 0;}
    .col-flex-2 {display: block; width:100%;} 
	
	.piling-title {width: 70%; margin: auto;}
	
	.red-highlight {padding: 15px 10px;}

.yellow-highlight {padding: 15px 10px; }
}

@media only screen and (max-width: 760px) {
	.main .section {padding-top: 50px; margin-top: 0; padding-bottom: 50px}
	
	.about-hero-container {background-image: url(../../upload/piling/about-vertical3.gif); background-position:50% 0%; background-repeat: no-repeat; background-color: #FFF; background-size: 100%;}
	
	.service-hero-container {background-image: url(../../upload/piling/service-400.gif); background-position:center; background-repeat: no-repeat; background-color: #FFF; background-size: 400px 400px;}
	
	.piling-title {font-size: 20px; align-content: center; text-align: center;}
	.about-hero-container .hero-title {margin-top: 150px !important; font-size: 30px !important;color: #000; }
	
	.service-hero-container .hero-title {color: #000; font-size: 30px; padding-top: -20px !important; margin-top: 0;}
	
	.features-desc{font-size: 16px;}

	.water-fill {background-image:url(../../upload/piling/mms3.svg); background-size: 200px 200px; background-position: center; background-repeat: no-repeat; min-height: 200px;}
	
	.what-matters {background-image:url(../../upload/hero/what-matters-800.svg); background-position: center; background-size: 800px 800px; background-repeat: no-repeat; background-color: #FFF; padding-top: 200px !important; padding-bottom: 200px !important; background-attachment:scroll;}
	
	.clients{display: none; visibility: hidden}
	
	.footer{min-height: 300px;padding-top: 50px; padding-bottom: 50px;}
	
	.col-flex-4 {display: block; width:96%; margin-left:2%; }
    .col-flex-40 {display: block; width:100%; }
    .col-flex-2 {display: block; width:100%;}
    .col-flex-8 { visibility:hidden;}
    .col-flex-4-right {display: block; width:100%; margin-left:0;}
    .cell-flex {min-height:200px;}
    .row-flex {display: block;}
	
	.piling-title {width: 100%; margin: auto;}
	.red-highlight {padding: 10px 10px;}

.yellow-highlight {padding: 10px 10px; }
	
}

@media only screen and (max-width: 560px) {
	.main .section {padding-top: 40px; margin-top: 0; padding-bottom: 40px}
	
	.about-hero-container {background-image: url(../../upload/piling/about-vertical3.gif); background-position:50% 0%; background-repeat: no-repeat; background-color: #FFF; background-size: 100%;}
	.piling-title {font-size: 20px; align-content: center; text-align: center;}
	.about-hero-container .hero-title {margin-top: 150px !important; font-size: 25px !important;}
	
	.service-hero-container {background-image: url(../../upload/piling/service-400.gif); background-position:center; background-repeat: no-repeat; background-color: #FFF; background-size: 300px 300px;}
	
	.service-hero-container .hero-title {color: #000;  font-size: 25px; padding-top: -20px !important; margin-top: 0;}
	
	.features-desc{font-size: 15px;}

	.water-fill {background-image:url(../../upload/piling/mms3.svg); background-size: 200px 200px; background-position: center; background-repeat: no-repeat; min-height: 200px;}
	
	.what-matters {background-image:url(../../upload/hero/what-matters-600.svg); background-position: center; background-size: 600px 600px; background-repeat: no-repeat; background-color: #FFF; padding-top: 200px !important; padding-bottom: 200px !important;background-attachment:scroll;}
	
	.clients{display: none; visibility: hidden}
	
	.footer{min-height: 300px;padding-top: 50px; padding-bottom: 50px;}
	
	.col-flex-4 {display: block;width:96%; margin-left:2%;}
    .col-flex-40 {display: block;width:100%;}
    .col-flex-2 {display: block; width:100%;}
    .col-flex-8 { visibility:hidden;}
    .col-flex-4-right {display: block; width:100%; margin-left:0;}
    .cell-flex {min-height:200px;}
    .row-flex {display: block;}
	
	.piling-title {width: 100%; margin: auto;}
	.red-highlight {padding: 10px 10px;}

.yellow-highlight {padding: 10px 10px; }
}