/*
Theme Name: Dhakira Test
Author: Steven Wyks
*/
/* import fonts relative path location */
@font-face {
  font-family: "RobotoBlack";
  src: local("MyFont"), url(./fonts/Roboto-Black.ttf) format("woff");
}

@font-face {
  font-family: "Open Sans";
  src: local("MyFont"), url(./fonts/OpenSansRegular.ttf) format("woff");
}
@font-face {
  font-family: "RobotoBold";
  src: local("MyFont"), url(./fonts/Roboto-Bold.ttf) format("woff");
}
@font-face {
  font-family: "RobotoLight";
  src: local("MyFont"), url(./fonts/Roboto-Light.ttf) format("woff");
}
@font-face {
  font-family: "RobotoMedium";
  src: local("MyFont"), url(./fonts/Roboto-Medium.ttf) format("woff");
}
@font-face {
  font-family: "RobotoRegular";
  src: local("MyFont"), url(./fonts/Roboto-Regular.ttf) format("woff");
}
@font-face {
  font-family: "RobotoThin";
  src: local("MyFont"), url(./fonts/Roboto-Thin.ttf) format("woff");
}
@font-face {
  font-family: "RobotoCondensedRegular";
  src: local("MyFont"), url(./fonts/RobotoCondensed-Regular.ttf) format("woff");
}

@font-face {
  font-family: "RobotoCondensedBold";
  src: local("MyFont"), url(./fonts/RobotoCondensed-Bold.ttf) format("woff");
}

@font-face {
  font-family: "Raleway";
  src: local("MyFont"), url(./fonts/Raleway-Thin.woff) format("woff");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Raleway";
  src: local("MyFont"), url(./fonts/Raleway-ExtraLight.woff) format("woff");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Raleway";
  src: local("MyFont"), url(./fonts/Raleway-Light.woff) format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Raleway";
  src: local("MyFont"), url(./fonts/Raleway-Regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Raleway";
  src: local("MyFont"), url(./fonts/Raleway-Medium.woff) format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Raleway";
  src: local("MyFont"), url(./fonts/Raleway-SemiBold.woff) format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Raleway";
  src: local("MyFont"), url(./fonts/Raleway-Bold.woff) format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Raleway";
  src: local("MyFont"), url(./fonts/Raleway-ExtraBold.woff) format("woff");
  font-weight: 800;
  font-style: normal;
}

/* calling Raleway font from Google Fonts */
/* @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap"); */
body {
  background-color: #fff;
  /* 	position: relative;
	min-height: 100vh; */
  max-height: 100vh;
}

header {
  background: #fff;
  height: 100px;
  width: 100%;
}

/* nav styles */
nav {
  overflow: hidden;
  font-family: "Helvetica";
  z-index: 2;
  display: flex;
  overflow-x: hidden;
}

.transparentNav {
  width: 86%;
  margin: 20px 7%;
  position: relative;
  color: #f2f2f2;
  pointer-events: none;
  background: #08263100;
}

.transparentNav a {
  color: #ffffff;
  pointer-events: all;
}
.opaqueNav {
  /* position: relative;
  pointer-events: none;
  width: 100%;
  margin: 20px 0px; */
  position: relative;
  width: 86%;
  margin: 20px 7%;
  pointer-events: none;
}

.opaqueNav a {
  color: black;
  pointer-events: all;
}

nav a {
  font-family: "Raleway", sans-serif;
  float: right;
  display: block;
  text-align: center;
  margin: 28px 5%;
  text-decoration: none;
  font-size: 1em;
  opacity: 1;
  letter-spacing: 0.408px;
  font-weight: 300;
}

nav a:hover {
  color: rgb(213, 213, 213);
}
nav a.activeNav {
  float: left;
}

nav .icon {
  display: none;
}
/*end nav styles */
/*leaflet map css styles */
.leaflet-map {
  height: 100vh !important;
  position: absolute !important;
  top: 0;
  z-index: -1;
  max-height: 100vh;
}
.offset-zoom-controls-bottom {
  bottom: 14px !important;
}
.leaflet-disabled {
  pointer-events: none;
}
/*end leaflet map css styles */
/* map content (paragraph and title on homepage) styles */
#mapContentLeft {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  left: 0;
  padding: 8em 7% 5em;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 52%;
  z-index: 10;
  color: white;
  font-family: "RobotoCondensedRegular";
  -webkit-transform: translatez(0);
  -moz-transform: translatez(0);
  -ms-transform: translatez(0);
  -o-transform: translatez(0);
  transform: translatez(0);
  /* background: linear-gradient(to right, rgba(96, 163, 218, 0.2), transparent); */
}

