/* GLOBAL STYLES
-------------------------------------------------- */

/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  height: 100%;
  background-image: url(../img/cysca-bg-hr-min.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.table td, .table th {
    padding: .15rem;
    vertical-align: middle;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */

.carousel {
  margin-bottom: 2rem;
}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {
  bottom: 3rem;
  z-index: 10;
  background-color: #595959;
}

.sr-only {
  background-color: #000;
  color: #fff;
}

/* Declare heights because of positioning of img element */

.carousel-item {
  height: 37em;
  background-color: #595959;
}

/* MARKETING CONTENT
-------------------------------------------------- */

.marketing {
  background-color: white;
}

/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}

.marketing h2 {
  font-weight: 400;
}

.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}

.footer {
  height: 100%;
  margin-bottom: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
}

main {
  margin-bottom: 3rem;
}


/* Featurettes
------------------------- */

.row {
  padding-top: 1rem;
}

.featurette-divider {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Thin out the marketing headings */

h1.featurette-heading {
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05rem;
}

h2.featurette-heading {
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05rem;
}


.border-light {
  border-width: 0rem;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
    background-color: #595959;
  }
  .carousel-caption h1 {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.0;
    background-color: #595959;
  }

  .featurette-heading {
    font-size: 50px;
  }
  .container {
    max-width: 85%;
  }
}


.nav-tabs .nav-link.active {
  color: #0c5c68;
  font-weight: 700;
  border-color: #006800;
}

.nav-tabs .nav-link {
  color: #343a40;
  font-weight: 400;
  border-color: none;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  color: #343a40;
  border-color: #006800;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #343a40;
  background-color: #fff;
  border-color: #006800
}

@media (max-width: 62rem) {
  .card-group {
    flex-direction: row !important;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 2rem;
  }
  .carousel-caption img {
    max-width: 100%;
  }
}

.scoreboard {
  height: 555px;
}

table.table-hover tbody tr:hover {
  background-color: #343a40;
}

table a {
  color: #c8cacc;
}

/* WCAG 2.0 Compliance
-------------------------------------------------- */

.navbar-dark .navbar-nav .nav-link {
  color: #c8cacc;
  background-color: #343a40;

}

.btn-outline-info {
  color: #006271;
  border-color: #006271;
}

.btn-outline-info.disabled {
  color: #0c5c68;
  border-color: #0c5c68;
}

.btn-info {
  background-color: #0c5c68;
  border-color: #0c5c68;
}

.btn-primary {
  background-color: #0056b5;
  border-color: #0056b5;

}

.alert-danger code {
  color: #8a0050;
}

.alert-warning {
  color: #684f00;
  background-color: #fff3cd;
  border-color: #ffeeba
}

.btn-outline-success {
  color: #006800;
  border-color: #006800;
}

sup {
  color: #595359;
}

code {
  color: #af0061;
}

iframe {
  width: inherit;
  height: 1400px;
  border: 0;
  border-radius: 5px;
}

.marketing {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

#skip a {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  color: black;
  background: white;

}

#skip a:focus {
  position: static;
  width: auto;
  height: auto;
  color: black;
  background: white;
}

.card-group {
  background-color: #2b2f33;
}

.card {
  background-color: transparent;
  color: white;
  border: none;
  padding: none;
  border-width: 0px;
}

/* IE fixes CSS
-------------------------------------------------- */

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .card {
    max-width: none;
  }
  .card-img-top {
    max-width: 300px;
    max-height: 200px;
    margin-left: auto;
    margin-right: auto;
  }
  .footer {
    height: 100%;
    padding-bottom: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .carousel-control-next,
  .carousel-control-prev {
    top: 50%;
  }
  .card-group > .card {
    -ms-flex: 1 0 0%;
    flex: 1 0 100%;
    margin-bottom: 0px;
  }
}

@supports (-ms-ime-align: auto) {
  .footer {
    height: 100%;
    padding-bottom: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}