/* || General Styles */
a {
  color: #1f1b4d;
  font-weight: 600;
  text-decoration: none;
}

/*img {*/
/*  image-rendering: crisp-edges !important;*/
/*}*/

html,
body {
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  height: 100vh;
}

footer {
  margin-top: 1.5rem;
}

footer h5,
footer h1,
footer p {
  font-weight: 600;
}

footer a {
  text-decoration: none;
  color: #fff;
}

small{
  font-size: 12px;
}

summary {
  cursor: pointer;
  outline: none;
  font-weight: bold;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

textarea.comment-box {
  resize: none;
}

/* Style the details container */
details {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
}

/* Style the content inside the details */
details div {
  padding: 10px;
}

/* || Header and Main Navigation */
.dropdown-menu {
  margin-top: 0;
  background: #38318a;
  border-radius: 0;
}

.dropdown-item {
  color: #fff;
  font-weight: 600;
  text-align: center;
}

.dropdown-menu .dropdown-toggle::after {
  vertical-align: middle;
  border-left: 4px solid;
  border-bottom: 4px solid transparent;
  border-top: 4px solid transparent;
}

.dropdown-menu .dropdown .dropdown-menu {
  left: -18%;
  top: 100%;
  border-width: 0;
  padding: 0.1rem;
  border: 0.01px solid #ddd;
  border-top-left-radius: 0;
}

.dropdown-menu>li a:hover,
.dropdown-menu>li.show {
  background: #007bff;
  color: white;
}

.dropdown-menu>li.show>a {
  color: white;
}

.navbar {
  padding: 0px;
  border-bottom: 5px solid #28a745;
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  transition: transform 0.5s ease-in-out;
}

#navbar.hidden {
  transform: translateY(-100%) !important;
}

.navbar-color {
  background-color: #1f1b4d;
}

.navbar-color .navbar-toggler {
  color: #fff;
  border: none;
}

.navbar-color .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.small-logo {
  display: none;
}

.big-logo {
  width: auto;
  height: 75px;
  display: block;
  image-rendering: crisp-edges;
}

.navbar-brand {
  padding-left: 0.5rem;
  width: 75%;
}

.navbar-brand img {
  width: 100%;
}

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

nav input {
  height: 35px;
}

.nav-link {
  color: #fff;
  font-weight: 600;
}

.nav-link:active {
  color: #007bff;
}

.dropdown ul {
  padding: 0;
}

.dropdown-menu hr {
  margin: 0;
}

.dropdown-item {
  padding: 1rem;
}

.cu-pr {
  cursor: pointer;
}

.dropdown-menu>li:hover>.submenu {
  display: block;
}

.fa-bars {
  color: #fff;
  font-size: 32px;
}

.navbar-light ul {
  color: #fff;
}

.navbar button:focus {
  outline: 0;
  border: 0;
  box-shadow: none;
}

.fa-search {
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  background: #28a745;
  padding: 0.6rem;
}

nav form {
  width: 75%;
  padding-bottom: 0.5rem;
}

#bottom-nav {
  background: #1f1b4d;
  display: none;
  /* border-bottom: 5px solid #28a745; */
  padding-top: 0.5rem;
}

.hero {
  background: linear-gradient(to right,
          rgba(0, 0, 0, 0.8) 0%,
          rgba(0, 0, 0, 0.5) 60%,
          rgba(0, 0, 0, 0.3) 80%,
          rgba(0, 0, 0, 0.2) 100%), url('../img/bg/opd-hero.png');
  background-position: center 60%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-items: center;
  align-items: center;
  height: auto;
  color: white;
}

.hero-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-headings {
  position: relative;
  z-index: 10;
  color: #fff;
}

.hero-headings .logo{
    width: 170px;
    height: auto;
}

.hero-headings .social-icons i{
  font-size: 1.2rem;
  color: #fff;
  font-weight: 400;
  max-width: 950px;
  line-height: 2rem;

}

.hero-headings .social-icons > * + * {
  margin-left: 1.25rem;
}

.hero-intro {
  display: flex;
  margin-bottom: 1rem;
}

.hero-intro h1 {
  font-weight: bolder;
}

.hero #carouselCaptions .carousel-item {
  aspect-ratio: 1 / 1.41421;
  overflow: hidden;
  background-color: #000000;
}

.hero #carouselCaptions .carousel-item img {
  object-fit: contain;
  object-position: top;
}

.hero .carousel-caption{
  right: 0;
  left: 0;
  bottom: 0;
  padding: 1.5rem 1rem;
  background-color: rgba(0, 0, 0, 0.95);
  color: white;
}

/* || Utilities */

.spacing {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.fc .fc-toolbar>*>* {
  text-transform: capitalize !important;
}

.fc .fc-button-group>* {
  text-transform: capitalize !important;
}

.fc .fc-toolbar>*>* {
    text-transform: capitalize !important;
}

.fc .fc-button-group>* {
    text-transform: capitalize !important;
}

.c-gray {
  color: rgb(88, 88, 88);
}

.fw-500 {
  font-weight: 500;
}

.fw-600 {
  font-weight: 600;
}

.gold {
  color: #b8860b;
}

.w-90 {
  width: 90%;
}

.mb-20 {
  margin-bottom: 20px;
}

/* == PHOTO POSITION */
.position-0 {
  object-position: 0% 10%;
}

.position-1 {
  object-position: 10% 10%;
}

.position-2 {
  object-position: 20% 10%;
}

.position-3 {
  object-position: 30% 10%;
}

.position-4 {
  object-position: 40% 10%;
}

.position-5 {
  object-position: 50% 10%;
}

.position-6 {
  object-position: 60% 10%;
}

.position-7 {
  object-position: 70% 10%;
}

.position-8 {
  object-position: 80% 10%;
}

.position-9 {
  object-position: 90% 10%;
}

.position-10 {
  object-position: 100% 10%;
}

/* || Sitewide */
.opd-container {
  width: 100%;
  margin: 20px auto;
}

.carousel-inner {
  margin-top: 10px;
  width: 100%;
}

.headline .carousel-item {
  padding: 1rem;
}

.headline .carousel-item img {
  width: 75% !important;
  margin: 0 auto;
}

.headline .carousel-item p {
  text-align: center;
  padding: 0.75rem;
}

.carousel-card {
  height: 250px;
}

.carousel-inner .card-body {
  background-color: #f8f9fa;
  color: #000;
}

.carousel-inner .btn-primary {
  background-color: #1f1b4d;
  border: 1px solid;
}

.carousel-inner .btn-primary:hover {
  background-color: transparent;
  border: 1px solid #1f1b4d;
  color: #1f1b4d;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.comsusdev a {
  font-size: 1rem;
}

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

.sdg-row img {
  margin-bottom: 5px;
}

#back-to button {
  background: #1f1b4d;
  padding: 0.7rem;
}

#back-to a button {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

