/* Theme Name: LEVELUP Theme URI: http://puzzlerbox.com/levelup/ Author: PuzzlerBox Author URI: https://themeforest.net/user/puzzlerbox Description: LEVELUP is a unique feature-packed WordPress Theme created with attention to detail, design trends and web development technologies. Version: 2.0.11 License: Themeforest Split Licence License URI: - Text Domain: LEVELUP Domain Path: /languages/ Tags: grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, flexible-header, footer-widgets, custom-background, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-image-header, featured-images, front-page-post-form, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, blog, e-commerce, news, photography, portfolio */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 - Reset 2.0 - Typography 3.0 - Elements 4.0 - Forms 5.0 - Navigation 5.1 - Links 5.2 - Menus 6.0 - Accessibility 7.0 - Alignments 8.0 - Clearings 9.0 - Widgets 10.0 - Content 10.1 - Posts and pages 10.2 - Asides 10.3 - Comments 11.0 - Infinite scroll 12.0 - Media 12.1 - Captions --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 - Reset --------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } html { font-size: 62.5%; /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */ overflow-y: scroll; /* Keeps page centered in all browsers regardless of content height */ -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */ -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ } *, *:before, *:after { /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ -webkit-box-sizing: border-box; /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */ -moz-box-sizing: border-box; /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */ box-sizing: border-box; } body { background: #ffffff; /* f7f8fa Fallback for when there is no custom background color defined. */ } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } ol, ul { list-style: none; } table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after { content: ""; } blockquote { quotes: "" ""; } a:focus { outline: 0; } a:hover, a:active { outline: 0; } a img { border: 0; } a { text-decoration: none; } /*-------------------------------------------------------------- 3.0 Elements --------------------------------------------------------------*/ hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } dt { font-weight: bold; } /*dd {*/ /*margin: 0 1.5em 1.5em;*/ /*}*/ img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 0; } table { margin: 0 0 1.5em; width: 100%; } th { font-weight: bold; } .hidden { display: none; } /*-------------------------------------------------------------- 4.0 Forms --------------------------------------------------------------*/ button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ outline: 0; } input[type="checkbox"], input[type="radio"] { padding: 0; /* Addresses excess padding in IE8/9 */ } input[type="search"] { -webkit-appearance: none; /* Addresses appearance set to searchfield in S5, Chrome */ -webkit-box-sizing: content-box; /* Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) */ -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #333; border: 1px solid #ccc; outline: 0; appearance: none; -webkit-appearance: none; /*border-radius: 3px;*/ } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { padding: 3px; } textarea { overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ padding-left: 3px; vertical-align: top; /* Improves readability and alignment in all browsers */ width: 100%; } /*-------------------------------------------------------------- 5.0 Navigation --------------------------------------------------------------*/ .site-header { position: absolute; margin: 0 auto; } /*-------------------------------------------------------------- 5.2 Menus --------------------------------------------------------------*/ .fa-sub-indicator { display: inline-block; width: 17px; position: relative; left: 8px; top: 1px; height: 14px; } .rdy-menu .sub-menu .fa-sub-indicator { position: absolute; top: 50%; transform: translateY(-50%); right: 0; left: auto; } .rdy-menu .fa-sub-indicator [class^="icon-"], .rdy-menu .fa-sub-indicator [class*=" icon-"] { color: #888; font-size: 12px; line-height: 16px; height: auto; background-color: transparent!important; } .rdy-menu .fa-sub-indicator i { width: 8px; display: block; } .rdy-menu .wide ul .fa-sub-indicator { display: none !important; } #menu-mobile .fa-sub-indicator, .sub-menu .fa-sub-indicator { float: right } /*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu li { position: relative; } .sf-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99; } #header-menu.slidedown-full-layout .overflow-full-menu .rdy-menu ul ul { display: none !important; } #header-menu.slidedown-full-layout .overflow-full-menu .rdy-menu .sub-menu, #header-menu.slidedown-full-layout .overflow-full-menu .rdy-menu .sub-menu li { width: auto; min-width: auto; } #header-menu:not(.slidedown-full-layout) .sf-menu li:hover > ul, #header-menu:not(.slidedown-full-layout) .sf-menu li.sfHover > ul { display: block; } .sf-menu a { display: block; position: relative; } .sf-menu ul ul { top: 0; left: 100%; } .sf-menu ul { min-width: 12em; /* allow long menu items to determine submenu width */ *width: 12em; /* no auto sub width for IE7, see white-space comment below */ } .sf-menu ul li { text-align: left; } .sf-menu a { text-decoration: none; zoom: 1; /* IE7 */ } .sf-menu li { /*background: #BDD2FF;*/ white-space: nowrap; /* no need for Supersubs plugin */ *white-space: normal; /* ...unless you support IE7 (let it wrap) */ } .sf-menu li:hover, .sf-menu li.sfHover { /* only transition out, not in */ -webkit-transition: none; transition: none; } .rdy-menu ul li a, .rdy-menu ul li .title { display: block; margin: 0; padding: 10px 20px !important; } /*#header-menu.slidedown-full-layout .rdy-menu ul {*/ /*padding: 20px 0;*/ /*}*/ #header-menu.slidedown-full-layout .rdy-menu ul li a, #header-menu.slidedown-full-layout .rdy-menu ul li .title { padding: 0px 10px !important; } .rdy-menu .sub-menu { box-shadow: 0 2px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.2); } .rdy-menu .wide .sub-menu { padding: 15px 0px; } .rdy-menu .wide > .sub-menu > li { display: table-cell; width: 2%; min-width: 250px; float:none !important; vertical-align: top; } .rdy-menu .wide li { border-top: 0 !important; } .rdy-menu .wide .sub-menu li { border-left-width: 1px !important; } .rdy-menu .wide .sub-menu li { float: left; width: 100%; padding: 0 15px 0 15px; border-left: 0 solid #3d3d3d; } .rdy-menu .wide > .sub-menu > li:first-child { border-left: 0 !important; } .rdy-menu .wide .sub-menu li a { padding: 0 20px; } .rdy-menu .wide > .sub-menu .sub-menu { position: static !important; top: 0 !important; display: block !important; border: 0 !important; opacity: 1 !important; } .rdy-menu .wide .sub-menu li ul { display: block; left: 0; padding: 0; position: relative; top: 0; visibility: visible; background-color: transparent !important; } .rdy-menu .wide .sub-menu li ul li { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; border-left: 0; } .rdy-menu .wide li a.no-link:hover { cursor: default; } .rdy-menu .wide .hide-mega-title > a { display: none !important; } .sf-menu ul ul { margin-left: 1px; } .rdy-menu > li:not(.wide) li:last-child { border-bottom: 0 !important; } .rdy-menu .wide .widget img { width: 100%; } .rdy-menu .wide .widget { margin-bottom: 0; } .rdy-menu ul li.menu-is-title { border-bottom: none !important; } /*-------------------------------------------------------------- 6.0 Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:hover, .screen-reader-text:active, .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar */ } /*-------------------------------------------------------------- 7.0 Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 30px; margin-bottom: 10px; } .alignright { display: inline; float: right; margin-left: 30px; margin-bottom: 10px; } .aligncenter { clear: both; display: block; margin: 0 auto; margin-bottom: 10px; } .set-align-left { display: inline; float: left; } .set-align-right { display: inline; float: right; } .set-align-center { clear: both; display: block; margin: 0 auto; } /*-------------------------------------------------------------- 8.0 Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .clearfix:before, .clearfix:after, .entry-content:before, .entry-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ''; display: table; } .clear:after, .clearfix:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } .float-right { float: right } .float-left { float: left } /*-------------------------------------------------------------- 9.0 Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; } /* Make sure select elements fit in widgets */ .widget select { max-width: 100%; } /* Search widget */ .widget_search .search-submit, .widget_product_search .search-submit { display: none; } /*-------------------------------------------------------------- 10.0 Content --------------------------------------------------------------*/ body.boxed .wrapper-inner { overflow: visible; } .wrapper-inner { width: 100%; overflow: hidden; } #content { position: relative; } .home-wrap { padding-top: 3em; margin-bottom: 0; padding-bottom: 0; position: relative; z-index: 100; background-color: #f8f8f8; } html:not(.js) .home-wrap { padding-top: 0; } html.no-overflow-y { overflow-y: hidden!important; } .row.no-gutter { margin-left: 0; margin-right: 0; } .row.no-gutter [class*='col-']:not(:first-child), .row.no-gutter [class*='col-']:not(:last-child) { padding-right: 0; padding-left: 0; } /*-------------------------------------------------------------- 10.1 Posts and pages --------------------------------------------------------------*/ .sticky { } .hentry { /*margin: 0 0 1.5em;*/ } /*.byline,*/ .updated { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-content, .entry-content, .entry-summary { /*margin: 1.5em 0 0;*/ } .page-links { clear: both; margin: 0 0 1.5em; } .not-found-text { margin-top: 25px; font-size: 50px; color: #222222; text-align: center; font-family: 'Open Sans', Helvetica, Arial, Verdana, sans-serif; font-weight: 800; font-style: normal } /*-------------------------------------------------------------- 10.2 Asides --------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /*-------------------------------------------------------------- 10.3 Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { } /*-------------------------------------------------------------- 11.0 Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .paginator, .infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */ .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */ .infinity-end.neverending .site-footer { display: block; } .infinite-scroll .rdy-load-more { margin-top: 50px; } /*-------------------------------------------------------------- 12.0 Media --------------------------------------------------------------*/ .page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers */ embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- 12.1 Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } /*-------------------------------------------------------------- 12.2 Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; margin-left: -0.5em; margin-right: -0.5em; } .gallery-caption { width: auto !important; max-width: 100%; margin-top: 18px; margin-bottom: 18px; display: table; table-layout: fixed; } .gallery:after { display: table; content: ""; clear: both; } .gallery-item { margin: 0; float: left; padding: 0.5em; } .gallery-item img { width: 100%; } .gallery-columns-1 .gallery-item { width: 100%; float: none; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-3 .gallery-item { width: 33.3333%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery-columns-5 .gallery-item { width: 20%; } .gallery-columns-6 .gallery-item { width: 16.6667%; } .gallery-columns-7 .gallery-item { width: 14.2857%; } .gallery-columns-8 .gallery-item { width: 12.5%; } .gallery-columns-9 .gallery-item { width: 11.1111%; } .gallery-columns-2 .gallery-item:nth-child(2n+1), .gallery-columns-3 .gallery-item:nth-child(3n+1), .gallery-columns-4 .gallery-item:nth-child(4n+1), .gallery-columns-5 .gallery-item:nth-child(5n+1), .gallery-columns-6 .gallery-item:nth-child(6n+1), .gallery-columns-7 .gallery-item:nth-child(7n+1), .gallery-columns-8 .gallery-item:nth-child(8n+1), .gallery-columns-9 .gallery-item:nth-child(9n+1) { clear: left; } /*-------------------------------------------------------------- Animation --------------------------------------------------------------*/ /*@media screen and (min-width: 992px){*/ .animate-element, .animate-element.rdy_button { opacity: 0; -webkit-perspective: 1000; } /*}*/ /*.ie-mobile .animate-element, .no-cssanimations .animate-element.start-animation, .wpb_animate_when_almost_visible, .animate-element.start-animation { opacity: 1; }*/ @-webkit-keyframes fadeInUp2 { 0% { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp2 { 0% { opacity: 0; -webkit-transform: translate3d(0, 100px, 0); transform: translate3d(0, 100px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp2 { -webkit-animation-name: fadeInUp2; animation-name: fadeInUp2; } @-webkit-keyframes fadeInLeft2 { 0% { opacity: 0; -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft2 { 0% { opacity: 0; -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft2 { -webkit-animation-name: fadeInLeft2; animation-name: fadeInLeft2; } @-webkit-keyframes fadeInRight2 { 0% { opacity: 0; -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight2 { 0% { opacity: 0; -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight2 { -webkit-animation-name: fadeInRight2; animation-name: fadeInRight2; } @-webkit-keyframes menushow { 0% {opacity: 0 !important;} 100% {opacity: 1 !important;} } @keyframes menushow { 0% {opacity: 0 !important;} 100% {opacity: 1 !important;} } @-webkit-keyframes arrow-next { 0% {right: 0;} 50% {right: -4px;} 100% {right: 0;} } @-webkit-keyframes arrow-prev { 0% {left: 0;} 50% {left: -4px;} 100% {left: 0;} } @keyframes arrow-next { 0% {right: 0;} 50% {right: -4px;} 100% {right: 0;} } @keyframes arrow-prev { 0% {left: 0;} 50% {left: -4px;} 100% {left: 0;} } @-webkit-keyframes hoverBomb { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(.5, .5); transform: scale(.5, .5) } 100% { opacity: 1; filter: none; -webkit-transform: scale(1, 1); transform: scale(1, 1) } } @keyframes hoverBomb { 0% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transform: scale(.5, .5); transform: scale(.5, .5) } 100% { opacity: 1; filter: none; -webkit-transform: scale(1, 1); transform: scale(1, 1) } } @-webkit-keyframes arrow { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(6px); transform: translateY(6px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes arrow { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(6px); transform: translateY(6px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes arrow-up { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes arrow-up { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes arrow-down { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes arrow-down { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes arrow-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes arrow-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes arrow-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes arrow-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } /* test */ #header { z-index: 31; height: 0; } #header:not(.boxed) { padding-left: 60px; padding-right: 60px; } body.with-topbar #header.static-layout, body.with-topbar #header-menu.static-layout { top: auto } body.admin-bar #header.slidedown-layout, body.admin-bar #header.slidedown-full-layout { top: 0px } #header-menu.boxed.slidedown-layout #main-menu { margin-right: 100px; } /*#header-menu #main-menu .col-td { padding-left: 0; padding-right: 0; }*/ /*body.admin-bar #header { top: 32px }*/ /* fixed */ #header.fixed-layout, #header.slidedown-layout, #header.slidedown-full-layout { width: 100%; } #header.fixed-layout, #header-menu.fixed-layout { position: absolute; } #header.fixed-layout, #header-menu.fixed-layout { position: fixed; } body.with-slide-topbar #header.fixed-layout, body.with-slide-topbar #header-menu.fixed-layout { position: absolute; } body.with-slide-topbar #header.fixed-layout.m-fixed, body.with-slide-topbar #header-menu.fixed-layout.m-fixed { position: fixed !important; } body.with-sticky-topbar #top-bar { position: fixed; } @media only screen and (min-width: 992px) { #header.slidedown-layout, #header.slidedown-full-layout { position: fixed !important; } } #header.fixed-layout .menu-right-side, #header.slidedown-layout .menu-right-side, #header.slidedown-full-layout .menu-right-side { position: absolute !important; } #header.slidedown-layout #logo, #header.slidedown-full-layout #logo { top: 60px; position: absolute; } /*#header.slidedown-layout .menu-right-side, #header.slidedown-full-layout .menu-right-side { top: 10px !important; }*/ #header > .container { position: relative; height: 0px; } #header-menu.fixed-layout .container, #header-menu.static-layout .container, #header-menu.slidedown-layout .container, #header-menu.slidedown-full-layout .container { position: relative; } /*@media only screen and (min-width: 992px){ #header #logo, #header .menu-right-side { top: 0px !important; } }*/ #header.search-opened { z-index: 34; } #header .search-close-icon li { backface-visibility: hidden; } #top-bar { width: 100%; z-index: 32; position: relative; overflow: hidden; background-color: #000; height: 30px; line-height: 30px; position:relative; color: #fff } #top-bar .col-td { width: 33%; vertical-align: top; } #top-bar .center { text-align: center; } #top-bar .right { text-align: right; } #top-bar .elem { display: inline-block; line-height: 1; } #top-bar .top-bar-social a:first-child { margin-left: 0; } #top-bar .top-bar-social a:last-child { margin-right: 0; } #top-bar a:hover { text-decoration: underline; } #top-bar .searchform .searchform-s { background-color: transparent; border: 1px solid rgba(255, 255, 255, .5); } #top-bar .elem .icon { margin-right: 6px; } #top-bar .left .elem { margin-right: 20px; } #top-bar .center .elem { margin-left: 10px; margin-right: 10px; } #top-bar .right .elem { margin-left: 20px; } #top-bar .elem .cart { font-size: 18px; } #top-bar .menu li, #bottom-bar .menu li { display: inline-block; margin-left: 6px; margin-right: 6px; } @media only screen and (max-width: 992px) { #top-bar:not(.show_mobile) { display: none; } } /*#header .menu-right-side {*/ /*top: 0 !important;*/ /*}*/ /*#header .search-close-icon { backface-visibility: hidden; }*/ /*#header.static-layout #logo, #header.static-layout .menu-right-side { position: absolute !important; }*/ html:not(.no-cssanimations) .animate_when_almost_visible { opacity: 0; -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; -o-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } html:not(.no-cssanimations) .animate_when_almost_visible.start_animation:not(.zoom-reverse).top-t-bottom { -webkit-animation-name: anim_ttb; -moz-animation-name: anim_ttb; -o-animation-name: anim_ttb; animation-name: anim_ttb; opacity: 1; } html:not(.no-cssanimations) .animate_when_almost_visible.start_animation:not(.zoom-reverse).bottom-t-top { -webkit-animation-name: anim_btt; -moz-animation-name: anim_btt; -o-animation-name: anim_btt; animation-name: anim_btt; opacity: 1; } html:not(.no-cssanimations) .animate_when_almost_visible.start_animation:not(.zoom-reverse).left-t-right { -webkit-animation-name: anim_ltr; -moz-animation-name: anim_ltr; -o-animation-name: anim_ltr; animation-name: anim_ltr; opacity: 1; } html:not(.no-cssanimations) .animate_when_almost_visible.start_animation:not(.zoom-reverse).right-t-left { -webkit-animation-name: anim_rtl; -moz-animation-name: anim_rtl; -o-animation-name: anim_rtl; animation-name: anim_rtl; opacity: 1; } html:not(.no-cssanimations) .animate_when_almost_visible.start_animation:not(.zoom-reverse).zoom-in { -webkit-animation-name: zzoom-in; -moz-animation-name: zzoom-in; -o-animation-name: zzoom-in; animation-name: zzoom-in; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } html:not(.no-cssanimations) .animate_when_almost_visible.start_animation:not(.zoom-reverse).zoom-out { -webkit-animation-name: zzoom-out; -moz-animation-name: zzoom-out; -o-animation-name: zzoom-out; animation-name: zzoom-out; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } html:not(.no-cssanimations) .animate_when_almost_visible.zoom-reverse { -webkit-animation-name: zoom-reverse; -moz-animation-name: zoom-reverse; -o-animation-name: zoom-reverse; animation-name: zoom-reverse; -webkit-animation-duration: 0.3s; -moz-animation-duration: 0.3s; -o-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); opacity: 0; } html:not(.no-cssanimations) .animate_when_almost_visible.start_animation:not(.zoom-reverse).alpha-anim { -webkit-animation-name: alpha-in; -moz-animation-name: alpha-in; -o-animation-name: alpha-in; animation-name: alpha-in; opacity: 1; } html:not(.no-cssanimations) .animate_when_almost_visible[data-speed="100"] { -webkit-animation-duration: 0.1s; -moz-animation-duration: 0.1s; -o-animation-duration: 0.1s; animation-duration: 0.1s; } html:not(.no-cssanimations) .animate_when_almost_visible[data-speed="200"] { -webkit-animation-duration: 0.2s; -moz-animation-duration: 0.2s; -o-animation-duration: 0.2s; animation-duration: 0.2s; } html:not(.no-cssanimations) .animate_when_almost_visible[data-speed="300"] { -webkit-animation-duration: 0.3s; -moz-animation-duration: 0.3s; -o-animation-duration: 0.3s; animation-duration: 0.3s; } html:not(.no-cssanimations) .animate_when_almost_visible[data-speed="500"] { -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; } html:not(.no-cssanimations) .animate_when_almost_visible[data-speed="600"] { -webkit-animation-duration: 0.6s; -moz-animation-duration: 0.6s; -o-animation-duration: 0.6s; animation-duration: 0.6s; } html:not(.no-cssanimations) .animate_when_almost_visible[data-speed="700"] { -webkit-animation-duration: 0.7s; -moz-animation-duration: 0.7s; -o-animation-duration: 0.7s; animation-duration: 0.7s; } html:not(.no-cssanimations) .animate_when_almost_visible[data-speed="800"] { -webkit-animation-duration: 0.8s; -moz-animation-duration: 0.8s; -o-animation-duration: 0.8s; animation-duration: 0.8s; } html:not(.no-cssanimations) .animate_when_almost_visible[data-speed="900"] { -webkit-animation-duration: 0.9s; -moz-animation-duration: 0.9s; -o-animation-duration: 0.9s; animation-duration: 0.9s; } html:not(.no-cssanimations) .animate_when_almost_visible[data-speed="1000"] { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } /* Top to bottom keyframes */ @-webkit-keyframes anim_ttb { 0% { -webkit-transform: translate3d(0, -100px, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; } } @-moz-keyframes anim_ttb { 0% { -moz-transform: translate3d(0, -100px, 0); opacity: 0; } 100% { -moz-transform: translate3d(0, 0, 0); opacity: 1; } } @-o-keyframes anim_ttb { 0% { -o-transform: translate3d(0, -100px, 0); opacity: 0; } 100% { -o-transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes anim_ttb { 0% { transform: translate3d(0, -100px, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } /* Bottom to top keyframes */ @-webkit-keyframes anim_btt { 0% { -webkit-transform: translate3d(0, 100px, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; } } @-moz-keyframes anim_btt { 0% { -moz-transform: translate3d(0, 100px, 0); opacity: 0; } 100% { -moz-transform: translate3d(0, 0, 0); opacity: 1; } } @-o-keyframes anim_btt { 0% { -o-transform: translate3d(0, 100px, 0); opacity: 0; } 100% { -o-transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes anim_btt { 0% { transform: translate3d(0, 100px, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } /* Left to right keyframes */ @-webkit-keyframes anim_ltr { 0% { -webkit-transform: translate3d(-100px, 0, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; } } @-moz-keyframes anim_ltr { 0% { -moz-transform: translate3d(-100px, 0, 0); opacity: 0; } 100% { -moz-transform: translate3d(0, 0); opacity: 1; } } @-o-keyframes anim_ltr { 0% { -o-transform: translate3d(-100px, 0); opacity: 0; } 100% { -o-transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes anim_ltr { 0% { transform: translate3d(-100px, 0, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } /* Right to left keyframes */ @-webkit-keyframes anim_rtl { 0% { -webkit-transform: translate3d(100px, 0, 0); opacity: 0; } 100% { -webkit-transform: translate3d(0, 0, 0); opacity: 1; } } @-moz-keyframes anim_rtl { 0% { -moz-transform: translate3d(100px, 0, 0); opacity: 0; } 100% { -moz-transform: translate3d(0, 0, 0); opacity: 1; } } @-o-keyframes anim_rtl { 0% { -o-transform: translate3d(100px, 0, 0); opacity: 0; } 100% { -o-transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes anim_rtl { 0% { transform: translate3d(100px, 0, 0); opacity: 0; } 100% { transform: translate3d(0, 0, 0); opacity: 1; } } /* Appear from center in keyframes */ @-webkit-keyframes zzoom-in { 0% { -webkit-transform: scale(0.5); opacity: 0.1; } 100% { -webkit-transform: scale(1); opacity: 1; } } @-moz-keyframes zzoom-in { 0% { -moz-transform: scale(0.5); opacity: 0.1; } 100% { -moz-transform: scale(1); opacity: 1; } } @-o-keyframes zzoom-in { 0% { -o-transform: scale(0.5); opacity: 0.1; } 100% { -o-transform: scale(1); opacity: 1; } } @keyframes zzoom-in { 0% { transform: scale(0.5); opacity: 0.1; } 100% { transform: scale(1); opacity: 1; } } /* Appear from center out keyframes */ @-webkit-keyframes zzoom-out { 0% { -webkit-transform: scale(1.5); opacity: 0.1; } 100% { -webkit-transform: scale(1); opacity: 1; } } @-moz-keyframes zzoom-out { 0% { -moz-transform: scale(1.5); opacity: 0.1; } 100% { -moz-transform: scale(1); opacity: 1; } } @-o-keyframes zzoom-out { 0% { -o-transform: scale(1.5); opacity: 0.1; } 100% { -o-transform: scale(1); opacity: 1; } } @keyframes zzoom-out { 0% { transform: scale(1.5); opacity: 0.1; } 100% { transform: scale(1); opacity: 1; } } /* Disappear from center keyframes */ @-webkit-keyframes zoom-reverse { 0% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.5); opacity: 0; } } @-moz-keyframes zoom-reverse { 0% { -moz-transform: scale(1); opacity: 1; } 100% { -moz-transform: scale(0.5); opacity: 0; } } @-o-keyframes zoom-reverse { 0% { -o-transform: scale(1); opacity: 1; } 100% { -o-transform: scale(0.5); opacity: 0; } } @keyframes zoom-reverse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.5); opacity: 0; } } /* Alpha keyframes */ @-webkit-keyframes alpha-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes alpha-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes alpha-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes alpha-in { 0% { opacity: 0; } 100% { opacity: 1; } } .animate_when_almost_visible.fade-out { -webkit-animation-name: iso-fade-out; -moz-animation-name: iso-fade-out; -o-animation-name: iso-fade-out; animation-name: iso-fade-out; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); /*-webkit-animation-duration: 0.3s;*/ /*-moz-animation-duration: 0.3s;*/ /*-o-animation-duration: 0.3s;*/ animation-duration: 0.3s; opacity: 0; } @-webkit-keyframes iso-fade-out { 0% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.5); opacity: 0; } } @-moz-keyframes iso-fade-out { 0% { -moz-transform: scale(1); opacity: 1; } 100% { -moz-transform: scale(0.5); opacity: 0; } } @-o-keyframes iso-fade-out { 0% { -o-transform: scale(1); opacity: 1; } 100% { -o-transform: scale(0.5); opacity: 0; } } @keyframes iso-fade-out { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.5); opacity: 0; } } /** * EasyZoom core styles */ .easyzoom { position: relative; /* 'Shrink-wrap' the element */ display: inline-block; *display: inline; *zoom: 1; } .easyzoom img { vertical-align: bottom; } .easyzoom.is-loading img { cursor: progress; } .easyzoom.is-ready img { cursor: grab; } .easyzoom.is-error img { cursor: not-allowed; } .easyzoom-notice { position: absolute; top: 50%; left: 50%; z-index: 150; width: 10em; margin: -1em 0 0 -5em; line-height: 2em; text-align: center; background: #FFF; box-shadow: 0 0 10px #888; } .easyzoom-flyout { position:absolute; z-index: 100; overflow: hidden; background: #FFF; } /** * EasyZoom layout variations */ .easyzoom--overlay .easyzoom-flyout { top: 0; left: 0; width: 100%; height: 100%; } .easyzoom--adjacent .easyzoom-flyout { top: 0; left: 100%; width: 100%; height: 100%; margin-left: 20px; } .easyzoom-flyout { position: absolute; z-index: 97; overflow: hidden; background: #ffffff; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity .3s ease-out; transition: opacity .3s ease-out; } .easyzoom-flyout:hover{ opacity: 1; } .easyzoom-flyout img { max-width: 1400px !important; width: 1400px !important; } @media screen and (min-width: 992px) { body.footer-uncovering #page { position: relative; z-index: 1; } body.footer-uncovering footer { z-index: 0; position: fixed !important; bottom: 0; left: 0; right: 0; } } /* Loading */ #fullscreen-project[data-slidertransition="slide2"].rsSlide, #fullscreen-project[data-slidertransition="slide3"].rsSlide { transition-duration: 0s !important; transition-timing-function: inherit !important; } #page-loading-screen .reveal-1 { position: absolute; width: 100%; height: 100% } #page-loading-screen[data-effect="slide"].from-right .reveal-1 { left: 100%; } #page-loading-screen[data-effect="slide"].from-bottom .reveal-1 { top: 100%; } #page-loading-screen[data-effect="slide"] { background-color: transparent !important; } body[data-page-transitions="true"] #page-loading-screen[data-effect="slide"] { display: block } #page-loading-screen[data-effect="slide"].from-right { left: -100% } #page-loading-screen[data-effect="slide"].from-left { left: 100% } #page-loading-screen[data-effect="slide"].from-bottom { top: -100% } #page-loading-screen[data-effect="slide"].from-top { top: 100% } #page-loading-screen.from-right.in-from, #page-loading-screen.from-left.in-from { left: 0% } #page-loading-screen.from-bottom.in-from, #page-loading-screen.from-top.in-from { top: 0% } .no-cssanimations #page-loading-screen.loaded .reveal-1 { display: none } #page-loading-screen[data-effect="slide"].from-left .reveal-1 { left: -100% } #page-loading-screen[data-effect="slide"].from-top .reveal-1 { top: -100% } #page-loading-screen.loaded.from-right .reveal-1 { backface-visibility: hidden; animation: anim-effect-2-1 2.00s 0s cubic-bezier(0.77, 0, 0.175, 1) forwards } #page-loading-screen.loaded.from-right.in-from .reveal-1 { animation: anim-effect-2-1 2.00s 0s cubic-bezier(0.77, 0, 0.175, 1) forwards } #page-loading-screen.loaded.from-left .reveal-1 { backface-visibility: hidden; animation: anim-effect-l-2-1 2.00s 0s cubic-bezier(0.77, 0, 0.175, 1) forwards } #page-loading-screen.loaded.from-left.in-from .reveal-1 { animation: anim-effect-l-2-1 2.00s 0s cubic-bezier(0.77, 0, 0.175, 1) forwards } #page-loading-screen.loaded.from-bottom .reveal-1 { backface-visibility: hidden; animation: anim-effect-bottom-2 2.00s 0s cubic-bezier(0.77, 0, 0.175, 1) forwards } #page-loading-screen.loaded.from-bottom.in-from .reveal-1 { animation: anim-effect-bottom-2 2.00s 0s cubic-bezier(0.77, 0, 0.175, 1) forwards } #page-loading-screen.loaded.from-top .reveal-1 { backface-visibility: hidden; animation: anim-effect-top-2 2.00s 0s cubic-bezier(0.77, 0, 0.175, 1) forwards } #page-loading-screen.loaded.from-top.in-from .reveal-1 { animation: anim-effect-top-2 2.00s 0s cubic-bezier(0.77, 0, 0.175, 1) forwards } body[data-page-transitions="true"] #page-loading-screen[data-effect="slide"].hidden { display: none } body[data-page-transitions="true"] #page-loading-screen[data-effect="slide"].hidden.loaded.in-from { display: block; } body[data-page-transitions="true"] #page-loading-screen[data-effect="regular"], body[data-page-transitions="true"] #page-loading-screen[data-effect="regular"] .loading-icon { display: block; opacity: 1 } #page-loading-screen .loading-icon { background-repeat: no-repeat; background-position: center center; display: block; position: absolute; opacity: 0; top: 0; left: 0; width: 100%; height: 100% } .default-loading-icon { top: 50%; border-radius: 100%; height: 40px; width: 40px; margin: 0 auto; display: block; position: relative; border: 3px solid #ccc; margin-top: -20px } .default-loading-icon:before { position: absolute; content: ""; border-color: rgba(0, 0, 0, 1) transparent transparent; border-radius: 100%; border-style: solid; border-width: 3px; display: block; height: 100%; width: 100%; top: -3px; left: -3px } .default-skin-loading-icon { width: 100%; height: 100%; display: block; } .loading-icon .loader-icon .spinner { width: 60px; height: 60px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto } .loading-icon .loader-icon .spinner { animation: loader-rotate-all 1s linear infinite } .loading-icon .loader-icon .spinner .right-side, .loading-icon .loader-icon .spinner .left-side { animation: loader-fade-in-first 1.2s linear infinite alternate } .loading-icon .loader-icon .spinner.color-2 .right-side, .loading-icon .loader-icon .spinner.color-2 .left-side { animation: loader-fade-in-second 1.2s linear infinite alternate } .loading-icon .loader-icon .right-side, .loading-icon .loader-icon .left-side { width: 50%; height: 100%; position: absolute; top: 0; overflow: hidden } .loading-icon .loader-icon .left-side { left: 0 } .loading-icon .loader-icon .right-side { right: 0 } .loading-icon .loader-icon .bar { width: 100%; height: 100%; border-radius: 200px 0 0 200px; border: 3px solid #eeee22; position: relative } .loading-icon .loader-icon .bar:after { content: ""; width: 3px; height: 3px; display: block; background: #eeee22; position: absolute; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px } .loading-icon .loader-icon .right-side .bar { border-radius: 0 200px 200px 0; border-left: none; transform: rotate(-10deg); transform-origin: left center; animation: material-rotate-right 0.75s linear infinite alternate } .loading-icon .loader-icon .right-side .bar:after { bottom: -3px; left: -3px } .loading-icon .loader-icon .left-side .bar { border-right: none; transform: rotate(10deg); transform-origin: right center; animation: material-rotate-left 0.75s linear infinite alternate } .loading-icon .loader-icon .left-side .bar:after { bottom: -3px; right: -3px } .loading-icon .loader-icon { top: 50%; height: 65px; width: 65px; position: relative; margin: -32px auto 0 auto; display: block } @-webkit-keyframes anim-effect-2-1 { 0% { -ms-transform: translateX(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 30%, 100% { -ms-transform: translateX(-100%); -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @keyframes anim-effect-2-1 { 0% { -ms-transform: translateX(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 30%, 100% { -ms-transform: translateX(-100%); -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @-webkit-keyframes anim-effect-2-2 { 0%, 14.5% { -ms-transform: translateX(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 34.5%, 100% { -ms-transform: translateX(-100%); -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @keyframes anim-effect-2-2 { 0%, 14.5% { -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 34.5%, 100% { -ms-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @-webkit-keyframes anim-effect-l-2-1 { 0% { -ms-transform: translateX(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 30%, 100% { -ms-transform: translateX(100%); -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @keyframes anim-effect-l-2-1 { 0% { -ms-transform: translateX(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 30%, 100% { -ms-transform: translateX(100%); -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @-webkit-keyframes anim-effect-l-2-2 { 0%, 14.5% { -ms-transform: translateX(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 34.5%, 100% { -ms-transform: translateX(100%); -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @keyframes anim-effect-l-2-2 { 0%, 14.5% { -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 34.5%, 100% { -ms-transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @-webkit-keyframes anim-effect-bottom-2 { 0% { -ms-transform: translateY(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 30%, 100% { -ms-transform: translateY(-100%); -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @keyframes anim-effect-bottom-2 { 0% { -ms-transform: translateY(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 30%, 100% { -ms-transform: translateY(-100%); -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @-webkit-keyframes anim-effect-bottom-1 { 0%, 14.5% { -ms-transform: translateY(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 34.5%, 100% { -ms-transform: translateY(-100%); -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @keyframes anim-effect-bottom-1 { 0%, 14.5% { -ms-transform: translateY(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 34.5%, 100% { -ms-transform: translateY(-100%); -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @-webkit-keyframes anim-effect-top-2 { 0% { -ms-transform: translateY(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 30%, 100% { -ms-transform: translateY(100%); -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @keyframes anim-effect-top-2 { 0% { -ms-transform: translateY(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 30%, 100% { -ms-transform: translateY(100%); -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @-webkit-keyframes anim-effect-top-1 { 0%, 14.5% { -ms-transform: translateY(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 34.5%, 100% { -ms-transform: translateY(100%); -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @keyframes anim-effect-top-1 { 0%, 14.5% { -ms-transform: translateY(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 34.5%, 100% { -ms-transform: translateY(100%); -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1) } } @keyframes spinning_animation { 0% { transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg) } 50% { transform: scale(0.8) rotate(360deg); -o-transform: scale(0.8) rotate(360deg) } 100% { transform: scale(1) rotate(720deg); -o-transform: scale(1) rotate(720deg) } } @-webkit-keyframes spinning_animation { 0% { -webkit-transform: scale(1) rotate(0deg) } 50% { -webkit-transform: scale(0.8) rotate(360deg) } 100% { -webkit-transform: scale(1) rotate(720deg) } } @keyframes bounce_in_animation { 0% { transform: scale(0, 0); -o-transform: scale(0, 0) } 20% { transform: scale(1.4, 1.4); -o-transform: scale(1.4, 1.4) } 50% { transform: scale(0.8, 0.8); -o-transform: scale(0.8, 0.8) } 85% { transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1) } 100% { transform: scale(1, 1); -o-transform: scale(1, 1) } } @-webkit-keyframes bounce_in_animation { 0% { -webkit-transform: scale(0, 0) } 20% { -webkit-transform: scale(1.4, 1.4) } 50% { -webkit-transform: scale(0.8, 0.8) } 85% { -webkit-transform: scale(1.1, 1.1) } 100% { -webkit-transform: scale(1, 1) } } @keyframes grow_in_animation { 0% { transform: scale(0, 0); -o-transform: scale(0, 0) } 100% { transform: scale(1, 1); -o-transform: scale(1, 1) } } @-webkit-keyframes grow_in_animation { 0% { -webkit-transform: scale(0, 0) } 100% { -webkit-transform: scale(1, 1) } } @keyframes material-rotate-left { to { transform: rotate(30deg) } from { transform: rotate(175deg) } } @keyframes material-rotate-right { from { transform: rotate(-175deg) } to { transform: rotate(-30deg) } } @keyframes loader-rotate-all { from { transform: rotate(0deg) } to { transform: rotate(-360deg) } } @keyframes loader-fade-in-first { from { opacity: 1 } to { opacity: 0 } } @keyframes loader-fade-in-second { from { opacity: 0 } to { opacity: 1 } }