@font-face {
  font-family: 'DIN';
  font-style: normal;
  font-weight: normal;
  src: url(' https://peoplewater1.s3.amazonaws.com/sites/5001b0c7d9f64a0002000004/theme/fonts/DINPro-Bold.eot');
  src: local('DIN Bold'), local('DIN-Bold'), url(' https://peoplewater1.s3.amazonaws.com/sites/5001b0c7d9f64a0002000004/theme/fonts/DINPro-Bold.ttf') format('truetype'), url('https://peoplewater1.s3.amazonaws.com/sites/5001b0c7d9f64a0002000004/theme/fonts/DINPro-Bold.svg') format('svg');
}
@font-face {
  font-family: 'DIN';
  src: url('https://peoplewater1.s3.amazonaws.com/sites/5001b0c7d9f64a0002000004/theme/fonts/DINPro-Regular.eot');
  src: local('DIN Regular'), local('DIN-Regular'), url('https://peoplewater1.s3.amazonaws.com/sites/5001b0c7d9f64a0002000004/theme/fonts/DINPro-Regular.ttf') format('truetype'), url('https://peoplewater1.s3.amazonaws.com/sites/5001b0c7d9f64a0002000004/theme/fonts/DINPro-Regular.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

body { 
	background-color: #353636; 
	font-family:      'DIN', "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size:        16px;
	letter-spacing:   0px;
	color:            #363737;
}

a {
	color: #00c1de;
}
.news-section span, .blue-button, .green-button{
	font-family:      'DIN', "Helvetica Neue", Arial, Helvetica, sans-serif;
}
/*Text helpers*/

/*MAin Blue title (usually H1)*/
.main-title{

}

.txt-title-large{
	font-size: 43px;
	font-weight: bold;
	/*letter-spacing: 2px;*/
}

.txt-title-small{
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 1px;
}

.body-title{
	font-size: 20px;
}

.body-text.blue{
	color: ;
}

.body-text{
	font-size: 14px;
	color: #000;
	letter-spacing: 0px;
}

.blue-header {
	color:#00C1DE;
	font-size:40px;
	line-height:40px;
	width: 100%;
	text-align: center;
	margin-top: 60px;
	font-weight: bold;
}
/***************************/ 

.blue-button, .green-button{
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	display:inline-block;
	color:#ffffff;
	/*font-family:Verdana;*/
	font-size:14px;
	font-weight:bold;
	padding:7px 20px;
	text-decoration:none;
	
}

.blue-button{
	-moz-box-shadow:inset 0px 1px 1px 0px #d9edff;
	-webkit-box-shadow:inset 0px 1px 1px 0px #d9edff;
	box-shadow:inset 0px 1px 1px 0px #d9edff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00c0de), color-stop(1, #29a7dd) );
	background:-moz-linear-gradient( center top, #00c0de 5%, #29a7dd 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00c0de', endColorstr='#29a7dd');
	background-color:#00c0de;
	border:1px solid #29a7dd;
	text-shadow:0px -1px 1px #006d94;
	height: 34px;
}

.blue-button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #29a7dd), color-stop(1, #00c0de) );
	background:-moz-linear-gradient( center top, #29a7dd 5%, #00c0de 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#29a7dd', endColorstr='#00c0de');
	background-color:#29a7dd;
}

.blue-button:active, .green-button:active {
	position:relative;
	top:1px;
	height: 34px;
}

.green-button{
	-moz-box-shadow:inset 0px 1px 1px 0px #d9edff;
	-webkit-box-shadow:inset 0px 1px 1px 0px #d9edff;
	box-shadow:inset 0px 1px 1px 0px #d9edff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #86c13f), color-stop(1, #39b14b) );
	background:-moz-linear-gradient( center top, #86c13f 5%, #39b14b 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#86c13f', endColorstr='#39b14b');
	background-color:#86c13f;
	border:1px solid #39b14b;
	text-shadow:0px -1px 1px #007a18;
}

.green-button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #39b14b), color-stop(1, #86c13f) );
	background:-moz-linear-gradient( center top, #39b14b 5%, #86c13f 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#39b14b', endColorstr='#86c13f');
	background-color:#39b14b;
}

.big-black-button, .small-black-button{
	-moz-box-shadow:inset 0px 1px 1px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 1px 0px #ffffff;
	box-shadow:inset 0px 1px 1px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8a8a8a), color-stop(1, #262626) );
	background:-moz-linear-gradient( center top, #8a8a8a 5%, #262626 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#262626');
	background-color:#8a8a8a;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	border:1px solid #292929;
	display:inline-block;
	color:#ffffff;
	/*font-family:arial;*/
	font-size:15px;
	font-weight:bold;
	/*padding:30px 76px;*/
	text-decoration:none;
	text-shadow:1px 1px 0px #000;
	width: 260px;
	height: 100px;
}
.big-black-button:hover, .small-black-button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #262626), color-stop(1, #8a8a8a) );
	background:-moz-linear-gradient( center top, #262626 5%, #8a8a8a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#262626', endColorstr='#8a8a8a');
	background-color:#262626;
}
.big-black-button:active, .small-black-button:active {
 	position:relative;
 	top:1px;
}

.small-black-button{
	height: 40px;
	font-weight: normal;
	width: 200px;
}

/***************************/


/***************************/ 

.main.container{
	display: block;
	margin-top: 22px;
	background-color: #fff;
	color: #353636;
	-moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    min-height: 700px;
    width: 980px;

    padding-bottom: 50px;
    /*padding: 40px;*/
}

.footer{
	color: #808080;
	font-size: 10px;
}

.footer .container{
	margin-top: 22px;
	max-width: 980px;
}

.footer .dotted-line{
	width: 100%;
    height: 20px;
    white-space: nowrap;
    overflow-x: hidden;
}

.footer .trademark-disclaimer{
	width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-top: 10px;
	margin-bottom: 20px;	
}

.footer ul{
	list-style-type: none;
}

.footer .container-ul{
	display: table;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.footer a{
	text-decoration: none;
	color: #818080;
	letter-spacing: 0px;

}

.footer a:hover{
	color: #fff;
}

.footer .bold a{
	font-weight: bold;
	color: #fff;
}



.footer .link-group{
	/*display: inline-block;*/
	display: table-cell;
	width: 16%;
	text-align: center;
	vertical-align: top;
}

.footer .link-group.clickid{
  width: 25%;
  vertical-align: top;
}

.footer .link-group .link-group-title{
	color: #fff;
	font-weight: bold;
}
.footer .link-group ul{
	margin-left: 0px;
	display: inline-block;
	vertical-align: top;
}

.footer .link-group ul li{
	margin-bottom: 3px;
}


/* HOME */

.header{
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	/*position: relative;*/
}

.header .title{
	margin-left: auto;
	max-width: 280px;
	margin-right: auto;
}

.social-buttons {
	/*margin-top: 20px;*/
	margin-left: 40px;
	float: left;
	margin-top: -80px;
}

.social-buttons .button{
	display: block;
	background-color: #cacaca;
	-moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    -khtml-border-radius: 13px;
    border-radius: 13px;
    height: 26px;
    width: 26px;
    margin: 3px;
    float: left;
    margin-top:20px;
    margin-right: 8px;
    position: relative;
    color: #cacaca;
    text-decoration: none;
    margin-bottom: 15px;
}

.social-buttons .button:hover{
	background-color: #1fc2de;
	color: #1fc2de;
}

.social-buttons img{
	margin: 5px;
}

.social-buttons span{
	display: none;
	font-size: 10px;
	position: absolute;
	bottom: -14px;
	/*color: #000;*/
	width: 40px;
	left: -7px;
	text-align: center;
}

.social-buttons span:hover{

}

.social-buttons .facebook img{
	margin-left: 9px;
}

.social-buttons .twitter img{
	margin-top: 7px;
}

.social-buttons .tumblr img{
	margin-left: 9px;
	margin-top: 6px;
}

.social-buttons .youtube img{
	margin-top: 3px;
}

.social-buttons .vimeo img{
	margin-top: 7px;
}



.header .contact_cart{
	float: right;
	margin-top: -50px;
	margin-right: 40px;
}

.header .contact_cart a{
	text-decoration: none;
	color: #00C1DE;
}

.main-nav{
	clear: left;
	/*display: block;*/
	max-width: 980px;
	float: left;
	background-color: #353636;
	color: #fff;
	margin-top: 30px;
	height: 36px;
	text-align: center;
}

.main-nav-container{
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	/*width: 100%;*/
}
.main-nav .main-nav-button{
	display: block;
	float: left;
	text-align: center;
	max-width: 100px;
	/*margin-left: 27px;*/
	margin-right: 7px;
	height: 36px;
	vertical-align: middle;
	padding-top: 10px;
	font-size: 12px;
	font-weight:bold;
}


.body{
	clear: both;
	margin-left: 0px;
	float: left;
	width: 100%;
	/*position: relative;*/
}

.body .featured-container{
	clear: left;
	position: relative;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 377px;
	display: block;
}

#featured{
	width: 100%;	
}

.featured-item{
	height: 100%;
	width: 100%;
	position: relative;
}

.featured-item img{
	margin-left: auto;
	margin-right: auto;

}

.featured-item .txt-title-large, .featured-item .txt-title-small{
	display: block;
	margin-left: 0px;
}

.featured-item .txt-title-large{
	font-weight: bold;
	height: 0px;
	margin-top: -80px;
}

.featured-item .txt-title-small{
	/*float: left;*/
	font-weight: bold;
	margin-top: 33px;
}

.featured-item.bracelet{

}

.featured-item.love-africa{
	position: relative;
}

.featured-item.love-africa .watch-video, .featured-item.love-africa .watch-video:active, .featured-item.bracelet .buy-bracelet{
	position: absolute;
	bottom: 40px;
	right: 65px;
	top: auto;
}

.featured-item .join-the-movement{
	position: absolute;
	right: 40px;
	top: 300px;
}

.featured-item .join-the-movement:active{
	position: absolute;
	right: 40px;
	bottom: 50px;
}

.featured-item .background-img-container{
	height: 377px;
	width: 100%;
}

.featured-item .background-img-large{
	background: url('https://peoplewater1.s3.amazonaws.com/sites/5001b0c7d9f64a0002000004/theme/images/main-scroller-2.jpg') no-repeat;
	width: 100%;
	height: 100%;
	display: inline;
}

.featured-item .background-img-small{
	display: none;
}

.featured-item.all-different .join-the-movement{
	/*bottom: 90px;*/
	margin-top: 0px;
	top: 300px;
}

.featured-item img.text-img{
	position: absolute;
	right: 40px;
	top: 93px;
}

.featured-item.water-giving img{
	width: 100%;
}

.featured-item.water-giving .image-text{
	position: absolute;
	bottom: 20px;
	left: 80px;
	width: 68%;
}

.featured-item.water-giving .text-body{
	display: none;
}

.featured-item.water-giving .txt-title-large, .featured-item.water-giving .txt-title-small{
	margin-left: 70px
}

  /*Why People Water*/
.featured-item.why-pw .txt-title-large{
	position: absolute;
	top: 144px;
	right: 150px;
}

.featured-item.why-pw .drop-for-drop, 
.featured-item.why-pw .eco-friendly,
.featured-item.why-pw .people-water,
.featured-item.why-pw .buy-now{
	position: absolute;
}

.featured-item.why-pw .drop-for-drop img.small, 
.featured-item.why-pw .eco-friendly img.small,
.featured-item.why-pw .people-water img.small,
.featured-item.why-pw .buy-now img.small
{
	display: none;
	
}

.featured-item.why-pw .eco-friendly img.large{
	display: inline;
}


.featured-item.why-pw .drop-for-drop{
	right: 337px;
	top: 115px;
}
.featured-item.why-pw .eco-friendly{
	right: 52px;
	top: 115px;
}
.featured-item.why-pw .people-water{
	right: 337px;
	top: 240px;
}
.featured-item.why-pw .buy-now{
	right: 52px;
	top: 240px;
}


hr.divider{
	clear: left;
	position: relative;
	width: 100%;
	background-color: #9b9b9b;
	height: 1px;
	margin: 27px 0px;
	border-style: none;
}

hr.divider.top{
	margin-top: 0px;
	top:0px;
}

.body .companies{
	background-color: #353636;
	margin: 0px 40px;	
	height: 84px;
	color: #fff;
	float: left;
	width: 92%;
}

.body .companies .title{
	margin-left: 40px;
	margin-top: 35px;
	display: inline-block;
	font-size: 18px;
	font-weight:bold;
}

.companies .company-container{
	display: inline-block;
	float: right;
	width: 78%;
	height:90px;
	margin-right: 20px;
	margin-top: 7px;
	position:relative;
	overflow:hidden;
}

.companies .company-items{
	/* this cannot be too large */
  	width:20000em;
 	position:absolute;
}

.companies .company-container .img-container{
	/*width: 25%;*/
	float: left;
	text-align: left;
	width:750px;
	height: 70px;
	vertical-align: middle;
	display: inline-block;
}

.companies .company-container .img-container .logo{
	text-align: center;
	/*display: inline-block;*/
	margin-left: 20px;
	margin-right: 40px;
	height: 40px;
	/*float: left;*/
}

.companies .company-container .img-container .logo a{
	text-decoration: none;
}

.companies .company-container .img-container.four .logo{
	/*width: 24%;*/
	margin-top: 15px;
}

.companies .company-container .img-container.three .logo{
	/*width: 32%*/
}

/* External Links */
.companies .company-container .img-container .logo.internal{
	width: 200px;
	margin-right: 0px;
	display: inline-block;
}

.outer-text{
	display: table;
	/*width: 50px;*/
	height: 70px;
	float: left;
}

.outer-text .inner-text{
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	text-align: right;
}

.companies .company-container .img-container .logo.internal .company-text{
	width: 50px;
	float: left;
	height: 70px;
	color: #fff;
	text-align: right;
	margin-right: 10px;
	vertical-align: middle;
	/*display: inline-block;*/
	/*display: table-cell;*/
	display: block;
	font-size: 12px;
}

.companies .company-container .img-container .logo.internal .img-holder{
	height: 70px;
	overflow: hidden;
	width: 139px;
}

.companies .company-container .img-container .logo.internal .img-holder img{
	/*height: 100%;*/
	/*width: 100%;*/
	/*max-width:100%; */
	/*max-height:100%;*/
	height: 100%;
	width: auto;
	float: left;
	vertical-align: top;
	display: inline-block;
	position: relative;
}

.companies .company-container img{
	/*margin-left: 100px;*/
	/*padding-right: 30px; */
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.news{
	margin: 33px 0px 22px 40px;
	height: 164px;
	float: left;
	width: 100%;
}

.news .news-section{
	width: 267px;
	margin-right: 48px;
	float: left;
	display: block;
}

.news .news-section{
	background-color: #fff;
	border: none;
	padding-left: 0px
}

.news .news-section img{
	float: left;
}
.news .news-section span{
	clear: left;
	float: left;
	bottom: 10px;
	margin-top: 10px;
	font-weight:bold;
	font-size: 12px;
	letter-spacing: 1px;

}

.news .news-section.become_a_dealer{
	margin-right: 0px;

}

.news .news-section .thumb-container img{
	margin-left: 0px
}

.news .news-section .email-field{
	position: relative;
}

.news .news-section .email-field input{
	/*width: 240px;*/
	/*padding: 13px 5px;*/
	font-size: 12px;
	background-color: #fff;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    margin-top: -56px;
    margin-left: 15px;
	height:20px;
	width: 230px;

}

.news .news-section .email-field .go-button{
	background-color: #353636;
	float: right;
	border: none;
	font-size: 10px;
	font-weight: bold;
	-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    color: #fff;
    height: 20px;
    padding: 3px;
    line-height: 15px;
    position: absolute;
    bottom: 28px;
    right: 20px;
}

.bottom-section{
	float: left;
	margin-top: 36px;
}

body .blog{
	margin-left: 40px;
	width: 40%;
	float: left;
}

.what-you-get{
	width: 42%;
	float: right;
	margin-right: 45px;
}
.what-you-get .item{
	clear: both;
	float: left;
	width: 100%;
	margin-top: 30px;
}

.what-you-get .item img{
	float: left;
}

.what-you-get .item .text-data{
	float: right;
	width: 80%;
}


.blog .title, .what-you-get .title{
	font-size: 30px;
	font-weight: bold;	
	color: #000;
}

.blog .item-title{
	color: #000;
}

.blog .body-text, .what-you-get .body-text{
	font-size: 16px;
	line-height: 22px;
}

.blog .body-text, .what-you-get .body-text{
	clear: left;
	float: left;
	margin-top: 10px;
	color: #000;
}

.blog .body-text{
	margin-top: 24px;
}

.blog .rssRow h4{
	margin-bottom: 10px;
}

.blog .rssFeed img{
	width: 50%;
	height: auto;
	float: right;
	margin-top: -5px;
}

.blog .rssFeed .rssRow p{
	margin-bottom: 10px;
	color: #000;
}

.blog .blog-button{
	clear: both;
	float: left;
	margin-top: 20px;
	margin-bottom: 40px;
}

.vertical-seperator{
	float: left;
	background-color: #9b9b9b; 
	width: 1px;
	height: 730px;
	margin-left: 35px;
	margin-top: -28px;
}

.bottom-gap{
	display: block;
	width: 100%;
	height: 25px;
	float: left;
}

/* DROP FOR DROP */
.content{
	margin-left: 0px;
	/*position: relative;*/
}

.content .content-container{
	clear: left;
	position: relative;
	left: 40px;
	top: 20px;
	width: 92%;
	/*height: 365px;*/
	display: block;
	/*overflow: hidden;*/
	
}

.content #drop-top {
	font-size:20px;
	text-align:center;
	height: 24px;
}

/*********************/

/*Water drops paging controler*/
.paging-control-row{
	width: 100%;
	float: left;
	height: 24px;
	margin-bottom: 25px;
	text-align: center;
}

.paging-control-row .paging-control-container {
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	width: 40%;
	text-align: center;

}

.paging-control-row .paging-control-container .water-droplet{
	display: inline-block;
	width:	13px;
	height: 23px;
	background: url('https://peoplewater1.s3.amazonaws.com/sites/5001b0c7d9f64a0002000004/theme/images/empty-water-drop.png') no-repeat;
	margin-right: 14px;
}

.paging-control-row .paging-control-container .water-droplet img{
	display: none;
	float: left;
}

.paging-control-row .paging-control-container .water-droplet.selected{
	/*display: inline;*/
}

.paging-control-row .paging-control-container .water-droplet.selected img{
	display: inline;
}

body.blog .bottom-gap{
	/*display: none; */
}

body.blog .main.container{
  padding-bottom: 0px;
}

.content .content-container.blog{
	height: inherit;
	margin-left: 0px;

}

.content .content-container.blog h1{
	margin-top: 20px;
	border-bottom: 1px solid #000;
	padding-bottom: 50px;
	width: 92%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	text-decoration: none;
}

.content .content-container.blog a{
	text-decoration: none;
}

.posts-container{
	border-right: 1px solid #000;
	width: 60%;
	margin-left: 40px;
	float: left;
}

.blog-post{
	width: 90%;
	display: block;
	padding-top: 20px;
	padding-bottom: 60px;
	border-bottom: 1px solid #000;

}

.home_page .blog-post{
	width: 375px;
}

.blog-post a{
	color: #00C1DE;
}

.blog-post .blog-date{
	font-weight: bold;
	margin-bottom: 20px;
}

.blog-post .blog-date .peoplewater{
	color: #00C1DE;
}

.blog-post .blog-title{
	font-weight: bold;
	margin-bottom: 20px;
	font-size: 24px;
	line-height: 27px;
}

.blog-post .blog-title a{
	color: #000;
}
.home_page .blog-post .blog-title{
	font-size: 18px;
	line-height: 20px;	
}

.pagination {
	height: 36px;
	margin: 20px 50px 20px;
	display: block;
}

.pagination span {
float: left;
padding: 0 14px;
line-height: 34px;
text-decoration: none;
border: 1px solid #DDD;

}

.pagination span.prev_page{
	border-right-width: 0;	
}

.content-container.blog .right-column{
	width: 30%;
	float: right;
	margin-right: 40px;
}

.content-container.blog .right-column img{
	margin-top: 30px;
	margin-bottom: 20px;
}

body.blog .bottom-gap{
	height: 80px;
}

q::before {
	content: open-quote;
}

q::after {
	content: close-quote;
}

.search-container{
	margin-top: 30px;
}

.search-container input{
	width: 60%;
	margin-bottom: 0px;
	height: 30px;
}

.search-container button{
	height: 30px;
	line-height: 15px;
}

.blog-links{
	margin-top: 35px;
}

.twitter-share-button{
	float: left;
}

.content .content-container.general-text{
	margin-left: 40px; 
  margin-right: 40px;
  width: 90%;
  height: inherit;
}

.content .content-container.general-text p, .content .content-container.general-text h2{
	float: left;  
}

.content .content-container.general-text p{
	margin-top: 15px; 
}

.content .content-container.general-text h2{
	margin-top: 25px;
  	font-weight: bold;
}