body {
	margin: 0;
	padding: 0;
	position: relative;
	font: normal 62.5% "Verdana", sans-serif;
	background: #3b8fb4;
	color: #fff;
    line-height: 1.4;
}
ul {
	padding: 0;
	margin: 0;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
	outline: none;
}
p {
	margin: 0;
	padding: 0;
}
img {
	border: none;
}

/* clear float */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix {
    clear: both;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}
 
/* header */
.logo {
	position: absolute;
	display: block;
	width: 100px;
	height: 98px;
	top: -35px;
	left: 0;
	background: url("../img/logo_small.png") no-repeat 0 0;
}

/* headers */
h1, h2, h3, h4 {
	text-transform: uppercase;
	font-family: 'Roboto Slab', serif;
	text-shadow: 1px 1px 1px #000;
}
h1 {
	font-size: 3em;
}
h2 {
	font-size: 2em;
}
h2.report_title {
	text-align: center;
	margin: 15px 0;
}
header h2 {
	font-family: 'Comfortaa', cursive;
	font-size: 2.5em;
}
h3.people span {
	background: url("../img/persons.png") no-repeat left top;
	padding-left: 55px;
	display: inline-block;
	padding-top: 5px;
}
h3.star span {
	background: url("../img/star.png") no-repeat left top;
	padding-left: 45px;
	display: inline-block;
	padding-top: 5px;
}
h3.project span {
	background: url("../img/light.png") no-repeat left top;
	padding-left: 40px;
	display: inline-block;
	padding-top: 5px;
}
h3.music span {
	background: url("../img/music.png") no-repeat left 3px;
	padding-left: 45px;
	display: inline-block;
	padding-top: 5px;
}
h3.buy {
	margin-bottom: 40px;
}
h3.buy span {
	background: url("../img/buy.png") no-repeat left 3px;
	padding-left: 45px;
	display: inline-block;
	padding-top: 5px;
}
h3.heart span {
	background: url("../img/heart.png") no-repeat left 3px;
	padding-left: 45px;
	display: inline-block;
	padding-top: 5px;
}

.order li {
	list-style-type: decimal;
	min-height: 34px;
	text-align: left;
	margin-bottom: 20px;
	/*padding-left: 75px;*/
}

/* sections */
section {
	width: 100%;
	padding: 30px 0 40px;
	position: relative;
	overflow: visible;
	display: block;
}
section.first {
	z-index: 30;
	background: #334960;
	box-shadow: 0 0 10px #334960;
}
section.second {
	z-index: 28;
	background: url("../img/blue_bg.jpg") repeat 0 0;
	box-shadow: 0 0 8px #3f9fc9;
}
section.third {
	z-index: 26;
	background: #334960;
	box-shadow: 0 0 10px #334960;
}
section.fourth {
	z-index: 24;
	background: url("../img/green_bg.jpg") repeat 0 0;
	box-shadow: 0 0 8px #32ac97;
}
section.fifth {
	z-index: 22;
	background: #334960;
	box-shadow: 0 0 10px #334960;
}
section.sixth {
	z-index: 18;
	background: #334960;
	box-shadow: 0 0 10px #334960;
}
section.seventh {
	z-index: 14;
	background: url("../img/blue_bg.jpg") repeat 0 0;
	box-shadow: 0 0 8px #3f9fc9;
}