/* || Headline */
.headline hr {
  opacity: 0.25;
  color: #1f1b4d;
}

#visitor_counter li {
  list-style: none;
  font-weight: 600;
  font-size: 2rem;
}

#visitor_counter {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 0rem !important;
}

/*.navbar {*/
/*  position: sticky;*/
/*}*/

.headline .btn {
  font-weight: 600;
}

/* || Announcements */
.announcements-text {
  text-align: center;
  margin-bottom: 1rem;
}

.card-announcements .btn-primary {
  background-color: #1f1b4d;
  border: 1px solid;
  color: #fff;
  font-weight: 600;
}

.card-announcements .btn-primary:hover {
  background-color: transparent;
  border-color: #1f1b4d;
  color: #1f1b4d;
}

.opd-events-body .btn-primary {
  background-color: #1f1b4d;
  border: 1px solid;
  color: #fff;
  font-weight: 600;
}

.opd-events-body .btn-primary:hover {
  background-color: transparent;
  border-color: #1f1b4d;
  color: #1f1b4d;
}

.opd-events-body .btn-primary {
    background-color: #1f1b4d;
    border: 1px solid;
    color: #fff;
    font-weight: 600;
}

.opd-events-body .btn-primary:hover {
    background-color: transparent;
    border-color: #1f1b4d;
    color: #1f1b4d;
}


.blogpost-body .btn,
.job-announcement .btn {
  background-color: #1f1b4d;
  border: 1px solid;
  color: #fff;
  font-weight: 600;
}

.blogpost-body .btn:hover,
.job-announcement .btn:hover {
  background-color: transparent;
  border-color: #1f1b4d;
  color: #1f1b4d;
}

.page-nation .page-link {
  color: #1f1b4d;
}

.page-item.active .page-link {
  background-color: #1f1b4d;
  border: none;
}

/* || Upcoming Events */
.opd-events {
  width: 100%;
  margin: 0 auto;
}

.opd-events h1 {
  text-align: center;
  margin-bottom: 1rem;
  font-weight: bolder;
}

.opd-events-body {
  width: 100%;
  margin: 0 auto;
}

.opd-events-body .card {
  width: 75%;
  height: 250px;
  margin: 0 auto;
  text-align: center;
  border: 3px solid #1f1b4d;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.opd-events-body .card-body {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}

.opd-events-body .card-body h5 {
  font-weight: 600;
  margin: 0;
}

.opd-events-body .card-body h3 {
  font-size: 3rem;
  font-weight: 600;
  margin: 0;
}

.opd-events-body .card-body small {
  opacity: 0.5;
}

.opd-events-body .card-text {
  margin: 0;
}

.opd-events-body .card-text:nth-child(4) {
  margin-bottom: 1rem;
}

.opd-events-body .card:nth-child(1) {
  margin-bottom: 1rem;
}

/* ||Publications */
/* Pagination */
.pub-pagination {
  margin-bottom: 4rem;
}

.pub-pagination>.btn {
  border-radius: 2rem;
}

.pub-btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.275rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.pub-btn-next {
  color: #28a745;
  border-color: #28a745;
}

.pub-btn-prev {
  color: #1f1b4d;
  border-color: #1f1b4d;
}

/* || Newsletter */
.newsletter {
  width: 75%;
  margin: 0 auto;
  padding: 0.5rem;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.newsletter h2 {
  text-align: center;
}

.newsletter input {
  margin-bottom: 1rem;
  border: 3px solid #1f1b4d;
  border-radius: 7px;
}

.newsletter .btn {
  background: #1f1b4d;
  color: #fff;
  font-weight: 600;
  border-radius: 3px;
  border: 1px solid #1f1b4d;
}

#mc_embed_signup .btn:hover {
  background: #fff;
  color: #1f1b4d;
  border: 1px solid #1f1b4d;
  transition: 0.25s ease;
}

.form-check label {
  font-weight: 600;
}

label {
  font-weight: 600;
}

.newsletter p {
  text-align: center;
}

/* || Contact Us */
.contact-form button {
  margin-top: 20px;
  background-color: #1f1b4d;
  border: 1px solid;
  color: #fff;
}

.contact-form button:hover {
  background-color: transparent;
  border-color: #1f1b4d;
  color: #1f1b4d;
}

.contact-form button {
  font-weight: 600;
}

.contact-form textarea {
  resize: none;
}

.contact-form .form-control:focus {
  color: #212529;
  background-color: #fff;
  border-color: #1f1b4d;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(31, 27, 77, 0.25);
}

.contact-form {
  width: 100%;
  margin: 1rem auto;
}

.contact-right {
  width: 100%;
  margin: 1rem auto;
  text-align: center;
}

.contact-form h1 {
  margin-bottom: 1rem;
}

.contact-info {
  margin-top: 50px;
  text-align: center;
}

.contact-mf {
  margin-top: 2rem;
}

.contact-mf-header {
  display: flex;
  margin-top: 1.5rem;
  align-items: center;
  justify-content: center;
}

.contact-mf-header i {
  font-size: 1.25rem;
  padding-top: 0.2rem;
}

.contact-mf-header h4 {
  margin-left: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.contact-mf p {
  margin-top: 0.5rem;
}

.info-title {
  font-weight: 500;
}

/* || Mailchimp */
.listserv {
  width: 100%;
  margin: 1rem auto 0rem auto;
}

.listserv .list-group {
  width: 75%;
}

.listserv .list-group-item {
  background: #fff;
  border: 0.01px solid #ddd;
}

.listserv h5 {
  font-size: 0.95rem;
}

.fa-map-marker-alt,
.fa-phone,
.fa-envelope {
  color: #1f1b4d;
}

/* || Planning Process page */
.planning-process {
  width: 100%;
  margin: 1rem auto;
}

.planning-process h1 {
  margin-bottom: 1rem;
  text-align: center;
}

.planning-process .pp-body {
  width: 100%;
  margin: 0 auto;
}

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

/* || Current Projects page */
.current-projects {
  width: 100%;
  margin: 20px auto;
  text-align: center;
}

.current-projects .card {
  width: 100%;
  height: auto;
  border: none;
  box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.05);
}

.currentprojects-body img {
  width: 100%;
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.current-projects h1,
.current-projects h5,
.current-projects p,
.current-projects ul {
  text-align: left;
}

.current-projects h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  text-align: center;
}

.current-projects h3 {
  font-size: 1.25rem;
}

.projects {
  margin-bottom: 1rem;
}

.projects-body img {
  width: 100%;
}

/* || Comsusdev page */
.comsusdev {
  width: 100%;
  margin: 20px auto;
}

.csd-text {
  margin-bottom: 20px;
}

.comsusdev h1 {
  font-weight: 600;
}

.csd-info {
  font-size: 1rem;
}

.csd-info a {
  text-decoration: none;
}

/* || Garapan Revitalization page */
.gar-rev {
  width: 100%;
  margin: 20px auto;
}

.garrev-text {
  margin-bottom: 20px;
}

.garrev-info {
  font-size: 1rem;
}

.gar-rev img {
  width: 100%;
  height: 100%;
}

/* || Recovery Support page */
.rec-supp {
  width: 100%;
  margin: 20px auto;
}

.recsupp-text {
  margin-bottom: 20px;
}

.rec-supp img {
  width: 100%;
  height: 100%;
}

/* || Comprehensive Sustainable Development Plan page */
.csd-plan {
  width: 100%;
  margin: 20px auto;
}

.csd-title,
.csd-subtitle {
  margin-bottom: 20px;
}

.csd-plan .text {
  margin-bottom: 10px;
  font-size: 1rem;
}

.csd-plan li {
  margin-bottom: 5px;
  font-size: 1rem;
}

.csd-plan a {
  font-size: 1rem;
}

/* || Public Comment page */
.public-comment {
  width: 100%;
  margin: 20px auto;
}

.pc-title,
.pc-subtitle {
  margin-bottom: 20px;
}

.public-comment .text {
  margin-bottom: 10px;
  font-size: 1rem;
}

.public-comment a {
  font-size: 1rem;
}

.public-comment li {
  margin-bottom: 5px;
  font-size: 1rem;
}

.btn {
  background: #1f1b4d;
}

/* || Sustainability Tracking with The SDGs page */
.susdev-goal {
  width: 100%;
  margin: 20px auto;
}

.susdevgoal {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.susdevgoal #sdg-title {
  padding: 20px 10px;
}

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

.sdg-title {
  margin-bottom: 20px;
}

.susdev-goal .row {
  text-align: center;
}

.susdevgoal-img img {
  width: 150px;
  margin-bottom: 1rem;
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.2);
}

