@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-regular-webfont.woff') format('woff'),
         url('fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* Reset in header.php */



/* Structure
====================================================== */

html {
	width: 100%;
	height: 100%;
}

body {
	width: 100%;
	height: 100%;
	color: #fff;
	background: #D4282A;
	font-weight: normal;
	font-size: 0.875em; /* 14/16 = 0.875 */
	line-height: 1.563em; /* 25/16 = 1.563 */
	font-family: "open_sansregular", Arial, sans-serif;
	text-align: center;
}

*, *:before, *:after {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
			box-sizing: border-box;         /* Opera/IE 8+ */
}

#wrapper {
	width: 100%;
	position: relative;

	z-index: 0;
}

.group {
	display: block;
	content: " ";
	clear: both;
	position: relative; 

	width: 100%;
	height: 100%;

	z-index: 5;
}
.ie .group { display: block; /* fix bug where tables stack */ }

section { overflow: hidden; }

.outer {
	display: table-cell;
	vertical-align: middle;

	z-index: 10;
}

.inner {
	display: block;
	width: 100%;
	position: absolute;
	left: 50%;
	top: 50%; 

	/*opacity: 0;*/
	z-index: 15;
}


/* Headers & Typeography
====================================================== */

h1, h2, h3, h4, h5, h6 { 
	font-family: "Roboto", sans-serif;
	text-transform: uppercase;
}
/* "steel fish" for 13 and the % numbers in facts*/

h1 { 
	font-size: 1.313em; /* 21/16 = 1.3125 */ 
	letter-spacing: 3px;
	line-height: 27px;
}

h2 {}

h3 {}

p {}

a {}

span {}

strong {}

em {}



/* Lists
====================================================== */

ul { text-align: left; }

ul li { margin-bottom: 18px; }

ol {
	counter-reset: count;
	text-align: left;
}

ol li:before {
	content: counter(count);
	counter-increment: count;
	font-family: 'Roboto', sans-serif;
}

ol li { margin-bottom: 18px; }

.nostyle { list-style-type: none; margin: 0; padding: 0; }


/* Navigation
====================================================== */

nav {}

nav a {}

nav ul {}

nav ul li {}

nav li a {}


/* Fader
====================================================== */

#fader { 
	-webkit-transition: background-color 2000ms ease-out;
    -moz-transition: background-color 2000ms ease-out;
    -o-transition: background-color 2000ms ease-out;
    transition: background-color 2000ms ease-out;
}

.pink { background-color: #d4282a; }
.yellow { background-color: #ece82a; }
.blue { background-color: #5ccae7; }

#fader .inner {
	max-width: 243px;
	margin-left: -122px;
	margin-top: -245px;

	opacity: 1;
}

#fader p { 
	max-width: 243px;
	display: block;
	position: relative;
	margin: 0 auto;
	margin-top: 28px;
}

#cycler { position: relative; height: 420px; margin: 0 auto; width: 100%; }
#cycler img { z-index: 15px; position: absolute; left: 0; }
#cycler .active { z-index: 20; }

/*
	-webkit-transition: background-color 500ms ease-out;
    -moz-transition: background-color 500ms ease-out;
    -o-transition: background-color 500ms ease-out;
    transition: background-color 500ms ease-out;
*/


/* Intro
====================================================== */

#intro {
	background-color: #fff;
	color: #525352;
}

/* vertical centering */
#intro .inner {
	max-width: 800px;
	margin-left: -400px;
	margin-top: -300px;
	line-height: 30px;
}

#border {
	position: absolute;
	top: 3%;
	left: 2%; 
	width: 96%;
	height: 95%;
	border: 11px solid #f6f5f6;
	background: 0;
	z-index: 2;
}

#intro p {
	max-width: 550px;
	display: block;
	position: relative;
	margin: 0 auto;
}

#intro img { width: 40%; margin-bottom: 30px;  }


/* Facts
====================================================== */

#facts {
	background-color: #ece82a;
	color: #262625;
}

#facts .inner { /* 730 x 530 */
	max-width: 730px;
	margin-left: -365px;
	margin-top: -265px;
}

#facts h1 { 
	color: #d4282a; 
	font-size: 1.5em; /* 24/16 = 1.5 */ 
	margin: 0 auto 70px; 
	max-width: 300px;
	position: relative;
}

