@charset "UTF-8"; /* * @package Theme Style * @description This package holds all common style declarations * of this template */ /* * 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 */ /* open-sans-300 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local("Open Sans Light"), local("OpenSans-Light"), url("../fonts/Open_Sans/open-sans-v13-latin-300.woff2") format("woff2"), url("../fonts/Open_Sans/open-sans-v13-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local("Open Sans"), local("OpenSans"), url("../fonts/Open_Sans/open-sans-v13-latin-regular.woff2") format("woff2"), url("../fonts/Open_Sans/open-sans-v13-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* open-sans-600 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("../fonts/Open_Sans/open-sans-v13-latin-600.woff2") format("woff2"), url("../fonts/Open_Sans/open-sans-v13-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-100 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100; src: local("Roboto Thin"), local("Roboto-Thin"), url("../fonts/Roboto/roboto-v15-latin-100.woff2") format("woff2"), url("../fonts/Roboto/roboto-v15-latin-100.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-300 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local("Roboto Light"), local("Roboto-Light"), url("../fonts/Roboto/roboto-v15-latin-300.woff2") format("woff2"), url("../fonts/Roboto/roboto-v15-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-regular - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local("Roboto"), local("Roboto-Regular"), url("../fonts/Roboto/roboto-v15-latin-regular.woff2") format("woff2"), url("../fonts/Roboto/roboto-v15-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* roboto-500 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: local("Roboto Medium"), local("Roboto-Medium"), url("../fonts/Roboto/roboto-v15-latin-500.woff2") format("woff2"), url("../fonts/Roboto/roboto-v15-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* mr-dafoe-regular - latin */ @font-face { font-family: 'Mr Dafoe'; font-style: normal; font-weight: 400; src: local("Mr Dafoe Regular"), local("MrDafoe-Regular"), url("../fonts/MrDafoe/mr-dafoe-v5-latin-regular.woff2") format("woff2"), url("../fonts/MrDafoe/mr-dafoe-v5-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /** * @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 { 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, table.table thead th { 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; } } .primary-color { color: #fff; } .italic, dl dd { font-style: italic; } .underline { text-decoration: underline; } .strike { text-decoration: line-through; } .thin { font-weight: 100; } .light { font-weight: 300; } .regular { font-weight: 300; } .medium { font-weight: 500; } .sbold { font-weight: 500; } .bold, table.table thead th, dl dt, strong { font-weight: 500; } .ubold { font-weight: 700; } /* * @subsection Typography */ h1, .heading-1 { font-size: 2rem; } h2, .heading-2 { font-size: 1.5rem; } h3, .heading-3 { font-size: 1.17rem; line-height: 2rem; } h4, .heading-4 { font-size: 1rem; font-weight: 600; } h5, .heading-5 { font-size: .83rem; } h6, .heading-6 { font-size: .67rem; } a { color: #999; cursor-default: pointer; cursor-alt: pointer; transition: .2s all ease; } a:hover { color: #191919; } a:active { color: #191919; } a:focus { color: #191919; } .sidebar a { color: #999; } .sidebar a:hover { color: #fff; } .sidebar a:active { color: #fff; } .sidebar a:focus { color: #fff; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .heading-1 a, .heading-2 a, .heading-3 a, .heading-4 a, .heading-5 a, .heading-6 a { color: #999; cursor-default: pointer; cursor-alt: pointer; } h1 a:hover, h2 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, .heading-4 a:hover, .heading-5 a:hover, .heading-6 a:hover { color: #191919; } h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active, .heading-1 a:active, .heading-2 a:active, .heading-3 a:active, .heading-4 a:active, .heading-5 a:active, .heading-6 a:active { color: #191919; } h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus, .heading-1 a:focus, .heading-2 a:focus, .heading-3 a:focus, .heading-4 a:focus, .heading-5 a:focus, .heading-6 a:focus { color: #191919; } p { margin-bottom: 1rem; } .contact-info a { color: #fff; } .contact-info a:hover { color: #191919; } mark { color: #FFF; background: #fff; } em { color: #fff; } small, .small { font-size: .8em; } .big { font-size: 1.2em; } pre { white-space: normal; } button, input[type='button'] { transition: .2s all ease; } h1, .heading-1 { margin-top: 0; margin-bottom: 0; font-weight: 300; } h2, .heading-2 { margin-top: 0; margin-bottom: 0; font-weight: 300; } h3, .heading-3 { margin-top: 0; margin-bottom: 0; font-weight: 300; } h4, .heading-4 { margin-top: 0; margin-bottom: 0; font-weight: 300; } h5, .heading-5 { margin-top: 0; margin-bottom: 0; font-weight: 300; } h6, .heading-6 { margin-top: 0; margin-bottom: 0; font-weight: 300; } h1, .heading-1 { font-size: 38px; line-height: 47px; text-transform: uppercase; } h2, .heading-2, .table-caption, .form .legend, form .legend, .form .admin__legend, .section-title h4 { font-size: 24px; line-height: 24px; } .column.main .block-title [aria-level="2"] { font-size: 22px; font-weight: 300; } h3, .heading-3, [aria-level="3"] { font-size: 16px; line-height: 24px; } h4, .heading-4, .sidebar .block-title strong, .custom-page h5 { font-size: 16px; line-height: 24px; margin-bottom: 1rem; text-transform: uppercase; } h5, .heading-5 { font-size: 0.83rem; } h6, .heading-6 { font-size: 0.67rem; } .product.attribute.description h4 { font-size: 24px; line-height: 24px; text-transform: none; } .actions .action, .actions-toolbar .action, .box-actions .action, .product-item-actions .action, .checkout.methods .action { padding: 17px 30px; display: inline-block; font-size: 16px; line-height: 24px; text-transform: uppercase; font-weight: 500; text-align: "center"; } .actions-toolbar .action.primary, .actions-toolbar .primary .action, .product.actions .action.primary, .product-item-actions .action.primary, .product-add-form .action.primary, .actions .primary .action.primary, .action.primary.checkout { color: #fff; background: #191919; border: 2px solid #191919; } .actions-toolbar .action.primary:hover, .actions-toolbar .primary .action:hover, .product.actions .action.primary:hover, .product-item-actions .action.primary:hover, .product-add-form .action.primary:hover, .actions .primary .action.primary:hover, .action.primary.checkout:hover { background: #999; border: 2px solid #999; } .product-item-actions .action.primary.tocart, .product-add-form .action.primary.tocart { font-weight: 500; } .product-item-actions .action.primary.tocart span, .product-add-form .action.primary.tocart span { position: relative; padding-left: 38px; } .product-item-actions .action.primary.tocart span:before, .product-add-form .action.primary.tocart span:before { content: '\e061'; font-family: "fl-line-icon-set"; position: absolute; left: 0; top: -6px; font-size: 28px; line-height: 30px; } .actions-toolbar .action.secondary, .actions-toolbar .secondary .action, .action .secondary .action, .action.multicheckout, .box-actions .action.change-password, .order-actions-toolbar .action { background: none; border: 2px solid #191919; color: #191919; } .actions-toolbar .action.secondary:hover, .actions-toolbar .secondary .action:hover, .action .secondary .action:hover, .action.multicheckout:hover, .box-actions .action.change-password:hover, .order-actions-toolbar .action:hover { background: #999; border: 2px solid #999; color: #fff; } .actions .action.composite { padding: 0; display: inline-block; border: none; border: none; background: none; color: #fff; } .actions .action.composite > * { display: inline-block; color: inherit; border: 2px solid #fff; } .actions .action.composite .label { padding: 13px 48px; -webkit-transition: background .2s ease-out, border-color .2s ease-out; /* Safari */ transition: background .2s ease-out, border-color .2s ease-out; } .actions .action.composite .icon { border-left: none; padding: 18px; margin-left: -4px; font-size: 30px; line-height: 30px; height: 70px; -webkit-transition: background .2s ease-out, border-color .2s ease-out; /* Safari */ transition: background .2s ease-out, border-color .2s ease-out; } .actions .action.composite:hover { color: #191919; } .actions .action.composite:hover > * { border: 2px solid #fff; background: #fff; } .actions .action.composite:hover .label { border-right: none; margin-right: 2px; } .actions .action.composite:hover .icon { border-left: none; } .actions .action.icon_button { border: none; padding: 8.5px; background: transparent; font-size: 30px; } .actions .action.icon_button:hover { color: #fac58f; } .actions .action.slide-button { background: none; padding: 5px 10px; font-size: 12px; background: none; border: 2px solid #fff; color: #fff; } .actions .action.slide-button:hover { background: #fff; color: #191919; } @media (min-width: 768px) { .actions .action.slide-button { font-size: 16px; padding: 21px 48px; } } .block-actions .action.filter-clear { font-size: 14px; padding: 8px 14px; font-weight: 300; line-height: 18px; background: none; border: 2px solid #fff; color: #fff; display: inline-block; } .block-actions .action.filter-clear:hover { background: #fff; color: #191919; } .block-actions .action.filter-clear > * { color: inherit; } .actions-toolbar { display: -ms-flexbox; display: -webkit-flex; display: flex; } .actions-toolbar > div { margin-right: 1rem; margin-bottom: 1rem; } @media (min-width: 768px) { .actions-toolbar > div { margin-bottom: 0; } } .actions-toolbar > div:last-child { margin-right: 0; } .sidebar .actions-toolbar .action { font-size: 14px; padding: 8px 14px; font-weight: 300; line-height: 18px; } .sidebar .actions-toolbar .action > * { color: inherit; font-weight: inherit; } .sidebar .actions-toolbar .action.primary { background: none; border: 2px solid #fff; color: #fff; } .sidebar .actions-toolbar .action.primary:hover { background: #fff; color: #191919; } .sidebar .actions-toolbar .action.secondary, .sidebar .actions-toolbar .action.clear { background: none; border: 2px solid #999; color: #999; } .sidebar .actions-toolbar .action.secondary:hover, .sidebar .actions-toolbar .action.clear:hover { background: #fff; color: #191919; } .sidebar .product-item-actions .actions-primary .action.primary { font-size: 14px; padding: 8px 14px; font-weight: 300; line-height: 18px; background: none; border: 2px solid #fff; color: #fff; } .sidebar .product-item-actions .actions-primary .action.primary:hover { background: #fff; color: #191919; } .sidebar .product-item-actions .actions-primary .action.primary.tocart { font-weight: 500; } .sidebar .product-item-actions .actions-primary .action.primary.tocart span { padding-left: 0; } .sidebar .product-item-actions .actions-primary .action.primary.tocart span:before { display: none; } .action.delete { position: absolute; right: 0; top: -4px; padding: 5px; } .action.delete:before { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .action.delete span { display: none; } .action.edit { padding: 5px; } .action.edit:before { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .action.edit span { display: none; } .action.back { padding: 17px 30px 13px; font-size: 28px; height: 62px; } .action.back:before { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .action.back span { display: none; } .action.print { padding: 5px; } #registration .action.primary { background: none; border: 2px solid #191919; color: #191919; padding: 17px 30px; display: inline-block; font-size: 16px; line-height: 24px; text-transform: uppercase; font-weight: 500; text-align: "center"; cursor: pointer; } #registration .action.primary:hover { background: #999; border: 2px solid #999; color: #fff; } input[type="text"], .input-text, input[type="email"], input[type="password"], input[type="number"] { display: block; width: 100%; padding: 8px 1rem; font-size: 16px; line-height: 24px; background: #FFF; font-weight: 300; border: 1px solid #e5e5e5; height: 42px; } textarea, select { display: block; width: 100%; padding: 8px 1rem; font-size: 16px; line-height: 24px; background: #FFF; font-weight: 300; border: 1px solid #e5e5e5; } textarea, textarea.input-text { height: 142px; } select { height: 40px; } .radio, input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; margin: 8px 8px 0 0; line-height: 1rem; } .radio + label, input[type="checkbox"] + label, input[type="radio"] + label { line-height: 1rem; } .fieldset { outline: none; } .field { margin-bottom: 1rem; } .field.choice .label { display: inline-block; } .field.choice input { float: left; margin-right: 5px; margin-top: 2px; display: inline-block; } .field.qty .label { display: inline-block; padding-right: 1rem; } .label { line-height: 40px; } textarea { resize: vertical; } .table.totals th, .table.totals td { line-height: 40px; } .multiselect { height: auto; } .control { position: relative; } input::-webkit-input-placeholder { text-indent: 0px; transition: text-indent 0.3s ease; text-overflow: ellipsis; } input::-moz-placeholder { text-indent: 0px; transition: text-indent 0.3s ease; text-overflow: ellipsis; } input:-moz-placeholder { text-indent: 0px; transition: text-indent 0.3s ease; text-overflow: ellipsis; } input:-ms-input-placeholder { text-indent: 0px; transition: text-indent 0.3s ease; text-overflow: ellipsis; } input:focus::-webkit-input-placeholder { text-indent: -500px; transition: text-indent 0.3s ease; } input:focus::-moz-placeholder { text-indent: -500px; transition: text-indent 0.3s ease; } input:focus:-moz-placeholder { text-indent: -500px; transition: text-indent 0.3s ease; } input:focus:-ms-input-placeholder { text-indent: -500px; transition: text-indent 0.3s ease; } .form-inline { display: -ms-flexbox; display: -webkit-flex; display: flex; line-height: 40px; margin-left: 15px; } .form-inline > * { margin: 0 15px; } .page-wrapper .field-tooltip._active .field-tooltip-action:before { color: #999; } table.table { width: 100%; border-collapse: inherit; } table.table tr.row { display: table-row; margin: 0; } table.table tr.row .col { padding-right: 0; padding-right: 0; } table.table thead th { border-bottom: solid 1px #dadada; } table.table th, table.table td { padding: 10px; } table.table th:first-child, table.table td:first-child { padding-left: 0; } @media (max-width: 768px) { table.table th { display: none; } table.table td { width: 100%; padding: 10px 0; display: block; } table.table td:before { font-weight: bold; display: block; border-bottom: solid 1px #dadada; content: attr(data-th); margin-bottom: 10px; } } /* * @section Tables * @description This section holds specific style for Tables */ table.table-bordered { border-top: 2px solid #dadada; border-left: 1px solid #dadada; } table.table-bordered th, table.table-bordered td { border-right: 1px solid #dadada; border-bottom: 1px solid #dadada; } table.data-table { width: 100%; } table.data-table th, table.data-table td { padding: 1rem; vertical-align: middle; } table.data-table th { background: #f0f0f0; text-transform: uppercase; color: #000; } table .table-caption { margin-bottom: 1rem; color: #191919; } dl dd { padding-left: 2rem; } 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 { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .modal-custom .action-close:hover:before, .modal-popup .action-close:hover:before, .modal-slide .action-close:hover:before { opacity: 0.5; } .modal-popup .modal-header .action-close { display: inline-block; } .modal-popup .modal-header .action-close span { display: none; } .modal-footer { text-align: right; } .modal-footer button { display: inline-block; padding: 17px 30px; display: inline-block; font-size: 16px; line-height: 24px; text-transform: uppercase; font-weight: 500; text-align: "center"; color: #fff; background: #191919; border: 2px solid #191919; } .modal-footer button:hover { background: #999; border: 2px solid #999; } .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; box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.35); 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(110%); transform: translateX(110%); 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; text-align: right; } .modal-slide._inner-scroll .modal-content { overflow-y: auto; } .modal-slide._inner-scroll .modal-footer { margin-top: auto; } .modal-slide .modal-header { padding-bottom: 10px; padding-top: 10px; text-align: right; } .modal-slide .modal-header .action-close { display: inline-block; } .modal-slide .modal-header .action-close span { display: none; } aside.modal-slide .modal-inner-wrap { background: #191919; } .rd-navbar-fixed-linked aside.modal-slide { padding-top: 56px; } .rd-navbar-static-linked aside.modal-slide { padding-top: 100px; } .modal-popup { text-align: center; 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(-400%); transform: translateY(-400%); transition-duration: .2s; -webkit-transition-property: -webkit-transform, visibility; transition-property: transform, visibility; transition-timing-function: ease; display: flex; flex-direction: column; width: 95%; } @media (min-width: 992px) { .modal-popup .modal-inner-wrap { 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-content { position: relative; } .modal-popup .modal-content .action.print { position: absolute; left: 10px; top: 10px; z-index: 20; } .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: center; } .modal-popup.confirm { text-align: center; } .modal-popup.confirm .modal-inner-wrap { left: 0; width: 90%; } @media (min-width: 992px) { .modal-popup.confirm .modal-inner-wrap { width: 50rem; left: 50%; margin-left: -25rem; } } .modal-popup.confirm .modal-footer { text-align: center; } .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; } .modal-popup .table.table { display: table; } .modal-popup .table.table td { display: table-cell; } .modal-popup .table-wrapper.comparison { margin-bottom: 3rem; } .modal-popup .table-comparison .cell { padding: 0 .5rem; } .modal-popup .table-comparison .cell.label { text-align: right; } @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; box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.35); 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(110%); transform: translateX(110%); 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; text-align: right; } .custom-slide._inner-scroll .modal-content { overflow-y: auto; } .custom-slide._inner-scroll .modal-footer { margin-top: auto; } .custom-slide .modal-header { padding-bottom: 10px; padding-top: 10px; text-align: right; } .custom-slide .modal-header .action-close { display: inline-block; } .custom-slide .modal-header .action-close span { display: none; } .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; width: 100vw; } } @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; box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.35); 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(-400%); transform: translateY(-400%); transition-duration: .2s; -webkit-transition-property: -webkit-transform, visibility; transition-property: transform, visibility; transition-timing-function: ease; display: flex; flex-direction: column; width: 95%; } } @media (min-width: 769px) and (min-width: 992px) { .checkout-container .authentication-dropdown .modal-inner-wrap { width: 75%; } } @media (min-width: 769px) { .checkout-container .authentication-dropdown .modal-inner-wrap { margin: 0; width: 100%; } } .data.items { position: relative; } .data.items .title { float: left; width: auto; height: 24px; margin-right: 1rem; } .data.items .content { box-sizing: border-box; float: right; margin-left: -100%; width: 100%; margin-top: 24px; padding-top: 1rem; display: none; } .data.items .content.active { display: block; } .data.items .content[role="tabpanel"] { display: block; } .page-messages { margin-bottom: 2rem; position: relative; } .page-messages > .container-fluid { max-width: 95%; } @media (min-width: 768px) { .page-messages > .container-fluid { position: fixed; z-index: 999; right: 1rem; } } .column.main > .message { margin-left: 15px; margin-right: 15px; } @media (min-width: 768px) { .rd-navbar-fixed-linked .page-messages > .container-fluid { top: 75px; max-width: 65%; } } @media (min-width: 768px) { .rd-navbar-static-linked .page-messages > .container-fluid { top: 120px; } } .message { padding: 1rem; border: 1px solid transparent; border-radius: 2px; margin: 1rem 0; } .message-info, .message-notice, .message.notice, .message.info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .message-warning, .message.warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .message-error, .message.error { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .message-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } div.mage-error { color: #a94442; background-color: #f2dede; border-color: #ebccd1; padding: .5rem 1rem; border-radius: 2px; } .control, .swatch-attribute { position: relative; } .control div.mage-error, .swatch-attribute div.mage-error { margin-top: 5px; position: absolute; right: 0; top: 100%; min-width: 200px; z-index: 45; } @media (min-width: 480px) { .control div.mage-error, .swatch-attribute div.mage-error { min-width: 300px; } } /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } /* * Core Owl Carousel CSS File */ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } /* * Core Owl Carousel CSS File */ .owl-carousel .owl-controls .owl-nav .owl-prev, .owl-carousel .owl-controls .owl-nav .owl-next, .owl-carousel .owl-controls .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-controls { position: absolute; top: -50px; right: 0px; } .owl-controls .owl-prev { display: inline-block; } .owl-controls .owl-prev:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .owl-controls .owl-next { display: inline-block; } .owl-controls .owl-next:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .owl-controls .owl-prev, .owl-controls .owl-next { padding: 0 7px; cursor: pointer; } .owl-controls .owl-prev:before, .owl-controls .owl-next:before { font-size: 36px; color: #191919; transition: 0.2s 0.3s ease ease-out; } .owl-controls .owl-prev:hover:before, .owl-controls .owl-next:hover:before { color: #fac58f; } /***/ .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel .owl-refresh .owl-item { display: none; } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-item img { display: block; width: 100%; max-width: none; -webkit-transform-style: preserve-3d; } .owl-carousel.owl-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; } .owl-carousel .owl-grab { cursor: move; cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-item img { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transition: scale 100ms ease; -moz-transition: scale 100ms ease; -ms-transition: scale 100ms ease; -o-transition: scale 100ms ease; transition: scale 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -webkit-transition: scale(1.3, 1.3); -moz-transition: scale(1.3, 1.3); -ms-transition: scale(1.3, 1.3); -o-transition: scale(1.3, 1.3); transition: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; -webkit-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; -ms-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; } [role="tablist"] [role="tab"] { position: relative; cursor: pointer; outline: none; margin-bottom: 1rem; display: inline-block; padding-right: 1rem; } [role="tablist"] [role="tab"]:before { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } [role="tablist"] [role="tab"][aria-selected="true"]:before { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } [role="tablist"] [role="tab"]:before { position: absolute; right: 0; top: 0; line-height: indent; } [role="tablist"] [role="tabpanel"] { margin-bottom: 1rem; } .block[role="tablist"] .title[role="tab"] { display: block; } .data.items { position: relative; } .data.items .tab-titles { margin-bottom: 1rem; } .data.items .title { display: block; margin-right: 1rem; } .data.items .title.active a { color: #333; } .data.items .title:before { display: none; } .data.items .content { box-sizing: border-box; float: right; margin-left: -100%; width: 100%; padding-top: 1rem; display: none; } .data.items .content.active { display: block; } .data.items .content[role="tabpanel"] { display: block; } @media (min-width: 768px) { .data.items .title { display: inline-block; } } /************************** * * GENERAL * **************************/ .camera_wrap a, .camera_wrap img, .camera_wrap ol, .camera_wrap ul, .camera_wrap li, .camera_wrap table, .camera_wrap tbody, .camera_wrap tfoot, .camera_wrap thead, .camera_wrap tr, .camera_wrap th, .camera_wrap td .camera_thumbs_wrap a, .camera_thumbs_wrap img, .camera_thumbs_wrap ol, .camera_thumbs_wrap ul, .camera_thumbs_wrap li, .camera_thumbs_wrap table, .camera_thumbs_wrap tbody, .camera_thumbs_wrap tfoot, .camera_thumbs_wrap thead, .camera_thumbs_wrap tr, .camera_thumbs_wrap th, .camera_thumbs_wrap td { background: none; border: 0; font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; list-style: none; } .camera_wrap { direction: ltr; display: none; float: none; position: relative; z-index: 0; min-height: 200px; } .camera_wrap img { max-width: none !important; } .camera_fakehover { height: 100%; min-height: 60px; position: relative; width: 100%; z-index: 1; } .camera_wrap { width: 100%; } .camera_src { display: none; } .cameraCont, .cameraContents { height: 100%; position: relative; width: 100%; z-index: 1; } .cameraSlide { bottom: 0; left: 0; position: absolute; right: 0; top: 0; width: 100%; } .cameraContent { bottom: 0; display: none; left: 0; position: absolute; right: 0; top: 0; width: 100%; } .camera_target { bottom: 0; height: 100%; left: 0; overflow: hidden; position: absolute; right: 0; text-align: left; top: 0; width: 100%; z-index: 0; } .camera_overlayer { bottom: 0; height: 100%; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; width: 100%; z-index: 0; } .camera_target_content { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; z-index: 2; } .camera_target_content .camera_link { display: block; height: 100%; text-decoration: none; } .camera_loader { width: 38px; height: 38px; left: 50%; overflow: hidden; position: absolute; margin: -19px 0 0 -19px; top: 50%; z-index: 3; } .camera_bar { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; z-index: 3; } .camera_thumbs_wrap.camera_left .camera_bar, .camera_thumbs_wrap.camera_right .camera_bar { height: 100%; position: absolute; width: auto; } .camera_thumbs_wrap.camera_bottom .camera_bar, .camera_thumbs_wrap.camera_top .camera_bar { height: auto; position: absolute; width: 100%; } .camera_nav_cont { height: 65px; overflow: hidden; position: absolute; right: 9px; top: 15px; width: 120px; z-index: 4; } .camera_caption { bottom: 0; display: block; position: absolute; width: 100%; } .camera_caption > div { padding: 10px 20px; } .camerarelative { overflow: hidden; position: relative; } .imgFake { cursor: pointer; } .camera_prevThumbs { bottom: 4px; cursor: pointer; left: 0; position: absolute; top: 4px; visibility: hidden; width: 30px; z-index: 10; } .camera_prevThumbs div { display: block; height: 40px; margin-top: -20px; position: absolute; top: 50%; width: 30px; } .camera_nextThumbs { bottom: 4px; cursor: pointer; position: absolute; right: 0; top: 4px; visibility: hidden; width: 30px; z-index: 10; } .camera_nextThumbs div { display: block; height: 40px; margin-top: -20px; position: absolute; top: 50%; width: 30px; } .camera_command_wrap .hideNav { display: none; } .camera_command_wrap { left: 0; position: relative; right: 0; z-index: 4; } .camera_wrap .camera_pag .camera_pag_ul { list-style: none; margin: 0; padding: 0; text-align: right; } .camera_wrap .camera_pag .camera_pag_ul li { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; cursor: pointer; display: inline-block; height: 16px; margin: 20px 5px; position: relative; text-align: left; text-indent: 9999px; width: 16px; } .camera_commands_emboss .camera_pag .camera_pag_ul li { -moz-box-shadow: 0px 1px 0px white, inset 0px 1px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 1px 0px white, inset 0px 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 0px white, inset 0px 1px 1px rgba(0, 0, 0, 0.2); } .camera_wrap .camera_pag .camera_pag_ul li > span { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; height: 8px; left: 4px; overflow: hidden; position: absolute; top: 4px; width: 8px; } .camera_commands_emboss .camera_pag .camera_pag_ul li:hover > span { -moz-box-shadow: 0px 1px 0px white, inset 0px 1px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 1px 0px white, inset 0px 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 0px white, inset 0px 1px 1px rgba(0, 0, 0, 0.2); } .camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span { -moz-box-shadow: 0; -webkit-box-shadow: 0; box-shadow: 0; } .camera_pag_ul li img { display: none; position: absolute; } .camera_pag_ul .thumb_arrow { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid; top: 0; left: 50%; margin-left: -4px; position: absolute; } .camera_prev, .camera_next, .camera_commands { cursor: pointer; height: 40px; margin-top: -20px; position: absolute; top: 50%; width: 40px; z-index: 2; text-align: center; color: #fff; } .camera_prev span, .camera_next span, .camera_commands span { font-family: 'Material Icons'; font-weight: 400; font-style: normal; font-size: 29px; line-height: 40px; background: rgba(0, 0, 0, 0.5); display: block; height: 40px; width: 40px; } .camera_prev:hover span, .camera_next:hover span, .camera_commands:hover span { color: #fac58f; } .camera_prev { left: 0; } .camera_prev > span:before { content: '\e5cb'; } .camera_next { right: 0; } .camera_next > span:before { content: '\e5cc'; } .camera_commands { right: 41px; } .camera_commands > div { font-family: 'Material Icons'; font-weight: 400; font-style: normal; font-size: 29px; line-height: 40px; background: rgba(0, 0, 0, 0.5); } .camera_commands > .camera_play { height: 40px; width: 40px; } .camera_commands > .camera_play:before { content: '\e037'; } .camera_commands > .camera_stop { display: block; height: 40px; width: 40px; } .camera_commands > .camera_stop:before { content: '\e047'; } .camera_wrap .camera_pag .camera_pag_ul li { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; cursor: pointer; display: inline-block; height: 16px; margin: 20px 5px; position: relative; text-indent: 9999px; width: 16px; } .camera_thumbs_cont { -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow: hidden; position: relative; width: 100%; } .camera_commands_emboss .camera_thumbs_cont { -moz-box-shadow: 0px 1px 0px white, inset 0px 1px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 1px 0px white, inset 0px 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 0px white, inset 0px 1px 1px rgba(0, 0, 0, 0.2); } .camera_thumbs_cont > div { float: left; width: 100%; } .camera_thumbs_cont ul { overflow: hidden; padding: 3px 4px 8px; position: relative; text-align: center; } .camera_thumbs_cont ul li { display: inline; padding: 0 4px; } .camera_thumbs_cont ul li > img { border: 1px solid; cursor: pointer; margin-top: 5px; vertical-align: bottom; } .camera_clear { display: block; clear: both; } .showIt { display: none; } .camera_clear { clear: both; display: block; height: 1px; margin: -1px 0 25px; position: relative; } .slider-content { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-transform: uppercase; line-height: 1em; color: #fff; font-weight: 300; height: 100%; } .slider-content > span { line-height: 1em; text-align: center; } .slider-content .actions { padding-top: 3.2%; text-align: center; margin-bottom: 2%; } .slide-1 .line1 { font-size: 45px; font-weight: 100; } .slide-1 .line2 { font-size: 16px; font-weight: 500; letter-spacing: .2em; } .slide-1 .line3 { font-size: 25px; font-weight: 100; } @media (min-width: 480px) { .slide-1 .line1 { font-size: 65px; } .slide-1 .line2 { font-size: 16px; } .slide-1 .line3 { font-size: 35px; } } @media (min-width: 768px) { .slide-1 .line1 { font-size: 125px; } .slide-1 .line2 { font-size: 24px; line-height: 39px; } .slide-1 .line3 { font-size: 35px; } } @media (min-width: 992px) { .slide-1 .line1 { font-size: 180px; } .slide-1 .line3 { font-size: 80px; } } @media (min-width: 1200px) { .slide-1 .line1 { font-size: 230px; line-height: 200px; letter-spacing: 45px; } .slide-1 .line3 { font-size: 110px; } } .slide-2 .line1 { font-size: 16px; font-weight: 300; } .slide-2 .line2 { font-size: 30px; font-weight: 100; } @media (min-width: 480px) { .slide-2 .line1 { font-size: 20px; } .slide-2 .line2 { font-size: 45px; } } @media (min-width: 768px) { .slide-2 .line1 { font-size: 24px; line-height: 65px; letter-spacing: 5px; } .slide-2 .line2 { font-size: 65px; } } @media (min-width: 992px) { .slide-2 .line2 { font-size: 110px; line-height: 115px; } } .slide-3 .line1 { font-size: 35px; font-weight: 100; } .slide-3 .line2 { font-size: 20px; font-weight: 100; } @media (min-width: 480px) { .slide-3 .line1 { font-size: 45px; } .slide-3 .line2 { font-size: 20px; } } @media (min-width: 768px) { .slide-3 .line1 { font-size: 75px; } .slide-3 .line2 { font-size: 40px; } } @media (min-width: 992px) { .slide-3 .line1 { font-size: 100px; } .slide-3 .line2 { font-size: 80px; } } @media (min-width: 1200px) { .slide-3 .line1 { font-size: 150px; line-height: 150px; } .slide-3 .line2 { font-size: 110px; line-height: 125px; } } .swiper-container { margin: 0 auto; position: relative; overflow: hidden; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-no-flexbox .swiper-slide { float: left; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); -moz-transform: translate3d(0px, 0, 0); -o-transform: translate(0px, 0px); -ms-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; -webkit-transition-property: -webkit-transform, height; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform, height; } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } /* IE10 Windows Phone 8 Fixes */ .swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; touch-action: pan-x; } /* Arrows */ .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: 45px; height: 45px; margin-top: -22.5px; z-index: 10; cursor: pointer; background: #fff; color: #191919; text-align: center; } .swiper-button-prev:hover, .swiper-button-next:hover { color: #fff; background: #191919; } .swiper-button-prev:before, .swiper-button-next:before { height: 45px; line-height: 45px; font-size: 31px; transition: all .2s ease; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev { left: 0; } .swiper-button-prev:before { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .swiper-button-next { right: 0; } .swiper-button-next:before { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } /* Pagination Styles */ .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-white .swiper-pagination-bullet { background: #fff; } .swiper-pagination-bullet-active { opacity: 1; background: #191919; } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff; } .swiper-pagination-black .swiper-pagination-bullet-active { background: #191919; } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0px, -50%, 0); -moz-transform: translate3d(0px, -50%, 0); -o-transform: translate(0px, -50%); -ms-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 5px 0; display: block; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; } /* Progress */ .swiper-pagination-progress { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progress .swiper-pagination-progressbar { background: #191919; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; -moz-transform-origin: left top; -ms-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar { -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progress { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progress { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-progress.swiper-pagination-white { background: #999; } .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar { background: #fff; } .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar { background: #191919; } /* 3D Container */ .swiper-container-3d { -webkit-perspective: 1200px; -moz-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); /* Safari 4+, Chrome */ background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 3.6-15 */ background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Opera 11.10-12.00 */ background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); /* Safari 4+, Chrome */ background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 3.6-15 */ background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Opera 11.10-12.00 */ background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); /* Safari 4+, Chrome */ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 3.6-15 */ background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Opera 11.10-12.00 */ background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); /* Safari 4+, Chrome */ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Chrome 10+, Safari 5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 3.6-15 */ background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Opera 11.10-12.00 */ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } /* Coverflow */ .swiper-container-coverflow .swiper-wrapper, .swiper-container-flip .swiper-wrapper { /* Windows 8 IE 10 fix */ -ms-perspective: 1200px; } /* Cube + Flip */ .swiper-container-cube, .swiper-container-flip { overflow: visible; } .swiper-container-cube .swiper-slide, .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-cube .swiper-slide .swiper-slide, .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube .swiper-slide-active, .swiper-container-flip .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } /* Cube */ .swiper-container-cube .swiper-slide { visibility: hidden; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } /* Fade */ .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } /* Preloader */ .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -moz-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after { display: block; content: ""; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; } .swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; filter: alpha(opacity=80); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; filter: alpha(opacity=65); padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; filter: alpha(opacity=65); margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after, .mfp-arrow .mfp-a { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before, .mfp-arrow .mfp-b { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #fff; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } .mfp-ie7 .mfp-img { padding: 0; } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; } .mfp-ie7 .mfp-container { padding: 0; } .mfp-ie7 .mfp-content { padding-top: 44px; } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; } /* * @section Custom pages * @description This section holds specific style for Custom pages */ .section-title h4 { margin-bottom: 2rem; } dl.custom-page dt { margin-bottom: 1rem; } dl.custom-page dd { font-style: normal; padding-left: 0; margin-bottom: 2rem; } dl.custom-page dd:last-child { margin-bottom: 0; } .search-term-popular ul.search-terms:before, .search-term-popular ul.search-terms:after { display: table; content: ""; line-height: 0; } .search-term-popular ul.search-terms:after { clear: both; } .search-term-popular ul.search-terms li { float: left; margin-right: 15px; font-size: 24px; } .skills { color: #191919; } .skills .value { font-size: 56px; line-height: 1.519em; font-weight: 700; } .skills .term { font-size: 16px; text-transform: uppercase; } .big-circle-icon { font-size: 64px; line-height: 64px; } @media (max-width: 767px) { .cms-about-us .big-circle-icon { margin-top: 2rem; } } @media (max-width: 767px) { .team > div[class*='col-'] { margin-bottom: 2rem; } } .team figure { margin-bottom: 1rem; } .team figure:hover img { opacity: .8; } .cms-customer-service .terms-conditions h4.small-icon:before { padding-right: 15px; vertical-align: bottom; } .custom-page section { margin-bottom: 4rem; } .custom-page .section-title { margin-bottom: 1rem; } .custom-page.about .events-section { margin-top: 4rem; } .custom-page.about .intro-section { margin-bottom: 0; } /* * @section Testimonials * @description This section holds specific style for Testimonials */ .testimonials { padding: 2rem 0 4rem; overflow: hidden; position: relative; margin-bottom: 0; } .testimonials blockquote { padding: 10px 20px; } .testimonials blockquote cite { display: block; text-align: center; margin: 0 auto 0.5em; font-weight: 500; text-transform: uppercase; color: #191919; } .testimonials blockquote q { display: block; padding: 0 5%; } .cms-home .grid-main { padding: 0; } .google_map { margin-bottom: 3rem; } .google_map iframe { width: 100%; } .privacy-page dd { margin-bottom: 20px; } .block.newsletter { text-align: center; } .block.newsletter .title { display: none; } .field.newsletter { display: block; margin-bottom: 0; } @media (min-width: 768px) { .field.newsletter { display: inline-block; } } @media (min-width: 1200px) { .field.newsletter { width: 44%; } } form.subscribe { position: relative; text-align: left; } form.subscribe .label { text-transform: uppercase; color: #fff; font-size: 23px; line-height: 40px; padding: 0; display: block; text-align: center; } @media (min-width: 768px) { form.subscribe .label { display: inline; text-align: left; } } form.subscribe .control { display: inline-block; width: 100%; padding-right: 50px; } form.subscribe .control input[type="email"] { background: #191919; padding-left: 0; padding-right: 0; border: 1px solid #191919; } @media (min-width: 768px) { form.subscribe .control { width: auto; padding-right: 0; padding-left: 10px; } } form.subscribe .actions { display: inline-block; position: absolute; right: 0; bottom: -5px; } @media (min-width: 768px) { form.subscribe { text-align: center; } form.subscribe .actions { position: static; } } form.subscribe .action.subscribe { color: #fff; } form.subscribe .action.subscribe:hover { color: #999; } /* * @subsection RD Navbar * * @description Describes style declarations for RD Navbar extension * * @author Evgeniy Gusarov * @link https://ua.linkedin.com/pub/evgeniy-gusarov/8a/a40/54a * @version 2.0.0 */ /* * 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 */ .rd-navbar-wrap, .rd-navbar-static.rd-navbar--is-clone, .rd-navbar-fixed .rd-navbar-top-links-wrap, .rd-navbar-static .rd-navbar-dropdown, .rd-navbar-static .tm-megamenu, .rd-navbar-fixed .rd-navbar-nav-wrap, .rd-navbar-fixed .rd-navbar-submenu, .rd-navbar-fixed .rd-navbar-submenu-toggle, #top-cart-btn-checkout, .rd-navbar-cart, .rd-navbar-fixed .rd-navbar-cart-floating, .rd-navbar-fixed .rd-navbar-cart-floating:before, .rd-navbar-fixed .rd-navbar-cart-floating #top-cart-btn-checkout, .rd-navbar-fixed .rd-navbar-cart-fixed, .rd-navbar-fixed .rd-navbar-search .form-group, .rd-navbar-fixed .rd-navbar-collapse, .rd-navbar-fixed .rd-navbar-collapse:before { transition: 0.3s all cubic-bezier(0.785, 0.135, 0.15, 0.86); } .rd-navbar, .rd-navbar.rd-navbar--is-clone { display: none; } .rd-navbar-fixed, .rd-navbar-static, .rd-navbar-fullwidth, .rd-navbar-sidebar { display: block; } .rd-navbar--no-transition, .rd-navbar--no-transition * { transition: none !important; } .rd-navbar-fixed .block, .rd-navbar-static .block, .rd-navbar-fullwidth .block, .rd-navbar-sidebar .block { margin: 0; } .rd-navbar-outer { color: #191919; background: #999; } .rd-navbar-static { background: #fff; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; position: relative; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15); } .rd-navbar-static .rd-navbar-nav-wrap, .rd-navbar-static .rd-navbar-search-wrap { display: block; vertical-align: middle; } .rd-navbar-static .navigation { -webkit-flex-grow: 2; -ms-flex-positive: 2; flex-grow: 2; text-align: center; } .rd-navbar-static .navigation { margin: 33px 0 0; } .rd-navbar-static.rd-navbar--is-clone { position: fixed; top: 0; left: 0; right: 0; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transform: translateY(-105%); transform: translateY(-105%); z-index: 20; } .rd-navbar-static.rd-navbar--is-clone .rd-navbar-panel { display: none; } .rd-navbar-static.rd-navbar--is-clone.rd-navbar--is-stuck { -webkit-transform: translateY(0); transform: translateY(0); box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15); } .rd-navbar-static.rd-navbar--is-stuck { position: fixed; left: 0; top: 0; right: 0; z-index: 20; height: 50px; } .rd-navbar-static.rd-navbar--is-stuck .logo { margin: 5px 5px 5px 32px; } .rd-navbar-static.rd-navbar--is-stuck .logo img { width: auto; height: 40px; } .rd-navbar-static.rd-navbar--is-stuck .navigation { margin: 5px; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-top-links-wrap .rd-navbar-top-links-toggle-wrap { margin-top: 6px; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-cart-toggle { padding: 10px; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-cart-toggle .counter { top: 1px; right: 6px; font-size: 14px; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-panel { display: none; } .rd-navbar-top-links-wrap { position: relative; margin-left: 20px; } .rd-navbar-top-links-wrap .rd-navbar-top-links-toggle-wrap { margin: 32px 0 0; } .rd-navbar-top-links-wrap .rd-navbar-top-links-toggle-wrap .icon { font-size: 23px; line-height: 40px; height: 40px; font-family: 'Material Icons'; font-weight: 400; font-style: normal; } .rd-navbar-top-links-wrap .rd-navbar-top-links-toggle-wrap .icon:before { content: '\e3c7'; } .rd-navbar-top-links-wrap .rd-navbar-top-links-toggle:hover { color: #999; } .rd-navbar-top-links-container { position: absolute; top: 100%; right: -32px; display: none; width: 220px; padding-bottom: 12px; background: #fff; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1); } .rd-navbar-top-links-container.active { display: block; } .rd-navbar-top-links-container .links { padding: 16px 32px; text-align: right; border-top: none; margin-bottom: 20px; border-bottom: 1px solid #e5e5e5; } .rd-navbar-top-links-container .links li { font-size: 16px; line-height: 20px; font-weight: 300; display: block; margin-left: 0; } .rd-navbar-top-links-container .links li a { padding: 7px 0 8px; display: inline-block; } .rd-navbar-top-links-container .links li a.no-display { display: none; } .rd-navbar-top-links-container .links li a:hover { color: #333; } .rd-navbar-top-links-container .switcher { margin: 0 32px; font-size: 16px; line-height: 35px; text-align: right; } .rd-navbar-top-links-container .switcher .toggle:after { content: '\e5c5'; font-family: 'Material Icons'; font-size: 28px; color: #c1c1c1; } .rd-navbar-top-links-container .switcher .toggle:hover, .rd-navbar-top-links-container .switcher .toggle.active { color: #191919; } .rd-navbar-top-links-container .switcher .toggle:hover:after, .rd-navbar-top-links-container .switcher .toggle.active:after { color: #191919; } .rd-navbar-top-links-container .switcher .dropdown .mage-dropdown-dialog { width: 220px; left: -32px; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1); border-bottom: 1px solid #e5e5e5; padding: 0 0 16px; } .rd-navbar-top-links-container .switcher .dropdown .mage-dropdown-dialog a { margin: 0; padding: 0; font-weight: 300; color: #999; display: inline-block; } .rd-navbar-top-links-container .switcher .dropdown .mage-dropdown-dialog a:hover { color: #333; background: none; } .rd-navbar-top-links-container .switcher .switcher-dropdown .switcher-option { margin: 0 32px; } .rd-navbar-top-links-container .actions .action { padding: 0; background: none; color: #999; text-transform: none; } .rd-navbar-top-links-container .actions .action strong { font-weight: 300; } .rd-navbar-top-links-container .actions .action:focus { outline: none; } .rd-navbar-fixed .rd-navbar-top-links-wrap { display: block; position: fixed; top: 0; right: 56px; z-index: 17; overflow: visible; width: 56px; height: 56px; } .rd-navbar-fixed .rd-navbar-top-links-wrap .icon { font-size: 28px; line-height: 40px; } .rd-navbar-fixed .rd-navbar-top-links-wrap .icon:before { content: '\e5d4'; } .rd-navbar-fixed .rd-navbar-top-links-toggle-wrap { margin: 0; } .rd-navbar-fixed .rd-navbar-top-links-toggle { padding: 8px; display: block; } /* * @subsection RD Navbar Toggles * * @description Describes style declarations for RD Navbar toggles */ /* * @subsection RD Navbar Toggles * * @description Describes style declarations for RD Navbar navigation */ .rd-navbar-nav, .rd-navbar-toggle { display: none; } .rd-navbar-static .rd-navbar-dropdown, .rd-navbar-static .tm-megamenu { position: absolute; color: #999; background: #191919; opacity: 0; visibility: hidden; margin-top: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } .rd-navbar-static .rd-navbar-nav { text-align: center; display: block; } .rd-navbar-static .rd-navbar-nav li.level-top { font-size: 16px; line-height: 30px; text-transform: uppercase; margin: 7px 10px; display: inline-block; } @media (min-width: 992px) { .rd-navbar-static .rd-navbar-nav li.level-top { font-size: 18px; margin: 7px 22px; } } .rd-navbar-static .rd-navbar-nav li.level-top.active a.level-top, .rd-navbar-static .rd-navbar-nav li.level-top.opened a.level-top, .rd-navbar-static .rd-navbar-nav li.level-top.focus a.level-top, .rd-navbar-static .rd-navbar-nav li.level-top.has-active a.level-top { color: #333; } .rd-navbar-static .rd-navbar-nav a.level-top { color: #999; font-weight: 300; padding: 0; position: relative; } .rd-navbar-static .rd-navbar-nav a.level-top:hover, .rd-navbar-static .rd-navbar-nav a.level-top.active, .rd-navbar-static .rd-navbar-nav a.level-top.active, .rd-navbar-static .rd-navbar-nav a.level-top.opened, .rd-navbar-static .rd-navbar-nav a.level-top.focus { color: #333; } .rd-navbar-static .rd-navbar-cart-wrap { display: block; } .rd-navbar-static.rd-navbar--is-stuck .tm-megamenu { margin-top: 0; } .rd-navbar-static .rd-navbar-label { position: absolute; right: -20px; top: -12px; font-size: .6rem; text-transform: uppercase; background: #fac58f; letter-spacing: 1px; color: #fff; line-height: 1rem; padding: 0 4px; } .rd-navbar-fixed .tm-megamenu { margin-top: 0; } .rd-navbar-fixed .rd-navbar-toggle { display: block; display: inline-block; position: relative; width: 40px; height: 40px; font-size: 28px; line-height: 40px; text-align: center; cursor: pointer; color: #191919; } .rd-navbar-fixed .rd-navbar-toggle span { position: relative; display: block; margin: auto; transition: .2s all ease; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .rd-navbar-fixed .rd-navbar-toggle span:before, .rd-navbar-fixed .rd-navbar-toggle span:after { -webkit-transform-origin: 2px center; transform-origin: 2px center; -webkit-transform-origin: 2px center; transform-origin: 2px center; content: ""; position: absolute; left: 0; top: -10px; transition: .2s all ease; } .rd-navbar-fixed .rd-navbar-toggle span:after { top: 10px; } .rd-navbar-fixed .rd-navbar-toggle span:after, .rd-navbar-fixed .rd-navbar-toggle span:before, .rd-navbar-fixed .rd-navbar-toggle span { width: 28px; height: 5px; background-color: #191919; backface-visibility: hidden; border-radius: 0; } .rd-navbar-fixed .rd-navbar-toggle.active span { -webkit-transform: rotate(360deg); transform: rotate(360deg); } .rd-navbar-fixed .rd-navbar-toggle.active span:before, .rd-navbar-fixed .rd-navbar-toggle.active span:after { top: 0; width: 17.5px; } .rd-navbar-fixed .rd-navbar-toggle.active span:before { -webkit-transform: rotate3d(0, 0, 1, -40deg); transform: rotate3d(0, 0, 1, -40deg); } .rd-navbar-fixed .rd-navbar-toggle.active span:after { -webkit-transform: rotate3d(0, 0, 1, 40deg); transform: rotate3d(0, 0, 1, 40deg); } .rd-navbar-fixed .rd-navbar-toggle span { height: 4px; } .rd-navbar-fixed .rd-navbar-toggle span:before, .rd-navbar-fixed .rd-navbar-toggle span:after { height: 4px; } .rd-navbar-fixed .rd-navbar-nav-wrap { position: fixed; top: -56px; left: 0; width: 232px; padding: 112px 0 56px; bottom: -56px; color: #191919; background: #fff; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25); z-index: 15; -webkit-transform: translateX(-105%); transform: translateX(-105%); } .rd-navbar-fixed .rd-navbar-nav-wrap.active { -webkit-transform: translateX(0); transform: translateX(0); } .rd-navbar-fixed .rd-navbar-nav { display: block; height: 100%; overflow: auto; font-size: 16px; line-height: 35px; text-align: left; } .rd-navbar-fixed .rd-navbar-nav:before, .rd-navbar-fixed .rd-navbar-nav:after { content: ''; display: block; height: 8px; } .rd-navbar-fixed .rd-navbar-nav li { display: block; } .rd-navbar-fixed .rd-navbar-nav li > a { display: block; padding: 0 32px 0 16px; color: #999; font-size: 16px; line-height: 35px; font-weight: 300; } .rd-navbar-fixed .rd-navbar-nav li.opened > a, .rd-navbar-fixed .rd-navbar-nav li a:hover { background: none; color: #191919; } .rd-navbar-fixed .rd-navbar-nav li.active > a { color: #191919; background: none; } .rd-navbar-fixed .rd-navbar-dropdown, .rd-navbar-fixed .tm-megamenu { display: none; } .rd-navbar-fixed .rd-navbar-submenu { position: relative; } .rd-navbar-fixed .rd-navbar-submenu.opened > .rd-navbar-dropdown, .rd-navbar-fixed .rd-navbar-submenu.opened > .tm-megamenu { display: block; } .rd-navbar-fixed .rd-navbar-submenu-toggle { position: absolute; right: 0; z-index: 999; top: -3; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #999; cursor: pointer; } .rd-navbar-fixed .rd-navbar-submenu-toggle:before { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .rd-navbar-fixed .rd-navbar-submenu-toggle:hover { color: #999; } .rd-navbar-fixed .rd-navbar-submenu.opened > .rd-navbar-submenu-toggle:before { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .rd-navbar-fixed .rd-navbar-label { display: none; } /* * @subsection RD Navbar Brand * * @description Describes style declarations for RD Navbar brand */ .rd-navbar-brand { display: none; color: #999; } .rd-navbar-static .rd-navbar-brand { display: inline-block; float: left; } .rd-navbar-static .rd-navbar-brand > * { display: inline-block; vertical-align: middle; } .rd-navbar-static .rd-navbar-brand > img { margin-right: 10px; } .rd-navbar-static .rd-navbar-brand > a { font-size: 36px; line-height: 48px; } .rd-navbar-static .rd-navbar-brand > a span { display: none; } .rd-navbar-fixed .rd-navbar-brand { display: block; text-align: left; position: fixed; top: 4px; left: 56px; right: 112px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 22px; line-height: 46px; height: 48px; z-index: 17; } .rd-navbar-fixed .rd-navbar-brand img { display: none; } .rd-navbar-fixed .rd-navbar-brand a { display: inline-block; } /* * @subsection RD Navbar Toggles * * @description Describes style declarations for RD Navbar navigation */ .rd-navbar-cart-floating { display: none; } .rd-navbar-cart-toggle { position: relative; overflow: hidden; font-weight: normal; } .rd-navbar-cart-toggle .icon { display: inline-block; position: relative; width: 40px; height: 40px; font-size: 28px; line-height: 40px; text-align: center; cursor: pointer; color: #fff; } .rd-navbar-cart-toggle .icon, .rd-navbar-cart-toggle .icon:before, .rd-navbar-cart-toggle .icon:after { transition: .2s all ease; } .rd-navbar-cart-toggle .icon:before, .rd-navbar-cart-toggle .icon:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .rd-navbar-cart-toggle .icon:before { content: ""; -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity: 1; visibility: visible; } .rd-navbar-cart-toggle .icon:after { content: ""; -webkit-transform: rotate(-90deg) scale(0); transform: rotate(-90deg) scale(0); opacity: 0; visibility: hidden; } .rd-navbar-cart-toggle.active .icon:before { opacity: 0; visibility: hidden; -webkit-transform: rotate(90deg) scale(0); transform: rotate(90deg) scale(0); } .rd-navbar-cart-toggle.active .icon:after { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity: 1; visibility: visible; } .rd-navbar-cart-toggle .icon { font-family: "fl-line-icon-set"; } .rd-navbar-cart-toggle strong { font-weight: normal; } .rd-navbar-cart-toggle .counter { font-size: 16px; color: #bdbcbc; font-weight: 300; position: absolute; top: 17px; right: 20px; } .rd-navbar-cart-toggle .counter.empty { display: none; } .rd-navbar-cart-toggle .counter-label { display: none; } .rd-navbar-cart .cart-content_main { overflow: hidden; } .showcart { color: #fff; transition: none; } .showcart:hover { color: #fff; } #top-cart-btn-checkout { position: relative; display: block; font-weight: 500; width: 100%; } .rd-navbar-cart { display: none; text-align: left; color: #191919; background: #FFF; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1); } .rd-navbar-cart .block-minicart { height: 100%; padding-top: 70px; } .rd-navbar-cart .block-minicart.empty { height: auto; } @media (min-width: 768px) { .rd-navbar-cart .block-minicart { padding-top: 0px; } } .rd-navbar-cart .actions .secondary { margin-bottom: 1rem; text-align: center; } .rd-navbar-cart .actions .action.viewcart { padding: 0; } .rd-navbar-cart .subtitle { text-transform: uppercase; font-weight: 300; display: block; padding-bottom: 1rem; } .rd-navbar-cart .block-title, .rd-navbar-cart button.close { display: none; } .rd-navbar-cart #minicart-content-wrapper { overflow: hidden; padding: 1rem; height: 100%; } .rd-navbar-cart .block-content { margin: 0; height: 100%; overflow: auto; } .rd-navbar-cart .block-content .items-total { font-size: 18px; color: #000; } .rd-navbar-cart .block-content .product-item { border-bottom: 1px solid #f5f5f5; margin: 1rem; padding-bottom: 1rem; } .rd-navbar-cart .block-content > .actions { position: relative; padding: 1rem 0; } .rd-navbar-cart .block-content > .actions .primary button, .rd-navbar-cart .block-content > .actions .primary a { display: block; width: 100%; text-align: center; } .rd-navbar-cart .block-content .subtotal { line-height: 40px; } .rd-navbar-cart .block-content .subtotal .price { font-size: 28px; color: #fac58f; } .rd-navbar-cart .minicart-items { padding-right: 0; height: auto; overflow: inherit; } .rd-navbar-cart .minicart-items .product-item-photo { display: block; text-align: center; margin-bottom: 1rem; overflow: hidden; } .rd-navbar-cart .minicart-items .product-item-details { margin-right: 30px; } .rd-navbar-cart .minicart-items .product-item-details .toggle { margin: 0; } .rd-navbar-cart .minicart-items .product-item-name { margin-bottom: 1rem; display: inline-block; } .rd-navbar-cart .minicart-items .product-item-name a { color: #191919; } .rd-navbar-cart .minicart-items .product-item-name a:hover { color: #999; } .rd-navbar-cart .minicart-items .product.actions .action { color: #191919; background: none; } .rd-navbar-cart .minicart-items .product.actions .action:hover { color: #999; background: none; } .rd-navbar-cart .minicart-items .product.actions .action.edit { position: absolute; top: 25px; right: 0; } .rd-navbar-cart:before { content: ''; position: absolute; height: 32px; left: 0; right: 0; top: 0; z-index: 1; } .rd-navbar-cart-items { max-height: 100%; height: 100%; padding: 16px 0; } .rd-navbar-cart-items::-webkit-scrollbar { width: 4px; } .rd-navbar-cart-items::-webkit-scrollbar-thumb { background: #191919; } .rd-navbar-cart .rd-navbar-cart-item__preview { border-radius: 50%; } .rd-navbar-cart .rd-navbar-cart-item { position: relative; padding: 8px 0; } .rd-navbar-cart .rd-navbar-cart-item__left, .rd-navbar-cart .rd-navbar-cart-item__body, .rd-navbar-cart .rd-navbar-cart-item__remove { position: relative; display: table-cell; } .rd-navbar-cart .rd-navbar-cart-item__left { padding: 0 16px; } .rd-navbar-cart .rd-navbar-cart-item__left img { max-width: none; } .rd-navbar-cart .rd-navbar-cart-item__body { vertical-align: middle; width: 100%; } .rd-navbar-cart .rd-navbar-cart-item__title { font-size: 16px; line-height: 26px; color: #999; } .rd-navbar-cart .rd-navbar-cart-item__counter { font-size: 14px; line-height: 1.3; } .rd-navbar-cart .rd-navbar-cart-item__remove { vertical-align: middle; width: 56px; font-size: 24px; padding: 0 16px; } .rd-navbar-cart .rd-navbar-cart-item:after { content: ''; position: absolute; bottom: 0; right: 0; left: 88px; display: block; height: 1px; background: rgba(25, 25, 25, 0.2); } .rd-navbar-cart .product.options { font-size: 14px; } .rd-navbar-cart .product.options .toggle, .rd-navbar-cart .product.options .subtitle { display: inline-block; margin-bottom: 0.5rem; } .rd-navbar-cart .product.options .label, .rd-navbar-cart .product.options .value { line-height: 20px; } .rd-navbar-cart .cart-content_bottom .actions { padding: 1rem 0; } .rd-navbar-static .rd-navbar-cart-toggle { padding: 35px 30px; background: #191919; display: inline-block; } .rd-navbar-static .rd-navbar-cart-toggle .icon { font-size: 30px; line-height: 30px; height: 30px; } .rd-navbar-static .rd-navbar-cart-toggle.active .counter-number { display: none; } .rd-navbar-static .rd-navbar-cart-wrap { position: relative; float: none; margin-left: 32px; } .rd-navbar-static .rd-navbar-cart-floating { display: block; } .rd-navbar-static .rd-navbar-cart { display: block; position: absolute; width: 320px; top: 100%; right: 0; visibility: hidden; opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); z-index: 2; } .rd-navbar-static .rd-navbar-cart.active { visibility: visible; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .rd-navbar-fixed .rd-navbar-cart { display: block; position: fixed; top: 0; right: 0; z-index: 10; opacity: 0; visibility: hidden; max-width: 84%; width: 400px; height: 100% !important; } .rd-navbar-fixed .rd-navbar-cart.active { opacity: 1; top: 0; visibility: visible; } .rd-navbar-fixed .rd-navbar-cart-floating { display: block; position: fixed; bottom: 15px; right: 15px; z-index: 20; color: #FFF; overflow: hidden; border-radius: 50%; box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.25), 0 0 8px 0 rgba(0, 0, 0, 0.15); width: 56px; height: 56px; outline: 1px solid transparent; backface-visibility: hidden; } .rd-navbar-fixed .rd-navbar-cart-floating:before { content: ''; position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; border-radius: 50%; background: #fff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .rd-navbar-fixed .rd-navbar-cart-floating #top-cart-btn-checkout { position: relative; display: block; font-size: 16px; font-weight: 500; line-height: 56px; opacity: 0; visibility: hidden; } .rd-navbar-fixed .rd-navbar-cart-floating #top-cart-btn-checkout:before { font-weight: 400; font-size: 24px; display: inline-block; vertical-align: middle; margin-right: 8px; } .rd-navbar-fixed .rd-navbar-cart-floating .rd-navbar-cart-toggle { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .rd-navbar-fixed .rd-navbar-cart-floating .rd-navbar-cart-toggle .icon { color: #FFF; height: 56px; line-height: 56px; } .rd-navbar-fixed .rd-navbar-cart-floating.active { right: 0; bottom: 0; border-radius: 0; width: 100%; } .rd-navbar-fixed .rd-navbar-cart-floating.active:before { -webkit-transform: translate(-50%, -50%) scale(20); transform: translate(-50%, -50%) scale(20); background: #2ecc71; } .rd-navbar-fixed .rd-navbar-cart-floating.active #top-cart-btn-checkout { opacity: 1; visibility: visible; } .rd-navbar-fixed .rd-navbar-cart-floating.active .rd-navbar-cart-toggle { visibility: hidden; opacity: 0; } .rd-navbar-fixed .rd-navbar-cart-fixed { display: block; position: fixed; top: 0; right: 0; z-index: 17; overflow: visible; width: 56px; height: 56px; outline: 1px solid transparent; backface-visibility: hidden; background: #191919; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle { font-size: 28px; line-height: 40px; padding: 8px; display: block; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle .icon { display: inline-block; position: relative; width: 40px; height: 40px; font-size: 28px; line-height: 40px; text-align: center; cursor: pointer; color: #fff; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle .icon, .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle .icon:before, .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle .icon:after { transition: .2s all ease; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle .icon:before, .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle .icon:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle .icon:before { content: ""; -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity: 1; visibility: visible; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle .icon:after { content: ""; -webkit-transform: rotate(-90deg) scale(0); transform: rotate(-90deg) scale(0); opacity: 0; visibility: hidden; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle.active .icon:before { opacity: 0; visibility: hidden; -webkit-transform: rotate(90deg) scale(0); transform: rotate(90deg) scale(0); } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle.active .icon:after { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity: 1; visibility: visible; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle .icon { font-family: "fl-line-icon-set"; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle .loading-mask { visibility: hidden; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle, .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle a { color: #999; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle .counter { top: -6px; right: 4px; font-size: 14px; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle .counter-number { margin-left: -7px; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle .counter-label { display: none; } .rd-navbar-fixed .rd-navbar-cart-fixed .rd-navbar-cart-toggle.active .counter { display: none; } .touch-device .rd-navbar-cart #minicart-content-wrapper { padding: 4rem 1rem 1rem; } /* * @subsection RD Navbar Toggles * * @description Describes style declarations for RD Navbar panel */ .rd-navbar-static .rd-navbar-panel { padding: 0; } .rd-navbar-static .rd-navbar-panel:before, .rd-navbar-static .rd-navbar-panel:after { display: table; content: ""; line-height: 0; } .rd-navbar-static .rd-navbar-panel:after { clear: both; } .rd-navbar-fixed .rd-navbar-panel-canvas { position: fixed; height: 56px; left: 0; top: 0; width: 100%; background: #fff; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25); z-index: 16; } .rd-navbar-fixed .rd-navbar-toggle { position: fixed; z-index: 17; top: 8px; left: 8px; } .rd-navbar-fixed-linked body { padding-top: 56px; } /* * @subsection RD Navbar Search * * @description Describes style declarations for RD Navbar search */ .rd-navbar-search { display: none; } .rd-navbar-search.active { display: block; } .rd-navbar-search .input-text { border: 1px solid #191919; font-weight: 100; } .rd-navbar-search .block-content { margin-top: 0; } .rd-navbar-search-toggle { display: inline-block; margin: 32px 0 0; font-family: 'Material Icons'; line-height: 40px; font-size: 28px; color: #191919; } .rd-navbar-search-toggle span { transition: 0.2s color 0.1s ease-out; } .rd-navbar-search-toggle.active { float: right; margin-right: 32px; } .rd-navbar-search-toggle.active span { color: #999; } .rd-navbar-search-toggle.active:hover span { color: #fff; } .rd-navbar-static .rd-navbar-search-toggle { margin-right: 0; } .rd-navbar-static .rd-navbar-search-toggle span:before { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .rd-navbar-static .rd-navbar-search-toggle:hover span { color: #999; } .rd-navbar-static .rd-navbar-search-toggle.active { margin-right: 0; } .rd-navbar-static .rd-navbar-search-toggle.active:hover span { color: #191919; } .rd-navbar-static .rd-navbar-search-toggle.active span { color: #191919; } .rd-navbar-static .rd-navbar-search-toggle.active span:before { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .rd-navbar-static .rd-navbar-search-wrap .block-content { margin: 0; } .rd-navbar-static .rd-navbar-search-wrap .icon { font-size: 28px; line-height: 30px; } .rd-navbar-static .rd-navbar-search-wrap .block-search.rd-navbar-search { display: none; } .rd-navbar-static .rd-navbar-search-wrap.active { position: fixed; top: 0; right: 0; width: 100%; background: #191919; z-index: 10; display: block; } .rd-navbar-static .rd-navbar-search-wrap.active .block-search.rd-navbar-search { display: block; } .rd-navbar-static .rd-navbar-search-wrap.active .block-search.rd-navbar-search .block-title { display: block; float: left; margin: 25px 32px; } .rd-navbar-static .rd-navbar-search-wrap.active .block-search.rd-navbar-search .block-title strong { font-size: 50px; line-height: 50px; color: #fff; font-weight: 300; text-transform: uppercase; } .rd-navbar-static .rd-navbar-search-wrap.active #search_mini_form { padding: 32px 0 0; } .rd-navbar-static .rd-navbar-search-wrap.active #search_mini_form .field { margin: 0 32px 0 0; width: 100%; } .rd-navbar-static .rd-navbar-search-wrap.active #search_mini_form input#search { background: none; font-weight: 300; color: #bdbcbc; } .rd-navbar-static .rd-navbar-search-wrap.active .rd-navbar-search-form-submit { background: none; padding: 0; height: 40px; margin-right: 22px; color: #999; } .rd-navbar-static .rd-navbar-search-wrap.active .rd-navbar-search-form-submit span { line-height: 40px; } .rd-navbar-static .rd-navbar-search-wrap.active .rd-navbar-search-form-submit:hover { color: #fff; } .rd-navbar-static .rd-navbar-search-wrap.active .rd-navbar-search-close { float: right; display: inline-block; height: 40px; margin-right: 32px; } .rd-navbar-static .rd-navbar-search-wrap.active .rd-navbar-search-toggle { float: right; margin-right: 32px; } .rd-navbar-static .rd-navbar-search-wrap.active .rd-navbar-search-toggle span { color: #999; } .rd-navbar-static .rd-navbar-search-wrap.active .rd-navbar-search-toggle span:before { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .rd-navbar-static .rd-navbar-search-wrap.active .rd-navbar-search-toggle:hover span { color: #fff; } .rd-navbar-static .rd-navbar-search { display: none; } .rd-navbar-static .rd-navbar-search.active { display: block; } .rd-navbar-static .rd-navbar-search .rd-navbar-search-form { display: -ms-flexbox; display: -webkit-flex; display: flex; } .rd-navbar-static .rd-navbar-search form { position: relative; } .rd-navbar-static .rd-navbar-search form button[type="submit"] { margin-left: 10px; position: relative; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-search-toggle { margin-top: 6px; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-search-wrap.active { height: 50px; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-search-wrap.active .rd-navbar-search-toggle { margin-right: 32px; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-search-wrap.active #search_mini_form { padding: 5px 0 0; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-search-wrap.active .block-search .block-title { margin: 5px; } .rd-navbar-static.rd-navbar--is-stuck .rd-navbar-search-wrap.active .block-search .block-title strong { line-height: 40px; font-size: 24px; } .rd-navbar-fixed .rd-navbar-search-toggle { display: block; position: fixed; top: 0; right: 112px; font-family: "FontAwesome"; width: 56px; height: 56px; margin: 0; z-index: 18; } .rd-navbar-fixed .rd-navbar-search-toggle .icon { display: inline-block; position: relative; width: 40px; height: 40px; font-size: 28px; line-height: 40px; text-align: center; cursor: pointer; color: #191919; } .rd-navbar-fixed .rd-navbar-search-toggle .icon, .rd-navbar-fixed .rd-navbar-search-toggle .icon:before, .rd-navbar-fixed .rd-navbar-search-toggle .icon:after { transition: .2s all ease; } .rd-navbar-fixed .rd-navbar-search-toggle .icon:before, .rd-navbar-fixed .rd-navbar-search-toggle .icon:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .rd-navbar-fixed .rd-navbar-search-toggle .icon:before { content: ""; -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity: 1; visibility: visible; } .rd-navbar-fixed .rd-navbar-search-toggle .icon:after { content: ""; -webkit-transform: rotate(-90deg) scale(0); transform: rotate(-90deg) scale(0); opacity: 0; visibility: hidden; } .rd-navbar-fixed .rd-navbar-search-toggle.active .icon:before { opacity: 0; visibility: hidden; -webkit-transform: rotate(90deg) scale(0); transform: rotate(90deg) scale(0); } .rd-navbar-fixed .rd-navbar-search-toggle.active .icon:after { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity: 1; visibility: visible; } .rd-navbar-fixed .rd-navbar-search-toggle span { font-size: 28px; line-height: 40px; padding: 8px; display: inline-block; } .rd-navbar-fixed .rd-navbar-search-toggle.active:hover span { color: #999; } .rd-navbar-fixed .rd-navbar-search { display: block; } .rd-navbar-fixed .rd-navbar-search .form-group { position: fixed; top: 0; padding: 8px 0; left: 56px; right: 168px; height: 56px; z-index: 17; visibility: hidden; opacity: 0; /* Firefox 19+ */ /* Firefox 18- */ } .rd-navbar-fixed .rd-navbar-search .form-group input { width: 100%; height: 40px; display: block; background: #191919; line-height: normal; padding: .5rem 35px .5rem .5rem; color: #fff; } .rd-navbar-fixed .rd-navbar-search .form-group ::-webkit-input-placeholder { color: #e5e5e5; text-overflow: ellipsis; font-size: 12px; line-height: 18px; } .rd-navbar-fixed .rd-navbar-search .form-group ::-moz-placeholder { color: #e5e5e5; text-overflow: ellipsis; font-size: 12px; line-height: 18px; } .rd-navbar-fixed .rd-navbar-search .form-group :-moz-placeholder { color: #e5e5e5; text-overflow: ellipsis; font-size: 12px; line-height: 18px; } .rd-navbar-fixed .rd-navbar-search .form-group :-ms-input-placeholder { color: #e5e5e5; text-overflow: ellipsis; font-size: 12px; line-height: 18px; } .rd-navbar-fixed .rd-navbar-search.active .form-group { opacity: 1; visibility: visible; } .rd-navbar-fixed .rd-navbar-search .field { margin: 0; } .rd-navbar-fixed .rd-navbar-search form button[type="submit"] { position: absolute; top: 50%; right: 0; background: none; padding: 0; margin: -20px 0 0; width: 40px; height: 40px; line-height: 40px; color: #fff; } .rd-navbar-fixed .rd-navbar-search form button[type="submit"]:before { display: inline-block; font-family: "FontAwesome"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .rd-navbar-fixed .rd-navbar-search form button[type="submit"] span { display: none; } /* * @subsection RD Navbar Collapse * * @description Describes style declarations for RD Navbar collapse */ .rd-navbar-collapse, .rd-navbar-collapse-toggle { display: none; } .rd-navbar-collapse .switcher.currency, .rd-navbar-collapse .switcher.language, .rd-navbar-collapse-toggle .switcher.currency, .rd-navbar-collapse-toggle .switcher.language { display: none; } .rd-navbar-static .rd-navbar-inner { max-width: 1200px; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } .rd-navbar-static .rd-navbar-collapse { display: block; float: right; margin-left: -15px; margin-top: 0; } .rd-navbar-static .rd-navbar-collapse li { display: inline-block; margin-left: 15px; } .rd-navbar-fixed .rd-navbar-collapse { display: block; text-align: left; position: fixed; top: 4px; right: 4px; color: #999; padding: 48px 15px 15px; z-index: 19; width: 250px; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25); visibility: hidden; overflow: hidden; transition: .3s box-shadow ease .2s; } .rd-navbar-fixed .rd-navbar-collapse:before { content: ''; position: absolute; top: 0; right: 0; background: #f7f7f7; width: 48px; height: 48px; -webkit-transform: scale(0); transform: scale(0); } .rd-navbar-fixed .rd-navbar-collapse li { position: relative; opacity: 0; transition: .3s all ease 0s; } .rd-navbar-fixed .rd-navbar-collapse > li > a { display: block; padding: 11px 16px; } .rd-navbar-fixed .rd-navbar-collapse > li > a:hover { background: white; } .rd-navbar-fixed .rd-navbar-collapse.active { visibility: visible; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.25); } .rd-navbar-fixed .rd-navbar-collapse.active li { transition: .3s all ease .2s; opacity: 1; } .rd-navbar-fixed .rd-navbar-collapse.active:before { background: #fff; -webkit-transform: scale(25); transform: scale(25); } .rd-navbar-fixed .rd-navbar-collapse .switcher.currency, .rd-navbar-fixed .rd-navbar-collapse .switcher.language { display: block; margin: 0; } .rd-navbar-fixed .rd-navbar-collapse .switcher.currency .actions .action, .rd-navbar-fixed .rd-navbar-collapse .switcher.language .actions .action { background: none; padding: 0; } .rd-navbar-fixed .rd-navbar-collapse .switcher.currency strong, .rd-navbar-fixed .rd-navbar-collapse .switcher.language strong { font-weight: normal; } .rd-navbar-fixed .rd-navbar-collapse .switcher.currency .dropdown .mage-dropdown-dialog, .rd-navbar-fixed .rd-navbar-collapse .switcher.language .dropdown .mage-dropdown-dialog { width: 217px; position: relative; } .rd-navbar-fixed .rd-navbar-collapse .links { margin-top: 10px; } .rd-navbar-fixed .rd-navbar-collapse .links li { display: block; margin: 0; } .rd-navbar-fixed .rd-navbar-collapse .links li a { color: #999; } .rd-navbar-fixed .rd-navbar-collapse .links li a:hover { color: #191919; } .rd-navbar-fixed .rd-navbar-collapse-toggle { display: block; position: fixed; top: 4px; right: 4px; font-family: "FontAwesome"; width: 48px; height: 48px; z-index: 20; } .rd-navbar-fixed .rd-navbar-collapse-toggle .icon { display: inline-block; position: relative; width: 48px; height: 48px; font-size: 28px; line-height: 48px; text-align: center; cursor: pointer; color: #999; } .rd-navbar-fixed .rd-navbar-collapse-toggle .icon, .rd-navbar-fixed .rd-navbar-collapse-toggle .icon:before, .rd-navbar-fixed .rd-navbar-collapse-toggle .icon:after { transition: .2s all ease; } .rd-navbar-fixed .rd-navbar-collapse-toggle .icon:before, .rd-navbar-fixed .rd-navbar-collapse-toggle .icon:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .rd-navbar-fixed .rd-navbar-collapse-toggle .icon:before { content: ""; -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity: 1; visibility: visible; } .rd-navbar-fixed .rd-navbar-collapse-toggle .icon:after { content: ""; -webkit-transform: rotate(-90deg) scale(0); transform: rotate(-90deg) scale(0); opacity: 0; visibility: hidden; } .rd-navbar-fixed .rd-navbar-collapse-toggle.active .icon:before { opacity: 0; visibility: hidden; -webkit-transform: rotate(90deg) scale(0); transform: rotate(90deg) scale(0); } .rd-navbar-fixed .rd-navbar-collapse-toggle.active .icon:after { -webkit-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity: 1; visibility: visible; } body > .loading-mask, #checkout-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 99; } body > .loading-mask .loader, #checkout-loader .loader { width: 38px; height: 38px; left: 50%; top: 50%; position: absolute; margin: -20px; z-index: 999; /*-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out;*/ } .ajax-loader { position: fixed; } body[aria-busy="true"] .ajax-loader { width: 38px; height: 38px; z-index: 80; right: 10px; /*-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out;*/ } .rd-navbar-static-linked .ajax-loader { top: 110px; } .rd-navbar-fixed-linked .ajax-loader { top: 65px; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px); } 50% { -webkit-transform: perspective(120px) rotateY(180deg); } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } /* whirl.css - http://jh3y.github.io/-cs-spinner Licensed under the MIT license Jhey Tompkins (c) 2014. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ /* whirl base styling */ .whirl:before { content: ""; z-index: 1; position: absolute; top: 0; left: 0; display: block; height: 100%; width: 100%; background-color: #999; opacity: 0.6; } .whirl:after { z-index: 2; content: ""; height: 40px; width: 40px; position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -20px; transition: 0.2s all 0.75s ease 0s ease-out; border-radius: 100%; border-top: 4px solid #555; -webkit-animation: standard 0.75s infinite linear; animation: standard 0.75s infinite linear; } .whirl.no-overlay:before { content: none; display: none; } /* whirl standard rotation animation used for duo, double-up etc. */ @keyframes standard { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*whirl double up - a doubling up standard animation spinner*/ .whirl.double-up:after { border-right: 4px solid #fac58f; border-top: 4px double #fac58f; border-left: 4px double #fac58f; border-bottom: 4px double #fac58f; } .loader2, body > .loading-mask .loader, #checkout-loader .loader, body[aria-busy="true"] .ajax-loader, .camera_loader { margin: 0 auto; font-size: 10px; text-indent: -9999em; border-top: 5px solid #fac58f; border-right: 5px solid #fac58f; border-bottom: 5px solid #fac58f; border-left: 5px solid #ffffff; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load8 1.1s infinite linear; animation: load8 1.1s infinite linear; } .loader2, body > .loading-mask .loader, #checkout-loader .loader, body[aria-busy="true"] .ajax-loader, .camera_loader, .loader2:after, body > .loading-mask .loader:after, #checkout-loader .loader:after, body[aria-busy="true"] .ajax-loader:after, .camera_loader:after { border-radius: 50%; width: 40px; height: 40px; } @-webkit-keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load8 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /** * selectize.css (v0.12.1) * Copyright (c) 2013ΓÇô2015 Brian Reavis & contributors * * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this * file except in compliance with the License. You may obtain a copy of the License at: * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF * ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. * * @author Brian Reavis */ .selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder { visibility: visible !important; background: #f2f2f2 !important; background: rgba(0, 0, 0, 0.06) !important; border: 0 none !important; -webkit-box-shadow: inset 0 0 12px 4px #fff; box-shadow: inset 0 0 12px 4px #fff; } .selectize-control.plugin-drag_drop .ui-sortable-placeholder::after { content: '!'; visibility: hidden; } .selectize-control.plugin-drag_drop .ui-sortable-helper { -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .selectize-dropdown-header { position: relative; padding: 5px 8px; border-bottom: 1px solid #d0d0d0; background: #f8f8f8; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .selectize-dropdown-header-close { position: absolute; right: 8px; top: 50%; color: #303030; opacity: 0.4; margin-top: -12px; line-height: 20px; font-size: 20px !important; } .selectize-dropdown-header-close:hover { color: #000000; } .selectize-dropdown.plugin-optgroup_columns .optgroup { border-right: 1px solid #f2f2f2; border-top: 0 none; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .selectize-dropdown.plugin-optgroup_columns .optgroup:last-child { border-right: 0 none; } .selectize-dropdown.plugin-optgroup_columns .optgroup:before { display: none; } .selectize-dropdown.plugin-optgroup_columns .optgroup-header { border-top: 0 none; } .selectize-control.plugin-remove_button [data-value] { position: relative; padding-right: 24px !important; } .selectize-control.plugin-remove_button [data-value] .remove { z-index: 1; /* fixes ie bug (see #392) */ position: absolute; top: 0; right: 0; bottom: 0; width: 17px; text-align: center; font-weight: bold; font-size: 12px; color: inherit; text-decoration: none; vertical-align: middle; display: inline-block; padding: 2px 0 0 0; border-left: 1px solid #d0d0d0; -webkit-border-radius: 0 2px 2px 0; -moz-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .selectize-control.plugin-remove_button [data-value] .remove:hover { background: rgba(0, 0, 0, 0.05); } .selectize-control.plugin-remove_button [data-value].active .remove { border-left-color: #cacaca; } .selectize-control.plugin-remove_button .disabled [data-value] .remove:hover { background: none; } .selectize-control.plugin-remove_button .disabled [data-value] .remove { border-left-color: #fff; } .selectize-control { position: relative; } .selectize-dropdown, .selectize-input, .selectize-input input { color: #333; font-family: inherit; font-size: 14px; line-height: 26px; -webkit-font-smoothing: inherit; } .selectize-input input { height: 40px; } .selectize-input, .selectize-control.single .selectize-input.input-active { cursor: text; display: inline-block; } .selectize-input { border: none; padding: 5px 16px; display: inline-block; width: 100%; line-height: 40px; min-width: 65px; overflow: hidden; position: relative; z-index: 1; background: #e5e5e5; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: left; } .toolbar .selectize-input { background: none; } .selectize-control.multi .selectize-input.has-items { padding: 6px 8px 3px; } .selectize-input.disabled, .selectize-input.disabled * { cursor: default !important; } .selectize-input > * { vertical-align: baseline; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; } .selectize-control.multi .selectize-input { position: relative; } .selectize-control.multi .selectize-input:before { display: inline-block; font-family: "Material Icons"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); content: ""; } .selectize-control.multi .selectize-input:before { position: absolute; line-height: 40px; right: 10px; top: 0; font-size: 18px; } .selectize-control.multi .selectize-input.dropdown-active::before { left: auto; right: 10px; } .selectize-control.multi .selectize-input > div { cursor: pointer; margin: 0 3px 3px 0; padding: 2px 6px; background: #f2f2f2; color: #303030; } .selectize-control.multi .selectize-input > div.active { background: #e8e8e8; color: #303030; } .selectize-control.multi .selectize-input.disabled > div, .selectize-control.multi .selectize-input.disabled > div.active { color: #191919; background: #fff; border: 0 solid #fff; } .selectize-input > input { display: inline-block !important; padding: 0 !important; min-height: 0 !important; max-height: none !important; max-width: 100% !important; margin: 0 2px 0 0 !important; text-indent: 0 !important; border: 0 none !important; background: none !important; line-height: inherit !important; -webkit-user-select: auto !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .selectize-input > input::-ms-clear { display: none; } .selectize-input > input:focus { outline: none !important; } .selectize-input::after { content: ' '; display: block; clear: left; } .selectize-input.dropdown-active::before { content: ''; display: none; position: absolute; background: #d1d1d1; height: 0; bottom: 0; left: 0; right: 0; } .selectize-dropdown { position: absolute; z-index: 50; border: 1px solid #d1d1d1; background: #f5f5f5; margin: -1px 0 0 -1px; border-top: 0 none; box-sizing: content-box; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); padding: 0 0 1px; } .selectize-dropdown [data-selectable] { cursor: pointer; overflow: hidden; } .selectize-dropdown [data-selectable] .highlight { background: #dfdfdf; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; } .selectize-dropdown [data-selectable], .selectize-dropdown .optgroup-header { padding: 5px 8px; } .selectize-dropdown .optgroup:first-child .optgroup-header { border-top: 0 none; } .selectize-dropdown .optgroup-header { color: #303030; background: #fff; cursor: default; } .selectize-dropdown .active { background-color: #dfdfdf; color: #191919; } .selectize-dropdown .active.create { color: #191919; } .selectize-dropdown .create { color: rgba(48, 48, 48, 0.5); } .selectize-dropdown-content { overflow-y: auto; overflow-x: hidden; max-height: 200px; } .selectize-control.single .selectize-input, .selectize-control.single .selectize-input input { cursor: pointer; } .selectize-control.single .selectize-input.input-active, .selectize-control.single .selectize-input.input-active input { cursor: text; } .selectize-control.single .selectize-input:after { content: ' '; display: block; position: absolute; top: 50%; right: 15px; margin-top: -3px; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #808080 transparent transparent transparent; } .selectize-control.single .selectize-input.dropdown-active:after { margin-top: -4px; border-width: 0 5px 5px 5px; border-color: transparent transparent #808080 transparent; } .selectize-control.rtl.single .selectize-input:after { left: 15px; right: auto; } .selectize-control.rtl .selectize-input > input { margin: 0 4px 0 -2px !important; } .selectize-control .selectize-input.disabled { opacity: 0.5; background-color: #fafafa; } /*# sourceMappingURL=style.css.map */