@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');

/******************************************************************
 * Global
 ******************************************************************/

html, body {
  height: 100%;
  background-color: #F7F7F7;
  font-family: sans-serif;
}

body {
  color: #333;
  padding-top: 5rem;
}

#main-content {
  color: #555;
}

/******************************************************************
 * Generic Helper Classes
 ******************************************************************/

.reverse {
  unicode-bidi:bidi-override;
  direction:rtl;
}

.red {
  color: red;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                  supported by Chrome and Opera */
}

@media (max-width: 576px) {
  .width-xs-full {
  width: 100%!important;
  }

  .margin-xs-bottom-10 {
  margin-bottom: 10px;
  }

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

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

  .width-xs-full {
    width: 100%;
  }
}

.pull-left.inline-img {
  margin-right: 15px;
}

.pull-right.inline-img {
  margin-left: 15px;
}

.display-none {
  display: none;
}

/******************************************************************
 * Misc
 ******************************************************************/

blockquote {
  padding-left: 10px;
  border-left: 5px solid #dfe2e5;
}

.fully-justified main {
  text-align: justify;
}


/******************************************************************
 * Navbar
 ******************************************************************/

body .navbar {
  background-color: #343538;
}

/* Make Navbar Brand not show grey box when clicked **/
body .navbar .navbar-brand {
  outline:none;
}

/* Footer Color */
body main {
  overflow:auto;
  min-height: 100%;
  background-color: #fff;
}

/******************************************************************
 * Make Navbar Whiter
 ******************************************************************/

body .navbar .navbar-toggler {
  color: #fff;
  border-color: #fff;
  outline: 0;
  cursor: pointer;
}

/* Make NavBar toggler whiter */
body .navbar .navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}

/* Make Nav Links Whiter */
body .navbar .navbar-text,
body .navbar a.nav-link,
body .navbar a.nav-link:link,
body .navbar a.nav-link:visited,
body .navbar a.nav-link:active {
  color: #fff!important;
  outline: 0;
}

body .navbar a.nav-link.disabled {
  color: #868e96!important;
}

/******************************************************************
 * Navbar Brand Text Beside Logo
 ******************************************************************/

nav.navbar a.navbar-brand {
  height: 64px;
}

nav.navbar a.navbar-brand img {
  float: left;
  height: 54px;
}

/******************************************************************
 * Navbar Brand Smaller Items When Small Width
 ******************************************************************/

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

  nav.navbar a.navbar-brand img {
    height: 40px;
    margin-top: 7px;
    margin-bottom: 7px;
  }

  nav.navbar a.navbar-brand div {
    font-size: 33px;
    margin-left: 0;
  }
}

/******************************************************************
 * Breadcrumbs
 ******************************************************************/

nav.breadcrumbs {
  margin-top: 10px;
}

body.no-breadcrumbs #main-content {
  padding-top: 10px;
}

/******************************************************************
 * Carousel Feature
 ******************************************************************/

main div#carousel-feature,
main div#carousel-feature .carousel-inner .carousel-item img {
  height: 400px;
}

main div#carousel-feature .carousel-inner .carousel-item img {
  object-fit: cover;
}

main div#carousel-feature {
  position: relative;
}

main div#carousel-feature .carousel-control-prev,
main div#carousel-feature .carousel-control-next {
  z-index: 101;
}

main div#carousel-feature .carousel-overlay {
  position: absolute;
  z-index: 100;
  height: 100%;
  width: 100%;
  text-align: center;
  font-family: 'Shadows Into Light', cursive;
  color: white;
  -moz-text-fill-color: white;
  -webkit-text-fill-color: white;
  -moz-text-stroke-color: black;
  -webkit-text-stroke-color: black;
  -webkit-font-smoothing: antialiased;
  text-shadow: 2px 2px 10px black;
}

  main div#carousel-feature .carousel-overlay img {
    height:auto;
    max-height: 100%;
    max-width: calc(100% - 50px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }


  main div#carousel-feature .carousel-overlay .title {
    font-size: 200px;
    line-height: 199px;
    -moz-text-stroke-width: 3px;
    -webkit-text-stroke-width: 1.5px;
  }

  main div#carousel-feature .carousel-overlay .subtitle {
    font-size: 65px;
    line-height: 64px;
    -moz-text-stroke-width: 2.5px;
    -webkit-text-stroke-width: 0.5px;
    padding-left: 75px;
    padding-right: 75px;
    font-weight: bolder;
  }

