/*
Editing notes

To change slider image padding/margin/border, change the rules n
.sliderOuter img {}

To change the slider active slide border rules change
.sliderActiveBorder .activeLI img {}
*/


/* special cases for ie8 in front-end edit mode */
.mce-content-body .jsGallery  .slide {display:none;}
.mce-content-body .jsGallery .slide:nth-of-type(1) {display:block;}
.mce-content-body .jsGallery input {display:none;}
.mce-content-body .jsGallery .html-caption {display:none;}
.jsGallery {
	width: 100%;  /* changed by WG */
	margin: 0 auto;
	clear:both;
	/*display:grid;*/
}

#top .jsGallery {
	
}

.jsGallery .sliderWrap{
    display: block;
    margin-top: 20px;
}

/* ####################################################### */
/*                         Gallery                         */
/* ####################################################### */
.jsGallery .singleGallery a {
    display: block;
    text-align: center;
}

.jsGallery .galleryWrap .slide picture { top: unset}

.jsGallery .galleryNav { 
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    display:none;
}

.jsGallery .galleryNav a {
	display:block;
    position: absolute;
    height: 100%;
	width: 18%;
	z-index: 500;
	transition: all 100ms;
	-webkit-transition: all 100ms; /* Safari */
}
.jsGallery .galleryNav a span {
	width: 20%;
	opacity:.1;
	transition: all 100ms;
	-webkit-transition: all 100ms; /* Safari */
}
.jsGallery .galleryNav img {
	xbackground: none repeat scroll 0 0 white;
    xborder-radius: 0 5px 5px 0;
    bottom: 0;
    margin: auto;
    padding: 10%;
    position: absolute;
    top: 0;
}
.jsGallery .galleryNav .next img {
	border-radius: 5px 0 0 5px;
	right:0;
}

.jsGallery .galleryWrap .galleryNav a span {
	-webkit-transition: opacity .35s ease-in-out;
	-moz-transition: opacity .35s ease-in-out;
	-ms-transition: opacity .35s ease-in-out;
	-o-transition: opacity .35s ease-in-out;
	transition: opacity .35s ease-in-out;
}	

.jsGallery .galleryWrap:hover .galleryNav a span {
	opacity:.3;
}
.jsGallery .galleryWrap .galleryNav a:hover span {
	opacity: 1;
}

.jsGallery .galleryNav .prev {
    padding-right: 10%;
}
.jsGallery .galleryNav .prev:hover {
}
.jsGallery .galleryNav .next:hover {
}

.jsGallery .galleryNav .next {
    padding-left: 10%;
    right: 0;
	border-radius: 0px 5px 5px 0px; 
	-moz-border-radius: 0px 5px 5px 0px; 
	-webkit-border-radius: 0px 5px 5px 0px; 
}
.jsGallery .galleryNav .prev span, .jsGallery .galleryNav .next span {
    bottom: 0;
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
}
.jsGallery .galleryNav .next span {
	right: 0;
}

.jsGallery .explodable .gallery_group {
	cursor:url('images/Zoom-In.png'),auto;
}

/* gallery dots  */
.dot-wrap {
	position: absolute;
	bottom: 5%;
	width:100%;
	text-align: center;
	xxdisplay: none;
}

.dot-wrap .dot-inner{
	padding: 1%;
	xxbackground: black;
	display: inline;
	opacity: 0.6;
}

.dot-wrap .click-dots {
    position: relative;
    display: inline-block;
    margin: 2px;
    cursor: pointer;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border: 2px solid white;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
	bottom:1px;
}

.dot-wrap .click-dots[data-status="active"],
.dot-wrap .click-dots:hover {
    background-color: silver;
    height: 12px;
    width: 12px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
}

/* ####################################################### */
/*                          Slider                         */
/* ####################################################### */


