/***** PAGE CSS *****/

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeOut {
	from { opacity: 1; }
	to 	 { opacity: 0; }
}
/* Firefox < 16 */
@-moz-keyframes fadeOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeOut {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@font-face {
	font-family: "Saans-Regular";
	src: url("fonts/Saans-Regular.woff2") format("woff2"),
		 url("fonts/Saans-Regular.woff?") format("woff");
}

body {
	font-family: Saans-Regular, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #CCC;
	line-height: 120%;
	letter-spacing: 0;
	background-color: white;

	-webkit-animation: fadeIn 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeIn 2s; /* Firefox < 16 */
            animation: fadeIn 2s;
}

a:link, a:visited, a:hover, a:active {
	font-family: Saans-Regular, Helvetica, Arial, sans-serif;
	color: #151515;
	text-decoration: none;
	border-bottom-width: 1px;
	padding-bottom: 4px;
	border-bottom-style: solid;
}


/***** DESKTOP VIEWPORT *****/


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


/*** Desktop homepage structure ***/


	#container {
		width: 90vw;
		/*max-width: 1200px;*/
		height: 93vh;
		padding-top: 7vh;
		//padding-left: 1vw;
		//padding-right: 1vw;
		float: none;
		margin: auto;
	}
	
	#top {
		width: 90vw;
		height: 23vh;
		padding-top: 0;
		float: none;
		text-align: left;
	}

	#bottom {
		width: 90vw;
		height: 70vh;
		float: none;
		position: relative;
		padding-bottom: 0;
	}
	
	#list {
		width: 90vw;
		float: none;
		position: absolute;
		top: 60vh;
		padding-bottom: 0;
		line-height: 160%;
	}
	
	ul li {
		width: 90vw;
		padding-left: 0;
		padding-top: 20px;
		padding-bottom: 88px;
		text-align: left;
		//border-bottom: 1px solid #333;
	}

/*** Desktop interior structure ***/		


	#header {
		width: 90vw;
		height: 8vh;
		padding-bottom: 4vh;
		float: none;
		position: fixed;
		/*margin: auto;*/
		text-align: left;
		z-index: 999;		
	}
	
	#left {
		width: 40vw;
		float: left;
		text-align: left;
		max-width: 520px;
	}
		
	#right {
		width: 50vw;
		float: right;
	}
	
	#intro,
	.blurb,
	.large-blurb {
		width: 55vw;
		padding-left: 0;
		padding-right: 2vw;
		padding-top: 20vh;
		padding-bottom: 0;
		/*margin: auto;*/
		margin: 0;
		text-align: left;
		max-width: 660px;
	}

	/* Pushes desktop intro to bottom of page */
	#intro {
		float: none;
		position: absolute;
		bottom: 3vh;
		padding: 0;
	}

	.large-blurb {
		margin: auto;
		text-align: center;
	}

	.artifact {
		width: 90vw;
		/*padding-left: 2vw;*/
		/*padding-right: 2vw;*/
		padding-top: 30vh;
		padding-bottom: 0;
		margin: auto;
		text-align: left;
	}
	
	.video {
		position: relative;
		overflow: hidden;
		padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}
	
	.video-iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}


/*** Desktop styles ***/


	body {
		font-family: Saans-Regular, Helvetica, Arial, sans-serif;
		/*letter-spacing: 0.20em;*/
		font-weight: 400;
	}

	h1 {
		font-size: 18px;
		font-weight: 400;
		color: #151515;
		line-height: 32px;
		padding: 0;
		margin: 0 0 4px 0;
		float: left;
	}
	
	h2 {
		font-family: Saans-Regular, Helvetica, Arial, sans-serif;
		font-size: 18px;
		font-weight: 400;
		color: #151515;
		line-height: 32px;
		padding: 0;
		letter-spacing: 0;
	}
	
	/* About link */
	h3 {
		font-size: 18px;
		font-weight: 400;
		color: #151515;
		line-height: 32px;
		padding: 0;
		margin: 0 0 4px 0;
		float: right;	
	}
	
	p {
		font-family: Saans-Regular, Helvetica, Arial, sans-serif;
		font-size: 18px;
		font-weight: 400;
		color: #151515;
		line-height: 175%;
		padding: 0;
		padding-bottom: 2vh;
		margin: 0;
		letter-spacing: 0;
	}
	
	#jrs {
		font-family: Saans-Regular, Helvetica, Arial, sans-serif;
		font-size: 18px;
		font-weight: 400;
		color: #151515;
		line-height: 160%;
	}

	a:link, a:visited, a:hover, a:active {
		font-family: Saans-Regular, Helvetica, Arial, sans-serif;
		//font-size: 18px;
	}
	
	/* backwards ampersand for Dazzed font #amp {
		font-feature-settings: 'ss10';
	  }*/
	
	#intro p {
		font-family: Saans-Regular, Helvetica, Arial, sans-serif;
		font-size: 40px;
		line-height: 140%;
		letter-spacing: 0;
	}	

	.large-blurb p {
		font-size: 22px;
		line-height: 40px;
	}
	
	ul {
		color: #CCC;
		list-style: none; 
		padding: 0;
	}
	
	li {
		font-size: 80px;
		letter-spacing: 0.001em;	
	}
	
	hr {
		 display: block;
		 height: 1px;
		 border: 0;
		 border-top: 1px solid #DDD;
		 margin: 1em 0;
		 padding: 0;
		 margin-top: 20vh;
	 }
	 
