/**
* Updated Apr.12, 2016
*/

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 22, 2015 */
@font-face {
    font-family: 'museo_sans100';
    src: url('../fonts/museo_sans/museosans-100-webfont.eot');
    src: url('../fonts/museo_sans/museosans-100-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museo_sans/museosans-100-webfont.woff2') format('woff2'),
         url('../fonts/museo_sans/museosans-100-webfont.woff') format('woff'),
         url('../fonts/museo_sans/museosans-100-webfont.ttf') format('truetype'),
         url('../fonts/museo_sans/museosans-100-webfont.svg#museo_sans100') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo_sans300';
    src: url('../fonts/museo_sans/museosans-300-webfont.eot');
    src: url('../fonts/museo_sans/museosans-300-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museo_sans/museosans-300-webfont.woff2') format('woff2'),
         url('../fonts/museo_sans/museosans-300-webfont.woff') format('woff'),
         url('../fonts/museo_sans/museosans-300-webfont.ttf') format('truetype'),
         url('../fonts/museo_sans/museosans-300-webfont.svg#museo_sans300') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo_sans700';
    src: url('../fonts/museo_sans/museosans-700-webfont.eot');
    src: url('../fonts/museo_sans/museosans-700-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museo_sans/museosans-700-webfont.woff2') format('woff2'),
         url('../fonts/museo_sans/museosans-700-webfont.woff') format('woff'),
         url('../fonts/museo_sans/museosans-700-webfont.ttf') format('truetype'),
         url('../fonts/museo_sans/museosans-700-webfont.svg#museo_sans700') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'museo_sans900';
    src: url('../fonts/museo_sans/museosans-900-webfont.eot');
    src: url('../fonts/museo_sans/museosans-900-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museo_sans/museosans-900-webfont.woff2') format('woff2'),
         url('../fonts/museo_sans/museosans-900-webfont.woff') format('woff'),
         url('../fonts/museo_sans/museosans-900-webfont.ttf') format('truetype'),
         url('../fonts/museo_sans/museosans-900-webfont.svg#museo_sans900') format('svg');
    font-weight: normal;
    font-style: normal;
}
@charset "UTF-8";

/*	Global styles		*/
html{ max-width: 2400px; }
html, body, div, p, ul, h1, h2, h3, img, em, small, li, span, time, section, article, header, nav, footer, table, th, td, tr{
	margin:0;
	padding:0;
	border: 0;
	vertical-align: baseline;
	font: inherit;
	background: transparent;
  font-family: 'museo_sans100', Arial, Helvetica, sans-serif;
	box-sizing: border-box;
}
header, nav, main, section, article, footer, figure, figcaption{ display: block; }
body{
	font-size: 16px;
  font-weight: normal;
  max-width: 1600px;
  min-width: 320px;
  width: 100%;
	margin: 0 auto;
	line-height: 1;
  height: 100%;
}

img{ outline: 0; border: none; }
ul{ list-style: none; }

a{
  text-decoration: none;
  border: none;
  color: #5D5161;
  transition-duration: .250s;
}
a:hover{ color: #7CC919; transition-duration: .250s; }

button{	background: #99EE20; color: #2A5C03;
  /*width: 100%; */
  /**
  * NOTE: setting a width on containers prevent svg images from scaling properly in IE
  */
}
button a{
  padding:12px 0;
  display: block;
  width: 100%; height:100%;
  color:inherit;
}
button:hover{	background: #3FA8F4; color: #fff; cursor: pointer; }
button.inactive{ background: rgba(0,0,0,.25); color: rgba(42, 92, 3, .5); }
button.inactive:hover{ cursor: default;}
button.inactive a{ cursor: default;}
button:focus {outline:0;}

/**
* Custom Classes
*/
.hide	{ display: none; }
.bold{ font-family: 'museo_sans900', Arial, Helvetica, sans-serif; }

/**
* Header
*/
header{
	width:100%;
	position: relative;
  font-family: 'museo_sans300', Arial, Helvetica, sans-serif;
  border: 1px solid #fff;
  height: 168px;
  margin-top:-12px;
}
header > img{ position: absolute; top:-16px; left:0; width: 1600px; }

/* Songfarm Logo */
header .logo{
  height: 84px; width: 31.5%;
  max-width: 370px;
  min-width: 200px;
  background: url("../img/songfarm_logo.png") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  top:44px; left:13.3%;
  z-index: 1000;
}
/* BETA label Logo */
/*header div.logo:after{
  content: 'BETA';
  position: absolute;
  right:-30px; top:30px;
  font-size: 0.75em;
  cursor: default;
  color:#666666;
}*/
header div.logo:hover:after{ color: #000; transition-duration: 0; cursor: default; }


/**
* Navigation
*/
nav{
  font-size: 1.2em;
  height: 168px;
  position: relative;
   /*z-index: 10;*/
 }
nav ul{
  line-height: 76px;
  position: absolute;
  top: 44px;
  right: 4%;
  width: 44%;
  /*min-width: 550px; */
  min-width: 700px; /* w/ log in */
}
ul#links{ height:76px; text-align: right; }
ul#links li { margin-left: 5%; }
ul#links li{
	display: inline-block;
	text-transform: uppercase;
  position: relative;
}
ul#links li:last-child{ position: relative; }
ul#links li:nth-child(5):after{
  content: '|';
  position: relative;
  right:-20px;
}
ul#links li a{ padding: .3em .1em; }
ul#links li a:hover:before{
  content:url('../img/arrows_and_lines/navActive_arrow.png');
  position:absolute; left:-15px; top:3px;
}

