/* Clearfix
-------------------------------------------------
-------------------------------------------------
-----------------------------------------------*/
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


/* Animations
-------------------------------------------------
-------------------------------------------------
-----------------------------------------------*/

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}


/* Global
-------------------------------------------------
-------------------------------------------------
-----------------------------------------------*/

.homepage-06-4-2013 .wrapper {
  font-size: 62.5%;
  width: 80%;
  margin: 0 auto;
}

.homepage-06-4-2013 .wrapper-2 {
  font-size: 62.5%;
  width: 96%;
  margin: 0 auto;
}

body {
	background-color: #2c2c2c;
}


/* Header
-------------------------------------------------
-------------------------------------------------
-----------------------------------------------*/

.homepage-06-4-2013.header {
	padding: 7px 0px 8px 0px;
	top: 0px;
	background-color: #f1c02c;
	width: 100%;
}

.homepage-06-4-2013 .p2s-logo {
	float: left;
	display: inline-block;
}

.homepage-06-4-2013 .nav {
	margin-top: 8px;
	float: right;
	display: inline-block;
}

.homepage-06-4-2013 li {
	display: inline-block;
}

.homepage-06-4-2013 .navigation-item {
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
	font-family: 'din-condensed-web';
	font-size: 1.8em;
	color: black;
	margin-left: 22px;
	display: inline-block;
}

.homepage-06-4-2013 .navigation-item:hover {
	color: #be3a26;
}

.homepage-06-4-2013 .mobile-nav {
	display: none;
	float: right;
	margin-top: 6px;
}

.homepage-06-4-2013 .news {
	float: left;
	display: inline-block;
	margin-left: 12px;
}

.homepage-06-4-2013 .news-icon {
	float: left;
	display: inline-block;
	margin-top: 2px;
}

.homepage-06-4-2013 .news-copy {
	color: white;
	font-size: 1.3em;
	font-family: 'din-condensed-web';
	position: relative;
	top: 9px;
	margin-left: 10px;
}

.homepage-06-4-2013 .news-link {
	color: #be3a26;
	text-decoration: none;
	font-family: 'din-condensed-web';
	font-size: 1em;
}

.homepage-06-4-2013 .news-link:hover {
	text-decoration: underline;
}

/* styles for desktop */
.homepage-06-4-2013 .tinynav {
	display: none;
}

.homepage-06-4-2013 select {
	border: 1px solid #555;
	padding: 7px 3px 4px 15px;
	font-size: 1.5em;
	font-family: 'din-condensed-web';
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
	-webkit-appearance: none;
	-webkit-box-shadow: 1px 1px 1px #fff;
	-webkit-border-radius: 0.5em;
 }

/* styles for mobile */

@media screen and (max-width: 1050px) {
  .homepage-06-4-2013 .tinynav {
  	display: inline-block;
	float: right;
	margin-top: 1px;
  }

  .homepage-06-4-2013 #nav, #nav2 {
  	display: none;
  }

  .homepage-06-4-2013 .p2s-logo {
  	margin-top: 3px;
  }

  .homepage-06-4-2013 .news {
  	margin-top: 2px;
  }
}

/* CTA
-------------------------------------------------
-------------------------------------------------
-----------------------------------------------*/

.homepage-06-4-2013.cta {
	height: 537px;
	background: url(images/homepage-06-4-2013/sitebg3.jpg) no-repeat center center;
	background-size: cover;
}

.homepage-06-4-2013 .cta-content {
	position: relative;
	top: 39px;
}

/* Intro
---------------------------------------*/
.homepage-06-4-2013 .intro {
	text-align: center;
}

.homepage-06-4-2013 .attention {
	width: 95%;
	margin: 0px auto 1px auto;
	font-size: 2.6em;
	color: white;
	font-family: 'din-condensed-web';
	margin-bottom: 1px;
}

.homepage-06-4-2013 .tagline {
	margin-top: 10px;
	font-size: .8em;
	color: white;
	font-family: 'droid-serif';
}

.homepage-06-4-2013 .mini-steps {
	margin-top: 11px;
	display: none;
	font-size: .6em;
	color: white;
	font-family: 'droid-serif';
}

/* Steps
---------------------------------------*/
.homepage-06-4-2013 .how-it-works {
	padding-top: 68px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #dcdcdc;
}

