/***************************GLOBAL BEGIN***************************************/
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Bree+Serif');
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Copse');
@import url('https://fonts.googleapis.com/css?family=ABeeZee');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css2?family=Style+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');

/*
Custom CSS
=============
Author:  Craig A. Johnson
Started: January 2018
Updated: October 2018
*/
/*NOTES

Added banner and stripe shrink on 8/18/2017

Need to fix - when dpi responsize shrink to smaller size and then scroll down
the button is out of place.

Also need to make entire banner smaller when page is at the top at a smaller dpi.

When smaller dpi, button click makes it gold color and doesn't change till click inside page.

The 100–900 values roughly correspond to the following common weight names:
100 — Thin / Extra Thin / Hairline
200 — Extra Light / Ultra Light
300 — Light
400 — Regular (Normal)
500 — Medium
600 — Semi Bold / Demi Bold
700 — Bold
800 — Extra Bold / Ultra Bold 
900 — Black / Ultra Black / Heavy

Good stroke for text:
text-shadow: -1px -1px 0 #000,  
  1px -1px 0 #000,
  -1px 1px 0 #000,
   1px 1px 0 #000;
*/
.centered {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

hr {
   margin: 0 auto;
}
:root {
 --white: #FFFFFF;
  --blue: #0063A6;
  --logored: #ee7777;
  --gold: #ffd046;
  --goldtint: #ffe290; /* original was cream (#ffd046) */
  --lightblue: #0090D2;
  --logogold: #ffaa00;
  --logogrey: #d3d3d3;
  --logoblue: #5cb8ff;
  --ivory: #FFFFF0;
  --darkgrey: #333;
  --lightgrey: #cccccc;
  --red: #ff0000;
  --lightred: #bb000c;
  --lightgreen: #38761D;
  --darkgreen: #1D3C0E;
  --darkred: #800000;
  --lightpurple: #6A00BB;
  --darkpurple: #2B004D;
  --navbarblue: #003b63; /*darkblue*/
  --background: #fffee8; /* original was cream (#FFFDD0) */
  --textcolor: #fff8dc; /*cornsilk*/
  /*--alert: #cc3d3d;*/
}

.sriracha-regular {
  font-family: "Sriracha", cursive;
  font-weight: 900;
  font-style: normal;
}

.text-cream {
  color: var(--background);
}
.text-red {
  color: red;
}
.large18px {
  font-size: 18px;
}
.large18pxli li {
  font-size: 18px;
  margin-left: 40px;
}
.thin {
  font-weight: 100;
}
.extra-light {
  font-weight: 200;
}
.light {
  font-weight: 300;
}
.regular {
  font-weight: 400;
}
.medium {
  font-weight: 500;
}
.semi-bold {
  font-weight: 600;
}
.bold {
  font-weight: 700;
}
.extra-bold {
  font-weight: 800;
}
.black {
  font-weight: 900;
}
.display-5 {
  font-size: 2.5rem;
}
.display-6 {
  font-size: 1.5rem;
}
.display-6-5 {
  font-size: 1.25rem;
}
.display-7 {
  font-size: 1rem;
}
.display-8 {
  font-size: .75rem;
}
.display-9 {
  font-size: .5rem;
}
.indent {
    margin-left: 40px;
}
.MDEM {
  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
  font-weight: bold;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: gold;
}
.list-group-roman {
  list-style: upper-roman inside;
  border: none;
}
ol.ordered-list {
  border-color: red;
  border: none;
}
/*::-webkit-scrollbar {
display: none;
}*/
a:link, a:visited, a:hover, a:active {
  text-decoration: none;
  cursor: pointer;
}
html, body {
  height: 100%;
  width: 100%;
  /*font-family: 'Raleway', sans-serif;*/
  font-family: Trebuchet MS, Helvetica, sans-serif;
  background-color: var(--background);
}
body {
  padding-top: 50px;
}
abbr[title] {
  border: none;
  text-decoration: none;
}
.padding {
  padding-bottom: 1rem;
}
.topbar {
  background-color: var(--blue);
  border-bottom: 2px solid #b4b4b4;
  width: 100%;
}
.brighten img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.brighten img:hover {
  -webkit-filter: brightness(75%) drop-shadow(0px 0px 10px rgba(0, 0, 0, .8)) grayscale(1);
}
.tab {
  text-indent: 40px;
}
.email {
  text-decoration: none;
  color: white;
}
.email:hover {
  color: red;
}

.important {
  color: red;
}
.importantbold {
  color: red;
  font-weight: 900;
}
.responsive-pdf {
  position: relative;
  padding-bottom: 50%;
  padding-top: 80px;
  overflow: hidden;
}
.responsive-pdf iframe, .responsive-pdf object, .responsive-pdf embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.btn-xs {
  padding: .25rem .4rem;
  font-size: .8rem;
  line-height: .5;
  border-radius: .2rem;
  border: white;
}
.Custombtn {
  background-color: DodgerBlue; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 10px 10px; /* Some padding */
  font-size: 16px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
  border-radius: 10px;
}
.Custombtn:hover {
  background-color: var(--navbarblue);
  color: white;
}
.MDEQlogo {
  border-radius: 50px;
}
.non-click {
  pointer-events: none;
}
.list-hover li:hover {
  background-color: var(--lightblue);
}
hr.hr-goldenrod {
 border: 2px solid goldenrod;
    width: 100% !important;
}

.hr2 {
        border-top: 3px solid black;
      }
/*table tr td {
  width: 20%;
}*/
/* --------------------------------------
ALERTS (Home.html)
-------------------------------------- */
.redalert {
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #ffc1bf;
}
.yellowalert {
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #ffff00;
}
/* The alert message box */
/*.alert {
  padding: 10px;
  background-color: var(--alert);
  color: white;
  margin-bottom: 15px;
}*/
/* The close button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  /*font-size: 22px;
    line-height: 20px;*/
  cursor: pointer;
  transition: 0.3s;
}
/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}

