/* Action Buttons */
a .action-button {
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 900;
  color: #18252a;
  padding: 10px;
  border: 1px solid #18252a;
  line-height: 1em;
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
a.warning .action-button {
  color: #000;
  background-color: #feb70d;
  border: 1px solid #feb70d;
}
a.danger .action-button {
  color: #000;
  background-color: #cb4d4f;
  border: 1px solid #cb4d4f;
}
#views-bootstrap-action-button-content-block-2 {
  margin-top: 50px;
}
a.action-btn-wrapper.image-mode{
  padding-top: 0;
}
a.action-btn-wrapper.image-mode .action-button{
  position: relative;
  border: none;
}
a.action-btn-wrapper.image-mode .field--name-field-icon-class{
  display: none;
}
a.action-btn-wrapper.image-mode img {
  margin-bottom: .25em;
}
a.action-btn-wrapper {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 100%;
  margin: 15px 0;
}
a.action-btn-wrapper, a.action-btn-wrapper:hover {
  text-decoration: none;
  border: none;
}
a:hover.warning .action-button {
  background-color: #ffd982;
  color: #000;
}
a:hover.danger .action-button {
  background-color: #c77172;
  color: #000;
}
a:hover .action-button {
  text-decoration: none;
  background-color: #9fd5b3;
  color: #004445;
  padding: 10px;
}
a .action-button p {
  text-transform: none;
  font-size: 14px;
  font-weight: 300;
  padding-top: 10px
}
a .action-button i,
a .action-button span {
  font-size: 60px;
  padding: 30px;
}
a .action-button.councilmember-email-list {
  font-size: 18px;
  color: #18252a;
  padding: 10px;
  border: 5px solid #18252a;
  line-height: 1em;
  position:  inherit;
}
a .action-button.councilmember-email-list br,
a .action-button.councilmember-email-list p,
.field--name-field-city-council-pro-tem,
.field--name-field-city-council-president {
  display: none;
}
.main-container .views-element-container {
  clear: both;
}
.term-id-1346 a.action-btn-wrapper {
  margin: 0;
  padding-top: 0;
}
a.action-btn-wrapper .councilmember-email-list.action-button span {
  font-size: 18px;
  padding: 0;
}
.hp-actions-1 {
  margin-top:  1em;
}
.hp-actions-1 a.action-btn-wrapper {
  margin:  1em 0;
}

.opportunity-pg-buttons a .action-button {
  border: 1px solid #9fd5b3;
  background: #9fd5b3;
}
.opportunity-pg-buttons a:hover .action-button {
  background: #004445;
  color: #fff;
}
.opportunity-pg-buttons a.action-btn-wrapper {
  margin: 1em 0;
}
.opportunity-pg-buttons #views-bootstrap-action-button-content-block-2 {
  margin-top: 0;
}

/* .path-frontpage #block-views-block-home-action-buttons-block-2 .more-link a */
.path-frontpage #block-views-block-home-action-buttons-block-2 .more-link a {
  margin-bottom: 90px;
  display: inline-block;
}

/* .opps-tier-2-blk a .action-button */
.opps-tier-2-blk a .action-button {
  position: initial; 
  text-align: left; 
  border: none; 
  border-bottom: 1px solid #ccc; 
  text-transform: initial; 
  padding-bottom: 1.5em;
  font-weight: 900;
}
.opps-tier-2-blk .form-group {
  margin-top: 50px;
}
.opps-tier-2-blk a.action-btn-wrapper {
  padding-top: 0; 
  margin: 0;
}

/* Department "Refresh" */
.text-ABs {
  margin-top: 2em;
}
.text-ABs .col-sm-6.bs-region.bs-region--left {
  font-size: 1.3em;
  line-height: 1.5em;
}
.text-ABs .field--name-node-title h3 {
  border-bottom: 4px solid #feb70d;
  margin: 20px 0 1em 0;
}
.text-ABs h1,
.text-ABs h2,
.text-ABs h3,
.text-ABs h4,
.text-ABs h5,
.text-ABs h6,
.embedded-entity .node--type-text-and-action-buttons h1,
.embedded-entity .node--type-text-and-action-buttons h2,
.embedded-entity .node--type-text-and-action-buttons h3,
.embedded-entity .node--type-text-and-action-buttons h4,
.embedded-entity .node--type-text-and-action-buttons h5,
.embedded-entity .node--type-text-and-action-buttons h6 {
  margin: 0 0 1em 0;
  border-bottom: 5px solid #feb70d;
  display: inline-block;
}
.text-ABs .col, 
.text-ABs .col-1 {
  padding-left: 0;
  padding-right: 0;
}
.col-lg-12.node.node--type-text-and-action-buttons.node--view-mode-large-button-text {
  padding-left: 0;
  padding-right: 0;
}
#views-bootstrap-action-button-content-block-1 {
  margin-top: 45px;
}


