/* ROUND OUR WAY CSS */

/* GENERAL */

body {
  font-family: 'Mulish', sans-serif 
}
  
main {
  min-height: 200px;
  padding-top:50px;
  padding-bottom:50px;
  background-color: #E7DFD5;
}

main.people, main.latest {
  background-color: #fff;
  padding-top: 35px;
}
  
main a, main a:visited {
  color: #8E1A44;
}

main a:hover, #mainfooter a:hover {
  color: #032543;
}

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

.btn-primary {
  background-color: #032543;
  border-color: #032543;
  font-weight: 700;
}

.btn-primary.active, .btn-primary:active {
  background-color: #8E1A44;
  border-color: #8E1A44;
  font-weight: 700;
}

.btn-primary:hover {
  background-color: #8E1A44;
  border-color: #8E1A44;
}

.btn-secondary {
  background-color: #8E1A44;
  border-color: #8E1A44;
  font-weight: 700;
}

.btn-secondary:hover {
  background-color: #032543;
  border-color: #032543;
}

h1 {
  font-weight: 700;
  color: #8E1A44;
  font-size: 2.1rem;
}

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


/* NAVBAR */

#mainnav {
  background-color: #032543 !important;
  padding:0;
}

.logo {
  max-width: 85px;
  margin: 4px 0;
}

#mainnav a, #mainnav a:visited {
  color:#ddd;
}

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

#mainnav .dropdown-menu {
  background-color: #032543;
  border: #032543;
  border-radius: 0 !important;
}

#mainnav a.dropdown-item:hover {
  background-color: #032543 !important;
}

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



/* SIGNUP */

#signup {
  background-color: #8E1A44;
  padding-bottom:70px;
}

#signup h1 {
  color: #fff;
}

#signup .btn-primary {
  border-color: #aaa;
}

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


/* FOOTER */

#mainfooter {
  background-color: #032543;
  margin-bottom:0;
  color: #E7DFD5;
  border-top: 1px solid #E7DFD5;
}

.logo2 {
  max-width: 70px;
  margin: 4px 15px 4px 0;
}

#social {
  margin:10px 0;
}

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

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

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



/* LANDING PAGES */


.homenews {
  @media (min-width: 1400px){ 
      max-width: 1250px;
  }
}

.homenews h1 {
  color: #032543;
}

#mininav .btn {
  padding: 4px 8px !important;
  font-weight: normal;
}

.topics {
  --bs-btn-padding-y: .15rem; 
  --bs-btn-padding-x: .5rem; 
  --bs-btn-font-size: .85rem
}

.largerbody {
  font-size: 1.1rem !important;
}

.landingcards .card {
  border-radius: 0;
  border-width: 2px;
  border-color: #bdad9b;
  padding:16px;
  background-color: transparent;
}

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

.landingcards h5 {
  font-weight: 700;
}

.landingcards a {
  text-decoration: none;
  color: #032543 !important;
}

.landingcards a:hover {
  color: #8E1A44 !important;
}

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

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

.landingcards .card img {
  border-bottom:1px solid #F8F1E9;
}

.peoplelist {
  margin-top: 10px;
}

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

.peoplelist h4 {
  font-weight: 700;
}

.peoplelist a {
  text-decoration: none;
}

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

.peoplelist-image {
  text-align: right;
}

.peoplelist-image img {
  max-width: 100px;
  border-radius: 50%;
}





/* COUNTER */


#newsCounter {
  background:#fff; 
  padding:30px
}

#newsCounter h2 {
  color:#032543;
}

#newsCounter .counter {
  font-size:100px; 
  line-height:100px; 
  font-weight:800
}



/* MISC */

img.bigmug {
  max-width: 190px;
  border-radius: 50%;
  float: right;
  margin:0 0 20px 20px;
}

@media only screen and (max-width: 790px) {
  img.bigmug {
  max-width: 160px;
  }
}

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

.latest-img {
  border: 2px solid #ddd;
  padding:5px;
  margin-top:10px;
  width: 100%;
}

.imageblock {
  margin-bottom:25px;
}

.caption p {
  margin:7px 0 0 0;
  font-weight: bold;
  color: #777;
}

code {
  color: #666;
}

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

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

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



/* FORMS */

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




/* HOME PAGE */

.homebanner h1, .homebanner p {
  margin: 0 600px 0 50px;
}

.homebanner p {
  color: #fff;
  font-size: 22px;
}

