@charset "utf-8";

/*home banner size? 1176 by 446*/

.hero-banner
{
	position: absolute;
	top: 0rem;
	width: 100%;
	height: 100%;
}

.landing .hero-banner, .advanced hero-banner
{
	border-radius: 0.5rem 0.5rem 0rem 0rem;
}

.hero-banner .banner-body
{
	width: 100%;
	border-radius: inherit;
}

.hero-banner .banner-body .banner-image
{
	border-radius: inherit;
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	background-size: auto 100%;
	background-position: center center;
	background-repeat: no-repeat;
	box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.25);
	z-index: 40;
	opacity: 0.0;
	transition: opacity 1.0s;
}

.hero-banner .banner-body .banner-image.wide {display: block;}
.hero-banner .banner-body .banner-image.mid {display: none;}
.hero-banner .banner-body .banner-image.narrow {display: none;}

.hero-banner .banner-body.shown .banner-image
{
	opacity: 1.0;
}

.hero-banner .banner-body .banner-callout
{
    position: absolute;
    font-family: 'Segoe UI', 'Lucida Grande', Calibri, Helvetica, Arial, sans-serif;
    color: #fff;
	pointer-events: none;
    z-index: 50;
    width: 24rem;
    opacity: 0.0;
    transition: opacity 1.0s, top 0.5s;
}

.landing .banner-body .banner-callout
{
	width: 18rem;
}

@media screen and (min-width:0\0)
{
	.hero-banner .banner-callout
	{
		display: none;
	}
}

.hero-banner .banner-body.shown .banner-callout
{
	pointer-events: all;
	opacity: 1.0;
	display: block;
}

