/* 
#######################################################################
#                                                                     #
#                                                                     #
#                  G E N E R A L   P A G E   B O D Y                  #
#                                                                     #
#                                                                     #
#######################################################################
*/

/*
###############################
# GENERAL: Fonts
###############################
# General definitions for the
# whole site... any or all of 
# these can be deleted if they 
# aren't changed...
###############################
*/

a {
  color: #007bff;
}

a:hover,
a:focus {
  color: #0056b3;
}

/* 
#######################################################################
#                                                                     #
#                                                                     #
#                       P A G E   W R A P P E R                       #
#                                                                     #
#                                                                     #
#######################################################################
*/

/*
###############################
# PAGE WRAPPER: Header
###############################
# Additional Responsive fixes 
# may need to be added
###############################
*/

.logo {
  background-image: url("/assets/logo.svg"); /* point to proper file */
  float: left;
  width: 26em;
  max-width: 80%;
  background-position: center;
}
.logo2 {
  background-image: url("/assets/logo_sc_icon.png");
  float: right;
  width: 5em;
  max-width: 20%;
  background-position: center;
}

/*
###############################
# PAGE WRAPPER: Footer
###############################
# Color definitions for header 
# and footer nav... any or all 
# of these can be deleted if 
# they aren't changed...
###############################
*/

nav.navbar {
  background-color: #fafafa; /* header navbar background */
  border-bottom-color: #ededed; /* header navbar bottom border color */
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(36, 55, 70, 1); /* header nav bar link color */
  font-weight: 500; 
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7); /* header nav bar link hover color */
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .active > .nav-link {
  color: rgba(0, 0, 0, 0.9); /* header nav bar "active" text color */
}

.nav-item:hover,
.nav-item.active {
  border-left-color: #006574; /* active/hover "bar" color */
}

@media only screen and (min-width: 576px) {
  .navbar-light .nav-item:hover,
  .navbar-light .nav-item.active,
  .navbar-dark .nav-item:hover,
  .navbar-dark .nav-item.active,
  .nav-item:hover,
  .nav-item.active {
    border-bottom-color: #006574; /* active/hover "bar" color */
  }
}

.multitabs .multitabs-tabs .nav-link:hover,
.multitabs .multitabs-tabs .nav-link:focus,
.multitabs .multitabs-tabs .nav-link.active {
  outline: none;
  border-bottom-color: #006574;
}

/*
###############################
# PAGE WRAPPER: Hero
###############################
# Jumbotron text definitions:
# any or all of these (or any 
# attribute) can be deleted 
# if they aren't changed...
###############################
*/

.jumbotron span.pre-title {
  font-size: 1.5em;
  line-height: 1.25;
  font-weight: 300;
  color: #1c2750;
}

.jumbotron h1.display-4 {
  font-size: 2rem;
  font-weight: 400;
  color: #1c2750;
}