/** Thumb Navigation Images **/
/* Main wrapper for the images, width must have a value set (greater than the minimum size), although js will change it later */
.jsGallery .gallerySliderWrap{
    xdisplay: none;
	margin: 1em 5.5%;
}
.jsGallery .gallerySliderWrap .gallerySliderInner {
    border: 1px solid #898989;
    height: 6.8em;
    margin: 0;
    overflow: hidden;
    position: relative;
    width: 100%; 
	
}
.jsGallery .gallerySliderWrap .gallerySliderOuter {
    left: 0;
    margin: 1em 0;
    padding: 0;
    position: absolute;
	width: 9999999px;
	
}

.jsGallery .gallerySliderWrap ul {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.jsGallery .gallerySliderWrap ul:after {
  content: "";
  display: table;
  clear: both;
}
.jsGallery .gallerySliderWrap li {
    display: inline;
}
/* style the look of the thumbs' borders */
.jsGallery .gallerySliderWrap li {
    display: inline-block;
    float: left;
    margin: 0 10px;
    position: relative;
	outline: 0;
	height:75px;
	}
.jsGallery .gallerySliderWrap li:first-child {
    margin-left: 0;
}

.jsGallery .gallerySliderWrap li > a{

}

.jsGallery .gallerySliderWrap li img {
	border: 2px solid #000000;

}
.jsGallery .gallerySliderWrap li:hover img, .jsGallery .gallerySliderWrap li.activeLI img {
	border: 2px solid #E13766;
}

/* set the width of the thumbs*/

.jsGallery .gallerySliderWrap li	{}

.jsGallery .gallerySliderWrap ul {
    display: inline-block;
}	
.jsGallery .gallerySliderWrap.stackedNav li {
	min-width: 3em;
}

.jsGallery .gallerySliderWrap.stackedNav li:first-child {

}

.sliderWrap {
	width:100%;
	position:relative;
	overflow:hidden;
	
	
	/* 
	background:blue;
	*/
}

.sliderOuter {
	margin:0 2em;
	overflow:hidden;
	position:relative;
}

.sliderWrap ul {
	list-style-type: none;
    padding: 0px;
    margin: 0px;
	width:99999999px;
} 
.sliderWrap ul li{
	display: inline-block;
	margin:0;	
}
.sliderOuter img {
	border:1px solid transparent;
	margin:3px;
	vertical-align: baseline;
	padding:3px;
	visibility: hidden;
}
.sliderImageBorder .sliderOuter img {
	border:1px solid gray;
}
.sliderWrap .sliderPlaceholder{
	visibility:hidden;
	
	/* tmp, testing */
	display:none;
}


.slider-left, .slider-right {
	position:absolute;
	top:0;
	bottom:0;
	width: 2em;
	margin: auto;
	display:none;
	
	placeholderstyles:;
	xbackground:gray;
}
.slider-left {
	left:0;
}
.slider-right {
	right:0;
}

.slider-left img, .slider-right img {
	margin:auto;
	position:absolute;
	top:0;
	bottom:0;
	background:white;
	opacity:.9;
	padding-top: 1em;
	padding-bottom: 1em;
}
.slider-left img{
	left:0;
	padding-right:.5em;
	border-bottom-right-radius:5px;
	border-top-right-radius:5px;
}
.slider-right img{
	right:0;
	padding-left:.5em;
	border-bottom-left-radius:5px;
	border-top-left-radius:5px;
}

.frontSlide {
	xbackground:purple;
}

.sliderImageBorder img,
.sliderActiveBorder.sliderActivated .activeLI img,
.sliderWrap ul li:hover a img { 
	
	border:1px solid #0f75bc;
}

.sliderImageBorder .sliderOuter img:hover {
    border: 1px solid #0f75bc;
	cursor: pointer;
}

@media (min-width: 1px) and (max-width: 549px) {

	/* #top .jsGallery {
		margin-top: 85px;
	} */

}

@media (min-width: 1px) and (max-width: 899px) {
	
	#top .jsGallery {
		margin-top: 100px;
	}
	
}

/* @media (min-width: 550px) and (max-width: 899px) {
	
	#top .jsGallery {
		margin-top: 160px;
	}
}

@media only screen and (max-width: 479px) {
	
	#top .jsGallery {
		margin-top: 100px;
	}
} */


