/****Kennebec County Sheriff's Style Sheet****/

@import url(//fonts.googleapis.com/css?family=Roboto);

body{
  font:15px/1.5 Roboto, Arial, Helvetica, sans-serif;
  padding:0;
  margin:0;
  background-color:#000000;
}

a {
  outline-color:#ffd000;
}

.center {
  display:block;
  margin:0 auto;
  text-align:center;
}

.container{
  width:80%;
  max-width:1500px;
  margin:auto;
}

header {
  background:url('header/img/flag.jpg');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  background-color:#000000;
  color:#ffffff;
  padding:20px 0 20px 0;
  border-bottom:3px solid #0c3897;
}

header h1 {
  display:none;
}

#header {
  width:100%;
  max-width:1050px;
  position:relative;
  margin:10px 0 20px 0;
  display:block;
  clear:both;
}

#county-gov-banner {
  position:absolute;
  top:0;
  right:0;
  height:40px;
  width:310px;
  color:#FFF;
  background-color:rgba(0, 0, 0, 0.6);
  border-radius:5px;
  text-decoration:none;
  font-weight:550;
  padding:5px;
  top:0;
  text-align:left;
}

#county-gov-banner:hover {
  color:#ffd700;
  font-weight:bold;
  border-bottom:1px solid gold;
}

#county-gov-banner span:nth-of-type(2) {
  display:none;
}

#county-gov-banner:hover span:first-of-type {
  display:none;
}

#county-gov-banner:hover span:nth-of-type(2) {
  display:block;
}

#county-gov-banner span {
  line-height:40px;
}

#county-gov-banner img {
  position:absolute;
  width:40px;
  right:0;
  top:5px;
}

#emergency {
  position:relative;
  display:block;
  height:50px;
  width:100%;
  font-family:Roboto;
  font-size:24px;
  text-align:center;
  margin:0 auto;
}

.red-dash {
	color:red;
}

#employment-banner {
  display:none;
  background-color:#12176d;
  text-align:center;
  font-size:22px;
  border-bottom:#6F0709 3px solid;
}

#employment-banner a {
  text-decoration:none;
  color:#fff;
}

#employment-banner a:hover {
  color:gold;
  text-decoration:underline;
}

#rfp-banner {
  display:none;
  background-color:rgb(215, 190, 152);
  text-align:center;
  font-size:22px;
  padding:10px;
  /*border-bottom:#6F0709 3px solid;*/
}

#rfp-banner a {
  text-decoration:none;
  color:#000;
}

#rfp-banner a:hover {
  color:rgb(98, 89, 25);
  text-decoration:underline;
}

.banner-container {
  padding:5px 0 5px 0;
}

/******MENU******/

#navigation {
  height:35px;
  position:relative;
  border-bottom:3px solid #0c3897;
}

.nav-container {
  display:flex;
  justify-content:center;
  overflow:visible;
}

#main-menu {
  display:flex;
  justify-content:center;
  overflow:visible;
  white-space:nowrap;
  
}

#main-menu > ul {
  display:flex;
  flex-direction:row;
  justify-content:center;
  width:1200px;
}

#main-menu li {
  height:35px;
}

#main-menu a {
  color:#f4f4f4;
  text-decoration:none;
  font-weight:bold;
  font-size:20px;
  height:100%;
  width:100%;
  display:block;
  cursor:pointer;
  line-height:35px;
}

#main-menu a:hover {
  color:#e8491d;
}

#main-menu ul {
  margin:0 0 0 0;
  padding:0;
  list-style:none;
}

#main-menu > ul > li {
  display:flex;
  justify-content:space-between;
  margin-left:35px;
}

#main-menu > ul > li:nth-child(1) {
  margin-left:0px;
}

#main-menu ul li:hover > a {
  color:tomato;
}

.menu-sub {
	position:absolute;
	background:#333333;
	opacity:0.985;
  top:0;
  left:0;
  width:100%;
  display:none;
	color:#F4F4F4;
  margin-top:35px;
  font-family:Roboto;
  font-size:15px;
	padding:30px 20px 50px 20px;
  border-top:4px solid #000;
  border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  box-shadow:1px 5px 10px 5px rgba(0,0,0,0.60);
	z-index:999;
}

