@charset "UTF-8";
/* CSS Document */

/*   SITE   */
html {
	min-width: 320px;
	font: 100 18px/25px 'Apercu', sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #fcbed6;
}

html, body {
	height: 100%;
	margin: 0px;
	overflow: auto;
}

body {
	margin: 0px;
	padding: 0px 0px 0px 200px;
}

img {
	margin: 0px auto;
	display: block;
	max-width: 620px;
}

iframe {
	max-width: 1080px;
	display: block;
	margin: 0em auto;
}


/*  HEADER  */
header {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	padding: 0px 25px;
	height: 100%;
	text-align: center;
	z-index: 1000;
	background-color: #fcbed6;
}

	@media screen {
		body > header {
			position: fixed;
		}
	}

header > div {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

nav {
	width: 70px;
	margin: 10vh auto;
}

	nav ul, footer ul {
		text-decoration: none;
		list-style: none;
	}
	
	nav ul li {
		margin: 8vh auto;
		transition: .8s;
	}

		@media only screen and (max-height: 499px) {
			nav ul li {
				margin: 3vh auto;
			}
			
			footer {
				display: none;
			}	
		}
		
		@media only screen and (min-height: 500px) {
			nav ul li {
				margin: 3vh auto;
			}
		}
	
	nav ul li:first-child, nav ul li:last-child {
		margin: 0px;
	}
	
	nav ul li a, footer ul li a {
		display: inline-block;
	}

nav a {
	text-decoration: none;
}

footer {
	height: 108px;
	width: 150px;
	background: url("../logo.png") no-repeat center;
	margin-bottom: 32px;
}

	footer a {
		display: block;
		height: 100%;
		width: 100%;
	}


/*   HEART   */
html div#heart {
	height: 100%;
	overflow: auto;
}

#heart {
	height: 100%;
	padding: 0px;
	margin: 0px auto;
	overflow: auto;
}

	#heart ul li:nth-of-type(n+2), #heart ol li:nth-of-type(n+2) {
		margin: 14px 0px 0px;
	}
	
	#heart > div, .content > div {
		padding: 1em 0em;
	}
	
	#heart > p, #heart div > p {
    max-width: 504px;
    margin: 1em auto;
	}

	#heart > ul, ol {
	max-width: 504px;
	padding: .5em 1em;
	list-style: none;
	margin: 0px auto;
	text-align: center;
}

	#heart > li:only-child {
		margin: 0px;
	}


.item {
	margin: 0px auto;
	padding: 0px;
	max-width: 540px;
}

	.item a {
		display: block;
	}
	
	.item img:nth-of-type(1) {
		width: 30%;
	}
	
	.item img:nth-of-type(2) {
		margin: 1.5em 0em 0em;
	}
	
	.item li {
		margin: 0px 0px 14px;
		text-align: center;
	}
	
	.item p {
		margin: 0px;
		padding: 0px;
		text-transform: uppercase;
		text-align: center;
	}

#music .item p:nth-of-type(2) {
	font-weight: 100; 
}


.next, .previous {
	font-size: 18px;
	margin: 0px;
	text-transform: uppercase;
	display: inline-block;
	padding: 1em 0em;
	width: 50%;
	text-align: center;
}


div#crown, div.crown {
	margin: 0px auto;
	padding: 0px;
}

#crown p, .crown p {
	max-width: 600px;
	margin: 0em auto;
}

	#crown p:nth-of-type(n+2), .crown p:nth-of-type(n+2) {
			padding: 0em 1em 1em;
			margin: 0px auto 0px;
		}

#sheetmusic, .sheetmusic {
	padding: 1em 0em;
	width: 100%;
	display: block;
	text-align: center;
}

.details iframe {
	padding: 0em 0px 1em;
}

	.details iframe:last-child {
		padding-bottom: 0px;
	}

.tinytext {
	font-size: 14px;
}

.performances ul {
text-align: center;
}

/*  HEADINGS  */
h1, h2, h3, h4 {
	font-size: 18px;
	text-align: center;
	margin: 0px;
}

