/* Colors 

White: #fff;
Pink: #fd28fc;
Light Blue: #00ffff;
Medium Blue: #38aed9;
Dark Blue: #303590;

*/

/* Fonts */

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

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

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

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

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

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

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


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

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

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

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

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

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


/* Typography */


body {
	font-family: 'BBKnile', 'BBGeomanist', serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}
h3,
#menu, 
.button {
	font-family: 'BBGeomanist', sans-serif;
}

h2,
.hosted {
	font-weight: 800;
	font-size: 28px;
	text-shadow: 1px 1px 0 #303590, 2px 2px 0 #303590, 3px 3px 0 #303590, 4px 4px 0 #303590, 6px 6px 0 rgba(0,0,0,.15);	
}
h3 {
	font-size: 24px;
	font-weight: 300;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 1px 1px 0 #303590, 2px 2px 0 #303590, 3px 3px 0 #303590, 4px 4px 0 #303590, 5px 5px 0 rgba(0,0,0,.15), 6px 6px 0 rgba(0,0,0,.15);	
}

#colophon {
	font-size: 14px;
	font-weight: 500;
}
body.home #menu,
#menu h2,
.button {
	text-transform: uppercase;
	font-weight: 600;	
} 
body.home #menu,
#menu h2,
.button {
	font-size: 14px;
}


/* Global */

* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
    background: #38aed9;
    color: #303590;
	text-align: center;
}
a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1.5px solid #303590;
	transition: color .2s, background .2s, box-shadow .2s, border .2s, transform .2s;
}
a:hover {
	color: #fff;
	border-color: #fff;
}

html, body,
h1, h2, h3, h4, h5, h6,
p, 
ol, ul {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

sup, sub {
	font-size: .48em;
	text-shadow: none;
}
sup {
	border-bottom: 2px solid #fff;
}

img {
	max-width: 100%;
	height: auto;
}
svg {
	height: 100%;
	width: 100%;
	fill: #fff;
	overflow: visible;
	transition: fill .2s, stroke .2s, filter .2s;
}

input {
	display: block;
	border-radius: 0;
	padding: 12px 16px;
	background: #38aed9;
	color: #fff;
	box-shadow: none;
	border: 2px solid #303590;
	width: 100%;
	margin: 16px 0;
	font-size: 16px;
	transition: background .2s;
}
input:focus {
	background: #303590;
}


/* Structure */

#page {
	padding: 94px 0 96px;
	min-height: 100vh;
	position: relative;
}
#colophon {
	padding: 32px 16px;
}


/* header */

#masthead {
	background: #fd28fc;
	padding: 16px 16px 10px;
	box-shadow: 0px 6px 0 #303590, 0px 10px 0 rgba(0,0,40,.15);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

#masthead a {
	border: none;
	color: #fff;
}
#masthead:after {
	content: '';
	display: block;
	clear: both;
}

h1 {
	float: left;
}
h1 .logo {
	display: block;
	margin: 0 auto;
	width: 96px;
	height: 64px;
}
h1 .label {
	display: none;
}
h1 .hosted {
	display: none;
}

#menu {
	text-align: left;
}
#menu h2 {
	position: absolute;
	right: 16px;
	top: 16px;
	z-index: 2;
}
#menu h2 .icon {
	display: block;
	height: 56px;
	width: 56px;
	transition: transform .4s;
}
#menu.active h2 .icon {
	transform: translate(-6px, -6px);
}
#menu h2 .icon svg {
	filter: drop-shadow(2px 2px 0 #303590) drop-shadow(1px 1px 0 #303590) drop-shadow(.5px .5px 0 #303590) drop-shadow(2px 2px 0 rgba(0,0,0,.15));
	stroke: #fff;
	stroke-width: 1.5px;
	fill: #00ffff;
	transition: filter .4s;
}
#menu.active h2 .icon svg {
	filter: drop-shadow(4px 4px 0 #303590) drop-shadow(2px 2px 0 #303590) drop-shadow(1px 1px 0 #303590) drop-shadow(4px 4px 0 rgba(0,0,0,.15));
}
#menu h2 .label {
	display: none;
	text-align: center;
}