.susdevgoal-img #sdg-title img {
  width: 80%;
  margin-bottom: 1rem;
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.2);
}

/* || General Styles 2 */

#myBtn {
  display: block;
  position: fixed;
  height: 50px;
  width: 50px;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  font-size: 20px;
  opacity: 0.8;
  border: none;
  outline: none;
  /* background-color: #304d1b; */
  background-color: #28a745;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  border-radius: 5px;
  scroll-behavior: smooth;
}

#myBtn:hover,
#returnHome:hover {
  background-color: #28a745;
}

.searchBtn {
  background: none;
}

.fa-home {
  font-size: 1.5rem;
  color: #fff;
}

.about-us,
.mission-mandates,
.fn-duties,
.milestones,
.final-draft,
.draft-visioning,
.rec-og,
.employment,
.job-announcement,
.latest-reminder {
  width: 100%;
  margin: 20px auto;
}

.planning-process h3 {
  color: #b8860b;
  font-weight: bold;
}

.mission-mandates h1,
.fn-duties h1,
.milestones h1,
.final-draft h1,
.draft-visioning h1,
.rec-og h1,
.employment h3,
.employment h1,
.job-announcement h1,
.latest-reminder h1,
.rec-supp h1,
.gar-rev h1,
.contact-form h1,
.public-comment h1,
.pc-subtitle,
.headline h5,
.announcements h5,
.csd-plan h1,
.csd-plan h2,
.current-projects h3,
.contact-mf h3,
.current-projects h5,
.pp-body h3,
#aboutus h1,
.current-projects h1,
.contact-form h1,
.planning-process h1,
.contact-right h3,
.newsletter h2 {
  font-weight: 600;
}

#aboutus p,
#aboutus li,
#aboutus a,
.mission-mandates p,
.mission-mandates li,
.fn-duties p,
.fn-duties li,
.fn-duties a,
.milestones p,
.final-draft p,
.final-draft li,
.final-draft a,
.final-draft ol,
.draft-visioning p,
.draft-visioning li,
.draft-visioning a,
.rec-og li,
.employment p,
.employment li,
.employment a,
.job-announcement p,
.job-announcement li,
.job-announcement a,
.latest-reminder p,
.latest-reminder li,
.latest-reminder a,
.csd-info p,
.csd-info a,
.rec-supp p,
.rec-supp li,
.rec-supp a,
.gar-rev p,
.gar-rev a,
.public-comment p,
.public-comment a,
.csd-plan p,
.csd-plan a,
.current-projects p,
.current-projects a,
.current-projects li,
.planning-process p,
.contact-right p,
.contact-right a,
.susdev-goal p {
  font-size: 1rem;
}

#aboutus a,
.fn-duties a,
.final-draft a,
.draft-visioning a,
.employment a,
.job-announcement a,
.latest-reminder a,
.csd-info a,
.rec-supp a,
.gar-rev a,
.contact-info a,
.public-comment a,
.csd-plan a,
.current-projects a,
.contact-right a,
.bpiq a,
.geospatial-data a,
#bids a {
  text-decoration: none;
  color: #1f1b4d;
  font-weight: 600;
}

#aboutus li,
.mission-mandates li,
.fn-duties li,
.final-draft li,
.draft-visioning li,
.rec-og li,
.job-announcement li,
.employment li,
.latest-reminder li {
  margin-bottom: 1rem;
}

.aboutus {
  margin-top: 20px;
}

.contact-form button {
  background: #1f1b4d;
  padding: 0.7rem;
  width: 25%;
  margin-top: 1rem;
}

.contact-form button a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.mission-mandates p:nth-child(3) {
  font-style: italic;
  font-weight: 600;
}

.italicize {
  font-style: italic;
}

.fn-duties ul {
  list-style: none;
  margin-left: -2rem;
  margin-top: 1rem;
}

.fn-duties h3,
.final-draft h3,
.job-announcement h3,
.employment h3,
.latest-reminder h3 {
  font-weight: 600;
}

.employment h3 {
  margin: 1rem auto 0.5rem auto;
}

.milestones img,
.final-draft img {
  width: 100%;
}

.milestones img {
  margin-bottom: 1rem;
}

.final-draft img {
  margin-bottom: 1rem;
}

.draft-visioning h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1rem;
}

.draft-visioning img {
  width: 200px;
  margin: 0 auto;
}

.draft-visioning img {
  display: flex;
}

.latest-reminder img {
  margin-top: 1rem;
  width: 100%;
}

.list-serv {
  width: 100%;
  margin: 2rem auto;
}

.list-serv h1,
.list-serv p {
  text-align: center;
}

.welcome {
  width: 100%;
  margin: 2rem auto;
}

.welcome-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-img img {
  width: 40%;
  margin: 0 0.5rem;
}

.welcome-img .gov-logo {
  display: none;
}

.welcome-txt {
  margin-top: 1rem;
}

.welcome-txt h1 {
  text-align: center;
}

.footer-top img:hover {
  cursor: pointer;
}

