@charset "UTF-8";
/* CSS Document */

body, html {

  height: 100%;

  margin: 0;

  color: #777;

}
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
	body, html {
		height: 100vw !important;
	}
}
	.input-group-addon {
    background-color: #fff;
	border:none;
}
	.form-group .btn-sm {
		margin: 5px 10px 5px 0px;
		padding:5px 25px;
	
	}
	.form-group {
		height:120px;
	}
	.input-group-addon {
		padding:0px;
	}
	.form-control {
		border: 1px solid #fff;
	}
	.donationbutton {
		position:absolute;
		margin:0px auto;
		max-width:500px;
		bottom: 5%;
	}
	.maintext {min-height: 200px; padding-top:100px;font-size:4em;color:#fff;line-height: slight;}
	.maintext2 {font-size:.8em;line-height: .8em;}
	.maintext3 {font-size:.8em}
	
	.secondHead {font-size:.5em;line-height:.5em}


.container-fluid, .row {
	z-index: 0;
}

.navbar {
	box-shadow: 0px 10px 10px rgba(0,0,0,.4);
}
.bgimg-1 {

  position: relative;
  z-index:0;
  background-repeat: no-repeat;
  background-size: cover;
	
  height: 100%;
  background-image: url("https://res.cloudinary.com/the-water-project/image/upload/c_fill,dpr_auto,q_auto,f_auto/site/woman-at-a-water-well-africa-2018.jpg");

}

.logofade {
	position:absolute;
	top:50px;
	left:50px;
	width: 200px;
}
.scroller {
	position: absolute;
	bottom: 15px;
    width:50px;
    left:50%;
    margin-left:-25px;
	font-size: 3em;
	color: #eee;
	
}
.graphiccontainer {
	margin: 0px auto;
	width:600px;
	max-width:500px;
	text-align: center;
	line-height: .8em;

	
}

.buttoncontainer {

	padding-left:25px;

	
}
	.givebuttons {
 	margin-left:0px;	
	margin-top:20px;}




@media (max-height: 300px){
	.bgimg-1 {
    background-position: top 0px left 0px !important;
	}
	
}
@media(max-width:481px) {
	.maintext {min-height: 220px;}
.logofade {
	position:absolute;
	top:20px;
	left:20px;
	width: 150px;
}	
.graphiccontainer {

	width:96%;
	left:4% !important;
	text-align: center;
	font-size: .6em !important;
}
.peace {
		height:auto;
		width:60%;
}
.bgimg-1 {
    background-position: top 0px left -200px !important;
}
	.donationbutton h4 {font-size: 1.8em !important;}

}

@media(min-width:482px) and (max-width:768px) {
	.maintext {min-height: 250px;}
	.modal-video {padding:50px 35px 10px 35px;}
	.logofade {
	position:absolute;
	top:20px;
	left:20px;
	width: 150px;
	}	
	.bgimg-1 {
    background-position: top 0px left -150px !important;
}
.graphiccontainer {
	
	top: 80px;
	width:96%;
	left:4% !important;
	text-align: center;
	font-size: .7em;

}
	.peace {
		height:auto;
		min-height:250px;
		width:75%;
	}

}


@media(min-width:769px) and (max-width:1024px) {
.maintext {min-height: 300px;}
	.peace {
		height:auto !important;
		width:65%;
	}
	
.logofade {
	position:absolute;
	top:20px;
	left:20px;
	width: 150px;
}	



}



@media(min-width:1025px) {
	.maintext {min-height: 300px;}

	

.bgimg-1 {
    background-position: bottom -20px left 0px !important;
	
}

}





 @-webkit-keyframes arrows {
    0% { bottom:0; }
    10% { bottom:5%; }
    20% { bottom:0; }
    30% { bottom:5%; }
    40% { bottom:-5%; }
    50% { bottom:5%; }
    60% { bottom:0; }
    70% { bottom:5%; }
    80% { bottom:-5%; }
    90% { bottom:5%; }
    100% { bottom:0; }
  }
  
  .scroller {
    animation: arrows 2.8s 0.4s;
    animation-delay: 3s;
	animation-iteration-count: 5;
  }