/* arrows */
header:after  {
	bottom: -60px;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(51, 73, 96, 0);
	border-top-color: #334960;
	border-width: 10px;
	margin-left: -10px;	
}	
.second .arrow {
	bottom: -15px;
	left: 49.5%;
	width: 29px;
	height: 15px;
	position: absolute;
	background: url("../img/after_blue_small.png") no-repeat;
	display: block;
}
.third article:after {
	bottom: -170px;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(51, 73, 96, 0);
	border-top-color: #334960;
	border-width: 20px;
	margin-left: -20px;
}
.fourth .arrow {
	bottom: -22px;
	left: 48.5%;
	width: 57px;
	height: 29px;
	position: absolute;
	background: url("../img/after_green_big.png") no-repeat;
	display: block;
}
.fifth article:after {
	bottom: -110px;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(51, 73, 96, 0);
	border-top-color: #334960;
	border-width: 30px;
	margin-left: -30px;
}
.sixth article:after {
	bottom: -90px;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(51, 73, 96, 0);
	border-top-color: #334960;
	border-width: 25px;
	margin-left: -25px;
}
header, article {
	width: 45%;
	margin: 0 auto;
	text-align: center;
	position: relative;
}
section.third article, 
section.fourth article {
	width: 40%;
}
div.theproject {
	width: 50%;
	float: left;
	padding-right: 20px;
	border-right: 1px solid #2f82a0;
}
div.donation {
	width: 45%;
	float: left;
}
footer {
	text-align: right;
	border-top: 1px solid #fff;
	padding: 15px 0;
	margin: 20px auto 0;
	width: 45%;
}

