/*-----------------------------------------------------------------------------
author:    www.visityakima.com
-----------------------------------------------------------------------------*/


/* =Yakima Valley Live Music Default/Home Page
-----------------------------------------------------------------------------*/
#introText {
	font-size:225%;
	padding:.25em .45em;
	font-family:OpenSansExtraBold;
	color:#ffffff;
	background:#eb6d24;
	margin:0 auto .5em auto;
	display:inline-block;
	transform: rotate(-1deg);
	-ms-transform: rotate(-1deg); /* IE 9 */
	-webkit-transform: rotate(-1deg); /* Safari and Chrome */
	-o-transform: rotate(-1deg); /* Opera */
	-moz-transform: rotate(-1deg); /* Firefox */
	-webkit-box-shadow: 3px 3px 0 0 #0f3e52;
	box-shadow: 3px 3px 0 0 #0f3e52;
	}
	
ul.bigShows {
	margin:0 0 4em 0;
	}
	
ul.bigShows li {
	width:22%;
	float:left;
	margin:0 4% 0 0;
	position:relative;
	}
	
ul.bigShows li:nth-child(4n+0) {
	width:22%;
	float:right;
	margin:0 0 0 0;
	}
	
ul.bigShows li h2 {
	position:absolute;
	padding:5%;
	width:80%;
	top:-30px;
	left:50%;
	margin:0 0 0 -45%;
	color:#000000;
	text-shadow:none;
	opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */
	z-index:1000;
	background:#facc65;
	font-size:1em;
	}
	
.blackScreen {
	position:absolute;
	width:100%;
	height:100%;
	background:#000;
	-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;
	opacity:0.00;
    filter:alpha(opacity=00); /* For IE8 and earlier */
	z-index:999;
	}
	
ul.bigShows li:hover .blackScreen {
	opacity:0.75;
    filter:alpha(opacity=75); /* For IE8 and earlier */
	}
	

	
/*-- Event Styles --*/	
ul.events {
	width:100%;
	margin:0 0 2em 0;
	}	
	
.events li {
	display:inline-block;
	list-style:none;
	width:22.75%;
	margin:0 2.5% 2.5% 0;
	text-align:center;
	-webkit-transition: background 0.4s ease-in-out;
	-moz-transition: background 0.4s ease-in-out;
	-o-transition: background 0.4s ease-in-out;
	transition: background 0.4s ease-in-out;
	background:rgba(255,255,255,.2);
	vertical-align:top;
	}
	
.events li:hover {
	background:rgba(255,255,255,.4);
	}
	
.events li:nth-child(4n+0) {
	margin:0 0 2.5% 0;
	}
	
.events a {
	width:90%;
	padding:5%;
	display:block;
	}
	
.events a, .events a h3, .events a h4 {
	text-decoration:none;
	}
	
.events h3 {
	font-size:125%;	
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-family:OpenSansExtraBold;
	font-weight:normal;
	color:#ffffff;
	text-shadow:none;
	line-height:100%;
	}

.events h3 a:link, .events h3 a:visited {
	text-decoration:none;
	}

.events h3 a:hover, .events h3 a:active {
	text-decoration:none;
	opacity:0.50;
    filter:alpha(opacity=50); /* For IE8 and earlier */
	}
	
.events h4 {
	font-size:100%;	
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-family:OpenSansBold;
	font-weight:normal;
	color:#fff0bf;
	text-shadow:none;
	line-height:100%;
	}
	
.crowdRiff {
	position:relative;
	}
	
.hashtag {
	position:absolute;
	top:0;
	left:50%;
	margin-left:-5%;
	display:inline-block;
	color:#0f3e52;
	padding:.2em .5em .25em .5em;
	background:#facc65;
	font-family:OpenSansBold;
	text-align:center;
	font-size:2em;
	z-index:9000;
	}
	
.hashtag:hover {
	color:#ffffff;
	}
	
.hashtag a {
	text-decoration:none;
	color:#0f3e52;
	}
	
.hashtag a:hover {
	color:#ffffff;
	}
	

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

#introText {
	font-size:150%;
	} 
	
ul.bigShows li h2 {
	font-size:.75em;
	}
	
.events li {
	list-style:none;
	width:47.5%;
	margin:0 0 2.5% 0;
	float:left;
	}
	
.events li:nth-child(2n+0) {
	float:right;
	}
	  
}

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

.hashtag {
	position:relative;
	top:0;
	left:auto;
	display:block;
	margin-left:0;
	padding:0 0.2em 0;
	text-align:center;
	font-size:2em;
	z-index:9000;
	width:90%;
	margin:0 auto;
	}
	
}
	
@media screen and (max-width: 700px) {
	
#introText {
	font-size:100%;
	}  
	
ul.bigShows {
	margin:0 0 1.5em 0;
	} 

ul.bigShows li {
	width:47.5%;
	float:left;
	margin:0 0 6% 0;
	position:relative;
	}
	
ul.bigShows li:nth-child(2n+0) {
	width:47.5%;
	float:right;
	margin:0 0 6% 0;
	}
	
ul.bigShows li h2 {
	top:-15px;
	font-size:1em;
	}
	  
}

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

	
	.events li {
	float:none;
	list-style:none;
	width:100%;
	margin:0 0 2.5% 0;
	}
}

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

ul.bigShows li h2 {
	font-size:.75em;
	}

} 

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

}