.bannertitle {
  position: relative;
  text-align: center;
}

.bannertitle h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  color: #fff;
  text-shadow: 2px 2px 8px #000000;
}

@media only screen and (max-width: 760px), 
  (min-device-width: 768px) and (max-device-width: 1023px)  {
   .bannertitle h3 {
      font-size: 30px;
   }
}

.bannertitle .banneritem img {
  min-height : 100%;
  min-width : 100%;
  background-size:100% 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: 0;
}



.item-image {
  border: 3px double #ccc;
  padding: 3px;
  margin: 0px 20px 20px 0px;
}

.container-footer {
  background-color: #336699;
  background-image: none;
  padding-bottom: 15px;
}
.container-footer .moduletable {
  display: block;
  float: left;
  width: 100%;
}

.container-footer .grid-child {
  display: block;
}

.container-header {
  background-color: #fff;
  background-image: none;
}

.container-topbar {
  color: #000;
  font-size: 18px;
}

.logo {
  display: block;
  float: left;
  width: auto;
  height: 100px;
  padding: 10px;
}

.hours {
  display: block;
  float: left;
  width: 300px;
  height: 80px;
  padding-left: 50px;
  padding-top: 20px;
}
.phone {
  display: block;
  float: left;
  width: 275px;
  height: 80px;
  padding-left: 50px;
  padding-top: 20px;
}
.address {
  display: block;
  float: left;
  width: 300px;
  height: 80px;
  padding-top: 20px;
}

.hours div i,
.address div i {
  display: block;
  float: left;
  width: auto;
  font-size: 36px;
  padding-top: 10px;
  padding-right: 15px;
}

.phone a:link, .phone a:hover, .phone a:active {
  text-decoration: none;
  color: #000;
}



/* responsive table settings */
table.responsivetable { 
  width: 100%; 
  border-collapse: collapse;
}
/* Zebra striping */
table.responsivetable tr:nth-of-type(odd) { 
  background: #eee; 
}
table.responsivetable th { 
  background: #036; 
  color: white; 
  font-weight: bold; 
}
table.responsivetable td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
  
}
table.columnterm tr td:last-child  { 
  width: 25%; 
  max-width: 25%;
}


@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1023px)  {

	/* Force table to not be like tables anymore */
  table.responsivetable,
  table.responsivetable .thead,
  table.responsivetable tbody,
  table.responsivetable th,
  table.responsivetable td,
  table.responsivetable tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	table.responsivetable tr.thead { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.responsivetable tr { border: 1px solid #ccc; }
	
  
  /* Behave  like a "row" */
	table.officials td,
	table.appoint td,
	table.commission td,
    table.commission2 td,
	table.meeting td { 
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
	}
	
	/* position data from the left */
	table.officials td,
	table.meeting td { 
		padding-left: 40%;
	}
    table.appoint td,
    table.commission td,
    table.commission2 td, { 
		padding-left: 30%;
	}
		
	table.responsivetable td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		white-space: nowrap;
	}
	
	/*	Label the data */
	table.officials td:nth-of-type(1):before { content: "Position:"; font-weight: bold; font-style: italic; }
	table.officials td:nth-of-type(2):before { content: "Name:"; font-weight: bold; font-style: italic; }
	table.officials td:nth-of-type(3):before { content: "Term Expires:"; font-weight: bold; font-style: italic; }
  
    table.appoint td:nth-of-type(1):before { content: "Position:"; font-weight: bold; font-style: italic; }
	table.appoint td:nth-of-type(2):before { content: "Name:"; font-weight: bold; font-style: italic; }
  
    table.commission td:nth-of-type(1):before { content: "Name:"; font-weight: bold; font-style: italic; }
	table.commission td:nth-of-type(2):before { content: "Term Expires:"; font-weight: bold; font-style: italic; }
	table.commission2 td:nth-of-type(1):before { content: "Name:"; font-weight: bold; font-style: italic; }
    table.commission2 td:nth-of-type(2):before { content: "Position:"; font-weight: bold; font-style: italic; }
	
	table.meeting td:nth-of-type(1):before { content: "Meeting:"; font-weight: bold; font-style: italic; }
	table.meeting td:nth-of-type(2):before { content: "Day & Time:"; font-weight: bold; font-style: italic; }
}