@media screen and (min-width: 900px) {
	
	/* #top .jsGallery {
		margin-top: 150px;
	} */
	
}


/**************************           Caption Styles     ******************************/			





/* inset caption styles used in gallery */
.jsGallery .insetCaption {
	background: #999;
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0) transparent;
	/* RGBa with 0.6 opacity */
	background: rgba(0, 0, 0, 0.4);
	bottom: -1px;
    color: white;
    opacity: 0.8;
    padding-bottom: 0.5%;
    padding-top: 2.5%;
    position: absolute;
    text-align: center;
    width: 100%;
	display:none;
}

.jsGallery .insetCaption h3{
	color:white;
}

.jsGallery .activeSlide .insetCaption{
	display:inline-block;
}

/* inset html styles  used in banners */
.jsGallery .insetLarge,
.jsGallery .insetSmall {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	display:none;
}

@media (max-width:480px){
	/* .jsGallery .activeSlide .insetSmall {
		display:inline-block;
	} */
}

@media (min-width:1px){
	.jsGallery .activeSlide .insetLarge {
		display:inline-block;
		width: 100%;
		
	}
}




/************* banner *****************/

/* allow banner to be larger than image width */
.jsGallery.banner_gallery .galleryWrap .slide > picture > img, .jsGallery.banner_gallery .galleryWrap .slide > a > picture > img{
	width: 100%;
}

/*******************custom banner text overlays*******************************************/

.banner1Container {
	
	margin: 0 auto 0 4.2%;
	
}




.insetLarge .banner1Title {
	font-size: 2.455em;
	font-weight: 700;
	color: #2b2828;
	text-transform: uppercase;
	line-height: .9em;
	
	margin-bottom: .7em;
	letter-spacing: 1px;
	}
	
.insetLarge .banner2Title {
	font-size: 2.455em;
	font-weight: 700;
	color: #ffffff;
	text-transform: uppercase;
	line-height: 1em;
	
	margin-bottom: .1em;
	letter-spacing: 1px;
	}

.insetLarge .banner2TitleSmall {
	font-size: 64%;
	font-weight: 700;
	}	
	
.insetLarge .banner1Points {
	font-size: 1.48em;
	font-weight: 700;
	color: #0d76bc;
	text-transform: uppercase;
	line-height: 1.25em;
	
	letter-spacing: 1px;
	margin-bottom: 0;
	}
	
.insetLarge .banner2Points {
	font-size: 1.48em;
	font-weight: 700;
	color: #ffffff;
	text-transform: uppercase;
	line-height: 1.25em;
	
	letter-spacing: 1px;
	margin-bottom: 1em;
	}	


.insetLarge .banner1Button {
	float: left;
	text-align: center;
	}

.insetLarge .banner1Button a {
	background: transparent;
	padding: .6em 1em;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: .95em;
	font-weight: 900;
	border: 2px solid #ffffff;
	}

.insetLarge .banner1Button a:hover {
	color: #ffffff;
	background: #252525;
	border: 2px solid #252525;
	}
	
.insetLarge .banner2Button {
	float: left;
	text-align: center;
	}

.insetLarge .banner2Button a {
	background: transparent;
	padding: .6em 1em;
	color: #0d76bc;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: .95em;
	font-weight: 900;
	border: 2px solid #0d76bc;
	
	}

.insetLarge .banner2Button a:hover {
	color: #ffffff;
	background: #252525;
	border: 2px solid #252525;
	}


.insetLarge .banner4Button {
	float: left;
	text-align: center;
	margin-top: 1.75em;
	}

.insetLarge .banner4Button a {
	background: transparent;
	padding: .6em 1em;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: .95em;
	font-weight: 900;
	border: 2px solid #ffffff;
	
	}

.insetLarge .banner4Button a:hover {
	color: #ffffff;
	background: #252525;
	border: 2px solid #252525;
	}

	
