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

/*CSS Reset:*/
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}

/* border-box so that border widths aren't added to the total width of the element: */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;

}

*, *:before, *:after {
  box-sizing: inherit;
}

/*Clearfix:*/
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
.clear { clear: both;	}

img {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;
	font-size: 0;
	white-space: nowrap; 
	border: 0px;
	vertical-align:bottom;
}
p {
	padding: 0px;
	line-height: 21px;
}

html body {
 	 height: 100%;
	/* overflow:hidden;*/
}
a, a:hover, a:visited {
	outline: none;
	text-decoration: none;
}

a img { border: none; }
a:visited { color: rgba(0,0,0,0.60); }

a { color: rgba(0,0,0,0.60) }
a:hover { color: rgba(0,0,0,1.00) }

.bio i {
	padding-left: 2px;
	font-size: 14px;
}



/* ==========================================================================
   Colors
   ========================================================================== */


.just-intros {
	margin-top: 45px;	
}
.category-list {
	column-count: 2;
	line-height: 24px;
	margin-top: 40px !important;
	padding: 0px;
	padding-left: 0px !important;
}
.category-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.category-list a {
	color: rgba(0,0,0,0.60);
}
.category-list a:hover {
	color: rgba(0,0,0,1.00);
}


.pdf-download {
	display: block;
		margin-top: 8px;
}
.pdf-download a {
	background-color: rgba(0,0,0,0.40);
	color: white;
	padding: 3px 6px;	
}
.pdf-download a:hover {
	background-color: rgba(0,0,0,1.00);
	color: white;
}

/* ==========================================================================
   Timeline
   ========================================================================== */
 
 .timeline {
 	position: relative;
	margin-top: 80px;
 }
 .timeline-head {
 	margin-bottom: 40px;
 }
  .time-cats {
 	display: block;
 }
 .time-cats ul {
 	list-style: none;
	column-count: 4;
	font-size: 13px;
 }
 .tl-hint {
 	font-size: 13px;
	font-style: italic;
	color: #666;
	margin: 20px 0px -20px 0px;
 }
.tl-segment {
	width: 12.5%;
	border-left: 1px solid rgba(0,0,0,0.50);
	float: left;
	height: 1070px;
}
.ninety {
	border-right: 1px solid rgba(0,0,0,0.50);
}
.timeline p {
	font-size: 13px;
	padding: 6px 7px 0px 7px;
}

.ttop-45 {
	position: absolute;
	z-index: 2;
	left: -0.5%;
	top: -25px;
	font-size: 14px;
}
.tbottom-45 {
	position: absolute;
	z-index: 2;
	left: -0.5%;
	bottom: -25px;
	font-size: 14px;
}
.ttop-50 {
	position: absolute;
	z-index: 2;
	left: 11.75%;
	top: -25px;
	font-size: 14px;
}
.tbottom-50 {
	position: absolute;
	z-index: 2;
	left: 11.75%;
	bottom: -25px;
	font-size: 14px;
}
.ttop-55 {
	position: absolute;
	z-index: 2;
	left: 24.25%;
	top: -25px;
	font-size: 14px;
}
.tbottom-55 {
	position: absolute;
	z-index: 2;
	left: 24.25%;
	bottom: -25px;
	font-size: 14px;
}
.ttop-60 {
	position: absolute;
	z-index: 2;
	left: 36.25%;
	top: -25px;
	font-size: 14px;
}
.tbottom-60 {
	position: absolute;
	z-index: 2;
	left: 36.25%;
	bottom: -25px;
	font-size: 14px;
}
.ttop-65 {
	position: absolute;
	z-index: 2;
	left: 49.25%;
	top: -25px;
	font-size: 14px;
}
.tbottom-65 {
	position: absolute;
	z-index: 2;
	left: 49.25%;
	bottom: -25px;
	font-size: 14px;
}
.ttop-70 {
	position: absolute;
	z-index: 2;
	left: 61.75%;
	top: -25px;
	font-size: 14px;
}
.tbottom-70 {
	position: absolute;
	z-index: 2;
	left: 61.75%;
	bottom: -25px;
	font-size: 14px;
}
.ttop-75 {
	position: absolute;
	z-index: 2;
	left: 74%;
	top: -25px;
	font-size: 14px;
}
.tbottom-75 {
	position: absolute;
	z-index: 2;
	left: 74%;
	bottom: -25px;
	font-size: 14px;
}
.ttop-80 {
	position: absolute;
	z-index: 2;
	left: 86.55%;
	top: -25px;
	font-size: 14px;
}
.tbottom-80 {
	position: absolute;
	z-index: 2;
	left: 86.55%;
	bottom: -25px;
	font-size: 14px;
}
.ttop-85 {
	position: absolute;
	z-index: 2;
	left: 98.50%;
	top: -25px;
	font-size: 14px;
}
.tbottom-85 {
	position: absolute;
	z-index: 2;
	left: 98.50%;
	bottom: -25px;
	font-size: 14px;
}