ul#links li a[title="Log In"]:hover:before{ content:''; position: relative; } /* remove arrow from this link */
ul#links span#style, ul#links span.menu{ visibility: hidden; }

/* nav mini-menu */
ul#links span.menu:hover{ color: #7CC919; }
ul#links span.menu.active-color{ color: #7CC919;}

/* nav-mini container */
ul#links div#nav-mini_container.active{ display: block; }


/* Gradient background */
#modal, button.register, button.contact{
	background: #e5fcca;
	background: -moz-linear-gradient(top,  #e5fcca 0%, #99ee20 45%, #89dc3d 70%, #7ec919 90%, #92ea41 100%);
	background: -webkit-linear-gradient(top,  #e5fcca 0%,#99ee20 45%,#89dc3d 70%,#7ec919 90%,#92ea41 100%);
	background: linear-gradient(to bottom,  #e5fcca 0%,#99ee20 45%,#89dc3d 70%,#7ec919 90%,#92ea41 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5fcca', endColorstr='#92ea41',GradientType=0 );
}
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5fcca+0,99ee20+45,89dc3d+70,7ec919+90,92ea41+100 */

/*ul#links span.menu:hover{ color: #7CC919; }
ul#links div.active{ display: block; }
ul#links span.menu.active-color{ color: #7CC919;}*/

/* Register Button */
button.register, button.contact{
  position:absolute;
  bottom:-36px; right: 12.5%;
  z-index:9; /* 9 z-index allows login dialog to appear above register button */
  display: inline-block;
  padding: 0.5em 1em;
  padding-left: 1.5em;
  /*width: 23%;*/
  font-size: 2em; color: #2A5C03;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.65);
}
button.register:before, button.contact:before{
  content: url('../img/arrows_and_lines/grey_arrow_right.svg');
	position: relative;
  top: 2px;
  right: 10px;
	/*width: 15px;*/
  /*height: 26px;*/
  /*width: auto;*/
}
button.register:hover, button.contact:hover{
  background: rgb(63,216,255);
	background: linear-gradient(to bottom,  rgb(134,231,255) 0%,rgb(63,216,255) 17%,rgb(18,121,222) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86e7ff', endColorstr='#1279de',GradientType=0 );
}


/**
* Footer
*/
footer{
	height: 120px;
	position: relative;
	/*bottom: -20px;*/
  width:100%;
	background-color: #343238;
	text-align: center;
  font-family: 'museo_sans300', Arial, Helvetica, sans-serif;
  color: #9A999C;
}
footer div.legal{
  height:120px; width: 30%; min-width: 320px;
  text-align: center; margin: 0 auto;
  line-height: 120px;
}
footer div.share-links{
  position: absolute; z-index: 10;
  top:34px; left:18.2%;
  height:40px; width: 200px;
  text-align: left;
}
footer div.share-links p { margin-bottom: 10px; }
footer div.share-links ul{ margin:0; padding:0; }
footer div.share-links ul li{ display: inline-block; margin: 0 6% 0 0; cursor: pointer; transition: opacity 250ms; }
footer div.share-links ul li:hover{ opacity: 0.75; }
footer div.share-links ul li img{ height:40px; width:40px; }


/**
* Login In form
*/
form#login-form{
  position:absolute;
  right:-20px;
  top:64px;
  z-index:11111;
  background:#fff;
  border:1px solid #ccc;
  width:320px;
  padding-bottom: 6px;
}
form#login-form input{
  display: block;
  margin:16px 16px;
  width:90%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 6px;
}
form#login-form span#login-error,
form#login-form span#username-error,
form#login-form span#password-error{
  text-align: center;
  line-height: 30px;
  position: relative;
  margin:-10px 0 0;
  display: block;
  font-weight: bold;
  color: #DD3131;
  text-transform: none;
}
form#login-form span#login-error{ padding: 0 12px; }
form#login-form span#username-error,
form#login-form span#password-error{
  line-height: 1;
  margin:-10px 0;
  font-size: 0.8em;
  text-transform: none;
}

/**
* Styles for Confirmation modal
*/
#modal{
	font-family: 'museo_sans700', Arial, helvetica, sans-serif;
	font-size: 1.6em;	color: #666666; padding: 2.5em 2em;
	margin: 0 auto; width: 30%; min-width: 590px;
	position: fixed; z-index:3000; top:50%; left:50%;
	transform: translate(-50%, -50%);
	border: 1px solid #7ec919;
  border-radius: 30px 30px 30px 30px;
	display: none;
  overflow: hidden; text-align: center;
}
#modal span{
	color: #3FA8F4;
	font-size: 1.6em;
	display: block;
	padding: 1em 0 0.5em;
	font-weight: bold;
	margin-bottom: 0;
  font-family: 'museo_sans900';
}
#modal p, #modal ul li{
	display: block;
	margin: 1em auto 1.5em;
	font-size: 1.15em;
	max-width: 90.5%;
	line-height: 1.2;
  font-family: 'museo_sans300';
}
#modal ul li{ margin-top: 1.5em;
  /*font-weight: bold; */
}
#modal img{
	margin: 0.5em 18px;
	opacity: 0.75;
  z-index: 3001;
  max-width: 100px;
  height: auto;
}

/* Overlays */
#overlay{
		position:fixed;
		z-index: 1000;
		top:0;
		right:0;
		bottom:0;
		left:0;
		background-color: rgba(0,0,0,0.5);
    display: none;
}

/* Global Message styles */
div.global_msg{
  position: absolute;
  top:5px;
  left:50%;
  margin-left: -30%;
  width:60%;
  padding:15px 60px;
  background: #FC3A3A;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  border-radius: 6px;
}


