@charset "utf-8";
/* Eric Meyer Reset */ 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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:black; /* change if the mask should have another color than white */
    z-index:999; /* makes sure it stays on top */
}

#loadanim {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(img/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

/* Site Styling */
#header {
	-webkit-transition: all 0.5s;  
    -moz-transition: all 0.5s;  
    -o-transition: all 0.5s; 
    transition: all 0.5s;
	z-index:998;
	height:50px;
	width:100%;
	position:fixed;
	top:-50px;
	background-color:rgba(255,255,255,.8);
}

#header.dropped {
	top:0px;
}

#scrollnotice {
	-webkit-transition: all 0.5s;  
    -moz-transition: all 0.5s;  
    -o-transition: all 0.5s; 
    transition: all 0.5s;
	z-index:998;
	height:24px;
	width:100%;
	position:fixed;
	bottom:0;
	background:url(img/scroll.svg) no-repeat center;
	margin:0 auto 5px auto;
}

#scrollnotice.dropped {
	bottom:-30px;
}

#headlogo {
	height:40px;
	width:120px;
	background:url(img/headerlogo.svg) no-repeat center;
	float:left;
	margin:3px 20px 7px 10px;
	cursor:pointer;
}

#navmenu {
	width:20px;
	height:20px;
	background:url(img/menu_open.svg) no-repeat center center;
	display:none;
}

#navwrap {
	float:left;
}

#navwrap ul {
	list-style: none;
	text-align: center;
	margin-top:5px;
}

#navwrap li {
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	font-size:18px;
	letter-spacing:0.75px;
	height:40px;
	line-height:40px;
	display:inline-block;
}

#navwrap a {
 	text-decoration:none;
	color:#424242;
	display:block;
	margin:0px 10px;
}

#navwrap a:hover {
	color:#929497;
	-webkit-transition: color 0.6s;
    -moz-transition: color 0.6s;
    -o-transition: color 0.6s;
    transition: color 0.6s;
}

#navsoc {
	float:right;
}

#navsoc ul {
	height:50px;
	width:180px;
}

#navsoc li {
	margin:5px 10px 0px 0px;
	float:right;
}

#navsoc a {
	height:40px;
	width:40px;
	display:block;
	background-size:auto 20px;
}

#navsoc a:hover {
	-webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
    -o-transition: background 0.6s;
    transition: background 0.6s;
}


.fb {
	background:url(img/socnavfb.svg) no-repeat center center;
}

.tw {
	background:url(img/socnavtw.svg) no-repeat center center;
}

.ig {
	background:url(img/socnavig.svg) no-repeat center center;
}

.fb:hover {
	background:url(img/socnavfb2.svg) no-repeat center center;
}

.tw:hover {
	background:url(img/socnavtw2.svg) no-repeat center center;
}

.ig:hover {
	background:url(img/socnavig2.svg) no-repeat center center;
}

.single {
	text-align:center;
}

.single p {
	font-family:'Open Sans', sans-serif;
	font-weight:400;
	font-size:16px;
	line-height:24px;
	letter-spacing:0.8px;
	margin-top:60px;
}

.singleimage {
	display:inline-block;
	margin:0 auto;
}

.singleimage_mob {
	display:none;
}

#abouttitle {
	width:45%;	
}

#whoami {
	text-align:center;	
}

#whoami img {
	width:80%;
	margin:0 auto;	
}

.maincarousel {
	width:90%;
	margin:50px auto 0 auto;
	position:relative;
}

.favmain {
	width:340px;
	height:400px;
	margin-right:-100px;
	text-align:center;
}

.carousel {
	text-align:center;	
}

.carousel h2 {
	font-family:'Open Sans', sans-serif;
	line-height:52px;
	font-weight:100;
	font-size:42px;
	margin:0 20px 20px 20px;
}

.carouseltitle {
	font-family:'Titillium Web', sans-serif;
	font-weight:900;
	font-size:32px;
	opacity:0;
	margin-bottom:15px;
}

.carouselcopy {
	font-family:'Open Sans', sans-serif;
	font-weight:300;
	font-size:16px;
	opacity:0;
	line-height:20px;
	margin:15px 0 20px 0;
}

.carouselicon {
	width:120px;
	height:120px;
	background:black;
	opacity:0.4;
	margin:60px auto 0 auto;
}

.carousellinkred {
	width:30px;
	height:30px;
	display:inline-block;
	background:url(img/linkiconred.svg) no-repeat center center;
	opacity:0;	
}

