/******************************************
     HOME PAGE SLIDER

     The images display 1140 px wide

*******************************************/

.slider-container { max-width:100%;  overflow:hidden; clear:both;  background-color:#fff; z-index:10; margin-top:0; }

.slider-container #slider { margin-bottom: 0; }
.slider-container #slider .col-md-12 { padding: 0; margin: 0; }
.slider-container #slider img {  position:relative; min-width:100%; top:0; left:0; right:0; }

.slider-container #slider .carousel       { height: 550px; margin-bottom: 0; }
.slider-container #slider .carousel .item { height: 100%; background-color: #333; }

.slider-container #slider .carousel .item .carousel-inner > .item > img {  position:absolute; top:0; left:0; min-width:100%; }
.slider-container #slider .carousel figcaption {
    position:absolute; 
    bottom:0;  
    left:0;  
    right:0;  
    margin:0;
    padding: 0 20px;  
    background:rgba(0, 0, 0, 0.8);
    color: white;  
    height: auto;
}

.slider-container #slider .carousel figcaption .slider-heading { 
    text-align: left; 
    font-weight: bold; 
    color:#ffffff; 
    font-size: 18px;
    line-height: 18px;
    margin: 10px 0;
}

.slider-container #slider .carousel figcaption .slider-text  { text-align: left; font-weight: bold; line-height:1.4em;}
.slider-container #slider .carousel figcaption a { text-decoration: none; color: #fff; }
.slider-container #slider .carousel figcaption a:hover { text-decoration: none; color: #fff;}
 #myCarousel a.carousel-control .glyphicon { top:50%; } 

@media screen and (min-width: 1023px) {
  .slider-container { }
}

@media screen and (max-width: 1022px) {
   .slider-container                         { height: 450px; margin-top: -20px; }
   .slider-container #slider .carousel       { height: 450px; margin-bottom: 0; }
   .slider-container #slider .carousel .item { height: 450px; background-color: #333; }
   .slider-container #slider .carousel figcaption { margin-bottom: 0; padding:  0 15px; font-size:14px; }
   .slider-container #slider .carousel figcaption .slider-heading  { margin:5px 0; padding-left: 0;  line-height: 16px; font-size:15px;} 
   #myCarousel a.carousel-control .glyphicon { top:200px; } 
}
@media (max-width: 991px) {
   .slider-container                         { height: auto; margin-top: 50px; }
   .slider-container #slider .carousel       { height: auto; margin-bottom: 0; }
   .slider-container #slider .carousel .item { height: auto; background-color: #333; }
   .slider-container #slider .carousel figcaption { margin-bottom: 0; padding: 0 15px; }
   #myCarousel a.carousel-control .glyphicon { top:150px; } 
}
@media (max-width: 900px) {
   .slider-container                         { height: auto; margin-top: 50px; }
   .slider-container #slider .carousel       { height: auto; margin-bottom: 0; }
   .slider-container #slider .carousel .item { height: auto; background-color: #333; }
   .slider-container #slider .carousel figcaption { margin-bottom: 0; padding: 0 15px; }
}


