/* Gallery Page Heading Changes */
header.bg-primary.py-5.mb-5.gallery-header {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    margin-bottom: 0px !important;
}

/* Gallery Page Heading Changes */
header.bg-primary.py-5.mb-5.gallery-sub-header {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    background: #6f6f6f !important;
}

p.lead.mb-4.subheader-text {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  font-weight: 500;
  color: #ffffff;
}

* {
  font-family: 'Raleway', sans-serif;
}

/* Card */
.card-title {
    text-align: center;
}

h4.card-title.description {
    overflow: hidden;
}

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: height 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  padding-top: 25px;
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 50%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
}


/* Position the close button (top right corner) */
.overlay .closebtn {
  top: 0px !important;
  right: 45px;
  font-size: 60px;
}

a.closebtn {
    line-height: 0px;
}

a.closebtn:hover {
    text-decoration: none !important;
}



/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.col-md-lg.mb-1 {
    background: white;
    padding: 25px;
}

.card.h-100 {
    cursor: pointer;
}

.yt {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.yt iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.close-button {
  right: 0px;
}

.nav-table {
  width: 100%;
}


td.close-button {
    text-align: right;
}

/* Next Button */
.overlay .nextbtn {
  top: 0px !important;
  right: 45px;
  font-size: 60px;
}

td.next-button {
    text-align: right;
}

a.nextbtn:hover {
    text-decoration: none !important;
}

/* Previous Button */
td.prev-button {
    text-align: right;
    transform: rotate(-180deg);
}

.overlay .prevbtn {
  top: 0px !important;
  right: 45px;
  font-size: 60px;
}

a.prevbtn:hover {
    text-decoration: none !important;
}

.card.h-100:hover {
    background: #67676729;
    transition: 0.3s;
}


/* Styling */
body {
    background-color: #eeece5;
}

footer.py-5.bg-dark {
    background: #583417 !important;
    color: #cbc7c3 !important;
}

footer.py-5.bg-light {
    background: #343a40 !important;
    color: #cbc7c3 !important;
}


.bg-primary {
    background-color: #a95600!important;
}

.col-md-lg.mb-1 {
  background-color: #eeece5;
}

.logo {
  padding-top: 25px;
}

.mt-5, .my-5 {
  margin-top: 0px !important;
}

.mb-5, .my-5 {
    margin-bottom: 1rem!important;
}

.breadcrumbs a {
    color: #337ab7 !important;
}

.nav {
      line-height: 1 !important;
}

.nav {
      line-height: 1 !important;
}

.nav a {
  color: #337ab7 !important;
}

h1.art-name {
    padding-top: 15px;
}

.card.h-100 a {
    color: black;
}

.card.h-100 a:hover {
    text-decoration: none !important;
}

a.btn.btn-primary {
    color: white;
}

.card-body {
    min-height: 200px;
}

a {
    color: #337ab7;
}

h2.art-artist {
  color: #337ab7;
}

.h3, h3 {
    font-size: 1.25rem;
    padding-top: 10px;
}

.quote {
    text-align: center;
    padding-bottom: 30px;
}

h2.art-medium {
    font-size: 1.5rem;
    font-style: italic;
}

/* HERO IMAGES FOR GALLERIES */
header#communityhero {
  background:
    linear-gradient(
      rgba(169, 86, 0, 1),
      rgba(169, 86, 0, 0.25)
    ),
    url(../media/site/community.png);
  background-size: cover;
}
header#equalityhero {
  background:
    linear-gradient(
      rgba(169, 86, 0, 1),
      rgba(169, 86, 0, 0.25)
    ),
    url(../media/site/equality.png);
  background-size: cover;
}
header#lifeathomehero {
  background:
    linear-gradient(
      rgba(169, 86, 0, 1),
      rgba(169, 86, 0, 0.25)
    ),
    url(../media/site/lifeathome.png);
  background-size: cover;
}
header#silverliningshero {
  background:
    linear-gradient(
      rgba(169, 86, 0, 1),
      rgba(169, 86, 0, 0.25)
    ),
    url(../media/site/silverlinings.png);
  background-size: cover;
}
header#worldviewhero {
  background:
    linear-gradient(
      rgba(169, 86, 0, 1),
      rgba(169, 86, 0, 0.25)
    ),
    url(../media/site/wordlview.png);
  background-size: cover;
}
header#homehero {
  background:
    linear-gradient(
      rgba(169, 86, 0, 1),
      rgba(169, 86, 0, 0.25)
    ),
    url(../media/site/AHArtShowHomePageBG.jpeg);
  background-size: cover;
  background-position: bottom;
}

header#temphero {
  background:
    linear-gradient(
      rgb(102 83 62),
      rgba(169, 86, 0, 0.25)
    ),
    url(../media/site/painting.jpg);
  background-size: cover;
  background-position: bottom;
}

h4.display-16.text-grey.mt-1.mb-4 {
    font-size: 1.0rem;
    color: white;
}

.btn-primary {
    color: #fff;
    background-color: #6f6f6f;
    border-color: #6f6f6f;
}

.btn-primary:hover {
    color: #fff;
    background-color: #858484;
    border-color: #858484;
}

img.logoasset {
    padding-right: 10px;
}