/* 
	csw-imagetextblock.css
		
	Version: [2018-01-16 15:16]
*/


/************************************** 
	FOR ALL Textblocks 
****************************************/

/* Main Container */
.cswImageTextblock {
  	display: flex;
   display: -ms-flexbox;
   -ms-flex-align: start;
	
  	flex-wrap: wrap; 
 	justify-content: center;
}

/* Each Individual Icon-Textblock */
.cswImageTextblock .cswImageTextblockContainer {
	/** display: inline-block; **/
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}


.cswImageTextblock .cswImageTextblockContainer .cswImage {
	/** 
	width: 100%; 
	background-repeat: no-repeat;
	**/
}

.cswImageTextblock .cswImageTextblockContainer .cswTitle a:hover {
	color: currentColor;
}

/* turn image overlays off by default */
.cswImageTextblock .cswImageTextblockContainer .cswMainImgOverlay,
.cswImageTextblock .cswImageTextblockContainer .cswHoverImgOverlay {
	/** display: none; **/
  	position: absolute;
  	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.cswImageTextblock .cswImageTextblockContainer .cswTitle,
.cswImageTextblock .cswImageTextblockContainer .cswSubtitle,
.cswImageTextblock .cswImageTextblockContainer .cswDesc,
.cswImageTextblock .cswImageTextblockContainer .cswLineWrapper,
.cswImageTextblock .cswImageTextblockContainer .cswBtnWrapper,
.cswImageTextblock .cswImageTextblockContainer .cswLinkWrapper {
	padding: 5px 20px;
	overflow: hidden; 
	text-overflow: ellipsis; 	
}

.cswImageTextblock .cswImageTextblockContainer .cswLineWrapper {
	line-height:1px;
}

.cswImageTextblock .cswImageTextblockContainer .cswLine {
	line-height:1px;
	display: inline-block;
	border-top-style: solid;
}


/* Card Alignment */
.cswImageTextblock .cswCardAlign-center {
	text-align: center;
}
.cswImageTextblock .cswCardAlign-left {
	text-align: left;
}
.cswImageTextblock .cswCardAlign-right {
	text-align: right;
}



/*======================================================
   Stacked
		
		.cswImageTextblock.Layout-StackedVertically
 *======================================================*/
 


/*=======================================================
   Stacked Vertically - Title Above
		
		- change the order 	
 *=======================================================*/
.cswImageTextblock.cswLayout-StackedVerticallyTitleAbove .cswImageTextblockContainer .cswOverlayWrapper {
	display: flex;
	flex-direction: column;
}

.cswImageTextblock.cswLayout-StackedVerticallyTitleAbove .cswTitle,
.cswImageTextblock.cswLayout-StackedVerticallyTitleAbove .cswSubtitle,
.cswImageTextblock.cswLayout-StackedVerticallyTitleAbove .cswLine {
	order: 0;
} 
.cswImageTextblock.cswLayout-StackedVerticallyTitleAbove .cswImageWrapper,
.cswImageTextblock.cswLayout-StackedVerticallyTitleAbove .cswDesc,
.cswImageTextblock.cswLayout-StackedVerticallyTitleAbove .cswBtn {
	order: 1;
} 

.cswImageTextblock.cswLayout-StackedVerticallyTitleAbove .cswDesc {
	margin-top: 10px;
}
 
/*======================================================
   Stacked Vertically - Title Overlay
		
		.cswImageTextblock.Layout-StackedVerticallyTitleOverlay
 *======================================================*/
 
.cswImageTextblock.cswLayout-StackedVerticallyTitleOverlay .cswTitleOverlayWrapper {
	position: relative;
	width: 100%;
}

.cswImageTextblock.cswLayout-StackedVerticallyTitleOverlay .cswTitleOverlayWrapper .cswTitleOverlay {
	position: absolute;
	bottom: 0;
	opacity: .75;
	width: 100%;
	padding: 10px;
	margin: 0;
	opacity: .75;
}
.cswImageTextblock.cswLayout-StackedVerticallyTitleOverlay .cswTitleOverlayWrapper:hover .cswTitleOverlay {
	opacity: 1;
}
 
.cswImageTextblock.cswLayout-StackedVerticallyTitleOverlay .cswSubtitle {
	padding-top: 10px;
}


 
/*=======================================================
   Stacked Horizontally
		
		.cswImageTextblock.Layout-StackedHorizontally
 *=======================================================*/
 
.cswImageTextblock.cswLayout-StackedHorizontally .cswImageTextblockContainer .cswOverlayWrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}
.cswImageTextblock.cswLayout-StackedHorizontally .cswImageWrapper,
.cswImageTextblock.cswLayout-StackedHorizontally .cswTextblock,
.cswImageTextblock.cswLayout-StackedHorizontally .cswBtn {
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	margin:0;
}
.cswImageTextblock.cswLayout-StackedHorizontally .cswImageWrapper { 
	width: 30%; 
	vertical-align: top;
}