@media (max-width: 767px) {
  .slider-container                         { height: auto; margin-top: 50px; }
  .slider-container #slider .carousel       { height: auto; margin-bottom: 0; }
  .slider-container #slider .carousel .item { height: auto; }
  .slider-container #slider .carousel figcaption { margin-bottom: 0; padding: 0 10px; }
  .slider-container #slider .carousel figcaption .slider-heading  { font-size: 13px; line-height: 13px; margin:5px 0; padding:0;}
  .slider-container #slider .carousel figcaption .slider-text { font-size: 11px; margin:0; padding-bottom:2px; }
   #myCarousel a.carousel-control .glyphicon { top:140px; } 
}
@media (max-width: 680px) {
  .slider-container                         { height: auto; margin-top: 50px; }
  .slider-container #slider .carousel       { height: auto; margin-bottom: 0; }
  .slider-container #slider .carousel .item { height: auto; }
  .slider-container #slider .carousel figcaption { margin-bottom: 0; padding: 0 10px; }
   #myCarousel a.carousel-control .glyphicon { top:120px; }
}
@media (max-width: 600px) {
  .slider-container                         { height: auto; margin-top: 50px; }
  .slider-container #slider .carousel       { height: auto; margin-bottom: 0; }
  .slider-container #slider .carousel .item { height: auto; }
  .slider-container #slider .carousel figcaption { margin-bottom: 0; padding: 0 10px; }
   #myCarousel a.carousel-control .glyphicon { top:120px; }
}
@media (max-width: 450px) {
  .slider-container                         { height: 240px; margin-top: 50px;  }
  .slider-container #slider                 { padding:0; } 
  .slider-container #slider .carousel       { height: 240px; margin-bottom: 0; }
  .slider-container #slider .carousel .item { height: 240px; }
  .slider-container #slider .carousel figcaption { padding: 0; }
  .slider-container #slider .carousel figcaption .slider-heading  { font-size: 12px; margin:4px 0 0 10px; padding:3px 0; }
  .slider-container #slider .carousel figcaption .slider-text { font-size:10px;  padding:0 10px;  margin:0 0 3px 0; line-height:1.4em; }
   #myCarousel a.carousel-control .glyphicon { top:100px; }
}

@media (max-width: 400px) {
   .slider-container                          { height: 210px; }
   .slider-container #slider .carousel        { height: 210px; margin-bottom: 0; }
   .slider-container #slider .carousel .item  { height: 210px; }
    #myCarousel a.carousel-control .glyphicon { top:90px; }  
  

}
@media (max-width: 330px) {
   .slider-container                          { height: 180px; }
   .slider-container #slider .carousel        { height: 180px; margin-bottom: 0; }
   .slider-container #slider .carousel .item  { height: 180px; }
    #myCarousel a.carousel-control .glyphicon { top:80px; }  
}

@media (min-width: 1450px){
   .slider-container #slider .carousel       { margin-bottom: 0; }
   .slider-container #slider .carousel .item { height: 100%; background-color: #333; }
}

/******************************************
     Home page EMERGENCY BANNER
*******************************************/
.emergency-banner { display:block; width:100%; overflow:visible;  
  background:#555;
  margin-bottom: 2em; 
  margin-top: -20px; 
  padding: 10px; 
  border-bottom: 5px solid #cb0003;
  border-top: 5px solid #cb0003;
}

