/*==========================================================================
GLOBAL
========================================================================== */

html, body {width: 100%; height: 100%; margin: 0px;padding: 0px; overflow-x: hidden; } 
body { margin: 0; padding: 0; position: relative; font-size: 0.969em; color: #333333; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
p {line-height: 1.4em; margin: 15px 0;}
hr {border: 0; border-top: 1px solid #CCCCCC; display: block; height: 1px; margin:0; padding: 0; clear:both;}
h1, h2, h3, h4, h5, h6 {
	line-height: 1.25em;
	font-weight: 300;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1 {font-size: 3em;} h2 {font-size:2.25em;} h3 {font-size:1.677em;} h4 {font-size:1.429em;} h5 {font-size:1.286em;} h6 {font-size: 1.032em; letter-spacing: .02em; }
a{color:#cccccc; text-decoration: none;}
a:hover{color:#cccccc; text-decoration: underline;}

.blue {color:#005165;}
.white {color:#fff;}
.tan {color:#d0b882;}

.bold{font-weight: 700;}
.normal {font-weight: 400;}
.thin {font-weight:300;}
.center {text-align: center;}
.italic {font-style: italic;}
.small {font-size: 0.929em;}
.xsmall {font-size: 0.85em}
.xxsmall {font-size: 0.65em}
.large {font-size: 1.2em;}
.xlarge {font-size: 1.3em;}
.huge {font-size:1.4em;}
.lowercase {text-transform: initial;}

.zero-top {margin-top: 0;}
.zero-bottom {margin-bottom: 0;}

.pull-left {float:left;}
.pull-right {float:right;}
.centered {text-align: center;}
.clearfix:after { content: ""; display: table; clear: both;}

.desktop {display: inherit;}
.desktop-tablet {display: inherit;}
.tablet {display: none;}
.tablet-mobile {display: none;}
.mobile {display: none;}

/*==========================================================================
HEADER
========================================================================== */

.header {padding:30px 0; text-align: center;}
.logo {background:url(../img/.png) no-repeat transparent; background-size: 100%; width: 230px; height: 138px; display: inline-block;}

/*==========================================================================
STAGE
========================================================================== */

.stage {background: #333333; width: 100%; padding:60px 0 70px; color: #fff; position: relative;}
.stage-photo {background: url(http://jcn-ftp.com/groundworks/contact-city-officials/_assets/img/lettuce-50.jpg) no-repeat center center; background-size: cover; position: absolute; width: 100%; height: 100%; top: 0;}


/*==========================================================================
COMMENT BOXES
========================================================================== */

.comment-box p {color:#fff; font-size: .925em; }
.input-box {padding: 25px; background: rgba(255,255,255,.05); margin: 40px 0;}
.input-box p {color:#fff; font-size: .925em;}

select, textarea, input{
    color: #666;
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
    background-color: #EEE;
    border: none;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: background-color 0.2s linear 0s, box-shadow 0.2s linear 0s;
    width: 100%;
    padding: 16px 15px 15px;
    border-radius: 2px;
    margin-top: 5px;
}
textarea {width: 100%;}
select:focus, textarea:focus, input:focus {
	-webkit-box-shadow: inset 0 0 2px #000;
	-moz-box-shadow: inset 0 0 2px #000;
	box-shadow: inset 0 0 2px #000;
	outline: 0;
	outline: thin dotted \9;
	background: #fff;
}

input.btn-submit-small {width: 23%;}
input#city {width: 90% }
input#zip {width: 100px }

.btn {
	width: auto;
	border: none;
	border-radius:2px;
	color: #FFFFFF;
	font-weight: 900;
	text-transform: uppercase;
	background-color: #961111;
	cursor: pointer;
	display: inline-block;
	letter-spacing: .05em;
}
.btn:hover {opacity: .9;}
.btn-tan {background-color: #961111; margin-top: 25px; font-weight: 900; padding: 14px 20px; }
.btn-tan:hover {color: #961111; text-decoration: none;}
.btn-submit { font-size: 1.2em; padding: 20px 50px 18px;}


/*==========================================================================
FOOTER
========================================================================== */

.footer {padding-top: 0px; text-align: center; font-size: 0.867em}



/*==========================================================================
MEDIA QUERIES - TABLET - 768px to 991px
========================================================================== */

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

  .desktop {display: none;}
  .desktop-tablet {display: inherit;}
  .tablet {display: inherit;}
  .tablet-mobile {display: inherit;}
  .mobile {display: none;}

.stage h1 {margin-top: 30px;}
.comment-box {margin-top: 20px;}
.main-content-wrap {margin-top: 80px; margin-bottom: 60px;}



}

/*==========================================================================
MEDIA QUERIES - MOBILE PHONE - < 768px
========================================================================== */

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

  .desktop {display: none;}
  .desktop-tablet {display: none;}
  .tablet {display: none;}
  .tablet-mobile {display: inherit;}
  .mobile {display: inherit;}

.logo {float:none; margin-left: auto; margin-right: auto;}
.header-subject {float: none; color:#003F2E; background:#fff; width: 100%; margin-top: 30px; text-align: center;}
.header-subject h3 {margin:10px 0;}
.stage {padding: 30px 0; margin-bottom: 30px;}
.stage h1 {font-size: 1.75em;}
input.btn-submit-small {font-size: 14px;}
.btn-submit { font-size: 1.2em; font-size: 5vw; padding: 18px 30px 17px; max-width: 100%; display: inline-block; }

}



/*==========================================================================
HOME PAGE ACCORDION
========================================================================== */

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
} 

 .accordion-toggle {cursor: pointer;}
  .accordion-content {display: none;}
  .accordion-content.default {display: block;}


/* Accordion styles */
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #333333;
  overflow: hidden;
}
.tab input { 
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #d0b882;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.blue label {
  background: #d0b882;
}
.tab-content {
 
    max-height: 0;
  overflow: hidden;
  background: #eee;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content p {
    margin: 1em;
}
/* :checked */
.tab input:checked ~ .tab-content {
  max-height: 100%;
}
/* Icon */
.tab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.tab input[type=checkbox] + label::after {
  content: "+";
}
.tab input[type=radio] + label::after {
  content: "\25BC";
}
.tab input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
.tab input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}



#share-buttons img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}