/* @group Base Flipster Styles */ .flipster { display: block; float: left; min-height: 280px !important; overflow-x: hidden; overflow-y: visible; position: relative; width: 32%; } .flip-items, .flip-item { display: block; margin: 0 auto; padding: 0; list-style-type: none; } .logo-prodotti { width: auto; } .flip-items { width: 100%; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .flip-item { position: absolute; opacity: 0.99; /* Fix for strange clipping behavior on rotated elements in Chrome. */ } .flip-past, .flip-future, .flip-next, .flip-prev { cursor: pointer; } .flip-item img { display: block; width: 100%; } .flip-item div img { width: 200px; } /* @end */ /* @group Coverflow Style */ .flipster-coverflow .flip-items { -webkit-transition: all 350ms ease-in-out; -moz-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; -ms-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; position: relative; padding-top: 2%; padding-bottom: 5%; } .flipster-coverflow .flip-item { display: block; -webkit-transition: all 175ms ease-in-out; -moz-transition: all 175ms ease-in-out; -o-transition: all 175ms ease-in-out; -ms-transition: all 175ms ease-in-out; transition: all 175ms ease-in-out; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; position: absolute; width: 30%; } .flipster-coverflow .flip-content { -webkit-transition: all 350ms ease-in-out; -moz-transition: all 350ms ease-in-out; -o-transition: all 350ms ease-in-out; -ms-transition: all 350ms ease-in-out; transition: all 350ms ease-in-out; -webkit-box-reflect: below 0 -webkit-gradient(linear, left bottom, left top, color-stop(0.05, rgba(255, 255, 255, 0.12)), color-stop(0.2, transparent)); } .flipster-coverflow .flip-past .flip-content { -webkit-transform: rotateY(55deg) scale(0.75); -moz-transform: rotateY(55deg) scale(0.75); -o-transform: rotateY(55deg) scale(0.75); -ms-transform: rotateY(55deg) scale(0.75); transform: rotateY(55deg) scale(0.75); } .flipster-coverflow .flip-future .flip-content { -webkit-transform: rotateY(-55deg) scale(0.75); -moz-transform: rotateY(-55deg) scale(0.75); -o-transform: rotateY(-55deg) scale(0.75); -ms-transform: rotateY(-55deg) scale(0.75); transform: rotateY(-55deg) scale(0.75); } .flipster-coverflow.no-rotate .flip-past .flip-content { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform:scale(0.75); -ms-transform:scale(0.75); transform: scale(0.75); } .flipster-coverflow.no-rotate .flip-future .flip-content { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); -ms-transform: scale(0.75); transform: scale(0.75); } .flipster-coverflow .flip-current .flip-content { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .flipster-coverflow .flip-hidden { visibility: hidden; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } /* @end */ /* @group Flip Items */ .flipster-carousel .flip-items { -webkit-perspective: 2000px; -moz-perspective: 2000px; perspective: 2000px; } .flipster-carousel .flip-item { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all 350ms ease-out; -moz-transition: all 350ms ease-out; -o-transition: all 350ms ease-out; -ms-transition: all 350ms ease-out; transition: all 350ms ease-out; } .no-csstransforms .flipster-carousel .flip-item { -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none; } .flipster-carousel .flip-items img { /*-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);*/ } .flipster-carousel .flip-past { -webkit-transform: translateX(-58%) translateZ(0) rotateY(0deg) scale(0.65); -moz-transform: translateX(-58%) translateZ(0) rotateY(0deg) scale(0.65); -o-transform: translateX(-58%) translateZ(0) rotateY(0deg) scale(0.65); -ms-transform: translateX(-58%) translateZ(0) rotateY(0deg) scale(0.65); transform: translateX(-58%) translateZ(0) rotateY(0deg) scale(0.65); } .flipster-carousel.no-rotate .flip-past { -webkit-transform: translateX(-80%) translateZ(0) scale(0.65); -moz-transform: translateX(-80%) translateZ(0) scale(0.65); -o-transform: translateX(-80%) translateZ(0) scale(0.65); -ms-transform: translateX(-80%) translateZ(0) scale(0.65); transform: translateX(-80%) translateZ(0) scale(0.65); } .no-csstransforms3d .flipster-carousel .flip-past { -webkit-transform: translateX(-56%) scale(0.5); -moz-transform: translateX(-56%) scale(0.5); -o-transform: translateX(-56%) scale(0.5); -ms-transform: translateX(-56%) scale(0.5); transform: translateX(-56%) scale(0.5); } .no-csstransforms .flipster-carousel .flip-past { left: -20%; top: 40%; width: 50%; height: 50%; } .flipster-carousel .flip-future { -webkit-transform: translateX(58%) translateZ(0) rotateY(0deg) scale(0.65); -moz-transform: translateX(58%) translateZ(0) rotateY(0deg) scale(0.65); -o-transform: translateX(58%) translateZ(0) rotateY(0deg) scale(0.65); -ms-transform: translateX(58%) translateZ(0) rotateY(0deg) scale(0.65); transform: translateX(58%) translateZ(0) rotateY(0deg) scale(0.65); } .flipster-carousel.no-rotate .flip-future { -webkit-transform: translateX(80%) translateZ(0) scale(0.65); -moz-transform: translateX(80%) translateZ(0) scale(0.65); -o-transform: translateX(80%) translateZ(0) scale(0.65); -ms-transform: translateX(80%) translateZ(0) scale(0.65); transform: translateX(80%) translateZ(0) scale(0.65); } .no-csstransforms3d .flipster-carousel .flip-future { -webkit-transform: translateX(56%) scale(0.5); -moz-transform: translateX(56%) scale(0.5); -o-transform: translateX(56%) scale(0.5); -ms-transform: translateX(56%) scale(0.5); transform: translateX(56%) scale(0.5); } .no-csstransforms .flipster-carousel .flip-future { left: 88%; top: 40%; width: 50%; height: 50%; } .flipster-carousel .flip-prev { -webkit-transform: translateX(-31%) translateZ(0) rotateY(0deg) scale(0.8); -moz-transform: translateX(-31%) translateZ(0) rotateY(0deg) scale(0.8); -o-transform: translateX(-31%) translateZ(0) rotateY(0deg) scale(0.8); -ms-transform: translateX(-31%) translateZ(0) rotateY(0deg) scale(0.8); transform: translateX(-31%) translateZ(0) rotateY(0deg) scale(0.8); } .flipster-carousel.no-rotate .flip-prev { -webkit-transform: translateX(-60%) translateZ(0) scale(0.8); -moz-transform: translateX(-60%) translateZ(0) scale(0.8); -o-transform: translateX(-60%) translateZ(0) scale(0.8); -ms-transform: translateX(-60%) translateZ(0) scale(0.8); transform: translateX(-60%) translateZ(0) scale(0.8); } .no-csstransforms3d .flipster-carousel .flip-prev { -webkit-transform: translateX(-24%) scale(0.75); -moz-transform: translateX(-24%) scale(0.75); -o-transform: translateX(-24%) scale(0.75); -ms-transform: translateX(-24%) scale(0.75); transform: translateX(-24%) scale(0.75); } .no-csstransforms .flipster-carousel .flip-prev { left: -9%; top: 20%; width: 75%; height: 75%; } .flipster-carousel .flip-next { -webkit-transform: translateX(35%) translateZ(0) rotateY(0deg) scale(0.8); -moz-transform: translateX(35%) translateZ(0) rotateY(0deg) scale(0.8); -o-transform: translateX(35%) translateZ(0) rotateY(0deg) scale(0.8); -ms-transform: translateX(35%) translateZ(0) rotateY(0deg) scale(0.8); transform: translateX(35%) translateZ(0) rotateY(0deg) scale(0.8); } .flipster-carousel.no-rotate .flip-next { -webkit-transform: translateX(60%) translateZ(0) scale(0.8); -moz-transform: translateX(60%) translateZ(0) scale(0.8); -o-transform: translateX(60%) translateZ(0) scale(0.8); -ms-transform: translateX(60%) translateZ(0) scale(0.8); transform: translateX(60%) translateZ(0) scale(0.8); } .no-csstransforms3d .flipster-carousel .flip-next { -webkit-transform: translateX(24%) scale(0.75); -moz-transform: translateX(24%) scale(0.75); -o-transform: translateX(24%) scale(0.75); -ms-transform: translateX(24%) scale(0.75); transform: translateX(24%) scale(0.75); } .no-csstransforms .flipster-carousel .flip-next { left: 39%; top: 20%; width: 75%; height: 75%; } .flipster-carousel .flip-past, .flipster-carousel .flip-future { -webkit-opacity: 0.30; -moz-opacity: 0.3; opacity: 0.3; z-index: 1; -webkit-transition-delay: 87.5ms; -moz-transition-delay: 87.5ms; -o-transition-delay: 87.5ms; transition-delay: 87.5ms; } .flipster-carousel .flip-prev, .flipster-carousel .flip-next { -webkit-opacity: 0.6; -moz-opacity: 0.6; opacity: 0.6; z-index: 2; -webkit-transition-delay: 58.333333333333336ms; -moz-transition-delay: 58.333333333333336ms; -o-transition-delay: 58.333333333333336ms; transition-delay: 58.333333333333336ms; } .flipster-carousel .flip-current { z-index: 999; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition-delay: 58.333333333333336ms; -moz-transition-delay: 58.333333333333336ms; -o-transition-delay: 58.333333333333336ms; transition-delay: 58.333333333333336ms; } .flipster-carousel .flip-hidden { visibility: hidden; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -webkit-transform: rotateY(0deg) translateX(0) scale(0.5); -moz-transform: rotateY(0deg) translateX(0) scale(0.5); -o-transform: rotateY(0deg) translateX(0) scale(0.5); -ms-transform: rotateY(0deg) translateX(0) scale(0.5); transform: rotateY(0deg) translateX(0) scale(0.5); -webkit-transition-delay: 116.66666666666667ms; -moz-transition-delay: 116.66666666666667ms; -o-transition-delay: 116.66666666666667ms; transition-delay: 116.66666666666667ms; } /* @end */ .no-transition { -webkit-transition-duration: 0ms !important; -moz-transition-duration: 0ms !important; -o-transition-duration: 0ms !important; transition-duration: 0ms !important; } /* @end */