#rotator-container { position: relative; width: 620px; margin: 30px auto; }

#rotator { width: 612px; height: 400px; overflow: hidden; position: relative; border: solid 4px #eda79e; background-color: #ffffff; }
#rotator > .inner { overflow: hidden; position: absolute; left: 0; top: 0; }
#rotator article { width: 562px; float: left; height: 350px; padding: 25px; text-align: center; background-repeat: no-repeat; background-position: 0 0; }
#rotator article.live { cursor: pointer; }
#rotator article h1 { display: none; }

#rotator article .mobile-only { display: none; }

#rotator article.countdown { background-image: url(/assets/image/rotator/excited-for-our-day.jpg); }
#rotator article.countdown .content { text-align: left; padding: 70px 80px 45px 300px; }
#rotator article.accommodations { background-image: url(/assets/image/rotator/will-you-be-staying.jpg); }
#rotator article.accommodations .content { padding-top: 217px; }
#rotator article.accommodations .content p span.oblique { display: inline; }
#rotator article.rsvp { background-image: url(/assets/image/rotator/are-you-coming-to-our-shindig.jpg); }
#rotator article.rsvp .content { padding: 190px 35px 0 0; }
#rotator article.rsvp .content a.button { position: relative; left: 5px; }
#rotator article.faqs { background-image: url(/assets/image/rotator/your-questions-answered-section.jpg); }
#rotator article.faqs .content { padding: 20px 0 0 0; }
#rotator article.weather { background-image: url(/assets/image/rotator/fingers-crossed-for-sunny-skies.jpg); }
#rotator article.weather .content { color: #ffffff; padding: 180px 0 0 0; }
#rotator article.weather .content #weather { margin: 0 auto; }
#rotator article.gallery { background-image: url(/assets/image/rotator/cant-get-enough-of-us.jpg); }
#rotator article.gallery .content { padding: 110px 0 0 0; }
#rotator article.interactive { background-image: url(/assets/image/rotator/get-you-on-the-dance-floor.jpg); }

#rotator-container .navigation { position: absolute; bottom: -45px; left: 0; z-index: 10; text-align: center; }
#rotator-container .navigation .buttons { background: url(/assets/image/rotator-markers-bg.png) no-repeat; width: 95px; height: 72px; padding: 20px 48px 0 52px; position: relative; z-index: 1; }
#rotator-container .navigation .buttons a { position: relative; display: inline-block; width: 10px; height: 10px; margin: 0 2px; background: url(/assets/image/rotator-marker.png) no-repeat 0 0; text-indent: -9999px; }
#rotator-container .navigation .buttons a.current,
#rotator-container .navigation .buttons a:hover { background-position: 0 -10px; }

#rotator-container .navigation .grass { position: absolute; left: -212px; bottom: 45px; width: 620px; }
#rotator-container .navigation .grass .grass1 { margin-right: 50px; }
#rotator-container .navigation .grass .grass3 { margin-right: 240px; }
#rotator-container .navigation .grass .grass4 { margin-right: 40px; }
#rotator-container .navigation .grass .grass5 {  }

/* mobile */
@media screen and (max-width:767px) {
	#rotator-container { width: auto; }
	#rotator { width: auto; height: auto; border: 0; }
	#rotator > .inner { position: relative; width: auto !important; }
	#rotator article { width: auto; height: 265px; float: none; margin-bottom: 10px; background-size: 100%; }
	#rotator-container .navigation { display: none; }
	
	#rotator article.clone { display: none; }
	#rotator article.countdown { background-image: url(/assets/image/rotator/excited-for-our-day-mobile.jpg); }
	#rotator article.countdown .content { padding: 160px 0 0; }
	#rotator article.countdown .countdown-container { line-height: 0.7; }
	#rotator article.countdown p { margin: 0; }
	#rotator article.accommodations { background-image: url(/assets/image/rotator/will-you-be-staying-mobile.jpg); }
	#rotator article.rsvp { background-image: url(/assets/image/rotator/are-you-coming-to-our-shindig-mobile.jpg); }
	#rotator article.faqs { background-image: url(/assets/image/rotator/your-questions-answered-section-mobile.jpg); }
	#rotator article.weather { background-image: url(/assets/image/rotator/fingers-crossed-for-sunny-skies-mobile.jpg); }
	#rotator article.weather .content { padding-top: 140px; }
	#rotator article.weather #weather { display: block; margin-top: -24px !important; }
	#rotator article.weather #weather * { display: inline; }
	#rotator article.gallery { background-image: url(/assets/image/rotator/cant-get-enough-of-us-mobile.jpg); }
	
	#rotator article .mobile-hide { display: none; }
	#rotator article .mobile-only { display: block; }
	#rotator article .content * { display: none; }
	#rotator article .content *.mobile-show { display: block; }
}

