/* GENERAL */
body {
  margin: 0;
  padding: 0;
  font-family: century-gothic, sans-serif;
}

#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: #f14950;
}

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

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

.text-red {
  color: #f46d73;
}

/* 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: 1em;
  text-transform: uppercase;
}

a.navbar-brand-text {
  color: white !important;
  text-align: center;
  margin: auto;
  font-size: 1.5em;
  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;
}

a.button {
  border: 2px solid #ccc;
  border-radius: 10px;
}

.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("https://images.unsplash.com/photo-1451481454041-104482d8e284?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80");
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}

#hero img {
  padding-top: 20%;
  opacity: 0.5;
  padding-bottom: 20px;
}

#hero h4 {
  text-shadow: 2px 2px 3px #333;
  padding-top: 2em;
}

button.hero-button {
  text-shadow: 2px 2px 3px #333;
  border-color: white;
}

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

@media only screen and (max-width: 992px) {
  #hero h4 {
    padding-top: 40%;
  }
}

@media only screen and (max-width: 768px) {
  #hero h4 {
    padding-top: 60%;
  }
}

@media only screen and (max-width: 576px) {
  #hero h4 {
    padding-top: 75%;
    font-size: 1em;
  }

  #hero img {
    height: 200px;
  }
}

/* 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.7em;
  }
}

/* GALLERY */
#gallery-socmed {
  background: url(../img/news-bg5.jpg);
  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 {
    font-size: 1.3em;
    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: #212529;
}

.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: #f46d73;
}

@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/lil-coogs-2000-1333.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 0 -200px;
  text-align: center;
  color: #fff;
}

#little-coogs-donation h1 {
  padding-top: 100px;
  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: #f46d73;
}

.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;
  }
}

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

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

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

#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: 90%;
  margin: 0 auto;
}

@media only screen and (max-width: 768px) {
  .whoweare-content {
    max-width: 95%;
  }
}

@media only screen and (max-width: 576px) {
  .whoweare-content {
    max-width: 98%;
  }

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

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

#history h1 {
  text-transform: uppercase;
}

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

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

/* TEAM */
#management {
  background: #f46d73;
  color: #fff;
}
#management h1 {
  text-transform: uppercase;
  text-align: center;
  padding: 60px 0;
}

.management {
  background: #fff;
  color: #212529;
}

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

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

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

#directors .card {
  height: 450px;
}

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

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

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

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

#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: #333333;
}

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

.contact-card {
  height: 150px;
}

.coogs-card {
  height: 400px;
}

.training-card {
  height: 200px;
}

.training-link {
  text-decoration: none;
  color: #333333;
}

.training-link:hover {
  text-decoration: none;
  color: teal;
}

@media only screen and (min-width: 992px) {
  .prog-item {
    padding: 2em !important;
  }
  .contact-card {
    height: 170px;
  }
  .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: 20%;
    padding: 0;
  }
  .prog-school-icon,
  .prog-summer-icon,
  .prog-food-icon,
  .prog-coogs-icon,
  .prog-training-icon {
    font-size: 1rem;
  }
}

/* ======================================================== */
/* ===== 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;
}

/* ======================================================== */
/* ===== 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-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: 1298.9px) {
  .map-bg {
    background: url(../img/locations-sq-blue-772x772.jpg);
    background-size: cover;
    width: 100%;
    height: 100vh;
    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.8rem;
    margin-left: 0;
  }
}

/* ======================================================== */
/* ===== 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;
}

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

#accordion button.faq-btn:hover {
  color: #f46d73 !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.7rem;
  }

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

  .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;
  }

  .card-contact {
    max-width: 95%;
  }

  #contact-faq h1 {
    font-size: 1.7rem;
  }

  #contact-faq .btn-link {
    font-size: 1rem;
  }

  #contact-faq .card-body {
    font-size: 0.8rem;
  }
}