/*
Theme Name: Peng
Author: Philipp Fisch
Description: Peng WordPress Theme
*/

/* --------------------------------------------------
   reset
-------------------------------------------------- */

* { 
	box-sizing:border-box;
	outline:0;
}

html { 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }


ul { list-style: none; }
ol  { padding-left: 40px; }

table {
	border-collapse: collapse;
	border-spacing: 0;
}

code {
    font-family: monospace;
}





/* --------------------------------------------------
   font import
-------------------------------------------------- */

@font-face {
    font-family: 'Abril Fatface';
    src: url('fonts/abrilfatface/abrilfatface-regular-webfont.eot');
    src: url('fonts/abrilfatface/abrilfatface-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/abrilfatface/abrilfatface-regular-webfont.woff2') format('woff2'),
         url('fonts/abrilfatface/abrilfatface-regular-webfont.woff') format('woff'),
         url('fonts/abrilfatface/abrilfatface-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Alegreya';
    src: url('fonts/alegreya/alegreya-regular-webfont.eot');
    src: url('fonts/alegreya/alegreya-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/alegreya/alegreya-regular-webfont.woff') format('woff'),
         url('fonts/alegreya/alegreya-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Alegreya';
    src: url('fonts/alegreya/alegreya-italic-webfont.eot');
    src: url('fonts/alegreya/alegreya-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/alegreya/alegreya-italic-webfont.woff') format('woff'),
         url('fonts/alegreya/alegreya-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Alegreya';
    src: url('fonts/alegreya/alegreya-bold-webfont.eot');
    src: url('fonts/alegreya/alegreya-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/alegreya/alegreya-bold-webfont.woff') format('woff'),
         url('fonts/alegreya/alegreya-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Alegreya';
    src: url('fonts/alegreya/alegreya-bolditalic-webfont.eot');
    src: url('fonts/alegreya/alegreya-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/alegreya/alegreya-bolditalic-webfont.woff') format('woff'),
         url('fonts/alegreya/alegreya-bolditalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat/montserrat-extrabold-webfont.eot');
    src: url('fonts/montserrat/montserrat-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/montserrat/montserrat-extrabold-webfont.woff2') format('woff2'),
         url('fonts/montserrat/montserrat-extrabold-webfont.woff') format('woff'),
         url('fonts/montserrat/montserrat-extrabold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}






/* --------------------------------------------------
   typography
-------------------------------------------------- */

html {
	font-size:15px;
}

	@media only screen and (min-width :  600px) { html { font-size:16px; } }
	@media only screen and (min-width :  800px) { html { font-size:17px; } }
	@media only screen and (min-width : 1000px) { html { font-size:18px; } }
	@media only screen and (min-width : 1200px) { html { font-size:19px; } }

body {
	font-family:'Alegreya','Georgia',serif;
	color:hsl(0,0%,18%);
	font-size:1rem;
	line-height:1.6;
	min-height:100vh;
}

h1, h2, h3, h4, .headline {
	font-family:'Abril Fatface','Georgia',serif;
	line-height:1;
	font-weight:700;
}

h1 {
	font-size:2.7rem;
	margin-bottom:.7em;
}

h2 {
	font-size:2.1rem;
	margin-bottom:.8em;
}

h2:not(:first-child) {
	margin-top:.666em;
}

h3 {
	font-size:1.3rem;
}

h4 {
	font-size:.9rem;
}

p {
	margin:1em 0;
}

p:first-child {
	margin-top:0;
}

p:last-child {
	margin-bottom:0;
}

.lead {
	font-size:1.2rem;
	font-style:italic;
	line-height:1.5;
	padding:1rem 0;
}

a {
	text-decoration:none;
	font-weight:bold;
}

.button {
	display:inline-block;
	color:white;
	padding:1rem;
	font-size:.8rem;
	margin-top:1rem;
	font-style:italic;
	font-weight:bold;
	transition:all .3s ease;
}

.button > a {
	color:white;
}


b, strong {
	font-weight:bold;
}

ul {
	list-style: inside;
}

::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
	font-style:italic;
}

.twitter-tweet {
	margin-left:auto;
	margin-right:auto;
}





/* --------------------------------------------------
   general layout
-------------------------------------------------- */

body {
	padding-top:3rem;
}

.content {
	margin:0 auto;
}

.content-maxwidth {
	max-width:1000px;
}






/* --------------------------------------------------
   header
-------------------------------------------------- */

header {
	background:hsl(0,0%,10%);
	position:fixed;
	top:0;
	left:0;
	right:0;
	padding:1rem 2rem;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
	z-index:10;
}

.admin-bar header {
	top:46px;
}

@media only screen and (min-width :  782px) { 
	.admin-bar header {
		top:32px;
	}
}

	.header-logo {
		color:white;
		font-size:1rem;
		padding-bottom:1.5rem;
	}

	.header-nav {
		display:flex;
		flex-wrap:wrap;
		flex-direction:row;
	}

		.header-nav ul {
			list-style:none;
			padding: 0;
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
		}

			.header-nav li {
			}

				.header-nav a {
					display:block;
					font-size:.9rem;
					padding:.2rem .5rem;
					line-height:1.2;
					color:white;
					opacity:.5;
					transition:all .3s ease;
				}

				.header-nav a:hover {
					opacity:1;
				}

@media only screen and (min-width :  800px) { 
	header {
		flex-direction:row;
	}

	.header-logo {
		padding:0;
	}
}





/* --------------------------------------------------
   footer
-------------------------------------------------- */

footer {
	background:hsl(0,0%,10%);
	color:white;
	text-align:center;
	padding:1rem;
}

	.newsletter {
		margin:2rem 0;
	}

		.newsletter-description {
			margin-bottom:1.5rem;
		}

		.newsletter-form {
			display:flex;
			max-width:30rem;
			margin:0 auto;
			border:5px solid #333;
		}

			.newsletter-form input {
				font-family:'Alegreya','Georgia',serif;
				border:none;
			}

			.newsletter-form input.email {
				flex:1;
				padding:1rem;
				background:#666;
				font-size:1rem;
				color:#fff;
			}

			.newsletter-form input.submit {
				margin-top:0;
				cursor:pointer;
				padding:1rem 2rem;
			}

		.newsletter-success {
			display:none;
		}

	.penguinfooter {
			display:flex;
			max-width:26rem;
			margin:2rem auto;
			align-items:center;
			color:white;
			cursor:pointer;
	}

		.penguinfooter-img {
			width:20%;
			z-index:1;
			position: relative;
			border-radius:50%;
			border-width:5px;
			border-style:solid;
			box-shadow:0 0 3px rgba(0,0,0,.5);
			overflow:hidden;
			transition:all .2s ease;
		}

			.penguinfooter-img img {
				display:block;
				width:100%;
				height:auto;;
				transition:all .2s ease;
			}

			.penguinfooter:hover .penguinfooter-img img {
				transform:scale(1.15) translateY(-5px);
			}

		.penguinfooter-text {
			padding:1rem 2rem 1rem 2.5rem;
			transform:translateX(-1rem);
			text-shadow:0 1px 2px rgba(0,0,0,.5);
			transition:all .2s ease;
		}

	footer p {
		margin:0;
	}





/* --------------------------------------------------
   front-page
-------------------------------------------------- */

.home {
}

	.home-slogan {
		width:100vw;
		height:calc(100vh - 3rem);
		display:flex;
		align-items:center;
	}	

		.home-slogan-text {
			font-size:3rem;
			line-height:.9;
			margin:0;
			padding:0 4rem;
			max-width:56rem;
			transform:translateY(-3rem);
		}

		@media only screen and (min-width :  600px) { .home-slogan-text { font-size:3rem; } }

		@media only screen and (min-width :  900px) { .home-slogan-text { font-size:3rem; } }

		@media only screen and (min-width : 1200px) {  .home-slogan-text { font-size:3.2rem; } }

		.home-slogan-text strong {
			color:white;
		}

	.home-video {
		padding:2rem;
		background-color:#292929;
	}

	.home-video-content {
		max-width:40rem;
		margin:0 auto;
	}

		.home-video-content-embed {
			position: relative;
			padding-bottom: 56.25%;
			height: 0;
		}

			.home-video-content-embed iframe, .home-video-content-embed object, .home-video-content-embed embed {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

	.home-intro {
		background:white;
		padding:5rem 0;
	}

		.home-intro-content {
			max-width:42rem;
			margin:0 auto;
			padding:1rem;
		}

	
		@media only screen and (min-width :  800px) { 
			.home-intro-content {
				padding:2rem;
			}
		}

			.home-intro-content h1 {
				text-align:center;
				margin-bottom:3rem;
			}



	.home-latest {
		padding:4rem 2rem;
		background:#333;
		text-align:center;
	}

		.home-latest > h3 {
			color:white;
			opacity:.8;
			margin:3rem 0;
		}



	.latest {
		list-style:none;
		margin:0 auto;
		max-width:26rem;
	}

		.latest-item {
			border-bottom:1px solid #999;
			padding:1.5rem 0;
			text-align: center;
		}

		.latest-item:last-child {
			border-bottom:none;
		}

			.latest-item-image {
				background-size:cover;
				background-position:center center;
				padding-bottom:60%;
				margin-bottom:1rem;
			}

			.latest-item-text {
				color:white;
			}

				.latest-item-text h2 {
					font-size:.1.6rem;
					margin-bottom:0;
				}

				.latest-item-text-date {
					font-style:italic;
					font-size:.8rem;
					margin-bottom:1rem;
					opacity:.7;
				}

				.latest-item-text-description {
					font-size:.9rem;
				}
	
	@media only screen and (min-width :  600px) { 

		.latest {
			max-width:48rem;
		}

			.latest-item {
				display:flex;
				text-align: left;
				max-width:100%;
				margin:2rem 0;
			}

				.latest-item-image {
					flex-basis:60%;
					padding:0;
					margin-bottom:0;
				}

				.latest-item-text {
					flex-basis:40%;
					padding-left:1.5rem;
				}

		}
	
	@media only screen and (min-width :  900px) { 

		.latest {
			display:flex;
			flex-direction:row;
			max-width:68rem;
		}

			.latest-item {
				display:block;
				flex-basis:33.33%;
				border-right:1px solid #999;
				border-bottom:none;
				text-align:center;
				padding:0 1.5rem;
			}
			
			.latest-item:last-child {
				border-right:none;
			}

				.latest-item-image {
					padding-bottom:50%;
					margin-bottom:1rem;
				}

				.latest-item-text {
					padding:0;
				}


		}





/* --------------------------------------------------
   page
-------------------------------------------------- */

.single-page {
}

	.page-image {
		background-size:cover;
		background-position:50% 50%;
		padding-bottom:66%;
	}

	.page-content {
		max-width:42rem;
		margin:0 auto;
		padding:3rem 1rem;
	}

		.page-content h1 {
			text-align:center;
			margin-bottom:4rem;
		}

	
		@media only screen and (min-width :  800px) { 
			.page-image {
				padding-bottom:40%;
			}
			.page-content {
				padding:6rem 2rem;
			}
		}





/* --------------------------------------------------
   blog
-------------------------------------------------- */

.blog {
	list-style:none;
}

	.blog li {
		margin:2rem auto;
		max-width:72rem;
	}

		.blogpost-img {
		}

			.blogpost-img-thumbnail {
				background-size:cover;
				background-position:50% 50%;
				padding-bottom:50%;
				z-index:0;
			}

		.blogpost-content {
			padding:2rem;
			z-index:1;
		}

			.blogpost-content-date {
				margin-bottom:1rem;
				font-size:.9rem;
			    opacity: 0.85;
			}

			.blogpost-content h2 {
				margin-top:.4rem;
			}

				.blogpost-content a.title {
					color:inherit;
				}

				.blogpost-content a.button {
					display:none;
				}
			
	
		@media only screen and (min-width :  600px) { 
			.blog li {
				display:flex;
				padding:0 2rem;
				margin:3rem auto;
			}

			.blog li:nth-child(even) {
				flex-direction:row-reverse;
			}

				.blogpost-img {
					width:40%;
				}

					.blogpost-img-thumbnail {
						padding-bottom:100%;
					}

				.blogpost-content {
					width:60%;
					padding:2rem 0 0 2rem;
				}

				.blog li:nth-child(even) .blogpost-content {
					text-align:right;
					padding:2rem 2rem 0 0;
				}

					.blogpost-content-date {
						margin-bottom:1.5rem;
					    border-bottom:1px solid rgba(0,0,0,.35);
					}

					.blogpost-content a.button {
						display:inline-block;
					}
		}
			
	
		@media only screen and (min-width :  720px) { 

				.blogpost-img {
					width:50%;
				}

					.blogpost-img-thumbnail {
						padding-bottom:75%;
					}

				.blogpost-content {
					width:50%;
				}
		}
			
	
		@media only screen and (min-width :  960px) { 

				.blogpost-img {
					width:60%;
				}

					.blogpost-img-thumbnail {
						padding-bottom:50%;
					}

				.blogpost-content {
					width:40%;
				}
		}





/* --------------------------------------------------
   single-post
-------------------------------------------------- */

.post {
}

	.post-image {
		background-size:cover;
		background-position:50% 50%;
		padding-bottom:66%;
	}

	.post-content {
		max-width:42rem;
		margin:0 auto;
		padding:1rem;
	}

		.post-content-date {
			text-align:center;
			font-weight:bold;
		    opacity: 0.85;
		}

		.post-content h1 {
			text-align:center;
			margin-bottom:4rem;
		}
			
	
		@media only screen and (min-width :  800px) { 

			.post-image {
				padding-bottom:40%;
			}

			.post-content {
				padding:2rem;
			}
		}

.postnav {
	margin-top:2rem;
}

	.postnav ul {
		display:flex;
		list-style: none;
	}

	.postnav li {
		padding:2rem;
		font-style: italic;
		flex:1;
	}

		.postnav li a {
			display:block;
			color:inherit;
			font-style: normal;
		}

	.postnav-next {
	}

	.postnav-back {
		text-align:center;
	}

		.postnav-back a {
			display:block;
			padding:2rem;
			color:inherit;
			font-style: italic;
			font-weight:normal;
		}





/* --------------------------------------------------
   campaigns
-------------------------------------------------- */

ul.campaigns {
	list-style:none;
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	background:#666;
}

	.album {
		perspective:1000;
		-webkit-perspective: 1000;
	}

	.album:hover {
		z-index:1;
	}

		.album-cover {
			width:80vw;
			height:80vw;
			margin:3vw 10vw;
			position:relative;
			transition: 0.6s;
			transform-style: preserve-3d;
			box-shadow:0 0 .5rem rgba(0,0,0,.3);
		}

		@media only screen and (min-width :  500px) { 
			.album-cover { width:64vw; height:64vw; margin:4vw 16vw; }
		}
		@media only screen and (min-width :  600px) { 
			.album-cover { width:46vw; height:46vw; margin:1vw; }
		}
		@media only screen and (min-width :  900px) { 
			.album-cover { width:30.333vw; height:30.333vw;; }
		}
		@media only screen and (min-width :  1200px) { 
			.album-cover { width:22vw; height:22vw; }
		}
		@media only screen and (min-width :  1400px) { 
			.album-cover { width:18.5vw; height:18.5vw; margin:.5vw;  }
		}

		.album:hover .album-cover {
			transform: rotateY(180deg);
			transition:all .6s ease;
		}

			.album-cover > * {
				backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				position: absolute;
				top: 0; bottom: 0;
				left: 0; left: 0;
				box-shadow:inset 0 0 2.5rem rgba(0,0,0,.2), inset 0 .1rem .1rem rgba(255,255,255,.25);
			}

			.album-cover-front {
				width:100%;
				height:0;
				padding-bottom:100%;
				background-size:cover;
				background-position:50% 50%;
			}

			.album-cover-back {
				background:white;
				text-align:center;
				padding:1rem;
				transform: rotateY(180deg);
				display:flex;
				flex-direction:column;
				align-items:center;
				justify-content:center;
				width:100%;
				color:inherit;
				font-weight:normal;
			}

				.album-cover-back-excerpt {
					display:block;
					margin-top:1rem;
					font-size:.9rem;
					line-height:1.3;
				}

				.album-cover-back-date {
					margin-top:.3rem;
					font-style:italic;
					font-size:.8rem;
				}

			.album-cover-front {					
				z-index: 2;
				/* for firefox 31 */
				transform: rotateY(0deg);
			}





/* --------------------------------------------------
   campaigns (list)
-------------------------------------------------- */

/* temporary solution */
.campaignswrapper {
	background:#2f2f2f;
}

ul.campaignslist {
	list-style:none;
	max-width:128rem;
	margin:0 auto;
	padding:1rem;
}

	.campaignslist-item {
		border-bottom:1px solid #999;
		padding:1.5rem 0;
	}

		.campaignslist-item-image {
			background-size:cover;
			background-position:center center;
			padding-bottom:65%;
			margin-bottom:1.5rem;
		}

		.campaignslist-item-text {
			color:white;
			display:flex;
			flex-direction: column;
		}

			.campaignslist-item-text h2 {
				font-size:1.7rem;
				margin-bottom:0;
			}

			.campaignslist-item-text-date {
				font-style:italic;
				font-size:.8rem;
				margin-top:.4rem;
				opacity:.7;
			}

			.campaignslist-item-text-description {
				font-size:.9rem;
			}

			.campaignslist-item-text-readmore {
				margin-top:auto;
			}

			.campaignslist-item.featured .campaignslist-item-text h2 {
				font-size:3rem;
			}

			.campaignslist-item.featured .campaignslist-item-text-date {
				font-size:.9rem;
			}

			.campaignslist-item.featured .campaignslist-item-text-description {
				font-size:1.1rem;
			}

@media only screen and (min-width :   600px) { 

	ul.campaignslist {
		display:flex;
		flex-wrap: wrap;
		padding:2rem;
	}

		.campaignslist-item {
			flex-basis:calc(50%);
			min-height:20rem;
			border-right:1px solid #999;
		}

		.campaignslist-item:nth-child(odd) {
			padding:1.5rem 1.5rem 1.5rem 0;
		}

		.campaignslist-item:nth-child(even) {
			border-right:none;
			padding:1.5rem 0 1.5rem 1.5rem;
		}

		.campaignslist-item:last-child {
			border-bottom:none;
		}

		.campaignslist-item.featured {
			flex-basis:100%;
			min-height:30rem;
			padding:1.5rem 0;
			border-right:none;
		}

			.campaignslist-item-image {
				flex-basis:65%;
			}

			.campaignslist-item-text {
				flex-basis:35%;
			}

}

@media only screen and (min-width :   800px) { 

	.campaignslist-item.featured {
		display:flex;
		flex-direction:row-reverse;
	}

		.campaignslist-item-image {
			padding-bottom:50%;
		}

		.campaignslist-item.featured .campaignslist-item-image {
			padding-bottom:0;
			margin-bottom:0;
		}

		.campaignslist-item.featured .campaignslist-item-text {
			padding-right:2rem;
		}

}

@media only screen and (min-width :  1300px) { 

	.campaignslist-item {
		display:flex;
		flex-direction:row-reverse;
	}

		.campaignslist-item-image {
			margin-bottom:0;
		}

		.campaignslist-item-text {
			padding-right:2rem;
		}

}





/* --------------------------------------------------
   single-campaign
-------------------------------------------------- */

.campaign {
}

	ul.chapters {
		list-style: none;
	}

	.chapter-image {
		background-size:cover;
		background-position:50% 50%;
		padding-bottom:66%;
	}

	.chapter-content {
		padding:3rem 1rem;
		max-width:42rem;
		margin:0 auto;
	}

		.chapter-content .lead,
		.chapter-content h1 {
			text-align:center;
		}

		.chapter-content .fluid-width-video-wrapper {
			width:100%;
			margin:3rem 0;
		}
			
	
		@media only screen and (min-width :  800px) { 

			.chapter-image {
				padding-bottom:40%;
			}

			.chapter-content {
				padding:6rem 2rem;
			}
		}

	h2.press-headline {
		text-align:center;
	}

	ul.press-items {
		text-align:center;
		padding:0 2rem 3rem;
		list-style: none;
	}

		.press-item {
			display:inline-block;
			margin:.5rem;
		}

			.press-item a,
			.press-item img {
				display:block;
			}

			.press-item img {
				opacity:.7;
				transition:all .3s ease;
				height:30px;
				width:auto;
			}

			.press-item a:hover img {
				opacity:1;
			}





/* --------------------------------------------------
   workshops
-------------------------------------------------- */

.workshopslist {
	list-style: none;
	display:flex;
	max-width:80rem;
	margin:0 auto;
	padding:1rem;
	flex-wrap: wrap;
	justify-content:center;
}
			
	
	@media only screen and (min-width :  860px) { 

		.workshopslist {
			padding:2rem;
		}
	}

	.workshop {
		background:#dedede;
		margin:.75rem;
		width:19rem;
	}

		.workshop-duration {
			text-align:center;
			font-weight:bold;
			font-size:.8rem;
			padding:1rem;
			color:white;
		}

		.workshop-title {
			font-size:1.8rem;
			text-align:center;
			margin:0;
			padding:1.3rem;
			color:#666;
		}

		.workshop-description {
			font-size:.9rem;
			padding:1.5rem;
			color:#333;
		}




/* --------------------------------------------------
   penguins
-------------------------------------------------- */

.penguins-intro {
	text-align: center;
	padding:5rem 1rem;
	max-width:40rem;
	margin:0 auto;
}

ul.penguins {
	list-style:none;
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	margin-bottom:3rem;
}

	.penguins > li {
		padding:1rem;
	}

		.penguin {
			display:flex;
			width:18rem;
		}

			.penguin-type {
				width:4rem;
				height:4rem;
				flex-shrink:0;
				background-size:cover;
				background-position:50% 50%;
				margin-right:1.5rem;
				border-radius:50%;
				border-width:.15rem;
				border-style:solid;
			}

			a.penguin .penguin-type {
				color:white;
				text-align:center;
				font-size:3rem;
				line-height:4rem;
				font-weight:bold;
				transition:all .3s ease;
			}

			a.penguin:hover .penguin-type {
				transform:scale(1.1);
			}

			.penguin-text {
				color:hsl(0,0%,20%);
				padding-top: .5rem;
			}

				.penguin-text-name {
					font-size:1.1rem;
					margin-bottom:0;
				}

				.penguin-text-date {
					font-size:.75rem;
					line-height:1;
					color:hsl(0,0%,40%);
					margin-top:.3rem;
				}

				.penguin-text-job {
					font-size:.9rem;
					line-height:1;
					color:hsl(0,0%,40%);
					font-style:italic;
					margin:.5rem 0 0;
					word-wrap: break-word;
				}

				.penguin-text-job a {
					color:hsl(0,0%,40%);
				}





/* --------------------------------------------------
   become a penguin
-------------------------------------------------- */

.page-join {
	padding-top:4rem;
}

	.page-join .page-content {
		max-width:100%;
		padding:0;
	}

	.page-join .lead {
		text-align:center;
		margin-bottom:4rem;
	}

	form.join {

	}

		.form-width {
			width:100%;
			max-width:30rem;
			margin:0 auto;
		}

		form.join input[type=text] {
			display:block;
			width:100%;
			border:none;
			background:rgba(0,0,0,.05);
			font-size:1rem;
			font-family:'Alegreya',serif;
			margin:0.5rem 0;
			padding:1rem;
		}
		
		form.join input[type=text].formerror {
		    background: hsl(0, 100%, 97%);
	        border: 1px solid hsl(0, 29%, 57%);
		}

		form.join input[type=submit].disabled {
			display:none;
		}

		.join-type {
			padding:3rem 1rem;
		}

			.join-type-controls {
				display:flex;
				padding:1rem;
				align-items:center;
			}

				.join-type-controls a {
					display:block;
					font-size:4rem;
					flex-grow:1;
					cursor:pointer;
					color:#fff;
					opacity:.6;
					transition:all .3s ease;
				}

				.join-type-controls a:hover {
					opacity:1;
				}

				.join-type-controls-prev {
					text-align:left;
				}

				.join-type-controls-next {
					text-align:right;
				}

				.join-type-controls-img,
				.join-type-controls-img img {
				}

				.join-type-controls-img {
					position:relative;
					overflow:hidden;
					width:10rem;
					height:10rem;
					border-radius:50%;
					border-width:.25rem;
					border-style:solid;
					background-color:#fff;
				}

					.join-type-controls-img img {
						display:block;
						width:9.5rem;
						height:9.5rem;
						position:absolute;
						bottom:-100%;
						transition:all .3s ease;
					}

					.join-type-controls-img img.active {
						bottom:0;
					}

				.join-type select {
					display:none;
				}

			.join-type-indicator {
				list-style: none;
				text-align:center;
				margin-bottom:3rem;
			}

				.join-type-indicator li {
					display:inline-block;
					width:.5rem;
					height:.5rem;
					border-radius:50%;
					color:transparent;
					margin:.5rem;
					border-width:1px;
					border-style:solid;
					background:#fff;
					opacity:.5;
					transition:all .3s ease;
				}

				.join-type-indicator li.active {
					transform:scale(1.5);
					opacity:1;
				}

			.join-type-description {
				list-style: none;
				text-align: center;
				position: relative;
				width:100%;
				height:10rem;
				overflow:hidden;
			}

				.join-type-description li {
					width:100%;
					position: absolute;
					top:0;
					left:0;
					transform:translate(-100%,0);
					opacity:0;
					transition:all .3s ease;
				}

				.join-type-description li.active {
					opacity:1;
					transform:translate(0,0);
				}

				.join-type-description li.active ~ li {
					transform:translate(100%,0);
				}

					.join-type-description h2 {
						margin-bottom:.5rem;
					}

					.join-type-description h2.amount {
						color: #fff;
					}

					.join-type-description h3 {
						color:#fff;
						opacity:.8;
						margin-bottom:1rem;
					}

					.join-type-description p {
						color:#fff;
					}

		.join-name {
			padding:4rem 1rem;
		}

			.join-name-fields {
				opacity:0;
				max-height:0;
				transition:all .3s ease;
				z-index:-1;
				position:relative;
			}

			.join-name-fields.active {
				margin-top:3rem;
				max-height:999rem;
				opacity:1;
				z-index:1;
			}

			form.join .join-name input.name {
				margin-bottom:3rem;
			}

		.join-message {
			padding:6rem 0 3rem;
		}

		.join-details {
			padding:4rem 0;
			background:#eee;
		}

			.join-details-fields {
				padding:0 1rem;
			}

			.kleingedrucktes {
				font-size:.8rem;
				margin:2rem 0;
			}
			.kleingedrucktes label {
			    	display: block;
				padding-left: 1.5em;
			        text-indent: -1.65em;
			}

			.join-button {
				font-family:'Alegreya','Georgia',serif;
				border:none;
				font-size:1rem;
				color:#fff;
				cursor:pointer;
				padding:1rem 2rem;
			}







/* --------------------------------------------------
   team
-------------------------------------------------- */

.content-team {
	overflow:hidden;
}

.content-team .single-page {
	z-index:2;
	position:relative;
}

.teamlist {
	margin:3rem auto;
}

	.teamlist ul {
		list-style: none;
	}

		.teamlist li {	
		}

			.member {
				padding:5rem 2rem;
				max-width:50rem;
				margin:0 auto;
			}

				.member-portrait {
					width:12rem;
					height:12rem;
					margin:0 auto 1rem;
					position:relative;
					z-index:1;
				}

					.member-portrait img {
						display:block;
						border-radius:50%;
						width:100%;
						height:auto;
						box-sizing:content-box;
						position:absolute;
						border-style:solid;
						border-width:14rem;
						top:-14rem;
						left:-14rem;
					}

				.member-text {
					z-index:2;
					position:relative;
				}

					.member-text-name {
						text-align: center;
					}

						.member-text-name-first,
						.member-text-name-first {
							display:block;
							line-height:0;
						}

						.member-text-name-first {
							font-size:2rem;
							z-index:1;
						}

						.member-text-name-last {
							font-size:3rem;
						}

					.member-text-email a {
						margin-top:2rem;
						text-transform: lowercase;
					}

			
			@media only screen and (min-width :  800px) { 
				.member {
					display:flex;
				}

				.teamlist li:nth-child(even) .member {
					flex-direction:row-reverse;
				}

					.teamlist li:nth-child(even) .member,
					.teamlist li:nth-child(even) .member-text-name {
						/*text-align:right;*/
					}

					.member-portrait {
						margin:0 3rem 0 0;
						flex-shrink:0;
					}

						.member-portrait img {
						}

					.teamlist li:nth-child(even) .member-portrait {
						margin:0 0 0 3rem;
					}

					.member-text-name {
						text-align: left;
					}
			}







/* --------------------------------------------------
   support
-------------------------------------------------- */

.support-supporter {

}

	.support-supporter form {
		width:100%;
		max-width:30rem;
		margin:2rem auto;
	}

		.support-supporter form input {
			display:block;
			width:100%;
			border:none;
			font-size:1rem;
			font-family:'Alegreya',serif;
			margin:0.5rem 0;
			padding:1rem;
		}

		.support-supporter form input[type=text] {
			background:rgba(0,0,0,.05);
		}

		.support-supporter form input.submit {
			cursor:pointer;
			padding:1rem 2rem;
		}

	.form-message {
		font-weight:bold;
		font-size:.8rem;
		text-align:center;
		padding:3rem;
	}

	.form-message-good {
	    background: hsl(123, 100%, 97%);
        border: 1px solid hsl(123, 29%, 57%);
        color: hsl(123, 44%, 51%);
	}

	.form-message-bad {
	    background: hsl(0, 100%, 97%);
        border: 1px solid hsl(0, 29%, 57%);
        color: hsl(0, 44%, 51%);
	}

	.captcha {
		background:rgba(0,0,0,.05);
		padding:1rem;
		text-align:center;
		font-weight:bold;
		font-size:.8rem;
	}

		.captcha ul {
			width:100%;
			list-style: none;
			display:flex;
			justify-content: space-between;
			align-items:center;
		}

			.captcha li {
				width:22%;
				cursor:pointer;
				border:3px solid transparent;
			}

			.captcha li:last-child {
				width:8%;
				padding-left:4%;
				border:none;
			}

				.captcha img {
					display:block;
					width:100%;
					height:auto;
				}

				.captcha li:last-child img {
					opacity:.7;
					transition:all .3s ease;
				}

				.captcha li:last-child:hover img {
					opacity:1;
					transform:rotate(180deg);
				}

		.captcha-correct {
			display:none;
		}

.support-penguin {
	padding-top:7rem;
}

.support-supporter {
	padding-top:7rem;
}

	ul.donations {
		list-style:none;
		display:flex;
		flex-wrap:wrap;
	}

		.donations li {
			flex-basis:50%;
			padding:1rem;
			background:#929292;
			transition:all .3s ease;
		}

			.donations li a {
				display:block;
				max-width:5rem;
				margin:0 auto;
			}

				.donations li img {
					display:block;
					width:100%;
					height:auto;
				}

		.donations-bitcoin:hover { background:#f89e32; }
		.donations-betterplace:hover { background:#bad304; }
		.donations-flattr:hover { background:#50cf37; }
		.donations-paypal:hover { background:#002f86; }







/* --------------------------------------------------
   artikel 26
-------------------------------------------------- */

.wp-polls-ul li {
	padding:.5rem 0;
}