/**
* Media Queries
*/
@media screen and (max-width: 1099px) and (min-width:841px){
  header .logo{ left: 9.7%; }
}
@media screen and (max-width: 840px) and (min-width: 321px){
  header .logo{ left: 5.25%; width: 69%; }
}
@media screen and (max-width: 320px){
  header .logo{ left: 3%; width: 77.5%; }
}

/* Register button */
@media screen and (max-width: 1024px) and (min-width: 768px){
  button.register, header div.register.medium, header div.register.medium:hover:before{
    /*right: 10.5%;
    width:30%;
    bottom: -30px;
    font-size:1.6em;*/
  }
}

/* Break nav onto two lines */
@media screen and (max-width: 1290px) and (min-width: 840px){ /* max-width: 1024px & min-width: 640px*/
  ul#links span{ display: block; }
  header ul#links{
    /*min-width: 350px;*/
    min-width: 420px; /* w/ log in */
    text-align: left; /* w/ log in */
    line-height: 40px;
    top: 44px;
  }
  ul#links li:nth-child(5):after{ right: -15px; }
  button.register.medium{
    font-size: 1.75em;
    min-width: 290px;
  }

}

@media screen and (max-width: 900px) and (min-width: 640px){
  button.register, header div.register.medium, header div.register.medium:hover:before{
    /*right: 10.5%;
    width:32%;
    bottom: -28px;
    font-size:1.5em;*/
  }
  /*button.register{
    width: 290px;
    font-size: 1.5em;
    line-height: 1.5;
  }*/
}

/* w/ log in */
@media screen and (max-width: 839px){
  #modal p, #modal ul li{
    max-width: 72.5%;
  }
  ul#links li:nth-child(5):after{
    content: '';
  }
  /* green arrow on hover - position changes to relative from absolute */
  ul#links li a:hover:before{
    position: relative; left: -7px;
  }
  /* add green arrow to 'Log In' */
  ul#links li a[title="Log In"]:hover:before{
    content:url('../img/arrows_and_lines/navActive_arrow.png');
    /*position:absolute; left:-15px; */
    top:3px;
  }
  ul#links span.menu{
    visibility: visible;
    color: #666666;
    font-size: 3em;
    cursor: pointer;
    padding: 0 0.25em;
    position: relative; top: 8px; right: -14px;
  }
  ul#links li{ display: block; line-height: 40px; }
  ul#links div{
    position: absolute;
    z-index: 1000;
    top: 70px; right: 0;
    width: 28.5%; min-width: initial;
    text-align: right;
    padding: 0.5em 1.25em;
    background: #ffffff;
    -webkit-box-shadow: -1px -1px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px -1px 5px 0px rgba(0,0,0,0.75);
    box-shadow: -1px -1px 5px 0px rgba(0,0,0,0.75);
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #000000;
    display: none;
  }
  button.register{
    /*width: 260px;*/ /* cause svg to break in IE */
    font-size: 1.5em;
    line-height: 1.5;
    right: 6%;
  }
  button.register:before{ top: 4px;  }
}

/* end of log in test */
@media screen and (max-width: 639px){
  header{ height: 142px; }
  header, nav{ top: -18.5%; }
  header div.register.medium, header div.register.medium:hover:before{ right: 7.5%; width:30%;}
  button.register.medium{
    /*font-size: 1.3em;
    bottom: -24px;
    width: 30%;*/
  }
  #modal{ width: 75%; min-width: 474px; }
}

@media screen and (max-width: 1024px){
  footer div.share-links{
    top: 26px; left: 8.2%;
  }
}

@media screen and (max-width: 769px){
  footer{ height: 160px; }
  footer div.share-links{
    position: inherit; left: 0 !important; top: 9px;
    display: block;
    margin: 0 auto;
    text-align: center;
    height: auto;
    padding: 1em 0 1em;
  }
  footer div.legal{
    height: auto; line-height: 1;
    display: block;
    padding: 1em 0;
  }
}

@media screen and (max-width: 480px) and (min-width: 320px){
  #modal{ width: 95%; min-width: 320px; padding: 1.5em 0; }
  #modal p{ max-width: 80%; }
  #modal p, #modal p span{ position: relative; z-index: 3002; }
  #modal img{ width: 80px; height: auto;}
  ul#links span.menu{ font-size: 2.5em;}
}



/*** Styles not in use ***/

/**
* Styles for social links at top of page
*/
/*
header#header ul#social_head{
  position:absolute;
  top:-4px; right: 12.75%;
  width:250px;
  margin:0;
  height:60px;
  text-align: center;
}
#header ul#social_head li{
  transition-duration: .250s;
  margin:0;
  height:50px; width:50px;
}
#header ul#social_head li:hover{ transition-duration: .250s; }
header#header ul#social_head li.facebook{
  background: url('../img/icons/social icons/facebook_s.png');
  height:50px; width:50px;
}
header#header ul#social_head li.facebook:hover{ background: url('../img/icons/social icons/facebook_s_hover.png'); }
header#header ul#social_head li.twitter{ background: url('../img/icons/social icons/twitter_s.png');
  height:50px; width:50px; }
header#header ul#social_head li.twitter:hover{ background: url('../img/icons/social icons/twitter_s_hover.png'); }
header#header ul#social_head li.linkedIn{
  background: url('../img/icons/social icons/linkedIn_s.png');
  height:50px; width:50px;
}
header#header ul#social_head li.linkedIn:hover{ background: url('../img/icons/social icons/linkedIn_s_hover.png'); }
header#header ul#social_head li a{
  background: url('../img/icons/social icons/message.png') no-repeat;
  height:50px; width:50px;
  display: block;
}
header#header ul#social_head li a:hover{ background: url('../img/icons/social icons/message_hover.png') no-repeat; }
header#header ul#social_head a:hover:before{ content: ''; }*/


