@import "back/bootstrap/variables.less"; @import "back/bootstrap/variables-v3.less"; @import "back/bootstrap/mixins.less"; @import "common/mixins/mixins.less"; /* ----------------- MODAL GALERIA ------------------ */ .popup-box-container.modal.modal-galeria { bottom: 0 !important; } .modal-galeria { background-color: transparent; bottom: 0 !important; left: 0 !important; margin: 0 !important; right: 0 !important; top: 0 !important; width: auto !important; height: auto !important; border: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; -ms-box-sizing : border-box; -o-box-sizing : border-box; box-sizing : border-box; &.modal { .transform(translateY(0px) translate3d(0,0,0)); } .popup-box-close { &.close { &:hover { opacity: 1; } line-height: 26px; font-size: 36px; opacity: 0.5; } } .modal-header-galeria { height: 22px; left: 0; position: absolute; right: 0; top: 0; background-color: #fff; border: none; padding: 9px 15px; h4 { color: #333; margin: 0; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; } } .modal-body-galeria { bottom: 60px; height: auto; left: 0; max-height: none; overflow: hidden; position: absolute; right: 0; top: 40px; .mdspinner { height: 100%; } } .modal-footer-galeria { background: #F5F5F5; bottom: 0; left: 0; position: absolute; right: 0; height: 30px; padding: 15px; text-align: right; .indicador { font-weight: 700; color: #333; background-color: #fff; } } } /* --------------- GENERAL --------------- */ .restore-pointer-events { pointer-events: auto; } .vimeo-hide-controls { > .embed-container { padding-top: 200px; position: absolute; left: 0; right: 0; margin-top: -100px; } } /* --------------- h-separator --------------- */ .h-separator { height: 20px; } /* --------------- twitterTimeline --------------- */ .widget { &.twitterTimeline { iframe { width: 100% !important; } } } /* --------------- fbcomments --------------- */ .widget { &.fbcomments { overflow: hidden; .fb-comments.fb_iframe_widget span, .fb-comments.fb_iframe_widget span iframe { width: 100% !important; } } } /* --------------- fblike --------------- */ .widget { &.fblike { .fb-like { &, > span, > span > iframe { width: 100% !important; } } } } /* --------------- WDG-GALERIA --------------- */ .wdg-galeria { .transform(matrix(1.0, 0.0, 0.0, 1.0, 0.00, 0.01)); .mdspinner { position: absolute; top: 0; width: 100%; height: 100%; } ul.thumbnails { margin: 0; li { a { display: block; position: relative; padding: 50% 0; height:1px; } .thumbnail { position: relative; padding: 0; overflow: hidden; background-color: #fff; border: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; .box-shadow(0px 0px 2px rgba(0, 0, 0, 0.3)); } } } a { > .thumbnail-hover { position: absolute; width: 100%; height: 100%; top:0; left:0; right:0; bottom:0; background: url(/img/snippets/ver-imagen.png) center center no-repeat #000; opacity:0; .transition(opacity .2s ease-out); } > img { opacity: 0; .transition(opacity .2s ease-out); &.in { opacity: 1; transition-delay: .5s; -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; } } > .caption { background: transparent; position: absolute; bottom: -50px; color: #fff; opacity: 0; width: 100%; padding: 5px 15px; .box-sizing(border-box); .transition(all .2s ease-out); h4 { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; color: #fff; } } &:hover { > .caption { bottom: 0; opacity: 1; } > .thumbnail-hover { opacity:0.7; } } } .row-fluid.no-gutters li { margin-bottom: 0; } .carousel .item > a { display: block; } } /* --------------- ICONO --------------- */ .wdg-icono { &[class^="icon-"], &[class*=" icon-"] { text-decoration: none; line-height: normal; width: auto; height: auto; margin-top: 0; background: none 0 0 repeat; } } /* --------------- CONTADOR DE VISITAS --------------- */ .wdg-contador-visitas { margin: 20px 0; p { margin-bottom: 0; } .odometer { font-size: 24px; } } /* --------------- IFRAME --------------- */ .wdg-iframe { .iframe-container { position: relative; overflow: hidden; } iframe { top: 0; left: 0; right: 0; bottom: 0; position: absolute; border: none; height: 100%; width: 100%; } } /* --------------- EMOJI --------------- */ .wdg-emoji { display: inline-block; img { &.emoji { box-sizing: border-box; padding: 0; height: auto; vertical-align: middle; width: 100%; } } } /* --------------- CAJA --------------- */ [data-widget="caja"] { -webkit-box-sizing : border-box; -moz-box-sizing : border-box; -ms-box-sizing : border-box; -o-box-sizing : border-box; box-sizing : border-box; } .wdg-caja-v2-absolute, .position-absolute-cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .webkit-border-radius-overflow-fix { -webkit-mask-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs); } //Debug html { &.debug-caja { [data-role*="background-image"] { border: 2px solid #ff0000; } [data-role*="background-image-container"] { border: 4px solid #00ff00; overflow: visible!important; } [data-role*="background"]{ overflow: visible!important; } .navbar-container { display: none; } } } /* --------------- CARD ----------- */ .wdg-card { position: relative; will-change: transform; } .wdg-card_side-list { will-change: transform; } .wdg-card_side { transition-duration: 1s; position: relative; backface-visibility: hidden; will-change: transform; } //Effects .wdg-card { //fadeOver &.transition-fadeOver { opacity: 1; > .wdg-card_side-list { > .wdg-card_side-1 { opacity: 0; transition-property: opacity; &.active { opacity: 1; } } } } //fade &.transition-fade { opacity: 1; > .wdg-card_side-list { > .wdg-card_side-0 { opacity: 0; transition-property: opacity; &.active { opacity: 1; } } > .wdg-card_side-1 { opacity: 0; transition-property: opacity; &.active{ opacity: 1; } } } } //slideUpOver &.transition-slideUpOver { > .wdg-card_side-list { overflow: hidden; > .wdg-card_side-1 { -webkit-transition-property: transform; -moz-transition-property: transform; transition-property: transform; .transform(translateY(100%)); &.active { .transform(translateY(0%)); } } } } //slideDownOver &.transition-slideDownOver { > .wdg-card_side-list { overflow: hidden; > .wdg-card_side-1 { -webkit-transition-property: transform; -moz-transition-property: transform; transition-property: transform; .transform(translateY(-100%)); &.active { .transform(translateY(0%)); } } } } //slideLeftOver &.transition-slideLeftOver { > .wdg-card_side-list { overflow: hidden; > .wdg-card_side-1 { -webkit-transition-property: transform; -moz-transition-property: transform; transition-property: transform; .transform(translateX(100%)); &.active { .transform(translateX(0%)); } } } } //slideRightOver &.transition-slideRightOver { > .wdg-card_side-list { overflow: hidden; > .wdg-card_side-1 { transition-property: transform; .transform(translateX(-100%)); &.active { .transform(translateX(0%)); } } } } //flipX &.transition-flipX { > .wdg-card_side-list { -webkit-transition-property: transform; -moz-transition-property: transform; transition-property: transform; transform-style: preserve-3d; .transform(perspective(600px) rotateX(0deg)); > .wdg-card_side-0 { .transform(rotateX(0deg)); } > .wdg-card_side-1 { .transform(rotateX(180deg)); } } &.active-side-1 { > .wdg-card_side-list { .transform(perspective(600px) rotateX(180deg)); } } } //flipY &.transition-flipY { > .wdg-card_side-list { -webkit-transition-property: transform; -moz-transition-property: transform; transition-property: transform; transform-style: preserve-3d; .transform(perspective(600px) rotateY(0deg)); > .wdg-card_side-0 { .transform(rotateY(0deg)); } > .wdg-card_side-1 { .transform(rotateY(180deg)); } } &.active-side-1 { > .wdg-card_side-list { .transform(perspective(600px) rotateY(180deg)); } } } } /* ---------------- CAROUSEL ---------------- */ .carousel { position: relative; z-index: 0; .carousel-indicators { position: absolute; top: 15px; right: 15px; z-index: 5; margin: 0; list-style: none; li { &:first-child { margin-left: 0; } display: block; float: left; width: 10px; height: 10px; margin-left: 5px; text-indent: -999px; background-color: #000; background-color: rgba(0,0,0,0.4); border-radius: 7px; border: 2px solid #fff; cursor: pointer; } .active { background-color: #fff; border: 2px solid rgba(0,0,0,0.4); } } &.indicators-position-left-bottom { .carousel-indicators { top: auto; right: auto; bottom: 15px; left: 15px; } } &.indicators-position-left-top { .carousel-indicators { top: 15px; right: auto; bottom: auto; left: 15px; } } &.indicators-position-right-top { .carousel-indicators { top: 15px; right: 15px; bottom: auto; left: auto; } } &.indicators-position-right-bottom { .carousel-indicators { top: auto; right: 15px; bottom: 15px; left: auto; } } &.indicators-position-center-bottom { .carousel-indicators { top: auto; right: auto; bottom: 15px; left: 50%; .transform(translateX(-50%)); } } &.indicators-position-center-top { .carousel-indicators { top: 15px; right: auto; bottom: auto; left: 50%; .transform(translateX(-50%)); } } .carousel-caption { position: absolute; right: 0; bottom: 0; left: 0; padding: 15px; background: #333333; background: rgba(0, 0, 0, 0.75); h4, p { line-height: 20px; color: #ffffff; } h4 { margin: 0 0 5px; } p { margin-bottom: 0; } } &.auto-hide-controls { &:hover { a.carousel-control { opacity: 0.3; } } a.carousel-control { opacity: 0; .transition(~"opacity, background .2s ease-out"); } } &.auto-hide-indicators { &:hover { .carousel-indicators { opacity: 1; } } .carousel-indicators { opacity: 0; .transition(~"opacity, background .2s ease-out"); } } a { &.carousel-control { border-radius: 10%; border: none; background: #000; height: 50px; width: 50px; top: 50%; margin-top: -25px; font-size: 26px; color: #fff; line-height: 50px; opacity: 0.3; &.left { left: 15px; > i { padding-right: 2px; } } &.right { right: 15px; > i { padding-left: 2px; } } &:hover { opacity: 0.7 !important; } } > [class^="icon-"], > [class*=" icon-"], > [class^="icon-"]:before, > [class*=" icon-"]:before { cursor: pointer !important; /* Muestra cursor manito en Firefox */ } } } /* ------------- CAROUSEL-RESET ----------- -*/ .carousel { &.slide { &.carousel-reset { overflow: hidden; margin: 0; > * { z-index: 2; } } > .carousel-inner { z-index: 1; -webkit-perspective: 600px; -moz-perspective: 600px; -ms-perspective: 600px; perspective: 600px; overflow: visible; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; > .item { left: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; &.animated { .transition(all 1s); } } } } } /* ------------- CAROUSEL-SLIDE ----------- -*/ .carousel.slide.carousel-slide > .carousel-inner > .item{ -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } .carousel.slide.carousel-slide > .carousel-inner > .item.active.left, .carousel.slide.carousel-slide > .carousel-inner > .item.active.right{ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .carousel.slide.carousel-slide > .carousel-inner > .item.active.right{ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .carousel.slide.carousel-slide > .carousel-inner > .item.prev, .carousel.slide.carousel-slide > .carousel-inner > .item.next{ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .carousel.slide.carousel-slide > .carousel-inner > .item.next { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .carousel.slide.carousel-slide > .carousel-inner > .item.next.left, .carousel.slide.carousel-slide > .carousel-inner > .item.prev.right{ -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } /* ------------- CAROUSEL-FADE ----------- -*/ .carousel.slide.carousel-fade > .carousel-inner > .item{ -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } .carousel.slide.carousel-fade > .carousel-inner > .item.active.left, .carousel.slide.carousel-fade > .carousel-inner > .item.active.right{ z-index: 1; opacity: 0; } .carousel.slide.carousel-fade > .carousel-inner > .item.prev, .carousel.slide.carousel-fade > .carousel-inner > .item.next{ z-index: 2; opacity: 0; } .carousel.slide.carousel-fade > .carousel-inner > .item.next.left, .carousel.slide.carousel-fade > .carousel-inner > .item.prev.right{ opacity: 1; } /* ------------------ CAROUSEL FADEOUT ------------- */ .carousel.slide.carousel-fadeout > .carousel-inner > .item{ -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } .carousel.slide.carousel-fadeout > .carousel-inner > .item.active{ opacity: 1; transition: 500ms all; } .carousel.slide.carousel-fadeout > .carousel-inner > .item.active.left, .carousel.slide.carousel-fadeout > .carousel-inner > .item.active.right{ opacity: 0; z-index: 1; } .carousel.slide.carousel-fadeout > .carousel-inner > .item.prev, .carousel.slide.carousel-fadeout > .carousel-inner > .item.next{ z-index: 2; opacity: 0; transition-delay: 500ms; } .carousel.slide.carousel-fadeout > .carousel-inner > .item.next.left, .carousel.slide.carousel-fadeout > .carousel-inner > .item.prev.right{ opacity: 1; } /* ------------- CAROUSEL-SLIDELEFT ----------- -*/ .carousel.slide.carousel-slideleft > .carousel-inner > .item{ -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } .carousel.slide.carousel-slideleft > .carousel-inner > .item.active.left, .carousel.slide.carousel-slideleft > .carousel-inner > .item.active.right{ opacity: 0; z-index: 1; } .carousel.slide.carousel-slideleft > .carousel-inner > .item.prev, .carousel.slide.carousel-slideleft > .carousel-inner > .item.next{ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); z-index: 2; } .carousel.slide.carousel-slideleft > .carousel-inner > .item.prev{ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .carousel.slide.carousel-slideleft > .carousel-inner > .item.next.left, .carousel.slide.carousel-slideleft > .carousel-inner > .item.prev.right{ -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } /* ------------- CAROUSEL-SLIDERIGHT ----------- -*/ .carousel.slide.carousel-slideright > .carousel-inner > .item{ -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .carousel.slide.carousel-slideright > .carousel-inner > .item.active.left, .carousel.slide.carousel-slideright > .carousel-inner > .item.active.right{ opacity: 0; z-index: 1; /*transform: rotateY(30deg);*/ } .carousel.slide.carousel-slideright > .carousel-inner > .item.prev, .carousel.slide.carousel-slideright > .carousel-inner > .item.next{ -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); z-index: 2; } .carousel.slide.carousel-slideright > .carousel-inner > .item.prev{ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .carousel.slide.carousel-slideright > .carousel-inner > .item.next.left, .carousel.slide.carousel-slideright > .carousel-inner > .item.prev.right{ -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } /* ------------- CAROUSEL-SLIDEUP ----------- -*/ .carousel.slide.carousel-slideup > .carousel-inner > .item{ -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; -o-transform-origin: bottom center; transform-origin: bottom center; } .carousel.slide.carousel-slideup > .carousel-inner > .item.active.left, .carousel.slide.carousel-slideup > .carousel-inner > .item.active.right{ opacity: 0; z-index: 1; -webkit-transform: rotateX(30deg); -moz-transform: rotateX(30deg); -ms-transform: rotateX(30deg); -o-transform: rotateX(30deg); transform: rotateX(30deg); } .carousel.slide.carousel-slideup > .carousel-inner > .item.prev, .carousel.slide.carousel-slideup > .carousel-inner > .item.next{ top: 150%; z-index: 2; } .carousel.slide.carousel-slideup > .carousel-inner > .item.next.left, .carousel.slide.carousel-slideup > .carousel-inner > .item.prev.right{ top: 0; } /* ------------- CAROUSEL-SLIDEDOWN ----------- -*/ .carousel.slide.carousel-slidedown > .carousel-inner > .item{ -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } .carousel.slide.carousel-slidedown > .carousel-inner > .item.active.left, .carousel.slide.carousel-slidedown > .carousel-inner > .item.active.right{ opacity: 0; z-index: 1; -webkit-transform: rotateX(-30deg); -moz-transform: rotateX(-30deg); -ms-transform: rotateX(-30deg); -o-transform: rotateX(-30deg); transform: rotateX(-30deg); } .carousel.slide.carousel-slidedown > .carousel-inner > .item.prev, .carousel.slide.carousel-slidedown > .carousel-inner > .item.next{ top: -150%; z-index: 2; } .carousel.slide.carousel-slidedown > .carousel-inner > .item.next.left, .carousel.slide.carousel-slidedown > .carousel-inner > .item.prev.right{ top: 0; } /* ------------- CAROUSEL-3D ----------- -*/ .carousel.slide.carousel-rotate-3d-horizontal > .carousel-inner > .item{ transition: all 2s; } .carousel.slide.carousel-rotate-3d-horizontal > .carousel-inner > .item.active.left, .carousel.slide.carousel-rotate-3d-horizontal > .carousel-inner > .item.prev{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .carousel.slide.carousel-rotate-3d-horizontal > .carousel-inner > .item.active.right, .carousel.slide.carousel-rotate-3d-horizontal > .carousel-inner > .item.next{ -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } .carousel.slide.carousel-rotate-3d-horizontal > .carousel-inner > .item.next.left, .carousel.slide.carousel-rotate-3d-horizontal > .carousel-inner > .item.prev.right{ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } /* CAROUSEL PERSPECTIVE */ .carousel.slide.carousel-slide-perspective > .carousel-inner > .item{ transition: all 2s; } .carousel.slide.carousel-slide-perspective > .carousel-inner > .item.active.left, .carousel.slide.carousel-slide-perspective > .carousel-inner > .item.prev{ -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); left: -100%; } .carousel.slide.carousel-slide-perspective > .carousel-inner > .item.active.right, .carousel.slide.carousel-slide-perspective > .carousel-inner > .item.next{ -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); left: 100%; } .carousel.slide.carousel-slide-perspective > .carousel-inner > .item.next.left, .carousel.slide.carousel-slide-perspective > .carousel-inner > .item.prev.right{ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); left: 0; } /* ------------- ROTATE-CLOCKWISE ----------- -*/ .carousel.slide.carousel-rotate-clockwise > .carousel-inner > .item{ transition: all 2s; } .carousel.slide.carousel-rotate-clockwise > .carousel-inner > .item.active{ -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); opacity: 1; } .carousel.slide.carousel-rotate-clockwise > .carousel-inner > .item.active.left{ -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); opacity: 0; } .carousel.slide.carousel-rotate-clockwise > .carousel-inner > .item.prev{ -webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg); -ms-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); transform: rotateZ(90deg); opacity: 0; } .carousel.slide.carousel-rotate-clockwise > .carousel-inner > .item.active.right{ -webkit-transform: rotateZ(-90deg); -moz-transform: rotateZ(-90deg); -ms-transform: rotateZ(-90deg); -o-transform: rotateZ(-90deg); transform: rotateZ(-90deg); opacity: 0; } .carousel.slide.carousel-rotate-clockwise > .carousel-inner > .item.next{ -webkit-transform: rotateZ(-90deg); -moz-transform: rotateZ(-90deg); -ms-transform: rotateZ(-90deg); -o-transform: rotateZ(-90deg); transform: rotateZ(-90deg); opacity: 0; } .carousel.slide.carousel-rotate-clockwise > .carousel-inner > .item.next.left{ -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); opacity: 1; } .carousel.slide.carousel-rotate-clockwise > .carousel-inner > .item.prev.right{ -webkit-transform: rotateZ(0deg); -moz-transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -o-transform: rotateZ(0deg); transform: rotateZ(0deg); opacity: 1; } /* ------------- HEARTBEAT ----------- -*/ .carousel.slide.carousel-heartbeat > .carousel-inner > .item.active{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } .carousel.slide.carousel-heartbeat > .carousel-inner > .item.active.left, .carousel.slide.carousel-heartbeat > .carousel-inner > .item.active.right{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); opacity: 0; } .carousel.slide.carousel-heartbeat > .carousel-inner > .item.next.left, .carousel.slide.carousel-heartbeat > .carousel-inner > .item.prev.right{ animation: carousel-heartbeat 1s; -webkit-animation: carousel-heartbeat 1s; } @keyframes carousel-heartbeat { 0% { opacity: 0; transform: scale(.8); } 50% { transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes carousel-heartbeat { 0% { opacity: 0; -webkit-transform: scale(.8); } 50% { -webkit-transform: scale(1.2); } 100% { opacity: 1; -webkit-transform: scale(1); } } /* ------------- ZOOM-IN ----------- -*/ .carousel.slide.carousel-zoom-in > .carousel-inner > .item.active{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } .carousel.slide.carousel-zoom-in > .carousel-inner > .item.active.left{ -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); opacity: 0; } .carousel.slide.carousel-zoom-in > .carousel-inner > .item.prev.right{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } .carousel.slide.carousel-zoom-in > .carousel-inner > .item.prev{ opacity: 0; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } .carousel.slide.carousel-zoom-in > .carousel-inner > .item.next, .carousel.slide.carousel-zoom-in > .carousel-inner > .item.active.right{ -webkit-transform: scale(.5); -moz-transform: scale(.5); -ms-transform: scale(.5); -o-transform: scale(.5); transform: scale(.5); opacity: 0; } .carousel.slide.carousel-zoom-in > .carousel-inner > .item.next.left{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } /* ------------- CAROUSEL-CUBE-HORIZONTAL ----------- -*/ .carousel.slide.carousel-cube-horizontal > .carousel-inner { overflow: visible !important; padding: .1px; /* para que colapsen los margenes al no tener overflow: hidden*/ -webkit-perspective: 2000px; -moz-perspective: 2000px; -ms-perspective: 2000px; perspective: 2000px; } .carousel.slide.carousel-reset.carousel-cube-horizontal > .carousel-inner > .item.animated { transition: all 2s; } .carousel.slide.carousel-cube-horizontal > .carousel-inner > .item{ -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .carousel.slide.carousel-cube-horizontal > .carousel-inner > .item.active{ opacity: 1; -webkit-transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); -moz-transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); -ms-transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); -o-transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); } .carousel.slide.carousel-cube-horizontal > .carousel-inner > .item.active.right{ -webkit-transform: rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); -moz-transform: rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); -ms-transform: rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); -o-transform: rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); transform: rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); } .carousel.slide.carousel-cube-horizontal > .carousel-inner > .item.active.left{ -webkit-transform: rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); -moz-transform: rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); -ms-transform: rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); -o-transform: rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); transform: rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); } .carousel.slide.carousel-cube-horizontal > .carousel-inner > .item.prev{ -webkit-transform: rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); -moz-transform: rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); -ms-transform: rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); -o-transform: rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); transform: rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); } .carousel.slide.carousel-cube-horizontal > .carousel-inner > .item.next{ -webkit-transform: rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); -moz-transform: rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); -ms-transform: rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); -o-transform: rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); transform: rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); } .carousel.slide.carousel-cube-horizontal > .carousel-inner > .item.next.left{ -webkit-transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); -moz-transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); -ms-transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); -o-transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); } .carousel.slide.carousel-cube-horizontal > .carousel-inner > .item.prev.right{ -webkit-transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); -moz-transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); -ms-transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); -o-transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); transform: rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); } /* ------------- CAROUSEL-CUBE-VERTICAL ----------- -*/ .carousel.slide.carousel-cube-vertical > .carousel-inner { overflow: visible !important; padding: .1px; /* para que colapsen los margenes al no tener overflow: hidden*/ -webkit-perspective: 2000px; -moz-perspective: 2000px; -ms-perspective: 2000px; perspective: 2000px; } .carousel.slide.carousel-reset.carousel-cube-vertical > .carousel-inner > .item.animated { transition: all 2s; } .carousel.slide.carousel-cube-vertical > .carousel-inner > .item{ -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .carousel.slide.carousel-cube-vertical > .carousel-inner > .item.active{ -webkit-transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); } .carousel.slide.carousel-cube-vertical > .carousel-inner > .item.active.right{ -webkit-transform: rotateX(-90deg) translateY(50%) rotateX(-90deg) translateY(-50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(50%) rotateX(-90deg) translateY(-50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(50%) rotateX(-90deg) translateY(-50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(50%) rotateX(-90deg) translateY(-50%) rotateX(90deg); transform: rotateX(-90deg) translateY(50%) rotateX(-90deg) translateY(-50%) rotateX(90deg); } .carousel.slide.carousel-cube-vertical > .carousel-inner > .item.active.left{ -webkit-transform: rotateX(-90deg) translateY(50%) rotateX(90deg) translateY(-50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(50%) rotateX(90deg) translateY(-50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(50%) rotateX(90deg) translateY(-50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(50%) rotateX(90deg) translateY(-50%) rotateX(90deg); transform: rotateX(-90deg) translateY(50%) rotateX(90deg) translateY(-50%) rotateX(90deg); } .carousel.slide.carousel-cube-vertical > .carousel-inner > .item.prev{ -webkit-transform: rotateX(-90deg) translateY(50%) rotateX(90deg) translateY(-50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(50%) rotateX(90deg) translateY(-50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(50%) rotateX(90deg) translateY(-50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(50%) rotateX(90deg) translateY(-50%) rotateX(90deg); transform: rotateX(-90deg) translateY(50%) rotateX(90deg) translateY(-50%) rotateX(90deg); } .carousel.slide.carousel-cube-vertical > .carousel-inner > .item.prev.right{ -webkit-transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); } .carousel.slide.carousel-cube-vertical > .carousel-inner > .item.next{ -webkit-transform: rotateX(-90deg) translateY(50%) rotateX(-90deg) translateY(-50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(50%) rotateX(-90deg) translateY(-50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(50%) rotateX(-90deg) translateY(-50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(50%) rotateX(-90deg) translateY(-50%) rotateX(90deg); transform: rotateX(-90deg) translateY(50%) rotateX(-90deg) translateY(-50%) rotateX(90deg); } .carousel.slide.carousel-cube-vertical > .carousel-inner > .item.next.left{ -webkit-transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); transform: rotateX(-90deg) translateY(50%) rotateX(0deg) translateY(-50%) rotateX(90deg); } /* ------------- CAROUSEL-CUBE-DIAGONAL ----------- -*/ .carousel.slide.carousel-cube-diagonal > .carousel-inner { overflow: visible !important; padding: .1px; /* para que colapsen los margenes al no tener overflow: hidden*/ -webkit-perspective: 2000px; -moz-perspective: 2000px; -ms-perspective: 2000px; perspective: 2000px; } .carousel.slide.carousel-reset.carousel-cube-diagonal > .carousel-inner > .item.animated { transition: all 2s; } .carousel.slide.carousel-cube-diagonal > .carousel-inner > .item{ -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .carousel.slide.carousel-cube-diagonal > .carousel-inner > .item.active{ opacity: 1; -webkit-transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); -moz-transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); -ms-transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); -o-transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); } .carousel.slide.carousel-cube-diagonal > .carousel-inner > .item.active.right{ -webkit-transform: rotateZ(-90deg) rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); -moz-transform: rotateZ(-90deg) rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); -ms-transform: rotateZ(-90deg) rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); -o-transform: rotateZ(-90deg) rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); transform: rotateZ(-90deg) rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg); } .carousel.slide.carousel-cube-diagonal > .carousel-inner > .item.active.left{ -webkit-transform: rotateZ(90deg) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); -moz-transform: rotateZ(90deg) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); -ms-transform: rotateZ(90deg) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); -o-transform: rotateZ(90deg) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); transform: rotateZ(90deg) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); } .carousel.slide.carousel-cube-diagonal > .carousel-inner > .item.prev{ -webkit-transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg) rotateZ(90deg); -moz-transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg) rotateZ(90deg); -ms-transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg) rotateZ(90deg); -o-transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg) rotateZ(90deg); transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg) rotateZ(90deg); } .carousel.slide.carousel-cube-diagonal > .carousel-inner > .item.next{ -webkit-transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg) rotateZ(-90deg) ; -moz-transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg) rotateZ(-90deg) ; -ms-transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg) rotateZ(-90deg) ; -o-transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg) rotateZ(-90deg) ; transform: rotateZ(0deg) rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg) rotateZ(-90deg) ; } .carousel.slide.carousel-cube-diagonal > .carousel-inner > .item.next.left{ -webkit-transform: rotateZ(90deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg) rotateZ(-90deg) ; -moz-transform: rotateZ(90deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg) rotateZ(-90deg) ; -ms-transform: rotateZ(90deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg) rotateZ(-90deg) ; -o-transform: rotateZ(90deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg) rotateZ(-90deg) ; transform: rotateZ(90deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg) rotateZ(-90deg) ; } .carousel.slide.carousel-cube-diagonal > .carousel-inner > .item.prev.right{ -webkit-transform: rotateZ(-90deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg) rotateZ(90deg) ; -moz-transform: rotateZ(-90deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg) rotateZ(90deg) ; -ms-transform: rotateZ(-90deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg) rotateZ(90deg) ; -o-transform: rotateZ(-90deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg) rotateZ(90deg) ; transform: rotateZ(-90deg) rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg) rotateZ(90deg) ; } /* ------------- CAROUSEL-CUBE-HORIZONTAL-INNER ----------- -*/ .carousel.slide.carousel-cube-horizontal-inner > .carousel-inner { overflow: visible !important; padding: .1px; /* para que colapsen los margenes al no tener overflow: hidden*/ -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px; } .carousel.slide.carousel-reset.carousel-cube-horizontal-inner > .carousel-inner > .item.animated { transition: all 2s; } .carousel.slide.carousel-cube-horizontal-inner > .carousel-inner > .item{ -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .carousel.slide.carousel-cube-horizontal-inner > .carousel-inner > .item.active{ opacity: 1; -webkit-transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); -moz-transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); -ms-transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); -o-transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); } .carousel.slide.carousel-cube-horizontal-inner > .carousel-inner > .item.active.right{ -webkit-transform: rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg); -moz-transform: rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg); -ms-transform: rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg); -o-transform: rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg); transform: rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg); } .carousel.slide.carousel-cube-horizontal-inner > .carousel-inner > .item.active.left{ -webkit-transform: rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg); -moz-transform: rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg); -ms-transform: rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg); -o-transform: rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg); transform: rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg); } .carousel.slide.carousel-cube-horizontal-inner > .carousel-inner > .item.prev{ -webkit-transform: rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg); -moz-transform: rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg); -ms-transform: rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg); -o-transform: rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg); transform: rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg); } .carousel.slide.carousel-cube-horizontal-inner > .carousel-inner > .item.next{ -webkit-transform: rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg); -moz-transform: rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg); -ms-transform: rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg); -o-transform: rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg); transform: rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg); opacity: 0; } .carousel.slide.carousel-cube-horizontal-inner > .carousel-inner > .item.next.left{ -webkit-transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); -moz-transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); -ms-transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); -o-transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); opacity: 1; } .carousel.slide.carousel-cube-horizontal-inner > .carousel-inner > .item.prev.right{ -webkit-transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); -moz-transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); -ms-transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); -o-transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); transform: rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); } /* ------------- CAROUSEL-CUBE-VERTICAL-INNER ----------- -*/ .carousel.slide.carousel-cube-vertical-inner > .carousel-inner { overflow: visible !important; padding: .1px; /* para que colapsen los margenes al no tener overflow: hidden*/ -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px; } .carousel.slide.carousel-reset.carousel-cube-vertical-inner > .carousel-inner > .item.animated { transition: all 2s; } .carousel.slide.carousel-cube-vertical-inner > .carousel-inner > .item{ -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .carousel.slide.carousel-cube-vertical-inner > .carousel-inner > .item.active{ -webkit-transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); } .carousel.slide.carousel-cube-vertical-inner > .carousel-inner > .item.active.right{ -webkit-transform: rotateX(-90deg) translateY(-50%) rotateX(90deg) translateY(50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(-50%) rotateX(90deg) translateY(50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(-50%) rotateX(90deg) translateY(50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(-50%) rotateX(90deg) translateY(50%) rotateX(90deg); transform: rotateX(-90deg) translateY(-50%) rotateX(90deg) translateY(50%) rotateX(90deg); } .carousel.slide.carousel-cube-vertical-inner > .carousel-inner > .item.active.left{ -webkit-transform: rotateX(-90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(90deg); transform: rotateX(-90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(90deg); } .carousel.slide.carousel-cube-vertical-inner > .carousel-inner > .item.prev{ -webkit-transform: rotateX(-90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(90deg); transform: rotateX(-90deg) translateY(-50%) rotateX(-90deg) translateY(50%) rotateX(90deg); } .carousel.slide.carousel-cube-vertical-inner > .carousel-inner > .item.prev.right{ -webkit-transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); } .carousel.slide.carousel-cube-vertical-inner > .carousel-inner > .item.next{ -webkit-transform: rotateX(-90deg) translateY(-50%) rotateX(90deg) translateY(50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(-50%) rotateX(90deg) translateY(50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(-50%) rotateX(90deg) translateY(50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(-50%) rotateX(90deg) translateY(50%) rotateX(90deg); transform: rotateX(-90deg) translateY(-50%) rotateX(90deg) translateY(50%) rotateX(90deg); } .carousel.slide.carousel-cube-vertical-inner > .carousel-inner > .item.next.left{ -webkit-transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); -moz-transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); -ms-transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); -o-transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); transform: rotateX(-90deg) translateY(-50%) rotateX(0deg) translateY(50%) rotateX(90deg); } /* ------------- CAROUSEL-CUBE-DIAGONAL-INNER ----------- -*/ .carousel.slide.carousel-cube-diagonal-inner > .carousel-inner { overflow: visible !important; padding: .1px; /* para que colapsen los margenes al no tener overflow: hidden*/ -webkit-perspective: 300px; -moz-perspective: 300px; -ms-perspective: 300px; perspective: 300px; } .carousel.slide.carousel-reset.carousel-cube-diagonal-inner > .carousel-inner > .item.animated { transition: all 2s; } .carousel.slide.carousel-cube-diagonal-inner > .carousel-inner > .item{ -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } .carousel.slide.carousel-cube-diagonal-inner > .carousel-inner > .item.active{ opacity: 1; -webkit-transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); -moz-transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); -ms-transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); -o-transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg); } .carousel.slide.carousel-cube-diagonal-inner > .carousel-inner > .item.active.right{ -webkit-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) ; -moz-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) ; -ms-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) ; -o-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) ; transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) ; } .carousel.slide.carousel-cube-diagonal-inner > .carousel-inner > .item.active.left{ -webkit-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg) ; -moz-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg) ; -ms-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg) ; -o-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg) ; transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg) ; } .carousel.slide.carousel-cube-diagonal-inner > .carousel-inner > .item.prev{ -webkit-transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; -moz-transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; -ms-transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; -o-transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; } .carousel.slide.carousel-cube-diagonal-inner > .carousel-inner > .item.next{ -webkit-transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; -moz-transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; -ms-transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; -o-transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; transform: rotateZ(0deg) rotateY(90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; } .carousel.slide.carousel-cube-diagonal-inner > .carousel-inner > .item.next.left{ -webkit-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; -moz-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; -ms-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; -o-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; } .carousel.slide.carousel-cube-diagonal-inner > .carousel-inner > .item.prev.right{ -webkit-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; -moz-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; -ms-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; -o-transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; transform: rotateZ(-90deg) rotateY(90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(-90deg) rotateZ(90deg) ; }