/* CSS - http://publicmedia.psu.edu/
Penn State Public Media
EDIT
*/

/* ........................................................................

	UNIVERSAL RESETS
........................................................................*/

* {
	padding: 0;
	margin: 0;
	outline: 0;
	}

a:active, button {
	outline:none;
	}

img, img:hover {
	border: none;
	}

:focus {
	-moz-outline-style:none;
	}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
	}

/* ........................................................................

	TGW TEST FOR RUNNING BG VID BEHIND ISOTOP ON HOME PAGE
........................................................................*/

video#bgvid {
	position: relative; right: 0; bottom: 0;
	min-width: 100%; min-height: 100%;
	width: auto; height: auto; z-index: -100;
	background-size: cover;
	}

/* ........................................................................

	FONTS
........................................................................*/




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

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


/* ........................................................................

	BODY
........................................................................*/


body {
	margin: 0;
    overflow: auto;
    padding: 0;
	font-size: 100%;
	background-color: #191F25;

/* tests for home page with background behind isotope  -- can probably delete after video bg implementation? */

   /*  background-color: #06142F;
   background-image: url("../images/bg-body.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 100%; */

	/*background: #06142F url(../images/bg-body.jpg) no-repeat top center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	 background-attachment: fixed; */
	}

/* ........................................................................

	FONT FORMATTING
........................................................................*/

h1 {
    color: #FFF;
    font-family: OswaldLight;
    font-size: 3.5em;
    font-weight: normal;
    line-height: 1;
    margin-bottom: 10px;
    padding: 0;
    text-transform: uppercase;
	}

h1 span {
    color: #8EBF39;
	}

h2 {
	color: #FFF;
    font-family: OswaldLight;
    font-size: 2.6em;
    font-weight: normal;
    line-height: 1;
    margin-bottom: 0.5em;
    padding: 1em 0 0 0;
    text-transform: uppercase;
	}

h3 {
    border-bottom: 1px dotted rgba(16, 27, 35, 0.5);
	border-top: 1px dotted rgba(16, 27, 35, 0.5);
	font-family: OswaldLight;
    color: #333333;
    font-size: 1.8em;
    font-weight: normal;
    line-height: 1.2;
    margin: 25px 0 20px 0;
    padding: 15px 0;
	text-transform: uppercase;
	letter-spacing: .025;
	}

.credit-listings h3 {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0.25em;
	font-size: 1.3em;
	}

h6,
h4.h6 {
    color: #CD5204;
    font-size: 1.4em;
    font-weight: normal;
    line-height: 1;
	margin: 0 0 5px 0;
	}

a:link, a:visited {
	text-decoration: none;
	-webkit-transition:color 0.25s ease-in;
	-moz-transition:color 0.25s ease-in;
	-o-transition:color 0.25s ease-in;
	transition:color 0.25s ease-in;
	color:#99C9E3;
	}

a:hover, a.active {
	color: #99CCFF;
	}

/* ........................................................................

	SIDE BAR NAVIGATION -- FIXED WITH FILTERING ON HOME PAGE --
	SHOW/HIDE ON OTHER PAGES WITH DIRECT LINKS TO THEMES
........................................................................*/
.mobileonly{
	display: none;
	}

#menu,
#menu img { /* wrap menu bars and logo for idevice repositioning */
	width: 100%;
	cursor: pointer;
	}
#menu img:hover{
	cursor: pointer;
}
#menu{
	min-height: 70px;
	}
.water-blues-logo {
	position: absolute;
	top: 1.6em;
	right: 1.5em;
	z-index: 9998;
	max-height:100px;
	}
.water-blues-logo a{
	float: left;
	}
.pspm-logo{
	margin:-11px 0 0 0;
	width: auto;
	background: url(../images/pspmlogo-sm.png) no-repeat top center;
	width:115px;
	height:40px;
	}
.wb-logo{
	margin:0 0 0 10px;
	max-width:277px;
	min-width:277px;
	}
#menu.idevice {
	background-color: #191F25;
	display: block;
	height: 50px;
	}

#menu.block-menu { /* for pages with no media components */
	background-color: #191F25;
	display: block;
	height: 70px;
	position: relative;
	z-index:9999;
	}
#menu img {
	z-index:999999;
	}
#menu.block-menu .water-blues-logo {
	top: 1.5em;
	}

#menu.idevice a.menu-bars {
	position: absolute;
	}

.menubutton {
	color:#fff;
	}

.show{
	display: block;
	}

a.menu-bars{
	padding: 0.5em;
	position: fixed;
	top: 1em;
	left: 1em;
	z-index: 9999;
	background-color: #6B9CBA;
	}

#menu img {
	display: block;

	}

a.menu-bars:hover {
	background-color: #CD5204;
	}


#options {
	background-color: #191F25;
	padding:0.75em;
	margin:0;
	min-height:100%;
	position:fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	overflow-y: auto;
    height: 100%;
	width: 15%;
	}
.closed{
	display: none;
	}
/* test push instead of slide over */
.touch #options {
	background-color: #191F25;
	padding:0.75em;
	margin:0;
	min-height:100%;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	z-index: 99999;
	overflow-y: auto;
    height: 100%;
	width: 15%;
	}

#options .close {
	color: #CCC;
	font-size: 1.5em;
	font-family: OswaldLight;
	-webkit-transform:scalex(2.0);
	-moz-transform:scalex(2.0);
	-ms-transform:scalex(2.0);
	-o-transform:scalex(2.0);
	transform:scalex(2.0);
	float: left;
	margin-left: 0.75em;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	}

#options .close:hover {
	color: #FFF;
	}

#nav {
	text-align: center;
	}

#nav ul {
	list-style-type: none;
	list-style-image: none;
	padding: 0;
	position: relative;
	}

#nav li {
	margin: 0 0 0 0;
	text-align: left;
	border-bottom: none;
	padding-bottom: 0;
	font-size: 1.0em;
	font-family: OswaldLight;
	text-transform: uppercase;
	position: relative;
	}

#nav li:last-child {
	margin-right: 0;
	}

#nav a {
  	display: block;
  	padding: 10px 25px;
  	text-decoration: none;
	background: #3E5B76;
  	background: rgba(75,112,146, 0.75);
	}

#nav ul li ul li a {
	background: #2F4456;
	background: rgba(75,112,146, 0.5);
	}

#nav a:hover {
	background-color: #333;
	background-color: rgba(0,0,0,0.75);
  	color: #fff;
	}

#nav a.primary:hover {
	background-color: #CD5204;
	}