.homepage-06-4-2013 .how-it-works-content {
	text-align: center;
	padding: 27px 0px 27px 0px;
}

.homepage-06-4-2013 .how-it-works-content span.title {
	letter-spacing: .1em;
	display: block;
	font-size: 1.6em;
	margin-bottom: 32px;
	font-family: 'din-condensed-web';
	color: white;
}

.homepage-06-4-2013 .step {
	display: inline-block;
	width: 225px;
	margin: 0 .5em;
}

.homepage-06-4-2013 .step img {
	text-align: center;
}

.homepage-06-4-2013 .step span {
	letter-spacing: 1px;
	text-align: center;
	color: white;
	margin: 18px 0px 3px 0px;
	font-size: 2.7em;
	font-family: 'din-condensed-web';
	display: block;
}

.homepage-06-4-2013 .instruction {
 	font-family: 'droid-serif';
	text-align: center;
	color: white;
	font-size: 1.2em;
	display: block;
	line-height: 18px;
}

.homepage-06-4-2013 .instruction-small {
	display: none;
}

.homepage-06-4-2013 .step-icon-small {
	display: none;
}

/* Enter ZIP
---------------------------------------*/
.homepage-06-4-2013 .zip {
	text-align: center;
	margin-right: 11px;
}

.homepage-06-4-2013 .zip p a{
	font-style: italic;
	color: #f3c130;
	text-decoration: underline;
	text-shadow: 1px 1px 0 #000;
	font-size: 14px;
	line-height: 20px;
	font-family: 'droid-serif', serif;
	margin-right: 220px;
}

.homepage-06-4-2013 input.zip {
	border: none;
	margin: 9px 16px 11px 0px;
	letter-spacing: .1em;
	font-family: 'din-condensed-web', sans-serif;
	font-size: 1.2em;
	color: #242A44;
	width: 176px;
	height: 45px;
	padding: 3px 4px 0px 0px;
}

.homepage-06-4-2013 input.submit {
	position: relative;
	top: -1px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 0px 3px 0px;
	font-family: 'din-condensed-web', sans-serif;
	color: white;
	background-color: #BE3A26;
	border: none;
	width: 176px;
	height: 48px;
	font-size: 1.1em;
	display: inline-block;
}

.homepage-06-4-2013 input.submit:hover {
	background-color: #85C440;
}

.homepage-06-4-2013 input {
  -webkit-appearance: none;
  border-radius: 0;
}


/* As Seen On
-------------------------------------------------
-------------------------------------------------
-----------------------------------------------*/

.homepage-06-4-2013.as-seen-in {
	padding: 0px;
	width: 100%;
	background-color: #f9f9f9;
	font-family: 'din-condensed-web';
	font-size: 2.6em;
}

.homepage-06-4-2013 .as-seen-in-content {
	text-align: center;
}

.homepage-06-4-2013 .top-row {
	display: block;

}

.homepage-06-4-2013 .bottom-row {
	display: block;
	margin-top: 6px;
}

.homepage-06-4-2013 .as-seen-title {
	font-family: 'din-condensed-web';
	display: block;
	color: white;
	font-size: 1.3em;
	position: relative;
	bottom: 10px;
}

.homepage-06-4-2013 .logos-2rows {
	display: none;
}


/* Footer
-------------------------------------------------
-------------------------------------------------
-----------------------------------------------*/

.homepage-06-4-2013.footer {
	padding: 6px 0px 17px 0px;
	background-color: #2c2c2c;
	width: 100%;
}

.homepage-06-4-2013 .footer-nav {
	position: relative;
	top: 13px;
	display: inline-block;
	float: right;
}

.homepage-06-4-2013 .footer-nav-item {
	font-family: 'din-condensed-web';
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.4em;
	letter-spacing: 1px;
	color: white;
	padding-left: 8px;
	border-left: 1px solid #f1c02c;
	margin-left: 5px;
}

.homepage-06-4-2013 .footer-nav-item .footer-nav-item__sup {
	vertical-align: super;
	font-size: smaller;
}

.homepage-06-4-2013 .footer-nav-item:hover {
	color: #e7c51d;
}

.homepage-06-4-2013 .no-line {
	border-left: none;
}

.homepage-06-4-2013 .social {
	position: relative;
	top: 6px;
	display: inline-block;
	float: left;
}

