/* YPBOC CSS */

/* GENERAL */

body {
  font-family: 'Figtree', sans-serif;
}

main {
  min-height: 200px;
  padding-top:50px;
  padding-bottom:50px;
  background-color: #fff;
}

main p, main ul, main li{
  font-size: 19px 
}

main.content {
  padding-top: 30px;
}

@media only screen and (max-width: 575px) {
  main.content {
    padding-top: 10px
  }
}


.largerbody {
  font-size: 1.1rem !important; 
}
  
h1 {
  font-weight: 700;
  color: #000;
  font-size: 2.1rem;
}

@media only screen and (min-width: 992px) {
  main h1 {
    font-size: 2.7rem;
  }
}

main h1.events {
  color: #cb9f00
}

main h1.get-involved {
  color: #67c200
}

main h1.updates {
  color: #f48400
}

main h2 {
  margin-bottom:15px
}

h4.standfirst {
  font-weight: 600;
  margin-bottom:20px;
  line-height:1.3;
}

main a, main a:visited {
  color: #e16500;
}

main a:hover {
  color: #6fc600;
}

.aria-invisible {
      border: 0; 
      clip: rect(0 0 0 0); 
      height: 1px;  
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }
    

/* BUTTONS */

main a.btn, main a.btn:visited {
  color: #fff;
  font-weight: 700;
}

.btn-primary {
  background-color: #a8dc3c;
  border-color: #a8dc3c;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 5px 5px #000;
  padding:6px 12px 4px !important;
  color: #000 !important;
  text-transform: uppercase;
  border-radius:0;
}

.btn-custom {
  font-size:22px;
  margin-bottom:30px;
  margin-top: 5px;
  line-height: 1.2;
  padding:9px 12px 6px !important;
}

.btn-landing {
  font-size:16px;
  margin-top: 15px;
  box-shadow: 3px 3px #000;
}

.btn-updates {
background-color: #ffb128;
  border-color: #ffb128;
}

.btn-events {
background-color: #ffe501;
  border-color: #ffe501;
}

.btn-primary.active, .btn-primary:active {
  background-color: #ffb128 !important;
  border-color: #ffb128 !important;
}

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

.landingcards .btn-updates:hover {
background-color: #e98800;
  border-color: #e98800;
  color: #fff !important
}

.landingcards .btn-events:hover {
background-color: #dfbe02;
  border-color: #dfc902;
  color: #fff !important
}

.btn-get-involved:hover {
background-color: #76ba00;
  border-color: #76ba00;
  color: #fff !important
}

/* NAVBAR */

#mainnav {
  background-color: #fff !important;
  padding:0px 0;
  font-size: 21px;
  font-weight: 500;
  border-bottom: 1px solid #ccc
}

#navbarSupportedContent {
  margin: 20px 0
}

.logo {
  max-width: 170px;
  margin: 5px 0;
}

#mainnav a, #mainnav a:visited {
  color:#000000;
  padding: 5px 22px;
}

#mainnav a:hover {
  color:#e16500;
}

#mainnav .btn-primary {
  margin-left:20px;
  margin-bottom: 10px;
  font-size: 17px
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler {
  border: none
}



/* SIGNUP */

#signup {
  background-color: #ffb128;
  padding-bottom:50px;
}

#signup h1 {
  color: #000;
  font-size: 2.8rem;
}

#signup .btn-primary {
  border-color: #fff;
  padding: 10px 8px 6px !important
}

#signup .btn-primary:hover {
  background-color: #ffe501;
  border-color: #fff;
}

#signup p {
  margin-top:20px;
  font-size:130%
}

#signup p#form-message {
  margin-top:40px;
  font-weight: 700;
  font-size:140%;
}


/* FOOTER */

#mainfooter {
  background-color: #000;
  margin-bottom:0;
  color: #ccc;
  padding: 10px 0
}

.logo1 {
  max-width: 120px;
  margin: 4px 35px 4px 0;
}

.logo2 {
  max-width: 120px;
  margin: 4px 35px 4px 0;
}

.logo3 {
  max-width: 260px;
  margin: 4px 0 4px 0;
}

.footer2 {
  border-top:1px solid #555; 
  margin-top:10px; 
  padding-top:10px
}

@media only screen and (max-width: 767px) {
  .logo {max-width:120px}
  .logo1 {margin-bottom:25px}
  .logo2 {max-width: 110px}
  .logo3 {max-width: 200px}
  }

#social {
  margin:10px 0;
}

#social svg {
   filter: invert(95%) sepia(3%) saturate(1471%) hue-rotate(325deg) brightness(103%) contrast(81%);
 }

 #social a {
  margin: 0 3px;
 }

#mainfooter a, #mainfooter a:visited {
  color: #ffb128;
}

#mainfooter a:hover {
  color: #ffe501;
}

.logo-border {
  border: 1px #888 solid;
  padding:10px;s
} 

.footer-text {
  font-size: 14px;
  line-height: 1.4;
}



/* LANDING PAGES */

.landing-panel {
  max-width:1250px;
}

.landingcards {
  margin:0;
  padding:0
}

.landingcards .card {
  background-color: transparent;
  border:none
}

.landingcards .card-body {
  padding:15px 0 0 0;
}