@media (min-width: 1px) and (max-width: 383px) {
	
	.jsGallery .insetSmall {
	top: 46%;
	width: 100%;
	}
	
	.insetSmall .banner1Title {
	font-size: 1.5em;
	font-weight: 600;
	color: #2b2828;
	
	text-transform: uppercase;
	line-height: 1em;
	
	margin-bottom: .2em;
	}

	.insetSmall .banner1Points {
	
	font-size: 1.1em;
	font-weight: 700;
	color: #0d76bc;
	text-transform: uppercase;
	line-height: 1.2em;
	
	
	margin-bottom: 0;
	}

	.insetSmall .banner1Button {
	float: left;
	text-align: center;
	}

	.insetSmall .banner1Button a {
	background: transparent;
	padding: .4em .7em;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: .85em;
	font-weight: 700;
	border: 2px solid #ffffff;
	}

	.insetSmall .banner1Button a:hover {
	color: #ffffff;
	background: #252525;
	border: 2px solid #252525;
	}
	
	.insetSmall .banner2Title {
	font-size: 1.5em;
	font-weight: 600;
	color: #ffffff;
	
	text-transform: uppercase;
	line-height: 1em;
	
	margin-bottom: .2em;
	}
	
	.insetSmall .banner2TitleSmall {
	font-size: 77%;
	font-weight: 700;
	}

	.insetSmall .banner2Points {
	font-size: 1.1em;
	font-weight: 700;
	color: #ffffff;
	text-transform: uppercase;
	line-height: 1.2em;
	
	margin-bottom: .4em;
	}

	.insetSmall .banner2Button {
	float: left;
	text-align: center;
	}

.insetSmall .banner2Button a {
	background: transparent;
	padding: .4em .7em;
	color: #0d76bc;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: .85em;
	font-weight: 700;
	border: 2px solid #0d76bc;
	}

.insetSmall .banner2Button a:hover {
	color: #ffffff;
	background: #252525;
	border: 2px solid #252525;
	}
	
	.insetSmall .banner4Button {
	float: left;
	text-align: center;
	margin-top: .6em;
	}

.insetSmall .banner4Button a {
	background: transparent;
	padding: .4em .7em;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: .85em;
	font-weight: 700;
	border: 2px solid #ffffff;
	}

.insetSmall .banner4Button a:hover {
	color: #ffffff;
	background: #252525;
	border: 2px solid #252525;
	}
	
	
	
}		
	
	
	
@media (min-width: 384px) and (max-width: 480px) {
	
	.jsGallery .insetSmall {
	top: 46%;
	width: 100%;
	}
	
	.insetSmall .banner1Title {
	font-size: 1.5em;
	font-weight: 600;
	color: #2b2828;
	
	text-transform: uppercase;
	line-height: 1.2em;
	
	margin-bottom: .2em;
	}

	.insetSmall .banner1Points {
	display: none;
	}

	.insetSmall .banner1Button {
	float: left;
	text-align: center;
	}

	.insetSmall .banner1Button a {
	background: transparent;
	padding: .4em .7em;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: .85em;
	font-weight: 700;
	border: 2px solid #ffffff;
	}

	.insetSmall .banner1Button a:hover {
	color: #ffffff;
	background: #252525;
	border: 2px solid #252525;
	}
	
	.insetSmall .banner2Title {
	font-size: 1.5em;
	font-weight: 600;
	color: #ffffff;
	
	text-transform: uppercase;
	line-height: 1em;
	
	margin-bottom: .2em;
	}
	
	.insetSmall .banner2TitleSmall {
		display: none;
	}

	.insetSmall .banner2Points {
	display: none;
	}

	.insetSmall .banner2Button {
	float: left;
	text-align: center;
	}

	.insetSmall .banner2Button a {
	background: transparent;
	padding: .4em .7em;
	color: #0d76bc;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: .85em;
	font-weight: 700;
	border: 2px solid #0d76bc;
	}

	.insetSmall .banner2Button a:hover {
	color: #ffffff;
	background: #252525;
	border: 2px solid #252525;
	}
		
	.insetSmall .banner4Button {
	float: left;
	text-align: center;
	margin-top: .35em;
	}

	.insetSmall .banner4Button a {
	background: transparent;
	padding: .4em .7em;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: .85em;
	font-weight: 700;
	border: 2px solid #ffffff;
	}

	.insetSmall .banner4Button a:hover {
	color: #ffffff;
	background: #252525;
	border: 2px solid #252525;
	}
	
	
}	
	
	
	