.menu-sub ul {
  display:block;
  position:relative;
  margin-top:30px;
}

.menu-sub ul li {
  list-style-type:none;
  margin:0 0 10px 25px;
  line-height:30px;
  height:25px;
  width:auto;
}

.menu-container {
  width:1100px;
  margin:auto;
}

#menu-arrow {
  font-size:9px;
}

nav li:hover .menu-sub {
  display:block;
  animation: fade_in 0.4s
}

@keyframes fade_in {
  0% {
       opacity: 0;
       transition:margin-top 1s ease-in;
  }

  100% {
       opacity: 1;
       transition:margin-top 2s ease-in;
  }
}

#menu-county {
	padding-bottom:20px;
}

#badge-image {
	position:relative;
	width:200px;
  opacity:none;
}

#county-image {
  display:none;
	position:relative;
	width:180px;
  opacity:none;
}

.menu-category {
	margin: 2.5em 0 0 .5em;
  font-size:22px;
	cursor:default;
  color:#687df5
}

.menu-category:first-of-type {
	margin-top:0;
}

.menu-col {
	float:left;
}

.menu-county-col-1 {
  display:block;
  position:relative;
	margin-left:100px;
  width:400px;
  font-size:18px;
  font-weight:bold;
}

.menu-county-col-2 {
  display:block;
  position:relative;
	margin-left:100px;
  width:320px;
}

#menu-county-col-2-seal {
  margin-top:40px;
  display:none;
}

#menu-county-col-2-ema {
  margin-top:40px;
  display:none;
}

#ema-hover-image:hover + #menu-county-col-2-seal {
	display:none;
}

#ema-hover-image:hover + #menu-county-col-2-ema {
	display:block;
}

.menu-county-col-1 > ul > li > span {
  float:right;
}

.menu-le-col-3 {
	margin-top:150px;
	margin-left:20px;
}

.menu-corr-col-2 {
	margin-top:60px;
	margin-left:50px;
}

.menu-corr-col-3 {
	margin-top:40px;
}

#securus {
	position:relative;
	display:inline-block;
	margin:30px 0 10px 40px;
  width:180px;
  height:180px;
}

#icare {
	position:relative;
	display:inline-block;
	margin:30px 0 10px 20px;
}

#icare img {
	height:80px;
}

#burger-menu {
  position:absolute;
  visibility:hidden;
  z-index:1000;
}

/******CONTENT******/

#showcase {
  background:url('img/cruisers-vixen.jpg');
  background-position:70% 42%;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#000;
  position:relative;
  border-top:3px solid #000;
}

.showcase {
  background-color:#f4f4f4;
  border-bottom:4px solid #000;
  height:100%;
  position:relative;
}

.showcase-container {
  margin-top:0px;
}

.flex {
  display:flex;
  justify-content:space-between;
  flex-flow:wrap;
  flex-direction:row;
}

#kso-contact {
  position:relative;
  font-family:Roboto;
  background-color:rgba(0,0,0,0.93);
  border:2px solid #000;
  height:430px;
  width:260px;
  border-radius:3px;
  text-align:center;
  color:#fff;
  font-size:18px;
  margin-top:20px;
  margin-bottom:20px;
  flex-shrink:0;
}

#notice-info {
  /*When turned on, set .flex to justify-content:space-around;*/
  display:none;
  height:90px;
  width:100%;
  min-width:275px;
  position:relative;
  background-color:rgba(0,0,0,0.93);
  border:3px solid #000;
  margin:20px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  border-radius:3px;
  /*border:2px solid #0066CC;*/
  text-align:center;

}

#notice-info .size-24 {
  font-size:24px;
  font-weight:bold;
  color:#fff;
}

#notice-info .size-22 {
  font-size:22px;
  font-weight:bold;
}

#notice-info a {
  font-size:17px;
  font-weight:bold;
  color:#0066CC;
  text-decoration:none;
}

