@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css");
* {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  line-height: 1.6;
}

#modalBtn:hover {
  cursor: pointer;
}

.content img {
  /* width: 100%; */
}

.desktop img {
  width: 100%;
}

.mobile > img {
  object-fit: contain;
  width: 80%;
  border-radius: 10px !important;
}

.modal {
  display: block;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.75); /* Black w/ opacity */
  line-height: 1.75;
}

.spring-campaing-btn {
  margin-top: 30px;
  padding: 0 20px;
}

.spring-campaing-btn button {
  display: block !important;
  margin: 0 auto;
  width: 100%;
  border: none;
  outline: none;
  font-size: 1rem;
}

span.close i:hover {
  color: #bb561f;
}

.modal__body img {
  display: block;
  margin: 50px auto;
  /* margin-bottom: 15px !important; */
  width: 60%;
  border-radius: 10px;
  column-span: 0;
}

.modal__body h1 {
  line-height: 1;
}

.col-container {
  display: flex;
  align-items: center;
}

.column {
  float: left;
  width: 50%;
  font-size: 1rem;
}

.modal__content {
  position: relative;
  background-color: #fefefe;
  margin: 25px auto;
  padding: 25px;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation-name: animatetop;
  animation-duration: 0.4s;
  border-radius: 10px;
  max-height: 100%;
  overflow: auto;
  padding-bottom: 50px;
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

.modal__content__header {
  font-family: "Rockwell", "Courier Bold", Courier, Georgia, Times,
    "Times New Roman", serif;
  color: #e36624;
  padding: 2px 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
  align-items: center;
  text-align: right;
}

.modal hr {
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #e36624;
  margin-bottom: 20px !important;
}

.modal__content__header .close {
  font-size: 1.8rem;
  text-align: right;
  align-self: flex-end;
}

.modal__content__header .close:hover {
  cursor: pointer;
}

.modal__body {
  padding: 2px 16px;
}

.modal__body h1,
.modal__body h2 {
  color: #e36624;
  margin-bottom: 10px;
}

nav .header img {
  max-height: 22px;
  width: 100%;
}

nav {
  border-left: 1px solid lightgray;
  border-right: 1px solid lightgray;
}

nav .header {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 10px 10px;

  flex-shrink: 0;
}

nav .header .call-to-action {
  display: flex;
  text-align: right;
  width: 480px;
  align-items: right;
  align-self: right;
  justify-content: flex-end;
}

nav .header .call-to-action p {
  text-align: right;
  padding-right: 10px;
  font-size: 14px;
  width: 50%;
}

/* Add a black background color to the top navigation */
.topnav {
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  /* background-color: #e9f3f3; */
  background: linear-gradient(180deg, #f9ffff, #abcece);
  overflow: hidden;
  display: block;
}

a.link-indent {
  padding-left: 35px !important;
  padding-right: 35px !important;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
  grid-gap: 30px;
  margin: 0 5px;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  grid-gap: 30px;
  margin: 35px 5px;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  grid-gap: 30px;
  margin: 35px 5px;
}

.webinar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 15px;
  margin: 20px 0px;
}

.release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 15px;
  margin: 20px 0px;
}

.release {
  margin: 15px 0;
  padding: 30px 25px;
  border: 2px solid #cfe4e3;
  border-radius: 15px;
  overflow: scroll !important;
}

.webinar {
  padding: 30px 25px;
  border: 2px solid #cfe4e3;
  border-radius: 15px;
  overflow: scroll !important;
}

.case {
  padding: 10px;
  border: 2px solid #cfe4e3;
  border-radius: 15px;
  max-height: 600px;
  overflow: scroll !important;
}

.story {
  text-align: center;
  padding: 20px;
  border: 2px solid #cfe4e3;
  border-radius: 15px;
  max-height: 600px;
  overflow: scroll !important;
}

.story img {
  max-width: 100%;
}

.story p {
  text-align: left;
  padding: 10px;
}

.orange-btn-md {
  text-decoration: none;
  padding: 10px 20px;
  background-color: #fd5b21;
  border-radius: 100px;
  color: white;
  font-weight: bold;
  transition: 0.2s ease-in-out background-color;
  margin-bottom: ;
  /* display: block; */
}

.card .orange-btn-md {
  display: block;
}

h3.text-pop {
  margin: 15px 0;
  color: #fd5b21;
}

h3 {
  margin: 15px 0;
}

.social-btn {
  padding: 10px 12px;
  border-radius: 100%;
  height: 23px;
  width: 23px;
  text-align: center;
}

.orange-btn-md:hover {
  background-color: #8f081b;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #171512;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
}

button.dropbtn {
  font-size: 16px !important;
  font-weight: bold;
}