/* Buttons only */
.node--view-mode-large-button-texta .action-btn-wrapper {margin: 0;}
.text-ABs.view-display-id-block_4 .col-sm-12.bs-region.bs-region--main{
  padding: 0;
 }
 .btns-only .views-col.col-1{
  width: 100% !important;
 }
.buttons-only-display {
    margin-top: 50px;
    clear: both;
  }
/* Large Button + Text */
.actbtn-txt {
  position: absolute;
  width: 100%;
  text-align: right;
  color: #fff;
  bottom: 0px;
  z-index: 1;
  background: rgb(24, 37, 42);
  padding: 1.3em 5em 1.3em 1em;
}
a.action-btn-wrapper.image-mode .action-button {
    position: relative;
    border: none;
    padding: 0px;
}
.action-btn-wrapper.image-mode i {
  position: absolute;
  bottom: 0.4em;
  right: 0.2em;
  color: #fff;
  z-index: 1;
}
a.action-btn-wrapper.image-mode:hover .actbtn-txt {
  background: #9fd5b3;
  color: #004445;
}
a.action-btn-wrapper.image-mode:hover i {
  color: #004445;
  border-color: #004445;
}
.field--name-field-pg-banner {
  margin-bottom: 2em;
}
.large-button-text-display .media img {
  width: 100%;
}


/* Homepage Photo Action Buttons */

.hp-photo-boxes {
  margin-top: 10px;
}
.hp-photo-boxes img {
  height: auto;
  width: 100%;
}
.hp-photo-boxes a {
  border: none;
  color: #fff;
  background: #9fd5b3;
}
.hp-photo-boxes a:hover {
  border: none;
}
.hp-photo-box-1,
.hp-photo-box-2,
.hp-photo-box-3,
.hp-photo-box-4,
.hp-photo-box-5,
.hp-photo-box-6 {
  position: relative;
  display: block;
}
.spacer-20 {
  height: 20px;
}
.photo-box-text {
  background: #004445;
  color: #fff;
  padding: 1.3em 5em 1.3em 1em;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: right;
}
.hp-photo-title, .actbtn-title {
  font-weight: 900;
}
.hp-photo-boxes i, .action-btn-wrapper.image-mode i {
  font-size: 25px;
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 7px 12px;
  margin: 3px 10px;
}
.hp-photo-box-1 i,
.hp-photo-box-2 i,
.hp-photo-box-3 i,
.hp-photo-box-6 i {
  position: absolute;
  bottom: .2em;
  right: .2em
}
/*
.hp-photo-box-6 i {
  bottom: inherit;
} */

.tile-style-3 {
  padding: 40px 20px;
}
.tile-style-3 .photo-box-text {
  position: inherit;
  bottom: inherit;
  background: transparent;
  text-align: inherit;
}
.tile-style-3 i,
.tile-style-4 i {
  position: absolute;
  bottom: 45px;
  right: 7px;
}
.tile-style-4 .photo-box-text {
  position: absolute;
  top: 0;
  right: 0;
  text-align: inherit;
  width: 40%;
  padding: 40px;
}
.tile-color-1 h3 {
  color: #9fd5b3;
}
.tile-color-1 .photo-box-text {
  background: #004445;
}
.tile-color-2 .photo-box-text {
  background: #18252a;
}
.tile-color-3 .photo-box-text {
  color: #004445;
}
.tile-color-3 i {
  color: #004445;
  border: 2px solid #004445;
}
.tile-color-4 .photo-box-text {
  background: #004445;
}
.tile-color-5 .photo-box-text {
  background: #18252a;
}
.tile-color-1:hover .photo-box-text {
  background: #18252a;
}
.tile-color-2:hover .photo-box-text,
.tile-color-5:hover .photo-box-text {
  background: #004445;
}
.tile-color-3:hover .photo-box-text {
  color: #fff;
}
.tile-style-3:hover i {
  color: #fff;
  border: 2px solid #fff;
}
.tile-color-4:hover .photo-box-text {
  background: #9fd5b3;
  color: #004445;
}
.tile-style-4:hover i {
  color: #004445;
  border: 2px solid #004445;
}

