@page 
    {
        size:  auto;   /* auto is the initial value */
        margin-top: 0mm; 
        margin-bottom: 0mm;
        margin-left: 10mm; 
        margin-right: 10mm;   }

    

    
div#wrap {
 width:1000px;
 margin:0 auto;
}

#header {
	width:1000px;
	margin:0 auto;
	background-image:url('bkgd.jpg');
	font-size:20pt;
	font-weight:bold;
	font-family:"Book Antiqua";
	color:#0D095E;
	padding-bottom: 15px;
	padding-top: 15px;
	margin-bottom: 5px;	
	border-radius: 15px;
	border:medium #9999FF solid;	
}

#top {
  display: flex;
  flex-wrap: wrap;
  margin:0 auto;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 1000px;
  row-gap: 5px;
}

#officeMain{
  display: flex;
  flex-wrap: wrap;
  margin:0 auto;
  justify-content: space-around;
  align-items: center;
  position: relative;
  width: 1000px;
  flex-wrap:nowrap;  
}

#office {
	background-image:url('bkgd.jpg');	
	display: flex;
	width: 600px;
	font-family:"Book Antiqua";
	color:#004B97;
	font-size:16pt;
	align-items:center;
	padding: 2%;
	margin: 5px;
	border-radius: 15px;
	border:medium #9999FF solid;
}

#officeL {
	width: 64%;
	font-family:"Book Antiqua";
	color:#004B97;
	font-size:14pt;
	text-align:center;
	align-items:center;
	border-right:2pt darkgray solid;
	padding: 1%;
}
#officeR {
	width: 32%;
	font-family:"Book Antiqua";
	color:#0D095E;
	font-size:16pt;
	text-align:center;
	align-items:center;
	padding: 1%;
}

#contact {  
  display: flex;
  flex-wrap: wrap;
  margin:0 auto;
  justify-content: space-around;
  align-items: center;
  position: relative;
  width: 400px;
  flex-wrap:wrap;
}

#bottom {
  display: flex;
  flex-wrap: wrap;
  margin:0 auto;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 1000px;
  row-gap: 5px;
}


#links{
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: left;
  position: relative;
  width: 300px;
  flex-wrap:wrap;  
}

.link {
    background-image:url('bkgd.jpg');
	font-family:"Book Antiqua";
	color: #0D095E;
	font-size:16pt;
	text-align:center;
	align-items:center;
	padding: 2%;
	margin: 5px;
	border-radius: 15px;
	border:medium #9999FF solid;
	text-decoration:none;
}

.link:hover {
	color:#fff;
	background-image:url('background.jpg');
}

.title {
    background-image:url('bkgd.jpg');
	font-family:"Book Antiqua";
	color:#004B97;
	font-size:16pt;
	text-align:center;
	align-items:center;
	padding: 2%;
	margin: 5px;
	border-radius: 15px;
	border:medium #9999FF solid;
}


.collapsible {
  color: #0D095E;
  cursor: pointer;
  font-family:"Book Antiqua";
  font-size:16pt;
  font-weight: bold;
  text-align: center;
  outline:none;
  border:none;
  background: transparent;
  width: 350px;
}

.active, .collapsible:hover {
  color: #004B97;
}

.content {
  display: none;
  overflow: hidden;
  font-family:"Book Antiqua";
  font-size:14pt;
  text-align:center;
}

.contact {
  font-family:"Book Antiqua";
  font-size:16pt;
  text-align:center;
  color: #0D095E;
  font-weight: bold;
  text-align: center;
}

#page{
  display:flex;
  flex-wrap:nowrap;
  width: 1000px;
  margin: 0 auto;
}

#main{
    background-image:url('bkgd.jpg');	
	display: block;
	width: 690px;
	font-family:"Book Antiqua";
	color:#004B97;
	font-size:16pt;
	padding: 2%;
	margin: 5px;
	border-radius: 15px;
	border:medium #9999FF solid;
}

.mainContents{
  display: flex;
  flex-wrap: wrap;
  margin:0 auto;
  position: relative;
  width: 690px;
  flex-wrap:wrap;
  justify-content: center;  
}

#home,
#bills,
#fallBill,
#munTax,
#schoolTax,
#interimTax,
#order,
#directions,
#FAQ{
  display: none;
  font-family:"Book Antiqua";
  color:#004B97;  
}

.head{
	width: 100%;
	text-align:center;
	font-family:inherit;
	font-size:16pt;
	color:#004B97;
	padding-bottom:5px;
}

.head2{
    position:relative;
	width: 100%;
	text-align:center;
	font-family:inherit;
	font-size:14pt;
	color:#835BF9;
	padding-bottom: 5px;
}