#notice-info a:hover {
  color:tomato;
}

#kccf-contact {
  position:relative;
  font-family:Roboto;
  background-color:rgba(0,0,0,0.93);
  border:2px solid #000;
  height:430px;
  width:260px;
  border-radius:3px;
  text-align:center;
  color:#fff;
  font-size:18px;
  margin-top:20px;
  margin-bottom:20px;
  flex-shrink:0;
}

.contact a{
  color:#0066CC;
  text-decoration:none;
}

.contact a:hover {
  color:gold;
}

.directions-link {
  color:lightblue;
}

.directions-link:hover {
  color:red;
}

.main-col {
  display:none;
  width:240px;
  float:right;
  background-color:rgba(244,244,244,0.95);
  margin-top:70px;
  margin-bottom:40px;
  padding:20px 40px 40px 40px;
  border-radius:5px;
}

.main-col a {
  margin-left:10px;
  font-size:17px;
  font-weight:bold;
  color:blue;
}

.main-col a:hover {
  color:red;
}

#About {
  background-color:#f4f4f4;
  border-top:3px solid #000;
  overflow:visible;
  padding-bottom:80px;
}

#sheriff-message {
  text-align:justify;
  max-width:900px;
  display:inline-block;
}

#sheriff-message h2, #mission h2 {
  text-align:left;
}

#sheriff-message img {
	float:right;
	border-radius:2px;
	margin-left:10px;
}

#right-elements {
  float:right;
  max-width:500px;
}

#tip {
  display:block;
  max-width:350px;
  height:290px;
  text-align:center;
  background-color:#e9e2e2;
  color:#000;
  border-radius:5px;
  border:4px solid #000;
  margin:70px auto 0 auto;
  font-family:Roboto;
  font-size:20px;
  font-weight:bold;
}

#tip-link {
  text-decoration:none;
}

#tip:hover {
  color:blue;
  box-shadow:0px 10px 10px 0px rgba(0,0,0,0.60);
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  transform:scale(1.1);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

#tip-link:hover  span {
  color:blue;
  text-decoration:underline;
}

#tip img {
  width:40px;
}

#crashdocs-link {
  text-decoration:none;
}

#crashdocs:hover {
  color:gold;
  box-shadow:0px 10px 10px 0px rgba(0,0,0,0.60);
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  transform:scale(1.1);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

#crashdocs {
  display:block;
  max-width:350px;
  height:170px;
  text-align:center;
  background-color:#354C75;
  color:#f2f2f2;
  border-radius:5px;
  border:2px solid #000;
  margin:70px auto 0 auto;
  font-family:Roboto;
  font-size:22px;
  font-weight:bold;
}

#crashdocs img {
  width:200px;
  padding:10px 0 10px 0;
}

#rcc-link {
  text-decoration:none;
}

#RCC:hover {
  color:gold;
  box-shadow:0px 10px 10px 0px rgba(0,0,0,0.60);
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  transform:scale(1.1);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

#RCC {
  display:block;
  max-width:350px;
  height:190px;
  text-align:center;
  background-color:#282828;
  color:#f2f2f2;
  border-radius:5px;
  border:2px solid #000;
  margin:70px auto 0 auto;
  font-family:Roboto;
  font-size:20px;
  font-weight:bold;
}

#facebook {
  display:block;
  max-width:250px;
  margin:70px auto 20px auto;
  border-radius:3px;
}

#facebook:hover {
  /*box-shadow:0 0 10px 10px rgba(0,0,0,0.3);*/
  background-color:rgba(129, 148, 230, 0.24);
  padding:0 10px 0 10px;
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  transform:scale(1.1);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

footer {
  position:relative;
  background-color:black;
  color:#fff;
  text-align:center;
}

footer a {
  color:#0066CC;
  text-decoration:none;
}

footer a:hover {
  color:red;
}