/* Homepage action button global */
.hp-photo-boxes .action-btn-wrapper,
.hp-photo-boxes a.action-btn-wrapper,
.container .hp-photo-boxes a.action-btn-wrapper:hover {margin: 0 !important; padding-top: 0; border: none;}
.hp-photo-boxes a .action-button p {text-transform: none; font-size: 16px; line-height: 1.3em; font-weight: 300; padding-top: 0px;}
.hp-photo-boxes a .action-button {position: initial; padding: 0; border: 0;}
.hp-photo-boxes a:hover .action-button {padding: 0; border: 0;}
.hp-photo-boxes a .action-button i {font-size: 25px; border: 2px solid #fff; border-radius: 50%; padding: 7px 12px; margin: 3px; color: #fff;}
.hp-photo-boxes .action-btn-wrapper {padding-top: 0;}
.hp-photo-boxes a .actbtn-desc {position: absolute; bottom: 0; background: #004445; color: #fff; text-align: right; padding: 10px 70px 10px 10px; width: 100%; min-height: 57px;}
.hp-photo-boxes a:hover .actbtn-desc {background: #9fd5b3; color: #004445;}
.hp-photo-boxes a:hover .actbtn-desc i {color: #004445; border-color: #004445;}


/* Action button no link .action-button.no-link {} */
.hp-photo-box-4 .actbtn-desc a {color: #004445; background: transparent;}
.hp-photo-box-4 .actbtn-desc a:hover {background-color: #004445; color: #fff;}
.hp-photo-box-4 .actbtn-title {padding: 0 10px;}
.hp-photo-box-4 .actbtn-desc {padding: 10px;}

/* Action button square image text bottom */
.hp-photo-row1 .hp-photo-box-1 a .actbtn-desc {background: #18252a; color: #fff;}
.hp-photo-row1 .hp-photo-box-1 a:hover .actbtn-desc {background: #9fd5b3; color: #004445;}

/* Action button rectangular image text right */
.rec-img-txt-right {margin: 0;}


/* Mediaqueries */
@media (max-width: 992px) {
.hp-photo-boxes a .actbtn-desc {position: initial; margin-bottom: 10px; padding: 10px; display: flex; justify-content: flex-end; align-items: center;}
.hp-photo-boxes .hp-photo-box-5 a .actbtn-desc {display: block;}
.hp-photo-boxes a .action-button i {position: initial; top: initial; left: initial;}
.hp-photo-boxes a .action-button p {padding-right: 10px;}
}

@media (min-width: 992px) {
.hp-photo-boxes .hp-photo-box-5 img {width: 66%;}
.hp-photo-box-5 .action-button {text-align: left;}
.hp-photo-boxes .hp-photo-box-5 .actbtn-desc {top: 0; right: 0; width: 40%; padding: 40px;}
.hp-photo-box-6 img { margin-bottom: -61px;}
.hp-photo-box-6 a .actbtn-desc {bottom: initial;}
.hp-photo-box-1 .actbtn-desc,
.hp-photo-box-2 .actbtn-desc,
.hp-photo-box-3 .actbtn-desc,
.hp-photo-box-4 .actbtn-desc,
.hp-photo-box-6 .actbtn-desc {display: flex; align-items: center; justify-content: flex-end;}
}

/* Action Buttons 2 */
@media (max-width: 992px) {

  #views-bootstrap-action-button-content-block-2 a {
    padding-top: 250px;
   }
  a.action-btn-wrapper {
    padding-top: inherit;
    margin: 20px 0;
  }
  a .action-button, a.warning .action-button, a.danger .action-button {
    text-align: inherit;
    position: inherit;
    padding: 10px 10px 30px 120px;
  }
  a:hover .action-button, a.warning:hover .action-button, a.danger:hover .action-button {
    padding: 10px 10px 30px 120px;
  }
  .opportunity-pg-buttons a .action-button,
  .opportunity-pg-buttons a:hover .action-button,
  #block-views-block-action-button-content-block-3 a .action-button,
  #block-views-block-action-button-content-block-3 a:hover .action-button {
    padding: 0 10px 10px 10px;
  }
  .opportunity-pg-buttons a.action-btn-wrapper {
    margin: .5em 0;
  }
  a .action-button span, a.warning .action-button span, a.danger .action-button span,
  a .action-button i, a.warning .action-button i, a.danger .action-button i {
    position: absolute;
    left: 0;
    top: -10px;
  }
  a.action-btn-wrapper.image-mode i {
    left: initial;
    top: initial;
  }
  .text-ABs .col-sm-6.bs-region.bs-region--right {
    margin-top: 2em;
  }

  .path-frontpage .action-btns {
    width: 100%;
    float: none;
  }

  .opportunity-pg-buttons #views-bootstrap-action-button-content-block-2 a {
    padding-top: 0;
   }
   /* Bootstrap fix */
  #block-views-block-action-button-content-block-3 .row {
    flex-wrap: nowrap;
    flex-direction: column;
  }
  /* Home Page Photo Boxes */
  .tile-style-4 .photo-box-text {
    width: 100%;
    position: static;
  }
  .photo-box-text {
    position: static;
    margin-bottom: 20px;
  }
  .spacer-20 {
    height: 0;
  }
  .hp-photo-row1 {
    margin-bottom: 20px;
  }
  .tile-style-3 i,
  .tile-style-4 i {
    bottom: 20px;
    right: 15px;
  }

  .tile-color-1 .photo-box-text {
    background: #004445;
  }
  .tile-color-2 .photo-box-text {
    background: #18252a;
  }
  .tile-color-5 .photo-box-text {
    background: #18252a;
  }

  .hp-photo-row1 {
    grid-template-columns: 43.3% 20px 28% 20px auto;
    grid-template-rows: 408px;
  }
  .field--name-field-opps-cta-image,
  .field--name-field-cta-image {
    display: none;
  }
  /* .opportunity-pg-buttons #views-bootstrap-action-button-content-block-2 a  */

   #views-bootstrap-opportunities-page-1 .col-12 {
     margin: 0 auto;
   }
   
}

@media (max-width: 768px) {

  .opportunity-pg-buttons a .action-button,
  .opportunity-pg-buttons a:hover .action-button {
    padding: 0 10px 10px 10px;
  }
  .opportunity-pg-buttons .col-12.col-sm-6.col-md-3 {
    width: 100%
  }
  .opportunity-pg-buttons a.action-btn-wrapper {
    margin: .5em 0;
  }

  .resources {
    width: 100%;
    margin-top: 2em;
  }
}


@media (min-width: 768px) {
  .opportunity-pg-buttons a .action-button,
  .opportunity-pg-buttons a:hover .action-button {
    padding: 0 10px 10px 10px;
  }
}

/* Department "Refresh" */
@media (min-width: 992px) {
  .text-ABs .col-sm-6.bs-region.bs-region--right .field--name-field-action-button,
  .text-4buttons-display .col-sm-6.bs-region.bs-region--right .field--name-field-action-button {
    display: grid;
    grid-template-columns: 47% 47%;
    grid-column-gap: 20px;
  }
  .text-ABs a.action-btn-wrapper {
    margin: 11px 0;
  }
  
  .btns-only .field--name-field-action-button {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 24% 24% 24% 24%;
  }

    /* Home Page Photo Boxes */
    .hp-photo-row1 {
      display: grid;
      grid-template-columns: 43.3% 20px 28% 20px auto;
      grid-template-rows: 408px;
      overflow-y: hidden;
    }
    .row1-mid {
      grid-column-start: 3;
      grid-column-end: 4;
      display: block;
    }
    .hp-photo-box-4 {
      grid-column-start: 5;
      grid-column-end: 6;
      background-color: #9fd5b3;
    }
    .hp-photo-row2 {
      display: grid;
      grid-template-columns: 56% 20px auto;
      grid-template-rows: 353px;
      margin-top: 20px;
      overflow-y: hidden;
    }
    .hp-photo-box-5 {
      grid-column-start: 1;
      grid-column-end: 2;
      background: #004445;
    }
    .hp-photo-box-5 img {
      width: 60%;
    }
    .hp-photo-box-6 {
      grid-column-start: 3;
      grid-column-end: 4;
    }
    .hp-photo-boxes h3 {
      font-size: 26px;
    }
}

/* Action Buttons 3 */
@media (min-width: 1200px) {
.opportunity-pg-buttons a .action-button,
.opportunity-pg-buttons a:hover .action-button {
  padding: 4em 10px 10px 10px;
  }

.hp-photo-row1 {
  display: grid;
  grid-template-columns: 43.3% 20px 28% 20px auto;
  grid-template-rows: 490px;
}
.hp-photo-row2 {
  grid-template-rows: 433px;
  margin-bottom: 50px;
}
}

@media (min-width: 992px) and (max-width: 1200px) {
  .hp-actions-1 a .action-button i, 
  .hp-actions-1 a .action-button span {
    padding: 10px;
    }

  a .action-button i, 
  a .action-button span {
      padding: 0;
    }
}