body {
	background: #fff6dc; 
	background: #F5F4F1;
	background: #FFF;
	font-family: 'Lato', 'Source Sans Pro', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 
	}
	
li.release-list-item { border-bottom: 1px solid #CCC; margin-bottom: 1em; padding: 1em 0; padding-right: 1em;}
ul.release-list {line-height: auto; margin: 0 0 0 0; }
.releaseRight .relatedEvent {border-bottom: 1px solid #CCC; padding-bottom: 1em; }
.releaseRight .relatedEvent:last-of-type {border-bottom: 0px solid #CCC;}

.instName, .eventlisting a.blue {text-transform: uppercase; color: #222; font-size: 80%; margin: 0 0 0 0; font-weight: normal;}
h1, h3, h2, .eventlisting strong.event_title  {font-family: 'Oswald', sans-serif; font-weight: normal;}
h2,  .eventlisting strong.event_title {line-height: 130%; color: #9E3106;}
h1 {text-transform: none; font-size: 175%; margin-top: 1.5rem;}

h2, .eventlisting strong.event_title  {font-size: 145%; }

div.eventlisting, p.eventlisting {padding-left: 0px;}
#content-main .release-list a {}
#content-main a.red {color: #9E3106;}
#main-nav {background: transparent; text-align: right;}
#main-nav a {color: #FFF; font-size: 80%; text-transform: uppercase; text-decoration: none; margin-right: 2em;}

.black {color: #000;}
.releaseThumb {margin-top: .01em; text-align: right;}

.one-third img{max-width: 100%;}

.limit-form {margin-top: 2rem; text-align: right; font-size: 90%;}

.one-half.column:nth-child (odd){margin-left: 0;}

.home-releases p {margin-top: 0;}

.banner img {max-width: 100%;}
.about p:first-of-type {font-size: 150%; padding: 2em 4em; text-align: center; color: #999; border-top: 1px solid #999; border-bottom: 1px solid #999;}
#title {height: auto;background-image: none; text-align: left; padding-bottom: 1em;}
#title img {max-height: 78px;}
#content-main { padding-top: 1em;}
#content-bottom {display: none;}
#content-main {background: transparent;}

#container {background-open: transparent url(/graphics/mc_background.png) repeat-x;}

#content-top, #content {padding-bottom: 0px; background: transparent;}
#content-top {padding: 0px 1em;}
#content-top  a{ font-family: Lato, sans-serif; color: #FFF; 
	font-size: 100%;
	text-transform: uppercase; 
	text-decoration: none; 
	padding: .5em 1em .5em 1em;
	display: table-cell;
	color: #333;
	}
#content-top a:hover {background-color: #999; color: #FFF;}
#content-main .release-list a {color: #9E3106;}

.content-double {margin-left: 200px; border-left: 0px solid transparent;}
.content-double {padding-top: 40px;}

.content-right-small {width: 200px; float:right;}
.content-right-small ul {padding-right: 15px; float:right; width: 10em;}

.content-right-small li {text-align: left; border-bottom: 1px solid #666; margin: 0 0 0 0; width:110%;}
#content-main .content-right-small li a {display: block; padding: .8em; letter-spacing: 2px; text-transform: uppercase; font-size: 80%; text-align: right; }
#content-main .content-right-small li a:hover {background: #3D9EB6; color: #FFF; text-decoration: none;}
.content-right-small table {width: 90%; margin-top: 0;}

.container .container {width: 100%;}

.eventtable tr {border-top: 1px solid #ccc;}
.eventtable tr:first-of-type {border-top: 0px solid transparent;}
.eventtable tr > td {
  padding-top: 1em;
}

.header { margin-left: 10px;}

.redbg {background: #3D9EB6;}
.three h1 {font-family: 'Lato', sans-serif; font-size: 135%; line-height: 130%;}
.bluebg {background: #F9F9FC; border-bottom: 1px solid #CCC; margin-bottom: .7em;}
.fixed {position: fixed; width: 100%; top: 0px; z-index: 9999;}

.cycle-slideshow a.more, .upcoming a.more {color: #F8C11E; font-size: 70%; text-transform: uppercase; text-decoration: none; display: inline-block; margin-top: .8em; padding: .2em .8em; border: 1px solid #F8C11E;}
.cycle-slideshow a.more:hover, .upcoming a.more:hover {background: #1EAEDB; color: #FFF; border-color: #FFF;}

#content-main .button a.blue:hover {background: #3f6b9e; color: #FFF; text-decoration: none;}

.upcoming p {font-size: 80%; margin-top: 0px;}
.upcoming a.more {color: #666; border-color: #999;}
.upcoming h3 {margin-bottom: 0; color: #9E3106;}
.upcoming div {background: #EEECE8;}
.upcoming div.four {border: 1px solid #CCC; border-radius: 0px 0px 5px 5px;;}

h1, h2 {color: #2E6C92; color: #000;}

.column {
/*    width = %33;*/
}


.set div ul li {border-bottom: 1px solid #888; padding: 0 0 8px 0; margin-top:0;}
.set div ul {margin: 0;}

/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/


/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.cycle-slideshow { 
	padding: 0; position: relative;
max-height: 600px !important;
overflow: hidden; 
}

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

/* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; position: absolute; top: 10px; overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}


/* caption */
.cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }


/* overlay */
.cycle-overlay { 
    position: absolute; bottom: 10%; width: 50%; z-index: 600;
    background: rgba(0,0,0,.5); color: white; padding: 15px;
	border-top: 5px solid #F8C11E;
}
.cycle-overlay h2 {color: #FFF; margin-bottom: 0px;}
.cycle-overlay p {margin-top: 0px;}


/* prev / next links */
.cycle-prev, .cycle-next { position: absolute; top: 0; width: 30%; opacity: 0; filter: alpha(opacity=0); z-index: 800; height: 100%; cursor: pointer; }
.cycle-prev { left: 0;  background: url(http://malsup.github.com/images/left.png) 50% 50% no-repeat;}
.cycle-next { right: 0; background: url(http://malsup.github.com/images/right.png) 50% 50% no-repeat;}
.cycle-prev:hover, .cycle-next:hover { opacity: .7; filter: alpha(opacity=70) }

.disabled { opacity: .5; filter:alpha(opacity=50); }


/* display paused text on top of paused slideshow */
.cycle-paused:after {
    content: 'Paused'; color: white; background: black; padding: 10px;
    z-index: 500; position: absolute; top: 10px; right: 10px;
    border-radius: 10px;
    opacity: .5; filter: alpha(opacity=50);
}

/* Matthew A. Gallegos custom CSS. April 2017 */

.tagcontainer {border: 1px solid #999; background: #F5F6F7; margin-bottom: 1em; padding: 1em; border-radius: 5px;}
.tagtitle {font-weight: bold;}
.tag a {font-weight: bold; font-size: 80%; text-transform: uppercase; display: inline-block; margin: 1em 0 1em .5em; background: #CFCFCF; border-radius: 15px; padding: 5px 10px; }
/*#content-main .tag a:hover{color: #DDD;}*/

#content-main .tag a:hover {background: #888; color: #DDD;}
#content-main .tag a.active {background: #f0a419; }
#content-main .tag a.active:hover {background: #f0a419; color: #222; text-decoration: none;}
#content-main .tag i {margin-right:3px;color:#9E3106;}
#content-main .tag a:hover > i{color:#f0a419;}
.img_four_col { margin: 5px 0; height: 11em; }
.img_caption { 
    line-height: normal;
    font-size: 1em;
    height: 5.5em; 
    margin:.5em; 
    text-align:center; 
    line-height: normal;
}
.float_left { float: left; }
.float_right img, .float_right h2 { float:right; }

.graybox {
    background: #F9F9FC; 
    border: 1px solid #CCC; 
    border-radius: 5px; 
    margin-bottom: 2em; 
    overflow: hidden;
	position: relative;
}
#content-main a.downloadLink {font-size: 140%; margin: 2px; position: absolute; bottom: 0px; left: 85%; color: #CCC; padding: 2px; border-radius: 3px; }

.offset { border-radius: 5px;}

.hamburger, .cross { margin: .5em;}

.hamburger, .cross, .mobile-menu { display: none; }

.border-bottom { border-bottom: 1px solid #ccc; }
.hide-dropdown .small-menu{ display: none;}

h2.border-bottom { padding-bottom: .5em; }

p.border-bottom { padding-bottom: 1em; }

.button a.blue {
    border: 1px solid #3f6b9e; 
    padding: .5em; 
    font-size: 70%;
}
.detail-photo {width: 100%;}
.brief_description p{ text-align:justify;}

p.no-top-margin { margin-top: 0; }
p.no-bottom-margin, h2.no-bottom-margin { margin-bottom: 0; }
p.margin-bottom-inherit { margin-bottom: inherit;}

.contact { margin-bottom:20px; }
.contact h2, .contact p { margin:0 0 .4em 0 }

/** Bread Crumbs **/
ul.breadcrumb {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: .7em;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
    padding: 0 .2em;
    color: #f0a419 !important;
    content: "/\00a0";
}
ul.breadcrumb li a {
    color: #f0a419 !important;
    text-decoration: none;
}
.crumbs {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/*
ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}

*/

#mask {
    -moz-clip-path: inset( 0 .3em);
    -webkit-clip-path: inset( 0 .3em);
    clip-path: inset( 0 .3em);
}

.mask-all-inst{ max-height: 200px}

body.events #content-main > .row > .nine  {margin-left: 0px;}
body.exhibitions #content-main > .row > .nine  {margin-left: 0px;}


.exhibit-inst-icon, .exhibit-thumb, .event-inst-icon, .event-thumb  {max-width: 100%;}

.all-inst-name {
    font-size: 120%;
    padding: 0.5em 0;
}

.graybox-all-inst {
    padding: 0.5em 0.5em 0 0.5em;
    max-height: 208px;
    min-height: 208px;
}

/* END Matthew A. Gallegos custom CSS. April 2017 */



#content-main a.ticket_link {display: block; width: 90%; max-width: 270px; text-align: center; text-decoration: none; font-weight: bold; margin: auto; padding: .7em 1.5em; background: #3d9eb6; color: #FFF; border-radius: 5px;}
#content-main a.ticket_link:v {color: #FFF;'}


/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/

@media only screen and (max-width: 1100px) {
    body { font-size: 1.4em; }
    #container, .container {max-width: 1000px;}
    .img_four_col { height: 7em;}
    .img_caption {font-size: .8em;}
    .content-right-small ul { width: 8em; }
}

@media only screen and (max-width: 725px), only screen and (max-device-width: 725px) {
    .img_four_col { height: 5em;}
    .graybox { margin-bottom: 1em;}
    .breadcrumb { display: none;}
    .img_caption { 
        height: 3.8em; 
        font-size: .6em; 
        text-align: left;
    }
    .content-right-small ul { width: 7em; }
    .about p { padding: 1em 2em; }
} 

@media only screen and (max-width: 549px), only screen and (max-device-width: 549px) {
	#content-main.list-container {background: #F9F9FC;}
    
    .img_four_col { height: 15em;}
    .img_caption { height: 100%; font-size: 1em; text-align: center; }
    .hide-dropdown { display: none;}
    .small-menu li{ margin:5px;}
    .small-menu { font-size: .7em; margin: 0 10px;}
    .spacer img { height:15px;}
    .hamburger{display: inline;}
    .search input[type=text]{ margin: 0 5px 10px 25px;}
	.list-container > .li, .list-container .nine > .row  {margin-bottom: 1em; border-radius: 5px; padding: 1em; background: #FFF; border: 1px solid #CFCFCF;}
	p.border-bottom {border-bottom: 0px solid transparent;}
    .brief_description p { text-align:left;}
    .detail-photo {display: none;}
	.exhibit-inst-icon, .exhibit-thumb, .event-inst-icon, .event-thumb  {width: 100%;}
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    #content-main a { text-decoration: underline;}
    .cycle-overlay { 
        padding: 8px; 
        padding-bottom: 8px; 
        position: relative; 
        width: 100%; 
        background: #000;
    }
    .cycle-caption { bottom: 4px; right: 4px;}
    .img_four_col { height:15em;}
    .brief-description { text-align:left;}
    .img_caption {font-size: 1em;}
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    #content-top a {display: block; }
	#content-top {padding: 0px 0px;}
}