@charset "utf-8";
/* Activity Guide CSS - August 2025 */

body, html { margin: 0;padding:0;background-color: #f6f7f8;font-family:sans-serif; }

.wrapper {position: relative; height: 100vh; overflow-x: hidden;}

.parallax { height: auto;min-height: 75%; margin: 0px; background-attachment: fixed; background-position: center bottom; background-repeat: no-repeat; background-size: cover;}

.bg1 {background-image: url('//static.spokanecity.org/my/images/pages/parksrec/guides/fall-2024/riverfront-park.jpg'); border-bottom: 12px solid #fff;}

.Logo {width: 200px; height: 200px; background-color: #fff; border: 12px solid #fff; border-radius: 50%;margin: 0 auto;margin-top: -120px;}

.Container {background-color: #f6f7f8; padding: 40px 8px; }
.Container:nth-child(even) {background-color: #fff;}

.Row { margin: 0 auto;width: 1200px; padding: 20px 0px; display: flex;justify-content:flex-end;align-content:space-around; align-items: center;}

.Photo {width: 68%;}
.Text {width: 31%; justify-content:flex-end; padding: 10px 20px;}
.Row >.Photo.Right {order: 1;}

.SpecialWrapper {position: relative; width:100%; max-width: 800px; margin: 0 auto; padding:20px 5px 20px 5px;}
.ContentCurrentGuide {position: relative; width: 48%; vertical-align: middle; padding-bottom: 20px; }
.GuideCover {float: right;width: 45%; }
.GuideCover img { width: 100%;border: 12px solid #fff;
  border-radius: .25em;
  box-shadow: .5em .5em 2em .25em rgba(0,0,0,.1);}
.GuideCoverMini {width: 12%; float: left; margin-right: 40px;margin-left: 16px;}
.GuideCoverMini img { width: 100%;border: 6px solid #fff;
  border-radius: .25em;
  box-shadow: .5em .5em 2em .25em rgba(0,0,0,.1);}


.MainPhoto {border: 12px solid #fff; border-radius: .25em; box-shadow: .5em .5em 2em .25em rgba(0,0,0,.2); opacity: 0; transform: translateY(4em) rotateZ(-5deg);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1), opacity .3s .25s ease-out;width: 95%; will-change: transform, opacity;}

.MainPhoto.is-visible {opacity: 1; transform: rotateZ(0deg);}

.HighLightContainer {background-color: #f6f7f8; padding: 40px 8px; }
.HighLightWrapper {width: 100%;margin: 0 auto;}
.HighLight {width: 100%; }
.HighLight img {width: 100%;}
.HightLightText {width:100%; max-width: 1160px; margin: 40px auto 120px auto;}

h2 {font-family: 'Bebas Neue', cursive;font-size: 76px;line-height: 90px; position: absolute;top: 2%;left: 0%; text-align: left; color:#fff; padding:20px 0px 20px 100px;  width: 37%; font-kerning: normal; letter-spacing: .1rem; background-color:#bc5f06;}
h2 span.Big {font-size:90px; line-height: 40px;}

h4 {font-size: 24px; margin: 0; padding: 0 16px 0 16px; text-align: left; color: #bc5f06;}
h4.Clear {clear: both; padding-top: 40px;}

p {color: #666; font-size: 18px; line-height: 28px; padding: 0px 16px 8px 16px; font-family: 'Quicksand', sans-serif;}
p.center {text-align: center;}
p.PreviousGuideLink {padding-top: 80px;}

hr {height: 1px; border: none; border-top: 1px dotted #999; margin-top: 70px; margin-bottom: 45px;margin-left: 15px;}

a, a:visited {font-family:sans-serif;text-decoration: underline;font-size: 18px;color:#bc5f06;}
a:hover {font-family:sans-serif;color: #dc8304;}

a.Button, a.Button:visited {background-color:#bc5f06; width:auto; max-width: 15px; padding: 12px 16px;margin-left: 16px; color: #fff;text-decoration: none;}
a.Button:hover {background-color:#dc8304;color: #fff;}

ul {}
ul li {color: #666; font-size: 18px; line-height: 26px; padding: 0px 16px 12px 16px; font-family: 'Quicksand', sans-serif;}
/*scroll down animation*/
div#ScrollDown {display: block;margin-top: 30px;}

.Hand {width: 80px; padding: 10px 20px 0px 20px; animation: Scroll 1.5s linear infinite;transition-timing-function: ease;}

.Video {width: 98%; margin: 16px auto 32px auto; padding: 0 20px;}
.EmbedContainer {position: relative; padding-bottom: 56.25%; overflow: hidden; }	
.EmbedContainer iframe,.EmbedContainer object,.EmbedContainer embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}



/*@keyframes Scroll {
	0% {opacity: 0;transform: translateY(0px);}
	2% {opacity: 1;transform: translateY(0px);}
	30% {opacity: 1;transform: translateY(-20px);}
	50% {opacity: 0;}
	100% {opacity:0;transform: translateY(0px);}
}
*/
@media only screen and (max-width: 1300px) {
	h2 {padding:20px 0px 20px 50px; width: 40%;}
}	
@media only screen and (max-width: 1199px) {

	.Row {width:100%;}
	.MainPhoto {max-width: 90%; margin-left: 1em; margin-right: 1em;margin-bottom: 2em;}
	.HightLightText {width:100%; padding: 0 20px;}
}

@media only screen and (max-width: 1100px) {
	h2 {font-size: 58px;line-height: 70px; padding:20px 0px 20px 70px; }
	h2 span.Big {font-size:80px; line-height: 40px;}
}


@media only screen and (max-width: 950px) {
	.Container {padding: 40px 8px; }
	.GuideCover img { width: 88%;}
	.Row {display: block;}
	.Photo {width: 100%; }
	.Text,.HightLightText {width: 100%;padding: 10px 4px;}
	.Row >.Photo.Right {order: 0;}

	.parallax { background-position: right bottom;}
}

@media only screen and (max-width: 880px) {
		h2 {font-size: 50px;line-height: 70px; padding:30px 0px 20px 30px; width: 50%}
		h2 span.Big {font-size:80px; line-height: 50px;}
}

@media only screen and (max-width: 780px) {
	.GuideCover img { width: 86%;}
	h2 {width: 50%;}

}


@media only screen and (max-height: 780px) {
	h2 {font-size: 50px;line-height: 50px;top: 2%;}
	h2 span.Big {font-size:70px; line-height: 70px;}
}

@media only screen and (max-width: 710px) {
	h2 {font-size: 46px;line-height: 50px;top: 2%;}
	h2 span.Big {font-size:64px; line-height: 60px;}
}

@media only screen and (max-width: 680px) {
	h2 {font-size: 36px;line-height: 36px;}
	h2 span.Big {font-size:48px; line-height: 48px; }

}

@media only screen and (max-width: 660px) {
	.Container {padding: 40px 8px; }
	.ContentCurrentGuide { width: 100%; margin: 0 auto; padding: 0;}
	.GuideCover{float: none;width:92%; padding: 10px 10px 6px 0px; margin: 0px 0px 20px 0px;}
	.GuideCover img { width: 100%;}
	.MainPhoto {  max-width: 88%;}
	.Video {width: 90%;}
}

@media only screen and (max-width: 542px) {
	.GuideCover {width:90%;float: none;}
	.GuideCoverMini {width:45%;float: none;}
	.MainPhoto { max-width: 84%;}
	.parallax {max-height: 25%; background-position: center bottom; }
	.bg1 {min-height: 70%; background-image: url('//static.spokanecity.org/my/images/pages/parksrec/guides/fall-2024/riverfront-park.jpg'); }
	h2 {font-size: 32px;line-height: 28px;}
	h2 span.Big {font-size:48px; }
}

@media only screen and (max-height: 650px) {
	h2 {font-size: 42px;line-height: 42px; }
	.parallax {max-height: 25%; background-position: center bottom;}
	.bg1 {min-height: 70%; background-image: url('//static.spokanecity.org/my/images/pages/parksrec/guides/fall-2024/riverfront-park-small.jpg'); }
}


@media only screen and (max-width: 320px) {
	.MainPhoto {  max-width: 70%;}
	h2 {font-size: 24px;line-height: 10px; width:64%;}
	h2 span.Big {font-size:32px;line-height: 50px; }

}