/*
Theme Name: nhj_custom
Theme URI:
Author: Gabrielle LaMarr LeMee
Author URI: https://gabriellelamarrlemee.com
Description: Custom theme for Nikole Hannah-Jones's personal website
Version: 1
License:
License URI:
Tags:
Text Domain: nhj_custom
*/



body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

h1,
h2,
h5,
.event-date {
  text-transform: uppercase;
  font-family: 'Anton', sans-serif;
  letter-spacing: .03em;
  line-height: 1.4em;
}

h1 {
  margin-bottom: 30px;
  display: block;
  float: none;
}

h2 {
  font-size: 1.5em !important;
  margin-bottom: 2em;
}

h3 {
  font-size: 1.5em;
  color: #CF1F44;
  line-height: 1.5em;
}

h4 {
  font-family: 'Roboto', sans-serif;
  font-size: 0.9em;
  text-transform: uppercase;
}

h5 {
  font-size: 0.9em !important;
}

a {
  color: inherit;
}

.credit {
  position: absolute;
  bottom: 50px;
  font-size: 0.8em;
}

blockquote {
  font-family: 'Anton', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 2.2em;
  text-align: center;
  letter-spacing: .03em;
}

.navbar {
  z-index: 50;
  position: fixed;
  background-color: #207570;
  color: #fff;
  padding: 0.3em 4em 0.5em 4em;
  width: 100vw;
}

.navbar a {
  box-shadow: none;
}

.navbar a:hover {
  box-shadow: inset 0 -0.2em 0 0 rgba(255, 255, 255, 0.75);
  color: inherit;
  text-decoration: none;
}

.navbar .active a {
  box-shadow: inset 0 -0.2em 0 0 rgba(255, 255, 255, 0.25);
  color: inherit;
  text-decoration: none;
}

.navbar .container {
  padding-top: 0;
}

.nav-link {
  padding: .5rem 1rem .3rem 1rem;
}

.container {
  width: 100vw;
  max-width: 100vw;
  margin: 0;
}

.row {
  padding: 4em 4em;
}

.row-inner {
  padding: 0;
}

.header-white nav {
  background-color: #fff;
  color:#000;
}

.header-white .navbar-toggler {
  color:#000;
}

.header-clear nav {
  background-color: transparent;
  color:#fff;
}

.header-clear .menu {
  color:#000;
}

.navbar-brand {
  font-family: 'Anton', sans-serif;
  letter-spacing: .04em;
  font-size: 1.5em;
}

.hscroll {
  overflow-x: scroll;
  overflow-y: hidden;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 520px;
  width: 100vw;
  padding: 0 0 0 calc(50vw - 50%);
  margin-right: calc(-50vw + 50%);
  margin-left: calc(-50vw + 50% + 15px);
}

.hscroll-small {
  height: 300px;
  /* margin-bottom: 1em; */
}

.hscroll::-webkit-scrollbar { width: 0 !important }

.blog-post {
  box-shadow: none;
  display: inline-block;
  height: auto;
  width: 300px;
  border: 1px solid white;
}

.blog-post-meta {
  /* padding:20px; */
}

.hscroll-small .blog-post {
  width: 280px;
}

.blog-post h4 {
  text-transform: none;
}

.hscroll-small .blog-post-title {
  font-size: 1em;
}

.blog-post:hover {
  background-color: rgba(214, 201, 39,.5);
  cursor: pointer;
  color: #000;
  text-decoration: none;
  box-shadow: none;
}

.home-image {
  width: 110%;
  height: auto;
  margin-left: 90px;
  margin-top: auto;
}

.home-top-quote {
  padding-top: 12em;
  min-height: 100vh;
}

.home-top-quote h1 {
  font-size: 3em;
}

.home-image-div {
  width: 100%;
  height: auto;
  padding: 0;
  margin-top: auto;
  margin-bottom: 0;
}

.home-top {
  display: flex;
  vertical-align: bottom;
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  height: auto;
  width: 100vw;
  background-color: #ebd0a9;
  color: #fff;
  overflow: hidden;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
  background-image: url('./wp-content/uploads/2023/04/nhj_sundance_green_dress_sm-1.jpg');
  background-position: 30% 0%;
  background-position-y: 60px;
  background-repeat: no-repeat;
}