.carousellinkmint {
	width:30px;
	height:30px;
	display:inline-block;
	background:url(img/linkiconmint.svg) no-repeat center center;
	opacity:0;	
}

.maincarousel .favmain.is-selected .carouselicon{
	width:200px;
	height:200px;
	opacity:1;
	margin:0 auto;
	-webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}

.maincarousel .favmain.is-selected .carouseltitle{
	opacity:1;
	-webkit-transition: opacity 1s ease 200ms;
    -moz-transition: opacity 1s ease 200ms;
    -o-transition: opacity 1s ease 200ms;
    transition: opacity 1s ease 200ms;
}

.maincarousel .favmain.is-selected .carouselcopy{
	opacity:1;
	-webkit-transition: opacity 1s ease 200ms;
    -moz-transition: opacity 1s ease 200ms;
    -o-transition: opacity 1s ease 200ms;
    transition: opacity 1s ease 200ms;
}

.maincarousel .favmain.is-selected .carousellinkred {
	opacity:1;
	-webkit-transition: opacity 1s ease 200ms;
    -moz-transition: opacity 1s ease 200ms;
    -o-transition: opacity 1s ease 200ms;
    transition: opacity 1s ease 200ms;
}

.maincarousel .favmain.is-selected .carousellinkmint {
	opacity:1;
	-webkit-transition: opacity 1s ease 200ms;
    -moz-transition: opacity 1s ease 200ms;
    -o-transition: opacity 1s ease 200ms;
    transition: opacity 1s ease 200ms;
}

.fader {
	z-index:1;
	height:350px;
	width:25%;
	position:absolute;
}

#redfadeleft {
	top:0;
	left:0;
	background:rgba(255,13,77,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(right,rgba(255,13,77,0),rgba(255,13,77,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(left,rgba(255,13,77,0),rgba(255,13,77,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(left,rgba(255,13,77,0),rgba(255,13,77,1)); /*Fx 3.6-15*/
    background: linear-gradient(to left, rgba(255,13,77,0), rgba(255,13,77,1)); /*Standard*/
}

#redfaderight {
	top:0;
	right:0;
	background:rgba(255,13,77,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left,rgba(255,13,77,0),rgba(255,13,77,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(255,13,77,0),rgba(255,13,77,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(255,13,77,0),rgba(255,13,77,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(255,13,77,0), rgba(255,13,77,1)); /*Standard*/
}

#mintfadeleft {
	top:0;
	left:0;
	background:rgba(186,0,255,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(right,rgba(186,0,255,0), rgba(186,0,255,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(left,rgba(186,0,255,0), rgba(186,0,255,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(left,rgba(186,0,255,0), rgba(186,0,255,1)); /*Fx 3.6-15*/
    background: linear-gradient(to left, rgba(186,0,255,0), rgba(186,0,255,1)); /*Standard*/
}

#mintfaderight {
	top:0;
	right:0;
	background:rgba(186,0,255,1); /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left,rgba(186,0,255,0), rgba(186,0,255,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(186,0,255,0), rgba(186,0,255,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(186,0,255,0), rgba(186,0,255,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(186,0,255,0), rgba(186,0,255,1)); /*Standard*/
}

#mft01 {
	background:url(img/fav_title.svg) no-repeat center bottom;
	background-size:contain;
}

.maincarousel .favmain.is-selected #mft01 {
	width:300px;
	height:300px;
	opacity:1;
	margin:-50px auto 0 auto;
	-webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}

#mft02 {
	background:url(img/fav_fam.svg) no-repeat center center;
	background-size:contain;
}

#mft03 {
	background:url(img/fav_sketch.svg) no-repeat center center;
	background-size:contain;
}

#mft04 {
	background:url(img/fav_write.svg) no-repeat center center;
	background-size:contain;
}

#mft05 {
	background:url(img/fav_char.svg) no-repeat center center;
	background-size:contain;
}

#mft06 {
	background:url(img/fav_kk.svg) no-repeat center center;
	background-size:contain;
}

#mft07 {
	background:url(img/fav_mus.svg) no-repeat center center;
	background-size:contain;
}

#mft08 {
	background:url(img/fav_ac.svg) no-repeat center center;
	background-size:contain;
}

#mft09 {
	background:url(img/fav_dt.svg) no-repeat center center;
	background-size:contain;
}

#mft10 {
	background:url(img/fav_bb.svg) no-repeat center center;
	background-size:contain;
}

