File: /home/mmickelson/dragonexpert.com/wp-content/themes/coni/style.css
@charset "UTF-8";
/*
Theme Name: Coni
Theme URI: https://www.quemalabs.com/theme/coni/
Author: Quema Labs
Author URI: https://www.quemalabs.com
Description: Coni is a multipurpose theme, focus on corporate and business. With responsive and minimalist design. Includes an awesome One Page design for the front page, with unique section to present your content, like Services, Features, Team members, Videos, Images, Testimonials, Pricing tables, Clients, Blog posts and much more.
Version: 1.0.12
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.en.html
Text Domain: coni
Tags: light, white, gray, right-sidebar, two-columns, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, photoblogging
*/
/*
----------------------------------------------------------------
TABLE OF CONTENTS
----------------------------------------------------------------
1. Header
2. Home
3. Blog & Pages
4. Sidebar
5. Footer
6. Comments
7. Flickity
8. Pace
9. WordPress Default
10. External Plugins
11. Global Styles
12. Responsive Styles
LESS Variables and Mixins
----------------------------------------------------------------
*/
/*
==========================================
1. Header
==========================================
*/
#header {
margin-bottom: 3.125rem;
position: relative;
z-index: 1;
-webkit-transition: padding 200ms;
-o-transition: padding 200ms;
transition: padding 200ms;
padding: 0.9375rem 0;
background-color: #fff;
background-size: cover;
background-position: center;
}
.home.page #header {
margin-bottom: 0;
}
.search_open #header {
padding-top: 80px;
}
#header .container {
position: relative;
}
.ql_logo_nav {
opacity: 0;
-webkit-transform: translate(0, -200px);
-ms-transform: translate(0, -200px);
-o-transform: translate(0, -200px);
transform: translate(0, -200px);
-webkit-transition: opacity 600ms, transform 600ms;
-o-transition: opacity 600ms, transform 600ms;
transition: opacity 600ms, transform 600ms;
position: relative;
z-index: 30;
}
.pace-done .ql_logo_nav,
.no-js .ql_logo_nav {
opacity: 1;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.logo_container {
margin: 0;
display: block;
}
.logo_container h1 {
margin-bottom: 0;
font-size: 30px;
font-size: 1.875rem;
font-weight: bold;
}
.logo_container .ql_logo {
font-size: 30px;
font-size: 1.875rem;
color: #383838;
font-weight: bold;
-webkit-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
text-transform: uppercase;
}
.logo_container .ql_logo:hover {
text-decoration: none;
}
.logo_container .logo_desc {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 14px;
font-size: 0.875rem;
color: #b3b3b3;
margin: 0;
}
.logo_container .logo_desc_wrap {
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
display: inline-block;
margin-left: 15px;
}
#header:hover .logo_desc_wrap,
#header:hover .ql_nav_btn {
opacity: 1;
}
.touch #header .logo_desc_wrap,
.touch #header .ql_nav_btn,
.blog #header .logo_desc_wrap,
.blog #header .ql_nav_btn {
opacity: 1;
}
/*-----------------------------*/
/*
Nav Menu
---------------------------------------*/
.navbar-toggle .icon-bar {
background-color: #555555;
}
#ql_nav_btn {
position: absolute;
right: 20px;
top: 0;
margin: 0;
padding: 7px;
}
#ql_nav_btn i {
font-size: 28px;
font-size: 1.75rem;
}
#ql_main-navigation.in {
overflow: visible;
}
#ql_nav_collapse {
padding: 0;
}
#jqueryslidemenu {
margin: 0;
display: block;
min-height: 0;
text-align: right;
border: none;
}
#jqueryslidemenu a {
color: #383838;
opacity: 0.7;
}
/*Top level list items*/
#jqueryslidemenu ul.nav > li {
margin-left: 0;
display: inline-block;
float: none;
}
/*Top level menu link items style*/
#jqueryslidemenu ul.nav > li > a {
text-decoration: none;
font-size: 14px;
font-size: 0.875rem;
text-transform: uppercase;
-webkit-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
padding: 0.78571428571429em 1.07142857142857em;
}
#jqueryslidemenu ul.nav > li > a:hover {
background-color: rgba(0, 0, 0, 0.03);
}
/* Active item ----------*/
/*1st sub level menu*/
#jqueryslidemenu ul.nav > li > ul {
position: absolute;
top: 100%;
padding: 0;
}
.dropdown.open .dropdown-menu {
display: none;
}
.dropdown:hover > .dropdown-menu,
.dropdown.open:hover .dropdown-menu {
display: block;
margin-top: 0;
}
#jqueryslidemenu ul.nav > li > ul > li a {
font-size: 13px;
font-size: 0.8125rem;
padding: 0.5em 1.42857142857143em;
font-weight: bold;
}
#jqueryslidemenu ul.nav > li > ul > li a:hover {
background-color: rgba(0, 0, 0, 0.04);
}
#jqueryslidemenu ul.nav > li > ul > li.menu-item-has-children > a:hover,
#jqueryslidemenu ul.nav > li > ul > li.has-image > a:hover {
background-color: transparent;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
background-color: transparent;
}
#jqueryslidemenu ul.nav > li > ul > li > ul > li a {
font-size: 12px;
font-size: 0.75rem;
display: block;
font-weight: normal;
}
#jqueryslidemenu ul.nav > li > ul > li.has-image {
padding: 5px;
}
#jqueryslidemenu ul.nav > li > ul .has-image a {
width: 220px;
border: none;
padding: 0;
cursor: inherit;
outline: 0!important;
}
#jqueryslidemenu ul.nav > li > ul .has-image img {
width: 100%;
height: auto;
}
/* Multi level dropdown -------*/
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
display: none;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
/* Dropdown arrow ------------*/
.navbar .dropdown-toggle b {
color: #999999;
height: 6px;
}
/*
Login and Cart Buttons
---------------------------------------*/
.login_cart_wrap {
text-align: right;
margin-top: 40px;
padding-left: 0;
}
.login_cart_wrap {
-webkit-transform: translate(0, -200px);
-ms-transform: translate(0, -200px);
-o-transform: translate(0, -200px);
transform: translate(0, -200px);
-webkit-transition: opacity 600ms 200ms, transform 600ms 200ms;
-o-transition: opacity 600ms 200ms, transform 600ms 200ms;
transition: opacity 600ms 200ms, transform 600ms 200ms;
}
.pace-done .login_cart_wrap,
.no-js .login_cart_wrap {
opacity: 1;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
/* Login ------------*/
.login_btn_wrap {
display: inline-block;
float: right;
}
.ql_login-btn {
color: #999999;
text-transform: uppercase;
font-size: 14px;
font-size: 0.875rem;
padding: 5px 25px;
margin: 5px 0;
border-right: 1px solid #b3b3b3;
display: block;
outline: 0!important;
}
/* Cart ------------*/
.ql_cart_wrap {
display: inline-block;
float: right;
position: relative;
overflow: hidden;
}
.ql_cart_wrap:hover {
overflow: visible;
}
.ql_cart-btn {
background-color: transparent;
border: none;
padding: 10px 45px 10px 15px;
margin-left: 10px;
position: relative;
}
.ql_cart_wrap:hover .ql_cart-btn {
background-color: #fff;
z-index: 25;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
color: #999999 !important;
}
.ql_cart_wrap:hover .ql_cart-btn::before {
content: " ";
position: absolute;
bottom: -10px;
right: 0;
left: 0;
height: 10px;
background-color: #fff;
width: 100%;
color: #999999 !important;
}
.woocommerce-cart .ql_cart_wrap:hover .ql_cart-btn,
.woocommerce-checkout .ql_cart_wrap:hover .ql_cart-btn {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.woocommerce-cart .ql_cart_wrap:hover .ql_cart-btn::before,
.woocommerce-checkout .ql_cart_wrap:hover .ql_cart-btn::before {
display: none;
}
.ql_cart-btn .count,
.ql_cart_wrap:hover .ql_cart-btn .count {
color: #999999;
}
.ql_cart-btn i {
font-size: 30px;
font-size: 1.875rem;
position: absolute;
top: 5px;
right: 5px;
-webkit-transition: opacity 100ms, transform 300ms;
-o-transition: opacity 100ms, transform 300ms;
transition: opacity 100ms, transform 300ms;
}
.ql_cart-btn i.ql-chevron-down {
opacity: 0;
font-size: 16px;
font-size: 1rem;
right: 15px;
top: 15px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.ql_cart_wrap:hover .ql_cart-btn i {
opacity: 0;
}
.ql_cart_wrap:hover .ql_cart-btn i.ql-chevron-down {
opacity: 1;
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.ql_adding_tocart .ql_cart-btn i {
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
-webkit-animation-name: moveBag;
animation-name: moveBag;
-webkit-animation-delay: 800ms;
animation-delay: 800ms;
-webkit-animation-duration: 200ms;
animation-duration: 200ms;
}
@-webkit-keyframes moveBag {
0% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(0, 2px);
-ms-transform: translate(0, 2px);
-o-transform: translate(0, 2px);
transform: translate(0, 2px);
}
}
@-moz-keyframes moveBag {
0% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(0, 2px);
-ms-transform: translate(0, 2px);
-o-transform: translate(0, 2px);
transform: translate(0, 2px);
}
}
@-o-keyframes moveBag {
0% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(0, 2px);
-ms-transform: translate(0, 2px);
-o-transform: translate(0, 2px);
transform: translate(0, 2px);
}
}
@keyframes moveBag {
0% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
100% {
-webkit-transform: translate(0, 2px);
-ms-transform: translate(0, 2px);
-o-transform: translate(0, 2px);
transform: translate(0, 2px);
}
}
/*
Nav Button
---------------------------------------*/
.ql_nav_btn {
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
background-color: transparent;
border: none;
color: #b3b3b3;
font-size: 24px;
font-size: 1.5rem;
position: absolute;
left: 20px;
top: 5rem;
top: 8.5vh;
outline: 0!important;
width: 40px;
height: 40px;
opacity: 0;
border-radius: 3px;
}
.ql_nav_btn i {
position: absolute;
text-align: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
line-height: 40px;
-webkit-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.ql_nav_btn i.fa-arrow-left,
.ql_nav_btn.open i.fa-navicon {
opacity: 0;
}
.ql_nav_btn.open i.fa-arrow-left {
opacity: 1;
}
.ql_nav_btn:hover {
color: #fff;
background-color: #00b09a;
}
.ql_nav_btn:active {
opacity: 0.8;
filter: alpha(opacity=80);
}
.nav_sidebar_wrap {
width: 100%;
height: 100%;
overflow-x: hidden;
}
/*
Nav Sidebar
---------------------------------------*/
.nav_sidebar {
position: fixed;
top: 0;
left: -19.6875em;
width: 17.1875em;
background-color: #0a9878;
z-index: 10;
height: 100%;
-webkit-transition: all 250ms ease-in;
-o-transition: all 250ms ease-in;
transition: all 250ms ease-in;
color: #999999;
}
.nav_sidebar a {
color: #999999;
}
.nav_sidebar a:hover {
color: #fff;
}
.nav_sidebar .table-wrap {
display: table;
height: 100%;
width: 100%;
}
.nav_sidebar .table-top,
.nav_sidebar .table-center,
.nav_sidebar .table-bottom {
display: table-row;
width: 100%;
}
.nav_sidebar .table-top {
vertical-align: top;
}
.nav_sidebar .table-center {
vertical-align: middle;
}
.nav_sidebar .table-bottom {
vertical-align: bottom;
}
.nav_sidebar.open {
left: 0;
}
.nav_sidebar #jqueryslidemenu ul.nav {
margin-right: 0;
}
.nav_sidebar #jqueryslidemenu ul.nav > li {
opacity: 0;
-webkit-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
-webkit-transform: translate(40px, 0) !important;
-ms-transform: translate(40px, 0) !important;
-o-transform: translate(40px, 0) !important;
transform: translate(40px, 0) !important;
margin-left: 0;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li {
opacity: 1;
-webkit-transform: translate(0, 0) !important;
-ms-transform: translate(0, 0) !important;
-o-transform: translate(0, 0) !important;
transform: translate(0, 0) !important;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(1) {
-webkit-transition-delay: 100ms;
transition-delay: 100ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(2) {
-webkit-transition-delay: 200ms;
transition-delay: 200ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(3) {
-webkit-transition-delay: 300ms;
transition-delay: 300ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(4) {
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(5) {
-webkit-transition-delay: 500ms;
transition-delay: 500ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(6) {
-webkit-transition-delay: 600ms;
transition-delay: 600ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(7) {
-webkit-transition-delay: 700ms;
transition-delay: 700ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(8) {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(9) {
-webkit-transition-delay: 900ms;
transition-delay: 900ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(10) {
-webkit-transition-delay: 1000ms;
transition-delay: 1000ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(11) {
-webkit-transition-delay: 1100ms;
transition-delay: 1100ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(12) {
-webkit-transition-delay: 1200ms;
transition-delay: 1200ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(13) {
-webkit-transition-delay: 1300ms;
transition-delay: 1300ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(14) {
-webkit-transition-delay: 1400ms;
transition-delay: 1400ms;
}
.nav_sidebar.open #jqueryslidemenu ul.nav > li:nth-child(15) {
-webkit-transition-delay: 1500ms;
transition-delay: 1500ms;
}
.nav_sidebar #jqueryslidemenu ul.nav > li > a:hover {
background-color: rgba(255, 255, 255, 0.04);
}
/* Author Widget ------------------*/
.ql_author-widget {
padding: 1.875rem;
text-align: center;
opacity: 0;
-webkit-transform: translate(0, 30px);
-ms-transform: translate(0, 30px);
-o-transform: translate(0, 30px);
transform: translate(0, 30px);
-webkit-transition: all 600ms;
-o-transition: all 600ms;
transition: all 600ms;
-webkit-transition-delay: 200ms;
transition-delay: 200ms;
}
.nav_sidebar.open .ql_author-widget {
opacity: 1;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.ql_author-widget img {
width: 3.75em;
height: 3.75em;
border-radius: 100%;
}
.ql_author-widget .ql_author_name {
color: #b3b3b3;
}
.ql_author-widget p {
font-size: 12px;
font-size: 0.75rem;
}
/* Close button */
.ql_nav_close {
position: absolute;
right: -2.22222222em;
top: 0;
width: 2.22222222222222em;
height: 2.22222222222222em;
display: block;
line-height: 2.22222222222222em;
text-align: center;
font-size: 18px;
background-color: #00b09a;
color: #fff;
-webkit-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
outline: 0!important;
border-radius: 0 3px 3px 0;
}
.ql_nav_close:hover {
background-color: #00b09a;
color: #fff;
}
/*
Sub Nav Sidebar
---------------------------------------*/
.sub_nav_header {
padding: 1.875rem;
text-align: center;
font-size: 11px;
font-size: 0.6875rem;
}
.sub_nav_header ul {
list-style: none;
text-align: left;
}
.sub_nav_header ul li {
margin-bottom: 15px;
font-size: 12px;
font-size: 0.75rem;
color: #b3b3b3;
}
.sub_nav_header ul li i {
font-size: 14px;
font-size: 0.875rem;
margin-right: 8px;
}
.sub_nav_header p {
color: #8c8c8c;
}
#header_bottom {
padding: 1.875rem;
text-align: center;
font-size: 11px;
font-size: 0.6875rem;
}
/*
Search
---------------------------------------*/
.ql_search_btn {
float: right;
position: relative;
}
.ql_search_btn #searchform {
margin: 0;
}
.ql_search_btn .input-search {
border-radius: 0;
height: 50px;
width: 50px;
margin-bottom: 0;
border: none;
background-color: rgba(0, 0, 0, 0.2);
-webkit-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
font-size: 0;
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
.ql_search_btn:hover .input-search {
width: 200px;
font-size: 1em;
padding-right: 50px;
-webkit-box-shadow: none;
box-shadow: none;
}
.ql_search_btn i {
position: absolute;
top: 17px;
right: 19px;
font-size: 14px;
color: #fff;
opacity: 70;
filter: alpha(opacity=7000);
}
.ql_search_btn #searchsubmit {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
padding: 0;
background-color: transparent;
font-size: 0;
border: none;
}
/*
==========================================
2. Home
==========================================
*/
/*
Welcome Section
---------------------------------------*/
.welcome-section {
position: relative;
}
.welcome-section img {
width: 100%;
height: auto;
}
.welcome-intro {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 2;
text-align: center;
width: 68%;
text-transform: uppercase;
}
.welcome-intro .intro-line {
font-size: 60px;
font-size: 3.75rem;
font-weight: 900;
margin-bottom: 0.83333333333333em;
}
.welcome-intro .intro-line {
opacity: 0;
-webkit-transition: 600ms all;
-o-transition: 600ms all;
transition: 600ms all;
-webkit-transform: translate(0, -60px);
-ms-transform: translate(0, -60px);
-o-transform: translate(0, -60px);
transform: translate(0, -60px);
}
.pace-done .welcome-intro .intro-line,
.no-js .welcome-intro .intro-line {
opacity: 1;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.welcome-intro .btn-ql {
opacity: 0;
-webkit-transition: 600ms all;
-o-transition: 600ms all;
transition: 600ms all;
-webkit-transform: translate(0, -30px);
-ms-transform: translate(0, -30px);
-o-transform: translate(0, -30px);
transform: translate(0, -30px);
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
}
.pace-done .welcome-intro .btn-ql,
.no-js .welcome-intro .btn-ql {
opacity: 1;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
/*
Services Section
---------------------------------------*/
.services-section {
padding: 4.5% 0 2.5% 0;
}
.service {
margin-bottom: 3%;
}
.service .service-icon-wrap {
display: inline-block;
width: 12%;
margin-right: 3%;
text-align: right;
vertical-align: top;
}
.service .service-icon-wrap img {
max-width: 100%;
height: auto;
}
.service .service-text {
display: inline-block;
vertical-align: top;
width: 79%;
}
.service .service-btn {
text-transform: uppercase;
}
.service .service-btn i {
margin-left: 5px;
font-size: 14px;
font-size: 0.875rem;
}
.services-section .service {
opacity: 0;
-webkit-transition: 600ms all;
-o-transition: 600ms all;
transition: 600ms all;
-webkit-transform: translate(0, 50px);
-ms-transform: translate(0, 50px);
-o-transform: translate(0, 50px);
transform: translate(0, 50px);
-webkit-transition-delay: 800ms;
transition-delay: 800ms;
}
.pace-done .services-section .service,
.no-js .services-section .service {
opacity: 1;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
/*
Quote Section
---------------------------------------*/
.quote-section {
position: relative;
padding-top: 5%;
background-color: #fafafa;
}
.quote-wrap {
position: relative;
display: inline-block;
width: 39%;
padding: 5% 2% 5% 8%;
vertical-align: top;
z-index: 1;
}
.quote-wrap blockquote {
border: none;
color: #383838;
font-size: 26px;
font-size: 1.625rem;
padding: 0;
font-weight: normal;
}
.quote-cite {
font-weight: bold;
color: #383838;
}
.quote-cite span {
margin-left: 10px;
font-weight: normal;
color: #999999;
}
.laptop-wrap {
position: relative;
display: inline-block;
width: 60%;
vertical-align: top;
z-index: 1;
}
.quote-screen {
top: 6.5%;
left: 50%;
-webkit-transform: translate(-50.7%, 0);
-ms-transform: translate(-50.7%, 0);
-o-transform: translate(-50.7%, 0);
transform: translate(-50.7%, 0);
position: absolute;
width: 65.3%;
height: auto;
}
.quote-laptop {
width: 100%;
}
.quote-background {
position: absolute;
z-index: 0;
right: 0;
top: 0;
bottom: 0;
width: 50%;
background-color: #50e3c2;
}
/*
Video Section
---------------------------------------*/
.video-wrap {
display: inline-block;
width: 50%;
vertical-align: top;
}
.responsive-wrap {
height: 0;
padding-bottom: 56%;
position: relative;
}
.responsive-wrap iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.video-text-wrap {
width: 50%;
display: inline-block;
padding: 5%;
vertical-align: top;
}
.video-text-wrap .video-text-title {
position: relative;
margin-bottom: 1.42857142857143em;
}
.video-text-wrap .video-text-title::after {
content: " ";
position: absolute;
bottom: -0.71428571em;
left: 0;
border-top: 1px solid #eeeeee;
height: 1px;
width: 50px;
display: block;
}
.video-text-wrap p {
margin-bottom: 1.25em;
}
/*
Testimonials Section
---------------------------------------*/
.testimonials-section {
padding: 10% 20%;
background-position: center;
background-size: cover;
position: relative;
}
.testimonials-section::before {
content: " ";
z-index: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
background-color: #000;
opacity: 0.8;
}
.testimonial {
width: 100%;
margin-bottom: 20px;
}
.testimonial blockquote {
color: #fff;
position: relative;
z-index: 1;
border: none;
text-align: center;
font-size: 33px;
font-size: 2.0625rem;
}
.testimonial .testimonial-cite {
position: relative;
z-index: 1;
display: block;
text-align: center;
margin-bottom: 25px;
font-size: 18px;
font-size: 1.125rem;
}
.testimonial .testimonial-cite span {
margin-left: 10px;
font-size: 14px;
font-size: 0.875rem;
}
.testimonials-wrap .flickity-page-dots {
margin-top: 20px;
}
.testimonials-wrap .flickity-page-dots .dot {
border: 2px solid rgba(255, 255, 255, 0.6);
-webkit-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
width: 15px;
height: 15px;
margin: 0 15px;
}
.testimonials-wrap .flickity-page-dots .dot:hover {
background-color: rgba(255, 255, 255, 0.8);
}
.testimonials-wrap .flickity-page-dots .dot.is-selected {
background-color: #ffffff;
}
/*
Image Section
---------------------------------------*/
.image-section {
position: relative;
background-color: #000;
}
.image-section .image-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50%;
display: block;
background-position: center;
background-size: cover;
opacity: 0.7;
}
.image-text {
margin-left: 50%;
width: 50%;
padding: 8%;
background-color: #383838;
color: #fff;
}
.image-text .image-text-title {
color: #fff;
margin-bottom: 30px;
}
.image-text p {
color: #999999;
margin-bottom: 30px;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.66666666666667em;
}
/*
Team Section
---------------------------------------*/
.team-section {
padding: 5%;
}
.team-wrap {
text-align: center;
margin-top: 3.75rem;
}
.team-wrap:after {
content: '';
}
.widget_team-member-widget {
width: 13%;
margin: 10px 3%;
display: inline-block;
vertical-align: top;
}
.widget_team-member-widget .member-image {
border-radius: 50%;
overflow: hidden;
margin-bottom: 20px;
}
.widget_team-member-widget .member-text {
margin-bottom: 30px;
position: relative;
}
.widget_team-member-widget .member-text::after {
position: absolute;
content: " ";
bottom: -20px;
width: 40px;
border-top: 1px solid #eeeeee;
display: block;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.widget_team-member-widget .member-name {
text-transform: uppercase;
font-size: 20px;
font-size: 1.25rem;
}
.widget_team-member-widget .member-social {
list-style: none;
padding-left: 0;
}
.widget_team-member-widget .member-social li {
display: inline-block;
margin: 3px;
vertical-align: top;
}
.widget_team-member-widget .member-social li a {
padding: 0;
display: block;
font-size: 20px;
font-size: 1.25rem;
width: 2em;
height: 2em;
line-height: 2em;
-webkit-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
border-radius: 50%;
background-color: transparent;
}
.widget_team-member-widget .member-social li a:hover {
color: #fff;
}
.widget_team-member-widget .member-social li a[href*="facebook.com"]:hover {
background-color: #3B5998;
}
.widget_team-member-widget .member-social li a[href*="twitter.com"]:hover {
background-color: #33CCFF;
}
.widget_team-member-widget .member-social li a[href*="dribbble.com"]:hover {
background-color: #C5376D;
}
.widget_team-member-widget .member-social li a[href*="instagram.com"]:hover {
background-color: #427097;
}
.widget_team-member-widget .member-social li a[href*="flickr.com"]:hover {
background-color: #FF0084;
}
.widget_team-member-widget .member-social li a[href*="youtube.com"]:hover {
background-color: #C1302A;
}
.widget_team-member-widget .member-social li a[href*="github.com"]:hover {
background-color: #2f2f2f;
}
.widget_team-member-widget .member-social li a[href*="vimeo.com"]:hover {
background-color: #1AB7EA;
}
.widget_team-member-widget .member-social li a[href*="foursquare.com"]:hover {
background-color: #1DAFEC;
}
.widget_team-member-widget .member-social li a[href*="skype.com"]:hover {
background-color: #00AFF0;
}
.widget_team-member-widget .member-social li a[href*="plus.google.com"]:hover {
background-color: #D5402B;
}
.widget_team-member-widget .member-social li a[href*="tumblr.com"]:hover {
background-color: #343B4A;
}
.widget_team-member-widget .member-social li a[href*="linkedin.com"]:hover {
background-color: #0073B2;
}
.widget_team-member-widget .member-social li a[href*="pinterest.com"]:hover {
background-color: #CB2027;
}
.widget_team-member-widget .member-social li a[href*="/feed/"]:hover {
background-color: #FF6600;
}
.widget_team-member-widget .member-social li a[href*="wordpress.com"]:hover {
background-color: #21759b;
}
.widget_team-member-widget .member-social li a[href*="wordpress.org"]:hover {
background-color: #21759b;
}
.widget_team-member-widget .member-social li a i {
font-size: inherit;
}
/*
Phone Section
---------------------------------------*/
.phone-section {
padding: 4% 10% 2% 10%;
background-color: #68beec;
}
.phone-wrap {
position: relative;
display: inline-block;
width: 25%;
vertical-align: top;
z-index: 1;
}
.phone-screen {
top: 10%;
left: 50%;
-webkit-transform: translate(-51.5%, 0);
-ms-transform: translate(-51.5%, 0);
-o-transform: translate(-51.5%, 0);
transform: translate(-51.5%, 0);
position: absolute;
width: 69.5%;
height: auto;
}
.phone-mockup {
width: 100%;
}
.phone-services {
display: inline-block;
width: 73%;
margin-left: 2%;
padding-top: 2%;
color: #fff;
text-align: center;
}
.phone-services .service {
width: 45%;
display: inline-block;
vertical-align: top;
margin: 0 2% 8%;
text-align: left;
float: none;
}
.phone-services .service .service-text h4 {
color: #fff;
}
.phone-services .read-more {
color: #fff;
}
.phone-services .read-more:after {
background-color: #fff;
}
/*
Tagline Section
---------------------------------------*/
.tagline-section {
background-color: #68D2AE;
position: relative;
color: #fff;
text-align: center;
-webkit-transition: opacity 150ms;
-o-transition: opacity 150ms;
transition: opacity 150ms;
}
.tagline-section:hover {
opacity: 0.9;
}
.tagline-section a {
color: inherit;
display: block;
padding: 2% 15%;
}
.tagline-section a:hover {
text-decoration: none;
}
.tagline-section .tagline {
color: inherit;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 0;
display: block;
}
.tagline-section span {
font-size: 18px;
font-size: 1.125rem;
display: block;
margin-top: 0.83333333333333em;
}
/*
Clients Section
---------------------------------------*/
.clients-section {
padding: 3% 10%;
text-align: center;
}
.clients-wrap:after {
content: '';
}
.clients-wrap .clients-logo {
width: 15%;
display: inline-block;
vertical-align: middle;
margin: 2%;
}
/*
Map Section
---------------------------------------*/
.map-section {
position: relative;
}
.map-wrap {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
height: 100%;
display: block;
}
.map-content {
width: 50%;
margin-left: 50%;
display: inline-block;
vertical-align: top;
padding: 5%;
background-color: #222222;
}
/*
Pricing Section
---------------------------------------*/
.pricing-section {
padding: 5%;
}
.cd-header {
height: 100px;
line-height: 170px;
position: relative;
}
.cd-header h1 {
text-align: center;
color: #FFFFFF;
font-size: 2.2rem;
}
@media only screen and (min-width: 768px) {
.cd-header {
height: 160px;
line-height: 280px;
}
.cd-header h1 {
font-size: 3.6rem;
font-weight: 300;
}
}
.cd-pricing-container {
width: 100%;
max-width: 1170px;
margin: 0 auto;
}
@media only screen and (min-width: 768px) {
.cd-pricing-container {
margin: 0 auto;
}
.cd-pricing-container.cd-full-width {
width: 100%;
max-width: none;
}
}
.cd-pricing-list {
margin: 2em 0 0;
padding-left: 0;
list-style: none;
}
.cd-pricing-list > li {
position: relative;
margin-bottom: 1em;
background-color: #FFFFFF;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* Firefox bug - 3D CSS transform, jagged edges */
outline: 1px solid transparent;
}
.cd-pricing-list > li::after {
/* subtle gradient layer on the right - to indicate it's possible to scroll */
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50px;
pointer-events: none;
background: -webkit-linear-gradient(right, #FFFFFF, rgba(255, 255, 255, 0));
background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0));
}
.cd-pricing-list > li.is-ended::after {
/* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
display: none;
}
@media only screen and (min-width: 768px) {
.cd-pricing-list {
margin: 3em 0 0;
}
.cd-pricing-list:after {
content: "";
display: table;
clear: both;
}
.cd-pricing-list > li {
width: 33.3333333333%;
float: left;
}
.cd-pricing-list > li::before {
/* separator between pricing tables - visible when number of tables > 3 */
content: '';
position: absolute;
z-index: 6;
left: -1px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 50%;
width: 1px;
background-color: #b1d6e8;
}
.cd-pricing-list > li::after {
/* hide gradient layer */
display: none;
}
.cd-pricing-list > li.cd-popular {
box-shadow: inset 0 0 0 3px #00b09a;
}
.cd-pricing-list > li.cd-popular::before {
/* hide table separator for .cd-popular table */
display: none;
}
.cd-pricing-list > li.cd-popular + li::before {
/* hide table separator for tables following .cd-popular table */
display: none;
}
.cd-has-margins .cd-pricing-list > li,
.cd-has-margins .cd-pricing-list > li.cd-popular {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.cd-pricing-list:nth-of-type(1)::before {
/* hide table separator for the first table */
display: none;
}
.cd-has-margins .cd-pricing-list > li {
width: 32%;
float: left;
margin-right: 1.5%;
border-radius: 4px 4px 6px 6px;
}
.cd-has-margins .cd-pricing-list > li:last-of-type {
margin-right: 0;
}
.cd-has-margins .cd-pricing-list > li::before {
display: none;
}
}
@media only screen and (min-width: 1500px) {
.cd-full-width .cd-pricing-list > li {
padding: 2.5em 0;
}
}
@media only screen and (min-width: 768px) {
.cd-popular .cd-pricing-wrapper > li::before {
/* hide table separator for .cd-popular table */
display: none;
}
}
.cd-pricing-header {
position: relative;
z-index: 1;
height: 80px;
padding: 1em;
pointer-events: none;
background-color: #3aa0d1;
color: #FFFFFF;
}
.cd-pricing-header h2 {
margin-bottom: 3px;
font-weight: 700;
text-transform: uppercase;
}
.cd-popular .cd-pricing-header {
background-color: #00b09a;
}
@media only screen and (min-width: 768px) {
.cd-pricing-header {
height: auto;
padding: 1.9em 0.9em 1.6em;
pointer-events: auto;
text-align: center;
color: #b3b3b3;
background-color: transparent;
}
.cd-popular .cd-pricing-header {
color: #00b09a;
background-color: transparent;
}
.cd-secondary-theme .cd-pricing-header {
color: #FFFFFF;
}
.cd-pricing-header h2 {
font-size: 1.8rem;
letter-spacing: 2px;
}
}
.cd-currency,
.cd-value {
font-size: 3rem;
font-weight: 300;
}
.cd-duration {
font-weight: 700;
font-size: 1.3rem;
color: #8dc8e4;
text-transform: uppercase;
}
.cd-popular .cd-duration {
color: #f3b6ab;
}
.cd-duration::before {
content: '/';
margin-right: 2px;
}
@media only screen and (min-width: 768px) {
.cd-value {
font-size: 6rem;
font-weight: 300;
}
.cd-currency,
.cd-duration {
color: rgba(23, 61, 80, 0.4);
}
.cd-popular .cd-currency,
.cd-popular .cd-duration {
color: #00b09a;
}
.cd-secondary-theme .cd-currency,
.cd-secondary-theme .cd-duration {
color: #2e80a7;
}
.cd-secondary-theme .cd-popular .cd-currency,
.cd-secondary-theme .cd-popular .cd-duration {
color: #ba6453;
}
.cd-currency {
display: inline-block;
margin-top: 10px;
vertical-align: top;
font-size: 2rem;
font-weight: 700;
}
.cd-duration {
font-size: 1.4rem;
}
}
.cd-pricing-body {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 768px) {
.cd-pricing-body {
overflow-x: visible;
}
}
.cd-pricing-features {
width: 600px;
padding-left: 0;
list-style: none;
}
.cd-pricing-features:after {
content: "";
display: table;
clear: both;
}
.cd-pricing-features li {
width: 100px;
float: left;
padding: 1.6em 1em;
font-size: 1rem;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cd-pricing-features em {
display: block;
font-style: normal;
margin-bottom: 5px;
font-weight: bold;
color: #555555;
}
@media only screen and (min-width: 768px) {
.cd-pricing-features {
width: auto;
}
.cd-pricing-features li {
float: none;
width: auto;
padding: 1em;
}
.cd-popular .cd-pricing-features li {
margin: 0 3px;
}
.cd-pricing-features li:nth-of-type(2n+1) {
background-color: rgba(23, 61, 80, 0.06);
}
.cd-pricing-features em {
display: inline-block;
margin-bottom: 0;
}
.cd-has-margins .cd-popular .cd-pricing-features li,
.cd-secondary-theme .cd-popular .cd-pricing-features li {
margin: 0;
}
.cd-secondary-theme .cd-pricing-features li {
color: #FFFFFF;
}
.cd-secondary-theme .cd-pricing-features li:nth-of-type(2n+1) {
background-color: transparent;
}
}
.cd-pricing-footer {
position: absolute;
z-index: 1;
top: 0;
left: 0;
/* on mobile it covers the .cd-pricing-header */
height: 80px;
width: 100%;
}
.cd-pricing-footer::after {
/* right arrow visible on mobile */
content: "\f054";
position: absolute;
color: #fff;
right: 1em;
top: 50%;
bottom: auto;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
transform: translate(0, -50%);
height: 18px;
width: 18px;
display: block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media only screen and (min-width: 768px) {
.cd-pricing-footer {
position: relative;
height: auto;
padding: 0;
text-align: center;
}
.cd-pricing-footer::after {
/* hide arrow */
display: none;
}
.cd-has-margins .cd-pricing-footer {
padding-bottom: 0;
}
}
.cd-select {
position: relative;
z-index: 1;
display: block;
height: 100%;
/* hide button text on mobile */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
color: transparent;
text-decoration: none!important;
}
@media only screen and (min-width: 768px) {
.cd-select {
position: static;
display: inline-block;
height: auto;
padding: 1.3em 3em;
color: #FFFFFF;
border-radius: 2px;
background-color: #383838;
font-size: 1.4rem;
text-indent: 0;
text-transform: uppercase;
letter-spacing: 2px;
}
.no-touch .cd-select:hover {
background-color: #383838;
color: #fff;
opacity: 0.9;
}
.cd-popular .cd-select {
background-color: #00b09a;
}
.no-touch .cd-popular .cd-select:hover {
background-color: #00b09a;
color: #fff;
opacity: 0.9;
}
.cd-secondary-theme .cd-popular .cd-select {
background-color: #383838;
}
.no-touch .cd-secondary-theme .cd-popular .cd-select:hover {
background-color: #112e3c;
}
.cd-has-margins .cd-select {
display: block;
padding: 1.7em 0;
border-radius: 0 0 4px 4px;
}
}
/*
Portfolio Section
---------------------------------------*/
.portfolio-section {
padding-top: 3%;
}
.portfolio-wrap:before,
.portfolio-wrap:after {
content: " ";
display: table;
}
.portfolio-wrap:after {
clear: both;
}
.portfolio-section .portfolio-item {
background-position: center;
background-size: cover;
width: 25%;
height: 25%;
display: block;
vertical-align: top;
margin: 0;
position: relative;
float: left;
padding-bottom: 25%;
}
.portfolio-section .portfolio-item.big {
width: 50%;
height: 50%;
padding-bottom: 50%;
display: inline-block;
vertical-align: top;
}
.portfolio-section .portfolio-item.landscape {
width: 50%;
height: 25%;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
.portfolio-section .portfolio-item img {
max-height: 100%;
}
.portfolio-section .portfolio-item .portfolio-hover {
text-align: center;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1;
opacity: 0;
-webkit-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
}
.portfolio-section .portfolio-item:hover .portfolio-hover {
opacity: 1;
}
.portfolio-section .portfolio-item .portfolio-hover span {
display: block;
text-transform: uppercase;
position: absolute;
top: 45%;
left: 50%;
width: 90%;
opacity: 0;
font-size: 20px;
font-size: 1.25rem;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
-webkit-transition-delay: 100ms;
transition-delay: 100ms;
}
.portfolio-section .portfolio-item:hover .portfolio-hover span {
top: 50%;
opacity: 1;
}
/*
Blog Section
---------------------------------------*/
.blog-section {
padding: 5% 10%;
}
.blog-wrap {
margin-bottom: 25px;
}
.blog-wrap .blog-item {
width: 30%;
display: inline-block;
vertical-align: top;
margin-right: 4%;
margin-bottom: 3%;
}
.blog-wrap .blog-item img {
width: 100%;
height: auto;
}
.blog-wrap .blog-time-date {
display: block;
text-align: right;
font-size: 13px;
font-size: 0.8125rem;
margin-bottom: 5px;
color: #b3b3b3;
}
.blog-wrap .blog-item-image a {
display: block;
}
.blog-wrap .blog-item-title {
font-size: 22px;
font-size: 1.375rem;
margin-top: 20px;
}
.blog-wrap .blog-item-title a {
color: inherit;
}
/*
Animation Overflow
---------------------------------------*/
.video-section,
.quote-section,
.map-section {
overflow: hidden;
}
/*
==========================================
3. Blog & Pages
==========================================
*/
.animations-enable #main {
opacity: 0;
-webkit-transform: translate(0, 50px);
-ms-transform: translate(0, 50px);
-o-transform: translate(0, 50px);
transform: translate(0, 50px);
-webkit-transition: opacity 500ms, transform 500ms;
-o-transition: opacity 500ms, transform 500ms;
transition: opacity 500ms, transform 500ms;
}
.pace-done.animations-enable #main,
.no-js #main {
opacity: 1;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
/*Post Title */
/*------------------------------------------*/
.post-title {
margin-bottom: 0.88235294117647em;
margin-top: 0;
}
.post-title a {
color: inherit;
text-align: left;
}
/*Post */
/*------------------------------------------*/
.blog article,
.search article,
.archive article {
margin-bottom: 8.75rem;
}
.single article,
.page article {
margin-bottom: 4.375em;
padding-bottom: 0;
}
/*More Link */
/*------------------------------------------*/
.more-link {
display: block;
clear: both;
}
/*Image Post */
/*------------------------------------------*/
.post-image {
overflow: hidden;
position: relative;
margin-bottom: 30px;
}
.post-image a {
display: block;
text-align: center;
}
.post-image img {
width: 100%;
vertical-align: bottom;
height: auto;
}
.post-image:hover .post_date,
.post-image:hover .post-title_wrap {
opacity: 0;
-webkit-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
/*Metadata */
/*------------------------------------------*/
.metadata {
margin: 1.78571428571429em 0;
overflow: hidden;
border-right: none;
border-left: none;
border-top: none;
padding-top: 1.07142857142857em;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
font-size: 14px;
font-size: 0.875rem;
}
.single .metadata {
margin: 1.25em 0;
}
.metadata ul {
margin: 0;
padding: 0;
}
.metadata ul li {
list-style: none;
line-height: 1.4em;
margin: 0;
margin-right: 1.78571428571429em;
padding: 0 0 1.07142857142857em 0;
float: left;
position: relative;
color: #c7c7c7;
}
.metadata ul li i {
margin-right: 0.35714285714286em;
font-size: 14px;
font-size: 0.875rem;
text-align: center;
color: #b3b3b3;
}
.metadata ul li a {
text-decoration: none;
color: #b3b3b3;
}
.metadata ul li a:hover {
text-decoration: underline;
}
.updated:not(.published) {
display: none;
}
.metadata hr {
margin: 0;
}
/* Page Headers */
/*----------------------------------------------------------------------*/
.page-header {
margin-bottom: 70px;
}
/* Archive and Search */
/*----------------------------------------------------------------------*/
.archive .post,
.search .post,
.archive .page,
.search .page {
background-color: #fafafa;
padding: 30px;
margin-bottom: 6.25rem;
}
.archive .post .metadata {
margin-bottom: 0;
}
/* 404 */
/*----------------------------------------------------------------------*/
.widgets-404 {
margin: 100px 0;
}
.error404 .search-form {
width: 50%;
}
.error404 .search-form .search-submit {
outline: none;
width: auto;
padding-left: 12px;
height: auto;
}
.error404 .search-form .search-submit:hover {
-webkit-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
background-color: #555555;
border-color: #555555;
color: #fff;
}
/*Pagination */
/*----------------------------------------------------------------------*/
.pagination_wrap {
text-align: center;
}
.pagination {
margin: 0 0 3.125rem 0;
}
.pagination .screen-reader-text {
display: none;
}
.pagination a,
.pagination span {
background-color: #fff;
border: 2px solid #eeeeee;
color: #999999;
float: left;
line-height: 1.42857;
margin-left: -2px;
padding: 6px 12px;
position: relative;
text-decoration: none;
font-size: 14px;
}
.pagination .current {
background-color: #eeeeee;
color: #00b09a;
border-color: #eeeeee;
}
.pagination a:hover {
background-color: #eeeeee;
color: #00b09a;
border-color: #eeeeee;
cursor: pointer;
}
.pagination li.active a {
background-color: #00b09a;
color: #fff;
border-color: #00b09a;
}
.pagination li.active a:hover {
background-color: #fff;
color: #00b09a;
border-color: #00b09a;
cursor: pointer;
}
/*
==========================================
4. Sidebar
==========================================
*/
#sidebar {
position: relative;
padding-left: 60px;
}
.animations-enable #sidebar .widget {
opacity: 0;
-webkit-transform: translate(0, 50px);
-ms-transform: translate(0, 50px);
-o-transform: translate(0, 50px);
transform: translate(0, 50px);
-webkit-transition: opacity 500ms 400ms, transform 500ms 400ms;
-o-transition: opacity 500ms 400ms, transform 500ms 400ms;
transition: opacity 500ms 400ms, transform 500ms 400ms;
}
.pace-done.animations-enable #sidebar .widget,
.no-js #sidebar .widget {
opacity: 1;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
#sidebar .widget:nth-child(1) {
-webkit-transition-delay: 200ms;
transition-delay: 200ms;
}
#sidebar .widget:nth-child(2) {
-webkit-transition-delay: 400ms;
transition-delay: 400ms;
}
#sidebar .widget:nth-child(3) {
-webkit-transition-delay: 600ms;
transition-delay: 600ms;
}
#sidebar .widget:nth-child(4) {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;
}
#sidebar .widget:nth-child(5) {
-webkit-transition-delay: 1000ms;
transition-delay: 1000ms;
}
#sidebar .widget:nth-child(6) {
-webkit-transition-delay: 1200ms;
transition-delay: 1200ms;
}
#sidebar .widget:nth-child(7) {
-webkit-transition-delay: 1400ms;
transition-delay: 1400ms;
}
#sidebar .widget:nth-child(8) {
-webkit-transition-delay: 1600ms;
transition-delay: 1600ms;
}
#sidebar .widget:nth-child(9) {
-webkit-transition-delay: 1800ms;
transition-delay: 1800ms;
}
#sidebar .widget:nth-child(10) {
-webkit-transition-delay: 2000ms;
transition-delay: 2000ms;
}
#sidebar .widget:nth-child(11) {
-webkit-transition-delay: 2200ms;
transition-delay: 2200ms;
}
#sidebar .widget:nth-child(12) {
-webkit-transition-delay: 2400ms;
transition-delay: 2400ms;
}
#sidebar .widget:nth-child(13) {
-webkit-transition-delay: 2600ms;
transition-delay: 2600ms;
}
#sidebar .widget:nth-child(14) {
-webkit-transition-delay: 2800ms;
transition-delay: 2800ms;
}
#sidebar .widget:nth-child(15) {
-webkit-transition-delay: 3000ms;
transition-delay: 3000ms;
}
/*
Widgets
--------------------------------
*/
#sidebar .widget {
margin-bottom: 3.125em;
position: relative;
padding: 0;
font-size: 14px;
font-size: 0.875rem;
color: #cccccc;
}
#sidebar.col-md-pull-9 .widget {
margin-right: 10px;
margin-left: 0;
}
#sidebar .widget h4 {
position: relative;
margin-bottom: 0.8em;
text-transform: uppercase;
font-size: 16px;
font-size: 1rem;
font-weight: bold;
}
#sidebar .widget ul,
#sidebar .widget ol {
margin-left: 0px;
margin-bottom: 0;
padding-left: 0;
}
#sidebar .widget .pagenav,
#sidebar .widget .linkcat {
list-style: none;
}
#sidebar .widget ul li {
list-style: none;
border-bottom: #eeeeee 1px solid;
}
#sidebar .widget ul li:first-child {
border-top: none;
}
#sidebar .widget ul li > a:hover {
color: #00b09a;
}
#sidebar .widget > ul li > a {
color: #999999;
padding: 0.63636363636364em 0;
display: block;
font-weight: normal;
-webkit-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
}
#sidebar .widget > ul li > a:hover {
text-indent: 10px;
text-decoration: none;
}
#sidebar .widget ul li ul {
margin-left: 15px;
margin-bottom: 0;
margin-top: 0!important;
}
#sidebar .widget ul li ul {
font-size: inherit;
}
#sidebar .widget ul li ul li:last-child {
border-bottom: none;
}
#sidebar .widget ul li ul,
#sidebar .widget ul li ul li ul {
display: none;
}
#sidebar .hasChildren {
position: relative;
}
#sidebar .hasChildren i {
position: absolute;
top: 12px;
right: 5px;
font-size: 1.16666666666667em;
}
#sidebar select {
margin-left: 5px;
}
/*
Recent Comments Widget
--------------------------------
*/
#sidebar .widget_recent_comments ul#recentcomments {
margin-top: 17px;
}
#sidebar .widget_recent_comments ul li {
padding-left: 35px;
margin-bottom: 20px;
border: none;
color: #999999;
position: relative;
display: block;
width: 100%;
}
#sidebar .widget_recent_comments ul li::before {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
content: "";
position: absolute;
left: 0;
top: 0;
color: #b3b3b3;
font-size: 14px;
}
#sidebar .widget_recent_comments ul li i {
position: absolute;
color: #b3b3b3;
left: 0;
top: 20%;
font-size: 1.45454545454545em;
}
#sidebar .widget_recent_comments ul li a {
display: inline;
background: none;
padding: 0;
}
#sidebar .widget_recent_comments ul li a:hover {
color: #00b09a;
background: none;
}
/*
Recent Posts Widget
--------------------------------
*/
#sidebar .widget_recent_entries ul li {
display: block;
width: 100%;
}
/*
Tag Widget
--------------------------------
*/
#sidebar .widget_tag ul.wp-tag-cloud {
margin-top: 20px;
}
#sidebar .widget_tag ul li {
display: inline-block;
margin: 0 0.90909090909091em 0.90909090909091em 0;
float: left;
border: none;
}
#sidebar .widget_tag ul li a {
background-color: #b3b3b3;
display: inline-block;
padding: 3px 6px;
color: #fff;
font-weight: bold;
border-radius: 3px;
outline: none;
}
#sidebar .widget_tag ul li a:hover {
color: #999999;
text-decoration: none;
background-color: #fff;
text-indent: 0;
}
#sidebar .widget_tag ul li a:active {
position: relative;
top: 1px;
}
/*
Search Widget
--------------------------------
*/
.widget_search {
position: relative;
}
.widget_search #s {
width: 100%;
display: block;
padding-right: 30px;
}
.widget_search #s:focus {
border-color: #999999;
-webkit-box-shadow: none;
box-shadow: none;
}
.widget_search #searchsubmit {
background: none;
border: none;
width: 17px;
height: 17px;
display: block;
text-indent: -9999px;
position: absolute;
right: 15px;
top: 7px;
cursor: pointer;
line-height: 0;
box-shadow: none;
}
.widget_search i {
width: 17px;
height: 17px;
display: block;
position: absolute;
right: 12px;
top: 12px;
cursor: pointer;
font-size: 1em;
color: #999999;
}
/*
==========================================
5. Footer
==========================================
*/
/*
Footer
------------------------
*/
#footer {
background-color: #363636;
padding: 5em 0;
color: #999999;
font-size: 14px;
font-size: 0.875rem;
}
#footer p {
padding-top: 10px;
margin: 0;
}
#footer a {
color: #fff;
font-size: 14px;
font-size: 0.875rem;
}
#footer a:hover {
text-decoration: underline;
}
#footer select {
color: #555555;
margin-left: 5px;
}
#footer .widget {
margin-bottom: 1.875rem;
}
#footer .widget h4 {
color: #fff;
font-size: 18px;
font-size: 1.125rem;
text-transform: uppercase;
margin-bottom: 1.25em;
}
#footer ul,
footer ol {
list-style: none;
margin-left: 0;
padding-left: 0;
}
#footer ul li,
footer ol li {
display: inline-block;
vertical-align: top;
width: 46%;
margin-right: 2%;
}
#footer ul li > a,
footer ol li > a {
display: block;
padding: 8px 0;
color: inherit;
-webkit-transition: text-indent 200ms;
-o-transition: text-indent 200ms;
transition: text-indent 200ms;
position: relative;
}
#footer ul li > a:hover,
footer ol li > a:hover {
text-decoration: none;
}
#footer ul li > a:after,
footer ol li > a:after {
position: absolute;
left: 0;
bottom: 0;
-webkit-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
content: " ";
display: block;
width: 0;
height: 1px;
background-color: rgba(255, 255, 255, 0.3);
}
#footer ul li > a:hover:after,
footer ol li > a:hover:after {
width: 100%;
}
#footer .widget ul li:first-child {
border-top: none;
}
#footer .widget ul li ul li:last-child {
border: none;
}
#footer .widget ul li ul {
margin-left: 30px;
margin-bottom: 0;
margin-top: 0!important;
}
#footer .widget ul li ul,
#sidebar .widget ul li ul li ul {
display: none;
}
#footer .hasChildren {
position: relative;
}
#footer .hasChildren i {
position: absolute;
top: 12px;
right: 5px;
font-size: 1.16666666666667em;
}
/*-----------Contact Info Widget-----------------*/
#footer .widget_contact_info li {
display: block;
width: 100%;
margin-bottom: 12px;
}
#footer .widget_contact_info li i {
margin-right: 10px;
text-align: center;
}
#footer .widget_contact_info li a {
display: inline;
}
/*----------- Portfolio Widget -----------------*/
.widget_portfolio .widget-portfolio-wrap .widget-portfolio-item {
display: inline-block;
vertical-align: top;
width: 30%;
margin-right: 2%;
margin-bottom: 2%;
}
.widget_portfolio .widget-portfolio-wrap .widget-portfolio-item a {
display: block;
position: relative;
overflow: hidden;
}
.widget_portfolio .widget-portfolio-wrap .widget-portfolio-item a:after {
-webkit-transition: opacity 200ms;
-o-transition: opacity 200ms;
transition: opacity 200ms;
opacity: 0;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -1px;
content: " ";
background-color: rgba(0, 0, 0, 0.8);
z-index: 1;
}
.widget_portfolio .widget-portfolio-wrap .widget-portfolio-item a:hover:after {
opacity: 1;
}
.widget_portfolio .widget-portfolio-wrap .widget-portfolio-item a:before {
-webkit-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
-webkit-transition-delay: 100ms;
transition-delay: 100ms;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
display: block;
z-index: 2;
position: absolute;
top: 40%;
left: 50%;
content: "\f067";
color: #fff;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.widget_portfolio .widget-portfolio-wrap .widget-portfolio-item a:hover:before {
top: 50%;
opacity: 1;
}
/*-----------Recent & Popular Posts Widget-----------------*/
.widget_recent_posts ul li,
.widget_popular_posts ul li {
margin-bottom: 0.6em;
min-height: 55px;
}
.widget_recent_posts ul li .recent-post-img,
.widget_popular_posts ul li .recent-post-img {
position: relative;
float: left;
margin-right: 10px;
}
.widget_recent_posts ul li .recent-post-img a,
.widget_popular_posts ul li .recent-post-img a {
display: block;
}
.widget_recent_posts ul li .recent-post-img span,
.widget_popular_posts ul li .recent-post-img span {
box-shadow: 0 0px 1px rgba(255, 255, 255, 0.7) inset;
-moz-box-shadow: 0 0px 1px rgba(255, 255, 255, 0.7) inset;
-webkit-box-shadow: 0 0px 1px rgba(255, 255, 255, 0.7) inset;
position: absolute;
width: 50px;
height: 50px;
display: block;
top: 1px;
left: 1px;
}
.widget_recent_posts ul li h6,
.widget_popular_posts ul li h6 {
font-weight: bold;
font-size: 0.91666666666667em;
line-height: 1.2em;
margin-top: 0;
}
.widget_recent_posts ul li h6 a,
.widget_popular_posts ul li h6 a {
color: #00b09a;
}
.widget_recent_posts ul li h6 a:hover,
.widget_popular_posts ul li h6 a:hover {
text-decoration: none;
color: #d7d7d7;
}
.widget_recent_posts ul li time,
.widget_popular_posts ul li time {
font-size: 0.95652173913043em;
color: #999999;
}
/*-----------Testimonials Widget-----------------*/
footer .widget_testimonials ul li {
display: block;
}
footer .widget_testimonials ul li cite {
color: #919090;
background: url(images/cite_testimonial.png) no-repeat;
background-position: 0 1px;
padding-left: 25px;
margin-top: 0.6em;
display: block;
}
footer .widget_testimonials ul li cite a {
color: #919090;
}
footer .widget_testimonials .testimonials_nav {
float: right;
position: relative;
}
footer .widget_testimonials .testimonials_nav a {
background: url(images/footer_icons.png) no-repeat;
width: 21px;
height: 21px;
display: block;
text-indent: -9999px;
float: left;
margin-left: 10px;
}
footer .widget_testimonials .testimonials_nav a.prev {
background-position: 0 -33px;
}
footer .widget_testimonials .testimonials_nav a.next {
background-position: 0 -64px;
}
/*-----------Twitter Widget-----------------*/
footer .twitter_widget ul li {
background-position: 0 center;
padding-left: 27px!important;
padding-bottom: 5px;
padding-top: 5px;
position: relative;
border-width: 0!important;
margin-bottom: 1.66666666666667em;
}
footer .twitter_widget ul li i {
position: absolute;
left: 0;
top: 20%;
font-size: 1.45454545454545em;
}
footer .twitter_widget ul li a {
display: inline!important;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
footer .twitter_widget .twitter li a:hover {
margin-left: 0!important;
}
/*-----------Social Widget-----------------*/
footer .social a {
margin: 7px 7px 7px 0;
}
/*Quick Contact */
/*--------------------------------------------------------------*/
footer .quick_contact .form {
position: relative;
}
footer .quick_contact .form input {
-webkit-box-shadow: none;
box-shadow: none;
}
footer .quick_contact .form input#quick_name {
margin-top: 0;
}
footer .quick_contact .form .error {
border-bottom: #F00 2px solid;
}
footer .quick_contact .form textarea {
-webkit-box-shadow: none;
box-shadow: none;
}
footer .quick_contact .form .send {
font-size: 0.84615384615385em;
float: right;
margin-top: 0.8em;
}
footer .name-error,
footer .email-error,
footer .comments-error {
display: none;
position: absolute;
left: 175px;
}
footer .name-error {
top: 13px;
}
footer .email-error {
top: 47px;
}
footer .comments-error {
top: 89px;
}
footer .mesage {
color: #fff;
text-shadow: 0 1px 0 #000000;
}
/*
==========================================
Subfooter
==========================================
*/
.sub-footer {
background-color: #222222;
padding: 15px 0;
color: #6f6f6f;
font-size: 13px;
font-size: 0.8125rem;
}
.sub-footer p {
margin-bottom: 0;
float: left;
line-height: 35px;
}
.sub-footer a {
color: #999999;
}
.sub-footer a:hover {
color: inherit;
text-decoration: underline;
}
/*
==========================================
Social Nav
==========================================
*/
.nav_social {
position: relative;
text-align: center;
float: right;
}
.nav_social li {
text-align: center;
position: relative;
float: left;
margin-left: 10px;
}
.nav_social li a {
padding: 0;
overflow: hidden;
display: block;
position: relative;
width: 35px;
height: 35px;
line-height: 35px;
color: #b3b3b3;
-webkit-transition: background 200ms;
-o-transition: background 200ms;
transition: background 200ms;
text-decoration: none;
text-align: center;
font-weight: normal;
}
.nav_social li a:hover {
color: #fff;
}
.nav_social .screen-reader-text {
display: none;
}
.nav_social li a::before {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: inherit;
font-size: 18px;
line-height: 1em;
width: 18px;
height: 18px;
color: #fff;
color: inherit;
text-decoration: none!important;
}
.nav_social li a:hover::before {
color: #fff;
-webkit-animation: social_icons_anim 500ms ease;
-o-animation: social_icons_anim 500ms ease;
animation: social_icons_anim 500ms ease;
}
@-webkit-keyframes social_icons_anim {
0% {
-webkit-transform: translate(0, -30px);
-ms-transform: translate(0, -30px);
-o-transform: translate(0, -30px);
transform: translate(0, -30px);
opacity: 0;
}
60% {
-webkit-transform: translate(0, 2px);
-ms-transform: translate(0, 2px);
-o-transform: translate(0, 2px);
transform: translate(0, 2px);
opacity: 1;
}
100% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-moz-keyframes social_icons_anim {
0% {
-webkit-transform: translate(0, -30px);
-ms-transform: translate(0, -30px);
-o-transform: translate(0, -30px);
transform: translate(0, -30px);
opacity: 0;
}
60% {
-webkit-transform: translate(0, 2px);
-ms-transform: translate(0, 2px);
-o-transform: translate(0, 2px);
transform: translate(0, 2px);
opacity: 1;
}
100% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@-o-keyframes social_icons_anim {
0% {
-webkit-transform: translate(0, -30px);
-ms-transform: translate(0, -30px);
-o-transform: translate(0, -30px);
transform: translate(0, -30px);
opacity: 0;
}
60% {
-webkit-transform: translate(0, 2px);
-ms-transform: translate(0, 2px);
-o-transform: translate(0, 2px);
transform: translate(0, 2px);
opacity: 1;
}
100% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes social_icons_anim {
0% {
-webkit-transform: translate(0, -30px);
-ms-transform: translate(0, -30px);
-o-transform: translate(0, -30px);
transform: translate(0, -30px);
opacity: 0;
}
60% {
-webkit-transform: translate(0, 2px);
-ms-transform: translate(0, 2px);
-o-transform: translate(0, 2px);
transform: translate(0, 2px);
opacity: 1;
}
100% {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.nav_social li a[href*="facebook.com"]::before {
content: "\f09a";
}
.nav_social li a[href*="facebook.com"]:hover {
background-color: #3B5998;
}
.nav_social li a[href*="twitter.com"]::before {
content: "\f099";
}
.nav_social li a[href*="twitter.com"]:hover {
background-color: #33CCFF;
}
.nav_social li a[href*="dribbble.com"]::before {
content: "\f17d";
}
.nav_social li a[href*="dribbble.com"]:hover {
background-color: #C5376D;
}
.nav_social li a[href*="instagram.com"]::before {
content: "\f16d";
}
.nav_social li a[href*="instagram.com"]:hover {
background-color: #427097;
}
.nav_social li a[href*="flickr.com"]::before {
content: "\f16e";
}
.nav_social li a[href*="flickr.com"]:hover {
background-color: #FF0084;
}
.nav_social li a[href*="youtube.com"]::before {
content: "\f167";
}
.nav_social li a[href*="youtube.com"]:hover {
background-color: #C1302A;
}
.nav_social li a[href*="github.com"]::before {
content: "\f09b";
}
.nav_social li a[href*="github.com"]:hover {
background-color: #2f2f2f;
}
.nav_social li a[href*="vimeo.com"]::before {
content: "\f194";
}
.nav_social li a[href*="vimeo.com"]:hover {
background-color: #1AB7EA;
}
.nav_social li a[href*="foursquare.com"]::before {
content: "\f180";
}
.nav_social li a[href*="foursquare.com"]:hover {
background-color: #1DAFEC;
}
.nav_social li a[href*="skype.com"]::before {
content: "\f17e";
}
.nav_social li a[href*="skype.com"]:hover {
background-color: #00AFF0;
}
.nav_social li a[href*="plus.google.com"]::before {
content: "\f0d5";
}
.nav_social li a[href*="plus.google.com"]:hover {
background-color: #D5402B;
}
.nav_social li a[href*="tumblr.com"]::before {
content: "\f173";
}
.nav_social li a[href*="tumblr.com"]:hover {
background-color: #343B4A;
}
.nav_social li a[href*="linkedin.com"]::before {
content: "\f0e1";
}
.nav_social li a[href*="linkedin.com"]:hover {
background-color: #0073B2;
}
.nav_social li a[href*="pinterest.com"]::before {
content: "\f231";
}
.nav_social li a[href*="pinterest.com"]:hover {
background-color: #CB2027;
}
.nav_social li a[href*="/feed/"]::before {
content: "\f09e";
}
.nav_social li a[href*="/feed/"]:hover {
background-color: #FF6600;
}
.nav_social li a[href*="wordpress.com"]::before {
content: "\f19a";
}
.nav_social li a[href*="wordpress.com"]:hover {
background-color: #21759b;
}
.nav_social li a[href*="wordpress.org"]::before {
content: "\f19a";
}
.nav_social li a[href*="wordpress.org"]:hover {
background-color: #21759b;
}
/*
==========================================
Payments Options
==========================================
*/
.ql_payments_options ul {
padding-left: 0;
list-style: none;
margin: 20px 0;
}
.ql_payments_options ul li {
display: inline-block;
color: #b3b3b3;
font-size: 28px;
font-size: 1.75rem;
margin-left: 0.71428571428571em;
line-height: 1em;
}
.ql_payments_options ul li:hover,
.ql_payments_options ul li i {
cursor: default;
}
/*
==========================================
6. Comments
==========================================
*/
/*===========================================================================*/
/*Comments */
/*===========================================================================*/
#comments {
margin-bottom: 70px;
}
#comments h3 {
margin-top: 0;
}
.comment-list {
margin-left: 0;
margin-top: 2.30769230769231em;
padding: 0;
list-style: none;
}
#comments .comment-list .comment {
list-style: none;
margin-bottom: 50px;
}
#comments .comment-list .comment.bypostauthor .comment-body {
border: 2px solid #555555;
}
#comments .comment-list .comment .comment-body {
margin-bottom: 20px;
background-color: #fafafa;
padding: 30px;
}
#comments .comment-meta {
width: 20%;
margin-right: 5%;
display: inline-block;
vertical-align: top;
}
#comments .comment-meta .comment-author .avatar {
margin-right: 15px;
}
#comments .comment-meta .comment-author .fn {
font-size: 14px;
font-size: 0.875rem;
}
#comments .comment-meta .comment-author .fn .url {
color: #555555;
}
#comments .comment-meta .comment-author .says {
font-size: 11px;
font-size: 0.6875rem;
}
#comments .comment-meta .comment-metadata {
font-size: 11px;
font-size: 0.6875rem;
margin-top: 10px;
}
#comments .comment-meta .comment-metadata a {
color: #b3b3b3;
}
#comments .comment-meta .comment-metadata .edit-link {
display: block;
}
#comments .comment-meta .comment-metadata .edit-link a {
color: #b3b3b3;
}
#comments .comment-content {
width: 74%;
display: inline-block;
vertical-align: top;
}
#comments .comment-list .comment .comment-body .reply {
text-align: right;
}
#comments .comment-list .comment .comment-body .reply .comment-reply-link {
text-align-last: auto;
padding: 5px;
font-size: 14px;
font-size: 0.875rem;
color: #999999;
}
/*===========================================================================*/
/*Comments Form */
/*===========================================================================*/
#respond {
margin: 70px 0;
}
#respond h3 {
margin-top: 0;
}
#respond .input-wrap {
margin: 0px 15px 10px 0;
float: left;
width: 31%;
}
#respond .input-wrap.textarea {
float: none;
width: 97%;
}
#respond .controls-wrap {
position: relative;
}
#respond input {
padding-left: 2.30769230769231em;
width: 100%;
}
#respond input:focus {
border-color: #999999;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#respond .input label {
margin-bottom: 5px;
display: block;
}
#respond textarea {
width: 100%;
height: 150px;
margin-bottom: 1.42857142857143em;
}
#respond textarea:focus {
border-color: #999999;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#respond .controls-wrap i {
position: absolute;
left: 0.71428571428571em;
top: 0.71428571428571em;
color: #c4c4c4;
font-size: 14px;
font-size: 0.875rem;
}
#respond .form-actions {
background-color: transparent;
border: none;
padding: 0;
}
#respond #submit-respond {
outline: none;
width: auto;
padding-left: 12px;
height: auto;
}
#respond #submit-respond:hover {
-webkit-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
background-color: #555555;
border-color: #555555;
color: #fff;
}
/*
==========================================
7. Flickity
==========================================
*/
.flickity-page-dots .dot {
opacity: 0.15;
background-color: transparent;
border: 3px solid #000;
-webkit-transition: opacity 200ms;
-o-transition: opacity 200ms;
transition: opacity 200ms;
width: 13px;
height: 13px;
margin: 0 13px;
}
.flickity-page-dots .dot:hover {
opacity: 0.5;
}
.flickity-page-dots .dot.is-selected {
opacity: 0.7;
background-color: #000;
border-color: #000;
}
/*
==========================================
8. Pace (Loading animation)
==========================================
*/
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #00b09a;
position: fixed;
z-index: 2000;
top: 0;
left: 0;
height: 3px;
-webkit-transition: width 1s;
-moz-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #00b09a;
border-left-color: #00b09a;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}
@-webkit-keyframes pace-spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes pace-spinner {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes pace-spinner {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes pace-spinner {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes pace-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*
==========================================
9. WordPress Default
==========================================
*/
/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float: right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%;
/* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
.sticky {
border-top: 3px solid #999999;
border-bottom: 3px solid #999999;
padding: 30px 0;
}
.gallery .gallery-caption {
color: #888;
font-size: 12px;
margin: 0 0 12px;
}
.gallery {
margin-bottom: 1.6em;
}
.gallery-item {
display: inline-block;
padding: 1.79104477%;
text-align: center;
vertical-align: top;
width: 100%;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-icon img {
margin: 0 auto;
}
.gallery-caption {
color: #707070;
color: rgba(51, 51, 51, 0.7);
display: block;
font-family: "Noto Sans", sans-serif;
font-size: 12px;
font-size: 1.2rem;
line-height: 1.5;
padding: 0.5em 0;
}
.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
display: none;
}
.post-password-form input[type="submit"] {
display: block;
width: auto;
}
.post-password-form input[type="submit"]:hover {
background-color: #eeeeee;
}
/*------------------------------------------------------------
Defaul Widgets
-------------------------------------------------------------- */
/* Archive List Widget
-------------------------------------- */
.widget_archive ul li a {
display: inline-block !important;
}
.widget_archive ul li a:hover {
background-color: transparent!important;
}
.widget select {
font-size: 14px;
font-size: 0.875rem;
max-width: 100%;
}
/* Calendar Widget
-------------------------------------- */
#wp-calendar {
width: 100%;
}
#wp-calendar caption {
text-align: right;
color: #333;
font-size: 12px;
margin-top: 10px;
margin-bottom: 15px;
}
#wp-calendar thead {
font-size: 10px;
}
#wp-calendar thead th {
padding-bottom: 10px;
}
#wp-calendar tbody {
color: #aaa;
}
#wp-calendar tbody td {
background: #f5f5f5;
border: 1px solid #fff;
text-align: center;
padding: 8px;
}
#wp-calendar tbody td:hover {
background: #fff;
}
#wp-calendar tbody .pad {
background: none;
}
#wp-calendar tfoot #next {
font-size: 10px;
text-transform: uppercase;
text-align: right;
}
#wp-calendar tfoot #prev {
font-size: 10px;
text-transform: uppercase;
padding-top: 10px;
}
#wp-calendar #today {
font-weight: bold;
color: #222;
}
#footer #wp-calendar tbody td {
background: #383838;
border: 1px solid #999999;
}
#footer #wp-calendar tbody td:hover {
background: #555555;
}
#footer #wp-calendar #today {
color: #fff;
}
#footer #wp-calendar caption {
color: #999999;
}
/* Categories Widget
-------------------------------------- */
.widget_categories ul li a {
display: inline-block !important;
}
.widget_categories ul li a:hover {
background-color: transparent!important;
}
/* Recent Comments Widget
-------------------------------------- */
.widget_recent_comments ul li {
margin-bottom: 15px;
}
.comment-author-link {
border-bottom: 1px dotted #eeeeee;
}
#footer .widget_recent_comments ul li {
width: 100%;
display: block;
margin-right: 0;
}
#footer .comment-author-link {
border-bottom: 1px dotted #999999;
}
/* Recent Entries Widget
-------------------------------------- */
.widget_recent_entries ul li a:hover {
text-indent: 0!important;
background-color: transparent!important;
text-decoration: underline!important;
}
/* RSS Widget
-------------------------------------- */
.widget_rss ul li {
margin-bottom: 15px;
}
.widget_rss .rsswidget {
font-weight: bold;
}
.widget_rss .rssSummary {
font-size: 12px;
font-size: 0.75rem;
}
/* Search Widget
-------------------------------------- */
.widget_search {
position: relative;
}
.widget_search #s {
width: 100%;
display: block;
padding-right: 32px;
}
.widget_search #s:focus {
border-color: #999999;
-webkit-box-shadow: none;
box-shadow: none;
}
.widget_search #searchsubmit {
background: none;
border: none;
width: 17px;
height: 17px;
display: block;
text-indent: -9999px;
position: absolute;
right: 15px;
top: 7px;
cursor: pointer;
line-height: 0;
box-shadow: none;
}
.widget_search i {
width: 17px;
height: 17px;
display: block;
position: absolute;
right: 15px;
top: 12px;
cursor: pointer;
font-size: 1em;
color: #999999;
}
.widget_search #searchform {
position: relative;
}
/* Tag Cloud Widget
-------------------------------------- */
.widget_tag_cloud a {
padding: 2px;
}
/* Nav Menu Widget
-------------------------------------- */
.widget_nav_menu .menu-navigation-container > ul {
padding: 0;
list-style: none;
}
.widget_nav_menu .menu-navigation-container > ul > li > a {
font-weight: bold;
padding: 5px 0;
display: inline-block;
}
.widget_nav_menu .menu-navigation-container .sub-menu {
padding-left: 20px;
}
/* Search Form
-------------------------------------- */
.search-form {
position: relative;
}
.search-form label {
display: block;
position: relative;
}
.search-form label .screen-reader-text {
display: none;
}
.search-form .search-field {
width: 100%;
position: relative;
font-weight: normal;
}
.widget_search .search-field:focus {
border-color: #999999;
-webkit-box-shadow: none;
box-shadow: none;
}
.widget_search .search-submit {
background: none;
border: none;
width: 36px;
height: 36px;
display: block;
text-indent: -9999px;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
line-height: 0;
box-shadow: none;
margin-bottom: 0;
}
.search-form label::before {
display: block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
content: "";
position: absolute;
right: 15px;
top: 9px;
color: #b3b3b3;
font-size: 14px;
z-index: 1;
}
.widget_search i {
width: 17px;
height: 17px;
display: block;
position: absolute;
right: 12px;
top: 12px;
cursor: pointer;
font-size: 1em;
color: #b3b3b3;
}
#footer .search-form .search-field {
background-color: transparent;
border-color: #999999;
color: #b3b3b3;
}
#footer .widget_search .search-field:focus {
border-color: #999999;
-webkit-box-shadow: none;
box-shadow: none;
}
/* Post Navigation
-------------------------------------- */
.post-navigation {
margin: 40px 0;
}
.post-navigation:before,
.post-navigation:after {
content: " ";
display: table;
}
.post-navigation:after {
clear: both;
}
.post-navigation .screen-reader-text {
display: none;
}
.post-navigation .nav-previous {
float: left;
width: 48%;
}
.post-navigation .nav-next {
float: right;
width: 48%;
text-align: right;
}
.post-navigation .nav-next a,
.post-navigation .nav-previous a {
padding: 18px 23px;
background-color: #fff;
position: relative;
display: inline-block;
color: inherit;
}
.post-navigation .nav-previous a {
padding-left: 45px;
}
.post-navigation .nav-next a {
padding-right: 45px;
}
.post-navigation .nav-previous a::before {
display: block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
content: "";
position: absolute;
left: 20px;
top: 50%;
margin-top: -6px;
color: #b3b3b3;
font-size: 14px;
z-index: 1;
text-decoration: none;
line-height: 1em;
width: 14px;
height: 14px;
}
.post-navigation .nav-next a::before {
display: block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
content: "";
position: absolute;
right: 20px;
top: 50%;
margin-top: -6px;
color: #b3b3b3;
font-size: 14px;
z-index: 1;
text-decoration: none;
line-height: 1em;
width: 14px;
height: 14px;
}
/* Nav Menu
-------------------------------------- */
.widget_nav_menu ul li {
padding: 0!important;
}
.widget_nav_menu ul li a {
display: block;
padding: 10px 0!important;
}
/*
==========================================
10. External Plugins
==========================================
*/
/*
// Contact Form 7
// ------------------
*/
.wpcf7 p {
margin-bottom: 25px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"] {
width: 50%;
}
.wpcf7 select {
font-size: 14px;
font-size: 0.875rem;
}
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
display: inline-block;
width: auto;
height: 20px;
margin-right: 5px;
margin-top: 0;
}
.wpcf7-list-item {
display: block;
margin-bottom: 5px;
line-height: 20px;
}
.wpcf7 textarea {
width: 80%;
}
.wpcf7 input[type="submit"] {
width: auto;
border-color: #555555;
-webkit-transition: background-color 200ms;
-o-transition: background-color 200ms;
transition: background-color 200ms;
padding: 6px 15px;
}
.wpcf7 input[type="submit"]:hover {
background-color: #555555;
color: #fff;
}
.wpcf7 input[disabled="disabled"] {
opacity: 0.3;
}
.wpcf7-quiz {
margin-bottom: 0;
}
.wpcf7-not-valid {
border-color: red;
}
/*
// Visual Composer
// ------------------
*/
.ult-ib-effect-style9 .ult-new-ib-desc {
text-align: center!important;
}
.aio-icon-box.top-icon .align-icon,
.aio-icon-box.top-icon .aio-icon-header,
.aio-icon-box.top-icon .aio-icon-description {
text-align: left!important;
}
.align_text2.ult-ib-resp.ult-ib-effect-style9 h2 {
padding-top: 15%;
}
.align_text1.ult-ib-resp.ult-ib-effect-style9 h2 {
padding-top: 22%;
}
@media (min-width: 768px) and (max-width: 1345px) {
.align_text1.ult-ib-resp.ult-ib-effect-style9 h2 {
font-size: 16px !important;
font-size: 1rem !important;
padding-top: 17%;
}
}
.wpb_wrapper .products .product-category a {
overflow: hidden;
display: block;
}
.wpb_wrapper .products .product-category a img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: transform 300ms;
-o-transition: transform 300ms;
transition: transform 300ms;
}
.wpb_wrapper .products .product-category a:hover img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
z-index: 1;
position: relative;
}
.wpb_wrapper .products .product-category h3 {
background-color: #00b09a;
text-align: center;
color: #fff;
padding: 15px 20px!important;
z-index: 3;
position: relative;
-webkit-transition: transform 300ms;
-o-transition: transform 300ms;
transition: transform 300ms;
}
.wpb_wrapper .products .product-category a:hover h3 {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.wpb_wrapper .products .product-category .count {
display: none;
}
/*
// Revolution Slider
// ------------------
*/
.ql_slider_btn {
border: 2px solid #000;
padding: 15px 30px;
font-weight: bold;
text-transform: uppercase;
}
.ql_slider_btn:hover {
text-decoration: none;
}
.ql_slider_btn.black {
color: #000!important;
}
.ql_slider_btn.white {
color: #fff!important;
border-color: #fff;
}
@media (max-width: 767px) {
.tp-caption {
font-size: 18px !important;
font-size: 1.125rem !important;
}
}
/*
// Easy MailChimp Forms
// ------------------
*/
.widget_yikes_mc_widget input[type="submit"] {
display: inline-block;
width: auto;
background-color: transparent;
border: 2px solid #999999;
color: #999999;
}
.widget_yikes_mc_widget input[type="submit"]:hover {
background-color: #eeeeee;
border: 2px solid #eeeeee;
color: #555555;
}
.widget_yikes_mc_widget input[type="text"] {
border: none;
}
.widget_yikes_mc_widget .yks-mailchimpFormDivSubmit {
margin: 0;
}
.widget_yikes_mc_widget p {
padding-top: 0!important;
}
.widget_yikes_mc_widget .yks-status p {
color: #eeeeee;
margin-bottom: 10px;
}
/*
==========================================
11. Global Styles
==========================================
*/
html {
font-size: 1em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
}
img {
max-width: 100%;
height: auto;
}
/* Section Title
-------------------------------------------------- */
.section-title {
text-align: center;
text-transform: uppercase;
position: relative;
margin-bottom: 5rem;
}
.section-title::after {
position: absolute;
content: " ";
display: block;
height: 1px;
border-top: 2px solid #555555;
width: 1.47058823529412em;
left: 50%;
bottom: -0.73529412em;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.section-title.alt {
text-align: left;
color: #FFF;
}
.section-title.alt::after {
border-color: #fff;
left: 0;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.preloader {
background: #fff;
position: absolute;
width: 100%;
height: 100%;
display: block;
z-index: 30;
top: 0;
left: 0;
-webkit-transition: all 900ms ease-in-out;
-o-transition: all 900ms ease-in-out;
transition: all 900ms ease-in-out;
text-align: center;
color: #b3b3b3 !important;
}
.preloader i {
font-size: 28px;
position: absolute;
left: 50%;
top: 300px;
}
/* Read More Button
-------------------------------------------------- */
.read-more {
text-transform: uppercase;
margin-top: 10px;
display: inline-block;
padding: 5px 0;
color: #00b09a;
position: relative;
}
.read-more i {
margin-left: 10px;
font-size: 14px;
font-size: 0.875rem;
position: relative;
top: -1px;
color: inherit;
}
.read-more:hover {
text-decoration: none;
}
.read-more:after {
position: absolute;
left: 0;
bottom: 0;
-webkit-transition: all 250ms;
-o-transition: all 250ms;
transition: all 250ms;
content: " ";
display: block;
width: 0;
height: 1px;
background-color: #00b09a;
}
.read-more:hover:after {
width: 100%;
}
.ql_background {
-webkit-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
background-color: #fff;
}
.ql_background_hover {
-webkit-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
background-color: #fff;
}
.ql_background_hover:hover {
-webkit-box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 8px 1px rgba(0, 0, 0, 0.1);
}
/* Custom button
-------------------------------------------------- */
/* Override base .btn styles */
/* Apply text and background changes to three key states: default, hover, and active (click). */
.btn-ql,
.btn-ql:hover,
.btn-ql:active {
display: inline-block;
background-color: #00b09a;
border: 2px solid #00b09a;
color: #fff;
border-radius: 3px;
font-size: 14px;
font-size: 0.875rem;
text-transform: uppercase;
padding: 0.85714285714286em 2.5em;
font-weight: bold;
-webkit-transition: translate 100ms ease-in-out, opacity 200ms ease-in-out;
-o-transition: translate 100ms ease-in-out, opacity 200ms ease-in-out;
transition: translate 100ms ease-in-out, opacity 200ms ease-in-out;
-webkit-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
position: relative;
overflow: hidden;
}
.btn-ql:hover,
.btn-ql:hover:hover,
.btn-ql:active:hover {
background-color: #fff;
color: #000;
border-color: #fff;
text-decoration: none;
}
.btn-ql.alternative {
background-color: transparent;
border-color: #00b09a;
color: #00b09a;
}
.btn-ql.alternative:hover {
background-color: #00b09a;
color: #fff;
border-color: #00b09a;
}
.btn-ql.alternative-white {
background-color: transparent;
border-color: #fff;
color: #fff;
}
.btn-ql.alternative-white:hover {
background-color: #00b09a;
color: #fff;
border-color: #00b09a;
}
.btn-ql.alternative-gray {
background-color: transparent;
border-color: #b3b3b3;
color: #b3b3b3;
}
.btn-ql.alternative-gray:hover {
background-color: #00b09a;
color: #fff;
border-color: #00b09a;
}
/* Apply the custom-colored gradients */
/* Note: you'll need to include all the appropriate gradients for various browsers and standards. */
.btn-ql > i {
font-size: 1.16666666666667em;
position: absolute;
top: -2em;
left: 50%;
margin-left: -8px;
-webkit-animation: btn_in 300ms ease-in-out;
-o-animation: btn_in 300ms ease-in-out;
animation: btn_in 300ms ease-in-out;
}
.btn-ql > span {
-webkit-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
/*For special occacions */
.btn-ql > b.ql_sec_icon {
font-size: 1.16666666666667em;
font-weight: normal;
position: absolute;
left: 43%;
top: 0.57142857142857em;
-webkit-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
opacity: 0;
filter: alpha(opacity=0);
}
.btn-ql.ql_show_sec > b.ql_sec_icon {
opacity: 1;
filter: alpha(opacity=100);
}
.btn-ql.ql_show_sec > span,
.btn-ql.ql_show_sec > i {
opacity: 0;
filter: alpha(opacity=0);
}
/* Set the hover state */
/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */
.btn-ql:hover > span {
opacity: 0;
filter: alpha(opacity=0);
}
.btn-ql:hover > i {
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -8px;
-webkit-animation: btn_out 300ms ease-in-out;
-o-animation: btn_out 300ms ease-in-out;
animation: btn_out 300ms ease-in-out;
}
/*
Show the icon
*/
@-webkit-keyframes btn_out {
0% {
top: -2em;
}
100% {
top: 50%;
}
}
@-moz-keyframes btn_out {
0% {
top: -2em;
}
100% {
top: 50%;
}
}
@-o-keyframes btn_out {
0% {
top: -2em;
}
100% {
top: 50%;
}
}
@keyframes btn_out {
0% {
top: -2em;
}
100% {
top: 50%;
}
}
/*
Hide the icon
*/
@-webkit-keyframes btn_in {
0% {
top: 50%;
}
100% {
top: 4em;
}
}
@-moz-keyframes btn_in {
0% {
top: 50%;
}
100% {
top: 4em;
}
}
@-o-keyframes btn_in {
0% {
top: 50%;
}
100% {
top: 4em;
}
}
@keyframes btn_in {
0% {
top: 50%;
}
100% {
top: 4em;
}
}
.btn-ql:active {
-webkit-transform: translate(0, 1px);
-ms-transform: translate(0, 1px);
-o-transform: translate(0, 1px);
transform: translate(0, 1px);
-webkit-box-shadow: none;
box-shadow: none;
}
/*Hero Colors Classes */
/*----------------------------------------------------------------------*/
.hero_bck {
background-color: #00b09a;
}
.hero_border {
border-color: #00b09a;
}
.hero_color {
color: #00b09a;
}
.hero_bck2 {
background-color: #0a9878;
}
.hero_border2 {
border-color: #0a9878;
}
.hero_color2 {
color: #0a9878;
}
.contrast_bck {
background-color: #fff;
}
/* Make Space between sections */
/*----------------------------------------------------------------------*/
.clear_space {
margin: 2.30769230769231em 0;
}
/* Hover effect for thumbnails */
/*----------------------------------------------------------------------*/
.ql_thumbnail_hover {
position: relative;
display: block;
text-align: center;
overflow: hidden;
}
.ql_thumbnail_hover:before {
content: " ";
display: block;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
z-index: 1;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
-webkit-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
opacity: 0;
border-radius: 2px;
}
.ql_thumbnail_hover:hover:before {
opacity: 1;
}
.ql_thumbnail_hover:after {
-webkit-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
-webkit-transition-delay: 100ms;
transition-delay: 100ms;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
display: block;
z-index: 2;
position: absolute;
top: 45%;
left: 50%;
content: "+";
color: #fff;
font: bold 14px/1 FontAwesome;
font-size: 62px;
font-size: 3.875rem;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ql_thumbnail_hover:hover:after {
top: 50%;
opacity: 1;
}
.ql_thumbnail_hover img {
-webkit-transition: transform 800ms;
-o-transition: transform 800ms;
transition: transform 800ms;
}
.ql_thumbnail_hover:hover img {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
/* Font size using REMs */
/*----------------------------------------------------------------------*/
/* Inputs */
/*----------------------------------------------------------------------*/
input,
textarea {
display: block;
width: 100%;
height: 36px;
padding: 6px 12px;
font-size: 16px;
line-height: 1.42857143;
color: #555555;
vertical-align: middle;
background-color: #fff;
background-image: none;
border: 2px solid #ccc;
border-radius: 3px;
margin-bottom: 0.71428571428571em;
}
input:focus,
textarea:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #999;
opacity: 1;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #999;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999;
}
input[disabled],
textarea[disabled],
input[readonly],
textarea[readonly],
fieldset[disabled] input,
fieldset[disabled] textarea {
cursor: not-allowed;
background-color: #eeeeee;
}
textareainput,
textareatextarea {
height: auto;
}
textarea {
min-height: 100px;
}
/*
==========================================
12. Responsive Styles
==========================================
*/
/*
// Extra Small Breakpoint
// ------------------
*/
@media (max-width: 767px) {
/*
Header
==========================================
*/
.logo_container {
position: relative;
display: block;
float: none;
margin-right: 0;
width: 82%;
}
#ql-navigation {
padding: 0;
}
#jqueryslidemenu {
margin-bottom: 20px;
margin-top: 0;
float: none;
text-align: left;
}
#jqueryslidemenu ul.nav > li {
display: block;
}
#ql_nav_collapse {
padding: 0;
padding-top: 10px;
}
.navbar-nav .open .dropdown-menu {
display: block;
width: 100%;
-webkit-box-shadow: none;
box-shadow: none;
}
.dropdown-submenu > .dropdown-menu {
left: 0;
position: relative;
padding-left: 20px;
}
/*1st sub level menu*/
#ql-navigation .navbar-nav {
margin: 0;
}
#jqueryslidemenu ul.nav > li > ul {
position: relative;
top: 0;
padding: 0;
}
.dropdown:hover .dropdown-menu {
display: none;
}
.dropdown.open:hover .dropdown-menu {
display: block;
width: 100%;
}
#jqueryslidemenu ul.nav > li > ul > li.menu-item-has-children {
display: block;
width: 100%;
padding: 5px 20px;
}
#jqueryslidemenu ul.nav > li > ul > li.has-image {
display: none;
}
/*
Home
==========================================
*/
.welcome-intro .intro-line {
font-size: 18px;
font-size: 1.125rem;
}
.btn-ql,
.btn-ql:hover,
.btn-ql:active {
font-size: 13px;
font-size: 0.8125rem;
padding: 0.76923076923077em 1.53846153846154em;
}
.services-section {
padding: 10% 5% 1% 5%;
}
.service {
margin-bottom: 15%;
}
/*
Quote Section
---------------------------------------*/
.quote-wrap {
display: block;
width: 100%;
padding: 5% 2% 5% 8%;
}
.laptop-wrap {
display: block;
width: 100%;
}
.quote-wrap blockquote {
font-size: 16px;
font-size: 1rem;
}
.quote-cite {
font-size: 14px;
font-size: 0.875rem;
}
/*
Video Section
---------------------------------------*/
.video-wrap {
display: block;
width: 100%;
}
.video-text-wrap {
width: 100%;
display: block;
padding: 10%;
}
/*
Testimonials Section
---------------------------------------*/
.testimonials-section {
padding: 14% 5%;
}
.testimonial blockquote {
font-size: 22px;
font-size: 1.375rem;
}
/*
Image Section
---------------------------------------*/
.image-section .image-wrap {
position: relative;
top: auto;
left: auto;
bottom: auto;
padding-bottom: 52%;
width: 100%;
display: block;
}
.image-text {
margin-left: 0;
width: 100%;
display: block;
padding: 10%;
}
.image-text p {
font-size: 14px;
font-size: 0.875rem;
}
/*
Team Section
---------------------------------------*/
.team-section {
padding: 10% 0;
}
.team-wrap {
margin-bottom: 2.5rem;
}
.team-wrap:after {
content: 'flickity';
display: none;
/* hide :after */
}
.widget_team-member-widget {
width: 70%;
margin: 10px 10%;
display: inline-block;
vertical-align: top;
}
/*
Phone Section
---------------------------------------*/
.phone-section {
padding: 10%;
}
.phone-services {
display: block;
width: 100%;
margin-left: 0;
padding-top: 0;
}
.phone-services .service {
width: 100%;
display: block;
margin: 0 0 8%;
}
/*
Tagline Section
---------------------------------------*/
.tagline-section a {
padding: 5% 10%;
}
.tagline-section .tagline {
font-size: 24px;
font-size: 1.5rem;
}
.tagline-section span {
font-size: 14px;
font-size: 0.875rem;
}
/*
Client Section
---------------------------------------*/
.clients-section {
padding: 10% 0;
}
.clients-wrap:after {
content: 'flickity';
display: none;
/* hide :after */
}
.clients-wrap .clients-logo {
width: 45%;
margin: 5%;
}
/*
Map Section
---------------------------------------*/
.map-wrap {
position: relative;
left: 0;
top: 0;
bottom: auto;
width: 100%;
height: 250px;
display: block;
}
.map-content {
width: 100%;
margin-left: 0;
display: block;
padding: 10%;
}
/*
Pricing Section
---------------------------------------*/
.cd-pricing-header h2 {
font-size: 16px;
font-size: 1rem;
color: #fff;
}
.cd-currency,
.cd-value {
font-size: 26px;
font-size: 1.625rem;
}
.cd-popular .cd-duration {
color: #fff;
opacity: 0.7;
}
/*
Portfolio Section
---------------------------------------*/
.portfolio-section .portfolio-item {
width: 50%;
height: 50%;
padding-bottom: 50%;
display: inline-block;
vertical-align: top;
}
.portfolio-section .portfolio-item .portfolio-hover span {
font-size: 16px;
font-size: 1rem;
}
/*
Blog Section
---------------------------------------*/
.blog-section {
padding: 7% 10%;
}
.blog-wrap .blog-item {
width: 100%;
margin-right: 5%;
}
/*
Content
--------------------------------
*/
.metadata {
display: block;
}
.metadata ul li {
float: left;
}
.error404 .search-form {
width: 100%;
}
/*
Sidebar
==========================================
*/
#sidebar {
padding-right: 0;
}
/*Comments Form---------------------------------------------------*/
#respond .input-wrap {
width: 100%;
}
/*
Footer
==========================================
*/
.sub_footer p {
margin-bottom: 20px;
float: none;
line-height: 1.6em;
}
.nav_social {
float: none;
}
.section-title {
margin-bottom: 4rem;
}
}
/*
// Small Breakpoint
// ------------------
*/
@media (min-width: 768px) and (max-width: 1345px) {
.container {
width: 96%;
}
/*
Header
==========================================
*/
.logo_container {
margin-bottom: 10px;
text-align: center;
}
#jqueryslidemenu {
text-align: center;
}
/*
Home
==========================================
*/
/*
Welcome Section
---------------------------------------*/
.welcome-intro .intro-line {
font-size: 38px;
font-size: 2.375rem;
}
/*
Quote Section
---------------------------------------*/
.quote-wrap blockquote {
font-size: 16px;
font-size: 1rem;
}
.quote-cite {
font-size: 14px;
font-size: 0.875rem;
}
/*
Video Section
---------------------------------------*/
.video-wrap {
display: block;
width: 100%;
}
.video-text-wrap {
width: 100%;
display: block;
padding: 10%;
}
/*
Testimonials Section
---------------------------------------*/
.testimonials-section {
padding: 10% 10%;
}
/*
Image Section
---------------------------------------*/
.image-section .image-wrap {
position: relative;
top: auto;
left: auto;
bottom: auto;
padding-bottom: 52%;
width: 100%;
display: block;
}
.image-text {
margin-left: 0;
width: 100%;
display: block;
padding: 8%;
}
/*
Team Section
---------------------------------------*/
.widget_team-member-widget {
width: 25%;
margin: 10px 3%;
display: inline-block;
vertical-align: top;
}
/*
Phone Section
---------------------------------------*/
.phone-section {
padding: 8% 10%;
}
.phone-services {
display: block;
width: 100%;
margin-left: 0;
padding-top: 0;
}
.phone-services .service {
width: 45%;
margin: 0 2% 8%;
}
/*
Clients Section
---------------------------------------*/
.clients-section {
padding: 5% 5%;
}
.clients-wrap .clients-logo {
width: 20%;
margin: 2%;
}
/*
Clients Section
---------------------------------------*/
.cd-has-margins .cd-pricing-list > li {
width: 32%;
}
.cd-value {
font-size: 60px;
font-size: 3.75rem;
}
.cd-duration {
font-size: 16px;
font-size: 1rem;
}
/*
Pricing Section
---------------------------------------*/
.cd-has-margins .cd-select {
padding: 1.2em 0;
}
/*
Portfolio Section
---------------------------------------*/
.portfolio-section .portfolio-item .portfolio-hover span {
font-size: 16px;
font-size: 1rem;
}
/*
Blog Section
---------------------------------------*/
.blog-wrap .blog-item {
width: 45%;
display: inline-block;
vertical-align: top;
margin-right: 6%;
margin-bottom: 3%;
}
/*
Content
==========================================
*/
.metadata ul li {
float: left;
}
/*
Sidebar
==========================================
*/
#sidebar {
padding-right: 0;
}
#sidebar .widget {
padding: 0 20px;
}
/*Comments Form---------------------------------------------------*/
#respond .input-wrap {
width: 46%;
}
}
/*
// Medium Breakpoint
// ------------------
*/
@media (min-width: 1346px) and (max-width: 1509px) {
/*
Header
--------------------------------
*/
.ql_nav_btn {
top: 45px;
}
.meta_blocks div {
height: 56px;
}
.meta_icon {
line-height: 53px;
}
.meta_blocks div i {
font-size: 24px;
font-size: 1.5rem;
}
.sub_icon {
font-size: 22px;
font-size: 1.375rem;
}
.meta_comments .sub_icon {
line-height: 50px;
}
.meta_date span {
font-size: 11px;
font-size: 0.6875rem;
}
.ql_cart-btn {
padding-left: 10px;
margin-left: 5px;
}
.ql_login-btn {
padding: 5px 10px;
}
#ql_woo_cart {
width: 1200px;
}
/*
Content
==========================================
*/
.content_background {
padding: 40px;
}
/*
Phone Section
---------------------------------------*/
.phone-section {
padding: 4% 6% 2% 6%;
}
.phone-services .service {
width: 45%;
margin: 0 2% 5%;
}
/*
Pricing Section
---------------------------------------*/
.cd-has-margins .cd-pricing-list > li {
width: 30%;
margin: 0 1%;
}
.cd-value {
font-size: 68px;
font-size: 4.25rem;
}
.cd-currency {
font-size: 26px;
font-size: 1.625rem;
}
.cd-has-margins .cd-select {
padding: 1.2em 0;
}
/*
Sidebar
==========================================
*/
#sidebar .widget {
padding: 0;
}
/*Comments Form---------------------------------------------------*/
#respond .input-wrap {
width: 47%;
}
}
/*
// Extra Larga Breakpoint
// ------------------
*/
/*
==========================================
LESS Variables and Mixins
==========================================
*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2015 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;
}
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: 0.75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: 0.75s;
}
@-webkit-keyframes bounce {
0%,
20%,
53%,
80%,
100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-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-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-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;
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;
}
@-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(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.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(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.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;
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(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.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(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.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;
}
@-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 jello {
11.1% {
-webkit-transform: none;
transform: none;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes jello {
11.1% {
-webkit-transform: none;
transform: none;
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
100% {
-webkit-transform: none;
transform: none;
}
}
.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes bounceIn {
0%,
20%,
40%,
60%,
80%,
100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
0%,
20%,
40%,
60%,
80%,
100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
0%,
60%,
75%,
90%,
100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
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-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
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-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
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-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
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-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
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-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
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-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
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-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
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(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.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(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.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(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-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(0.95, 0.95, 0.95);
transform: perspective(400px) scale3d(0.95, 0.95, 0.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(0.95, 0.95, 0.95);
transform: perspective(400px) scale3d(0.95, 0.95, 0.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-animation-timing-function: ease-in;
animation-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-animation-timing-function: ease-in;
animation-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-animation-timing-function: ease-in;
animation-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-animation-timing-function: ease-in;
animation-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-animation-timing-function: ease-in;
animation-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-animation-timing-function: ease-in;
animation-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-animation-timing-function: ease-in;
animation-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-animation-timing-function: ease-in;
animation-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-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-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;
}
@-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;
}
@-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(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInRight {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
0% {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
100% {
opacity: 0;
}
}
@keyframes zoomOut {
0% {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
100% {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
100% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.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.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
100% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.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.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
100% {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
100% {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.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(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
100% {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
100% {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.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(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
100% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.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.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
100% {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.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.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
}
@-webkit-keyframes slideInDown {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDown {
0% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
0% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
0% {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes slideOutDown {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes slideOutLeft {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes slideOutRight {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes slideOutUp {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}