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


body {
	background: #fff;
	margin: 0;
	padding: 0;
	color: #000;
	font-family: futura-pt, sans-serif;
	font-weight: 400;
	font-size: 2vw;
	line-height: 1.2em;
	/*text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;*/
}

p {
	font-size: 2vw;
	line-height: 1.4em;
}


/* YO CRITTER I NEED px or WHAT EVER fallbacks just in case vw doesn't work*/


#header {
	display: flex;
	margin: 0;
	padding: 7% 10%;
}


#header > .header-1 {
	flex: 1;
	margin: 0;
	padding: .55% 0 0 0;
}


#header > .header-2 {
	flex: 1;
	margin: 0 15% 0 0;
	padding: 0;
	font-size: 4vw;
	text-align: right;
	font-style: italic;
	font-weight: 600;
}





#cover-photo {
	margin: 0;
	padding: 2% 0%;
}


.cover-photo-1 {
	width: 100%;
}

.cover-photo-2 {
	width: 80%;
	margin: 0;
	padding: 0 10%;
}

.cover-photo-3 {
	width: 90%;
	margin: 0;
	padding: 0 0 0 10%;
}

.cover-photo-4 {
	width: 90%;
	margin: 0;
	padding: 0 5% 0 5%;
}

#cover-publication {
	margin: 0;
	padding: 2% 0%;
	text-align: center;
}

.cover-photo-letter {
	width: 40%;
	margin: 0 auto;
	padding: 0 10%;
}

.cover-photo-pocketbook {
	width: 25%;
	margin: 0 auto;
	padding: 0 10% 0 10%;
}


.cover-photo-credit {
	margin: 0;
	padding: 2% 10% 5% 10%;
	font-family: garamond-premier-pro, serif;
	font-weight: 400;
	font-style: italic;
	letter-spacing: .025em;
	text-align: left;
}


#iq {
	display: flex;
	margin: 10% 0 15% 0;
}


#iq > .iq-1 {
	flex: 1;
	margin: auto 0;
}


.iq-logo {
	width: 100%;
}


#iq > .iq-2 {
	flex: 2;
	margin: auto 10% auto 2%;
}


.iq-quote-words {
	margin: 0;
	padding: 0;
	font-size: 2.5vw;
	text-align: right;
	line-height: 1.1em;
}


.iq-quote-credit {
	margin: 0;
	padding: 1% 2.5% 0 0;	
	font-size: 1.7vw;
	text-transform: uppercase;
	letter-spacing: .025em;
	font-weight: 500;
	text-align: right;
}


#publications {
	display: flex;
	margin: 0;
	padding: 7% 10%;
}


#publications > .publications-1 {
	flex: 1;
	margin: 0;
	padding: .55% 0 0 0;
}


h3 {
	font-size: 2.5vw;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .025em;
	margin: 0 0 5% 0;
	padding: 0;
}


#publications > .publications-2 {
	flex: 2;
	margin: 0;
	padding: 5% 10% 5% 5%;
}


.contents {
	margin: 1.5em 0;
	font-style: italic;
	font-size: 4vw;
	line-height: 1.2em;
}


#blather {
	margin: 0;
	padding: 10% 5% 4% 5%;
	font-size: 2vw;
	text-align: center;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}


.garamond-little {
	font-family: garamond-premier-pro, serif;
	font-weight: 400;
	font-style: italic;
	letter-spacing: .025em;
}


.blip {
	font-weight: 700;
	font-style: italic;
}


.blip-2 {
	font-weight: 600;
	font-style: normal;
}


/* What's 'is called... UM 

P U B L I C A T I O N S

*/

h2 {
	font-size: 3.5vw;
	font-weight: 600;
	margin: 0;
	padding: 0;
}

h4 {
	font-size: 2.75vw;
	font-weight: 400;
	margin: 2% 0 6% 0;
	padding: 0;
}

#description {
	margin: 0;
	padding: 10% 20% 10% 20%;
}




#slideshow {
	margin: 0;
	padding: 0 0 10% 0;
}


.bg-gray1 {
	background: #ddd;
}


#to-dos-top {
	margin: 0 0 100% 0;
	padding: 4% 5% 6% 5%;
	text-align: center;
}

#to-dos-bottom {
	margin: 0 0 100% 0;
	padding: 4% 5% 6% 5%;
	text-align: center;
}

.white-on-black {
	background: #000;
	color: #fff;
}

.black-on-gray {
	background: #ddd;
	color: #000;
}

.black-on-white {
	background: #fff;
	color: #000;
	border-top: #ddd 2px solid;
}

.page {
	font-weight: 600;
}



.to-dos-items-1 {
	margin: 0;
	padding: 3%;
	color: #fff;
	font-size: 4vw;
	line-height: 1.2em;
}

.to-dos-items-2 {
	margin: 0;
	padding: 3%;
	color: #000;
	font-size: 4vw;
	line-height: 1.2em;
}



.parenthetical {
	font-weight: 300;
}



.spacer-1 {
	margin: 0 0 100% 0;
	background: #000;
}



.slides {
	margin: 0;
	padding: 2% 0 10% 0;
}


.slide-l {
	margin: 200% 0 200% 0;
	padding: 5% 10%; /*keep padding small so #image links frame the image well*/
	text-align: left;
}

