/***************************************************************************************/
/********************************     INITIAL STYLES    ********************************/
/***************************************************************************************/
/* remove page title */
#DeltaPlaceHolderPageTitleInTitleArea {
	display: none;
}

/* remove margin and padding from main content */
#contentBox {
	padding: 0 !important;
	margin: 0 !important;
}

#s4-titlerow {
	display: none !important;
}

/***************************************************************************************/
/*******************************     ROTATING BANNER    ********************************/
/***************************************************************************************/
.bannerImage > img, #bannerPlaceholderBgImage {
	/*height: 100%;*/
	height: auto;
	width: 100%;
}

#bannerPlaceholderBgImage {
	margin-top: -55px;
}

#bannerPlaceholder {
	height: auto;
	background-color: #506279;
}

.bannerLinkDiv {
	position: absolute;
	display: block;
	z-index: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.bannerImage {
	/*background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: 50% 50% !important;
	height: 500px;*/
	display: none;
	position: absolute;
	width: 100%;
	margin-top: -16px;
	/*overflow: hidden;*/
	height: auto;
}

#bannerLeftArrow, #bannerRightArrow {
	position: absolute;
	display: block;
	font-family: Arial, sans-serif;
	font-size: 4em;
	font-weight: normal;
	color: #ffffff;
	top: 38%;
	z-index: 200;
	background-color: rgba(0, 0, 0, 0.3);
	text-decoration: none;
	cursor: pointer;
	padding: 0px 25px 5px 25px;
	border-radius: 40px;
}

#bannerLeftArrow:hover, #bannerRightArrow:hover {
	text-decoration: none;
}

#bannerLeftArrow {
	left: 0px;
}

#bannerRightArrow {
	right: 0px;
}

.show {
	visibility: visible;
}

.hide {
	visibility: hidden;
}

.captionBox {
	display: block;
	position: absolute;
	z-index: 999;
	color: #ffffff;
	background-color: #000000;
}

.captionBox a, .captionBox a:hover, .captionBox a:active, .captionBox a:visited {
	color: #ffffff;
	text-decoration: underline;
}

.Left, .Right {
	display: block;
	width: 50%;
	max-width: 350px;
	padding: 20px 20px 20px 20px;
	background: rgba(117, 38, 59, 0.7);
	font-size: 1.2em;
	line-height: 1.3em;
	bottom: 10%;
}

.Left {
	left: 80px;
}

.Right {
	right: 80px;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
}

.videoWrapper video {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 45%;
	max-height: 500px;
	background-color: #000000;
}

.gradTitle1 { font-size: 5em; font-weight: bold; color: #ffffff; text-shadow: #000000 3px 3px 10px; }

.gradTitle2 { font-size: 3em; font-weight: bold; color: #e5e5e5; text-shadow: #000000 3px 3px 10px; }

.gradButton { display: inline-block; padding: 5px 15px; background-color: #5c2b2e; border-radius: 8px; color: #ffffff !important; text-decoration: none !important; font-size: 3em; border: solid 2px #ffffff; margin-bottom: 3px; }

/***************************************************************************************/
/**********************************    Social Feed    **********************************/
/***************************************************************************************/

.MasterFeed {
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
	display: flex;
}

.MasterFeed .ms-rteThemeFontFace-1, .MasterFeed .ms-rteThemeFontFace-2, .MasterFeed .ms-rteFontFace-1, .MasterFeed .ms-rteFontFace-2, .MasterFeed .ms-rteFontFace-3, .MasterFeed .ms-rteFontFace-4, .MasterFeed .ms-rteFontFace-5, .MasterFeed .ms-rteFontFace-6, .MasterFeed .ms-rteFontFace-7, .MasterFeed .ms-rteFontFace-8, .MasterFeed .ms-rteFontFace-9, .MasterFeed .ms-rteFontFace-10, .MasterFeed .ms-rteFontFace-11, .MasterFeed .ms-rteFontFace-12, .MasterFeed .ms-rteFontFace-13 {
	font-family: Arial, sans-serif !important;
}

.MasterFeed div.ms-WPAddButton {
	display: none;
}

.MasterFeed img {
	max-width: 100%;
}

.MasterFeed > div {
	width: 50%;
	display: block;
	margin: 5px;
}

.EventsFeed {
	text-align: left;
}

.EventsFeed .ms-webpart-chrome-title {
	background-color: #75263b;
	padding: 7px 7px 4px 7px;
}

.ms-webpart-titleText > a {
	color: white !important;
}

.ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a { font-family: Arial, sans-serif !important; }

.socialNews {
	background-color: #75263b;
	padding: 7px;
	/*font-size: 1.17em;*/
	margin-bottom: 2px;
	text-align: left;
}

.socialNews > h2 {
	color: #ffffff !important;
}

#WebPartTitleWPQ3 > h2 {
	background-color: #006633;
	max-width: 1000px;
	margin: auto;
	padding: 0px 25px 5px 25px;
	width: auto;
}

#WebPartTitleWPQ3 > h2 > a {
	pointer-events: none;
	cursor: default;
}


/***************************************************************************************/
/*************************************     news    *************************************/
/***************************************************************************************/
#news {
	width: auto;
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
}

