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


/* =Yakima Valley Tourism Home
-----------------------------------------------------------------------------*/

/* video */
.videoContainer {
	position:relative;
	margin:0;
	padding:0;
	padding-bottom: 56.25%; /* aspecct ratio for video */
	width:100%;
	height:0;
	background:#4a5b2d;
	}
	
.video-overlay {
	display:none;
	}
	
.source {
	position:absolute;
	left:75px;
	bottom:75px;
	opacity:0.50;
    filter:alpha(opacity=50); /* For IE8 and earlier */
	z-index:5000;
	text-align:right;
	font-family: 'bebasneuepro-bold', Arial, sans-serif;text-transform: uppercase;
	font-size:2em;
	-webkit-transition: opacity 0.4s ease-in-out;
	-moz-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
	z-index:9000;
	}
	
.source:hover {
	opacity:1.0;
    filter:alpha(opacity=100); /* For IE8 and earlier */
	}
	
.source a {
	color:#ffffff;
	text-decoration:none;
	}
	
.fullscreen-bg__video {
    width: 100%;
	height:100%;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	left:0;
	}  

    
/* intro css --------------------------------------*/

.introBg {
    background-image:none;
    }
	
.intro {
	text-align:center;
	padding:0 0 2.5em 0;
	}
	
.intro h1 {
	font-size:5em;
	margin:0;
	}
	
.intro h2 {
	font-size:2em;
	}
	
.intro p {
	font-size:115%;
	}

.travelGuideMobileBtn {
	display:none;
	margin:0 0 1em 0;
	border-radius: 15px;
	}
    
/* home pillars --------------------------------------*/
	
ul.homePillars {
	list-style:none;
	margin:0 0 0 0;
    display:grid;
    grid-template-columns: 33% 33% 33%;    
    column-gap: .5%;
    row-gap: 1.75%;
	}
	
ul.homePillars a {	
	text-decoration:none;
	color:#ffffff;
	}
    
ul.homePillars li {
	text-align:center;	
	}
	
.pillarPhoto {
	padding:5em .5em;
	position:relative;
	-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;
	border-radius: 15px;
	}
	
.pillarPhoto:hover {
	transform: scale(1.10);
	z-index:5000;
	}
	
ul.homePillars li h2 {
	text-align:center;
	padding: 0 0;
	font-size:3em;
	font-family: 'bebasneuepro-bold', Arial, sans-serif;text-transform: uppercase;
	color:#ffffff;
	-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;
	position:relative;
	z-index:2000;
	text-shadow:0 0 20px #000;
	}
	
ul.homePillars li h2 span {
	display:block;
	font-size:15px;
	line-height:90%;
	-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;
	/*background: rgba(85, 45, 22, 0.75);
	padding:.5em 0 .4em 0; */
	opacity:0.00;
    filter:alpha(opacity=00); /* For IE8 and earlier */
	padding:5px 0 0 0;
	color:#fff;
	}
	
.overlay {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(140, 24, 45, 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;
	opacity:0.00;
    filter:alpha(opacity=00); /* For IE8 and earlier */
	z-index:1900;
	border-radius: 15px;
	}
	
ul.homePillars li:hover h2 {
	text-shadow:none;
	}
	
ul.homePillars li:hover .overlay {
	opacity:1.00;
    filter:alpha(opacity=100); /* For IE8 and earlier */
	}
	
ul.homePillars li:hover .videoTitle span {
	opacity:1.00;
    filter:alpha(opacity=100); /* For IE8 and earlier */
	}
	
ul.homePillars li.wine .pillarPhoto {
	background:url(../img/home-pillars/home-pillar-wine.webp) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}
	
ul.homePillars li.beer .pillarPhoto {
	background:url(../img/home-pillars/home-pillar-beer.webp) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}
	
ul.homePillars li.farm .pillarPhoto {
	background:url(../img/home-pillars/home-pillar-farm.webp) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}
	
ul.homePillars li.outdoor .pillarPhoto {
	background:url(../img/home-pillars/home-pillar-outdoor.webp) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}
	
ul.homePillars li.festivals .pillarPhoto {
	background:url(../img/home-pillars/home-pillar-festivals.webp) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}
    
ul.homePillars li.season .pillarPhoto {
	background:url(../img/home-pillars/home-pillar-trip.webp) center center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	} 
    


@media all and (max-width: 1775px) {
	

	
}
	
@media all and (max-width: 1350px) {
	
ul.homePillars li h2 {
	font-size:2.5em;
	}
	
}

@media all and (max-width: 1200px) {

	
}

@media all and (max-width: 1150px) {
	
ul.homePillars li h2 {
	font-size:2em;
	}
	
}

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

.travelGuideMobileBtn {
	display:block;	
	}
	
}
	
@media all and (max-width: 875px) {
	
.source {
	width:90%;
	left:50%;
	margin-left:-45%;
	bottom:75px;
	opacity:1.00;
    filter:alpha(opacity=100); /* For IE8 and earlier */
	z-index:9000;
	text-align:center;
	font-size:2em;
	text-shadow: 0 0 15px #000;
	}
	
.video-overlay {
	display:block;
	background:#0f3e52;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:8999;
	opacity:0.75;
    filter:alpha(opacity=75); /* For IE8 and earlier */
	}
	
.pillarPhoto {
	padding:3.5em .5em;
	}
	
ul.homePillars li h2 {
	font-size:1.5em;
	}
	
ul.homePillars li h2 span {
	display:none;
	}
	
}

@media all and (max-width: 750px) {
	
.pillarPhoto {
	border-radius: 10px;
	}

.travelGuideMobileBtn {
	border-radius: 10px;
	}
	
}

@media all and (max-width: 675px) {
	
ul.homePillars {
    grid-template-columns: 49.5% 49.5%;    
    column-gap: 1%;
    row-gap: 1.25%;
	}
    
	
}

@media all and (max-width: 675px) {
	
ul.homePillars li h2 {
	font-size:1.25em;
	} 
    
	
}