/*
 *-----------------------------------------------------------------
 * Licensed Materials - Property of IBM
 *
 * WebSphere Commerce
 *
 * (C) Copyright IBM Corp. 2013, 2014 All Rights Reserved.
 *
 * US Government Users Restricted Rights - Use, duplication or
 * disclosure restricted by GSA ADP Schedule Contract with
 * IBM Corp.
 *-----------------------------------------------------------------
 */

.homeHero {
	position: relative;
	min-height: auto;
	background-repeat: no-repeat;
    background-size: 100% 100%;
	
}

.homeHero > .homeHero-pageButton {
	display: none;
}

/* Background */

.homeHero-background {
	position: absolute;
	left: 0;
	top: 140px;
	width: 100%;
	height: 612px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center top;
	opacity: 0.75;
}
#homeHero1-background {
	background-image: url("scarf.jpg");
}
#homeHero2-background {
	background-image: url("robScarf.jpg");
}
#homeHero3-background {
	background-image: url("teenScarf.jpg");
}

/* Layered image */

.homeHero > .imageContainer {
	position: absolute;
	right: 0;
	top: 0;
	width: 35%;
}
.homeHero > .imageContainer > div {
	width: 100%;
	padding-bottom: 400%;
	background-repeat: no-repeat;
	background-size: contain;
}
#homeHero1 > .imageContainer > div {
	min-width: 240px;
	max-width: 399px;
	background-image: url("girl.png");
}
#homeHero2 > .imageContainer > div {
	min-width: 310px;
	max-width: 507px;
	background-image: url("rob.png");
}
#homeHero3 > .imageContainer > div {
	min-width: 274px;
	max-width: 446px;
	background-image: url("teen.png");
}
.homeHero > .imageContainer > img {
	width: 100%;
}
#homeHero1 > .imageContainer > img {
	min-width: 240px;
	max-width: 399px;
}
#homeHero2 > .imageContainer > img {
	min-width: 310px;
	max-width: 507px;
}
#homeHero3 > .imageContainer > img {
	min-width: 274px;
	max-width: 446px;
}

/* Text */

.homeHero > .textContainer {
	position: relative;
	margin: 0 30% 0 20%;
	padding: 3% 0 50px 0;
	color: #073769;
	font-size: 15px;
}
.homeHero > .textContainer > h3 {
	font-size: 10px;
	line-height: 1;
	text-indent: -10%;
	text-transform: uppercase;
}
.homeHero > .textContainer > .toggle {
	display: none;
}
.homeHero > .textContainer > p {
	margin: 8px 20% 8px 0;
}
.homeHero > .textContainer > .button {
	display: inline-block;
	width: auto;
	margin: 8px 0;
	padding: 5px 20px;
	border-radius: 3px;
	background-color: #c5293e;
	color: #fff;
	font-size: 20px;
	text-align: center;
}

/* 0-600px */

@media (max-width: 600px) {

	.homeHero {
		min-height: 250px;
	}

	/* Background */

	.homeHero-background {
		top: 160px;
	}

	/* Image */

	.homeHero > .imageContainer {
		width: 30%;
	}
	.homeHero > .imageContainer > div {
		padding-bottom: 600%;
	}
	#homeHero1 > .imageContainer > div {
		min-width: 170px;
		margin-left: -41px;
		background-image: url("girl_rwda.png");
	}
	#homeHero2 > .imageContainer > div {
		min-width: 187px;
		margin-left: -36px;
		background-image: url("rob_rwda.png");
	}
	#homeHero3 > .imageContainer > div {
		min-width: 180px;
		margin-left: -20px;
		background-image: url("teen_rwda.png");
	}

	/* Flattened JPG - uncomment to use */
	/*
	.homeHero-background {
		display: none;
		background-image: none !important;
	}
	.homeHero > .imageContainer {
		width: 100%;
	}
	.homeHero > .imageContainer > div {
		width: 125% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin-left: -25%;
		padding-bottom: 435px;
		background-position: right top;
		background-size: auto;
	}
	#homeHero1 > .imageContainer > div {
		background-image: url("girl-flat_rwda.jpg");
	}
	#homeHero2 > .imageContainer > div {
		background-image: url("rob-flat_rwda.jpg");
	}
	#homeHero3 > .imageContainer > div {
		background-image: url("teen-flat_rwda.jpg");
	}
	*/

	/* Text */

	.homeHero > .textContainer > .toggle {
		display: block;
		margin: 5px 0;
	}
	.homeHero > .textContainer > .toggle:before {
		content: "";
		display: inline-block;
		width: 6px;
		height: 10px;
		margin: 0 8px 0 2px;
		background-image: url("../../images/responsive/rwdUI.png");
		background-position: -221px -41px;
	}
	.homeHero > .textContainer > .toggle.selected:before {
		content: " ";
		width: 10px;
		height: 6px;
		margin: 2px 6px 2px 0;
		background-position: -241px -41px;
	}
	.homeHero > .textContainer > p {
		display: none;
		margin: 5px 20% 5px 0;
	}
	.carousel.active .homeHero > .textContainer > p {
		display: block;
	}
	.homeHero > .textContainer > .button {
		margin: 5px 0;
	}

}

/* 0-520px */

@media (max-width: 520px) {

	/* Flattened JPG - uncomment to use */
	/*
	.homeHero > .imageContainer > div {
		background-size: auto 385px;
		background-position: 75% 0;
	}
	*/

	.homeHero > .textContainer {
		margin-left: 10%;
		font-size: 12px;
	}
}

