/* ~~~~~~~ Cube Styles Desktop Two Column Layout ~~~~~~~ */

/* Sticky CTA */
.cta {display: none;} /* Hide original CTA */

/* New Sticky CTA */
	.absolute {max-width: 250px; display: block; position: absolute; right: 2px;}
	.cta-sticky {max-width: 100%; margin: 0 auto; position: sticky; top: 0px;}
	.cta-sticky  img {display: inline-block; max-width: 50px; vertical-align: middle; padding-right: 10px; margin: 10px 0 10px 0;}
	.cta-sticky  a.button:hover {background-color: #FF3399; color: #fff;}
	.cta-sticky  a.button {
		display: inline-block;
		max-width: 200px;
		box-shadow:2px 4px 8px 0 rgba(0,0,0,0.5);
		vertical-align: middle;
		padding: 5px 8px 5px 8px;
		font-family: 'Saira Extra Condensed', 'Tahoma', sans-serif; 
		font-size: 18px;
		background-color: #F0F0F0;
		color: #000000;
		letter-spacing: 2px;
		border-radius: 0;
		border: 1px;
		margin: 10px 10px 10px 0;
	}


/* Website Structure: Wrapper, Rows, Columns, Containers, Articles */

.wrapper {max-width: 1000px; margin: 0 auto; display: block; padding-top: 40px;}
footer .lower-nav {max-width: 1000px; margin: 0 auto;}

.rows {}
.rows hr {margin-bottom: 0;}

.rows:after {content: ""; display: table; clear: both;} /* Clearfix */

.columns {float: left;}

.left {width: 24%; margin: 0 2% 0 0;}
.right {width: 74%; margin: 0;}
.left h2 {padding: 24px 0 10px 0; color: #fff;}
.left p {color: #fff;}
.left nav#myLinks {padding-bottom: 0;}


/* Website Header */
	header {min-height: 200px; padding-bottom: 20px;}
	header img {display: none;}
	img.cube {width: 90%; border-radius: 200px; box-shadow:2px 4px 8px 0 rgba(0,0,0,0.5);}
	header h1 {line-height: 35px;}
	header h1.large {font-size: 100px; line-height: 100px;}
	header h1, header h2 {text-align: left; color: #fff;}
	header h2 {font-family: 'Dosis', sans-serif; font-weight: bold; color: #fff; font-size: 26px;}


/* Content Heading Row - Latest Episode, CUBELORE, etc. */
h2.row {display: block; text-align: center; padding: 20px 0; margin: 0; font-size: 58px; line-height: 58px; vertical-align: middle; color: #fff;}


/* Sidebar Styles */

aside {margin-bottom: 24px; padding: 6px 10px 20px 10px; border-radius: 8px; background: rgba(34, 34, 34, 0.7);}
aside h3 {color: #FFF471; font-family: 'Dosis', sans-serif; font-weight: bold; text-align: center;}
aside p {color: #fff;}
aside a {color: #fff; text-decoration: underline;}
aside a:hover {color: #FFaa22;}
aside hr {border: 1px #000 solid;}

/* Left Navigation */

	 /* Add in Headings and extra links */
		nav#myLinks h3, nav#myLinks hr.menu {display: block;} 
		nav#myLinks li.extra {display: inline-block;}
	 /* Hide the Misc page until I work out what to do with it */
		nav#myLinks a.hide {display: none;}
	 /* Removes old separators */
		.left nav .separator {display: none;} 
	 /* Adds new separators */
		.left nav .desktop {display: inline-block; font-family: 'Dosis', sans-serif; font-size: 16px; padding: 0 2px;}

.left nav a {}
.left nav a:hover {color: #FF3399; font-weight: bold; font-weight: bold;}



	/*.topnav h3, .left aside h3, .right aside h3 {color: #FFF471;}*/
	.topnav {margin: 0 0 24px 0;  width: 88%;   padding: 0 6% 0 6%; }
	.topnav h3 {display: block; text-transform: uppercase; font-size: 16px; padding: 0; margin-bottom: 10px; line-height: 34px;}
	.topnav li {display: inline-block; text-align: center; padding-bottom: 8px; line-height: 16px;}
	.topnav a.link {font-family: 'Dosis', sans-serif; font-size: 13px; text-decoration: none;}
	.topnav a.home {font-size: 18px;}
	.topnav hr.menu {display: block; width: 72%; background-color: #999; border: 1px #000 solid;}

	/* Smaller Cube Divider */
	.small-divider {padding: 18px 0 18px 0;}
	.small-divider img {width: 50px;}



/* Badges, Buttons, Blinkies */

.left aside h3 {margin: 0; padding: 10px 0 10px 0; font-size: 18px;}

	/* Trapped in the Cube Badges */
	aside .badges {display: block; margin: 0 auto; width: 180px;}
	aside .badges img {width: 88px; display: inline-block; border-radius: 0;}

/* Jack & Mike Profiles */
aside .profile {margin: 0 auto; max-width: 180px; padding-top: 10px;}
aside .profile img {display: block; width: 100%; margin: 0 auto; border-radius: 200px; box-shadow:2px 4px 8px 0 rgba(0,0,0,0.5);}
aside .profile img:hover {filter: invert(100%); box-shadow:2px 4px 8px 0 rgba(255,255,255,0.5);}
aside p {text-align: left; line-height: 22px;}

	/* Cube Boys Facing Right */
	.left aside .profile img {-webkit-transform: scaleX(-1); transform: scaleX(-1);}
	.left aside .profile img:hover {-webkit-transform: none; transform: scaleX(-1);}


/* Main Content */
.container, .divider {width: 100%;}
.container {margin: 0;}
.container h2 {display: none;}

.fancy-heading {margin-bottom: 0;}

article {width: 92%; margin: 0; padding: 0 4%; padding-top: 30px; padding-bottom: 50px; border-radius: 8px;} 
article .episode-title h3 {padding-bottom: 0; text-align: left; font-size: 36px; margin-bottom: 0; color: #222;}
article h3 {font-size: 36px;}
article h5 {font-size: 32px; margin: 26px 0 20px 0; color: #222;}

/* Footer Remove Sections */
footer .badges {display: none;}




/* Adding backgrounds to headings on iOS. Wrap each word in a Span. This feels like a crime. */
		  span.background {}

		  @supports (background: -webkit-named-image(i)) {	

			.rows hr {border: 1px #FFF471 solid;} /* Adding a little more colour for iOS */  
			  
			h1 span.background, 
			h1.large span.background,
			h3.cube span.background {
				
				color: #000;
				background: linear-gradient(180deg, 
							rgba(255, 225, 117, 1) 0%, 
							rgba(225, 225, 120, 1) 20%, 
							rgba(255, 199, 84, 1) 40%,
							rgba(255, 118, 94, 1) 70%,
							rgba(254, 60, 176, 1) 86%,
							rgba(254, 64, 174, 1) 100%);
			  }
			  
			/* Adjusting line height and text trimming for better fit */
			h1 span.background {line-height: 30px; display: inline-block;}
			span.asce {line-height: 30px; display: inline-block; text-box-edge: ex alphabetic; text-box-trim: trim-start;}
			h1.large span.background {line-height: 55px; display: inline-block;}
			h1.large span.desc {line-height: 74px; display: inline-block; text-box-edge: ex alphabetic;  text-box-trim: trim-start;} /* Descenders larger line height */
			
			h3.cube span.background{line-height: 28px; display: inline-block;}
			h3.cube span.desc {line-height: 35px;text-box-edge: ex alphabetic;  text-box-trim: trim-start;}
			h3.cube span.asce {display: inline-block; text-box-edge: ex alphabetic;  text-box-trim: trim-start;}
			
		  }


			/* Honk Colour Scheme

			1 #FFFFB1 255, 225, 117, 1	Light Yellow
			2 #FFFF78 225, 225, 120, 1	Yellow
			3 #FFC754 255, 199, 84, 1	Orange
			4 #FF765D 255, 118, 94, 1	Red Orange
			5 #FE3CB0 254, 60, 176, 1	Pink #1
			6 #FE40AE 254, 64, 174, 1 	Pink #2

			*/