h1, h2 {
	text-transform: uppercase;
	padding: 1.5em;
}

.content h2 {
	padding: 1.5em 1.5em 1em;
}

	.content h2:nth-of-type(1) {
		padding: 0em 0em 1em;
	}
	
h3, h4 {
	text-transform: none;
}
	
	h4 a {
		display: block;
	}

h2.privacy  {
	-webkit-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.1);
	box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.1);
	border-radius: 4px;
}

h2.privacy {
	display: table;
	margin: 28px auto;
	padding: 7px;
	background: rgba(0,0,0,.05);
}





/*  WORK SECTIONS  */
section .content {
    /*display: none;*/
}

.card {
	padding: 2.5em 0em;
	cursor: pointer;
	border: 1px solid rgba(0,0,0,.05);
	box-shadow: inset 0px 1px 0px rgba(255,255,255,0.8);
	transition: .8s;
}

.wait {
	cursor: wait;
}

.content img {
	margin-bottom: 1.5em;
}

/***** DRAWINGS & GRAPHICS *****/
.content p {
	text-align: center;
	margin: 0px;
}

#drawings .white a, #graphics .white a {
	border-bottom: thin solid #fefefa;
	padding-bottom: 0px;
}
		
/***** ANIMATION *****/
.video {
	max-width: 620px;
	margin: 0px auto;
	text-transform: uppercase;
	padding: 0px;
}

	.video iframe, .video li:nth-of-type(1) {
		margin: 14px 0px 0px;
		
	}
	
	.video li {
		margin-bottom: 0px;
		margin-top: 35px;
		list-style: none;
		text-align: center;
	}
		
		.video li p {
			padding: 0px;
			margin: 7px 0px 0px;
		}	
		
/***** PHOTOGRAPHY *****/
#photography > .content > div, #animation > .content > div {
	padding: 1em 0em;
}

	#photography > .content > div > img {
			margin: 0em auto 1em;
	}
	
	#photography > .content > div > img:last-child {
		margin: 1em auto 0em;
	}



/*  ARTICLES  */
article {
	/*width: 256px;*/
	text-align: center;
}

	article a, article.special ul li a, div#heart ul li a {
		text-transform: uppercase;
		font-weight: 700;
		text-decoration: none;
	}
	
	article ul li, div#heart ul li {
		/*width: 100%;*/
		display: block;
	}
	
	article p {
		text-align: left;
	}
	
	article p, article ul li:nth-of-type(n+2) {
		margin: 14px 0px 0px;
		padding: 0px;
	}
	
	article img {
		margin: 0px 0px 14px;
		display: inline-block;
		max-width: 540px;
		width: 100%;
	}
	
	article ul, div#heart ul {
		margin: 7px auto;
		padding: 0px;
	}	

time, title {
	margin: 0px 0px 14px;
	padding: 0px;
	display: block;
	text-transform: uppercase;
}

	ul time {
		font-size: 13px;
	}
	
	.place {
		font-size: 13px;
		display: block;
		text-transform: uppercase;
	}


/*  ISOTOPE GRID LAYOUT  */
button {
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	margin: 2px 0px;
	padding: 7px;
	background: rgba(0,0,0,1);
	border-style: none;
	font-weight: 700;
}

	@media only screen and (max-width: 445px) {
		body {
			min-height: max-device-height;
		}
		
		button {
			width: 256px;
		}
		
		button.button {
			margin: 0px;
		}
		
	}
	

.fix {
	margin: 0px auto;
	text-align: center;
}
	
.grid {
	margin: 0px auto;
}

	@media only screen and (max-width: 550px) {
		.grid, .grid-item.big {
			width: 256px;
		}
	}
	
	@media only screen and (min-width: 551px) and (max-width: 1056px) {
		.grid {
			width: 522px;
		}
	}
	
	@media only screen and (min-width: 1057px) and (max-width: 1323px) {
		.grid {
			width: 788px;
		}
	}
			
	@media only screen and (min-width: 1324px) {
		.grid {
			width: 1055px;
		}
	}
			
	.grid a {
		text-decoration: none;
		font-weight: 700;
		text-transform: uppercase;
	}

