@charset "utf-8";
/* Global */

body {
  margin:0;
  font-family: 'arial';
  background-color: #eeeaea !important;
}

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    text-align: left;
    display: none;
    position: absolute;
    background-color: #30508d;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 5;
    padding: 5px;
}

.dropdown-content a {
    color: #fff;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
  background-color: #2679ce;
  color: white;
  text-decoration: none;
}

.dropdown:hover .dropdown-content {
    display: block;

}

.dropdown:hover .dropbtn {
    background-color: #2679ce;

}

.div1 {
    width: 310px;
    height: 520px;
    border: 1px solid #d3cfcf; 
}
.div2 {
    width: 310px;
    height: 250px;
    border: 1px solid #d3cfcf; 
}

.box {
    -o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    height: : 200px;                 /* fixed width */
}


/* Collapsing Panel */
.wrapper{
  width:55%;
}
@media(max-width:992px){
 .wrapper{
  width:100%;
} 
}
.panel-heading {
  padding: 0;
  border:0;
}
.panel-title>a, .panel-title>a:active{
  display:block;
  padding:15px;
  color:#555;
  font-size:16px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:1px;
  word-spacing:3px;
  text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
.panel-heading.active a:before {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}

.newsbtn{
  padding: 5px 20px 5px 10px;
  width: 20px;
  text-align: center;
  font-weight: bold;
  background-color: #eeeeee;  
}

.nextbtn{
  padding: 5px 50px 5px 10px;
  width: 20px;
  text-align: center;
  font-weight: bold;
  background-color: #eeeeee;  
}

.prevbtn{
  padding: 5px 70px 5px 10px;
  width: 20px;
  text-align: center;
  font-weight: bold;
  background-color: #eeeeee;  
}

.btnfade {
  display: inline-block;
  text-align: center;
  box-shadow: 0 0 1px transparent;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  color: #000;
  /*-webkit-transition-property: color, background-color, font-size;
  transition-property: color, background-color;*/
}

.btnfade:hover, .btnfade:focus, .btnfade:active {
  background-color: #173979;
  color: #ffffff;
}

.subbtn{
  padding: 10px 20px;
  display:block;
}

.subbtn3{
  padding: 10px 20px;
  display:block;
  color: #000;
}

.subbtn1{
  padding: 10px 20px;
  display:block;

}

.subbtn2 a{
  margin-left: 10px;
   text-justify: inter-word;
   text-align: left;
   color: #fff !important;
   text-decoration: none !important;
   display:block;
   padding: 10px 20px;
}

 .subbtn2 a:hover{
   margin-left: 10px;
   text-justify: inter-word;
   text-align: left;
   color: #fff !important;
   text-decoration: none !important;
   display:block;
   padding: 10px 20px;
   background-color: #365795;
}

.subbtn:hover{
  background-color: #365795 !important;
  text-decoration: none !important;
  color: #fff !important;
}

.subbtn3:hover{
  background-color: #f5f5f5 !important;
  text-decoration: none !important;
  color: #000 !important;
}

.icons:hover{
   transform: scale(1.3);
}

.officials tbody tr:hover td{
  color: #174799;

}

#menubar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
  min-width: 160px;
  min-height: 10px;
}

#menubar ul li {
  display: block;
  position: relative;
  float: left;
  background: #fff;
}

/* This hides the dropdowns */


li ul {
  display: none;
}

#menubar ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #000;
}

#menubar ul li a:hover { 
  color: #fff;
  background: #30508d; 
  text-decoration: none;
}

/*  dropdown content */

#menubar li:hover > ul {
  display: block;
  position: absolute;
  z-index: 5;
}

#menubar li:hover li{ 
  float: none;

}

#menubar li:hover a {
 background: #30508d;
 color: #fff;
}

#menubar li:hover li a:hover { 
  background: #2679ce; 
  text-decoration: none;
}

#menubar li.active a { 
  color: #fff; 
  background-color: #30508d;
}

#menubar > li > li a:hover .dropbtn{
  background-color: #2679ce; 
}
/* Displays second level dropdowns to the right */

#menubar ul ul ul {
  left: 100%;
  top: 0;
}

#menubar ul:before,
#menubar ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

#menubar ul:after { clear: both; }

#menubar ul li a {
   z-index: 2;
   padding: 5px 30px;
}

