/*
 * Media queries not working? You have to install a jar that contains a specific version of yui compressor:
 * https://helpx.adobe.com/experience-manager/kb/upgrade-yui-compressor.html
 */

.homepage-takeover {}

/* Copy appears below video */
.homepage-takeover .homepage-takeover-copy {
	width: 83.33333%;
	margin: 0 auto;
}

/* Medium Viewport */
@media screen and (min-width: 640px) {
	.homepage-takeover .homepage-takeover-video .vjs-big-play-button {
		width: 100px;
		height: 100px;
		margin-top: -50px;
		margin-left: -50px;
	}
}

/* Large Viewport */
@media screen and (min-width: 1024px) {
	/* Position copy above video */
	.homepage-takeover {
		position: relative;
	}
	.homepage-takeover .homepage-takeover-copy {
		position: absolute;
		top: 12%;
		left: 50%;
		max-width: 64rem;
		padding-left: .3125rem;
		padding-right: .3125rem;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	/* Make sure play button is above copy */
	.homepage-takeover .homepage-takeover-video .vjs-big-play-button {
		z-index: 5;
	}
}

/* * * * * * * * * * * * * * * * * * * *
 *  SWR1 Homepage Sweepstakes Campaign *
 * * * * * * * * * * * * * * * * * * * */

 /* Create some xtra small margin classes */
.star-wars-rogue-one-sweepstakes .margin-bottom-none {
	margin-bottom: 0px;
}

.star-wars-rogue-one-sweepstakes .margin-top-xsmall {
		margin-top: 15px;
}

.star-wars-rogue-one-sweepstakes .margin-bottom-xsmall {
		margin-bottom: 15px;
}

/* Ensure our copy takes proper width */
.star-wars-rogue-one-sweepstakes .homepage-takeover-campaign.key-features h3.heading-third {
	max-width: none;
	width: 100%;
	line-height: 1;
	margin-bottom: 8px;
}

/* Disclaimer copy */
.star-wars-rogue-one-sweepstakes .homepage-takeover-campaign.key-features small.disclaimer-copy {
	font-size: 8px;
	display: block;
}

/* 0 -> 1023px */
@media screen and (max-width: 1023px) {

	/* Utility class for showing <br> only on large */
	.star-wars-rogue-one-sweepstakes .homepage-takeover-campaign br.show-for-lg {
		display: none
	}

	.star-wars-rogue-one-sweepstakes .homepage-takeover-campaign.key-features div.content .heading-first {
		font-size: 36px;
		line-height: 0.90;
	}
	.star-wars-rogue-one-sweepstakes .homepage-takeover-campaign.key-features small.disclaimer-copy,
	.star-wars-rogue-one-sweepstakes .homepage-takeover-campaign.key-features div.content .heading-third {
		color: #fff;
	}
}

/* Large (1024px ->) */
@media screen and (min-width: 1024px) {

	.star-wars-rogue-one-sweepstakes .homepage-takeover-campaign.key-features .heading-first {
		font-size: 60px;
		line-height: 52px;
	}

	.star-wars-rogue-one-sweepstakes .homepage-takeover-campaign.key-features .heading-third {
		font-size: 18px;
		line-height: 18px;
	}

	/* Spanish heading needs to be smaller to fit the copy */
	.star-wars-rogue-one-sweepstakes .homepage-takeover-campaign.key-features .heading-es {
		font-size: 58px;
		line-height: 0.90;
	}

	/* Adjust where our content over the image lies */
	.star-wars-rogue-one-sweepstakes .homepage-takeover-campaign.key-features div.content {
		position: absolute;
		top: 10%;
		width: 100%;
	}

	/* Ensure we have the correct font color */
	.star-wars-rogue-one-sweepstakes .homepage-takeover-campaign.key-features div.content .heading-first,
	.star-wars-rogue-one-sweepstakes .homepage-takeover-campaign.key-features div.content .heading-third,
	.star-wars-rogue-one-sweepstakes .homepage-takeover-campaign.key-features small.disclaimer-copy {
		color: #333;
	}
}

/*
 * Media queries not working? You have to install a jar that contains a specific version of yui compressor:
 * https://helpx.adobe.com/experience-manager/kb/upgrade-yui-compressor.html
 */

/* Black background */
.takeover-swr1,
.takeover-swr1 .nna-carousel .ios-slider {
	background: #000000;
}

/* White out all copy on the page */
@media screen and (max-width: 1023px) {
	.takeover-swr1 .nna-nissan-home-pfa .current-caption,
	.takeover-swr1 .nna-nissan-home-pfa .current-caption .heading,
	.takeover-swr1 .nna-nissan-home-pfa .current-caption .p span,
	.takeover-swr1 .nna-nissan-homepage-campaign .heading-first,
	.takeover-swr1 .nna-nissan-homepage-campaign .heading-second,
	.takeover-swr1 .nna-nissan-homepage-campaign .heading-third,
	.takeover-swr1 .nna-nissan-homepage-campaign .campaign-rules,
	.takeover-swr1 .nna-nissan-homepage-campaign .campaign-rules a {
		color: #ffffff !important
	}
}

/* Homepage takeover copy styles */
.takeover-swr1 .homepage-takeover .homepage-takeover-copy .heading-first {
	margin-bottom: 0;
	line-height: 1em;
	font-family: 'nissan-pro-condensed-n7', 'nissan-pro-condensed', sans-serif;
	font-weight: 700;
	font-size: 21px;
	color: #ffffff;
}
html[lang="zh"] .takeover-swr1 .homepage-takeover .homepage-takeover-copy .heading-first {
	line-height: 1.1em;
}
.takeover-swr1 .homepage-takeover .homepage-takeover-copy .heading-second {
	margin-bottom: 0;
	line-height: 1em;
	font-family: 'nissan-pro-condensed-n7', 'nissan-pro-condensed', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #ffffff;
}
.takeover-swr1 .homepage-takeover .homepage-takeover-copy .button {
	margin-top: 15px;
	margin-bottom: 0;
}



/* Medium Viewport */
@media screen and (min-width: 640px) {
	/* Homepage takeover copy styles */
	.takeover-swr1 .homepage-takeover .homepage-takeover-copy .heading-first {
		line-height: 0.9em;
		font-size: 36px;
	}
	html[lang="zh"] .takeover-swr1 .homepage-takeover .homepage-takeover-copy .heading-first {
		line-height: 1.1em;
	}
	.takeover-swr1 .homepage-takeover .homepage-takeover-copy .heading-second {
		font-size: 21px;
	}
	.takeover-swr1 .homepage-takeover .homepage-takeover-copy .button {
		margin-top: 20px;
	}
}

/* Large Viewport */
@media screen and (min-width: 1024px) {
	/* Homepage takeover copy styles */
	.takeover-swr1 .homepage-takeover .homepage-takeover-copy .heading-first {
		font-size: 50px;
	}
	html[lang="zh"] .takeover-swr1 .homepage-takeover .homepage-takeover-copy .heading-first {
		line-height: 1.1em;
	}
	.takeover-swr1 .homepage-takeover .homepage-takeover-copy .heading-second {
		font-size: 24px;
	}
}

/******************************************
SWR1 PFA Black Friday Bottom Caption Styles
******************************************/
.nna-nissan-home-pfa .bottom-caption {
	position: absolute;
	width: 83.333%;
	max-width: 64rem;
	left: 5%;
	right: 0;
	bottom: 0;
	margin-left: auto;
	margin-right: auto;
}

.nna-nissan-home-pfa .star-wars-black-friday-row-small {
	display: inline;
}
.nna-nissan-home-pfa .star-wars-black-friday-row-small img {
	margin-left: 10px;
	padding-bottom: 10px;
}

@media screen and (min-width: 1024px) {
	.nna-nissan-home-pfa .bottom-caption {
		bottom: 0;
	}
}


/****************************
SWR1 Two Column layout styles
*****************************/
.star-wars-rogue-one-columns .column-1 .copy .disclaimer-copy {
	color: #fff;
	font-size: 10px;
	max-width: none;
	line-height: 1em;
	display: inline-block;
}
.star-wars-rogue-one-columns .column-1 .copy .disclaimer-copy a {
	color: #fff;
}

.star-wars-rogue-one-columns .column-1 .copy .heading-second,
.star-wars-rogue-one-columns .column-2 .copy .heading-second {
	line-height: 0.90;
}

.star-wars-rogue-one-columns .column-1 .copy .heading-third,
.star-wars-rogue-one-columns .column-2 .copy .heading-third {
	font-size: 14px;
	max-width: none;
	display: inline-block;
}

@media screen and (min-width: 1024px) {
	.star-wars-rogue-one-columns .column-1{
		position: relative;
	}
	.star-wars-rogue-one-columns .column-1 .copy .margin-top-fixed{
		margin-top: 31%;
		margin-left: 59%;
	}
	.star-wars-rogue-one-columns .column-2 .copy .margin-top-fixed {
		margin-top: 35%;
		margin-left: -3%;
	}
}

/**********************
* Font Styling
***********************/
/* Adjustments for font and margins for SMALL breakpoint */
@media screen and (max-width: 639px) {
	.star-wars-rogue-one-columns .column-1 .copy .heading-second,
	.star-wars-rogue-one-columns .column-2 .copy .heading-second {
		font-size: 24px;
		margin-bottom: 10px;
	}
	.star-wars-rogue-one-columns .column-2 .copy .heading-third {
		margin-bottom: 10px;
	}
}

/* Medium viewport */
/* Adjustments for font and margins for MEDIUM breakpoint */
@media screen and (min-width: 640px) {
	.star-wars-rogue-one-columns .column-1 .copy .heading-second,
	.star-wars-rogue-one-columns .column-2 .copy .heading-second {
		font-size: 45px;
		margin-bottom: 10px;
	}
	.star-wars-rogue-one-columns .column-2 .copy .heading-third {
		margin-bottom: 10px;
	}
}

/* Large viewport */
/* Adjustments for font and margins for LARGE breakpoint */
@media screen and (min-width: 1024px) {
	.star-wars-rogue-one-columns .column-1 .copy .heading-second {
		color: #000;
		font-size: 40px;
		text-align: center;
		line-height: 0.90;
		margin-bottom: 5px;
		letter-spacing: 2px;
	}
	.star-wars-rogue-one-columns .column-1 .copy p {
		color: #000;
		width: 100%;
		text-align: center;
		letter-spacing: 1px;
	}
	.star-wars-rogue-one-columns .column-2 .copy .heading-second {
		font-size: 22px;
		line-height: 0.90;
		margin-bottom: 5px;
	}
	.star-wars-rogue-one-columns .column-1 .copy .heading-third,
	.star-wars-rogue-one-columns .column-2 .copy .heading-third {
		font-size: 12px;
		line-height: 1em;
		margin-bottom: 5px;
	}
	.star-wars-rogue-one-columns .column-1 .copy .disclaimer-copy {
		margin-bottom: 5px;
	}

}

/* Extra large viewport */
/* Adjust font sizes and margins for 1180px+ breakpoints */
@media screen and (min-width: 1180px) {
	.star-wars-rogue-one-columns .column-1 .copy .heading-second {
		font-size: 55px;
	}
	.star-wars-rogue-one-columns .column-2 .copy .heading-second {
		font-size: 28px;
	}
	.star-wars-rogue-one-columns .column-1 .copy .heading-third,
	.star-wars-rogue-one-columns .column-2 .copy .heading-third {
		font-size: 14px;
		margin-bottom: 10px;
	}
	.star-wars-rogue-one-columns .column-1 .copy .disclaimer-copy {
		margin-bottom: 10px;
	}
}

/* Spanish only copy adjustments */
@media screen and (min-width:1024px) {
	:lang(es) .star-wars-rogue-one-columns .column-1 .copy .heading-second {

	}
	:lang(es) .star-wars-rogue-one-columns .column-1 .copy .disclaimer-copy {

	}
}

@media screen and (min-width:1180px) {
	:lang(es) .star-wars-rogue-one-columns .column-1 .copy .heading-second {

	}
	:lang(es) .star-wars-rogue-one-columns .column-1 .copy .disclaimer-copy {

	}
}

/**********************
* Alignment Styling
***********************/

/* Create padding between the two columns while still using the
collapse class */
@media screen and (min-width: 1024px) {
	.star-wars-rogue-one-columns .row.collapse > .column-1 {
		padding-right: 7px;
	}
	.star-wars-rogue-one-columns .row.collapse > .column-2 {
		padding-left: 7px;
	}
}

/**********************
Coloring
***********************

/* Create a one-off color for the homepage takeover */
.nna-carousel .ios-slider .ios-slider-items .item.background-star-wars-gray {
	background-color: #222;
	color: #fff;
}
.safety-recall .background-star-wars-gray {
	background-color: #222;
	color: #fff;
}

/* Black background */
.takeover-hse,
.takeover-hse .nna-carousel .ios-slider {
    background: #000000;
}

/* White out all copy on the page */
.takeover-hse .nna-nissan-home-pfa .current-caption,
.takeover-hse .nna-nissan-home-pfa .current-caption .heading,
.takeover-hse .nna-nissan-home-pfa .current-caption .p span,
.takeover-hse .nna-nissan-homepage-campaign .heading-first,
.takeover-hse .nna-nissan-homepage-campaign .heading-second,
.takeover-hse .nna-nissan-homepage-campaign .heading-third,
.takeover-hse .nna-nissan-homepage-campaign .campaign-rules,
.takeover-hse .nna-nissan-homepage-campaign .campaign-rules a,
.takeover-hse .homepage-takeover .homepage-takeover-copy,
.takeover-hse .homepage-takeover .homepage-takeover-copy .heading-first {
    color: #ffffff !important
}

.takeover-hse .homepage-takeover .homepage-takeover-copy .heading-first {
    margin-bottom: 0.625rem;
}
.safety-recall a.heading-third {
  color: #fff;
}