#mapContentLeft h2 {
  font-size: 32px;
  font-style: italic;
  font-family: "Raleway", sans-serif;
  font-weight: 400;
}

#infoCircleBottomLeft {
  color: white;
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-size: 50px;
  display: none;
}
#infoCloseTopLeft {
  display: none;
  pointer-events: all;
}

#mapContentLeft h1 {
  font-weight: 500;
  font-size: 40px;
  margin-block-start: 0.47em;
  margin-block-end: 0.37em;
  font-family: "Raleway", sans-serif;
  letter-spacing: -0.6px;
  margin-bottom: 0;
}
#mapContentLeft p {
  font-weight: 300;
  font-size: 16px;
  font-family: "Raleway", sans-serif;
  color: #e6e6e6;
  text-align: justify;
}
#mapContentLeft h6 {
  font-weight: 500;
  font-size: 1.1em;
}
#mapContentLeft p > a {
  pointer-events: all;
  color: white;
}
/* minimap on left css */
#minimapWrap {
  width: 70%;
  height: auto;
  background: #00161ee6;
  margin-top: 25px;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  pointer-events: all;
}

#minimapWrap img {
  width: 100%;
  padding: 10px 23px 23px 10px;
  height: auto;
  border-radius: 10px;
  filter: brightness(85%);
}

#minimapWrap .leaflet-map {
  /* width: 100%;
  padding: 10px 23px 23px 10px;
  border-radius: 10px;
  filter: brightness(85%); */
  height: 250px !important;
}

#minimapWrap i {
  position: absolute;
  bottom: 6px;
  right: 6px;
  transform: rotate(-45deg);
  cursor: pointer;
  pointer-events: all;
}

#minimapWrap i:hover {
  color: gray;
}
/* end minimap on left css */
/*end content styles*/
/* legend at the bottom of the map homepage */

/* marker styles */
.leaflet-div-red {
  background: #2ab589;
  border: 4px solid rgba(255, 255, 255, 0.5);
  color: blue;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  line-height: 30px;
  width: 20px;
  height: 20px;
  margin-right: 4%;
  margin-left: 3%;
}

.leaflet-div-blue {
  background: rgb(255 230 34);
  border: 4px solid rgba(255, 255, 255, 0.5);
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  line-height: 30px;
  width: 20px;
  height: 20px;
  margin-right: 4%;
  margin-left: 3%;
}
/*OSM styles */
#map_ol3js_1 {
  height: 100vh !important;
}
/*end OSM styles */
/* use this to adjust marker position, will vary depending on size of marker. */
#mapContentLegendBottomRight {
  position: absolute;
  bottom: 100px;
  right: 20px;
  color: white;
  width: 200px;
  pointer-events: none;
}

#mapContentLegendBottomRight h6 {
  margin-bottom: 16px;
}

#mapContentLegend {
  display: none;
}

#mapContentLegend h6 {
  margin-top: 0px;
  margin-bottom: 18px;
  font-weight: 400;
  font-size: 20px;
  font-family: "Raleway", sans-serif;
}
.flex-row-two-columns-legend {
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
}

.flex-row-two-columns-legend .mediaAvailability {
  font-size: 18px;
  font-family: "Raleway", sans-serif;
  font-weight: 100;
  margin-left: 10px;
}
/*end styles for legend
/*styles for Stories archive, grid of cards (title above it too) and pinwheel loading */
/* grid for articles page, search bar, filters, cards. */
#storiesTitle {
  text-align: center;
  font-size: 6em;
  font-weight: 500;
  margin: 0;
}
.jumbotronImageArchive {
  position: relative;
  font-family: "Raleway", sans-serif;
}

.jumbotronImageArchive img {
  width: 100%;
  height: 100%;
  max-height: 640px;
  object-fit: cover;
  filter: brightness(50%);
}

.jumbotronImageArchive p {
  text-align: center;
  font-size: 1.5em;
  font-weight: 300;
}

.wrapper-jumbotron {
  position: absolute;
  top: 9em;
  margin: auto;
  width: 100%;
  color: white;
}