.cswImageTextblock.cswLayout-StackedHorizontally .cswTextblock { 
	width: 48%; 
}
.cswImageTextblock.cswLayout-StackedHorizontally .cswBtnWrapper,
.cswImageTextblock.cswLayout-StackedHorizontally .cswLinkWrapper { 
	width: 20%; 
	padding: 5px 0; 
	overflow:hidden; 
	text-overflow: ellipsis; 
	display: inline-block;
}

.cswImageTextblock.cswLayout-StackedHorizontally .cswBtn {
	white-space: normal !important;
}

/* Extra small devices (480px and down) */
@media (max-width: 480px) { 
	.cswImageTextblock.cswLayout-StackedHorizontally .cswImageTextblockContainer .cswOverlayWrapper {
		flex-wrap: wrap;
	}

	.cswImageTextblock.cswLayout-StackedHorizontally .cswImageWrapper { 
		width: 100%; 
		vertical-align: top;
		display:block;
	}
	
	.cswImageTextblock.cswLayout-StackedHorizontally .cswTextblock { 
		width: 100%; 
		display: block;
	}	
	
	.cswImageTextblock.cswLayout-StackedHorizontally .cswBtnWrapper,
	.cswImageTextblock.cswLayout-StackedHorizontally .cswLinkWrapper { 
		width: 100%; 
		display: block;
	}
	
}

 
/*======================================================
   Stacked Wave
		
		
 *======================================================*/
.cswImageTextblock.cswLayout-StackedVerticallyWave .cswWaveWrapper {
	position: relative;
}

.cswImageTextblock.cswLayout-StackedVerticallyWave .cswWave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
} 

/*======================================================
   Title in Block Above
		
		
 *======================================================*/
 
.cswImageTextblock.cswLayout-TitleInBlockAbove .cswInBlock {
	position: relative;
	z-index: 2;
}