.main-footer {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.copyright-bg {
  background-color: #1f1b4d;
  color: #fff;
}

.footer-links {
  padding: 5px;
}

.footer-style {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.footer-style h1 {
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
}

.footer-style p {
  font-weight: 600;
  font-size: 2rem;
}

.socials i {
  padding: 0rem 0.5rem 0rem 0.5rem;
}

#page-container {
  position: relative;
  min-height: 50vh;
}

#content-wrap {
  padding-bottom: 0.075rem;
}

#page-container-eo {
  position: relative;
  min-height: 65vh;
}

#content-wrap-eo {
  padding-bottom: 2.5rem;
}

.new-csdp h3 {
  color: #b8860b;
  font-weight: 700;
}

.gold,
.latest-reminder .gold {
  color: #b8860b;
  font-weight: 700;
}

.new-csdp img {
  width: 100%;
}

.launch-csdp {
  background: #1f1b4d;
  border: 5px solid #1f1b4d;
  padding: 1.5rem;
  text-align: center;
  margin: 1rem auto;
  color: #fff;
  font-size: 1.25rem;
}

.launch-csdp:hover {
  background: #28a745;
  border: 5px solid #28a745;
  padding: 1.5rem;
  text-align: center;
  margin: 1rem auto;
  color: #fff;
  font-size: 1.25rem;
  transition: 0.5s ease-in-out;
}

.slide-in-body .carousel-control-prev {
  opacity: 1 !important;
  display: none;
}

.slide-in-body .carousel-control-next {
  opacity: 1 !important;
  display: none;
}

#slide-item {
  min-height: 50vh;
}

#slide-item-one {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)),
    url("../../library/cover-art/2020-2031-csdp-final.png");
  background-size: cover;
  background-position: center;
  background-blend-mode: darken;
}

#slide-item-two {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)),
    url("../../assets/img/community-engagement-portals.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: darken;
}

#slide-item-three {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)),
    url("../../assets/img/opdcedscoverv2.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: darken;
}

#slide-item-four {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)),
    url("../../assets/img/opdcedscover.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: darken;
}

#slide-item-one p {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 600;
  text-align: center;
}

#slide-item-two p {
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 1rem;
}

#slide-item-two a {
  color: #fff;
  text-decoration: underline;
}

#slide-item-three p {
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 1rem;
}

#slide-item-three a {
  color: #fff;
  text-decoration: underline;
}

#slide-item-four p {
  color: #fff;
  font-weight: 600;
  text-align: center;
  padding: 1rem;
}

#slide-item-four a {
  color: #fff;
  text-decoration: underline;
}

#slide-flex {
  text-align: center;
}

#slide-flex .btn {
  border: none;
  padding: 0.6rem 1.5rem;
  background-color: #1f1b4d;
  color: #fff;
  font-weight: 600;
}

#slide-flex .btn:hover {
  background-color: #fff;
  color: #1f1b4d;
  transition: 0.5s ease-in-out;
}

#viewPreviousPosts .btn {
  border: 1px solid #1f1b4d;
  padding: 0.6rem 1.5rem;
  background-color: #1f1b4d;
  color: #fff;
  font-weight: 600;
}

#viewPreviousPosts .btn:hover {
  border: 1px solid #1f1b4d;
  background-color: #fff;
  color: #1f1b4d;
  transition: 0.25s ease-in-out;
}

.blogpost-body .card {
  border-radius: 0px !important;
}

.blog-posts select {
  width: 50%;
  margin-top: 1rem;
}

.page-404-body h3,
.page-404-body p {
  text-align: center;
}

.page-404-body form p {
  text-align: left;
}

.page-404-body form button {
  border: 1px solid #1f1b4d;
  font-weight: 600;
}

.page-404-body form button:hover {
  border: 1px solid #1f1b4d;
  background: #fff;
  color: #1f1b4d;
  transition: 0.25s ease-in-out;
}

#locationOne,
#locationTwo {
  margin-top: 1rem;
}

#opdLocations {
  width: 100%;
  margin: 0px !important;
}

#opdLocations h5,
#opdLocations p {
  text-align: center;
}

.mobile-padding {
    margin-right: 14px;
  }

/* || DATA-LIBRARY*/
.agency-height,
.partner-height {
  height: 110px;
}

.agency-group-item {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  color: #212529;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.pub-archive h3,
#aboutus h3 {
  color: #b8860b;
  font-weight: bold;
}

.archive-cover img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* || Banner */
section.banner-sub {
  position: relative;
  text-align: center;
  margin-bottom: 30px;
}

section .backgrnd-img {
  /*    min-height: 240px;*/
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

section .backgrnd-img:before {
  content: " ";
  /*    background-color: rgba(255, 255, 255, .4);
    */
  position: absolute;
  height: 240px;
  width: 100%;
  display: block;
}

/* || Gallery CSS */
.gallery-box {
  width: 100%;
  height: 100%;
  max-height: 425px;
  overflow: hidden;
  padding: 20px 0;
}

.gallery-middle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  max-height: 383px;
}

.gallery-text {
  width: 50%;
  word-wrap: normal;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.gallery-text-container {
  max-width: 581px;
  padding: 0px 25px;
  flex-wrap: wrap;
}

.gallery-picture {
  width: 25%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  height: 100%;
  max-height: 425px;
  flex-grow: 1;
}

.gallery-img {
  position: relative;
  height: 100%;
  max-height: 425px;
}

.gallery-verbiage {
  margin-top: 10px;
  padding: 0px;
  flex-wrap: wrap;
}

.gallery-verbiage>p {
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: left;
  color: #0f3d70;
}

.gallery-text-button {
  width: 130px;
  height: 40px;
  min-width: 130px;
  margin: 10px 0px;
  border: none;
  border-radius: 6px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  background-color: #0667ba;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.49;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}

.gallery-buttons {
  display: flex;
  width: 100%;
  object-fit: contain;
}

.gallery-text-button:hover {
  color: #ffffff;
}

/*
.cropped {
    width: 100%;
    height: 465px;
    object-fit: cover;
}
*/

#data-library-btn .btn-primary {
  background-color: #1f1b4d;
  border: 1px solid;
  color: #fff;
}

#data-library-btn .btn-primary:hover {
  background-color: transparent;
  border-color: #1f1b4d;
  color: #1f1b4d;
}

#gallery-card div div img,
#gallery-card-2 div div img,
#gallery-card-3 div div img {
  height: 450px;
  width: 100%;
  object-fit: cover;
}

#gallery-card {
  min-height: 684px;
}

#gallery-card-2 {
  min-height: 620px;
}

#gallery-card-3 {
  min-height: 725px;
}

/* || About Us*/
#aboutus,
#aboutus p {
  font-size: 1rem;
}

#aboutus li {
  font-size: 1rem;
  margin-bottom: 1rem;
}

#aboutus a {
  font-size: 1rem;
  color: #1f1b4d;
  text-decoration: none;
  font-weight: 650;
}

#pl20 h3 {
  padding: 10px;
}