#nav li.active  a {
  	background: #4B7092;
  	color: #fff;
	}

#nav > li.open a.selected.primary, #nav > li.open a.primary  {
	background-color: #CD5204;
	color: #fff;
	}

#nav > li.open a.selected  {
	background-color: #333;
	background-color: rgba(0,0,0,0.75);
	}

#nav > li > a {
	background: #2F4456;
	background: rgba(75,112,146, 0.5);
	}

ul.filter {
	margin-bottom: 1em;
	}

a.primary:before {
	content: '✚ ';
	color: #fff;
	}

a.primary.water-home:before {
	content: none;
	}

#nav li.open a.primary:before {
	content: '✚ ';
	color: #fff;
	}

ul.more-options {
	padding-top: 1em;
	}

ul.more-options li {
	list-style-type: none;
	list-style-image: none;
	display: block;
	width: auto;
	font-size: 1.0em;
	font-family: OswaldLight;
	text-transform: uppercase;
	margin-left: 20px;
	margin-right: 20px;
	padding-bottom: 0.5em;
	padding-top: 0;
	margin-top: 0;
	}

#options h2 {
	font-size: 1.4em;
	margin-left: 20px;
	}

ul.festivals li {
	list-style-type: none;
	list-style-image: none; 
	display: block;
	width: auto;
	font-size: 1.1em;
	font-family: OswaldLight;
	line-height: 1.3;
	margin-left: 20px;
	margin-right: 20px;
	padding-bottom: 0.75em;
	padding-top: 0;
	margin-top: 0;
	}
	
ul.more-options li  {
	line-height: 2.0;
	}

ul.more-options li a:link {
	border-bottom: 1px dotted #5984A4;
    color: #fff;
	 height:42px;
	padding-left: 75px;
	display: block;
	line-height: 1.2;
	}

ul.more-options li a:hover {
	border-bottom: 1px dotted #5984A4;
    color: #5984A4;
	}

li.project a {
	background: url("../images/icon-about.png")  no-repeat left center;
	padding-top: 21px;
	}

li.toolkit a {
	background: url("../images/icon-event.png") no-repeat left center;
	padding-top: 21px;
	}

li.buy-dvd a {
	background: url("../images/icon-buy-dvd.png")  no-repeat left center;
	padding-top: 21px;
	}

li.resources a {
	background: url("../images/icon-resources.png")  no-repeat left center;
	padding-top: 21px;
	}
li.schedule a {
	background: url("../images/icon-schedule.png")  no-repeat left center;
	padding-top: 21px;
	}

li.rfp a {
	background: url("../images/icon-rfp.png")  no-repeat left center;
	padding-top: 21px;
	}
	
li.project a,
li.toolkit a,
li.buy-dvd a,
li.resources a {

	}

#nav .social-media a {
	background: transparent;
	}

ul.social-media {
	padding-top: 0.75em;
	padding-left: 0.75em;
	padding-bottom: 2em;
	display: inline-block;
	text-align: center;
	}

 ul.social-media li {
 	padding: 0.25em 0;
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
	-webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	display: inline-block;
	width: 19%;
	list-style-type: none;
	list-style-image: none;
	}

ul.social-media li:hover {
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	}

 ul.social-media img {
	width: 80%;
	height: auto;
	position: relative;
	}
	
	
/* ........................................................................

	HOME - Twitter Feed
........................................................................*/
h2.latest-feed {
	margin-left: 5%;
	font-size: 1.4em;
	margin-top: 1em;
	}
	
.twitter {
	 font-family: 'Lustria';
    font-weight: 200;
	text-transform: none;
	color: #fff;
	font-size: 1.0em;
	width: 90%;
	margin-left: 5%;
	margin-bottom: 1em;
	}

/* ........................................................................

	HOME - SKIP TRAILER AND IPAD FIXES
........................................................................*/

#trailer-skip {
	display:none;
	position: absolute;
	bottom: 5em;
	left: 10%;
	z-index: 999999;
	text-align: center;
	width: 80%;
	}

#trailer-skip .btn {
	font-size: 1.5em;
	display: inline-block;
	}


.video-label{
	display: none;
}

#title-overlay {
		display: none;
		z-index: 1;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -64px;
  margin-left: -64px;
}

/* ........................................................................

	HOME - MAJORA INTRO
........................................................................*/

#overlay{
	height:100%;
	width:100%;
	position:fixed;
	left:0;
	top:0;
	z-index:999999 !important;
	background-color:#000;
	display: block;
	}
#title{
	background: #000;
	}
#big-video-wrap{
	max-width:100%;
	max-height:100%;
	overflow: hidden;
	}
.vjs-tech{
	height: auto !important;
	}
#big-video-vid{
	max-width:100%;
	position: relative;
	}
#majora-anim {
background: #3e5b76;

background: -moz-radial-gradient(center, ellipse cover,  #3e5b76 0%, #191f25 100%);

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#3e5b76), color-stop(100%,#191f25));

background: -webkit-radial-gradient(center, ellipse cover,  #3e5b76 0%,#191f25 100%);

background: -o-radial-gradient(center, ellipse cover,  #3e5b76 0%,#191f25 100%);

background: -ms-radial-gradient(center, ellipse cover,  #3e5b76 0%,#191f25 100%);

background: radial-gradient(ellipse at center,  #3e5b76 0%,#191f25 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e5b76', endColorstr='#191f25',GradientType=1 );



filter: alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
}

#intro {
	padding-top: 4em;

	}

.majora-intro {
/*	border-bottom: 1em solid #7894AD; */
	background-color: #fff;
	}

#intro p {
	color: #FFF;
	margin-bottom: 0;
	text-transform: none;
	font-size: 2.1em;
	margin: 0 0 0 3%;
	line-height: 1.3;
	padding-top: 0.75em;
	font-family: OswaldLight;
	}

#intro p:first-of-type {
	font-size: 2.6em;
	}

#intro {
/*	visibility: hidden; */
/* not hidden b/c bringin up opacity */

}
.pspm-logo-lg{
	background: url(../images/pspmlogo-lg.png) no-repeat top center;
	background-size: 230px 80px;
	width: 230px;
	height: 80px;
	margin: 0 0 0 3%;
	position: absolute;
	top:10px;
	}
#majora {
	/*	visibility: hidden; */
/* not hidden b/c bringin up opacity */
	float: right;
	margin-left: 1em;
	position: relative;
	bottom: 0;
	}

#majora img {
	display: block; /* remove gap below image caused by inline! */

	}

.slideUp{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;

	animation-duration: 0.75s;
	-webkit-animation-duration: 0.75s;

	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;

	visibility: visible !important;
}