.jumbotron p.lead {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  color: #1c2750;
  margin-bottom: 0;
}
#page-home .jumbotron {
  background-image: url("/assets/hero-home.jpg");
}
#page-home .jumbotron h1.display-4,
#page-home .jumbotron p.lead,
.jumbotron-short.jumbotron h1.display-4,
.jumbotron-short.jumbotron p.lead {
  color: #fff;
  max-width: none;
}
#page-students .jumbotron {
  background-color: #f6f4f7;
  background-image: linear-gradient(
      to right,
      rgba(246, 244, 247, 1) 20%,
      rgba(246, 244, 247, 0) 70%,
      rgba(246, 244, 247, 0) 100%
    ),
    url("/assets/hero-families.jpg");
  background-image: linear-gradient(
      to right,
      rgba(246, 244, 247, 0.85) 8.2%,
      rgba(246, 244, 247, 0.43) 32.8%,
      rgba(246, 244, 247, 0) 82%,
      rgba(246, 244, 247, 0) 100%
    ),
    linear-gradient(
      to right,
      rgba(246, 244, 247, 0.7) 20em,
      rgba(246, 244, 247, 0.66) 35em,
      rgba(246, 244, 247, 0) 50em,
      rgba(246, 244, 247, 0) 100%
    ),
    url("/assets/hero-families.jpg");
  background-position-x: 8vw;
}
#page-teachers .jumbotron {
  background-color: #f6f4f7;
  background-image: linear-gradient(
      to right,
      rgba(246, 244, 247, 1) 20%,
      rgba(246, 244, 247, 0) 70%,
      rgba(246, 244, 247, 0) 100%
    ),
    url("/assets/hero-teachers.jpg");
  background-image: linear-gradient(
      to right,
      rgba(246, 244, 247, 0.85) 8.5%,
      rgba(246, 244, 247, 0.43) 34%,
      rgba(246, 244, 247, 0) 85%,
      rgba(246, 244, 247, 0) 100%
    ),
    linear-gradient(
      to right,
      rgba(246, 244, 247, 0.8) 26.8em,
      rgba(246, 244, 247, 0.75) 46.9em,
      rgba(246, 244, 247, 0) 67em,
      rgba(246, 244, 247, 0) 100%
    ),
    url("/assets/hero-teachers.jpg");
  background-position-x: 11vw;
  background-position-y: 56%;
}
#page-test-coordinators .jumbotron {
  background-color: #f6f4f7;
  background-image: linear-gradient(
      to right,
      rgba(246, 244, 247, 1) 20%,
      rgba(246, 244, 247, 0) 70%,
      rgba(246, 244, 247, 0) 100%
    ),
    url("/assets/hero-test-coordinators.jpg");
  background-image: linear-gradient(
      to right,
      rgba(246, 244, 247, 0.85) 8.5%,
      rgba(246, 244, 247, 0.43) 34%,
      rgba(246, 244, 247, 0) 85%,
      rgba(246, 244, 247, 0) 100%
    ),
    linear-gradient(
      to right,
      rgba(246, 244, 247, 0.9) 28.4em,
      rgba(246, 244, 247, 0.85) 49.7em,
      rgba(246, 244, 247, 0) 71em,
      rgba(246, 244, 247, 0) 100%
    ),
    url("/assets/hero-test-coordinators.jpg");
  background-position-x: 18%;
  background-position-y: 27%;
}
#page-coordinators .jumbotron {
  background-color: #f6f4f7;
  background-image: linear-gradient(
      to right,
      rgba(246, 244, 247, 1) 20%,
      rgba(246, 244, 247, 0) 70%,
      rgba(246, 244, 247, 0) 100%
    ),
    url("/assets/hero-tech-coordinators.jpg");
  background-image: linear-gradient(
      to right,
      rgba(246, 244, 247, 0.85) 8.5%,
      rgba(246, 244, 247, 0.43) 34%,
      rgba(246, 244, 247, 0) 85%,
      rgba(246, 244, 247, 0) 100%
    ),
    linear-gradient(
      to right,
      rgba(246, 244, 247, 0.8) 26.8em,
      rgba(246, 244, 247, 0.75) 46.9em,
      rgba(246, 244, 247, 0) 67em,
      rgba(246, 244, 247, 0) 100%
    ),
    url("/assets/hero-tech-coordinators.jpg");
  background-position-y: 50%;
}
.jumbotron-short.jumbotron {
  background-image: url("/assets/hero-home.jpg");
}
/*
###############################
# PAGE WRAPPER: Sections
###############################
# body sections... can be 
# deleted if not changed...
###############################
*/

.pageBody {
  /* includes the complete area between the header and footer */
}

.pageBodyTop {
  /* includes the area covering the jumbotron and first full row of region(s) */
}

.layout01Region01,
.layout01Region02,
.layout01Region03,
.layout01Region04,
.layout01Region05 {
}

.layout02Region01and02,
.layout02Region01,
.layout02Region02,
.layout02Region03,
.layout02Region04,
.layout02Region05 {
}

.layout03Region01and02and03,
.layout03Region01,
.layout03Region02,
.layout03Region03,
.layout03Region04,
.layout03Region05 {
}

.layout04Region01,
.layout04Region02and03and04,
.layout04Region02,
.layout04Region03,
.layout04Region04,
.layout04Region05 {
}

