#tripleban {
	position:relative;
	width:100%; 
}
	#tripleban:before {
		content:" ";
		padding-top:33.333333%; /* 6:2 */
		display:block;
		
		background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 25%);
		z-index: 4;
		position: relative;
	}

	#tripleban.replaced > div {
		position:absolute;
		top:0; left:0; width:100%; height:100%;
	}
	
	#tripleban ul {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		list-style-type:none;
		margin:0;
		padding:0;
	}
		#tripleban li {
			position:absolute;
			margin:0;
			padding:0;
			display:none;
			overflow:hidden;
		}
			
			#tripleban li.current {
				display:block;
				z-index:2;
			}
			#tripleban li.prepare {
				display:block;
				z-index:1;
			}
				#tripleban li.current-in {

				}
				#tripleban li.current-out {
					
				}
			#tripleban li.image.small.one div {
				background-color:#ccc;
			}
			#tripleban li.image.small.two  div{
				background-color:#666;
			}
				
			#tripleban li.image.large div {
				background-color:#999;
			}
			#tripleban li.image.single div {
				background-color:#999;
			}
			#tripleban li.image {
			
			}
				#tripleban li.image div {
					position:absolute;
					top:0; left:0;
					width:100%; height:100%;
					background-size:cover;
					background-position:center;
				}
			
			#tripleban li.static {
				z-index: 4;
				display:flex;
				flex-direction:column;
			}
				#tripleban li.static div.box {
					height:100%;
					padding:1em;
					font-size:.8em;
					margin:0;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
					#tripleban li.static div.box.oneclick:hover {
						opacity:.8;
						transition:opacity .3s;
					}
					#tripleban li.static div.box h1,
					#tripleban li.static div.box h2,
					#tripleban li.static div.box h3,
					#tripleban li.static div.box h4,
					#tripleban li.static div.box h5,
					#tripleban li.static div.box h6 {
						margin:0;
					}
					#tripleban li.static div.box h6 { font-size: 1em;	}
					#tripleban li.static div.box h5 { font-size: 1.0625em;	}
					#tripleban li.static div.box h4 { font-size: 1.125em;	}
					#tripleban li.static div.box h3 { font-size: 1.5em;	}
					#tripleban li.static div.box h2 { font-size: 1.625em;	}
					#tripleban li.static div.box h1 { font-size: 1.875em; }
					#tripleban li.static div.box p {
						font-size:1em;
						margin:.5em 0;
					}
					#tripleban li.static div.box.filled.teal,
					#tripleban li.static div.box.filled.teal a {
						color:white;
					}
					
		
	#tripleban .controls {}
		
		#tripleban .controls .prev,
		#tripleban .controls .next {
			position:absolute;
			z-index:5;
			top:50%;
			margin-top:-21px;
			filter: drop-shadow(2px 4px 6px black);
		}
			#tripleban .controls .prev {
				left:0;
				margin-left:1em;
			}
			#tripleban .controls .next {
				right:0;
				margin-right:1em;
			}
	
	
	
/* animation ------------- */

#tripleban li.current.image div {
	transition:left 1s;
}
	#tripleban li.current.image.small.two div {
		transition-delay:.3s;
	}
	
#tripleban li.image div {
	left:0;
}

#tripleban li.prepare.next.image div,
#tripleban li.current-out.bwd.image div {
	left:100%;
}
#tripleban li.prepare.prev.image div,
#tripleban li.current-out.fwd.image div {
	left:-100%;
}

/* large image fades */

#tripleban li.large.current.image div,
#tripleban li.large.prepare.next.image div,
#tripleban li.large.current-out.bwd.image div,
#tripleban li.large.prepare.prev.image div,
#tripleban li.large.current-out.fwd.image div {
	left:0;
}

#tripleban li.large.image div {
	opacity:0;
}
	#tripleban li.large.image.current div {
		transition:opacity 1s;
		opacity:1;
	}
	#tripleban li.large.image.current-in  {
		z-index:3;
	} 


/* responsive ------------- */



/* responsive width */

@media (max-width:756px) { /* $tablet, was 768 */
	#tripleban:before {
		padding-top:25%; /* 4:1 */
		background:none;
	}
	#tripleban li.large {
		width:50%;
	}
	#tripleban li.small {
		width:50%;
	}
		#tripleban li.small.two {
			top:0;
		}
}
/*
	@media (max-width:972px) {  // $small, was 960 
		#tripleban li.static div.box {
			font-size:.7em;
		}
	}
*/

/* responsive height */

@media (max-height:960px) {
	#tripleban:before {
		padding-top:16.666666%; /* 6:1 */
	}
}

/* layout Lss ---------------------- */