#menu ul {
	position: fixed;
	top: 96px;
	bottom: 0;
	left: 100%;
	width: 100%;
	background: #303590;
	padding: 16px;
	transition: left .4s;
}
#menu.active ul {
	left: 0;
}

#menu li {
	margin: 0 0 32px;
}
#menu ul a {
	text-shadow: 1px 1px 0 #fd28fc, 2px 2px 0 #fd28fc, 4px 4px 0 rgba(0,0,0,.15);
	color: #fff;
}

#menu ul .icon {
	display: inline-block;
	margin: 0 16px 0 0;
	width: 48px;
	height: 48px;
	vertical-align: middle;
}
#menu .icon svg {
	fill:  #fff;
	filter: drop-shadow( 2px 2px 0 #fd28fc ) drop-shadow( 1px 1px 0 #fd28fc ) drop-shadow( 2px 2px 0 rgba(0,0,0,.15) );
}


/* Content */

#content {
	padding: 32px 16px;
	margin: 0;
}

#content h2 {
	color: #fff;
}
h2 span {
	display: inline-block;
}
#content h3 {
	margin: 0 0 5px;
}

#content p {
	margin: 0 0 32px;
	font-size: 18px;
	line-height: 1.7;
}

#content ul {
	margin: 32px 0;
}
#content li {
	margin: 0 0 16px;
}

.credits span {
	display: block;
	margin: 0 0 16px;
}
.credits span span {
	display: inline-block;
	margin: 0;
}

#episode-list {
	text-align: left;
}
#episode-list .preview-image {
	border: 2px solid #fff;
	box-shadow: 0 0 0 3px #38aed9, 9px 9px 0 #303590;
}
#episode-list .episode-content {
	margin: 18px 0;
}
#content #episode-list li {
	margin-bottom: 64px;
}
#content #episode-list .button {
	display: inline-block;
	color: #fff;
	border: none;
	text-align: center;
	text-shadow: 1px 1px 0 #38aed9, 2px 2px 0 #38aed9, 4px 4px 0 rgba(0,0,0,.15);
}
#episode-list .icon {
	display: block;
	width: 64px;
	height: 64px;
}



#subscribe {
	background: #fff;
	padding: 32px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(calc(-50% - 8px), -50%) scale(0,0);
	width: calc(100% - 48px);
	max-width: 640px;
	border: 4px solid #fd28fc;
	box-shadow: 0px 0px 0 2px #303590, 4px 4px 0 #38aed9 inset, 4px 4px 0 2px #38aed9, 14px 14px 0 2px #303590;
	transition: transform .4s;
}
#subscribe.active {
	transform: translate(calc(-50% - 8px), -50%) scale(1,1);
}
#subscribe h2 {
	color: #fd28fc;
	margin: 0 24px 24px;
	line-height: 1.3;
}
#subscribe p {
	font-size: 16px;
	margin: 0 0 32px;
}
#subscribe p span {
	display: block;
}
#subscribe .links-menu {
	margin: 32px 0 -16px;
}
#subscribe a {
	display: block;
	border: none;
	margin: 16px 0;
/*	text-shadow: 1px 1px 0 #fff, 2px 2px 0 #fff, 4px 4px 0 rgba(0,0,0,.15);*/
}
#subscribe a:hover {
	color: #fd28fc;
}
#subscribe .icon {
	display: inline-block;
	vertical-align: middle;
	height: 48px;
	width: 48px;
	margin: 0 8px 0 0;
}
#subscribe .label {
	display: inline-block;
	vertical-align: middle;
}
#subscribe svg {
	fill: #303590;
/*	filter: drop-shadow( 1px 1px 0 #fff ) drop-shadow( .5px .5px 0 #fff ) drop-shadow( 2px 2px 0 rgba(0,0,0,.15) );*/
}
#subscribe a:hover svg {
	fill: #fd28fc;
}
#subscribe a.close {
	position: absolute;
	top: 0;
	right: 12px;
}
#subscribe a.close .icon {
	height: 32px;
	width: 32px;
	margin: 0;
}
#subscribe a.close .label {
	display: none;
}



/* Footer */

#colophon {
	color: #fff;
	border-top: 2px solid #fff;
	position: absolute;
	bottom: 0;
	width: 100%;
}
#colophon a {
	border-color: #fff;
}
#colophon a:hover {
	color: #303590;
	border-color: #303590;
}