/* animations */
#rotator-container .navigation .grass img {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	animation-play-state: paused;
}

#rotator-container .navigation .grass.transitioning img,
#rotator-container .navigation .grass.reverse-transitioning img {
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-play-state: running;
	
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: ease-out;
	-moz-animation-play-state: running;
	
	-o-animation-iteration-count: 1;
	-o-animation-timing-function: ease-out;
	-o-animation-play-state: running;
	
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-play-state: running;
}

/* normal direction */
#rotator-container .navigation .grass.transitioning .grass1,
#rotator-container .navigation .grass.transitioning .grass3,
#rotator-container .navigation .grass.transitioning .grass5,
#rotator-container .navigation .grass.transitioning .grass6 {
	-webkit-animation-name: swaying;
	-webkit-animation-duration: 1.5s;
	
	-moz-animation-name: swaying;
	-moz-animation-duration: 1.5s;
	
	-o-animation-name: swaying;
	-o-animation-duration: 1.5s;
	
	animation-name: swaying;
	animation-duration: 1.5s;
}

#rotator-container .navigation .grass.transitioning .grass2,
#rotator-container .navigation .grass.transitioning .grass4,
#rotator-container .navigation .grass.transitioning .grass7 {
	-webkit-animation-name: swaying2;
	-webkit-animation-duration: 2s;
	
	-moz-animation-name: swaying2;
	-moz-animation-duration: 2s;
	
	-o-animation-name: swaying2;
	-o-animation-duration: 2s;
	
	animation-name: swaying2;
	animation-duration: 2s;
}

@-webkit-keyframes swaying {
	0% {
		-webkit-transform: skew(0deg) translateX(0);
	}
	30% {
		-webkit-transform: skew(35deg) translateX(-55px);
	}
	60% {
		-webkit-transform: skew(25deg) translateX(-45px);
	}
	100% {
		-webkit-transform: skew(0deg) translateX(0);
	}
}

@-moz-keyframes swaying {
	0% {
		-moz-transform: skew(0deg) translateX(0);
	}
	30% {
		-moz-transform: skew(35deg) translateX(-55px);
	}
	60% {
		-moz-transform: skew(25deg) translateX(-45px);
	}
	100% {
		-moz-transform: skew(0deg) translateX(0);
	}
}

@-o-keyframes swaying {
	0% {
		-o-transform: skew(0deg) translateX(0);
	}
	30% {
		-o-transform: skew(35deg) translateX(-55px);
	}
	60% {
		-o-transform: skew(25deg) translateX(-45px);
	}
	100% {
		-o-transform: skew(0deg) translateX(0);
	}
}

@keyframes swaying {
	0% {
		transform: skew(0deg) translateX(0);
	}
	30% {
		transform: skew(35deg) translateX(-55px);
	}
	60% {
		transform: skew(25deg) translateX(-45px);
	}
	100% {
		transform: skew(0deg) translateX(0);
	}
}

@-webkit-keyframes swaying2 {
	0% {
		-webkit-transform: skew(0deg) translateX(0);
	}
	30% {
		-webkit-transform: skew(40deg) translateX(-50px);
	}
	55% {
		-webkit-transform: skew(15deg) translateX(-25px);
	}
	100% {
		-webkit-transform: skew(0deg) translateX(0);
	}
}

@-moz-keyframes swaying2 {
	0% {
		-webkit-transform: skew(0deg) translateX(0);
	}
	30% {
		-webkit-transform: skew(40deg) translateX(-50px);
	}
	55% {
		-webkit-transform: skew(15deg) translateX(-25px);
	}
	100% {
		-webkit-transform: skew(0deg) translateX(0);
	}
}

@-o-keyframes swaying2 {
	0% {
		-webkit-transform: skew(0deg) translateX(0);
	}
	30% {
		-webkit-transform: skew(40deg) translateX(-50px);
	}
	55% {
		-webkit-transform: skew(15deg) translateX(-25px);
	}
	100% {
		-webkit-transform: skew(0deg) translateX(0);
	}
}

