
/* ==========================================================================
	   DIRECTORY
	   
		1. Font-Faces
		2. Base Styles
		3. Page Styles
		3. a) Header
			b) Search
		4. Listing Page
		5. Asset Page
		6. About the Science
		7. Home Page
		8. Footer
		9. Media Queries
	   
   ========================================================================== */


/* ==========================================================================
   FONT FACES
   ========================================================================== */
	/*   
	@font-face {
		font-family: 'Intro';
		src: url('../fonts/Intro.eot');
		src: url('../fonts/Intro.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/Intro.svg#Intro') format('svg'),
			 url('../fonts/Intro.otf') format('opentype'),
			 url('../fonts/Intro.woff') format('woff');
		font-weight: normal;
		font-style: normal;
		}
	*/
	@font-face {
			font-family: 'Intro';
			src: url('../fonts/intro.eot');
			src: url('../fonts/intro.eot?#iefix') format('embedded-opentype'),
					 url('../fonts/intro.woff') format('woff'),
					 url('../fonts/intro.ttf') format('truetype'),
					 url('../fonts/intro.svg#intro') format('svg');
			font-weight: normal;
			font-style: normal;
	}		

/* ==========================================================================
   Base styles
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

* {
	-webkit-transform-origin-x: 0px;
	-webkit-transform-origin-y: 0px;
	-webkit-transform-origin-z: initial;
} 
 
html {
    font-size: 1em;
    line-height: 1.4;
	background:#f0ede3 url(../images/background-pattern.gif) repeat;
}

body {
	overflow-x:hidden;
}

h1, h2, h3, h4 {
	font-family: 'Intro', arial, sans-serif;
}

p, ul {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 15px;
	color: #192324;
	line-height: 24px;
}

a {
	text-decoration: none;
}
	a:hover {
		transition-duration: .2s;
	}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}
/*
::selection {
    background: #b3d4fc;
    text-shadow: none;
}
*/
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 2em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.clear {
	clear: both;
}

/*------------------------
     TABLE STYLES
------------------------*/

.content-page-left-column table {
	color: #666;
	width:100%;
	margin: 0 0 20px 0;
	border-bottom: 1px solid #d8d8d8;
	-moz-border-radius: 2px;
	border-radius: 2px;
	}
	.content-page-left-column table th {
		font-size: 18px;
		background: #f0f0f0;
		font-weight: bold;
		border: 1px solid #d8d8d8;
		-moz-border-radius-topleft: 2px;
		-moz-border-radius-topright: 2px;	
		-webkit-border-top-left-radius: 2px;
		-webkit-border-top-right-radius: 2px;		
		}
	.content-page-left-column table th h2 {
		margin: 13px 0;
	}
	.content-page-left-column table td {
		font-size: 12px;
		line-height: 18px;
		border-top: 1px solid #d8d8d8;
		border-left: 1px solid #d8d8d8;
		border-right: 1px solid #d8d8d8;		
		vertical-align: top;
		padding: 10px 15px 10px 15px;
		}

	tr:nth-child(even) {
		background-color: #fff;
	}
	tr:nth-child(odd) {
		background-color:#f9f9f9;
	}
	.content-page-left-column table td p {
		margin: 0;
		padding: 0;
		}

/************************************
		PAGE STYLES / CLASSES
 ************************************/   

.wrapper {	
	width: 100%;
	height: 100%;
	margin: 0 auto;
}


/************************************
			HEADER
 ************************************/
 