#portalbtn{
  background-color: #aacdeb;
}

#portalbtn:hover {
  background-color: #d5e7f5;
  cursor: pointer;
  border: 1px solid;
  padding: 10px;
}

.navbtn, .navbtn2, .navbtn3{
  font-weight: bold;
}

.navbtn3{
  display: none;
}

.panel-submenu a.active{
  background-color: #365795;
  text-decoration: none;
}

.panel-submenu{
  width: 25%;
  min-height: 300px;
  overflow: auto;
  padding-bottom: 20px;
  margin-bottom: 10%;
  margin-top: 5%;
  background-color: #142f60;
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
  text-justify: inter-word;
}

.panel-submenu2{
  width: 25%;
  min-height: 300px;
  overflow: auto;
  padding-bottom: 20px;
  margin-bottom: 10%;
  margin-top: 5%;
  background-color: #142f60;
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
  text-justify: inter-word;
  text-align: left;
}

.panel-submenu3{
  width: 100%;
  height: 50px;
  display: none;
  overflow: hidden;
  margin-top: 5%;
  background-color: #142f60;
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
  text-justify: inter-word;
}

.submenubtn{
  background-color: #142f60;
  width: 100%;
  margin-top: 10px;
  height: 30px;
}

.portal-title{
  margin-top: 5%;
  padding-bottom: 5%;
  overflow:auto;
  text-align: left;
}

.about{
  margin-top: 5%;
  margin-left: 10px;
  padding-bottom: 5%;
  overflow:auto;
  text-align: left;
}

.about1{
  margin-top: 3%;
  margin-left: 30px;
  padding-bottom: 5%;
  overflow:auto;
  text-align: left;
}

.news1{
  margin-top: 3%;
  margin-left: 30px;
  padding-bottom: 5%;
  overflow:auto;
  text-align: left;
}

@media screen and (max-width : 760px){
  .panel-submenu{
     width: 100%;
     min-height: 500px;
  }
  .about{
     margin-top: 0 !important;
    margin-left: 0 !important;
  }
}

/*.panel-home{
  background-color: #fff !important;
  width: 100%;
  max-width: 1000px;
  overflow: auto;
  min-height: 800px;
  border: 1px solid;
  border-color: #173979;
}*/

.panel-home{
  background-color: #fff !important;
  width: 100%;
  max-width: 1000px;
  overflow: hidden;
  min-height: 500px;
}

.panel-home1{
  background-color: #fff !important;
  width: 100%;
  max-width: 1000px;
   border: 1px solid;
  border-color: #173979;
  overflow: auto;
   min-height: 500px;
}

.top-header{
  width: 100%;
  max-width: 1000px;
}

.header1 img{
  width: 100%;
  max-width: 1000px;
  height: auto;
  max-height: 120px;
  display: block;
  position: relative;
}

.header2 img{
  width: 100%;
  max-width: 1000px;
  height: auto;
  max-height: 120px;
  display: block;
  margin-top: 2px;
}

.banner img{
  width: 100%;
  max-width: 1000px;
  height: auto;
  max-height: 200px;
  overflow:hidden;
  display: block;
}

.library_img img{
  width: 100%;
  max-width: 1000px;
  height: auto;
  overflow:hidden;
  display: block;
}

.submenu{
  padding: 10px;
  text-align: left;
}

footer{
  width:100%;
  max-width: 1000px;
  overflow: hidden;
  padding: 15px 50px;
  background-color: #173979;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #19c589;
    text-align: center;
    padding: 10px 0;
    display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*.text:hover {
   transform: scale(1.3);
   color: #ffffff;

}*/

.toggle, .toggle2, .toggle3, #sidebarbtn, .sidenav,
[id^=drop] {
  display: none;
}

/* Giving a background-color to the nav container. */
nav { 
  margin:0;
  padding: 0;
  width: 100%;
  max-width: 700px;
  background: rgba(255,255,255,0);
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
  content:"";
  display:table;
  clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
  float: right;
  padding:0;
  margin:0;
  list-style: none;
  position: relative;
  background: rgba(255,255,255,0);
  }
  
/* Positioning the navigation items inline */
nav ul li {
  margin: 0px;
  display:inline-block;
  float: left;
  background-color: #fff;
  min-height: 3px;
  }

  nav > ul > li{
  background: rgba(255,255,255,0);
  }

 /***nav link when right clicked***/
nav > ul > li > a {
  color: #000 !important;
  text-decoration: none !important;
}

/***Active menu ***/
nav li.active a { 
  color: #fff !important; 
  background-color: #30508d;
}

/* nav links */
nav a {
  display:block;
  padding:14px 50px;   
  color:#000;
  font-size:14px;
  text-decoration:none;
}

nav ul li ul li:hover {
 background-color: #30508d; 

}

/* Background color change on Hover */
nav li a:hover { 
  background-color: #2679ce; 
  text-decoration: none;
}

nav li:hover a {
 background-color: #30508d; 
 color: #fff !important;
}

nav li:hover li a:hover { 
  background: #2679ce; 
  text-decoration: none;
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
  display: none;
  position: absolute; 
  /* has to be the same number as the "line-height" of "nav a" */
 
}
  
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
  display:inherit;
  z-index: 10;
  background-color: #30508d; 
}
  