.lower{
	width: 100%;
	display: flex;
	margin:0 auto auto 10;
	flex-wrap: wrap;
	justify-content: space-around;
	padding:5px;
	align-items: center;
	justify-content: center;
}

.pay{
	text-align:center;
	background-image:url('background.jpg');
	color:#0D095E;
	font-size:14pt;
	border: medium #9999FF solid;
	border-radius: 15px;
	padding:5px;
	margin:5px;
}

.box{
	text-align:center;
	color:#0D095E;
	font-size:14pt;
	border: medium #9999FF solid;
	border-radius: 15px;
	padding:5px;
	margin:5px;
	width: 28%;
}

.box1{
	width:45%;
	margin:5px;
}

.box2{
	text-align:left;
	color:#0D095E;
	font-size:14pt;
	border: medium #9999FF solid;
	border-radius: 15px;
	padding:5px;
	margin:5px;
	width: 46%;
}

.box2a{
	text-align:center;
	color:#0D095E;
	font-size:14pt;
	border: medium #9999FF solid;
	border-radius: 15px;
	padding:5px;
	margin:5px;
	width: 36%;
}

.box3{
	text-align:center;
	color:#0D095E;
	font-size:14pt;
	border: medium #9999FF solid;
	border-radius: 15px;
	padding:5px;
	margin:5px;
	width: 64%;
}

.box4{
	text-align:center;
	color:#0D095E;
	font-size:14pt;
	border: medium #9999FF solid;
	border-radius: 15px;
	padding:5px;
	margin:5px;
	width: 80%;
}

.lowerTitle{
	text-align:center;
	font-family:inherit;
	font-size:14pt;
	color:#004B97;
}

.subtitle{
    position:relative;
	text-align:center;
	font-family:inherit;
	font-size:12pt;
	color:#835BF9;
}

.img {
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.img:hover {
  opacity: 0.8;
}

.imgs {
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
  outline: none;
  border:none;
}

.imgs:hover {
  opacity: 0.8;
}

.modal {
  display: none;
  position: fixed;
  z-index: 10;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 900px;
  max-width: 80%;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

.mapwrapper {
  position: relative;
  width: 600px;
  height: 375px;
  border-radius: 15px;
  overflow: hidden;
}

.FAQlink {
    background-image:url('background.jpg');
	font-family:"Book Antiqua";
	color: #fff ;
	font-size:12pt;
	text-align:center;
	padding: 2%;
	margin: 5px;
	border-radius: 15px;
	border:medium #9999FF solid;
	text-decoration:none;
}

.FAQlink:hover {
	color:#0D095E;
	background-image:url('bkgd.jpg');
}

[data-ml-modal] {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	overflow-x:hidden;
	overflow-y:auto;
	z-index:999;
	width:0;
	height:0;
	opacity:0;
}

[data-ml-modal]:target {
	width:auto;
	height:auto;
	opacity:1;
	-webkit-transition:  opacity 1s ease;
	transition: opacity 1s ease;
}

[data-ml-modal]:target .modalOverlay {
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	cursor:pointer;
	background-color:rgba(0, 0, 0, 0);
	z-index:1;
}

[data-ml-modal] .modalDialog {
	border-radius:15px;
	box-shadow:0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
	position:relative;
	width: 90%;
	max-width:800px;
	max-height:80%;
	margin:10% auto;
	overflow-x:hidden;
	overflow-y:auto;
	z-index:2;
}

.modalDialogLg {
	max-width:820px !important;
	}
	
[data-ml-modal] .modalContents {
	background-image:url('bkgd.jpg'); 
	padding:5%;
	border:medium #9999FF solid;
	border-radius:15px;
	}
	
[data-ml-modal] .modalClose {
  	position:absolute;
	top:13px;
	right:13px;
	color:#0D095E;
	background-color:#1FB0E5;
	border:medium #9999FF solid;
	border-radius:50%;
	height:40px;
	width:40px;
	font-size:30px;
	line-height:37px;
	text-align:center;
	-webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-decoration:none;
}

[data-ml-modal] .modalClose:hover {
	background-color:#004B97;
	color:#9999FF;
	cursor:pointer;
	border:medium #9999FF solid;
	}
	
[data-ml-modal] p:first-child, [data-ml-modal] p:last-child {
	margin:0;
	}
	
@media (max-width:767px) {
	[data-ml-modal] .modalDialog {margin:20% auto;}
	}
	
.center {text-align:center !important;}
.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 2px solid transparent;
    white-space: normal;
    padding: 3px 14px;
    font-size: 18px;
    border-radius: 3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn-default {border-color: #0085a6;}
a.btn-default:hover {background-color:#0085a6; color:#fff;}
pre {overflow:auto;font-size:1em;}