.header, .asset-header {
	height: 286px;
}
	.header {
		background:url(../images/event-header-bg.jpg) repeat center;
	}
	.asset-header {
		background:url(../images/asset-header-bg.gif) repeat center;
	}

	.header-main {
		max-width: 1300px;
		height: auto;
		margin: 0 auto;

	}
		.logo {
			float: left;
			width:27%;
			height: auto;
		}
			.logo img {
				width: 100%;
				height: auto;
			}
		.logo-rectangle	{
			display: none;
		}

		.nav {
			max-width: 946px;
			height: 101px;
			padding: 0;
			margin: 0 0 0 27%;
			background: url(../images/nav-bg.gif) repeat-x;
		}
			.nav-top {
				margin:0;
				color: #fff;
				padding: 20px 0 30px 30px;
			}
				h3.nav-top-iam {
					font-size: 20px;				
					float: left;
					margin: 0 19% 0 0;
				}
					h3.nav-top-iam a {
						color: #fff;
					}
					h3.nav-top-iam a:hover {
						color: #00a78d;
					}
						
				ul.nav-top-language, ul.nav-top-login {
					float: left;
					margin: 0;
					padding: 0;
					color: #fff;
				}
					ul.nav-top-language li {
						display: inline;
						margin-right: 10px;						
					}
						ul.nav-top-language li a h3, ul.nav-top-language li h3, ul.nav-top-login li a h3 {
							padding: 0;
							margin:0;
							list-style: none;
							font-size: 13px;
							display: inline;
						}
						ul.nav-top-language li a h3 {
							color: #00a78d;
						}
						ul.nav-top-language li a h3:hover {
							color: #fff;
						}

				ul.nav-top-login li {
					display: inline;
					list-style: none;
				}
					ul.nav-top-login li:first-child {
						 margin: 0 10px 0 25px;
					}
					ul.nav-top-login li a {
						color: #fff;
						text-decoration:none;					
					}
					ul.nav-top-login li a h3:hover {
						color: #00a78d;
					}

			/************************************
						SEARCH
			 ************************************/					
			
			.flexsearch-wrapper {
				height: auto;
				width: auto;
				max-width: 60%;
				float: right;
				overflow: hidden;
				background: transparent;
				margin: 0;
				padding: 0;
				position: static;
			}
				
			.flexsearch-form {
				overflow: hidden;
				position: relative;
			}
				
			.flexsearch-input-wrapper {
				padding: 0 50px 0 0; /* Right padding for submit button width */
				overflow: hidden;
			}
			
			.flexsearch-input {
				width: 100%;
			}
			
			/***********************
			 * Configurable Styles *
			 ***********************/
			.flexsearch {
				padding: 0 25px 0 0; /* Padding for other horizontal elements */
			}
			
			.flexsearch-input {
				-webkit-box-sizing: content-box;
				-moz-box-sizing: content-box;
				box-sizing: content-box;
				height: 30px;
				padding: 0 10px 0 37px;
				border: 1px solid #c9c9c9;
				border-radius: 16px; /* (height/2) + border-width */
				background: #fff url(../images/search-magnifying-glass.gif) no-repeat 15px 3px;
				color: #bfbfbf;
				font-size: 13px;
				-webkit-appearance: none;
				-moz-appearance: none;
				-moz-box-shadow:    inset 0 0 3px #c9c9c9;
				-webkit-box-shadow: inset 0 0 3px #c9c9c9;
				box-shadow:         inset 0 0 3px #c9c9c9;	
			}
				
			.flexsearch-submit {
				position: absolute;
				right: 0;
				top: 0;
				display: block;
				width: 30px;
				height: 30px;
				padding: 0;
				border: none;
				margin-right: 10px; /* border-width */
				background: transparent;
				color: #d8d8d8;
				font-family: 'Helvetica', sans-serif;
				font-size: 18px;
				line-height: 32px;
			}
			
			.flexsearch-input:focus {
				outline: none;
				border-color: #333;
				color:#535353;
			}
			
			.flexsearch-input:focus.flexsearch-submit {
				color: #333; 
			}
			
			.flexsearch-submit:hover {
				color: #333;
				cursor: pointer;
			}
			
			::-webkit-input-placeholder {
				color: #888;  
			}
			
			input:-moz-placeholder {
				color: #888
			}

			.nav-bottom ul li h3, .nav-bottom ul li a h3 {
				display: inline;
				font-size: 19px;
				color: #00a78d;
				margin: 0;
				padding: 0;
			}
				.nav-bottom ul {
					padding: 0;
					margin: 0;
					width: 750px;
					margin: 0 0 0 20px;
					top: 72px;
					position: absolute;
					float: left;
				}
				.nav-bottom ul li {
					display: inline;
					margin-right: 2%;
				}
					.nav-bottom ul li a h3 {
						color: #192324;
						-o-transition:.2s;
						-ms-transition:.2s;
						-moz-transition:.2s;
						-webkit-transition:.2s;
						transition:.2s;
					}
						.nav-bottom ul li a h3:hover {
							color: #00a78d;
						}

			.nav-social {
				padding: 0;
				margin: 0;
				width: 110px;
				margin: -80px 90px 0 0;
				top: 0;
				float: right;
				position: inherit;
			}
				.nav-social a:first-child {
					margin-right: 1px;
				}

	.did-you-know {
		padding: 20px 50px;
		background-color: #000;
		background: rgba(25, 25, 25, .5);				
		height: 115px;
		width: 75%;
		/*
		float: left;
		*/
		margin: 70px 0 0 104px;
		line-height: 1.25;
	}
		.did-you-know h1, .did-you-know h2, .did-you-know h3, .did-you-know h3 a {
			color: #fff;
			margin: 0;
			padding: 0;
		}
		.did-you-know h1 {
			font-size: 33px;
		}
		.did-you-know h2 {
			font-size: 20px;
		}
		.did-you-know h3 {
			font-size: 14px;
			text-decoration:underline;
		}
			.did-you-know h3 a:hover {
				color: #00a78d;
			}
				
.content-main-wrapper-full {
	background:url(../images/background-pattern-content.gif) repeat-y right;
	height: 100%;
}
	.content-main-wrapper {
		max-width: 1300px;
		margin: 0 auto;
	}
	.content-main {
		background-color: #fff;
		display: block;
		/*max-width: 1200px;*/
		width: 92%;
		padding: 0 0 30px 50px;
		margin: 0 auto;
		float: right;
	}

.crumb {
	float: left;
	margin: 45px 0 0 0;
	color: #d1d3d3;
}
	.crumb h3 {
		font-size: 15px;
	}	
	.crumb h3 a {
		font-family: 'Intro', arial, sans-serif;
		color: #00a78d;
	}
	.crumb h3 a:hover {
		color: #192324;
	}
	
	.crumb h2 {
		background-color: #00a78d;
		font-size: 22px;
		padding: 7px 15px;
		margin: 0 18px 0 -65px;
		/*width: 180px;*/
		width: auto;
		height: 43px;
		float: left;
	}
	.crumb h2:hover {
		background-color: #192324;
	}
		.crumb a h2 {
			color: #fff;
		}
			.crumb a h2 img {
				margin-bottom: 3px;
			}

.social-icons {
	float: right;
	margin: 45px 0 0 0;
}
	.social-icons img {
		margin-top: 10px;
	}
	.social-icons h3 {
		font-size:15px;
		float: left;
		margin-right: 14px;
	}


/************************************
			LISTING PAGE
 ************************************/
 
.title > h1
{
	font-size: 50px;	
	margin: 12px 0;
	width: 75%;
	float: right;
	clear: both;
	line-height: 1;
	letter-spacing: -1px;	
}

.left-col-filter {
	max-width: 236px;
	height: auto;
	float: left;
	padding-top: 90px;
}
	.left-col-filter h1 {
		line-height: 1;
		font-size: 30px;
		margin: 0;
		padding: 0;
	}
	.left-col-filter h1 a {
		color: #192324;
	}
	.left-col-filter h1 a:hover {
		color: #00a78d;
	}	
	.left-col-filter h1 a span {
		display: inline-block;
		width: 52px;
		height: 19px;
		background: url(../images/left-filter-arrow.gif) 0px 50px no-repeat;
		cursor: pointer;
	}
		.left-col-filter h1 a span:hover {
			background-position: 0 -19px;
		}
	.left-col-filter ul {
		padding: 0;
		margin-top: 50px;
	}
		.left-col-filter ul li {
			list-style: none;
			line-height:28px;
			padding: 0;
			margin: 0;
			font-family: 'Intro', arial, sans-serif;
			font-size: 14px;
			color: #192324;
		}
			.left-col-filter ul li:hover {
				cursor:pointer;
				color: #00a78d;
			}

.pagination {
	float: right;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #192324;
	font-weight: bold;
	margin: 0 0 13px 0;
	padding: 0;
}	
	.pagination a {
		color: #00a78d;
	}
		.pagination a:hover {
			color: #192324;
		}
		