.layout05Region01,
.layout05Region02,
.layout05Region03,
.layout05Region04,
.layout05Region05 {
}

/* 
#######################################################################
#                                                                     #
#                                                                     #
#                      P A G E   E L E M E N T S                      #
#                                                                     #
#                                                                     #
#######################################################################
*/

/*
###############################
# ELEMENTS: Quick Links
###############################
# Any or all of these (or any 
# attribute) can be deleted 
# if they aren't changed...
###############################
*/

#footerQuickCards {
  background-color: #006574;
}

.btn-quicklink {
  color: #212529;
  background-color: #abe5ee;
  border-color: #fff;
}

.btn-quicklink:hover {
  color: #212529;
  background-color: #9bd0d8;
  border-color: #fff;
}
#page-coordinators #assocRes-tabs {
  display: none;
}

/*
###############################
# ELEMENTS: Buttons
###############################
# Color definitions for 
# buttons... any or all of 
# these can be deleted if 
# they aren't changed...
###############################
*/

.btn-primary {
  color: #fff;
  background-color: #006574;
  border-color: #006574;
}

.btn-primary:hover,
.btn-primary:focus {
  color: #fff;
  background-color: #008195;
  border-color: #008195;
}

/*
#######################################################################
#                                                                     #
#                                                                     #
#                 C A R D S   &   C A R D   D E C K S                 #
#                                                                     #
#                                                                     #
#######################################################################
*/

/*
###############################
# CARDS: Basic Card Designs
###############################
# card hover background 
# color... can be deleted if 
# not changed...
###############################
*/

.card.system:hover,
.card.text-only:hover,
.card.photo:hover,
.card.photo-left:hover,
.card.emblem:hover,
.card.emblem-left:hover {
  background-color: #f0f4f5;
}

.card.photo.flip .card-header img {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

/*
#######################################################################
#                                                                     #
#                                                                     #
#                      M E D I A   Q U E R I E S                      #
#                                                                     #
#                                                                     #
#######################################################################
*/

/*
###############################
# MEDIA: (xs) < 576px
###############################
*/

@media only screen and (max-width: 575.98px) {
  .jumbotron .container span {
    display: block;
  }

  #page-students .jumbotron {
    background-position-x: 80%;
  }
  #page-teachers .jumbotron {
    background-position-x: 70%;
  }
  #page-test-coordinators .jumbotron {
    background-image: linear-gradient(
        to right,
        rgba(246, 244, 247, 0.85) 8.5%,
        rgba(246, 244, 247, 0.43) 34%,
        rgba(246, 244, 247, 0) 85%,
        rgba(246, 244, 247, 0) 100%
      ),
      linear-gradient(
        to right,
        rgba(246, 244, 247, 0.75) 28.4em,
        rgba(246, 244, 247, 0.85) 49.7em,
        rgba(246, 244, 247, 0) 71em,
        rgba(246, 244, 247, 0) 100%
      ),
      url("/assets/hero-test-coordinators.jpg");
    background-position-x: 90%;
  }
  #page-coordinators .jumbotron {
    background-image: linear-gradient(
        to right,
        rgba(246, 244, 247, 0.85) 8.5%,
        rgba(246, 244, 247, 0.43) 34%,
        rgba(246, 244, 247, 0) 85%,
        rgba(246, 244, 247, 0) 100%
      ),
      linear-gradient(
        to right,
        rgba(246, 244, 247, 0.7) 26.8em,
        rgba(246, 244, 247, 0.65) 46.9em,
        rgba(246, 244, 247, 0) 67em,
        rgba(246, 244, 247, 0) 100%
      ),
      url("/assets/hero-tech-coordinators.jpg");
    background-position-x: 80%;
  }
}

/*
########################################
# MEDIA: (m to l) >= 576px and < 992px
########################################
*/