@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}

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

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}

	100% {
		-webkit-transform: translateY(0%);
	}
}

/* ........................................................................

	HOME - STATIC LANDING PAGE OPTOIN
........................................................................*/

.static #majora-anim {
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
	display: table;
	padding-top: 4em;
	}

.static #majora {
	/*	visibility: hidden; */
/* not hidden b/c bringin up opacity */
	float: right;
	margin-left: 1em;
	width: 33.33%;
	display: table-cell;
	vertical-align: bottom;
	}


.static #majora img {
	width: 100%;
	height: auto;
	}

.static #intro p {
	font-size: 1.5em;
	}

.static #intro p:first-of-type {
	font-size: 2.2em;
	padding-top: 0.5em;
	}

.static img.award-laurels {
	margin-left: 3%;
	}

/* ........................................................................

	HOME - MAJORA INTRO TEXT SLIDE
........................................................................*/

.slideRight{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-duration: 1.0s;
	-webkit-animation-duration: 1.0s;
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	visibility: visible !important;
	}

@keyframes slideRight {
	0% {
		transform: translateX(-200%);
	}

	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideRight {
	0% {
		-webkit-transform: translateX(-200%);
	}

	100% {
		-webkit-transform: translateX(0%);
	}

	/*
@keyframes slideRight {
	0% {
		transform: translateX(-200%) matrix(0, 0, 0, 0, 0, 0);

	}

	100% {
		transform: translateX(0%) matrix(1, -0.1, 0, 1, 0, 0);

	}
}

@-webkit-keyframes slideRight {
	0% {
		-webkit-transform: translateX(-200%) matrix(0, 0, 0, 0, 0, 0);

	}

	100% {
		-webkit-transform: translateX(0%) matrix(1, -0.1, 0, 1, 0, 0);
	}
	*/
}

/* ........................................................................

	FADE IN
........................................................................*/

.fadeIn {
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;

	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-duration: 2.0s;
	-webkit-animation-duration: 2.0s;
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;

	visibility: visible !important;
}

@keyframes fadeIn {
	0% {
		transform: scale(1.0);
		opacity: 0.3;
	}
	100% {
		transform: scale(1.0);
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(1.0);
		opacity: 0.3;
	}
	100% {
		-webkit-transform: scale(1.0);
		opacity: 1;
	}
}


/* ........................................................................

	HOME - RESPONSIVE MASONRY
........................................................................*/

#index {
	background-color: #191F25;
	}

#index .selections {
	padding: 0.25em 0;
	}

.example {
	margin-left: 2.5%;
	margin-right: 2.5%;
	width: 95%;
	float: left;
	}

#index #options {
	position: relative;
	float: left;
	padding: 0;
	width: 15%;
	}

#index .example {
	width: 85%;
	margin-left: 0;
	margin-right: 0;
	}

.example figure {
	float: left;
	position: relative;
	width: 20%;
	height: 159px;
	margin: 0 2px 4px;
	overflow: hidden;
	text-align: center;
	background-color: #191F25;
	}

figure.audio {
	background-size: 150% 150%;
	}

figure.audio:hover{
    background-size: 100% 100%;
	}

.example figure a {
	display: block; /* fill entire block with a so that safari & chrome can position the caption */
	width: 100%;
	height: 100%;
	display: table;
	}

.example figure figcaption {
	font-family: OswaldLight;
	font-size: 2.1em;
	text-transform: uppercase;
	color: #fff;
	position: relative;
	z-index: 9999;
	line-height: 1.2;
	margin: 0 auto;
	text-shadow: 1px 3px 2px rgba(0,0,0,0.6);
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	padding: 2.5%;
	}

.example figure.audio figcaption {
	font-size: 1.6em;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
	}

.example figure figcaption span {
	display: block;
	font-size: 0.70em;
	text-transform: none;
	filter: alpha(opacity=75);
	-moz-opacity:0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
	}

.example .item-w2 {
	width: 40%;
	}

.example .item-h2 {
	height: 322px;
	}

.example .item-h3 {
	height: 485px;
	}

.example .item img {
	width: 100%;
	top: -10%;
	}

figure img {
	min-height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	}

.example .item-h2 img {
	height: 322px;
	width: auto;
	left: -25%;
	top: 0;
	}

.example .item-h3 img {
	height: 100%;
	width: auto;
	left: -6%;
	top: 0;
	}

figure img {
	filter: alpha(opacity=75);
	-moz-opacity:0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	}

figure.audio img {
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	}

figure:hover img {
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
    transform: scale(1.05);
	}

.isotope {
	min-height: 1000px;
	}

.isotope .isotope-item {
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	transition-duration: 0.8s;
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	transition-property: transform, opacity;
	}


/* ........................................................................

	MEDIA -- VIDEO
........................................................................*/


.video-wrap {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	position: relative;
	text-align: center;
	z-index: 1;
	}

.video-wrap iframe,
.video-wrap object,
.video-wrap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	}


.video-label { /* sorry, video-label gets used for video and audio content! */
	position: absolute;
	top: 15em;
	width: 80%;
	left: 10%;
	padding: 2em 0;
	z-index: 9999;
	text-align: center;
	background-color: #191F25;
	background-color: rgba(25,31,37,0.75);
	}


.audio-wrap .video-label {
	top: 65%;
	}

/*
.video-label {
	position: absolute;
	top: 15em;
	width: 70%;
	left: 15%;
	border-top: double #fff;
	border-bottom: double #fff;
	padding: 2em 0;
	z-index: 9999;
	text-align: center;
background-color: rgba(25,31,37,0.75);
	}
*/

.touch .video-label {
	top: 5em;
	}

.touch .audio-wrap .video-label {
	top: 70%;
	padding: 0.5em 0;
	}

.audio-wrap p.signposting {
	padding-top: 0.25em;
	margin-bottom: 0;
	padding-bottom: 0;
	margin-top: 0;
	}

.audio-wrap .video-actions p.btn {
	margin-top: 0;
	}

.video-label h1 {
	text-shadow: 1px 3px 2px rgba(0,0,0,0.6);
	}

.main-video h1 {
	color: #FFF;
    font-family: OswaldLight;
    font-size: 3.75em;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 10px;
    padding: 0;
    text-transform: uppercase;
	letter-spacing: 0.0375em;
	}