.right-col {
	float: right;
	display: block;
	width: 76%;
	padding-right: .5%;
	margin-top: 13px;
}
	.right-col h1 {
		font-size: 49px;
		margin: 10px 0 15px 0;
	}
	ul.tabs {
		margin: 0;
		padding: 0;
	}
		ul.tabs li {
			list-style: none;
			display:inline-block;
			margin: 0 0 17px 0;
			padding: 52px 0 0 0;
			cursor: pointer;
			float: left;
			border-right: 1px solid #fff;
		}
			ul.tabs li a {
				font-family: 'Intro', arial, sans-serif;
				font-size: 15px;
				color: #00a78d;
				font-weight: bold;
				margin: 54px 0 0 62%;
				text-decoration:none;
			}
				ul.tabs li a:hover {
					color: #192324; 			/********* get hover to work *********/
				}	
		.right-col ul.tabs li.tab-video:hover, .right-col ul.tabs li.tab-games:hover, .right-col ul.tabs li.tab-comics:hover, .right-col ul.tabs li.tab-experiments:hover {
			background-position:0px -90px;
			background-position: center bottom;			
		}
			.right-col ul.tabs li.tab-video {
				background:url(../images/tab-video.gif) 0px 0px no-repeat;
			}
			.right-col ul.tabs li.tab-comics {
				background:url(../images/tab-comics.gif) 0px 0px no-repeat;
			}
			.right-col ul.tabs li.tab-games {
				background:url(../images/tab-games.gif) 0px 0px no-repeat;
			}
			.right-col ul.tabs li.tab-experiments {
				background:url(../images/tab-experiments.gif) 0px 0px no-repeat;
			}
			.right-col ul.tabs li.tab-video, .right-col ul.tabs li.tab-comics, .right-col ul.tabs li.tab-games, .right-col ul.tabs li.tab-experiments {
				width:25%;
				height:90px;
				background-position: center top;
			}

	ul.assets {
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;     /* NEW - Chrome */	
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		padding:0;
		margin: -5px 0 0 -1%;
		width: 100%;
	}
			ul.assets li {
			box-shadow: 1px 1px 2px #d3d3d3;
			list-style: none;
			display: inline-block;
			background: #ebe9e9 url(../images/btn-go.png) no-repeat bottom right;
			position: relative;
			font-size: 0;
			margin: 0 0 1.8rem .2%;
			width: 24.4%;               		/* For old syntax, otherwise collapses. */
			-webkit-box-flex: 0 0 24.5%;      /* OLD - iOS 6-, Safari 3.1-6 */
			-moz-box-flex: 0 0 24.5%;         /* OLD - Firefox 19- */
			-webkit-flex: 0 0 24.5%;          /* Chrome */
			-ms-flex: 0 0 24.5%;              /* IE 10 */
			flex: 0 0 24.8%;			  		/* NEW, Spec - Opera 12.1, Firefox 20+ */
		}
		ul.assets li:hover {
			background-color: #d3d3d3;
		}
			ul.assets li .asset-image {
				height: 95px;
				overflow-y: hidden;
			}
				ul.assets li img {
					width: 100%;
					height: auto;
				}
				ul.assets li h1 {
					font-size: 15px;
					color: #192324;
					padding: 20px 0 8px 18px;
					margin: 0;
				}
				ul.assets li p {
					font-family: Georgia, "Times New Roman", Times, serif;
					/*font-style: italic;*/
					font-size: 14px;
					color: #192324;
					padding: 0 0 17px 18px;
					line-height: 23px;
					margin: 0;				
				}
		ul.assets li:last-child {
			/*width: 217px;*/
			height: 245px;
			background:url(../images/btn-next.gif) 0px 0px no-repeat;
			cursor: pointer;
		}
			ul.assets li:last-child:hover {
				background-position: 0 -245px;
			}



/************************************
			ASSET PAGE
 ************************************/

.asset-title {
	background-color:#00a78d;
	padding: 35px 50px;
	height: 115px;
	width: 60%;
	margin: 70px 0 0 104px;
}
	.asset-title h1 {
		color: #fff;
		margin: 0;
		padding: 0;
		font-size: 40px;
	}

.asset {
	margin: 45px 0 0 0;
	float: left;
	width: 69%;
	height: auto;
	position: relative;
}
	.asset img {
		position: inherit;
		width:100%;
		height: auto;
	}
	.asset p {
		line-height: 27px;
		font-size: 16px;
		width: 100%;
		margin-top: 28px;
	}
	.asset iframe#youtube-player {
		width: 100%;
		height: 450px;
		padding-right: 20px;
	}
	.asset #flash iframe#wordsearch_iframe {
		width: 100%;		
	}	
	.asset object {
		width: 100%;
	}

.about-the-science-wrapper {
	margin: 10px -80px 0 0;
	padding: 0;
	width: 35%;
	float: right;
	background: url(../images/bg-atom.gif) no-repeat right top;
}

.about-the-science {
	margin: 35px 0 0 0;
	width: 65%;
	float: left;
}
	.about-the-science p{
		 line-height: 20px;
		 font-size: 14px;
	}
	.about-the-science h2 {
		 font-size: 18px;
		 margin: 0;
	}
	.about-the-science a {
		color: #00a78d;
		font-family: 'Intro', arial, sans-serif;		
		font-size: 15px;
	}
		.about-the-science a:hover {
			color: #192324;		
		}
	.btn-yeah a span {
		width: 62px;
		height: 31px;
		background: url(../images/btn-yeah.jpg) 0px 0px no-repeat;
		cursor: pointer;
		float: left;
		margin-right: 14px;
	}
		.btn-yeah a span:hover {
			background-position: 0 -31px;
		}
	.btn-yeah a h3 {
		color: #192324;
		font-size: 18px;
	}
		.btn-yeah a h3:hover {
			color: #00a78d;
		}

.recommendations-wrapper {
	width: 100%;
	height: auto;
	margin: 20px 0 -30px -50px;
	background:url(../images/recommendations-bg.gif) repeat;
	padding: 40px 10%;
}
	.recommendations-wrapper h2 {
		font-size: 20px;
		margin: 0 0 30px 0;
	}
		.recommendations-wrapper h2 span {
			color: #00a78d;
		}
	.recommendations-left-arrow {
		float: left;
		margin: 80px 23px 0 0;
	}
	.recommendations-left-arrow a img {
		width: 100%;
		height: auto;
	}
		.recommendations {
			width: 100%;
		}	
			.recommendations .assets {
				width: 100%;
				float: left;
			}

	.recommendations ul li:last-child {
		background: #ebe9e9 url(../images/btn-go.png) no-repeat bottom right;
	}
	.recommendations ul li:last-child:hover {
		background: #d3d3d3 url(../images/btn-go.png) no-repeat bottom right;
	}	
	.recommendations-right-arrow {
		float: right;
		margin: 80px 0 0 0;
		padding: 0;
	}	
	