#tripleban.layout-Lss {} 

	#tripleban.layout-Lss li.large {
		left:0; width:67%; height:100%;
	}
	#tripleban.layout-Lss li.small {
		right:0; width:33%; height:50%;
	}
		#tripleban.layout-Lss li.small.two {
			top:50%;
		}
	#tripleban.layout-Lss .controls .next {
		right:33%;
	}
	
	
	@media (max-height:960px) {
		#tripleban.layout-Lss li.large {
			left:33%; width:34%;
		}
		#tripleban.layout-Lss li.small {
			height:100%;
		}
			#tripleban.layout-Lss li.small.one {
				left:0; 
				right:auto;
			}
			#tripleban.layout-Lss li.small.two {
				top:0;
			}
			
		#tripleban.layout-Lss .controls .next {
			right:0;
		}
		
		#tripleban.layout-Lss.has-static { }
		
			#tripleban.layout-Lss.has-static li.small {
				left:0; right:auto;
			}
				#tripleban.layout-Lss.has-static li.small.static {
					left:auto; right:0;
				}
			
			#tripleban.layout-Lss.has-static .controls .next {
				right:33%;
			}
	}	
	
	@media (max-width:756px) { /* $tablet, was 768 */
		#tripleban.layout-Lss li.large {
			width:50%; left:50%;
		}
		#tripleban.layout-Lss li.small {
			width:50%; height:100%; left:0;
		}
			#tripleban.layout-Lss li.small.two {
				display:none;
			}
		#tripleban.layout-Lss .controls .next {
			right:0;
		}
		#tripleban.layout-Lss.has-static { }
		
			#tripleban.layout-Lss.has-static li.small {
				display:block;
			}
				#tripleban.layout-Lss.has-static li.small.two {
					top:0;
				}
				#tripleban.layout-Lss.has-static li.small.static {
					display:none;
				}
			#tripleban.layout-Lss.has-static .controls .next {
				right:0;
			}
	}
	
/* layout ssL ----------------------  */

#tripleban.layout-ssL {} 
	#tripleban.layout-ssL li.large {
		right:0; width:67%; height:100%;
	}
	#tripleban.layout-ssL li.small {
		left:0; width:33%; height:50%;
	}
		#tripleban.layout-ssL li.small.two {
			top:50%;
		}
	#tripleban.layout-ssL .controls .prev {
		left:33%;
	}
	
	
	@media (max-height:960px) {
		#tripleban.layout-ssL li.large {
			right:33%; width:34%;
		}
		#tripleban.layout-ssL li.small {
			height:100%;
		}
			#tripleban.layout-ssL li.small.one {
				right:0; 
				left:auto;
			}
			#tripleban.layout-ssL li.small.two {
				top:0;
			}
			
		#tripleban.layout-ssL .controls .prev {
			left:0;
		}
		
		#tripleban.layout-ssL.has-static { }
		
			#tripleban.layout-ssL.has-static li.small {
				right:0; left:auto;
			}
				#tripleban.layout-ssL.has-static li.small.static {
					right:auto; left:0;
				}
			
			#tripleban.layout-ssL.has-static .controls .prev {
				left:33%; 
			}
	}	
	
	@media (max-width:756px) { /* $tablet, was 768 */
		#tripleban.layout-ssL li.large {
			width:50%; left:50%;
		}
		#tripleban.layout-ssL li.small {
			width:50%; height:100%; left:0;
		}
			#tripleban.layout-ssL li.small.one {
				left:0;
				right:auto;
			}
			#tripleban.layout-ssL li.small.two {
				display:none;
			}
		#tripleban.layout-ssL .controls .prev {
			left:0;
		}
		#tripleban.layout-ssL.has-static { }
		
			#tripleban.layout-ssL.has-static li.small {
				left:0;
				display:block;
			}
				#tripleban.layout-ssL.has-static li.small.two {
					top:0;
				}
				#tripleban.layout-ssL.has-static li.small.static {
					display:none;
				}
			#tripleban.layout-ssL.has-static .controls .prev {
				left:0;
			}
	}
	
/* layout single ---------------------- */

