/* @override http://test.herbert-list.com/css/webstyles.css
	 */

@font-face {
  font-family: 'GaramondPremrPro';
  src: url('../fonts/GaramondPremrPro.eot'); /* IE9 Compat Modes */
  src: url('../fonts/GaramondPremrPro.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/GaramondPremrPro.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/GaramondPremrPro.woff') format('woff'), /* Modern Browsers */
    url('../fonts/GaramondPremrPro.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/GaramondPremrPro.svg') format('svg'); /* Legacy iOS */  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham-Medium';
  src: url('../fonts/Gotham-Medium.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/Gotham-Medium.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/Gotham-Medium.woff') format('woff'), /* Modern Browsers */
    url('../fonts/Gotham-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/Gotham-Medium.svg') format('svg'); /* Legacy iOS */  
    font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham-Light';
  src: url('../fonts/Gotham-Light.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Gotham-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/Gotham-Light.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/Gotham-Light.woff') format('woff'), /* Modern Browsers */
    url('../fonts/Gotham-Light.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/Gotham-Light.svg') format('svg'); /* Legacy iOS */  font-weight: normal;
  font-style: normal;
}



@font-face {
  font-family: 'AvenirNext-Regular';
  src: url('../fonts/AvenirNext-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/AvenirNext-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/AvenirNext-Regular.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/AvenirNext-Regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/AvenirNext-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/AvenirNext-Regular.svg') format('svg'); /* Legacy iOS */  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AvenirNext-DemiBold';
  src: url('../fonts/AvenirNext-DemiBold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/AvenirNext-DemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/AvenirNext-DemiBold.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/AvenirNext-DemiBold.woff') format('woff'), /* Modern Browsers */
    url('../fonts/AvenirNext-DemiBold.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/AvenirNext-DemiBold.svg') format('svg'); /* Legacy iOS */  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AvenirNext-Medium';
  src: url('../fonts/AvenirNext-Medium.eot'); /* IE9 Compat Modes */
  src: url('../fonts/AvenirNext-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/AvenirNext-Medium.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/AvenirNext-Medium.woff') format('woff'), /* Modern Browsers */
    url('../fonts/AvenirNext-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/AvenirNext-Medium.svg') format('svg'); /* Legacy iOS */  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'misoregular';
    src: url('../fonts/miso-regular-webfont.eot');
    src: url('../fonts/miso-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/miso-regular-webfont.woff') format('woff'),
         url('../fonts/miso-regular-webfont.ttf') format('truetype'),
         url('../fonts/miso-regular-webfont.svg#misoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


html, html a {
    -webkit-font-smoothing: antialiased !important;
}

div#mainnav {
	width: 860px;
	padding-right: 0;
	padding-top: 0;
	padding-left: 0;
	font-size: 26px;
	margin-top: 0;
	margin-bottom: 30px;
	position: relative;
}
h2{
	background-color: black;
	color: white;
}

h2#mainnav {
	text-align: left;
	text-transform: uppercase;
}

h2 a {
	text-transform: uppercase;
}
a:hover {
	text-decoration: none;
}


a:link {
	text-decoration: none;
	color: #666666;
}
a:hover {
	text-decoration: none;
	color: #0091ce;
	}
a:visited{
	color: #666666;
	text-decoration: none;

}

 .redover:hover a:visited h5{
	color: #ffffff;
	text-decoration: none;

}

h2 a:hover {
	text-decoration: none;
	color: black;
	}

div#imagenav {
/*	background-color: #ce1900;*/
	width: 0px;
	padding: 0;
	padding-right: 0;
	font-size: 13px;
	margin: 50px auto 0;
	display: none;
}

ul {
	margin: 0;
	max-width: 850px;
	padding: 0;
}

#container {
	padding-right: 0px;
	width: calc(100% - 3px);
	max-width: 1000px;
	display: block;
	clear: left;
}

#container.gridpages {
	display: none;

}

#container.columnpages {
	max-width: 1065px !important;
	display: block;
	clear: both;
}