/************************************
			CONTENT PAGE
 ************************************/

.content-page-left-column {
	margin: 45px 0 0 0;
	float: left;
	width: 69%;
	height: auto;
	position: relative;
}
	.content-page-left-column p {
		line-height: 27px;
		font-size: 16px;
		width: 100%;
		margin-top: 28px;
	}
	.content-page-left-column img {
		width: 100%;
		height: auto;
	}
	.content-page-left-column a img {
		width: 112px;
	}
.content-page-right-column {
	margin: 260px 0 0 0;
	padding: 0;
	width: 25%;
	float: right;
}
	.content-page-right-column img {
		width: 100%;
		height: auto;
	}
	
.newsletter-signup {
	background-color: #00a78d;
	padding: 15px 29px 25px 29px;
	margin-top: -127px;
}
.newsletter-signup h2 {
	color: #fff;
	font-size: 24px;
	line-height: 30px;
	text-align: justify;
}
.newsletter-signup h2 span {
	font-size: 18px;
	color: #f3d569;
}
.newsletter-signup .Actions {
	background-color: #fff;
	padding: 15px 30px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	text-transform:uppercase;
}
.newsletter-signup img {
	margin-bottom: 20px;
}

/************************************
		ABOUT THE SCIENCE PAGE
 ************************************/

.about-the-science-page {
	margin: 0 auto;
	border: none;
}
	.about-the-science-page p{
		font-size: 16px;
		line-height: 27px;
	}
	.about-the-science-page h2 {
		 font-size: 18px;
		 margin: 0;
	}
	.about-the-science-page a {
		color: #00a78d;
		font-family: 'Intro', arial, sans-serif;		
		font-size: 15px;
	}
		.about-the-science-page a:hover {
			color: #192324;		
		} 
 
/************************************
		ABOUT THE SCIENCE PAGE
 ************************************/

.about-the-science-page-wrapper {
	width: 100%;
}
	.about-the-science-page {
		margin: 135px auto 0 auto;
		width: 80%;
	}
	.ats-top-block {
		width: 100%;
	}
	.ats-right-top {
		width: 30%;
		float: right;
	}
	.ats-bottom-left {
		width: 60%;
		float: left;
	}
	.ats-right-bottom {
		width: 30%;
		float: right;
	}
		.about-the-science-page p {
			font-size: 16px;
			line-height: 27px;
		}
		.about-the-science-page img {
			margin: 0 auto;
			width: auto;
		}
		.about-the-science-page h2 {
			 font-size: 18px;
			 margin: 0;
		} 
 
/************************************
			HOME PAGE
 ************************************/

.container {
	position: relative;
	padding: 0;
}

	.feature-one, .feature-two, .feature-three, .feature-four {
		display: block;	
		overflow: hidden;
		position: relative;		
	}

