/*  ==========================================================================
	INDIE.WEB BANNER STYLES
	==========================================================================  */

/*  HEADER ---------- */

/*	BANNER ------ */

#banner:empty {
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	/* In order to be empty, #banner element MUST NOT have whitespace in it, i.e. <div id="banner"></div> (without line-break) */
}

#banner {
    position: relative;
	z-index: 1; /* ensure Banner (and any Slick Carousel items contained within) is/are displayed behind Main Nav */
    /* max-height set in media queries */
}

#banner:not(.internal) {
	overflow: hidden;
}

#banner .locomotive-section > span {
	display: none;
}

#banner:not(.internal) #banner-int-wrap {
	width: 100%;
	/* positioning for static banners */
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 1/1;
	/* max-height set in media queries */
}

#banner .bg-wrap {
	/* base styles set in .bg-wrap in base.css */
	overflow: hidden;
	/* background-color set in main.css */
}

/* pseudo element for fallback background color */
#banner:before {
	content: '';
    position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/* background-color set in main.css */
}

#banner .bg-wrap video {
	position: absolute;
	z-index: -1; /* ensure Banner Videos are displayed behind other Banner elements (e.g. Slick Dots and Slick Arrows) */
    top: 50% !important;
	min-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#banner span {
	width: 100%;
}

#banner .link-button {
	font-size: 1rem;
}

/*	Carousel --- */

#cycle-banner {
	overflow: hidden;
}

.banner-slide {
	float: left; /* necessary for Banner Module (i.e. not simply image) slides to be displayed */
	/* positioning for carousel banners */
	display: flex;
	flex-direction: column;
	justify-content: center;
	aspect-ratio: 1/1;
	/* max-height set in media queries */
}

#banner .slick-list,
#banner .slick-track {
	height: 100%;
}

#banner .slick-track {
	display: flex;
	flex-direction: row;
}

/*	Slick Arrows */

#banner .slick-arrow {
	color: #fff;
	text-shadow: 0 0 5px rgba(0,0,0,0.75);
}

/*	Pager */
/*	Other slick-dots styles set in media queries */

#banner .slick-dots {
	bottom: 0;
	z-index: 1000; /* ensure Slick Dots are displayed in front of Slick Carousel items (which start at z-index 1000 and work down) */
	font-family: auto; /* prevent variation of button:before bullet on account of global font-family */
}


/*  ==========================================================================
	INDIE.WEB BANNER MEDIA QUERIES
	==========================================================================  */

/*	Screen Sizes 240px and smaller ---------- */
@media only screen 
and (max-width : 240px) {

	/*	HEADER ----------- */

	/*	BANNER ------ */

	#banner:not(.internal),
	#banner .banner-slide {
		max-height: none !important;
	}

	#banner:not(.internal):before {
		bottom: auto;
		padding-bottom: 100%;
	}

	#banner:not(.internal) #banner-int-wrap {
		padding-bottom: 0;
	}

	#banner:not(.internal) .bg-wrap {
		position: relative;
		height: 0;
		padding-bottom: 100%;
	}

	#banner:not(.internal) #cycle-banner {
		position: relative;
	}

	.banner-slide {
		height: 100%;
		justify-content: start;
	}

	#banner .txt-white {
		color: initial;
	}

	#banner .txt-shadow * {
		text-shadow: initial;
	}

	/*	Carousel --- */

	/*	Slick Arrows */

	#banner:not(.internal) .slick-arrow {
		top: calc(50vw - 15px);
	}

	/*	Pager */

	#banner:not(.internal) .slick-dots {
		position: relative;
	}
	
	/* .pos-abs applied by JS when no .txt-wrap elements present - slick-dots remain in banner */
	#banner:not(.internal) .slick-dots.pos-abs {
		position: absolute;
	}

	/* harder shadow for better visibility against image backgrounds */
	#banner:not(.internal) .slick-dots.pos-abs li button:before {
		text-shadow: 0 0 5px rgba(0,0,0,0.75);
	}

}


/*  Screen Sizes 240px and larger ---------- */
@media only screen 
and (min-width : 240px) {

	/*	HEADER ---------- */

	/*	BANNER ------ */

	#banner:not(.internal) .txt-wrap {
		width: 100%;
	}

	#banner .banner-logo {
		width: calc(20% + 120px);
	}

	#banner .txt-white {
		color: #fff;
	}

	/*	Slick Arrows */

	#banner .slick-arrow {
		top: 50%;
	}

	/*	Carousel --- */

	/*	Pager */

	#banner .slick-dots {
		position: absolute;
	}

	/* harder shadow for better visibility against image backgrounds */
	#banner .slick-dots li button:before {
		text-shadow: 0 0 5px rgba(0,0,0,0.75);
	}

}


