/*
Theme Name: Wasstraat Grids
Theme URI: http://wasstra.at
Description: Wasstraat Grids Theme
Version: 0.1
Author: Vasilis van Gemert
Author URI: http://vasilis.nl/

*/

html {
	padding: 3.3333vh 3.3333vw;
}
body {
	font: 100%/1.5 georgia;
	background: white;
	color: #666;
	max-width: 34.5em;
	margin: 0 auto;
	padding: 0;
	-webkit-text-size-adjust: 100%;
}


/* @group Links {{{
================================================================= */

	a {
		color: #006E70;
	}
	a:visited {
		color: inherit;
	}
	a:hover {
		color: #D42127;
	}
	header a {
		text-decoration: none;
	}
	.home article:first-of-type header a:before {
		content: 'De Wasstraat. ';
		color: #D42127;
	}

/* @end Links
--------------------------------------------------------------}}} */

/* @group Typography {{{
================================================================= */
	
	h1,
	h2,
	h3 {
		font-weight: normal;
	}
	h1 {
		font-size: 1.5em;
		color: #006E70;
	}
	h2 {
		font-size: 1.25em;
		color: #006E70;
	}
	h3 {
		font-size: 1.1em;
	}
	p {
		margin: 1em 0;
		-webkit-hyphens: auto;
		   -moz-hyphens: auto;
		    -ms-hyphens: auto;
		     -o-hyphens: auto;
		        hyphens: auto;
	}
	footer {
		clear: both;
		font-size: .9em;
		padding: 4em 0 0;
	}
	body > footer a {
		
	}
	.video-container + p {
		font-size: 1.1em;
	}
	p + p {
		margin: -1em 0 1em;
		text-indent: 1em;
	}
	h1 + p {
		font-size: 1.1em;
	}
	h2 + p {
		margin: -1.25em 0 1em;
	}
	aside article {
		display: block;
		margin: 4em 0;
	}
	blockquote {
		margin: 1.5em 0;
		padding: 0;
	}
	blockquote p,
	.ik-wil-aandacht {
		font-size: 1.25em;
		color: #006E70;
		display: inline-block;
		font-style: italic;
		text-align: left;
		margin: 0;
		line-height: 1.4;
		text-indent: 0;
	}
	.ik-wil-aandacht {
		margin: 1.25em 0;
		display: block;
	}
	blockquote p + p {
		text-indent: 0;
	}
	blockquote p:before {
		content: "“"
	}
	blockquote p:after {
		content: "”"
	}
	@media (min-width: 37.5em) {
		blockquote{
			margin: 2em 0 2em -50%;
			margin: 2em 0 2em -webkit-calc(-50% - .75em);
			margin: 2em 0 2em -moz-calc(-50% - .75em);
			margin: 2em 0 2em calc(-50% - .75em);
		}
		blockquote p,
		.ik-wil-aandacht {
			font-size: 2em;
		}
		.ik-wil-aandacht {
			margin: 1em 0 1em -50%;
			margin: 1em 0 1em -webkit-calc(-50% - .75em);
			margin: 1em 0 1em -moz-calc(-50% - .75em);
			margin: 1em 0 1em calc(-50% - .75em);
		}
	}
	@media (min-width: 55em) {
		blockquote p {
			font-size: 2em;
		}
	}
	article footer  {
		font-size: .8em;
		overflow: hidden;
	}
	article footer h1 {
		font-size: 1.5em;
		margin: 0
	}
	article footer ul {
		margin: 0;
		padding: 0;
	}
	article footer li {
		display: inline-block;
		margin: 0;
		padding: 0
	}
	article footer li:after {
		content: ', ';
	}
	article footer li:last-child:after {
		content: '';
	}
	article footer a {
		text-decoration: none;
	}
	.transcript_text,
	#showTransscript {
		display: none;
	}
	.cliplist {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	@media (min-width: 24em) {
		article footer div,
		.cliplist li {
			width: 50%;
			float: left;
			-webkit-box-sizing: border-box;
			   -moz-box-sizing: border-box;
			        box-sizing: border-box;
			padding: 0 .5em;
		}

		.cliplist li:nth-child(2n + 3) {
			clear: left;
		}
		.cliplist p {
			margin: .1em 0 1em;
		}
		article footer,
		.cliplist {
			margin: 0 -.5em;
		}
	}

	@media (min-width: 37.5em) {
		body {
			line-height: 1.8;
		}
		.main-content > div > p:first-of-type,
		.main-content > div > h2:first-child,
		.home article p,
		.home article h2 {
			text-shadow: none;
			margin: 1em 0 1em -50%;
			margin: 1em 0 1em -webkit-calc(-50% - .75em);
			margin: 1em 0 1em -moz-calc(-50% - .75em);
			margin: 1em 0 1em calc(-50% - .75em);
			font-size: 1.25em;
		}

		.main-content > div > h2:first-child,
		.home article h2 {
			font-size: 1.5em;
			margin-bottom: -.75em;
		}
		h1 {
			font-size: 2em;
		}
		article footer {
			clear: both;
			margin: 1em 0 1em -50%;
			margin: 1em 0 1em -webkit-calc(-50% - 1.5em);
			margin: 1em 0 1em calc(-50% - 1.5em);
		}
		article footer div {
			width: 25%;
			float: left;
		}
	}
	@media (min-width: 55em) {
		.main-content > div > p:first-of-type,
		h2,
		.home article p {
			font-size: 1.25em;
		}
		h1 {
			font-size: 2.5em;
		}
		h2 {
			font-size: 1.5em;
		}
		h2 + p {
			margin: -1em 0 1em;
		}
	}


/* @end Typography
--------------------------------------------------------------}}} */

/* @group Page header {{{
================================================================= */

	body > header,
	body > header h1 {
		display: none;
	}
	header .home-link {
		color: #D42127;
	}

/* @end Page header
--------------------------------------------------------------}}} */

/* @group article Header {{{
================================================================= */

	.maincontent header {
		margin: 1em 0;
	}
	.maincontent header h1 {
		margin: 0;
		line-height: 1.2;
	}
	.maincontent header time {
		display: block;
		line-height: 1;
	}

/* @end article Header
--------------------------------------------------------------}}} */

/* @group Home {{{
================================================================= */
	.home article {
		margin: 1px 0 4em;
		clear: both;
		position: relative;
	}
	.home .more-link {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		text-indent: -1000em;
	}
	.home .more-link:hover {
		background: rgba(0,0,0,.3);
	}
	.home .imagediv {
		height: 4em;
		overflow: hidden;
		margin: 0;
		position: relative;
		background-size: 100% auto;
		background-position: 0 100%;
	}
	@media (min-width: 37.5em) {
		.home .imagediv {
			margin: 0 0 0 -50%;
			margin: 0 0 0 -webkit-calc(-50% - 1em);
			margin: 0 0 0 -moz-calc(-50% - 1em);
			margin: 0 0 0 calc(-50% - 1em);
			height: 6em;
		}
		.home .more-link {
			margin: 0 0 0 -50%;
			margin: 0 0 0 -webkit-calc(-50% - 1em);
			margin: 0 0 0 -moz-calc(-50% - 1em);
			margin: 0 0 0 calc(-50% - 1em);
		}
	}
	@media (min-width: 55em) {
		.home .imagediv {
			margin: 0 0 0 -100%;
			margin: 0 0 0 -webkit-calc(-100% - 2em);
			margin: 0 0 0 -moz-calc(-100% - 2em);
			margin: 0 0 0 calc(-100% - 2em);
			height: 10em;
		}

		.home .more-link {
			margin: 0 0 0 -100%;
			margin: 0 0 0 -webkit-calc(-100% - 2em);
			margin: 0 0 0 -moz-calc(-100% - 2em);
			margin: 0 0 0 calc(-100% - 2em);
		}
	}

/* @end Home
--------------------------------------------------------------}}} */

/* @group Video {{{
================================================================= */

	.video-format {
		width: 100%;
		height: auto;
		max-height: 70vh;
	}
	.video-container {
		background: black;
	}
	.video-container,
	.clip-container {
		position: relative;
	}
	video,
	.clip-container iframe,
	.video-container iframe {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}

/* @end Video
--------------------------------------------------------------}}} */

.navlist {
	margin: 0;
	padding: 0;
	list-style: none;
}
.navlist li {
	margin: -1px 0 0;
	padding: 0;
	border: solid hsl(200,50%,95%);
	border-width: 1px 0;
}
.navlist a {
	display: block;
	text-decoration: none;
	color: #00A1DE;
	line-height: 2;
}
.navlist a:hover {
	color: inherit;
}

@media (min-width: 37.5em) {
	body {
		max-width: 50em;
		position: relative;
	}
	.g-main {
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
		padding: 0 1em;
		max-width: 34.5em;
		margin: 0 0 0 33%;
	}

	.maincontent header {
		margin: 1em 0 1em -50%;
		margin: 1em 0 1em -webkit-calc(-50% - 1em);
		margin: 1em 0 1em -moz-calc(-50% - 1em);
		margin: 1em 0 1em calc(-50% - 1em);
	}
	.main-content {
		position: relative;
		padding: 1px 0 0;

		-webkit-transition: padding-top .3s;
		   -moz-transition: padding-top .3s;
		    -ms-transition: padding-top .3s;
		     -o-transition: padding-top .3s;
		        transition: padding-top .3s;
	}
	.video-container {
		margin: 0 0 0 -50%;
		margin: 0 0 0 -webkit-calc(-50% - 1em);
		margin: 0 0 0 -moz-calc(-50% - 1em);
		margin: 0 0 0 calc(-50% - 1em);
	}
	.cliplist {
		margin: 0 -.5em 0 -50%;
		margin: 0 -.5em 0 -webkit-calc(-50% - 1em);
		margin: 0 -.5em 0 -moz-calc(-50% - 1em);
		margin: 0 -.5em 0 calc(-50% - 1em);
	}
}
@media (min-width: 45em) {
	.cliplist {
		margin: 0 -1em 0 -50%;
		margin: 0 -1em 0 -webkit-calc(-50% - 2em);
		margin: 0 -1em 0 -moz-calc(-50% - 2em);
		margin: 0 -1em 0 calc(-50% - 2em);
	}
	.cliplist li {
		width: 33.333333%;
		float: left;
		padding: 0 1em;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.cliplist li:nth-child(2n + 3) {
		clear: none;
	}
	.cliplist li:nth-child(3n + 4) {
		clear: left;
	}
}
	
	/* @group transscript {{{
	================================================================= */
@media (min-width: 37.5em) {
		.transcript_text {
			display: block;
			position: absolute;
			top: 2em;
			margin: 0 0 0 -50%;
			margin: 0 0 0 -webkit-calc(-50% - 1em);
			margin: 0 0 0 -moz-calc(-50% - 1em);
			margin: 0 0 0 calc(-50% - 1em);
			overflow-y: hidden; 
			white-space: nowrap;
			left: 0;
			right: 0;
		}
		.js .transcript_text {
			opacity: 0;
			z-index: -1;
			-webkit-transition: opacity .3s;
			   -moz-transition: opacity .3s;
			    -ms-transition: opacity .3s;
			     -o-transition: opacity .3s;
			        transition: opacity .3s;
		}
		.js .transcript_text.is-visible {
			opacity: 1;
			z-index: 1;
			-webkit-transition: opacity .3s .3s;
			   -moz-transition: opacity .3s .3s;
			    -ms-transition: opacity .3s .3s;
			     -o-transition: opacity .3s .3s;
			        transition: opacity .3s .3s;
		}
		#showTransscript {
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			margin: 0 0 0 -50%;
			margin: 0 0 0 -webkit-calc(-50% - 1em);
			margin: 0 0 0 -moz-calc(-50% - 1em);
			margin: 0 0 0 calc(-50% - 1em);
			z-index: 2;
			border: solid #666;
			border-width: 0 1px 1px;
			border-radius: 0 0 .3em .3em;
			padding: 0 .5em;
			text-decoration: none;
			font-family: 'lucida grande', tahoma;
			font-size: .9em;
		}
		.transcript_text br {
			display: none;
		}
		.transcript_text a {
			display: inline-block;
			width: 36%;
			white-space: normal;
			vertical-align: top;
			padding: 1em;
			background: rgba(0,0,0,.05);
			color: inherit;
			text-decoration: none;
		}
		.transcript_text a:before {
			content: attr(href) ':';
			background: #fff;
			margin: 0 .3em 0 0;
		}
	}
	@media (min-width: 55em) {
		.transcript_text,
		#showTransscript {
			margin: 0 0 0 -100%;
			margin: 0 0 0 -webkit-calc(-100% - 2em);
			margin: 0 0 0 -moz-calc(-100% - 2em);
			margin: 0 0 0 calc(-100% - 2em);

		}
		.transcript_text a {
			width: 24%;
		}
	}