#my-ajax-filter-search {
  width: 100%;
  /* position: absolute;
  bottom: 28%; */
}

[placeholder]:focus::-webkit-input-placeholder {
  color: transparent;
}

#my-ajax-filter-search form {
  margin: auto;
  width: 40%;
}

#articlesDivCenterGrid {
  display: -moz-grid;
  width: 64%;
  margin: 0px 18% auto 18%;
  grid-template-columns: 20% 80%;
}

#articlesDivCenterGrid #articleCardsWrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-auto-rows: 490px; */
  grid-gap: 1rem;
  margin-bottom: 60px;
}

#articlesDivCenterGrid #articleCardsWrapper .articleCard {
  text-align: center;
  border-radius: 4px;
  border: 0.5px solid rgba(153, 153, 153, 0.185);
  height: 30rem;
  box-shadow: 0px 20px 20px 20px #00000002;
}

#articlesDivCenterGrid #articleCardsWrapper .articleCard img {
  width: 90%;
  height: auto;
  margin-bottom: 10px;
  padding: 0px 22px;
}
/* styles for grid (masonry js) */
.grid {
  margin: 20px 160px;
  text-align: center;
}

.grid-item {
  width: 49%;
  /*height: auto; 
  margin-bottom: 15px; */
  text-decoration: none;
  padding: 10px;
  box-sizing: border-box;
  text-align: left;
}

.grid-item img {
  width: 100%;
  height: auto;
}
/* end styles for masonry grid */

#ajax-loader-image-container {
  text-align: center;
  margin-top: 70px;
}

#ajax-loader-image-container img {
  width: 80px;
  height: auto;
}

#articleCardsWrapper input {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

#articleCardsWrapper a {
  text-decoration: none;
}

#articleCardsWrapper button {
  float: right;
  padding: 6px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
#articlesDivCenterGrid #articleCardsWrapper .articleCard h1 {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  color: black;
  text-decoration: none;
  margin-bottom: 10px;
  margin-top: 13px;
  font-size: 26px;
}

.card .card-body {
  color: black !important;
}

.card .card-body h1 {
  font-family: "Raleway", sans-serif;
  font-size: 24px;
  font-weight: 500;
}

.card .card-body p {
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  color: #292929;
  font-weight: 300;
}

.card .card-body .dhakira-orange {
  background: #f4a737 !important;
  padding: 10px;
  margin-top: 6px;
}

.card .card-body .dhakira-crimson {
  background: #3374a6 !important;
  padding: 10px;
  margin-top: 6px;
}

#articlesDivCenterGrid #articleCardsWrapper .articleCard p {
  font-family: "Open Sans";
  font-weight: 500;
  font-size: 17px;
  margin: auto 7% auto 7%;
  color: #4a4a4a;
  text-decoration: none;
}
/*end styles for stories archive */
/*styles for about page */
#aboutPageContentWrapper {
  margin: 55px 18% 60px 18%;
}
#aboutPageContentWrapper h1 {
  font-size: 50px;
  text-align: left;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  color: #111;
}

#aboutPageContentWrapper h2 {
  font-size: 30px;
  font-weight: 300;
  text-align: left;
  font-family: "Raleway", sans-serif;
  color: black;
}

#aboutPageContentWrapper .paragraphsAbout {
  text-align: left;
}

#aboutPageContentWrapper p {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  color: #111;
}

.blockQuote {
  margin-left: 35px;
  text-align: left;
  text-align: justify;
  font-style: italic;
}

/* end styles for about page */
/* footer styles */

.footer-distributed {
  background-color: #292c2f;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  font-family: "Open Sans";
  padding: 55px 18% 60px 18%;
  margin-top: 80px;
  /* 	position: absolute;
	bottom: 0; */
}

.footer-distributed .footer-left p {
  color: #8f9296;
  font-size: 14px;
  margin: 0;
}
.footer-distributed .footer-left ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

.footer-distributed .footer-left li {
  margin: auto 20px;
  color: white;
}

