*, *:before, *:after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0px;
  font-family: 'Arial', 'sans-serif';
  background-color: #E6E6E6;
}

/* Style for header */
.header {
  overflow: hidden;
  background-color: #333;
}

.header h1 {
  font-size: 11px;
  color: #fff;
  display: flex;
  flex-flow: row;
  align-items: left;
  font-weight: normal;
  margin: 0 10px;
  padding: 7px 0;
}

.top-banner {
  background-color: #333;
}

/* Style for unit-1 */
.unit-1 {
  float: none;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 5px;
}

/* Style for unit-1 */
.unit-1-mobile {
  float: none;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 5px;
}

@media screen and (max-width: 768px) {
     #Unit-1 {
        display: none;
     }
}

@media screen and (min-width: 768px) {
     #Unit-1-mobile {
        display: none;
     }
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #232323;
  border-radius: 0px;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  text-transform: none;
  font-weight: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #000000;
  color: white;
}

/* Add an active class for logo */
.topnav a.logo {
  background-color: #232323;
  color: white;
  font-family: 'Kefa',Times,serif;
  font-size: 20px;
  text-transform: none;
  padding-top: 11px;
  padding-right: 47px;
  padding-bottom: 11px;
  padding-left: 18px;
}

/* Add an active class to highlight the current page */
.topnav a.active {
 background-color: #229742;
 color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

h2 {
  color: #004080;
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  text-transform: none;
  padding-top: 10px;
  padding-bottom: 15px;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

p {
  color: #000;
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.mini_text {
  color: #000;
  font-size: 12px;
  font-weight: normal;
  text-align: left;
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Style for footer */
.footer {
  overflow: hidden;
  background-color: #333;
}

.wrapper {
  max-width: 980px;
  margin: 0 0px;
  display: grid;
  grid-gap: 0px;
}

@media screen and (min-width: 768px) {

  /* no grid support? */
  .sidebar {
    float: left;
    width: 19.1489%;
  }

  .content {
    float: right;
    width: 79.7872%;
  }

  .wrapper {
    margin: 0 auto;
    grid-template-columns: 1fr 4fr;
  }
  
  .header, .footer, .top-banner, .menu {
    grid-column: 1 / -1;
    /* needed for the floated layout */
    clear: both;
  }

}

.wrapper > * {
  color: #fff;
  border-radius: 0px;
  padding: 0px;
  font-size: 12px;
  /* needed for the floated layout*/
  margin-bottom: 0px;
}

.sidebar {
  background-color: #B1B3BD;
  text-align: center;
}

.content {
  background-color: #E6E6E6;
  text-align: center;
}

/* Style for unit-2 */
.unit-2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Style for unit-3 */
.unit-3 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 15px;
}

.unit-4 {
  margin-top: 0px;
  margin-bottom: 0px;
}

#Unit-2 {
position: -webkit-sticky;
position: sticky;
left: 17;
top: 0;
}

#Unit-4 {
position: -webkit-sticky;
position: sticky;
text-align: center;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
height:50px
}

@media screen and (max-width: 768px) {
     #Unit-2 {
        display: none;
     }
}

@media screen and (min-width: 768px) {
     #Unit-4 {
        display: none;
     }
}

.links {
  color: black;
  text-align: left;
  font-size: 14px;
  font-weight: normal;
  padding-left: 10px;
}

.links a {
  background-color: transparent; /* Background color */
  color: black; /* Link color */
  text-decoration: none; /* Remove underline from links */
  font-weight: bold;
}

.links a:hover {
  background-color: transparent; /* Background on mouse-over */
  color: red; /* Red color on mouse-over */
  text-decoration: underline;
  font-weight: bold;
}

.dot_links {
  height: 4px;
  width: 4px;
  background-color: black;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 2px;
  margin-left: 0px;
  margin-right: 5px;
}

.footer_links {
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  margin-top: 0px;
  margin-bottom: 0px;
}

.footer_links a {
  background-color: #333; /* Grey background color */
  color: white; /* link color */
  display: inline-block; /* Make the links appear inline */
  padding: 5px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
}

.footer_links a:hover {
  background-color: #333; /* Black-Grey background on mouse-over */
  color: yellow; /* Yellow color on mouse-over */
  text-decoration: none; 
}

.footer_links a.active {
  background-color: #333; 
  color: #aaa; /* Add a grey color to the "active/current" link */
  font-weight: bold;
}

.dot {
  height: 3px;
  width: 3px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 3px;
}

.stats {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 10px;
}

.copyright {
  margin: 2em 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: normal;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
@supports (display: grid) {
  .wrapper > * {
    width: auto;
    margin: 0;
  }
  
  /* COMPACT CAPTCHA */

.capbox {
	background-color: #BBBBBB;
	background-image: linear-gradient(#BBBBBB, #9E9E9E);
	border: #2A7D05 0px solid;
	border-width: 2px 2px 2px 20px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	display: inline-block;
	padding: 5px 8px 5px 8px;
	border-radius: 4px 4px 4px 4px;
	}

.capbox-inner {
	font: bold 12px arial, sans-serif;
	color: #000000;
	background-color: #E3E3E3;
	margin: 0px auto 0px auto;
	padding: 3px 10px 5px 10px;
	border-radius: 4px;
	display: inline-block;
	vertical-align: middle;
	}

#CaptchaDiv {
	color: #000000;
	font: normal 25px Impact, Charcoal, arial, sans-serif;
	font-style: italic;
	text-align: center;
	vertical-align: middle;
	background-color: #FFFFFF;
	user-select: none;
	display: inline-block;
	padding: 3px 14px 3px 8px;
	margin-right: 4px;
	border-radius: 4px;
	}

#CaptchaInput {
	border: #38B000 2px solid;
	margin: 3px 0px 1px 0px;
	width: 105px;
	}