/*
Theme Name: Stormwater Quality Team
Theme URI: 
Version: 1.0
Description: 
Author: Sunny505 team
Author URI: https://sunny505.com;
template: bb-theme
*/

/*home page header type*/

.home-header {
	color: rgba(255, 255, 255, .85);
	font-family: 'Bebas Neue', sans-serif;
	text-transform: uppercase;
	text-align: right;
}

/*small*/
@media only screen and (max-width: 768px) {

	.home-header-large {
		font-size: 70px;
		line-height: 55px;
	}

	.home-header-small {
		font-size: 25px;
		margin-top: -4px;
	}

}

/*medium*/
@media only screen and (min-width: 769px) and (max-width: 992px) {

	.home-header-large {
		font-size: 95px;
	}

	.home-header-small {
		font-size: 40px;
		margin-top: -40px;
	}

}

/*Large*/
@media only screen and (min-width: 993px) {
 
	.home-header-large {
		font-size: 150px;

	}

	.home-header-small {
		font-size: 60px;
		margin-top: -50px;
	}

}

/*****home page boxes*****/

.blur-background {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(141, 204, 216, 0.72); 
    filter: brightness(-.12);
    border: 1px solid #707070;
    position: relative;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100%;
}

.businesses {
	background-image: url('/wp-content/uploads/2021/07/home-box-businesses.png');
}

.residents {
	background-image: url('/wp-content/uploads/2021/07/home-box-residents-330.png');
}

.kids {
	background-image: url('/wp-content/uploads/2021/07/home-box-kids-330.png');
}
    
.blur-background h2 {
    color: white;
    text-align: center;
    padding: 10px 0 50px 0;
    margin-top: 10px;
}

/*****Interior Pages*****/
.page-header-curved-div svg {
  display: block;
  margin-top: -60px; 
}

/*fix type behind svg*/
.page-header-text {
	z-index: 5;
	position: relative;
}

/*for any other elements*/
.z-fixer, ul.sub-menu {
	position: relative;
	z-index: 1000;
}

/*small*/
@media only screen and (max-width: 768px) {

	.page-header-curved-div svg {
	  display: block;
	  margin-top: -18px;
	}

}

/*medium*/

/*fix for top div peeking through on bottom of curve*/
@media only screen and (min-width: 993px) and (max-width: 1354px) {

	.page-header-curved-div svg {
	  display: block;
	  margin-top: -40px;
	}

}

@media only screen and (min-width: 769px) and (max-width: 992px) {

	.page-header-curved-div svg {
	  display: block;
	  margin-top: -32px;
	}

}

/*Interior 3 pack*/

.three-pack {
	position: relative;
}

.three-pack h4 {
	text-align: center;
	text-transform: uppercase;
	margin: 20px 5px 30px 5px;
}

.three-pack svg {
	/*position: absolute;
	bottom: 0;*/
	display: block;
}