/* text */
article, 
header p {
	font-size: 2em;
	font-family: 'Exo 2', sans-serif;
}
.theproject p {
	text-align: left;
}
.third 
.blue article p {
	text-align: left;
	margin-top: 10px;
	font-size: 0.8em;
	font-family: 'Marmelad', sans-serif;
}
section.seventh article p {
	text-align: left;
	font-size: 0.9em;
	padding: 0;
	margin-bottom: 5px;
}
section.seventh article p:last-child {
	margin: 20px 0 10px;
	font-size: 0.8em;
}
section.seventh article p.main {
	font-size: 1em;
	margin-bottom: 30px;
	font-weight: 600;
	text-align: center;
}
section.seventh article div p {
	text-align: center;
}
a.epay_btn {
	background: url("../img/epay_btn.png") no-repeat 0 0;
	cursor: pointer;
	width: 250px;
	margin: 10px auto;
	display: block;
	text-indent: -99999px;
	height: 30px;
}
a.epay_btn:hover {
	background: url("../img/epay_btn_hover.png") no-repeat 0 0;
}
a.paypal_btn {
	background: url("../img/paypal_btn.png") no-repeat 0 0;
	cursor: pointer;
	width: 250px;
	margin: 10px auto;
	display: block;
	text-indent: -99999px;
	height: 30px;
}
a.paypal_btn:hover {
	background: url("../img/paypal_btn_hover.png") no-repeat 0 0;
}
.yesspay-button {
	background: url("../img/sms_btn.png") no-repeat 0 0;
	cursor: pointer;
	width: 250px;
	margin: 10px auto;
	display: block;
	text-indent: -99999px;
	height: 30px;
	border: none;
}
.yesspay-button:hover {
	background: url("../img/sms_btn_hover.png") no-repeat 0 0;
}
#datetime {
	display: block;
	text-align: center;
	margin-top: 5px;
}
#datetime span {
	text-transform: uppercase;
	font-family: 'Roboto Slab', serif;
	text-shadow: 1px 1px 1px #000;
	font-size: 1.5em;
	font-weight: bold;
}
.counter {
	margin: 60px auto 0;
	text-align: center;
}
.counter p {
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	color: #334960;
	font-family: 'Seymour One', sans-serif;
	font-size: 2em;
	margin: 0 4px;
	display: inline-block;
	padding: 10px 20px;
	box-shadow: 0 0 10px #334960;
	min-width: 60px;
}
.counter p small {
	font-size: 0.4em;
}
.fixed {
  position:fixed;
  top:0;
  /*left: 27%;*/
  z-index:99999;
  /*width: 45% !important;
  margin: 0 auto;*/
  margin: 0;
  background: #24374b;
  color: #fff !important;
  border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  box-shadow: 0 0 5px #000;
  -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.counter.fixed p {
	color: #fff;
	box-shadow: none;
}
.blue article p.first {
	margin-top: 40px;
}
div.person {
	margin: 20px 0;
	text-align: justify;
	text-shadow: 1px 1px 1px #000;
}
.person img {
	width: 140px;
	margin: 0 auto 10px;
	display: block;
}
.person img.big {
	width: 220px;
}
div.person_all {
	text-align: justify;
	text-shadow: 1px 1px 1px #000;
}
div.person_all img {
	border: 1px solid #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
div.person_all img.right {
	float: right;
	margin: 10px 0 10px 15px;
}
div.person_all img.left {
	float: left;
	margin: 10px 15px 10px 0;
}
div.person_all .images {
	text-align: center;
}
div.person_all .images div {
	margin: 10px 5px;
	color: #fff;
	font-size: .7em;
	text-align: center;
	height: 242px;
	width: 274px;
	float: left;
}
div.person_all .images div.big {
	width: 48%;
}
div.person_all .images img {
	max-height: 180px;
	display: block;
	margin: 0 auto;
}
div.person_all p {
	margin: 15px 0;
}
p.person.left {
	text-align: left;
}
p.person.left img {
	float: left;
	margin: 0 25px 10px 20px;
	border: 1px solid #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.third .more {
	float: left;
	margin-top: 20px;
} 
p.person.right {
	text-align: right;
}
p.person.right img {
	float: right;
	margin: 0 20px 10px 25px;
	border: 1px solid #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.fourth .more {
	float: right;
	margin-top: 60px;
} 
.green article p,
.green article div {
	color: #334960;
	font-weight: bold;
}
.dark.second div {
	float: left;
	width: 75%;
	margin-right: 20px;
	text-align: left;
}
.seventh p {
	padding-right: 20px;
}
.seventh p.first {
	margin: 10px 0 30px;
}
.seventh p span {
	color: #334960;
	font-weight: bold;
}
.seventh p a {
	color: #334960;
	font-weight: bold;
}
.seventh p a:hover {
	text-decoration: underline;
}
.sms_thanks {
	display: none;
}
footer p {
	font-size: 1.2em;
}
form div.payment {
	width:49%;
	float: left;
	margin: 20px 0;
	position: relative;
}
form div.payment:last-child {
	border-left: 1px solid #2f82a0;
}
form div.payment small {
	font-size: .7em;
	display: block;
	text-align: center;
	margin-bottom: 5px;
	position: relative;
}
form div.payment span {
	position: relative;
}
.payment .special.big {
	display: block;
	width: 21px;
	height: 20px;
	line-height: 20px;
	background: url("../img/special_offer_small.png") no-repeat 0 0;
	position: absolute;
	left: 25%;
}
.payment .special.small {
	display: block;
	width: 21px;
	height: 20px;
	line-height: 20px;
	background: url("../img/special_offer.png") no-repeat 0 0;
	position: absolute;
	top: 0;
	left: -23px;
}



/* buttons */
a.more, 
a.back {
	width: 25%;
	margin: 10px auto;
	background: #fff;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	display: block;
	margin-top: 35px;
	font-size: 1em;
	padding: 7px 0;
	font-weight: bold;
	border: 2px solid #fff;
}
a.more span,
a.back span {
	padding: 0 0 5px;
	display: inline-block;
}
a.more.big {
	text-align: center;
	color: #3c8eb3;
	font-size: 1.5em;
	width: 15%;
}
a.more.big:hover {
	background: none;
	color: #fff;
}
a.back {
	color: #334960;
}
a.more.blue {
	color: #334960;
	border: 1px solid #334960;
}
a.more.lightblue {
	color: #3c8eb3;
	border: 1px solid #3c8eb3;
	width: 45%;
	float: left;
}
a.more.green {
	color: #32ac97;
	border: 1px solid #32ac97;
}
a.more.blue span {
	background: url("../img/arrow_blue.png") no-repeat right center;
	padding-right: 30px;
}
a.more.lightblue span {
	background: url("../img/arrow_lightblue.png") no-repeat right center;
	padding-right: 30px;
}
a.more.green span {
	background: url("../img/arrow_green.png") no-repeat right center;
	padding-right: 30px;
	color: #32ac97;
}
a.more.green:hover span {
	color: #fff;
}
a.more:hover {
	color: #fff;
}
a.more:hover span {
	background: url("../img/arrow.png") no-repeat right center;
}
a.more.blue:hover {
	background: #334960;
	border: 1px solid #fff;
}
a.more.lightblue:hover {
	background: #3c8eb3;
	border: 1px solid #fff;
}
a.more.green:hover {
	background: #32ac97;
	border: 1px solid #fff;
}
a.back.blue span {
	background: url("../img/arrow_blue_left.png") no-repeat left center;
	padding-left: 30px;
}
a.back.green span {
	background: url("../img/arrow_blue_left.png") no-repeat left center;
	padding-left: 30px;
}
a.back.blue:hover {
	background: #334960;
	color: #fff;
}
a.back.green:hover {
	background: #32ac97;
	color: #fff;
}
a.back:hover span {
	background: url("../img/arrow_left.png") no-repeat left center;
}

/* form */
form {
	width: 60%;
	margin: 5px auto;
}
form.sms_form {
	margin-top: 100px;
}
form label {
	font-size: 0.8em;
	cursor: pointer;
	display: block;
	margin-bottom: 8px;
	text-align: left;
	font-weight: bold;
}
form label .error {
	display: inline;
	margin-left: 5px;
	font-size: 0.8em;
	color: #990101;
	visibility: hidden;
}
form label.check {
	float: left;
	line-height: 18px;
}
form div a {
	color: #334960;
}
form div a:hover {
	text-decoration: underline;
}
form input[type="text"], 
form input[type="password"] {
	border-radius: 5px;
	border: none;
	background: #fff;
	padding: 2px 5px;
	width: 100%;
	display: block;
	margin-bottom: 15px;
	height: 30px;
	color: #334960;
}
form.sms_form input[type="text"] {
	width: 80%;
} 
form.sms_form input[type="submit"] {
	width: 83%;
	background: #334960;
}
form.sms_form input[type="submit"]:hover {
	background: none;
}
form input[type="submit"] {
	width: 118px;
	border: none;
	color: #fff;
	display: block;
	margin: 0 auto 15px;
	height: 31px;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
	font-size: 1.2em;
	font-family: 'Exo 2', sans-serif;
	padding: 0;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
form input[type="submit"]#epay_btn {
	background: url("../img/epay.png")  no-repeat center center;
}
form input[type="submit"]#epay_btn:hover {
	box-shadow: 0 0 5px #00283f;
}

form input[type="submit"]#paypal_btn {
	background: #334960 url("../img/paypal.png")  no-repeat center center;
}
form input[type="submit"]#paypal_btn:hover {
	color: #334960;
	background: url("../img/paypal.png")  no-repeat center center transparent;
}

