@charset "utf-8";
body {
    margin-top: 55px;
}

.navbar {
  background-color: #ff0000;
}

.navbar .navbar-brand {
  color: #ecf0f1;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #ffffff;
}
.navbar .navbar-text {
  color: #ecf0f1;
}
.navbar .navbar-text a {
  color: #ffffff;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
  color: #ffffff; 
}
.navbar .navbar-nav .nav-link {
  color: #ecf0f1;
  border-radius: .25rem;
  margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #ffffff;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #ffffff;
  background-color: #0f00ff;
}
.navbar .navbar-toggler {
  border-color: #0f00ff;
}
.navbar .navbar-toggler:hover,
.navbar .navbar-toggler:focus {
  background-color: #0f00ff;
}
.navbar .navbar-toggler .navbar-toggler-icon {
  color: #ecf0f1;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #ecf0f1;
}
.navbar .navbar-link {
  color: #ecf0f1;
}
.navbar .navbar-link:hover {
  color: #ffffff;
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ecf0f1;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    background-color: #0f00ff;
  }
#mathCourses .exSmall {
    width: 100%;
}
#mathCourses .exSmall img {
    width: 60%;
    height: auto;
}
#mathCourses .exSmall h4 {
    width: 60%;
    margin-left: 20%;
}
#mathTeachers img {
    width: 80%;
}
#mathTeachers h4 {
    width: 80%;
    padding-left: 10%;
}
#mathHighlights img {
    width: 90%;
    height: auto;
}
#mathHighlights p {
    width: 90%;
    padding-left: 5%;
}







}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ecf0f1;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    background-color: #0f00ff;
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ecf0f1;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    background-color: #0f00ff;
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ecf0f1;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #ffffff;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #ffffff;
    background-color: #0f00ff;
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #ecf0f1;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #ffffff;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #ffffff;
  background-color: #0f00ff;
}.navbar-toggler {
    color: #FFFFFF;
}
.navbar-brand {
    background-image: url(../images/svg/sahs_bg.svg);
    background-repeat: no-repeat;
    background-size: 35px auto;
    background-position: 0% 3px;
    padding-left: 55px;
}
#hero {
    position: relative;
}
#hero h1 {
    position: absolute;
    color: #FFFFFF;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
    font-size: 4em;
    text-shadow: 2px 2px 5px #3C3C3C;
    top: 10px;
    left: 10px;
}

#hero .img-fluid {
    width: 100%;
    height: 100%;
}
#highlights img {
    width: 75px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
#highlights h2 {
    text-align: center;
}
#highlights p {
    text-align: center;
}
#feature {
    background-color: #346F7E;
    background-image: -webkit-linear-gradient(270deg,rgba(52,111,126,1.00) 0%,rgba(72,150,170,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(52,111,126,1.00) 0%,rgba(72,150,170,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(52,111,126,1.00) 0%,rgba(72,150,170,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(52,111,126,1.00) 0%,rgba(72,150,170,1.00) 100%);
}
#feature h2 {
    color: #FFFFFF;
    text-align: center;
}
#feature p {
    color: #FFFFFF;
    font-size: 1.2em;
}
#sciencecourses {
}