@media only screen and (min-width: 500px) and (max-width: 775px) {

  main div#carousel-feature .carousel-overlay .title {
    font-size: 150px;
    line-height: 149px;
  }

  main div#carousel-feature .carousel-overlay .subtitle {
    font-size: 50px;
    line-height: 49px;
  }
}

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

  main div#carousel-feature .carousel-overlay .title {
    font-size: 100px;
    line-height: 99px;
  }

  main div#carousel-feature .carousel-overlay .subtitle {
    font-size: 40px;
    line-height: 39px;
    -moz-text-stroke-width: 1px;
    -webkit-text-stroke-width: 1px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

/******************************************************************
 * Circles Call to Action
 ******************************************************************/

.circle-cta {
  margin-top: 50px;
}

.circle-cta .col-md-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.circle-cta h2 {
  font-weight: 400;
}
.circle-cta .col-md-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}

.circle-cta .circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  font-size: 35px;
  color: #fff;
  line-height: 80px;
  text-align: center;
  background: #3a3b3e;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}

.circle-cta .circle,
.circle-cta .circle a:link,
.circle-cta .circle a:visited,
.circle-cta .circle a:active,
.circle-cta .circle a:hover{
  color: #fff;
}

.circle-cta .circle:hover,
.circle-cta .circle:hover a:link,
.circle-cta .circle:hover a:visited,
.circle-cta .circle:hover a:active,
.circle-cta .circle:hover a:hover{
  color: #ddd;
}

/******************************************************************
 * Social
 ******************************************************************/

.social-container .social-item {
  height: 45px;
  width: 45px;
  line-height: 45px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
  color: #fff;
}

.social-container .social-item a:link,
.social-container .social-item a:visited,
.social-container .social-item a:hover,
.social-container .social-item a:active {
  color: #fff;
}

.social-container .social-item.facebook {
  background-color: #3a5795;
}

.social-container .social-item.facebook:hover {
  background-color: #4060a4;
}

.social-container .social-item.twitter {
  background-color: #78bdf1;
}

.social-container .social-item.twitter:hover {
  background-color: #8ac6f3;
}

.social-container .social-item.instagram {
  background-color: #3d739c;
}

.social-container .social-item.instagram:hover {
  background-color: #437eab;
}

.social-container .social-item.youtube {
  background-color: #cf3427;
}

.social-container .social-item.youtube:hover {
  background-color: #d83f32;
}

/******************************************************************
 * Layout: Home
 ******************************************************************/

body.layout-home #main-content {
  text-align: center;
}

body.layout-home #main-content h1 {
  font-size: 26px;
  text-transform: uppercase;
}

body.layout-home #main-content p {
  font-size: 14px;
}

body.layout-home.hide-navbar-brand nav.navbar .navbar-brand img {
  display: none;
}

/******************************************************************
 * Page: Committee
 ******************************************************************/

body[id^="page-about-committee"] .committee-member h1 {
  font-size: 25px;
}

body[id^="page-about-committee"] .committee-member h2 {
  font-size: 20px;
}

body[id^="page-about-committee"] .committee-member p {
  font-size: 13px;
}

body[id^="page-about-committee"] .committee-member img {
  width:100%;
  max-width:250px;
}

/******************************************************************
 * Footer
 ******************************************************************/

body main {

  /* Footer Height (180px) + Padding (25px) */
  padding-bottom:205px;
}

body footer {
  position: relative;
  margin-top: -180px;
  height: 180px;
  clear:both;
  padding-top:20px;
  background-color: #F7F7F7;
  text-align: center;
}

  body footer .social-container {
    margin-bottom: 10px;
  }

  body footer p {
    color: #6c757d !important;
    font-size: 11.5px;
  }

@media (max-width: 600px) {
  body main {

    /* Footer Height (250px) + Padding (25px) */
    padding-bottom:275px;
  }

  body footer {
    margin-top: -250px;
    height: 250px;
  }
}

/******************************************************************
 * YouTube
 ******************************************************************/

/* A 16:9 container that is at 100% width */
.youtube-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.youtube-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}