/*	Screen Sizes 240px - 400px ---------- */
@media only screen 
and (min-width : 240px)
and (max-width : 400px) {

	/*	HEADER ---------- */

	/*	BANNER ------ */

	#cycle-banner .txt-wrap {
		padding: 47.5px 15px;
	}

}


/*  Screen Sizes 320px and smaller ---------- */
@media only screen 
and (max-width : 320px) {

	/*	HEADER ---------- */

    /*	BANNER ------ */

	#banner .txt-wrap .inner > div {
		font-size: 0.875em;
    }

}


/*  Screen Sizes 320px and larger ---------- */
@media only screen 
and (min-width : 320px) {

	/*	HEADER ---------- */

    /*	BANNER ------ */

	.banner-logo {
		display: inline-block;
	}

}


/*  Screen Sizes 400px and smaller ---------- */
@media only screen 
and (max-width : 400px) {

	/*	HEADER ---------- */

    /*	BANNER ------ */

	#banner .txt-wrap .flex-container {
		justify-content: center;
	}

	#banner .txt-wrap * {
		text-align: center;
	}

	#banner .banner-logo,
	#banner span {
		padding: 7.5px 15px;
	}

	#banner .link-button {
		margin: 7.5px 15px;
	}

	/*	Carousel --- */

	/*	Pager */

	#banner .slick-dots {
		margin: 15px 0;
	}

}


/*  Screen Sizes 400px and larger ---------- */
@media only screen 
and (min-width : 400px) {

	/*	HEADER ---------- */

    /*	BANNER ------ */

	#banner .banner-logo,
	#banner span {
		padding: 15px;
	}

	#banner .link-button {
		margin: 15px;
	}

	/*	Carousel --- */

	/*	Pager */

	#banner .slick-dots {
		margin: 30px 0;
	}

}


/*	Screen Sizes 400px - 800px ---------- */
@media only screen 
and (min-width : 400px)
and (max-width : 800px) {

	/*	HEADER ---------- */

	/*	BANNER ------ */

	#cycle-banner .txt-wrap {
		padding: 75px 15px;
	}

}


/*	Screen Sizes 320px - 560px ---------- */
@media only screen 
and (min-width : 320px)
and (max-width : 560px) {

	/*	HEADER ----------- */

	/*	BANNER ------ */
	
	#banner .txt-wrap .inner > div {
		font-size: 1em;
	
	}

}


/*	Screen Sizes 560px and smaller ------------ */
@media only screen 
and (max-width : 560px) {

	/*  HEADER ---------- */

	/*  BANNER ------ */
	
	#banner {
		margin-top: 60px;
	}

}


/*	Screen Sizes 560px - 800px --------- */
@media only screen
and (min-width : 560px)
and (max-width : 800px) {

	/*	HEADER ---------- */

	/*	BANNER ------ */
	
	#banner {
		margin-top: 75px;
	}

	#banner .txt-wrap .inner > div {
		font-size: 1.125em;
	}

}


/*	Screen Sizes 800px and smaller ---------- */
@media only screen
and (max-width : 800px) {

	/*	HEADER ---------- */

	/*	BANNER ------ */

	/*	Carousel --- */

	/*	Pager */

	#banner .slick-arrow {
		padding: 0 15px;
	}

}


/*	Screen Sizes 800px and larger ---------- */
@media only screen
and (min-width : 800px) {

	/*	BANNER ------ */

	#banner {
		margin-top: 90px;
	}

	#cycle-banner .txt-wrap {
		padding: 75px 45px;
	}

	#banner .txt-wrap .inner > div {
		font-size: 1.125em;
	}

	/*	Carousel --- */

	/*	Pager */

	#banner .slick-arrow {
		padding: 0 30px;
	}

}


/*	Workaround for vh Bug on <= iOS7

/*	iPad with portrait orientation */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {

	#banner:not(.internal) {
		height: 844px; /* 1024px - 75px (nav bar height) - 105px (nominal height for browser bar) */
	}

}

/*	iPad with landscape orientation */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {

	#banner:not(.internal) {
		height: 573px; /* 768px - 90px (nav bar height) - 105px (nominal height for browser bar) */
	}

}