#sciencecourses h3 {
    text-align: center;
    color: #008CFF;
}
#sciencecourses img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#sciencecourses p {
    text-align: center;
    font-size: 1.2em;
}
#technologyVideo {
    background-color: #57588B;
    background-image: -webkit-linear-gradient(270deg,rgba(87,88,139,1.00) 0%,rgba(71,57,160,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(87,88,139,1.00) 0%,rgba(71,57,160,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(87,88,139,1.00) 0%,rgba(71,57,160,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(87,88,139,1.00) 0%,rgba(71,57,160,1.00) 100%);
}
#technologyVideo h2 {
    color: #FFFFFF;
    text-align: center;
}
#technologyVideo video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
    padding-bottom: 10px;
}
#technologyThumb {
    background-color: #47399F;
}
#technologyThumb h2 {
    color: #FFFFFF;
    text-align: center;
}
#technologyThumb img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#technologyThumb a {
    text-align: center;
    display: block;
    color: #FFFFFF;
    font-size: 1.8em;
    margin-bottom: 20px;
}
#technologyThumb a:hover {
    color: #A7A7A7;
}
#engineeringVideo  , #engineeringCarousel, #localFirms{
    padding-top: 30px;
    background-color: #4F4E4A;
}
#engineeringVideo a {
    color: #FFFFFF;
}
#engineeringVideo p  , #engineeringCarousel p, #localFirms p{
    color: #FFFFFF;
}
#engineeringCarousel h3 , #localFirms h3{
    color: #FFFFFF;
}
#engineeringCarousel img {
    width: 100%;
    height: auto;
}
#mathCourses img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#mathTeachers img , #mathHighlights img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#mathCourses, #mathTeachers {
    background-color: #5C7497;
    padding-top: 20px;
    padding-bottom: 20px;
}
#mathHighlights {
    background-color: #5C7497;
    background-image: -webkit-linear-gradient(270deg,rgba(92,116,151,1.00) 0%,rgba(56,71,92,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(92,116,151,1.00) 0%,rgba(56,71,92,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(92,116,151,1.00) 0%,rgba(56,71,92,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(92,116,151,1.00) 0%,rgba(56,71,92,1.00) 100%);
}
#mathCourses .mathCourseBg {
    background-color: #FFFFFF;
    padding-bottom: 15px;
}
#mathCourses .mathCourseBox {
    position: relative;
    margin-top: 20px;
}
#mathCourses h4 {
    position: absolute;
    width: 100%;
    top: 0%;
    text-align: center;
    font-size: 1.2em;
    background-color: rgba(0,0,0,0.75);
    color: #FFFFFF;
    padding-bottom: 3px;
}
#mathTeachers h4 {
    font-size: 1em;
    color: #FFFFFF;
    background-color: rgba(0,0,0,0.75);
    text-align: center;
    padding-bottom: 3px;
    position: relative;
    top: -22px;
}
#mathHighlights .mathHighlightsTitle {
    background-color: rgba(255,255,255,1.00);
    margin-bottom: 20px;
    border-radius: 10px;
    padding-top: 4px;
    border: thin solid rgba(0,0,0,1.00);
}
#mathHighlights p {
    background-color: rgba(255,255,255,1.00);
    height: 80px;
    padding-left: 10px;
    padding-right: 10px;
}

























footer {
    text-align: center;
    color: #FFFFFF;
    background-color: #21221C;
    background-image: -webkit-linear-gradient(270deg,rgba(33,34,28,1.00) 0%,rgba(0,0,0,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(33,34,28,1.00) 0%,rgba(0,0,0,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(33,34,28,1.00) 0%,rgba(0,0,0,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(33,34,28,1.00) 0%,rgba(0,0,0,1.00) 100%);
}








@media (min-width:576px) and (max-width:767px){
#highlights h2 {
    text-align: center;
}
#hero h1 {
    font-size: 2.4em;
}
#technologyVideo video {
    width: 100%;
}
#mathCourses .sm2 {
    width: 50%;
}
#mathCourses .sm3 {
    width: 33.333%;
}
#mathCourses .sm2 img {
    width: 64%;
}
#mathCourses .mathCourseBox {
    margin-bottom: 30px;
}
#mathCourses .sm2 h4 {
    width: 64%;
    margin-left: 18%;
}
#mathHighlights p {
    font-size: 0.8em;
}








}

@media (min-width:768px) and (max-width:991px){
#hero h1 {
    font-size: 3em;
}
#technologyVideo video {
    width: 600px;
}
#mathCourses .mdToLg {
    width: 20%;
}



}

@media (min-width:992px) and (max-width:1199px){
#technologyVideo video {
    width: 800px;
}
#mathCourses .mdToLg {
    width: 20%;
}


}

@media (max-width:575px){
#hero h1 {
    font-size: 1.8em;
}
#technologyVideo video {
    width: 100%;
}


}
