/** Owl Carousel v1.3.3 *************************************************** **/ /* clearfix */ .owl-carousel { .owl-wrapper { &:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } display: none; position: relative; width: 100%; -ms-touch-action: pan-y; .owl-wrapper-outer { overflow: hidden; position: relative; width: 100%; z-index: 0; &.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-item { float: left; } } /* display none until init */ .owl-controls { .owl-page, .owl-buttons div { cursor: pointer; } -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); } .owl-carousel.featured .owl-controls .owl-prev { margin-right: 3px; } #progressBar { width: 100%; background: rgba(0, 0, 0, 0.05); #bar { height: 3px; width: 100%; background-color: #333; } } /* mouse grab icon */ .grabbing { cursor: url(../images/_smarty/grabbing.png) 8 8, move; } /* fix */ .owl-carousel { .owl-wrapper, .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); } } /* * Owl Carousel CSS3 Transitions * v1.3.2 */ .owl-origin { -webkit-perspective: 1200px; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; -moz-perspective: 1200px; -moz-perspective-origin-x: 50%; -moz-perspective-origin-y: 50%; perspective: 1200px; } /* fade */ .owl-fade-out { z-index: 10; -webkit-animation: fadeOut .7s both ease; -moz-animation: fadeOut .7s both ease; animation: fadeOut .7s both ease; } .owl-fade-in { -webkit-animation: fadeIn .7s both ease; -moz-animation: fadeIn .7s both ease; animation: fadeIn .7s both ease; } /* backSlide */ .owl-backSlide-out { -webkit-animation: backSlideOut 1s both ease; -moz-animation: backSlideOut 1s both ease; animation: backSlideOut 1s both ease; } .owl-backSlide-in { -webkit-animation: backSlideIn 1s both ease; -moz-animation: backSlideIn 1s both ease; animation: backSlideIn 1s both ease; } /* goDown */ .owl-goDown-out { -webkit-animation: scaleToFade .7s ease both; -moz-animation: scaleToFade .7s ease both; animation: scaleToFade .7s ease both; } .owl-goDown-in { -webkit-animation: goDown .6s ease both; -moz-animation: goDown .6s ease both; animation: goDown .6s ease both; } /* scaleUp */ .owl-fadeUp-in { -webkit-animation: scaleUpFrom .5s ease both; -moz-animation: scaleUpFrom .5s ease both; animation: scaleUpFrom .5s ease both; } .owl-fadeUp-out { -webkit-animation: scaleUpTo .5s ease both; -moz-animation: scaleUpTo .5s ease both; animation: scaleUpTo .5s ease both; } /* Keyframes */ @-webkit-keyframes empty { 0% { opacity: 1; } } @-moz-keyframes empty { 0% { opacity: 1; } } @keyframes empty { 0% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes backSlideOut { 25% { opacity: .5; -webkit-transform: translateZ(-500px); } 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } } @-moz-keyframes backSlideOut { 25% { opacity: .5; -moz-transform: translateZ(-500px); } 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } } @keyframes backSlideOut { 25% { opacity: .5; transform: translateZ(-500px); } 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } } @-webkit-keyframes backSlideIn { 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -webkit-transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } } @-moz-keyframes backSlideIn { 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -moz-transform: translateZ(-500px); } 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); } } @keyframes backSlideIn { 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; transform: translateZ(-500px); } 100% { opacity: 1; transform: translateZ(0) translateX(0); } } @-webkit-keyframes scaleToFade { to { opacity: 0; -webkit-transform: scale(0.8); } } @-moz-keyframes scaleToFade { to { opacity: 0; -moz-transform: scale(0.8); } } @keyframes scaleToFade { to { opacity: 0; transform: scale(0.8); } } @-webkit-keyframes goDown { from { -webkit-transform: translateY(-100%); } } @-moz-keyframes goDown { from { -moz-transform: translateY(-100%); } } @keyframes goDown { from { transform: translateY(-100%); } } @-webkit-keyframes scaleUpFrom { from { opacity: 0; -webkit-transform: scale(1.5); } } @-moz-keyframes scaleUpFrom { from { opacity: 0; -moz-transform: scale(1.5); } } @keyframes scaleUpFrom { from { opacity: 0; transform: scale(1.5); } } @-webkit-keyframes scaleUpTo { to { opacity: 0; -webkit-transform: scale(1.5); } } @-moz-keyframes scaleUpTo { to { opacity: 0; -moz-transform: scale(1.5); } } @keyframes scaleUpTo { to { opacity: 0; transform: scale(1.5); } } /** CUSTOM REWRITE **/ .owl-carousel { overflow: hidden; margin-bottom: 20px; position: relative; &.owl-padding-0 .owl-item { padding: 0 !important; } &.owl-padding-1 .owl-item { padding: 0 1px; } &.owl-padding-2 .owl-item { padding: 0 2px; } &.owl-padding-3 .owl-item { padding: 0 3px; } &.owl-padding-6 .owl-item { padding: 0 6px; } &.owl-padding-10 .owl-item { padding: 0 10px; } &.owl-padding-15 .owl-item { padding: 0 15px; } &.owl-padding-20 .owl-item { padding: 0 20px; } img { display: inline-block; } &.buttons-autohide { .owl-buttons { filter: Alpha(Opacity = 0); opacity: 0; -webkit-transition: opacity 0.4s; -moz-transition: opacity 0.4s; -o-transition: opacity 0.4s; transition: opacity 0.4s; } &:hover .owl-buttons { filter: Alpha(Opacity = 100); opacity: 1; } } } /* Cause width problems - better to leave left/right margins .owl-carousel .owl-item:first-child { padding-left:0; } .owl-carousel .owl-item:last-child { padding-right:0; } */ .owl-theme .owl-controls .owl-buttons div { color: #121212; background: #fff; border: #fff 1px solid; opacity: 1; filter: Alpha(Opacity = 100); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } section.dark .owl-theme .owl-controls .owl-buttons div { color: #fff; background: #212121; border: #212121 1px solid; } .controlls-over { .owl-controls { .owl-prev { position: absolute; top: 50%; margin-top: -28px; right: auto; left: -13px; zoom: 1; width: 36px; height: 36px; opacity: 0; } .owl-next { position: absolute; top: 50%; margin-top: -28px; left: auto; right: -13px; zoom: 1; width: 36px; height: 36px; opacity: 0; } } .owl-pagination { text-align: center; position: absolute; width: 60%; margin: auto; bottom: -20px; left: 0; right: 0; z-index: 1; } } .owl-theme.controlls-over .owl-controls .owl-page { background: rgba(0, 0, 0, 0.3); margin-bottom: 30px; position: relative; display: inline-block; &:first-child { -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-top-left: 10px; -moz-border-radius-bottom-left: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } &:last-child { -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-top-right: 10px; -moz-border-radius-bottom-right: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } span { background: #fff; } } .bottom-pagination .owl-controls .owl-page { margin-bottom: -40px !important; } /* top text caption */ .owl-carousel { .owl-item div { position: relative; text-align: center; } .owl-caption { padding: 10px; position: absolute !important; left: 0; top: 0; right: 0; margin-top: 0; max-width: 100%; background: rgba(0, 0, 0, 0.3); display: block; color: #fff; p { color: #fff; font-size: 13px; line-height: 20px; padding: 0; margin: 0; } h1, h2, h3 { color: #fff; font-size: 21px; line-height: 21px; font-weight: bold; margin-bottom: 10px; a { color: #fff; font-size: 21px; line-height: 21px; font-weight: bold; margin-bottom: 10px; } } a { color: #fff; font-weight: bold; } } &.controls-hover-only .owl-controls { filter: alpha(opacity = 0); opacity: 0; -webkit-transition: opacity 0.4s; -moz-transition: opacity 0.4s; -o-transition: opacity 0.4s; transition: opacity 0.4s; } } .slider:hover .owl-carousel.controls-hover-only .owl-controls { filter: alpha(opacity = 100); opacity: 1; } .owl-carousel { &.controls-hover-only:hover .owl-controls { filter: alpha(opacity = 100); opacity: 1; } &.featured { .owl-featured-item { width: 99%; padding-bottom: 15px; text-align: center; display: block; webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; &:hover { background-color: #eaeaea; } a.figure { margin: 0; padding: 0; display: block; width: 100%; height: auto; overflow: hidden; text-align: center; z-index: 0; position: relative; > img { height: auto !important; width: 100% !important; max-width: 100% !important; vertical-align: top; } } } .owl-featured-detail { position: relative; padding-top: 6px; &:after { content: ' '; position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; left: 50%; margin-left: -10px; top: -10px; z-index: 10; webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } } .owl-featured-item:hover > .owl-featured-detail:after { border-bottom: 10px solid #eaeaea; } .owl-featured-detail > { a.featured-title { color: #333; margin-top: 6px; display: block; } span.price { display: block; margin-bottom: 6px; } } margin-top: 6px; .owl-controls.clickable { top: 0 !important; margin-top: -45px; position: absolute; right: 0; } } } /* Featured Item */ h2.owl-featured { font-size: 16px; line-height: 19px; border-bottom: rgba(0, 0, 0, 0.2) 1px dashed; padding-bottom: 6px; margin-bottom: 10px; } .owl-carousel.featured { a.figure { > span { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); filter: alpha(opacity = 0); opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; > i { color: #333; position: absolute; left: 50%; top: 50%; background: #fff; font-size: 21px; width: 50px; height: 50px; line-height: 50px !important; text-align: center; margin-left: -20px; margin-top: -20px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-border-bottom-right-radius: 20px; -webkit-border-top-left-radius: 20px; -moz-border-radius-bottom-right: 20px; -moz-border-radius-top-left: 20px; border-bottom-right-radius: 20px; border-top-left-radius: 20px; } } &:hover > span { filter: alpha(opacity = 100); opacity: 1; } } overflow: inherit !important; .owl-prev, .owl-next { display: inline-block !important; color: #999 !important; width: 30px !important; height: 30px !important; line-height: 30px !important; font-size: 20px !important; } .owl-prev:hover, .owl-next:hover { color: #121212 !important; } } section.dark { .owl-carousel.featured { .owl-featured-detail { > a.featured-title { color: #fff; } &:after { border-bottom-color: #212121; } } .owl-featured-item:hover { background-color: #111; > .owl-featured-detail:after { border-bottom-color: #111; } } .owl-prev, .owl-next { color: #999 !important; } .owl-prev:hover, .owl-next:hover { color: #fff !important; } } h2.owl-featured { border-bottom-color: #666; } } @media only screen and (max-width: 768px) { /* .owl-carousel.featured .owl-controls { display:none !important } */ } /* buttons bottom */ .owl-carousel { &.buttons-bottom { .owl-controls { top: auto !important; } .owl-next, .owl-prev { margin-top: -20px !important; } } .owl-carousel-caption { background-color: rgba(0, 0, 0, 0.5); position: absolute !important; top: 0; left: 0; right: 0; color: #fff; padding: 20px; height: 96px; overflow: hidden; &.top { top: 0; bottom: auto; } &.bottom { top: auto; bottom: 29px; } h2, h3, h4 { color: #fff; font-size: 16px; line-height: 16px; margin-bottom: 10px; font-weight: bold; overflow: hidden; display: block; width: 100%; text-overflow: ellipsis; white-space: nowrap; } p { color: #fff; font-size: 12px; line-height: 15px; padding: 0; margin: 0; } } } /* special carousel title */ .owl-theme .owl-controls .owl-buttons div { /* padding:6px 13px; */ } .owl-controls { .owl-page, .owl-buttons div { cursor: pointer; } } .controlls-over .owl-controls { .owl-prev { margin-left: 10px; } .owl-next { margin-right: 10px; } } /* Styling Pagination*/ .owl-theme .owl-controls { .owl-page { display: inline-block; zoom: 1; *display: inline; /*IE7 life-saver */ span { display: block; width: 20px; height: 5px; margin: 5px 7px; filter: Alpha(Opacity = 50); /*IE7 fix*/ opacity: 0.5; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background: #869791; } &.active span { filter: Alpha(Opacity = 100); /*IE7 fix*/ opacity: 1; } } &.clickable .owl-page:hover span { filter: Alpha(Opacity = 100); /*IE7 fix*/ opacity: 1; } .owl-page span.owl-numbers { height: auto; width: auto; color: #FFF; padding: 2px 10px; font-size: 12px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } } /* If PaginationNumbers is true */ @media only screen and (max-width: 600px) { .owl-pagination { display: none; } }