/*body{margin:0;box-sizing: border-box;}*/
/**************************** WRAP ****************************/
.how_it_works_wrap {
	font-size:14px;
	font-family:sans-serif;
	line-height:25px;
	color:#202020;
}
.how_it_works_wrap,.how_it_works_wrap * {box-sizing: border-box;}
.how_it_works_wrap .content_center {max-width:1170px;margin:0 auto;}
.how_it_works_wrap section {margin: 50px 0;}
.how_it_works_wrap .clearb {clear:both;}
/**************************** GENERAL ****************************/

.how_it_works_wrap .col img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}	
.how_it_works_wrap .col .content {
	display: table-cell;
	vertical-align: middle;
}
/**************************** TOP SECTION ****************************/	
.how_it_works_wrap .top_section {}
/**************************** DARK SECTION ****************************/
.how_it_works_wrap .dark_section {
	box-shadow:1px 11px 45px #737373;
	display:inline-block;
	padding:50px;
	color:#fff;
	background: url('/sites/all/themes/bootstrap_barrio/images/how_it_works/center_divider.png') no-repeat center 220px #333;
}	
.how_it_works_wrap .dark_section .divider_top div {
	float:left;
}
.how_it_works_wrap .dark_section .divider_top .drop_logo {
	width:12%;
	overflow:hidden;
}	
.how_it_works_wrap .dark_section .divider_top .drop_logo img{
	width: 100%;
	max-width: 70px;
	margin: 0 auto;
	display: block;
}
.how_it_works_wrap .dark_section .divider_top .divider_line {
	height: 4px;
	background: #ccc;
	width: 40%;
	margin: 44px 2%;	
}
.how_it_works_wrap .dark_section .divider_top .divider_title {
	clear:both;
	text-align: center;
}
.how_it_works_wrap .dark_section img.leak_detector {	
	max-width:250px;
}
.how_it_works_wrap .dark_section img.drop_hub {	
	max-width:250px;
}
/***/