.home-quote {
  background-color: #d7a058;
  width: 100vw;
  padding-top: 6em;
  padding-bottom: 6em;
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
}

.home-book {
  background-color: #007b37;
  width: 100vw;
  /* min-height: 110vh; */
  height: auto;
  color: #fff;
  -webkit-clip-path: polygon(0 0, 100% 6%, 100% 96%, 0 100%);
  clip-path: polygon(0 0, 100% 6%, 100% 96%, 0 100%);
}


.event-date {
  padding: 10px;
  font-size: 2em;
  color: #fff;
  margin-right: 10px;
  text-align: center;
  flex: 0 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-content {
  padding: 10px 20px;
  /* flex-grow: 1; */
}


.bar {
  width: 100%;
  height: 0;
  margin: 1em 0;
  border-bottom: 1px solid lightgray;
}

.about-image {
  z-index: -1;
  width: 100%;
  height: 100vh;
  position: fixed;
  top:0;
  left: 0;
  overflow: hidden;
  -webkit-clip-path: polygon(0 0, 94% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 94% 0, 100% 100%, 0 100%);
}

.about-image img {
  width: 100%;
  height: auto;
}

.about-image .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 0 2em 3em;
  font-style: italic;
  color: #fff;
  font-size: 0.8em;
}

.event-image {
  position: fixed;
  z-index: -1;
  width: 33vw;
  height: auto;
  bottom: 0;
  left: -70px;
  border: 0;
  outline: 0;
}

.event-sidebar {
  position: fixed;
}

.event-sidebar h2 {
  margin-bottom: 1em;
}

.fixed {
  position: static;
}

form p {
  margin-bottom: 0.5em;
}

.contact {
  background-color: #CF1F44;
  color: #fff;
  min-height: 100vh;
  padding-top: 8em;
}

.contact label,
.contact span,
.contact input,
.contact textarea {
  width: 100%;
}

.contact input,
.contact textarea {
  background-color: #821433;
  border: none;
  border-radius: 0;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  padding: 10px;
}

.contact span {
  color: #fff;
}

.contact input::placeholder,
.contact textarea::placeholder {
  font-family: 'Roboto', sans-serif;
  color: #fff;
  opacity: 0.5;
}

.yellow {
  background-color: #D6C927;
}

.no-padding {
  padding-left: 0;
  padding-right: 0;
}

.col-about {
  padding: 4em 6em 4em 12em;
  z-index: -5;
}

.col-about h1 {
  margin: 60px 0px 30px 0px;
}

.about-group {
  /* display: flex; */
  align-items: center;
  /* flex-direction: column; */
}

.about-item {
  display: inline-block;
  padding: 0.5em 0.5em;
  background-color: inherit;
  border: none;
  flex: 1;
  width: 50%
  /* float: left; */
}

.card-columns {
  column-count: 1;
  orphans: 1;
  widows:1;
}

.about-item h4 {
  font-weight: bold;
  margin: 0;
}

.about-item p {
  font-size: 0.8em;
}

.block {
  display: block;
}

.text-center {
  text-align: center;
}

.flex-center {
  justify-content: center;
}

.twitter{
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.btn {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-style: italic;
  border-radius: 0;
  box-shadow: none;
}

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

.btn-primary:hover {
  color: gray;
  background-color: #fff;
  border-color: gray;
  box-shadow: none;
}

.home-work .metaslider {
  margin: 0 4em 2em 4em;
}

.home-work .metaslider .caption-wrap {
  position: relative;
  background: #fff;
  color: #000;
  text-align: left;
}

.large {
  font-size: 3em;
  hanging-punctuation: first;
  text-indent: -0.5em;
}

.small {
  font-size: 2em;
  hanging-punctuation: first;
  text-indent: -0.5em;
}

a {
  box-shadow: inset 0 -0.2em 0 0 rgba(23, 124, 156,.5);
}

a:hover {
  box-shadow: inset 0 -1.2em 0 0 rgba(23, 124, 156,.5);
  color: inherit;
  text-decoration: none;
}

.highlight-blue {
  box-shadow: inset 0 -0.7em 0 0 rgba(23, 124, 156,.5);
}

.highlight-yellow {
  box-shadow: inset 0 -0.7em 0 0 rgba(214, 201, 39,.5);
}

.highlight-red {
  box-shadow: inset 0 -0.7em 0 0 rgba(207, 31, 68,.25);
}

.highlight-blue-small {
  box-shadow: inset 0 -0.8em 0 0 rgba(23, 124, 156,.5);
}

.highlight-red-small {
  box-shadow: inset 0 -0.8em 0 0 rgba(207, 31, 68,.25);
}

.highlight-yellow-small {
  box-shadow: inset 0 -0.8em 0 0 rgba(214, 201, 39,.5);
}

.blog-post-date {
  font-size: 0.9em;
  font-style: italic;
  margin-bottom: 0.5em;
}

.blog-post-meta {
  font-size: 0.8em;
}

.blog-post-title {
  font-size: 1.2em;
  font-weight: bold;
}

.twitter a,
.twitter a:hover {
  box-shadow: none;
}

.work {
  padding-top: 10em;
}

.work h2 {
  margin-top: 1em;
  margin-bottom: 1em;
}

.events {
  padding-top: 10em;
}

.embed-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 56.25%;
  width: 100%;
  height: auto;
}

