@charset "UTF-8";

/* START Fonts */
	@import url("fonts.css");
	
	html, button, input, select, textarea,
	.pure-g [class *= "pure-u"] {
		font-family: "zurich_light_bt", Helvetica, sans-serif;
	}
/* END Fonts */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
  /*line-height: 1.7em;*/
  color: #7f8c8d;
  font-size: 12px;
  width: 100%;
  height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
  color: #34495e;
}

.pure-img-responsive {
  max-width: 100%;
  height: auto;
}

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box {
  padding: 1em;
}

.l-box-lrg {
  padding: 2em;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.is-center {
  text-align: center;
}


/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
  margin: 1em 0 0;
  font-family: "zurich_bold_bt", Helvetica, sans-serif;
  font-size: 100%;
}

.pure-form input[type=text],
.pure-form input[type=email] {
	border: 2px solid #ddd;
	box-shadow: none;
	font-size: 100%;
	width: 100%;
	margin-bottom: 1em;
}
/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
	background-color: #1f8dd6;
	color: #fff;
	margin-top:0.2em;
	padding: 0.5em 1.5em;
}


/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.home-menu {
  padding: 0.5em;
  text-align: center;
}
.home-menu.pure-menu-open {
  background: #2d3e50;
}

.pure-menu.pure-menu-open.pure-menu-fixed {
  /* Fixed menus normally have a border at the bottom. */
  border-bottom: none;
  /* I need a higher z-index here because of the scroll-over effect. */
  z-index: 4;
}

.home-menu .pure-menu-heading {
  color: white;
  font-size: 120%;
  margin:0.3em 0 0 0.2em;
}

.home-menu .pure-menu-heading h1{
	padding-top:0.1em;
	font-size:100%;
	color: #fff;
	font-weight:normal;
	display:inline-block;
	margin:0;
}
.home-menu .pure-menu-heading a {
	position:relative;
	display:inline-block;
	height:1.35em;
	margin-left:0.3em;
	padding:0;
}
.home-menu .pure-menu-heading img {
	/*vertical-align:top;*/
	height:100%;
}

.home-menu .pure-menu-selected a {
  color: white;
}

.home-menu a {
  color: #6FBEF3;
  font-size: 80%;
  text-transform:uppercase;
}
.home-menu ul{
	margin-top:0.3em;
}
.home-menu li a {
}
.home-menu li a:hover,
.home-menu li a:focus {
  background: none;
/*  border: none;*/
  color: #AECFE5;
}

/*
 * -- PAGE HEADER STYLES --
 * This is the blue top section that appears on the page.
 */
#header-container {
  position:fixed;
  left:0; right:0;
  top:0;
  z-index:3;
  height:25%;
  background:#2d3e50;
}

/*
 * -- SPLASH STYLES --
 * This is the blue top section that appears on the page.
 */

.splash-container {
  z-index: 1;
  overflow: hidden;
  /* The following styles are required for the "scroll-over" effect */
  height: 75%;
  top: 10%;
  left: 0;
	right: 0;
  position: fixed !important;
	background: url("clouds.jpg"), -webkit-radial-gradient(circle, rgba(201, 231, 254, 0.65), rgba(3, 50, 84, 0.65)); /* For Safari 5.1 to 6.0 */
  background: url("clouds.jpg"), -o-radial-gradient(circle, rgba(201, 231, 254, 0.65), rgba(3, 50, 84, 0.65)); /* For Opera 11.6 to 12.0 */
  background: url("clouds.jpg"), -moz-radial-gradient(circle, rgba(201, 231, 254, 0.65), rgba(3, 50, 84, 0.65)); /* For Fx 3.6 to 15 */
  background: url("clouds.jpg"), radial-gradient(circle, rgba(201, 231, 254, 0.65), rgba(3, 50, 84, 0.65)); /* Standard syntax (must be last) */
	background-size:cover;
	background-blend-mode: overlay;
	background-position:center;
}

.splash {
  /* relative center .splash within .splash-container */
  width: 80%;
  position: relative;
  top: 15%; left: 0; bottom: 0; right: 0;
  margin: auto;
  text-align: center;
  text-transform: uppercase;
}

