.carousel { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left }
.carousel { position: relative; margin: 0 auto; width: 100%; height: 43.4vw; overflow: hidden; box-sizing: border-box; opacity: 1; font-size: 28px }
.carousel img { position: absolute; width: 100%; height: auto; top: 0; left: 0 }

.carousel a.arrow { text-shadow: rgba(0, 0, 0, 0.3) 2px 4px 3px }

.carousel .title { position: absolute; top: 0; left: 0; height: 28px; right: 0; opacity: 1; padding: .25em .75em .5em ; color: #fff;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px 1px rgba(0, 0, 0, .3) !important }
.carousel .title a { color: #fff }

.carousel .title a:hover { color: darkgray }

.carousel:hover .title { background: transparent; opacity: 1 }
.carousel:hover .arrow { opacity: 1 }

.carousel a { text-decoration: none; font-weight: bold }
.carousel a:hover { opacity: 1 }
.carousel a.arrow { position: absolute; top: calc(50% - 84px); color: #fff; opacity: .25; font-size: 128px; font-weight: bold }
.carousel a.arrow:hover { color: #00175B }
.carousel a.left { left: .15em }
.carousel a.right { right: .15em }

.carousel ul { margin: 0; padding: 0; list-style: none; position: absolute; right: .5em; bottom: .25em; font-size: 32px }
.carousel ul li { display: inline-block }
.carousel ul li a { padding: .25em; opacity: .75; color: #fff }
.carousel ul li a:hover { color: #00175B; text-shadow: none }
.carousel ul li a.active { color: #00175B }

@media only screen and (max-width: 800px)
{
	.carousel .title { font-size: 24px; height: auto; padding: .1em .50em }
	.carousel a.arrow { font-size: 64px; top: calc(50% - 48px) }
	.carousel ul { bottom: .125em; font-size: 24px }
	.carousel ul li a { padding: 0 }
}