#tripleban.layout-single {} 

	#tripleban.layout-single li.single {
		left:0; width:100%; height:100%;
	}
	
	#tripleban.layout-single .controls .next {
		right:0;
	}
	#tripleban.layout-single li.image div {
		background-size: 100%;
		background-position: center 0;
		background-attachment: fixed;
	}
	#tripleban.layout-single li.static {
		display: block;
		z-index: 5;
		width: 40%;
		right: 80px;
		box-sizing: border-box;
		height: 100%;
		overflow: hidden;
		color: white;
		top: 0;
		bottom: 0;
		margin: auto;
	
		font-size:2rem;
		
		display: flex;
		justify-content: center;
		flex-direction: column;
	  	filter: drop-shadow(2px 4px 6px black);
	}
		#tripleban.layout-single li.static .box {
			height: auto;
		}
	
	@media (max-height:960px) {
		//#tripleban.layout-single li.large {
		//	left:0%; width:100%;
		//}
		
		#tripleban.layout-single .controls .next {
			right:0;
		}
		
		#tripleban.layout-single.has-static { }
		

			#tripleban.layout-single.has-static li.static {
				left:auto; 
				//right:0;
				right:60px;
				
				font-size:1rem;
			}
			
			#tripleban.layout-single.has-static .controls .next {
				right:0;
			}
	}	
	
	@media (max-width:756px) { /* $tablet, was 768 */
		//#tripleban.layout-single li.large {
		//	width:100%; left:0;
		//}
		#tripleban.layout-single li.image div {
			background-size: cover;
			background-position: center;
			background-attachment: scroll;
		}
		#tripleban.layout-single .controls .next {
			right:0;
		}
		#tripleban.layout-single.has-static { }
		
			
			#tripleban.layout-single.has-static li.static {
				display:none;
			}

			#tripleban.layout-single.has-static .controls .next {
				right:0;
			}
	}	

/* layout banner ---------------------- */

#tripleban.layout-banner {} 

	#tripleban.layout-banner li.banner {
		left:0; width:100%; height:100%;
	}
	
	//#tripleban.layout-banner .controls .next {
	//	right:0;
	//}
	#tripleban.layout-single li.image div {
		background-size: 100%;
		background-position: center 0;
		background-attachment: fixed;
	}
	#tripleban.layout-banner li.static {
		display: block;
		z-index: 5;
		width: 40%;
		right: 80px;
		box-sizing: border-box;
		height: 100%;
		overflow: hidden;
		color: white;
		top: 0;
		bottom: 0;
		margin: auto;
	
		font-size:2rem;
		
		display: flex;
		justify-content: center;
		flex-direction: column;
	  	filter: drop-shadow(2px 4px 6px black);
	}
		#tripleban.layout-banner li.static .box {
			height: auto;
		}
	
	@media (max-height:960px) {
		//#tripleban.layout-banner li.large {
		//	left:0%; width:100%;
		//}
		
		//#tripleban.layout-banner .controls .next {
		//	right:0;
		//}
		
		#tripleban.layout-banner.has-static { }
		

			#tripleban.layout-banner.has-static li.static {
				left:auto; 
				//right:0;
				right:60px;
				
				font-size:1rem;
			}
			
			#tripleban.layout-banner.has-static .controls .next {
				right:0;
			}
	}	
	
	@media (max-width:756px) { /* $tablet, was 768 */
		//#tripleban.layout-banner li.large {
		//	width:100%; left:0;
		//}
		#tripleban.layout-banner li.image div {
			background-size: cover;
			background-position: center;
			background-attachment: scroll;
		}
		//#tripleban.layout-banner .controls .next {
		//	right:0;
		//}
		#tripleban.layout-banner.has-static { }
		
			
			#tripleban.layout-banner.has-static li.static {
				display:none;
			}

			#tripleban.layout-banner.has-static .controls .next {
				right:0;
			}
	}	

	
/* ----------------
	.tripleban-slideshow
	alternativeversion, inside 
	the page as a block
----------------- */
	
	
.tripleban-slideshow { 

}

	.tripleban-slideshow-slides {
		position:relative;
		overflow: hidden;
		width: 100%;
	}
		.tripleban-slideshow-slides:before {
			content:" ";
			padding-top:50%; /* 2:1 */
			display:block;
		}
	
		.tripleban-slideshow-slides ul {
			overflow:hidden;
			white-space:nowrap;
			list-style-type:none;
		}
		
			.tripleban-slideshow-slides li {
				display:none;
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 100%;
				z-index:1;
				transition:left 1s;
			}
			
				.tripleban-slideshow-slides li.current {
					display:block;
					z-index:2;
					left:0%;
				}
				
				.tripleban-slideshow-slides li.prev {
					display:block;
					z-index:2;
					left:-101%;
				}
				
				.tripleban-slideshow-slides li.next {
					display:block;
					z-index:2;
					left:101%;
				}
				
				.tripleban-slideshow-slides li div.image {
					-x-background-color:#999;
					position:absolute;
					top:0; left:0;
					width:100%; 
					height:100%;
					background-size:contain;
					background-position:center;
					background-repeat:no-repeat;
				}
				.tripleban-slideshow-slides li div.subscript {
					display:none;
				}
						
		
	
	.tripleban-slideshow .controls  {
		position:relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
		.tripleban-slideshow .subscript {
			padding:0 2em;
		}
		.tripleban-slideshow .controls img {
			cursor:pointer;
			filter: drop-shadow(0 0 1px #000000);
		}
		
		
		
	.field-collection-item-field-slides-twocols .tripleban-slideshow {
		padding: 1em 1em 0;
    	background-color: #f4f3f3;
    	border: 1px solid #58585b;
  	}