p.signposting {
	 text-transform: uppercase;
	font-family: OswaldLight;
	display: inline-block;
	padding-top: 0.375em;
	margin-top: 0.25em;
	font-size: 2.5em;
	color: #86C1DC;
	background-color: #191F25;
	background-color: rgba(0,0,0,0.375);
	padding: 0.5em 1em 0.25em 1em;
	line-height: 1.2;
	clear: before;
	margin-bottom: 0.25em;
	}


p.signposting span {
	 font-family: 'Lustria';
    font-weight: 200;
	text-transform: none;
	font-size: 50%;
	display: block;
	}

.video-actions .btn,
#trailer-skip .btn {
	margin-right: 1em;
	margin-left: 1em;
	}

.video-actions p.btn {
	font-size: 1.2em;
	}
.btn.blue-btn {
	background-color: #6B9CBA;
	}

.btn.blue-btn:hover {
	background-color: #547B94;
	}

/* ........................................................................

	IN PAGE NAV
........................................................................*/
#scroll-nav.sticky {
	position: fixed;
	top: 0;
	left: 0;
	background-color: #32475B;
	width: 100%;
	z-index:99;
	}

.overview #scroll-nav.sticky ul {
	margin-top: 1em;
	position: relative;
	}

#scroll-nav.sticky #scroll-nav-wrap {
	margin-bottom: 0;
	}

#scroll-nav-wrap {
	margin-bottom: 2em;
	}

#scroll-nav-wrap ul li {
	display: inline-block;
	margin-left: 1.0em;
	margin-right: 0;
	border: 1px solid #e5e5e5;
	list-style-type: none;
	list-style-image: none;
	background: #3E5B76;
	padding:10px 10px 5px 10px;
	font-family: OswaldLight;
	font-weight: normal;
	font-size: 1.3em;
	-webkit-transition:background-color 0.25s ease-in;
	-moz-transition:background-color 0.25s ease-in;
	-o-transition:background-color 0.25s ease-in;
	transition:background-color 0.25s ease-in;
	}


#scroll-nav-wrap ul {
	display: inline-block;
	left: 3em;
	}

#scroll-nav-wrap ul li:hover {
	background: #000;
	}

#scroll-nav-wrap ul li:hover a {
	color: #fff;
	}
	
/* ........................................................................

	MEDIA -- AUDIO
........................................................................*/

.audio-wrap {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background-color: #FFF;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
	}

.audio-wrap h1 {
	padding-top: 10%;
	text-align: left;
	}

.radio-player-wrap {
	margin: 0 auto;
	text-align: center;
	padding: 1.5em 3em;
	border: 10px solid #CDE4F1;
	border: 10px solid rgba(153,201,227,0.5);
	background-color: #C5DE9F;
	background-color: rgba(141,191,57,0.25);
	}

.production-credit {
	font-style: italic;
	}

.production-description {
	text-align: left;
	margin-top: 1em;
	margin-bottom: 3em;
	line-height: 1.3;
	}

.audio-wrap {
	padding-bottom: 56.25%;
	}

.audio-content {
	position: absolute;
	text-align: center;
	margin: 0 auto;
	padding-left: 15%;
	padding-right: 15%;
	width: 70%;
	height: 100%;
	display: block;
	background: #fff;
	background: rgba(255,255,255,0.9);
	top: 0;
	left: 0;
	}

.audio-content.content {
    margin: 0;
	}

/* ........................................................................

	MEDIA -- INDIVIDUAL VIDEO NAV -- SCROLLING NAV BENEATH VIDEOS
........................................................................*/

.video-nav-wrap {
    clear: both;
    display: inline-block;
    text-align: center;
    width: 100%;
	background-color: #5984A4;
	}

.lemmon-instagram ul {
	margin-left: 0;
	margin-top: 0;
	}

.lemmon-instagram ul li {
	float: left;
	display: block;
	height: auto;
	margin-left: 10px;
	margin-bottom: 0;
	position: relative;
	 -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
    box-sizing: border-box;
	border: 1px solid rgba(0, 0, 0, 0.25);

	}
.lemmon-instagram ul li a{
	max-height:158px;
	overflow: hidden;
	display: block;
}
.lemmon-instagram ul li.more-instagram {
	width: 280px;
	margin-right: 10px;
	}

.lemmon-instagram img {
	height: auto;
	width: 280px;
	display: block;
	}

.photo-slider ul li:before,
.lemmon-instagram ul li:before {
	content: none;
	left: 0;
	top: 0;
	}

.lemmon-instagram {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	height: auto;
	width:  100%;
	display: block;
	white-space: nowrap;
	text-align: center;
	-webkit-overflow-scrolling: touch;
	background-color: #2C4151;
	background-color: rgba(0,0,0,0.5);
	padding-top: 10px;
	padding-bottom: 10px;
	min-height: 0%;
	}

.lemmon-instagram img {
	filter: alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	}

.lemmon-instagram .current img,
.lemmon-instagram ul li:hover img {
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
	}

.lemmon-instagram li.current {
	border: 1px solid #79A63F;
	border: 1px solid rgba(141, 191, 59, 0.8);
	}

.lemmon-instagram p {
	position: absolute;
	bottom: 0;
	background-color: #000;
	background-color: rgba(0,0,0,0.5);
	text-align: center;
	padding: 0.5em 5%;
	width: 90%;
	color: #86C1DC;
    font-family: OswaldLight;
	font-size: 1.3em;
	letter-spacing: 0.025em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-overflow: ellipsis-word;
	}

.lemmon-instagram .current p,
.lemmon-instagram li:hover p {
	color: #FFF;
	}


.preview-data {
	position: absolute;
    top: 0;
    left: 0;
    color: #fff;
	height: 138px;
    width: 260px;
	padding: 10px;
   	filter: alpha(opacity=0);
	-moz-opacity:0.0;
	-khtml-opacity: 0.0;
	 opacity: 0.0;
    text-align: center;
    transition: transform 0.4s, opacity 0.4s;
	
	background: rgba(0,0,0,0.25);
	overflow: hidden;
	}
/*
.lemmon-instagram a:hover .preview-data {
	background: rgba(0,0,0,0.9);
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	 opacity: 1.0;
	
	 
	}

.lemmon-instagram .preview-data p {
	font-size: 0.8em;
	font-weight: 400;
	position: relative;
	width: auto;
	 padding: 0;
	 background-color: transparent;
	 text-align: left;
	 font-family: Open Sans;
	 white-space: normal;
	 text-overflow: ellipsis;
	text-overflow: ellipsis-word;
	}
	
*/


.lemmon-wrap {
	position: relative;
	}

 .lemmon-controls {
	text-align: center;
	margin: 1em 0;
	}