/**
* Index.php Styles
*/

html, body{ min-width: 320px; }

/* hide register button (temporarily) */
#register-button {
  display: none;
}

/* Sections Global  */
#about, #features, #contactUs{
  font-family: 'museo_sans100', Arial, Helvetica, sans-serif;
}

#features h2,
#contactUs h2{ font-size: 2.8em; }

/*About Section*/
#about{
  height:620px;
	background: #a8a8a8; /* Old browsers */
	background: -moz-linear-gradient(top,  #a8a8a8 0%, #b1b1b1 4%, #bbbbbb 6%, #d9d9d9 9%, #dfdfdf 10%, #e8e8e8 12%, #eeeeee 13%, #f2f2f2 16%, #f3f3f3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #a8a8a8 0%,#b1b1b1 4%,#bbbbbb 6%,#d9d9d9 9%,#dfdfdf 10%,#e8e8e8 12%,#eeeeee 13%,#f2f2f2 16%,#f3f3f3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #a8a8a8 0%,#b1b1b1 4%,#bbbbbb 6%,#d9d9d9 9%,#dfdfdf 10%,#e8e8e8 12%,#eeeeee 13%,#f2f2f2 16%,#f3f3f3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-9 */
  background: url("../img/about_background.jpg") no-repeat;
	background-size: cover;
	background-position: 50% top;
}
#about > div{
  padding-top: 5em;
  width:30%;
  margin-left: 18.2%;
}
#about h2{ font-size: 2.8em; margin-bottom:24px; }
#about p {
   line-height: 1.4;
   margin-bottom: 0.5em;
}

#about button.medium{
	position: static;
	/*width: 100%;*/
	margin-top: 0.9em;
	/*width: 76%;*/
	font-size: 2.5em;
	min-width: 400px;
	line-height: 1;
}

/*	Contact Us	*/
#contactUs{
	height:auto;
	background-color: #81C91C;
	background:url("../img/contact_background.jpg") no-repeat;
	background-size: cover;
	background-position: 50% top;
}
#contactUs > h2 {
	margin-left: 18.2%; padding: 0.5em 0;
	display: inline-block;
}

div.rounded-contact{
	height:100px;
	background: url("../img/contact_top_rounded.png") no-repeat;
	background-size: cover;
	background-position: left top;
  margin-top: 115px;
  position:relative;
}
#contactUs button.contact{
	position: static;
	min-width: 80%;
	font-size: 1.75em;
	line-height: 1.5;
}

/*Contact Form*/
form#contact-form, div.errors_php{
    margin: 0 0 0 18.2%;
    width: 32%;
		min-width: 416px;
		padding-bottom: 6em;
}
form#contact-form div:not(.button){ margin-bottom: 1em; }
form#contact-form div:nth-child(4){
  margin-bottom: 2em;
}
form#contact-form div.button{ margin-left: 0.5em; }

form#contact-form label {
	display: block; position: relative;
	border: 1px solid rgba(0,0,0,0);
}
form#contact-form input, textarea {
    font-family: 'museo_sans100', Arial, Helvetica, sans-serif;
    font-size: 1.2em; width: 100%;
    box-sizing: border-box; border: 4px solid #7FC91B;
    border-radius: 50px;
    padding:.75em; padding-left: 1.5em;
		position: relative;
}
form#contact-form textarea{ overflow: auto; } /* remove scrollbar in IE */
form#contact-form input:focus, textarea:focus {
    /*border: 4px solid #7FC91B;*/
    /*box-shadow: 0 0 0 2pt #99EE20;*/
    outline: none;
}
form#contact-form textarea {
    height: 4.5em; resize: vertical;
}
form#contact-form div.errorContainer{
	position: absolute;	z-index: 100;	top: -21px;
	left: 90%; width: 65%;
  padding: 3px; margin-bottom: 0;
  font-family: 'museo_sans300';
  display: table;
	color: white; background: #E81927;
	border:6px solid #FFFFFF;	border-radius: 35px;
	box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.65);
}
form#contact-form div.errorContainer:before{
	content: '';
	background: url('../img/forms/exclamation_point_red.png');
	background-size: cover;
	height:50px;
	width:50px;
	float: left;
	margin-left: 3px; margin-right: 5px;
}
#contact-form p.error{
	font-size: 1.25em;
  display: table-cell;
	vertical-align: middle;
	padding: 5px 0;
  width: 100%; /* enables left-justication of p tag */
}
form#contact-form div.errorContainer #name-error{
  top: -12px;
}
form#contact-form div.errorContainer #email-error,
form#contact-form div.errorContainer #msg-error{ top: -6px; }

div#thank-you_message{
  margin-left: 18.2%;
  font-size:1.75em;
  width:50%;
  line-height: 1.25;
}
div#thank-you_message p{ padding: 1em 0 6em; margin: 1em 0 0; font-family: 'museo_sans300'; }
#contact-form input.error,
#contact-form textarea.error{ border: 4px solid #E81927; }

div.errors_php{
  /*margin-left: 18.2%;*/
  /*width: 35%;*/
  padding: 5px 0.5em;
  color: #E81927;
  border: 3px solid #E81927;
  font-size: 1.25em;
  line-height: 1.25;
  margin-bottom: 1.25em;
  font-weight: bold;
}
div.errors_php span{ font-family: 'museo_sans900'; font-size: 1.15em;}
div.errors_php ul{ padding-left: 1.5em; }
div.errors_php ul li{ list-style-type: disc; }

