/*
1d70b8
*/
* { box-sizing:border-box; }
body { margin:0; padding:0; background:#ffffff; }
.clearfix { clear:both; }

.shell { margin:0 auto; width:100%; max-width:1400px; }

h1,h2,h3,p,li,span,div,a,button,input,select { font-family: "Afacad Flux", sans-serif; }

#top-bar { z-index:100; width:100%; position:fixed; top:0; left:0; height:86px; background:#1d70b8; display:flex; align-items:center; }
#top-bar .shell { display:flex; justify-content:space-between; align-items:center; }
#logo { width:350px; filter: brightness(7.1); }
ul#menu { margin:0; padding:0; display:flex; align-items:center; }
ul#menu li { list-style:none; padding:0 15px; }
ul#menu li a { transition:all 200ms ease; color:#ffffff; text-decoration:none; font-size:18px; }
ul#menu li a:hover { color:#202020; }
ul#menu li.donate a { font-weight:bold; display:block; transition:all 200ms ease; background:#202020; padding: 10px 22px; color:#ffffff; }
ul#menu li.donate a:hover { background:#ffffff; color:#202020; }

.picture-container { margin-top:86px; width:100%; height: 840px; overflow:hidden; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; }
.picture-container .picture { animation: appear 1.2s forwards; animation-delay: 1s;  opacity:0; background:url(/images/picture2.jpg); background-size:cover; background-position:center; width:100%; height: 840px; position:absolute;top:0;left:0; z-index:-1; }
.picture-container h1 { position:relative; top:20px; opacity:0; animation: appeartitle 1.2s forwards; animation-delay: 1.5s; color: #ffffff; font-size: 90px; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); text-align: center; margin:0 0 64px; line-height:95px; }
.picture-container h2 { position:relative; top:20px; opacity:0; animation: appeartitle 1.2s forwards; animation-delay: 1.7s; color: #ffffff; font-size: 60px; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); text-align: center; margin:0; line-height:50px; }
.picture-container .btn { animation: appeartitle 1.2s forwards; animation-delay: 1.9s; position:relative; top:20px; opacity:0; transition:all 200ms ease; display:inline-block; text-decoration:none; padding:10px 21px 12px 21px; font-size:25px; background:#1d70b8; color:#ffffff; margin-top:80px; }
.picture-container .btn:hover { background:#ffffff; color:#202020; }

section .btn { font-size:20px; letter-spacing:0.3px; font-weight:400; display:inline-block; transition:all 200ms ease; background:#1d70b8; padding: 10px 22px; color:#ffffff; text-decoration:none; }
section .btn:hover { background:#202020; }

section.mission .btn { background:#ffffff; padding: 10px 22px; color:#1d70b8; text-decoration:none; }
section.mission .btn:hover { background:#202020; color:#ffffff; }

@keyframes appear {
	0% {
		opacity : 0;
		transform : scale(1);
	}
	100% {
		opacity : 1;
		transform : scale(1.05);
	}
}
@keyframes appeartitle {
	0% {
		opacity : 0;
		top : 20px;
	}
	100% {
		opacity : 1;
		top: 0;
	}
}

h1 { font-size:55px; margin-top:0; }
h2 { font-size:42px; margin-top:0; padding-top:0; }
p { font-weight:200; font-size:20px; line-height:30px; letter-spacing:0.2px; }
.content a { color:#1d70b8; text-decoration:none; }

section.about-us { padding:80px 0; }
section.about-us img { float:right; width:500px; height:420px; margin-left:32px; }

section.mission { padding:80px 0; background:#1d70b8; color:#ffffff; }
section.mission h2 { text-align:center; }
section.mission img { float:right; width:500px; height:420px; margin-left:32px; }

section.impact { padding:80px 0; }
section.impact img { float:left; width: 600px; height: 321px; margin-right:32px; }

section.news { padding:0; }
section.news .news-list { display:flex; justify-content:space-between; }
section.news .news-list .item { width:440px; box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.12); }
section.news .news-list .item > div { padding:29px 34px 34px 34px; }
section.news .news-list .item .image { background-size:cover !important; background-position:center center !important; width:100%; height:320px; }
section.news .news-list .item .title { margin-top:0px !important; margin-bottom:10px; font-size:23px; font-weight:500; }
section.news .news-list .item p { margin-top:14px;  }
section.news .shell { border-top:1px solid #dfdfdf; padding-top:80px; padding-bottom:80px; }
section.news .shell h2 { text-align:center; }
section.news .shell > .btn { margin-top:70px; float:right; }

footer { width:100%; background:#202020; color:#ffffff; }
footer .shell { display:flex; justify-content:space-between; padding:50px 0; }
footer .shell > div:nth-child(1){ width:570px; }
footer .shell p { margin-top:0; margin-bottom:0; }
footer .shell > div:nth-child(2){ width:350px; display:flex; flex-wrap:wrap; }
footer .shell > div:nth-child(2) a { transition:color 200ms ease; display:block; width:50%; color:#ffffff; text-decoration:none; font-weight:200; font-size:20px; line-height:30px; letter-spacing:0.2px; }
footer .shell > div:nth-child(2) a:nth-child(4) { font-weight:bold; }
footer .shell > div:nth-child(2) a:hover { color:#1d70b8; }

.fadethisdiv { opacity: 0; transform: translateY(250px); transition: all 1200ms ease; }
.fadethisdiv.is-visible { opacity: 1; transform: none; }

.shell.content { padding:80px 0; }
.header-spacer { height:86px; }

img.float-right { max-width:600px; float:right; margin-left:35px; }

select { background:#ffffff; padding:10px 14px; border-radius:3px; border:1px solid #dfdfdf; font-size:20px; }
input[type=number] { font-size:20px;  background:#ffffff; padding:10px 14px; border-radius:3px; border:1px solid #dfdfdf; }
#custom-amount-div label { display:block; margin-top:10px; font-weight: 200; font-size: 20px; line-height: 30px; letter-spacing: 0.2px; }
form button { font-size:20px;  cursor:pointer; border:0; font-weight: bold; display: block; transition: all 200ms ease; background: #1d70b8; padding: 10px 22px; color: #ffffff; }
form button:hover { background:#202020;  }