.utilitarian, .figural-1, .figural-2, .early-string, .shapes, .assemblies, .late-string, .patterns, .rods-through-plane, .op, .rods-planes-early, .columns, .bundles-rods, .bundles-tubes, .portals, .constructions, .rods-planes-late, .shards, .stackling, .miniatures, .oddities  {
	background-color: #000;
	color: #fff;
	height: 30px;
	position: absolute;
	z-index: 2;
}


.utilitarian {
	width: 20%;
	left: 19%;
	top: 40px;
}
.figural-1 {
	width: 14%;
	left: 9%;
	top: 90px;
}
.figural-2 {
	width: 9%;
	left: 69%;
	top: 90px;
}
.early-string {
	width: 15%;
	left: 18%;
	top: 140px;
}
.shapes {
	width: 10%;
	left: 37.5%;
	top: 190px;
}
.assemblies {
	width: 5%;
	left: 44.5%;
	top: 240px;
}
.late-string {
	width: 11%;
	left: 42.5%;
	top: 290px;
}
.patterns {
	width: 9%;
	left: 49.0%;
	top: 340px;
}
.rods-through-plane {
	width: 25%;
	left: 52.0%;
	top: 390px;
}
.op {
	width: 12%;
	left: 47.0%;
	top: 440px;
}
.rods-planes-early {
	width: 8%;
	left: 52.0%;
	top: 490px;
}
.columns {
	width: 26%;
	left: 55.0%;
	top: 540px;
}
.bundles-rods {
	width: 6%;
	left: 54.0%;
	top: 590px;
}
.bundles-tubes {
	width: 12%;
	left: 62.0%;
	top: 640px;
}
.portals {
	width: 10%;
	left: 62.0%;
	top: 690px;
}
.constructions {
	width: 11.5%;
	left: 75.0%;
	top: 740px;
}
.rods-planes-late {
	width: 11.5%;
	left: 78.0%;
	top: 790px;
}
.shards {
	width: 14.5%;
	left: 85.0%;
	top: 840px;
}
.stackling {
	width: 12.5%;
	left: 87.0%;
	top: 890px;
}
.miniatures {
	width: 10%;
	left: 85.0%;
	top: 940px;
}
.oddities {
	width: 6.5%;
	left: 87.0%;
	top: 990px;
}


.timeline a div {
	font-family: 'ProximaNovaSemibold';
	color: #FFF;
	white-space: nowrap;
	background-color: #666;
}
.timeline a div:hover {
	background-color: #000;
}
.timeline a {
	color: #333;
}

.tl-group {
	display: none;
}



.popups {
	margin-left: -1px;
}
.popup-id {
	background-color: black;
	color: white;
	padding: 10px;
	height: 40px;
	font-family: 'ProximaNovaSemibold';
}
.popup-link {
	background-color: white;
	color: black;
	padding: 10px;
	height: 40px;
}
.popup-link a {
	color: #000;
}
.popup-link a:hover {
	color: #666;
}
.popup-images {
	width: 100%;
	white-space: nowrap;
}
.popup-images img {
	height: 200px;
	width: auto;
}
.popup-img-cont {
	/*width: 500px;*/
	overflow-x: scroll;
}
.tl-scroll {
	float: right;
	font-style: italic;
	color: #666;
}
.tl-moreinfo {
	float: left;
	padding-right: 4px;
}