.lemmon-controls a:link,
.lemmon-controls a:visited {
	color: #fff;
	}

 .lemmon-controls ul  li {
    display: inline-block;
    margin: 0 1em 0 0;
	color: #fff;
	font-family: OswaldLight;
    font-size: 1.4em;
	text-transform: uppercase;
	}

.lemmon-controls .lemmon-next-page a,
.lemmon-controls .lemmon-prev-page a {
	border-radius: 5px;
    display: inline-block;
    transition: all 0.35s ease-in-out 0s;
	}

/* NEXT PREVIOUS CONTROLS WERE HIDDEN AFTER SLIDER IMPLEMENTATION */

.lemmon-controls .lemmon-next-page a {
	background: #6B9CBA url(../images/ico-pagination-arrow-next.png) no-repeat 1em center;
	width: 10em;
	height: 2em;
	line-height: 2.2em;
	}

.lemmon-controls .lemmon-next-page a:hover {
	text-decoration: none;
	background: #CD5204 url(../images/ico-pagination-arrow-next.png) no-repeat 8em center;
	color: #fff;
	}

.lemmon-controls .lemmon-prev-page a {
	background: #6B9CBA url(../images/ico-pagination-arrow-previous.png) no-repeat 8em center;
	width: 10em;
	height: 2em;
	line-height: 2.2em;
	}

.lemmon-controls .lemmon-prev-page a:hover {
	text-decoration: none;
	background: #CD5204 url(../images/ico-pagination-arrow-previous.png) no-repeat 1em center;
	color: #fff;
	}

.lemmon-controls .down a {
	background: url(../images/ico-pagination-arrow-down.png) no-repeat 0 center;
	height: 2em;
	line-height: 2.2em;
	padding-left: 1em;
	}

.lemmon-controls .down a:hover {
	color: #A8E444;
	}

#main-section .slides li a:link,
#main-section .slides li a:visited,
#main-section .lemmon-instagram li a:link,
#main-section .lemmon-instagram li a:visited {
    border-bottom: none;
	}
	
/* ........................................................................

	TOOLTIP
........................................................................*/


/* On Hover Info */
 .tooltip{display:inline;position:relative}
 .tooltip:hover{text-decoration:none}
 .tooltip:hover:after{
   background:#111;
   background:rgba(0,0,0,.8);
   border-radius:5px;
   color:#fff;
   content:attr(title);
   display:block;
   left:35%;
   padding:5px 15px;
   position:absolute;
   bottom: 50px;
   white-space:nowrap;
   z-index:98
  }
 
 .tooltip.tooltip-right:hover:after{
   left:-85%;
  }
  
  .tooltip:hover:before{
    border:solid;
    border-color:#111 transparent;
    border-width:6px 6px 0 6px;
    bottom:44px;
    content:"";
    display:block;
    left:48%;
    position:absolute;
    z-index:99
   }
   
/* ........................................................................

	MEDIA PAGES - RESOURCE FORMATTING
........................................................................*/

#individual-component .selections {
	background: #ffffff;
	background: -moz-radial-gradient(center, ellipse cover,  #ffffff 50%, #86c1dc 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(50%,#ffffff), color-stop(100%,#86c1dc));
	background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 50%,#86c1dc 100%);
	background: -o-radial-gradient(center, ellipse cover,  #ffffff 50%,#86c1dc 100%);
	background: -ms-radial-gradient(center, ellipse cover,  #ffffff 250%,#86c1dc 100%);
	background: radial-gradient(ellipse at center,  #ffffff 50%,#86c1dc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#86c1dc',GradientType=1 );
	}


/* ........................................................................

	NON-MEDIA PAGES
	overview = about
........................................................................*/

#content-zone img {
	width: 100%;
	height: auto;
	}

.overview .press-contact p {
	line-height: 1.3;
	font-size: 1.1em;
	}

.overview-text {
    background: url("../images/bg-reeds-darker.jpg") no-repeat fixed center bottom / cover rgba(0, 0, 0, 0);
   }

.overview-text h1 {
    background-color: #fff;
	background-color: rgba(255, 255, 255, 0.9);
    display: inline-block;
    margin-bottom: 2px;
    padding: 10px 10px 5px 10px;
    color: #99C9E3;
    font-family: OswaldLight;
    font-size: 3.5em;
    font-weight: normal;
    line-height: 1;
    text-transform: uppercase;
	margin-bottom: 0.25em;
	}

.static h1 {
    display: inline-block;
    margin-bottom: 2px;
    color: #99C9E3;
    font-family: OswaldLight;
    font-size: 3.5em;
    font-weight: normal;
    line-height: 1;
    text-transform: uppercase;
	margin-left: 3%;
	}

.overview .overview-text p {
	background-color: #fff;
	background-color: rgba(255, 255, 255, 0.9);
    color: #999999;
    display: inline-block;
    font-family: OswaldLight;
    font-size: 1.9em;
    line-height: 1.3;
    margin-bottom: 0.5em;
    margin-top: 0;
    padding: 0.5em;
	}

p.pdf-download {
	display: block;
	min-height: 48px;
	background: url(../images/pdf-icon.png) no-repeat;
	margin-left: 10px;
	padding-left: 60px;	
	}

p.pdf-download a:link {
	font-size: 0.9em;
	position: relative;
	top: 10px;
	line-height: 1.0;
	}


/* ........................................................................

	CONTENT
........................................................................*/

.content {
	margin: 3em 25%;
	}

.content h1,
.content h2 {
	color: #101B23;
	color: rgba(16,27,35,0.5);
	}

.content p {
	color: #101B23;
    font-family: 'Lustria';
    font-weight: normal;
	font-size: 1.3em;
    line-height: 1.8;
    margin-bottom: 0.85em;
	}

.content a:link, .content a:visited,
footer a:link, footer a:visited {
	color: #5984A4;
	border-bottom: 1px dotted #5984A4;
	}

.content a:hover, .content a.active
footer a:hover, footer a.active {
	color: #3E5D75;
	border-bottom: 1px dotted #3E5D75;
	}

ul a:link, ul a:visited, ul a:hover, ul a.active {
	border-bottom: none;
	}

.btn,
input [type="submit"] {
	display: inline-block;
	background-color: #8EBF39;
	-webkit-transition:background-color 0.25s ease-in;
	-moz-transition:background-color 0.25s ease-in;
	-o-transition:background-color 0.25s ease-in;
	transition:background-color 0.25s ease-in;
	color: #fff;
	text-align: center;
	margin-top: 1em;
	border-radius: 3px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1), 0 -10px 20px -12px rgba(0,0,0,0.5) inset;
	}
.btn a{
	padding: 0.5em 1.0em;
	display: block;
	}
.btn, .content p.btn {
	color: #fff;
	font-family: Open Sans;
	font-size: 0.8em;
	text-transform: uppercase;
	}

ul + p.btn {
	margin-top: 0;
	}

.overview .btn,
.event .content p.btn {
	font-size: 1.2em;
	}

.btn a:link, .btn a:visited,
.content .btn a:link, .content .btn a:visited {
	color: #fff;
	text-decoration: none;
	border-bottom: none;
	}

.half .btn {
	display: inline-block;
	}

a.resource-wrap:hover .btn, .btn:hover {
	background-color: #739C2F;
	cursor: pointer;
	}

.btn:hover a, a.btn:hover {
	color: #fff;
	}

#team {
	text-align: center;
	}