.main-wrapper {
	max-width: 1240px;
	margin: 0 auto;
}
	.feature-one {
		background:url(../images/feature-europa.jpg) no-repeat center center;
		width: 100%;
		height: auto;
		float: left;
		margin-top: -52px;
		z-index: 0;
		/*
		-webkit-transform: skew(20deg);
		-moz-transform: skew(20deg);
	    -o-transform: skew(20deg);
		
		-webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 90%);
		-moz-webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 90%);
		-o-webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 90%);
		*/
		
	}
		.feature-one-text {
			max-width: 849px;
			margin: 0 auto;
			padding: 206px 0 80px 0;
		}
			.feature-one h1, .feature-one h2, .feature-one h3, .feature-one h3 a, .feature-two h1, .feature-two h2, .feature-two h3, .feature-two h3 a {
				margin: 0;
				padding: 0;
				color: #fff;
				text-transform:uppercase;
			}
			.feature-one h1 {
				font-size: 58px;
				color: #7dcbc9;
				text-shadow: 1px 1px 0 #fa4c2a, -1px -1px 0 #fa4c2a, 1px -1px 0 #fa4c2a, -1px 1px 0 #fa4c2a, 5px 3px 0 #fa4c2a;
			}
			.feature-one h2 {
				font-size: 38px;
				line-height: 58px;
				text-shadow: 5px 3px 0 #192324;
				margin-top:10px;
			}
			.feature-one h3 a {
				font-size: 20px;
				text-decoration:underline;
				float: right;
				text-shadow: 5px 3px 0 #192324;
			}
				.feature-one h3 a:hover {
					font-size: 20px;
					text-decoration:underline;
					float: right;
					color: #fa4c2a;
					text-shadow: 5px 3px 0 #192324;
				}

		.feature-two {
			background:url(../images/feature-worms.jpg) no-repeat center center;
			width: 100%;
			height: auto;
			margin-top: -48px;
			padding: 0 0 80px 0;
			overflow:inherit;
			z-index: 10;
			clip-path: polygon(0% 0%,100% 9%,100% 100%,0% 91%);
			-webkit-clip-path: polygon(0% 0%,100% 9%,100% 100%,0% 91%);
			-moz-webkit-clip-path: polygon(0% 0%,100% 9%,100% 100%,0% 91%);
			-o-webkit-clip-path: polygon(0% 0%,100% 9%,100% 100%,0% 91%);
			
/*			 shape-outside: polygon(0% 0%,100% 9%,100% 100%,0% 90%);  */
		}
			.feature-two-text {
				max-width: 850px;
				margin: 0 auto;
				padding: 100px 0 0 0;
			}
				.feature-two h1 {
					font-size: 55px;
					line-height: 72px;
					text-shadow: 5px 3px 0 #192324;
					margin: 10px 0 0 90px;
					width: 85%;
				}
					.feature-two h1 span {
						color: #fa4c2a;
					}
				.feature-two h2 {
					padding: 0;
					margin: 0;
					font-size: 38px;
					line-height: 58px;
					text-shadow: 5px 3px 0 #192324;
				}
				.feature-two h3 {
					text-align: right;
					font-size:31px;
					margin-right:70px;
					text-shadow: 5px 3px 0 #192324;
					line-height: 58px;
				}
				.feature-two h4 a {
					font-size: 22px;
					text-decoration:underline;
					text-shadow: 2px 2px 0 #192324;
					text-align: center;
					color: #fff;
					float: right;
				}
					.feature-two h4 a span {
						color: #fa4c2a;
					}
				
		.feature-three {
			background: #192324 url(../images/feature-the-charts.gif) repeat top center;
			width: 100%;
			height: auto;
			padding:  100px 120px 150px 120px;
			margin-top:-50px;
			/*-webkit-clip-path: polygon(0% 0%,100% 9%,100% 80%,0% 90%);*/
			z-index: 0;
		}
		.icon-overlay {
			position: relative;
			display: block;
			float: left;
			padding:0;
			margin:0 0 20px 0;
			background-color: #000;
			z-index: 0;
			overflow: hidden;
		}
			.icon-overlay img {
				width: 100%;
				height: auto;
			}
		.chart-thumb {
			position:absolute;
			left:0;
			top:0;
			z-index: -1;
			width: 108%;
			height: auto;
		}
			.feature-three h2, .feature-three h3 {
				color: #fff;
				padding: 0;
				margin: 0;
			}
				.feature-three ul.assets li h1 {
					font-size: 13px;
				}		
				.feature-three h2 {
					font-size: 35px;
					padding: 0;
				}		
				.feature-three h3 {
					font-size: 15px;
					padding: 0 0 35px 0;
				}

	.feature-three ul.assets {
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;     /* NEW - Chrome */	
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		padding: 0 0 80px 0;
	}
		.feature-three ul.assets li {
			box-shadow: 1px 1px 2px #d3d3d3;
			list-style: none;
			display: inline-block;
			background: #ebe9e9 url(../images/btn-go-charts.png) no-repeat bottom right;
			position: relative;
			margin: 10px 0 0 1%;
			box-shadow: none;
			-webkit-box-flex: 0 0 18.5%;      /* OLD - iOS 6-, Safari 3.1-6 */
			-moz-box-flex: 0 0 18.5%;         /* OLD - Firefox 19- */
			width: 18.5%;               		/* For old syntax, otherwise collapses. */
			-webkit-flex: 0 0 18.5%;          /* Chrome */
			-ms-flex: 0 0 18.5%;              /* IE 10 */
			flex: 0 0 18.5%;			  /* NEW, Spec - Opera 12.1, Firefox 20+ */
		}
			.feature-three ul.assets li:hover {
				background-color: #d3d3d3;
			}
			.feature-three ul.assets li img {
				height: 100%;
				height: auto;
			}
				.feature-three ul li:last-child {
					background: #ebe9e9 url(../images/btn-go-charts.png) no-repeat bottom right;
				}
				.feature-three ul li:last-child:hover {
					background: #d3d3d3 url(../images/btn-go-charts.png) no-repeat bottom right;
				}		

		.feature-three ul.assets li p {
			font-size: 13px;
			line-height: 20px;
			margin: 0 10px 0 0;				
		}
		
	.feature-four {
		background: url(../images/feature-social-mystery.gif) no-repeat center center;
		width: 100%;
		height: auto;
		padding: 70px 110px 40px 110px;
		margin-top:-195px;
		-webkit-clip-path: polygon(0% 19%,100% 11%,100% 100%,0% 90%);	
	}
		.mystery-button {
			float: left;
			width: 40%;
			height: auto;
		}
			.mystery-button img {
				float: left;
				width: 100%;
				height: auto;
			}		
		.twitter {
			float: right;
			width: 45%;
			background:url(../images/twitter-bird.gif) no-repeat top right;
			margin: 26px 0 0 10%;
		}
			.twitter h1, .twitter h1 a {
				font-size: 16px;
				color: #192324;
				padding:0;
				margin-top: 80px;	
			}
		.tweet {
			font-family: Georgia, "Times New Roman", Times, serif;
			font-size: 14px;
			padding: 15px 0 2px 3px;
			height: auto;
			float: right;
		}
			.tweet a {
				color: #00a78d;
			}
			.tweet img {
				margin: 10px 3% 0 0;
				float: left;
				display: block;
			}
			.tweet p {
				width: 75%;
				float: left;
				margin: 0;
				padding: 0;
			}
		.tweet-btn {
			float: right;
			margin: 20px 0 0 0;
		}
		.like-btn {
			float: left;
			margin: 20px 0 0 0;
		}					

	.feature-five {
		background: url(../images/feature-science-happens-here-awards.gif) no-repeat center center;
		width: 100%;
		max-height: 605px;
		margin: 0;
		padding: 60px 114px 200px 114px;
		margin-top: -65px;
		-webkit-clip-path: polygon(0% 0%,100% 10%,100% 95%,0% 100%);
	}
		.feature-five h1.happens-here {
			font-size: 26px;
			color: #fff;
			text-align: center;
			margin: 0px 0 0 370px;
			padding: 50px 0 0 0;
			line-height: 40px;
		}
		.feature-five h1.happens-here span {
			font-size: 35px;
			color: #ffc425;
			text-shadow: 2px 2px 0 #00a78d;		
		}
		.feature-five h1.awards {
			font-size: 26px;
			color: #00a78d;
			text-align: center;
			margin: 0 0 0 -350px;
			padding: 130px 0 0 0;
			line-height: 40px;
		}
		.feature-five h1.awards span {
			font-size: 45px;
			color: #fff;
			text-shadow: 2px 2px 0 #00a78d;		
		}		
		
/************************************
				FOOTER
 ************************************/
.feedback {
    position:fixed;
    right:-8px;
    bottom:-8px;
    z-index: 100;
}