.emergency-banner .container { display: flex; }
#emergency-banner-image { position: relative; display: flex; align-items: center; float:left; padding:0 15px; }
.emergency-banner img { display: block; width: 75%; align-items: center; border: none; }
.emergency-banner h1  { color: #fcec00; font-weight:normal; margin-top: 0; }
.emergency-banner h2  { color: #fff; font-weight:normal; margin:0; }
.emergency-banner h3  { color: #fff; font-weight:normal; margin:10px 0 0 0; }
.emergency-banner h3 a { color: #fcec00; }
#emergency-banner-text { padding:10px; }

@media (max-width: 1023px) {
  .emergency-banner { margin-top: 50px; margin-bottom: -40px; }
}
@media (max-width: 767px) {
  .emergency-banner { margin-top: 50px; margin-bottom: -40px; padding:10px; }
}

@media (max-width: 400px) {
  #emergency-banner-image { position: relative; align-items: start; float:left; padding:0 10px; }
  .emergency-banner { margin-top: 50px; margin-bottom: -3em; padding:10px;}  
  .emergency-banner img { width: 100%;   }
  .emergency-banner h2 { font-size: 1em; margin:5px 0; }
  .emergency-banner h3 { font-size: 0.8em; margin: 5px 0; }  
}

@media (max-width: 330px) {
  .emergency-banner h2 { font-size: 0.9em; margin:  5px 0; }  
  .emergency-banner h3 {  font-size: 0.8em;  margin: 5px 0; }
}

/*****************************************************
 Home page non-emergency important notice (Yellow bar)
***************************************************/

.homepage-non-emergency-notice {
    display:block;
    font-size:1.4em;
    background-color:#ff8;
    margin: 0;
    padding: 10px 20px 5px;
    overflow:visible;
    border-top:1px solid #ccc;  
    border-bottom:1px solid #ccc;
    text-align:center;
    font-weight:bold;
}
  
.homepage-non-emergency-notice p {margin:0; line-height:1.4em;}  
  
  
@media(max-width:991px) {
  .homepage-non-emergency-notice {
      height:auto;
      margin:50px 0 -45px 0;
      font-weight:bold;
  }
  
} 
@media(max-width:400px) {
  .homepage-non-emergency-notice {  padding: 10px 10px 5px;  }
  .homepage-non-emergency-notice a {  display:block;  } 
  .homepage-non-emergency-notice .hpne-divider {  display:none;  }
  
}   
 


/******************************************
     HOME PAGE - APPLY BAR
*******************************************/
.apply-bar  { background-color: #fff; }
.apply-bar  { margin-top: 0; padding-left: 15px; padding-right: 15px; }
.apply-bar .glyphicon {  color: #cb0003;  display: inline-block;  font-size: 2.5em;  line-height: 2.5em;  margin: 10px; }
.apply-bar h2 {
  color: #333;
  display: inline-block;
  font-size: 2em;
  line-height: 2.5em;
  margin: 10px;
  position: relative;
  top: -5px;
}

.apply-bar .home-call-to-action {  
   text-align: center;  
   color: #333;  
   text-decoration: none; 
   width:33.333%;  
   float:left;
   padding-left:0;
   padding-right:0;
}
.apply-bar .home-call-to-action:hover {  background-color: #e5e5e5;  color: #cb0003; }
#call-to-action-section span.glyphicon img { margin-top: -10px; }


@media only screen and (min-width: 992px) and (max-width: 1200px) {
   .apply-bar h2 {   font-size: 1.5em;  }
}

@media only screen and (max-width: 1023px) {
   .apply-bar h2 {   font-size: 20px;  }
}

@media (max-width:767px) {
  .apply-bar .home-call-to-action {width:100%;}
   .apply-bar .glyphicon { margin:0 20px;}
   #call-to-action-section span.glyphicon img {margin-top: -6px;} 
   #resources-section h1 { display:none; text-align:center; padding-left:0;}
}

@media only screen and (max-width: 500px) {
  .apply-bar .home-call-to-action { padding:0;}
}

@media only screen and (max-width: 400px) {
  .apply-bar  h2 { font-size: 1.4em;  margin: 10px 0 10px 10px;  }
  .apply-bar .home-call-to-action  { padding:0 0 0 10%;  text-align:left;}
  .apply-bar  .glyphicon { line-height: 2.1em; margin:0 10px; }
}

@media only screen and (max-width: 340px) {
   #call-to-action-container { padding-right:0; }
   .apply-bar .home-call-to-action  { padding:0 0 0 5px;  text-align:left;} 
   .apply-bar .glyphicon { margin:0 10px; }
}


/******************************************
   HOME PAGE RESOURCES
*******************************************/
#resources-section    { padding: 20px 0;  background-color: #eaeaea;  border-top: 1px solid #cdd5da;  border-bottom: 1px solid #cdd5da; }
#resources-section h1 { padding-left: 7.5px; margin-top:0; }
#resources-section h2, #resources-section h3 { 
  text-align: left;  
  position: relative;
  color:#000;
  line-height:18px;
  font-weight: normal;
  margin-left: 15px;   
  margin-top:20px;
  margin-bottom:10px;
}

#resources-section .home-action-box { width:25%; float:left; padding: 0 15px;}
#resources-section .home-action-box ul { padding-left: 20px; }

#resources-section .home-thumbs     { padding:0 15px; }
#resources-section .home-thumbs img { width:100%;  max-width:100%;  height:auto;  margin-bottom:15px;  border:1px solid #cdd5da; }
#resources-section .description     { text-align:left;  margin-bottom:5px;  padding:0 15px; }
#resources-section .bottom-link-box { text-align:left;  margin-top:5px;     padding-right:10px; font-size:1em;}
#resources-section .bottom-link     { text-align:center; }
#resources-section .bottom-link a   { color: #333;  text-decoration: none;  padding: 5px 0;  font-weight: bold; }
#resources-section .bottom-link a:hover {  color: #333; }

#resources-section .fa, #resources-section .far, #resources-section .fal, #resources-section .fas  {  color:#cb0003;  padding:3px; }


@media (max-width: 1200px) and (min-width: 992px) {
    #resources-section .home-action-box { width:50%; float:left; padding: 0 15px;}
     #resources-section h2, #resources-section h3 { font-size: 1.4em; }
}


@media (min-width: 768px) and (max-width: 991px) {
  #resources-section .home-action-box { width:50%; float:left; padding: 0 15px;}
  .home-action-box:nth-of-type(2n -1) {    clear: both;  }
}


@media screen and (max-width: 767px) {
  #resources-section  .home-action-box { width:100%; border-bottom: 1px dashed #777; margin-top:20px; }
  .home-action-box h2, .home-action-box h3 { font-size: 28px; font-weight:normal; margin:20px 0; text-align:center; }
}


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

   #resources-section { padding:0; border:0; }
   #resources-section h1 { display:none; text-align:center; padding-left:0;}
   #resources-section h2, #resources-section h3 { margin-left:0; font-size:24px; text-align:center; }
   .home-action-box { border-bottom: 5px solid #fff; margin-top: 10px;}
   #resources-section .home-thumbs { padding:0; }
   #resources-section .description { padding:0; }
   #resources-section .bottom-link-box { padding: 10px 0; text-align:center; }    

}





/******************************************
    NEWS FEED - Home Page, Alumni
*******************************************/

.newsevents { padding: 20px 0;  background-color: #fff; }
.newsevents .container {  padding: 0; }
.newsevents .news-events-full a {  display:block;  text-align:center;  border:1px solid #cdd5da;  padding:6px; }
.news-events-full a:after {
    content: "\f0a9";
    font-family: 'Font Awesome 5 Pro', fontawesome;
    line-height: 1;
    display: inline-block;
    color: #b60000;
    position: relative;
    top: 2px;
    margin-left: 5px;
    font-size: 18px;
}
.newsevents #calendar .event {
  clear: both;
  border: 1px solid #cdd5da;
  margin: 5px 0;
  overflow: hidden;
  position: relative;
}
.newsevents #calendar .event .dateArea {
  background-color: #fff;
  height: 90px;
  text-align: center;
  width: 60px;
  float: left;
  border-right: 1px solid #cdd5da;
}
.newsevents #calendar .event .dateArea .month {
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  background-color: #cb0003;
  padding: 2px 0;
}
.newsevents #calendar .event .dateArea .day {  font-size:1.3em;  font-weight:bold;  line-height:2em; }
.newsevents #calendar .event .middle {  padding-top:0.1em;  text-align:left;  margin-left:59px !important; }
.newsevents #calendar .event .middle .event-title p { font-weight:normal;  font-size:1.2em; }
.newsevents #calendar #events p.event-title { font-size: 1em; }
.newsevents #calendar #events p.tabbedeventtime {  margin-left:20px;  padding-bottom:5px; }

.newsevents #calendar .event .middle .press-release,
.newsevents #calendar .event .middle .public-notice,
.newsevents #calendar .event .middle .web-story,
.newsevents #calendar .event .middle .news-brief,
.newsevents #calendar .event .middle .event-recap {  text-align:left;  width:160px; }

/* This is like the pdfjumpto class */
.newsevents .fa, .newsevents .far, .newsevents .fal, .newsevents .fas { float:right;  margin-top:0.5em;  font-size:1em; }

.newsevents #calendar .event .middle .news-brief a,
.newsevents #calendar .event .middle .press-release a,
.newsevents #calendar .event .middle .public-notice a,
.newsevents #calendar .event .middle .web-story a,
.newsevents #calendar .event .middle .event-recap a  {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0 8px;
  font-size: 1em;
  color: #fff;
  font-weight: bold;
  width: 100%;
}

.newsevents #calendar .event .middle .press-release a {  background-color: #cb0003; }
.newsevents #calendar .event .middle .web-story a     {  background-color: #888; }
.newsevents #calendar .event .middle .news-brief a    {  background-color: #585348; }
.newsevents #calendar .event .middle .public-notice a {  background-color: #069; }
.newsevents #calendar .event .middle .event-recap a   {  background-color: #001e4d; }

.newsevents #calendar #display-selector .nav-justified .btn-primary h2,
.newsevents #calendar #display-selector .nav-justified .btn-default h2 {
     color: #fff;
     margin-top: 4px;
     margin-bottom: 0;
  
}

.newsevents #calendar #display-selector .nav-justified .btn-primary h1,
.newsevents #calendar #display-selector .nav-justified .btn-default h1 {  margin-top: 4px !important; }
.newsevents #calendar #display-selector .btn-primary {
  background-color: #cb0003 !important;
  max-height: 60px;
  color: #fff !important;
  border-color: #cdd5da !important;
  border-radius: 0 !important;
  margin-right: 2px;
  padding:0;
}
.newsevents #calendar #display-selector .btn-default {
  background-color: #333 !important;
  max-height: 60px;
  border-color: #cdd5da !important;
  color: #fff !important;
  border-radius: 0 !important;
  margin-left: 2px;
  padding:0;
}
.newsevents #calendar #display-selector .btn-primary:not(:focus) {  background-color:#333 !important;  z-index:50; }
.newsevents #calendar #display-selector .btn-default:focus { background-color: #cb0003 !important;  color:#fff; }
.newsevents #calendar #display-selector li.active .btn-primary {  background-color:#cb0003 !important;  color:#fff;  z-index:50; }
.newsevents #featured h2 {  text-align:left;  color:#333;}


@media (min-width: 768px) {
  .newsevents #calendar .event .middle .event-title { line-height:1.4em; margin: 5px 7px 0px 10px;    padding: 0 0 0 10px;  }
   .newsevents #calendar .event-title a { font-size: 1.0em}
   .newsevents #calendar .press-release a,
   .newsevents #calendar .web-story a,
   .newsevents #calendar .public-notice a,
   .newsevents #calendar .news-brief a,
   .newsevents #calendar .event-recap a   {   font-size: 1.0em;    }  
}

@media (max-width:991px) {
  .newsevents #calendar { margin-bottom: 30px; }  
}


@media (max-width: 767px) {
  .newsevents #calendar .event .middle .event-title {  margin: 0; padding:2px 2px 0 6px;  }
  .newsevents #calendar #events p.tabbedeventtime {  margin-left:0;  padding:0 10px; border-left: 1px solid #cdd5da;}
  .newsevents #calendar .event .middle .press-release,
  .newsevents #calendar .event .middle .public-notice,
  .newsevents #calendar .event .middle .web-story,
  .newsevents #calendar .event .middle .news-brief,
  .newsevents #calendar .event .middle .event-recap  {    width: 130px;  }  
  
  .newsevents #calendar .event .middle .press-release a,
  .newsevents #calendar .event .middle .public-notice a,  
  .newsevents #calendar .event .middle .web-story a,
  .newsevents #calendar .event .middle .news-brief a,
  .newsevents #calendar .event .middle .event-recap a  { font-size: 0.8em; }
  .newsevents #calendar .nav-justified > li {    width: 49.5%;    float: left !important;  }
}

@media (max-width: 400px) {
  .newsevents #calendar #news .event .dateArea {  height: 100px; }
  .newsevents #calendar #news .event .middle .event-title { height: 100px; margin: 0; padding: 5px 10px;  line-height: 1.3em; font-size: 16px; }
}

/********************************************
     HOME PAGE BHCC NEWS RIGHT SIDE BAR
*********************************************/
#calendarNews .event {
  display:flex;
  clear: both;
  border: 1px solid #cdd5da;
  margin: 5px 0;
  overflow: hidden;
}
#calendarNews .event .dateArea {
  background-color: #fff;
  height: 80px;
  text-align: center;
  width: 50px;

}
#calendarNews .event .dateArea .month {
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  background-color: #cb0003;
  padding: 2px 0;
}
#calendarNews .event .dateArea .day {
  font-size: 1.6em;
  font-weight: bold;
  line-height: 2em;
}
#calendarNews .event .middle {
  position: relative;
  padding: 10px;
  text-align: left;
  width: calc(100% - 50px);
  border-left: 1px solid #cdd5da;
  
}