#team .quarter-cols {
	text-align: left;
	}

.overview p.intro-p {
	font-size: 1.5em;
	text-align: left;
	}

#content-zone .web-banners img {
	width: auto;
	height: auto;
	}

/* ........................................................................

	OVERVIEW -- CONTENT FOR ABOUT PAGE - PICKED UP STYLES FROM OLD WATER BLUES SITE
........................................................................*/

.overview {
	font-family: Lustria;
	}

.overview .content {
	margin: 3em 0;
	width: 1140px;
	margin: 0 auto;
	}

.section {
    margin: 0 auto;
    padding: 60px 3%;
    width: 94%;
	}
.section-head {
    margin-bottom: 20px;
    text-align: left;
	}

.section-head h2 {
    color: #666666;
    font-family: OswaldLight;
    font-weight: normal;
    line-height: 1.1;
    margin-bottom: 0;
    margin-right: 30px;
    margin-top: 60px;
    padding: 0;
    text-transform: uppercase;
	}

.dark h2 {
    color: #DEDEDE;
	}

.section-head p {
    font-size: 2.1em;
    margin-left: 2%;
    padding: 0;
    text-transform: uppercase;
    color: #999999;
    display: inline-block;
    font-family: OswaldLight;
    line-height: 1.2;
    margin-bottom: 0;
    margin-top: 0;
    width: 75%;
	}

.overview ul, .event ul, .resource-list ul, ul.scrollto-list {
    font-size: 1.1em;
    font-weight: 100;
    list-style-type: square;
    margin: 10px 20px 0 15px;
    padding-bottom: 0;
	}

.resource-list.resource-images ul {
	list-style-type: none;
	padding-left: 1.5em;
	font-size:  1.0em;
	}

.resource-list.resource-images span {
	display: block;
	text-transform: uppercase;
	font-family: OswaldLight;
    font-weight: normal;
	color: #101B23;
	color: rgba(16,27,35,0.5);
	font-size: 1.1em;
	}

.resource-list.resource-images a {
	border-bottom: none;
	}

.resource-list.resource-images li {
	border-top: 1px dotted #5984A4;
	padding-top: 1.5em;
	}

.resource-list div {
	height: 150px;
	width: 150px;
	float: left;
	overflow: hidden;
	margin-right: 1em;
	border: 1px solid #E5E5E5;
	border-radius: 20px 0 0;
	top: -0.5em;
	position: relative;
	}

#content-zone .resource-list img {
	height: 100%;
	width: auto;
	position: relative;
	left: -25%;
		}

ul.scrollto-list {
	list-style-type: none;
	font-size: 1.2em;
	}

ul.scrollto-list li {
	float: left;
	margin: 5px;
	}

.event ul, .resource-list ul {
	font-family: Lustria;
	margin-left: 3em;
	width: 75%;
	border-left: 1px dotted rgba(16, 27, 35, 0.5);
	padding-left: 3em;
	margin-bottom: 3em;
	}

.event .half ul {
	border-left:  none;
	padding-left: 0;
	}

.event ul li ul {
	border-left: none;
	padding-left: 1.5em;
	font-family: OswaldLight;
	}

.resource-list li a {
	font-size: 1.2em;
	margin-bottom: 0.25em;
	display: block;
	}

.overview li, .event li, .resource-list li {
	 line-height: 1.3;
    margin-bottom: 10px;
    padding-bottom: 10px;
	}

.overview a:link {
  border-bottom: none;
	}

.dark p, .dark li {
	color: #fff;
	}

.dark li {
    border-bottom: 1px dotted #000000;
	}

.dark a:link, .dark a:visited {
    color: #99C9E3;
	}

.twitter-handle:before {
    content: url("../images/icon-twitter.png");
    padding-top: 5px;
	}

.dark a.twitter-handle:link, .dark a.twitter-handle:visited {
    color: #FFFFFF;
    display: inline-block;
    font-size: 0.9em;
    margin-top: 5px;
	}

h5,
h3.h5 {
    color: #FFFFFF;
    font-size: 1.3em;
    font-weight: normal;
    line-height: 1.2;
    margin-bottom: 0;
    padding: 5px 10px;
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.85);
	font-family: 'Lustria';
	text-transform: capitalize;
	}

.overview p {
	font-size: 1.0em;
	}

#advisors p {
    margin: 0 0 10px 10px;
    padding: 0;
    text-shadow: 1px 1px 2px #333333;
	}

#team  {
    background: url("../images/bg-team-bios.jpg") no-repeat scroll center top #ABD5EB;
	}

#team img {
    background-color: rgba(0, 0, 0, 0.075);
    margin-bottom: 0;
	display: block;
	}

.bio {
    background-color: #C8E3F1;
	background-color: rgba(255, 255, 255, 0.35);
    padding: 4%;
    transition: background-color 250ms ease-in 0s;
	}

p.contact {
    background-color: #D5EAF5;
	background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0 0 20px;
    margin-top: 1px;
    padding: 4%;
    line-height: 1.3;
	margin-right: 5%;
	}

.bio p, p.contact {
    line-height: 1.3;
	}

.column {
	position: relative;
	float: left;
	}

.single {
	width: 100%;
	padding-bottom: 30px;
	}

.half {
	width: 47%;
	font-size: 90%;
		margin-left: 1.5%;
	margin-right: 1.5%;

	}

.two-thirds {
	width: 65.667%;
	}

.one-third {
	width: 31.333%;
	}

.quarter-cols {
	width: 22%;
	vertical-align: top;
	padding: 1%;
	margin-top: 10px;
	background-color: transparent;
	margin-right: 0.5%;
	display: inline-block;
	-moz-border-radius: 20px 0 0 0;
	-webkit-border-radius: 20px 0 0 0;
	border-radius: 20px 0 0 0;
	-webkit-transition:background-color 300ms ease-in;
	-moz-transition:background-color 300ms ease-in;
	-o-transition:background-color 300ms ease-in;
	transition:background-color 300ms ease-in;
	}