.slide-c {
	margin: 200% 0 200% 0;
	padding: 5% 10%; /*keep padding small so #image links frame the image well*/
	text-align: center;
}

.slide-r {
	margin: 200% 0 200% 0;
	padding: 5% 10%; /*keep padding small so #image links frame the image well*/
	text-align: right;
}


.slide-h-1 {
	width: 100%;
}

.slide-h-2 {
	width: 88%;
}

.slide-v-2 {
	width: 58%;
}

.slide-s-3 {
	width: 90%;
}

.down-a-lil {
	padding-top: 10%;
}

.down-a-lot {
	padding-top: 20%;
}

.down-the-most {
	padding-top: 30%
}




#index {
	display: flex;
	margin: 0;
	padding: 7% 10%;
	border-top: #ddd 2px solid;
}



#index > .index-1 {
	flex: 2;
	margin: 0;
	padding: .55% 0 0 0;
}


#index > .index-2 {
	flex: 3;
	margin: 0;
	padding: 5% 10% 5% 5%;
}



ol.index-list {
	margin: 0;
	padding: 0 10% 5% 6%; 
	color: #aaa;
}


li.image-name {
	margin: 1.5em 0;
	/*font-style: italic;*/
	font-size: 1.6vw;
	line-height: 1.2em;
}


.italic {
	font-style: italic;
}


sup {
	font-weight: 500;
	vertical-align: baseline;
	position: relative;
	top: -.45em;
	font-size: 66%;
	line-height: 0;
	padding: 0;
	margin: 0 -.1em 0 -.1em;
}



div.footnote {
	margin: 5vw 0 0 0;
	padding: 0;
}

ol {
	margin: 0 0 0 0;
	padding: 0 0 0 1em;
}


li.footnote {
	font-size: 1.5vw;
	line-height: 1.4em;
/*	color: #000;*/
	margin: 2em 0 0 0;
	padding: 3px 0 6px 0;
}



.uppercase {
	text-transform: uppercase;
	letter-spacing: .025em;
}
















a {
	text-decoration-color: #ccc;
}

a:link {
	color: #000;
}

a:visited {
	color: #000;
}

a:hover {
	color: #000;
	text-decoration: underline;
}

a:active {
	color: #000;
}






a.pub {
	text-decoration: none;
}

a.pub:link {
	color: #000;
}

a.pub:visited {
	color: #000;
}

a.pub:hover {
	color: #000;
	text-decoration: underline;
}

a.pub:active {
	color: #000;
}







a.discrete {
	text-decoration: none;
}

a.discrete:link {
	color: #eee;
}

a.discrete:visited {
	color: #eee;
}

a.discrete:hover {
	color: #ddd;
	text-decoration: underline;
}

a.discrete:active {
	color: #000;
}




a.logo {
	text-decoration: none;
}

a.logo:link {
	color: #000;
}

a.logo:visited {
	color: #000;
}

a.logo:hover {
	color: #000;
}

a.logo:active {
	color: #000;
}




a.human {
	text-decoration: none;
	color: #333;
}

a.human:link {
	color: #333;
}

a.human:visited {
	color: #333;
}

a.human:hover {
	color: #000;
	text-decoration: underline;
}

a.human:active {
	color: #333;
}




a.to-dooz-w-o-b {
	text-decoration: underline;
	color: #fff;
}

a.to-dooz-w-o-b:link {
	color: #fff;
}

a.to-dooz-w-o-b:visited {
	color: #fff;
}

a.to-dooz-w-o-b:hover {
	color: #fff;
	text-decoration: none;
}

a.to-dooz-w-o-b:active {
	color: #fff;
}



a.to-dooz-b-o-w {
	text-decoration: underline;
	color: #000;
}

a.to-dooz-b-o-w:link {
	color: #000;
}

a.to-dooz-b-o-w:visited {
	color: #000;
}

a.to-dooz-b-o-w:hover {
	color: #000;
	text-decoration: none;
}

a.to-dooz-b-o-w:active {
	color: #000;
}



















img.animated {
	
-webkit-animation: filter-animation 12s infinite;
  animation: filter-animation 12s infinite;
}

@-webkit-keyframes filter-animation {
  0% {
    -webkit-filter: hue-rotate(0deg);
  }
/*
  33% {
    -webkit-filter: hue-rotate(720deg);
  }
  
  66% {
    -webkit-filter: hue-rotate(0deg);
  }
*/
  100% {
    -webkit-filter: hue-rotate(1440deg);
  }
}

@keyframes filter-animation {
  0% {
    filter: hue-rotate(0deg);
  }
/*
  33% {
    filter: hue-rotate(720deg);
  }

  66% {
    filter: hue-rotate(0deg);
  }
*/
  100% {
    filter: hue-rotate(1440deg);
  }
}



/* NOTES
The first publicized animations used: filter-animation 2s infinite; with hue-rotate keyframes being 0% = 0deg, 100% = 720deg;
The second: 4s; 0, 1440;
The third: 6s; 0, 2880;
The fourth: 2s; 0, 360;
The fifth: 10s; 0, 2880;
The sixth: 4s; 0, 1440;
The seventh: 16s; 0, 1440;
The eighth: 4s; 0, 1440;

*/