/* 		GLOBAL RESET */

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

a,
article,
audio,
aside,
blockquote,
body,
div,
figure,
footer,
h1,
h2,
h3,
h4,
hr,
header,
html,
img,
li,
p,
picture,
ol,
nav,
section,
span,
strong,
ul {
	margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: inherit;
    font-style: normal;
    vertical-align: baseline;
    background: transparent;
    border: 0;
    outline: 0;
    text-decoration: none;
}

audio,
embed,
img,
object,
video {
	max-width: 100%;
}

article,
aside,
audio,
figure,
img,
footer,
header,
nav,
section {
    display: block
}

ul {
    list-style: none
}

/* END RESET */


/**********			begin MOBILE NAV 				***********/

.sidenav {
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 1;
    right: 0;
    top: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.3s;
    text-align:center;
}

#mobilemenu {
	padding-top: 6.0em;
}

.sidenav a {
	font-family: adobe-garamond-pro,serif;
	font-weight: 400;
	font-style: normal;
	text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.2em;
    padding-left: 2.0em;
    padding-bottom: 1.6em;
    color: #818181;
    display: block;
    transition: 0.5s;

}

.sidenav a:hover{
    color: #f1f1f1;
}

.sidenav .closebtn {
	display: block;
	float: right;
	padding-top: 0em;
	padding-right: 0em;
    font-size: 2.6em;
}

#closeicon {
	color: white;
	transition: 0.5s;
}

/* 		end MOBILE NAV */


body {
	overflow: auto;
}

#container {
	display: block;
	overflow-x: hidden;
	transition: 0.3s;
}

a {
	color: rgba(85,168,177,1);	
}

h1 {
	font-family: futura-pt,sans-serif;
	font-weight: 800;
	font-style: italic;
	font-size: 2.6em;
	width: 90%;
	margin-left: auto;
	margin-right: auto;	
}

h2 {
	
}

h3 {
	font-family: futura-pt,sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: 1.2em;
	line-height: 1.4em;
}

h4 {
	font-family: futura-pt,sans-serif;
	font-weight: 700;
	font-style: italic;	
	font-size: 1.4em;
	line-height: 0.8em;
}

strong {
	font-weight: 700;
}

/**********					404							***********/

.error {
	height: 100vh;
	background-color: black;
	background-size: cover;
    background-repeat: no-repeat;
}



#error h3 {
	font-size: 2.0em;
	color: white;
}

#error p {
	font-size: 1.4em;
	color: white;
}

#error {
	width: 100%;
	height: auto;
	position: fixed;
	top: 30%;
	left: 0;
	text-align: center;
	padding-left: 1.0em;
	padding-right: 1.0em;
}

#error .masthead {
	width: 8.0em;
	float: none;
	margin-left: auto;
	margin-right: auto;
}






/**********					COLLECTIVE					***********/


.collective {
	opacity: 1.0;
/*	background-color: black; */
/*	filter: grayscale (100%); */
	height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/collective/COLLECTIVE-1500.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 0%;
}

#discover {
	width: 100%;
	height: auto;
	position: fixed;
	top: 20%;
	left: 0;
	text-align: center;
	padding-left: 1.0em;
	padding-right: 1.0em;
}

#discover .masthead {
	width: 3.0em;
	float: none;
	margin-left: auto;
	margin-right: auto;
}

#discover h3 {
	font-size: 2.0em;
	line-height: 1.0em;
	text-transform: uppercase;
	color: white;
}

#discover p {
	font-size: 1.2em;
	color: white;
}

.read h4 {
	font-size: 1.0em;
	max-width: 300px;
	margin-top: 1.0em;
	margin-left: auto;
	margin-right: auto;
	border: solid;
	padding-bottom: 1.0em;
	padding-top: 1.0em;
	color: rgba(99, 209, 222, 1);
	text-transform: uppercase;
}

/**********		 			COVER DESIGN				***********/
#cover {
  	position: relative;	
  	height: auto;
  	width: auto;
}

#coverimage {
	height: 100%;
	width: auto:
}

.masthead {
	position: relative;
	float: left;
	margin: 0.5em;
	width: 2.0em;
}


/*
#nav .icon {
	display: block;	
}
*/

