/* Carousel ======================================== */ .carousel { position: relative; margin-bottom: var(--base-line-height); line-height: 1; } .carousel-inner { overflow: hidden; width: 100%; position: relative; } .carousel-inner>.item { display: none; position: relative; transition: 0.6s ease-in-out left; } /* Account for jankitude on images */ .carousel-inner>.item>img, .carousel-inner>.item>a>img { display: block; line-height: 1; } .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%; } /* Left/right controls for nav */ .carousel-control { position: absolute; top: 40%; left: 15px; width: 40px; height: 40px; margin-top: -20px; font-size: 60px; font-weight: 100; line-height: 30px; color: var(--white); text-align: center; background: var(--gray-darker); border: 3px solid var(--white); border-radius: 23px; opacity: 0.5; } /* Reposition the right one */ .carousel-control.right { left: auto; right: 15px; } /* Hover/focus state */ .carousel-control:hover, .carousel-control:focus { color: var(--white); text-decoration: none; opacity: 0.9; } /* Carousel indicator pips */ .carousel-indicators { position: absolute; top: 15px; right: 15px; z-index: 5; margin: 0; list-style: none; } .carousel-indicators li { display: block; float: left; width: 10px; height: 10px; margin-left: 5px; text-indent: -999px; background-color: #ccc; background-color: rgba(255, 255, 255, .25); border-radius: 5px; } .carousel-indicators .active { background-color: #fff; } /* Caption for text below images */ .carousel-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 15px; background: var(--gray-dark); background: rgba(0, 0, 0, .75); } .carousel-caption h4, .carousel-caption p { color: var(--white); line-height: var(--base-line-height); } .carousel-caption h4 { margin: 0 0 5px; } .carousel-caption p { margin-bottom: 0; }