#imagenav div.hl {
	color: white;
	background-color: black;
	display: inline;
	position: relative;
	padding: 2px;
	text-transform: uppercase;
	font: 16px misoregular;
}

div#imagenav a {
	text-decoration: none;
	color: gray;
	top: 3px;
	padding: 2px;
	text-transform: uppercase;
	font: 16px misoregular;
	line-height: 25px;

}



#imagenav a:hover {
	text-decoration: none;
	background-color: #0091ce;
	color: white;
	top: 3px;
	padding: 2px;
	font-size: 16px;
}

#max {
	font: 35px GaramondPremrPro;
	line-height: 35px;
	text-transform: uppercase;
	letter-spacing:2px;
}

#mainnav div.hl {
	color: white;
	background-color: black;
	display: inline;
	top: 3px;
	padding: 2px;
	font-family: misoregular;
}
#mainnav a {
	top: 3px;
	padding: 2px;
	font-family: misoregular;
	margin-right: 10px;
}

#mainnav .active {
	top: 3px;
	padding: 2px 0;
	font-family: misoregular;
	display: inline;
}

blockquote.left {
	float: left !important;
		margin-left: 0px !important;
		margin-right: 20px !important;
	
}

blockquote p {

	margin-bottom: 0;
}
	


#mainnav div.hl a {
	text-decoration: none;
	top: 3px;
	padding: 2px;
	background-color: white;

}
#mainnav div.hl a:visited {
	text-decoration: none;
	top: 3px;
	padding: 2px;
	background-color: white;
}

#max a {
	margin-right: 5px;
	margin-left: 0px;
	float: left;
}

#max span.divider {
	float: left;
	margin-right: 5px;
	color: black;
}

#mainnav a:hover {
	text-decoration: none;
	background-color: #0091ce;
	color: white;
	top: 3px;
	padding: 2px;
}

#max a:hover {
	text-decoration: none;
	background-color: white;
	color: #0091ce;
	
}

html {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;

}
  
body {
	margin-top: 0;
	margin-left: 30px;
	overflow-x: hidden;
}

p {	margin-right: auto;
	margin-left: auto;
	font: 12px AvenirNext-Regular, Arial, Helvetica, Geneva, sans-serif;
	line-height: 20px;
	font-style: normal;
	margin-top:0px;
	color: black;
	hyphens:auto;
	-webkit-hyphens: auto;
	  -moz-hyphens: auto;
	  -ms-hyphens: auto;
}

div#admin {max-width: 100%;
	padding: 20px 0;
	margin-top: 0;
	margin-bottom: 0;
	float: left;
	display: block;
	clear: left;
}

div#admin {	margin-right: auto;
	margin-left: auto;
	font: 10px AvenirNext-Regular;
}

div#adminhome {width: 100%;
	padding-right: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}
div#adminhome p {	margin-right: auto;
	margin-left: auto;
	font: 10px DINEngschrift;
}

#tablecontact table tbody tr td span.style7 p {
	width: 460px;

}


#imagenav table tbody tr td span.style7 p {
	position: relative;
	padding-bottom: 5px;
}

h1 {
	font-size: 70px;
	letter-spacing: 15px;
	bottom: 5px;
}

#max {
	margin-top: 40px;
	margin-bottom: 0;
	width: 100%;
	white-space: nowrap;
	position: relative;
}

tbody {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	
}


tr {
	margin: 0;
	padding: 0;
}

td {
	margin: 0;
	padding: 0;
	vertical-align: top;
}

img {
	margin: 0;
	padding: 0;
	border:none;
	float: left;
}

a.swipebox:hover {
	background-color: white;
	opacity: 0.51;
}

.red {
color: #0091ce;
}

div.redover {
	position: relative;
	top: 0;
	width: 200px;
	height: 100%;	
		/*background-color: rgba(192, 192, 192, 0.4);*/
	float: left;
}