/* First Tier Dropdown */
nav ul ul li {
  /*width:190px;*/
  float:none;
  display:list-item;
  position: relative;
  z-index: 10;
  background-color: #30508d;
  color: #000;
}

/* Second, Third and more Tiers 
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul {
  left: 100%;
  top: 0;
}

nav ul:before,
nav ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

nav ul:after { clear: both; }

nav ul li a {
   z-index: 2;
   padding: 5px 30px;
}

@media all and (max-width : 991px) {
  #fs{
    margin-left: 130px;
  }
}

@media all and (max-width : 989px) {
  #fs{
    margin-left: 130px;
  }
}

@media all and (max-width : 978px) {
  #fs{
    margin-left: 120px;
  }
}

@media all and (max-width : 925px) {
  #fs{
    margin-left: 100px;
  }
}



@media all and (max-width : 885px) {
  #fs{
    margin-left: 70px;
  }
}

@media all and (max-width : 830px) {
  #fs{
    margin-left: 50px;
  }
}

  /*@media all and (max-width: 781px){
      #news{
        margin: 0 auto;
        width: 100%;
        max-width: 500px;
      }
  }*/

@media all and (max-width : 780px) {
  #fs{
    margin-left: 20px;
  }
}

@media all and (max-width : 768px) {
  .plv-img{
    width: 100%;
    max-width: 200px !important;
    height: auto;
    margin-top: 5px;
  } 

  .portal-div{
    float: none;
    margin-top: 10px !important;

  }
  .newsbox{
    margin-left: 20px;
  }
  
}


/*@media all and (max-width : 565px) {
  .plv-img{
    margin-top: 10px !important;
    margin-bottom: 5px;
  }
}*/

@media all and (max-width : 745px) {
  #fs{
    margin-left: 10px;
  }
}

@media all and (max-width : 730px) {
  #fs{
    margin-left: 0;
  }

  .newsbox{
    margin-left: 10px;
  }
}

@media all and (max-width : 718px) {
  #fs{
    margin-left: 90px;
  }
}

@media all and (max-width : 701px) {
  .newsbox{
    margin-left: 5px;
  }
}

@media all and (max-width : 686px) {
  .newsbox{
    margin-left: 0px;
  }
}

@media all and (max-width : 671px) {
  .newsbox{
    margin-left: 140px;
  }
}

@media all and (max-width : 640px) {
  #fs{
    margin-left: 50px;
  }
}

@media all and (max-width : 566px) {
  .newsbox{
    margin-left: 70px;
  }
}

@media all and (max-width : 545px) {
  #fs{
    margin-left: 120px;
  }
  .plv-img{
    max-width: 50px;
  }
  .portal-div{
    max-width: 200px !important;
  }
}

@media all and (max-width : 484px) {
  .newsbox{
    margin-left: 50px;
  }
}

@media all and (max-width : 475px) {
  #fs{
    margin-left: 80px;
  }
  
}

@media all and (max-width : 420px) {
  .newsbox{
    margin-left: 20px;
  }
}

@media all and (max-width : 411px) {
   #fs{
    margin-left: 75px;
  }
}

@media all and (max-width : 376px) {
  .newsbox{
    margin-left: 10px;
  }
}

@media all and (max-width : 345px) {
  #fs{
    margin-left: 40px;
  }

}


@media all and (max-width : 335px) {
  #fs{
    margin-left: 25px !important;
  }
}