.new-footer {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  white-space:nowrap;
  text-align:left;
  text-decoration:none;
  list-style-type:none;
  background-image:
      linear-gradient(hsl(0 0% 0% / 0.4)0 0),
      url(footer/img/badge-inverted.png);
  background-repeat:no-repeat;
  background-size:400px;
  background-position:center;
  color:#FFF;
  overflow:visible;
}

.new-footer ul {
  list-style:none;
}

.new-footer li {
  padding:3px;
}

#footer-address {
  width:510px;
  height:365px;
  margin-top:10px;
  margin-bottom:20px;
  font-size:18px;
  white-space:nowrap;
  display:flex;
}

.footer-address-item:first-of-type {
  margin-right:40px;
}

#footer-address h3 {
  margin:0;
  padding:0;
  color:#4779e7;
}

.footer-group2 {
  display:flex;
  vertical-align:top;
}

.footer-break {
  display:none;
}

#footer-links {
  display:flex;
}

#footer-links a {
  color:#fff;
  text-decoration:none;
}

#footer-links > .footer-group2 > ul > li, #footer-links > .footer-group2 > ul > li > a {
  color:#4779e7;
}

#footer-links a:hover {
  color:tomato;
}

#footer-links > .footer-group2 > ul > li > a:hover {
  color:tomato;
}

.footer-phone-icons {
  font-family:Calibri;
  font-weight:bold;
  font-size:16px;
}

#copyright {
  text-align:center;
  width:300px;
  margin:30px auto;
  color:#FFF;
}

#copyright a {
  color:rgb(71, 169, 202);
  font-size:12px;
}

#copyright a:hover {
  color:tomato;
}

.default_page {
  text-align:justify;
  max-width:900px;
  margin:40px auto;
}

.default_page h1 {
  text-align:left;
}

.default_page img {
  border-radius:3px;
}

.default-page-notice {
  position:relative;
  margin:0 auto 10px auto;
  background-color:#C5DBE7;
  width:90%;
  padding:1px 10px 1px 10px;
}

#current-inmate-notice {
  max-width:450px;
}

#current-inmate-list {
  display:block;
  width:450px;
  height:3500px;
  margin:0 auto;
}

#current-inmate-list > table > caption {
  display:none;
}

#le-menu-page {
  text-align:left;
  max-width:360px;
  margin:0 auto;
}

#k9-bottom-img {
  display:flex;
  justify-content:center;
}

#k9-bottom-img img {
  max-width:700px;
  width:100%;
}

#civil_page img {
  max-width:500px;
  box-shadow:none;
  float:right;
}

#mcu_page img {
  width:180px;
  box-shadow:0px 2px 10px 0px #000;
}

#mcu_page figure {
  float:right;
  width:180px;
}

#mcu_page figure:nth-of-type(2) {
  float:left;
  width:180px;
}

#mcu_page figcaption {
  text-align:center;
  font-size:14px;
  font-style:italic;
}

#patrol_page img {
  display:block;
  margin:0 auto;
  max-width:400px;
}

#acc-recon_page img {
  float:right;
  margin-left:10px;
  max-width:175px;
}

#acc-recon_page p {
  width:100%;
}

#dea-page img,
#mdea_page img,
#mrs_page img {
  float:right;
  margin-left:10px;
}

#dive-bottom-img {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}

#dive_page img {
  float:right;
  margin-left:10px;
}

#dive-bottom-img img {
  float:none;
  margin:0 10px 0 10px;
}

#res-links {
  max-width:320px;
  margin:0 auto;
}

#employment-page {
  margin-top:30px;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
  font-size:16px;
}

#employment-page p {
  font-size:16px;
}

#employment-page ul {
  font-size:16px;
}

#employment-page h1, #employment-page h2 {
  text-align:center;
}

#employment-logo {
  display:block;
  margin:0 auto;
}

#internal {
  position:relative;
  margin:0 auto 10px auto;
  background-color:#80bbdb;
  width:90%;
  padding:10px 10px 10px 10px;
  font-size:25px;
  font-weight:bold;
  border-radius:5px;
  text-align:center;
}

#e-verify {
  display:block;
  margin:0 auto;
  width:400px;
}