.quarter-cols a:nth-of-type(4n) div {
	margin-right: 0;
	}

.quarter-cols img {
	width: 100%;
	height: auto;
	-moz-border-radius: 20px 0 0 0;
	-webkit-border-radius: 20px 0 0 0;
	border-radius: 20px 0 0 0;
	}

.dark {
	background: rgb(91,72,74);
	background: -moz-radial-gradient(center, ellipse cover,  rgba(91,72,74,1) 25%, rgba(51,52,70,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(25%,rgba(91,72,74,1)), color-stop(100%,rgba(51,52,70,1)));
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(91,72,74,1) 25%,rgba(51,52,70,1) 100%);
	background: -o-radial-gradient(center, ellipse cover,  rgba(91,72,74,1) 25%,rgba(51,52,70,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover,  rgba(91,72,74,1) 25%,rgba(51,52,70,1) 100%);
	background: radial-gradient(center, ellipse cover,  rgba(91,72,74,1) 25%,rgba(51,52,70,1) 100%);
	}

#collaborators.dark {
	background: #333446 url(../images/bg-hand.jpg) no-repeat bottom;
	}

#collaborators.dark {
	background: #333446 url(../images/bg-hand.jpg) no-repeat bottom;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}

.dark a.twitter-handle:link, .dark a.twitter-handle:visited {
	color: #fff;
	font-size: 0.9em;
	display: inline-block;
	margin-top: 5px;
	}

.twitter-handle:before {
	content: url(../images/icon-twitter-sm.png);
	padding-top: 5px;
	}

/* ........................................................................

	DVD ORDER
........................................................................*/

#content-zone img.wbgs-dvd {
	width: 90%;
	height: auto;
}

#content-zone img.wbgs-dvd.mobileonly {
	width: 33%;
	height: auto;
	float: left;
	margin-right: 1em;
}

.overview p.dvd-price {
	font-size: 1.7em;
}

.overview p.dvd-price span {
	color: #CD5204;
}

.overview p.dvd-order {
	font-size: 1.5em;
}

/* ........................................................................

	Contact page
........................................................................*/

#contact .section {
	margin: 0 auto;
	padding: 60px 3% 0;
	width: 94%;
	}

#contact h1{
	color: #666666;
	}
#contact h2{
	border-bottom: 1px dotted rgba(16, 27, 35, 0.5);
	width:85%;
	}

#contact p{
	margin-bottom:0;
	}
/* ........................................................................

	Schedule
........................................................................*/
.schedule .one-third{
	background: #fff;
	background: rgba(255,255,255,0.8);
	padding:2%;
	border:1px solid #ccc;
	float:left;
	margin:0 2% 0 0;
	}
.schedule .one-third h3{
	border-top:none;
	margin: 0 0 0.5em;
	font-family: OswaldLight;
	color: #333333;
	}
.schedule .one-third p{
	margin-bottom:0.5em;
	}
.schedule .one-third p.date{
	font-size:1em;
	}
.schedule .one-third p.station{
	color: #5984A4;
	font-size:1.2em;
	}
.schedule h2,
.schedule .one-third:last-child{
	clear:both;
	}

/* ........................................................................

	FOOTER
........................................................................*/

footer #support {
	background: #fff;
	background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 25%, rgba(230,230,230,1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(25%,rgba(255,255,255,1)), color-stop(100%,rgba(230,230,230,1)));
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 25%,rgba(230,230,230,1) 100%);
	background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 25%,rgba(230,230,230,1) 100%);
	background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 25%,rgba(230,230,230,1) 100%);
	background: radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 25%,rgba(230,230,230,1) 100%);
	display: block;
	text-align: center;
	padding: 1em 2.5% 1em 2.5%;
    width: 95%;
    clear:both;
	}

#support h2 {
	margin-top: 60px;
	}

footer #pennstate{
	background-color: #191F25;
	display: block;
	text-align: center;
	padding: 1em 2.5% 0 2.5%;
    width: 95%;
	}
footer #pennstate ul li {
	background:rgba(255,255,255,0.05);
	padding:10px;
	font-family: OswaldLight;
	font-weight: normal;
	}
footer p {
	font-size: 1.0em;
	}
footer h2{
	color: #666666;
	font-family: OswaldLight;
	}
footer h3{
	border-bottom: none;
	border-top: 1px dotted rgba(16, 27, 35, 0.5);
	font-family: OswaldLight;
	color: #999;
	font-size: 1.4em;
	font-weight: normal;
	line-height: 1.2;
	margin: 25px 0 20px 0;
	padding: 15px 0;
	text-transform: uppercase;
	letter-spacing: .025;
	}
footer ul {
	margin-bottom: 1.5em;
	}

footer ul li {
	display: inline-block;
	margin-right: 2em;
	margin-top: 1em;
	border: 1px solid #e5e5e5;
	list-style-type: none;
	list-style-image: none;
	}
	
footer ul.additional-top li{
	padding:0 2%;
	}
footer ul li:last-of-type {
	margin-right: 0;
	}
.footerlist li{
	border:none;
	margin-right: 1em;
}
.pspm {
	padding: 2em 0 0em 0;
	font-family: 'OswaldBook';
	}
.pspm img{
	margin:0 0 0.5em;
	}
.pspm a:link {
	border-bottom: none;
	}

.pspm p{
	font-size:1.2em;
	}
p.copyright {
	font-family: 'OswaldBook';
	padding-bottom: 3em;
	font-size: 0.7em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.6;
	color: #999;
	}

/* ........................................................................

	Form Overrides
........................................................................*/
h1#logo{
	display: none;
}
form#form2 li {
	list-style: none;
	display: block;
	float:none;
	}
/* ........................................................................

	LET ME CLEAR MY FLOAT
........................................................................*/

.clear:after, section:after {
	clear: both;
	display: block;
	content: ".";
	height: 0px;
	visibility: hidden;
	}

.clear {
	display: inline-block;
	}

* html .clear {
	height: 1%;
	}

.clear{
	display: block;
	}


/* ........................................................................

	MEDIA QUERIES
........................................................................*/

@media screen and (min-aspect-ratio: 16/9) {
.video-wrap {
	width: 80%;
	height: 0;
	padding-bottom: 45%;
	background-color: #000;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	}

.audio-wrap {
	width: 100%;
	padding-bottom: 45%;
	}

.water-blues-logo {
    position: absolute;
    right: 12%;
}

#index .video-wrap {
	width: 100%;
	padding-bottom: 56.25%;
	}

}