.grid-item {
	width: 256px;
	min-height: 100px;
	margin: 0px 0px 10px;
	padding-bottom: 14px;
	text-align: center;
	background: rgba(255,255,255,.7)
}

	.grid-item p {
    margin: 0px;
    padding: 14px 14px 0px;
	}
	
		.grid-item p:not(:first-child):not(:last-child) {
			padding: 14px 14px 0px;
		}
	
	.grid-item img {
		width: 100%;
		display: block;
	}

.big {
	width: 522px; /* Original size is 512px, however, because of the JS Masonry code for the gutter an extra 10px is added to width */
}

#discography {
	text-transform: uppercase;	
}

	#discography p {
		padding: 4px;
		margin: 0px;
		font-weight: 700;
		
	}

#discography img {
	margin-bottom: 15px;
}
	
		#discography p:nth-of-type(n+2), #discography .big p:nth-of-type(n+2) { 
			font-size: 13px;
			font-weight: 100;
			margin: -14px 0px 0px;
		}
	
	#discography .big p {
		font-size: 25px;
		text-align: center;
		margin: 14px 0px;
	}
	
		#discography p:nth-of-type(n+2) {
			font-size: 15px;
			font-weight: 100;
			margin: -10px 0px 0px;
		}
		
		@media only screen and (max-width: 550px) {
			#discography p:nth-of-type(n+2) { 
				font-size: 16px;
				font-weight: 100;
				margin: -14px 0px 0px;
			}
			
			#discography .big p {
				font-size: 18px;
				padding: 14px 14px 0px;
				margin: 0px;
				text-align: left;
			}
		
				#discography p:nth-of-type(n+2), #discography .big p:nth-of-type(n+2) { 
					font-size: 13px;
					font-weight: 100;
					margin: -14px 0px 0px;
				}		
		}		

/*  COLORS  */