div.item.main img {
	width: 200px;
	height: auto;
}
.nolink {
	width: 200px;
	float: left;
	height: auto;
	padding-bottom: 10px;
	font: 12px/16px AvenirNext-Regular, Arial, Helvetica, Geneva, sans-serif;
	hyphens:auto;
	-webkit-hyphens: auto;
	  -moz-hyphens: auto;
	  -ms-hyphens: auto;
	  
}

#container div.item.main a:hover {
	background-color: white;
}

.item {
	padding-bottom: 1rem;
	padding-right: 1rem;
}

.item a.swipebox img:hover {
	opacity:.8;
}

div.redover:hover {
	display: block;
	background-color: #0091ce !important;
	z-index: 3;
	color: white !important;
	width: 200px;
	height: 100%;
	text-indent: 0px;
}

div.redover:hover h5, div.redover:hover h6{
color: white;
}

a.switch {
	display: block;
	white-space: nowrap;
	float: left;
	font-size: 12px;
}

div.copyr {
	float: left;
	margin-right: 15px;
	display: block;
	clear: left;
	font-size: 12px;
}

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


ul {
	margin: 0;
	max-width: 96% !important;
	padding: 0;
	padding-top:5px !important;
}

#max {
	margin-left: 8px;
	width: 98% !important;
	
}


div#mainnav {
	width: auto !important;
	padding-right: 0;
	padding-top: 0;
	padding-left: 0;
	font-size: 12px;
	margin-top: 0;
	margin-left: 8px;
	margin-bottom: 30px;
	position: relative;
}

div#admin {	max-width: 100%;
	padding: 20px 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 8px;
	font-size: 10px;
	white-space: normal;
}

div#admin p {
	font-size: 9px;
	white-space: normal;
	float: left;
	display: block;
}


#container {
	display: block;
	clear: both;
	margin-left: 8px;
	width: calc(100% -3px);
}
#container.gridpages {
	display: none;

}

div#filmstrip {
	margin-top: 45px;
	max-width:100% !important;
}
div.main.images {
	padding-left: 8px;
}


}

#maincontent.section-bio,#maincontent.section-exhibits,#maincontent.section-contact, #maincontent.newssection,#maincontent.section-public-collections,#maincontent.section-reviews {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
max-width: calc(800px + 3rem);  /* Column widths + gutter widths */
float: left;
}



div.redover p {
	font: 12px/16px AvenirNext-Regular, Arial, Helvetica, Geneva, sans-serif;
	margin-right: 6px;
	margin-left: 5px;
}

#container div.item h5.first {
	font: 22px AvenirNext-Regular, Arial, Helvetica, Geneva, sans-serif;
	width: 140px;
	height: 140px;
	text-align: center;
	vertical-align: middle !important;
	display: table-cell;
	border: 1px solid silver;
	padding: 5px;
}
h5.first a:hover {
	color: #0091ce;
}


@media screen and (max-width: 400px) {
.red {
	display: block;
	float: left;
}

div.redover {
	position: relative;
	top: 0;
	width: 200px;
	height: 100%;
	font-size: 20px;
	letter-spacing: 1px;
	padding-left: 0;
	padding-top: 0;
}

}

.black {
	color: #0091ce;
	white-space: normal;
}

#maincontent p img {
	width: 200px !important;
	height: auto !important;
	margin-bottom: 2px;
	margin-top: 10px;
}

#maincontent address {
	font-weight: normal;
	font-style: normal;
	font: 10px AvenirNext-Regular, Arial, Helvetica, Geneva, sans-serif;
	display: inline-block;
	margin-bottom: 15px;
	clear: left;
}

address img {
	width: 200px !important;
	height: auto !important;
}


@media screen and (max-width: 885px) {
.sk-cube-grid {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 325px !important;
  top: 50%;
  margin-top:-20px;
}
}

@media screen and (max-width: 885px) {
#container.columnpages {
	max-width: 690px;
	display: block;
	clear: both;
}