.homepage-06-4-2013 .social img {
	display: inline-block;
	margin: 0px 3px;
	opacity: .7;
}

.homepage-06-4-2013 .social img:hover {
	opacity: 1;
}


/* Media Queries
-------------------------------------------------
-------------------------------------------------
-----------------------------------------------*/

/** Reduces Navigation Link size (to accomodate news alert) **/
@media screen and (max-width: 1109px) {
	.homepage-06-4-2013 .navigation-item {
		font-size: 1.5em;
	}
}

/** Increases Wrapper width from 75% to 90% to fit content on smaller devices **/
@media screen and (max-width: 966px) {
	.homepage-06-4-2013 .wrapper {
		width: 90%;
	}
}

/** Implements completely new, 2 row section for "As Seen In" logos **/
@media screen and (max-width: 861px) {
	.homepage-06-4-2013 .logos {
		display: none;
	}

	.homepage-06-4-2013 .logos-2rows {
		display: block;
	}
}

/** Resizes 3 Steps in Header (Steps width/margin changes, Step Icons go from 125x125 to 90x90) **/
@media screen and (max-width: 756px) {
	.homepage-06-4-2013 .step-icon {
		display: none;
	}

	.homepage-06-4-2013 .instruction {
		display: none;
	}

	.homepage-06-4-2013 .instruction-small {
		display: block;
	 	font-family: 'droid-serif';
		text-align: center;
		color: white;
		font-size: 1.2em;
		display: block;
		line-height: 18px;
	}

	.homepage-06-4-2013 .step-icon-small {
		display: inline-block;
	}

	.homepage-06-4-2013.cta {
		height: 502px;
	}

	.homepage-06-4-2013 .step {
		display: inline-block;
		width: 170px;
		margin: 0 1%;
	}

}

/** Breaks footer navigation into a centered vertical column, centers social media icons **/
@media screen and (max-width: 742px) {
	.homepage-06-4-2013 .footer-content {
		text-align: center;
	}

	.homepage-06-4-2013 .footer-nav {
		position: relative;
		top: 0px;
		display: inline-block;
		float: none;
		padding-top: 28px;
	}

	.homepage-06-4-2013 .footer-nav-item {
		display: block;
		padding-left: 0px;
		border-left: none;
		margin-left: 0px;
		padding-bottom: 8px;
	}

	.homepage-06-4-2013 .social {
		text-align: center;
		display: block;
		float: none;
		margin-bottom: 0px;
		margin-top: 14px;
	}

	.homepage-06-4-2013.as-seen-in {
		padding-bottom: 12px;
	}


}




/** Reduces size of CTA Intro (Attention/TagLine) **/
@media screen and (max-width: 650px) {
	.homepage-06-4-2013 .attention {
		font-size: 2.2em
	}

	.homepage-06-4-2013.cta {
		height: 473px;
	}

	.homepage-06-4-2013 .cta-content {
		top: 36px;
	}
}

/** Hides News Alert **/
@media screen and (max-width: 648px) {
	.homepage-06-4-2013 .news {
		display: none;
	}
}

/** Removes Steps from Main CTA, Places new, smaller version of steps beneath tour / Enlarges CTA Intro & Left Aligns it **/
@media screen and (max-width: 587px) {
	.homepage-06-4-2013 .how-it-works-content {
		display: none;
	}

	.homepage-06-4-2013 .attention {
		font-size: 2.5em;
	}

	.homepage-06-4-2013 .cta-content {
		top: 23px;
	}

	.homepage-06-4-2013 .zip {
		width: 100%;
		margin-right: 0px;
	}

	.homepage-06-4-2013 input.zip {
		border: none;
		margin: 25px 0px 11px 0px;
		color: #242A44;
		width: 60%;
		padding: 3px 4px 0px 0px;
	}

	.homepage-06-4-2013 input.submit {
		padding: 5px 0px 3px 0px;
		width: 61%;
		font-size: 1.1em;
		display: inline-block;
	}

	.homepage-06-4-2013.cta {
		height: 349px;
	}

	.homepage-06-4-2013 .mini-steps {
		display: block;
		text-align: center;
	}
}

/** Removes "As Seen In" section **/
@media screen and (max-width: 452px) {
	.homepage-06-4-2013.as-seen-in {
		/*display: none;*/
	}
}