/* ================================================================ *\
	#Base
\* ================================================================ */

html,
body { height: 100%; font-family: 'Open Sans', sans-serif; font-size: 18px; line-height: 28px; }

.wrapper { position: relative; min-height: 100%; width: 100%; }

.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }

.clearfix::before,
.clearfix::after { content: " "; display: table; }
.clearfix::after { clear: both; }


/* ================================================================ *\
	#Header
\* ================================================================ */

header { width: 100%; height: 50px; font-size: 16px; background-color: #222933; color: #ffffff; }

header .logo { float: left; }
header .logo img { margin-left: 20px; margin-top: 13px; }

/* ================================================================ *\
	#Teaser
\* ================================================================ */

.teaser { width: 100%; height: 600px; font-size: 16px; background-color: #0099cc; color: #ffffff; background-image: url(/images/slide_background.jpg);}

.teaser .slide { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin: 0 auto; max-width: 1240px; text-align: center; }

.teaser .title { font-size: 80px; line-height: 100px; display: block; }
.teaser .title_sub { font-size: 40px; line-height: 60px; display: block; }

.teaser .actions { margin: 40px auto 0 auto; width: 180px; text-align: center; } 
.teaser .button { background-color: #222933; color: #ffffff; width: 180px; display: block; float: left; padding: 10px 20px 10px 10px; margin: 0 20px; }


/* ================================================================ *\
	#Content
\* ================================================================ */

main { }

.content { margin: 80px; }
.content .article { margin: 0 auto; max-width: 1240px; }

.content .image-left { float: left; padding-right: 40px; }
.content .article-text { overflow: auto;}

.content h1 { font-weight: normal; font-size: 40px; line-height: 60px; color: #222933; }
.content h2 { font-weight: normal; font-size: 30px; line-height: 50px; color: #222933; }

.content p { margin-top: 20px; color: #222933; }

.donation { margin: 80px; }
.donation .article { margin: 0 auto; max-width: 1240px; text-align: center; }

.donation h1 { font-weight: normal; font-size: 40px; line-height: 60px; color: #222933; }
.donation h2 { font-weight: normal; font-size: 30px; line-height: 50px; color: #222933; }

.donation p { margin-top: 20px; color: #222933; }

.donation .button { margin-top: 20px; }


/* ================================================================ *\
	#Footer
\* ================================================================ */


footer { border-top: 1px solid #ccc; }

.footer { margin: 0 80px; }
.footer .inner { margin: 20px auto; max-width: 1240px; text-align: center; }

.footer h5 { font-weight: bold; font-size: 14px; line-height: 20px; color: #666; }
.footer h6 { font-weight: bold; font-size: 14px; line-height: 20px; color: #666; }

.footer p { font-size: 14px; line-height: 20px; color: #666; }

.footer span { font-weight: bold; font-size: 14px; line-height: 20px; color: #666; }

.socials { margin: 20px 0px; padding: 0 0 20px 0; }
.socials img { }



@media (max-width: 768px){
	.teaser .title { font-size: 60px; line-height: 70px; display: block; }
	.teaser .title_sub { font-size: 30px; line-height: 40px; display: block; }
	
	.content { margin: 40px 20px; }
	
	.content .image-left { padding-right: 20px; }
	.content .image-left img { max-width: 180px }
	
	.content h1 { font-weight: normal; font-size: 20px; line-height: 28px; color: #222933; }
	.content h2 { font-weight: normal; font-size: 20px; line-height: 28px; color: #222933; }
	
	.content p { font-size: 14px; line-height: 20px; margin-top: 10px; color: #222933; }
	
	.donation { margin: 40px 20px; }
	.donation h1 { font-weight: normal; font-size: 20px; line-height: 28px; color: #222933; }
	.donation h2 { font-weight: normal; font-size: 20px; line-height: 28px; color: #222933; }
	
	.donation p { font-size: 14px; line-height: 20px; margin-top: 10px; color: #222933; }
	
	.donation .button { margin-top: 10px; }
	
	.footer { margin: 0 20px; }
	.footer h5 { font-weight: bold; font-size: 10px; line-height: 16px; color: #666; }
	.footer h6 { font-weight: bold; font-size: 10px; line-height: 16px; color: #666; }
	
	.footer p { font-size: 10px; line-height: 16px; color: #666; }
}


@media (max-width: 480px){
	header .logo { float: none; margin: 0 auto; width: 182px; }
	header .logo img { margin: 13px 0 0 0;}
	
	.teaser .actions { margin: 0 auto; width: 180px; text-align: center; } 
	.teaser .button { float: none; padding: 10px 20px 10px 10px; margin: 20px 0; }
	
	.content .image-left { float: none; padding: 0 0 20px 0; text-align: center; }	
	.content .image-left img { max-width: 320px }
}