#calendarNews .event .middle .event-title { margin-bottom:30px; }


#calendarNews .event .middle .press-release,
#calendarNews .event .middle .public-notice,
#calendarNews .event .middle .web-story,
#calendarNews .event .middle .news-brief,
#calendarNews .event .middle .event-recap  {  text-align: left; width: 120px;  }

#calendarNews .event .middle .news-brief a,
#calendarNews .event .middle .press-release a,
#calendarNews .event .middle .public-notice a,
#calendarNews .event .middle .web-story a,
#calendarNews .event .middle .event-recap a  {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 5px;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  width: 120px;
}


#calendarNews .event .middle .press-release a { background-color: #cb0003; }
#calendarNews .event .middle .web-story a     { background-color: #888; }
#calendarNews .event .middle .news-brief a    { background-color: #585348; }
#calendarNews .event .middle .public-notice a { background-color: #069; }
#calendarNews .event .middle .event-recap a   { background-color: #001e4d; }

@media (max-width: 767px) {
  
  #calendarNews .event .middle .press-release,
  #calendarNews .event .middle .public-notice,
  #calendarNews .event .middle .web-story,
  #calendarNews .event .middle .news-brief,
  #calendarNews .event .middle .event-recap  {  text-align:left; width:110px;  }
  
  #calendarNews .event .middle .press-release a,
  #calendarNews .event .middle .public-notice a,  
  #calendarNews .event .middle .web-story a,
  #calendarNews .event .middle .news-brief a,
  #calendarNews .event .middle .event-recap a  { width: 110px; }
  
}