@keyframes swaying2 {
	0% {
		-webkit-transform: skew(0deg) translateX(0);
	}
	30% {
		-webkit-transform: skew(40deg) translateX(-50px);
	}
	55% {
		-webkit-transform: skew(15deg) translateX(-25px);
	}
	100% {
		-webkit-transform: skew(0deg) translateX(0);
	}
}

/* reverse direction */
#rotator-container .navigation .grass.reverse-transitioning .grass1,
#rotator-container .navigation .grass.reverse-transitioning .grass3,
#rotator-container .navigation .grass.reverse-transitioning .grass5,
#rotator-container .navigation .grass.reverse-transitioning .grass6 {
	-webkit-animation-name: swayingreverse;
	-webkit-animation-duration: 1.5s;
	
	-moz-animation-name: swayingreverse;
	-moz-animation-duration: 1.5s;
	
	-o-animation-name: swayingreverse;
	-o-animation-duration: 1.5s;
	
	animation-name: swayingreverse;
	animation-duration: 1.5s;
}

#rotator-container .navigation .grass.reverse-transitioning .grass2,
#rotator-container .navigation .grass.reverse-transitioning .grass4,
#rotator-container .navigation .grass.reverse-transitioning .grass7 {
	-webkit-animation-name: swayingreverse2;
	-webkit-animation-duration: 2s;
	
	-moz-animation-name: swayingreverse2;
	-moz-animation-duration: 2s;
	
	-o-animation-name: swayingreverse2;
	-o-animation-duration: 2s;
	
	animation-name: swayingreverse2;
	animation-duration: 2s;
}

@-webkit-keyframes swayingreverse {
	0% {
		-webkit-transform: skew(0deg) translateX(0);
	}
	30% {
		-webkit-transform: skew(-35deg) translateX(55px);
	}
	60% {
		-webkit-transform: skew(-25deg) translateX(45px);
	}
	100% {
		-webkit-transform: skew(0deg) translateX(0);
	}
}

@-moz-keyframes swayingreverse {
	0% {
		-moz-transform: skew(0deg) translateX(0);
	}
	30% {
		-moz-transform: skew(-35deg) translateX(55px);
	}
	60% {
		-moz-transform: skew(-25deg) translateX(45px);
	}
	100% {
		-moz-transform: skew(0deg) translateX(0);
	}
}

@-o-keyframes swayingreverse {
	0% {
		-o-transform: skew(0deg) translateX(0);
	}
	30% {
		-o-transform: skew(-35deg) translateX(55px);
	}
	60% {
		-o-transform: skew(-25deg) translateX(45px);
	}
	100% {
		-o-transform: skew(0deg) translateX(0);
	}
}

@keyframes swayingreverse {
	0% {
		transform: skew(0deg) translateX(0);
	}
	30% {
		transform: skew(-35deg) translateX(55px);
	}
	60% {
		transform: skew(-25deg) translateX(45px);
	}
	100% {
		transform: skew(0deg) translateX(0);
	}
}

@-webkit-keyframes swayingreverse2 {
	0% {
		-webkit-transform: skew(0deg) translateX(0);
	}
	30% {
		-webkit-transform: skew(-40deg) translateX(50px);
	}
	55% {
		-webkit-transform: skew(-15deg) translateX(25px);
	}
	100% {
		-webkit-transform: skew(0deg) translateX(0);
	}
}

@-moz-keyframes swayingreverse2 {
	0% {
		-webkit-transform: skew(0deg) translateX(0);
	}
	30% {
		-webkit-transform: skew(-40deg) translateX(50px);
	}
	55% {
		-webkit-transform: skew(-15deg) translateX(25px);
	}
	100% {
		-webkit-transform: skew(0deg) translateX(0);
	}
}

@-o-keyframes swayingreverse2 {
	0% {
		-webkit-transform: skew(0deg) translateX(0);
	}
	30% {
		-webkit-transform: skew(-40deg) translateX(50px);
	}
	55% {
		-webkit-transform: skew(-15deg) translateX(25px);
	}
	100% {
		-webkit-transform: skew(0deg) translateX(0);
	}
}

@keyframes swayingreverse2 {
	0% {
		-webkit-transform: skew(0deg) translateX(0);
	}
	30% {
		-webkit-transform: skew(-40deg) translateX(50px);
	}
	55% {
		-webkit-transform: skew(-15deg) translateX(25px);
	}
	100% {
		-webkit-transform: skew(0deg) translateX(0);
	}
}