.footer {
	background:url(../images/footer-bg.png) repeat-x center;
	width: 100%;
	height: 434px;
	margin: 20px auto 0 auto;
	padding: 9px 0 0 0;
}
	.footer-content {
		background:url(../images/footer-content-bg.gif) repeat-x center;
		width: 100%;
		height: 434px;
		margin: 0 auto;	
		margin-top: 40px;
	}
		.footer-wrapper {
			max-width: 1300px;
			margin: 0 auto;
		}	
		.footer-wrapper-smaller {
			margin: 0 auto;
			float: right;
		}

		.footer .footer-left, .footer-left {
			vertical-align:bottom;
			width: 40%;
			float: left;
			margin: 0;
			padding: 0;
			overflow: hidden;
			display: block;
		}		
		.footer-left {
			float: left;
			vertical-align:bottom;
			margin: 0 0 0 100px;
			padding: 0;
			height: 343px;
			background: url(../images/logo-mindfuel.gif) no-repeat bottom center;
		}
				.footer-left img {
					vertical-align: bottom;
					width: 100%;
					height: auto;
					float: left;
					margin: 0;
					padding: 0;
				}
		.footer-right {
			float: right;
			width: 40%;
			margin-top: 50px;
		}
		.footer .footer-right {
			float: right;
			width: 506px;
			margin: 50px 10% 0 0;
		}
			.footer-right img, .footer .footer-right img {
				height: auto;
				padding: 0 30px 0 20px;
			}
				.footer-right img:last-child, .footer .footer-right img:last-child {
					height: auto;
					padding: 0 30px 0 20px;
				}
			.footer-right h2 {
				font-size: 18px;
			}

	.footer .footer-links {
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 14px;
		max-width: 100%;
		padding: 0 40px;
		margin: 25px auto 0 auto;
		font-weight: bold;
	}
		.footer-links {
			font-family: Georgia, "Times New Roman", Times, serif;
			font-size: 14px;
			max-width: 100%;
			padding-left: 120px;
			margin: 25px auto 0 auto;
			font-weight: bold;
		}
			.footer-links-left {
				width: 850px;
				float: left;
			}
			.footer-links-left a {
				font-size: 15px;
				color: #fff;
				margin-right: 16px;
			}
			.footer-links-right {
				font-size: 14px;
				color: #fff;
				float: right;
			}	





/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * 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 receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media screen and (max-width: 1100px) {

	.logo {
		display: none;
	}
	
	.logo-rectangle	{
		background: url(../images/wonderville-logo-rectangle.gif) no-repeat bottom center;
		float: left;
		width:27%;
		height: 101px;
		display: block;
		overflow: hidden;
	}
		.logo-rectangle	img {
			width: 100%;
			height: auto;
		}	
	
	.nav-bottom ul li h3 {
		display: none;
	}

	.nav-bottom ul li h3 {
		display: none;
	}
		.nav-bottom ul {
			width: 55%;
		}

	.nav-social {
		margin: -30px 30px 0 0;
		display: block;
		position:inherit;
	}

	.did-you-know, .asset-title {
		margin-left: 0;
		width: 80%;
	}
		.did-you-know h1, .asset-title h1 {
			font-size: 35px;
		}
		.did-you-know h2 {
			font-size: 15px;
		}
		.did-you-know h3 {
			font-size: 15px;
		}

.content-main { 
	width: 100%;
	padding: 0 2%;
}
	.right-col {
		max-width: 75%;
		float: right;
	}
	
.crumb h2 {
	margin: 0;
}
.asset-title {
	width: 75%;
	margin: 70px 0 0 0;
}
.asset {
	margin: 25px 0 0 0;
	padding: 0;
	float: left;
	width: 70%;
	height: auto;
}
	.asset img {
		width:100%;
		height: auto;
	}
	.asset p {
		line-height: 27px;
		font-size: 16px;
		width: 100%;
		margin-top: 28px;
	}
	.asset iframe#youtube-player {
		height: 400px;
	}
	/*
		ul.assets li {
			box-shadow: 1px 1px 2px #d3d3d3;
			list-style: none;
			display: inline-block;
			background: #ebe9e9 url(../images/btn-go.png) no-repeat bottom right;
			position: relative;
			font-size: 0;
			margin: 0 0 1rem 1%;
			border:1px solid red;
			-webkit-box-flex: 0 0 33%;      
			-moz-box-flex: 0 0 33%;         
			width: 33%;               		
			-webkit-flex: 0 0 33%;          
			-ms-flex: 0 0 33%;              
			flex: 0 0 43%;			  		
		}
	*/
.about-the-science-wrapper {
	margin: 0 -50px 0 0;
	padding: 0;
	width: 30%;
	float: right;
	background: url(../images/bg-atom.gif) no-repeat right top;
}
	.about-the-science {
		margin: 35px 0 0 0;
		width: 75%;
		float: left;
	}
		.about-the-science p{
			 line-height: 20px;
			 font-size: 14px;
		}
		.about-the-science h2 {
			 font-size: 18px;
			 margin: 0;
		}
		.about-the-science a {
			color: #00a78d;
			font-family: 'Intro', arial, sans-serif;		
			font-size: 15px;
		}
			.about-the-science a:hover {
				color: #192324;		
			}

.btn-yeah a span {
	width: 62px;
	height: 31px;
	background: url(../images/btn-yeah.jpg) 0px 0px no-repeat;
	cursor: pointer;
	float: left;
	margin-right: 14px;
}
	.btn-yeah a span:hover {
		background-position: 0 -31px;
	}
.btn-yeah a h3 {
	color: #192324;
	font-size: 18px;
}
	.btn-yeah a h3:hover {
		color: #00a78d;
	}

	.footer-left {
		margin: 0;
	}

	.footer-right, .footer .footer-right {
		margin: 30px 0 0 0;
		width: 50%;
	}
	.footer-right p, .footer .footer-right p {
		font-size: 13px;
		line-height: 1.6;
	}
		.footer-right img, .footer .footer-right img {
			width: 40%;
			height: auto;
		}

	.footer-links {
		padding-left: 0;
	}		
}