#facts ul { text-align: left; }
#facts li { margin-bottom: 18px; padding-left: 12px; }


/* Stats
====================================================== */

#stats { 
	background-color: #1a1a1a;
	line-height: 1.8em;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 3px;
}

#stats .inner { /* 760 x 540 */
	max-width: 760px;
	margin-left: -365px;
	margin-top: -270px;
}

#stats h1 { color: #d4282a; margin-bottom: 60px; }

#stats h2 { color: #d4282a; font-size: 0.875em; /* 14/16 */ line-height: 0.75em; }

#gender-wrap,
#location-wrap,
#race-wrap {
	position: relative;
	float: left;
	width: 100%;
	max-width: 200px;
	margin-right: 80px;
}
#location-wrap { margin-right: 0; }

#stats p { font-size: 0.75em; }

#gender,
#location,
#race { 
	color: #ece82a; 
	position: relative;
	margin: 0 auto 30px;
	letter-spacing: 0;
}


/* Tips
====================================================== */

#tips {
	background-color: #84cabe; /* left = 66c2b3; center = 84cabe; right = 63b1a3 */
}

#tips h1 { position: relative; }

#tips .outer {}
#tips .inner { opacity: 1; }
#tips .inner:hover { cursor: pointer; }
#tips .inner.full:hover { cursor: default; }

#tips .inner.left,
#tips .inner.center,
#tips .inner.right {
	opacity: 1;
	width: 33.33%;
	height: 100%;
	top: 0; /* unset .inner's top: 50% */

	-webkit-transition: all 700ms ease-out,
						z-index 200ms ease-out 700ms;
       -moz-transition: all 700ms ease-out,
						z-index 200ms ease-out 700ms;
    	 -o-transition: all 700ms ease-out,
						z-index 200ms ease-out 700ms;
    		transition: all 700ms ease-out,
						z-index 200ms ease-out 700ms;

}

#tips .inner.left { left: 0; background: #0094b5; }
#tips .inner.center { left: 50%; margin-left: -16.665%; background: #048da5; }
#tips .inner.right { left: 66.6%; right: 0; background: #19a4b2; }

#tips .inner.full {
	width: 100%;
	margin-left: 0;
	left: 0;

	-webkit-transition: all 700ms ease-out,
						z-index 50ms ease-out;
       -moz-transition: all 700ms ease-out,
						z-index 50ms ease-out;
    	 -o-transition: all 700ms ease-out,
						z-index 50ms ease-out;
    		transition: all 700ms ease-out,
						z-index 50ms ease-out;

	z-index: 16;
}

/* ------------- Shared ------------ */
#tips .handle,
#tips .content {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -10;
}

#tips .handle { margin-left: -50px; margin-top: -62px; }
#tips .handle h1 { max-width: 100px; font-size: 1.125em; }

#tips .content { display: none; }
#tips .content h1 { margin: 50px 0; }

.close { display: none; position: absolute; right: 100px; top: 100px; z-index: 30; }
.close:hover { cursor: pointer; }

#tips .resources {
	position: absolute;
	top: 140px;
	width: 90%;
	left: 5%;
	text-align: center;
	z-index: 100;
}

/* ------------- Left ------------ */
#tips .left .handle {}
#tips .left .content { /* 700 x 520 */
	max-width: 700px; 
	margin-left: -350px;
	margin-top: -280px;
}

/* ------------- Center ------------ */
#tips .center .handle {}
#tips .center .content { /* 700 x 550 */
	max-width: 700px;
	margin-left: -350px;
	margin-top: -375px;
}
#tips .center ol { font-weight: bold; } 
#tips .center ol li:before {
	color: #047E91;
	font-size: 1.625em; /* 26/16 = 1.625 */
	padding-right: 40px;
	vertical-align: middle;
}