@media screen and (max-aspect-ratio: 16/10) {

#trailer-skip {
	display: none;
	}

}

@media screen and (max-width: 90em) { /* 1600 */

.content {
	margin: 3em 15%;
	}

}

@media screen and (max-width: 90em) { /* 1440 */

#options{
	width: 25%;
	}

#index #options {
	width: 25%;
	}

#index .example {
	width: 75%;
	}

.video-label {
	top: 10%;
	}

}

@media screen and (max-width: 75em) { /* 1200 */


.majora-intro p {
	margin-left: 3%;
	font-size: 1.8em;
	}

.content {
	margin: 3em 10%;
	}

body {
	font-size: 85%;
	}

#options,
.touch #options {
	width: 40%;
	}

}

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

.overview .content {
	padding: 3%;
	width: 94%;
	position: relative;
	display: block;
	}

.audio-content {
	padding-left: 3%;
    padding-right: 3%;
    width: 94%;
	}

}




@media screen and (max-width: 64em) { /* 1024 */

ul.video-nav li.down {
	display: none;
	}

.two-col .two-thirds, .one-third {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	height: auto;
	}

.quarter-cols {
	width: 44%;
	padding: 2%;
	margin-right: 3%;
	}

.quarter-cols:nth-of-type(2n)  {
	margin-right: 0;
	}

.video-label {
	top: 2.6em;
	}

p.signposting span {
    display: inline-block;
}

#intro {
	padding-top: 3em;
	padding-bottom: 2em;
	}

#majora {
	width: 33.33%;
	}

.static #majora {
	width: 45%;
	}

#majora img {
	width: 100%;
	height: auto;
	}

#intro p,
.static #intro p {
	font-size: 1.5em;
	}

.static #intro p:first-of-type {
    font-size: 1.9em;
}

.static h1 span {
	display: block;
	}

.static h1 {
    font-size: 3.2em;
	}
}


@media screen and (max-width: 50em) { /* 800 */

.audio-wrap h1 {
	font-size: 3.0em;
	}

a.menu-bars{
	width: 22px;
	height: 17px;
	}

.production-description {
	display: none;
	}

.video-label {
	width: 94%;
	left: 3%;
	}


}

@media screen and (max-width: 45em) { /* 720 */

.content {
	margin: 3em 0;
	}

.video-label {
	font-size: 60%;
	}

#options,
.touch #options {
	width: 60%;
	}

#trailer-skip {
	left: 30%;
	width: 40%;
	}

/* test push instead of slide over */
.touch #options {
	width: 75%;
	}
}

@media screen and (max-width: 37.5em) { /* 600 */
.mobileonly{
		display: block;
		}
		
.desktop {
	display: none;
	}
		
#scroll-nav {
	display: none;
	}
		
#index.explore .selections .option-set{
	display: none;
}
#majora-anim {
	display: none;
	}
.pspm-logo-lg{
	background: url(../images/pspmlogo-sm.png) no-repeat top center;
	width:115px;
	height:40px;
	right: 10px;
	}
.static #majora-anim {
    padding-top: 0em;
}

.static #majora {
    float: left;
	display: block;
    margin-left: 1em;
    width: 80%;
	margin-left: 10%;
	margin-bottom: 1em;
	display: none;
}

#intro {
	margin-top: 3.5em;
}

#trailer-skip {
	display: none;
	}

h1 {
    font-size: 2.4em;
}

h2 {
	font-size: 1.8em;
	}
#menu{
		min-height:60px;
		}
.overview-text h1 span {
	display: block;
	}

.overview .overview-text p {
    font-size: 1.4em;
}

.column, #feature-images .two-thirds, #feature-images .one-third {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	height: auto;
	}

.audio-wrap {
	min-height: 150px;
	}

.audio-wrap h1 {
	font-size: 2.0em;
	padding-top: 20%;
	}
.water-blues-logo {
	top: 1.5em;
	left:5em;
	}

.event ul, .resource-list ul {
	margin-left: 1.5em;
	padding-left: 1.5em;
	}


.lemmon-instagram ul li.more-instagram {
	width: 180px;
	margin-right: 10px;
	}

.lemmon-instagram img {
	height: auto;
	width: 180px;
	display: block;
	}

.lemmon-instagram p {
	font-size: 1.1em;

}

.resource-list div {
	height: 90px;
	width: 90px;
	}
	
footer ul li {
	width: 43%;
	}
footer ul.additional-top li{
	width: 90%;
	}
ul.additional img {
	width: 100%;
	height: auto;
	}


#index #options,
.touch #index #options {
    display: none;
}

#index .example,
.touch #index .example {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
#index.explore #options{
    display: block;
    width:100%;
}
#index.explore .mobileonly img{
	width:100%;
}
.item {
	display: none;
	}

.item.item-h3 {
	display: block;
	}


.flip-landscape {
		display: none;
		}
}

@media screen and (max-width: 31.25em) { /* 500 */
	#menu{
		min-height: 80px;
		}
	.water-blues-logo{
		width: 60%;
		}
	.wb-logo{
		margin:0;
		}
	footer ul li {
		width: 70%;
		margin-right: 0em;
		}
	.wb-logo{
	margin:0 0 0 10px;
	max-width:277px;
	min-width: inherit;
	}


}
@media screen and (max-width: 21.875em) { /* 350 */
	.water-blues-logo{
		width: 70%;
		top:0em;
		}

	.pspm-logo{
		margin:0 0 3px;
		display: block;
		}
	.wb-logo{
		margin:0;
		}
	.water-blues-logo a{
		overflow: hidden;
		display: block;
		float:none;
		height:50px;
	}
	#menu.block-menu .water-blues-logo {
		top: 0.5em;
		}
}
 /* Retina-specific stuff here */


@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){

	.pspm-logo,
	.pspm-logo-lg{
		background: url(../images/pspmlogo-lg.png) no-repeat top center;
		background-size: 115px 40px;
		width:115px;
		height:40px;
		}
}
/* IPAD ONLY */
 @media
screen and (min-width:700px) and (max-width:768px) and (max-height: 1024px) and (orientation:portrait),
screen and (min-width:1024px) and (max-width:1024px) and (max-height: 768px) and (orientation:landscape){
	.pspm-logo-lg{
		background: url(../images/pspmlogo-xl.png) no-repeat top center;
		background-size: 200px 70px;
		width:200px;
		height:70px;
		}

}