/* ==========================================================================
   Fluid grid rules
   ========================================================================== */

.one-unit {
	width: 2.333%;
	margin: 10px 3%;
	float: left;	
	min-height: 50px;
}
.two-unit {
	width: 10.667%;
	margin: 10px 3%;
	float: left;
	min-height: 50px;
}
.three-unit {
	width: 19%;
	margin: 10px 3%;
	float: left;
	min-height: 50px;
}
.four-unit {
	width: 27.333%;
	margin: 10px 3%;
	float: left;
	min-height: 50px;
}
.five-unit {
	width: 35.666%;
	margin: 10px 3%;
	float: left;
	min-height: 50px;
}
.six-unit {
	width: 44%;
	margin: 10px 3%;
	float: left;
	min-height: 50px;
}
.seven-unit {
	width: 52.333%;
	margin: 10px 3%;
	float: left;
	min-height: 50px;
}
.eight-unit {
	width: 60.666%;	
	margin: 10px 3%;
	float: left;
	min-height: 50px;
}
.nine-unit {
	width: 69%;	
	margin: 10px 3%;
	float: left;
	min-height: 50px;
}
.ten-unit {
	width: 77.333%;	
	margin: 10px 3%;
	float: left;
	min-height: 50px;
}
.eleven-unit {
	width: 85.666%;	
	margin: 10px 3%;
	float: left;
	min-height: 50px;
}
.twelve-unit {
	width: 94%;	
	margin: 10px 3%;
	min-height: 50px;
}

.one-unit, 
.two-unit, 
.three-unit,
.four-unit,
.five-unit, 
.six-unit,
.seven-unit,
.eight-unit,
.nine-unit,
.ten-unit,
.eleven-unit,
.twelve-unit {
	background-color: #C1C1C1;
}





/* ==========================================================================
   General layout rules
   ========================================================================== */

body {
	font-family: 'ProximaNovaRegular';
	background-color: rgba(0,0,0,0.05);
	position: relative;
}

h2 {
	font-size: 24px;
	padding: 25px 0 80px 0;
	font-family: 'ProximaNovaRegular';
	border-bottom: 3px solid black;
}
h3 {
	font-family: 'ProximaNovaBold';
	margin: 0 0 20px 0;
	border-top: 1px solid black;
	padding: 10px 0 0 0;
}
.about h3, .bio h3 {
	margin: 40px 0 18px 0;
	border-top: 1px solid black;
	padding: 10px 0 0 0;
}

p {
	margin: 0 0 16px 0;
}
.about ul {
	display: block;
	list-style-type: disc;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: 0;
	margin-right: 0;
	padding-left: 18px;
}



#wrapper {
	width: 90%;
	/*max-width: 1400px;*/
	margin: 0px auto;
	/*background-color: rgba(0,0,0,0.10);*/
	position: relative;
}
header {
	position: fixed;
	/*background-color: rgba(0,0,0,0.10);*/
	width: 20%;

}
header h1 {
	font-size: 24px;
	float: left;
	padding: 25px 0 0 0;
	font-family: 'ProximaNovaBold';
} 
#main {
	width: 73%;
	/*height: 3000px;*/
	float: right;
	/*background-color: rgba(0,0,0,0.10);*/
	/*position: relative;*/
}

.intro {
	font-family: 'ProximaNovaLight';
	font-size: 24px;
	margin: 20px 0 0 0;
	border:none;
	line-height: 32px;
}



/* ==========================================================================
   Home
   ========================================================================== */
   
.home-big {
	margin: 50px 0 50px 0;
	position: relative;
	/*height: 500px;*/
} 
#full-width-slider  {
  width: 100%;
  height: 300px;
  margin: 50px 0 50px 0;
}