/* Footer links */
.footer-distributed p.boldHeader {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 15px;
  font-family: "Futura";
}
.footer-distributed p.footer-links {
  font-size: 16px;
  font-weight: 400;
  color: #d1d1d1;
  margin: 0 0 2px;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.footer-distributed p.footer-links a {
  display: inline-block;
  line-height: 1.8;
  text-decoration: none;
  color: inherit;
}

.footer-distributed .footer-left hr {
  opacity: 1 !important;
  color: gray !important;
}

.footer-distributed .footer-right {
  float: right;
  max-width: 180px;
}

.footer-distributed .footer-right a {
  display: inline-block;
  width: 45px;
  height: 45px;
  background-color: #33383b;
  border-radius: 2px;

  font-size: 25px;
  color: #ffffff;
  text-align: center;
  line-height: 45px;

  margin-left: 3px;
}

.lower-links {
  float: left;
}

.lower-links a {
  color: #8f9296;
  text-decoration: none;
  margin: 6px;
}

/* individuall locations pages styles */
/* body Wrapper to assure that footer is at bottom of page */
.bodyWrapper {
  min-height: 50vh;
}
.pageContentWrapper {
  margin: 60px 21% auto 21%;
  text-align: center;
  font-family: "Raleway", sans-serif;
  min-height: 39vh;
}

.pageContentWrapper h1 {
  font-size: 52px;
  font-weight: 100;
  text-align: center;
  line-height: 1em;
  font-family: "Raleway", sans-serif;
  margin-bottom: 30px;
}

.pageContentWrapper h2 {
  font-size: 30px;
  font-weight: 300;
  text-align: left;
}

.pageContentWrapper p {
  margin-top: 0px;
  text-align: left;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 18px;
}

.n2-section-smartslider {
  margin-bottom: 24px !important;
}

.wp-block-embed__wrapper {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}
.wp-block-embed__wrapper iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}
.date-subheader {
  color: #5d5f5f;
  text-align: center !important;
  font-size: 18px;
}

.interview-name-header {
  line-height: 34px;
  width: 100% !important;
  text-align: center !important;
  font-size: 26px !important;
  margin-bottom: 10px;
  font-weight: 400 !important;
}

.interviewer-subheader {
  margin-bottom: 0;
}

.interview-section-header {
  font-size: 24px !important;
  font-weight: 400 !important;
}

.bold-interview {
  font-weight: 600 !important;
}

.image-caption-under {
  color: #5d5f5f;
  font-style: italic;
  line-height: 20px;
  font-size: 14px;
}
/* end individual location pages styles */

.searchandfilter {
  width: 64%;
  float: left;
  width: 20%;
  display: flex;
  flex-direction: column;
}

.searchandfilter ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  flex-direction: column;
}

.searchandfilter div ul li ul {
  list-style: none;
  column-count: 6;
  max-height: 300px;
  overflow-y: scroll;
}

.searchandfilter div ul li ul li {
  margin: 6px;
}

/*filteringg typeahead styles */
.tokenfield {
  margin: 6px auto;
}
.tokenfield .token {
  background-color: #e7f4ff;
  height: 26px !important;
  border: none !important;
}
.tokenfield .token .close {
  text-decoration: none;
}

.tokenfield .token .token-label {
  color: #007bff;
}

/*page formatting image not working (align center) */
.aligncenter {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/*end*/

/*styles for audio control on story pages */
.wp-block-audio audio {
  border-radius: 22px;
}
/* end */

/*styles for image caption animation */
.blocks-gallery-item img {
  display: flex;
  flex-direction: row !important;
  overflow: hidden;
}

.wp-block-gallery .blocks-gallery-item {
  overflow-y: hidden;
}
.blocks-gallery-item__caption {
  position: absolute;
  left: 0px;
  right: 0px;
  line-height: 30px;
  bottom: -60px !important;
  text-align: center;
  background: rgba(256, 256, 256, 0.8);
  color: #000;
  transition: bottom 500ms;
  pointer-events: none;
}
.blocks-gallery-item img:hover + figcaption {
  bottom: 0% !important;
  transition: bottom 500ms;
}
/*end styles */
/*gallery custom styles */
.n2-section-smartslider {
  margin-bottom: 6px;
}
/*end gallery custom styles */
/* leaflet popup styles */
.leaflet-popup-content img {
  width: 100%;
  height: auto;
}

.leaflet-popup-content h5 {
  margin-bottom: 10px;
}

.leaflet-container a.leaflet-popup-close-button {
  padding: 8px 8px 0 0 !important;
  width: auto !important;
}
.leaflet-popup-content p {
  margin: 10px 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 13px;
}

.leaflet-popup-content a {
  color: black !important;
  font-size: 14px;
}
/* end leaflet marker/popup styles */
/* logo in bottom-left corner of the map */
.bottom-left-dhakira-logo img {
  width: 230px;
  z-index: 10;
  position: absolute;
  bottom: 20px;
  right: 22px;
  pointer-events: none;
  height: auto;
}
/* end logo styles */

/* BEGIN MEDIA QUERIES */

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 1100px) {
  .footer-distributed {
    padding: 60px 120px;
  }
  #mapContentLeft {
    width: 70%;
  }
  .grid {
    margin: 15px 60px;
  }

  .pageContentWrapper {
    margin: 60px 11% auto 11%;
  }
}

