/* ==========================================================================
   Front-Page Styles
   ========================================================================== */

.section-slider {
	padding: 0 !important;	
}

.overlay-bg {
	background-color:rgba(0, 0, 0, 0.5) !important;
	position:absolute;
	z-index:20;
	width:100%;
	height:100%;
	top:0;
}

.page_header_overlay_bg {
	background-color:rgba(176, 230, 254, 0.5) !important;
	position:absolute;
	z-index:20;
	width:100%;
	height:100%;
	top:0;
}



.site-title h1 {
    /* margin-top: 20px; */
    /* margin-top: 1.25rem; */
    line-height: 65px;
    margin: 0 !important;
    vertical-align: middle;
}


.btn_button {
		-webkit-transition: all 0.2s cubic-bezier(.6,.2,.6,.9);
		 -moz-transition: all 0.2s cubic-bezier(.6,.2,.6,.9);
		   -o-transition: all 0.2s cubic-bezier(.6,.2,.6,.9);
			  transition: all 0.2s cubic-bezier(.6,.2,.6,.9);
}

.btn_button:hover{
	-webkit-transition: all 0.2s cubic-bezier(.6,.2,.6,.9);
	 -moz-transition: all 0.2s cubic-bezier(.6,.2,.6,.9);
	   -o-transition: all 0.2s cubic-bezier(.6,.2,.6,.9);
		  transition: all 0.2s cubic-bezier(.6,.2,.6,.9);

}


.section-services {
	/*background-size: cover;*/
	background-repeat: no-repeat;
	background-image:url("../images/services-bg.jpg");
 /* Set a specific height */
  min-height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.services-item {
	padding: 20px;
	text-align: center;
	border: 2px solid #fff;
	min-height: 300px;
	height: 100%;
	/*margin-bottom: 5%;*/
	position: relative;
}

.services-item p {
	color: #fff;
	margin-bottom: 0;
}

	.load_more {
		text-align: center;
	}
	.load_more a {
		color: #076988;
		border:2px solid #076988;
		display: inline-block;
		text-decoration: none;
		padding: 5px 20px;
		font-size: 18px;
		max-width: 320px;
		width: 100%;
	}

	.project_name_wrapper {
		text-align: center;
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 20px 0;
	}
	.project_name_wrapper h6 {
		color: #fff;
		text-transform: uppercase;
		position: relative;
		z-index: 50;
		font-size: 18px;
	}
	.hover_information h4,
	.hover_information p{
		color: #fff !important;
	}

		.hover_information {
			display: none;
		}
	.project_item {
		position: relative;
		
	}
		.project_item:hover .hover_information {
			display: block;
			position: absolute;
			z-index: 20;
			width: 100%;
			height: 100%;
			background-color:#000;
			border: #000;
			top: 0;
			padding: 20px;
			left: 0;
		}
	.section-page-content .site-content {
		text-align: center;
		padding: 20px;
		position: relative;
		z-index: 100;
	}
	.section-page-content .site-content a {
		color: #076988;
		border:2px solid #076988;
		display: inline-block;
		text-decoration: none;
		padding: 5px 20px;
		font-size: 18px;
		max-width: 320px;
		width: 100%;
	}


	.recent_project_impact {
		padding:9rem 0;
	}
	.project_item {
		margin-bottom: 5% !important;
	}

@media only screen and (min-width: 40em) { 
	
	.recent_project_impact {
		padding:15rem 0;
	}

	.section-page-content .site-content {
		background-color: #fff;
		margin-top: -150px;
	}
	
	.project-row {
		margin: 0 1.6% 1.6% 1.6%;
	}

}

@media only screen and (min-width: 50em) { 
	.project_item {
		margin-bottom: 0 !important;
	}
	
	.services-item {
		margin-bottom: 0;
	}

}