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

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

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

/***************************************************************************************/
/*******************************     ROTATING BANNER    ********************************/
/***************************************************************************************/
#bannerPlaceholder {
	height: 600px;
	/* background-color is defined in the main style sheet */
}
/*
#bannerContainer {
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: 50% 50% !important;
	height: 600px;
	display: none;
}
*/
.bannerImage {
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: 50% 50% !important;
	height: 600px;
	display: none;
	position: absolute;
	width: 100%;
	overflow: hidden;
}

#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.5);
	text-decoration: none;
	cursor: pointer;
	padding: 12px 10px 20px 10px;
}

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

#bannerLeftArrow {
	left: 0px;
}

#bannerRightArrow {
	right: 0px;
}

#scrollIndicator {
	position: fixed;
	z-index: 3;
	bottom: 0px;
	text-align: center;
	width: 100%;
	padding: 10px 0px 10px 0px;
	background: rgba(0, 0, 0, 0.6);
}

/***************************************************************************************/
/*******************************     FLOATING BOXES    *********************************/
/***************************************************************************************/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	#scriptWPQ3 {
		width: 95vw; /* while under 1240 use viewport width as 100% does not work */
		max-width: 1240px; /* maxout so margin auto works as intended */
	}
}


#scriptWPQ3 > table {
	display: none;
}

#scriptWPQ3 {
	display: flex;
	flex-wrap: wrap;
}

#floatingBoxesInnerColor1 {
	display: block;
	background: url('/_catalogs/masterpage/parishBranding/parish_bg_pattern_block.jpg');
	background-repeat: repeat;
	height: 85px;
	width: 100%;
}

#floatingBoxesInnerColor1Top {
	/* background is defined in the main style sheet */
	width: 100%;
	height: 85px;
}

#floatingBoxesContainer {
	display: block;
	margin-top: -65px;
}

#floatingBoxes {
	display: block;
	max-width: 1240px; /* added 40px to 1200px so that sides of boxes both line up with parish name and search box respectively */
	margin: 0 auto;
}

.floatingBoxSmall, .floatingBoxMedium, .floatingBoxLarge{
	margin: 10px;
	overflow: hidden;
}

.floatingBoxSmall {
	width: calc(25% - 20px);
}

.floatingBoxMedium {
	width: calc(50% - 20px);
}

.floatingBoxLarge {
	width: calc(75% - 20px);
}

.floatingBoxTab {
	display: inline-block;
	background-color: #c7853b;
	width: auto;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	padding: 5px 15px 5px 15px;
	font-size: 1.3em;
	color: #ffffff;
}

.floatingBoxContent {
	padding: 20px;
	background-color: #ffffff;
	vertical-align: text-top;
	height: 100%;
}

.floatingBoxContent img {
	width: 90% !important;
	max-width: 200px !important;
	height: auto !important;
}

.floatingBoxContent img[src*="icpdf.png"] {
	width: auto !important;
	height: auto !important;
}

.ms-newgif {
	display: none;
}

/***************************************************************************************/
/*********************************     CALENDAR    *************************************/
/***************************************************************************************/
#MSOZoneCell_WebPartWPQ4 {
	display: none;
}

/***************************************************************************************/
/*******************************     SOCIAL FEEDS    ***********************************/
/***************************************************************************************/
#socialFeedsContainer {
	background-color: #c7853b;
}

#socialFeedButtons, #socialFeedContent {
	display: block;
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

#socialFeedButtons img {
	padding-right: 10px;
	cursor: pointer;
}

#feedClickIndicator {
	display: inline-block;
}

#feedClickIndicatorMobile {
	display: none;
}

div.video-item {
	display: table-cell;
	padding: 10px 20px 10px 20px;
	cursor: pointer;
	width: 33%;
	text-align: center;
}

div.video-item img {
	width: 100%;
	max-width: 360px;
	border: solid 1px #666666;
}

div.video-item span {
	display: block;
	font-family: century_font, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.4em;
	color: #000000;
	text-align: left;
	margin-top: 2px;
}

.ytPlayBtn {
	width: auto !important;
	height: auto !important;
	border: none !important;
	display: inline-block !important;
	float: left;
	padding-right: 5px;
}

#facebook_wall img, #facebook_wall div.author, #facebook_wall div.avatar, #facebook_wall ul.like-list, #facebook_wall ul.comment-list, #facebook_wall div.meta-footer, #facebook_wall div.caption, #facebook_wall div.description {
	display: none;
}

#facebook_wall {
	list-style-type: none;
	padding-left: 0px;
	margin-right: 20px;
}

#facebook_wall li {
	display: table-cell;
	padding: 0px 20px 40px 20px;
	max-width: 350px;
	vertical-align: top;
}

#facebook_wall div.message, #facebook_wall div.story, #facebook_wall div.name > a {
	font-family: century_font, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.4em;
	color: #000000;
	text-align: left;
	margin-top: 13px;
}

#facebook_wall div.name {
	text-align: left;
}

#facebook_wall div.name > a {
	color: #3b579d;
	font-weight: bold;
}

#facebook_wall div.date {
	text-align: left;
	margin-top: -5px;
}

#facebook_wall div.date > a {
	font-size: 1.6em;
	font-weight: bold;
	color: #3b579d;
}

/***************************************************************************************/
/********************************     media queries    *********************************/
/***************************************************************************************/
@media screen and (max-width: 1060px) {
	#bannerPlaceholder, .bannerImage {
		height: 400px;
	}
	
	.floatingBoxLarge {
		width: 100%;
	}

}

@media screen and (max-width: 670px) {
	/* SOCIAL FEEDS COLLAPSE TO SINGLE COLUMN */
	#socialFeedButtons {
		text-align: center;
		padding: 20px 0px 20px 0px;
	}
	
	#feedClickIndicator {
		display: none;
	}
	
	#feedClickIndicatorMobile {
		display: block;
		margin: 0 auto;
	}

	div.video-item {
		display: block;
		width: auto;
		text-align: center;
		padding: 10px 20px 10px 0px;
	}
	
	div.video-item img {
		width: 100%;
		max-width: 360px;
		border: solid 1px #666666;
	}
	
	div.video-item span {
		display: block;
		font-family: century_font, Arial, sans-serif;
		font-size: 1em;
		line-height: 1.4em;
		color: #000000;
		text-align: center;
		margin-top: 2px;
		margin-bottom: 20px;
	}
	
	.ytPlayBtn {
		float: none;
		padding-right: 0px;
	}
	
	#facebook_wall li {
		display: block;
		max-width: 100%;
	}
	
	.floatingBoxSmall {
		width: calc(50% - 20px);
	}
	
	.floatingBoxMedium {
		width: 100%;
	}


}

@media screen and (max-width: 500px) {
	#bannerPlaceholder, .bannerImage {
		height: 200px;
	}
	
	#bannerLeftArrow, #bannerRightArrow {
		font-size: 2em;
		padding: 9px 7px 12px 7px;
		background-color: rgba(0, 0, 0, 0.7);
		top: 30%;
	}
	
	.floatingBoxSmall {
		width: 100%;
	}

}