.landing .hero-banner .banner-callout.blank, .home .banner-body .banner-callout.blank, .advanced .banner-body .banner-callout.blank
{
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.landing .banner-body.shown .banner-callout.blank, .home .banner-body.shown .banner-callout.blank, .advanced .banner-body.shown .banner-callout.blank
{
	opacity: 0.125;
}

.hero-body.single .hero-banner .banner-callout.blank {display: none;}
.hero-body.all-images .hero-banner .banner-callout.blank {display: none;}

.banner-callout h1, .banner-callout h2
{
	margin: 0;
	text-align: center;
	font-size: 1.4rem;
	line-height: 2rem;
	padding: 0.25rem 0;
	border-top: 4px double #999;
	border-bottom: 4px double #999;
	letter-spacing: 1px;
}

.banner-callout .callout-box
{
    padding: 0.75rem 0.75rem 0 0.75rem;
    background-color: rgba(0,0,0,0.6);
    border-radius: 0.25rem;
}

.banner-callout .callout-text
{
    padding: 0.75rem 0;
	font-size: 0.8125rem;
    letter-spacing: 1px;
}

.banner-callout .callout-text p {margin: 0 0 1rem 0;}
.banner-callout .callout-text p:last-child {margin-bottom: 0;}

.banner-callout .callout-text a{font-size: 0.8125rem; font-weight: normal; color: #ffd580;}
.banner-callout .callout-text a:visited{color: #ffd580;}
.banner-callout .callout-text a:active{color: #ffd580;}
.banner-callout .callout-text a:hover{color: #b39559;}

.banner-callout .callout-text ul {margin:1rem 0 1rem 0;padding-left:2rem;}
.banner-callout .callout-text ol {margin:1rem 0 1rem 0;padding-left:2rem;}

.banner-callout .banner-ref
{
	margin: 0;
}

.banner-callout .banner-ref a
{
	display: inline-block;
	position: relative;
	text-decoration: none;
	color: #fff;
	font-size: 1rem;
    font-weight: bold;
	line-height: 1.5rem;
	letter-spacing: 1px;
	margin: 0.5rem 2.5rem 0 1rem;
	padding: 0.25rem 0.5rem 0.25rem 0.5rem;
	border-radius: 0.25rem 0 0 0.25rem;
	background-color: rgba(0,0,0,0.6);
	transition: color 0.25s, background-color 0.25s;
}
.banner-callout .banner-ref a:visited {color: #fff; text-decoration: none;}
.banner-callout .banner-ref a:active {color: #fff; text-decoration: none;}
.banner-callout .banner-ref a:hover {color: #fff; background-color: rgba(0,0,0,0.45); text-decoration: none;}

.banner-callout .banner-ref a .hero-link
{
    padding: 0 0.5rem;
    border-left: 4px double #999;
    border-right: 4px double #999;
	transition: border 0.25s;
}

.banner-callout .banner-ref a:hover .hero-link
{
    border-left: 4px double #fff;
    border-right: 4px double #fff;
}

.banner-callout .banner-ref a .tri
{
    position: absolute;
    left: 100%;
    top: 0;
	border-right: none;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-left: 1.5rem solid rgba(0,0,0,0.6);
	transition: border-left 0.25s;
}

.banner-callout .banner-ref a:hover .tri {border-left: 1.5rem solid rgba(0,0,0,0.45);}

.hero-banner .vid-overlay
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.25);
	z-index: 10;
}

.hero-banner .banner-body .banner-image.vid
{
	box-shadow: none;
	overflow: hidden;
}

.hero-banner .banner-body .banner-image.vid video
{
	position:absolute;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	opacity: 0.0;
	transition: opacity 2s;
}

.hero-banner .banner-body .banner-image.vid video.up {opacity: 1.0;}

#benedictine-body.touch .hero-banner .banner-body .banner-image.vid video {display: none;}

#benedictine-body:not(.touch) .hero-banner .banner-body .banner-image.vid {background-image: none !important;}

@media (min-width: 1025px)
{
	.landing .banner-body.shown .banner-callout.blank, .home .banner-body.shown .banner-callout.blank, .advanced .banner-body.shown .banner-callout.blank
	{
		z-index: -50;
		opacity: 0.0;
	}
	
	.banner-callout.right .banner-ref {text-align: right;}
	.banner-callout.center .banner-ref {text-align: center;}

	.banner-callout.right .banner-ref a .tri
	{
		position: absolute;
		left: auto;
		right: 100%;
		top: 0;
		border-left: none;
		border-top: 1rem solid transparent;
		border-bottom: 1rem solid transparent;
		border-right: 1.5rem solid rgba(0,0,0,0.6);
		transition: border-right 0.25s;
	}
	
	.banner-callout.center .banner-ref a .tri {display: none;}
	
	.banner-callout.right .banner-ref a:hover .tri {border-left: none; border-right: 1.5rem solid rgba(0,0,0,0.45);}

	.banner-callout.right .banner-ref a {margin: 0.5rem 1rem 0 2.5rem; border-radius: 0 0.25rem 0.25rem 0;}
	.banner-callout.center .banner-ref a {margin: 0.5rem 1rem 0 1rem; border-radius: 0.25rem;}

	.landing .banner-callout.left .banner-ref a {margin: 0.5rem 2.5rem 0 0.5rem;}
	.landing .banner-callout.right .banner-ref a {margin: 0.5rem 0.5rem 0 0.5rem;}

	.home .hero-banner .banner-body .banner-callout {top: calc(15% + 0.5rem);}
	.home .hero-banner .banner-body.shown .banner-callout {top: 15%;}
	.home .hero-banner .banner-body .banner-callout.center {top: 0; left: 0; right: 0; margin: auto;}
	.home .hero-banner .banner-callout.center .callout-box {padding-top: 1.25rem;}
	.home .hero-banner .banner-body.shown .banner-callout.center {top: -0.5rem;}
	.home .hero-banner .banner-callout.left {left: -0.5rem;}
	.home .hero-banner .banner-callout.left .callout-box {padding-left: 1.25rem;}
	.home .hero-banner .banner-callout.right {right: -0.5rem;}
	.home .hero-banner .banner-callout.right .callout-box {padding-right: 1.25rem;}
	
	.landing .hero-banner .banner-body .banner-callout {top: 0;}
	.landing .hero-banner .banner-callout .callout-box {padding-top: 1.25rem;}
	.landing .hero-banner .banner-body.shown .banner-callout {top: -0.5rem;}
	.landing .hero-banner .banner-body .banner-callout.left {left: 2.0rem;}
	.landing .hero-banner .banner-body .banner-callout.right {right: 2.0rem;}
	.landing .hero-banner .banner-body .banner-callout.leftish {left: calc(33% - 9rem);}
	.landing .hero-banner .banner-body .banner-callout.rightish {right: calc(33% - 9rem);}
	.landing .hero-banner .banner-body .banner-callout.center
	{
		margin-left: auto;
	 	margin-right: auto;
		right: 0;
		left: 0;
	}
}

@media (max-width: 1024px)
{
	.home .hero-banner .banner-body .banner-callout
	{
		top: 100%;
		left: 0.5rem;
		width: calc(100% - 1.0rem);
		padding: 0;
		background-color: rgba(0,0,0,0.6);
		border-radius: 0rem 0rem 2rem 2rem;
	}
	
	.landing .hero-banner .banner-body .banner-callout
	{
		top: 100%;
		left: 0;
		width: 100%;
		padding: 0;
		background-color: rgba(0,0,0,0.6);
		border-radius: 0rem 0rem 0.5rem 0.5rem;
	}
	
	.hero-banner .banner-callout .callout-box {background-color: transparent;}
	.hero-banner .banner-callout .banner-ref {text-align: center;}
	
	.hero-banner .banner-body .banner-callout .banner-ref a {margin-bottom: 1rem; background-color: rgba(0,0,0,0.25);}
	.hero-banner .banner-body .banner-callout .banner-ref a:hover {background-color: rgba(0,0,0,0.1);}
	
	.banner-callout .banner-ref a .tri {border-left: 1.5rem solid rgba(0,0,0,0.25);}
	.banner-callout .banner-ref a:hover .tri {border-left: 1.5rem solid rgba(0,0,0,0.1);}
	
	/*
	.hero-banner .banner-callout .callout-box {width: calc(100% - 10rem);}
	.hero-banner .banner-callout .banner-ref {position: absolute; top: 0; left: calc(100% - 9.5rem); width: 10rem; height: 100%; text-align: left;}
	.hero-banner .banner-body .banner-callout .banner-ref a {margin: 0; padding: 0.75rem; height: 100%; width: 8rem; border-radius:0.25rem 0 0.25rem 0.25rem;}
	.hero-banner .banner-body .banner-callout .banner-ref a .hero-link {display: block; text-align: center; height: 100%;}
	.hero-banner .banner-callout.right .banner-ref a .tri, .hero-banner .banner-callout.center .banner-ref a .tri
	{
		display: block;
		left: 100%;
		border-right: none;
		border-top: 1rem solid transparent;
		border-bottom: 1rem solid transparent;
		border-left: 1.5rem solid rgba(0,0,0,0.6);
		transition: border-left 0.25s;
	}
	
	.hero-banner .banner-callout.right .banner-ref a:hover .tri, .hero-banner .banner-callout.center .banner-ref a:hover .tri
	{
		border-right: none;
		border-left: 1.5rem solid rgba(80,80,80,0.6);
	}
	*/
}

@media (max-width: 640px)
{
	.home .hero-banner .banner-body .banner-callout {left: 0.25rem; width: calc(100% - 0.5rem);}
	.hero-banner .banner-callout .callout-box {padding-top: 4rem;}
	.hero-body.single .hero-banner .banner-callout .callout-box {padding-top: 0.75rem;}
	
	.hero-banner .banner-body .banner-image.wide {display: none;}
	.hero-banner .banner-body .banner-image.mid {display: block;}
	.hero-banner .banner-body .banner-image.narrow {display: none;}
	
	.hero-banner .banner-body .banner-image.left-4 {background-position: left center;}
	.hero-banner .banner-body .banner-image.left-3 {background-position: 12.5% center;}
	.hero-banner .banner-body .banner-image.left-2 {background-position: 25% center;}
	.hero-banner .banner-body .banner-image.left-1 {background-position: 37.5% center;}
	.hero-banner .banner-body .banner-image.left-0 {background-position: center center;}
	.hero-banner .banner-body .banner-image.center {background-position: center center;}
	.hero-banner .banner-body .banner-image.right-0 {background-position: center center;}
	.hero-banner .banner-body .banner-image.right-1 {background-position: 62.5% center;}
	.hero-banner .banner-body .banner-image.right-2 {background-position: 75% center;}
	.hero-banner .banner-body .banner-image.right-3 {background-position: 87.5% center;}
	.hero-banner .banner-body .banner-image.right-4 {background-position: right center;}
	
	.hero-banner .banner-body .banner-image.medium-left-4 {background-position: left center;}
	.hero-banner .banner-body .banner-image.medium-left-3 {background-position: 12.5% center;}
	.hero-banner .banner-body .banner-image.medium-left-2 {background-position: 25% center;}
	.hero-banner .banner-body .banner-image.medium-left-1 {background-position: 37.5% center;}
	.hero-banner .banner-body .banner-image.medium-left-0 {background-position: center center;}
	.hero-banner .banner-body .banner-image.medium-center {background-position: center center;}
	.hero-banner .banner-body .banner-image.medium-right-0 {background-position: center center;}
	.hero-banner .banner-body .banner-image.medium-right-1 {background-position: 62.5% center;}
	.hero-banner .banner-body .banner-image.medium-right-2 {background-position: 75% center;}
	.hero-banner .banner-body .banner-image.medium-right-3 {background-position: 87.5% center;}
	.hero-banner .banner-body .banner-image.medium-right-4 {background-position: right center;}
	
	/*.hero-banner .banner-body .banner-callout {top: calc(100% + 0.5rem); left: 0; width: 100%;}
	.hero-banner .banner-callout .callout-box {width: 100%; padding-top: 4rem;}
	.hero-banner .banner-callout .banner-ref {position: static; width: auto; height: auto;}
	.hero-banner .banner-body .banner-callout .banner-ref a
	{
		margin: 0.5rem 0 0 0.5rem;
		padding: 0.25rem 0.5rem 0.25rem 0.5rem;
		height: auto;
		width: calc(100% - 2.5rem);
		border-radius:0.25rem 0 0 0.25rem;
		text-align: center;
    
	}
	.hero-banner .banner-callout .banner-ref a .hero-link {display: inline; text-align: left; height: auto;}*/
}

@media (max-width: 480px)
{
	.hero-banner .banner-body .banner-image.wide {display: none;}
	.hero-banner .banner-body .banner-image.mid {display: none;}
	.hero-banner .banner-body .banner-image.narrow {display: block;}

	.hero-banner .banner-body .banner-image.left-4 {background-position: left center;}
	.hero-banner .banner-body .banner-image.left-3 {background-position: 12.5% center;}
	.hero-banner .banner-body .banner-image.left-2 {background-position: 25% center;}
	.hero-banner .banner-body .banner-image.left-1 {background-position: 37.5% center;}
	.hero-banner .banner-body .banner-image.left-0 {background-position: center center;}
	.hero-banner .banner-body .banner-image.center {background-position: center center;}
	.hero-banner .banner-body .banner-image.right-0 {background-position: center center;}
	.hero-banner .banner-body .banner-image.right-1 {background-position: 62.5% center;}
	.hero-banner .banner-body .banner-image.right-2 {background-position: 75% center;}
	.hero-banner .banner-body .banner-image.right-3 {background-position: 87.5% center;}
	.hero-banner .banner-body .banner-image.right-4 {background-position: right center;}
	
	.hero-banner .banner-body .banner-image.narrow-left-4 {background-position: left center;}
	.hero-banner .banner-body .banner-image.narrow-left-3 {background-position: 12.5% center;}
	.hero-banner .banner-body .banner-image.narrow-left-2 {background-position: 25% center;}
	.hero-banner .banner-body .banner-image.narrow-left-1 {background-position: 37.5% center;}
	.hero-banner .banner-body .banner-image.narrow-left-0 {background-position: center center;}
	.hero-banner .banner-body .banner-image.narrow-center {background-position: center center;}
	.hero-banner .banner-body .banner-image.narrow-right-0 {background-position: center center;}
	.hero-banner .banner-body .banner-image.narrow-right-1 {background-position: 62.5% center;}
	.hero-banner .banner-body .banner-image.narrow-right-2 {background-position: 75% center;}
	.hero-banner .banner-body .banner-image.narrow-right-3 {background-position: 87.5% center;}
	.hero-banner .banner-body .banner-image.narrow-right-4 {background-position: right center;}
}