﻿/*
* Created By: MDC Web Services
* Description:  
* Revised:
*/

/*Masthead Code*/
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

.title-name h1 {
  font-size: 24px;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}
h2 {
  font-size: 32px;
  margin-bottom: 20px;
}
h3 {
  font-size: 22px;
}
h4 {
  font-size: 18px;
}
.site-masthead  {
  background-image: url("../img/site-bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  /* background-color: #09898B; */
  background-color: #1565c0;
  color: #fff;
  position: relative;
}

.site-masthead:before{
  content:'';
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.title-name.title-background span {
  background-color: rgba(0, 0, 0, 0.3);
  padding-left: 12px;
  padding-right: 12px;
}

#siteContent {
  margin-top: 0px;
}

.show-banner {
  display: block;
} 
.no-show-banner {
  display: none;
}
.clear-top {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.mt-20 {
  margin-top: 20px;
}
.mt-40 {
  margin-top: 40px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-40 {
  margin-bottom: 40px;
}
.mb-60 {
  margin-bottom: 60px;
}
.mr-10 {
  margin-right: 10px;
}
.ml-10 {
  margin-left: 10px;
}
.ml-20percent {
  margin-left: 20%;
}
.ml-10percent {
  margin-left: 10%;
}
.mb-less30 {
  margin-bottom: -30px;
}

.padding-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.highschool-home .row {
  margin-right: 0px;
  margin-left: 0px;
}
.no-left-padding {
  padding-left: 0px;
}

.circular-square {
  border-radius: 50%;
}
img.circular-square {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.bold-400 {
  font-weight: 400;
}
.middle-align {
  display: flex;
  align-items: center;
}
ul {
  padding-left: 25px;
}
.checkmark-list ul {
  list-style-type:none;
  padding-left: 0px;
}
.col-sm-6.checkmark-list {
  padding-left: 0px;
}
.checkmark-list .fa.fa-check-circle-o {
  /* margin-right: 10px; */
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-size: 24px; 
  line-height: 0.1em;
}

.quick-facts-list .description {
    margin-left: 5px;
}

.quick-facts-list li {
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  border-bottom: none;
}
.highschool-home h3 a:link,
.highschool-home h3 a:visited,
.highschool-home h4 a:link,
.highschool-home h4 a:visited {
  text-decoration: none !important;
  color: #005dab;
}

.highschool-home h3 a:hover,
.highschool-home h3 a:active,
.highschool-home h3 a:focus,
.highschool-home h4 a:hover,
.highschool-home h4 a:active,
.highschool-home h4 a:focus  {
  text-decoration: underline  !important;
  color: #005dab;
}


a.btn.btn-primary {
  color: #fff !important;
}

/* Homepage */
.banner {
  background: url(../img/school-bg.jpg) no-repeat 0 0;
  background-size: cover;
  background-position: top;
  height: 26em;
  background-blend-mode: overlay;
}

.parallax-leading {
  min-height: 465px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.banner-campus {
  background-image: url(../img/campus/campus-1.jpg);
}
.banner-campus-2 {
  background-image:url(../img/campus/campus-2.jpg);

}

.gray-area-full-width {
  background-color: #EEEEEE;
  padding-top: 50px;
  padding-bottom: 50px;
}

.btn.btn-default.pathway {
  border-radius: 25px;
  border-color: #1565c0;
  color: #1565c0;
  margin-right: 12px;
  margin-bottom: 12px;
}  

.btn.btn-default.pathway a:link,
.btn.btn-default.pathway a:visited {
  border-color: #1565c0;
  color: #1565c0;
}

.btn.btn-default.pathway:hover,
.btn.btn-default.pathway:active,
.btn.btn-default.pathway:focus {
  color: #fff;
  background-color:  #1565c0;
  text-decoration: none !important;
}


.search .col-sm-9 {
  padding-right: 0px;
  padding-left: 0px;
}
.search .col-sm-3 {
  padding-left: 0px;
}

/* 5 columns */
.parent-center {
  display: flex;
  justify-content: center;
}
.child {
  align-self: center;
  /* padding-left: 40px;
  padding-right: 40px; */
}
.col-half-offset {
  margin-left: 4.166666667%;
}
/*  */
.gray-background {
  background-color: #EEEEEE;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.gray-background img {
  margin-bottom: 20px;
}

.row.fix.equal-height .col-sm-12.col-md-4 {
  flex-wrap: wrap;
  display: grid;
  grid-auto-flow: column;
  gap: 5%;
}

.parent-center {
  display: flex;
  justify-content: center;
}
.child {
  align-self: center;
  /* padding-left: 40px;
  padding-right: 40px; */
}
.col-half-offset {
  margin-left: 4.166666667%;
}

.gray-box {
  background-color: #eee;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.col-md-6.gray-box {
  width: 49% !important;
}
.col-md-6.gray-box-offset {
  width: 45% !important;
}

.highschool-home.programs .gray-area-full-width.intro {
  margin-top: -20px;
}


/* Calendar Widget  */
.dual-enrollment-cal {
    padding: 10px;
}

.localist-widget ul.unstyled.list-border {
  padding-left: 0px;
  list-style: none;
}
.localist-widget ul.unstyled.list-border .col-sm-10 {
  padding-left: 40px;
  padding-right: 0px;
}
.localist-widget ul.unstyled.list-border .col-sm-10 h4 {
  margin-top: 0px;
}
.localist-widget .cal-date .day {
  padding-top: 0px;
}
.localist-widget .cal-date {
  box-shadow: none;
}
.localist-widget .cal-date .month {
  background-color: transparent;
  padding-top: 10px;
}
.localist-widget .cal-date .day,
.localist-widget .cal-date .month {
  color: #333333;
  line-height: 1.1;
}
.localist-widget ul.unstyled.list-border .col-sm-2 {
  padding-left: 0px;
}
.localist-widget .time {
  margin-top: -10px;
}
.localist-widget .location {
  margin-top: -10px;
}
/* end Calendar Widget */

/* Calendar widget - for /highschool/dual-enrollment/ */
.dual-enrollment-cal h3 {
  font-size: 14px;
  margin-top: 0px;
}
.dual-enrollment-cal .col-sm-10 {
  padding-left: 60px;
}
.dual-enrollment-cal .cal-date {
  border: 1px solid #ddd;
}
@media (max-width: 992px) {
  .dual-enrollment-cal .col-sm-4 {
    width: 100%;
    margin-bottom: 20px;
  }
  .dual-enrollment-cal .col-sm-10 {
    padding-left: 10px;
  }
}
/*  end Calendar Widget - for /highschool/dual-enrollment/ */

.dual-enrollment .panel-group .panel {
  border-radius: 4px;
  border-color: #ddd;
}

.dual-enrollment .panel-body {
  padding: 15px;
}
.bread-crumbs {
  background-color: #F2F2F2;
}

.bread-crumbs .container {
  padding-top: 15px;
  padding-bottom: 15px;
}

.highlight-header th {
  font-weight: 400;
  font-size: 16px;
  padding-left: 20px;
  padding-right: 40px;
  background-color: #414141;
}

.highlight-header th.col-xs-4,
tr th {
  text-align: left;
  vertical-align: middle;
}

.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 15px;
}
.table-bordered > tbody > tr > th div {
  font-weight: 400;
}

@media only screen and (max-width: 40em) {
    .table-reformat td, th {
      display: revert;
    }
}

#show_hide {
  text-decoration: underline;
}
.program-description-div {
  padding-top: 25px;
  padding-bottom: 25px;
}

.text-background {
  background-color: #414141;
  color: #fff;
  padding-left: 10px;
}

.more-info-link:hover {
  cursor: pointer;
}

.mdc-info .content-info {
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
}


.anchor-margin:before {
  content: "";
  display: block;
  height: 160px;
  margin: -160px 0 0;
}

.panel-default {
  /*border-color: transparent;*/
  border-color: #ddd;
}

.panel-body {
    padding: 15px;
  /*padding-left: 0px;*/
}
.panel-group {
  margin-bottom: 0px;
}

.thumbnail {
  padding: 0px;
  margin-bottom: 0px;
  line-height: 1.42857143;
  background-color: transparent;
  border:none;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
  -o-transition: border .2s ease-in-out;
  transition: border .2s ease-in-out;
}
figure {
  margin: 0px;
}


/* .row.boxes {
  display: flex; 
}
#box-1, #box-2, #box-3 {
  flex: 1; 
} */
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
.w3-animate-bottom-1 {position:relative;animation:animatebottom 0.9s}@keyframes animatebottom{from{bottom:-120px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-bottom-2 {position:relative;animation:animatebottom 1.3s}@keyframes animatebottom{from{bottom:-120px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-bottom-3 {position:relative;animation:animatebottom 1.7s}@keyframes animatebottom{from{bottom:-120px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-bottom-4 {position:relative;animation:animatebottom 1.9s}@keyframes animatebottom{from{bottom:-120px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-bottom-5 {position:relative;animation:animatebottom 2.1s}@keyframes animatebottom{from{bottom:-120px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 1.2s}@keyframes animatezoom{from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1}}

/* Skinny masthead */
.title-area {
  height: 120px;	
}

/* Academic programs search */
.action-field .form-control {
    height: 40px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.action-field .input-group-addon {
    border-radius: 0;
}

.action-field {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-right: 15px;
}

.input-group-addon {
    background-color: #005dab;
    color: #fff;
}

.input-group-search {
    padding: 0;
}

.btn-search {
    background-color: #005dab;
    border: none;
}

.action-field span.glyphicon.glyphicon-search {
    padding-left: 8px;
    padding-right: 8px;
}

.typeahead li a:link, .typeahead li a:visited {
  color: #333 !important;
  text-decoration: none !important;
}

.typeahead li a:hover,
.typeahead li a:active,
.typeahead li a:focus {
  color: #fff !important;
}

/*Responsive Queries*/
@media (max-width: 349px) {
  .banner {
    height: 7em;
  }
}

@media (min-width: 350px) and (max-width: 480px) {
  .banner {
    height: 9em;
  }

  .title-area {
    height: 90px;
  }
}

@media (min-width: 400px) and (max-width: 640px) {
  .banner {
    height: 12em;
  }
}


@media (max-width: 640px) {
  
}

@media (min-width: 641px) and (max-width: 767px) {
  .banner {
    height: 12em;
  }
}


/*Responsive Queries - Skinny masthead */

@media (max-width: 767px) {
  .site-masthead {
      padding:10px 0;
      height: 130px;
  }
  /* .title-container {
      height: 50px;
  } */
  .title-container {
      height: inherit;
      display: table-cell;
      vertical-align: middle;
  }
  .title-name {
      /* margin-top: 30px; */
      width: auto;
  }
  .title-name h1 {
      font-size: 36px;
      /* margin-top: -20px; */
  }
  .mobile-only-directory {
    display: block;
  } 
  .table-directory {
    display: none;
  }
  .intro .container.middle-align,
  .intro .container.middle-align {
    display: block;
  }
  .intro img.circular-square {
    width: 20%;
  }
  .search .col-sm-9 {
    width: 50%;
  }
  .search .col-sm-3 {
    width: 25%;
  }
  .cal-date {
    margin-bottom: 10px;
  }
  .localist-widget ul.unstyled.list-border .col-sm-10 {
    padding-left: 0px;
  }
  #institution-name {
    line-height: 1;
    font-size: 23px;
  }
}

@media (min-width: 768px) {
  .title-area { 
    width: 100%; 
    position: relative;
  }
  .title-container { 
    height: 100%;
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    display: table; 
    }
  .title-name {
    display: table-cell; 
    vertical-align: middle;
  }
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
  .title-name h1 {
      font-size: 36px;
  }
  .site-masthead {
      height: auto;
  }	
  .title-name h1 {
      height: auto;
  }	
  .localist-widget .cal-date {
    margin-right: 0px;
    margin-left: auto;
  }
  .localist-widget ul.unstyled.list-border .col-sm-10 {
    padding-left: 0px;
  }
  .localist-widget ul.unstyled.list-border .col-sm-2 {
    width: auto;
  }
  .banner {
    height: 16em;
  }
}

@media (min-width: 768px) and (max-with: 1024px) {
  #institution-name {
    line-height: 1;
    font-size: 32px;
  }
}

@media (min-width: 992px) {
  .title-area {
      height: 120px;	
  }
  .col-md-2.five-col{
    width: 19.666667%;
  }
}


@media (max-width: 992px) {
  .col-5 .col-half-offset {
    width: 100%;
  }
  .col-5 .col-xs-2 {
    width: 100%;
  }
  /* .col-5 img.img-responsive {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
  } */
  .col-5 .col-half-offset {
    margin-left: 0%;
  }
  .row.bottom-3cols .col-sm-4 {
    width: 100%;
  }
  .col-md-6.gray-box {
    width: 100% !important; 
  }
  .col-md-6.gray-box-offset {
    width: 100% !important;
  }
  #box1-search {
    margin-bottom: 20px;
  }
  #box2-programs {
    margin-right: 10px;
  }
  .ml-20percent,
  .ml-10percent {
    margin-left: auto;
    /* margin-right: auto; */
    width: 100%;
  }
  .col-md-10.offset-md-2.ml-10percent .ml-10 {
      margin-left: 0px;
  }
  
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
  .title-name h1 {
    font-size: 38px;
  }
}

@media (max-width: 1199px) {
  .parallax-leading {
    background-attachment: scroll;
    min-height: 200px;
  }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .title-name h1 {
      font-size: 38px;
  }
  .banner {
    height: 30em;
  }
}

@media (min-width: 1201px) and (max-width: 1600px) {
  .title-name h1 {
    font-size: 38px;
  }
  .banner {
    height: 32em;
  }
}

@media (min-width: 1600px) { 
  .banner {
    height: 42em;
  }
}


/* Google Translate */
.goog-te-gadget {
  text-align: end;
}