.sr-only { position: absolute; left: -9999999px; }
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; }
.carousel-inner { position: relative; width: 100%; overflow: hidden; }
.carousel-inner > .item { position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left; }
.carousel-inner > .item > img, .carousel-inner > .item > a > img { line-height: 1; }
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item { -webkit-transition: -webkit-transform .6s ease-in-out; -o-transition: -o-transform .6s ease-in-out; transition: transform .6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; }
.carousel-inner > .item.next,  .carousel-inner > .item.active.right { left: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }
.carousel-inner > .item.prev,  .carousel-inner > .item.active.left { left: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
.carousel-inner > .item.next.left,  .carousel-inner > .item.prev.right,  .carousel-inner > .item.active { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
.carousel-inner > .active, .carousel-inner > .next, .carousel-inner > .prev { display: block; }
.carousel-inner > .active { left: 0; }
.carousel-inner > .next, .carousel-inner > .prev { position: absolute; top: 0; width: 100%; }
.carousel-inner > .next { left: 100%; }
.carousel-inner > .prev { left: -100%; }
.carousel-inner > .next.left, .carousel-inner > .prev.right { left: 0; }
.carousel-inner > .active.left { left: -100%; }
.carousel-inner > .active.right { left: 100%; }
.carousel-control { position: absolute; top: 0; bottom: 0; left: 0; width: 15%; font-size: 20px; color: #fff; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); filter: alpha(opacity=50); opacity: .5; }
.carousel-control.left { background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001))); background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
background-repeat: repeat-x; }
.carousel-control.right { right: 0; left: auto; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5))); background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
background-repeat: repeat-x; }
.carousel-control:hover, .carousel-control:focus { color: #fff; text-decoration: none; filter: alpha(opacity=90);  opacity: .9; }
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; }
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left { left: 50%; margin-left: -10px; }
.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right { right: 50%; margin-right: -10px; }
.carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; }
.carousel-control .icon-prev:before { content: '\2039'; }
.carousel-control .icon-next:before { content: '\203a'; }
.carousel-indicators { position: absolute; bottom: 10px; left: 50%; z-index: 15; width: 60%; padding-left: 0; margin-left: -30%; text-align: center; list-style: none; }
.carousel-indicators li { display: inline-block; width: 10px; height: 10px; margin: 1px; text-indent: -999px; cursor: pointer; background-color: #000 \9; background-color: rgba(0, 0, 0, 0); border: 1px solid #fff; border-radius: 10px; }
.carousel-indicators .active { width: 12px; height: 12px; margin: 0; background-color: #fff; }
.carousel-caption { position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff;text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.carousel-caption .btn { text-shadow: none; }
@media screen and (min-width: 768px) {
.carousel-control .glyphicon-chevron-left,  .carousel-control .glyphicon-chevron-right,  .carousel-control .icon-prev,  .carousel-control .icon-next { width: 30px; height: 30px; margin-top: -15px; font-size: 30px; }
.carousel-control .glyphicon-chevron-left,  .carousel-control .icon-prev { margin-left: -15px; }
.carousel-control .glyphicon-chevron-right,  .carousel-control .icon-next { margin-right: -15px; }
.carousel-caption { right: 20%; left: 20%; padding-bottom: 30px; }
.carousel-indicators { bottom: 20px; }
}

/*accessibility spacific*/
/* Carousel base class */
.carousel { background: url('https://www.coldstonecreamery.com/assets/img/layout/bg-stone.jpg') no-repeat cover; position: relative }
/* Since positioning the image, we need to help out the caption */
.carousel-inner .carousel-caption { background-color: rgba(0,0,0,0.6); z-index: 10; padding: 16px 20px 20px; width: 19em; margin-left: 7.45em; margin-bottom: 2.425em; left: 0%; right: 0%; box-shadow: 3px 5px 28px -7px #000 }
.carousel-inner > .item > img { width: 100% }
.left.carousel-control, .right.carousel-control { background: url('https://www.coldstonecreamery.com/assets/img/bg_direction_nav.png') no-repeat; width: 32px; height: 100px; top: 50%; margin-top: -50px; }
.left.carousel-control { background-position: top left; margin-left: 2em }
.right.carousel-control { background-position: top right; margin-right: 2em }
.carousel img { height: 100% !important; width: 100% !important }
.carousel { max-height: 400px; overflow: hidden; position: relative; width: 100% }
.carousel-inner .carousel-caption h2 { font-size: 1.8em; margin-top: 0 }
.carousel-inner .carousel-caption h2 a { color: #fff; font-weight: 600 }
.carousel-inner .carousel-caption p { }
.carousel-inner, .carousel-inner .item, .carousel-slide { max-height: 400px; }
.carousel .carousel-indicators { text-align: center; margin-left: 0%; width: auto; position: static; width: auto; margin-bottom: 0px }
.slideControls { position: absolute; bottom: 15px; z-index: 5; width: 100%; text-align: center; }
.slideControls .carouselPausePlay, .slideControls .carousel-indicators { display: inline-block; margin-top: 0px }
.slideControls .carouselPausePlay { vertical-align: top; margin: 1px 5px 0 0}
.carousel .carousel-indicators li, .carousel .carousel-indicators li.active, .carousel .carousel-indicators.active li, .carousel .carousel-indicators.active li.active { background-color: transparent; margin: 1px; }
.carousel .carousel-indicators li { background-color: lightgray; opacity: 0.5 !important; width: 20px; 
    height: 20px; box-shadow: inset 0px 1px 1px 0px #000; border: none; -webkit-border-radius: 20px; 
	-moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; 
	box-shadow: inset 0px 1px 1px 0px #000; margin: 0 5px}
.carousel .carousel-indicators li.active,.carousel .carousel-indicators.active li.active { opacity: 1 !important; margin: 0 5px}
.carousel .carousel-indicators li.active, .carousel .carousel-indicators.active li.active { background-color: #fff; }
.carousel .carousel-indicators.active li { opacity: 1 }
.carousel .carousel-indicators li:hover { background-color: #fff }
.carousel .carousel-control { z-index: 11 }
@media (max-width: 1000px) {
.carousel-inner .carousel-caption h2 { margin-bottom: 0 }
}
@media (max-width: 640px) {
.carousel { font-size: 0.8em }
}
.carousel-tablist-highlight { display: block; position: absolute; outline: 1px solid transparent; background-color: transparent; box-shadow: 0px 0px 0px 1px transparent; -moz-boxshadow: 0px 0px 0px 1px transparent; -webkit-boxshadow: 0px 0px 0px 1px transparent }
.carousel-tablist-highlight.focus {background-color: rgba(0,0,0,0);}
button.carousel-pause-button { }





