html { 
  background: url("images/home_page1.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {background-color: transparent; font-size: 16px;font-family: 'El Messiri', sans-serif; letter-spacing: .02em;color:#444;}

a {color:#444;}
a:hover {color:#444; text-decoration: underline; transition: ease .3s;}
a:visited {color:light-blue;}
.current-page {color: #74b73d !important;}


.koak-banner {color: #444; font-size:1em; font-family: 'El Messiri', sans-serif;position: fixed;left: 0;right: 0;bottom: 0;height:60px; width: 100%;line-height:4em; padding-left:1%;background-color: transparent; background-image: linear-gradient(to top, rgba(255,255,255,1) 40%, rgba(255,0,0,0) 100%); /* Standard syntax (must be last) */}
.email-btn {border-bottom: 1px dashed #74b73d; padding-left:7px; padding-right:7px;}
.email-btn a:hover {text-decoration: none; color:#7fb7e9;}
.koak-index-btn {font-weight: 700}
.koak-index-btn a:hover {text-decoration: none; color:#7fb7e9;}
.last-updated {font-size:.88em; border-bottom: 1px dashed #74b73d;padding-left:7px; padding-right:7px;color:#9a9a9a; font-style: italic;}
.galleries {line-height: 1.3em;}
/*.gallery-title {font-weight: bold;}

.gallery-text {padding-top:.350em; color:#545454; font-weight: 100;}
.gallery-text a {color:#545454;font-weight: 100;}
*/
.gallery-title {font-weight: bold;}
.gallery-text {padding-top:.350em; color:#545454; font-weight: 100;background: linear-gradient(to right, #444 1%, #b00404 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.gallery-text a {color:#545454;font-weight: 100;background: linear-gradient(to right, #444 1%, #b00404 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
 
.caption-container { background: linear-gradient(to right, #444 50%, #ef9cff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding-bottom:2.75em;}
.captions-title {font-size: 12px;color:#7e7b7b;padding-top:.400em; text-align: right; font-weight: 400}
.captions {font-size: 12px;color:#999292; font-style: italic; text-align: right; font-weight: 400}

.exhibition-links {padding-top: 3em; font-size: 15px; padding-left: 1%;}
.exhibition-links a:hover {text-decoration: underline;}
.exhibition-links-current {text-decoration: line-through solid #b287a6;}
.exhibition-text-block {padding-top: 2em; padding-left: 5em; padding-right: 10em; text-align: left; font-size: .95em; color:#999292;}
.exhibition-date {padding-top: 2em; font-size: .7em; color:#c2c2c2;text-align: right; padding-right: 4em;}
.exhibition-title-return { background: linear-gradient(to right, #444 1%, #d5aedd 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.exhibition-title-holding { background: linear-gradient(to right, #444 1%, #aac6dc 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.exhibition-title-breaking { background: linear-gradient(to right, #444 1%, #efedb0 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.exhibition-title-seed { background: linear-gradient(to right, #444 1%, #b0dec1 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.exhibition-title-bathers { background: linear-gradient(to right, #444 1%, #e6c2c4 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.exhibition-title-bad { background: linear-gradient(to right, #444 1%, #f0deb1 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.exhibition-title-driver { background: linear-gradient(to right, #444 1%, #FF9A00 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.exhibition-title-letter { background: linear-gradient(to right, #444 1%, #FF9A00 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}


.image-grid {padding-top:4em;}
.width100 {width:100%; height:500px; padding:0px; padding-bottom:1.5em;}
.width200 {width:100%; height:250px; padding:0px;   vertical-align: middle;line-height: 250px;}
.width200 img {vertical-align: middle;}


.red {background-color: red;}
.yellow{background-color: yellow;}
.pink{background-color: pink;}
.blue{background-color: blue;}
.green{background-color: green;}
.centered {position: fixed;top: 50%;left: 50%;/* bring your own prefixes */transform: translate(-50%, -50%);}
.max-col-width {width:100%;}
.remove-padding {padding-left:2%;} /* important for image grids */

.footer {background-color:transparent;}
.right {text-align:right;right: 1%;}
.border-top {border-top: 1px dashed pink;}




ul {list-style-type: none;background-color:transparent !important; padding-left: 0; font-size:15px; margin: 0;}
li a:hover {transition: ease .3s;}
.nav-a {line-height: 1.2em; letter-spacing: .05em; /* border-left: 1px dashed #95e255; */ margin-top: 2%;margin-left:0;}


/* Navbar bootstrap class overrides */
.bg-light {background-color: #fff !important;}
.navbar {padding-left: 1% !important; font-color:#444;}
.navbar a {padding-left: 0em !important; padding-right: 1em !important;font-color:#444;}
.navbar a:hover { font-color:#444; text-decoration: underline;}
.nav-item {font-color:#444 !important;}
.dropdown-item {padding-left:1em;}
.dropdown-menu {border:0 !important; background-color:white;}



/* For exhibiton scrolling divs */
#top-nav {position: fixed;left: 0;right: 0;top: 0;height: 50px;width: 100%;background-color: #fff;}
#side-nav {position: fixed; width: 50%; height:100vh; left: 0; right: 0; overflow-y: scroll; background-color: #fff; top: 60px;}

#content-wrapper {
  margin: 0px 0 0 50%;
  padding: 0 30px;
  overflow-y: scroll;
  position: fixed;
  left: 0;
  top: 0;
  height:100vh;
  background-color: #fff;
}





@media only screen and (max-width: 667px) {
  .caption-container {line-height:.8em;padding-top:.5em;}
  .footer {background-color:transparent !important;}
  .last-updated {display: none;;}

}