@media screen and (max-width: 1000px) {

	.nav-bottom ul {
		width: 60%;
	}
		.nav-bottom ul li {
			margin: 0 1.8% 0 0;
		}
			.nav-social a:first-child {
				margin-right: 10px;
			}

	.title {
		margin: 0;
		width: 100%;
	}
		.title > h1 {
			padding: 30px 0;
			margin: 0;
			width: 100%;
			float: left;
		}
		
	.right-col {
		max-width: 72%;
		float: right;
	}

	ul.assets {
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;     /* NEW - Chrome */
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		padding: 0;
	}
		ul.assets li {
			box-shadow: 1px 1px 2px #d3d3d3;
			list-style: none;
			display: inline-block;
			background: #ebe9e9 url(../images/btn-go.png) no-repeat bottom right;
			position: relative;
			font-size: 0;
			margin: 0 0 1rem 1%;
			-webkit-box-flex: 0 0 32%;      /* OLD - iOS 6-, Safari 3.1-6 */
			-moz-box-flex: 0 0 32%;         /* OLD - Firefox 19- */
			width: 32%;               		/* For old syntax, otherwise collapses. */
			-webkit-flex: 0 0 32%;          /* Chrome */
			-ms-flex: 0 0 32%;              /* IE 10 */
			flex: 0 0 32.5%;			  /* NEW, Spec - Opera 12.1, Firefox 20+ */
		}
		
	/*** ASSET PAGE ***/
	
	.asset iframe#youtube-player {
		padding: 0;
	}	
	/*
.content-main { 
	width: 100%;
	padding: 0 2%;
}
	.right-col {
		max-width: 75%;
		float: right;
	}
	
.crumb h2 {
	margin: 0;
}
.asset-title {
	width: 75%;
	margin: 70px 0 0 0;
}
.asset {
	margin: 25px 0 0 0;
	padding: 0;
	float: left;
	width: 70%;
	height: auto;
}
	.asset img {
		width:100%;
		height: auto;
	}
	.asset p {
		line-height: 27px;
		font-size: 16px;
		width: 100%;
		margin-top: 28px;
	}
	.asset iframe {
		height: 400px;
	}
	
.about-the-science-wrapper {
	margin: 35px -50px 0 0;
	padding: 0;
	width: 30%;
	float: right;
	background: url(../images/bg-atom.gif) no-repeat right top;
}
	.about-the-science {
		margin: 35px 0 0 0;
		width: 75%;
		float: left;
	}
		.about-the-science p{
			 line-height: 20px;
			 font-size: 14px;
		}
		.about-the-science h2 {
			 font-size: 18px;
			 margin: 0;
		}
		.about-the-science a {
			color: #00a78d;
			font-family: 'Intro', arial, sans-serif;		
			font-size: 15px;
		}
			.about-the-science a:hover {
				color: #192324;		
			}

.btn-yeah a span {
	width: 62px;
	height: 31px;
	background: url(../images/btn-yeah.jpg) 0px 0px no-repeat;
	cursor: pointer;
	float: left;
	margin-right: 14px;
}
	.btn-yeah a span:hover {
		background-position: 0 -31px;
	}
.btn-yeah a h3 {
	color: #192324;
	font-size: 18px;
}
	.btn-yeah a h3:hover {
		color: #00a78d;
	}		
*/
	.footer-links, .footer .footer-links {
		padding: 0 5px 0 2%;
	}
		.footer-links a, .footer .footer-links a {
			margin: 0 5px 0 0;
			font-size: 12px;
		}
			.footer-links-left, .footer .footer-links-left {
				width: 75%;
			}
			.footer-links-right {
				font-size: 12px;
				color: #fff;
				float: right;
			}
}

@media screen and (max-width: 900px) {

	.flexsearch-wrapper {
		height: auto;
		width: auto;
		max-width: 35%;
	}
	
	.feature-one h1, .feature-two, .feature-three, .feature-four {
		-webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);	
	}
	
	.feature-one {
		background:url(../images/feature-europa.jpg) no-repeat center center;
		width: 100%;
		height: auto;
		float: left;
		padding: 100px 0 30px 0;
		-webkit-clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 95%);		
	}
		.feature-one-text {
			padding: 0px 20px 100px 20px;
		}
			.feature-one h1 {
				 font-size: 50px;
			}
			.feature-one h2 {
				font-size: 25px;
				line-height: 30px;
				margin-bottom: 10px;
			}
			.feature-one a h3 {
				font-size: 20px;
			}
	
		.feature-two {
			padding: 55px 0 0 0;
			-webkit-clip-path: polygon(0% 0%,100% 5%,100% 100%,0% 95%);
		}
		.feature-two-text {
			padding: 0px 20px 100px 20px;
		}
			.feature-two h1 {
				font-size: 35px;
				line-height: 40px;
				text-shadow: 5px 3px 0 #192324;
				margin: 10px 0 0 0;
				width: 100%;
			}
				.feature-two h1 span {
					color: #fa4c2a;
				}
			.feature-two h2 {
				padding: 0;
				margin: 0;
				font-size: 28px;
				text-shadow: 5px 3px 0 #192324;
			}
			.feature-two h3 {
				text-align: right;
				font-size:20px;
				margin-right:20px;
				text-shadow: 5px 3px 0 #192324;
				line-height: 58px;
			}
			.feature-two h4 {		
				text-align: center;
				margin: 0 auto;
			}
				.feature-two h4 a {
					font-size: 20px;
					text-decoration: underline;
					color: #fff;
				}
			.feature-three {
				padding: 40px 30px;
				-webkit-clip-path: polygon(0% 0%,100% 5%,100% 100%,0% 95%);
			}
				.feature-three ul.assets {
					margin: 0;
				}
					.feature-three ul.assets li h1 {
						font-size: 13px;
						padding: 0 5px;
					}
					.feature-three ul.assets li p {
						font-size: 11px;
						line-height: 17px;
						padding: 2px 5px;
					}
	
		.feature-four {
			background: url(../images/feature-social-mystery.gif) no-repeat center center;
			width: 100%;
			height: auto;
			padding: 130px 20px 80px 20px;
			margin-top:-195px;
			-webkit-clip-path: polygon(0% 19%,100% 11%,100% 100%,0% 90%);
		}
			.mystery-button {
				float: left;
				width: 43%;
				height: auto;
			}
				.mystery-button img {
					float: left;
					width: 100%;
					height: auto;
				}		
			.twitter {
				float: right;
				width: 55%;
				background:url(../images/twitter-bird.gif) no-repeat top right;
				margin: 0;
				padding: 0;
			}
				.twitter h1, .twitter h1 a {
					font-size: 13px;
					color: #192324;
					padding:0;
					margin-top: 80px;	
				}
			.tweet {
				font-family: Georgia, "Times New Roman", Times, serif;
				font-size: 14px;
				padding: 15px 0 2px 3px;
				height: auto;
				float: right;
			}
				.tweet a {
					color: #00a78d;
				}
				.tweet img {
					margin: 10px 3% 0 0;
					float: left;
					display: block;
					width: 10%;
					height: auto;
				}
				.tweet p {
					width: 75%;
					float: left;
					margin: 0;
					padding: 0;
					font-size: 12px;
					line-height: 1.5;
				}
			.tweet-btn {
				float: right;
				margin: 20px 0 0 0;
				width: 40%;
				height: auto;
			}
			.like-btn {
				float: left;
				margin: 20px 0 0 0;
			}					

	.feature-five h1.happens-here {
		font-size: 20px;
		margin: 0px 0 0 280px;
		padding: 35px 0 0 0;
		line-height: 35px;
	}
	.feature-five h1.awards {
		font-size: 25px;
		margin: 0 0 0 -300px;
		padding: 130px 0 0 0;
		line-height: 32px;
	}
	.feature-five h1.awards span {
		font-size: 40px;
	}		