#mft11 {
	background:url(img/fav_tmbg.svg) no-repeat center center;
	background-size:contain;
}

#mft12 {
	background:url(img/fav_rl.svg) no-repeat center center;
	background-size:contain;
}

#mft13 {
	background:url(img/fav_taz.svg) no-repeat center center;
	background-size:contain;
}

#mft14 {
	background:url(img/fav_se.svg) no-repeat center center;
	background-size:contain;
}

#mft15 {
	background:url(img/fav_cp.svg) no-repeat center center;
	background-size:contain;
}

#mft16 {
	background:url(img/fav_tp.svg) no-repeat center center;
	background-size:contain;
}

#mft17 {
	background:url(img/fav_ng.svg) no-repeat center center;
	background-size:contain;
}

#mft18 {
	background:url(img/fav_am.svg) no-repeat center center;
	background-size:contain;
}

#mft19 {
	background:url(img/fav_rns.svg) no-repeat center center;
	background-size:contain;
}

#mft20 {
	background:url(img/fav_mur.svg) no-repeat center center;
	background-size:contain;
}

#mft21 {
	background:url(img/fav_rnm.svg) no-repeat center center;
	background-size:contain;
}

#mft22 {
	background:url(img/fav_wd.svg) no-repeat center center;
	background-size:contain;
}

#td00 {
	background:url(img/todo.svg) no-repeat center bottom;
	background-size:contain;
}

.maincarousel .favmain.is-selected #td00 {
	width:300px;
	height:300px;
	opacity:1;
	margin:-50px auto 0 auto;
	-webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}

#td01 {
	background:url(img/td_rebrand.svg) no-repeat center center;
}

#td02 {
	background:url(img/td_kidbook.svg) no-repeat center center;
}

#td03 {
	background:url(img/td_business.svg) no-repeat center center;
}

#td04 {
	background:url(img/td_radio.svg) no-repeat center center;
}

#td05 {
	background:url(img/td_graphnov.svg) no-repeat center center;
}

#td06 {
	background:url(img/td_hiphop.svg) no-repeat center center;
}

#td07 {
	background:url(img/td_standup.svg) no-repeat center center;
}

#td08 {
	background:url(img/td_novel.svg) no-repeat center center;
}

#td09 {
	background:url(img/td_game.svg) no-repeat center center;
}

#td10 {
	background:url(img/td_voiceover.svg) no-repeat center center;
}

#td11 {
	background:url(img/td_podcast.svg) no-repeat center center;
}

#td12 {
	background:url(img/td_toy.svg) no-repeat center center;
}

#philosophytitle {
	width:60%;
	display:inline-block;
	margin:0 auto;
}

#philosophytitle_mob {
	display:none;
}

.philosophybox {
	width:80%;
	margin:0 auto;
	text-align:center;
}

.philosophybox h2 {
	font-family:'Titillium Web', sans-serif;
	font-weight:900;
	font-size:38px;
}

.philosophybox p {
	font-family:'Open Sans', sans-serif;
	font-weight:400;
	font-size:18px;
	letter-spacing:0.8px;
	line-height:24px;
	margin-top:15px;
}

.attribution p {
	font-family:'Open Sans', sans-serif;
	font-weight:300;
	font-size:14px;
	letter-spacing:0.8px;
	margin:20px 0 25px 0;
}

#timelessness {
	width:25%;	
}

#simplicity, #purpose, #originality {
	width:30%;	
}

#heart {
	width:40%;
}

#hardwork, #rules {
	width:70%	
}

#contact {
	text-align:center;
}

#contact h1 {
	font-family:'Titillium Web', sans-serif;
	font-weight:900;
	font-size:48px;
	color:#424242;
	margin-top:100px;
}

.contactstack {
	width:100%;
	max-width:1060px;
	margin:70px auto 0 auto;
	text-align:center;
	display:flex;
	justify-content:center;
	align-items:center;
}

.contactbox {
	width:22%;
	text-align:center;
}

.contacticon {
	display:inline-block;
	width:90%;
	height:200px;
}

.contacticon:hover {
	-webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
    -o-transition: background 0.6s;
    transition: background 0.6s;
}

.copyright p {
	margin:100px auto 0 auto;
	font-family:'Open Sans', sans-serif;
	font-weight:400;
	font-size:16px;
	letter-spacing:0.8px;
}

#email {
	background:url(img/contactemail1.svg) no-repeat center center;
}