#e-verify img {
  width:400px;
  border:2px solid #000;
  border-radius:5px;
}

#e-verify:hover {
  box-shadow:0px 10px 10px 0px rgba(0,0,0,0.60);
  -webkit-transform:scale(1.1);
  -moz-transform:scale(1.1);
  transform:scale(1.1);
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

#EOE {
  text-align:center;
  font-weight:bold;
  font-style:italic;
}

.employment-links {
  font-size:22px;
  font-weight:bold;
  display:block;
  text-align:center;
}

.employment-links:hover {
  color:red;
}

.employmentButton {
	box-shadow: 0px 0px 6px 2px #9fb4f2;
	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
	background-color:#7892c2;
	border-radius:6px;
	border:2px solid #4e6096;
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:32px;
	font-weight:bold;
  width:200px;
	padding:12px 37px;
  margin:0 auto;
  text-align:center;
	text-decoration:none;
	text-shadow:0px 2px 3px #283966;
}
.employmentButton:hover {
	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
	background-color:#476e9e;
}

.default_page .employmentButton:hover {
  color:gold;
}

#kso-badge-employment {
  width:200px;
  margin:0 auto;
  display:block;
}

.employmentButton:active {
	position:relative;
	top:1px;
}

.employmentButton > span {
  overflow: hidden;
  text-align: center;
  font-size:18px;
  font-weight:normal;
  text-align:center;
}

.employmentButton > span:before,
.employmentButton > span:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 2px;
  position: relative;
  vertical-align: middle;
  width: 25px;
}

.employmentButton > span:before {
  right: 0.5em;
  /*margin-left: -50%;*/
}

.employmentButton > span:after {
  left: 0.5em;
  /*margin-right: -50%;*/
}

.red-underlined {
  display:block;
  text-align:center;
  font-weight:bold;
  color:red;
  text-decoration:underline;
}

.separator {
  display:block;
  width:100%;
  height:3px;
  background-color:#000;
}

#departments_page {
  max-width:230px;
  margin:0 auto;
}

#patrol-deputy-note {
  position:relative;
  display:block;
  width:80%;
  background-color:tomato;
  border-radius:3px;
  margin:0 auto;
  padding:2px 0 5px 0;
  font-weight:bold;
}

.default_page {
  font-size:16px;
}

.default_page h1 {
  text-align:center;
}

.default_page a {
  font-weight:bold;
}

.default_page a:hover {
  color:red;
}

#corr-badge {
  width:200px;
  margin:0 auto;
  display:block;
}

#flex-row-img {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}

#flex-row-img img {
  float:right;
  border-radius:2px;
	margin-left:20px;
  box-shadow:0px 6px 10px 0px #000;
}

#flex-row-img img:hover {
  transform:scale(1.3);
  transition: transform .2s;
}

#flex-row-img img:focus {
  transform:scale(3);
  transition: transform .2s;
}

#job-page-notice {
  position:relative;
  margin:0 auto 10px auto;
  background-color:#C5DBE7;
  width:90%;
  padding:1px 10px 1px 10px;
  text-align:center;
}

.overtime_menu_container {
  padding:0;
}

#overtime_page {
  text-align:center;
  max-width:1140px;
  background-color:#444444;
}

#overtime_page iframe {
  width:100%;
  height:990px;
  background-color:#ededed;
}

#overtime-safety {
  display:none;
  background-color:#444444;
  border-bottom:3px solid #000;
  color:#ededed;
  font-size:20px;
}

#overtime-safety h1 {
  color:yellow;
}

#overtime-safety a {
  color:#ededed;
  font-size:24px;
}

#overtime_page a:hover {
  color:red;
}

#overtime_menu {
  display:flex;
  width:100%;
  margin:0;
  padding:0;
}

.overtime_menu_button {
  display:flex;
  width:200px;
  height:35px;
  margin:0 auto;
  text-align:center;
}

#overtime_menu p {
  margin:0;
  padding:0;
  width:270px;
}

#overtime_menu a {
  text-decoration:none;
  color:#FFF;
  font-size:23px;
}

