/* BEGIN Rollover Video Template */

body.page-template-page-rollover-video {
	background: #505945;
}

/* Fix conflict between rollover video and countdown timer */
body.page-template-page-rollover-video .wpcdt-timer-wrap {
	position: absolute;
	top: 0;
	width: 100%;
}

/* Move the heading & nav down to clear room for the rollover video div */

body.page-template-page-rollover-video .heading {
	margin-top: 70vh;
	padding-top: 45px;
	border-top: 15px solid #94A47E;
}

body.page-template-page-rollover-video .page-content,
body.page-template-page-rollover-video .container-new.page-background {
	background: #f2f2f2;
}


body.page-template-page-rollover-video .main-menu,
body.page-template-page-rollover-video .copyright,
body.page-template-page-rollover-video .gdlr-content {
	background: #fff;
}

/*
body.page-template-page-rollover-video .container-new.full-width-background {
	margin-bottom: 0;
	padding-bottom: 60px;
}

body.page-template-page-rollover-video .container-new.page-photo,
body.page-template-page-rollover-video .container-new.page-photo-left,
body.page-id-1161356 .container-new.page-photo,
body.page-id-1161356 .container-new.page-photo-left {
	margin-top: 0;
	padding-top: 60px;
	margin-bottom: 0;
	padding-bottom: 60px;
}
*/

/* Position the rollover video div in a fixed spot at the top
 * and give it low z priority so items can scroll over top of it
 */
body.page-template-page-rollover-video .rollover-video {
	position: fixed;
	top: 140px; /* TODO: may need to adjust this and heading top margins depending on if countdown banner is present */
	left: 50%;
	transform: translate(-50%, 0);
	width: 960px;
	max-width: 90%;
	z-index: -1;
	text-align: center;
}

body.page-template-page-rollover-video .rollover-video h3 {
	text-align: center;
	margin-top: 30px;
	margin-bottom: 5px;
	color: #efefef;
}

body.page-template-page-rollover-video .rollover-video iframe {
	box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.38);
}

body.page-template-page-rollover-video .footer {
	margin-top: 0;
	padding-top: 120px;
}

@media (min-width: 600px) {
	body.page-template-page-rollover-video .heading {
		margin-top: 72vh;
	}

	body.page-template-page-rollover-video .rollover-video {
		top: 160px;
	}
}

/* Prevent overlap on landscape phones */
@media (max-width: 800px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
	body.page-template-page-rollover-video .heading {
		margin-top: 100vh;
	}

	body.page-template-page-rollover-video .rollover-video {
		width: 300px;
		top: 70px;
	}

	body.page-template-page-rollover-video .rollover-video h3 {
		font-size: 24px;
		margin-bottom: 0;
	}
}

@media (min-width: 768px) {
	body.page-template-page-rollover-video .heading {
		margin-top: 83vh;
	}
}

@media (min-width: 992px) {
	body.page-template-page-rollover-video .heading {
		margin-top: 820px;
	}

	body.page-template-page-rollover-video .rollover-video {
		top: 100px;
	}
}

/* Add a slight margin around CTA buttons by changing display type
 * TODO: this and other non-rollover styles should be moved to separate bundle/flex content page styles
 */
body.page-template-page-rollover-video .button,
body.page-id-1161356 .button {
    display: inline-block;
}

/* Quick sizing tweaks for bundle sales page main content */
@media (max-width: 600px) {
	body.page-template-page-rollover-video h2,
	body.page-id-1161356 h2 {
		font-size: 28px;
	}

	body.page-template-page-rollover-video .container-new .featured_text:not(.home_introduction),
	body.page-id-1161356 .container-new .featured_text:not(.home_introduction) {
		width: 80%;
		padding: 15px;
		margin-left: auto;
		margin-right: auto;
	}
	
	body.page-template-page-rollover-video .container-new .featured_text.home_introduction,
	body.page-id-1161356 .container-new .featured_text.home_introduction {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	body.page-template-page-rollover-video .container-new .featured_text.home_introduction ul,
	body.page-id-1161356 .container-new .featured_text.home_introduction ul {
		text-align: left;
	}

	body.page-template-page-rollover-video .container-new.page-photo img,
	body.page-template-page-rollover-video .container-new.page-photo-left img,
	body.page-id-1161356 .container-new.page-photo img,
	body.page-id-1161356 .container-new.page-photo-left img {
		margin-top: 30px;
	}

	body.page-template-page-rollover-video .container-new .gdlr-box-with-icon-item,
	body.page-id-1161356 .container-new .gdlr-box-with-icon-item {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	body.page-template-page-rollover-video .footer,
	body.page-template-page-rollover-video .copyright {
		max-width: 100%;
	}
}

body.page-template-page-rollover-video .container-new .featured_text blockquote,
body.page-id-1161356 .container-new .featured_text blockquote {
	padding-left: 30px;
	background-position: 10px 24px;
}

@media screen and (max-width: 1200px) {
	/* Reverse display of photo blocks on mobile */
	body.page-template-page-rollover-video .container-new.page-photo:not(.page-photo-left) > .row,
	body.page-id-1161356 .container-new.page-photo:not(.page-photo-left) > .row {
		display: flex;
		flex-direction: column-reverse;
	}

	body.page-template-page-rollover-video .four.columns > .gdlr-item .gdlr-box-with-icon-item,
	body.page-id-1161356 .four.columns > .gdlr-item .gdlr-box-with-icon-item {
    margin-left: auto !important;
    width: auto !important;
    margin-right: auto !important;
  }
}

/* Add a down arrow with subtle pulsing animation */

@keyframes pulse {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform:translateY(4px) scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

body.page-template-page-rollover-video .arrow-animator {
  animation: pulse 2s ease-in-out infinite;
}

body.page-template-page-rollover-video .arrow {
  border: solid #fff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 10px;
  margin: 0 auto;
}

body.page-template-page-rollover-video .right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

body.page-template-page-rollover-video .left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

body.page-template-page-rollover-video .up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

body.page-template-page-rollover-video .down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/* END Rollover Video Template */