#closeButton {
	/*font-family:Arial, Helvetica, sans-serif !important;
	font-size:3em; when the button was arial character for home*/
	font-size:2.6em;
	position:absolute;
	padding:0px 10px;
	color:#2e8abe;
	top:5px;
	right:10px;
	cursor: pointer;
	display:none;
	z-index:100000;
	
	transform-origin: 100% 0%; 
	-webkit-transform-origin: 100% 0%; 
	-moz-animation-name: dropArrow;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-duration: 1s;

    -webkit-animation-name: dropArrow;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 1s;

    animation-name: dropArrow;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 1s;
}
#closeButton:hover {
	color:#444;
}

	
#thumb-holder { 
	width:100%; height:100%; position:relative; overflow:hidden; text-align:center; background:#edecea;
}

#arrow-left, #arrow-right{ 
	color:#2e8abe; position:absolute; bottom:5px; margin:0px; display:none; 
}
#arrow-right {
	transform-origin: 100% 100%; 
	-webkit-transform-origin: 100% 100%; 
	
	-moz-animation-name: dropArrow;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-duration: 1s;

    -webkit-animation-name: dropArrow;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 1s;

    animation-name: dropArrow;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 1s;
	}
	
	#arrow-left{ left:0;  }
	#arrow-right{ right:0;  }

	#arrow-left:hover, #arrow-right:hover{ cursor:pointer; color:#000;  }
	
	@-moz-keyframes dropArrow {
		0% {
			opacity:0;
			-moz-transform: scale(5);
		}
		100% {
			opacity:1;
			-moz-transform: scale(1);
		}
	}
	@-webkit-keyframes dropArrow {
		0% {
			opacity:0;
			-webkit-transform: scale(5);
		}
		100% {
			opacity:1;
			-webkit-transform: scale(1);
		}
	}
	@keyframes dropArrow {
		0% {
			opacity:0;
			transform: scale(5);
		}
		100% {
			opacity:1;
			transform: scale(1);
		}
	}


ul#thumb-list{ display:inline-block; position:relative; left:0; padding:0; height:100%; 
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);/*because safari is stupid*/
	padding-top:60px;
}
.thumb-list-ul-li{ 
	display:inline; float:left; position: relative; height:100%;		 
	}
   .galleryThumb { 
                position:absolute;
                bottom:0px;
                left:0px;
                z-index:100;
            }
		.gallery-thumb { 
			position:absolute;
			bottom:0px;
			left:0px;
			z-index:100;
		}
		.thumb-bck { 
			position:absolute;
			bottom:100px;
			left:0px;				
			max-height:100%;	
			display:none;			
		}
		ul#thumb-list li.current-thumb img {cursor: default !important; }
		ul#thumb-list li:hover img{ cursor:pointer;}
				
				
.imageDetails {
	left:10%;
	top:10px;
	position:absolute;
	z-index:200;
	text-align:left;
}
.imageTitleCentered {
	top:10px;
	width:100%;
	position:absolute;
	z-index:200;
	text-align:center;
}

.galleryArt>li {
	margin-left:15px;
	margin-right:15px;
}
li {
	/*margin-left:17px;*/
}
.galleryItemTitle {	
	top:10px;
	left:0px;
	position:absolute;
	z-index:200;
	text-align:left;
	font-size:1.3em;
}

.galleryItemYear {
	top:10px;
	right:0px;
	position:absolute;
	z-index:200;
	text-align:right;
	font-size:1.3em;
	color:#999;
}

.subpage .galleryItemYear {
	right:20px;
}

.spage .galleryItemYear {
	display: none; /*opened from shared link, this would be under home button*/
}

.galleryItemDescription {
	width:100%;
	position:absolute;
	z-index:200;
	text-align:left;
	max-width:600px; 
	margin:auto auto;
	
	/*position: absolute;*/
	 top: 50%;
	 transform: translateY(-50%);
	 -moz-transform: translateY(-50%);
	 -webkit-transform: translateY(-50%);
	 -ms-transform: translateY(-50%);
	 
	 background:rgba(248,248,248,0.88);
	 padding:10px;
	 
	 pointer-events: none;
}

.idDescription {
	position:relative;
	z-index:200;
	text-align:left;
	margin:0 auto;
	background:rgba(248,248,248,0.75);
}

.collapseButton {
	content:"Hide text";
	cursor:pointer;
	text-decoration:underline;
	color:#036;
	background:rgba(248,248,248,0.75);	
	width:auto;
	float:left;
}
@media screen and (max-height: 500px) {	
	.collapseButton {		
		display:none;
	}
	.idDescription {
		display:none; /*phone users do not care about the text*/
	}
/*	ul#thumb-list li {
		padding:0 10px;
	}*/
}

.galleryThumbArt {
	margin-top:40px;
	/*position:relative !important; ovo	*/
}
.galleryThumbDev {
	margin-top:70px;
	/*position:relative !important; ovo	*/
}
.galleryItemIconHolder {
	position:absolute;
	top:35px;
	font-size:1.6em;
}

.btnZoomOut {
	position:absolute;
	bottom:15px;
	right:20px; /*was 20*/
	color:#2e8abe;
	z-index:1999;
	font-size:3em;
	cursor:pointer;
}