/* Heading styles */

.homeHero .l, #homeHero3 .s { color: #0098d9; }
.homeHero .s { font-size: 390%; }
.homeHero .m { font-size: 780%; }
.homeHero .l { font-size: 960%; }
#homeHero2 .s { font-size: 370%; }
#homeHero2 .m { font-size: 820%; }
#homeHero2 .l { font-size: 820%; }
#homeHero3 .s { font-size: 400%; }
#homeHero3 .m { font-size: 820%; }
#homeHero3 .l { font-size: 820%; }
@media (max-width: 520px) {
	.homeHero .s { font-size: 170%; }
	.homeHero .m { font-size: 340%; }
	.homeHero .l { font-size: 390%; }
	#homeHero2 .s { font-size: 170%; }
	#homeHero2 .m { font-size: 360%; }
	#homeHero2 .l { font-size: 420%; }
	#homeHero3 .s { font-size: 170%; }
	#homeHero3 .m { font-size: 320%; }
	#homeHero3 .l { font-size: 370%; }
}
@media (min-width: 521px) and (max-width: 600px) {
	.homeHero .s { font-size: 300%; }
	.homeHero .m { font-size: 480%; }
	.homeHero .l { font-size: 530%; }
	#homeHero2 .s { font-size: 180%; }
	#homeHero2 .m { font-size: 370%; }
	#homeHero2 .l { font-size: 420%; }
	#homeHero3 .s { font-size: 200%; }
	#homeHero3 .m { font-size: 400%; }
	#homeHero3 .l { font-size: 450%; }
}
@media (min-width: 601px) and (max-width: 770px) {
	.homeHero .s { font-size: 330%; }
	.homeHero .m { font-size: 570%; }
	.homeHero .l { font-size: 680%; }
	#homeHero2 .s { font-size: 210%; }
	#homeHero2 .m { font-size: 430%; }
	#homeHero2 .l { font-size: 430%; }
	#homeHero3 .s { font-size: 250%; }
	#homeHero3 .m { font-size: 470%; }
	#homeHero3 .l { font-size: 470%; }
}
@media (min-width: 771px) and (max-width: 952px) {
	.homeHero .s { font-size: 370%; }
	.homeHero .m { font-size: 700%; }
	.homeHero .l { font-size: 790%; }
	#homeHero2 .s { font-size: 270%; }
	#homeHero2 .m { font-size: 580%; }
	#homeHero2 .l { font-size: 580%; }
	#homeHero3 .s { font-size: 320%; }
	#homeHero3 .m { font-size: 620%; }
	#homeHero3 .l { font-size: 690%; }
}
@media (min-width: 953px) and (max-width: 1133px) {
	#homeHero2 .s { font-size: 270%; }
	#homeHero2 .m { font-size: 720%; }
	#homeHero2 .l { font-size: 720%; }
}
@media (min-width: 1281px) {
	.homeHero .s { font-size: 400%; }
	.homeHero .m { font-size: 950%; }
	.homeHero .l { font-size: 990%; }
	#homeHero3 .s { font-size: 400%; }
	#homeHero3 .m { font-size: 920%; }
	#homeHero3 .l { font-size: 990%; }
}

/* Language-specific overrides */

html[lang="fr"] .homeHero > .textContainer > h3 { font-size: 7px; }
@media (max-width: 600px) {
	html[lang="fr"] .homeHero > .textContainer > .button { font-size: 14px; }
}

/* RTL language overrides */

html[lang="ar"] .homeHero-background,
html[lang="he"] .homeHero-background {
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	filter: fliph();
}
html[lang="ar"] .homeHero > .imageContainer,
html[lang="he"] .homeHero > .imageContainer {
	left: 0;
	right: auto;
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	filter: fliph();
}
html[lang="ar"] .homeHero > .imageContainer > div,
html[lang="he"] .homeHero > .imageContainer > div {
	float: left;
}
html[lang="ar"] .homeHero > .textContainer,
html[lang="he"] .homeHero > .textContainer {
	position: relative;
	margin: 0 20% 0 30%;
}
html[lang="ar"] .homeHero > .textContainer > p,
html[lang="he"] .homeHero > .textContainer > p {
	margin: 8px 0 8px 20%;
}

@media (max-width: 600px) {
	html[lang="ar"] .homeHero > .textContainer > .toggle:before,
	html[lang="he"] .homeHero > .textContainer > .toggle:before {
		margin: 0 2px 0 8px;
		background-image: url("../../images/responsive/rwdUI_rtl.png");
	}
	html[lang="ar"] .homeHero > .textContainer > .toggle.selected:before,
	html[lang="he"] .homeHero > .textContainer > .toggle.selected:before {
		margin: 2px 0 2px 6px;
	}
	html[lang="ar"] .homeHero > .textContainer > p,
	html[lang="he"] .homeHero > .textContainer > p {
		margin: 5px 0 5px 20%;
	}
}

/* High-resolution displays */

@media (-webkit-device-pixel-ratio: 2) and (max-width: 600px) {
	.homeHero > .textContainer > .toggle:before {
		background-image: url("../../images/responsive/rwdUI@2x.png");
		background-size: 300px 400px;
	}
	html[lang="ar"] .homeHero > .textContainer > .toggle:before,
	html[lang="he"] .homeHero > .textContainer > .toggle:before {
		background-image: url("../../images/responsive/rwdUI_rtl@2x.png");
	}
}