#banner a{
  color:#34299E;
  text-decoration: underline;
}
#banner a:hover{ color: #fff; }

/*  Banner Slides styles  */
.slide-container{
  height: 470px;
  position: relative;
  z-index: 1;
  overflow: auto;
  min-width: 320px;
}
.slide-container .slide-data{ display:none; }
.slide-container .slide-stage-large{
  height: inherit;
  position: relative;
  overflow: hidden;
}
.slide-container .slide-container-1,
.slide-container .slide-container-2{
  height: inherit;
  position: absolute;
  top: 0;
  left: auto;
  width: 100%;
  color: #fff;
}
.slide-container .slide-container-1{ z-index: 101; }
.slide-container .slide-container-2{ z-index: 102; }

.slide-container .slide-panel {
  height: inherit;
  width: 100%;
  position: absolute;
  top:0; left:0;
  background-repeat: no-repeat;
  background-position: center 0px;
  background-size: cover;
}
.slide-container .slide-panel .panel-caption{
  width: 68%;
  position: absolute;
  top: 150px; left:18.2%;
  color:#fff;
  text-transform: uppercase;
  /*display: none; /* test */*/
}
.slide-container .slide-panel .panel-caption h3 {
  margin: -47px 0px 17px 0px;
  font-family: 'museo_sans100', Arial, Helvetica, sans-serif;
  font-size:4em;
  font-weight: normal;
  position: relative;
}
.slide-container .slide-panel .panel-caption h3 span.bold{
  font-family: 'museo_sans900', Arial, Helvetica, sans-serif;
  /*font-size:2.4em;*/
}
.slide-container .slide-panel .panel-caption p{
  font-family: 'museo_sans700', Arial, Helvetica, sans-serif;
  line-height: 1.5;
  font-size: 1.3em;
  text-transform: none;
  margin-top: 17px
}
.slide-container .slide-panel .panel-caption p.last-p-element{margin-top: 0;}
.slide-container .slide-panel .panel-caption p{ max-width:85%; }
.slide-container .slide-panel .panel-caption p#caption-one{ max-width: 70%; }

.slide-panel img{
  width: 70%;
  min-width: 690px;
  /*position: relative; left: -10px;*/
}