#overtime_menu a:hover {
  color:red;
}

#overtime-links {
  display:none;
  margin:20px 20px 20px 0;
  font-size:25px;
}

#overtime-links a {
  color:#ededed;
}

#overtime_blue_border {
  display:block;
  position:relative;
  border-bottom: 3px solid darkblue;
  height:3px;
  width:100%;
}

.redButton {
	-moz-box-shadow:inset 0px 34px 0px -15px #b54b3a;
	-webkit-box-shadow:inset 0px 34px 0px -15px #b54b3a;
	box-shadow:inset 0px 34px 0px -15px #b54b3a;
	background-color:#a73f2d;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #241d13;
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-size:17px;
  width:200px;
	font-weight:bold;
	padding:9px 23px;
	text-decoration:none;
	text-shadow:0px -1px 0px #7a2a1d;
  text-align:center;
  margin:0 auto;
}

.redButton:hover {
	background-color:#b34332;
}

.redButton:active {
	position:relative;
	top:1px;
}

#medsp-button a {
  width:250px;
}

#prea-button a {
  width:300px;
}

.bluemenuButton {
	-moz-box-shadow:inset 0px 34px 0px -15px #3a5bb5;
	-webkit-box-shadow:inset 0px 34px 0px -15px #3a5bb5;
	box-shadow:inset 0px 34px 0px -15px #3a5bb5;
	background-color:#2d49a7;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #241d13;
	display:block;
	cursor:pointer;
	color:#ffffff;
	font-size:14px;
	font-weight:bold;
	padding:2px 5px;
	text-decoration:none;
	text-shadow:0px -1px 0px #1d337a;
  text-align:center;
  margin:0 auto;
}

.bluemenuButton:hover {
  color:#cec14c;
	background-color:#3250b3;
}

.bluemenuButton:active {
	position:relative;
	top:1px;
}

#medsp-payment {
  display:block;
  width:250px;
  margin:30px auto;

}

#medsp-paymentButton {
  font-size:17px;
  font-family:Arial;
  width:250px;
  height:50px;
  border-width:1px;
  color:#ffffff;
  border-color:rgba(40, 18, 119, 1);
  font-weight:bold;
  border-top-left-radius:3px;
  border-top-right-radius:3px;
  border-bottom-left-radius:3px;
  border-bottom-right-radius:3px;
  box-shadow:inset 0px 1px 0px 0px rgba(126, 84, 247, 1);
  text-shadow:inset 0px 1px 0px rgba(60, 21, 130, 1);
  background:linear-gradient(rgba(56, 0, 193, 1), rgba(66, 0, 167, 1));
}

#medsp-paymentButton:hover {
  background: linear-gradient(rgba(66, 0, 167, 1), rgba(56, 0, 193, 1));
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #292929;
  color:#d3d3d3;
  margin: auto;
  padding: 20px;
  /*border: 1px solid #888;*/
  border-radius:5px;
  width: 80%;
  text-align:center;
  font-weight:bold;
  font-size:17px;
}

.modal-content ol {
  text-align:left;
  width:550px;
  margin:0 auto;
}

/* The Close Button */
.close {
  display:none;
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width:1600px) {

    #sheriff-message {
      max-width:60%;
    }

}

@media only screen and (max-width:1235px) {

}

@media only screen and (max-width:1125px) {

  #sheriff-message {
    max-width:50%;
  }

}

@media only screen and (max-width:1100px) {

    header nav {
      float:none;
    }

    #civil_page img {
      width:400px;
    }
}