form input[type="submit"]#yesspay_btn {
	background: #334960 url("../img/sms.png")  no-repeat center center;
}
form input[type="submit"]#yesspay_btn:hover {
	color: #334960;
	background: url("../img/sms.png")  no-repeat center center transparent;
}
form input[type="submit"].send_report {
	background: #334960;
}
form input[type="submit"].send_report:hover {
	background: none;
}
.checkbox {
	background: url('../img/checkbox.png') no-repeat;
	clear: left;
	display: block;
	float: left;
	height: 18px;
	width: 18px;
	margin-right: 10px;
	cursor: pointer;
	margin-top: 1px;
}

.report {
	width: 80%;
	margin: 20px auto;
	border-collapse: collapse;
	color: #fff;
	font-size: 1.2em;
}
.report td {
	padding: 5px 10px;
	border: 1px solid #334960;
}
#paypal-wrapper {
	cursor: pointer;
}

/* audio */
p.audio {
	margin: 30px 0 0;
}
p.audio small{
	font-size: 0.8em;
	margin-bottom: 5px;
	display: block;
}
audio {
	background-color: rgb(51, 73, 96);
	display: block;
	margin: 0 auto;
}
audio::-webkit-media-controls-timeline {
	background: #3b8fb4;
	border-radius: 3px;
}