#facebook {
	background:url(img/contactfb1.svg) no-repeat center center;
}

#twitter {
	background:url(img/contacttw1.svg) no-repeat center center;
}

#email:hover {
	background:url(img/contactemail2.svg) no-repeat center center;
}

#facebook:hover {
	background:url(img/contactfb2.svg) no-repeat center center;
}

#twitter:hover {
	background:url(img/contacttw2.svg) no-repeat center center;
}

.white {
	background-color:#FFFFFF;
	color:#424242;
}

.red {
	background-color:#FF0D4D;
	color:#FFFFFF;
}

.blue {
	background-color:#004FFF;
	color:#FFFFFF;
}

.mint {
	background-color:#00FFB6;
	color:#424242;
}

.purple {
	background-color:#BA00FF;
	color:#FFFFFF;
}

.grey {
	background-color:#58595B;
	color:#FFFFFF;
}

.precache {
	display:none;	
}

/* Mobile and Responsive */
@media only screen and (max-width: 1000px) {
		.wwdstackbox h3 {
			font-size:28px;
			line-height:30px;
		}
}

@media only screen and (max-width: 800px) {
		#landingnavbox a {
			width:80%;
			margin:5px 10px;
		}
}

@media only screen 
  and (min-device-width: 322px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {
		#header {
			background-color:#FFFFFF;
			height:100px;
			top:-100px;
		}
		
		#headlogo {
			height:80px;
			width:240px;
			margin:8px 40px 14px 20px
		}
		
		#contact h1 {
			font-size:84px;
			margin:0 100px;
		}
		
		.contactstack {
			width:100%;
			margin:80px auto 0 auto;
			text-align:center;
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
		}
		
		.contactbox {
			width:34%;
			text-align:center;
			margin:10px 20px;
		}
		
		.contacticon {
			display:inline-block;
			width:90%;
			height:320px;
			margin-top:-15px;
		}
		
		#navwrap {
			display:none;
			background-color:#FFFFFF;
			width:100%;
			margin:-5px 0;
		}
		
		#navwrap.menuactive {
			display:inline-block;	
		}
		
		#navwrap ul {
			width:80%;
			margin:100px auto 0 auto;
		}
		
		#navwrap li {
			width:100%;
			font-size:60px;
			height:80px;
			margin-top:80px;
		}
		
		#navwrap a {
			text-decoration:none;
			color:#424242;
			display:block;
			margin:0px 20px;
		}
				
		#navsoc {
			display:none;
			width:100%;
			background-color:#FFFFFF;
		}
		
		#navsoc.menuactive {
			display:inline-block;	
		}
		
		#navsoc ul {
			height:60px;
			width:80%;
			display:flex;
			justify-content:center;
			margin:200px auto 160px auto;
		}
		
		#navsoc li {
			margin:0 40px;
		}
		
		#navsoc a {
			height:80px;
			width:80px;
			display:inline-block;
			background-size:contain;
		}
		
		#navmenu {
			display:inline-block;
			height:45px;
			width:45px;
			float:right;
			margin:28px 15px 0 0;
			cursor:pointer;
		}
		
		#navmenu.menuactive {
			background:url(img/menu_close.svg) no-repeat center center;
		}
				
		.copyright p {
			margin:200px auto -100px auto;
			font-size:30px;
			letter-spacing:0.8px;
		}
		
		.singleimage {
			display:none;
		}
		
		.singleimage_mob {
			display:inline-block;
			height:1100px;
		}
		
		.single p {
			font-size:42px;
			line-height:52px;
			margin:60px 80px 0 80px;	
		}

		.favmain {
			width:600px;
			height:1000px;
			margin-right:-100px;
			text-align:center;
		}
		
		.carousel h2 {
			font-size:76px;
			line-height:86px;
			margin:0 60px 60px 60px;
		}
		
		.carouseltitle {
			font-size:64px;
			margin-bottom:30px;
		}
		
		.carouselcopy {
			font-size:42px;
			line-height:50px;
			margin:40px 0 30px 0;
		}
		
		.carouselicon {
			width:240px;
			height:240px;
			margin:60px auto 0 auto;
		}
		
		.carousellinkred {
			width:60px;
			height:60px;
		}
		
		.carousellinkmint {
			width:60px;
			height:60px;
		}

		.maincarousel .favmain.is-selected #mft01 {
			width:600px;
			height:600px;
			opacity:1;
			margin:-50px auto 0 auto;
			-webkit-transition: all 500ms;
			-moz-transition: all 500ms;
			-o-transition: all 500ms;
			transition: all 500ms;
		}

		.maincarousel .favmain.is-selected #td00 {
			width:600px;
			height:600px;
			opacity:1;
			margin:-50px auto 0 auto;
			-webkit-transition: all 500ms;
			-moz-transition: all 500ms;
			-o-transition: all 500ms;
			transition: all 500ms;
		}

		.maincarousel .favmain.is-selected .carouselicon{
			width:400px;
			height:400px;
			opacity:1;
			margin:0 auto;
			-webkit-transition: all 500ms;
			-moz-transition: all 500ms;
			-o-transition: all 500ms;
			transition: all 500ms;
		}
		
		.philosophybox h2 {
			font-size:78px;
		}
		
		.philosophybox p {
			font-size:38px;
			line-height:48px;
			margin-top:50px;
		}
		
		.attribution p {
			font-size:32px;
			margin:50px 0 60px 0;
		}

		.fader {
			height:600px;
			width:5%;
		}
		
		.philosophybox {
			width:70%;
		}
		
		#philosophytitle {
			display:none;
		}
		
		#philosophytitle_mob {
			display:inline-block;
			width:80%;
		}
		
		#timelessness, #heart, #originality, #purpose {
			width:60%;	
		}
		
		#simplicity {
			width:80%;	
		}
		
		#hardwork, #rules {
			width:95%;	
		}
}
@media only screen and (max-width: 600px) {
		#header {
			background-color:#FFFFFF;	
		}
		
		.contactstack {
			width:100%;
			max-width:1060px;
			margin:20px auto 0 auto;
			text-align:center;
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
		}
		
		.contactbox {
			width:34%;
			text-align:center;
			margin:10px 20px;
		}
		
		.contacticon {
			display:inline-block;
			width:90%;
			height:130px;
		}
		
		#navwrap {
			display:none;
			background-color:#FFFFFF;
			width:100%;
		}
		
		#navwrap.menuactive {
			display:inline-block;	
		}
		
		#navwrap ul {
			width:80%;
			margin:0 auto;
		}
		
		#navwrap li {
			width:100%;
			font-size:20px;
			height:60px;
			padding-top:30px;
		}
		
		#navwrap a {
			text-decoration:none;
			color:#424242;
			display:block;
			margin:0px 10px;
		}
		
		#navwrap a:hover {
			color:#929497;
			-webkit-transition: color 0.6s;
			-moz-transition: color 0.6s;
			-o-transition: color 0.6s;
			transition: color 0.6s;
		}
		
		#navsoc {
			display:none;
			width:100%;
			background-color:#FFFFFF;
		}
		
		#navsoc.menuactive {
			display:inline-block;	
		}
		
		#navsoc ul {
			height:60px;
			width:80%;
			display:flex;
			justify-content:center;
			margin:40px auto;
			margin-bottom:40px;
		}
		
		#navsoc li {
			margin:0 20px;
		}
		
		#navsoc a {
			height:30px;
			width:30px;
			display:inline-block;
			background-size:contain;
		}
		
		#navmenu {
			display:inline-block;
			float:right;
			margin:15px 15px 0 0;
			cursor:pointer;
		}
		
		#navmenu.menuactive {
			background:url(img/menu_close.svg) no-repeat center center;
		}
		
		#navmenu.menuactive:hover {
			-webkit-transition: background 0.6s;
			-moz-transition: background 0.6s;
			-o-transition: background 0.6s;
			transition: background 0.6s;
			background:url(img/menu_close2.svg) no-repeat center center;
			cursor:pointer;
		}
		
		.singleimage {
			display:none;
		}
		
		.singleimage_mob {
			display:inline-block;
			height:500px;
		}
		
		.single p {
			margin:20px 20px 0 20px;	
		}
		
		.fader {
			width:5%;
		}
		
		#philosophytitle {
			display:none;
		}
		
		#philosophytitle_mob {
			display:inline-block;
			width:80%;
		}
		
		.philosophybox {
			width:70%;
		}
		
		#philosophytitle {
			display:none;
		}
		
		#philosophytitle_mob {
			display:inline-block;
			width:80%;
		}
		
		#timelessness, #heart, #originality {
			width:60%;	
		}
		
		#simplicity, #purpose {
			width:80%;	
		}
		
		#hardwork, #rules {
			width:95%;	
		}
}