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


/* =Yakima Valley Tourism What to Do
-----------------------------------------------------------------------------*/
.banner {
	background:url("../img/banners/whatToDo-sub-page.jpg") center center;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	}
    
.bannerArts {
	background:url("../img/banners/arts-banner.jpg") center center;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	}
    
.bannerCasino {
	background:url("../img/banners/casino-banner.jpg") center center;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	}
    
.bannerGolf {
	background:url("../img/banners/golf-banner.jpg") center center;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	}
    
.bannerMuseums {
	background:url("../img/banners/museums-banner.jpg") center center;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	}
    
.bannerShopping {
	background:url("../img/banners/shopping-banner.jpg") center center;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	}
    
.bannerSpas {
	background:url("../img/banners/spa-banner.jpg") center center;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	}
    
.bannerParks {
	background:url("../img/banners/parks-banner.jpg") center center;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
	}
    
ul.whatPillars {
	list-style:none;
	display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    margin:0 0 0 0;
    text-align: center;
	}
    
ul.whatPillars li {
	padding:0 5%;	
	}
    
.pillarPhoto {
    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;	
    }
    
.pillarPhoto:hover {
    opacity:0.50;
    filter:alpha(opacity=50); /* For IE8 and earlier */
	}

.pillarPhoto img {	
	border-radius: 15px;
    }
    
.pillarPhoto h2 {
    position:absolute;
    bottom:0;
    left:0;
    color:#fff;
    padding: 3%;
    background: rgba(140, 24, 45, 0.75);
    text-align: center;
    width:94%;
    margin:0;
	border-radius: 0 0 15px 15px;
    }
    
.pillarText {
    padding:6% 3%;
    }
    
.pillarText .blackBtn {
    width:75%;
    padding:2.5% 3.5% 2.3% 3.5%;
    margin:0 0 0 0;
    }
    
section .pillarText p {
    padding:0 0 1em 0;
    }

ul.whatAttractions {
	list-style:none;
	display: grid;
	/*grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	*/
    grid-template-columns: 23.875% 23.875% 23.875% 23.875%;
    grid-gap: 1rem;
    margin:2em 0 4em 0;
    align-content: center;
    }
    
ul.whatAttractions li {	
    -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: #fff;
    width:90%;
    padding:5%; 
	border-radius: 15px;
	}
    
ul.whatAttractions li:hover {
	opacity:0.50;
    filter:alpha(opacity=50); /* For IE8 and earlier */
	}
    
ul.whatAttractions li h2 {
	text-align: left;
    font-size:2em;
    display:inline-block;
    vertical-align: middle;
    width:55%;
    padding:0;
    margin:0;
	}
    
ul.whatAttractions li img {
	display:inline-block;
    margin:0 5% 0 0;
    width:35%;
    vertical-align: middle;
	border-radius: 15px;
	}
    
ul.whatAttractions li a {
	text-decoration: none;
	}
    

/* =attraction sub pages
-----------------------------------------------------------------------------*/

.googleMap {
    width:100%;
    margin:0 0 2em 0;
    }
    
.googleMap iframe {
    width:100%;
    margin:0 0 2em 0;
    }

    
.attractions  {
    position:relative;
    }
    
.attractions h2.center  {
    padding:0 5%;
    }
    
ul.oneColAttractions {
    display: grid;
    grid-template-columns: 1fr;    
    column-gap: 0;
    row-gap: 0;
    list-style:none;    
    margin:0 auto 1em auto;
    width:60%;
    max-width:1000px;
    }
    
ul.twoColAttractions {
    display: grid;
    grid-template-columns: 1fr 1fr;    
    column-gap: 0;
    row-gap: 0;
    list-style:none;
    margin:0 0 1em 0;
    }
    
ul.fourColAttractions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;    
    column-gap: 0;
    row-gap: 0;
    list-style:none;
    margin:0 0 3.5em 0;
    }
    
ul.fiveColAttractions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;    
    column-gap: 0;
    row-gap: 0;
    list-style:none;
    margin:0 0 3.5em 0;
    }
    
ul.threeColAttractions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;    
    column-gap: 0;
    row-gap: 0;
    list-style:none;    
    margin:0 0 1em 0;
    }
    