@media only screen and (min-width: 576px) and (max-width: 991.98px) {
  .jumbotron .container span {
    display: block;
  }

  #page-students .jumbotron {
    background-position-x: 70%;
  }
  #page-teachers .jumbotron {
    background-image: linear-gradient(
        to right,
        rgba(246, 244, 247, 0.85) 8.5%,
        rgba(246, 244, 247, 0.43) 34%,
        rgba(246, 244, 247, 0) 85%,
        rgba(246, 244, 247, 0) 100%
      ),
      linear-gradient(
        to right,
        rgba(246, 244, 247, 0.8) 16.8em,
        rgba(246, 244, 247, 0.75) 16.9em,
        rgba(246, 244, 247, 0) 47em,
        rgba(246, 244, 247, 0) 100%
      ),
      url("/assets/hero-teachers.jpg");
    background-position-x: 50%;
  }
  #page-test-coordinators .jumbotron {
    background-image: linear-gradient(
        to right,
        rgba(246, 244, 247, 0.85) 8.5%,
        rgba(246, 244, 247, 0.43) 34%,
        rgba(246, 244, 247, 0) 85%,
        rgba(246, 244, 247, 0) 100%
      ),
      linear-gradient(
        to right,
        rgba(246, 244, 247, 0.75) 18.4em,
        rgba(246, 244, 247, 0.85) 19.7em,
        rgba(246, 244, 247, 0) 37em,
        rgba(246, 244, 247, 0) 100%
      ),
      url("/assets/hero-test-coordinators.jpg");
    background-position-x: 90%;
  }
  #page-coordinators .jumbotron {
    background-image: linear-gradient(
        to right,
        rgba(246, 244, 247, 0.85) 8.5%,
        rgba(246, 244, 247, 0.43) 34%,
        rgba(246, 244, 247, 0) 85%,
        rgba(246, 244, 247, 0) 100%
      ),
      linear-gradient(
        to right,
        rgba(246, 244, 247, 0.8) 6.8em,
        rgba(246, 244, 247, 0.75) 23.9em,
        rgba(246, 244, 247, 0) 27em,
        rgba(246, 244, 247, 0) 100%
      ),
      url("/assets/hero-tech-coordinators.jpg");
    background-position-x: 90%;
  }
}

/*
########################################
# MEDIA: (l to xl) >= 992px and < 1200px
########################################
*/
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  #page-students .jumbotron {
    background-position-x: 8vw;
  }
  #page-teachers .jumbotron {
    background-image: linear-gradient(
        to right,
        rgba(246, 244, 247, 0.85) 8.5%,
        rgba(246, 244, 247, 0.43) 34%,
        rgba(246, 244, 247, 0) 85%,
        rgba(246, 244, 247, 0) 100%
      ),
      linear-gradient(
        to right,
        rgba(246, 244, 247, 0.8) 16.8em,
        rgba(246, 244, 247, 0.75) 26.9em,
        rgba(246, 244, 247, 0) 50em,
        rgba(246, 244, 247, 0) 100%
      ),
      url("/assets/hero-teachers.jpg");
  }
  #page-test-coordinators .jumbotron {
    background-image: linear-gradient(
        to right,
        rgba(246, 244, 247, 0.85) 8.5%,
        rgba(246, 244, 247, 0.43) 34%,
        rgba(246, 244, 247, 0) 85%,
        rgba(246, 244, 247, 0) 100%
      ),
      linear-gradient(
        to right,
        rgba(246, 244, 247, 0.9) 8.4em,
        rgba(246, 244, 247, 0.85) 39.7em,
        rgba(246, 244, 247, 0) 51em,
        rgba(246, 244, 247, 0) 100%
      ),
      url("/assets/hero-test-coordinators.jpg");
  }
  #page-coordinators .jumbotron {
    background-image: linear-gradient(
        to right,
        rgba(246, 244, 247, 0.85) 8.5%,
        rgba(246, 244, 247, 0.43) 34%,
        rgba(246, 244, 247, 0) 85%,
        rgba(246, 244, 247, 0) 100%
      ),
      linear-gradient(
        to right,
        rgba(246, 244, 247, 0.8) 6.8em,
        rgba(246, 244, 247, 0.75) 16.9em,
        rgba(246, 244, 247, 0) 53em,
        rgba(246, 244, 247, 0) 100%
      ),
      url("/assets/hero-tech-coordinators.jpg");
    background-position-x: 90%;
  }
}