/* --------------------------------------------------------- - document: Slick Modals - HTML5 and CSS3 powered modal popups - author: Capelle @ Codecanyon - profile: http://codecanyon.net/user/Capelle - version: 4.4 ---------------------------------------------------------- */ /* Reset and basics ------------------------------ */ /* Reset */ .slickModal * { margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%; vertical-align: baseline; line-height: normal; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Basics */ .slickModal, .slickOverlay, .slickWindow { position: fixed; } .slickModal { display: none; z-index: -1; } .slickModal.isActive { display: block; z-index: 999999; } .slickOverlay { top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: 1; } .slickWindow { z-index: 2; } .slickContent { position: relative; } /* Modal window positions ------------------------------ */ .slickWindow.sm-center { top: 0; right: 0; bottom: 0; left: 0; } .slickWindow.sm-topLeft { top: 0; left: 0; } .slickWindow.sm-topCenter { top: 0; left: 0; right: 0; } .slickWindow.sm-topRight { top: 0; right: 0; } .slickWindow.sm-bottomLeft { bottom: 0; left: 0; } .slickWindow.sm-bottomCenter { bottom: 0; left: 0; right: 0; } .slickWindow.sm-bottomRight { bottom: 0; right: 0; } .slickWindow.sm-right { top: 0; right: 0; bottom: 0; } .slickWindow.sm-left { top: 0; left: 0; bottom: 0; } /* Modal window transitions ------------------------------ */ .slickModal .sm-animated { -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: both; backface-visibility: hidden; transform-style: preserve-3d; } .slickModal .sm-animated.sm-fadeOut { -webkit-animation-delay: 0s !important; animation-delay: 0s !important; pointer-events: none; } /* fadeIn */ .slickModal .sm-fadeIn { -webkit-animation-name: sm-fadeIn; animation-name: sm-fadeIn; } @-webkit-keyframes sm-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes sm-fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* fadeOut */ .slickModal .sm-fadeOut { -webkit-animation-name: sm-fadeOut; animation-name: sm-fadeOut; } @-webkit-keyframes sm-fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes sm-fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* ZoomIn */ .slickModal .sm-zoomIn { -webkit-animation-name: sm-zoomIn; animation-name: sm-zoomIn; } @-webkit-keyframes sm-zoomIn { 0% { opacity: 0; -webkit-transform: scale(0.7); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes sm-zoomIn { 0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: none; } } /* zoomOut */ .slickModal .sm-zoomOut { -webkit-animation-name: sm-zoomOut; animation-name: sm-zoomOut; } @-webkit-keyframes sm-zoomOut { 0% { opacity: 0; -webkit-transform: scale(1.3); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes sm-zoomOut { 0% { opacity: 0; transform: scale(1.3); } 100% { opacity: 1; transform: none; } } /* slideTop */ .slickModal .sm-slideTop { -webkit-animation-name: sm-slideTop; animation-name: sm-slideTop; } @-webkit-keyframes sm-slideTop { 0% { opacity: 0; -webkit-transform: translateY(-25%); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes sm-slideTop { 0% { opacity: 0; transform: translateY(-25%); } 100% { opacity: 1; transform: none; } } /* slideBottom */ .slickModal .sm-slideBottom { -webkit-animation-name: sm-slideBottom; animation-name: sm-slideBottom; } @-webkit-keyframes sm-slideBottom { 0% { opacity: 0; -webkit-transform: translateY(25%); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes sm-slideBottom { 0% { opacity: 0; transform: translateY(25%); } 100% { opacity: 1; transform: none; } } /* slideRight */ .slickModal .sm-slideRight { -webkit-animation-name: sm-slideRight; animation-name: sm-slideRight; } @-webkit-keyframes sm-slideRight { 0% { opacity: 0; -webkit-transform: translateX(25%); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes sm-slideRight { 0% { opacity: 0; transform: translateX(25%); } 100% { opacity: 1; transform: none; } } /* slideLeft */ .slickModal .sm-slideLeft { -webkit-animation-name: sm-slideLeft; animation-name: sm-slideLeft; } @-webkit-keyframes sm-slideLeft { 0% { opacity: 0; -webkit-transform: translateX(-25%); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes sm-slideLeft { 0% { opacity: 0; transform: translateX(-25%); } 100% { opacity: 1; transform: none; } } /* rotateIn */ .slickModal .sm-rotateIn { -webkit-animation-name: sm-rotateIn; animation-name: sm-rotateIn; } @-webkit-keyframes sm-rotateIn { 0% { opacity: 0; -webkit-transform: rotate(720deg) scale(0.5); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes sm-rotateIn { 0% { opacity: 0; transform: rotate(720deg) scale(0.5); } 100% { opacity: 1; transform: none; } } /* rotateOut */ .slickModal .sm-rotateOut { -webkit-animation-name: sm-rotateOut; animation-name: sm-rotateOut; } @-webkit-keyframes sm-rotateOut { 0% { opacity: 0; -webkit-transform: rotate(720deg) scale(1.4); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes sm-rotateOut { 0% { opacity: 0; transform: rotate(720deg) scale(1.4); } 100% { opacity: 1; transform: none; } } /* flipInX */ .slickModal .sm-flipInX { -webkit-animation-name: sm-flipInX; animation-name: sm-flipInX; } @-webkit-keyframes sm-flipInX { 0% { opacity: 0; -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; } 60% { opacity: 1; -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); } } @keyframes sm-flipInX { 0% { opacity: 0; transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transition-timing-function: ease-in; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transition-timing-function: ease-in; } 60% { opacity: 1; transform: perspective(400px) rotate3d(1, 0, 0, 10deg); } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { transform: perspective(400px); } } /* flipInY */ .slickModal .sm-flipInY { -webkit-animation-name: sm-flipInY; animation-name: sm-flipInY; } @-webkit-keyframes sm-flipInY { 0% { opacity: 0; -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; } 60% { opacity: 1; -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); } } @keyframes sm-flipInY { 0% { opacity: 0; transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transition-timing-function: ease-in; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transition-timing-function: ease-in; } 60% { opacity: 1; transform: perspective(400px) rotate3d(0, 1, 0, 10deg); } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { transform: perspective(400px); } } /* swingTop */ .slickModal .sm-swingTop { -webkit-animation-name: sm-swingTop; animation-name: sm-swingTop; -webkit-transform-origin: top center; transform-origin: top center; } @-webkit-keyframes sm-swingTop { 0% { opacity: 0; -webkit-transform: perspective(300px) rotateX(-90deg); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes sm-swingTop { 0% { opacity: 0; transform: perspective(300px) rotateX(-90deg); } 100% { opacity: 1; transform: none; } } /* swingBottom */ .slickModal .sm-swingBottom { -webkit-animation-name: sm-swingBottom; animation-name: sm-swingBottom; -webkit-transform-origin: bottom center; transform-origin: bottom center; } @-webkit-keyframes sm-swingBottom { 0% { opacity: 0; -webkit-transform: perspective(300px) rotateX(90deg); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes sm-swingBottom { 0% { opacity: 0; transform: perspective(300px) rotateX(90deg); } 100% { opacity: 1; transform: none; } } /* swingRight */ .slickModal .sm-swingRight { -webkit-animation-name: sm-swingRight; animation-name: sm-swingRight; -webkit-transform-origin: center right; transform-origin: center right; } @-webkit-keyframes sm-swingRight { 0% { opacity: 0; -webkit-transform: perspective(200px) rotateY(-90deg); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes sm-swingRight { 0% { opacity: 0; transform: perspective(200px) rotateY(-90deg); } 100% { opacity: 1; transform: none; } } /* swingLeft */ .slickModal .sm-swingLeft { -webkit-animation-name: sm-swingLeft; animation-name: sm-swingLeft; -webkit-transform-origin: center left; transform-origin: center left; } @-webkit-keyframes sm-swingLeft { 0% { opacity: 0; -webkit-transform: perspective(200px) rotateY(90deg); } 100% { opacity: 1; -webkit-transform: none; } } @keyframes sm-swingLeft { 0% { opacity: 0; transform: perspective(200px) rotateY(90deg); } 100% { opacity: 1; transform: none; } } /* Flash */ .slickModal .sm-flash { -webkit-animation-name: sm-flash; animation-name: sm-flash; } @-webkit-keyframes sm-flash { 0%, 40%, 80% { opacity: 0; } 20%, 60%, 100% { opacity: 1; } } @keyframes sm-flash { 0%, 40%, 80% { opacity: 0; } 20%, 60%, 100% { opacity: 1; } } /* Pulse */ .slickModal .sm-pulse { -webkit-animation-name: sm-pulse; animation-name: sm-pulse; } @-webkit-keyframes sm-pulse { 0% { opacity: 0; } 25% { opacity: 1; } 25%, 75% { -webkit-transform: scale(1.05); } 0%, 50%, 100% { -webkit-transform: none; } } @keyframes sm-pulse { 0% { opacity: 0; } 25% { opacity: 1; } 25%, 75% { transform: scale(1.05); } 0%, 50%, 100% { transform: none; } } /* RubberBand */ .slickModal .sm-rubberBand { -webkit-animation-name: sm-rubberBand; animation-name: sm-rubberBand; } @-webkit-keyframes sm-rubberBand { 0% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); } 30% { opacity: 1; -webkit-transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @keyframes sm-rubberBand { 0% { opacity: 0; transform: scale3d(1, 1, 1); } 30% { opacity: 1; transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } 100% { transform: scale3d(1, 1, 1); } } /* Shake */ .slickModal .sm-shake { -webkit-animation-name: sm-shake; animation-name: sm-shake; } @-webkit-keyframes sm-shake { 0% { opacity: 0; } 10% { opacity: 1; } 0%, 100% { -webkit-transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); } } @keyframes sm-shake { 0% { opacity: 0; } 10% { opacity: 1; } 0%, 100% { transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } /* Swing */ .slickModal .sm-swing { -webkit-animation-name: sm-swing; animation-name: sm-swing; -webkit-transform-origin: top center; transform-origin: top center; } @-webkit-keyframes sm-swing { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); } } @keyframes sm-swing { 0% { opacity: 0; } 20% { opacity: 1; transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } 100% { transform: rotate3d(0, 0, 1, 0deg); } } /* Tada */ .slickModal .sm-tada { -webkit-animation-name: sm-tada; animation-name: sm-tada; } @-webkit-keyframes sm-tada { 0% { opacity: 0; -webkit-transform: scale3d(1, 1, 1); } 10% { opacity: 1; } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-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); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @keyframes sm-tada { 0% { opacity: 0; transform: scale3d(1, 1, 1); } 10% { opacity: 1; } 10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { transform: scale3d(1, 1, 1); } } /* Wooble */ .slickModal .sm-wobble { -webkit-animation-name: sm-wobble; animation-name: sm-wobble; } @-webkit-keyframes sm-wobble { 0% { opacity: 0; -webkit-transform: none; } 15% { opacity: 1; -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; } } @keyframes sm-wobble { 0% { opacity: 0; transform: none; } 15% { opacity: 1; transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { transform: none; } } /* Bounce */ .slickModal .sm-bounce { -webkit-animation-name: sm-bounce; animation-name: sm-bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes sm-bounce { 0% { opacity: 0; } 20% { opacity: 1; } 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); } } @keyframes sm-bounce { 0% { opacity: 0; } 20% { opacity: 1; } 0%, 20%, 53%, 80%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transform: translate3d(0,0,0); } 40%, 43% { transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -30px, 0); } 70% { transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0,-4px,0); } } /* BounceIn */ .slickModal .sm-bounceIn { -webkit-animation-name: sm-bounceIn; animation-name: sm-bounceIn; } @-webkit-keyframes sm-bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); } } @keyframes sm-bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(.9, .9, .9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(.97, .97, .97); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } } /* BounceInUp */ .slickModal .sm-bounceInUp { -webkit-animation-name: sm-bounceInUp; animation-name: sm-bounceInUp; } @-webkit-keyframes sm-bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @keyframes sm-bounceInUp { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } 100% { transform: translate3d(0, 0, 0); } } /* BounceInDown */ .slickModal .sm-bounceInDown { -webkit-animation-name: sm-bounceInDown; animation-name: sm-bounceInDown; } @-webkit-keyframes sm-bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; } } @keyframes sm-bounceInDown { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } 100% { transform: none; } } /* BounceInRight */ .slickModal .sm-bounceInRight { -webkit-animation-name: sm-bounceInRight; animation-name: sm-bounceInRight; } @-webkit-keyframes sm-bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; } } @keyframes sm-bounceInRight { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } 100% { transform: none; } } /* BounceInLeft */ .slickModal .sm-bounceInLeft { -webkit-animation-name: sm-bounceInLeft; animation-name: sm-bounceInLeft; } @-webkit-keyframes sm-bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; } } @keyframes sm-bounceInLeft { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } 100% { transform: none; } } /* unFold */ .slickModal .sm-unFold { -webkit-animation-name: sm-unFold; animation-name: sm-unFold; } @-webkit-keyframes sm-unFold { 0% { -webkit-transform: scaleY(.01) scaleX(0); } 50% { -webkit-transform: scaleY(.01) scaleX(1); } 100% { -webkit-transform: scaleY(1) scaleX(1); } } @keyframes sm-unFold { 0% { transform: scaleY(.01) scaleX(0); } 50% { transform: scaleY(.01) scaleX(1); } 100% { transform: scaleY(1) scaleX(1); } } /* flowIn */ .slickModal .sm-flowIn { -webkit-animation-name: sm-flowIn; animation-name: sm-flowIn; } @-webkit-keyframes sm-flowIn { 0% { opacity: 0; border-radius: 200px; -webkit-transform: scale(0.6); } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); } } @keyframes sm-flowIn { 0% { opacity: 0; border-radius: 200px; transform: scale(0.6); } 50% { opacity: 1; } 100% { transform: scale(1); } } /* Close buttons ------------------------------ */ .slickModal .closeModal { cursor: pointer; } .slickModal .close { position: absolute; right: 0; z-index: 10; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: 700; text-align: right; background-color: transparent; } .slickModal .close, .slickModal .close:before { transition: all 0.1s ease; } .slickModal .close:before { white-space: nowrap; display: block; position: relative; transition: all 0.1s ease; } /* Labeled button */ .slickModal .close.labeled { top: -30px; } .slickModal .close.labeled:before { color: #fff; content: "X"; font-size: 15px; text-transform: uppercase; /* background: linear-gradient(to right, #fff 50%, #000 50%); background-size: 201% 100%; background-position: right bottom; padding: 6px 12px; */ } .slickModal .close.labeled:hover:before { /*background-position: left bottom;*/ color: #000; } /* Text button */ .slickModal .close.text { top: -20px; } .slickModal .close.text:before { color: #fff; content: "X"; font-size: 15px; text-transform: uppercase; } /* Tag button */ .slickModal .close.tag { top: 0; } .slickModal .close.tag:before { color: #fff; content: "\00d7"; background: transparent; text-align: center; font-size: 15px; width: 24px; height: 24px; line-height: 24px; opacity: 0.2; } .slickModal .close.tag:hover:before { opacity: 1; } /* Icon and circle button */ .slickModal .close.icon { top: 14px; right: 14px; display: block; width: 22px; height: 22px; overflow: hidden; opacity: 0.3; } .slickModal .close.icon:hover:before { color: #000; } .slickModal .close.icon:before, .slickModal .close.icon:after, .slickModal .close.circle:before, .slickModal .close.circle:after { content: ""; position: absolute; height: 1px; top: 50%; left: 0; right: 0; margin: auto; background: #000; } .slickModal .close.icon:before, .slickModal .close.icon:after { width: 100%; } .slickModal .close.circle:before, .slickModal .close.circle:after { width: 60%; } .slickModal .close.icon:before, .slickModal .close.circle:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .slickModal .close.icon:after, .slickModal .close.circle:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .slickModal .close.icon:hover { opacity: 1; } .slickModal .close.circle { top: -12px; right: -12px; display: block; width: 24px; height: 24px; overflow: hidden; background: #4b9c47; border-radius: 50%; } .slickModal .close.circle:hover { transform: scale(1.1); }