.cswImageTextblock.cswLayout-TitleInBlockAbove .cswInBlock .cswTitle, 
.cswImageTextblock.cswLayout-TitleInBlockAbove .cswInBlock .cswSubtitle {
	white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.cswImageTextblock.cswLayout-TitleInBlockAbove .cswDesc {
	margin-top: 10px;
}

/*======================================================
   Title in Block Above
		
		
 *======================================================*/
 
.cswImageTextblock.cswLayout-ContentInBlockBelow .cswInBlock {
	position: relative;
}

.cswImageTextblock.cswLayout-ContentInBlockBelow .cswInBlock .cswTitle, 
.cswImageTextblock.cswLayout-ContentInBlockBelow .cswInBlock .cswSubtitle {
   overflow: hidden;
   text-overflow: ellipsis;
}

/*======================================================
   Major & Minor
		
		
 *======================================================*/
.cswImageTextblock.cswLayout-MajorAndMinor {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: wrap;
}

.cswImageTextblock.cswLayout-MajorAndMinor .cswMajor {
	display: inline-block;
}
/* add gutter margin to Major */
.cswImageTextblock.cswLayout-MajorAndMinor.cswGutter-15 .cswMajor { margin: 0 15px 0px 0; }
.cswImageTextblock.cswLayout-MajorAndMinor.cswGutter-30 .cswMajor { margin: 0 30px 0px 0; }
.cswImageTextblock.cswLayout-MajorAndMinor.cswGutter-45 .cswMajor { margin: 0 45px 0px 0; }
.cswImageTextblock.cswLayout-MajorAndMinor.cswGutter-60 .cswMajor { margin: 0 60px 0px 0; }

/* make minor flow down */
.cswImageTextblock.cswLayout-MajorAndMinor .cswMinor {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
}


/*======================================================
   Image On Side
		
		
 *======================================================*/
.cswImageTextblock.cswLayout-ImageOnSide {
	justify-content: flex-start; 	/* left-align */
}

.cswImageTextblock.cswLayout-ImageOnSide .cswImageTextblockContainer .cswOverlayWrapper {
  	display: flex;
   display: -ms-flexbox;
   -ms-flex-align: start;
	flex-wrap: nowrap;
	align-items: flex-start; 
}
.cswImageTextblock.cswLayout-ImageOnSide.cswVertAlign-center .cswImageTextblockContainer {
	align-items: center;
}
.cswImageTextblock.cswLayout-ImageOnSide.cswVertAlign-bottom .cswImageTextblockContainer {
	align-items: flex-end;
}

/* right aligned */
.cswImageTextblock.cswLayout-ImageOnSide .cswImageTextblockContainer.cswImgAlign-right .cswImageWrapper {
	order: 2;  /* cause image to be rendered second */
}
.cswImageTextblock.cswLayout-ImageOnSide .cswImageTextblockContainer.cswImgAlign-right {
	text-align: right;
}

.cswImageTextblock.cswLayout-ImageOnSide .cswImageTextblockContainer .cswImageWrapper,
.cswImageTextblock.cswLayout-ImageOnSide .cswImageTextblockContainer .cswInBlock {
	display: inline-block;
}
.cswImageTextblock.cswLayout-ImageOnSide .cswImageTextblockContainer .cswTitle {
	margin-top: 0;
	padding-top: 0;
	overflow: hidden;
   text-overflow: ellipsis;
} 

/* Alternating */
.cswImageTextblock.cswLayout-ImageOnSide.cswAlternating .cswCard:nth-child(even) .cswImageTextblockContainer .cswOverlayWrapper {
	flex-direction: row-reverse;
}


/*======================================================
   Text Overlayed on top of Image
		Also for Major and Minor Text Overlayed
		
		
 *======================================================*/
 .cswImageTextblock.cswLayout-TextOverlayed .cswImageTextblockContainer .cswOverlayWrapper {
 	position: relative;
 }
.cswImageTextblock.cswLayout-TextOverlayed .cswImageTextblockContainer .cswInBlock {
	position: absolute;
	left:0;
	right:0;
	/*
	top: 0;
	bottom: 0;
	*/
	overflow: hidden;
	max-height: 100%;
}

.cswImageTextblock.cswLayout-TextOverlayed .cswImageWrapper {
	width: 100%;
}

.cswImageTextblock.cswLayout-TextOverlayed.cswVertAlign-top .cswInBlock {
	top:0;
}
.cswImageTextblock.cswLayout-TextOverlayed.cswVertAlign-center .cswInBlock {
	transform: translateY(-50%);
	top: 50%;
}
.cswImageTextblock.cswLayout-TextOverlayed.cswVertAlign-bottom .cswInBlock {
	bottom:0;
}



/* For Major Minor Overlayed */
.cswImageTextblock.cswLayout-MajorAndMinorOverlayed .cswMajor { width: 66%; }
.cswImageTextblock.cswLayout-MajorAndMinorOverlayed.cswGutter-15 .cswMajor { width: calc(66% - 15px); }
.cswImageTextblock.cswLayout-MajorAndMinorOverlayed.cswGutter-30 .cswMajor { width: calc(66% - 30px); }
.cswImageTextblock.cswLayout-MajorAndMinorOverlayed.cswGutter-45 .cswMajor { width: calc(66% - 45px); }
.cswImageTextblock.cswLayout-MajorAndMinorOverlayed.cswGutter-60 .cswMajor { width: calc(66% - 60px); }
.cswImageTextblock.cswLayout-MajorAndMinorOverlayed .cswMinor { width: 34%; }

/* Extra small devices (480px and down) */
@media (max-width: 480px) { 
	.cswImageTextblock.cswLayout-MajorAndMinorOverlayed .cswMajor { width: 100%; }
	.cswImageTextblock.cswLayout-MajorAndMinorOverlayed.cswGutter-15 .cswMajor { width: 100%; }
	.cswImageTextblock.cswLayout-MajorAndMinorOverlayed.cswGutter-30 .cswMajor { width: width: 100%; }
	.cswImageTextblock.cswLayout-MajorAndMinorOverlayed.cswGutter-45 .cswMajor { width: width: 100%; }
	.cswImageTextblock.cswLayout-MajorAndMinorOverlayed.cswGutter-60 .cswMajor { width: width: 100%; }
	.cswImageTextblock.cswLayout-MajorAndMinorOverlayed .cswMinor { width: 100%; }
}



.cswImageTextblock.cswLayout-MajorAndMinorOverlayed .cswMinor .cswImageTextblock {
  	display: flex;
   display: -ms-flexbox;
   -ms-flex-align: start;
	
	flex-direction: row;
  	flex-wrap: wrap; 
 	justify-content: flex-start;
}


/*======================================================
   Alternating Textblocks Vertical

 *======================================================*/
.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswCard:nth-child(odd) .cswOverlayWrapper {
	/* switch order so textblock above image */
  	display: flex;
   display: -ms-flexbox;
   -ms-flex-align: start;
	flex-direction: column-reverse;
  	flex-wrap: nowrap; 
	
}
.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswCard:nth-child(even) .cswOverlayWrapper {
  	display: flex;
   display: -ms-flexbox;
   -ms-flex-align: start;
	flex-direction: column;
  	flex-wrap: nowrap; 
}

.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswCard:nth-child(odd) .cswOverlayWrapper .cswTitle {
	margin-top: 20px;
}

/* EVEN */
.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswCard.cswUseTheme:nth-child(even),
.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswCard.cswUseTheme:nth-child(even) .cswTitle,
.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswCard.cswUseTheme:nth-child(even) .cswSubtitle,
.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswCard.cswUseTheme:nth-child(even) .cswLine,
.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswCard.cswUseTheme:nth-child(even) .cswDesc {
	color: currentColor !important;
}


.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswCard:nth-child(even) .cswInBlock::before {
	/* draws triangle separator */
   content: "";
   position: relative;
   display: inline-block;
   z-index: 3;
	top: -25px;
	margin-left:10px;
	margin-right:10px;
/*   left: calc(50% - 15px);	*/
   border-width: 0 20px 25px 20px;
   border-style: solid;
   border-top-color: transparent;	
	border-left-color: transparent;	
	border-right-color: transparent;	
	border-bottom-color: currentColor;		/* hack: uses text color of parent */
}

/* ODD */
.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswCard:nth-child(odd) .cswInBlock::after {
	/* draws triangle separator */
   content: "";
   position: relative;
   display: inline-block;
   z-index: 3;
	top: 28px;
	margin-left:10px;
	margin-right:10px;
/*   left: calc( 50% - 15px);	 */
   border-width: 25px 20px 0 20px;
   border-style: solid;
   border-top-color: currentColor;	
	border-left-color: transparent;	
	border-right-color: transparent;	
	border-bottom-color: transparent;
}

.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswImageTextblockContainer.cswUseTheme:nth-child(odd) {
	background-color: currentColor !important;
}
.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswImageTextblockContainer.cswUseTheme:nth-child(odd) .cswInBlock::after {
	border-top-color: currentColor;		
}

.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswCard:nth-child(odd) .cswOverlayWrapper {
	height: 100%;
}

.cswImageTextblock.cswLayout-AlternatingBlocksVertical .cswCard:nth-child(odd) .cswImage {
	vertical-align: bottom;
}
 
 
/*======================================================
   2 x 2 Image Centered
		
 *======================================================*/
.cswImageTextblock.cswLayout-2x2ImageCenter {
	position: relative;
}
 
.cswImageTextblock.cswLayout-2x2ImageCenter .cswImageTextblock.cswLayout-TextOverlayed {
	width: 100%;
}

/* align text */
.cswImageTextblock.cswLayout-2x2ImageCenter .cswImageTextblock.cswLayout-TextOverlayed .cswCard:nth-child(odd) .cswInBlock {
	text-align:right;
	margin-right: 30%;
	
}
.cswImageTextblock.cswLayout-2x2ImageCenter .cswImageTextblock.cswLayout-TextOverlayed .cswCard .cswInBlock .cswBtnWrapper {
	margin:0;
}

.cswImageTextblock.cswLayout-2x2ImageCenter .cswImageTextblock.cswLayout-TextOverlayed .cswCard:nth-child(even) .cswInBlock {
	text-align:left;
	margin-left: 30%;
}

/* position Main Image in center*/
.cswImageTextblock.cswLayout-2x2ImageCenter .cswImageCenterWrapper {
	position: absolute;
	width: 25%;
	z-index: 3;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.cswImageTextblock.cswLayout-2x2ImageCenter .cswImageCenter {
	padding-bottom: 100%;
}

/* overlays */
.cswImageTextblock.cswLayout-2x2ImageCenter .cswMainImgOverlay,
.cswImageTextblock.cswLayout-2x2ImageCenter .cswHoverImgOverlay {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;	
}


/* on hover - turn off main overlay, turn on image overlay */
.cswImageTextblock.cswLayout-2x2ImageCenter .cswOverlayWrapper:hover .cswMainImgOverlay {
	display: none;
	transition:all 0.5s;
}
/**
.cswImageTextblock.cswLayout-2x2ImageCenter .cswOverlayWrapper:hover .cswHoverImgOverlay {
	display: block;
	opacity: .7; 
}
**/

/* Extra small devices (480px and down) */
@media (max-width: 480px) { 
	.cswImageTextblock.cswLayout-2x2ImageCenter .cswImageCenter {
		display: none;
	}
	
	.cswImageTextblock.cswLayout-2x2ImageCenter .cswImageTextblock.cswLayout-TextOverlayed .cswCard:nth-child(odd) .cswInBlock {
		margin-right: 0;
	}
	.cswImageTextblock.cswLayout-2x2ImageCenter .cswImageTextblock.cswLayout-TextOverlayed .cswCard:nth-child(even) .cswInBlock {
		margin-left: 0;
	}
	
}


/* Title Color - link */
/* color definitions title with link */
.cswImageTextblock .cswTitle a,
.cswImageTextblock .cswTitle a:visited,
.cswImageTextblock .cswTitle a:hover,
.cswImageTextblock .cswTitle a:focus,
.cswImageTextblock .cswTitle a:active {
	color: inherit; 
}