/* Home page */
body.home #masthead {
	padding: 32px;
	position: static;
}

body.home h1 {
	margin: 0 0 32px;
	float: none;
}
body.home h1 .logo {
	height: 60vh;
	max-height: 56vw;
	width: 100%;
}
body.home h1 .hosted {
	display: block;
}
body.home #menu {
	text-align: center;
	margin: 0 -16px -32px;
}
body.home #menu h2 {
	display: none;
}

body.home #menu ul {
	position: static;
	background: none;
}
body.home #menu li {
	width: calc(100% / 3);
	max-width: 128px;
	padding: 0;
	margin: 0 0 32px;
	display: inline-block;
}
body.home #menu ul .icon,
#episode-list .button .icon {
	margin: 0 4px 16px 0;
	width: 64px;
	height: 64px;
	border: 4px solid #303590;
	border-radius: 50%;
	padding: 10px;
	background: #fff;
	box-shadow: 4px 4px 0 0 #303590, 8px 8px 0 0 rgba(0,0,0,.15);
	transition: transform .2s, box-shadow .2s, background .2s;
}
body.home #menu ul .icon svg,
#episode-list .button svg {
	fill: #38aed9;
	filter: none;
}
body.home #menu ul a:hover .icon,
#episode-list .button:hover .icon {
	background: #fff;
	box-shadow: 6px 6px 0 0 #303590, 12px 12px 0 0 rgba(0,0,0,.15);
	transform: translate(-2px, -2px);
}
body.home #menu .label {
	display: block;
}

body.home #page {
	padding: 0;
}
body.home #colophon {
	position: static;
}



/* Responsivity */

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

	#page {
		padding-top: 108px;
	}
	h1 .logo {
		width: 120px;
		height: 80px;
	}
	#menu ul {
		top: 112px;
	}
	
	#subscribe {
		padding: 64px 64px 48px;
		width: calc(100% - 80px);
	}
	#subscribe a {
		display: inline-block;
		margin: 16px;
	}
	#subscribe .icon {
		display: block;
		margin: 0 auto 8px;
	}
	#subscribe a.close {
		top: 8px;
		right: 4px;
	}
}

@media only screen and (min-width: 768px) {
	
	#page {
		padding-top: 128px;
	}
	
	#masthead .hosted,
	h2 {
		font-size: 32px;
	}
	
	h1 .logo {
		width: 140px;
		height: 94px;
	}
	#menu {
		text-align: right;
		margin: -16px 0;
		padding: 0;
		font-size: 14px;
		text-transform: uppercase;
	}
	#menu h2 {
		display: none;
	}
	#menu ul {
		position: static;
		background: none;
		padding: 0;
	}
	#menu li {
		display: inline-block;
		padding: 0;
		text-align: center;
		margin: 0;
	}
	#menu li a {
		display: block;
		padding: 32px 16px;
	}
	#menu li a:hover,
	#menu li.current a {
		background: #303590;
	}
	#menu ul .icon {
		margin: 0 0 8px;
		width: 48px;
		height: 32px;
	}
	#menu .label {
		display: block;
	}
	
	#content {
		padding: 32px;
	}
	
	#episode-list li:after {
		content: '';
		display: block;
		clear: both;
	}
	#episode-list .preview-image {
		float: left;
		width: 28%;
		margin: 0 32px 32px 0;
	}
	#episode-list .episode-content {
		margin: 0 0 32px calc(28% + 32px);
	}
	
	#episode-list .button .icon {
		height: 56px;
		width: 56px;
	}
	
	#colophon {
		padding: 32px;
	}
	
	body.home #menu li a {
		padding: 0;
	}
	body.home #menu li a:hover {
		background: transparent;
	}
	body.home #content {
		padding: 64px 32px;
	}
	
}

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

	#page {
		padding-top: 160px;
	}
	#menu li a {
		padding: 32px 24px;
	}
	#content #episode-list {
		max-width: 920px;
		margin: 32px auto;
	}
	#episode-list .episode-content {
		margin: 0 0 32px calc(28% + 48px);
	}
	
}


@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

}