@media (max-width: 800px) {
  .leaflet-map {
    overflow-y: hidden !important;
  }
  .footer-distributed {
    padding: 60px 80px;
  }
  .footer-distributed .footer-left,
  .footer-distributed .footer-right {
    text-align: center;
  }

  .footer-distributed .footer-right {
    float: none;
    margin: 12px auto 20px;
  }

  .lower-links {
    margin-bottom: 10px;
  }

  .footer-distributed .footer-left p.footer-links {
    line-height: 1.8;
    margin-bottom: 10px;
  }
  #mapContentLeft {
    width: 100%;
    background-color: #666666d6;
    pointer-events: all;
    overflow-y: hidden;
    padding: 5em 7% 5em;
  }

  #mapContentLeft h1 {
    font-size: 28px;
  }
  #mapContentLegend {
    display: inline-block;
  }
  .pageContentWrapper {
    margin: 60px 9% auto 9%;
  }
  #mapContentLegendBottomRight {
    display: none;
  }
  #infoCircleBottomLeft {
    display: block;
    pointer-events: all;
    cursor: pointer;
  }
  #infoCloseTopLeft {
    position: absolute;
    top: 50px;
    left: 7%;
    font-size: 25px;
    pointer-events: all;
    cursor: pointer;
    display: block;
  }
  .wrapper-jumbotron {
    top: 5em;
  }
  .bottom-left-dhakira-logo {
    display: none;
  }
  .grid-item {
    width: 99%;
    height: auto;
    margin-bottom: 15px;
    text-decoration: none;
  }
  .grid {
    margin: 15px 30px;
  }
  #aboutPageContentWrapper {
    margin: 55px 7% 40px 7%;
  }

  #minimapWrap {
    margin-top: 4px;
  }
}
/*end footer styles */
@media (max-width: 670px) {
  .wrapper-jumbotron {
    top: 3em;
  }
  .wrapper-jumbotron p {
    font-size: 1em;
  }
  #storiesTitle {
    font-size: 3em;
  }
  #my-ajax-filter-search form {
    width: 70%;
  }
  .pageContentWrapper {
    margin: 60px 5% auto 5%;
    text-align: center;
  }
}
@media (max-width: 500px) {
  nav a {
    margin: 0px 10px 0px 0px !important;
    padding: 6px 8px 6px 8px !important;
  }
  .pageContentWrapper {
    margin: 60px 3% auto 3%;
  }
  .wrapper-jumbotron {
    top: 2em;
  }
  #infoCloseTopLeft {
    position: absolute;
    top: 15px;
  }
  .pageContentWrapper {
    margin: 20px 9% auto 9%;
  }

  #aboutPageContentWrapper {
    margin: 20px 8% 40px 8%;
  }
  .flex-row-two-columns-legend {
    margin-bottom: 6px;
  }
  .pageContentWrapper h1 {
    font-size: 32px;
  }
  #mapContentLeft {
    padding: 3em 7% 5em;
  }
}

/* */
@media screen and (max-height: 740px) {
  #minimapWrap {
    /*     display: none; */
  }
}

@media screen and (max-height: 710px) {
  #minimapWrap {
    width: 70%;
    pointer-events: none;
    transition: width 0.5s;
  }
  #minimapWrap img {
    padding: 10px;
  }

  #minimapWrap i {
    display: none;
  }
}

@media screen and (max-height: 700px) {
  #minimapWrap {
    width: 50% !important;
    pointer-events: none;
    transition: width 0.5s;
  }
  #minimapWrap img {
    padding: 10px;
  }

  #minimapWrap i {
    display: none;
  }
}

/* */