1407 lines
24 KiB
CSS
1407 lines
24 KiB
CSS
/* ---------------------------------------------------------
|
|
|
|
- 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);
|
|
} |