/* This is the main heading that appears on the blue section */
.splash-head {
  font-size: 20px;
  font-family: "zurich_bold_bt", Helvetica, sans-serif;
  color: white;
  border: 3px solid white;
  padding: 1em 1.6em;
  border-radius: 5px;
  line-height: 1em;
}

/* This is the subheading that appears on the blue section */
.splash-subhead {
  color: white;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

/* This is the accordion after a host of ideas found with Google */
.accordion {
/*  font-family:Arial, Helvetica, sans-serif;*/
  border-radius:10px;
  width:100%;
  background:#fff;
	overflow:hidden;
}
.accordion ul {
  list-style:none;
  margin:0px;
  padding:10px;
}
.accordion li {
  margin:0px;
  padding:0px;
}
.accordion [type=radio], .accordion [type=checkbox] {
  display:none;
}
.accordion label {
  display:block;
  cursor:pointer;
}
.accordion img {
  width: 100%;
  height: auto;
  border-radius:10px;
}
.accordion .content {
  padding:0px;
  overflow:hidden;
  -webkit-transition: all .35s cubic-bezier(0,0,0,1);
  -moz-transition: all .35s cubic-bezier(0,0,0,1);
}
.accordion label{
  -webkit-transition: background .15s ease-out;
  -moz-transition: background .15s ease-out;
}
.accordion label span.label, .accordion label span.indicator{
  -webkit-transition: all .35s cubic-bezier(0,0,0,1);
  -moz-transition: all .35s cubic-bezier(0,0,0,1);
}
.accordion p {
  margin:0px 0px 0px;
  text-transform: none;
}
.accordion h3 {
  padding:10px 0 5px;
  margin:0px;
}

/* Vertical */
.vertical ul li {
  overflow:hidden;
  margin:0 0 5px 0;
	border: 1px solid #03457A;
	border-radius:5px;
}
.vertical ul li:last-of-type { margin:0; }
.vertical ul li label {
  padding: 0px;
	font-size:28px;
	text-transform:none;
	letter-spacing:1px;
	text-align:right;
	padding:3px;
	color:white;
	width:100%;
}
/*.vertical ul li label:hover {background-color:#F90; color:white;}*/
/*.vertical ul li label:hover span.label{margin-right:50px;}*/
.vertical ul li label span.label{
	display:inline-block;
	margin-right:30px;
	font-family: "zurich_bold_bt", Helvetica, sans-serif;
}
.vertical ul li label span.indicator{position:absolute; right:12px;}

.vertical ul li .content {
  height:0px;
  border-top:0;
	background-color:white;
}

.vertical [type=checkbox]:checked ~ label ~ .content {
  height: 200px;
}
.vertical [type=checkbox]:checked ~ label > span.label {
  color:white;
}
.vertical [type=checkbox]:checked ~ label > span.indicator {
  transform:rotate(-90deg); backface-visibility:hidden;
}

#sect-coffee label {
  background:url(../../img/common/coffee-bgnd.png);
}

#sect-control label {
  background:url(../../img/common/control-bgnd.png);
}

#sect-energy label {
  background:url(../../img/common/energy-bgnd.png);
}

#sect-education label {
  background:url(../../img/common/education-bgnd.png);
}

#sect-produce label {
    background:url(../../img/common/produce-bgnd.png);
  }

#sect-ecology label {
  background:url(../../img/common/ecology-bgnd.png);
}

#sect-coffee label,
#sect-control label,
#sect-energy label,
#sect-education label,
#sect-produce label,
#sect-ecology label {
  background-size:cover;
  background-blend-mode:screen;
  background-position:center;
}

#sect-coffee [type=checkbox] ~ label,
#sect-control [type=checkbox] ~ label,
#sect-energy [type=checkbox] ~ label,
#sect-education [type=checkbox] ~ label,
#sect-produce [type=checkbox] ~ label,
#sect-ecology [type=checkbox] ~ label {
  background-color:rgba(192, 192, 192, 0.6);
}

