/* ============================================================================
   Self-contained image carousel (.about-carousel)
   ----------------------------------------------------------------------------
   Used on the About and Placement pages in place of the old .mac/.bxslider
   block. Deliberately does NOT depend on bxSlider or on style.css arrow rules:
   the prev/next buttons are flex columns BESIDE the image, so they can never
   overlap the photo or drift out of the section.
   Chevrons are drawn in CSS because the theme's arrow sprite
   (template/web/img/controls.png) is a saved 404 page in this mirror - and
   404s on the live site too.
   ========================================================================= */

/* layout: [button] [image] [button]
   The old .mac wrapper carried padding:24px 72px 37px 75px; the vertical part of
   that is kept here so the image doesn't sit flush against the section edges. */
.about-carousel{
	display:-webkit-box;display:-ms-flexbox;display:flex;
	-webkit-box-align:center;-ms-flex-align:center;align-items:center;
	width:100%;
	margin:0;
	padding:24px 0 37px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.about-carousel .ac-viewport{
	position:relative;
	-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;
	min-width:0;
	overflow:hidden;
}

.about-carousel .ac-slides{
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
}

.about-carousel .ac-slide{
	display:none;
	margin:0;
	padding:0;
	list-style:none;
}

.about-carousel .ac-slide.is-active{display:block;}

.about-carousel .ac-slide img{
	display:block;
	width:100%;
	height:auto;
}

/* buttons - fixed-width columns either side of the image */
.about-carousel .ac-btn{
	-webkit-box-flex:0;-ms-flex:0 0 46px;flex:0 0 46px;
	width:46px;
	height:46px;
	padding:0;
	margin:0;
	border:0;
	background:transparent;
	cursor:pointer;
	outline:0;
	opacity:0.5;
	-webkit-transition:opacity .2s ease;transition:opacity .2s ease;
	/* stop Bootstrap / theme button styling leaking in */
	-webkit-appearance:none;-moz-appearance:none;appearance:none;
	box-shadow:none;
	border-radius:0;
	line-height:normal;
	text-shadow:none;
}

.about-carousel .ac-btn:hover,
.about-carousel .ac-btn:focus{
	opacity:1;
	background:transparent;
	box-shadow:none;
}

/* chevrons drawn with two rotated borders - no image needed */
.about-carousel .ac-chevron{
	display:block;
	width:16px;
	height:16px;
	margin:0 auto;
	border-top:3px solid #7a7a7a;
	border-right:3px solid #7a7a7a;
}

.about-carousel .ac-chevron-left{
	-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);
}

.about-carousel .ac-chevron-right{
	-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);
}

/* narrow screens: shrink the button columns so the image keeps its room */
@media (max-width:767px){
	.about-carousel .ac-btn{-ms-flex:0 0 30px;flex:0 0 30px;width:30px;}
	.about-carousel .ac-chevron{width:12px;height:12px;border-width:2px;}
}