/* --------------------------------------
NEWS (NewsPage.html)
-------------------------------------- */
.newscontainer {
  border: 1px solid var(--blue);
  height: 500px;
  overflow-y: scroll;
}
.news {
  padding: 5px 0px 5px 0px;
  background-color: var(--lightblue); /* Red */
  color: white;
  margin-bottom: 5px;
  border: 1px solid black;
}
.newsdate {
  padding-right: .25rem;
  padding-left: .25rem;
  border: 1px solid black;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.newstext {
  align-items: center;
  height: 100%;
  font-weight: bold;
}
.newstext a {
  color: red;
  font-weight: bold;
}
/* --------------------------------------
CUSTOM TABLES (Everypage)
-------------------------------------- */
table.whiteTable {
  background-color: white;
}
table.whiteTable td {
  background-color: white;
  color: black;
}
table.blueTable, thead, th {
  background-color: black;
  border: 2px solid grey;
}
table.blueTable td {
  background-color: var(--navbarblue);
  border: 2px solid grey;
  color: white;
}
table.blueTable td a {
  color: white;
}
table.blueTable, table.blueTable td:hover {
  background-color: var(--blue);
}
#misc_download {
  table-layout: fixed;
}
.table-nonfluid {
  width: auto !important;
}
/*#misc_download.table {
    background-color: black;
        border: 2px solid grey;
}
#misc_download.table {
    background-color: var(--navbarblue);
    border: 2px solid grey;
}

#misc_download.table, td:hover{
    background-color: var(--blue);
}

#misc_download td a{
    color: white;
}

#misc_download {
    table-layout: fixed;
}*/
/*#postKatrinatable table, thead, th {
    background-color: black;
    border: 2px solid grey;
}
#postKatrinatable table, thead, td {
    background-color: var(--navbarblue);
    border: 2px solid grey;
}
#postKatrinatable td{
    color: white;
}*/
/* --------------------------------------
CUSTOM BORDERS (Everypage)
-------------------------------------- */
.border-blue {
  color: #003763;
  border-width: 2
}
.bg-darkblue {
  background-color: #003763;
}
.countydata td {
    background-color: var(--blue) !important;
    color: var(--white) !important;
}
.bg-blue {
  background-color: var(--blue) !important;
}
.bg-red {
  background-color: var(--red);
}
.bg-lightred {
  background-color: var(--lightred);
}
.bg-darkred {
  background-color: var(--darkred);
}
.bg-green {
  background-color: var(--lightgreen);
}
.bg-purple {
  background-color: var(--lightpurple);
}
.bg-darkpurple {
  background-color: var(--darkpurple);
}
.bg-darkgreen {
  background-color: var(--darkgreen);
}
.border_blue-2 {
  border-width: 2px;
  border-style: solid;
  border-color: var(--blue);
}
.border_red-2 {
  border-width: 2px;
  border-style: solid;
  border-color: var(--lightred);
}
.border_green-2 {
  border-width: 2px;
  border-style: solid;
  border-color: var(--lightgreen);
}
.border_black-2 {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}
.border_purple-2 {
  border-width: 2px;
  border-style: solid;
  border-color: var(--lightpurple);
}
.border_img_bottom {
  border-bottom-width: 2px;
  border-color: black;
  border-bottom-style: solid;
}
.myborderRight {
  border-right: 2px solid #b4b4b4;
}