/* slide nav */
.slide-container .slide-nav{
  position: absolute; bottom: 10px; left:0;
  text-align: center; width: 100%;
  z-index:1003;
}
.slide-container .slide-nav div{
  display:inline-block;
  width:10px; height: 10px;
  border:2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  margin: 0 8px;
  cursor: pointer;
  transition: background-color .4s, border .4s;
}
.slide-container .slide-nav div:hover{ border-color: #fff; background-color: rgba(255,255,255,.2); }
.slide-container .slide-nav div.selected{ background-color: #fff; }
.slide-container .slide-nav div:hover{ border-color: #fff; background-color: rgba(255,255,255,.2); }
.slide-container .slide-nav div.selected{ background-color: #fff; }

/* left/right buttons */
.slide-container .btn{
  height:45px; width: 45px;
  position: absolute;
  top: 50%; /* 235px */
  cursor: pointer;
  border-radius: 50%;
  transition: background-color .250s, border .250s;
}
.slide-container .btn:hover{ border-color: rgba(255,255,255,.1); background-color: rgba(255,255,255,.2); }
.slide-container .btn.prev{
  left: 10%; z-index: 1004;
  background-image: url('../img/arrows_and_lines/slider_arrow_left.png') ; background-position: 1px 0px;
}
.slide-container .btn.next{
  right: 10%; z-index: 1004;
  background-image: url('../img/arrows_and_lines/slider_arrow_right.png'); background-position: 1px 0px;
}
.slide-container .slide-stage-small{
  height: inherit;
  position: relative;
  overflow: hidden;
}
.slide-container .slide-stage-small .slide-panel{
  width:100%; height: inherit; position: absolute; top:0; left:0;
}

/*Features*/
#features{
  height:1319px;
  width:100%;
  /*margin-left: 18.2%;*/
}
#features h2{ margin-left: 18.2%; }
.section{
  text-align: center;
  position: relative;
  min-width: 890px;
}
.section.first{ background-color: #FFFFFF; height:405px; }
.section.second{
  background-color: #F1F1F1;
  height:436px;
  padding-top: 39px;
  /*display: none;*/
}
.section.third{
  background-color: #E5EBEE;
  height:436px;
  padding-top: 39px;
  /*display: none;*/
}

.feature{
	width: 290px; height: 325px;
  display: inline-block;
  vertical-align: top;
  /*margin: 0 0.25em;*/
  position: relative;
}
.feature h3{
  padding: 20px 0;
  font-weight: bold;
}
.feature p{
  height: 115px; margin: 0 1em;
  /*border: 1px solid black;*/
}


.feature::after{
  content: url('../img/arrows_and_lines/dotted_vertical.png');
  height:325px; width:3px;
  display: inline-block;
  position: relative;
  z-index:10;
  top:-325px; right:-50%;
  /*border: 1px solid black;*/
}
.section .feature:last-of-type::after{
  content: '';
}

/* section dividers */
.divide-one{
	height: 63px; width: 100%;
	background: url("../img/icons/dividers/divider-01.png") no-repeat;
	margin-bottom: 39px;
}
.divide-two{
  height: 64px; width: 100%;
	background: url("../img/icons/dividers/divider-02.png") no-repeat;
  position: absolute;
  left:0; bottom:0;
}
.divide-three{
  height: 64px; width: 100%;
	background: url("../img/icons/dividers/divider-03.png") no-repeat;
  position: absolute;
  left:0; bottom:0;
}
.divide-four{
  height: 64px; width: 100%;
	background: url("../img/icons/dividers/divider-04.png") no-repeat;
  position: absolute;
  left:0; bottom:0;
}

@media screen and (max-width: 1400px) and (min-width: 991px){
  .slide-container .slide-panel .panel-caption p#caption-one{ max-width: 85%; }
  .slide-container .slide-panel .panel-caption h3#caption-seven{ min-width: 830px; }
  .slide-container .slide-panel{
    background-position: 33% top;
  }
  .slide-container .btn.prev{ left: 5%; }
  .slide-container .btn.next{ right: 5%; }
}
@media screen and (max-width: 1115px){
  .slide-container .slide-panel .panel-caption{
    /*left: 11.3%; min-width: 815px;*/
    width: 82%;
    left: 13.5%;
  }
  .slide-container .btn.prev{ left: 3.5%; }
  .slide-container .btn.next{ right: 3.5%; }
  /*.slide-panel img{ width: 95%; }*/
}
@media screen and (max-width: 990px){
  .slide-container .slide-panel{
    /*background-size: 164%;*/
    background-position: 50% top;
  }
  .slide-container .slide-panel .panel-caption{
    /*min-width: initial; width: 88%;
    top: 125px; left: 4%;*/
    width: 100%;
    left: 0; right: 0;
    top: 156px;
    padding: 0 8.5%;
    min-width: initial;
    height: 0;
  }
  .slide-container .slide-panel .panel-caption h3{
    font-size: 3.75em; width: 95%;
    bottom: -120px;
    bottom: -92px;
    vertical-align: bottom;
    position: absolute;
    padding-right: 1.5em;
    min-width: 750px;
  }
  .slide-container .slide-panel .panel-caption p{
    position: relative; top: 98px;
    vertical-align: baseline;
    width: 95%;
    max-width: 100%;
    font-size: 1.25em;
  }
  .slide-panel img{
    position: relative; top: 93px;
    width: 82.5%; min-width: 580px;
  }

  .slide-container .btn.prev{ left: 2.5%; }
  .slide-container .btn.next{ right: 2.5%; }
  /*.slide-container .btn.prev, .slide-container .btn.next{ top: 285px; }*/
}
@media screen and (max-width: 700px){
  .slide-container .slide-panel .panel-caption{
    min-width: 0;
    padding: 0 2.5em;
    top: 156px;
  }
  .slide-container .slide-panel .panel-caption h3{
    font-size: 3.25em; margin: -64px 2em 25px 0;
    width: 96%; min-width: 455px;
    padding-right: 0.5em;
    bottom: -120px;
  }
  .slide-container .slide-panel .panel-caption p{
    position: relative; font-size: 1.15em;
    width: 100%; max-width: 100%;
  }
  .slide-panel img{
    min-width: 426px;
    width: 84.5%;
    top: 104px;
  }
  .slide-container .btn{ display: none; }
}
@media screen and (max-width: 480px){
  .slide-container .slide-panel{
    /*background-size: 164%;*/
    background-position: 61% top;
  }
  .slide-container .slide-panel .panel-caption{
    width: 100%; left: 0; top: 0;
    height: 100%;
    padding-top: 3em; padding-left: 0.75em;
    text-shadow: 1px 1px rgba(0,0,0,0.5);
    min-width: 0;
  }
  .slide-container .slide-panel .panel-caption h3{
    font-size: 3em; margin:0; margin-bottom: 0.5em;
    position: static;
  }
  .slide-container .slide-panel .panel-caption p{
    margin-left: -0.5em; padding: 0.25em 0.25em 0.25em 0.5em;
    margin-top: 0; top: 0;
    min-width: 314px; font-size: 1.35em;
  }
  .slide-container .slide-panel .panel-caption img{ width: 79%; min-width: 290px; top: -10px; }
}

/* media queries */
@media screen and (max-width: 1024px) and (min-width: 669px){
	#about{
		background-position: 40% top;
	}
	#about div,
  #contactUs #contact-form,
  div.errors_php,
  div#thank-you_message,
  #features h2{
    margin-left: 11.5%;
    width: 46%;
    min-width: 410px;
  }
  div#thank-you_message{ width: 54%; }
	#contactUs h2{ margin-left: 11.5%; }
}

@media screen and (max-width: 800px){
	#contact-form .error#name-error,
	#contact-form .error#email-error{ top: 3px;}
	/*#contact-form #msg-error{
    top: initial;
  }*/
	form#contact-form div.errorContainer{
		position: relative; display: block;
		left: 14px; top: -10px;
		min-width: 320px;
    margin-bottom: -12px; /* nullify extra space caused my positioning */
	}
}

@media screen and (max-width: 736px){
	#contactUs{
		background: #81C91C;
	}
}

@media screen and (max-width: 668px) and (min-width: 480px){
	#about{ background-position: 40% top; }
  #about div,
  #contactUs #contact-form,
  #contactUs h2, #features h2,
  div#thank-you_message,
  div.errors_php{ margin-left: 8.5%; }

	#about div{
		font-size: 1.15em;
		padding-top: 3em;
		width: 57%; min-width: 350px;
	}
	#contactUs #contact-form,
  div#thank-you_message,
  div.errors_php{ width: 70%; }
  #about button.medium{ font-size: 1.9em; min-width: 300px;}
}