/* ------------- Right ------------ */
#tips .right .handle {}
#tips .right .content { /* 1150 x 540 */
	width: 100%;
	max-width: 1150px;
	margin-left: -575px;
	margin-top: -300px;
}
#tips .right ol { list-style-type: none; content: " "; }
#tips .right ol li { position: relative; padding-top: 30px; height: 340px; width: 270px; }
#tips .right ol li:before { display: none; }
#tips .right ol span {
	color: #168B96;
	font-size: 7.5em; /* 120/16 = 7.5 */
	position: absolute;
	left: 0px;
	top: 30px;
	font-family: 'Roboto', sans-serif;

	z-index: -1;
}

/* Connect
====================================================== */

#connect {
	background-color: #d4282a;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	letter-spacing: 3px;
}

#connect .inner {
	max-width: 730px;
	margin-left: -365px;
	margin-top: -350px;
}

#connect header { margin-bottom: 50px; }

#connect p { line-height: 25px; font-size: 1.2em; }

#connect #phone { font-size: 3.125em; /* 50/16 */ }

#connect #facebook { margin: 30px 0; }

#connect #sponsors { }
#connect #sponsors img {}


/* Global
====================================================== */

#share-box {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.9);
	
	color: #fff;
	text-transform: uppercase;
	font-size: 1em;
	font-family: 'Roboto', sans-serif;
	letter-spacing: 3px;

	z-index: 100;
}
#share-box.active { display: block; }

#share-box .close {
	display: block;
	top: 30px;
	right: 30px;

	z-index: 101;
}

#share-box .inner {
	left: 0;
	margin-top: -50px;

	opacity: 1;
}

#share-box a {
	color: #fff;
	text-decoration: none;
	display: block;
	margin: 30px 0;
}

#share-box .inner img { margin-right: 40px; vertical-align: middle; }

#share-twitter {}

#share-facebook {}

/* Global
====================================================== */

.down-arrow {
	position: absolute; 
	display: block;
	left: 50%;
	margin-left: -10px;
	bottom: 75px;
	background: transparent url(../img/down-arrows.png) top left no-repeat;
	width: 20px;
	height: 26px;

	z-index: 20;
}
	.down-arrow.white { background-position: 0 0; }
	.down-arrow.green { background-position: -20px 0; }
	.down-arrow.pink  { background-position: -40px 0; }

#share {
	position: fixed;
	right: 30px;
	top: 30px;
	border: 3px solid #fff;
	padding: 5px 8px;
	text-transform: uppercase;
	line-height: 0.875em;

	z-index: 20;
}

#share:hover { cursor: pointer; }

.centered { text-align: center; }

.mobile { display: none; }

.last { margin-right: 0 !important; }

.bx-wrapper {}
	.bx-viewport {}

.controls { position: absolute; top: 50%; width: 100%; }
	.next { position: absolute; right: 0; }
	.prev { position: absolute; left: 0; }
	.next:hover,
	.prev:hover { cursor: pointer; }

/* Form
====================================================== */

form {}

label {}

input[type=text] {}

input[type=checkbox] {}

input[type=radio] {}

input[type=submit] {}

button, .button {}

.error {}


/* Media Queries
====================================================== */

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {

}

