@charset "UTF-8"; /* * Mixins * _____________________________________________ * * Note: Some of described mixins in this file requires the ie conditional comments * * For IE < 9 * */ /* * Opacity */ /* * Background-rgba */ /* * Transition */ /* * Transition Delay */ /* * Animation */ /* * Transform Origin */ /* * Transform */ /* * Box Shadow */ /* * Border Radius */ /* * Triangle */ /* * Variables */ /* * Font Icon */ /* * Clearfix */ /* * Usefull Functions */ /** * @subsection Animate.css * * @description A bunch of cool, fun, and cross-browser animations * for you to use. * * @author Daniel Eden * @link http://daneden.me/animate * @license MIT license - http://opensource.org/licenses/MIT */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; opacity: 1; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .not-animated { opacity: 0; } /** * Bounce Keyframes Animation */ @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } /** * Flas Keyframes Animation */ @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /** * Pulse Keyframes Animation * * @author Nick Pettit * @link https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } /** * RubberBand Keyframes Animation */ @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } /** * Shake Keyframes Animation */ @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } /** * Swing Keyframes Animation */ @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } /** * Tada Keyframes Animation */ @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /** * Wobble Keyframes Animation * * @author Nick Pettit * @link https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } /** * BounceIn Keyframes Animation */ @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s; } /** * BounceInDown Keyframes Animation */ @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } /** * BounceInLeft Keyframes Animation */ @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } /** * BounceInRight Keyframes Animation */ @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } /** * BounceInUp Keyframes Animation */ @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } /** * BounceOut Keyframes Animation */ @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: .75s; animation-duration: .75s; } /** * BounceOutDown Keyframes Animation */ @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } /** * BounceOutLeft Keyframes Animation */ @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } /** * BounceOutRight Keyframes Animation */ @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } /** * BounceOutUp Keyframes Animation */ @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } /** * FadeIn Keyframes Animation */ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } /** * FadeInDown Keyframes Animation */ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } /** * FadeInDownBig Keyframes Animation */ @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } /** * FadeInLeft Keyframes Animation */ @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } /** * FadeInLeftBig Keyframes Animation */ @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } /** * FadeInRight Keyframes Animation */ @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } /** * FadeInRightBig Keyframes Animation */ @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } /** * FadeInUp Keyframes Animation */ @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } /** * FadeInUpBig Keyframes Animation */ @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } /** * FadeOut Keyframes Animation */ @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } /** * FadeOutDown Keyframes Animation */ @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } /** * FadeOutDownBig Keyframes Animation */ @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } /** * FadeOutLeft Keyframes Animation */ @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } /** * FadeOutLeftBig Keyframes Animation */ @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } /** * FadeOutRight Keyframes Animation */ @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } /** * FadeOutRightBig Keyframes Animation */ @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } /** * FadeOutUp Keyframes Animation */ @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } /** * FadeOutUpBig Keyframes Animation */ @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } /** * Flip Keyframes Animation */ @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } /** * FlipInX Keyframes Animation */ @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } /** * FlipInY Keyframes Animation */ @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } /** * FlipOutX Keyframes Animation */ @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } /** * FlipOutY Keyframes Animation */ @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; -webkit-animation-duration: .75s; animation-duration: .75s; } /** * LightSpeedIn Keyframes Animation */ @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /** * LightSpeedOut Keyframes Animation */ @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /** * RotateIn Keyframes Animation */ @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } /** * RotateInDownLeft Keyframes Animation */ @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } /** * RotateInDownRight Keyframes Animation */ @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } /** * RotateInUpLeft Keyframes Animation */ @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } /** * RotateInUpRight Keyframes Animation */ @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } /** * RotateOut Keyframes Animation */ @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } /** * RotateOutDownLeft Keyframes Animation */ @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } /** * RotateOutDownRight Keyframes Animation */ @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } /** * RotateOutUpLeft Keyframes Animation */ @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } /** * RotateOutUpRight Keyframes Animation */ @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } /** * Hinge Keyframes Animation */ @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /** * RollIn Keyframes Animation * * @author Nick Pettit * @link https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /** * RollOut Keyframes Animation * * @author Nick Pettit * @link https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } /** * ZoomIn Keyframes Animation */ @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } /** * ZoomInDown Keyframes Animation */ @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } /** * ZoomInLeft Keyframes Animation */ @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } /** * ZoomInRight Keyframes Animation */ @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } /** * ZoomInUp Keyframes Animation */ @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } /** * ZoomOut Keyframes Animation */ @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } /** * ZoomOutDown Keyframes Animation */ @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } /** * ZoomOutLeft Keyframes Animation */ @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } /** * ZoomOutRight Keyframes Animation */ @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } /** * ZoomOutUp Keyframes Animation */ @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } /** * SlideInDown Keyframes Animation */ @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } /** * SlideInLeft Keyframes Animation */ @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } /** * SlideInRight Keyframes Animation */ @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } /** * SlideInUp Keyframes Animation */ @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } /** * SlideOutDown Keyframes Animation */ @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } /** * SlideOutLeft Keyframes Animation */ @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } /** * SlideOutRight Keyframes Animation */ @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } /** * SlideOutUp Keyframes Animation */ @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /* * @subsection Floating System */ .pull-left { float: left; } .pull-none { float: none; } .pull-right, .cart.actions.main button { float: right; } @media (min-width: 480px) { .pull-xs-left { float: left; } .pull-xs-none { float: none; } .pull-xs-right { float: right; } } @media (min-width: 768px) { .pull-sm-left { float: left; } .pull-sm-none { float: none; } .pull-sm-right { float: right; } } @media (min-width: 992px) { .pull-md-left { float: left; } .pull-md-none { float: none; } .pull-md-right { float: right; } } @media (min-width: 1200px) { .pull-lg-left { float: left; } .pull-lg-none { float: none; } .pull-lg-right { float: right; } } /* * @subsection Text Alignment */ .text-left, .cart-container .cart-summary .cart-totals { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } @media (min-width: 480px) { .text-xs-left { text-align: left; } .text-xs-center { text-align: center; } .text-xs-right { text-align: right; } } @media (min-width: 768px) { .text-sm-left { text-align: left; } .text-sm-center { text-align: center; } .text-sm-right { text-align: right; } } @media (min-width: 992px) { .text-md-left { text-align: left; } .text-md-center { text-align: center; } .text-md-right { text-align: right; } } @media (min-width: 1200px) { .text-lg-left { text-align: left; } .text-lg-center { text-align: center; } .text-lg-right { text-align: right; } } /* * @subsection Text Styling */ .italic { font-style: italic; } .underline { text-decoration: underline; } .strike { text-decoration: line-through; } .thin { font-weight: 100; } .light { font-weight: 300; } .regular, .filter-options-title::before { font-weight: 400; } .medium, .collapsible-block .opener::before { font-weight: 500; } .sbold { font-weight: 600; } .bold, .opc-estimated-wrapper .estimated-block span, strong { font-weight: 700; } .ubold { font-weight: 900; } .primary-color { color: #1E5792; } /* * @subsection Icons */ .big-circle-icon { display: block; width: 122px; height: 122px; margin: 0 auto 1rem; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 2px solid #1E5792; } .big-circle-icon:before { color: #1E5792; font-size: 66px; line-height: 122px; text-align: center; width: 100%; } .medium-icon { margin: 0 auto 1rem; } .medium-icon:before { font-size: 60px; line-height: 1em; color: #1E5792; } .small-icon:before { font-size: 40px; line-height: inherit; color: #1E5792; } /* * @subsection Typography */ h1, .heading-1 { font-size: 2rem; } h2, .catalog-product-view .price-wrapper .price, .heading-2 { font-size: 1.5rem; } h3, .heading-3, .block-title strong, .sidebar .block .block-title, .collapsible-block .opener, .checkout-index-index .opc-wrapper .step-title, .opc-sidebar .opc-block-summary span.title { font-size: 1.17rem; line-height: 2rem; } h4, .heading-4, .box-title, .cart-container .cart-summary .summary, .opc-block-shipping-information .shipping-information-title, .review-list .review-title, .review-add .review-legend { font-size: 1rem; font-weight: 600; } h5, .heading-5 { font-size: .83rem; } h6, .heading-6 { font-size: .67rem; } h1, .heading-1 { margin-top: 1em; margin-bottom: 0.5em; } h2, .catalog-product-view .price-wrapper .price, .heading-2 { margin-top: 1em; margin-bottom: 0.5em; } h3, .heading-3, .block-title strong, .sidebar .block .block-title, .collapsible-block .opener, .checkout-index-index .opc-wrapper .step-title, .opc-sidebar .opc-block-summary span.title { margin-top: 1em; margin-bottom: 0.5em; } h4, .heading-4, .box-title, .cart-container .cart-summary .summary, .opc-block-shipping-information .shipping-information-title, .review-list .review-title, .review-add .review-legend { margin-top: 1em; margin-bottom: 0.5em; } h5, .heading-5 { margin-top: 1em; margin-bottom: 0.5em; } h6, .heading-6 { margin-top: 1em; margin-bottom: 0.5em; } input[type="text"], .input-text, input[type="email"], input[type="password"], input[type="number"], select, textarea { display: block; width: 100%; padding: 0.38rem 1rem; font-size: 14px; line-height: 28px; background: transparent; border: 1px solid #ecebeb; } input[type="text"].mage-error, .input-text.mage-error, input[type="email"].mage-error, input[type="password"].mage-error, input[type="number"].mage-error, select.mage-error, textarea.mage-error { border: solid 1px red; color: inherit; } select:focus { outline-color: #1E5792; } .catalogsearch-advanced-index select.multiselect { height: auto; } .customer-account-login #remember-me-box .tooltip, .customer-account-create #remember-me-box .tooltip { display: inline-block; width: 100%; } .customer-account-login #remember-me-box .checkbox, .customer-account-create #remember-me-box .checkbox { margin-top: 7px; } .modal-footer button + button { margin: 0 4px; } .modal-footer button { transition: .3s ease; } .modal-footer button:hover { color: #1E5792; } .actions .action, .actions-toolbar .action, .box-actions .action, .product-item-actions .action, .checkout.methods .action { background: #1E5792; color: #FFF; } .actions .action:hover, .actions-toolbar .action:hover, .box-actions .action:hover, .product-item-actions .action:hover, .checkout.methods .action:hover { background: #1b110d; } div[class*=" block-dashboard-"] .block-title { border-bottom: 1px solid #343434; } .page-header__panel { padding: 10px 0; } .page-header__panel .links { order: 2; } .page-header__content { padding: 10px 0; } * { margin: 0; } html, body { height: 100%; } body { font-family: "Ubuntu", sans-serif; font-weight: 300; font-size: 14px; line-height: 1.7; text-align: left; -webkit-text-size-adjust: none; color: #4e4e4e; background: #ffffff; } @media (min-width: 992px) { body { font-size: 14px; line-height: 1.5em; } } /*Stick to bottom footer*/ .page-wrapper:after { content: ""; display: block; } /*--------------*/ a { color: #30a0dd; } a:hover { color: #191919; } h1 a, h2 a, .catalog-product-view .price-wrapper .price a, h3 a, h4 a, h5 a, h6 a, .heading-1 a, .heading-2 a, .heading-3 a, .block-title strong a, .sidebar .block .block-title a, .collapsible-block .opener a, .checkout-index-index .opc-wrapper .step-title a, .opc-sidebar .opc-block-summary span.title a, .heading-4 a, .box-title a, .cart-container .cart-summary .summary a, .opc-block-shipping-information .shipping-information-title a, .review-list .review-title a, .review-add .review-legend a, .heading-5 a, .heading-6 a { color: #30a0dd; } h1 a:hover, h2 a:hover, .catalog-product-view .price-wrapper .price a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .heading-1 a:hover, .heading-2 a:hover, .heading-3 a:hover, .block-title strong a:hover, .sidebar .block .block-title a:hover, .collapsible-block .opener a:hover, .checkout-index-index .opc-wrapper .step-title a:hover, .opc-sidebar .opc-block-summary span.title a:hover, .heading-4 a:hover, .box-title a:hover, .cart-container .cart-summary .summary a:hover, .opc-block-shipping-information .shipping-information-title a:hover, .review-list .review-title a:hover, .review-add .review-legend a:hover, .heading-5 a:hover, .heading-6 a:hover { color: #191919; } p { margin-bottom: 1rem; } p a, .list a, .contact-info a { color: #1E5792; } p a:hover, .list a:hover, .contact-info a:hover { color: #191919; } mark { color: #FFF; background: #1E5792; } em { color: #1E5792; } small, .small { font-size: .8em; } .big { font-size: 1.2em; } pre { white-space: normal; } .page-header { margin-bottom: 2rem; } .page-header__panel .container { display: flex; justify-content: space-between; } .page-header__content .container { display: flex; justify-content: space-between; } .page-header__content .logo { flex-grow: 3; } .header.links li { margin-left: 1rem; } .switcher { position: relative; margin: 0 1rem; padding: 0; } .switcher .toggle { cursor: pointer; } .switcher .toggle::after { font-family: "FontAwesome"; content: '\f107'; padding: 4px; } .switcher .toggle.active::after { font-family: "FontAwesome"; content: '\f106'; } .switcher .dropdown .mage-dropdown-dialog { -webkit-transform: translateY(-30px); transform: translateY(-30px); transition: .3s all ease; opacity: 0; visibility: hidden; position: absolute; left: 0; background: #FFF; box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.2); border: none; width: 250px; z-index: 15; } .switcher .dropdown .mage-dropdown-dialog a { display: block; padding: 5px 10px; color: #4e4e4e; } .switcher .dropdown .mage-dropdown-dialog a:hover { color: #4e4e4e; background: #e7e7e7; } .switcher .dropdown.active .mage-dropdown-dialog { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } .switcher-label { display: none; } .switcher-options { display: inline-block; } .switcher-options.active .switcher-dropdown { display: inline-block; } .switcher-dropdown { display: none; } .links li { display: inline-block; } .page-top { margin-bottom: 2rem; } .breadcrumbs { margin-bottom: 2rem; } .breadcrumbs .items .item { display: inline-block; font-size: 0.75em; margin-right: 0.5rem; padding-right: 0.5rem; position: relative; } .breadcrumbs .items .item:before { position: absolute; right: -4px; top: 0; display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .breadcrumbs .items .item:last-child { margin-right: 0; padding-right: 0; } .breadcrumbs .items .item:last-child:before { display: none; } .page-main { margin-bottom: 2rem; } .page-title-wrapper { margin-bottom: 2rem; } .columns > .row { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -moz-box-flex: 0; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-direction: normal; -webkit-box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .page-layout-3columns .grid-left { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; } .page-layout-3columns .grid-main { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } .page-layout-3columns .grid-right { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-order: 3; -ms-flex-order: 3; order: 3; } .page-layout-2columns-right .grid-main { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; } .page-layout-2columns-right .grid-right { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } .page-layout-2columns-left .grid-left { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; } .page-layout-2columns-left .grid-main { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } @media (max-width: 767px) { .page-layout-3columns .grid-left, .page-layout-3columns .grid-main, .page-layout-2columns-right .grid-left, .page-layout-2columns-right .grid-main, .page-layout-2columns-left .grid-left, .page-layout-2columns-left .grid-main { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .page-layout-3columns .grid-main, .page-layout-2columns-right .grid-main, .page-layout-2columns-left .grid-main { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; } .page-layout-3columns .grid-left, .page-layout-2columns-right .grid-left, .page-layout-2columns-left .grid-left { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } .page-layout-3columns .grid-right, .page-layout-2columns-right .grid-right, .page-layout-2columns-left .grid-right { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-order: 3; -ms-flex-order: 3; order: 3; } } .block { margin-bottom: 2rem; } .block-title { margin-bottom: 1rem; position: relative; } .block-title .action { float: right; padding: 0; background: 0; line-height: inherit; } .block-title .action.edit { padding: 0 1rem; } .block-title .counter { float: right; font-size: .8rem; } .block-subtitle { display: block; margin-bottom: 1rem; } .box { margin-bottom: 1rem; } .box-title { margin-bottom: 1rem; display: block; } .sidebar .block { margin-bottom: 2rem; } .page-footer { clear: both; } .copyright-container { margin: 1rem 0; } .footer.links .item { display: block; } .no-display { display: none; } a { color: #1E5792; transition: .3s ease; } a:hover { color: #1b110d; } h1 a, h2 a, .catalog-product-view .price-wrapper .price a, h3 a, h4 a, h5 a, h6 a, .heading-1 a, .heading-2 a, .heading-3 a, .block-title strong a, .sidebar .block .block-title a, .collapsible-block .opener a, .checkout-index-index .opc-wrapper .step-title a, .opc-sidebar .opc-block-summary span.title a, .heading-4 a, .box-title a, .cart-container .cart-summary .summary a, .opc-block-shipping-information .shipping-information-title a, .review-list .review-title a, .review-add .review-legend a, .heading-5 a, .heading-6 a { color: #1E5792; } h1 a:hover, h2 a:hover, .catalog-product-view .price-wrapper .price a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, .heading-1 a:hover, .heading-2 a:hover, .heading-3 a:hover, .block-title strong a:hover, .sidebar .block .block-title a:hover, .collapsible-block .opener a:hover, .checkout-index-index .opc-wrapper .step-title a:hover, .opc-sidebar .opc-block-summary span.title a:hover, .heading-4 a:hover, .box-title a:hover, .cart-container .cart-summary .summary a:hover, .opc-block-shipping-information .shipping-information-title a:hover, .review-list .review-title a:hover, .review-add .review-legend a:hover, .heading-5 a:hover, .heading-6 a:hover { color: #1b110d; } @media (max-width: 767px) { .page-layout-3columns .grid-left, .page-layout-3columns .grid-main, .page-layout-2columns-right .grid-left, .page-layout-2columns-right .grid-main, .page-layout-2columns-left .grid-left, .page-layout-2columns-left .grid-main { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .page-layout-3columns .grid-main, .page-layout-2columns-right .grid-main, .page-layout-2columns-left .grid-main { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; } .page-layout-3columns .grid-left, .page-layout-2columns-right .grid-left, .page-layout-2columns-left .grid-left { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } .page-layout-3columns .grid-right, .page-layout-2columns-right .grid-right, .page-layout-2columns-left .grid-right { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-order: 3; -ms-flex-order: 3; order: 3; } } .products .product-item .product-item-name { display: block; } .products .product-item .rating-summary { display: inline-block; } .products .product-item .reviews-actions { display: inline-block; } .products .product-item .reviews-actions .view { margin-right: 1rem; } .products .product-item .swatch-attribute-options { margin-top: 10px; } .products .product-item .old-price .price { text-decoration: line-through; font-size: 1rem; } .products .product-item .product-item-actions { margin-bottom: 1rem; } .toolbar-products { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 2rem; } .toolbar-products .field > .label, .toolbar-products .field > .control, .toolbar-products .field > .action { display: inline-block; } .toolbar-products .field > .label { width: 30%; } .toolbar-products .field > .control { width: 40%; } .toolbar-products .toolbar-amount { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } .toolbar-products .modes { -webkit-flex-basis: 25%; -moz-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; } .toolbar-products .pages { -webkit-flex-basis: 25%; -moz-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-order: 3; -ms-flex-order: 3; order: 3; } .toolbar-products .limiter { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-order: 4; -ms-flex-order: 4; order: 4; } .toolbar-products .toolbar-sorter { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; -webkit-box-ordinal-group: 6; -webkit-order: 5; -moz-order: 5; -ms-flex-order: 5; order: 5; } .toolbar-container .filter-toggle { background: #e6e6e6; padding: 0.38rem 1rem; line-height: 28px; display: inline-block; margin-bottom: 20px; display: none; } .toolbar-container .filter-toggle:hover { background: #cccccc; } .modes { margin: -0.5rem; } .modes .modes-label { display: none; } .modes .modes-mode span { display: none; } .modes .modes-mode.active { color: #4e4e4e; } .modes .modes-mode.active:hover { color: inherit; } .modes .modes-mode:hover { color: #191919; } .toolbar-amount { text-align: center; } .pages { text-align: right; position: relative; } .pages:hover .pages-items { display: block; } .pages .pages-label { cursor: pointer; } .pages .pages-items { display: none; position: absolute; top: 2.63rem; right: 0; background: #f2f2f2; padding: 1rem; z-index: 5; width: 290px; } .pages .pages-items:before { position: absolute; height: 0; width: 0; right: .5rem; top: -.5rem; border: transparent; border-left: .5rem solid transparent; border-right: .5rem solid transparent; border-bottom: 0.5rem solid #f2f2f2; content: ''; } .pages .item .page:hover { color: #191919; } .pages .item.current .label { font-weight: 600; } .limiter .limiter-text { display: none; } .toolbar-sorter { text-align: right; } .toolbar-sorter .label { text-align: left; } .toolbar-sorter .sorter-action { margin-left: 1rem; padding: 0.38rem 0; line-height: 2.63rem; } .toolbar-sorter .sorter-action span { display: none; } @media (min-width: 768px) { .toolbar-products .field > .label { width: 20%; } .toolbar-products .field > .control { width: auto; } .toolbar-products .limiter { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .toolbar-products .toolbar-sorter { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } .catalog-product-view .main { display: -ms-flexbox; display: -webkit-flex; display: flex; margin-left: -15px; margin-right: -15px; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .catalog-product-view .product-info-main { padding-left: 15px; padding-right: 15px; -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .catalog-product-view .product-info-stock-sku { margin-bottom: 1rem; } .catalog-product-view .product-reviews-summary { margin-bottom: 1rem; } .catalog-product-view .reviews-actions .view { margin-right: 1rem; } .catalog-product-view .price-box { margin-bottom: 1rem; } .catalog-product-view .product-add-form { margin-bottom: 1rem; } .catalog-product-view .box-tocart .field { padding-right: 2rem; } .catalog-product-view .box-tocart .control { display: inline-block; } .catalog-product-view .box-tocart .qty { display: inline-block; width: 5rem; } .catalog-product-view .product-social-links .action { margin-right: 1rem; } .catalog-product-view .product-social-links .action span { display: none; } .catalog-product-view .product-addto-links { display: inline-block; } .catalog-product-view .product.attribute strong { font-weight: 600; } .catalog-product-view .product.attribute .value { display: inline-block; } .catalog-product-view .product.media { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .catalog-product-view .product.info { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-order: 3; -ms-flex-order: 3; order: 3; margin: 2rem 0; padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .catalog-product-view .product .table-caption { text-align: left; } @media (min-width: 480px) { .catalog-product-view .box-tocart .fieldset { display: flex; } .catalog-product-view .box-tocart .field { flex-grow: 2; } } @media (min-width: 768px) { .catalog-product-view .product-info-main { -webkit-flex-basis: 40%; -moz-flex-basis: 40%; -ms-flex-preferred-size: 40%; flex-basis: 40%; max-width: 40%; } .catalog-product-view .product.media { -webkit-flex-basis: 60%; -moz-flex-basis: 60%; -ms-flex-preferred-size: 60%; flex-basis: 60%; max-width: 60%; } } @media (min-width: 992px) { .catalog-product-view .box-tocart .fieldset { display: block; } } @media (min-width: 1200px) { .catalog-product-view .box-tocart .fieldset { display: flex; } } body.catalog-product-compare-index .action.print { float: right; margin: 1rem 0; } body.catalog-product-compare-index .table-caption { display: none; } .table-wrapper.comparison { clear: both; max-width: 100%; overflow-x: auto; } .table-wrapper.comparison .table-comparison > tbody > tr > th, .table-wrapper.comparison .table-comparison > tbody > tr > td { border-top: 0; } .table-comparison { table-layout: fixed; } .table-comparison .cell.label.remove, .table-comparison .cell.label.product { border-bottom: none; } .table-comparison .cell.label.remove span, .table-comparison .cell.label.product span { display: none; } .table-comparison .cell.label, .table-comparison td:last-child { border-right: 1px solid #dadada; } .table-comparison .cell { width: 180px; padding: 1rem; } .table-comparison .cell .attibute.value { width: 100%; overflow: hidden; } .table-comparison .cell.product.info, .table-comparison .cell.product.label { border-bottom: 1px solid #dadada; } .table-comparison .cell.label .attribute.label { display: block; width: 100%; word-wrap: break-word; } .table-comparison .cell.attribute img { max-width: 100%; height: auto; } .table-comparison .cell.remove { padding-top: 0; padding-bottom: 0; text-align: right; } .table-comparison .product-item-photo { display: block; margin: 0 auto 1rem; } .table-comparison .product-image-photo { margin-left: 0; } .table-comparison .product-item-actions, .table-comparison .price-box, .table-comparison .product.rating, .table-comparison .product-item-name { display: block; margin: 1rem 0; } .table-comparison .product-addto-links { margin-top: 1rem; } .table-comparison .product-addto-links .action.toggle { padding: 0; } .table-comparison .action.tocart { white-space: nowrap; } .comparison.headings { position: absolute; z-index: 2; top: 0; left: 0; width: auto; display: none; } .block-compare .product-items { margin-bottom: 1rem; } .block-compare .product-item-name { display: block; padding-right: 2rem; } .block-compare .product-item { position: relative; margin-bottom: 1rem; } .block-compare .action.delete { position: absolute; right: 0; top: 0; padding: 0 1rem; } .block-compare .actions-toolbar { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .block-compare .actions-toolbar .primary { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } .products-grid .product-items { display: -ms-flexbox; display: -webkit-flex; display: flex; margin-left: -15px; margin-right: -15px; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .products-grid .product-item { padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; margin-bottom: 2rem; } .products-grid .product-image-photo { text-align: center; display: block; margin-bottom: 1rem; } .products-grid .reviews-actions { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .products-grid .reviews-actions .action.add { font-size: 0; } .products-grid .reviews-actions .action.add:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .products-grid .reviews-actions .action.add:before { font-size: 14px; } .products-grid .special-price { display: block; } .products-grid .old-price { display: block; } .products-grid .price-from { margin-bottom: 0; } .products-grid .price-to { margin-bottom: 0; } .products-grid .product-item-actions .actions-primary { margin-bottom: .25rem; } @media (min-width: 480px) { .products-grid .product-item { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } } @media (min-width: 992px) { .products-grid .product-item { -webkit-flex-basis: 33.33%; -moz-flex-basis: 33.33%; -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; } } @media (min-width: 1200px) { .product-item-actions { display: -ms-flexbox; display: -webkit-flex; display: flex; margin: -0.25rem; } .product-item-actions > div { margin: 0 0.25rem 0.25rem; } } .products-list .product-item-info { margin-bottom: 4rem; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-left: -15px; margin-right: -15px; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .products-list .product-image-photo { padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; text-align: center; margin-bottom: 1rem; } .products-list .product-item-details { padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } @media (min-width: 480px) { .products-list .product-item-info { -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; } .products-list .product-item-photo { -webkit-flex-basis: 42%; -moz-flex-basis: 42%; -ms-flex-preferred-size: 42%; flex-basis: 42%; margin-bottom: 0; } .products-list .product-item-details { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } .gallery-placeholder .loading-mask { padding: 0 0 50%; position: absolute; display: none; } .gallery-placeholder .fotorama-hidden, .gallery-placeholder .fotorama--hidden, .gallery-placeholder .fotorama__load { left: -99999px; position: absolute; top: -99999px; z-index: -1000; display: none; } .fotorama-item .fotorama__stage { margin-bottom: 1rem; } .block.related { -webkit-box-ordinal-group: 6; -webkit-order: 5; -moz-order: 5; -ms-flex-order: 5; order: 5; padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; overflow: hidden; } .products-grid.products-related { margin: 2rem 0 0; padding: 0; } .products-grid.products-related .product-items { margin: 0 -15px; padding: 0; } .products-grid.products-related .product-item { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; padding: 0; margin-top: 0; } .products-grid.products-related .owl-item { padding: 0 15px; } .block.upsell { -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-order: 4; -ms-flex-order: 4; order: 4; padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; overflow: hidden; } .products-grid.products-upsell { margin: 2rem 0 0; padding: 0; } .products-grid.products-upsell .product-items { margin: 0 -15px; padding: 0; } .products-grid.products-upsell .product-item { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; padding: 0; margin-top: 0; } .products-grid.products-upsell .owl-item { padding: 0 15px; } .product-options-wrapper .fieldset > br { display: none; } .product-options-wrapper .downloads { display: -ms-flexbox; display: -webkit-flex; display: flex; } .collapsible-block { position: relative; } .collapsible-block .opener { display: block; position: relative; padding-left: 20px; margin-bottom: 20px; cursor: pointer; } .collapsible-block .opener::before { position: absolute; left: 0; top: 0; } .towishlist, .tocompare { position: relative; } .towishlist span, .tocompare span { display: none; } .product-social-links .mailto, .modes .mode-grid, .modes .mode-list, .sorter .sorter-action { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); padding: 0 0.5rem; } .towishlist:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .tocompare:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .product-social-links .mailto:before { content: ""; } .modes .mode-grid:before { content: ""; } .modes .mode-list:before { content: ""; } .sorter-action.sort-asc:before { content: ""; } .sorter-action.sort-desc:before { content: ""; } .filter-current { margin-bottom: 1rem; } .filter-current .remove:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .filter-current .remove span { display: none; } .filter-actions { margin-bottom: 1rem; } .filter-options-title { position: relative; font-weight: 600; margin-bottom: 0.5rem; padding-left: 15px; cursor: pointer; } .filter-options-title:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .filter-options-title::before { position: absolute; left: 0; top: 0; } .filter-options-item.active .filter-options-title:before { content: ""; } .filter-options-content { margin-bottom: 0.5rem; } .filter-options-content .count { font-style: italic; margin-left: 0.5rem; } @media (max-width: 768px) { #layered-filter-block { margin: 0; } } .form-login .actions-toolbar { flex-direction: row-reverse; } .form-create-account .fieldset, .form-edit-account .fieldset, .form-address-edit .fieldset { margin-bottom: 2rem; } .form-create-account .actions-toolbar, .form-edit-account .actions-toolbar, .form-address-edit .actions-toolbar { flex-direction: row-reverse; } body.account .block-title { position: relative; } body.account .block-title .action { position: absolute; right: 0; top: 0; } body.account .box address { margin-bottom: 1rem; } .block-search .block-title { display: none; } #search_mini_form { background: none; } #search_mini_form .label { display: none; } #search_mini_form .nested { display: none; } .cart-container .cart-summary .block { margin: 0; } .cart-container .cart-summary .cart-totals caption { display: none; } .cart-container .cart-summary .cart-totals th, .cart-container .cart-summary .cart-totals td { padding-left: 0; } .cart-container .cart-summary .legend { display: none; } table.cart { width: 100%; } table.cart > caption, table.cart .qty label { display: none; } table.cart .product-item-details, table.cart .product-item-photo { display: table-cell; } table.cart td.price .price, table.cart td.subtotal .price { display: inline-block; padding: 0.38rem 0; } .cart.actions.main { margin: -0.25rem; } .cart.actions.main .action { margin: 0 0.25rem; } .cart-summary > .title { margin-bottom: 1rem; display: inline-block; } .cart-summary .checkout.methods .item { margin-bottom: 0.5rem; } .table.totals { padding: 1rem 0; } .table.totals .mark, .table.totals .amount { padding: 0; } .items.methods, .item-options { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .items.methods dt, .items.methods dd, .item-options dt, .item-options dd { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .block.shipping .items.methods { display: block; } .block.shipping .items.methods .item-title, .block.shipping .items.methods .item-options { max-width: 100%; padding: 0; } .minicart-wrapper .showcart span[class=""]:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .block-minicart .block-content { position: relative; } .block-minicart .action.close { position: absolute; right: 1rem; top: 1rem; padding: 0; background: none; } .block-minicart .subtotal { display: -ms-flexbox; display: -webkit-flex; display: flex; margin-bottom: 1rem; } .block-minicart .subtotal .label { margin-right: 1rem; } .block-minicart .subtitle { font-weight: 600; } .block-minicart .product.actions .action { background: none; padding: 0; } .block-minicart .product.actions .primary .action { color: #30a0dd; } .block-minicart .product.actions .primary .action:hover { color: #191919; } .minicart-items-wrapper { margin: 1rem 0; } .minicart-items { overflow-x: auto; padding-right: 1rem; } .minicart-items .item { margin-bottom: 1rem; position: relative; } .minicart-items .item:last-child { margin-bottom: 0; } .minicart-items .details-qty .control { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .minicart-items .details-qty .label { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; margin-right: 0; } .minicart-items .details-qty .cart-item-qty { -webkit-flex-basis: 35%; -moz-flex-basis: 35%; -ms-flex-preferred-size: 35%; flex-basis: 35%; } .minicart-items .details-qty .update-cart-item { -webkit-flex-basis: 15%; -moz-flex-basis: 15%; -ms-flex-preferred-size: 15%; flex-basis: 15%; text-align: right; } .minicart-items .details-qty .update-cart-item:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .minicart-items .details-qty .update-cart-item span { display: none; } .minicart-items .product.options .toggle { cursor: pointer; } .minicart-items .product.options .list { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .minicart-items .product.options .list > dt, .minicart-items .product.options .list > dd { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .minicart-items .product.actions { position: absolute; top: 0; right: 0; line-height: 1rem; } @media (min-width: 768px) { .minicart-wrapper { padding: 0.38rem 0; } } #checkout-loader { height: 150px; } body > .loading-mask { background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0; bottom: 0; left: 0; margin: auto; position: fixed; right: 0; top: 0; z-index: 9999; } body > .loading-mask .loader p { display: none; } body > .loading-mask .loader > img { bottom: 0; left: 0; margin: auto; position: fixed; right: 0; top: 0; z-index: 100; } body._has-modal { height: 100%; overflow: hidden; width: 100%; } body._has-modal-custom .modal-custom-overlay { height: 100vh; left: 0; position: fixed; top: 0; width: 100vw; background: rgba(0, 0, 0, 0.7); z-index: 999; } .modal-custom .action-close, .modal-popup .action-close, .modal-slide .action-close { position: absolute; right: 10px; top: 10px; overflow: hidden; display: none; } .modal-custom .action-close:before, .modal-popup .action-close:before, .modal-slide .action-close:before { font-family: "FontAwesome"; content: '\f00d'; } .modal-custom .action-close:hover:before, .modal-popup .action-close:hover:before, .modal-slide .action-close:hover:before { opacity: 0.5; } .modals-overlay { z-index: 800; } .modal-slide, .modal-popup { bottom: 0; left: 0; pointer-events: none; position: fixed; right: 0; top: 0; } .modal-slide._show, .modal-popup._show { visibility: visible; } .modal-slide._show .modal-inner-wrap, .modal-popup._show .modal-inner-wrap { position: relative; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .modal-slide .modal-inner-wrap, .modal-popup .modal-inner-wrap { padding: 15px; background-color: #fff; opacity: 1; pointer-events: auto; } .modal-slide { left: auto; z-index: 1000; } .modal-slide._show .modal-inner-wrap { -webkit-transform: translateX(0); transform: translateX(0); } .modal-slide .modal-inner-wrap { height: 100%; overflow-y: auto; position: static; -webkit-transform: translateX(100%); transform: translateX(100%); transition-duration: .3s; -webkit-transition-property: -webkit-transform, visibility; transition-property: transform, visibility; transition-timing-function: ease-in-out; width: 270px; } .modal-slide._inner-scroll .modal-inner-wrap { overflow-y: visible; display: flex; flex-direction: column; } .modal-slide._inner-scroll .modal-header, .modal-slide._inner-scroll .modal-footer { flex-grow: 0; flex-shrink: 1; } .modal-slide._inner-scroll .modal-content { overflow-y: auto; } .modal-slide._inner-scroll .modal-footer { margin-top: auto; } .modal-slide .modal-header, .modal-slide .modal-content, .modal-slide .modal-footer { padding: 0 0.5rem 0.5rem; } .modal-slide .modal-header { padding-bottom: 10px; padding-top: 10px; } .modal-popup { left: 0; display: block; overflow-y: auto; z-index: 1000; } .modal-popup._show .modal-inner-wrap { -webkit-transform: translateY(0); transform: translateY(0); } .modal-popup .modal-inner-wrap { box-sizing: border-box; height: auto; left: 0; margin: 4rem auto; position: absolute; right: 0; -webkit-transform: translateY(-200%); transform: translateY(-200%); transition-duration: .2s; -webkit-transition-property: -webkit-transform, visibility; transition-property: transform, visibility; transition-timing-function: ease; display: flex; flex-direction: column; width: 75%; } .modal-popup._inner-scroll { overflow-y: visible; } .ie10 .modal-popup._inner-scroll, .ie9 .modal-popup._inner-scroll { overflow-y: auto; } .modal-popup._inner-scroll .modal-inner-wrap { max-height: 90%; } .ie10 .modal-popup._inner-scroll .modal-inner-wrap, .ie9 .modal-popup._inner-scroll .modal-inner-wrap { max-height: none; } .modal-popup._inner-scroll .modal-content { overflow-y: auto; } .modal-popup .modal-header, .modal-popup .modal-content, .modal-popup .modal-footer { padding-left: 1rem; padding-right: 1rem; } .modal-popup .modal-header, .modal-popup .modal-footer { flex-grow: 0; flex-shrink: 1; } .modal-popup .modal-header { padding-bottom: 1rem; padding-top: 1rem; } .modal-popup .modal-footer { margin-top: auto; padding-bottom: 1rem; padding-top: 1rem; } .modal-popup .modal-footer-actions { text-align: right; } .modal-popup.confirm .modal-inner-wrap { left: 50%; margin-left: -25rem; width: 50rem; } .modal-popup.confirm .modal-footer { text-align: right; } .modal-popup._image-box .modal-inner-wrap { margin: 5rem auto; max-width: 78rem; position: static; } .modal-popup._image-box .thumbnail-preview { padding-bottom: 4rem; text-align: center; } .modal-popup._image-box .thumbnail-preview .thumbnail-preview-image-block { border: 1px solid #ccc; margin: 0 auto 2rem; max-width: 58rem; padding: 2rem; } .modal-popup._image-box .thumbnail-preview .thumbnail-preview-image { max-height: 54rem; } @media (max-width: 768px) { .custom-slide { bottom: 0; left: 0; pointer-events: none; position: fixed; right: 0; top: 0; left: auto; z-index: 1000; } .custom-slide._show { visibility: visible; } .custom-slide._show .modal-inner-wrap { position: relative; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .custom-slide .modal-inner-wrap { padding: 15px; background-color: #fff; opacity: 1; pointer-events: auto; } .custom-slide._show .modal-inner-wrap { -webkit-transform: translateX(0); transform: translateX(0); } .custom-slide .modal-inner-wrap { height: 100%; overflow-y: auto; position: static; -webkit-transform: translateX(100%); transform: translateX(100%); transition-duration: .3s; -webkit-transition-property: -webkit-transform, visibility; transition-property: transform, visibility; transition-timing-function: ease-in-out; width: 270px; } .custom-slide._inner-scroll .modal-inner-wrap { overflow-y: visible; display: flex; flex-direction: column; } .custom-slide._inner-scroll .modal-header, .custom-slide._inner-scroll .modal-footer { flex-grow: 0; flex-shrink: 1; } .custom-slide._inner-scroll .modal-content { overflow-y: auto; } .custom-slide._inner-scroll .modal-footer { margin-top: auto; } .custom-slide .modal-header, .custom-slide .modal-content, .custom-slide .modal-footer { padding: 0 0.5rem 0.5rem; } .custom-slide .modal-header { padding-bottom: 10px; padding-top: 10px; } .custom-slide._show { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .custom-slide .modal-inner-wrap { box-sizing: border-box; height: auto; min-height: 100%; } body._has-modal-custom { height: 100vh; overflow: hidden; width: 100vw; } .modal-custom .action-close, .modal-popup .action-close, .modal-slide .action-close { display: block; } } .checkout-container { position: relative; } .checkout-container .authentication-wrapper { position: absolute; right: 0; top: -40px; } @media (min-width: 769px) { .checkout-container .authentication-wrapper .modal-custom-overlay { background: none; } .checkout-container .authentication-dropdown { bottom: 0; left: 0; pointer-events: none; position: fixed; right: 0; top: 0; left: 0; display: block; overflow-y: auto; z-index: 1000; width: 270px; right: 0; top: 50px; left: auto; position: absolute; overflow: visible; } .checkout-container .authentication-dropdown._show { visibility: visible; } .checkout-container .authentication-dropdown._show .modal-inner-wrap { position: relative; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .checkout-container .authentication-dropdown .modal-inner-wrap { padding: 15px; background-color: #fff; opacity: 1; pointer-events: auto; } .checkout-container .authentication-dropdown._show .modal-inner-wrap { -webkit-transform: translateY(0); transform: translateY(0); } .checkout-container .authentication-dropdown .modal-inner-wrap { box-sizing: border-box; height: auto; left: 0; margin: 4rem auto; position: absolute; right: 0; -webkit-transform: translateY(-200%); transform: translateY(-200%); transition-duration: .2s; -webkit-transition-property: -webkit-transform, visibility; transition-property: transform, visibility; transition-timing-function: ease; display: flex; flex-direction: column; width: 75%; } .checkout-container .authentication-dropdown .modal-inner-wrap { margin: 0; width: 100%; } } body._has-modal { height: 100%; overflow: hidden; width: 100%; } body._has-modal-custom .modal-custom-overlay { height: 100vh; left: 0; position: fixed; top: 0; width: 100vw; background: rgba(0, 0, 0, 0.7); z-index: 999; } .modal-custom .action-close, .modal-popup .action-close, .modal-slide .action-close { position: absolute; right: 10px; top: 10px; overflow: hidden; display: none; } .modal-custom .action-close:before, .modal-popup .action-close:before, .modal-slide .action-close:before { font-family: "FontAwesome"; content: '\f00d'; } .modal-custom .action-close:hover:before, .modal-popup .action-close:hover:before, .modal-slide .action-close:hover:before { opacity: 0.5; } .modals-overlay { z-index: 800; } .modal-slide, .modal-popup { bottom: 0; left: 0; pointer-events: none; position: fixed; right: 0; top: 0; } .modal-slide._show, .modal-popup._show { visibility: visible; } .modal-slide._show .modal-inner-wrap, .modal-popup._show .modal-inner-wrap { position: relative; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .modal-slide .modal-inner-wrap, .modal-popup .modal-inner-wrap { padding: 15px; background-color: #fff; opacity: 1; pointer-events: auto; } .modal-slide { left: auto; z-index: 1000; } .modal-slide._show .modal-inner-wrap { -webkit-transform: translateX(0); transform: translateX(0); } .modal-slide .modal-inner-wrap { height: 100%; overflow-y: auto; position: static; -webkit-transform: translateX(100%); transform: translateX(100%); transition-duration: .3s; -webkit-transition-property: -webkit-transform, visibility; transition-property: transform, visibility; transition-timing-function: ease-in-out; width: 270px; } .modal-slide._inner-scroll .modal-inner-wrap { overflow-y: visible; display: flex; flex-direction: column; } .modal-slide._inner-scroll .modal-header, .modal-slide._inner-scroll .modal-footer { flex-grow: 0; flex-shrink: 1; } .modal-slide._inner-scroll .modal-content { overflow-y: auto; } .modal-slide._inner-scroll .modal-footer { margin-top: auto; } .modal-slide .modal-header, .modal-slide .modal-content, .modal-slide .modal-footer { padding: 0 0.5rem 0.5rem; } .modal-slide .modal-header { padding-bottom: 10px; padding-top: 10px; } .modal-popup { left: 0; display: block; overflow-y: auto; z-index: 1000; } .modal-popup._show .modal-inner-wrap { -webkit-transform: translateY(0); transform: translateY(0); } .modal-popup .modal-inner-wrap { box-sizing: border-box; height: auto; left: 0; margin: 4rem auto; position: absolute; right: 0; -webkit-transform: translateY(-200%); transform: translateY(-200%); transition-duration: .2s; -webkit-transition-property: -webkit-transform, visibility; transition-property: transform, visibility; transition-timing-function: ease; display: flex; flex-direction: column; width: 75%; } .modal-popup._inner-scroll { overflow-y: visible; } .ie10 .modal-popup._inner-scroll, .ie9 .modal-popup._inner-scroll { overflow-y: auto; } .modal-popup._inner-scroll .modal-inner-wrap { max-height: 90%; } .ie10 .modal-popup._inner-scroll .modal-inner-wrap, .ie9 .modal-popup._inner-scroll .modal-inner-wrap { max-height: none; } .modal-popup._inner-scroll .modal-content { overflow-y: auto; } .modal-popup .modal-header, .modal-popup .modal-content, .modal-popup .modal-footer { padding-left: 1rem; padding-right: 1rem; } .modal-popup .modal-header, .modal-popup .modal-footer { flex-grow: 0; flex-shrink: 1; } .modal-popup .modal-header { padding-bottom: 1rem; padding-top: 1rem; } .modal-popup .modal-footer { margin-top: auto; padding-bottom: 1rem; padding-top: 1rem; } .modal-popup .modal-footer-actions { text-align: right; } .modal-popup.confirm .modal-inner-wrap { left: 50%; margin-left: -25rem; width: 50rem; } .modal-popup.confirm .modal-footer { text-align: right; } .modal-popup._image-box .modal-inner-wrap { margin: 5rem auto; max-width: 78rem; position: static; } .modal-popup._image-box .thumbnail-preview { padding-bottom: 4rem; text-align: center; } .modal-popup._image-box .thumbnail-preview .thumbnail-preview-image-block { border: 1px solid #ccc; margin: 0 auto 2rem; max-width: 58rem; padding: 2rem; } .modal-popup._image-box .thumbnail-preview .thumbnail-preview-image { max-height: 54rem; } @media (max-width: 768px) { .custom-slide { bottom: 0; left: 0; pointer-events: none; position: fixed; right: 0; top: 0; left: auto; z-index: 1000; } .custom-slide._show { visibility: visible; } .custom-slide._show .modal-inner-wrap { position: relative; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .custom-slide .modal-inner-wrap { padding: 15px; background-color: #fff; opacity: 1; pointer-events: auto; } .custom-slide._show .modal-inner-wrap { -webkit-transform: translateX(0); transform: translateX(0); } .custom-slide .modal-inner-wrap { height: 100%; overflow-y: auto; position: static; -webkit-transform: translateX(100%); transform: translateX(100%); transition-duration: .3s; -webkit-transition-property: -webkit-transform, visibility; transition-property: transform, visibility; transition-timing-function: ease-in-out; width: 270px; } .custom-slide._inner-scroll .modal-inner-wrap { overflow-y: visible; display: flex; flex-direction: column; } .custom-slide._inner-scroll .modal-header, .custom-slide._inner-scroll .modal-footer { flex-grow: 0; flex-shrink: 1; } .custom-slide._inner-scroll .modal-content { overflow-y: auto; } .custom-slide._inner-scroll .modal-footer { margin-top: auto; } .custom-slide .modal-header, .custom-slide .modal-content, .custom-slide .modal-footer { padding: 0 0.5rem 0.5rem; } .custom-slide .modal-header { padding-bottom: 10px; padding-top: 10px; } .custom-slide._show { -webkit-overflow-scrolling: touch; overflow-y: auto; overflow-x: hidden; } .custom-slide .modal-inner-wrap { box-sizing: border-box; height: auto; min-height: 100%; } body._has-modal-custom { height: 100vh; overflow: hidden; width: 100vw; } .modal-custom .action-close, .modal-popup .action-close, .modal-slide .action-close { display: block; } } .opc-progress-bar { margin-bottom: 2rem; } .opc-progress-bar .opc-progress-bar-item { font-size: 16px; line-height: 5.5em; opacity: 0.5; } .opc-progress-bar .opc-progress-bar-item::before { font-family: "FontAwesome"; content: '\f1db'; padding-right: 5px; } .opc-progress-bar .opc-progress-bar-item._active { opacity: 1; } .opc-progress-bar .opc-progress-bar-item._active::before { content: '\f192'; } .opc-progress-bar .opc-progress-bar-item._complete { opacity: 1; } .opc-progress-bar .opc-progress-bar-item._complete::before { content: '\f00c'; } .opc-estimated-wrapper { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; margin-bottom: 2rem; } .opc-estimated-wrapper .estimated-block span { display: block; } @media (min-width: 769px) { .opc-estimated-wrapper { display: none; } } .checkout-index-index .opc-wrapper .step-title { border-bottom: 1px solid #cecece; padding-bottom: 10px; margin-bottom: 10px; } .checkout-index-index .opc-wrapper .step-content { margin: 0; } .checkout-index-index .opc-wrapper .step-content .note { font-size: 12px; } .checkout-index-index .opc-wrapper .step-content .note::before { font-family: "FontAwesome"; content: '\f0d8'; padding-right: 5px; } @media (min-width: 769px) { .checkout-container::after { clear: both; } .checkout-container .opc-wrapper { float: left; padding-right: 30px; width: 66.6667%; } .checkout-container .opc-sidebar { float: right; margin: 0 0 20px; width: 33.3333%; } } .opc-sidebar .opc-block-summary span.title { display: block; border-bottom: 1px solid #cecece; padding-bottom: 10px; margin-bottom: 10px; } .block.items-in-cart { margin-top: 2rem; } .block.items-in-cart .product-item { margin-bottom: 1rem; } .block.items-in-cart .product-item .product-image-container { float: left; margin: 0 1rem 1rem 0; } .opc-block-shipping-information .ship-to { margin-top: 2rem; } .field-tooltip { cursor: pointer; position: absolute; right: 0; top: 1px; } .field-tooltip._active { z-index: 100; } .field-tooltip._active .field-tooltip-content { display: block; } .field-tooltip._active .field-tooltip-action:before { color: #1E5792; } .field-tooltip .field-tooltip-action::before { font-size: 18px; font-family: "FontAwesome"; content: ""; } ._keyfocus .field-tooltip .field-tooltip-action:focus { z-index: 100; } ._keyfocus .field-tooltip .field-tooltip-action:focus + .field-tooltip-content { display: block; } ._keyfocus .field-tooltip .field-tooltip-action:focus::before { color: #1E5792; } .field-tooltip .field-tooltip-content { background: #f5f5f5; border: solid 1px #dddddd; padding: 12px; width: 270px; display: none; right: 0; position: absolute; text-transform: none; top: 100%; word-wrap: break-word; z-index: 2; } .opc-block-summary .table-totals caption { display: none; } .opc-block-shipping-information { border-top: solid 1px #cecece; padding-top: 20px; } .opc-block-shipping-information .shipping-information-title { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .opc-block-shipping-information .shipping-information-content { padding: 10px; } .opc-block-shipping-information .action-edit { background: none; padding: 0; } .opc-block-shipping-information .action-edit span { display: none; } .opc-block-shipping-information .action-edit:hover { background: none; opacity: 0.5; } .opc-block-shipping-information .action-edit::before { font-family: "FontAwesome"; content: '\f044'; padding-right: 10px; } .billing-address-details { margin-bottom: 1rem; } .opc-payment-additional { margin-top: 2rem; } @media (max-width: 768px) { .opc-block-summary .table-totals th { display: block; width: 100%; padding: 10px 0 0; } .opc-block-summary .table-totals td { padding: 0; } .opc-block-summary .table-totals td::before { display: none; } } .opc-wrapper .shipping-address-item { padding: 20px; border: solid 1px transparent; } .opc-wrapper .shipping-address-item.selected-item { border: solid 1px #e7e7e7; } .form-shipping-address .field.street label { display: none; } .table-checkout-shipping-method { width: 100%; margin-bottom: 1rem; } .table-checkout-shipping-method th { font-weight: 600; padding: 0.38rem 0; } .table-checkout-shipping-method td.ch-method .radio, .table-checkout-shipping-method td.ch-method input[type="radio"] { margin: 0; } .table-checkout-shipping-method td > span { display: inline-block; } .methods-shipping { margin-bottom: 2rem; } .rating-summary { display: -ms-flexbox; display: -webkit-flex; display: flex; } .rating-summary .label { margin-right: 1rem; } .rating-summary .rating-result__stars .fa { font-size: 1.2rem; padding: 0 2px; } .rating-summary .rating-result__text { display: none; } .review-list .review-items { margin-top: 2rem; } .review-list .review-item { margin-bottom: 2rem; } .review-list .review-title { margin-bottom: 1rem; } .review-list .rating-summary { display: -ms-flexbox; display: -webkit-flex; display: flex; } .review-list .rating-label { -webkit-flex-basis: 30%; -moz-flex-basis: 30%; -ms-flex-preferred-size: 30%; flex-basis: 30%; padding: 0.38rem 0; } .review-list .rating-result { display: inline-block; } .review-list .review-details { display: -ms-flexbox; display: -webkit-flex; display: flex; } .review-list .review-details p { width: 50%; margin: 0; } .review-list .review-author { text-align: left; } .review-list .review-date { text-align: right; } .review-list .review-details-value { display: inline-block; } @media (min-width: 768px) { .review-list .rating-label { -webkit-flex-basis: 10%; -moz-flex-basis: 10%; -ms-flex-preferred-size: 10%; flex-basis: 10%; } } .review-add .review-legend span { display: inline-block; margin-right: 1rem; } .review-fieldset .row { margin-top: 2rem; } .review-field-rating { margin-bottom: 0; } .review-field-rating > .label { min-width: 100px; } .control.review-control-vote { display: inline-block; } .control.review-control-vote label[class^='rating-'] { display: inline-block; cursor: pointer; margin-right: 0; } .control.review-control-vote label[class^='rating-'] .rating-star { margin: 0.38rem 0; padding: 0 4px; font-size: 1.2rem; display: inline-block; } .control.review-control-vote label[class^='rating-'] .rating-star:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .control.review-control-vote label[class^='rating-'].fill .rating-star:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .control.review-control-vote .radio { display: none; } /** * Copyright ┬⌐ 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ .swatch-attribute-label { font-weight: bold; position: relative; } .swatch-attribute-label.required { padding-right: 10px; } .swatch-attribute-label[data-required="1"]:after { content: '*'; color: red; position: absolute; right: -11px; top: -2px; font-weight: bold; font-size: 1em; } .swatch-attribute-selected-option { color: #646464; padding-left: 17px; } .swatch-option { padding: 1px 2px; min-width: 30px; max-width: 90px; min-height: 20px; float: left; margin: 0 10px 5px 0; text-align: center; cursor: pointer; position: relative; border: 1px solid #dadada; overflow: hidden; text-overflow: ellipsis; } .swatch-option.text { background: #F2F2F2; color: #7F7F7F; font-size: 12px; font-weight: 700; line-height: 20px; padding: 0.38rem 1rem; min-width: 22px; margin-right: 7px; } .swatch-option.text.selected { background-color: #FFF !important; } .swatch-option.selected { outline: 2px solid #FF5100; border: 1px solid #fff; color: #333; } .swatch-option .disabled { cursor: default; } .swatch-option .disabled::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: -moz-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, white 43%, white 46%, #ff5216 47%, #ff5216 53%, white 54%, white 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(42%, rgba(255, 255, 255, 0)), color-stop(43%, white), color-stop(46%, white), color-stop(47%, #ff5216), color-stop(53%, #ff5216), color-stop(54%, white), color-stop(57%, white), color-stop(58%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, white 43%, white 46%, #ff5216 47%, #ff5216 53%, white 54%, white 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, white 43%, white 46%, #ff5216 47%, #ff5216 53%, white 54%, white 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, white 43%, white 46%, #ff5216 47%, #ff5216 53%, white 54%, white 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, white 43%, white 46%, #ff5216 47%, #ff5216 53%, white 54%, white 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); } .clearfix:after { content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; } .swatch-attribute.size .swatch-option, .swatch-attribute.manufacturer .swatch-option { background: #f0f0f0; color: #949494; } .swatch-attribute.size .swatch-option.selected, .swatch-attribute.manufacturer .swatch-option.selected { color: black; background: #fff; border: 1px solid #fff; } .swatch-option:not(.disabled):hover { outline: 1px solid #999; border: 1px solid #fff; color: #333; } .swatch-option.image:not(.disabled):hover, .swatch-option.color:not(.disabled):hover { border: 1px solid #fff; } .swatch-option-tooltip { visibility: hidden; } @media (min-width: 768px) { .swatch-option-tooltip { max-width: 140px; /*max-height: 160px;*/ max-height: 100%; min-height: 20px; min-width: 40px; position: absolute; padding: 5px; background: #fff; color: #949494; border: 1px solid #adadad; display: none; visibility: visible; z-index: 999; text-align: center; } } .swatch-option-tooltip .corner, .swatch-option-tooltip-layered .corner { position: absolute; bottom: 3px; height: 8px; } .swatch-option-tooltip .corner::after, .swatch-option-tooltip-layered .corner::after { content: ''; position: relative; top: 1px; left: -15px; width: 0; height: 0; border-style: solid; border-width: 7px 7.5px 0 7.5px; border-color: #fff transparent transparent transparent; font-size: 1px; } .swatch-option-tooltip .corner::before, .swatch-option-tooltip-layered .corner::before { content: ''; position: relative; top: 2px; left: 0; width: 0; height: 0; border-style: solid; border-width: 8px 8.5px 0 8.5px; border-color: #adadad transparent transparent transparent; font-size: 1px; } .swatch-option-tooltip .image, .swatch-option-tooltip-layered .image { display: block; height: 130px; width: 130px; /*margin: 0 0 5px;*/ margin: 0 auto; } .swatch-option-tooltip .title { max-width: 140px; min-height: 20px; max-height: 200px; color: #282828; text-align: center; display: block; overflow: hidden; } .swatch-opt { margin: 20px 0; } .swatch-more { display: inline-block; margin: 2px 0; text-decoration: none !important; position: static; z-index: 1; } /* Layered Features */ .swatch-option-link-layered { position: relative; margin: 0 !important; padding: 0 !important; } .swatch-option-tooltip-layered { width: 140px; position: absolute; background: #fff; color: #949494; border: 1px solid #adadad; display: none; z-index: 999; left: -47px; } .swatch-visual-tooltip-layered { height: 160px; top: -170px; } .swatch-textual-tooltip-layered { height: 30px; top: -40px; } .swatch-option-link-layered:hover > .swatch-option-tooltip-layered { display: block; } .swatch-attribute-options .swatch-option-tooltip-layered .title { width: 100%; height: 20px; position: absolute; bottom: -5px; left: 0; color: #282828; text-align: center; margin-bottom: 10px; } .swatch-option-disabled:after { content: ''; position: absolute; width: 42px; height: 2px; background: red; transform: rotate(-30deg); -o-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); z-index: 995; left: -4px; top: 10px; } .swatch-option-disabled { outline: none !important; cursor: default; border: 0; } /* Bugfix for Add To Cart button */ div[class^="swatch-opt-"] { margin-bottom: 10px; } .swatch-option-loading { content: url("../images/loader-2.gif"); } .block-wishlist .product-item { display: block; margin-bottom: 2rem; } .block-wishlist .product-item-details { position: relative; margin-top: 1rem; } .block-wishlist .product-item-actions { margin-top: 1rem; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .block-wishlist .empty { margin-top: 1rem; } .form-wishlist-items .actions-toolbar { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .form-wishlist-items .actions-toolbar > .primary { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; padding-left: 15px; padding-right: 15px; } .form-wishlist-items .actions-toolbar > .secondary { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; padding-left: 15px; padding-right: 15px; } .products-grid.wishlist .box-tocart { margin-bottom: 1rem; } .products-grid.wishlist .box-tocart .field.qty { display: -ms-flexbox; display: -webkit-flex; display: flex; } .products-grid.wishlist .box-tocart .field.qty .label { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .products-grid.wishlist .product-item-actions { display: block; margin: 0; } .products-grid.wishlist .product-item-actions .actions-primary { margin: 0; } .bundle-actions { margin-bottom: 1rem; } .bundle-options-container { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-order: 3; -ms-flex-order: 3; order: 3; padding-left: 15px; padding-right: 15px; } .bundle-options-wrapper .legend { margin-bottom: 1rem; } .fieldset-bundle-options__wrapper { margin-top: 1rem; } .fieldset-bundle-options__wrapper .field.option { margin-bottom: 2rem; } .fieldset-bundle-options__wrapper .field.option > .label { font-weight: 600; } .fieldset-bundle-options__wrapper .field.option .price { font-size: inherit; } .fieldset-bundle-options__wrapper .qty-holder { margin-top: 1rem; display: -ms-flexbox; display: -webkit-flex; display: flex; } @media (min-width: 480px) { .fieldset-bundle-options__wrapper { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .fieldset-bundle-options__wrapper .field.option { padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1200px) { .fieldset-bundle-options__wrapper .field.option { -webkit-flex-basis: 33.33%; -moz-flex-basis: 33.33%; -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; } } .block-bundle-summary > .title { margin-bottom: 1rem; } @media (min-width: 480px) { .block-bundle-summary > .content { display: -ms-flexbox; display: -webkit-flex; display: flex; margin-left: -15px; margin-right: -15px; } .block-bundle-summary > .content > div { padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } .bundle-actions { margin-bottom: 1rem; } .bundle-options-container { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-order: 3; -ms-flex-order: 3; order: 3; padding-left: 15px; padding-right: 15px; } .bundle-options-wrapper .legend { margin-bottom: 1rem; } .fieldset-bundle-options__wrapper { margin-top: 1rem; } .fieldset-bundle-options__wrapper .field.option { margin-bottom: 2rem; } .fieldset-bundle-options__wrapper .field.option > .label { font-weight: 600; } .fieldset-bundle-options__wrapper .field.option .price { font-size: inherit; } .fieldset-bundle-options__wrapper .qty-holder { margin-top: 1rem; display: -ms-flexbox; display: -webkit-flex; display: flex; } @media (min-width: 480px) { .fieldset-bundle-options__wrapper { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .fieldset-bundle-options__wrapper .field.option { padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media (min-width: 1200px) { .fieldset-bundle-options__wrapper .field.option { -webkit-flex-basis: 33.33%; -moz-flex-basis: 33.33%; -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; } } .block-bundle-summary > .title { margin-bottom: 1rem; } @media (min-width: 480px) { .block-bundle-summary > .content { display: -ms-flexbox; display: -webkit-flex; display: flex; margin-left: -15px; margin-right: -15px; } .block-bundle-summary > .content > div { padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } /** * */ .fotorama-video-container:after { background: url(../Magento_ProductVideo/img/gallery-sprite.png) bottom right; bottom: 0; content: ''; height: 100px; left: 0; margin: auto; position: absolute; right: 0; top: 12px; width: 100px; } .fotorama-video-container .magnify-lens { display: none !important; } .fotorama-video-container.video-unplayed:hover img { opacity: 0.6; } .fotorama-video-container.video-unplayed:hover:after { transform: scale(1.25); } .video-thumb-icon:after { background: url(../Magento_ProductVideo/img/gallery-sprite.png) bottom left; bottom: 0; content: ''; height: 40px; left: 0; margin: auto; position: absolute; right: 0; top: 10px; width: 49px; } .product-video { height: 75%; left: 0; position: absolute; top: 0; width: 100%; right: 0; bottom: 0; margin: auto; } .product-video iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9999; } .fotorama__arr.hidden-video { z-index: -1 !important; } .fotorama__video-close { bottom: 89%; top: auto; } .fotorama__stage__shaft:focus .fotorama__stage__frame.fotorama__active:after { bottom: 0; content: ''; height: 100px; left: 0; margin: auto; position: absolute; right: 0; top: 12px; width: 100px; } .products .product-item .product-item-name { display: block; } .products .product-item .rating-summary { display: inline-block; } .products .product-item .reviews-actions { display: inline-block; } .products .product-item .reviews-actions .view { margin-right: 1rem; } .products .product-item .swatch-attribute-options { margin-top: 10px; } .products .product-item .old-price .price { text-decoration: line-through; font-size: 1rem; } .products .product-item .product-item-actions { margin-bottom: 1rem; } .toolbar-products { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 2rem; } .toolbar-products .field > .label, .toolbar-products .field > .control, .toolbar-products .field > .action { display: inline-block; } .toolbar-products .field > .label { width: 30%; } .toolbar-products .field > .control { width: 40%; } .toolbar-products .toolbar-amount { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } .toolbar-products .modes { -webkit-flex-basis: 25%; -moz-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; } .toolbar-products .pages { -webkit-flex-basis: 25%; -moz-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-order: 3; -ms-flex-order: 3; order: 3; } .toolbar-products .limiter { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-order: 4; -ms-flex-order: 4; order: 4; } .toolbar-products .toolbar-sorter { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; -webkit-box-ordinal-group: 6; -webkit-order: 5; -moz-order: 5; -ms-flex-order: 5; order: 5; } .toolbar-container .filter-toggle { background: #e6e6e6; padding: 0.38rem 1rem; line-height: 28px; display: inline-block; margin-bottom: 20px; display: none; } .toolbar-container .filter-toggle:hover { background: #cccccc; } .modes { margin: -0.5rem; } .modes .modes-label { display: none; } .modes .modes-mode span { display: none; } .modes .modes-mode.active { color: #4e4e4e; } .modes .modes-mode.active:hover { color: inherit; } .modes .modes-mode:hover { color: #191919; } .toolbar-amount { text-align: center; } .pages { text-align: right; position: relative; } .pages:hover .pages-items { display: block; } .pages .pages-label { cursor: pointer; } .pages .pages-items { display: none; position: absolute; top: 2.63rem; right: 0; background: #f2f2f2; padding: 1rem; z-index: 5; width: 290px; } .pages .pages-items:before { position: absolute; height: 0; width: 0; right: .5rem; top: -.5rem; border: transparent; border-left: .5rem solid transparent; border-right: .5rem solid transparent; border-bottom: 0.5rem solid #f2f2f2; content: ''; } .pages .item .page:hover { color: #191919; } .pages .item.current .label { font-weight: 600; } .limiter .limiter-text { display: none; } .toolbar-sorter { text-align: right; } .toolbar-sorter .label { text-align: left; } .toolbar-sorter .sorter-action { margin-left: 1rem; padding: 0.38rem 0; line-height: 2.63rem; } .toolbar-sorter .sorter-action span { display: none; } @media (min-width: 768px) { .toolbar-products .field > .label { width: 20%; } .toolbar-products .field > .control { width: auto; } .toolbar-products .limiter { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } .toolbar-products .toolbar-sorter { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } .catalog-product-view { /* * Tabs */ } .catalog-product-view .main { display: -ms-flexbox; display: -webkit-flex; display: flex; margin-left: -15px; margin-right: -15px; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .catalog-product-view .product-info-main { padding-left: 15px; padding-right: 15px; -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } .catalog-product-view .product-info-stock-sku { margin-bottom: 1rem; } .catalog-product-view .product-info-stock-sku .stock { display: inline-block; float: right; } .catalog-product-view .product-info-stock-sku .stock.available span { color: #54b70b; } .catalog-product-view .product-info-stock-sku .stock.unavailable span { color: #ee372a; } .catalog-product-view .product-info-stock-sku .sku { display: inline-block; } .catalog-product-view .product-info-stock-sku .sku .type { font-weight: 300; } .catalog-product-view .product-info-stock-sku .sku .value { padding: 3px 5px; background: #f5f5f5; color: #1E5792; margin: -3px 0 0 5px; } .catalog-product-view .page-title-wrapper { margin: 0; } .catalog-product-view .page-title-wrapper .container { padding: 0; } .catalog-product-view .page-title-wrapper .container h1.page-title { text-align: left; margin: 0 0 1rem; } .catalog-product-view .page-title-wrapper .container h1.page-title span { text-transform: none; font-weight: normal; margin: 0; } @media (min-width: 768px) { .catalog-product-view .page-title-wrapper .container h1.page-title span { font-size: 30px; line-height: 1.567em; } } .catalog-product-view .product-reviews-summary { margin-bottom: 1rem; } .catalog-product-view .product-reviews-summary .rating-summary { display: inline-block; margin: 3px 20px 0 0; } .catalog-product-view .product-reviews-summary .rating-summary .label { display: none; } .catalog-product-view .product-reviews-summary .rating-summary .rating-result__stars .fa { font-size: 15px; } .catalog-product-view .reviews-actions { display: inline-block; } .catalog-product-view .reviews-actions .view { margin-right: 1rem; } .catalog-product-view .price-box { margin-bottom: 1rem; } .catalog-product-view .price-box .special-price, .catalog-product-view .price-box .old-price { display: block; padding-bottom: 5px; line-height: normal; } .catalog-product-view .price-box .old-price .price { text-decoration: line-through; font-weight: 300; } .catalog-product-view .price-box .price-label { display: none; } .catalog-product-view .price-wrapper .price { color: #1E5792; font-weight: bold; font-size: 30px; line-height: normal; margin: 0; } .catalog-product-view .product-add-form { margin-bottom: 1rem; } .catalog-product-view .box-tocart .field { padding-right: 2rem; } .catalog-product-view .box-tocart .control { display: inline-block; } .catalog-product-view .box-tocart .qty { width: auto; padding-right: 0; } .catalog-product-view .box-tocart .qty.input-text { display: inline-block; width: 5rem; padding: 0; text-align: center; line-height: 48px; height: 48px; font-size: 20px; color: #1E5792; } .catalog-product-view .swatch-opt { margin-top: 30px; } .catalog-product-view .box-tocart div.mage-error, .catalog-product-view .product-options-wrapper div.mage-error { position: absolute; border: solid 1px #dadada; border-radius: 7px; background: #fff; z-index: 18; top: 0; right: 0; } .catalog-product-view .box-tocart div.mage-error { right: auto; left: 0; top: 90%; } .catalog-product-view .product-options-wrapper .field, .catalog-product-view .product-options-wrapper .swatch-attribute { margin-bottom: 20px; position: relative; } .catalog-product-view .product-options-wrapper .swatch-attribute-label, .catalog-product-view .product-options-wrapper label.label { font-size: 16px; text-transform: uppercase; margin-bottom: 0px; font-weight: 500; } .catalog-product-view .product-options-wrapper .swatch-attribute-options { margin-top: 10px; } .catalog-product-view .product-social-links { padding-bottom: 15px; } .catalog-product-view .product-social-links .action { margin-right: 1rem; font-size: 24px; } .catalog-product-view .product-social-links .action span { display: none; } .catalog-product-view .product-social-links a.mailto { padding: 0; } .catalog-product-view .product-addto-links { display: inline-block; } .catalog-product-view .product.attribute strong { font-weight: 600; } .catalog-product-view .product.attribute .value { display: inline-block; } .catalog-product-view .product.attribute.description { text-align: center; } .catalog-product-view .product.attribute.description .value { max-width: 768px; text-align: left; } .catalog-product-view .product.media { -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-order: 1; -ms-flex-order: 1; order: 1; padding-left: 15px; padding-right: 15px; } .catalog-product-view .product.info { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-order: 3; -ms-flex-order: 3; order: 3; margin: 2rem 0; padding-left: 15px; padding-right: 15px; } .catalog-product-view .product .table-caption { display: none; } .catalog-product-view .gallery-placeholder { position: relative; min-height: 100px; } .catalog-product-view button.tocart { font-size: 16px; text-transform: uppercase; font-weight: 500; padding: 10px 20px; } .catalog-product-view button.tocart span::before { content: '+'; padding-right: 5px; } .catalog-product-view .product.data.items .tab-titles { border-bottom: solid 1px #dadada; padding-bottom: 20px; } .catalog-product-view .product.data.items .tab-titles .data.title { padding: 0; margin: 0 10px 0 0; font-size: 14px; text-transform: uppercase; font-weight: normal; float: none; display: inline-block; } .catalog-product-view .product.data.items .tab-titles .data.title a { color: #999999; display: inline-block; vertical-align: middle; } .catalog-product-view .product.data.items .tab-titles .data.title.active a, .catalog-product-view .product.data.items .tab-titles .data.title a:hover { color: #1b110d; } @media (min-width: 768px) { .catalog-product-view .product.data.items .tab-titles { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; } .catalog-product-view .product.data.items .tab-titles .data.title { margin: 0 15px; font-size: 1.286em; font-weight: 600; } } .catalog-product-view .product.data.items .data.content { margin-top: 0; } .catalog-product-view .product.data.items .counter::before { content: '('; } .catalog-product-view .product.data.items .counter::after { content: ')'; } .catalog-product-view .additional-attributes caption { text-transform: uppercase; color: #1E5792; } .catalog-product-view .additional-attributes th { font-weight: bold; width: 20%; } .catalog-product-view .additional-attributes td, .catalog-product-view .additional-attributes th { border-bottom: solid 1px #dadada; } .catalog-product-view .review-list select { padding: 5px; height: auto; } .catalog-product-view .review-list strong.limiter-label { font-weight: normal; padding: 0; } .catalog-product-view .review-list .review-items { margin-top: 15px; } .catalog-product-view .review-list .review-ratings { border-top: solid 1px #dadada; } .catalog-product-view .review-list .review-ratings .rating-summary { display: block; padding: 10px 0; margin-bottom: 0px; border-bottom: solid 1px #dadada; } .catalog-product-view .review-list .review-content { padding: 15px 10px; font-style: italic; } .catalog-product-view .products-grid .product-item-photo { background: #f7f7f7; display: inline-block; margin-bottom: 10px; } .catalog-product-view .products-grid .product-item-photo .product-image-photo { margin: 0; } .catalog-product-view .carousel .owl-controls .owl-prev:hover::before, .catalog-product-view .carousel .owl-controls .owl-next:hover::before { color: #1E5792; } .catalog-product-view .carousel .field .checkbox { margin: 0px 5px 0 0; vertical-align: middle; } .catalog-product-view .carousel label.label { padding: 0; vertical-align: middle; } .catalog-product-view .product-item-actions { margin: 0; } .catalog-product-view .product-item-actions .actions-secondary { height: 23px; margin: 0; } .catalog-product-view .product-item-actions .actions-secondary .action { display: inline-block; height: 23px; margin: 0 10px 0 0; background-color: transparent; padding: 0px; font-size: 23px; line-height: 23px; color: #cecece; } .catalog-product-view .product-item-actions .actions-secondary .action:before { font-family: 'Material Icons'; font-weight: 400; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); } .catalog-product-view .product-item-actions .actions-secondary .action:hover { color: #343434; background: none; } .catalog-product-view .product-item-actions .actions-secondary .action.towishlist:before { content: '\e87e'; } .catalog-product-view .product-item-actions .actions-secondary .action.tocompare:before { content: '\e043'; } @media (min-width: 480px) { .catalog-product-view .box-tocart .fieldset { display: block; } .catalog-product-view .box-tocart .field, .catalog-product-view .box-tocart .actions { padding-right: 20px; display: inline-block; } } @media (min-width: 992px) { .catalog-product-view .main { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .catalog-product-view .main .product-info-main { -webkit-flex-basis: 33%; -moz-flex-basis: 33%; -ms-flex-preferred-size: 33%; flex-basis: 33%; max-width: 33%; } .catalog-product-view .main .product.media { -webkit-flex-basis: 63%; -moz-flex-basis: 63%; -ms-flex-preferred-size: 63%; flex-basis: 63%; max-width: 63%; } .catalog-product-view .box-tocart .fieldset { display: block; } } body.catalog-product-compare-index .action.print { float: right; margin: 1rem 0; } body.catalog-product-compare-index .table-caption { display: none; } .table-wrapper.comparison { clear: both; max-width: 100%; overflow-x: auto; } .table-wrapper.comparison .table-comparison > tbody > tr > th, .table-wrapper.comparison .table-comparison > tbody > tr > td { border-top: 0; } .table-comparison { table-layout: fixed; } .table-comparison .cell.label.remove, .table-comparison .cell.label.product { border-bottom: none; } .table-comparison .cell.label.remove span, .table-comparison .cell.label.product span { display: none; } .table-comparison .cell.label, .table-comparison td:last-child { border-right: 1px solid #dadada; } .table-comparison .cell { width: 180px; padding: 1rem; } .table-comparison .cell .attibute.value { width: 100%; overflow: hidden; } .table-comparison .cell.product.info, .table-comparison .cell.product.label { border-bottom: 1px solid #dadada; } .table-comparison .cell.label .attribute.label { display: block; width: 100%; word-wrap: break-word; } .table-comparison .cell.attribute img { max-width: 100%; height: auto; } .table-comparison .cell.remove { padding-top: 0; padding-bottom: 0; text-align: right; } .table-comparison .product-item-photo { display: block; margin: 0 auto 1rem; } .table-comparison .product-image-photo { margin-left: 0; } .table-comparison .product-item-actions, .table-comparison .price-box, .table-comparison .product.rating, .table-comparison .product-item-name { display: block; margin: 1rem 0; } .table-comparison .product-addto-links { margin-top: 1rem; } .table-comparison .product-addto-links .action.toggle { padding: 0; } .table-comparison .action.tocart { white-space: nowrap; } .comparison.headings { position: absolute; z-index: 2; top: 0; left: 0; width: auto; display: none; } .block-compare .product-items { margin-bottom: 1rem; } .block-compare .product-item-name { display: block; padding-right: 2rem; } .block-compare .product-item { position: relative; margin-bottom: 1rem; } .block-compare .action.delete { position: absolute; right: 0; top: 0; padding: 0 1rem; } .block-compare .actions-toolbar { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .block-compare .actions-toolbar .primary { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-order: 2; -ms-flex-order: 2; order: 2; } .products-grid .product-items { display: -ms-flexbox; display: -webkit-flex; display: flex; margin-left: -15px; margin-right: -15px; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .products-grid .product-item { padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; margin-bottom: 2rem; } .products-grid .product-image-photo { text-align: center; display: block; margin-bottom: 1rem; } .products-grid .reviews-actions { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .products-grid .reviews-actions .action.add { font-size: 0; } .products-grid .reviews-actions .action.add:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .products-grid .reviews-actions .action.add:before { font-size: 14px; } .products-grid .special-price { display: block; } .products-grid .old-price { display: block; } .products-grid .price-from { margin-bottom: 0; } .products-grid .price-to { margin-bottom: 0; } .products-grid .product-item-actions .actions-primary { margin-bottom: .25rem; } @media (min-width: 480px) { .products-grid .product-item { -webkit-flex-basis: 50%; -moz-flex-basis: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } } @media (min-width: 992px) { .products-grid .product-item { -webkit-flex-basis: 33.33%; -moz-flex-basis: 33.33%; -ms-flex-preferred-size: 33.33%; flex-basis: 33.33%; } } @media (min-width: 1200px) { .product-item-actions { display: -ms-flexbox; display: -webkit-flex; display: flex; margin: -0.25rem; } .product-item-actions > div { margin: 0 0.25rem 0.25rem; } } .widget.block-new-products .products-grid .product-item, .widget.block-products-list .products-grid .product-item { margin-bottom: 3rem; } .products-list .product-item-info { margin-bottom: 4rem; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-left: -15px; margin-right: -15px; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .products-list .product-image-photo { padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; text-align: center; margin-bottom: 1rem; } .products-list .product-item-details { padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } @media (min-width: 480px) { .products-list .product-item-info { -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; } .products-list .product-item-photo { -webkit-flex-basis: 42%; -moz-flex-basis: 42%; -ms-flex-preferred-size: 42%; flex-basis: 42%; margin-bottom: 0; } .products-list .product-item-details { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } } .gallery-placeholder .loading-mask { padding: 0 0 50%; position: absolute; display: none; } .gallery-placeholder .fotorama-hidden, .gallery-placeholder .fotorama--hidden, .gallery-placeholder .fotorama__load { left: -99999px; position: absolute; top: -99999px; z-index: -1000; display: none; } .fotorama-item .fotorama__wrap { display: block; position: relative; } .fotorama-item .fotorama__stage { margin-bottom: 1rem; } .fotorama-item .fotorama__spinner, .fotorama-item .spinner { display: none !important; visibility: hidden; } .fotorama-item .fotorama__thumb-border { background-image: none; } .fotorama-item .fotorama__stage { background-color: #f7f7f7; } .fotorama-item .fotorama__nav__frame--thumb { opacity: 0.4; } .fotorama-item .fotorama__nav__frame--thumb.fotorama__active { opacity: 1; } .fotorama-item .fotorama__arr--disabled { opacity: 0; transition: .5s all ease; } .fotorama-item .fotorama__nav-wrap--vertical .fotorama__thumb__arr--left, .fotorama-item .fotorama__nav-wrap--vertical .fotorama__thumb__arr--right { background-image: none; } .fotorama-item .fotorama__nav-wrap--vertical .fotorama__thumb__arr--left .fotorama__thumb__arr, .fotorama-item .fotorama__nav-wrap--vertical .fotorama__thumb__arr--right .fotorama__thumb__arr { width: 50px; height: 50px; padding: 0; border-radius: 50%; background-color: #1E5792; background-image: none; opacity: 0.7; transform: rotate(0); text-align: center; transition: .3s all ease; } .fotorama-item .fotorama__nav-wrap--vertical .fotorama__thumb__arr--left .fotorama__thumb__arr::before, .fotorama-item .fotorama__nav-wrap--vertical .fotorama__thumb__arr--right .fotorama__thumb__arr::before { font-family: 'Material Icons'; font-weight: 400; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); font-size: 38px; color: #fff; line-height: 50px; } .fotorama-item .fotorama__nav-wrap--vertical .fotorama__thumb__arr--left .fotorama__thumb__arr:hover, .fotorama-item .fotorama__nav-wrap--vertical .fotorama__thumb__arr--right .fotorama__thumb__arr:hover { opacity: 1; } .fotorama-item .fotorama__nav-wrap--vertical .fotorama__thumb__arr--left { top: 20px; } .fotorama-item .fotorama__nav-wrap--vertical .fotorama__thumb__arr--left .fotorama__thumb__arr::before { content: '\e316'; } .fotorama-item .fotorama__nav-wrap--vertical .fotorama__thumb__arr--right { bottom: 40px; } .fotorama-item .fotorama__nav-wrap--vertical .fotorama__thumb__arr--right .fotorama__thumb__arr::before { content: '\e313'; } @media (min-width: 768px) { .fotorama-item .fotorama__nav__shaft { margin-top: -30px; } } .block.related { -webkit-box-ordinal-group: 6; -webkit-order: 5; -moz-order: 5; -ms-flex-order: 5; order: 5; padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; overflow: hidden; } .products-grid.products-related { margin: 2rem 0 0; padding: 0; } .products-grid.products-related .product-items { margin: 0 -15px; padding: 0; } .products-grid.products-related .product-item { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; padding: 0; margin-top: 0; } .products-grid.products-related .owl-item { padding: 0 15px; } .block.upsell { -webkit-box-ordinal-group: 5; -webkit-order: 4; -moz-order: 4; -ms-flex-order: 4; order: 4; padding-left: 15px; padding-right: 15px; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; overflow: hidden; } .products-grid.products-upsell { margin: 2rem 0 0; padding: 0; } .products-grid.products-upsell .product-items { margin: 0 -15px; padding: 0; } .products-grid.products-upsell .product-item { -webkit-flex-basis: 100%; -moz-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; padding: 0; margin-top: 0; } .products-grid.products-upsell .owl-item { padding: 0 15px; } .products-grid.products-upsell .owl-controls { top: -45px; right: 0; left: auto; } .product-options-wrapper .fieldset > br { display: none; } .product-options-wrapper .downloads { display: -ms-flexbox; display: -webkit-flex; display: flex; } .collapsible-block { position: relative; } .collapsible-block .opener { display: block; position: relative; padding-left: 20px; margin-bottom: 20px; cursor: pointer; } .collapsible-block .opener::before { position: absolute; left: 0; top: 0; } .towishlist, .tocompare { position: relative; } .towishlist span, .tocompare span { display: none; } .modes .mode-grid, .modes .mode-list, .sorter .sorter-action { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); padding: 0 0.5rem; } .towishlist:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .tocompare:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .product-social-links .mailto:before { content: ""; } .modes .mode-grid:before { content: ""; } .modes .mode-list:before { content: ""; } .sorter-action.sort-asc:before { content: ""; } .sorter-action.sort-desc:before { content: ""; }