/* || Search Results*/

#searchResult span {
  font-size: 0.65rem;
  padding-left: 5px;
}

#searchResult p {
  padding-top: 5px;
  font-size: 14px;
}

#searchResult {
  background-color: #f8f9fa;
  padding: 15px;
  border: 1px solid #dee2e6;
}

/* || Directory*/
#directorySearch {
  display: none;
}

#directorySearch thead {
  background-color: #1f1b4d;
  color: #fff;
  text-align: center;
}

#directorySearch,
#directorySearch a {
  font-size: 0.8rem;
}

#directorySearch a {
  text-decoration: underline;
  color: #3768c2;
}

.dir-fssm {
  font-size: 0.7rem;
}

#directorySearch td:nth-child(4),
#directorySearch td:nth-child(5) {
  white-space: nowrap;
}

#directorySearch td:nth-child(3) {
  text-align: center;
}

#opd-carousel img {
  object-fit: cover;
  min-height: 400px;
  height: 400px;
  width: auto;
}

#opd-carousel a {
  /*    color: #fff;*/
  text-decoration: underline;
}

.opd-caption {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 90%;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
  /*    background-color: #6c757d !important;*/
  /*    color: #fff;*/
  min-height: 170px;
}

#opd-carousel {
  min-height: 550px;
}

.carousel-indicators {
  opacity: 0.9;
}

#calendarDisplay .fc-right {
  float: left !important;
  margin: 1rem 0px;
}

.fema-mitigation img {
  width: 100%;
}

.fema-blog-index img {
  height: 250px;
}

.ssg-cp img {
  display: block !important;
  margin: auto;
}

/* || MEDIA QUERIES*/
@media (min-width: 320px) and (max-width: 480px) and (orientation: portrait) {
  .dropdown-menu .dropdown .dropdown-menu {
    top: 100%;
    border-width: 0;
  }

  nav {
    width: 100% !important;
  }

  nav form {
    width: 75%;
    margin: 0 auto;
    padding-bottom: 0.5rem;
  }

  .project-image {
    height: auto;
    width: 350px !important;
  }

  .stack-photo {
    flex-direction: column;
  }

  .mobile-padding {
    margin-right: 0;
  }

  /*header {*/
  /*  margin-bottom: 40px;*/
  /*}*/

  .hero-content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .hero-intro img {
    display: none;
  }

  .hero p {
    font-size: small;
  }

  
}

/* large phones styles */
@media screen and (min-width: 420px) {
  /*header {*/
  /*  padding-bottom: 5.5rem;*/
  /*}*/

  .contact-form {
    margin: 30px auto;
  }

  .contact-info {
    margin-top: 30px;
  }

  .csd-plan {
    width: 100%;
  }

  .csd-info {
    margin-bottom: 22px;
  }

  .public-comment {
    width: 100%;
  }

  .susdevgoal-img img {
    width: 150px;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .susdevgoal-img #sdg-title img {
    /*        width: 100%;*/
    width: 95%;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .carousel-body {
    height: 105px;
    padding: 5px 10px;
  }

  .ssg-title {
    padding-top: 10px;
  }

  iframe {
    width: 75%;
  }
}

@media screen and (min-width: 421px) {
  #calendarDisplay .fc-right {
    float: right !important;
    margin: 0px !important;
  }
}