@media screen and (max-width: 880px) {	
	.btnZoomOut {		
		right:60px;
	}
/*	ul#thumb-list li {
		padding:0 10px;
	}*/
}
	.btnZoomOut:hover {
		color:#000;
	}

.imageButton {
	z-index:300;
	position: absolute;
	display:block;
	margin-left:auto;
	margin-right:auto;
	bottom:20px;	
	width:1.5em;
	height:1.5em;
	left:0;
	right:0;
	pointer-events:all;
	cursor: pointer;
	font-size:2.6em;
	/*padding:0px 10px;	*/
	color:#aaa;	
}

.tempImage {
	max-width:100%;
	max-height:100%;
	z-index:101;
	display:none;
	pointer-events:none;
	bottom:auto !important;
}
.circleButton {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 - not really, thanks, but I am keeping it */	
    background: #FFF;
    border: 2px solid #aaa;
	color:#aaa;
}
.circleButton:hover {
    border: 2px solid #000;
	color:#000;
}
.toggleOn {
	border: 2px solid #a00;
	color:#a00;
}
.toggleOn:hover {
	border: 2px solid #e00;
	color:#e00 !important;
}

/*for subpage container art*/
.scrollable { 
	overflow:auto;
}
/*for single pages in art*/
.fullheight
{
	height:100%;
}



/*subpage stuff*/


.subpageHolder {
	width:100%;	
	position:relative;
	display:none;
	z-index:1800;
	text-align:left;
	overflow:auto;
	height:100%;
    
}

.scrolled {
    border-top: 2px dashed rgb(163, 163, 163);
}

.subpage {
	padding: 0px 20px;
	font-size:1.1em;
	
	padding: 0px 20px;
	height:100%;
	overflow:auto;
	z-index:1810;
	position:relative;
	text-align: left;
	
}
.subpageDev {
	padding: 0px 20px;
	font-size:1.1em;
	/*height:100%;
	overflow:auto;*/

	font-size:15px;
	padding-left:4px;
	padding-right:4px;
	padding-bottom:50px;
}


.subpage p, .subpageDev p {
	margin-top:10px;	
	margin-bottom:10px;
    
  /*-webkit-column-width: 300px;
     -moz-column-width: 300px;
          column-width: 300px;
  -webkit-column-gap: 3em;
     -moz-column-gap: 3em;
          column-gap: 3em;
		  min-height:200px;
		  border-bottom:thin solid #999;
		  float:left;
		  width:30%;*/
}

.sculptureTitle {
	margin-top:8px;
	width:100%;
	font-size:1.3em;
	display:block;
}
.sculptureDescription {
	width:100%;	
}
.sculptureYear {
	top:10px;
	right:0px;
	position:absolute;
	z-index:200;
	text-align:right;
	font-size:1.3em;
	color:#999;
}

h3 {
	font-weight:bold;
	font-size:1.2em;
	padding-top:15px;
}
h4 {
	font-weight:bold;
	font-size:1.1em;
	padding-top:10px;
}

.subpage img, 
.subpageDev img {
	position: relative; 
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
}

.padding40 {
	padding-top:40px;
	height:100%;
}
.padding70 {
	padding-top:70px;
	height:100%;
}


.subpageDev ul {
	list-style-type:circle !important;
	list-style-position: inside !important;
	margin-bottom:10px;
	margin-top:10px;
}

.subpageDev ul li{
	display:list-item !important;
	margin-left:0px !important; 
	float:none !important;
}


.subpageDev ol {
	list-style-type:decimal !important;
	list-style-position: inside !important;
	margin-bottom:10px;
	margin-top:10px;
}

.subpageDev ol li{
	display:list-item !important;
	margin-left:0px !important; 
	float:none !important;
}





.subpageThumbnailHolder {
	position:absolute;
	max-width:100%;
	bottom:5px;
}

.subpageThumbnailHolder img {
	box-shadow: 0px 0px 5px #333333;
}

ul#thumb-list li.current-thumb .subpageThumbnailHolder img { 
	cursor:pointer !important ;
}

.subpageZoomContainer
{
	position: 	absolute;
	width:95%;
	height:100%;
	overflow:hidden;
	z-index:2000;
	top:0;
	padding:5px;
	pointer-events:none;
}
.subpageZoomContainer img
{
	pointer-events:all;
}

.wobblehead {
	position:absolute;
	left:0px;
	bottom:0px;
	height: 90%;
    width: 100%;
	padding:5px;
    z-index: -1;
}
.wobblehead img {
	max-height:100%;
    width: auto;
    bottom:0px;
    position: absolute;  
}




.3dhImageReplacement {
	position:absolute;
	bottom:0;

  background-size: contain;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}


/*abandoned code*/
.tempImage3dh {
	width:100%;
	height:100%;
	z-index:101;
	display:none;
	pointer-events:none;	
	background-size : cover;
	background-repeat:no-repeat;
	background-position:center;
	position:absolute;
}

.YoutubeHolder3dh {
	width:133px;
	height:100px;
}
.YoutubeHolder3dh iframe {
	transform: scale(0.208,0.208) ;
}

.YoutubeHolder3dhClickOverlay {
	position:absolute;
	width:100%;
	height:100%;
	margin-top:5px;
	margin-bottom:8px;
	z-index:100000;
}

/*by http://projects.lukehaas.me/css-loaders/*/
.loader {
  margin: 50px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 8em;
  height: 8em;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }