/* GENERAL */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: century-gothic, sans-serif;
  color: #1c174d !important;
}

#main-content {
  margin-left: 250px;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  #main-content {
    margin-left: 250px;
  }
}

@media only screen and (max-width: 576px) {
  #main-content {
    margin-left: 90px;
  }
}

.active {
  color: #f46d73;
}

.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.bg-red {
  background-color: #f14950;
}

.bg-light-red {
  background-color: #f46d73;
}

.text-red {
  color: #f14950;
}

.text-bright-red {
  color: #f14950;
}

.text-navy {
  color: #1c174d;
}

/* NAVIGATION */
.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 0;
  background-color: #0b0920;
  overflow-x: hidden;
  transition: 0.5s;
}

ul.list-unstyled {
  margin-left: 15px;
  margin-right: 15px;
}

.nav-item {
  font-size: 1.18em;
  text-transform: uppercase;
}

a.navbar-brand-text {
  color: white !important;
  text-align: center;
  margin: auto;
  font-size: 1.33em;
  font-weight: bolder;
  text-transform: uppercase;
}

a.nav-link {
  color: white !important;
}

a.nav-link:hover,
a.nav-link.active {
  color: #f46d73 !important;
}

.fas.fa-heart {
  color: #f14950;
}

.close {
  font-size: 25px;
  color: white;
}

.hidden {
  display: none;
}

.unhidden {
  display: block;
}

@media only screen and (min-width: 576px) {
  .sidenav {
    width: 250px;
  }

  a.logo-hidden {
    display: none;
  }
}

@media only screen and (max-width: 575.98px) {
  .sidenav {
    width: 90px;
  }

  a.navbar-brand-text {
    display: none;
  }

  a.logo-show {
    color: white !important;
    text-align: center;
    margin: auto;
    font-size: 1.5em;
    font-weight: bolder;
    margin-top: 10px;
  }
}

/* HERO */
#hero {
  background: url("../img/bac-index-hero-2000x1545px.webp");
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

#hero h4 {
  text-shadow: 2px 2px 3px #fff;
  padding-top: 53%;
  font-size: 2.5em;
  font-weight: bolder;
  /* text-transform: uppercase; */
  /* color: #f14950; */
  color: #1c174d;
}

button.hero-button {
  text-shadow: 3px 3px 4px #fff;
  /* border-color: white; */

  animation: arrow-pulsate 3000ms ease-out infinite;
}

@keyframes arrow-pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 1;
  }
}

a button.hero-button:hover {
  background: rgba(255, 255, 255, 0.5);
}

@media only screen and (min-width: 1298.9px) {
  #hero h4 {
    padding-top: 48%;
  }
}

@media only screen and (max-width: 1024px) {
  #hero {
    background: url("../img/bac-index-hero-small-logo.png");
    background-size: cover;
    background-position: center;
    min-height: 100vh;
  }

  #hero h4 {
    padding-top: 140%;
  }
}

@media only screen and (max-width: 768px) {
  #hero h4 {
    text-shadow: 1px 1px 2px #212529;
    padding-top: 150%;
  }
}

@media only screen and (max-width: 576px) {
  #hero h4 {
    text-shadow: 1px 1px 2px #212529;
    padding-top: 170%;
    font-size: 1.6em;
  }
}

/* INTRO */
#intro {
  background-color: #eee;
}

#intro p {
  max-width: 75%;
  margin: auto;
}

.fa-football-ball {
  color: #f14950;
}
.fa-school {
  color: #3d85c6;
}

.fa-carrot {
  color: #ffa500;
}

@media only screen and (max-width: 576px) {
  #intro h2 {
    font-size: 1.6rem;
  }

  #intro .fas {
    padding-top: 2rem !important;
  }
}

/* GALLERY */
#gallery-socmed {
  background: url(../img/news-bg-2000w.webp);
  background-size: cover;
  min-height: 80vh;
}

@media only screen and (min-width: 992px) {
  #gallery-socmed {
    min-height: auto;
  }

  .box .gallery-socmed {
    height: 340px;
  }

  iframe {
    width: 95%;
  }
}

@media only screen and (max-width: 991.98px) {
  #gallery-socmed h1 {
    font-size: 1.7em;
  }

  .gallery-socmed {
    display: block;
    margin: 0 40px 0 20px;
  }

  .gallery-socmed iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .gallery-socmed a .fab {
    display: block-inline;
    margin-left: 90px;
  }
}

@media only screen and (max-width: 576px) {
  #gallery-socmed h1 {
    font-size: 1.7em;
  }

  .gallery-socmed {
    margin: 0;
    padding: 0;
  }

  .gallery-socmed iframe {
    width: 230px;
    margin-left: 10px;
    display: block;
  }

  .gallery-socmed a .fab {
    display: block-inline;
    margin-left: 10px;
  }
}

/* WHAT WE DO */
.fa-angle-double-right {
  color: #fff;
  border: 2px solid #fff;
  border-radius: 5px;
  padding: 5px 10px 5px 15px;
}

#whatwedo {
  position: relative;
  min-height: 250px;
  background: url("../img/ramin-talebi-2000-1333.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 0 -300px;
  text-align: center;
  color: #fff;
}

@media only screen and (max-width: 576px) {
  #whatwedo h1 {
    padding: 0;
    font-size: 1.4em;
    margin-top: 20px;
  }

  .fa-angle-double-right {
    font-size: 1.2em;
  }
}

/* GET INVOLVED */
#getinvolved {
  height: auto;
  background: #eee;
  padding-bottom: 50px;
}

#getinvolved h1 {
  text-align: center;
  font-size: 4em;
}

#getinvolved a {
  text-decoration: none;
  color: #1c174d;
}

.involved {
  top: 20px;
  width: 100%;
  transition: top 1s;
  overflow-y: hidden;
  margin-bottom: 30px;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.5);
}

#getinvolved .involved:hover {
  top: 0;
  border: 5px solid #f46d73;
  background: rgba(255, 255, 255, 0.95);
}

#getinvolved h3 {
  padding: 20px 0;
}

.fa-handshake,
.fa-people-carry,
.fa-users {
  color: #f14950;
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 576px) {
  #getinvolved h1,
  #getinvolved h3 {
    font-size: 1.7em;
  }
}

/* LITTLE COOGS DONATION */
.dark-overlay:hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
}

#little-coogs-donation {
  position: relative;
  min-height: 500px;
  background: url("../img/little-coogs.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 0 -600px;
  text-align: center;
  color: #fff;
}

#little-coogs-donation h1 {
  padding-top: 120px;
  text-shadow: 2px 2px 3px #333;
}

#little-coogs-donation p {
  padding: 20px 80px;
  text-shadow: 2px 2px 3px #333;
}

@media only screen and (max-width: 768px) {
  #little-coogs-donation h1 {
    font-size: 2em;
    padding-top: 20%;
  }

  #little-coogs-donation h5 {
    font-size: 1.1em;
  }
}

@media only screen and (max-width: 576px) {
  #little-coogs-donation h1 {
    padding: 25% 10px 25px 10px;
    font-size: 1.7em;
  }

  #little-coogs-donation p {
    font-size: 1em;
    padding: 10px;
  }

  .fas.fa-hand-holding-heart {
    font-size: 1.7em;
  }
}

#little-coogs-donation a {
  text-decoration: none;
  color: #fff;
}

#little-coogs-donation .fas.fa-hand-holding-heart {
  color: #fff !important;
  text-shadow: 2px 2px 3px #333;
}

/* GENERAL DONATION */
#general-donation {
  background: #fff;
}

#general-donation a {
  text-decoration: none;
  color: #212529;
}

#general-donation h1 {
  padding: 20px 10px 10px 10px;
}

#general-donation p {
  padding: 20px 80px;
}

.fas.fa-seedling {
  color: #6aa84f;
}

@media only screen and (max-width: 576px) {
  #general-donation h1 {
    padding: 10px 0;
    font-size: 1.5em;
  }

  #general-donation p {
    font-size: 1em;
    padding: 10px;
  }

  .fas.fa-seedling {
    padding-top: 5px;
    font-size: 1.5em;
  }
}

.btn-green {
  background: #6aa84f;
}

.btn-green:hover {
  background: #55863f;
}

/* FOOTER */
footer {
  color: #fff;
  background-color: #f14950;
}

.copy {
  font-size: 0.8em;
}

#pre-footer {
  background-color: #eee;
}

#pre-footer h4 {
  font-size: 2em;
}

.fab,
.fa-hand-holding-heart {
  color: #f14950;
}

.fab.fa-facebook-f:hover,
.fab.fa-twitter:hover,
.fab.fa-linkedin-in:hover,
.fab.fa-youtube:hover,
.fas.fa-hand-holding-heart:hover {
  color: #3d85c6;
}

@media only screen and (max-width: 768) {
  .footer-info {
    display: block;
  }
}

@media only screen and (max-width: 576px) {
  .copy {
    text-align: center !important;
    font-size: 0.7em;
  }

  #pre-footer h4,
  .fab.fa-facebook-f,
  .fab.fa-twitter,
  .fab.fa-linkedin-in,
  .fab.fa-youtube,
  .fas.fa-hand-holding-heart {
    font-size: 1.7em;
  }

  #pre-footer p {
    font-size: 1rem;
  }
}

/* ========================================================== */

/* ===== ABOUT PAGE ===== */

/* HERO  */
#about-hero {
  background: url("../img/youthcampsillypose-1200x800.jpg");
  background-size: cover;
  background-position: center;
  min-height: 70vh;
}

#about-hero h1 {
  padding-top: 30%;
  font-weight: bold;
  text-shadow: 3px 3px 5px #333;
  max-width: 80%;
  text-align: center;
  margin: auto;
}

/* WHO WE ARE */
.whoweare-content {
  max-width: 80%;
  margin: 0 auto;
}

@media only screen and (max-width: 768px) {
  #about-hero {
    min-height: 60vh;
  }

  .whoweare-content {
    max-width: 95%;
  }
}

@media only screen and (max-width: 576px) {
  #about-hero {
    min-height: 60vh;
  }

  #whoweare p {
    font-size: 1rem !important;
  }

  .whoweare-content {
    max-width: 98%;
  }

  .whoweare-content h1 {
    font-size: 1.7rem;
  }
}

/* OUR VALUES  */
.values-card:hover {
  background-color: rgba(244, 109, 115, 0.1);
}

#values-text {
  background-color: #f14950;
  background-size: cover;
  background-position: center;
  min-height: 500px;
  color: #fff;
  margin-left: 0 !important;
}

#values-text img {
  width: 400px;
}

#values-text p {
  max-width: 70%;
  margin: 0 auto;
}

@media only screen and (max-width: 576px) {
  #values-text h1 {
    font-size: 1.7rem;
  }

  #values-text img {
    width: 280px;
  }

  #values-text p {
    max-width: 90%;
    margin: 0 auto;
    font-size: 1rem;
  }
}

/* HISTORY  */

/* HORIZONTAL TIMELINE  */
a {
  text-decoration: none;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}

#timeline {
  /* width: 800px; */
  height: 350px;
  overflow: hidden;
  margin: 30px auto;
  position: relative;
}

#dates {
  /* width: 800px; */
  height: 60px;
  overflow: hidden;
}

#dates li {
  list-style: none;
  float: left;
  width: 100px;
  height: 50px;
  font-size: 18px;
  text-align: center;
}

#dates a {
  color: #212529;
  line-height: 38px;
  padding-bottom: 10px;
}

#dates .selected {
  font-size: 30px;
}

#dates li a:hover,
#dates li a.selected {
  color: #f46d73 !important;
  list-style: none;
  text-decoration: none;
}

#issues {
  /* width: 800px; */
  height: 350px;
  overflow: hidden;
}

#issues li {
  /* width: 800px; */
  height: 350px;
  list-style: none;
  float: left;
}

#issues li h1 {
  color: #f46d73;
  font-size: 30px;
  margin: 20px 0;
  text-align: left;
  padding-left: 20px;
}

#issues li p {
  font-size: 14px;
  margin-right: 90px;
  margin-left: 20px;
  font-weight: normal;
  line-height: 22px;
}

#next,
#prev {
  position: absolute;
  top: 0;
  font-size: 70px;
  top: 170px;
  width: 22px;
  height: 22px;
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  color: #ffffff;
}

#next:hover,
#prev:hover {
  background-position: 0 -76px;
}

#next {
  right: 0;
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 22px solid #3d85c6;
}

#prev {
  left: 0;
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-right: 22px solid #3d85c6;
}

#next.disabled,
#prev.disabled {
  opacity: 0.2;
}

@media only screen and (min-width: 992px) {
  #timeline,
  #dates,
  #issues,
  #issues li {
    width: 600px;
  }

  #issues li p {
    margin-left: 10px;
  }
}

@media only screen and (max-width: 1024px) {
  #timeline,
  #dates,
  #issues,
  #issues li {
    width: 480px;
    height: auto;
  }
}

@media only screen and (max-width: 768px) {
  #timeline,
  #dates,
  #issues,
  #issues li {
    width: 300px;
    height: auto;
  }
}

@media only screen and (max-width: 576px) {
  #timeline,
  #dates,
  #issues,
  #issues li {
    width: 180px;
    height: auto;
  }

  #dates {
    height: 50px;
  }

  #dates li {
    height: 40px;
    font-size: 14px;
  }

  #dates a {
    line-height: 26px;
    padding-bottom: 8px;
  }

  #dates .selected {
    font-size: 24px;
  }

  #issues li h1 {
    font-size: 24px;
  }

  #issues li p {
    font-size: 14px;
    margin-right: 80px;
    margin-left: 10px;
  }
}

/* END of HORIZONTAL TIMELINE  */

#history {
  background: #f8f8f8;
  padding-bottom: 32px;
}

#history h1 {
  font-size: 2.7rem;
  font-weight: bolder;
}

.fas.fa-users {
  color: #f14950;
}

@media only screen and (max-width: 576px) {
  #history h1 {
    font-size: 2.3rem;
  }
}

/* TEAM */
#management {
  color: #fff;
}

.management-title {
  background: #f14950;
}

#management h1 {
  /* text-transform: uppercase; */
  text-align: center;
  padding: 60px 0;
}

.management {
  background: #fff;
  color: #1c174d;
}

#directors {
  background: #f8f8f8;
  padding-bottom: 50px;
  color: #1c174d;
}

#directors h1 {
  text-transform: uppercase;
  text-align: center;
  padding: 60px 0;
  color: #f14950;
}

#directors img {
  margin-top: -50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#directors .card {
  height: 650px;
}

#directors .card-body p {
  font-size: 0.75rem;
}

#directors .card:hover {
  background: #f14950;
  color: #fff;
}

#directors .fab,
#directors .fas {
  color: #fff;
  font-size: 1rem;
}

@media only screen and (min-width: 992px) {
  #directors .card {
    height: 710px;
  }
}

@media only screen and (max-width: 576px) {
  #management h1,
  #directors h1 {
    font-size: 1.7rem;
    text-align: center;
  }

  #management h3 {
    font-size: 1.6rem;
  }

  #values-text p,
  #management p {
    font-size: 1rem;
  }

  #directors .card {
    height: 700px;
  }

  #directors .card-body p {
    font-size: 0.65rem;
  }
}

/* ==================================================== */
/* ====== PROGRAMS PAGE ===== */

/* PROGRAMS HERO */
#programs-hero {
  background: url("../img/lil-girl-1200x800.jpeg");
  background-size: cover;
  background-position: center;
  min-height: 70vh;
}

#programs-header .prog-item {
  width: 30%;
}

#programs-header .prog-item:hover {
  opacity: 0.8;
  cursor: pointer;
}

.bg-blue1 {
  background-color: #3d85c6;
}

.bg-blue2 {
  background-color: rgba(61, 133, 198, 0.9);
}

.bg-blue3 {
  background-color: rgba(61, 133, 198, 0.8);
}

.bg-blue4 {
  background-color: rgba(61, 133, 198, 0.7);
}

.bg-blue5 {
  background-color: rgba(61, 133, 198, 0.6);
}

.prog-school-icon,
.prog-summer-icon,
.prog-food-icon,
.prog-coogs-icon,
.prog-training-icon {
  color: #fff;
}

#accordion button {
  text-decoration: none;
}

#accordion .card-body p {
  padding-left: 1.2rem;
}

.txt-dark {
  color: #1c174d;
}

#programs-contact ul li {
  list-style: none;
}

.prog-contact-card {
  height: auto;
}

.contact-card {
  height: auto;
}

.coogs-card {
  height: 400px;
}

@media only screen and (max-width: 1024px) {
  .contact-card {
    height: 170px;
  }
}

@media only screen and (min-width: 992px) {
  .prog-item {
    padding: 2em !important;
  }

  .coogs-card {
    height: 500px;
  }

  .training-card {
    height: 280px;
  }
}

@media only screen and (max-width: 991.98px) {
  .coogs-card {
    height: auto;
  }
}

@media only screen and (max-width: 576px) {
  #programs-header .prog-item {
    width: 25%;
    padding: 0;
  }

  .prog-school-icon,
  .prog-summer-icon,
  .prog-food-icon,
  .prog-coogs-icon {
    font-size: 1rem;
  }

  #during-school-program h2,
  #programs-contact h3,
  #after-school-summer-programs h2,
  #champion-fuel h2,
  #little-coogs h2 {
    font-size: 1.7rem;
  }

  #during-school-program p,
  #after-school-summer-programs p,
  #champion-fuel p,
  #little-coogs p,
  .coogs-card p,
  .coogs-card a {
    font-size: 1rem;
  }

  #programs-contact .card-title {
    font-size: 1rem;
  }

  #programs-contact .card-text {
    font-size: 0.8rem;
  }

  #programs-contact .contact-card {
    height: auto;
  }

  #accordion button,
  #accordion p {
    font-size: 0.9rem;
  }
}

/* ======================================================== */
/* ===== PARTNERS PAGE ===== */
#partners-hero {
  background: url("https://images.unsplash.com/photo-1518135714426-c18f5ffb6f4d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1073&q=80");
  background-size: cover;
  background-position: center bottom;
  min-height: 67vh;
}

.partners-content {
  max-width: 90%;
  margin: 0 auto;
}

@media only screen and (max-width: 576px) {
  #program-partners h1 {
    font-size: 1.7rem;
  }

  #program-partners p {
    font-size: 1rem !important;
  }
}

/* ======================================================== */
/* ===== DONATE PAGE ===== */

#donate-hero {
  background: url("https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

#donate-little-coogs {
  background: url("../img/lil-girl-1200x800.jpg");
  background-size: cover;
  background-position: center;
  height: 400px;
  color: white;
}

#donate-little-coogs h2 {
  padding-top: 120px;
  text-shadow: 1px 1px 2px #333333;
}

@media only screen and (max-width: 991.98px) {
  #donate-hero {
    min-height: 400px;
  }
  #donate-general {
    height: 400px;
  }
  #donate-general img {
    height: 100px;
  }
}

@media only screen and (max-width: 576px) {
  #donate-little-coogs h2 {
    font-size: 1.7rem;
  }

  #donate-general h2 {
    font-size: 1.7rem;
  }

  #donate-general img {
    margin-top: 20px !important;
  }
}

/* ======================================================== */
/* ===== LOCATIONS PAGE ===== */

#locations {
  max-width: 90%;
  margin: 0 auto;
}

.map-bg {
  background: url(../img/locations-sq2.jpg);
  background-position: 0px 0px;
  background-size: cover;
  width: 100%;
  height: 520px;
  position: relative;
}

/* Dallas */
.marker1 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 161px; /* position our marker */
  left: 340px; /* position our marker */
  display: block;
}

/* San Antonio */
.marker2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 308px; /* position our marker */
  left: 278px; /* position our marker */
  display: block;
}

/* Houston */
.marker3 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 293px; /* position our marker */
  left: 395px; /* position our marker */
  display: block;
}

/* Brownsville */
.marker4 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 450px; /* position our marker */
  left: 315px; /* position our marker */
  display: block;
}

.pin {
  width: 20px;
  height: 20px;
  position: relative;
  top: 30px;
  left: 30px;
  background: rgba(5, 124, 255, 1);
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 1000;
}