/* Homepage list links */

	#locked-tt {
		background: url('images/work/padlock.svg') no-repeat top left 328px;
		list-style-type: none;
		margin: 0;
		vertical-align: top;
		opacity: 1;
	}
	
	#locked-yt {
		background: url('images/work/padlock.svg') no-repeat top left 428px;
		list-style-type: none;
		margin: 0;
		vertical-align: top;
		opacity: 1;
	}
	
	#locked-apple {
		background: url('images/work/padlock.svg') no-repeat top left 220px;
		list-style-type: none;
		margin: 0;
		//vertical-align: top;
		opacity: 1;
	}
	
	#locked-aud {
		background: url('images/work/padlock.svg') no-repeat top left 290px;
		list-style-type: none;
		margin: 0;
		vertical-align: top;
		opacity: 1;
	}
	
	#external {
		background: url('images/work/arrow.svg') no-repeat top left 388px;
		list-style-type: none;
		margin: 0;
		vertical-align: middle;
	}
	
	.forbidden {
		cursor: not-allowed;
	}
	
	.external {
		cursor: ne-resize;
	}	
	
	sup {
		font-size: 14px;
		vertical-align: top;
		padding-left: 10px;
	}
	
	li a:link,
	li a:visited {
		color: #CCC;
		text-decoration: none;
		border-bottom-width: 0;
		padding-bottom: 0;
		border-bottom-style: none;
		transition: 0.2s;
		
	}

	li a:hover,
	li a:active {
		color: #FAFAFA;
		text-decoration: none;
		border-bottom-width: 0;
		padding-bottom: 0;
		border-bottom-style: none;
	}
	
	#header a:link,
	#header a:visited {
		border-bottom-style: none;
	}
	
	#header a:hover,
	#header a:active {
		border-bottom-style: solid;
	}
	
	#right a:link,
	#right a:visited {
		border-bottom-style: none;
	}
	
	#right a:hover,
	#right a:active {
		border-bottom-style: solid;
	}
}

	
/***** MOBILE VIEWPORT *****/


@media screen and (max-width: 700px) {


/*** Mobile homepage structure ***/	


	#container {
		width: 92vw;
		/*height: 97vh;
		padding-top: 3vh;*/
		height: 97dvh;
		padding-top: 3dvh;
		padding-left: 4vw;
		padding-right: 4vw;
		float: none;		
	}
	
	#top {
		width: 92vw;
		height: 20vh;
		padding-top: 0;
		float: none;
		text-align: left;
	}
	
	#bottom {
		width: 92vw;
		height: 68vh;
		float: none;
		position: relative;
		padding-bottom: 0;
	}
	
	#list {
		width: 92vw;
		float: none;
		position: absolute;
		bottom: 0;
		padding-bottom: 0;
	}
	
	ul li {
		width: 92vw;
		padding-left: 0;
		padding-top: 16px;
		padding-bottom: 16px;
		text-align: left;
		margin: 0;
		/*border-top: 1px solid #333;*/
		border-top: 1px solid rgba(255, 255, 255, .15)
	}
	
	/*.locked {
		background: url('images/work/padlock.svg') no-repeat center right 16px;
		list-style-type: none;
		margin: 0;
		vertical-align: middle;
		color: #777;
	}*/

	#locked-apple, #locked-yt, #locked-tt, #locked-aud {
		background: url('images/work/padlock.svg') no-repeat center right 16px;
		list-style-type: none;
		margin: 0;
		vertical-align: middle;
		color: #777;
	}
	
	#external {
		background: url('images/work/arrow.svg') no-repeat center right 16px;
		list-style-type: none;
		margin: 0;
		vertical-align: middle;
		color: #777;
	}

	
/*** Mobile interior structure ***/		


	#header {
		width: 92vw;
		height: 8vh;
		padding-bottom: 4vh;
		float: none;
		position: fixed;
		text-align: left;
		z-index: 999;
	}

	#left {
		width: 58vw;
		padding-bottom: 4vh;
		float: left;
		text-align: left;
	}
	
	#right {
		width: 34vw;
		padding-bottom: 4vh;
		float: right;
	}
	
	#intro,
	.blurb,
	.large-blurb {
		width: 92vw;
		padding-left: 0;
		padding-right: 0;
		padding-top: 5vh;
		text-align: left;
	}
	
	/* Pushes mobile intro to bottom of page */
	#intro {
		/*padding-top: 55vh;*/
		float: none;
		position: absolute;
		bottom: 2vh;
		padding-bottom: 0;
	}
	
	.large-blurb {
		text-align: center;
	}
	
	.artifact {
		width: 92vw;
		/*padding-left: 2vw;*/
		/*padding-right: 2vw;*/
		padding-top: 20vh;
		padding-bottom: 2vh;
		text-align: left;
	}
	
	.video {
		position: relative;
		overflow: hidden;
		padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}
	
	.video-iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	
/*** Mobile styles ***/


	body {
		font-family: Saans-Regular, Helvetica, Arial, sans-serif;
		font-weight: 400;
		line-height: 135%;
		letter-spacing: 0em;
	}

	h1 {
		font-size: 18px;
		font-weight: 400;
		color: #151515;
		line-height: 135%;
		padding: 0;	
		margin: 0 0 2px 0;
		float: left;
	}

	h2 {
		font-family: Saans-Regular, Helvetica, Arial, sans-serif;
		font-size: 18px;
		font-weight: 400;
		color: #151515;
		line-height: 135%;
		padding: 0;	
		padding-bottom: 0vh;	
	}
	
	/* About link */
	h3 {
		font-size: 18px;
		font-weight: 400;
		color: #151515;
		line-height: 135%;
		padding: 0;	
		margin: 0 0 2px 0; /*top/r/bottom/l*/
		float: right;
	}

	p {
		font-family: Saans-Regular, Helvetica, Arial, sans-serif;
		font-size: 18px;
		font-weight: 400;
		color: #151515;
		line-height: 135%;
		letter-spacing: 0;
		letter-spacing: 0;
		padding: 0;
		padding-bottom: 3vh;
		margin: 0;
	}
	
	#jrs {
		font-family: Saans-Regular, Helvetica, Arial, sans-serif;
		font-size: 18px;
		font-weight: 400;
		color: #151515;
		line-height: 135%;
	}
	
	a:link, a:visited, a:hover, a:active {
		font-family: Saans-Regular, Helvetica, Arial, sans-serif;
		font-size: 18px;
	}
	
	#amp {
		font-feature-settings: 'ss10';
	  }
	
	#intro p {
		font-family: Saans-Regular, Helvetica, Arial, sans-serif;
		font-size: 28px;
		line-height: 135%;
	}	
	
	ul {
		color: #CCC;
		list-style: none; 
		padding: 0;
	}
	
	li {
		/*font-size: 16px;*/
		font-size: 24px;
		letter-spacing: 0;
	}
	
	hr {
		 display: block;
		 height: 1px;
		 border: 0;
		 border-top: 1px solid #DDD;
		 /*margin: 1em 0;*/
		 padding: 0;
		 margin-top: 10vh;
		 
	 }

	li a:link, 
	li a:visited {
		color: #CCC;
		text-decoration: none;
		border-bottom-width: 0;
		padding-bottom: 0;
		border-bottom-style: none;
	}

	li a:hover, 
	li a:active {
		color: #FAFAFA;
		text-decoration: none;
		border-bottom-width: 0;
		padding-bottom: 0;
		border-bottom-style: none;
	}
	
	/* Removing the 'show more text on hover' feature on mobile */
	.extra { 
		display: none;
		opacity: 0;
	}
	
	li:hover .extra {
		display: none;
		opacity: 0;
	}

	#header a:link,
	#header a:visited {
		border-bottom-style: none;
	}
	
	#header a:hover,
	#header a:active {
		border-bottom-style: solid;
	}

	#right a:link,
	#right a:visited {
		border-bottom-style: none;
	}
	
	#right a:hover,
	#right a:active {
		border-bottom-style: solid;
	}

	#info a:link,
	#info a:visited {
		color: #CCC;
		border-bottom-style: none;
	}
	
	#info a:hover,
	#info a:active {
		color: #CCC;
		border-bottom-style: solid;
	}

}