.attractions ul li {
    position: relative;
    background: url("../img/fifty-border.gif") top right repeat-y;
    border-bottom:#c7b7ac solid 1px;
    }
    
.attractions ul.oneColAttractions li {
    position: relative;
    background: none;
    border-bottom:none;
    }
    
.attractions ul.twoColAttractions li {
    border-bottom:none;
    }
    
.attractions ul.twoColAttractions li:last-child {
    background: none;
    }
    
.attractions ul.fourColAttractions>li {
    border-top:#c7b7ac solid 1px;
    border-bottom:none;
    }
    
.attractions ul.fourColAttractions li:nth-child(4n+0) {
    background: none;
    }
    
.attractions ul.fiveColAttractions>li {
    border-top:#c7b7ac solid 1px;
    border-bottom:none;     
    }
    
.attractions ul.fiveColAttractions li:nth-child(5n+0) {
    background: none;
    }
    
.attractions ul li img {
    width:100%;
    }
    
.attractions ul li ul li {
    background: none;
    border-bottom:none;
    }
    
.attractionsText {
    padding:7.5%;
    }
    
.attractions ul.oneColAttractions li .attractionsText {
    padding:7.5% 0;
    }
    
.attractions ul li p {
    margin:0;
    padding:0;
    font-size:90%;
    }
    
.attractions ul li p.detail {
    padding:0 0 1em 0;    
    }
    
.attractions ul li a.wineBtn {
    margin:0 0 .5em 0;
    }
    
.attractions ul.contentUl {
    padding:0 0 1em 1em;
    }



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


	
ul.whatAttractions {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	grid-gap: 1rem;
    margin:0 0 3em 0;
    }
	
}
	
@media all and (max-width: 1350px) {
	

	
}

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

section .pillarText h2 {
    font-size:1.5em;
    }
    
ul.fiveColAttractions {
    grid-template-columns: 1fr 1fr 1fr;  
    }
    
.attractions ul.fiveColAttractions>li:nth-child(5n+0) {
    background: url("../img/fifty-border.gif") top right repeat-y;
    }
    
.attractions ul.fiveColAttractions>li:nth-child(3n+0) {
    background: none;
    }
	
}

@media all and (max-width: 1000px) {
	
ul.whatPillars {
    grid-template-columns: 50% 50%;
	}
    
.pillarText {
    padding:6% 3% 12% 3%;
    }
    
ul.fourColAttractions {
    grid-template-columns: 1fr 1fr;    
    }
    
.attractions ul.fourColAttractions>li:nth-child(2n+0) {
    background: none;
    }
    
ul.fiveColAttractions {
    grid-template-columns: 1fr 1fr;  
    }
    
.attractions ul.fiveColAttractions>li:nth-child(3n+0) {
    background: url("../img/fifty-border.gif") top right repeat-y;
    }
    
.attractions ul.fiveColAttractions>li:nth-child(2n+0) {
    background: none;
    }
	
}

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

ul.threeColAttractions {
    grid-template-columns: 1fr 1fr;    
    } 
	
}
	
@media all and (max-width: 875px) {
	

}

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

ul.whatAttractions {
	grid-gap: .5rem;
    }

ul.whatAttractions li {	
    width:95%;
    padding:2.5%; 
	border-radius: 10px;
	}

ul.whatAttractions li h2 {
    font-size:1.5em;
    width:70%;
	}
    
ul.whatAttractions li img {
    margin:0 5% 0 0;
    width:20%;
	border-radius: 10px;
	}
    
ul.oneColAttractions {
    width:100%;
    }
	
}

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

    
.pillarPhoto {
    margin:0 0 1.5em 0
    }
    
.pillarText {
    display:none;
    }
	
}

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

ul.twoColAttractions {
    grid-template-columns: 1fr;    
    }
	
ul.fourColAttractions {
    grid-template-columns: 1fr;    
    }
    
ul.threeColAttractions {
    grid-template-columns: 1fr;    
    }
    
ul.fiveColAttractions {
    grid-template-columns: 1fr;  
    }
    
.attractions ul.fiveColAttractions>li:nth-child(3n+0), .attractions ul.fiveColAttractions>li:nth-child(5n+0)  {
    background: none;
    }
    
.attractions ul li {
    background: none;
    }
    
}