/*************************************************************************
Name:			banners.css
Description:	Styling for banner sections - on landing page and internal
				pages.
Date Created: 	02.12.2020 Brynn Chivers
Modified:
**************************************************************************/
:root
{
	--transform-x: 10px;
	--transform-y: 10px;
	--scale: 1.12;
}

div.banner
{
	height:		 auto;
	position:	 relative;
	text-align: center;
	overflow: hidden;
}

div.banner h1
{
	display: none;
}



/*************************************************************************
 LANDING PAGE BANNERS
**************************************************************************/
.banner .overlay
{
	position: absolute;
	top: -15px;
	left: -70px;
	z-index: 2;
	transform: matrix(1, -0.03, 0.03, 1, 0, 0);
}

.landingBannerCarousel
{
	width: 100vw;
}
.landingBannerContainer .clientImage
{
	height: 100%;
	width: 100%;

	-ms-flex-item-align: center;
	 -ms-grid-row-align: center;
			 align-self: center;

	-webkit-box-flex: 1;
			-ms-flex: 1 0 auto;
				flex: 1 0 auto;

	-o-object-fit: cover;
	   object-fit: cover;
	opacity: .4;
}

.landingBannerTile .bannerImageWrapper
{
	background: #000000;
	width: 100vw;
	height: 800px;
}


/*************************************************************************
 SHOW PAGE BANNERS
**************************************************************************/

.showPageBannerContainer
{
	height: 320px;
	width: 100vw;
	overflow: hidden;
}

.showPageBannerContainer .clientImage
{
	height: initial;
	min-width: 130%;
	min-height: 130%;
	opacity: 1;
}

.showBannerCarousel
{
	height: inherit;
}

.showBannerTile.swiper-slide
{
	overflow: hidden;
	width: 100vw;
}

.showBannerTile .showBannerImageWrapper
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 130vmax;
	height: inherit;
	-webkit-transform: scale(1) translate(0, 0) translateX(-12%);
	    -ms-transform: scale(1) translate(0, 0) translateX(-12%);
	        transform: scale(1) translate(0, 0) translateX(-12%);
	opacity: 0;
	-webkit-transition: opacity .6s, -webkit-transform 10s;
	transition: opacity .6s, -webkit-transform 10s;
	-o-transition: transform 10s, opacity .6s;
	transition: transform 10s, opacity .6s;
	transition: transform 10s, opacity .6s, -webkit-transform 10s;

}
.showBannerTile.swiper-slide-active .showBannerImageWrapper
{
	opacity: 1;
	-webkit-transform: scale(var(--scale)) translate(var(--transform-x), var(--transform-y)) translateX(-25%);
	    -ms-transform: scale(var(--scale)) translate(var(--transform-x), var(--transform-y)) translateX(-25%);
	        transform: scale(var(--scale)) translate(var(--transform-x), var(--transform-y)) translateX(-25%);
}


@media only screen and ( max-width: 1800px )
{
	div.banner div.year
	{
		font-size:	 250px;
		line-height: 250px;
	}
}

@media only screen and ( max-width: 1700px )
{
	div.banner div.year
	{
		font-size:	 230px;
		line-height: 230px;
	}
}

@media only screen and ( max-width: 1600px )
{

	div.banner div.year
	{
		bottom:			56px;
		font-size:	 210px;
		line-height: 210px;
	}
}

@media only screen and ( max-width: 1500px )
{
	div.banner div.year
	{
		font-size:	 180px;
		line-height: 180px;
	}
}

@media only screen and ( max-width: 1200px )
{
	div.banner div.year,
	div.banner div.interiorBanner.showBanner div.abbrev
	{
		margin-left:	0px;
		left:			10px;
	}
}

@media only screen and ( max-width: 1100px )
{
	div.banner div.year
	{
		bottom: 50px;
	}
	.landingBannerContainer .bannerImageWrapper
	{
		height: 750px;
	}
}

@media only screen and ( max-width: 1024px )
{
	div.banner div.year
	{
		bottom: 45px;
	}
}


@media only screen and ( max-width: 900px )
{
	div.banner div.interiorBanner.showBanner div.year,
	div.banner div.interiorBanner.showBanner div.abbrev
	{
		display: none;
	}
}

@media only screen and ( max-width: 768px )
{
	div.banner div.interiorBanner.showBanner div.year,
	div.banner div.interiorBanner.showBanner div.abbrev
	{
		display: none;
	}

	div.banner div.year
	{
		display: none;
	}

	.landingBannerContainer .bannerImageWrapper
	{
		height:			450px;
	}

	.showBannerCarousel
	{
		background: #000000;
	}
	.showPageBannerContainer .clientImage
	{
		opacity: .5;
	}

}

@media only screen and (max-width: 568px)
{
	.showPageBannerContainer
	{
		height: 240px;
	}
}