@import url(fontawesome-all.min.css);

@font-face {
  
  font-family: 'Atten Round New Bold';
  src: 	url('../../../webfonts/Montserrat-Bold.woff') format('woff'),
  	url('../../../webfonts/Montserrat-Bold.woff2') format('woff2')

}

@font-face {
  
  font-family: 'Atten Round New';
  src: 	url('../../../webfonts/Montserrat-Regular.woff') format('woff'),
  	url('../../../webfonts/Montserrat-Regular.woff2') format('woff2')

}

BODY {

	margin: 0vh 4vw 1vh 4vw;
	background: #234704;

}

H1 {

	font-family: 'Atten Round New Bold';
	color: #44a308;
	font-size: 3.4vw;
	text-align: left;

}

H2 {

	font-family: 'Atten Round New';
	color: #fff;
	font-size: 2.4vw;
	margin: 0px;

}

H3 {

	font-family: 'Atten Round New';
	font-size: 1.1vw;
	margin: 0 auto;
	margin-top: 1vh;
	text-align: center;
	max-width: 80%;
	margin-bottom: 0px;

}

H4 {

	font-family: 'Atten Round New';
	font-size: 0.8vw;
	font-weight: normal;
	margin: 0 auto;
	margin-top: -1em;
	margin-bottom: 1em;
	padding-top: 0px;
	text-align: center;

}

NAV {

	float: left;
	width: 24%;

}

SECTION {

	float: left;
	width: 52%;

}

FOOTER {

	text-align: center;
	margin: 0 auto;
	background-color: #234704;

}

FOOTER TABLE {

	background-color: #234704;

}

BUTTON {

  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  background-color: #549c35;
  border-radius: 10px;
  border: 0;
  box-shadow: inset 0 0 0 2px #549c35;
  color: #fff !important;
  cursor: pointer;
  display: inline-block;
  font-family: 'Atten Round New';
  font-size: 1vw;
  font-weight: 700;
  height: 3.5em;
  letter-spacing: 0.075em;
  line-height: 3.5em;
  //margin-top: 0.6em;
  padding: 0 2.25em;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;

}

button:hover, .button:hover {

    background-color: rgba(59, 167, 0, 1); }
    
}

button:active, .button:active {

    background-color: rgba(0, 191, 99, 0.6);
    
}

#container {

	width: 100%;

}

.left-panel {

	width: 100%;
	margin-bottom: 3%;
	float: left;
	clear: left;
	padding-top: 7.5vh;
	padding-bottom: 7.5vh;
	text-align: center;
	

}

.right-panel.dark-green-panel {

	width: 100%;
	margin-bottom: 3%;
	float: left;
	clear: left;
	//padding-top: 7.5vh;
	//padding-bottom: 7.5vh;
	text-align: center;

}

.savings {

	width: 100%;
	height: 100%;
	margin: 0 auto;
	float: left;
	clear: left;
	text-align: center;
	background: #f7f7f7;
	padding-bottom: 3.75vh;

}

.left-panel.dark-green {

	background-size: 140%;
	background-image: url('../../images/slide01.jpg');
	animation: slide 10s linear infinite;
	text-shadow: 4px 2px 9px #111111;

}

.blue {

	background-size: 140%;
	background-image: url('../../images/water01.jpg');
	animation: slide 10s linear infinite;
	text-shadow: 4px 2px 9px #111111;

}

.left-side {

	width: 60%;
	background-color: #549c35;
	height: 100%;
	float: left;

}

.left-side P {

	text-align: left;
	//font-size: 1em;
	font-size: 1cqw;
	padding: 1cqw;

}

.bold {

	font-weight: bold;

}

.padding-top {

	padding-top: 4vh;

}

.badge {

	width: 4cqw;
	height: 4cqw;
	border-radius: 1cqw;
	color: #fff;
	font-family: "Atten Round New Bold";
	font-size: 2cqw;
	vertical-align: center;
	float: left;

}

.badge IMG {

	width: 90%;
	height: 90%;
	vertical-align: center;
	text-align: center;
	margin-top: 8%;

}

.comment {

	font-family: "Atten Round New Bold";
	font-size: 1cqw;
	color: #fff;
	float: right;
	width: 60%;
	text-align: left;
	padding-right: 10%

}

.badge1 {

	background-color: #549c35;

}

.badge2 {

	background-color: #79d000;

}

.bg-green {

	width: 40%;
	background-color: #234704;
	height: 100%;
	float: left;
	text-align: center;
	vertical-align: middle;

}

@keyframes slide {
  0% {
    background-position: -60px, -20px;
  }
  50% {
    background-position: -170px, -200px;
  }
  100% {
    background-position: -60px, -20px;
  }
}

.light-green {

	background: #7ed957;
	cursor: pointer;

}

.white {

	color: #fff;

}

.black {

	//text-align: center;
	color: #111;
	margin-top: 0px;
	padding: 2vh 0 2vh 0;

}

.green {

	color: #44a308;

}

#photo {

	background: url(../../images/photo.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;

}

.green-panel {

	background: #549c35;

}

.dark-green-panel {

	background: #1c3803;
	
}

#btn-pledge-container {

	position: relative;
	bottom: 2vh;
	margin-top: 6vh;

}

#scroller {

	padding: 2vh;
	margin-top: 1vh;
	overflow: auto;

}

#scroller::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Define the thumb style */
#scroller::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom right, #549c35 0%, #549c35 100%);
  border-radius: 5px;
}

/* Define the track style */
#scroller::-webkit-scrollbar-track {
  background-color: #1c3803;
  border: none;
}

.pledge-container {

	clear: left;
	float: left;
	margin-top: 2vh;
	width: 100%;

}

@media screen and (max-width: 1280px){

	H3 {

	    font-size: 1.6vw;

	}
	
	.right-panel {
	
	//	padding-bottom: 12.4vh;
	
	}

}

TABLE {

	background-color: #fff;
	border-color: #f7f7f7;

}

TABLE TR TD P {

	font-family: "Atten Round New";
	margin: 10px 0 0 0;

}

@media screen and (max-width: 480px) {

	BODY {
	
		text-align: center !important;
	
	}

	SECTION {
	
		width: 100%;
		text-align: center;
	
	}

	H1 {

		font-size: 2em;
		text-align: center;

	}
	
	H2 {
	
		font-size: 1.4em;
		color: #00bf63;
		text-align: center;
	
	}
	
	H3 {
	
		font-size: 0.8em;
		margin: 0 auto;
		margin-top: 0.4em;
		line-height: 1em;
		text-align: center;
	
	}
	
	BUTTON {
	
		font-size: 1rem;
		border-radius: 0.8em;
	
	}
	
	.join-us {
	
		color: #2c92d5;
		margin: 2em 0 1em 0;
	
	}
	
	#zappify-logo {
	
		max-width: 60%;
		margin: 0 0 2em 0;
	
	}

	TABLE {

		background-color: #fff;

	}

	TD {

		background-color: #fff;

	}
	
	.logo {
	
		max-width: 80%;
		max-height: 100%;
	
	}
	
}

.linkedin A:link {

	color: #fff;
	
}

.linkedin A:visited {

	color: #fff;
	

}

.linkedin A:hover {

	text-decoration: none;
	

}