/*
Theme Name: MasterShop Jobs
Author: MasterShop
Author URI: www.MasterShop.co.il
Description: MasterShop Careers.
License: GNU General Public License v2 or later
License URI: www.MasterShop.co.il
*/
/*Wordpress editor styles start*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.entry-content img {
margin: 0 0 1.5em 0;
}
.alignleft, img.alignleft {
margin-right: 1.5em;
display: inline;
float: left;
}
.alignright, img.alignright {
margin-left: 1.5em;
display: inline;
float: right;
}
.aligncenter, img.aligncenter {
margin-right: auto;
margin-left: auto;
display: block;
clear: both;
}
.alignnone, img.alignnone {
/* not sure about this one */
}
.wp-caption {
margin-bottom: 1.5em;
text-align: center;
padding-top: 5px;
}
.wp-caption img {
border: 0 none;
padding: 0;
margin: 0;
}
.wp-caption p.wp-caption-text {
line-height: 1.5;
font-size: 10px;
margin: 0;
}
.wp-smiley {
margin: 0 !important;
max-height: 1em;
}
blockquote.left {
margin-right: 20px;
text-align: right;
margin-left: 0;
width: 33%;
float: left;
}
blockquote.right {
margin-left: 20px;
text-align: left;
margin-right: 0;
width: 33%;
float: right;
}
/*Wordpress editor styles end*/
/* fonts */
@font-face {
font-family: 'OpenSansHebrewRegular';
src: url('font/opensansregular.eot');
src: url('font/opensansregular.eot') format('embedded-opentype'),
url('font/opensansregular.woff2') format('woff2'),
url('font/opensansregular.woff') format('woff'),
url('font/opensansregular.ttf') format('truetype'),
url('font/opensansregular.svg#OpenSansHebrewRegular') format('svg');
}
@font-face {
font-family: 'OpenSansHebrewBold';
src: url('font/opensanbold.eot');
src: url('font/opensanbold.eot') format('embedded-opentype'),
url('font/opensanbold.woff2') format('woff2'),
url('font/opensanbold.woff') format('woff'),
url('font/opensanbold.ttf') format('truetype'),
url('font/opensanbold.svg#OpenSansHebrewBold') format('svg');
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
/* rtl bootstrap */
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
float:right;
}
.left{
float:left;
}
.last{
margin-left:0 !important;
}
/* MasterShop Jobs css start */
body{
font-family: 'OpenSansHebrewRegular';
height: 100%;
padding-bottom: 50px;
background: url('images/bg-cover.jpg') repeat fixed;
background-size: 100%;
}
html{
height: 100%;
}
.cover{
position:fixed;
display:none;
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.7);
z-index:2;
top:0;
left:0;
}
.send-cv-form{
height:200px;
width: 90%;
display:none;
background-color:#FFF;
clear:both;
margin-top:20px;
}
#main-container{
height: auto;
margin-bottom: -90px;
padding-bottom:200px;
}
#main-container:after {
content: "";
display: block;
}
/* top menu */
.navbar{
border:none;
border-top: 15px solid #7d9c52;
border-radius: 0;
border-bottom:1px solid #ccc;
}
.navbar-brand{
padding-right:0;
}
.navbar-default{
background-color: #fff;
}
.navbar-nav{
margin-right:20px;
}
.navbar-nav>li{
float:right;
}
.navbar-header{
float:right;
}
/* filter */
.select2 {
width: 120px !important;
}
.filter-count-3, .beautiful-taxonomy-filters-button{
float:right;
margin-left:10px;
}
/* archive-job (home page) */
.masterjob{
background-color: #c93232;
float:left;
text-align:center;
padding:10px;
}
.masterjob h2{
color:white;
font-size:20px;
margin-bottom: 7px;
}
.masterjob p{
color:white;
}
.right{
float:right;
}
.beautiful-taxonomy-filters{
margin-bottom: 55px;
background-color: #F9F9F9;
width:610px;
padding: 15px;
float:right;
border:1px solid #ccc;
}
.filter-heading{
float: right;
margin-top: 5px;
margin-left: 15px;
}
.filter-subnit-btn{
padding: 7px 15px;
background-color: #484848;
font-size: 13px;
margin-top: 1px;
border: none;
outline:none;
color: white;
}
.job-wrapper {
position: relative;
width: 360px;
float: right;
min-height: 292px;
margin-bottom: 85px;
margin: 15px 7px 40px 19px;
}
.delete-test{
position: absolute;
display: block;
border: 1px solid #444340;
margin-top: 135px;
margin-right: 44px;
z-index: 1;
text-align: center;
background-color: white;
padding: 15px 20px;
color: black;
display: none;
}
.delete-test h3{
margin-bottom:5px;
}
.delete-test a{
padding: 5px 10px;
font-size: 19px;
margin: 0px 8px 0px 8px;
}
.delete-test a.yes{
color:#7D9C52;
}
.delete-test a.no{
color:#c93232;
}
.job-container{
width: 100%;
background-color: #f9f9f9;
padding: 48px 15px 25px 15px;
position: relative;
font-size: 14px;
min-height: 310px;
margin-bottom: 0px;
border: 1px solid #ccc;
}
.job-title {
position: relative;
margin-top: -35px;
margin-right: -24px;
color: white;
font-size: 19px;
width: 352px;
line-height: 20px;
padding: 10px 25px 10px;
margin-bottom: 15px;
background-color: #333;
}
.job-title a{
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color:white;
font-size:18px;
text-decoration:none;
}
.title-bg{
position:absolute;
bottom: -13px;
right: 0;
}
.job-thumbnail{
float:right;
margin-left:25px;
max-width:212px;
height:auto;
box-shadow: 1px 1px 0px #ccc;
}
.job-thumbnail img {
width:100%;
height:auto;
}
.job-content{
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
float:right;
line-height:18px;
width:330px;
}
.job-desc{
margin-bottom:5px;
}
.job-info{
margin-bottom:5px;
margin-left:30px;
max-width:300px;
}
.job-info p{
margin-bottom: 10px;
line-height: 20px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
.job-info-content{
display:none;
margin-left: 30px;
max-width: 300px;
}
.job-info-content p{
margin-bottom:5px;
line-height: 21px;
}
.job-info p.bold, .job-requirement p.bold{
margin-bottom:9px;
font-family:'opensanshebrewbold';
display:block !important;
}
.read-more{
display:none;
}
.read-more-close{
display:none;
}
.job-requirement{
width: 330px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
.job-requirement ul{
list-style-type: disc;
padding-right: 17px;
line-height: 17px;
}
.job-requirement ul li{
margin-bottom:5px;
}
.close-more-requirment{
display:none;
}
.hide-req{
display:none;
}
.bold{
font-family:'opensanshebrewbold';
}
.job-specs{
display: none;
padding: 20px 15px 10px 15px;
position: absolute;
z-index: 1;
left: 0;
top: 320px;
background-color: #E0E0E0;
border: 1px solid #9C9C9C;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
width: 360px;
box-shadow: 0px 8px 22px -7px #000;
}
.job-spec{
float: right;
min-height: 76px;
width: 161px;
background-color: #FFF;
padding: 10px;
margin-left: 5px;
margin-bottom: 5px;
}
.job-spec .bold{
margin-bottom:5px;
font-size:14px;
}
.job-type p.bold, .job-work p.bold, .job-location p.bold, .job-number p.bold{
margin-bottom:5px;
}
.job-buttons .job-more-details{
background-color: #E0E0E0;
color: #333333;
font-family: 'opensanshebrewregular';
font-size: 15px;
margin-left: 5px;
width: 140px;
text-align: center;
line-height: 32px;
text-decoration: none;
position: relative;
z-index: 2;
height: 30px;
border: 1px solid #9C9C9C;
border-bottom: 0;
}
.job-more-details{
display:none;
font-family: 'opensanshebrewregular';
}
a.post-edit-link{
display: block;
position: absolute;
left: -1px;
top: 59px;
background-color: #333333;
line-height: 29px;
height: 31px;
width: 31px;
padding:4px 5px 5px 5px;
text-align: center;
color: white;
text-decoration: none;
}
.job-remove{
display: block;
position: absolute;
left: -1px;
top: 95px;
background-color: #c93232;
line-height: 29px;
height: 31px;
width: 31px;
padding:4px 5px 5px 5px;
text-align: center;
color: white;
text-decoration: none;
}
a.job-remove img{
width:16px;
height:16px;
}
a.post-edit-link img{
width:16px;
height:16px;
}
.job-number{
display: block;
line-height: 31px;
height: 30px;
}
.job-number p{
line-height:26px;
}
.job-buttons{
text-align: center;
position: absolute;
margin-top: 5px;
bottom: -15px;
margin: 0 auto;
left: 35px;
text-align: left;
width: 100%;
}
.read-more-requirment, .close-more-requirment{
margin-right:-15px;
}
.more-btn{
background-color: #484848;
}
.more-btn a{
color:white;
text-decoration:none;
}
a.send-cv {
width: 140px;
height: 32px;
display: inline-block;
font-size: 18px;
line-height: 29px;
text-align: center;
left: 0;
color: #FFF;
background-color: #7D9C52;
text-decoration: none;
position: relative;
z-index: 2;
}
a.close-form {
display:none;
}
.social-btns{
display:none;
height: 48px;
background-color: #d1d1d1;
margin:0px 5px;
}
.facebook-btn{
background: url('images/facebook.png') no-repeat;
height: 32px;
width: 32px;
display: block;
float: right;
margin-right:5px;
}
.twitter-btn{
background: url('images/twitter.png') no-repeat;
height: 32px;
width: 32px;
display: table-cell;
float: right;
margin-right:5px;
}
.linkedin-btn{
background: url('images/linkedin.png') no-repeat;
height: 32px;
width: 32px;
display: table-cell;
float: right;
margin-right:5px;
}
.mail-btn{
background: url('images/email.png') no-repeat;
height: 32px;
width: 32px;
display: table-cell;
float: right;
}
.job-buttons .post-edit-link img{
height:14px;
}
.job-buttons a.post-edit-link{
background-color: #333333;
padding: 14px;
color: white;
text-decoration: none;
border-radius: 0px 10px 0px;
float: right;
font-size: 20px;
}
.job-buttons a.post-edit-link:hover{
color:white;
text-decoration:none;
}
/* sidebar + home-sidebar */
.sidebar-widget{
border: 1px solid #F6F6F6;
margin-bottom:25px;
}
.sidebar-title{
background-color: #FCFCFC;
text-align: right;
padding: 10px;
border-bottom: 1px solid #F6F6F6;
}
.sidebar-content{
padding:10px;
}
.sidebar-content p {
line-height:21px;
margin-bottom:5px;
}
.widget-logo{
text-align:center;
}
.widget-logo img{
width: 200px;
margin-top: 10px;
}
/* pages */
.page h2{
font-size: 25px;
font-weight: bold;
position: relative;
margin-top: -21px;
width: 758px;
margin-right: -30px;
margin-bottom: 10px;
background-color: #333;
color: #FFF;
padding: 10px 25px 10px;
}
.page .hentry {
background-color: #FFF;
border: 1px solid #CCC;
padding: 20px;
margin-bottom: 20px;
}
/* WP User Frontend */
ul.wpuf-form li{
padding-right:0 !important;
}
ul.wpuf-form li .wpuf-label{
float:right !important;
}
/* Dashboard */
.wpuf-table{
text-align:right !important;
margin: 15px 0px !important;
}
table.wpuf-table thead th, table.wpuf-table th{
text-align:right !important;
}
.wpuf-author{
display:none;
}
/* footer */
.site-footer, #main-container:after {
height: 90px;
}
.site-footer {
display:none;
background: #7d9c52;
text-align: center;
color: white;
padding-top: 27px;
font-size: 32px;
}
/* modal send CV */
#open-form-modal{
display:none;
position: relative;
margin: 0 auto;
}
#simplemodal-overlay{
background-color:black;
}
#simplemodal-container{
position: absolute !important;
z-index: 1002;
background-color:white;
width: 800px !important;
left: 50% !important;
height: auto !important;
min-height:650px !important;
top: 125px !important;
margin-left: -400px !important;
text-align: center !important;
}
.loader{
display:none;
}
.modal-job-image{
float:left;
}
.modal-container{
padding-top:10px;
float:right;
}
.modal-job-title-head{
color: white;
font-size: 19px;
width: 670px;
line-height: 20px;
padding: 10px 25px 10px;
margin-bottom: 15px;
margin-right: -8px;
background-color: #333;
text-align: right;
float:right;
}
.modal-title-bg{
position: absolute;
bottom: -13px;
right: -8px;
bottom: -64px;
}
.modal-title-bg-left{
position: absolute;
bottom: -13px;
bottom: -64px;
left: -8px;
}
.modal-job-number{
float: left;
width: 140px;
line-height: 14px;
padding: 5px 25px 5px;
margin-bottom: 15px;
font-size: 14px;
margin-right: 0px;
margin-left: -7px;
background-color: #333;
text-align: center;
color: white;
}
.modal-job-number .spec-head{
margin-bottom:4px;
}
.modal-thumbnail{
float:right;
margin-right:16px;
}
.modal-job-content p{
float: left;
margin-right: 16px;
width: 527px;
text-align: right;
padding-top: 7px;
padding-left: 16px;
}
.modal-job-content-head{
float: left;
font-family: opensanshebrewbold;
margin-right: 16px;
width: 527px;
padding-left:17px;
text-align: right;
}
.modal-job-specs{
padding:16px;
}
.modal-job-specs .spec-head{
margin-bottom:2px;
}
.modal-job-type,.modal-job-work,.modal-job-location{
float: right;
background-color: #EFEFEF;
padding: 15px;
text-align: right;
width: 245px;
border: 1px solid #E0E0E0;
margin-left: 16px;
min-height: 80px;
}
.modal-job-location{
margin-left:0px;
}
.spec-head{
font-family:opensanshebrewbold;
}
.modal-requirement{
float: right;
margin-right: 17px;
background-color: #EFEFEF;
margin-top: 16px;
width: 485px;
padding: 15px;
margin-bottom:16px;
text-align:right;
border: 1px solid #E0E0E0;
}
.modal-requirement h3{
font-family:opensanshebrewbold;
}
.modal-job-requirement{
list-style: disc;
text-indent: -6px;
margin-top: 5px;
margin-right: 20px;
}
.form-title{
background-color: #333;
color: white;
padding: 10px 15px 10px;
font-size: 20px;
line-height: 20px;
padding: 10px 25px 10px;
float: left;
width: 264px;
margin-top: -15px;
margin-left: -16px;
margin-bottom: 15px;
}
.send-cv-container input[type=submit]{
background-color: #7d9c52;
color: white;
font-size: 24px;
outline:none;
background: #7d9c52 url('images/sendcvbtn.png') no-repeat 51px 6px;
}
.social-share{
float: left;
text-align:left;
width: 266px;
padding: 17px 15px 13px;
margin: 0px 16px 16px 16px;
background-color: #EFEFEF;
border: 1px solid #E0E0E0;
}
.social-share h3{
float:right;
margin-top:-2px;
}
.social-share a.facebook{
background: url('images/facebook.png') no-repeat;
padding: 0px 17px 11px;
}
.social-share a.Twitter{
background: url('images/twitter.png') no-repeat;
padding: 0px 17px 11px;
}
.social-share a.Linkedin{
background: url('images/linkedin.png') no-repeat;
padding: 0px 17px 11px;
}
.social-share a.Mail{
background: url('images/email.png') no-repeat;
padding: 0px 17px 11px;
}
.simplemodal-container .cv-form div.wpcf7-validation-errors{
border:none;
}
.simplemodal-container .cv-form div.wpcf7-response-output{
margin:0;
padding:0;
}
.cv-form{
position: relative;
float: right;
width: 265px;
border: 1px solid #E0E0E0;
padding: 15px;
background-color: #EFEFEF;
margin-top: 16px;
margin-right: 16px;
margin-bottom: 16px;
}
.cv-form form input{
width:200px;
}
/* company-profile-page */
ul.wpuf-form li .wpuf-section-wrap h2.wpuf-section-title{
margin: 0;
background-color: #fff;
color: black;
padding-right: 0;
width:100%;
}
/*!
* animsition v3.6.0
* A simple and easy jQuery plugin for CSS animated page transitions.
* http://blivesta.github.io/animsition
* License : MIT
* Author : blivesta (http://blivesta.com/)
*/
.animsition,.animsition-overlay{position:relative;opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animsition-overlay-slide{position:fixed;z-index:1;width:100%;height:100%;background-color:#ddd}.animsition-loading{position:fixed;z-index:2;top:0;width:100%;height:100%;background:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22%23ccc%22%3E%0A%20%20%3Cpath%20opacity%3D%22.25%22%20d%3D%22M16%200%20A16%2016%200%200%200%2016%2032%20A16%2016%200%200%200%2016%200%20M16%204%20A12%2012%200%200%201%2016%2028%20A12%2012%200%200%201%2016%204%22/%3E%0A%20%20%3Cpath%20d%3D%22M16%200%20A16%2016%200%200%201%2032%2016%20L28%2016%20A12%2012%200%200%200%2016%204z%22%3E%0A%20%20%20%20%3CanimateTransform%20attributeName%3D%22transform%22%20type%3D%22rotate%22%20from%3D%220%2016%2016%22%20to%3D%22360%2016%2016%22%20dur%3D%220.8s%22%20repeatCount%3D%22indefinite%22%20/%3E%0A%20%20%3C/path%3E%0A%3C/svg%3E%0A%0A) center center no-repeat;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animsition-loading:after{font-size:1pc;position:fixed;top:50%;width:100%;margin-top:20px;content:'Loading';text-align:center;color:#aaa}@-webkit-keyframes a{0%{opacity:0}to{opacity:1}}@keyframes a{0%{opacity:0}to{opacity:1}}.fade-in{-webkit-animation-name:a;animation-name:a}@-webkit-keyframes b{0%{opacity:1}to{opacity:0}}@keyframes b{0%{opacity:1}to{opacity:0}}.fade-out{-webkit-animation-name:b;animation-name:b}@-webkit-keyframes c{0%{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes c{0%{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-up{-webkit-animation-name:c;animation-name:c}@-webkit-keyframes d{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}}@keyframes d{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}}.fade-out-up{-webkit-animation-name:d;animation-name:d}@-webkit-keyframes e{0%{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes e{0%{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-up-sm{-webkit-animation-name:e;animation-name:e}@-webkit-keyframes f{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}}@keyframes f{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}}.fade-out-up-sm{-webkit-animation-name:f;animation-name:f}@-webkit-keyframes g{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes g{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-up-lg{-webkit-animation-name:g;animation-name:g}@-webkit-keyframes h{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}@keyframes h{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}.fade-out-up-lg{-webkit-animation-name:h;animation-name:h}@-webkit-keyframes i{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes i{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-down{-webkit-animation-name:i;animation-name:i}@-webkit-keyframes j{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}}@keyframes j{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(500px);transform:translateY(500px);opacity:0}}.fade-out-down{-webkit-animation-name:j;animation-name:j}@-webkit-keyframes k{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes k{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.fade-in-down-sm{-webkit-animation-name:k;animation-name:k}@-webkit-keyframes l{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}}@keyframes l{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}}.fade-out-down-sm{-webkit-animation-name:l;animation-name:l}.fade-in-down-lg{-webkit-animation-name:i;animation-name:i}@-webkit-keyframes m{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}}@keyframes m{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}}.fade-out-down-lg{-webkit-animation-name:m;animation-name:m}@-webkit-keyframes n{0%{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes n{0%{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-left{-webkit-animation-name:n;animation-name:n}@-webkit-keyframes o{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}}@keyframes o{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-500px);transform:translateX(-500px);opacity:0}}.fade-out-left{-webkit-animation-name:o;animation-name:o}@-webkit-keyframes p{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes p{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-left-sm{-webkit-animation-name:p;animation-name:p}@-webkit-keyframes q{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}}@keyframes q{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-100px);transform:translateX(-100px);opacity:0}}.fade-out-left-sm{-webkit-animation-name:q;animation-name:q}@-webkit-keyframes r{0%{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes r{0%{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-left-lg{-webkit-animation-name:r;animation-name:r}@-webkit-keyframes s{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}}@keyframes s{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(-1500px);transform:translateX(-1500px);opacity:0}}.fade-out-left-lg{-webkit-animation-name:s;animation-name:s}@-webkit-keyframes t{0%{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes t{0%{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-right{-webkit-animation-name:t;animation-name:t}@-webkit-keyframes u{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}}@keyframes u{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(500px);transform:translateX(500px);opacity:0}}.fade-out-right{-webkit-animation-name:u;animation-name:u}@-webkit-keyframes v{0%{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes v{0%{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-right-sm{-webkit-animation-name:v;animation-name:v}@-webkit-keyframes w{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}}@keyframes w{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(100px);transform:translateX(100px);opacity:0}}.fade-out-right-sm{-webkit-animation-name:w;animation-name:w}@-webkit-keyframes x{0%{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes x{0%{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}.fade-in-right-lg{-webkit-animation-name:x;animation-name:x}@-webkit-keyframes y{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}}@keyframes y{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}to{-webkit-transform:translateX(1500px);transform:translateX(1500px);opacity:0}}.fade-out-right-lg{-webkit-animation-name:y;animation-name:y}@-webkit-keyframes z{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}@keyframes z{0%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}.rotate-in{-webkit-animation-name:z;animation-name:z}@-webkit-keyframes A{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);transform-origin:center center;opacity:0}}@keyframes A{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);transform-origin:center center;opacity:0}}.rotate-out{-webkit-animation-name:A;animation-name:A}@-webkit-keyframes B{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}@keyframes B{0%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}.rotate-in-sm{-webkit-animation-name:B;animation-name:B}@-webkit-keyframes C{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);transform-origin:center center;opacity:0}}@keyframes C{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(45deg);transform:rotate(45deg);transform-origin:center center;opacity:0}}.rotate-out-sm{-webkit-animation-name:C;animation-name:C}@-webkit-keyframes D{0%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}@keyframes D{0%{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);transform-origin:center center;opacity:0}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}}.rotate-in-lg{-webkit-animation-name:D;animation-name:D}@-webkit-keyframes E{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);transform-origin:center center;opacity:0}}@keyframes E{0%{-webkit-transform:rotate(0);transform:rotate(0);transform-origin:center center;opacity:1}0%,to{-webkit-transform-origin:center center}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);transform-origin:center center;opacity:0}}.rotate-out-lg{-webkit-animation-name:E;animation-name:E}@-webkit-keyframes F{0%{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}}@keyframes F{0%{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}}.flip-in-x{-webkit-animation-name:F;animation-name:F;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes G{0%{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}}@keyframes G{0%{-webkit-transform:perspective(550px) rotateX(0deg);transform:perspective(550px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateX(90deg);transform:perspective(550px) rotateX(90deg);opacity:0}}.flip-out-x{-webkit-animation-name:G;animation-name:G;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes H{0%{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}}@keyframes H{0%{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}}.flip-in-x-nr{-webkit-animation-name:H;animation-name:H;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes I{0%{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}}@keyframes I{0%{-webkit-transform:perspective(100px) rotateX(0deg);transform:perspective(100px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateX(90deg);transform:perspective(100px) rotateX(90deg);opacity:0}}.flip-out-x-nr{-webkit-animation-name:I;animation-name:I;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes J{0%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}}@keyframes J{0%{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}}.flip-in-x-fr{-webkit-animation-name:J;animation-name:J;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes K{0%{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}}@keyframes K{0%{-webkit-transform:perspective(1000px) rotateX(0deg);transform:perspective(1000px) rotateX(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateX(90deg);transform:perspective(1000px) rotateX(90deg);opacity:0}}.flip-out-x-fr{-webkit-animation-name:K;animation-name:K;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes L{0%{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}}@keyframes L{0%{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}}.flip-in-y{-webkit-animation-name:L;animation-name:L;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes M{0%{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}}@keyframes M{0%{-webkit-transform:perspective(550px) rotateY(0deg);transform:perspective(550px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(550px) rotateY(90deg);transform:perspective(550px) rotateY(90deg);opacity:0}}.flip-out-y{-webkit-animation-name:M;animation-name:M;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes N{0%{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}}@keyframes N{0%{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}}.flip-in-y-nr{-webkit-animation-name:N;animation-name:N;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes O{0%{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}}@keyframes O{0%{-webkit-transform:perspective(100px) rotateY(0deg);transform:perspective(100px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(100px) rotateY(90deg);transform:perspective(100px) rotateY(90deg);opacity:0}}.flip-out-y-nr{-webkit-animation-name:O;animation-name:O;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes P{0%{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}}@keyframes P{0%{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}to{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}}.flip-in-y-fr{-webkit-animation-name:P;animation-name:P;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes Q{0%{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}}@keyframes Q{0%{-webkit-transform:perspective(1000px) rotateY(0deg);transform:perspective(1000px) rotateY(0deg);opacity:1}to{-webkit-transform:perspective(1000px) rotateY(90deg);transform:perspective(1000px) rotateY(90deg);opacity:0}}.flip-out-y-fr{-webkit-animation-name:Q;animation-name:Q;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes R{0%{-webkit-transform:scale(.7);transform:scale(.7);opacity:0}to{opacity:1}}@keyframes R{0%{-webkit-transform:scale(.7);transform:scale(.7);opacity:0}to{opacity:1}}.zoom-in{-webkit-animation-name:R;animation-name:R}@-webkit-keyframes S{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.7);transform:scale(.7)}50%,to{opacity:0}}@keyframes S{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.7);transform:scale(.7)}50%,to{opacity:0}}.zoom-out{-webkit-animation-name:S;animation-name:S}@-webkit-keyframes T{0%{-webkit-transform:scale(.95);transform:scale(.95);opacity:0}to{opacity:1}}@keyframes T{0%{-webkit-transform:scale(.95);transform:scale(.95);opacity:0}to{opacity:1}}.zoom-in-sm{-webkit-animation-name:T;animation-name:T}@-webkit-keyframes U{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.95);transform:scale(.95)}50%,to{opacity:0}}@keyframes U{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.95);transform:scale(.95)}50%,to{opacity:0}}.zoom-out-sm{-webkit-animation-name:U;animation-name:U}@-webkit-keyframes V{0%{-webkit-transform:scale(.4);transform:scale(.4);opacity:0}to{opacity:1}}@keyframes V{0%{-webkit-transform:scale(.4);transform:scale(.4);opacity:0}to{opacity:1}}.zoom-in-lg{-webkit-animation-name:V;animation-name:V}@-webkit-keyframes W{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.4);transform:scale(.4)}50%,to{opacity:0}}@keyframes W{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(.4);transform:scale(.4)}50%,to{opacity:0}}.zoom-out-lg{-webkit-animation-name:W;animation-name:W}.overlay-slide-in-top{top:0;height:0;-webkit-animation-name:Y;animation-name:Y}@-webkit-keyframes X{0%{height:0}to{height:100%}}@keyframes X{0%{height:0}to{height:100%}}.overlay-slide-out-top{top:0;height:100%;-webkit-animation-name:X;animation-name:X}@-webkit-keyframes Y{0%{height:100%}to{height:0}}@keyframes Y{0%{height:100%}to{height:0}}.overlay-slide-in-bottom{bottom:0;height:0;-webkit-animation-name:Y;animation-name:Y}@-webkit-keyframes Z{0%{height:0}to{height:100%}}@keyframes Z{0%{height:0}to{height:100%}}.overlay-slide-out-bottom{bottom:0;height:100%;-webkit-animation-name:Z;animation-name:Z}.overlay-slide-in-left{width:0;-webkit-animation-name:bb;animation-name:bb}@-webkit-keyframes ab{0%{width:0}to{width:100%}}@keyframes ab{0%{width:0}to{width:100%}}.overlay-slide-out-left{left:0;width:100%;-webkit-animation-name:ab;animation-name:ab}@-webkit-keyframes bb{0%{width:100%}to{width:0}}@keyframes bb{0%{width:100%}to{width:0}}.overlay-slide-in-right{right:0;width:0;-webkit-animation-name:bb;animation-name:bb}@-webkit-keyframes cb{0%{width:0}to{width:100%}}@keyframes cb{0%{width:0}to{width:100%}}.overlay-slide-out-right{right:0;width:100%;-webkit-animation-name:cb;animation-name:cb}
.animsition{
height:100%;
}
/*
* Usage:
*
*
*
*/
.sk-rotating-plane {
width: 40px;
height: 40px;
background-color: #333;
margin: 40px auto;
-webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
animation: sk-rotatePlane 1.2s infinite ease-in-out; }
@-webkit-keyframes sk-rotatePlane {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
50% {
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
100% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
@keyframes sk-rotatePlane {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
50% {
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
100% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
/*
* Usage:
*
*
*
*/
.sk-double-bounce {
width: 40px;
height: 40px;
position: relative;
margin: 40px auto; }
.sk-double-bounce .sk-child {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #333;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
animation: sk-doubleBounce 2s infinite ease-in-out; }
.sk-double-bounce .sk-double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s; }
@-webkit-keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes sk-doubleBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1);
transform: scale(1); } }
/*
* Usage:
*
*
*
*/
.sk-wave {
margin: 40px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px; }
.sk-wave .sk-rect {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
animation: sk-waveStretchDelay 1.2s infinite ease-in-out; }
.sk-wave .sk-rect1 {
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s; }
.sk-wave .sk-rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.sk-wave .sk-rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.sk-wave .sk-rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.sk-wave .sk-rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
@-webkit-keyframes sk-waveStretchDelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1); } }
@keyframes sk-waveStretchDelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4); }
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1); } }
/*
* Usage:
*
*
*
*/
.sk-wandering-cubes {
margin: 40px auto;
width: 40px;
height: 40px;
position: relative; }
.sk-wandering-cubes .sk-cube {
background-color: #333;
width: 10px;
height: 10px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both;
animation: sk-wanderingCube 1.8s ease-in-out -1.8s infinite both; }
.sk-wandering-cubes .sk-cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
@-webkit-keyframes sk-wanderingCube {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
25% {
-webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
transform: translateX(30px) rotate(-90deg) scale(0.5); }
50% {
/* Hack to make FF rotate in the right direction */
-webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
transform: translateX(30px) translateY(30px) rotate(-179deg); }
50.1% {
-webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
transform: translateX(30px) translateY(30px) rotate(-180deg); }
75% {
-webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); }
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg); } }
@keyframes sk-wanderingCube {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
25% {
-webkit-transform: translateX(30px) rotate(-90deg) scale(0.5);
transform: translateX(30px) rotate(-90deg) scale(0.5); }
50% {
/* Hack to make FF rotate in the right direction */
-webkit-transform: translateX(30px) translateY(30px) rotate(-179deg);
transform: translateX(30px) translateY(30px) rotate(-179deg); }
50.1% {
-webkit-transform: translateX(30px) translateY(30px) rotate(-180deg);
transform: translateX(30px) translateY(30px) rotate(-180deg); }
75% {
-webkit-transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5);
transform: translateX(0) translateY(30px) rotate(-270deg) scale(0.5); }
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg); } }
/*
* Usage:
*
*
*
*/
.sk-spinner-pulse {
width: 40px;
height: 40px;
margin: 40px auto;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
animation: sk-pulseScaleOut 1s infinite ease-in-out; }
@-webkit-keyframes sk-pulseScaleOut {
0% {
-webkit-transform: scale(0);
transform: scale(0); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
@keyframes sk-pulseScaleOut {
0% {
-webkit-transform: scale(0);
transform: scale(0); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
/*
* Usage:
*
*
*
*/
.sk-chasing-dots {
margin: 40px auto;
width: 40px;
height: 40px;
position: relative;
text-align: center;
-webkit-animation: sk-chasingDotsRotate 2s infinite linear;
animation: sk-chasingDotsRotate 2s infinite linear; }
.sk-chasing-dots .sk-child {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out;
animation: sk-chasingDotsBounce 2s infinite ease-in-out; }
.sk-chasing-dots .sk-dot2 {
top: auto;
bottom: 0;
-webkit-animation-delay: -1s;
animation-delay: -1s; }
@-webkit-keyframes sk-chasingDotsRotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes sk-chasingDotsRotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-webkit-keyframes sk-chasingDotsBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes sk-chasingDotsBounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
50% {
-webkit-transform: scale(1);
transform: scale(1); } }
/*
* Usage:
*
*
*
*/
.sk-three-bounce {
margin: 40px auto;
width: 70px;
text-align: center; }
.sk-three-bounce .sk-child {
width: 18px;
height: 18px;
background-color: #333;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
.sk-three-bounce .sk-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s; }
.sk-three-bounce .sk-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s; }
@-webkit-keyframes sk-three-bounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
40% {
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes sk-three-bounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
40% {
-webkit-transform: scale(1);
transform: scale(1); } }
/*
* Usage:
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*