/* ## Fade carousel items instead of slide ## */
	.carousel-fade .carousel-inner .item {
		opacity: 0;
		-webkit-transition: opacity 1s ease-in-out;
		-moz-transition: opacity 1s ease-in-out;
		-ms-transition: opacity 1s ease-in-out;
		-o-transition: opacity 1s ease-in-out;
		transition: opacity 1s ease-in-out;
	}
	.carousel-fade .carousel-inner .active {
	  opacity: 1;
	}
	.carousel-fade .carousel-inner .active.left,
	.carousel-fade .carousel-inner .active.right {
		left: 0;
		opacity: 0;
		z-index: 1;
	}
	.carousel-fade .carousel-inner .next.left,
	.carousel-fade .carousel-inner .prev.right {
		opacity: 1;
	}
	.carousel-fade .carousel-control {
		z-index: 2;
	}
	
/* ## The carousel itself ## */
/* ## This HAD to go AFTER the code about */
/* the Carousel fading rather than */
/* sliding or it would revert to sliding ## */
	div#carousel-bounding-box {
		background-color: #dddddd;
		padding-bottom: 15px;
		padding-top: 10px;
		}
	.carousel {
		background: #dddddd;
		max-width: 1110px;
		}
		
/* ## Controls for carousel ## */        
	.carousel-control {
		visibility: hidden;
		top: 50%;
		width: 40px;
		height: 40px;
		margin-top: -20px;
		opacity: 0.25;
		filter: alpha(opacity=25);
		box-shadow: 0 0 25px -5px #444;
		font-size: 25px;
		line-height: 33px;
		color: #ffffff;
		background: #222222;
		border: 3px solid #ffffff;
		-webkit-border-radius: 23px;
		-moz-border-radius: 23px;
		border-radius: 23px; 
		}
	.carousel-control.right {
		right: 15px;
		padding-left: 3px 
		}
	.carousel-control.left {
		left: 15px;
		padding-right: 3px 
		}

/* ## Target IE 10, IE 11 ## */	
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
	.carousel-control { line-height: 36px; } 
	}	

/* ## Hide carousel controls until hover ## */
	.carousel .carousel-control { visibility: hidden; }
	.carousel:hover .carousel-control { visibility: visible; }
	.carousel:hover .btn-splash-ext { visibility: visible; }

	
/* ## The area containing the thumbs and the Carousel itself ## */
	div#galleryThumbsandCarousel {
		background-color: #dddddd;
		margin-top: 2px;
		margin-bottom: 15px;
		line-height: 1.25;
		text-shadow: 0px 1px 1px #f4f4f4;
		}
	}	

/* ## Displaced caption area ## */
	.new-caption-area {
		max-width: 1110px; 
		min-height: 36px;   
		}        	           
	p.gallery-selected {
		font-size: 16px;
		margin: 4px 0;
		}
	p.gallery-selected strong {
		font-family: 'Sarpanch',Impact,'Lato',"Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 15.5px;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: #990000;
		}	        
		
/* ## Thumb scroller ## */     
	div#slider-thumbs {
		padding-right: 0px;
		}
	#slider-thumbs ul img {
		margin: 6px 2px -3px;
		}
	#slider-thumbs ul {
		max-width: 1140px;
		background-color: #dddddd;
		margin: 0 15px 0 0;
		box-shadow: inset -6px 6px 10px -6px #666;
		border-bottom: solid 2px #e9e9e9;
		}	
	.selected img {
		opacity:0.5;
		}

/* ## Touch enabling of thumb scroller ## */
	#slider-thumbs ul {
		white-space: nowrap;
		overflow-y: hidden;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		} 
		
		
/* ## Video and Modals
	/* max-width, 480px set here */
/* I don't want the video to fill disproportionately, thereby adding a letterbox effect */
/* in small viewports iframe was filling all available width so put it in a containing div */
/* iframe {
	max-width: 480px;
	}*/

/* otherwise BS default of 75% causes very long and thin Player */
/*.embed-responsive.embed-responsive-4by3	{
	padding-bottom: 360px;
	}*/
	
@media (min-width: 768px) {
	.modal-360-392 { width: 392px; background: green; }
	.modal-544-576 { width: 576px; background: green; }
	}	
	
	.embed-responsive-2by1 {
	  padding-bottom: 50.5%;
	  /* for 544 × 272 video etc. */
	}