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

/*	GENERAL ---------- */

.merge > .inner,
.merge > .inner > .width-100 {
    padding-bottom: 0 !important;
}

/*	Remove space between Sections */
.merge + *,
.merge + * > div:first-child,
.merge + section > .inner,
.merge + section > .inner > div:first-child,
.merge + section > .inner > .flex-container > div:first-child,
/*	Remove space between Page Intro Section and following content */
.merge.page-intro-section + .locomotive-sections > section:first-child > .inner,
.merge.page-intro-section + .locomotive-sections > section:first-child > .inner > div:first-child,
.merge.page-intro-section + .locomotive-sections > section:first-child > .inner > .flex-container > div:first-child {
    padding-top: 0 !important;
}


/*	SEPARATOR --- */

.locomotive-sections .separator {
	padding: 15px 0 !important;
}

.locomotive-sections .separator:first-child {
	padding-top: 0 !important;
}

.locomotive-sections .separator:last-child {
	padding-bottom: 0 !important;
}

.locomotive-sections .col-2 > div > *:first-child,
.locomotive-sections .col-3 > div > *:first-child,
.locomotive-sections .col-4 > div > *:first-child {
	margin-top: 15px;
}

.locomotive-sections .col-2 > div > *:last-child,
.locomotive-sections .col-3 > div > *:last-child,
.locomotive-sections .col-4 > div > *:last-child {
	margin-bottom: 15px;
}


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

/*	BANNER ------ */

#banner {
    position: relative;
    /* max-height set in media queries */
}

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

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

#banner .bg-wrap img {
	position: absolute;
    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 picture {
	display: inline-block;
}

#banner .title,
#banner .subtitle {
	display: block;
}

#banner .link-button {
	margin-bottom: 15px;
	box-shadow: 0 0 10px rgba(0,0,0,0.25);
	font-size: 1rem;
}

/*	Carousel --- */

#cycle-banner {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
}

.banner-slide {
	float: left; /* necessary for Banner Module (i.e. not simply image) slides to be displayed */
	height: 100%;
}

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

/*	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;
	font-family: auto; /* prevent variation of button:before bullet on account of global font-family */
}


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

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

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

	/*	BANNER ------ */

	#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;
	}

	/*	Carousel --- */

	/*	Slick Arrows */

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

	/*	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 {
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		width: 100%;
	}

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

	#banner .txt-wrap .title,
	#banner .txt-wrap .subtitle {
		color: #fff;
		text-shadow: 0 0 15px rgba(0,0,0,1.0);
	}
		
	#banner .button-link {
		box-shadow: 0 0 15px rgba(0,0,0,0.75);
	}

	/*	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 320px and smaller ---------- */
@media only screen 
and (max-width : 320px) {

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

    /*	BANNER ------ */

	#banner .txt-wrap .inner > div {
		font-size: 0.875em;
    }
    
    #banner .banner-logo,
    #banner .subtitle,
    #banner .link-button {
        margin: 7.5px 0;
	}
	
	/*	Carousel --- */

	/*	Pager */

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

}


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

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

    /*	BANNER ------ */
    
    #banner .banner-logo,
    #banner .subtitle,
    #banner .link-button {
        margin: 15px 0;
	}
	
	/*	Carousel --- */

	/*	Pager */

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

}


/*	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 320px and larger ---------- */
@media only screen 
and (min-width : 320px) {

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

	/*	BANNER ------ */
	
	.banner-logo {
		display: inline-block;
	}

}


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

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

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

}


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

	.column-merge.col-2 > div:first-child {
		padding-bottom: 0;
	}

	.column-merge.col-2 > div:last-child {
		padding-top: 0;
	}

	.clearfix.int-wrap.separator > div:first-child {
		padding-top: 15px;
	}

}


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

	.clearfix.int-wrap.separator > div {
		padding-top: 15px;
	}

}


/*	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 .txt-wrap .inner > div {
		font-size: 1.125em;
	}
	
	#banner .txt-wrap .subtitle {
		margin: 30px 0;
	}

	/*	Carousel --- */

	/*	Pager */

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

}


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

	main:not(#contact) .page-intro-section p:last-child {
		margin-bottom: 45px;
	}

}


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

	main:not(#contact) .page-intro-section p:last-child {
		margin-bottom: 60px;
	}

}


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

	main:not(#contact) .page-intro-section p:last-child {
		margin-bottom: 75px;
	}

}