@media screen and (max-width: 479px){
	#about{
		height: auto;
		background: #a8a8a8; /* Old browsers */
		background: -moz-linear-gradient(top,  #a8a8a8 0%, #b1b1b1 4%, #bbbbbb 6%, #d9d9d9 9%, #dfdfdf 10%, #e8e8e8 12%, #eeeeee 13%, #f2f2f2 16%, #f3f3f3 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  #a8a8a8 0%,#b1b1b1 4%,#bbbbbb 6%,#d9d9d9 9%,#dfdfdf 10%,#e8e8e8 12%,#eeeeee 13%,#f2f2f2 16%,#f3f3f3 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  #a8a8a8 0%,#b1b1b1 4%,#bbbbbb 6%,#d9d9d9 9%,#dfdfdf 10%,#e8e8e8 12%,#eeeeee 13%,#f2f2f2 16%,#f3f3f3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-9 */
	}
	#about div, #contactUs{
		width: 100%; margin: 0;
		padding: 3em 1.5em 5em;
	}
	#about div{ font-size: 1.15em; }
	#about button.medium{
		position: relative;
		font-size: 1.6em;
		min-width: 293px;
		margin-top: 0;
    padding: 0.5em 0.75em;
	}
  #features h2{ margin-left: 0; padding-top: 1.5em; padding-left: .5em}
	#contactUs{
		background: #81C91C;
    padding: 3em 0.25em;
	}
  #contactUs div.rounded-contact{ height: 0; }
	#contactUs h2, div#thank-you_message{
		width: 100%; margin-left: 0; padding-left: 6px;
	}
	#contactUs #contact-form, div.errors_php{
		width: 100%; margin: 0;
		min-width: 310px;
	}
	#contactUs button.contact{
    font-size: 1.25em;
    padding-right: 2em; padding-left: 2.25em;
	}
	#contactUs #contact-form input{ padding: 0.75em; }
	#contactUs #contact-form .errorContainer{ min-width: 270px; }
}

/* media styles for features section */
@media screen and (max-width: 900px){
  /* features sections */
  #features, #features .section{
    height: auto;
    min-width: 320px;
    padding-top: 0; /* prevents gaps between sections */
    background: white;
  }
  #features .section.first{ margin-top: 3em;}
  #features .section.third{ padding-bottom: 1em; } /* leaves space before contact form */
  .feature{
    display: block;
    margin: 0 auto;
    height: auto;
    width: 55%;
    min-width: 401px;
    position: relative;
    overflow: hidden;
    background: #E5EBEE;
    background: -moz-linear-gradient(left,  rgba(119,196,234,1) 0%, rgba(119,196,234,1) 1%, rgba(163,212,237,1) 7%, rgba(163,212,237,1) 7%, rgba(163,212,237,1) 15%, rgba(229,235,238,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(119,196,234,1) 0%,rgba(119,196,234,1) 1%,rgba(163,212,237,1) 7%,rgba(163,212,237,1) 7%,rgba(163,212,237,1) 15%,rgba(229,235,238,1) 100%);
    background: linear-gradient(to right,  rgba(119,196,234,1) 0%,rgba(119,196,234,1) 1%,rgba(163,212,237,1) 7%,rgba(163,212,237,1) 7%,rgba(163,212,237,1) 15%,rgba(229,235,238,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#77c4ea', endColorstr='#e5ebee',GradientType=1 );
    /*height: 64px; /* this value will be toggled on by javascript */
  }
  .feature h3{
    font-size: 1.5em;
    position: absolute;
    top: 0;
    width: 100%;
    margin-bottom: .5em;
    background: rgb(238,238,238);
    background: -moz-linear-gradient(top,  rgb(238,238,238) 0%, rgb(204,204,204) 100%);
    background: -webkit-linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%);
    background: linear-gradient(to bottom,  rgb(238,238,238) 0%,rgb(204,204,204) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
    box-shadow: 3px 3px 8px 5px rgba(0,0,0,.5);
    text-shadow: 0px 0px 5px rgba(0,0,0,1);
    color: white;
    font-family: 'museo_sans700';
    outline: none;
  }
  .feature h3:hover{
    cursor: pointer;
    color: rgba(255,255,255,.90);
    text-shadow: 0px 0px 5px rgba(0,0,0,1);
  }
  .feature img{
    position: relative;
    top: 5.5em;
  }
  .feature p{
    height: auto;
    padding: 1.5em 0.5em 1em;
    font-size: 1.2em;
    line-height: 1.3;
    margin-top: 4em;
  }
  .feature::after{
    content: "";
    height: 0;
  }
  /* targets features dividers */
  div[class^="divide"]{
    position: relative;
    display: none; /* removes them all together */
  }
  div.rounded-contact{ margin-top: 0; }
}

@media screen and (max-width: 400px){
  article.feature{
    width: 100%;
    min-width: 320px;
    /*background: orange;*/
  }
}

/**:focus{ border: 3px solid yellow; }*/

/* Social Icons */

/*.facebook, .twitter, .linkedIn{
  opacity: .8;
  transition-duration: .250s;
}
.facebook:hover, .twitter:hover, .linkedIn:hover{
  transition-duration: .250s;
  cursor: pointer;
  opacity: 1;
}*/



/*Back to Top btn*/
div#back-to-top{
  background: url('../img/arrows_and_lines/arrowUp.png');
  height:64px; width:64px;
  opacity:0.2;
  position: fixed; z-index:500;
  right:2.5%; top: 6%;
  display: none;
  transition-duration: .250s;
}
div#back-to-top:hover{
  opacity: .5;
  transition-duration: .250s;
}
a:hover div#back-to-top{
  color: #000;
}
div#back-to-top:after{
  content: 'Top';
  font-size:1.1em;
  font-weight: bold;
  position: relative;
  bottom:-68px; left: 15px;
  opacity: 1;
}