.btn-default h1, .btn-primary h1{ margin-bottom: 0; }
#calendarNews #display-selector .nav-justified .btn-primary h1,
#calendarNews #display-selector .nav-justified .btn-default h1 {  margin-top: 4px !important; }

#calendarNews #display-selector .btn-primary {
  background-color: #cb0003 !important;
  max-height: 60px;
  color: #fff !important;
  border-color: #cdd5da !important;
  border-radius: 0 !important;
  margin-right: 2px;
}
#calendarNews #display-selector .btn-default {
  background-color: #333 !important;
  max-height: 60px;
  border-color: #cdd5da !important;
  color: #fff !important;
  border-radius: 0 !important;
  margin-left: 2px;
}
#calendarNews #display-selector .btn-primary:not(:focus) {  background-color:#333 !important;  z-index:50; }
#calendarNews #display-selector .btn-default:focus {  background-color:#cb0003 !important;  color:#fff; }
#calendarNews #display-selector li.active .btn-primary {  background-color:#cb0003 !important;  color:#fff;  z-index:50; }
@media (max-width: 767px) {
  #calendarNews .nav-justified > li {  width: 49.5%; float: left !important;  }
}

/******************************************
     Don't call them "web ads" or Ad Blockers will block them!
*******************************************/
.homepage-bottom-images { background-color:#fff; padding:20px 0; }
.homepage-bottom-images .row { margin-top:0; padding-left:7.5px; padding-right:7.5px; }
.homepage-bottom-images .row h1 { padding-left:7.5px; }
.homepage-bottom-images img { 
   width:100%; 
   max-width:100%; 
   height:auto; 
   margin-bottom:15px; 
   padding-left:7.5px; 
   padding-right: 7.5px; 
   border: none;
}

.homepage-bottom-image { width:25%; float:left; position:relative; padding:0 15px; display:block; margin:0; }

@media (max-width: 991px) and (min-width: 768px) { 
  .homepage-bottom-image { width: 50%; }
}
@media (max-width: 767px)  { 
  .homepage-bottom-image { width: 100%; }
}