.topnav {
  overflow: hidden;
  background-color: #12485E;  
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
  
.topnav-inverse {
  overflow: hidden;
  background-color: black; 
}

.topnav-inverse a  
{
  float: left;
  display: block;
  color: yellow;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px; 
} 

.topnav-right {
  float: right;
} 

.topnav-inverse-right {
  float: right;
} 

.topnav a:hover {
  background-color: #ddd;
  color: black;
} 

.topnav-inverse a:hover {
  background-color: #ddd;
  color: black;
} 

.topnav .icon {
  display: none;
}

.topnav-inverse .icon {
  display: none;
}

.bottomnav {
  overflow: hidden;
  background-color: #12485E; 
  text-align: center;
  padding: 14px 16px;
}

.bottomnav a { 
  color: #f2f2f2; 
  padding: 5px 5px 5px 5px;
  text-decoration: none;
  font-size: 17px;
  line-height:30px;
}

.bottomnav-inverse {
  overflow: hidden;
  background-color: black; 
  text-align: center;
  padding: 14px 16px;
}

.bottomnav-inverse a { 
  color: yellow; 
  padding: 5px 5px 5px 5px;
  text-decoration: none;
  font-size: 17px;
  line-height:30px;
}

.bottomnav_menufooter {
 
  overflow: hidden;
  background-color: #12485E; 
  text-align: center;
  padding: 14px 16px;
  display: block; 
  text-align: center;
  padding: 14px 25px;
 
  font-size: 17px;  
}
 

.bottomnav_menu {
  overflow: hidden;
  background-color: #12485E; 
  margin-top:  10px; 
  text-align: center;
  padding: 14px 16px;
  
  
  
  
  
}

.bottomnav_menu a { 
  float:left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px; 
}

.bottomnav_menu-inverse {
  overflow: hidden;
  background-color: black; 
  margin-top:  10px; 
  text-align: center;
  padding: 14px 16px;
}

.bottomnav_menu-inverse a { 
  float:left;
  display: block;
  color: yellow;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px; 
}

 .bottomnav_menu .icon {
  display: none;
}

 .bottomnav_menu-inverse .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .bottomnav_menu a:not(:first-child) {display: none;}
  .bottomnav_menu a.icon {
    float: right;
    display: block;
  }
} 

@media screen and (max-width: 600px) {
  .bottomnav_menu-inverse a:not(:first-child) {display: none;}
  .bottomnav_menu-inverse a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 600px) {
  .bottomnav_menu.responsive {position: relative;}
  .bottomnav_menu.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .bottomnav_menu.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
 

@media screen and (max-width: 600px) {
  .bottomnav_menu-inverse.responsive {position: relative;}
  .bottomnav_menu-inverse.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .bottomnav_menu-inverse.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

 

.dropdown {
  float: left;
  overflow: hidden;   
}

.dropdown-inverse {
  float: left;
  overflow: hidden;   
}

.dropdown .dropbtn 
{ 
  border: none;
  outline: none;
  color: #f2f2f2;
  background-color: #12485E;
  padding: 14px 16px; 
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  font-weight: bold;
} 

.dropdown-inverse .dropbtn 
{ 
  border: none;
  outline: none;
  color: yellow;
  background-color: black;
  padding: 14px 16px; 
  text-decoration: none;
  font-size: 17px;
  margin: 0;
  font-weight: bold;
} 


.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555; 
  color: #f2f2f2;
}

.topnav-inverse a:hover, .dropdown-inverse:hover .dropbtn {
  background-color: #555; 
  color: #f2f2f2;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #12485E;
  min-width: 160px; 
  z-index: 1;
}

.dropdown-content-inverse 
{
     display: none;
  position: absolute;
  background-color: black;
  min-width: 160px; 
  z-index: 1; 
}


.dropdown-content a {
  float: none;
  color: #f2f2f2;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content-inverse a {
  float: none;
  color: yellow;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}



.dropdown-content a:hover {
  background-color: #555; 
}

.dropdown-content-inverse a:hover {
  background-color: #555; 
}


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

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

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav-inverse a:not(:first-child), .dropdown-inverse .dropbtn {
    display: none;
  }
  .topnav-inverse a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav-inverse a:not(:first-child) {display: none;}
  .topnav-inverse a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

@media screen and (max-width: 600px) {
  .topnav-inverse.responsive {position: relative;}
  .topnav-inverse.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav-inverse.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav-inverse.responsive .dropdown-inverse {float: none;}
  .topnav-inverse.responsive .dropdown-content-inverse {position: relative;}
  .topnav-inverse.responsive .dropdown-inverse .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


.button {
  border-style: none;
    border-color: inherit;
    border-width: medium;
    background-color: #4CAF50;
    color: white;
    padding: 15px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
  font-size: large;
    margin: 5px 5px 5px 5px;
    cursor: pointer;
    font-weight: 700;
}
.button_D {
  background-color: yellow;
  border: none;
  color: white;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 5px 5px 5px 5px;
  cursor: pointer;
}
.button_D:hover  
{
  background-color:#ddd;    
}

.button_N {
  background-color: White;
  border: none;
  color: white;
  padding: 15px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 5px 5px 5px 5px;
  cursor: pointer;
}

.button_N:hover  
{
  background-color:#ddd; 
}

.header {
  
  background-color: white; 
  border-style: solid;
  border-width: 1px;
  border-color: #12485E; 
  padding: 5px 20px 0px 5px;
}
 

.header-inverse {
  
  background-color: black; 
  border-style: solid;
  border-width: 1px;
  border-color: #12485E; 
  padding: 5px 20px 0px 20px;
} 

.header a {
  float: left;
  color: black;  
  text-decoration: none; 
  margin: 5px 5px 5px 5px;  
  font-size: 40px;
  font-weight: bold;
  font-family: Georgia;
}

.header-inverse a {
  float: left;
  color: yellow;  
  text-decoration: none; 
  margin: 5px 5px 5px 5px; 
  font-size: 40px;
  font-weight: bold;
  font-family: Georgia;
}
 

.header a.active {
  background-color: dodgerblue;
  color: white;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}
   
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}
 
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Float four columns side by side */
.column {
  float: left;
  width: 33%;
  padding: 0 10px; 
}

.column-header {
  overflow: hidden;  
  background-color: #12485E;
  font-weight: bold;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
  border-style: ridge;
}

.column-header-inverse {
  overflow: hidden;  
  background-color: black;
  font-weight: bold;
  color: yellow;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
  border-style: ridge;
}

.column-List {
  overflow: hidden;  
  background-color: white;  
  text-align: left;
  padding: 5px 5px 5px 5px;
  text-decoration: none; 
  border-style: ridge;
  display: block; 
  
}

.column-List-inverse {
  overflow: hidden;  
  background-color: black;  
  text-align: left;
  padding: 5px 5px 5px 5px;
  text-decoration: none;  
  border-style: ridge;
  display: block;  
}
  
.column-List ul
{
  list-style-type: none;
  line-height: 30px;  
  margin : 0;
  padding : 0; 
}

.column-List-inverse ul
{
  list-style-type: none;
  line-height: 30px;  
  margin : 0;
  padding : 0;
}

.column-List ul li
{
    font-size: 20px;
    font-family:Arial;    
}

.column-List-inverse ul li
{
    font-size: 20px;
    font-family:Arial;    
}


.column-List ul li a
{
    color: #12485E;
    background: url(../images/arrow-blt.gif) 5px 8px no-repeat;
    padding: 3px 3px 3px 20px;
    display: block;
    border-bottom: 1px dashed #CCCCCC;
    text-decoration: none;
}

.column-List-inverse ul li a
{
    color: yellow;
    background: url(../images/arrow-blt.gif) 5px 8px no-repeat;
    padding: 3px 3px 3px 20px;
    display: block;
    border-bottom: 1px dashed #CCCCCC;
    text-decoration: none;
}

.column-List ul li a:hover
{
    color: #000;
    background-color: #CCCCCC;
}

.column-List-inverse ul li a:hover
{
    color: #000;
    background-color: #CCCCCC;
}
 


/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}