/* small tablet styles */
@media screen and (min-width: 620px) {
  /*header {*/
  /*  padding-bottom: 8rem;*/
  /*}*/

  nav {
    width: 100% !important;
  }

  .big-logo {
    width: 500px;
    height: auto;
    display: block;
    image-rendering: crisp-edges;
  }

  .headline .carousel-item img {
    width: 50% !important;
    margin: 0 auto;
  }

  .cardan-last {
    height: 23.5rem;
  }

  .cardan-last .btn {
    margin-top: 2.875rem;
  }

  .navbar form {
    width: 50%;
    margin: 0 auto;
  }

  .ssg-title {
    padding-top: 0;
  }

  .access-links {
    width: 75%;
  }

  .opd-events-body .card {
    width: 50%;
  }

  .listserv .list-group input {
    width: 1rem;
  }

  .cardan-last {
    height: 19rem;
  }

  .cardan-last .btn {
    margin-top: 0;
  }

  .newsletter {
    width: 60%;
  }

  .list-group-item {
    padding: 0.75rem;
  }

  .contact-form {
    width: 100%;
    margin: 20px auto;
  }

  .contact-form input,
  textarea {
    width: 100%;
  }

  .contact-form .btn-primary {
    padding: 5px 10px;
    width: 25%;
  }

  .contact-info {
    width: 100%;
  }

  .csd-info {
    margin-bottom: 216px;
  }

  object {
    height: 500px;
  }

  .csd-plan {
    width: 100%;
  }

  .public-comment {
    width: 100%;
  }

  .comsusdev {
    width: 100%;
  }

  .susdevgoal-img img {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .susdevgoal-img #sdg-title img {
    width: 95%;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .carousel-body {
    height: 110px;
    padding: 10px 10px;
  }

  .links-group {
    margin-top: 10px;
  }

  .carousel-inner {
    width: 100%;
  }

}

@media screen and (min-width: 767px) {
  nav {
    width: 100% !important;
  }

  /*header {*/
  /*  padding-bottom: 7rem;*/
  /*}*/

  .headline .carousel-item img {
    width: 40% !important;
    margin: 0 auto;
  }

  .navbar-brand {
    width: 50%;
  }

  .fema-mitigation img {
    width: 75%;
  }

  .currentprojects-body .card {
    width: 100% !important;
  }

  .bg-img-1 {
    background-image: url("../img//opd-agency-meetings/opd-mtg-4.jpeg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-2 {
    background-image: url("../img/garapandetail.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-3 {
    background-image: url("../img/dqsxykuwkaukxn9_yutu-1024x720.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-4 {
    background-image: url("../img/opdcedscover.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-5 {
    background-image: url("../img/rfp.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-6 {
    background-image: url("../img/rfpv2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-7 {
    background-image: url("../img/sustainability-768x692.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* .bg-img-8 {
    background-image: url("../img/cnmi_broadband_web_image.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  } */

  .susdevgoal-img img {
    width: 175px;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .susdevgoal-img #sdg-title img {
    width: 95%;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .blogpost-body .col-md-4 {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .archive-cover div a img {
    /* Responsive layout for individual agency/partner page - Zoom on archive publication imgs */
    flex: 100%;
    width: 100%;
  }
}

@media (max-width: 800px) {
  .archive-cover div a img {
    /* Responsive layout for individual agency/partner page - makes a two column-layout instead of four columns */
    flex: 50%;
    width: 100%;
  }
}

@media (max-width: 991px) {
  .hero-content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .hero-intro img {
    display: none;
  }

  .hero p {
    font-size: small;
  }
}

/* large tablets & laptop styles */
@media screen and (min-width: 992px) {
  /* header {
    padding-bottom: 12rem;
  } */

  .navbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
  }

  .navbar-brand {
    width: 50%;
  }

  .navbar form {
    width: 25%;
  }

  .headline .carousel-item p {
    width: 75%;
    margin: 1rem auto 2rem auto;
  }

  .headline .carousel-item img {
    width: 35% !important;
    margin: 0 auto;
  }

  .nav-link {
    font-size: 0.75rem;
  }

  .opd-events {
    width: 100%;
  }

  .opd-events-body .card {
    width: 40%;
  }

  .links-group {
    margin-top: 10px;
  }

  /* .currentprojects-body img {
    display: none;
  } */

  .bg-img-1 {
    background-image: url("../img//opd-agency-meetings/opd-mtg-4.jpeg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-2 {
    background-image: url("../img/garapandetail.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-3 {
    background-image: url("../img/dqsxykuwkaukxn9_yutu-1024x720.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-4 {
    background-image: url("../img/opdcedscover.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-5 {
    background-image: url("../img/rfp.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-6 {
    background-image: url("../img/rfpv2.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-7 {
    background-image: url("../img/sustainability-768x692.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-8 {
    background-image: url("../img/blog-thumbnail-cnmi-broadband-project.jpeg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-9 {
    background-image: url("../img/ssg-img-09122022.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .bg-img-10 {
    background-image: url("../img/sustainable-consumption-and-production-thumbnail.png");
    background-position: bottom 82% left 0%;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .opd-events-body .card {
    width: 100%;
  }

  .susdevgoal-img img {
    width: 10%;
  }

  .susdevgoal-img #sdg-title img {
    width: 95%;
  }

  .list-group-item {
    padding: 0.75rem;
  }

  .list-group-item a {
    font-size: 1rem;
  }

  .listserv .list-group {
    width: 100%;
  }

  .newsletter {
    width: 50%;
  }

  .cardan-last {
    height: 14.2rem;
  }

  .cardan-last .cardan-text {
    font-size: 0.8rem;
  }

  .contact-form {
    width: 100%;
    margin: 20px auto;
  }

  .contact-form .btn-primary {
    width: 25%;
  }

  #locationTwo p {
    margin-bottom: 2.5rem;
  }

  .contact-form input,
  textarea {
    width: 100%;
  }

  object {
    height: 600px;
  }

  .planning-process {
    width: 100%;
  }

  .planning-process .card-text {
    font-size: 1rem;
  }

  .recsupp-info,
  ul {
    font-size: 1.2rem;
  }

  .comsusdev {
    width: 100%;
    margin: 20px auto;
  }

  .latest-reminder img {
    width: 65%;
  }

  .csd-info {
    margin-bottom: 150px;
    font-size: 1.2rem;
  }

  .csd-info a {
    font-size: 1.2rem;
  }

  .rec-supp img {
    width: 75%;
    margin: 10px 87px;
  }

  .csd-plan {
    width: 100%;
  }

  .public-comment {
    width: 100%;
  }

  .about-us,
  .mission-mandates {
    width: 100%;
  }

  .about-us p,
  .about-us li,
  .about-us a,
  .mission-mandates p,
  .mission-mandates li {
    font-size: 1rem;
  }

  .navbar ul {
    margin-left: 0 !important;
  }

  .navbar-collapse {
    justify-content: space-between;
  }

  #bottom-nav {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #bottom-nav .col-lg-6:nth-child(2) {
    margin: auto 0;
  }

  #bottom-nav img {
    width: 450px;
  }

  #bottom-nav .col-lg-6:nth-child(2) form {
    max-width: 50%;
    margin: 0 auto;
  }

  #new-csdp-float {
    float: right;
    width: 50%;
  }

  .new-csdp img {
    width: 50%;
  }

  #slide-flex {
    font-size: 1.25rem;
    padding: 6rem;
  }

  .fa-chevron-left,
  .fa-chevron-right {
    font-weight: 600;
    font-size: 1.5rem;
  }

  #slide-flex a {
    font-size: 1.25rem;
  }

  .slide-in-body .carousel-control-prev {
    opacity: 1 !important;
    display: block;
  }

  .slide-in-body .carousel-control-next {
    opacity: 1 !important;
    display: block;
  }

  .rehab-img,
  .climate-change-img {
    float: right;
  }

  .rehab-img img,
  .climate-change-img img {
    width: 100% !important;
  }

  .blog-posts select {
    max-width: 15%;
    height: 10%;
    float: right;
    margin-top: auto;
    margin-bottom: auto;
  }

  .blogpost-body .col-md-4 {
    width: 33% !important;
  }

  .blogpost-body .col-md-4 img {
    height: 100% !important;
  }

  .page-404-body form p {
    text-align: left;
  }

  .page-404-body form {
    width: 85%;
    margin: 0 auto;
  }

  #watershed img {
    width: 50%;
  }

  .carousel-item h5,
  p {
    font-size: 0.95rem;
  }

  .ssg-title {
    padding-top: 0;
  }

  .carousel-indicators {
    display: block;
    text-align: center;
  }

  .carousel-indicators [data-bs-target] {
    background-color: #1f1b4d;
  }

  #filterEvent {
    width: 25%;
  }

  .blog-image {
    height: auto;
    width: 800px !important;
  }

  .project-image {
    height: auto;
    width: 740px !important;
  }

  .hero-intro {
    display: block;
  }
  
  .hero-headings .logo{
    width: 90px;
    height: 90px;
    float: left;
  }
}

/* large laptop styles */
@media screen and (min-width: 1024px) {
  /* header {
    padding-bottom: 13.5rem;
  } */

  .hero {
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.5) 40%,
            rgba(0, 0, 0, 0.3) 60%,
            rgba(0, 0, 0, 0) 100%), url('../img/bg/opd-hero.png');
    background-position: center 60%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-items: center;
    align-items: center;
    height: auto;
    color: white;
  }
  
  .hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .hero-headings {
    position: relative;
    z-index: 10;
    color: #fff;
  }
  
  .hero-headings .logo{
    width: 170px;
    height: auto;
  }
  
  .hero-headings .social-icons i{
    font-size: 1.2rem;
    color: #fff;
    font-weight: 400;
    max-width: 950px;
    line-height: 2rem;
  
  }
  
  .hero-headings .social-icons > * + * {
    margin-left: 1.25rem;
  }
  
  .hero-intro {
    display: flex;
  }
  
  .hero #carouselCaptions .carousel-item {
    aspect-ratio: 1 / 1.41421;
    overflow: hidden;
    background-color: #000000;
  }
  
  .hero #carouselCaptions .carousel-item img {
    object-fit: contain;
    object-position: top;
  }
  
  .hero .carousel-caption{
    right: 0;
    left: 0;
    bottom: 0;
    padding: 1.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.95);
  }

  /* nav {
    display: flex;
    flex-wrap: wrap !important;
  } */

  .small-logo {
    display: block;
    width: 64px;
  }

  .big-logo {
    display: none;
  }

  .headline {
    width: 75%;
    margin: 0 auto;
  }

  .rec-og {
    width: 75%;
  }

  .opd-events {
    width: 100%;
  }

  .opd-events-body .card {
    width: 100%;
  }

  .draft-visioning img {
    display: flex;
    width: 400px;
  }

  .df-row img {
    width: 20%;
  }

  .listserv .list-group {
    width: 100%;
    text-align: left;
  }

  .middle-row {
    margin: 2rem auto;
  }

  .middle-row .right-img img {
    width: 200px;
    margin-top: -2rem;
  }

  .draft-visioning .bottom-img img {
    width: 500px;
    margin-bottom: 1rem;
  }

  .list-group-item {
    width: 85%;
    margin: 0 auto;
    padding: 10px;
  }

  .listserv .list-group-item {
    margin: 0;
  }

  .welcome-img img {
    width: 30%;
  }

  .welcome-img .gov-logo {
    display: block;
    width: 15%;
  }

  .nav-link {
    font-size: 0.7rem;
  }

  .navbar form {
    width: 25%;
    margin: 0.5rem 0.275rem 0.5rem 0;
    padding-top: 0.5rem;
  }

  .navbar input {
    padding-top: 0.25;
    padding-bottom: 0.25;
    margin-left: 0.5rem;
    margin-right: 0rem !important;
  }

  .dropdown-item {
    font-size: 1rem;
    text-align: left;
  }

  .fa-search {
    font-size: 1rem;
  }

  .contact-form {
    margin-bottom: 20px;
  }

  #locationTwo p {
    margin-bottom: 2.5rem;
  }

  .cardan-last {
    height: 14.175rem;
  }

  .cardan-last .btn {
    margin-top: 1.2rem;
  }

  .cardan-last .cardan-text {
    font-size: 0.9rem;
  }

  .susdevgoal-img img {
    width: 125px;
  }

  .susdevgoal-img #sdg-title img {
    /*        width: 100%;*/
    width: 95%;
  }

  footer h5 {
    font-size: 1rem;
  }

  footer ul,
  a {
    font-size: 1rem;
  }

  .footer-top {
    padding: 1rem;
  }

  .social-media {
    padding-top: 1rem;
  }

  .planning-process {
    width: 75%;
  }

  .latest-reminder img {
    width: 50%;
  }

  .planning-process .card-title {
    font-size: 1.6rem;
  }

  .planning-process .card-text {
    font-size: 1.1rem;
  }

  .contact-form {
    width: 100%;
  }

  .comsusdev {
    margin-bottom: 464px;
  }

  .csd-info {
    font-size: 1rem;
  }

  .csd-info a {
    font-size: 1rem;
  }

  .gar-rev {
    width: 100%;
  }

  .gar-rev img {
    width: 75%;
    margin: 10px 118px;
  }

  .garrev-info {
    font-size: 1rem;
  }

  .rec-supp {
    width: 75%;
    margin: 20px auto;
  }

  .rec-supp img {
    width: 100%;
    margin: 0 auto;
  }

  .csd-plan {
    width: 100%;
  }

  .public-comment {
    width: 100%;
  }

  .susdev-goal {
    width: 100%;
  }

  .susdev-goal .sdg-row {
    text-align: center;
    margin-bottom: 5px;
  }

  .susdev-goal .text {
    font-size: 1rem;
  }

  .milestones,
  .final-draft,
  .job-announcement,
  .employment {
    width: 100%;
  }

  .final-draft ol {
    margin-top: 5rem;
  }

  #slide-flex {
    font-size: 1.35rem;
    padding: 6rem;
  }

  #slide-flex a {
    font-size: 1.35rem;
  }

  .current-projects {
    width: 100%;
  }

  .fema-blog-index img {
    height: 250px;
  }

  .hero-intro {
    display: block;
  }
  
  .hero-headings .logo{
    width: 90px;
    height: 90px;
    float: left;
  }
}

/* large desktop styles */
@media screen and (min-width: 1200px) {
  /* header {
    padding-bottom: 14rem;
  } */

  .headline .carousel-item p {
    width: 100%;
    margin: 1rem auto 2rem auto;
  }

  .headline .carousel-item img {
    width: 45% !important;
    margin: 0 auto;
  }

  .navbar-brand {
    width: 50%;
  }

  .small-logo {
    display: none;
  }

  .big-logo {
    display: block;
    width: 300px;
  }

  .headline {
    width: 60%;
    margin: 0 auto;
  }

  .contact-form button {
    width: 20%;
  }

  #locationTwo p {
    margin-bottom: 1rem;
  }

  .opd-events {
    width: 75%;
  }

  .opd-events-body .card {
    width: 100%;
  }

  .rec-og {
    width: 75%;
  }

  .links-group {
    margin-top: 10px;
  }

  .list-group-item {
    width: 75%;
    padding: 10px;
  }

  .welcome-img img {
    width: 25%;
  }

  .welcome-img .gov-logo {
    display: block;
    width: 15%;
  }

  .nav-link {
    font-size: 0.9rem;
  }

  .listserv .list-group-item {
    width: 75%;
  }

  .current-projects {
    width: 100%;
  }

  .current-projects h1,
  .about-us h1 {
    font-size: 2.5rem;
  }

  footer h5 {
    font-size: 1rem;
  }

  footer ul,
  a {
    font-size: 1rem;
  }

  .contact-form {
    width: 100%;
  }

  .navbar form {
    width: 25%;
    height: 100%;
  }

  .nav-link {
    font-size: 0.9rem;
  }

  .list-group-item a {
    font-size: 1rem;
  }

  .announcements {
    width: 100%;
  }

  .newsletter {
    width: 50%;
  }

  .cardan-last .btn {
    margin-top: 0;
  }

  .cardan-last {
    height: 12.65rem;
  }

  .contact-form {
    margin: 30px auto;
  }

  .planning-process {
    width: 75%;
  }

  .planning-process .card-title {
    font-size: 1.8rem;
  }

  .planning-process .card-text {
    font-size: 1.2rem;
  }

  .proj-title {
    font-size: 1.5rem;
  }

  .projects-body img {
    width: 60%;
  }

  .comsusdev {
    margin-bottom: 428px;
  }

  .csd-info {
    font-size: 1.2rem;
  }

  .csd-info a {
    font-size: 1.2rem;
  }

  .gar-rev {
    width: 100%;
  }

  .garrev-info {
    font-size: 1.2rem;
  }

  .gar-rev img {
    width: 75%;
    margin: 10px 140px;
  }

  .rec-supp {
    width: 75%;
  }

  .rec-supp img {
    width: 500px;
    margin: 0 auto;
  }

  .csd-plan {
    width: 100%;
  }

  .public-comment {
    width: 100%;
  }

  .susdev-goal {
    width: 100%;
  }

  .susdev-goal .text {
    font-size: 1rem;
  }

  .latest-reminder img {
    width: 50%;
  }

  .about-us,
  .mission-mandates,
  .fn-duties,
  .milestones,
  .final-draft,
  .job-announcement,
  .employment,
  .latest-reminder {
    width: 75%;
  }

  .final-draft img {
    width: 300px;
  }

  .fa-chevron-left {
    margin-right: 5rem !important;
  }

  .fa-chevron-right {
    margin-left: 5rem !important;
  }

  #slide-flex {
    padding: 10rem;
  }

  .page-404-body form {
    width: 75%;
  }

  .hero-intro {
    display: flex;
  }

  .hero-headings .logo{
    width: 170px;
    height: auto;
  }
}