#nav {
	width: 100%;
	height: auto;
	position: absolute; 
	top: 0;
	left: 0;
	background-color: transparent;
	transition: background-color 1s;
}

#nav ul {
	float: right;
	padding-right: 1.2em;
	vertical-align: middle;
}


#nav li:not(:last-child) {
	opacity: 1.0;
	display: none;
}

#nav li {
	float: left;
}


#nav li a {
	font-family: adobe-garamond-pro,serif;
	font-weight: 400;
	font-style: normal;
	display: block;
	padding-left: 1.0em;
	font-size: 2.0em;
	color: white;
	vertical-align: text-top;
	text-transform: uppercase;
}

#nav.test {
	background-color: rgba(0,0,0,0.5);
}


/*		end COVER DESIGN			*/

/*		begin HEADLINE DESIGN		*/

.headline {

}

.headline hr {
	height: 1px;
	width: 100%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.folio {
	text-align: center;
	font-size: 0.80em;
	font-weight: 100;
	letter-spacing: 0.2em;
	line-height: 2.2em;
	text-transform: uppercase;
	padding-top: 2.2em;	
}

.headline ul li {
	font-family: adobe-garamond-pro,serif;
	font-weight: 400;
	font-style: normal;
	display: inline-block;
	padding-left: 0.25em;
	padding-right: 0.25em;
}

.subject {
	text-align: center;
	text-transform: uppercase;
	line-height: 2.6em;
	padding-top: 1.4em;
	padding-bottom: 1.4em;
}

.discipline {
	text-align: center;
	font-size: 0.80em;
	font-weight: 100;
	letter-spacing: 0.2em;
	line-height: 2.2em;
	text-transform: uppercase;
	padding-bottom: 2.0em;	
}

.intro {
	max-width: 600px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 1.0em;
	padding-bottom: 2.0em;
}

/*		end	HEADLINE DESIGN			*/

/*			ARTICLE DESIGN			*/
.bodycopy {
	max-width: 600px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.bodycopy p {
	font-family: adobe-garamond-pro,serif;
	font-weight: 400;
	font-style: normal;
	padding-top: 1.0em;
	padding-bottom: 1.0em;
	font-size: 1.2em;
	line-height: 1.4em;
	color: rgba(31, 31, 31, 0.9);
}

#dark p {
	color: black;
}

.tR {
	font-family: adobe-garamond-pro,serif;
	font-weight: 700;
	font-style: normal;
}

/*		begin ABOUT PAGE & DATAVISUALS & ARTICLES INDEX & COPYRIGHT		*/

#aim, #scope, #team, #contact, #connect, #code, #datavisual, #software, .copyright {
	max-width: 600px;
	margin-top: 2.0em;
	margin-bottom: 2.0em;
	margin-left: 1.0em;
	margin-right: 1.0em;
}

.headertagline {
	margin-top: 1.0em;
	text-align: center;
}

.tagline {
	font-size: 1.0em;
	text-transform: uppercase;
	line-height: 1.0em;
	color: rgba(126, 126, 126, 1.0);
}

#aim h4, #scope h4, #team h4, #contact h4, #connect h4, #code h4, #datavisual h4, #software h4, .copyright h4 {
	text-transform: uppercase;
}

#aim p, #scope p, #contact p, #connect p, #code p, #datavisual p, #software p, .copyright p {
	font-family: adobe-garamond-pro,serif;
	font-weight: 400;
	font-style: normal;
	padding-top: 1.0em;
	padding-bottom: 1.0em;
	font-size: 1.2em;
	line-height: 1.4em;
	color: rgba(31, 31, 31, 0.9);
}

#team p {
	font-family: adobe-garamond-pro,serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.0em;
	line-height: 1.0em;
	padding-top: 1.0em;
	padding-bottom: 1.0em;
}

#connect p {
	text-align: center;
}

#data {
	margin-bottom: 4.0em;
}

p.copyitems {
	font-family: adobe-garamond-pro,serif;
	font-weight: 600;
	font-style: italic;
	text-transform: uppercase;
	padding-top: 1.0em;
	padding-bottom: 0em;
	font-size: 1.2em;
	line-height: 1.4em;
	color: rgba(31, 31, 31, 0.9);
}

ol {
	padding-left: 2.4em;
	padding-right: 1.0em;
}