/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}


.row-link 
{
    margin: 20px 30px 0px 10px;
    overflow: hidden;
    background-color: white;   
    text-align: center;
    vertical-align :middle;
}

.row-link-inverse 
{
    margin: 20px 30px 0px 10px;
    overflow: hidden;
    background-color: black;   
    text-align: center;
    vertical-align :middle;
}

/* Clear floats after the columns */
.row-link:after {
  content: "";
  display: table;
  clear: both;
}

/* Float four columns side by side */
.column-link {
  float: left;  
  margin: 10px 10px 10px 10px;  
  padding: 5px 5px 5px 5px;
  width:10%;
  height:150px;
}

@media screen and (max-width: 600px) {
  .column-link {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

.sidenav {
  position: fixed;
  z-index: 500;
  top: 300px; 
  background: white;
  overflow-x: hidden; 
}

.sidenav a { 
  text-decoration: none;
  font-size: 25px; 
  display: block;
}

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

.main {
  margin-left: 140px; /* Same width as the sidebar + left position in px */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

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

.contain {
  overflow: hidden;    
  text-align: left;
  display: block;  
  display: block;  
  width: 100%;  
  padding: 20px 40px 40px 40px; 
  background-color: #f5f5f5; 
  color: black;  
}
 
 .contain-inverse {
  overflow: hidden;    
  text-align: left;
  display: block;  
  display: block;  
  width: 100%;  
  padding: 20px 40px 40px 40px; 
  background-color: black; 
  color: yellow;  
}

.presentpage {
  overflow: hidden;  
  padding: 0px 0px 0px 60px;  
  font-size: 20px;
  font-weight: bold; 
} 

.presentpage a {
  float: left;     
}
 


.container {
  overflow: hidden;  
  background-color: white;
  color: Black;  
  text-align: left;
  padding: 14px 16px; 
  display: block;   
  margin: 20px 20px 20px 60px;
  border-radius: 20px;
}

.container-inverse {
  overflow: hidden;  
  background-color: Black;
  color: yellow;  
  text-align: left;
  padding: 14px 16px; 
  display: block;   
  margin: 20px 20px 20px 60px;
  border-radius: 20px;
}


.Container-header {
  overflow: hidden;  
} 

.Container-header a {
  float: left; 
  text-decoration: none; 
  font-size: 30px;
  font-weight: bold;
  font-family: Georgia;
  padding: 5px 20px 0px 20px;
}
 
 .Container-detail {
  overflow: hidden;   
} 

.Container-detail a {
  float: left; 
  display: block;
  text-decoration: none; 
  font-size: 20px;
  text-align: justify; 
  line-height: 30px;  
  padding: 20px 20px 0px 20px;
}
 
 
 .sitemapnav {
  overflow: hidden;  
  text-align: left; 
  display: block;   
  margin: 20px 20px 20px 60px;
  font-weight: bold;
  background-color: white; 
}
  

.sitemapnav a {
  float: left;
  display: block; 
  text-align: left; 
  text-decoration: none;
  font-size: 20px;
  padding: 0px 0px 0px 35px;
}
  
.sitemapnav-inverse {
  overflow: hidden;
  background-color: black; 
}

.sitemapnav-inverse a  
{
  float: left;
  display: block;
  color: yellow;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px; 
} 
  
  
  
   
/* Float four columns side by side */
.column_66 {
  float: left;
  width: 66%;
  padding: 0 10px; 
}