/* ======================================================================== */
/* ! GLOBAL
/* ======================================================================== */

* {
	padding:0;
	margin:0;
}

html, body {
	height:100%;
}

.skrollr-desktop body {
	height:100% !important;
}

p {
	margin: 1em 0;
}




/* ======================================================================== */
/* ! IMAGE WRAPPERS (outside body html)
/* ======================================================================== */

.parallax-image-wrapper {
	position:fixed;
	left:0;
	width:100%;
	overflow:hidden;
}

.parallax-image-wrapper-50 {
	height:50%;
	top:-50%;
}

.parallax-image-wrapper-100 {
	height:100%;
	top:-100%;
}

.parallax-image-wrapper-aspect-ratio {
	height:100%;
	top:-100%;
}




/* ======================================================================== */
/* ! IMAGE SIZES (outside body html)
/* ======================================================================== */

.parallax-image-25 {
	height:100%;
	top:0;
}

.parallax-image-50 {
	height:200%;
	top:-50%;
}

.parallax-image-75 { /* added for 75% */
	height:75%;
	top:-50%;
}

.parallax-image-100 {
	height:100%;
	top:0;
}

.parallax-image-aspect-ratio {
	height:100%;
	top:0;
}




.parallax-image.skrollable-between {
	display:block;
}

.no-skrollr .parallax-image-wrapper {
	display:none !important;
}


.gap {
	background:transparent center no-repeat;
	background-size:cover;
}

.skrollr .gap {
	background: transparent;
	/* Removed !important
	background:transparent !important;
	*/
}




/* GAPS SIZE THE PARALLAX BANNERS */
.gap-50 {
	height:50%;
}
.gap-75 {
	height:75%;
}
.gap-100 {
	height:100%;
}











/* ======================================================================== */
/* ! PARALLAX IMAGES: 
		Can adjust vertical and horizontal position in
		background position below and responsive.
		Can apply different background image behind main image in the 
		second URL - see FatChief
/* ======================================================================== */

.parallax-image {
	display:none;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	background-repeat:no-repeat;
	background-position:center;
	background-size: cover;
	transition: background .1s linear;
	/* Changed from cover to '100% auto' to change from 100% height to 100% width
	background-size:cover;
	*/
}
.parallax-image.banner-top {
	background: url('../images/Heros/Hero-1_1000x1000_@2x.jpg') no-repeat 50% 0;
	background-color: rgb(25,18,12);
	opacity: 1;
}



/* ========================= Heros > IHQ - not image sizes are defined in responsive ========================= */
/* screen images = 1728 x 964 */

.parallax-image.banner-audience-maker {
	background: url('../images/Heros-IHQ/Screen_with_border__AM__@2x.png') no-repeat 50% 0, url('../images/Heros/noise_100x100.png') repeat;
	background: url('../images/Heros-IHQ/Screen_with_border__AM__@2x.gif') no-repeat 50% 0, url('../images/Heros-IHQ/Screen_with_border__EmptyFrame__@2x.png') no-repeat 50% 0, url('../images/Heros/noise_100x100.png') repeat;
	
	/* animated gif = 1730 x 965 > !! larger than figma export png */
	xbackground: url('../images/animated_gifs/product_animation__AM_1.gif') no-repeat 50% 0, url('../images/Heros-IHQ/Screen_with_border__EmptyFrame__@2x.png') no-repeat 50% 0, url('../images/Heros/noise_100x100.png') repeat;

	background-color: #29a8c9;
}

.parallax-image.banner-insights-explorer {
	background: url('../images/Heros-IHQ/Screen_with_border__IE__@2x.png') no-repeat 50% 0, url('../images/Heros/noise_100x100.png') repeat;
	background-color: #29a8c9;
}

.parallax-image.banner-insights-store-landing {
	background: url('../images/Heros-IHQ/Screen_with_border__IS_Landing__@2x.png') no-repeat 50% 0, url('../images/Heros/noise_100x100.png') repeat;
	background-color: #695A7D;
}

.parallax-image.banner-insights-store-MxP {
	background: url('../images/Heros-IHQ/Screen_with_border__IS_MxP__@2x.png') no-repeat 50% 0, url('../images/Heros/noise_100x100.png') repeat;
	background-color: #E8766F;
}








/* ======================================================================== */
/* ! PARALLAX BODY
/* ======================================================================== */

#skrollr-body {
	height:100%;
	overflow:visible;
	position:relative;
	z-index: 1;
}