/* ==========================================================================
   Biography
   ========================================================================== */
 .bio-images {
 	margin: 20px 0px 30px 0px;
 }  
 .bio-image-1 {
 	width: 47%;
	margin: 0 3% 0 0;
	float:left;
 }
 .bio-image-2 {
 	width: 47%;
	margin: 0 0% 0 3%;
	float: right;
 }
 .bio-images-caption {
 	font-size: 14px;
	color: rgba(0,0,0,0.50);
	margin: 20px 0 0 0;
	clear: both;
 }
 .top-image {
 	margin-top: 40px;
 }
 
 /* ==========================================================================
   Bio Timeline
   ========================================================================== */
.bio-item {
	margin: 25px 0 25px 0;
}
.tl-year {
	float: left;
	width: 12%;
	margin: 0px 0% 0 0;
	display: block;
}
.tl-text {
	float: left;
	width: 88%;
	display: block;
}
.subheader {
	margin-bottom: 60px !important;
}



/* ==========================================================================
   Analysis
   ========================================================================== */
 .analysis-images {
 	margin: 20px 0px 30px 0px;
	position: relative;
 }  
 .analysis-image-1 {
 	width: 22.5%;
	margin: 0 1.5% 0 0;
	float:left;
	position: relative;
 }
 .analysis-image-2 {
 	width: 22.5%;
	margin: 0 1.5% 0 1.5%;
	float: left;
	position: relative;
 }
  .analysis-image-3 {
 	width: 22.5%;
	margin: 0 1.5% 0 1.5%;
	float:left;
	position: relative;
 }
 .analysis-image-4 {
 	width: 22.5%;
	margin: 0 0% 0 1.5%;
	float: left;
	position: relative;
 }
 .analysis-caption {
 	font-size: 12px;
	color: rgba(0,0,0,0.50);
	margin: 6px 0 3px 0;
	display: block;
	font-style: italic;
 }
  .analysis-caption a {
  	color: rgba(0,0,0,0.50);
  }
    .analysis-caption a:hover {
  	color: rgba(0,0,0,0.99);
  }
   .analysis-link {
 	font-size: 12px;
	color: rgba(0,0,0,0.50);
	margin: 3px 0 30px 0;
	display: block;
 }
  .analysis-link a {
  	color: rgba(0,0,0,0.50);
  }
    .analysis-link a:hover {
  	color: rgba(0,0,0,0.99);
  }
 
 
 /* ==========================================================================
   Exhibtions
   ========================================================================== */
 .exhibitions-intro {
 	margin-top: 30px;
	padding-bottom: 15px;
 }
.exhibitions h3 {
	margin: 0px 0 3px 0;
	border-top: 1px solid black;
	padding: 10px 0 0 0;
}
.exhibitions p {
	margin-bottom: 0px;
}
 
 

/* ==========================================================================
   Categories
   ========================================================================== */


.category-big {
	margin: 70px 0 70px 0;
}
.category-images {
	width: 103%;
	margin: 0px 0% 0 -1.5%;
	padding: 60px 0 60px 0;
	 display: flex;
  flex-wrap: wrap;
}

.category-image {
	width: 22%;
	margin: 12px 1.5%;
}

@media all and (max-width: 768px) {
.category-image {
	width: 30.333%;
	margin: 12px 1.5%;
}
}
@media all and (max-width: 500px) {
.category-image {
	width: 47%;
	margin: 12px 1.5%;
}
}



.category-images a {
	opacity: 1;
	zoom: 1;
	filter: alpha(opacity=1);
	-webkit-transition:opacity 0.5s ease-in-out;
	-moz-transition:opacity 0.5s ease-in-out;
	-o-transition:opacity 0.5s ease-in-out;
	transition:opacity 0.5s ease-in-out;
}
.category-images a:hover {
	opacity: .8;
	filter: alpha(opacity=80);
	-webkit-transition:opacity 0.3s ease-in-out;
	-moz-transition:opacity 0.3s ease-in-out; 
	-o-transition:opacity 0.3s ease-in-out;  
   	transition:opacity 0.3s ease-in-out;
}