/*Register Form*/
#register-form span.error{
	position:absolute;
	left:90px;
	width:80%;
	font-size: 0.85em;
	color:red;
  text-align: left;
}
#register-form img{
	position: absolute;
	z-index: 1002;
	top:5px; right:5px;
  cursor: pointer;
  opacity: 0.25;
  transition-duration: .250s;
}
#register-form img:hover{ opacity: .5; transition-duration: .250s; }

#register-form{
	position: fixed;
	z-index: 1001;
	/*top:18px;
	right:0;
	bottom:0;
	left:0;*/
  top: 35%; transform: transformY(-50%);
  left: 50%; transform: translateX(-50%);
	color: #2A5C03;
  max-width:30%;
	min-width:480px;
  /*height: 500px;*/
	/*margin:0 auto;
	padding:2em 0;*/
	text-align: center;
	font-family: 'museo_sans100', Arial, Helvetica, sans-serif;
	background:rgba(0,0,0,0);
  font-size:1.1em;
}
#register-form > div{ padding:22px 0 50px; background:#fff; }
#register-form div > p{ margin:52px auto 50px; font-size:1.2em; }
#register-form div + div > p{	margin-bottom: 40px; }
#register-form label{ font-size: 1.1em; }
#register-form div.user{
	height: 126px; width: 126px;
	border-radius: 63px;
	display: inline-block;
	line-height: 120px;
	margin: 0 0.4em 36px;
	background-color: #99EE20;
	font-size: 1.1em;
  transition-duration: .250s;
}
#register-form div.user:hover{
	cursor: pointer;
	background-color: #3FA8F4;
	color:#fff;
	transition-duration: .250s;
}

#register-form div.user.inactive{ background: rgba(0,0,0,.25); }
#register-form div.user.inactive:hover{
  cursor: default;
  color: inherit;
}

#register-form div + div input:not([type=submit]){
	border: 2px solid rgba(153, 238, 32, .5);
	display: block;
	margin: 1.5em auto 0.25em;
	padding:0.65em; padding-left: 1em;
	width:70%;
	border-radius: 24px;
	font-size: inherit;
}
#register-form div + div input:focus{
	box-shadow: 0 0 0 2pt #99EE20;
	outline: none;
}
#register-form div + div input[type=submit]{
	cursor: pointer;
	border-radius: 24px;
	margin:2em auto 16px;
	padding:0.5em 1em;
	display: block;
	background-color: #99EE20;
	color: #2A5C03;
	border:none; outline:none;
	width:65%;
	font-size: 1.2em;
  transition-duration: .150s;
}
#register-form div + div input[type=submit]:hover,
#register-form div + div input[type=submit]:focus{
	background-color: #3FA8F4;
	color:#fff;
	transition-duration: .150s;
  box-shadow: 0 0 1pt 2pt #78C6FF;
}
#register-form div#message p{
  line-height: 2em;
  margin: -.5em 0 -1.5em;
  color: #DD3131;
}


/* Login In form */
/*form#login-form{
  position:absolute;
  right:-20px;
  top:64px;
  z-index:11111;
  background:#fff;
  border:1px solid #ccc;
  width:320px;
  padding-bottom: 6px;
}
form#login-form input{
  display: block;
  margin:16px 16px;
  width:90%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 6px;
}

form#login-form span#login-error,
form#login-form span#username-error,
form#login-form span#password-error{
  text-align: center;
  line-height: 30px;
  position: relative;
  margin:-10px 0 0;
  display: block;
  font-weight: bold;
  color: #DD3131;
  text-transform: none;
}
form#login-form span#login-error{ padding: 0 12px; }

form#login-form span#username-error,
form#login-form span#password-error{
  line-height: 1;
  margin:-10px 0;
  font-size: 0.8em;
  text-transform: none;
}*/

.menu-icon{
  visibility: hidden;
  background: none;
  border: none;
}
.menu-icon:hover{
  color: #7CC919;
  background: none;
}
/* when mini-menu is clicked */
.menu-icon.active-color{ color: #7CC919;}
/* active state for mini-menu container */
ul#links.active{ display: block; }

/* w/ log in */
@media screen and (max-width: 839px){
  #modal p, #modal ul li{
    max-width: 72.5%;
  }
  ul#links {
    position: absolute;
    z-index: 1000;
    top: 118px; right: 0;
    width: 28.5%; min-width: 200px;
    height: auto;
    text-align: right;
    padding: 0.5em 1.25em;
    background: #ffffff;
    -webkit-box-shadow: -1px -1px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px -1px 5px 0px rgba(0,0,0,0.75);
    box-shadow: -1px -1px 5px 0px rgba(0,0,0,0.75);
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border: 0px solid #000000;
    display: none;
  }
  /* what is this?? */
  ul#links li:nth-child(5):after{
    content: '';
  }
  /* changes behavior of green arrow on hover */
  ul#links li a:hover:before{
    position: relative; left: -7px;
  }
  /* add green arrow to 'Log In' list-item */
  ul#links li a[title="Log In"]:hover:before{
    content:url('../images/arrows_and_lines/navActive_arrow.png');
    /*position:absolute; left:-15px; */
    top:3px;
  }
  ul#links li{
    display: block;
    line-height: 40px;
  }
  /* icon for the mini-menu nav */
  .menu-icon{
    visibility: visible;
    color: #666666;
    font-size: 3em;
    cursor: pointer;
    padding: 0 0.25em;
    position: absolute;
    top: 60px; right: 14px;
  }
  button.register{
    /*width: 260px;*/ /* cause svg to break in IE */
    font-size: 1.5em;
    line-height: 1.5;
    right: 6%;
  }
  button.register:before{ top: 4px; }
}