.blog-post iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.event-post {
  display: inline-block;
  margin-bottom: 30px;
  padding: 0;
  width: 100%;
  /* Change width to 49% to make this half the column */
}

.thumbnail-outer {
    width: 100%;
    margin: 0 auto;
}

.thumbnail-container {
  width: 100%;
  padding-bottom: 120%;
  position: relative;
  overflow: hidden;
}

.thumbnail-container-small {
  padding-bottom: 60%;
}

.thumbnail-container img {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%
}

.rect-group-left {
  position: relative;
  left: 0;
  width: 300px;
  height: 34px;
}

.rect-group-top {
  position: absolute;
  left: 0;
  width: 100vw;
  height: 300px;
}

.rect {
  width: 120px;
  height: 8px;
}

.green {
 fill: #007b37;
}

.dark-red {
  fill: #821433;
}

.red {
  fill: #CF1F44;
}

.yellow {
  fill: #d7a058;
}

.white {
  fill: #fff;
}

.wpcf7 form.sent p {
	display: none;
}

.wpcf7-response-output {
  border: none !important;
  margin: 0 !important;
  padding: none !important;
}

.navbar-toggler {
  color: #fff;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 900px) {
  .col-md-8,
  .col-md-7,
  .col-md-6,
  .col-md-5,
  .col-md-4,
  .col-md-3,
  .col-md-2,
  .col-md-1 {
    -webkit-box-flex: none;
    -ms-flex: none;
    flex: none;
    display: block;
    max-width: 100%;
  }
  .about-image {
    z-index: 1;
    position: relative;
  }
  .row {
    padding: 3em 1.2em;
  }
  .no-padding {
    padding: 0;
  }
  .col-about {
    padding: 3em 1.2em;
  }
  .about-image img {
    width: 100%;
    height: auto;
  }
  .about-image {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  .event-sidebar {
    position: relative;
    padding-top: 60px;
  }
  .event-image {
    display: none;
  }
  .event-post {
    width: 100%;
  }
  .navbar {
    padding: 1em 1em 0.5em 1em;
  }
  .home-top-quote {
    padding-top: 4em;
  }
  .home-top-quote h1 {
    font-size: 2.3em;
  }
  blockquote {
    font-size: 1.8em;
    margin-top: 1em;
  }
  .small {
    font-size: 1.4em;
  }
  .h3 {
    line-height: 1.2em;
  }
  .twitter {
    margin-top: 4em;
  }
  .blog-post-title {
    font-size: 1em;
  }
  .event-date {
    font-size: 1.8em;
  }
  .home-top-quote {
    min-height: auto;
  }
  .home-top {
    margin-bottom: 0;
    padding-bottom: 0;
    background-position: 50% 0%;
    background-position-y: 243px;
    background-repeat: no-repeat;
    height: 1000px;
  }
  .hscroll {
    display: block;
    height: auto;;
    padding: 0;
  }

  .hscroll-small {
    height: auto;
  }

  .blog-post {
    padding:20px;
    box-shadow: none;
    display: block;
    height: auto;
  }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

@media only screen and (max-width: 1080px) {
  .about-image img {
    width: auto;
    height: 100%;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}