/* ==========================================================================
   Gallery
   ========================================================================== */
   
.gallery-images {
	width: 103%;
	margin: 0px 0% 0 -1.5%;
	padding: 60px 0 60px 0;
}

.gallery-image {
	width: 47%;
	margin: 12px 1.5% 25px 1.5%;
	float: left;
}
.gallery-images-s {
	width: 103%;
	margin: 0px 0% 0 -1.5%;
	padding: 60px 0 60px 0;
}

.gallery-image-s {
	width: 22%;
	margin: 5px 1.5% 33px 1.5%;
	float: left;
}
.gallery-info {
	color: rgba(0,0,0,0.50);
	display: block;
	margin: 14px 0 0 0;
	font-size: 12px;
	/*border-top: 1px dotted rgba(0,0,0,0.50);
	padding-top: 10px;*/
}
.gallery-link {
	color: rgba(0,0,0,0.50);
	display: block;
	margin: 4px 0 0 0;
	font-size: 12px;
	text-transform: uppercase;
}
.gallery-link a {
	color: rgba(0,0,0,0.50);
}
.gallery-link a:hover {
	color: rgba(0,0,0,1.0);
}
.sep {
	padding: 0 7px 0 7px;
}
.hovertext img {
	width: 100%;
	height: auto;
}
.hovertext a {
	position: absolute;
	width: 100%;
	height: 100% !important;	
	text-decoration: none;
	bottom: 0px;
	background-image: url(https://web.archive.org/web/20220205003717im_/http://lillianflorsheim.net/img/dark.png);
	background-size: cover;
	background-position: left, bottom;
	opacity:0;
	zoom: 1;
	filter: alpha(opacity=0);
	-webkit-transition:opacity 0.5s ease-in-out;
	-moz-transition:opacity 0.5s ease-in-out;
	-o-transition:opacity 0.5s ease-in-out;
	transition:opacity 0.5s ease-in-out;
	z-index: 99;
}
.hovertext a:hover {
	opacity:.70;
	zoom: 1;
	filter: alpha(opacity=80);
	-webkit-transition:opacity 0.3s ease-in-out;
	-moz-transition:opacity 0.3s ease-in-out; 
	-o-transition:opacity 0.3s ease-in-out;  
   	transition:opacity 0.3s ease-in-out;
	z-index: 99;	
}
.hovertext p {
	position: absolute;
	padding: 10px 20px 10px 20px;
	bottom: 0px;
	left: 0px;
	font-size: 18px;
	color: #FFF;
	z-index: 999;
	zoom: 1;
	filter: alpha(opacity=100);
	/*left: -1px;*/
}
.hl-text {
	padding: 15px 15px;
	background-color: rgba(255,255,255,0.50);
}
.hoverdiv {
	position: relative;
}

.grid-icons {
	float: right;
	margin: 10px -10px 0px 0;
	width: 80px;
}
.grid-icons a {
	width: 25px;
	float: left;
	margin: 0 0px 0 9px;
	padding: 0px;
	opacity: .3;
}
.g-active {
	opacity: .7 !important;
}
.grid-icons a:hover {
	opacity: 1;
}




/* ==========================================================================
   Details
   ========================================================================== */


.details h3 {
	font-family: 'ProximaNovaBold';
	margin: 15px 0 0px 0;
	border-top: 1px dotted rgba(0,0,0,0.80);
	padding: 10px 0 0 0;
}   
   



/* ==========================================================================
   TWO DIMENSIONAL WORK
   ========================================================================== */
  
.two-d-info {
	color: rgba(0,0,0,0.60);
	display: block;
	margin: 15px 0 0 0;
	font-size: 13px;
	text-transform: uppercase;
	padding-top: 0px;
}
.two-d-description {
	color: rgba(0,0,0,0.60);
	display: block;
	margin: 4px 0 0 0;
	font-size: 13px;
	font-style: italic;
}
.two-d-section {
	border-top: 3px solid black;
	margin-top: 75px;
	margin-bottom: -20px;
}
.two-d-intro {
	margin-top: 30px;
}




/* ==========================================================================
   PRESS
   ========================================================================== */
   
.clipping  {
	margin: 40px 0px 10px 0px;
	border-top: 1px solid black;
	padding: 15px 0px 0px 0px;
} 
.clipping-copy {
	width: 75%;
}
.np-source {
	color: #666;
	font-size: 15px;
}   
.clipping-section ul {
	list-style-type: none;
	padding-left: 0px;
	margin-left: 23px;
	margin-top: -7px;
} 
.clipping-section ul li {
	text-indent: -22px;
} 
.clipping-section li:before {
	content: "— ";
	text-indent: -20px;
} 


/* ==========================================================================
   COLLECTIONS
   ========================================================================== */
.collection-section {
	margin: 35px 0px 0px 0px;
}
.collections-sction p {
		line-height: 26px;
}
.bibliography-section {
	margin: 35px 0px 0px 0px;
}
.bibliography-section p {
	line-height: 22px;
}


/* ======================================================
   MAIN SECTIONS
   ====================================================== */

section {
	margin: 0px;
	background-color: rgba(255,255,255,0.20);
}
.inner-section {
	width: 90%;
	max-width: 1200px;
	margin: 20px auto 20px auto;
	padding: 0px 0px 0px 0px;
	min-height: 100px;
}

/* ======================================================
   FOOTER
   ====================================================== */

footer {
	margin: 0px;
	background-color: rgba(0,0,0,0.20);
}
.inner-footer {
	width: 90%;
	max-width: 1200px;
	margin: 20px auto 20px auto;
	padding: 0px 0px 0px 0px;
	min-height: 100px;
}



/* ---------->>> Masonry-Simple <<<----------- */


.thumb {
	width: 31.333%;
	margin: 1%;
	float: left;	
}














/* ==========================================================================
   Media Queries 
   ========================================================================== */
   
@media all and (max-width: 1500px) {
.clipping-copy {
	width: 85%;
}
}


@media all and (max-width: 1140px) {

.home header {
	background-color: rgba(255,255,255,0.00) !important;
}

header {
	position: fixed;
	background-color: #f3f3f3;
	width: 90%;
	padding: 0 0 5px 0;
	border-bottom: 3px solid black;
	z-index: 9999;
}
#main {
	width: 100%;
	float: none;
	margin: 80px 0 0 0;
}
header h1 {
	font-size: 24px;
	float: left;
	padding: 10px 0 0 0;
}
 .timeline {
	margin-top: 80px;
 }
 .time-cats {
 	display: block;
 }
  .timeline-head {
 	margin-bottom: 50px;
 }
h2 {
	padding: 25px 0 50px 0;
}	
.clipping-copy {
	width: 100%;
}
	
}