@media (max-width: 1280px) {
	section.third article, 
	section.fourth article {width: 70%;}
	header,	article, footer {width: 70%;}
	h1{font-size: 2.5em;}
	h2{font-size: 1.5em;}
	header h2 {
		font-family: 'Comfortaa', cursive;
		font-size: 3em;
	}
	form {
		width: 60%;
	}
	.logo {
		position: static;
		display: block;
		margin: 0 auto;
	}
	a.more, a.back{
		font-size: 0.8em;
		width: 30%;
	}
	div.person_all p {
		font-size: 0.9em;
	}
	section.second {padding: 15px 0;}
	.payment .special.big {left: 22%;}
}

@media (max-width: 768px) {
	section.third article, 
	section.fourth article {
		width: 95% !important;
	}
	header, article, footer {
		width: 90% !important;
	}
	h1{font-size: 2.5em;}
	h2 {
		font-size: 1.5em;
	}
	header h2 {
		font-family: 'Comfortaa', cursive;
		font-size: 2em;
	}
	form {
		width: 80%;
	}
	.logo {
		position: static;
		display: block;
		margin: 0 auto;
	}
	a.more, a.back{font-size: 0.8em;width: 30%;}
	div.person_all p {font-size: 0.9em;}
	section.second {padding: 15px 0;}
	.payment .special.big {left: 18%;}
}

@media (max-width: 480px) {
	section.third article, 
	section.fourth article {width: 95% !important;}
	header, article, footer {width: 95%;}
	h1{font-size: 2em; margin:7px 0;}
	h2 {font-size: 1em; margin:6px 0;}
	h3 {font-size: 1em;}
	header h2 {font-size: 1.5em; margin-top:5px;}
	header p{font-size: 1.5em; margin-top:10px;}
	form {width: 100%;}
	.checkbox{margin-right: 2px;}
	form label {position: relative;}
	form label.check {font-size: .57em;}
	form input[type="text"], form input[type="password"] {width: 97% !important;}
	form input[type="submit"] {width: 100%;}
	form label .error {font-size: 0.8em; position: absolute; left: 0;top: 62px;visibility: hidden;width: 100%;}
	audio {width: 90%;}
	div.theproject {width: 95%; margin-bottom: 10px; float: none; padding-bottom: 20px; border-bottom: 1px solid #2f82a0; border-right: none;}
	a.more.lightblue, a.more.blue, a.more.green {width: 55%; float: none; margin-top: 10px !important;}
	div.donation{width: 95%; text-align: center;}
	.counter{margin: 10px auto 20px;text-align: center;}
	.counter p{font-size: 1.6em;}
	.theproject p {text-align: center;}
	.second .arrow, .fourth .arrow {left: 160px !important;}
	.logo {
		position: static;
		display: block;
		margin: 0 auto;
	}
	a.more, a.back{
		font-size: 0.8em;
		width: 30%;
	}
	div.person_all p {font-size: 0.9em;}
	section.second {padding: 10px 0;}
	.second .arrow {left: 206px;}
	.fixed {left: 0; top: -10px;width: 100% !important; font-size: 0.8em;}
	p.person.left img, p.person.right img {display: block; float: none; margin: 5px auto;}
	p.person.right, p.person.left {text-align: center;}
	.third article:after {bottom: -89px;}
	article, header p {font-size: 1.6em; line-height: 1.4em !important;}
	h3 span {line-height: 30px;}
	.payment span {font-size: .6em; width: 120px; }
	.payment .special.big {left: 10%;}
	.payment .special.small { background: url("../img/special_offer_small.png") no-repeat 5px 0;}
}