@media (min-width: 481px) and (max-width: 549px) {
	
	.jsGallery .insetLarge {
	top: 45%;
	}
	
	.insetLarge .banner1Title {
	font-size: 1.3em;
	margin-bottom: .4em;
	}

	.insetLarge .banner1Points {
	font-size: .9em;
	}

	.insetLarge .banner1Button a {
	padding: .5em .9em;
	font-size: .75em;
	}
	
	.insetLarge .banner2Title {
	font-size: 1.3em;
	margin-bottom: 0;
	}
	
	.insetLarge .banner2TitleSmall {
	font-size: 64%;
	font-weight: 700;
	}

	.insetLarge .banner2Points {
	font-size: .9em;
	}

	.insetLarge .banner2Button a {
	padding: .5em .9em;
	font-size: .75em;
	}
	
	.insetLarge .banner4Button {
	margin-top: .7em;
	}
	
	.insetLarge .banner4Button a {
	padding: .5em .9em;
	font-size: .75em;
	}

	
	
}	
	
	
@media (min-width: 550px) and (max-width: 619px) {
	
	
	
	.jsGallery .insetLarge {
	top: 45%;
	}
	
	.insetLarge .banner1Title {
	font-size: 1.4em;
	margin-bottom: .4em;
	}
	
	.insetLarge .banner2TitleSmall {
	font-size: 64%;
	font-weight: 700;
	}

	.insetLarge .banner1Points {
	font-size: 1em;
	}

	.insetLarge .banner1Button a {
	padding: .5em .9em;
	font-size: .75em;
	}
	
	.insetLarge .banner2Title {
	font-size: 1.4em;
	margin-bottom: 0;
	}

	.insetLarge .banner2Points {
	font-size: 1em;
	}

	.insetLarge .banner2Button a {
	padding: .5em .9em;
	font-size: .75em;
	}
	
	.insetLarge .banner4Button  {
	margin-top: .8em;
	}
	
	.insetLarge .banner4Button a {
	padding: .5em .9em;
	font-size: .75em;
	}

}	
	
	
	
	
/************at 720************/

@media (min-width: 620px) and (max-width: 720px) {
	
	.jsGallery .insetLarge {
	top: 45%;
	}
	
	.insetLarge .banner1Title {
	font-size: 1.65em;
	}

	.insetLarge .banner1Points {
	font-size: 1.15em;
	}

	.insetLarge .banner1Button a {
	padding: .5em .9em;
	font-size: .85em;
	}
	
	.insetLarge .banner2Title {
	font-size: 1.65em;
	}
	
	.insetLarge .banner2TitleSmall {
	font-size: 64%;
	font-weight: 700;
	
	}

	.insetLarge .banner2Points {
	font-size: 1.15em;
	}

	.insetLarge .banner2Button a {
	padding: .5em .9em;
	font-size: .85em;
	}
	
	.insetLarge .banner4Button  {
	margin-top: 1.2em;
	}
	
	.insetLarge .banner4Button a {
	padding: .5em .9em;
	font-size: .85em;
	}

}

/********end 720*****/	
	
	


@media (min-width: 721px) and (max-width: 899px) {
	
	.jsGallery .insetLarge, .jsGallery .insetSmall {
    top: 46%;
	}
	
	.insetLarge .banner1Title {
	font-size: 2.3em;
	}

	.insetLarge .banner1Points {
	font-size: 1.37em;
	}
	
	.insetLarge .banner1Button a {
    padding: .55em .9em;
    font-size: .9em;
    }

	
}

@media (min-width: 900px) and (max-width: 1040px) {

	.jsGallery .insetLarge {
    	top: 42%;
	}

}