/* * Core Owl Carousel CSS File * v1.3.3 */ /* clearfix */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel { display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper { display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer { overflow: hidden; position: relative; width: 100%; } .owl-carousel .owl-wrapper-outer.autoHeight { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item { float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div { cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* mouse grab icon */ .grabbing { cursor: url(grabbing.png) 8 8, move; } /* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } /* Feel free to change duration */ .animated { -webkit-animation-duration: 1000 ms; animation-duration: 1000 ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* .owl-animated-out - only for current item */ /* This is very important class. Use z-index if you want move Out item above In item */ .owl-animated-out { z-index: 1 } /* .owl-animated-in - only for upcoming item /* This is very important class. Use z-index if you want move In item above Out item */ .owl-animated-in { z-index: 0 } /* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css: */ .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } #owl-demo .item img { display: block; width: 100%; height: auto; } .owl-theme .owl-controls { position: relative; } .owl-theme .owl-controls .item-link { position: relative; display: block; width: 100px; height: 70px; margin: 0 2px; border-bottom: 4px solid #ccc; outline: none; } .owl-theme .owl-controls .item-link:focus { -webkit-box-shadow: 0 0 8px #3498DB; -moz-box-shadow: 0 0 8px #3498DB; box-shadow: 0 0 8px #3498DB; outline: none; } .owl-theme .owl-controls .active .item-link { border-bottom: 4px solid #3498DB; } .owl-theme .owl-controls .owl-page span { display: none; } .owl-theme .prev-owl, .owl-theme .next-owl { display: none; } .owl-theme .prev-owl:focus, .owl-theme .next-owl:focus { -webkit-box-shadow: 0 0 8px #3498DB; -moz-box-shadow: 0 0 8px #3498DB; box-shadow: 0 0 8px #3498DB; } .owl-theme .prev-owl { left: 24px; } .owl-theme .next-owl { right: 24px; }