@media only screen and (max-width:1366px) {
	#connect header { margin-bottom: 20px; }

	#connect p { font-size: 1em; }

	#connect #phone { font-size: 2.2em; }

	#connect #facebook { margin: 20px 0 0 10px; }
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {

}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	#gender-wrap,
	#race-wrap{ margin-right: 60px; }

	#tips .right .content { /* 1150 x 540 */
		/*width: 100%;*/
		max-width: 700px;
		margin-left: -350px;
		/*margin-top: -230px;*/
	}
	#tips .right .next { right: -25px; }
	#tips .right .prev { left: -25px; }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	#tips .right .content { /* 1150 x 540 */
		/*width: 100%;*/
		max-width: 900px;
		margin-left: -450px;
		/*margin-top: -230px;*/
	}
	#tips .right li { margin-right: 40px !important; }
	#tips .right .next { right: -50px; }
	#tips .right .prev { left: -50px; }

	.down-arrow { bottom: 30px; }

	#sponsors { margin-top: 0 !important; }
	#facebook { margin: 10px 0; }

	#connect #phone { line-height: 0; }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	.mobile { display: block; }
	.nomobile { display: none; }

	.group { display: block; }
	.outer { display: block; }
	.inner { display: block; }



	/* Fader */
	#fader {}
	#fader .inner { margin-top: -150px; }
	#fader img { width: 50%; }

	#cycler { height: 200px; }
	#cycler img { left: 50%; margin-left: -60px; }


	/* Intro */
	#intro {}
	#intro .inner {
		width: 250px;
		margin-left: -130px;
		margin-top: -200px;
		line-height: 1.85em;
	}

	#intro img { display: none; }


	/* Facts */
	#facts {}
	#facts .inner {
		width: 300px;
		margin-left: -150px;
		margin-top: -200px;
		padding: 50px 0;
	}
	#facts h1 {}
	#facts ul {}
	#facts li { width: 260px; height: 200px; }



	/* Stats */
	#stats {}
	#stats .inner {
		width: 100%;
		max-width: 300px;
		margin-left: -150px;
		margin-top: -180px;
	}
	#stats h1 { margin-bottom: 15px; }

	#stats-wrap {}
	#stats-wrap li { display: block; }
	
	#gender-wrap {}
	#gender { display: none; }
	
	#race-wrap {}
	#race { display: none; }
	
	#location-wrap {}
	#location { display: none; }

	#stats span { color: #ece82a; font-size: 2em; }



	/* Tips */
	#tips .handle,
	#tips .content {}

	#tips .resources {
		position: absolute;
		top: 90px;
		width: 90%;
		left: 5%;
		text-align: center;
	}

	#tips .handle {}
	#tips .handle h1 { font-size: 0.75em; }
	#tips .handle img { width: 50%; }

	#tips .content {}
	#tips .content h1 {}

	#tips .content header img { width: 20%; }
	#tips .content h1 {
		font-size: 0.85em;
		line-height: 1.8em;
		margin: 20px 0;
	}

	.close { right: 20px; top: 20px; }
	
	#tips .left .handle {}
	#tips .left .content { /* 700 x 520 */
		max-width: 300px; 
		margin-left: -150px;
		margin-top: -200px;
	}
	#tips .left ul {}
	#tips .left li { margin-bottom: 10px; height: 300px; margin-top: 60px; }




	#tips .center .handle {}
	#tips .center .content { /* 700 x 550 */
		max-width: 300px;
		margin-left: -110px;
		margin-top: -200px;
	}
	#tips .center ol { margin-top: 100px; font-family: 'Roboto', sans-serif; text-align: center; width: 100%; } 
	#tips .center li { height: 320px; width: 100%; }
	#tips .center ol li:before { display: none; }
	#tips .center .next { right: -40px; }
	#tips .center .prev { left: -40px; }




	#tips .right .handle {}
	#tips .right .content { /* 1150 x 540 */
		width: 100%;
		max-width: 300px;
		margin-left: -150px;
		margin-top: -230px;
	}
	#tips .right ol li { position: relative; padding-top: 30px; height: 320px; width: 270px; font-size: 13px; padding: 0; }
	#tips .right ol span { display: none; }




	/* Connect */
	#connect {}

	#connect .inner {
		max-width: 300px;
		margin-left: -150px;
		margin-top: -280px;
	}

	#connect header { margin-bottom: 20px; }
	#connect header img { width: 20%; }

	#connect p { font-size: 0.75em; line-height: 1.5em; }

	#connect #phone { font-size: 1.2em; line-height: 1.1em; }

	#connect #facebook { width: 100%; margin: 0; }

	#connect #sponsors { margin-top: 15px; }
	#connect #sponsors img { height: 50px; margin-right: 10px; }



	/* Down Arrow */
	.down-arrow { bottom: 30px; }



	/* Share button */
	#share { top: 10px; right: 10px; }
}
@media screen and (max-height:480px) {
	/* Connect */
	#connect {}

	#connect .inner {
		max-width: 300px;
		margin-left: -150px;
		margin-top: -280px;
	}

	#connect header { margin-bottom: 20px; margin-top: 60px; }
	#connect header img { display: none; }

	#connect p { font-size: 0.75em; line-height: 1.5em; }

	#connect #phone { font-size: 1.2em; line-height: 1.1em; }

	#connect #facebook { width: 100%; margin: 0; }

	#connect #sponsors { margin-top: 15px; }
	#connect #sponsors img { height: 50px; margin-right: 10px; max-width: 200px; }
}