.carousel { position: relative; outline: 0; } .carousel-inner { position: relative; width: 100%; overflow: hidden; outline: 0; } .carousel-item { position: relative; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; outline: 0; } .carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; } .carousel-item-next, .carousel-item-prev { position: absolute; top: 0; } .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { -webkit-transform: translateX(0); transform: translateX(0); } @supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) { .carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .carousel-item-next, .active.carousel-item-right { -webkit-transform: translateX(100%); transform: translateX(100%); } @supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) { .carousel-item-next, .active.carousel-item-right { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .carousel-item-prev, .active.carousel-item-left { -webkit-transform: translateX(-100%); transform: translateX(-100%); } @supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) { .carousel-item-prev, .active.carousel-item-left { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .carousel-control-prev, .carousel-control-next { position: absolute; top: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 15%; color: #fff; text-align: center; opacity: .5; } .carousel-control-prev i, .carousel-control-next i { font-size: 40px; } .carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-next:hover, .carousel-control-next:focus { color: #fff; text-decoration: none; outline: 0; opacity: .9; } .carousel-control-prev { left: 25px; } .carousel-control-next { right: 25px; } .carousel-indicators { position: absolute; right: 0; bottom: 15px  !important; left: 0; z-index: 15; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: 0; margin-right: 0  !important; margin-left: 0  !important; list-style: none; width: 100%  !important; } .carousel-indicators li { position: relative; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; width: 16px; height: 16px; margin-right: 8px; margin-left: 8px; text-indent: -999px; background-color: rgba(255, 255, 255, .5); border: none  !important; border-radius: 50%; } .carousel-indicators li::before { position: absolute; top: -10px; left: 0; display: inline-block; width: 100%; height: 10px; content: ""; } .carousel-indicators li::after { position: absolute; bottom: -10px; left: 0; display: inline-block; width: 100%; height: 10px; content: ""; } .carousel-indicators .active { background-color: #fff  !important; width: 16px  !important; height: 16px  !important; border: none  !important; } .carousel-caption { position: absolute; right: 15%; bottom: 20px; left: 15%; z-index: 10; padding-top: 20px; padding-bottom: 20px; color: #fff; text-align: center; } .think-slider { display: table; width: 100%; border: none; outline: 0; } .think-slider .carousel-item { width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; outline: 0; } .think-slider, .think-slider .carousel-item { outline: 0; } .think-slider .carousel-item::before { content: ''; position: absolute; height: 100%; width: 100%; top: 0; right: 0; left: 0; bottom: 0; outline: 0; } .think-slider .carousel-container { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; top: 0; left: 0; right: 0; outline: 0; } .think-slider .carousel-content { text-align: center; max-width: 870px } .think-slider .carousel-background img { display: block; } .think-slider .carousel-fade { overflow: hidden; } .think-slider .carousel-fade .carousel-inner .carousel-item { transition-property: opacity; } .think-slider .carousel-fade .carousel-inner .carousel-item, .think-slider .carousel-fade .carousel-inner .active.carousel-item-left, .think-slider .carousel-fade .carousel-inner .active.carousel-item-right { opacity: 0; } .think-slider .carousel-fade .carousel-inner .active, .think-slider .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left, .think-slider .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right { opacity: 1; transition: .5s; } .think-slider .carousel-fade .carousel-inner .carousel-item-next, .think-slider .carousel-fade .carousel-inner .carousel-item-prev, .think-slider .carousel-fade .carousel-inner .active.carousel-item-left, .think-slider .carousel-fade .carousel-inner .active.carousel-item-right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .think-slider .carousel-overlay{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; } .think-slider .carousel-control-prev, .think-slider .carousel-control-next { width: 10%; } @media (min-width: 1024px) { .think-slider .carousel-control-prev, .think-slider .carousel-control-next { width: 5%; } } .think-slider .carousel-control-next-icon, .think-slider .carousel-control-prev-icon { background: none; font-size: 32px; line-height: 1; } .think-slider .carousel-indicators li { cursor: pointer; } .think-slider .carousel-content a { font-size: 17px; line-height: 25px; outline: 0; border: 0; text-decoration: none; } .carousel-content h2 { font-size: 32px; font-weight: bold; line-height: 36px; color: #1f1e1f; margin-bottom: 20px  !important; } .think-slider, .sb-carousel { display: block; } .think-slider .carousel, .think-slider .carousel-inner, .think-slider .carousel-inner .carousel-item, .sb-carousel .carousel, .sb-carousel .carousel-inner, .sb-carousel .carousel-inner .carousel-item { height: 100%; } .think-slider .carousel-background{height: 100%; background-size: cover; background-position: 50% 50%}