ol li {
	font-family: adobe-garamond-pro,serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2em;
	line-height: 1.4em;
	color: rgba(31, 31, 31, 0.8);
}

.articles {
	margin-top: 1.0em;
}




/*		begin ARTICLE DESIGN-PULL QUOTES-FIGURES		*/
.inspire hr {
	height: 1px;
	width: 100%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));	
}

blockquote {
  	font-family: adobe-garamond-pro,serif;
	font-weight: 700;
	font-style: normal;
  	line-height: 1.4em;
  	font-size: 1.4em;
	padding: 2.0em 2.0em 2.0em 2.0em;
	text-align: center;
	font-weight: 400;
	color: rgba(31, 31, 31, 0.9);
  	border-top: 1px solid #E8E8E8;
  	border-bottom: 1px solid #E8E8E8;
  	quotes: "\201C""\201D""\2018""\2019";
  	background-color: rgb(249, 250, 252)
}  

blockquote:before {
	position: absolute;
	left: 0.2em;
    content:open-quote;
	font-size: 3.0em;
  	color: #000000
}

 blockquote:after {
   	position: absolute;
  	right: 0.2em;
	content: close-quote;
	font-size: 3.0em;
  	color: #000000
}
/*		end	ARTICLE	DESIGN-PULL QUOTES				*/
/*		begin ARTICLE ASSETS						*/

.artwork {
	padding-left: 1.0em;
	padding-right: 1.0em;
	padding-top: 1.0em;
	padding-bottom: 1.0em;
}

.portrait {
		padding: 0.5em;
		padding-bottom: 2.0em;
		width: 100%;
}

