/* ======================================================================== */
/* ! PARALLAX BACKGROUNDS
/* ======================================================================== */


/* -- FIRST BACKGROUND SIZE = FOREGROUND / SECOND = NOISE/OTHER BG USED -- */
/* -- Adjust background vertical position with background position -- */
@media screen and (min-width: 1728px) {

	.parallax-image.banner-top {
		background-size: 100% auto;
		background-position: 50% 35%;
	}

	/* NEW IMAGES - IHQ */
	.parallax-image.banner-audience-maker,
	.parallax-image.banner-insights-explorer,
	.parallax-image.banner-insights-store-landing,
	.parallax-image.banner-insights-store-MxP {
		background-size: 1400px auto, auto auto;
		background-position: 50% 50%;
	}

	/* if using animated gif - need to apply the opacity background */
	.parallax-image.banner-audience-maker {
		background-size: 1400px auto, 1400px auto, auto auto;
		background-position: 50% 50%;
	}


	.gap-75 {
		height: 75%;
	}



	/* ======= Aspect ratio sizing ======= */
	
	.gap-aspect-ratio {
		xheight: 75%;

		/* option 1 */
		aspect-ratio: 16 / 9;

		/* option 2 */
		xpadding-top: 56.25%;
	}



}







/* -- FIRST BACKGROUND SIZE = FOREGROUND / SECOND = NOISE/OTHER BG USED -- */
/* -- Adjust background vertical position with background position -- */
@media (min-width: 1401px) and (max-width: 1727px) {

	.parallax-image.banner-top {
		background-size: 100% auto;
		background-position: 50% 35%;
	}

	/* NEW IMAGES - IHQ */
	.parallax-image.banner-audience-maker,
	.parallax-image.banner-insights-explorer,
	.parallax-image.banner-insights-store-landing,
	.parallax-image.banner-insights-store-MxP {
		background-size: 82% auto, auto auto;
		background-position: 50% 50%;
	}

	/* if using animated gif - need to apply the opacity background */
	.parallax-image.banner-audience-maker {
		background-size: 82% auto, 82% auto, auto auto;
		background-position: 50% 50%;
	}
}


@media (min-width: 980px) and (max-width: 1400px) {

	.parallax-image.banner-top {
		background-size: 100% auto;
		background-position: 50% 60%;
	}

	/* NEW IMAGES - IHQ */
	.parallax-image.banner-audience-maker,
	.parallax-image.banner-insights-explorer,
	.parallax-image.banner-insights-store-landing,
	.parallax-image.banner-insights-store-MxP {
		background-size: 82% auto, auto auto;
		background-position: 50% 50%;
	}

	/* if using animated gif - need to apply the opacity background */
	.parallax-image.banner-audience-maker {
		background-size: 82% auto, 82% auto, auto auto;
		background-position: 50% 50%;
	}
}


@media (max-width: 979px) {

	.parallax-image.banner-top {
		background-size: 120% auto;
		background-position: 50% 80%;
	}

	/* NEW IMAGES - IHQ */
	.parallax-image.banner-audience-maker,
	.parallax-image.banner-insights-explorer,
	.parallax-image.banner-insights-store-landing,
	.parallax-image.banner-insights-store-MxP {
		background-size: 82% auto, auto auto;
		background-position: 50% 50%;
	}

	/* if using animated gif - need to apply the opacity background */
	.parallax-image.banner-audience-maker {
		background-size: 82% auto, 82% auto, auto auto;
		background-position: 50% 50%;
	}
}




/* ======================================================================== */
/* ! PARALLAX TITLE BOX
/* ======================================================================== */

@media (min-width: 1921px) and (max-width: 2600px) {

	.title-container {
		margin-left: 65%;
    	width: calc(35% - 10px);
    }

    .parallax-title h1 {
    	font-size: 72px;
    	line-height: 80px;
    }
}

@media (min-width: 1661px) and (max-width: 1920px) {

	.title-container {
		margin-left: 65%;
    	width: calc(35% - 10px);
    }

    .parallax-title h1 {
    	font-size: 72px;
    	line-height: 84px;
    }
}

@media (min-width: 1441px) and (max-width: 1660px) {

	.title-container {
		margin-left: 55%;
    	width: calc(45% - 10px);
    }

    .parallax-title h1 {
    	font-size: 64px;
    	line-height:76px;
    }
}

@media (min-width: 961px) and (max-width: 1440px) {

	.title-container {
		margin-left: 60%;
    	width: calc(40% - 10px);
    }

    .parallax-title h1 {
    	font-size: 56px;
    	line-height: 68px;
    }
}

@media (max-width: 960px) {
	.title-container {
		margin-left: 15%;
    	width: calc(85% - 10px);
    	max-width: 480px;
    }

    .parallax-title h1 {
    	font-size: 44px;
    	line-height: 56px;
    }
    .post__overlay .post_description {
    	display: none;
  }
}