/* Add an active class to highlight the current page */
.active {
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

.content ul {
  padding-left: 30px;
  margin: 10px 0;
}

.content ul li {
  margin-top: 5px;
}

.content a {
  white-space: nowrap;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: #171512;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #ffffff8c;
  color: black;
  transition: 0.2s ease-in-out background-color;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  /* border-left: 1px solid black;
  border-right: 1px solid black;
  /* box-shadow: 12px 0 15px -4px rgba(114, 114, 114, 0.97),
    -12px 0 15px -4px rgba(116, 116, 116, 0.97); */
}

.content {
  margin: 10px 20px;
  /* padding: 20px; */
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

iframe {
  margin-top: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.content p {
  margin-top: 15px;
}

.content img {
  max-height: 350px;
  padding: 15px 0;
  margin: 0 auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

nav .topnav .social-buttons {
  display: none;
}
.mobile {
  display: none;
}

.mobile p {
  margin-top: 15px;
}

.jumbotron-home {
  background: url("/uploads/2020/11/Impact-Report-1024x636.jpg");
  min-height: 600px;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid lightgray;
}

.jumbotron-home .text {
  color: white;
  float: right;
  width: 45%;
  background-color: rgba(0, 0, 0, 0.514);
  border-radius: 15px;
  padding: 30px;
  min-width: 550px;
}

.jumbotron-home p {
  margin-top: 10px;
  font-size: 1.5rem;
}

.jumbotron-home .orange-btn-md {
  /* font-weight: 400; */
  font-size: medium;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 35px;
  margin: 50px 20px;
}

h2.title,
h1.title {
  margin: 0 20px;
  border-bottom: 4px solid #fd5b21;
  padding-bottom: 5px;
}

.subtitle {
  color: #8f081b;
  padding-top: 15px;
}

.mt {
  margin-top: 30px !important;
}

.card {
  min-height: 500px;
  max-height: 1000px;
  padding: 50px;
  background: linear-gradient(145deg, #f9ffff, #d2dbdb);
  border-radius: 15px;
  height: 500px;
  box-shadow: 5px 5px 10px #d9d9d9, -5px -5px 10px #ffffff;
  text-align: center;
  transition: 0.2s ease-in-out box-shadow;
  overflow-x: hidden;
}

.card img {
  max-width: 100%;
  max-height: 200px;
  margin: 15px auto;
  border: 2px solid #8f081b;
  border-radius: 15px;
}

.card p {
  text-align: left;
  margin-bottom: 30px;
}

.card:hover {
  box-shadow: 15px 15px 30px #d9d9d9, -15px -15px 30px #ffffff;
}

footer {
  margin: 75px 25px;
  padding: 50px;
  background-color: #e9f3f3;
  border: 1px solid lightgray;
}

.photo-grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

.photo-grid-2-col img {
  object-fit: cover;
  width: 100%;
  height: 300px;
}

@media screen and (max-width: 1075px) {
  .jumbotron-home {
    min-height: 350px;
    border-bottom: 1px solid gray;
  }

  nav .topnav .social-btn {
    display: flex;
    padding: 12px;
    border-radius: 100%;
    height: 23px;
    width: 23px;
    text-align: center !important;
    margin-right: 10px;
  }
  .mobile {
    display: block;
  }
  .topnav a {
    height: 24px;
  }
  .topnav a,
  .dropdown .dropbtn,
  .social-buttons {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }

  nav .header .social-buttons {
    display: none;
  }

  nav .header {
    min-height: 35px;
    justify-content: space-between;
  }

  nav .header .call-to-action {
    text-align: right;
    width: 480px;
    align-items: right;
    align-self: right;
    justify-content: flex-end;
  }
}

.call-to-action-mobile {
  display: none;
}

.accordion__left {
  float: left;
}
.accordion__right {
  float: right;
}

/* Toggle for nwirp.org/join/jobs */
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc;
}

.accordion__title {
  font-weight: bold;
}

.accordion:first-of-type {
  border-bottom: none;
}

.accordions {
  margin-top: 25px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  border: 1px solid #ccc;
}

.panel:first-of-type {
  border-bottom: none;
}

.accordion__content {
  padding: 10px 0px 35px 0px;
  padding-top: 10px;
  padding-bottom: 35px;
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1075px) {
  .desktop {
    display: none;
  }

  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
    display: block;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }

  .topnav.responsive .social-buttons {
    display: flex;
    align-self: center;
    align-items: center;
    padding: 25px;
  }

  .orange-btn-md {
    color: white !important;
  }
  .orange-btn-md:hover {
    background-color: #8f081b !important;
    color: white !important;
  }
}

@media screen and (max-width: 855px) {
  .col-container {
    display: block;
  }

  .column {
    width: 100%;
  }

  nav .header .call-to-action {
    display: none;
  }
  .call-to-action-mobile {
    display: flex;
    align-self: right;
    align-items: center;
    padding: 10px;
    justify-content: flex-end;
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
  }

  .call-to-action-mobile p {
    text-align: right;
    padding-right: 15px;
  }
}