.landingcards h5 {
  font-weight: 700;
  font-size: 170%
}

.landingcards h5 a {
  text-decoration: none;
  color: #f48400
}

.landingcards.events h5 a {
  color: #cb9f00
}

.landingcards.get-involved h5 a {
  color: #67c200
}

.landingcards h5 a:hover {
  color: #bb6503
}

.landingcards.events h5 a:hover {
  color: #967101
}

.landingcards.get-involved h5 a:hover {
  color: #4f9401
}

.landingcards .card:hover {
  background-color: #fff;
  }

.landingcards .card-img-top {
  border-radius:0 !important;
}

.landingcards .card img {
  border:1px solid #bbb;
}


/* HERO IMAGES */

.hero-outer {
  margin-top:-25px; 
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #000000;
  background-size: cover;
}

.hero-inner {
  padding:220px 50px;
}

.hero-darken {
  background-color: rgba(0, 0, 0, 0.2);
  background-blend-mode: darken; 
}

.hero-inner h1 {
  font-size:66px;
  color: #fff0aa;
  line-height: 1.15;
  text-shadow: 4px 4px #000;
  font-weight: 700;
}


/* PARTNER LOGOS */

.partnerlogos .card {
  border-radius: 0;
  border-width: 0px;
  padding:16px;
  background-color: #fff;
}

.partnerlogos .card:hover {
  background-color: #fff;
}


/* IMAGES/VIDEO */

.latest-img {
  border: 1px solid #000;
  margin-top:10px;
  width: 100%;
}

.imageblock {
  margin-bottom:25px;
}

.caption p {
  margin:7px 0 0 0;
  font-weight: 700;
  color: #666;
  line-height: 1.4;
  font-size:17px
}

.vidframe {
  margin-bottom: 20px;
  margin-top:20px;
}

/* PAGINATE */

.paginate {
  margin-top:0px;
  font-size: 1.1em;
}

.paginate a {
  text-decoration: none;
  font-weight: bold;
  margin: 0 5px;
}



/* FORMS */

.form-bg {
  background: #ededed;
  padding: 15px;
  margin-top:30px;
}

.contact-form {
  background: #eee;
  padding: 20px;
}

.contact-form h2 {
  color:#e16500
}

.involved-form {
  border: 1px solid #999;
  padding: 20px;
  margin-top:30px;
}

.form-control-lg, .btn-lg {
  border-radius:0
}


/* HOME HERO 1 */

#home-hero .hero-inner {
  padding:280px 50px 70px 50px;
}

@media only screen and (max-width: 1399px) {
  #home-hero .hero-inner {
    padding:200px 50px 70px 50px;
  }
}

@media only screen and (max-width: 1199px) {
  #home-hero .hero-inner {
    padding:150px 50px 50px 50px;
  }
}

@media only screen and (max-width: 767px) {
    #home-hero .hero-inner {
      padding:100px 50px 60px 50px;
    }
  }

@media only screen and (max-width: 575px) {
      #home-hero .hero-inner {
      padding:40px 0px 60px 20px;
    }
  }

#home-hero h1, #home-hero p {
  margin-right: 480px;
  margin-left: 50px;
}

#home-hero h1 {
  font-size:66px;
  margin-bottom:15px;
}

#home-hero p {
  color: #fff;
  font-size: 27px;
  text-shadow: #000 2px 2px;
  margin-bottom: 0;
}s

@media only screen and (max-width: 1399px) {
  #home-hero h1, #home-hero p {
    margin-right: 350px;
  }
}

@media only screen and (max-width: 1199px) {
  #home-hero h1, #home-hero p {
    margin-right: 300px;
  }
}

@media only screen and (max-width: 991px) {
  #home-hero h1, #home-hero p {
    margin-right: 200px;
    margin-left:20px
  }
  #home-hero p {
    font-size: 24px;
  }
  #home-hero h1 {
    font-size:56px;
  }
}

@media only screen and (max-width: 767px) {
  #home-hero h1, #home-hero p {
    margin-right: 100px;
    margin-left:10px
  }
    #home-hero h1 {
    font-size:48px;
  }
    #home-hero p {
    font-size: 22px;
  }
}

@media only screen and (max-width: 575px) {
  #home-hero .hero-inner {
    padding-top:20px;
    padding-bottom:20px; 
    padding: 50px 30px;
    }
    #home-hero h1, #home-hero p {
    margin-right:0px;
    margin-left:0px
    } 
    #home-hero h1 {
    font-size:43px;
    }
    #home-hero p {
    font-size: 22px;
    }
  }


/* HOME HERO 2 */

#hero2 {
  background-color: #fff160;
  padding: 50px 0;
}

#hero2 .container {
  max-width: 1200px;
}

#hero2 p {
  font-size: 20px;
}

#hero2 img {
  width:100%;
  margin:20px 0;
}

.hero2-text a {
  color: #932c00;
}

.hero2-text a:hover {
  color: #290d00;
}

@media only screen and (max-width: 767px) {
  #hero2 p {
    font-size:19px;
  }
  #hero2 img {
    margin:0 0 20px 0;
  }
}

@media only screen and (max-width: 575px) {
  #hero2 {
    padding: 40px 0 35px 0
  }
}