/***************************GLOBAL END***************************************/
/* --------------------------------------
NAVBAR SECTION (Everypage)
-------------------------------------- */
.nav-top {
  background-color: var(--navbarblue);
  /* border-bottom: 2px solid #b4b4b4;*/
  border-bottom: 2px solid var(--gold);
  width: 100%;
}
.nav-top { /*very top (News, Forum, etc...)*/
  background-color: var(--blue);
  font-size: 1em;
  height: 30px;
  /*font-family: 'Open Sans Condensed', sans-serif;*/
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  border-bottom: 2px solid var(--gold);
  width: 100%;
}
.nav-bottom { /*Main navigation bar at top of page (Home, About, etc...)*/
  background-color: var(--navbarblue);
  /* border-bottom: 2px solid #b4b4b4;*/
  border-bottom: 2px solid var(--gold);
  width: 100%;
}
.navbar-brand { /*MARIS at top of page*/
  font-family: Trebuchet MS, Helvetica, sans-serif;
  font-size: 2em;
  font-weight: bold;
  font-style: italic;
  color: var(--goldtint);
  /*text-shadow: 2px 2px 4px #000000;*/
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  cursor: pointer;
}
.navbar-brand:hover {
  color: var(--textcolor);
}
.nav.navbar-nav {
  background-color: rgba(0, 144, 210, .4);
}
/*.navbar-caption {
    font-family: Trebuchet MS, Helvetica, sans-serif;
    font-size: 1.25em;
    font-weight: bold;
    color: var(--textcolor);
    text-shadow: 2px 2px 4px #000000;
    cursor: pointer;
}*/
.navbar-sub-caption { /*Mississippi Automated Resource Information System at top of page*/
  color: var(--goldtint);
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.navbar-nav li {
  padding-right: 5px; /*was 13px*/
}
.underline {
  text-decoration: underline !important;
}
.nav-link { /*News, Forum...Home, About, Data, etc... in navigation bar*/
  font-size: 1em !important;
  font-weight: bold !important;
  color: var(--goldtint);
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.nav-link:hover {
  color: var(--textcolor);
}
/*the square box with 3 lines when screen is displayed on mobile device*/
.custom-toggler.navbar-toggler {
  border-color: var(--goldtint);
}
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 208, 70, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navtoplink {
  line-height: 1px;
  color: var(--goldtint);
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.navtoplink:hover {
  color: var(--textcolor);
}
.nav-bottom {
  margin-top: 30px;
  min-height: 56px;
}
.header-btn {
  margin-top: 8px;
  width: 161%;
  border: none;
  border-radius: 1rem;
  padding: 5%;
  color: #fff;
  font-weight: 700;
  font-size: .75em;
  cursor: pointer;
}
/* --------------------------------------
ADDED ABOVE Feb 12, 2019
-------------------------------------- */
/* --------------------------------------
WELCOME2 SECTION (Home.html)
-------------------------------------- */
.welcome2 {
  margin-top: 3em;
  color: var(--black);
}
/* --------------------------------------
WELCOME SECTION (About.html)
-------------------------------------- */
.welcome {
  margin-top: 2em;
  background: url("../images/home2.jpg") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: var(--textcolor);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/*.welcome */ .dark-overlay {
  /*background-color: rgba(0, 0, 0, 0.7);*/
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  width: 100%;
}

.white-text {
    display: block;
    background: var(--blue);
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.home-title {
    display: block;
    background: var(--blue);
    border: 0px;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.Christmas{
    font-family: 'Style Script', cursive;
    font-size: 4.5em;
    display: block;
    background-image: url("../images/Christmas.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    border: 1px solid black;
    color: yellow;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.home-inner {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.announcements {
    display: block;
    background: var(--blue);
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/* Added below 2/14/2020 for top of Announcements on Home.html */
.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}
/* Added above 2/14/2020 for top of Announcements on Home.html */
.welcome .card-form {
  background: var(--navbarblue);
  opacity: 1;
  border: 1px solid black;
  box-shadow: 5px 5px 10px black;
    color: var(--textcolor);
}
.card .card-body img.staff {
  width: 120px;
  border-radius: 50%;
}

.card-custom-home {
  border-radius: 0px;
  overflow: hidden;
  min-height: 300px;
  max-height: 300px;
  /*box-shadow: 0 0 15px rgba(10, 10, 10, .7);*/
  margin-bottom: 20px;
  /*border: 1px solid black;*/
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background: #f4fafd;
    border: 2px solid var(--navbarblue);
}

.card-title-home{
    background: var(--blue);
    color: var(--white);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    padding: 5px;
}
.card-link-home {
  padding: 20px 20px 20px;
}
/*.card-footer-home {
    background: var(--lightblue);
    color: var(--lightblue); 
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
    max-height: 20px;
}*/
.cardoffer[data-clickable=true]{
    cursor: pointer;
}

.offer .card:hover {
  transition: all 0.3s ease;
    transform: scale(1.05);
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.offer .card:hover .bi-hover-bold {
  -webkit-text-stroke: 1px;
    -webkit-text-fill-color: white;
}

.bi-hover-bold {
    color: black;
}

.frontCardText {
    font-size: 16px;
}

/* -----------------------------------
REST SERVICES (RestMapServices.html)
----------------------------------- */
.list-unstyled.multilevels li {
  font-weight: bold;
}
.list-unstyled.multilevels li.category {
  background-color: red;
  padding: .1rem;
}
.list-unstyled.multilevels ul {
  padding-left: 1.4rem;
  list-style: none;
}
.list-unstyled.multilevels ul li {
  font-weight: normal;
}
.restservicesWHITE {
  background-color: white;
}
.restservicesWHITE li {
  padding: 3px;
  margin: 2px;
  background-color: white;
  color: white;
  /*border: 1px solid black;*/
  border-radius: 0px;
}
.restservices {
  background-color: var(--textcolor);
}
.restservices button {
  border: 1px solid black;
}
.restservices a {
  border: 1px solid black;
}
.restservices li {
  padding: 3px;
  margin: 2px;
  background-color: var(--navbarblue);
  color: white;
  /*border: 1px solid black;*/
  border-radius: 0px;
}
.restservices li.REDnew {
  padding: 3px;
  margin: 2px;
  background-color: red;
  color: white;
  /*border: 1px solid black;*/
  border-radius: 0px;
}
.restservices .list-group-item {
  border-radius: 0px;
}
/*.restservices li:hover {
   
    background-color: var(--goldtint);
    color: black;
    cursor: default;
}*/
/* -----------------------------------
CAROUSEL (Home.html)
----------------------------------- */
.text-responsive {
  font-size: calc(100% + 1vw + 1vh);
}
.theCarousel {
  margin-bottom: 3rem;
}
.carousel-caption {
  color: var(--textcolor);
  font-weight: bolder;
  text-shadow: -2px -2px 3px #000, 2px -2px 3px #000, -2px 2px 3px #000, 2px 2px 3px #000;
  font-family: 'Noto Sans', sans-serif;
  font-size: calc(100% + 1vw + 1vh);
}
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
/*.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
    font-weight: bold;
  color: black;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
    font-weight: bold;
  color: black;
}*/
/*.homeCarouselText {
    color: var(--white);
    font-weight: bolder;
    font-family: 'Noto Sans', sans-serif;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    
}*/
/*.carousel.carousel-fade{
	opacity:1;
    margin-bottom: 3rem;
}*/
/*.carousel.carousel-fade>.carousel-inner>.item{
	-moz-transition:opacity ease-in-out .6s;
	-o-transition:opacity ease-in-out .6s;
	-webkit-transition:opacity ease-in-out .6s;
	transition:opacity ease-in-out .6s;
	left:0 !important;
	opacity:0;
	top:0;
	position:absolute;
	width:100%;
	display:block !important;
	z-index:1;
    
}*/
/*.carousel.carousel-fade>.carousel-inner>.item:first-child{
	top:auto;
	position:relative;
}*/
/*.carousel.carousel-fade>.carousel-inner>.active{
	opacity:1;
	-moz-transition:opacity ease-in-out .6s;
	-o-transition:opacity ease-in-out .6s;
	-webkit-transition:opacity ease-in-out .6s;
	transition:opacity ease-in-out .6s;
	z-index:2
}*/
/*.carousel.carousel-fade>.carousel-control{
	z-index:2
}*/
/*.carousel-inner{
    border: 2px solid black;
}*/
/*.carousel-caption {
    color: var(--background);
    text-shadow: -1px -1px 0 #000,  1px -1px 0 #000,  -1px 1px 0 #000,  1px 1px 0 #000;  
    background: rgba(0, 0, 0, 0.5);
    padding-top: 0px;
    padding-bottom: 0px;
    bottom: 0px;
    left: 0%;
    right: 0%;
}*/
/* --------------------------------------
CARD SECTION (Home.html)
-------------------------------------- */
section {
  padding-top: 1rem;
  /*    padding-bottom: 3rem;*/
  background-color: var(--blue);
}
.wrap {
  /*display: flex;
  background: var(--white);*/
 /* padding-top: 1rem;
  padding-right: 1.2rem;
  border-radius: 0.5rem;*/
  box-shadow: 7px 7px 30px -5px rgba(0, 0, 0, 0.1);
  /*margin-bottom: 2rem;*/
  border: 2px solid black;
  text-align: justify;
  color: black;
}
.wrap:hover {
  background: linear-gradient(135deg, #5cb8ff 0%, #003b63 100%);
  /*background: linear-gradient(135deg,#6394ff 0%,#0a193b 100%);*/ /*Original*/
  /*color: var(--textcolor);*/
    /*font-weight: bolder;*/
  /*text-shadow: 0px 0px 0px black, 0 0 25px black, 0 0 2px white;*/
}

.ico-wrap {
  margin: auto;
}
.home-iconfont {
  font-size: 4.5rem !important;
  margin: 1rem;
  padding-right: 1rem;
}
/*.vcenter {
    margin: auto;
}*/
/*.mbr-section-title3 {
    text-align: left;
}*/
/*h2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}*/
/*.mbr-bold {
    font-weight: 700;
}*/
/*p {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    line-height: 25px;
}*/
/*.small-img {
  max-height: 200pt!important;
  height: 150pt!important;
}
*/
/* --------------------------------------
MISSION SECTION (About.html)
-------------------------------------- */
.mission {
  /*background-color: var(--navbarblue);*/
  color: var(--black);
}
.mission .btn-primary {
  background-color: var(--blue);
  border: 1px solid black;
}
.mission .btn-primary:hover {
  background-color: var(--logoblue);
  border: 1px solid black;
  color: black;
}
hr {
  border-top: 2px solid #b4b4b4;
  width: 75%;
  margin-top: .3rem;
  margin-bottom: 1rem;
}
/* --------------------------------------
OVERVIEW SECTION (Overview.html)
-------------------------------------- */
.overview {
  margin-top: 50px;
  /*background-color: var(--navbarblue);*/
  color: var(--black);
}
.modal {
  color: black;
}
/* --------------------------------------
TEAM SECTION (About.html)
-------------------------------------- */
.theTeam {
  width: 175px !important;
  height: 175px !important;
  color: white;
}
.theTeam:link {
  color: white;
}
/* --------------------------------------
MAPS SECTION (Maps.html)
-------------------------------------- */
.card-custom {
  overflow: hidden;
  min-height: 500px;
  box-shadow: 0 0 15px rgba(10, 10, 10, .7);
}
.card-custom-img {
  height: 200px;
  min-height: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-color: inherit; /*inheritt*/
}
.card-custom-img::after {
  position: absolute;
  content: '';
  top: 162px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-top-width: 40px;
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-width: 545px;
  border-left-width: calc(575px - 14vw);
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: inherit;
}
.card-custom-avatar img {
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(10, 10, 10, 0.9);
  position: absolute;
  top: 100px;
  left: 1.25rem;
  width: 100px;
  height: 100px;
}
.card-custom-avatar2 img {
  border-radius: 5%;
  box-shadow: 0 0 15px rgba(10, 10, 10, 0.9);
  position: absolute;
  top: 100px;
  left: 1.25rem;
  width: 200;
  height: 100px;
}
.card-image {
  width: 100%;
  height: 99%;
  border-top-left-radius: calc(.25rem - 1px);
  border-top-right-radius: calc(.25rem - 1px);
}
.redRibbonMaps {
  position: absolute;
  right: 25px;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px;
  height: 75px;
  text-align: center;
}
.redRibbonMaps span {
  font-size: 10px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  line-height: 20px;
  transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #F62459;
  background: linear-gradient(#ff89b1 0%, #ff006e 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px;
  right: -21px;
}
.redRibbonMaps span::before {
  content: '';
  position: absolute;
  left: 0%;
  top: 100%;
  z-index: -1;
  border-left: 3px solid #F62459;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #F62459;
}
.redRibbonMaps span::after {
  content: '';
  position: absolute;
  right: 0%;
  top: 100%;
  z-index: -1;
  border-right: 3px solid #F62459;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #F62459;
}
/*.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}*/
/*.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}*/
/*.card-custom-avatar:hover {
    transition: .5s ease;
    opacity: 0.8;
}*/
a.a_unstyled, a.a_unstyled:hover {
  color: black;
}

.wma img {
    width: 100%;
    position: relative;
}
.wma .overlay {
  position: absolute;
  top: 0px;
    width: 35%;
  /*width: 65px; */
}
.wma .overlay2 {
  position: absolute;
  top: 120px;
    width: 65%;
  color: red;
}

/* --------------------------------------
DATA SECTION (Data.html)
-------------------------------------- */
.datarows {
  margin-top: 3rem;
}
.datarows .breadcrumb {
  font-size: 14px;
  width: 100%;
  height: 40;
  border: 0px solid;
  text-decoration: none;
  padding: 0 0 0 0;
}
ol.breadcrumb li a:hover {
  color: red;
  text-decoration: none;
}
.card-footer {
  padding: 0 0 0 0 !important;
}


.redRibbonYear {
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px;
  height: 75px;
  text-align: center;
}
.redRibbonYear span {
  font-size: 15px;
  color: #ffffff;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  line-height: 20px;
  transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #F62459;
  background: linear-gradient(#ff0000 0%, #ff0000 100%); /*OLD linear-gradient(##F62459 0%, #ff006e 100%);*/
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px;
  right: -21px;
}
.redRibbonYear span::before {
  content: '';
  position: absolute;
  left: 0%;
  top: 100%;
  z-index: -1;
  border-left: 3px solid #F62459;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #F62459;
}
.redRibbonYear span::after {
  content: '';
  position: absolute;
  right: 0%;
  top: 100%;
  z-index: -1;
  border-right: 3px solid #F62459;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #F62459;
}


















.redRibbon {
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px;
  height: 75px;
  text-align: center;
}
.redRibbon span {
  font-size: 10px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  line-height: 20px;
  transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #F62459;
  background: linear-gradient(#ff89b1 0%, #ff006e 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px;
  right: -21px;
}
.redRibbon span::before {
  content: '';
  position: absolute;
  left: 0%;
  top: 100%;
  z-index: -1;
  border-left: 3px solid #F62459;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #F62459;
}
.redRibbon span::after {
  content: '';
  position: absolute;
  right: 0%;
  top: 100%;
  z-index: -1;
  border-right: 3px solid #F62459;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #F62459;
}
.blueRibbon {
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px;
  height: 75px;
  text-align: center;
}
.blueRibbon span {
  font-size: 10px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  line-height: 20px;
  transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #0063A6;
  background: linear-gradient(#5fbdfc 0%, #0097fc 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px;
  right: -21px;
}
.blueRibbon span::before {
  content: '';
  position: absolute;
  left: 0%;
  top: 100%;
  z-index: -1;
  border-left: 3px solid #0063A6;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #0063A6;
}
.blueRibbon span::after {
  content: '';
  position: absolute;
  right: 0%;
  top: 100%;
  z-index: -1;
  border-right: 3px solid #0063A6;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #0063A6;
}
.greenRibbon {
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px;
  height: 75px;
  text-align: center;
}
.greenRibbon span {
  font-size: 10px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  line-height: 20px;
  transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #00a500;
  background: linear-gradient(#52e552 0%, #309b30 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px;
  right: -21px;
}
.greenRibbon span::before {
  content: '';
  position: absolute;
  left: 0%;
  top: 100%;
  z-index: -1;
  border-left: 3px solid #00a500;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #0063A6;
}
.greenRibbon span::after {
  content: '';
  position: absolute;
  right: 0%;
  top: 100%;
  z-index: -1;
  border-right: 3px solid #00a500;
  border-left: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #00a500;
}
.inventory .card:hover {
  transition: all 0.3s ease;
  box-shadow: 12px 15px 20px 0px rgba(46, 61, 73, 0.5); /*was .15*/
}
.inventory .view-btn {
  background-color: #e6de08;
  margin: -15px 0 0 0;
  border-radius: 0 0 4px 4px;
  font-size: 14px;
  border: #e6de08;
  color: #000;
}
.inventory .btn:hover {
  background-color: #ff4444;
  color: #fff;
  border: 0px solid #ff4444;
  transition: all 0.3s ease;
  box-shadow: 12px 15px 20px 0px rgba(46, 61, 73, 0.15);
}
#MDEMinventory .card:hover {
  transition: all 0.3s ease;
  box-shadow: 12px 15px 20px 0px rgba(46, 61, 73, 0.5); /*was .15*/
}
#MDEMinventory .view-btn {
  background-color: #e6de08;
  margin: -15px 0 0 0;
  border-radius: 0 0 4px 4px;
  font-size: 14px;
  border: #e6de08;
  color: #000;
}
#MDEMinventory .btn:hover {
  background-color: #ff4444;
  color: #fff;
  border: 0px solid #ff4444;
  transition: all 0.3s ease;
  box-shadow: 12px 15px 20px 0px rgba(46, 61, 73, 0.15);
}
/* --------------------------------------
NAIP SECTION (NAIP.html)
-------------------------------------- */
.NAIP {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../images/Data/capitalBackground.jpg");
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.NAIPtext {
  color: var(--textcolor);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.NAIPinventory .card {
  border: 1px solid var(--navbarblue) !important;
}
.NAIPinventory .card:hover {
  transition: all 0.3s ease;
  /*box-shadow: 12px 15px 20px 0px rgba(46, 61, 73, 0.5);*/
    transform: scale(1.1);
}
.NAIPinventory .card .card-footer {
  background-color: var(--navbarblue);
  font-size: 1.2em;
  font-weight: 900;
  color: var(--textcolor);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/* --------------------------------------
BOUNDARIES SECTION (Boundaries.html)
-------------------------------------- */
.data_cards .card {
  border-radius: 4px;
  background: var(--blue); /*#C4D7DF #F7EFC6*/
  color: var(--textcolor);
  /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
  border: 2px solid black;
  box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
  transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
  padding: 0 0 0 0 !important; /*cursor: pointer;*/
}
.data_cards .card:hover {
  transform: scale(1.03); /* box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);*/
}
.data_cards .card h5 {
  font-weight: 100; /*text-shadow: -1px -1px 0 #FFFDD0, 1px -1px 0 #FFFDD0, -1px 1px 0 #FFFDD0, 1px 1px 0 #FFFDD0;*/
}
.data_cards .card .card-body {
  padding: 5px !important;
  margin: 0px !important;
}
.data_cards .card .card-body .btn {
  font-weight: 900;
  border: 1px solid black;
}
/*For Climate and weather main page*/
.data_cards .card .btn {
  font-weight: 900;
  border: 1px solid black;
}




/*#boundaries .card {
    border-radius: 4px;
    background: var(--blue) ;
    color: var(--textcolor);

    border: 2px solid black;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
    transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
    padding: 0 0 0 0 !important;
}

#boundaries .card:hover {
    transform: scale(1.03); 
}
#boundaries .card h5 {
    font-weight: 100; 
}
#boundaries .card .card-body {
    padding: 5px !important;
    margin: 0px !important;
}
#boundaries .card .card-body .btn {
    font-weight: 900;
    border: 1px solid black;
}*/
/* Colors for tabs on */
.my-tab .tab-pane {
  border: solid 1px #cccccc;
  border-top: 0;
  background-color: #003b63;
  color: white;
  text-shadow: none;
}
#myTab li a {
  border-color: #cccccc;
  background-color: #F7EFC6;
  color: #333;
  text-shadow: none;
}
#myTab li a.active {
  border-bottom-color: transparent;
  background-color: #003b63;
  margin-bottom: -1px;
  color: white;
  text-shadow: none;
}
/* --------------------------------------
ELEVATION SECTION 
-------------------------------------- */
.accordionExample .btn[aria-expanded=false] span:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0d7";
  float: left;
  transition: all .5s;
  margin-right: .5em;
}
.accordionExample .btn[aria-expanded=true] span:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0d7";
  float: left;
  transition: all .5s;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  transform: rotate(-180deg);
  margin-right: .5em;
}
.accordionExample h4 {
  margin-bottom: 0px;
  color: white;
}
.accordionExample .elevation {
  margin-bottom: 10px;
}
/* --------------------------------------
CENSUS and POLITICAL sections  Census.html & Political.html
-------------------------------------- */
.or-spacer {
  margin-top: 50px;
  margin-bottom: 35px;
  width: 100%;
  position: relative;
}
.or-spacer .mask {
  overflow: hidden;
  height: 20px;
}
.or-spacer .mask:after {
  content: '';
  display: block;
  margin: -25px auto 0;
  width: 100%;
  height: 25px;
  border-radius: 125px / 12px;
  box-shadow: 0 0 8px black;
}

.or-spacer span {
  width: 175px;
  height: 50px;
  position: absolute;
  bottom: 100%;
  margin-bottom: -25px;
  left: 50%;
  margin-left: -75px;
  border-radius: 100%;
  box-shadow: 0 2px 4px #999;
  background: var(--navbarblue);
}
.or-spacer span i {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  right: 4px;
  border-radius: 100%;
  border: 1px solid var(--textcolor);
  text-align: center;
  line-height: 40px;
  font-style: normal;
  color: var(--textcolor);
}

/* --------------------------------------
FOOTER SECTION (Everypage)
-------------------------------------- */
footer {
  width: 100%;
  background: var(--navbarblue);
  font-size: 15px;
  color: var(--goldtint);
  border-top: 2px solid var(--gold);
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
footer a {
  color: var(--goldtint);
}
.footer-link:hover {
  color: var(--textcolor);
}
#search-title {
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.search-container {
  text-shadow: 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000, 0px 0px 0 #000;
}
/* --------------------------------------
MEDIA QUERIES Max widths
-------------------------------------- */
@media (max-width: 1199px) {
    .topo {
        margin-right: 0px;
        padding-top: 0px;
        padding-right: 0px;
    }
}
/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 576px) {
    .gisday { display: none;}
  h1 {
    font-size: 1.75rem;
  }
  .navbar-sub-caption {
    display: none;
  }
}
/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 768px) {
    .gisday { display: none;}
  .contact {
    text-align: center;
  }
  .localImage {
    display: none;
  }
  .navbar-sub-caption {
    display: none;
  }
  .theCarousel, .home-iconfont {
    display: none;
  }
  .mbr-text, .mbr-caption {
    padding-left: 5px;
  }
}
/* Medium devices (tablets, less than 992px)*/
@media (max-width: 992px) {

  .myborderRight {
    border-right: 0px solid #b4b4b4;
  }
  .hidden {
    display: none;
  }
}
/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1200px) {}
/* --------------------------------------
TESTING SECTION
-------------------------------------- */
/* The close button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  /*font-size: 22px;
    line-height: 20px;*/
  cursor: pointer;
  transition: 0.3s;
}
/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}
/*path:hover {
    fill: blue;
}*/



.front-page {
    height: 300px;
    /*border: 2px solid red;*/
}
.front-page-nav {
    margin-top: 10px;
    height: 275px;
    border: 1px solid black;
    
}

.front-page-tab {
    /*margin-top: 10px;*/
    height: 500px; /*was 300px*/
    border: 1px solid black;
    overflow-y: scroll;
}
.front-page-nav-link { /*News, Forum...Home, About, Data, etc... in navigation bar*/
  font-size: 1.4em !important;
  font-weight: bold !important;
  color: white !important;
  background: tan;
  margin-bottom: 15px;
  border-radius: 0px;
}
.front-page-nav-link:hover {
  color: var(--textcolor) !important;
}