/* Backgrounds colors */
.red, .original { background-color: #fa3251; }
.orange { background-color: #ff8442; }
.yellow, .remix { background-color: #ffcc4c; }
.green { background-color: #00ac6c; }
.blue, .appearance { background-color: #0088ff; }
.purple { background-color: #aa64f3; }
.pink { background-color: #ff7faa; }

.pastelred { background-color: #ff9999; }
.pastelorange { background-color: #ffbe9e; }
.pastelyellow { background-color: #ffd980; }
.pastelgreen { background-color: #7ed9a5; }
.pastelblue { background-color: #71bde3; }
.pastelpurple { background-color: #c19ed6; }
.pastelpink { background-color: #fcbed6; }

.gray, .grey, h3, h4, .collaboration { background-color: #eeeeee; }
.darkgray { background-color: #141414; }
.black { background-color: #000000; }

.white, article { background-color: #fff; }

.embossed {
	border: 1px solid rgba(0,0,0,0.1);
	box-shadow: inset 0px 1px 0px rgba(255,255,255,0.7);
}

/* Font colors */
article ul, footer p, footer a, article a, article.special ul li a, div#heart ul li a, a, a i.gray-text, .ink, .blacktext a, .collaboration p { color: #000; }
header > div a, hr, .red, .orange, .green, .blue, .purple, .darkgray, .black, .whitetext, .button-group, .grid, .grid a, article.special > time { color: #fff; }

nav, nav ul li a.blacktext i { color: #444; }

nav ul li a i { color: #fc83a9; }

.blacktext {
	color: #000;
}

/*
nav ul li:nth-child(1) a i { color: #f40046; }
nav ul li:nth-child(2) a i { color: #fd7e01; }
nav ul li:nth-child(3) a i { color: #ffe042; }
nav ul li:nth-child(4) a i { color: #00fb4b; }
nav ul li:nth-child(5) a i { color: #fc8cbc; }*/


#pinkout, li#pinkout a:link { color: #f1d1db; }


/*  FONTS  */
@font-face {
	font-family: 'Apercu';
	src: url('../fonts/light.woff2') format('woff2'), url('../fonts/light.woff') format('woff');
	font-weight: 100;
}

@font-face {
	font-family: 'Apercu';
	src: url('../fonts/regular.woff2') format('woff2'), url('../fonts/regular.woff') format('woff');
	font-weight: 400;
}

@font-face {
	font-family: 'Apercu';
	src: url('../fonts/bold.woff2') format('woff2'), url('../fonts/bold.woff') format('woff');
	font-weight: 700;
}

a, 
dt,
h1, 
h3 a,
article.special ul li a,
title,  
#drawings .white a, 
#drawings a, 
#graphics .white a, 
#graphics a, 
.ink a, 
.gray a, 
.details a {
	font-weight: 700;
}

h2,
h3,
h5, 
li a,
.next, 
.previous,
.item p {
	font-weight: 400;
}
	
article a, 
footer a,
header a, 
header li,	
h3,
h4,
h4 a,
.content h2,
#crown + a,
.crown + a,
#sheetmusic, .sheetmusic {
	font-weight: 100;
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 34px; 
	display: inline-block;
	width: 1em;
	height: 1em;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';

	vertical-align: middle;
	text-shadow: 1px 2px 1px rgba(0,0,0,0.04);
	-webkit-background-clip: text;
	 -moz-background-clip: text;
		  background-clip: text;
}


/*   SPECIAL   */
.clear, nav ul, footer ul, .grid-item img, ul time {
	padding: 0px;
	margin: 0px;
}

#face {
	background-image: url(../sylcmyk.png);
	height: 325px;
	background-position: center bottom;
	background-repeat: no-repeat;
}

.grid-item, .item li /*#heart > div > p, h4, h3, h2, h1*/ {
	-webkit-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.2);
	box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.2);
	border-radius: 4px;
}

.wrap {
	height: 100vh;
}

	.wrap-flexbox {
		display: flex;
		justify-content: center;
	}

.inner-flexbox {
	align-self: center;
	padding: 14px; 
}


p.center { 
	text-align: center;
}


/* Combinations */


h3, h4 a, article, #heart > p, #heart > div > p,  #crown p, .crown p, .details, .item li {
		padding: 1em;
	}
	

#heart > p, .item li, .multi img, article:not() {
	-webkit-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.05);
	-moz-box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.05);
	box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.05);
	border-radius: 2px;
}

h4 a, ul li a, ol li a, header a, .next, .previous, #crown + a, .crown + a, #sheetmusic, .sheetmusic, article a, article.special ul li a, footer a, #heart p a, section a {
	text-decoration: none;
}


/*   MEDIA QUERIES   */
@media only screen and (max-width: 749px) {
	html body {
		margin: 0px;
		padding: 100px 0px 0px 0px;
	}
	
	html body > header {
		position: fixed;
	}
	
	* html body {
		overflow: hidden;
	} 
	
	* html div#heart {
		height: 100%;
		overflow: auto;
	}
	
	#heart {
		height: 100%;
		width: 100%;
		padding: 0px;
		margin: 0px auto;
		overflow: auto;
	}
	
html header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	padding: 25px 0px;
	text-align: center;
	z-index: 1000;
}

nav {
	width: 100%;
	margin: 0px auto;
}

	nav ul {
		list-style: none;
		margin: 0px;
		padding: 0px;
	}
	
	nav ul li {
		margin: 0px;
		display: inline-block;
		width: 10%;
	}
	
	nav ul li:nth-child(n+2) {
		padding: 10px 0px;
	}
	
	footer {
		display: none;
	}

	.wrap {
		height: calc(100vh - 100px);
	}
}

@media only screen and (max-width: 550px) {
	#heart > div > p, article, .special {
		width: max-width;
	}
}

@media only screen and (max-height: 670px) {
    
    footer {
        display: none;
    }
}

/*
.grayscale, .grid-item img { 
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  
    filter: gray; 
    -webkit-transition: all .6s ease;  
}

.grayscale:hover, .grid-item img:hover { 
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
}
*/