/*			
			.feature-five h1 {
				font-size: 16px;
				color: #fff;
				text-align: center;
				margin: 0 0 0 270px;
				padding: 250px 0 0 0;
				line-height: 35px;
			}
			.feature-five h1 span {
				font-size: 25px;
				color: #ffc425;
				text-shadow: 2px 2px 0 #00a78d;		
			}
*/
		ul.nav-top-login li:first-child {
			margin: 0 5px 0 0;
		}

		.nav-bottom ul {
			margin: 0 0 0 3%;
			width: 70%;
		}
			.nav-bottom ul li {
				margin: 0 1.8% 0 0;
			}
				.nav-bottom ul li a h3 {
					font-size: 18px;
				}
		.nav-social {
			display: none;
		}
	
		.did-you-know, .asset-title {
			margin-left: 0;
			width: 100%;
		}
			.did-you-know h1 {
				font-size: 35px;
			}
			.did-you-know h2 {
				font-size: 15px;
			}
			.did-you-know h3 {
				font-size: 15px;
			}

		.left-col-filter {
			margin: 0 0 0 0;
			padding: 0;
			width: 22%;
			float: left;
		}
			.left-col-filter h1 {
				font-size: 1.5em;
			}
		#frmCategory {
			width: 100%;
		}
		#frmCategory select	{
			width: 100%;
			font-size: 15px;			
		}
		
		.right-col {
			max-width: 75%;
			float: right;
		}
			.right-col h1 {
				line-height: 1;
				font-size: 2.5em;
			}
		
		ul.tabs li a {
			margin: 54px 0 0 69%;
		}
		
		ul.assets li h1 { font-size: .8rem;}
		ul.assets li p { font-size: .7rem; line-height: 1.7; }
	
		.footer-right img, .footer .footer-right img {
			width: 49%;
			height: auto;
		}
		
	.asset {
		margin: 25px auto;
		width: 100%;
		height: auto;
	}
		.asset iframe#youtube-player {
			height: 500px;
		}
	.about-the-science-wrapper {
		display: block;
		margin: 0;
		width: 100%;
		float: left;
	}
	
	.about-the-science {
		margin: 0;
		width: 80%;
		float: left;
	}
		.about-the-science p {
			 line-height: 20px;
			 font-size: 14px;
		}
		.about-the-science h2 {
			 font-size: 18px;
			 margin: 0;
		}
		.about-the-science a {
			color: #00a78d;
			font-family: 'Intro', arial, sans-serif;		
			font-size: 15px;
		}
			.about-the-science a:hover {
				color: #192324;		
			}
	
		.recommendations-left-arrow, .recommendations-right-arrow {
			display: none;
		}
	
		.recommendations {
			width: 90%;
			margin: 0 30px;
		}

}

@media screen and (max-width: 700px) {

	.logo {
		display: none;
	}

	.logo-rectangle	{
		background: url(../images/wonderville-logo-W.gif) no-repeat bottom center;
		float: left;
		width:27%;
		height: 101px;
		display: block;
		overflow: hidden;
	}
		.logo-rectangle	img {
			width: 100%;
			height: auto;
		}	
	.nav-bottom ul {
		margin: 0 0 0 3%;
		width: 100%;
	}
		.nav-bottom ul li {
			margin: 0 1.8% 0 0;
		}	
			.nav-bottom ul li a h3 {
				font-size: 15px;
			}

	.nav-top-iam, .nav-social {
		display: none;
	}
	
	.did-you-know h1, .asset-title h1 {
		font-size: 30px;
	}
	.did-you-know h2 {
		font-size: 15px;
	}
	.did-you-know h3 {
		font-size: 15px;
	}
		
	ul.assets li {
		box-shadow: 1px 1px 2px #d3d3d3;
		list-style: none;
		display: inline-block;
		background: #ebe9e9 url(../images/btn-go.png) no-repeat bottom right;
		position: relative;
		font-size: 0;
		margin: 0 0 1.8rem 2%;
		-webkit-box-flex: 0 0 48%;      /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: 0 0 48%;         /* OLD - Firefox 19- */
		width: 48%;               		/* For old syntax, otherwise collapses. */
		-webkit-flex: 0 0 48%;          /* Chrome */
		-ms-flex: 0 0 48%;              /* IE 10 */
		flex: 0 0 49%;			  		/* NEW, Spec - Opera 12.1, Firefox 20+ */
	}
	
		.twitter {
			float: right;
			width: 55%;
			background: none;
			margin: 0;
			padding: 0;
		}
			.twitter h1, .twitter h1 a {
				font-size: 13px;
				color: #192324;
				padding:0;
				margin: 0;	
			}
		.tweet {
			font-family: Georgia, "Times New Roman", Times, serif;
			font-size: 14px;
			padding: 15px 0 2px 3px;
			height: auto;
			float: right;
		}
			.tweet a {
				color: #00a78d;
			}
			.tweet img {
				margin: 10px 3% 0 0;
				float: left;
				display: block;
				width: 10%;
				height: auto;
			}
			.tweet p {
				width: 75%;
				float: left;
				margin: 0;
				padding: 0;
				font-size: 12px;
				line-height: 1.5;
			}
		.tweet-btn {
			float: left;
		}			
		.like-btn {
			float: left;
			margin: 20px 0 0 0;
			width: 200%;
			height: auto;
		}	

	.feature-five h1.happens-here {
		font-size: 20px;
		margin: 0 auto;
		line-height: 28px;
		padding: 50px 0 0 0;
	}
		.feature-five h1.happens-here span {
			font-size: 25px;
		}
	.feature-five h1.awards {
		font-size: 20px;
		margin: 0 auto;
		padding: 170px 0 0 0;
		line-height: 28px;
	}
	.feature-five h1.awards span {
		font-size: 30px;
	}				
}

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}