@media (max-width: 1399px) {
  #pub-agency a {
    font-size: smaller;
  }

  .archive-cover div a img {
    /* Responsive layout for individual agency/partner page - makes a three column-layout instead of four columns */
    flex: 33.33%;
    width: 100%;
  }
}

/* xxl desktop styles */
@media screen and (min-width: 1440px) {
  /* header {
    padding-bottom: 15rem;
  } */

  .hero-intro {
    display: flex;
  }

  .hero-headings .logo{
    width: 170px;
    height: auto;
  }

  .headline .carousel-item img {
    width: 40% !important;
    margin: 0 auto;
  }

  .navbar .container-fluid {
    width: 95%;
  }

  .navbar-brand {
    width: 50%;
  }

  .small-logo {
    display: none;
  }

  .big-logo {
    display: block;
    width: 350px;
  }

  .opd-events {
    width: 100%;
  }

  .opd-events-body .card {
    width: 75%;
  }

  .headline {
    width: 50%;
    margin: 0 auto;
  }

  .welcome-img img {
    width: 20%;
  }

  .welcome-img .gov-logo {
    display: block;
    width: 10%;
  }

  .navbar form {
    max-width: 50%;
  }

  .nav-link {
    font-size: 1rem;
  }

  .links-group {
    margin-top: 10px;
  }

  .list-group-item {
    width: 75%;
    padding: 0.75rem;
  }

  .list-group-item a {
    font-size: 1.125rem;
  }

  .listserv .list-group-item {
    width: 75%;
  }

  .newsletter {
    width: 45%;
  }

  .susdevgoal-img img {
    width: 175px;
  }

  .susdevgoal-img #sdg-title img {
    /*        width: 100%;*/
    width: 95%;
  }

  .contact-form {
    width: 100%;
  }

  footer h5 {
    font-size: 1rem;
  }

  footer ul,
  a {
    font-size: 1rem;
  }

  object {
    height: 1000px;
  }

  .planning-process {
    width: 75%;
  }

  .csd-info {
    font-size: 1.2rem;
  }

  .comsusdev {
    margin-bottom: 456px;
  }

  .rec-supp {
    width: 100%;
  }

  .gar-rev {
    width: 100%;
  }

  .gar-rev img {
    width: 1000px;
    margin: 10px 150px;
  }

  .garrev-info {
    font-size: 1.2rem;
  }

  .rec-supp {
    width: 75%;
  }

  .rec-supp img {
    width: 65%;
    margin: 0 auto;
  }

  .csd-plan {
    width: 100%;
  }

  .public-comment {
    width: 100%;
  }

  .susdev-goal {
    width: 100%;
  }

  .sdg-row {
    text-align: center;
    margin-bottom: 5px;
  }

  .susdev-goal .text {
    font-size: 1rem;
  }

  .milestones {
    width: 65%;
  }

  .page-404-body form {
    width: 65%;
  }

  .current-projects {
    width: 85%;
  }
}

