.slideWrapper { float: right; margin-top: 1.5em; }

#slideshow { position: relative; width: 680px; margin-bottom: 2em; text-shadow: none; }

#slideshow h2 { margin: 0 0 .3em 0; font-size: 1.6em; }

.carousel { margin-bottom: 1rem; overflow: hidden; position: relative; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; height: 316px; }

.carousel.no-transition > figure { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; }

.carousel > figure { margin: 0; display: none; position: relative; -webkit-transition: .3s ease-in-out left; transition: .3s ease-in-out left; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
[dir="rtl"] .carousel > figure { -webkit-transition: .3s ease-in-out right; transition: .3s ease-in-out right; }

.carousel > figure > a { display: block; position: relative; }
.carousel > figure > img { display: block; width: 516px; }

.carousel > figure > a > figcaption { position: absolute; top: 0; right: 0; width: 200px; height: 280px; padding: 10px; background-color: #333; color: #fff; line-height: 1.2; border-left: 1px solid #fff; }
.carousel > figure > a > figcaption:after { position: absolute; height: 0; width: 0; content:""; left: -30px; top: 16px; border: 15px solid transparent; border-right-color: #333; }
.carousel > figure > a > figcaption:before { position: absolute; height: 0; width: 0; content:""; left: -34px; top: 14px; border: 17px solid transparent; border-right-color: #fff; }
.carousel figcaption h3 { color: #efd921; font-size: 1.4em; line-height: 1.2; }
.carousel figcaption p { font-size: 1.15em; }
	.carousel > figure > a:hover h3, .carousel > figure > a:focus h3 { color: #e1cf3b; text-decoration: underline; }
	.carousel > figure > a:hover p, .carousel > figure > a:focus p { color: #ccc; }

.carousel > ol { left: 0; list-style: none; margin: 0; padding: 0; position: absolute; right: 0; text-align: center; bottom: 0; z-index: 3; }
.carousel > ol li { background-color: #c0c0c0; cursor: pointer; display: inline-block; height: 1rem; margin: 1px .5em; text-indent: -9999px; width: 1rem; border-radius: 40px; }
	.carousel > ol li:hover, .carousel > ol li:focus { background-color: #efd921; }
	.carousel > ol .active { background-color: #29596f; }
	.carousel > ol .active:hover, .carousel > ol .active:focus { background-color: #efd921; }
	
.carousel .carousel-active, .carousel .next, .carousel .prev, .carousel .swipe { display: block; }
.carousel .carousel-active, .carousel .next.left, .carousel .prev.right { left: 0; }
.carousel .carousel-active { position: relative !important; z-index: 1; }
.carousel .next, .carousel .prev, .carousel .swipe { position: absolute; z-index: 0; top: 0; width: 100%; height: 100%; }
.carousel .next, .carousel .carousel-active.right { left: 100%; }
.carousel .prev, .carousel .carousel-active.left { left: -100%; }

.carousel > button { position: absolute; left: 6px; bottom: 50%; z-index: 3; display: block; width: 2.3rem; height: 2.2rem; margin-top: -1rem; background-color: #29596f; font-size: 1.2em; font-weight: bold; color: #fff; text-align: center; text-decoration: none; border: 1px solid rgba(255,255,255,.5); border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,.7), 0 -1px 3px rgba(0,0,0,.7); vertical-align: middle; padding-bottom: .15em;}
.carousel > button.forward { left: auto; right: 6px; border-radius: 5px; border: 1px solid rgba(255,255,255,.5); }
.carousel > button:hover { background: #347492; }

.carousel-fade > figure { position: absolute; top: 0; right: 0 !important; bottom: 0; left: 0 !important; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity .3s ease-in-out; transition: opacity .3s ease-in-out; }
.carousel-fade > figure.swipe, .carousel-fade > figure.next, .carousel-fade > figure.prev { z-index: 1; opacity: 1; }
.carousel-fade .carousel-active.swipe { z-index: 2; }
.carousel-fade .carousel-active { opacity: 1; }
.carousel-fade .carousel-active.left, .carousel-fade .carousel-active.right { z-index: 2; opacity: 0; }
.carousel-fade .carousel-control, .carousel-fade .carousel-control:visited { z-index: 3; }

.visuallyhidden {
  clip: rect(0px, 0px, 0px, 0px);
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  width: 1px;
}
.carousel > button:focus { outline: none!important; }