#sect-coffee [type=checkbox]:checked ~ label,
#sect-control [type=checkbox]:checked ~ label,
#sect-energy [type=checkbox]:checked ~ label,
#sect-education [type=checkbox]:checked ~ label,
#sect-produce [type=checkbox]:checked ~ label,
#sect-ecology [type=checkbox]:checked ~ label {
  background-color:black;
}

/*
#sect-coffee [type=checkbox] ~ label > span.label ,
#sect-control [type=checkbox] ~ label > span.label ,
#sect-energy [type=checkbox] ~ label > span.label ,
#sect-education [type=checkbox] ~ label > span.label ,
#sect-produce [type=checkbox] ~ label > span.label ,
#sect-ecology [type=checkbox] ~ label > span.label  {
  color:#3F8EF3;
  color:white;
}
*/

#sect-coffee [type=checkbox] ~ label > span.indicator ,
#sect-control [type=checkbox] ~ label > span.indicator ,
#sect-energy [type=checkbox] ~ label > span.indicator ,
#sect-education [type=checkbox] ~ label > span.indicator ,
#sect-produce [type=checkbox] ~ label > span.indicator ,
#sect-ecology [type=checkbox] ~ label > span.indicator  {
  color:yellow;
}
#sect-coffee [type=checkbox] ~ label > span.label {
  color:white;
  text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#sect-control [type=checkbox] ~ label > span.label {
  color:white;
  text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#sect-energy [type=checkbox] ~ label > span.label {
  color:white;
  text-shadow:-1px -1px 0 #801A00, 1px -1px 0 #801A00, -1px 1px 0 #801A00, 1px 1px 0 #801A00;
}

#sect-education [type=checkbox] ~ label > span.label {
  color:white;
  text-shadow:-1px -1px 0 #0443AA, 1px -1px 0 #0443AA, -1px 1px 0 #0443AA, 1px 1px 0 #0443AA;
}
#sect-produce [type=checkbox] ~ label > span.label {
  color:white;
  text-shadow:-1px -1px 0 #6F6400, 1px -1px 0 #6F6400, -1px 1px 0 #6F6400, 1px 1px 0 #6F6400;
}

#sect-ecology [type=checkbox] ~ label > span.label {
  color:white;
  text-shadow:-1px -1px 0 #040, 1px -1px 0 #040, -1px 1px 0 #040, 1px 1px 0 #040;
}

/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
.content-wrapper {
  /* These styles are required for the "scroll-over" effect */
  position: absolute;
  top: 85%;
  width: 100%;
  min-height: 90%;
  z-index: 2;
  background: white;

}

/* This is the class used for the main content headers (<h2>) */
/*.content-head {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 5vh 1vw;
}*/
#contact-container h3.contact-head {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 5vh 1vw;
	text-align:center;
	font-size: 1.17em;
	text-transform:uppercase;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
  color: white;
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
  color: #1f8dd6;
}

.content-subhead i {
    margin-right: 7px;
}

/* This is the class used for the dark-background areas. */
.ribbon {
  background: #2d3e50;
  color: #aaa;
}


h4 {
    font-family: "zurich_bold_bt", Helvetica, sans-serif;
}

/* This is the class used for the footer */
.footer {
  background: #111;
}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 768px) {
  #header-container {
	  height:10%;
  }
  /* We increase the body font size */
  body {
      font-size: 16px;
  }
  /* We want to give the content area some more padding */
  .content {
      padding: 1em;
  }

  /* We can align the menu header to the left, but float the
  menu items to the right. */
  .home-menu { text-align: left; font-size:130%; }
  .home-menu ul { float: right; }

  /* We increase the height of the splash-container */
  /* .splash-container {
      height: 500px;
  }*/

  /* We decrease the width of the .splash, since we have more width
  to work with */
  .splash { max-width: 800px; }
  .splash-head { font-size: 250%; }


  /* We remove the border-separator assigned to .l-box-lrg */
  .l-box-lrg { border: none; }

  .accordion img{width:50%;}
}

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 1024px) {
  /* We increase the header font size even more */
  .splash-head {
      font-size: 300%;
  }
}