@media only screen and (max-width:1024px) {

    #county-gov-banner {
      display:none;
    }

    #main-menu {
      display:none;
    }

    #navigation {
      border:none;
      height:0px;
    }

    .nav-container {
    justify-content:center;
  }

    #showcase {
      border-top:4px solid #000;
    }

    #burger-menu {
      position:absolute;
      visibility:visible;
      z-index:1000;
      margin-left:0px;
      top:-22px;
    }

    #burger-menu a {
      text-decoration: none;
      color: #fff;
      outline:none;
      transition: color 0.3s ease;
    }

    #burger-menu a:hover {
      color: tomato;
    }

    #menuToggle {
      display: block;
      position: relative;
      padding:8px 5px 3px 5px;
      border-radius:4px;
      background-color:black;
      /*border:2px solid #8B0000;*/
      border:2px solid #6F0709;
      -webkit-user-select: none;
      user-select: none;
    }

    #menuToggle input {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      cursor: pointer;
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
      -webkit-touch-callout: none;
    }

    /*
     * Just a quick hamburger
     */
    #menuToggle span {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 5px;
      position: relative;
      background: #f4f4f4;
      border-radius: 1px;
      z-index: 1;
      transform-origin: 4px 0px;
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
    }

    #menuToggle span:first-child {
      transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2) {
      transform-origin: 0% 100%;
    }

    /*
     * Transform all the slices of hamburger
     * into a crossmark.
     */
    #menuToggle input:checked ~ span {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: #fff;
    }

    /*
     * But let's hide the middle one.
     */
    #menuToggle input:checked ~ span:nth-last-child(3) {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
     * Ohyeah and the last one should go the other direction
     */
    #menuToggle input:checked ~ span:nth-last-child(2) {
      opacity: 1;
      transform: rotate(-45deg) translate(0, -1px);
    }

    /*
     * Make this absolute positioned
     * at the top left of the screen
     */

    #menu {
      position:absolute;
      top:18px;
      left:-33px;
      width:200px;
      height:100%;
      border-bottom-right-radius:5px;
      border:3px solid #000;
      margin:0 0 0 0;
      padding:50px;
      z-index:-1;
      display:none;
      background-color:rgba(0, 0, 0, 0.95);
      /*background: #293a44;*/
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
      /* to stop flickering of text in safari*/
      transform-origin: 0% 0%;
      transform: translate(-100%, 0);
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }

    #menu li {
      position:relative;
      padding: 10px 0;
      font-size: 22px;
      width:100%;
      float:left;
    }

    /*
     * And let's fade it in from the left
     */
    #menuToggle input:checked ~ ul {
      transform: scale(1.0, 1.0);
      opacity: 1;
      display:block;
    }

    .flex {
      justify-content:space-evenly;
    }


}

@media only screen and (max-width:960px) {

  #sheriff-message {
    max-width:100%;
  }

  #right-elements {
    margin:0 auto;
    float:none;
    display:block;
  }

  .new-footer {
    
    
    background-position:center;
  }

}

@media only screen and (max-width:855px) {

  #civil_page img {
    max-width:320px;
  }

}

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

    .flex {
      display:block;
    }

    #kso-contact {
      float:none;
      margin:20px auto 20px auto;
    }

    #kccf-contact {
      float:none;
      margin:20px auto 20px auto;
    }

    #civil_page img {
      position:relative;
      display:block;
      float:none;
      margin:0 auto;
    }
}

@media only screen and (max-width:610px) {

    .new-footer {
      white-space:wrap;
    }

    #footer-address {
      display:block;
      height:fit-content;
      text-align:center;
      background-color:rgba (0,0,0,0.4);
    }

    .footer-address-item:first-of-type {
      margin-right:0;
}

    .footer-address-item:nth-of-type(2) {
      margin-top:30px;
    }

    #footer-links {
      display:block;
      margin:0 auto;
      text-align:center;
      
    }
    
    .footer-group2 {
      display:block;
    }

    .footer-group2 ul {
      margin:0;
      padding:0;
    }

    .footer-group2:nth-of-type(2) ul li:first-of-type {
      margin-top:15px;
    }
}


@media only screen and (max-width:556px) {

    .container {
      width:98%;
    }

    #contact-info {
      width:100%;
      max-width:200px;
    }

}

@media only screen and (max-width:325px) {

  #emergency {
    font-size:18px;
  }

  #tip {
    font-size:18px;
  }

  footer {
    font-size:12px;
  }

  #civil_page img {
    max-width:280px;
  }
}