@media all and (max-width : 320px) {
  .newsbox{
    margin-left: 0;
  }
}

@media all and (max-width : 290px) {
  #fs{
    margin-left: 10px !important;
  }

}


@media all and (max-width : 270px) {
  #fs{
    margin-left: 0 !important;
  }
}

@media all and (max-width : 395px) {
  #fs{
    margin-left: 50px;
  }
}

/*====================================================================================*/
@media all and (max-width : 768px) {

  nav {
    width: 100%;
    margin-top: -40px;
  }

  /* Hide the navigation menu by default */
  /* Also hide the  */
  .toggle + a, .navbtn2,
  .menu {
    display: none;
  }

  .navbtn{
   background-color: #142f60;
   color: #fff;
   }

   .navbtn:hover {
    background-color: #30508d;
    color: #fff;
  }

  .navbtn3{
    display: block;
    background-color: #142f60;
    color: #fff;
  }

   .navbtn3:hover{
    background-color: #30508d;
    color: #fff;
  }

  .submenu2{
    display: none;
  }

  .sidenav, #sidebarbtn{
    display: block;
  }

  .banner img,  #myCarousel{
    margin-top: 40px;
  }

  .banner img{
    height: 100px;
  }

  .header-blue{
  padding: 15px !important;
}

  .about1{
  margin-top: 10%;
  margin-left: 0;
  padding-bottom: 5%;
  overflow:auto;
  text-align: left;
}

  /* Styling the toggle label */
  .toggle {
    display: block;
    background-color: #30508d;
    padding:5px 20px;  
    color:#fff;
    font-size:14px;
    text-decoration:none;
    border:none;
    width: 100%;
    max-width: 1000px;
    position:relative;
    z-index: 3;
    margin-top: 40px;
    margin-bottom: 0;
  }

   .toggle2 {
    display: block;
    background-color: #142f60;
    padding:5px 20px;  
    color:#fff;
    font-size:14px;
    text-decoration:none;
    border:none;
    width: 100%;
    max-width: 1000px;
    position:relative;
    z-index: 3;
    margin-bottom: 0;
  }

  .toggle3 {
    display: block;
    background-color: #336ba4;
    padding:5px 20px;  
    color:#fff;
    font-size:14px;
    text-decoration:none;
    border:none;
    width: 100%;
    max-width: 1000px;
    position:relative;
    z-index: 3;
    margin-bottom: 0;
  }


  .toggle:hover, .toggle2:hover, .toggle3:hover {
    background-color: #30508d;
  }


  /* Display Dropdown when clicked on Parent Label */
  [id^=drop]:checked + ul {
    display: block;
    width: 100%;
    z-index: 2;
     
  }

  /* Change menu item's width to 100% */
  nav ul li {
    display: block;
    width: 100%;

    }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;

  }

  nav ul ul ul a {
    padding: 0 80px;

  }

/***label style ***/
  nav ul ul label{
    background-color: #fff;
  }

/* bg color submenu */
  nav a:hover,
  nav ul ul ul a {
    background-color: #fff;
    color: #000;  
  }

/***hover second dropdown ***/
 nav li:hover a {
 background-color: #fff; 
 color: #000;
}
  
  nav ul li ul li .toggle,
  nav ul ul a,
  nav ul ul ul a{
    padding:14px 20px;  
    color:#000;
    font-size:14px; 

  }
  
  /* bg color submenu */
  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: #fff; 

  }

  /* Hide Dropdowns by Default */
  nav ul ul {
    float: none;
    position:static;
    color: #ffffff;
    /* has to be the same number as the "line-height" of "nav a" */
  }
    
  /* Hide menus on hover */
  nav ul ul li:hover > ul,
  nav ul li:hover > ul {
    display: none;
  }

/*** overlap dropdown over other elements ***/
  /*nav ul{
    display: block;
    position: absolute;
    width: 100%;
    z-index: 5;
  }*/
  
    
  /* First Tier Dropdown */
  nav ul ul li {
    display: block;
    width: 100%;
  }

  nav ul ul ul li {
    position: static;
    z-index: 2;
    /* has to be the same number as the "width" of "nav ul ul li" */ 

  }

.panel-submenu3{
  display: block;
}

