.header-section {background-color:rgba(0,56,73, 1);}
header { color: snow; }
.header-box {}
.header-baner {padding-top: 10px;}
.header-logo {float: left; max-width: 120px; margin: 0px !important; clear: both !important;}
.header-title>h1 {font-size: 200% !important; color: snow !important;margin-bottom: 0px !important; margin-top: 15px !important;}
.header-subtitle { font-size: 16px; font-weight: bold;}

.font-white {color: white !important;}
.event-thumb-img {height: 240px; width:100%;}

.carousel-caption > p {background-color: rgba(0,0,0,.50); padding: 10px; margin-bottom: 0px !important;}

.notice-date {color: greenyellow; font-size: 80% !important;}

.gallery-thumb {width: 100% !important;}

.notice-marquee {
	background-color: #003849; 
	padding: 15px; 
	overflow: hidden; 
	max-height: 201px;}

	.notice-marquee:hover {
	background-image: linear-gradient(#009D9D,#003849);
	padding: 15px; 
	overflow: hidden; 
	max-height: 201px;}


.m-t-0 {margin-top: 0px !important;}

/* nav {background-color: rgba(0,56,73, 1);}
nav .dropdown-menu {right: unset !important; background-color: rgba(0,56,73, 1);}
nav li a {color: whitesmoke !important;}
nav li a:focus, nav li a:active, nav li a:hover {color: rgba(0,56,73, 1) !important;}
.header-menu-dropdown>ul.dropdown-menu { background-color: rgb(0,56,7,) !important; color: whitesmoke !important; }
.header-menu-dropdown>ul.dropdown-menu>li>a:hover, .header-menu-dropdown>ul.dropdown-menu>li>a:focus, .header-menu-dropdown>ul.dropdown-menu>li>a:active { color: rgb(0,56,7,) !important; background-color: rgba(0,25,40, 1) !important;} */

.main-menu {
  display:block;
  position:relative;
  /* background:#0e0e0e; */
  background:#01381e;
  z-index:999;
}
.container-menu {
  width:80%;
  margin:0 auto;
}
.main-menu:before,.main-menu:after{
  display: table;
  line-height: 0;
  content: "";
    z-index:9999;
}
.core-menu {
  text-align:center;
  font:normal normal normal 1em/1 Roboto, sans-serif;
  overflow:hidden;
  
}
.core-menu li {
  list-style:none;
  display:inline-block;
  cursor:pointer;
    z-index:999;
}
.core-menu li a {
 display:inline-block;
 padding-top:1em;
 padding-bottom:1em;
 padding-left:1.5em;
 padding-right:1.5em;

z-index:999;
}
.core-menu li a:hover {
  background:#38a201;
    z-index:9999;
}
li span.toggle {
  padding-left:1em;
    z-index:999;
}
.toggle:before {
  content:"\f107";
  font:normal normal normal 16px/1 FontAwesome;
  
}
.dropdown {
  position:absolute;
  width:230px;
  background:#1a1a1a;
  text-align:left;
  display:none;
    z-index:9999;
}
.dropdown li {
  display:block;
  }
.dropdown li a {
  display:block;
    z-index:9999;
}
.dropdown2 {
  position:absolute;
  width:230px;
  background:#2d2d2d;
  text-align:left;
  display:none;
  right:-100%;
  top:0;
}
.dropdown2 li {
  display:block;
    z-index:9999;
  }
.dropdown2 li a {
  display:block;
      z-index:9999;
}
li span.toggle2 {
  position:absolute;
  right:0;
  margin-right:20px;
    z-index:999;
}
.toggle2:before {
  content:"\f105";
  font:normal normal normal 16px/1 FontAwesome;
}
.hamburger-menu {
  padding:1em;
  display:none;
  font:normal normal normal 16px/1 Roboto;
  text-transform:uppercase;
      z-index:9999;
}

@media (max-width:720px) {
  .main-menu {
    height:50px;
  }
  .container-menu {
    width:100%;
  }
  .navigation {
    float:left;
    display:block;
    width:100%;
  }
  .core-menu {
    float:right;
    width:100%;
    background:#1a1a1a;
    margin:auto;
    display:none;
  }
  
  .core-menu li {
    width:100%;
    display:block;
  }
  .core-menu li a{
    display:block;
    margin:auto;
  }
  .hamburger-menu {
    display:block;
    text-align:center;
    padding-right:60px;
    float:none;
    width:100%;
  }
  .burger-1, .burger-2, .burger-3 {
  display:block;
  position:absolute;
  width:20px;
  height:3px;
  border-radius:30px;
  right:0;
  margin-right:25px;
  background:#fff;
    -webkit-transition:.2s ease;
    -ms-transition:.2s ease;
    -moz-transition:.2s ease;
    -o-transition:.2s ease;
  transition:.2s ease; 
  }
  .burger-1 {
  top:15px;
  }
  .burger-2 {
  top:23px;
  }
  .burger-3 {
  top:31px;
  }
  .burger-1.open, .burger-2.open, .burger-3.open {
  -webkit-transition:.2s ease;
  -ms-transition:.2s ease;
  -moz-transition:.2s ease;
  -o-transition:.2s ease;
    transition:.2s ease;
    transform-origin:50% 50%;
  }
  .burger-1.open {
    top:25px;
    width:23px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg); 
    -ms-transform:rotate(45deg); 
    -moz-transform:rotate(45deg); 
    -o-transform:rotate(45deg); 
  }
  .burger-2.open {
    opacity:0;
  }
  .burger-3.open {
    top:25px;
    width:23px;
    transform:rotate(-45deg);
  }
  .dropdown {
    width:100%;
    background:#0e0e0e;
    text-align:center;
    position:relative;
  }
  .dropdown2 {
    right:0;
    top:0;
    width:100%;
    position:relative;
    padding:0 20px;
}


body {
      position: relative; 
  }
  .affix {
      top:0;
      width: 100%;
      z-index: 9999 !important;
  }
  .navbar {
      margin-bottom: 0px;
  }

  .affix ~ .container {
     position: relative;
     top: 50px;
  }

.services-list > ul >li > a {color: darkslategray !important; width: 100%; display: block;}
.services-list > ul >li:hover {background-color: lightgray !important;}
.services-list > ul >li:hover > a {color: black !important;}

/* video box */
.video-box {padding: 0px 0px 15px 0px;}
.embed-container { position: relative; padding-bottom: 60.50%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/***
====================================================================
   Home Slide
====================================================================
***/
#myCarousel {height: 434px !important;}
#myCarousel .carousel-caption {left:0;right:0;bottom:0;text-align:left;padding:10px;text-shadow:none;}
#myCarousel .list-group {position:absolute;top:0;right:0;}
#myCarousel .list-group-item {border-radius:0px;cursor:pointer;padding:11px 15px;}
#myCarousel .list-group .active {background-color:#eee;}
#myCarousel .carousel-indicators {right: 15px !important; left: unset !important; width: auto !important; margin-left: unset !important;}
#myCarousel .carousel-control span.fa-angle-left,#myCarousel .carousel-control span.fa-angle-right {position: absolute;top: 50%;z-index: 5;display: inline-block;font-weight: 700;line-height: 1; font-size: 150%;}
.slide-img {width: 100% !important; max-height: 434px;}

/* difital content */
.program-subject-thumb { width: 33.33%; float: left;}
.program-subject {box-shadow: 0px 0px 2px 1px rgba(0,0,0, .5); border-radius: 3px; margin: 5px; text-align: center;height: 120px !important; vertical-align: middle;align-items: center; display: flex;justify-content: center;}
.program-subject:hover {box-shadow: 0px 0px 5px 1px rgba(0,50,0, .75); background-color: rgba(221,221,221, .35); transition: .3s all; color: red;}
.program-subject-title {display: inline-table; padding:10px !important;font-size: 135%; color: darkslateblue;}
.digital-content-row {box-shadow: 0px 0px 1px 1px rgba(0,0,0,.35);margin-top: 3px !important;margin-bottom: 2px !important;padding: 10px;border-radius: 3px;}
.digital-content-row:hover {background-color:rgba(221,221,221, .35);text-decoration: none !important; box-shadow: 0px 0px 3px 1px rgba(33,133,33,.55); transition: .3s all;}
.digital-content-row:hover > a{text-decoration: none !important; color: red !important; transition: .3s all;}
.digital-content-row-title {font-size: 130%;}
.digital-content-row:hover .digital-content-row-title strong,.digital-content-row:hover .digital-content-row-title small {text-decoration: none !important; color: red !important;}
.xdigital-content-row-title:hover {background-color:rgba(221,221,221, .35);text-decoration: none !important; color: red !important; box-shadow: 0px 0px 3px 1px rgba(33,133,33,.55); transition: .3s all;}
.digital-content-link {color: green;}
.digital-content-link:hover {color: blue;}
.digital-content-file-part div {line-height: 3.25;text-align: center;box-shadow: 0px 0px 3px 1px rgba(0,0,0, .35);margin-top: 8px;border-radius: 3px;}
.digital-content-file-part div :hover {color: green !important;box-shadow: 0px 0px 3px 1px rgba(0,50,0, .55); transition: .3s all;}
.digital-content-file-part div > a {width: 100% !important; display: block !important;}
.digital-content-file-part div .fa {font-size: 20px !important;}


@media (min-width: 992px) {
  /* #myCarousel {padding-right:16.3333%;} */
  /* #myCarousel .carousel-controls {display:none;} */
}
@media (max-width: 991px) {
  /* .carousel-caption p,
  #myCarousel .list-group {display:none;} */
}

/* responsive effect customization */
@media screen and (max-width: 991px) {
	.header-title>h1 {font-size: 28px !important; margin-top: 25px !important;}
	.header-subtitle { font-size: 16px; }
}

@media screen and (min-width: 768px) {
	.navbar-header {display: none !important;}
	.navbar-right {float: left !important; margin-right: unset !important;}
}

@media screen and (max-width: 767px) {
	.header-title>h1 {font-size: 25px !important; margin-top: 30px !important;}
	.header-subtitle { font-size: 16px; }
	.message-box {margin-top: 15px !important;}
	.top-layer {display: none !important;}
	.navbar-social-bar {display: block !important; float: right; margin-top: 8px !important; margin-right: 10px !important;}
	.xmessage-box-subtitle {padding-left: 33.33% !important; margin-left: 15px !important;}

	.navbar-header {display: block !important;}
	.nav-home, .nav-home-link{display: none !important;}
}

@media screen and (max-width: 680px) {
	.header-title>h1 {font-size: 22px !important; margin-top: 25px !important;}
	.header-subtitle { font-size: 15px; }
	.header-logo-img {max-width: 80px !important; max-height: 70px !important ;}	
}

@media (max-width: 600px) {
    .carousel-caption {display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */}
}

@media screen and (max-width: 580px) {
	.header-logo-img {max-width: 0px !important;}
	.header-title>h1 {font-size: 17px !important; margin-top: 25px !important;}
	.header-subtitle { font-size: 14px; }
	
}

@media screen and (max-width: 480px) {
	.header-logo-img {max-width: 60px !important;}
	.header-title>h1 {font-size: 15px !important; margin-top: 20px !important;}
	.header-subtitle { font-size: 12px; margin-top: -1px !important;}
}

@media screen and (max-width: 420px) {
	.header-logo-img {max-width: 50px !important;}
	.header-title>h1 {font-size: 13px !important; margin-top: 20px !important;}
	.header-subtitle { font-size: 10px; margin-top: -1px !important; }
	.message-box-subtitle {font-weight: 700; padding: 5px !important; padding-left: 0% !important; margin-left: 10px !important;}
	.message-box-title {font-size: 16px; padding-top: 5px !important;}
}

@media screen and (max-width: 380px) {
	.header-logo-img {max-width: 50px !important;}
	.header-title>h1 {font-size: 12px !important; margin-top: 20px !important;}
	.header-subtitle { font-size: 10px; margin-top: -1px !important; }
	.message-box-title {font-size: 15px; padding-top: 5px !important;}
	.message-name {font-size:85% !important;}
}

@media screen and (max-width: 360px) {
	.header-logo-img {max-width: 50px !important; margin: 0px 5px 0px 0px !important;}
	.header-title>h1 {font-size: 11px !important; margin-top: 20px !important;}
	.header-subtitle { font-size: 10px; margin-top: -1px !important; }
	.message-box-title {font-size: 13px; padding-top: 0px !important;}
	.message-box-photo {width: 23% !important;}
	.message-name {font-size:75% !important;}
	p.message-text {display: none !important;}
}