audio {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

/*		end ARTICLE ASSETS						*/


.article-close {
	width: 1.4em;
	display: inline-block;
	vertical-align: text-bottom;
	padding-left: 0.25em;
}
/*		end ARTICLE DESIGN							*/

/*			SHARE ARTICLE							*/
.share {
	text-align: center;
	text-transform: uppercase;
	padding-top: 0.75em;
	padding-bottom: 2.0em;
}

.share h4 {
	line-height: 2.0em;
}

.share img {
	width: 4.0em;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	padding-left: 1.0em;
	padding-right: 1.0em;
}

.share ul {
	max-width: 400px;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	background-color: rgb(222, 222, 222, 1);
}

.share ul li {
	display: inline-block;
	vertical-align: middle;
}
/*		end SHARE ARTICLE							*/

/*			ARTICLE NAVIGATION						*/
.article-nav h4 {
	line-height: 3.0em;
}

.article-nav br {
	line-height: 1.0em;
}

.article-nav {
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	padding-bottom: 2.0em;
}

.article-nav a {
	font-family: futura-pt,sans-serif;
	font-weight: 800;
	font-style: italic;
	font-size: 1.4em;
}

.article-nav hr, .links hr, .byline hr {
	margin-top: 2.0em;
	border-top: 2px solid rgb(222, 222, 222, 1);
	width: 100%;
}

/*		end ARTICLE NAVIGATION						*/

/*			ACADEMICS								*/

.academics h4 {
	line-height: 2.0em;
	text-transform: uppercase;
	text-align: center;
}

.academics p {
	font-family: adobe-garamond-pro,serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2em;
	line-height: 1.4em;
	padding-bottom: 2.0em;
	max-width: 600px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
/*		end ACADEMICS			*/

/*			LINKS				*/
.links h4 {
	line-height: 2.0em;
}

.links {
	line-height: 3.0em;
	text-transform: uppercase;
	text-align: center;
	padding-bottom: 2.0em;
}

.links a {
	font-family: futura-pt,sans-serif;
	font-weight: 700;
	font-style: italic;
	font-size: 1.2em;
}
/*		end LINKS				*/

/*			BYLINE				*/
.byline h4 {
	text-transform: uppercase;
	text-align: center;
	line-height: 2.0em;	
}

.byline ul {
	font-family: adobe-garamond-pro,serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 1.1em;
	line-height: 1.6em;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
/*		end BYLINE				*/

/******			FOOTER			******/

footer {
	background-color: rgba(48, 48, 48, 1);
}

/*			SITE INFO			*/
#site-info {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	color: rgba(201, 201, 201, 1);
}

#site-info hr {
	margin-top: 2.0em;
	border-top: 1px solid rgb(222, 222, 222, 1);
	width: 100%;
}

.info {
	float: none;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2.0em;
}

.site {
	float: none;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2.0em;
}

.info li a, .site li a {
	color: rgba(201, 201, 201, 1);
}

.info h4, .site h4 {
	font-size: 1.1em;
	line-height: 2.0em;
	letter-spacing: 0.2em;
	font-weight: 700;
	text-transform: uppercase;
}

.info ul, .site ul {
	border-top: 1px solid rgb(222, 222, 222, 1);
}

.info li, .site li {
	font-family: adobe-garamond-pro,serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.05em;
	font-size: 1.0em;
	text-transform: uppercase;
	border-bottom: 1px solid rgb(222, 222, 222, 1);
	padding-bottom: 1.0em;
	padding-top: 1.0em;
}

/*			end SITE INFO				*/

/*				FOLLOW					*/
.follow {
	clear: both;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding-top: 2.8em;
	padding-bottom: 2.0em;
}

.follow h4 {
	font-size: 1.2em;
	line-height: 2.0em;
}

.follow img {
	width: 3.0em;
	padding-top: 0.75em;
	padding-bottom: 0.75em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

.follow ul {
	max-width: 400px;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(36, 36, 36, 1);
}

.follow ul li {
	display: inline-block;
	vertical-align: middle;
}

/*			begin COLOPHON				*/
	
.colophon {
	font-family: adobe-garamond-pro,serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	letter-spacing: 0.05em;
	line-height: 1.4em;
	font-size: 1.1em;
	padding-top: 2.0em;
	padding-bottom: 2.0em;
}

.colophon li img {
	width: 20%;
	max-width: 60px;
	margin-left: auto;
	margin-right: auto;
}

.colophon img {
	padding-top: 1.0em;
}
	
.colophon a {
	color: rgba(85,168,177,1);
}
 
/*			end COLOPHON				*/

/**********			MEDIA QUERIES					***********/

@media only screen and (min-width: 641px) {
	#mySidenav {
		display: none;
	}
	
	#nav li a {
		font-size: 1.0em;
	}
	
	#nav li:not(:last-child) {
		
		opacity: 1.0;
		display: block;
		padding-top: 1.0em;
		padding-right: 1.0em;
	}
	
	#nav li:last-child {
		display: none;
	}
	
	.artwork {
		margin-left: auto;
		margin-right: auto;
		max-width: 90%;
	}

	.portrait {
		padding: 0.5em;
		padding-bottom: 2.0em;
		width: 50%;
		float: left;
	}
	
	article {
		clear: both;
	}
	
	.headertagline {
		font-size: 1.6em;
	}
	
	#aim h4, #scope h4, #team h4, #contact h4, #connect h4, #code h4, #datavisual h4, #software h4, .copyright h4 {
		font-size: 2.0em;
	}
	
	#aim, #scope, #team, #contact, #connect, #code, #datavisual, #software, .copyright {
		padding-top: 2.0em;
		margin-left: auto;
		margin-right: auto;
	}
	
	#team p {
		font-size: 1.2em;
	}
	
}		

@media only screen and (min-width: 768px) {
	.info {
		padding-left: 1.0em;
		padding-right: 0.5em;
		float: left;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.site {
		padding-left: 0.5em;
		padding-right: 1.0em;
		float: left;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.info h4, .site h4 {
		font-size: 0.80em;
	}
	
	.info li, .site li {
		font-size: 0.80em;
	}
	
	.colophon {
		font-size: 1.0em;
	}
	
}

@media only screen and (min-width: 1024px) {
	.site {
		width: 25%;
		margin-right: 25%;
	}
	
	.info {
		width: 25%;
		margin-left: 25%;
	}
	
	.artwork {
		margin-left: auto;
		margin-right: auto;
		max-width: 70%;
	}
	
	#nav {
		position: absolute;
	}
	
	#nav li a {
		margin-top: 0em;
		font-size: 1.4em;
	}
	
	.masthead {
		margin-left: 2.0em;
		margin-top: 1.0em;
		padding-bottom: 0.5em;
		width: 2.0em;
	}
}