.dropdown{

  display:block !important;
  border-radius: 0 !important;
  -webkit-appearance: none;
  background-color: #142f60 !important;
  -webkit-box-shadow: 0 10px 6px -6px #777 !important;
  -moz-box-shadow: 0 10px 6px -6px #777 !important;
  box-shadow: 0 10px 6px -6px #777 !important;
}

.panel-submenu{
  display: none;
}

}
/*=======================================================================*/


@media all and (max-width : 330px) {

  nav ul li {
    display:block;
    width: 100%;
  }

}

 .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    padding-bottom: 100px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 10px;}
  .sidenav a {font-size: 18px;}
}

.sidenavbtn a{
  color: #fff !important;
  text-decoration: none !important;
}

.sidenavbtn a, .sidenavbtn3 a{
font-size: 14px !important;
text-align: left;
font-weight: bold;
}

/* submenu1 */
.sidenavbtn2 a{
   margin-left: 20px;
   font-size: 14px !important;
   text-align: left;
   text-decoration: none !important;
   color: #fff !important;
   text-justify: inter-word;
  
}

.sidenavbtn3 a{
  text-decoration: none;
  pointer-events: none;
  color: #cfcfcf !important;
  background-color: #1f3254;
}

/* submenu2 */
.sidenavbtn4 a{
  margin-left: 20px;
  font-size: 14px !important;
  text-align: left;
  text-decoration: none !important;
  color: #fff !important;
  text-justify: inter-word;
}

.sidenavbtn5 a{
  font-size: 14px !important;
  text-decoration: none;
  pointer-events: none;
  color: #cfcfcf !important;
  font-weight: bold;
  text-align: left;
}

 .sidenavbtn:hover, .sidenavbtn2:hover, .sidenavbtn4:hover{
  background-color: #30508d;
  text-decoration: none;
}

.sidenav .closebtn{
  font-size: 40px !important;
}

.sidenav{
  background-color: #12274c;
}

#sidebarbtn{
  padding: 8px;
  /*background-color: #30508d;*/
  background-color: rgba(48,80,141,0.6);
  color: #fff;
  font-size:14px;
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  max-width: 50px;
  z-index: 5;
  border: 1px solid #fff;
}

#sidebarbtn:hover{
  /*background-color: #1965b3;*/
  background-color: rgba(25,101,179,0.5);
}

.portal-div{
  float:left;
  padding: 5px;
  margin-left: 1px;
  border: 1px solid;
  border-color: #173979;
}

.plv-img{
width: 100%;
max-width: 500px;
height: auto;
padding: 5px;
overflow: hidden;
display: block;
}

    /*#sidebar span{
      position: absolute;
      color: #000;
    } */  

  @media screen and (max-width: 500px){
    #sidebar{
      margin-top: 27px;
      height: 15px;
    }
    
  }

  @media screen and (max-width: 991px){
    .data{
      margin: 0 auto !important;
    }

    .portal-div{
      float: none;
      margin: 0 auto;
      width: 100%;
      max-width: 300px;
      margin-top: 10px;
      height: auto !important;
    }
    .plv-img{
    width: 100%;
    max-width: 250px !important;
   }

  }

   /*@media screen and (max-width: 994px){
      #news{
        margin: 0 auto;
        width: 50%;
      }
  }*/

  /***Home ***/

.panel-home2{
  background-color: #fff !important;
  width: 100%;
  max-width: 1000px;
   border: 1px solid;
  border-color: #173979;
  padding-bottom: 50px;
  overflow: auto;
}

.newsbox {
  position: relative;
  width: 100%;
  float: left;
  border: 1px solid #ccc;
  background: #fdfdfd;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.newsbox:hover {
   box-shadow:0 0 10px #333;
   -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
 
}

.details{
  white-space: pre-line;
}

.justify{
  text-align: justify !important;
  text-justify: inter-word !important;
}


/*.panel-events{
  width: 305px;
  margin-right: 10px; 
  min-height: 510px;
  background-color: white;
  display: inline-block;
  overflow: hidden;
}*/

/*.panel-announcements{
  width: 305px;
  margin: 10px;
  display: inline-block;
  min-height: 500px;
  background-color: white;
  overflow: hidden;
}*/

/*.panel-calendar{
  width: 305px;
  margin: 10px;
  display: inline-block;
  min-height: 500px;
  background-color: white;
  overflow: hidden;
}*/