@media only screen and (min-width: 1920px) {
  /* header {
    padding-bottom: 13rem;
  } */

  .headline .carousel-item img {
    width: 45% !important;
    margin: 0 auto;
  }

  .navbar .container-fluid {
    width: 75%;
  }

  .navbar-brand {
    width: 40%;
  }

  .small-logo {
    display: none;
  }

  .big-logo {
    display: block;
    width: 500px;
  }

  .headline {
    width: 40%;
    margin: 0 auto;
  }

  .spacing {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  .headline-spacing {
    padding-top: 1rem;
  }
}

@media screen and (min-width: 2480px) {
  .headline-spacing {
    padding-top: 4rem;
  }
  
}

@media screen and (min-width: 2560px) {
  /* header {
    padding-bottom: 16rem;
  } */

  .headline .carousel-item img {
    width: 35% !important;
    margin: 0 auto;
  }

  .navbar form {
    max-width: 100%;
  }
}

.maskedEmail:after {content: attr(data-a) "@" attr(data-b) "." attr(data-c)}

.resources a .thumb-img {
      aspect-ratio: 1 / 1.41421;
      object-fit: contain;
      object-position: center;
}

.embed-pdf {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  
}

.embed-pdf::before {
  content: "";
  display: block;
  padding-top: 120%;
}

.embed-pdf-file {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 768px) {
  .embed-pdf-file {
      width: 100%;
      height: auto;
  }
}

/*|| Hero*/
.oit-hero {
  background: #8f8f8f;
  z-index: 2;
  height: 25vh;
  position: relative;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  transition: 0.5s;
  /*margin-top: -2.7rem;*/
}

.oit-hero .oit-hero__hero-img {
  transition: 0.5s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}


.oit-hero .hero-headings {
  position: relative;
  z-index: 10;
  color: #fff;
}

.oit-hero .hero-headings h1 {
  font-size: 2.5rem;
  font-weight: 600;
  text-shadow: #000 1px 0 10px;
}

.oit-hero .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(31, 31, 31, 0.87);
  mix-blend-mode: overlay;
}

@media (min-width: 64rem) {

  /*.oit-hero {*/
  /*  margin-top: -2rem;*/
  /*}*/

  .oit-hero .hero-headings h1 {
    width: 90%;
    font-size: 3rem;
    padding: 2rem;
    /*text-shadow: #000 1px 0 10px;*/
  }
}

@media (max-width: 419px) {
  /*.oit-hero {*/
  /*  margin-top: 5.3rem;*/
  /*}*/

  .oit-hero .hero-headings h1 {
    font-size: 2rem;
  }



  /*body {*/
  /*  margin-top: 4rem;*/
  /*}*/
}

/*|| CPP Program Styles*/

.cpp .lead a {
  font-size: 1.15rem;
  font-weight: 400;
}

.cpp a{
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
}

.cpp .btn {
  transition: none;
}

.cpp-btn {
  display: inline-block;
  background-color: #1f1b4d;
  color: #fff;
  padding: 3px 9px;
  border-radius: 5px;
  letter-spacing: 1px;
}

.cpp-btn:hover{
  background-color: #302b7a;
  color: #fff;
}