/** * Swiper 3.3.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * * http://www.idangero.us/swiper/ * * Copyright 2016, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ * * Licensed under MIT * * Released on: February 7, 2016 */ .swiper-container{margin:0 auto;position:relative;overflow:hidden;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(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate(0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,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}.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}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-wp8-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;-moz-background-size:27px 44px;-webkit-background-size:27px 44px;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-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}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.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:#007aff}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-o-transform:translate(0,-50%);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-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}.swiper-pagination-progress{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progress .swiper-pagination-progressbar{background:#007aff;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:rgba(255,255,255,.5)}.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar{background:#fff}.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar{background:#000}.swiper-container-3d{-webkit-perspective:1200px;-moz-perspective:1200px;-o-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.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-wrapper{-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-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{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,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper{-ms-perspective:1200px}.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-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.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-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.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}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(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,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.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)}} /* ========================================================================== Remodal's default mobile first theme ========================================================================== */ /* Default theme styles for the background */ .remodal-bg.remodal-is-opening, .remodal-bg.remodal-is-opened { filter: blur(3px); } /* Default theme styles of the overlay */ .remodal-overlay { background: rgba(43, 46, 56, 0.9); } .remodal-overlay.remodal-is-opening, .remodal-overlay.remodal-is-closing { animation-duration: 0.3s; animation-fill-mode: forwards; } .remodal-overlay.remodal-is-opening { animation-name: remodal-overlay-opening-keyframes; } .remodal-overlay.remodal-is-closing { animation-name: remodal-overlay-closing-keyframes; } /* Default theme styles of the wrapper */ .remodal-wrapper { padding: 10px 10px 0; } /* Default theme styles of the modal dialog */ .remodal { box-sizing: border-box; width: 100%; margin-bottom: 10px; padding: 35px; transform: translate3d(0, 0, 0); color: #2b2e38; background: #fff; } .remodal.remodal-is-opening, .remodal.remodal-is-closing { animation-duration: 0.3s; animation-fill-mode: forwards; } .remodal.remodal-is-opening { animation-name: remodal-opening-keyframes; } .remodal.remodal-is-closing { animation-name: remodal-closing-keyframes; } /* Vertical align of the modal dialog */ .remodal, .remodal-wrapper:after { vertical-align: middle; } /* Close button */ .remodal-close { position: absolute; top: 0; left: 0; display: block; overflow: visible; width: 35px; height: 35px; margin: 0; padding: 0; cursor: pointer; transition: color 0.2s; text-decoration: none; color: #95979c; border: 0; outline: 0; background: transparent; } .remodal-close:hover, .remodal-close:focus { color: #2b2e38; } .remodal-close:before { font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important; font-size: 25px; line-height: 35px; position: absolute; top: 0; left: 0; display: block; width: 35px; content: "\00d7"; text-align: center; } /* Dialog buttons */ .remodal-confirm, .remodal-cancel { font: inherit; display: inline-block; overflow: visible; min-width: 110px; margin: 0; padding: 12px 0; cursor: pointer; transition: background 0.2s; text-align: center; vertical-align: middle; text-decoration: none; border: 0; outline: 0; } .remodal-confirm { color: #fff; background: #81c784; } .remodal-confirm:hover, .remodal-confirm:focus { background: #66bb6a; } .remodal-cancel { color: #fff; background: #e57373; } .remodal-cancel:hover, .remodal-cancel:focus { background: #ef5350; } /* Remove inner padding and border in Firefox 4+ for the button tag. */ .remodal-confirm::-moz-focus-inner, .remodal-cancel::-moz-focus-inner, .remodal-close::-moz-focus-inner { padding: 0; border: 0; } /* Keyframes ========================================================================== */ @keyframes remodal-opening-keyframes { from { transform: scale(1.05); opacity: 0; } to { transform: none; opacity: 1; filter: blur(0); } } @keyframes remodal-closing-keyframes { from { transform: scale(1); opacity: 1; } to { transform: scale(0.95); opacity: 0; filter: blur(0); } } @keyframes remodal-overlay-opening-keyframes { from { opacity: 0; } to { opacity: 1; } } @keyframes remodal-overlay-closing-keyframes { from { opacity: 1; } to { opacity: 0; } } /* Media queries ========================================================================== */ @media only screen and (min-width: 641px) { .remodal { max-width: 700px; } } /* IE8 ========================================================================== */ .lt-ie9 .remodal-overlay { background: #2b2e38; } .lt-ie9 .remodal { width: 700px; } /* ========================================================================== Remodal's necessary styles ========================================================================== */ /* Hide scroll bar */ html.remodal-is-locked { overflow: hidden; touch-action: none; } /* Anti FOUC */ .remodal, [data-remodal-id] { display: none; } /* Necessary styles of the overlay */ .remodal-overlay { position: fixed; z-index: 9999; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; display: none; } /* Necessary styles of the wrapper */ .remodal-wrapper { position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; display: none; overflow: auto; text-align: center; -webkit-overflow-scrolling: touch; } .remodal-wrapper:after { display: inline-block; height: 100%; margin-left: -0.05em; content: ""; } /* Fix iPad, iPhone glitches */ .remodal-overlay, .remodal-wrapper { backface-visibility: hidden; } /* Necessary styles of the modal dialog */ .remodal { position: relative; outline: none; text-size-adjust: 100%; } .remodal-is-initialized { /* Disable Anti-FOUC */ display: inline-block; } /*animations*/ /****************** * Bounce in right * *******************/ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .slow{ -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .slower{ -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .slowest{ -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /* Added by Andy Meetan */ .delay-250 { -webkit-animation-delay:0.25s; -moz-animation-delay:0.25s; -o-animation-delay:0.25s; animation-delay:0.25s; } .delay-500 { -webkit-animation-delay:0.5s; -moz-animation-delay:0.5s; -o-animation-delay:0.5s; animation-delay:0.5s; } .delay-750 { -webkit-animation-delay:0.75s; -moz-animation-delay:0.75s; -o-animation-delay:0.75s; animation-delay:0.75s; } .delay-1000 { -webkit-animation-delay:1.0s; -moz-animation-delay:1.0s; -o-animation-delay:1.0s; animation-delay:1.0s; } .delay-1250 { -webkit-animation-delay:1.25s; -moz-animation-delay:1.25s; -o-animation-delay:1.25s; animation-delay:1.25s; } .delay-1500 { -webkit-animation-delay:1.5s; -moz-animation-delay:1.5s; -o-animation-delay:1.5s; animation-delay:1.5s; } .delay-1750 { -webkit-animation-delay:1.75s; -moz-animation-delay:1.75s; -o-animation-delay:1.75s; animation-delay:1.75s; } .delay-2000 { -webkit-animation-delay:2.0s; -moz-animation-delay:2.0s; -o-animation-delay:2.0s; animation-delay:2.0s; } .delay-2500 { -webkit-animation-delay:2.5s; -moz-animation-delay:2.5s; -o-animation-delay:2.5s; animation-delay:2.5s; } .delay-2000 { -webkit-animation-delay:2.0s; -moz-animation-delay:2.0s; -o-animation-delay:2.0s; animation-delay:2.0s; } .delay-2500 { -webkit-animation-delay:2.5s; -moz-animation-delay:2.5s; -o-animation-delay:2.5s; animation-delay:2.5s; } .delay-3000 { -webkit-animation-delay:3.0s; -moz-animation-delay:3.0s; -o-animation-delay:3.0s; animation-delay:3.0s; } .delay-3500 { -webkit-animation-delay:3.5s; -moz-animation-delay:3.5s; -o-animation-delay:3.5s; animation-delay:3.5s; } .bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown{ opacity:0; -webkit-transform: translateX(400px); transform: translateX(400px); } .fadeInRight, .fadeInLeft, .fadeInUp, .fadeInDown{ opacity:0; -webkit-transform: translateX(400px); transform: translateX(400px); } .flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight, .rotateInDownLeft, .rotateDownUpRight, .rollIn{ opacity:0; } .lightSpeedInRight, .lightSpeedInLeft{ opacity:0; -webkit-transform: translateX(400px); transform: translateX(400px); } /*********** * bounceIn * ************/ @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); } } .bounceIn.go { -webkit-animation-name: bounceIn; animation-name: bounceIn; } /**************** * bounceInRight * ****************/ @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(400px); } 60% { -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(400px); } 60% { transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { opacity: 1; transform: translateX(0); } } .swiper-slide-active .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } .swiper-slide-active .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } .swiper-slide-active .swiper-slide-active .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } .swiper-slide-active .swiper-slide-active .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } .swiper-slide-active .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } .swiper-slide-active .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .bounceInRight.go { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } /****************** * Bounce in left * *******************/ @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-400px); } 60% { -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-400px); } 60% { transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } } .bounceInLeft.go { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } /****************** * Bounce in up * *******************/ @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(400px); } 60% { -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(400px); } 60% { transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .bounceInUp.go { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } /****************** * Bounce in down * *******************/ @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-400px); } 60% { -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-400px); } 60% { transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } .bounceInDown.go { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } /********** * Fade In * **********/ @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1; display:block;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1; display:block;} } .fadeIn{ opacity:0; } .fadeIn.go { -webkit-animation-name: fadeIn; animation-name: fadeIn; } /********** * Grow in * ***********/ @-webkit-keyframes growIn { 0% { -webkit-transform: scale(0.2); opacity:0; } 50% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); opacity:1; } } @keyframes growIn { 0% { transform: scale(0.2); opacity:0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity:1; } } .growIn { -webkit-transform: scale(0.2); transform: scale(0.2); opacity:0; } .growIn.go{ -webkit-animation-name: growIn; animation-name: growIn; } /******** * Shake * ********/ @-webkit-keyframes shake { 0%, 100% {-webkit-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} } @keyframes shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} } .shake.go { -webkit-animation-name: shake; animation-name: shake; } /******** * ShakeUp * ********/ @-webkit-keyframes shakeUp { 0%, 100% {-webkit-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(-10px);} 20%, 40%, 60%, 80% {-webkit-transform: translateY(10px);} } @keyframes shakeUp { 0%, 100% {transform: translateY(0);} 10%, 30%, 50%, 70%, 90% {transform: translateY(-10px);} 20%, 40%, 60%, 80% {transform: translateY(10px);} } .shakeUp.go { -webkit-animation-name: shakeUp; animation-name: shakeUp; } /************* * FadeInLeft * *************/ @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft{ opacity: 0; -webkit-transform: translateX(-400px); transform: translateX(-400px); } .fadeInLeft.go { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } /************* * FadeInRight * *************/ @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; transform: translateX(0); } } .fadeInRight{ opacity: 0; -webkit-transform: translateX(400px); transform: translateX(400px); } .fadeInRight.go { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } /************* * FadeInUp * *************/ @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp{ opacity: 0; -webkit-transform: translateY(400px); transform: translateY(400px); } .fadeInUp.go { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } /************* * FadeInDown * *************/ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-400px); } 50%{ opacity: 0.3; } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown{ opacity: 0; -webkit-transform: translateY(-400px); transform: translateY(-400px); } .fadeInDown.go { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } /***************** * rotateIn * *****************/ @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } } .rotateIn.go { -webkit-animation-name: rotateIn; animation-name: rotateIn; } /***************** * rotateInUpLeft * *****************/ @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInUpLeft.go { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } /******************* * rotateInDownLeft * *******************/ @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInDownLeft.go { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } /****************** * rotateInUpRight * *******************/ @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInUpRight.go { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } /******************** * rotateInDownRight * ********************/ @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInDownRight.go { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } /********* * rollIn * **********/ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .rollIn.go { -webkit-animation-name: rollIn; animation-name: rollIn; } /********* * wiggle * **********/ @-webkit-keyframes wiggle { 0% { -webkit-transform: skewX(9deg); } 10% { -webkit-transform: skewX(-8deg); } 20% { -webkit-transform: skewX(7deg); } 30% { -webkit-transform: skewX(-6deg); } 40% { -webkit-transform: skewX(5deg); } 50% { -webkit-transform: skewX(-4deg); } 60% { -webkit-transform: skewX(3deg); } 70% { -webkit-transform: skewX(-2deg); } 80% { -webkit-transform: skewX(1deg); } 90% { -webkit-transform: skewX(0deg); } 100% { -webkit-transform: skewX(0deg); } } @keyframes wiggle { 0% { transform: skewX(9deg); } 10% { transform: skewX(-8deg); } 20% { transform: skewX(7deg); } 30% { transform: skewX(-6deg); } 40% { transform: skewX(5deg); } 50% { transform: skewX(-4deg); } 60% { transform: skewX(3deg); } 70% { transform: skewX(-2deg); } 80% { transform: skewX(1deg); } 90% { transform: skewX(0deg); } 100% { transform: skewX(0deg); } } .wiggle.go { -webkit-animation-name: wiggle; animation-name: wiggle; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /******** * swing * *********/ @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .swing.go { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } /******* * tada * ********/ @-webkit-keyframes tada { 0% {-webkit-transform: scale(1);} 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 100% {-webkit-transform: scale(1) rotate(0);} } @keyframes tada { 0% {transform: scale(1);} 10%, 20% {transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 100% {transform: scale(1) rotate(0);} } .tada.go { -webkit-animation-name: tada; animation-name: tada; } /********* * wobble * **********/ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } .wobble.go { -webkit-animation-name: wobble; animation-name: wobble; } /******** * pulse * *********/ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .pulse.go { -webkit-animation-name: pulse; animation-name: pulse; } /*************** * lightSpeedInRight * ****************/ @-webkit-keyframes lightSpeedInRight { 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedInRight { 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedInRight.go { -webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /*************** * lightSpeedInLeft * ****************/ @-webkit-keyframes lightSpeedInLeft { 0% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; } 60% { -webkit-transform: translateX(20%) skewX(-30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedInLeft { 0% { transform: translateX(-100%) skewX(30deg); opacity: 0; } 60% { transform: translateX(20%) skewX(-30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedInLeft.go { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } /******* * Flip * *******/ @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { transform: perspective(400px) rotateY(360deg) scale(.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } .flip.go { -webkit-backface-visibility: visible !important; -webkit-animation-name: flip; backface-visibility: visible !important; animation-name: flip; } /********** * flipInX * **********/ @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX.go { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } /********** * flipInY * **********/ @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY.go { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY; } /***************** * Out animations * *****************/ /************ * bounceOut * *************/ @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.3); } } .bounceOut.goAway { -webkit-animation-name: bounceOut; animation-name: bounceOut; } /************ * bounceOutUp * *************/ @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-2000px); } } .bounceOutUp.goAway { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } /************ * bounceOutDown * *************/ @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } .bounceOutDown.goAway { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } /************ * bounceOutLeft * *************/ @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } .bounceOutLeft.goAway { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } /************ * bounceOutRight * *************/ @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .bounceOutRight.goAway { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } /************ * fadeOut * *************/ @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } .fadeOut.goAway { -webkit-animation-name: fadeOut; animation-name: fadeOut; } /************ * fadeOutUp * *************/ @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } .fadeOutUp.goAway { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } /************ * fadeOutDown * *************/ @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } .fadeOutDown.goAway { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } /************ * fadeOutLeft * *************/ @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .fadeOutLeft.goAway { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } /************ * fadeOutRight * *************/ @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } .fadeOutRight.goAway { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } /************ * flipOutX * *************/ @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX.goAway { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } /************ * flipOutY * *************/ @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipOutY; backface-visibility: visible !important; animation-name: flipOutY; } /************ * lightSpeedOutRight * *************/ @-webkit-keyframes lightSpeedOutRight { 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOutRight { 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOutRight.goAway { -webkit-animation-name: lightSpeedOutRight; animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /************ * lightSpeedOutLeft * *************/ @-webkit-keyframes lightSpeedOutLeft { 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOutLeft { 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { transform: translateX(-100%) skewX(30deg); opacity: 0; } } .lightSpeedOutLeft.goAway { -webkit-animation-name: lightSpeedOutLeft; animation-name: lightSpeedOutLeft; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } /************ * rotateOut * *************/ @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { transform-origin: center center; transform: rotate(0); opacity: 1; } 100% { transform-origin: center center; transform: rotate(200deg); opacity: 0; } } .rotateOut.goAway { -webkit-animation-name: rotateOut; animation-name: rotateOut; } /************ * rotateOutUpLeft * *************/ @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { -transform-origin: left bottom; -transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft.goAway { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } /************ * rotateOutDownLeft * *************/ @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft.goAway { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } /************ * rotateOutUpRight * *************/ @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight.goAway { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } /************ * rollOut * *************/ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; transform: translateX(100%) rotate(120deg); } } .rollOut.goAway { -webkit-animation-name: rollOut; animation-name: rollOut; } /***************** * Short Animations *******************/ /********************* * fadeInUpShort *********************/ @-webkit-keyframes fadeInUpShort { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUpShort { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUpShort{ opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } .fadeInUpShort.go { -webkit-animation-name: fadeInUpShort; animation-name: fadeInUpShort; } /********************* * fadeInDownShort *********************/ @-webkit-keyframes fadeInDownShort { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDownShort { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDownShort{ opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } .fadeInDownShort.go { -webkit-animation-name: fadeInDownShort; animation-name: fadeInDownShort; } /********************* * fadeInRightShort *********************/ @-webkit-keyframes fadeInRightShort { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInRightShort { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRightShort { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } .fadeInRightShort.go { -webkit-animation-name: fadeInRightShort; animation-name: fadeInRightShort; } /********************* * fadeInLeftShort *********************/ @-webkit-keyframes fadeInLeftShort { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInLeftShort { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeftShort { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } .fadeInLeftShort.go { -webkit-animation-name: fadeInLeftShort; animation-name: fadeInLeftShort; }