.how_it_works_wrap .under_dark_section .content,
.how_it_works_wrap .water_system_security .content{
	
}
/**************************** FOOTER SECTION  ****************************/
.how_it_works_wrap .footer_section a:hover {
	color:#fff;
}
section.footer_section {
	max-width:500px;
	margin-top:90px;
	margin-left:auto;	
	margin-right:auto;	
	display:block;
	text-align: center;
}
section.footer_section a {
	background:#2fc5f1;
	color:#fff;
	display:inline-block;
	padding:8px 60px 10px;	
	border-radius:30px;
	margin-left:20px;
	text-decoration: none;
}
section.footer_section a:hover {
	background:#0f5469;
}
/**************************** RESPONSIVE  ****************************/
@media (max-width:1240px) {
	.how_it_works_wrap .content_center {
		padding:0 30px;
	}
}
@media (min-width:701px) {
	/* Start Flexbox */
	.how_it_works_wrap .top_section,
	.how_it_works_wrap .under_dark_section,
	.how_it_works_wrap .water_system_security{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-justify-content: flex-start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		-webkit-align-content: center;
		-ms-flex-line-pack: center;
		align-content: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.how_it_works_wrap .top_section .col,
	.how_it_works_wrap .under_dark_section,
	.how_it_works_wrap .water_system_security {
		-webkit-order: 0;
		-ms-flex-order: 0;
		order: 0;
		-webkit-flex: 0 1 auto;
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		-webkit-align-self: auto;
		-ms-flex-item-align: auto;
		align-self: auto;
	}
	/* End Flex Box */
	.how_it_works_wrap .col {
		width: 45%;
		vertical-align: middle;
		float: left;		
	}
	.how_it_works_wrap .col1 {
		display: table;
		height: 300px;
		overflow: hidden;		
		margin-right:3%;
	}
	.how_it_works_wrap .col2 {
		margin-left:7%;
	}	
}
@media (max-width:700px) {
	.how_it_works_wrap .dark_section {
		background:#333;
	}
}
@media (max-width:500px) {
	.how_it_works_wrap .col {
		width:100%;
		float:left;
	}
}
@media (max-width:530px) {
	section.footer_section .btn {
		display:block;
		max-width:250px;
		margin:20px auto;
	}
}

/* Product Page - Blurbs below grid */
@media (min-width:700px) {
	.product_blurb {
		width: 43%;
		margin-right: 6%;
		margin-top:2%;
		display: inline-block;
		vertical-align: top;
	}
	.product_blurb:nth-child(2) {
		margin-top:70px;
	}
}
.product_blurb:nth-child(1) {
	margin-top:70px;
}
.product_blurb:last-child {
	margin-bottom:100px;
}









/**************************** New Products Page  ****************************/



.new_button {
	background:#2fc5f1;
	color:#fff;
	display:inline-block;
	padding: 8px 40px 10px;	
	border-radius:30px;
        margin-top: 16px;
	text-decoration: none;
	margin-right: 15px;
}

.new_button:hover {
    background:#F12F2F;
	color:#fff;
	display:inline-block;
	padding: 8px 40px 10px;	
	border-radius:30px;
    margin-top: 16px;
	text-decoration: none;
    transition: 0.3s;
}


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


/********* Prod Start *********/

section.prod_start {
    display:grid;
    grid-template-columns: 50% 50%;
    margin-top: 50px;
}

section.prod_start .start-img {
    display: grid;
    justify-content: center;
}



/********* Card 1 Chem *********/

section.prod_card1{
    background-color: #0F5469;
    color: white;
    display:grid;
    grid-template-columns: 50% 50%;
    padding: 30px 50px 30px 50px;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

section.prod_card1 .chem-text{
    padding: 0px 0px 0px 25px;
}
    

section.prod_card1 .chem-img {
    padding: 0px 25px 0px 0px;
    display: grid;
    justify-content: center;
}


/********* Card 2 *********/

section.prod_card2 {
    display:grid;
    grid-template-columns: 50% 50%;
    padding: 0px 0px 0px 0px;
    align-items: center;
}

section.prod_card2 .card2-con{
    padding: 0px 0px 0px 25px;
}
   

section.prod_card2 .phone-img {
    padding: 0px 25px 0px 0px;
}


/*********Main Section Comps *********/

section.prod_main_item {
    display: grid;
    grid-template-columns: 75% 25%;
    align-items: center;
    padding: 20px 50px 20px 50px;
    background-color: #D4EBEF;
    margin-top: 50px;

}

section.prod_main_item .main-con{
    padding-right: 50px;
    align-items: center;
}

section.prod_main_item .main-img{
    margin:auto;
}

.main-con a {
    text-decoration: none;
}


/********* Water Basics 101 *********/

section.water_basics {
    margin-bottom: 50px;
}

section.water_basics .basics-title {
    padding: 50px;
    text-align: center;
}

.water_row_img {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    align-items: center;
    justify-content: center;
}

.water_img {
    display: grid;
    align-items: center;
    justify-content: center;
}

.water_basic_img {
    max-width: 250px;
}

.water_row_content {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    justify-content: center;
    text-align: center;
}

.water_content_item {
    padding: 0px 50px 0px 50px;
}


/********* Bottom Section *********/

section.prod_bot {
    background-color: #D4EBEF;
    padding: 35px 0px 35px 0px;
	margin: auto;
	display:block;
	text-align: center;
    margin: 0px 0px 50px 0px;
}

section.prod_bot p{
    padding: 0px 50px 0px 50px;
    margin: auto;
    word-wrap: break-word;
}

section.prod_bot a {
	background:#2fc5f1;
	color:#fff;
	display:inline-block;
	padding: 8px 40px 10px;	
	border-radius:30px;
    margin-top: 16px;
	text-decoration: none;
}