#maincontent.section-bio,#maincontent.section-exhibits,#maincontent.section-contact, #maincontent.newssection,#maincontent.section-public-collections,#maincontent.section-reviews {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
max-width: calc(600px + 2rem);  /* Column widths + gutter widths */
float: left;
}

#max {
	width: 638px !important;	
}

}

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

.sk-cube-grid {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50% !important;
  top: 50%;
  margin-top:-20px;
  margin-left: -20px;
}
#container.columnpages {
	max-width: 490px;
	display: block;
	clear: both;
}
#maincontent.section-bio,#maincontent.section-exhibits,#maincontent.section-contact, #maincontent.newssection,#maincontent.section-public-collections,#maincontent.section-reviews {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
max-width: calc(400px + 1rem);  /* Column widths + gutter widths */
float: left;
}



#max a{
	margin-bottom: 5px !important;
}

#max {
	width: 98% !important;	
}

body {
	width: 98%;
	margin-right: auto !important;
	margin-left: auto !important;
	float: none !important;
}

#mainnav {
	display: none;
}
.black,.red {
	clear: left;
	float: left;
}

.black {
	margin-bottom: 20px;
}

.item {
	width: 47% !important;
}

.item img,address img,address {
	width: 100% !important;
}

div.redover {
	position: relative;
	top: 0;
	width: 100% !important;
	height: 100%;		
		/*background-color: rgba(192, 192, 192, 0.4);*/
	float: left;
}
}

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



#mainnav {
	display: none;
}


.black,.red,#max a {
	margin-bottom: 20px;
	float: left !important;
}

#max span.red span.divider {
float: left !important;
	
}

#container {
	margin-top: 20px;
}

#max {
	width: 853px;	
}

}


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



#container.columnpages {
	max-width: 100% !important;
	display: block;
	clear: both;
}
#maincontent.section-bio,#maincontent.section-exhibits,#maincontent.section-contact, #maincontent.newssection,#maincontent.section-public-collections,#maincontent.section-reviews {
-moz-column-count: 0;
-webkit-column-count: 1;
column-count: 1;
-webkit-column-width: 100%;
-moz-column-width: 100%;
column-width: 100% !important;
max-width: calc(100% - 8px);  /* Column widths + gutter widths */
float: left;
}

#maincontent p img {
	width: 100% !important;
	height: auto !important;
}

.item {
	width: 96% !important;
	padding-right: 0 !important;
}

.item img {
	width: 100%;
}

.redover {
	width: 100% !important;
}

div.item.main img {
	width: 100%;
	height: auto;
}

div.redover:hover {
	display: block;
	background-color: #0091ce !important;
	z-index: 3;
	color: white !important;
	width: 100%;
	height: 100%;
	text-indent: 0px;
}

#hamburger {
	position: absolute;
	right: 8px;
	top: 35px;
}


}

h5 {
	margin-bottom: 0;
	margin-left: 5px;
	font-weight: normal;
	font-style: normal;
	padding-top: 5px;
	margin-top: 0;
	font: 16px/20px AvenirNext-Medium;
	padding-bottom: 2px;
	
}

h6 {
	margin-top: 0;
	margin-bottom: 0;
	font: italic 11px/20px AvenirNext-Regular, Arial, Helvetica, Geneva, sans-serif;
	margin-left: 5px;
	color: #0091ce;
}

/* RESPONSIVE MENU */
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: -60px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
	font: 30px allerregular;
	color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 60px;
    padding: 5px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 32px;
    top: 15px;
    right: 35px;
  }
}

#hamburger {
display: block !important;
margin-top: 0px;
z-index: 1000;
font-size: 35px !important;
color: gray;
	float: right;
	display: none;
	position: absolute;
	right: 0px;
	top: -0px;
}
#hamburger:hover {
	color: #0091ce;
}

.page-images #hamburger {
	right: 0px;
	top: -2px;
}

/* LOADING ANIM */
.skcol {
display: none;
}

.sk-cube-grid {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 435px;
  top: 50%;
  margin-top:-20px;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: gray;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  } 
}