/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;overflow: hidden;} #cboxWrapper {max-width:none;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;} .cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;} #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{/*background:url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/overlay.png) repeat 0 0;*/ background:rgba(0,0,0,0.9);} #colorbox{outline:0;} #cboxTopLeft{width:21px; height:21px; background:transparent; /*background:url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/controls.png) no-repeat -101px 0;*/} #cboxTopRight{width:21px; height:21px; background:transparent; /*background:url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/controls.png) no-repeat -130px 0;*/} #cboxBottomLeft{width:21px; height:21px; background:transparent; /*background:url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/controls.png) no-repeat -101px -29px;*/} #cboxBottomRight{width:21px; height:21px; background:transparent; /*background:url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/controls.png) no-repeat -130px -29px;*/} #cboxMiddleLeft{width:21px; background:transparent; /*background:url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/controls.png) left top repeat-y;*/} #cboxMiddleRight{width:21px; background:transparent; /*background:url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/controls.png) right top repeat-y;*/} #cboxTopCenter{height:21px; background:transparent; /*background:url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/border.png) 0 0 repeat-x;*/} #cboxBottomCenter{height:21px; background:transparent; /*background:url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/border.png) 0 -29px repeat-x;*/} #cboxContent{background:transparent;} .cboxIframe{background:#fff;} #cboxError{padding:50px; border:1px solid #ccc;} #cboxLoadedContent{background: #fff;} #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} #cboxLoadingOverlay{background:#FFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; /*background:url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/loading_background.png) no-repeat center center;*/ } #cboxLoadingGraphic{background:transparent url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/loading.gif) no-repeat center center;} /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active, #cboxClose:focus {outline:0;} #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} #cboxPrevious{position:absolute; bottom:0; left:0; background:url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;} #cboxPrevious:hover{background-position:-75px -25px;} #cboxNext{position:absolute; bottom:0; left:27px; background:url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} #cboxNext:hover{background-position:-50px -25px;} #cboxClose{ position:absolute; top:0; right:0; /*background:url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/controls.png) no-repeat -25px 0;*/ width: 40px; height: 40px; font-size: 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background: #000; } #cboxClose:hover{/*background-position:-25px -25px;*/} #cboxClose:before { content: "Close"; /* background: url(https://www.sa-buycar.com/skin/frontend/base/default/images/colorbox/popup_close_button.png); */ /* background-repeat: no-repeat; */ /* background-size: 20px 20px; */ font-size: 18px; line-height: 18px; /* width: 30px; */ /* height: 20px; */ display: inline-block; color: #fff; } /* The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9. See: http://jacklmoore.com/notes/ie-transparency-problems/ */ .cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); } /** * Swiper 3.2.7 * Most modern mobile touch slider and framework with hardware accelerated transitions * * http://www.idangero.us/swiper/ * * Copyright 2015, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ * * Licensed under MIT * * Released on: December 7, 2015 */ .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("https://www.sa-buycar.com/skin/frontend/eirene/default/css/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("https://www.sa-buycar.com/skin/frontend/eirene/default/css/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("https://www.sa-buycar.com/skin/frontend/eirene/default/css/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("https://www.sa-buycar.com/skin/frontend/eirene/default/css/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("https://www.sa-buycar.com/skin/frontend/eirene/default/css/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("https://www.sa-buycar.com/skin/frontend/eirene/default/css/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-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{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 .swiper-pagination-bullet{margin:5px 0;display:block}.swiper-container-horizontal>.swiper-pagination{bottom:10px;left:0;width:100%}.swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet{margin:0 5px}.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{-ms-perspective:1200px}.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}.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-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;visibility:hidden;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;width:100%;height:100%;z-index:1}.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-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .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-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-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("https://www.sa-buycar.com/skin/frontend/eirene/default/css/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%2C6")'%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("https://www.sa-buycar.com/skin/frontend/eirene/default/css/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%2C6")'%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)}} #custommenu { width: 100%; } #custommenu .custommenu-holder{ width: 100%; /*min-width: 660px;*/ margin: auto; text-align: right; } .cms-index-index #custommenu{ display: block; } .cms-index-index .all-category:after{ display: none; } /*IE7 fix*/ *:first-child+html #custommenu { z-index: 998; } div.menu { display: inline-block; font-weight: normal; border-bottom: 0; padding: 14px 6px; line-height: 50px; } div.menu:first-child{ /*border: none;*/ } div.menu.act{ background: #c20000; } div.menu span{ margin: 0 0 -10px; display:inline-block; border-width: 0 1px; text-decoration: none; white-space: nowrap; } .th div.menu a{ font-size: 13px; } div.menu a span { position: relative; font-size: 15px; font-weight: bold; } div.menu a span:hover { cursor: pointer; } div.custom-menu-popup { position: absolute; z-index: 1000 !important; display: none; text-align: left; top: 48px; right: 0; /*margin-top: -2px;*/ width: 100%; padding-top: 20px; } div.custom-menu-popup .menu-overlay { background-color: rgba(0,0,0, 0.8); } div.custom-menu-popup.cms-page-link{ width:490px; } div.custom-menu-popup.cms-page-link .column { width: 100%; } div.custom-menu-popup.cms-page-link .block1, div.custom-menu-popup.cms-page-link .block2 { width: 50%; } div.custom-menu-popup.cms-page-link .cate-name a{ width:100%; padding: 17px 5px; color: #797979; font: normal 12px/15px 'Kanit'; text-decoration: none; } div.custom-menu-popup.cms-page-link .cate-name a:hover, div.custom-menu-popup-cont .category-all .main-category-nav-link div:hover, div.custom-menu-popup-cont .category-all .main-category-nav-link:hover div{ color: #F98F25; } /*@-moz-document url-prefix() { div.custom-menu-popup { margin-top: -2px; } } */ div.custom-menu-popup#popup25, div.custom-menu-popup:last-child{ width: 175px; } div.custom-menu-popup a { display:block; cursor: pointer; padding: 5px 5px 5px 0; } div.custom-menu-popup a.level1 { padding-bottom: 10px; } div.custom-menu-popup a.level2 { padding-left: 5px; } /*div.menu a{ margin: 0 0 -10px; display:block; height:28px; cursor: pointer; padding: 0 25px; border: 1px solid #fff; border-width: 0 1px; text-decoration: none; }*/ div.level1 { margin-bottom: 5px; } div.level2 { margin-bottom: 20px; } div.level3 { /*margin-bottom: 5px; padding: 5px;*/ } div.block2 { /* padding-top: 0px; padding-left: 10px; padding-right: 10px; */ display: block; } a.level1{ color: #fff; font: normal 16px /20px 'Kanit'; text-decoration: none; } a.level2{ font-size: 12px; color: #390073; padding: 3px 10px 3px 15px; position: relative; } a.level2:after{ /* position: absolute; content: ''; background: url(https://www.sa-buycar.com/skin/frontend/eirene/images/sprite.png) -104px -21px no-repeat; width: 9px; height: 9px; top: 50%; left: 0; margin: -4px 0 0;*/ } /* Clearfix */ div.block2:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] div.block2 { display: block; } * html div.block2 { height: 1%; } div.block2 p { margin-bottom: 3px; line-height: 120%; color: #000; font-size: 11px; } div.block2 p a { display: inline; } div.block2 a img { opacity: .9; filter: alpha(opacity=90); } div.block2 a:hover img { opacity: 1; filter: alpha(opacity=100); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } div.block2 .brand a:hover img { -webkit-transition: all 0; -moz-transition: all 0; -ms-transition: all 0; transition: all 0; } div.custom-menu-popup hr { margin: 0px 0px 10px 0px; } /******************************************* COLUMN WIDTH ***************************** */ div.column { margin:0; padding: 0 5% 0 0; float: left; } /*end COLUMN WIDTH */ div.itemSubMenu { margin-left: 0px; } .clearBoth { clear:both; height: 0; overflow: hidden; } div.level1 { margin-bottom: 0px; width: 100%; height: 100%; /*padding:10px 0;*/ } div.level1 a { color: #fff; } div.level1 a{ overflow:hidden; text-transform:none; } div.level1 a div{ display: block; display: block; width: 55%; float: right; color: #777; font: normal 12px/15px 'Kanit'; text-decoration: none; } div.level1 a:hover > div{ display: block; text-decoration: none; } /*BG*/ #custommenu .custommenu-holder .custom-menu-popup-cont{ display: block; /*width:calc(80% - 100px);*/ position: relative; /*right:calc((-25%) - 200px); /*-25%;*/ overflow: hidden; padding: 40px 0 15px 0; max-width: 1170px; margin: auto; min-height: 300px; } @media all and(max-width:959px){ #custommenu .custommenu-holder .custom-menu-popup-cont { max-width: 100%; } } @media all and(max-width:959px){ #custommenu .custommenu-holder .custom-menu-popup-cont{ right: -40%; } } div.custom-menu-popup-cont .block1{ width:70%; float: left; } div.custom-menu-popup-cont .block1.wide { width: 100%; float: none; } div.custom-menu-popup-cont .block2{ width:30%; float: right; height: 100%; overflow: hidden; } div.custom-menu-popup-cont ul { overflow: hidden; } div.custom-menu-popup-cont li { width: 100%; padding-bottom: 20px; } div.custom-menu-popup-cont li:first-child { border-left: 0; padding-left: 0; } div.custom-menu-popup-cont div[id^="wp_custom_menu_"]{ float: right; background: #f3f3f3; padding: 10px; font-size: 11px; /* width: 42.37%; */ width:47%; margin:0; position: relative; } div.custom-menu-popup-cont div[id^="wp_custom_menu_"].offers{ width: 100%; } div.custom-menu-popup-cont div[id^="wp_custom_menu_"] img, div.custom-menu-popup-cont div[id^="wp_custom_menu_"] strong{ display: block; margin: 0 0 5px; } .menu-prom-holder{ font-size: 11px; } div.custom-menu-popup-cont div[id^="wp_custom_menu_"] a{ text-transform: uppercase; text-decoration: underline !important; } div.custom-menu-popup-cont div[id^="wp_custom_menu_"] a:hover{ text-decoration: underline; } div.custom-menu-popup-cont .category-all{ clear:left; padding: 10px 0; border-top: 1px solid #d6d6d6; overflow: hidden; } div.custom-menu-popup-cont .category-all .main-category-nav-link img{ float:left; margin-right:10px; } div.custom-menu-popup-cont .category-all .main-category-nav-link div{ float:left; padding-top: 32px; font: normal 12px/15px 'Kanit'; color: #797979; text-transform: uppercase; } .shop-by{ position: absolute; left: -237px; padding: 5px; text-align: center; width: 238px; bottom: 0; } .shop-by a{ border-top: 1px solid #ccc; display: block; } .shop-by a:hover{ font-weight: bold; } div.stage{ display: none; position: absolute; margin:70px 0 0 0; left: 0; width: 100%; min-height: 300px; background-color:rgba(0,0,0, 0.5); z-index:2; } div.custom-menu-popup h3{ /*color: #fff;*/ /*font-size: 20px;*/ /*height: 37px;*/ /*padding: 8px 15px 5px 15px;*/ /*margin: 0;*/ /*background: -ms-linear-gradient(45deg, #ff822f, #ff6600);*/ /*background: -moz-linear-gradient(45deg, #ff822f, #ff6600);*/ /*background: -webkit-linear-gradient(45deg, #ff822f, #ff6600);*/ /*background: linear-gradient(45deg, #ff822f, #ff6600);*/ display: none; } div.menu a:link, div.menu a:visited { } div.menu a:hover { color: #333; } div.custom-menu-popup-cont .itemMenu{ overflow:hidden; } div.menu a, div.custom-menu-popup a { -webkit-transition: all .1s linear; -moz-transition: all .1s linear; -ms-transition: all .1s linear; transition: all .1s linear; width: 100%; } div.custom-menu-popup a.toPromo { width: 50%; } div.custom-menu-popup a img.thumbnail { float: left; margin-right: 5px; } div.custom-menu-popup a .cate-name { float: left; } .itemMenuName.level1 .cate-name { color: #3e2b2f; } div.custom-menu-popup a div{ } div.custom-menu-popup a.toPromo div.promoIcon { height:80px; padding:28px 0 0 95px; float:left; background:url(https://www.sa-buycar.com/skin/frontend/eirene/images/promotion.jpg) 0 0 no-repeat; width: 100%; } div.custom-menu-popup a.toPromo div > span { line-height: 14px; float: right; width: 100%; text-align:left; } div.menu .brand a, div.custom-menu-popup .brand a { -webkit-transition: all 0s linear; -moz-transition: all 0s linear; -ms-transition: all 0s linear; transition: all 0s linear; } div.menu.active a { color: #000 !important; } div.level3 { /*background: #fff;*/ } /*FONTS*/ div.menu:hover, .menu.active{ z-index: 11111; border-bottom: 0; } div.menu a{ display: block; } div.menu:hover a{ color: #f60; } a.level1{ text-transform: none; font-weight: bold; } a.level2{ font-weight: normal; font-size: 15px; line-height: 16px; } a.level3{ font-size: 11px; font-weight: normal; line-height: 100%; margin-bottom: 0px; } div.menu.act a{ } div.menu a:hover, div.menu.active a {/*border-color: #000;*/ } div.menu a:hover{ /*border-color: #000;*/ } div.menu:hover, .menu.active .parentMenu a span, div.menu:hover .parentMenu span { color: #c20000; text-decoration: underline; } a.level3:hover { color: #b43f74; } a.level1:hover { color:#205A77; } a.level2:hover { color: #D4B92B; } .block2 table.brand { float: left; } .block2 .single_menu_product { float: left; position: relative; max-width: 150px; overflow: hidden; margin-right: 20px; margin-left: 0px; } /*MOBILE MENU STYLES*/ #menu-button, .parentMenu { display: block; } html[xmlns] #menu-button, html[xmlns] .parentMenu { display: block; } * html #menu-button, * html .parentMenu { height: 1%; } #menu-button:after, .parentMenu:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #custommenu-mobile { position:relative; margin: 0 auto; padding: 0; z-index: 200; display:none; /*overflow: hidden; */ float: right; } #menu-button > span { display: block; border-bottom: 3px solid #008066; margin-bottom: 6px; border-radius: 20%; } #menu-button:hover > span { border-color: #c20000; } #menu-content { -webkit-overflow-scrolling: touch; overflow-y:scroll; position: fixed; width: 100%; height: 100%; left: 0; top: 0; margin: 0; padding: 18% 0 0 0; /*background: rgba(0,0,0,0.8);*/ } .nav-container .mobMenu-bg{ position: fixed; top:0; bottom:0; left:0; width:100%; height: 100%; background: rgba(0,0,0,0.85); } #closeBT{ position: absolute; right: 20px; top: 20px; width: 36px; border-radius: 50%; padding: 4px 10px; font: bold 16px/22px 'Kanit'; color: #fff; border: 2px solid #fff; text-align: center; cursor: pointer; } #closeBT:hover { background: #00ab86; } .menu-mobile, #menu-button a:link, #menu-button a:visited { } #menu-button { } #menu-button a:link, #menu-button a:visited { color: #fff; display: block; position: relative; padding: 10px 15px 10px 50px; } /*#menu-button a:after, #menu-button a:before{ position: absolute; content: ''; top: 1px; left: 12px; width: 31px; height: 24px; background: url(https://www.sa-buycar.com/skin/frontend/eirene/images/sprite.png) 0 -449px no-repeat; }*/ #menu-button.active a:after { background-position: 0 -477px; } #menu-button a:before{ right: 10px; left: auto; width: 27px; height: 26px; background-position: -37px -476px; } #menu-button a span:after, #menu-button.active a span:after { display: block; position: relative; content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 4px solid #dadada; margin: 8px 0px 0px 5px; float: right; opacity: 0.7; } #menu-button.active a span:after{ border-top: 0; border-bottom: 4px solid #dadada; } #menu-button:hover { cursor: pointer; } #menu-button:hover a:after { opacity: 1; } .menu-mobile div.column { float:none; padding:5px; background: #fff; } .menu-mobile a.itemMenuName { display: block; text-align: left; } .menu-mobile div.menu-button, .menu-mobile div.menu-mobile { float: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 100%; border-bottom: 1px solid #fff; } .menu-mobile div.column { float: none; width: 100%; padding: 0px 0; margin: 0px 0px 0px 0px; } .menu-mobile a.level1:link, .menu-mobile a.level1:visited { margin-top: 0px; margin-bottom: 0; padding: 10px 10px; border-radius: 2px; color: #000; } .menu-mobile a.level2:link, .menu-mobile a.level2:visited { padding: 10px 10px; border-radius: 2px; } .menu-mobile a.level1:link, .menu-mobile a.level1:visited { color: #555; } .menu-mobile a.level1:hover { background-color: #f1f1f1; } .menu-mobile .parent { background-color: #fff; } /*buttons level 01*/ .menu-mobile .parentMenu { padding: 0px 0px; display: block; text-align: left; /*border-width: 0 1px 1px 1px;*/ /*border-style: solid;*/ /*border-color: #dadada;*/ } .menu-mobile .parentMenu a:link, .menu-mobile .parentMenu a:visited { padding: 10px 0px 10px 10px; margin-right: 37px; color: #000; display: block; text-transform: uppercase; } .menu-mobile .parentMenu:hover { cursor: pointer; } .parentMenu { position: relative; height:100%; } .parentMenu > a { height: 50px; } .parentMenu a { display: block; } .parentMenu span { color:#6a737b; } div.menu.act .parentMenu span { color: #fff; } #custommenu-mobile .parentMenu > a { padding: 10px 5px; margin-right: 35px; height: auto; font-weight: 400; color: #000; display: block; text-transform: capitalize; min-height: 45px; } #custommenu-mobile .parentMenu span { padding-right:15px; color:#fff; } #menu-button { cursor: pointer; } .menu-mobile div.level2 { margin-bottom: 0; } #custommenu-mobile .button { cursor: pointer; position: absolute; right: 0; top: 0; display: block; /*width: 22px; height: 22px;*/ padding: 30px 0 0 30px; background-image: url(https://www.sa-buycar.com/skin/frontend/eirene/default/images/icon_sprite@2x.png); background-repeat: no-repeat; background-color: transparent; background-position: -76px -259px; background-size: 150px 600px; transition:none; } #custommenu-mobile .button.open { background-position: -43px -259px; } #custommenu-mobile .level1 .button { background-image: url(https://www.sa-buycar.com/skin/frontend/eirene/default/images/icon_sprite@2x.png); background-repeat: no-repeat; background-color: transparent; background-position: -76px -259px; background-size: 150px 600px; transition:none; } #custommenu-mobile .level1 .button.open { background-position: -43px -259px; } /*BG*/ #custommenu-mobile .parentMenu:hover a:link, #custommenu-mobile .parentMenu:hover a:visited, #custommenu-mobile .parentMenu:hover { color: #fff; } #custommenu-mobile .level0 { /*background-color: #f1f1f1;*/ width: 90%; margin: 0 auto; } #custommenu-mobile .level1 { background-color: transparent; width: 100%; margin: 0; } #custommenu-mobile .level1 .parentMenu { padding-left: 20px; } #custommenu-mobile .level2 .parentMenu { padding-left: 40px; } #custommenu-mobile .level2 { background-color: transparent; } /* add for shop by menu */ .itemMenuName.level1.foundit-shopbyconcern{ border-top:1px solid #cccccc; position: absolute; width: 100%; bottom:21px; } .itemMenuName.level1.foundit-shopbycollection{ border-top:1px solid #cccccc; position: absolute; width: 100%; bottom:0; } .menu-prom-holder a{ padding:0 !important; } .menu-prom-holder img{ width: 175px; height: 170px; } /* end add for shop by menu */ /* Track order */ .track-order-box { position: relative; float: left; z-index: 1000; } .popTrack { position: absolute; top: 50px; left: -55%; width: 200px; background-color: #fff; padding: 15px; border-left: 1px solid #9E9496; border-right: 1px solid #9E9496; border-bottom: 4px solid #3f2a2f; } .trackorder-link { display: block; line-height: 50px; color: #fff; font-size: 15px; padding: 0 12px; } .track-order-box.active .trackorder-link { background-color: #3f2a2f; } .track-order-box input.input-text { padding: 2px 5px; height: 25px; } @media screen and (min-width:960px) and (max-width:1170px) { div.menu { padding: 14px 4px; } div.menu a span { font-size: 13px; } } @media screen and (max-width:959px) { .cms-index-index #custommenu{ display: block; } #custommenu .custommenu-holder { width: auto; margin: auto; height: 50px; } .nav-container #custommenu{ display: none; } .nav-container #custommenu-mobile { position: relative; width: 65px; height: 44px; margin: 14px auto 0 auto; padding-top: 14px; z-index: 200; display: block; overflow: visible; float: right; } .menu-mobile .parentMenu a:link, .menu-mobile .parentMenu a:visited { padding: 5px 0px 5px 5px; margin-right: 37px; height: 58px; color: #000; display: block; text-transform: uppercase; } #custommenu-mobile .parentMenu span { font-size: 18px; line-height: normal; color: #fff; border:0; } #custommenu-mobile a:hover span, #custommenu-mobile a:active span { color: #00ab86; text-decoration: underline; font-weight: bold; } #custommenu-mobile .parentMenu span.button { padding: 0; width: 35px; height: 45px; } #menu-button { float: none; width: 25px; margin: auto; } #menu-button a:link{ width: 24px; height: 24px; display: block; position: relative; margin: 8px 0 0 10px; padding: 0; /*background : url(https://www.sa-buycar.com/skin/frontend/eirene/default/images/icon_sprite.png) no-repeat 0 -146px;*/ } #menu-content{ margin:0 0 0 0; } } @media screen and (max-width:768px) { } @media screen and (max-width:480px) { .nav-container #custommenu{ display: none; } .nav-container #custommenu-mobile { position: relative; width: 40px; height: 40px; margin: 0 auto; top: 0; left: 9px; z-index: 200; display: block; overflow: visible; float: right; padding-top: 6px; } #menu-content{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; margin: 0; padding: 100px 0 0 0; -webkit-overflow-scrolling: touch; overflow:touch; } } @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2014 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 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); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 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); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 100% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } ====ma-herobanner=================*/ /* Browser Resets */ #bannerSlideContainer .cycle-slide{width:100%;} /* Set images slide width */ #bannerSlideContainer .slide img{width:100%;} /* Overlay */ .cycle-overlay {position: absolute; bottom: 0; width: 100%; z-index: 600; background: black; color: white; padding: 15px; opacity: 0.5;} /* Navigation Control */ #banner-cycle .cycle-prev, #banner-cycle .cycle-next{ background-image: url("https://www.sa-buycar.com/skin/frontend/eirene/default/images/sprite2x.png"); background-size: 300px 1000px; position: absolute; top: 50%; margin-top: -25px; width: 50px; height: 50px; cursor: pointer; z-index: 800; } #banner-cycle .cycle-prev { background-position: 6px -272px; left: 10px; } #banner-cycle .cycle-next { right: 10px; background-position: -29px -196px; } #banner-cycle .cycle-prev:hover, #banner-cycle .cycle-next:hover {opacity: 0.7} /* Pager */ #bannerSlideContainer { position: relative; -webkit-box-shadow: 0 5px 9px -4px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 5px 9px -4px rgba(0, 0, 0, 0.7); box-shadow: 0 5px 9px -4px rgba(0, 0, 0, 0.7); } #bannerSlideContainer .cycle-pager {text-align: center; width: 100%; z-index: 500; position: absolute; bottom:0; overflow: hidden;} #bannerSlideContainer .cycle-pager span {border: 1px solid #ccc; margin:0 5px; font-family: arial; font-size: 50px; width: 16px; height: 16px; display: inline-block; color: #ddd; cursor: pointer;} #bannerSlideContainer .cycle-pager span.cycle-pager-active {color: #D69746;} #bannerSlideContainer .swiper-pagination-bullet { opacity: 0.5; background: #000; } #bannerSlideContainer .swiper-pagination-bullet-active { background: #00ab86; opacity: 1; } @media only screen and ( max-width:768px ){ #bannerSlideContainer .cycle-pager{display: none !important;} } #bannerSlideContainer .swiper-button { opacity: 0.5; } #bannerSlideContainer .swiper-button:hover { opacity: 1; } #bannerSlideContainer .swiper-button.swiper-button-prev { background-image: url("https://www.sa-buycar.com/skin/frontend/eirene/default/css/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"); } #bannerSlideContainer .swiper-button.swiper-button-next { background-image: url("https://www.sa-buycar.com/skin/frontend/eirene/default/css/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"); } /* Bidding Info Block */ .slide-product-info-block { position: relative; width: auto; min-width: 300px; margin: 20px 10%; font-size: 14px; height: 476px; -webkit-box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.7); box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.7); font-size: 14px; background-color: #fff; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } #bannerSlideContainer .slide { height: 535px; } #bannerSlideContainer .slide .slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; } #bannerSlideContainer .slide .slide-bg.mobile { display: none; } .slide-product-title { background-color: #151515; padding: 10px 5px; color: #fff; font-weight: bold; text-align: center; } .slide-product-title > span { display: inline-block; background-color: #c20000; padding: 5px 12px; line-height: 10px; } .slide-product-info { background-color: #fff; padding: 20px 30px; } .current-bidding-num { position: relative; padding-right: 20px; margin-left: -30px; display: inline-block; background-color: #cbcbcb; color: #151515; line-height: 30px; text-shadow: 1px 1px 1px #fff; } .current-bidding-num > span, .current-bidding-value { color: #008066; font-weight: bold; } .current-bidding-num icon { display: block; float: left; vertical-align: middle; width: 50px; height: 30px; background-color: #c20000; background-image: url("https://www.sa-buycar.com/skin/frontend/eirene/default/images/sprite2x.png"); background-size: 200px 667px; background-position:-62px -350px; margin-right: 10px; } .current-bidding-num:after { content: ''; width: 0; height: 0; border-top: 0 solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid #cbcbcb; float: right; display: inline-block; position: absolute; right: -30px; top: 0px; } .slide-product-info .product-model { font-weight: bold; padding: 10px 0; text-align: center; border-bottom: 3px solid #151515; } .product-model .model { font-size: 40px; height: 55px; opacity: 0; max-width: 240px; margin: auto; } .product-model .model > div { line-height: 55px; } .product-model .tag { margin-top: -12px; } .current-bidding-value, .countdown-block .title { padding: 10px 0 0 0; text-align: center; } .current-bidding-value .value { padding: 0 5px; border: 3px solid #008066; font-size: 1.8em; margin-top: 5px; line-height: 40px; } .product-model .tag, .current-bidding-value .title, .slide-product-info-block .countdown-block .title { font-size: 1.3em; } .product-model .tag { text-transform: uppercase; } .slide-product-info .action .button { width: 100%; font-size: 1.45em; padding-top: 10px; padding-bottom: 10px; } .slide-product-info .action .button:hover, .slide-product-info .action .button:focus { color: #fff; } .slide-product-info .action .note { font-size: 0.8em; text-align: center; margin-top: 10px; color: #6a737b; } .countdown-block { text-align: center; margin-bottom: 15px; } .countdown-block .value-wrapper { position: relative; overflow: hidden; opacity: 0; } .countdown-block .value-wrapper:before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; border-bottom: 1px solid #151515; margin-top: 1px; } .countdown-block .value { padding: 0 8px; font-size: 1.8em; height: 25px; line-height: 25px; text-align: center; font-weight: bold; margin-top: 5px; background-color: #fff; } .product-model .model, .countdown-block .value { -webkit-transition: opacity 0.2s ease; -moz-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; } .countdown-block .info { /*margin-top: -5px;*/ } .countdown-block .info, .countdown-block .value { margin-left: auto; margin-right: auto; overflow: hidden; display: inline-block; vertical-align: top; position: relative; } .countdown-block .value li, .countdown-block .info li { display: block; float: left; } .countdown-block .value li:nth-child(odd), .countdown-block .info li:nth-child(odd){ width: 30px; } .countdown-block .value li:nth-child(even), .countdown-block .info li:nth-child(even){ width: 20px; } @media only screen and (max-width: 770px) { #bannerSlideContainer .slide { text-align: center; } .slide-product-info-block { width: 350px; float: none !important; margin-top: 30px; margin-left: auto; margin-right: auto; vertical-align: middle; } .slide-product-info { text-align: left; } } @media only screen and (max-width: 580px) { .slide-product-info-block { max-width: none; min-width: 0; overflow: hidden; font-size: 13px; width: 65%; } #bannerSlideContainer .slide .slide-bg.desktop { display: none; } #bannerSlideContainer .slide .slide-bg.mobile { display: block; } .slide-product-info { padding: 20px; } #bannerSlideContainer .swiper-button.swiper-button-next { right: 0; } #bannerSlideContainer .swiper-button.swiper-button-prev { left: 0; } .current-bidding-num { margin-left: -20px; } } @media only screen and (max-width: 480px) { .slide-product-info-block { width: 80%; } } /*====end-ma-herobanner================= /*==== New Trend Product =================*/ #newtrendTabsCon{ width:100%; margin:0 auto; padding-top: 40px; overflow: hidden; text-align: center; } #newtrendTabsCon .tabItems{ display:block; margin:0 auto; padding:0; list-style:none; position:relative; width:1170px; text-align: center; } .tabItems li.tabItem{ display:inline-block; } #newtrendTabsCon .tabItem .bt{padding:10px 20px 10px;color:#143d52; border:1px solid #fff; text-decoration:none;outline:0;} #newtrendTabsCon .tabItem .bt:hover{ border-bottom-color:#143d52;} #newtrendTabsCon .tabItem .active{background:#143d52;color:#fff;border:1px solid #143d52; } #newtrendTabsCon .tabItem .active:hover{border:1px solid #143d52; } #newtrendTabsCon .tabItem > div:nth-child(2){ display:none; position:absolute; width:100%; top:40px; left:0; } #newtrendTabsCon .tabItem li{ border:0;} #newtrendTabsCon .tabItem:nth-child(1) > div{ display:block;} #newtrendTabsCon div.product-info{position: relative;opacity:1;} #newtrendTabsCon .container { display: inline-block; overflow: contain; } #newtrendTabsCon .container:after { content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } #newtrendTabsCon .container { display: block; } #newtrendTabsCon p { } #newtrendTabsCon .products-group .product-info { padding-bottom: 0; text-align: center; overflow: hidden; } #newtrendTabsCon .products-group h2.product-name { display: block; color: #636363; font-style: normal; text-rendering: optimizeLegibility; font-size: 14px; line-height: 20px; font-weight: normal; text-align: center; /*padding: 0 10%;*/ margin: 15px 10px 5px 10px; overflow: hidden; white-space: normal; height: 42px; } #newtrendTabsCon .products-group .price-box{ position: relative; text-align: center; margin: 0; } #newtrendTabsCon .products-group .price-box .old-price .price { color: #C3C3C3; } #newtrendTabsCon .products-group .price-box .regular-price .price, #newtrendTabsCon .products-group .price-box .special-price .price, #newtrendTabsCon .products-group .price-box .minimal-price .price { font-weight: bold; } #newtrendTabsCon .products-group .price-box .old-price .price { font-size: 13px; } #newtrendTabsCon .products-group .price-box .minimal-price .price-label { display: none; } .tabs { position: relative; margin: 0 auto; max-width: 1170px; width:100%; /*min-height:950px;*/ } .tabs input { position: absolute; z-index: 1000; width: 120px; height: 40px; left: 0px; top: 0px; opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); cursor: pointer; } .tabs input#tab-2{ left: 120px; } .tabs input#tab-3{ left: 240px; } .tabs input#tab-4{ left: 360px; } #newtrendTabsCon .tabs input { display: none; } .tabs label { background: #fff; font-size: 18px; line-height: 37px; height: 40px; position: relative; float: left; display: block; width: 25%; color:#008066; text-align: center; border: 1px solid #00ab86; border-right-color: rgba(0,0,0,0.1); cursor:pointer; } .tabs label:last-of-type { border-right-color: #00ab86; } /*.tabs label:hover { border-bottom:2px solid #143d52; }*/ .tabs label:after { content: ''; background: #143d52; position: absolute; bottom: -2px; left: 0; width: 100%; display: block; } .tabs input:hover + label { background: #fff; } .tabs label:first-of-type { z-index: 4; } .tab-label-2 { z-index: 3; } .tab-label-3 { z-index: 2; } .tab-label-4 { z-index: 1; } .tabs input:checked + label { background: #00ab86; z-index: 6; color:#fff; font-weight: bold; -webkit-animation: page 0.2s linear; -moz-animation: page 0.2s linear; -ms-animation: page 0.2s linear; -o-animation: page 0.2s linear; animation: page 0.2s linear; -webkit-transition: background 0.4s ease; -moz-transition: background 0.4s ease; -o-transition: background 0.4s ease; transition: background 0.4s ease; } .clear-shadow { /*clear: both;*/ } .content { position: relative; width: 100%; background: transparent; z-index: 5; clear: both; } .content > div.cycleslideshow { position: relative; /*top: 0;*/ z-index: 1; opacity: 0; width:100%; height: 0; overflow: visible; -webkit-transition: all linear 0.3s; -moz-transition: all linear 0.3s; -o-transition: all linear 0.3s; -ms-transition: all linear 0.3s; transition: all linear 0.3s; } .content div.cycle-carousel-wrap { opacity: 1; } .content-1{ display:block; width:100%; overflow:hidden; } .tabs input.tab-selector-1:checked ~ .content .content-1, .tabs input.tab-selector-2:checked ~ .content .content-2, .tabs input.tab-selector-3:checked ~ .content .content-3, .tabs input.tab-selector-4:checked ~ .content .content-4 { height: auto; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); z-index: 100; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition: all ease-out 0.2s 0.1s; -moz-transition: all ease-out 0.2s 0.1s; -o-transition: all ease-out 0.2s 0.1s; -ms-transition: all ease-out 0.2s 0.1s; transition: all ease-out 0.2s 0.1s; } .content div h2, .content div h3{ color: #398080; } .content div p { font-size: 14px; line-height: 22px; text-align: center; margin: 0; color: #777; } /*#newtrendTabsSlide .products-group li.item { width: 25%; }*/ #newtrendTabsCon .products-group > li img { max-width: 100%; height: auto; } @media only screen and (max-width:1169px){ #newtrendTabsCon .tabItems{ width:100% !important; } } @media only screen and (min-width:961px){ #newtrendTabsCon .products-group { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -8px; margin-right: -8px; } #newtrendTabsCon .products-group > li { display: block; -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; box-sizing: border-box; padding: 40px 0 0 0; } #newtrendTabsCon .products-group > li > a, #newtrendTabsCon .products-group > li > div { margin: 0 8px; } #newtrendTabsCon .products-group > li img { max-width: 100%; height: auto; } #newtrendTabsCon .products-group li.see-more > a > span.go-to-cate-wrapper{ display: block; background: #00ab86; position: relative; } #newtrendTabsCon .products-group li.see-more .go-to-cate { position: absolute; width: 100%; top: 50%; left: 0; font-size: 30px; text-transform: uppercase; line-height: 30px; margin-top: -15px; text-align: center; color: #fff; } #newtrendTabsCon .products-group li.see-more .go-to-cate:after { content: ''; display: inline-block; vertical-align: middle; width: 27px; height: 22px; margin-top: -4px; background-image: url("https://www.sa-buycar.com/skin/frontend/eirene/default/css/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"); -moz-background-size: 27px 44px; -webkit-background-size: 27px 44px; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } #newtrendTabsCon .products-group li.see-more .product-image:hover .go-to-cate > span { border-bottom: 2px solid #fff; } #newtrendTabsCon .products-group li.see-more img { opacity: 0; } #newtrendTabsCon .swiper-button { display: none; } /*#newtrendTabsCon .content { margin: 0 -10px; width: auto; }*/ .content-1, .content-3 { -webkit-transform: translateX(250px); -moz-transform: translateX(250px); -o-transform: translateX(250px); -ms-transform: translateX(250px); transform: translateX(250px); } .content-2, .content-4 { -webkit-transform: translateX(250px); -moz-transform: translateX(250px); -o-transform: translateX(250px); -ms-transform: translateX(250px); transform: translateX(250px); } .tabs a.content-tab-label-mobile { display: none; } } @media only screen and (max-width:960px){ #newtrendTabsCon { padding-top: 15px; } #newtrendTabsCon .swiper-button:hover, #newtrendTabsCon .swiper-button:focus, #newtrendTabsCon .swiper-button:active { color: #c20000; } #newtrendTabsCon .swiper-button-next { right: 0; text-align: right; } #newtrendTabsCon .swiper-button-prev { left: 0; text-align: left; } .tabs label { display: none; } .tabs a.content-tab-label-mobile, .tabs a.content-tab-label-mobile:hover { display: block; width: 100%; color: #fff; background: #00ab86; cursor: default; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; font-weight: bold; } .tabs a.content-tab-label-mobile:hover { text-decoration: underline; } #newtrendTabsSlide .products-group { -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); 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; } #newtrendTabsSlide .products-group .item { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative; } #newtrendTabsCon .products-group > li .product-image { margin: 20px 15px 0 15px; } #newtrendTabsCon .products-group li.see-more { display: none; } .content > div.cycleslideshow { display: block; opacity: 1; height: auto; margin-bottom: 40px; padding: 0 10px; overflow: hidden; } .content > div.cycleslideshow:last-child { margin-bottom: 20px; } #newtrendTabsCon .swiper-button { display: block; top: 34%; -moz-background-size: 20px 32px; -webkit-background-size: 20px 32px; background-size: 20px 32px; } #newtrendTabsCon .swiper-button.swiper-button-prev { background-image: url("https://www.sa-buycar.com/skin/frontend/eirene/default/css/data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2065'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%2300ab86'%2F%3E%3C%2Fsvg%3E"); background-position: left center; } #newtrendTabsCon .swiper-button.swiper-button-prev:hover, #newtrendTabsCon .swiper-button.swiper-button-prev:active { background-image: url("https://www.sa-buycar.com/skin/frontend/eirene/default/css/data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2065'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23c20000'%2F%3E%3C%2Fsvg%3E"); } #newtrendTabsCon .swiper-button.swiper-button-next { background-image: url("https://www.sa-buycar.com/skin/frontend/eirene/default/css/data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2065'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%2300ab86'%2F%3E%3C%2Fsvg%3E"); background-position: 14px center; } #newtrendTabsCon .swiper-button.swiper-button-next:hover, #newtrendTabsCon .swiper-button.swiper-button-next:active { background-image: url("https://www.sa-buycar.com/skin/frontend/eirene/default/css/data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2040%2065'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23c20000'%2F%3E%3C%2Fsvg%3E"); } } @media only screen and (max-width:770px){ #newtrendTabsCon .tabItems { width: 100%; } #newtrendTabsCon div.tabsHead { margin: 10px 0; } #newtrendTabsCon .tabsHead h3{ font-size: 22px; } .tabs a.content-tab-label-mobile, .tabs a.content-tab-label-mobile:hover { line-height: 32px; height: 35px; } } @media only screen and (max-width:480px){ #newtrendTabsCon{ /*min-height:700px;*/ } #newtrendTabsCon .tabItems { display:block; margin:0; padding:0; list-style:none; position:relative; width: 100%; } #newtrendTabsCon .tabItem .bt { padding: 9px; } .tabs label { width:100%; background: #fff; color: #143d52; border:0 !important; } .tabs label:hover { width:100%; background: #fff; color:#143d52; border:0; } .tabs input:checked + label { background: #143d52; z-index: 6; color:#fff; -webkit-animation: page 0.2s linear; -moz-animation: page 0.2s linear; -ms-animation: page 0.2s linear; -o-animation: page 0.2s linear; animation: page 0.2s linear; } #newtrendTabsCon .products-group .price-box .old-price .price { font-size: 11px; } } @media only screen and (max-width:320px){ #slideClr{display:block;} #newtrendTabsCon{ /*min-height:780px;*/ } #newtrendTabsCon .tabItems{ width: 100%; } /*#newtrendTabsCon .tabItems .container .products-group > li { width: 99%; margin-right: 1%; }*/ #newtrendTabsCon .tabItem .bt { padding: 9px; } #newtrendTabsCon .tabItem{ float:left; } .tabs label { width:100%; } } /*` ================================================ * * Start Featured Product Slide * ================================================ */ #featuredProductTabsCon .tabsHead span { background: #f1f1f1; padding: 2px 8px; border: 2px solid #00ab86; } #featuredProductTabsCon{ width:100%; margin:0 auto; overflow: hidden; } #featuredProductTabsCon .tabItems{ display:block; margin:0 auto; padding:0; list-style:none; position:relative; max-width:1170px; text-align: center; } #featuredProduct-cycle .item { width: 25%; } #featuredProductTabsCon .products-grid .product-info { padding-bottom: 0; } #featuredProductSlide{ margin:0 auto; padding: 20px 0 10px 0; text-align: center; background: #f1f1f1; } #featuredProductSlideContainer { max-width: 1190px; margin: auto; padding-bottom: 60px; } #featuredProductSlideContainer .cycle-pager span{ display: inline-block !important; width: 14px; height: 13px; font-size: 20px; line-height: 4px; padding: 3px; margin-right: 4px; border: 1px solid grey; border-radius: 50%; color: grey; } #featuredProductSlideContainer p{} #featuredProductSlideContainer img { width: 100%; height: auto; display: block; } #featuredProduct-cycle{ max-width:1190px;margin:0 auto; background: transparent; /*border:3px solid #f0f0f0;*/ } #featuredProduct-cycle .product-image{ position: relative; display: block; margin: 5px 10px 0 10px; } #featuredProduct-cycle .price-box { text-align: center; float: none; overflow: hidden; position: relative; } #featuredProduct-cycle .price-box .old-price{} #featuredProduct-cycle .price-box .special-price{} #featuredProduct-cycle .price-box .price{} #featuredProduct-cycle .price-box .old-price .price {} #featuredProduct-cycle .price-box .regular-price .price, #featuredProduct-cycle .price-box .special-price .price, #featuredProduct-cycle .price-box .minimal-price .price { font-weight: bold; } #featuredProduct-cycle .price-box .old-price .price { font-size: 13px; } #featuredProduct-cycle.cycle-slidesho .price-box .minimal-price .price-label { display: none; } #featuredProduct-cycle h2.product-name { width: 100%; display: block; color: #636363; text-rendering: optimizeLegibility; line-height: 20px; font-weight: normal; padding: 0 10%; overflow: hidden; white-space: normal; margin: 15px 0 5px 0; height: 40px; } #featuredProductSlideContainer.swiper-container-horizontal > .swiper-pagination { bottom: 0; } #featuredProductSlideContainer .swiper-pagination-bullet-active { background: #00ab86; } @media only screen and (max-width:1170px){ #featuredProductSlide, #featuredProduct-cycle{ width:100%; } } @media only screen and (max-width:1040px){ #featuredProductSlide{ width:100%; } #featuredProduct-cycle{ width: 100%; } #featuredProduct-cycle .cycle-slide{ width: 24%; } } @media only screen and (max-width:960px){ #featuredProductSlide{ width:100%; padding-top: 15px; } #featuredProduct-cycle{ width: 100%; } #featuredProduct-cycle .cycle-slide { width: 24%; } } @media only screen and (max-width:770px){ #featuredProductSlide{ width:100%; } #featuredProduct-cycle{ width: 100%; } #featuredProduct-cycle .cycle-slide{ width: 24%; } #featuredProductTabsCon .tabsHead h3{ font-size: 22px; } #featuredProductTabsCon div.tabsHead { margin: 10px 0; } } @media only screen and (max-width:480px){ #featuredProductSlide{ width:100%; } #featuredProduct-cycle{ width: 100%; } #featuredProduct-cycle .cycle-slide{ width: 100%; } #featuredProduct-cycle .price-box .old-price .price { font-size: 11px; } } @media only screen and (max-width:320px){ #featuredProductSlide{ width:98%; } #featuredProduct-cycle { width: 100%; } #featuredProduct-cycle .cycle-slide { width: 100%; } } /* === End Featured Product Slide ========================================= /*==== bottom banner =================*/ #bottomBanner{ position: relative; overflow: hidden; background-color: #f1f1f1; padding: 50px 0; } ul.b-banner{max-width:1170px; width:100%; margin:0 auto;} ul.b-banner li.column1, ul.b-banner li.column2 { width: 49.5%;} ul.b-banner li.column1 img, ul.b-banner li.column2 img { width: 100%;} ul.b-banner li.column1 { float: left;} ul.b-banner li.column2 { float: right;} @media only screen and (min-width:769px) and (max-width:960px){ #bottomBanner { padding: 20px 0; } } @media only screen and (max-width:768px) { ul.b-banner li.column1, ul.b-banner li.column2 { width: 100%; padding:10px 0 0;} #bottomBanner { padding: 0 10px 10px 10px; } } .amscroll-navbar { background: rgb(58,79,98); width: 100%; height: 30px; position: fixed; bottom: 0px; } .amscroll-page-num { background: #efefef; color: #111; display: none; padding: 0px 10px; } .amscroll-navbar ul { list-style: none; padding-top: 5px; } .amscroll-navbar ul li { display: inline; color: #fff; padding: 0px 5px; } .amscroll-navbar ul li.amscroll-current { background: #efefef; color: #000; } .amscroll-navbar div.amscroll-pager { width: 60%; float: left; } .amscroll-navbar div.amscroll-top { width: 20%; float: left; } .amscroll-navbar div.amscroll-top a { color: #fff; padding-top: 5px; display: block; } .amscroll-navbar div.amscroll-tab { width: 20%; float: left; } .amscroll-navbar div.amscroll-tab a { color: #fff; } .amscroll-load-button { background: rgb(58,79,98); border: 0px; color: #fff; font-weight: bold; padding: 10px 5px; margin: 5px 0px; width: 100%; font-size: 18px; } .amscroll-loading { background-repeat:no-repeat; background-position: 50% 50%; width: 100%; height: 50px; } /** * BelVG LLC. * * NOTICE OF LICENSE * * This source file is subject to the EULA * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://store.belvg.com/BelVG-LICENSE-COMMUNITY.txt * /*************************************** * MAGENTO EDITION USAGE NOTICE * *****************************************/ /* This package designed for Magento COMMUNITY edition * BelVG does not guarantee correct work of this extension * on any other Magento edition except Magento COMMUNITY edition. * BelVG does not provide extension support in case of * incorrect edition usage. /*************************************** * DISCLAIMER * *****************************************/ /* Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. ***************************************************** * @category Belvg * @package Belvg_FacebookFree * @copyright Copyright (c) 2010 - 2011 BelVG LLC. (http://www.belvg.com) * @license http://store.belvg.com/BelVG-LICENSE-COMMUNITY.txt */ .fb_button_ps { } .welcome-msg img { margin-left: 5px; } .m-fpc-debug-info { width: 420px; min-height: 115px; position: fixed; bottom: 10px; left: 10px; background: #47bbb3; color: #fff; z-index: 100000; font-family:Arial; } .m-fpc-debug-info .m-fpc-h1 { font-family:Arial; background: rgb(57, 172, 163); color: #fff; padding: 3px 3px 5px 10px; font-size: 14px; font-weight: bold; text-align:left; text-transform:none; } .m-fpc-debug-info .m-fpc-debug-info-main-block { padding: 2px 5px 10px 5px; } .m-fpc-debug-info .m-fpc-action { font-family:sans-serif,Arial; padding:0px; margin: 5px 0px 5px 0px; text-align: center; font-size: 20px; font-weight: 400; color: rgba(255, 255, 255, 0.5); text-transform:none; padding-top:15px; } .m-fpc-debug-info .m-fpc-ignored { padding-top: 0px !important; } .m-fpc-debug-info .m-fpc-hit-info { font-family:sans-serif,Arial; padding:0px; margin: 5px 0px 0px 0px; text-align: center; font-size: 30px; font-weight: 400; color: rgba(255, 255, 255, 0.95); text-transform:none; } .m-fpc-debug-info .m-fpc-time-text { font-family:sans-serif,Arial; padding:0px; margin: 5px 0px 5px 0px; text-align: center; font-size: 20px; font-weight: 400; color: rgba(255, 255, 255, 0.5); text-transform:none; } .m-fpc-debug-info .m-fpc-time { font-family:Arial; text-transform: uppercase; font-size: 76px; font-weight: 700; line-height: 65px; text-align:center; } .m-fpc-debug-info .m-fpc-time-sec-text { font-family:sans-serif,Arial; font-size: 35px; text-align:center; text-transform:none; } .m-fpc-debug-info.m-fpc-debug-info-not-cacheable { height: 220px; box-shadow: 0 0 0 5px #E0E0E0; } .m-fpc-debug-info.m-fpc-debug-info-hit { box-shadow: 0 0 0 5px #CCFFD3; } .m-fpc-debug-info.m-fpc-debug-info-miss { box-shadow: 0 0 0 5px #FECBCB; } .m-fpc-debug-info .m-fpc-disabled-info { font-family:sans-serif,Arial; padding:0px; margin: 12px 0px 0px 0px; text-align: center; font-size: 14px; font-weight: bold; color: rgba(255, 255, 255, 0.95); text-transform:none; color: #911E42 !important; } .m-fpc-debug-info .m-fpc-detail-info-hide-show-button-style { float: right; padding-right: 10px; text-decoration: underline; cursor: pointer; } .m-fpc-debug-info .m-fpc-info-scroll-hide { display: none; } /*scroll*/ .m-fpc-debug-info .m-fpc-info-scroll { overflow-y: auto; height: 350px; padding: 0px 5px 10px 5px; text-align: justify; } .m-fpc-debug-info .m-fpc-info-scroll::-webkit-scrollbar { width: 7px; } .m-fpc-debug-info .m-fpc-info-scroll::-webkit-scrollbar-track { background-color: rgba(255,255,255,0.2); border-radius: 7px; } .m-fpc-debug-info .m-fpc-info-scroll::-webkit-scrollbar-thumb { background-color: #EAEAEA; border-radius: 7px; } .m-fpc-debug-info .m-fpc-info-scroll::-webkit-scrollbar-thumb:hover { background-color: #EAEAEA; border-radius: 7px; } /*detail info table*/ .m-fpc-debug-info .m-fpc-detail-info-table { display:table; width:100%; padding-top: 3px; } .m-fpc-debug-info .m-fpc-detail-row { display:table-row; } .m-fpc-debug-info .m-fpc-detail-col { display:table-cell; text-align: left; padding: 2px; vertical-align: top; width: 50%; font-family:sans-serif,Arial; padding:5px; text-align: left; font-size: 10px; text-transform:none; color: #222 !important; } .m-fpc-debug-info .m-fpc-dark { background-color: #D9F0EE; } .m-fpc-debug-info .m-fpc-light { background-color: #ECF8F7; } /*flush cache button*/ .m-fpc-debug-info .m-fpc-flush-cache-button-style { float: left; padding-right: 10px; text-decoration: underline; cursor: pointer; } .m-fpc-debug-info .m-fpc-flush-cache-button-style-flushed { float: left; color: #911E42; } /*small debug info block*/ .m-fpc-debug-info-small { width: 120px; min-height: 10px; position: fixed; bottom: 10px; left: 10px; background: #47bbb3; color: #fff; z-index: 100000; font-family:Arial; } .m-fpc-debug-info-small .m-fpc-debug-info-main-block-small { padding: 2px 5px 10px 5px; } .m-fpc-debug-info-small .m-fpc-hit-info-small { font-family:sans-serif,Arial; padding:0px; margin: 5px 0px 0px 0px; text-align: left; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.95); text-transform:none; } .m-fpc-debug-info-small .m-fpc-flush-cache-button-style-small { float: left; padding-right: 10px; text-decoration: underline; cursor: pointer; } .m-fpc-debug-info-small .m-fpc-flush-cache-button-style-flushed { float: left; color: #911E42; } .m-fpc-debug-info-small.m-fpc-debug-info-hit { box-shadow: 0 0 0 3px #CCFFD3; } .m-fpc-debug-info-small.m-fpc-debug-info-miss { box-shadow: 0 0 0 3px #FECBCB; } .m-fpc-debug-info-small.m-fpc-debug-info-not-cacheable { box-shadow: 0 0 0 5px #E0E0E0; } .block-layered-nav dd.border-filter ol {/* margin:10px;*/ margin: 5px;} .block-layered-nav dd ol {} .block-layered-nav dt { cursor: pointer; } .block-layered-nav .track-tmaln { /*-moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; border: 1px solid #CCCCCC; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;*/ border-radius: 30px; background-color: #f0f0f0; position: relative; height: 10px; cursor: pointer; z-index: 0; margin-bottom: 10px; -moz-border-radius: 30px; -moz-box-shadow: inset 0 1px 4px #888; -webkit-box-shadow: inset 0 1px 4px #888; box-shadow: inset 0 1px 4px #888; } .price-slide { text-align:center} .block-layered-nav .input-tmaln { display: none; /*border: 1px solid #ffa20f;*/ width: 50%; -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; /*background-color: #FFFFFF;*/ /*border: 1px solid #CCCCCC;*/ /*border-radius: 3px 3px 3px 3px;*/ /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;*/ } .label-tmaln { color: #333333; width: 2em; float: left; text-align: right; margin-right: 0.5em; /*display: block;*/ display: none; } .ajaxlayerednavigation-image-active { cursor: pointer; display: inline; z-index: 9999; } .ajaxlayerednavigation-image { display: inline; z-index: 999; } .ajaxlayerednavigation-image img{ border-bottom: 2px solid black; padding-bottom: 2px; } .ajaxlayerednavigation-img-link { text-decoration: none; } .ajaxlayerednavigation-img { margin-right: 5px; } .ajax-category-image { float: left; padding: 5px 10px 5px 0px; } .ajax-category-text { margin: 0 0 2px; } .ajaxlayerednavigation-count-plus, .ajaxlayerednavigation-count { margin-left: 5px; } .ajaxlayerednavigation-count-active { } .block-layered-nav dd:after { display:block; content:"."; clear:both; font-size:0; line-height:0; height:0; overflow:hidden; } .block-layered-nav .handle-tmaln { position: absolute; top: -5px; /*width: 0.55em;*/ z-index: 2; -moz-border-radius: 4px 4px 4px 4px; } .block-layered-nav a.handle-tmaln-btn { /*background: url("https://www.sa-buycar.com/skin/frontend/eirene/default/images/ajaxlayerednavigation/range.png") no-repeat top left;*/ display: block; width: 18px; height: 18px; cursor: move; background: #008066; border-radius: 50%; border: 2px solid #fff; -webkit-box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 5px 15px -3px rgba(0, 0, 0, 0.7); box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.7); } .block-layered-nav .apply-price-btn { margin-top: 7px; } .block-layered-nav .price-cover { background-color: #64cea6; border-radius: 30px; -moz-border-radius: 30px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; cursor: pointer; height: 10px; margin-bottom: 10px; position: relative; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; z-index: 1; } /*div.block-layered-nav span.ajaxlayered-expander { width: auto; background: url('https://www.sa-buycar.com/skin/frontend/eirene/default/images/ajaxlayerednavigation/left.png') no-repeat right center; display: block; }*/ /*div.block-layered-nav dt.active span.ajaxlayered-expander { width: auto; background: url('https://www.sa-buycar.com/skin/frontend/eirene/default/images/ajaxlayerednavigation/down.png') no-repeat right center; display: block; }*/ div.ajaxlayerednav-content dd.last { background-clip: padding-box; background-color: #FFFFFF; } div.ajaxlayerednav-content ol.currently li { padding: 0 20px 0 5px; float: left; } div.ajaxlayerednav-content ol.currently li a.btn-remove { right: 3px; top: 4px; } div.ajaxlayerednav-content dd { padding: 5px; background: none; position: absolute; top: -2000px; left: 0; z-index: 1000; min-width: 160px; /* padding: 4px 0;*/ margin: 1px 0 0; list-style: none; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); *border-right-width: 2px; *border-bottom-width: 2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } div.ajaxlayerednav-content dd li{ float:left; padding: 2px 0 2px 0; clear: both; list-style: none; } div.ajaxlayerednav-content dt { float: left; cursor: pointer; /* background: url('https://www.sa-buycar.com/skin/frontend/eirene/default/images/ar_down.png') no-repeat right 10px;*/ padding-right: 15px; } div.ajaxlayerednav-content dt.active-title { /* background: url('https://www.sa-buycar.com/skin/frontend/eirene/default/images/ar_right.png') no-repeat right 10px;*/ color: #3da22a; } div.ajaxlayerednav-content dt.vertical-style { float:none; } div.ajaxlayerednav-content #narrow-by-list { position: relative; } div.ajaxlayerednav-content .ajaxlayerednavigation-image-active { float: none; } div.ajaxlayerednav-content .ajaxlayerednavigation-image { float: none; } div.ajaxlayerednav-menu dd.last { background-clip: padding-box; background-color: #FFFFFF; } div.ajaxlayerednav-menu ol.currently li { padding: 0 20px 0 5px; } div.ajaxlayerednav-menu ol.currently li a.btn-remove { right: 3px; top: 4px; } div.ajaxlayerednav-menu dd { padding: 5px; background: none; position: absolute; top: -2000px; left: 0; z-index: 1000; min-width: 160px; /* padding: 4px 0;*/ margin: 1px 0 0; list-style: none; background-color: #ffffff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); *border-right-width: 2px; *border-bottom-width: 2px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } div.ajaxlayerednav-menu dd li{ float:left; padding: 2px 0 2px 0; clear: both; list-style: none; } div.ajaxlayerednav-menu dt { cursor: pointer; /* background: url('https://www.sa-buycar.com/skin/frontend/eirene/default/images/ar_down.png') no-repeat right 10px;*/ padding-right: 15px; } div.ajaxlayerednav-menu dt.active-title { /* background: url('https://www.sa-buycar.com/skin/frontend/eirene/default/images/ar_right.png') no-repeat right 10px;*/ color: #3da22a; } div.ajaxlayerednav-menu dt.vertical-style { float:none; } div.ajaxlayerednav-menu #narrow-by-list { position: relative; } div.ajaxlayerednav-menu .ajaxlayerednavigation-image-active { float: none; } div.ajaxlayerednav-menu .ajaxlayerednavigation-image { float: none; } .input-range{text-align: center;} #to-price-range, #from-price-range{ border: none; box-shadow: none; -webkit-box-shadow:none; -moz-box-shadow: none; pointer-events: none; } #to-price-range, #to-price-range-output { float: right; padding-right: 0;margin-right: -10px;text-align: right;} #from-price-range, #from-price-range-output {float:left;text-align: left;padding-left: 0;margin-left: -15px;} .block-layered-nav .price-range-output { width: 50%; opacity: 0; font-size: 14px; } #narrow-by-list ol li{overflow: hidden;padding-bottom: 15px;} #narrow-by-list ol li:first-child { padding-top: 15px; } #narrow-by-list ol li:last-child { padding-bottom: 15px; } #narrow-by-list ol li a.ajax-option-link{ float: left; text-align: left; display: inline-block; } #narrow-by-list ol li.input-range{overflow: hidden;padding: 15px 20px;} .ajax-option-checkbox{float: left;margin-top: 2px;} .to-between{display:none; padding-top: 4px;float: left;width: 26%;} .block-layered-nav dd.border-filter { border:1px solid #ccc; border-top: 0; } #seo_cms_category { min-height: 49px; max-height: 249px; border: 1px solid #ccc; padding: 5px; overflow: auto; } #seo_cms_category .seodt { color: #000000; font-size: 11px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; margin-bottom: 5px; } #seo_cms_category .seodd { } #seo_cms_category li { padding-bottom: 3px; } #seo_cms_category p { margin-bottom: 3px; }