/*==========================================================================

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: #534741; 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:#d0b882; text-decoration: none;}

a:hover{color:#961111; 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(../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:85%;

    padding: 12px 12px 12px;

    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: 85%; }

input#zip {width: 75%; }



.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: #d0b882; margin-top: 25px; font-weight: 900; padding: 14px 20px; }

.btn-tan:hover {color: #283136; 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;

}