#news .ms-rteThemeFontFace-1, #news .ms-rteThemeFontFace-2, #news .ms-rteFontFace-1, #news .ms-rteFontFace-2, #news .ms-rteFontFace-3, #news .ms-rteFontFace-4, #news .ms-rteFontFace-5, #news .ms-rteFontFace-6, #news .ms-rteFontFace-7, #news .ms-rteFontFace-8, #news .ms-rteFontFace-9, #news .ms-rteFontFace-10, #news .ms-rteFontFace-11, #news .ms-rteFontFace-12, #news .ms-rteFontFace-13 {
	font-family: Arial, sans-serif !important;
}

#news div.ms-WPAddButton {
	display: none;
}

#news img, #news iframe {
	max-width: 100%;
}


/***************************************************************************************/
/**********************************   Video Thumbs    **********************************/
/***************************************************************************************/

#thumbContainer{
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	margin: 0 auto 75px;
}

.thumb {
	box-sizing: border-box;
	width: 32.5%;
	background-size: cover;
	position:relative;
	z-index:1;
	background-repeat: no-repeat;
	aspect-ratio: 16/9;
	height: 100%;
	margin: 0.25em;
	display: flex;
}

.thumb>a {
	position: absolute;
	inset: 0;
}

.thumb>.text {
	display: block;
	text-align: center;
	font-size: 1.8em;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	margin:auto;

}

.thumb::after {
	content: '';
	background-color: rgba(0,0,0,0.3);
	mix-blend-mode: multiply;
	position: absolute;
	inset: 0;
	z-index:-1;
}
/***************************************************************************************/
/**********************************     highlights    **********************************/
/***************************************************************************************/
#WebPartWPQ3 {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	text-align: center;
}

.homepageHighlight {
	width: 150px;
	height: auto;
	display: inline-block;
	/*float: left;*/
	margin: 0px 70px 60px 70px;
	text-align: center;
	word-wrap: normal;
}

.homepageHighlight img {
	width: 100%;
	max-width: 150px;
	height: auto;
}

#backgroundDiv {
	position: absolute;
	z-index: 1000;
	background-color:rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
}

#picContainer {
	position: relative;
	display: inline-block;
	background-color: #ffffff;
	top: 25%;
	margin: 0 auto;
	border: solid 1px #000000;
	padding: 30px;
	box-shadow: 0px 0px 40px #222222;
	text-align: left;
	max-width: 1000px;
	height: 50%;
	overflow-y: scroll;
}

/***************************************************************************************/
/********************************     media queries    *********************************/
/***************************************************************************************/

/*
@media screen and (max-width: 1500px) {
	#bannerPlaceholder, .bannerImage {
		height: 500px;
	}
}
*/

@media screen and (max-width: 1145px) {
	.gradTitle1 { font-size: 3em; }

	.gradTitle2 { font-size: 2em; }
	
	.gradButton { font-size: 2em; }
}

@media screen and (max-width: 1139px) {
	#bannerLeftArrow, #bannerRightArrow {
		top: 40%;
	}
		
	/*#bannerPlaceholder, .bannerImage {
		height: 300px;
	}*/
	
	.Left, .Right {
		font-size: 0.9em;
	}
}

@media screen and (max-width: 900px) {
	.bannerLinkDiv {
		top: 0;
	}
	.thumb {
		width: 49%;
	}
}

@media screen and (max-width: 800px) {
	.gradTitle1 { font-size: 2em; }

	.gradTitle2 { font-size: 1.3em; }
	
	.gradButton { font-size: 1.3em; }
}

@media screen and (max-width: 799px) {
	.Left, .Right {
		/*position: relative;*/
		width: 90%;
		max-width: 1000px;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		background-color: #333333;
		text-align: center;
		padding: 10px 5% 30px 5%;
		margin-top: 0px;
	}
	
	#bannerPlaceholder, .bannerImage {
		/*height: 200px;*/
		overflow: visible;
		margin-bottom: 85px;
	}

	.captionBox {
		/*bottom: -40px;*/
		top: 100%;
	}
	
	#bannerLeftArrow, #bannerRightArrow {
		font-size: 2em;
		padding: 0px 15px 5px 15px;
	}

}

@media screen and (max-width: 750px) {
	.MasterFeed {
    flex-direction: column;
    align-items: center;
  }

  .MasterFeed > div {
    width: 100%;
  }
  
  .thumb {
	margin:0;
  }
}