@media all and (max-width: 900px) {

.tl-group {
	display: none;	
}

}



@media all and (max-width: 768px) {
.tl-year {
	width: 15%;
	margin: 0px 0% 0 0;
}
.tl-text {
	width: 85%;
}
 .analysis-image-1 {
 	width: 47%;
	margin: 0 3% 0 0;
	float:left;
 }
 .analysis-image-2 {
 	width: 47%;
	margin: 0 0% 0 3%;
	float: right;
 }
  .analysis-image-3 {
 	width: 47%;
	margin: 0 3% 0 0;
	float:left;
 }
 .analysis-image-4 {
 	width: 47%;
	margin: 0 0% 0 3%;
	float: right;
 }
}

@media all and (max-width: 600px) {
.tl-year {
	width: 20%;
	margin: 0px 0% 0 0;
}
.tl-text {
	width: 80%;
}
.category-list {
	column-count: 1;
	line-height: 24px;
}
.timeline {
 	position: relative;
	margin: 80px 2%;
}
 .time-cats ul {
	column-count: 2;
 }
}


@media all and (max-width: 500px) {

.gallery-image {
	width: 97%;
	margin: 12px 1.5% 25px 1.5%;
	float: none;
}

.gallery-image-s {
	width: 47%;
	margin: 5px 1.5% 33px 1.5%;
	float: left;
}
 
}