/* @end transscript
--------------------------------------------------------------}}} */


@media (min-width: 55em) {
	body {
		max-width: 70em;
	}
	.g-main {
		margin: 0 0 0 50%;
	}
	.maincontent header {
		margin: 1em 0 1em -100%;
		margin: 1em 0 1em -webkit-calc(-100% - 2em);
		margin: 1em 0 1em -moz-calc(-100% - 2em);
		margin: 1em 0 1em calc(-100% - 2em);
	}
	.video-container {
		margin: 0 0 0 -100%;
		margin: 0 0 0 -webkit-calc(-100% - 2em);
		margin: 0 0 0 -moz-calc(-100% - 2em);
		margin: 0 0 0 calc(-100% - 2em);
	}
}

/* @group Prevnext {{{
================================================================= */

	.prevnext {
		clear: both;
		margin: 4em 0 0;
		display: block;
		font-size: 1.25em;
		color: #006E70;
	}
	.prevnext span,
	.prevnext a {
		display: block;
	}
	.prevnext a {
		font-size: .75em;
		margin: 0 0 2em;
	}
	.prevnext a:visited {
		color: #666;
	}
	.prevnext a:hover {
		color: #D42127;
	}

/* @end Prevnext
--------------------------------------------------------------}}} */

/* @group contentLinks {{{
================================================================= */

	.contentLinks {
		clear: left;
	}
	.contentLinks ul {
		margin: 0 1em 0 0;
		padding: 0;
	}
	.contentLinks li {
		margin: 0 0 0 1.1em;
	}

	@media (min-width: 37.5em) {
		.links-container,
		.prevnext {
			margin-left: -50%;
		}
		.contentLinks,
		.prevnext span {
			float: right;
			width: 50%;
		}
	}

/* @end contentLinks
--------------------------------------------------------------}}} */

/* @group Form {{{
================================================================= */
	.commentform {
		margin: 2em 0 1em;
	}
	@media (min-width: 37.5em) {
		.commentform {
			margin: 2em 0 1em calc(-50% - .75em);
		}
	}
	fieldset {
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
	}
	.commentform label {
		display: block;
	}
	@media (min-width: 37.5em) {
		.commentform label {
			font-size: 1.25em;
		}
	}
	label input {
		display: block;
		font-size: 1em;
	}
	label input[type=text],
	label input[type=email],
	label input[type=url],
	textarea {
		width: 75%;
	}
	textarea {
		height: 5em;
		font-size: 1em;
	}
	.home .commentform p {
		margin: 1em 0 1em 0;
		font-size: .9em;
	}


/* @end Form
--------------------------------------------------------------}}} */