@media only screen and (max-width: 1400px) {
  .homebanner h1, .homebanner p {
    margin: 0 500px 0 50px;
  }
}

@media only screen and (max-width: 1299px) {
  .hero.homebanner {
    padding-top:90px;
    padding-bottom:90px; 
  }
}

@media only screen and (max-width: 1150px) {
  .homebanner h1, .homebanner p {
    margin: 0 400px 0 50px;
  }
}

@media only screen and (max-width: 1050px) {
  .hero-inner { 
    padding: 80px 50px }
  .homebanner h1, .homebanner p {
    margin: 0 400px 0 50px;
  }
  .homebanner p {
    color: #fff;
    font-size: 20px;
  }
  .homebanner h1 {
    font-size:56px;
  }
}

@media only screen and (max-width: 1000px) {
  .homebanner h1, .homebanner p {
    margin: 0 350px 0 50px;
  }
}

@media only screen and (max-width: 850px) {
  .homebanner h1, .homebanner p {
    margin: 0 300px 0 50px;
  }
  .hero.homebanner {
    padding-left:100px;
    padding-right:100px;
  }
}

@media only screen and (max-width: 710px) {
  .homebanner h1, .homebanner p {
    margin: 0 100px 0 0px;
  }
  .hero.homebanner {
    padding-left:50px;
    padding-right:50px;
  }
}

@media only screen and (max-width: 570px) {
  .hero.homebanner {
    padding-top:20px;
    padding-bottom:20px; 
  }
}

.homebanner h1 {
  margin-bottom:15px;
}



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

.hero2-text {

}

#hero2 h1, #hero2 p {
  color: #fff;
}

#hero2 h1 {
  font-size: 66px;
  margin-bottom:15px;
  color: #E7DFD5;
}

#hero2 p {
  color: #fff;
  font-size: 21px;
}

#hero2 img {
  border-radius: 50%;
  width:90%;
  margin:20px;
  padding: 8px;
  border: 1px #E7DFD5 solid;
}


@media only screen and (max-width: 850px) {
  #hero2 h1 {
    font-size: 48px;
    padding:0 10px;
  }
  #hero2 p {
    font-size:18px;
    padding:0 10px;
  }
}

@media only screen and (max-width: 500px) {
  #hero2 p {
    font-size:17px;
  }
}

@media only screen and (min-width: 992px) {
  .homecards:last-child {
    display:none;
  }
}


/* PARALLAX */

.hero-outer {
  margin-top:-25px; 
  background-position: center 0;
  background-repeat: no-repeat;
  background-color: #417364;
}

.hero-inner {
  padding:130px 50px;
  background-repeat: no-repeat;
  background-image: url("/img/oval3.png");
  background-position: center center;
  background-size: 95%;
}

#home-hero .hero-inner {
  padding:156px 50px;
  background-position: center right -10%;
  background-size: 170%;
}

.hero-inner h1 {
  font-size:66px;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1.15;
}

.hero-inner h1.home {
  color: #E7DFD5
}

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

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



@media only screen and (max-width: 790px) {
  .hero-inner {
    background-size: 120%;
    }

    #home-hero .hero-inner {
      padding:100px 30px;
      background-position: center right -50px;
      background-size: 180%;
    }


  }


@media only screen and (max-width: 500px) {
      #home-hero .hero-inner {
      padding:40px 0px 60px 20px;
      background-position: center right -110px;
      background-size: 270%;
    }


  }

 

  @media only screen and (max-width: 1050px) {
    .homebanner h1 {
      font-size: 56px;
    }
  }

  @media only screen and (max-width: 850px) {
  .hero-inner.homebanner {
    padding: 60px 100px;
  }

@media only screen and (max-width: 790px) {
  .hero-inner.homebanner {
    background-size: 120%;
    padding: 60px 60px;
    }
    .homebanner h1 {
      font-size: 46px;
    }
  }


@media only screen and (max-width: 600px) {
  .hero-inner.homebanner {
    background-size: 140%;
    padding: 50px 30px;
    }
  }

  @media only screen and (max-width: 500px) {
  .hero-inner.homebanner {
    background-size: 130%;
    padding: 40px 30px;
    }
  }


@media only screen and (max-width: 500px) {
    .homebanner p {
    font-size: 17px;
  }
  .homebanner h1 {
    font-size:36px;
  }
  #hero2 h1 {
    font-size: 40px;
  }
}