.pin-effect {
  width: 80px;
  height: 80px;
  position: absolute;
  top: 0;
  display: block;
  background: rgba(5, 124, 255, 0.6);
  border-radius: 50%;
  opacity: 0;
  animation: pulsate 2400ms ease-out infinite;
}

@keyframes pulsate {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

@media only screen and (min-width: 1400px) {
  .map-bg {
    background: url(../img/locations-sq-blue-500x500.jpg);
    background-size: cover;
    /* width: 100%; */
    height: 100vh;
    position: relative;
  }

  .marker1,
  .marker2,
  .marker3,
  .marker4,
  .pin,
  .pin-effect {
    display: none;
  }
}

@media only screen and (min-width: 1298.9px) {
  .map-bg {
    background: url(../img/locations-sq-blue-772x772.jpg);
    background-size: cover;
    /* width: 100%; */
    height: 550px;
    position: relative;
  }

  .marker1,
  .marker2,
  .marker3,
  .marker4,
  .pin,
  .pin-effect {
    display: none;
  }
}

@media only screen and (max-width: 1024px) {
  .map-bg {
    height: 400px;
  }

  /* Dallas */
  .marker1 {
    top: 131px; /* position our marker */
    left: 273px; /* position our marker */
  }

  /* San Antonio */
  .marker2 {
    top: 244px; /* position our marker */
    left: 227px; /* position our marker */
  }

  /* Houston */
  .marker3 {
    top: 233px; /* position our marker */
    left: 315px; /* position our marker */
  }

  /* Brownsville */
  .marker4 {
    top: 359px; /* position our marker */
    left: 252px; /* position our marker */
  }

  .pin {
    width: 10px;
    height: 10px;
    top: 15px;
    left: 15px;
    border: 1px solid #fff;
  }

  .pin-effect {
    width: 40px;
    height: 40px;
  }
}

@media only screen and (max-width: 768px) {
  .map-bg {
    height: 520px;
  }

  /* Dallas */
  .marker1 {
    top: 179px; /* position our marker */
    left: 371px; /* position our marker */
  }

  /* San Antonio */
  .marker2 {
    top: 331px; /* position our marker */
    left: 306px; /* position our marker */
  }

  /* Houston */
  .marker3 {
    top: 320px; /* position our marker */
    left: 415px; /* position our marker */
  }

  /* Brownsville */
  .marker4 {
    top: 482px; /* position our marker */
    left: 342px; /* position our marker */
  }

  .locations-header {
    padding: 40px 0;
  }
}

@media only screen and (max-width: 576px) {
  .map-bg {
    background: url(../img/locations-sq-blue-500x500.jpg);
    background-position: -5px 00px;
    background-size: cover;
    width: 100%;
    height: 300px;
    position: relative;
  }

  .marker1,
  .marker2,
  .marker3,
  .marker4,
  .pin,
  .pin-effect {
    display: none;
  }

  .locations-header h1 {
    font-size: 1.7rem;
    margin-left: 0 !important;
  }

  #locations hp {
    font-size: 1rem !important;
  }
}

/* ======================================================== */
/* ===== CONTACT PAGE ===== */

#contact-hero {
  background: url("https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80");
  background-size: cover;
  background-position: center;
  min-height: 75vh;
}

#contact-form {
  background-color: #f14950;
  color: #fff;
}

.contact-card-sites {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

#accordion button.faq-btn:hover {
  color: #f14950 !important;
}

@media only screen and (max-width: 768px) {
  .card-contact {
    max-width: 90%;
  }
}

@media only screen and (max-width: 576px) {
  .contact-form-header h1 {
    font-size: 1.6rem;
  }

  .contact-form-header h5 {
    font-size: 1.1rem;
  }

  .needs-validation .form-row {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .needs-validation .form-control,
  .needs-validation .btn-lg {
    font-size: 1rem;
  }

  .form-fname {
    padding-bottom: 1rem !important;
  }

  #contact-site h3 {
    font-size: 1.4rem;
  }

  .contact-card-sites .card-text {
    font-size: 1rem;
  }
}