/*
* Safelayout Cute Preloader Admin Stylesheet
*
* Version: 2.1.2
*
* Table of Contents:
*
* 1.0 - jQuery tab styles
* 2.0 - Icon tab styles
* 3.0 - Background tab styles
* 4.0 - Other tabs styles
* 5.0 - Styles and animations of icons
* 5.1 - window
* 5.2 - infinite
* 5.3 - crawl
* 5.4 - moons
* 5.5 - spinner
* 5.6 - turn
* 5.7 - turn1
* 5.9 - 3d-bar
* 5.10 - wheel
* 5.11 - 3d-plate
* 5.12 - blade-horizontal
* 5.13 - blade-horizontal1
* 5.14 - blade-vertical
* 5.15 - blade-vertical1
* 5.16 - balloons
* 5.17 - jump
* 5.18 - queue
* 5.19 - gear
* 5.21 - trail
* 5.22 - planet
* 5.23 - cube
* 5.25 - cube1
* 5.26 - cycle
* 5.27 - stream
* 5.28 - tube
* 5.29 - leap
* 5.34 - grid
* 5.36 - fold
* 5.38 - bubble
* 5.39 - bubble1
* 5.41 - dive
* 5.43 - 3d-square
* 5.44 - circle
* 5.45 - flight
* 5.46 - triple-spinner
* 6.0 - General styles and background transitions
* 7.0 - Styles and animations of text
* 7.1 - shadow
* 7.2 - glow
* 7.3 - yoyo
* 7.4 - spring
* 7.5 - bounce
* 7.6 - zoom
* 7.7 - wave
* 7.8 - swing
* 7.9 - flight01
* 7.10 - flight02
* 7.11 - flight03
* 8.0 - Styles and animations of Brand Image
* 8.1 - rotate-2D
* 8.2 - rotate-3D-X
* 8.3 - rotate-3D-Y
* 8.4 - wrest-X
* 8.5 - wrest-Y
* 8.6 - roll
* 8.7 - pipe
* 8.8 - swirl
* 8.9 - sheet
* 8.10 - light-move
* 8.11 - flash
* 9.0 - Styles and animations of progress bar and counter
* 9.1 - border
* 9.2 - stripe
* 9.3 - stripe animation
* 9.4 - cell
* 9.5 - glassy
* 9.6 - bulgy
* 9.7 - light move
*/
/* * * * * * * * * *
1.0 - jQuery tab styles
* * * * * * * * * */
.form-table th {
width: 160px !important;
}
.ui-tabs {
margin-top: 30px;
}
.ui-tabs ul.ui-tabs-nav {
background-color: #f0f0f0;
border: 1px solid #007fff;
border-radius: 5px;
line-height: 2.2;
padding-left: 10px;
padding-right: 10px;
text-align: center;
width: 160px;
}
.ui-tabs ul.ui-tabs-nav li {
background-color: #e6e6e6;
border: 1px solid #c5c5c5;
border-radius: inherit;
margin-bottom: 20px;
margin-top: 20px;
text-align: initial;
}
.ui-tabs ul.ui-tabs-nav li.ui-state-active {
background-color: #007fff;
border: 1px solid #003eff;
}
.ui-tabs ul.ui-tabs-nav li a {
color: #454545;
display: block;
font-size: 16px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
}
.ui-tabs ul.ui-tabs-nav li a:hover {
background-color: #f6f6f6;
color: #4A89BF;
}
.ui-tabs ul.ui-tabs-nav li.ui-state-active a {
background-color: #007fff;
color: #fff;
cursor: default;
}
.ui-tabs ul.ui-tabs-nav li a span {
vertical-align: sub;
}
.ui-tabs-side {
display: inline-block;
margin-top: 20px;
vertical-align: top;
}
.ui-tabs-content {
background-color: #f0f0f0;
border: 1px solid #007fff;
border-radius: 5px;
display: inline-block;
margin-left: -5px;
margin-right: -5px;
max-width: 683px;
padding-left: 10px;
padding-right: 10px;
}
#sl-pl-options-button-container {
height: 50px;
margin-top: 50px;
}
.sl-pl-other-plugins {
display: inline-block;
float: right;
text-align: center;
vertical-align: top;
}
html[dir*="rtl"] .sl-pl-other-plugins {
float: left;
}
#sl-pl-side-button-rate,
#sl-pl-side-button-upgrade {
background: #fcb92c !important;
width: 160px;
height: 35px;
padding-top: 4px !important;
margin-bottom: 20px !important;
color: #00f !important;
}
#sl-pl-side-button-rate {
background: #a2ff6f !important;
}
#sl-pl-side-button-rate:hover,
#sl-pl-side-button-upgrade:hover {
background: #e6fc2c !important;
}
.sl-pl-side-button-icon {
color: #3737ff;
width: 25px;
height: 25px;
font-size: 25px;
}
#sl-pl-progress-bar-icon {
height: 10px;
margin-bottom: 5px;
overflow: hidden;
}
#sl-pl-counter-icon {
font-size: 30px;
height: 26px;
margin: 0 4px 0 4px;
overflow: hidden;
width: 12px;
}
#sl-pl-counter-icon::before {
float: left;
}
/* * * * * * * * * *
2.0 - Icon tab styles
* * * * * * * * * */
.sl-pl-text-container,
.sl-pl-icon-container,
.sl-pl-progress-container,
.sl-pl-background-container {
max-width: 500px;
}
.sl-pl-text-container {
font-size: 16px;
}
.sl-pl-text-radio,
.sl-pl-icon-radio,
.sl-pl-effect-radio,
.sl-pl-progress-radio,
.sl-pl-free-color-radio,
.sl-pl-background-radio {
display: none !important;
position: absolute;
}
.sl-pl-text-radio:checked + label,
.sl-pl-icon-radio:checked + label,
.sl-pl-progress-radio:checked + label,
.sl-pl-background-radio:checked + label {
border: 3px solid #ffba00;
}
.sl-pl-free-color-radio:checked + label {
border: 2px solid #00f;
box-shadow: 2px 2px 3px #aa0000;
}
.sl-pl-effect-radio:checked + label {
box-shadow: 0px 0px 0px 2px #00f;
}
.sl-pl-text-label,
.sl-pl-icon-label,
.sl-pl-progress-label,
.sl-pl-background-label {
border: 1px solid #b6c1b4;
box-sizing: border-box;
display: inline-block;
height: 90px;
margin: 2px;
position: relative;
text-align: center;
width: 90px;
}
.sl-pl-text-label {
background: #484848;
color: #fff;
width: 115px;
}
#sl-pl-icon-label-queue {
width: 184px;
}
.sl-pl-text-label:hover,
.sl-pl-icon-label:hover,
.sl-pl-progress-label:hover,
.sl-pl-free-color-label:hover,
.sl-pl-background-label:hover {
border: 2px solid #007fff;
}
.sl-pl-text-div,
.sl-pl-icon-div,
.sl-pl-progress-div {
display: inline-block;
height: 50px;
position: relative;
top: 22%;
width: 50px;
}
.sl-pl-text-div {
align-content: center;
width: 100px;
}
.sl-pl-text-div-text,
.sl-pl-icon-div-text,
.sl-pl-effect-div-text,
.sl-pl-progress-div-text,
.sl-pl-background-div-text {
display: inline-block;
font-size: 13px;
font-weight: 500;
position: relative;
text-align: center;
top: 27px;
width: 40px;
}
.sl-pl-effect-div-text {
top: 7px;
width: 48px;
}
.sl-pl-effect-div {
background-image: url('data:image/svg+xml;utf8,');
height: 45px;
margin: 2px;
width: 45px;
}
#sl-pl-bar-gradients-container,
#sl-pl-icon-gradients-container,
#sl-pl-background-gradients-container {
margin-left: 30px;
margin-right: 30px;
position: relative;
vertical-align: top;
width: 459px;
}
#sl-pl-bar-angle-div,
#sl-pl-icon-angle-div,
#sl-pl-background-angle-div {
display: inline-block;
margin: 0 55px 3px 55px;
width: 310px;
}
#sl-pl-bar-angle,
#sl-pl-icon-angle,
#sl-pl-background-angle {
margin: 0 5px 0 5px;
vertical-align: text-bottom;
width: 180px;
}
.sl-pl-free-color-container {
padding: 0 2px;
}
.sl-pl-free-color-label {
border: 1px solid #b55858;
box-sizing: border-box;
display: inline-block;
height: 36px;
margin: 0 16px 16px 16px;
width: 36px;
}
.sl-pl-effect-label {
border: 1px solid #77a464;
box-sizing: border-box;
display: inline-block;
height: 50px;
margin: 0 12px;
width: 50px;
}
.sl-pl-effect-label:hover {
border: 1px solid #00f;
}
.sl-pl-custom-icon-div {
display: inline-block;
padding-left: 5px;
vertical-align: bottom;
width: 392px;
}
.sl-pl-effects-container {
border: 1px solid #8c8f94;
height: 162px;
margin-left: 30px;
margin-right: 30px;
overflow-y: scroll;
padding: 2px;
vertical-align: top;
width: 459px;
}
#sl-pl-bar-preview,
#sl-pl-counter-preview,
#sl-pl-brand-preview,
#sl-pl-text-preview,
#sl-pl-icon-preview {
border: 1px solid #77a464;
display: inline-block;
height: 200px;
margin: 2px;
position: relative;
width: 200px;
}
#sl-pl-bar-preview,
#sl-pl-counter-preview,
#sl-pl-brand-preview,
#sl-pl-brand-box,
#sl-pl-text-box,
#sl-pl-text-preview {
width: 100% !important;
}
#sl-pl-bar-preview {
height: 150px;
}
#sl-pl-icon-preview-container {
text-align: center;
}
.sl-pl-icon-preview-background {
display: inline-block;
height: 100%;
left: 0;
position: absolute;
right: 0;
width: 100%;
}
#sl-pl-bar-preview-title,
#sl-pl-brand-preview-title,
#sl-pl-text-preview-title,
#sl-pl-icon-preview-title {
font-size: 13px;
font-weight: 500;
}
.disabled {
opacity: 0.8;
}
#sl-pl-bar-color-selector,
#sl-pl-icon-color-selector,
#sl-pl-background-color-selector {
margin-left: 30px;
}
.sl-pl-lock-icon {
color: #3737ff;
font-size: 30px;
height: 25px;
left: -22px;
position: absolute;
right: -22px;
width: 25px;
z-index: 1;
}
.sl-pl-lock-icon-small {
color: #3737ff;
font-size: 20px;
height: 20px;
left: -15px;
position: absolute;
width: 20px;
z-index: 1;
}
.sl-pl-color-type-container {
position: relative;
}
.sl-pl-pro-version-message {
display: inline-block;
font-size: 11px;
margin: 15px 0px;
text-decoration: auto;
}
/* * * * * * * * * *
3.0 - Background tab styles
* * * * * * * * * */
#sl-pl-background-alpha {
margin-left: 5px;
margin-right: 5px;
vertical-align: middle;
width: 200px;
}
.sl-pl-back-admin,
.sl-pl-back-admin-linear {
height: 100%;
position: absolute;
transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), background 0s;
width: 50%;
}
.sl-pl-back-admin-linear {
background: rgba( 0, 0, 0, 0 );
}
.sl-pl-text-div-text,
.sl-pl-background-div-text {
width: 72px;
}
.sl-pl-background-div {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: repeat;
display: inline-block;
height: 100%;
left: 0;
overflow: hidden;
position: relative;
top: 0;
width: 100%;
}
.sl-pl-background-div.sl-pl-loaded .sl-pl-back-split-vertical-top {
transform: translateY(-101%);
-webkit-transform: translateY(-101%);
}
.sl-pl-background-div.sl-pl-loaded .sl-pl-back-split-vertical-bottom {
transform: translateY(101%);
-webkit-transform: translateY(101%);
}
.sl-pl-background-div.sl-pl-loaded .sl-pl-back-split-horizontal-left {
transform: translateX(-101%);
-webkit-transform: translateX(-101%);
}
.sl-pl-background-div.sl-pl-loaded .sl-pl-back-split-horizontal-right {
transform: translateX(101%);
-webkit-transform: translateX(101%);
}
.sl-pl-background-div.sl-pl-loaded .sl-pl-back-to-left,
.sl-pl-background-div.sl-pl-loaded .sl-pl-back-tear-horizontal-top {
transform: translateX(-101%);
-webkit-transform: translateX(-101%);
}
.sl-pl-background-div.sl-pl-loaded .sl-pl-back-to-right,
.sl-pl-background-div.sl-pl-loaded .sl-pl-back-tear-horizontal-bottom {
transform: translateX(101%);
-webkit-transform: translateX(101%);
}
.sl-pl-background-div.sl-pl-loaded .sl-pl-back-to-top,
.sl-pl-background-div.sl-pl-loaded .sl-pl-back-tear-vertical-left {
transform: translateY(-101%);
-webkit-transform: translateY(-101%);
}
.sl-pl-background-div.sl-pl-loaded .sl-pl-back-to-bottom,
.sl-pl-background-div.sl-pl-loaded .sl-pl-back-tear-vertical-right {
transform: translateY(101%);
-webkit-transform: translateY(101%);
}
.sl-pl-new-msg {
background: red;
color: white;
margin: 0 10px;
padding: 0 3px;
}
/* * * * * * * * * *
4.0 - Other tabs styles
* * * * * * * * * */
.sl-pl-text-preview-container {
text-align: center;
width: 530px;
}
.sl-pl-display-on-select {
display: block;
margin: 4px 30px 4px 30px;
resize: auto;
width: 346px;
}
.sl-pl-advanced {
width: 500px;
}
.sl-pl-description {
font-size: 16px;
text-align: center;
}
.sl-pl-hidden {
display: none;
}
#sl-pl-play-bar,
.sl-pl-special-button,
.sl-pl-special-meta-button {
background: #4aff3f !important;
border-radius: 5px;
color: #00f !important;
font-size: 14px !important;
height: 33px;
text-align: center;
width: 210px;
}
.sl-pl-special-button {
margin: 0 16px 20px 16px !important;
}
#sl-pl-play-bar {
margin-top: 30px;
position: relative;
}
#sl-pl-play-bar:hover,
.sl-pl-special-button:hover,
.sl-pl-special-meta-button:hover {
background: #e6fc2c !important;
}
.sl-pl-special-types-list {
border: 1px solid #f00;
border-radius: 3px;
margin-bottom: 20px;
padding: 3px;
}
.sl-pl-special-types-list span {
color: #00f;
display: inline-block;
text-align: center;
vertical-align: middle;
width: 30%;
}
#sl-pl-special-types-set a,
.sl-pl-special-types-list span a {
height: auto !important;
line-height: initial !important;
margin: 10px 0 !important;
white-space: initial !important;
width: 140px;
}
#sl-pl-special-types-set a:hover,
.sl-pl-special-types-list span a:hover {
background: #e6fc2c;
}
.sl-pl-special-types-list textarea {
background: #8be3ff;
margin: 2px;
vertical-align: middle;
width: calc(70% - 4px);
}
#sl-pl-special-types-set {
border: 1px solid #8c8f94;
border-radius: 5px;
padding: 5px;
position: relative;
}
#sl-pl-special-types-set a {
margin: 30px 50px 30px 50px!important;
vertical-align: middle;
width: 230px;
}
#sl-pl-special-types-set select {
width: 160px;
}
#special_types_message {
display: none;
}
#sl-pl-special-meta{
position: relative;
}
#sl-pl-special-meta-loader {
background: rgba(0, 0, 0, 0.85);
border-radius : inherit;
display : none;
height: 100%;
}
#sl-pl-special-types-container {
position: relative;
}
.sl-pl-image-url {
width: calc(100% - 135px);
}
#sl-pl-brand-media,
#sl-pl-custom-media {
margin: 0 5px;
white-space: normal !important;
width: 120px;
}
/* * * * * * * * * *
5.0 Styles and animation of icons
* * * * * * * * * */
#sl-pl-special-meta-loader,
.sl-pl-spin-container {
left: 50%;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 100%;
}
.sl-pl-spin,
.sl-pl-spin-admin {
display: inline-block;
height: 50px;
position: relative;
width: 50px;
}
.sl-pl-icon-effect {
display: inline-block;
height: 0;
position: absolute;
visibility: hidden;
width: 0;
}
/* * * * * * * * * *
5.1 - window
* * * * * * * * * */
#sl-pl-window div {
animation: sl-pl-window-anim 2.5s ease infinite;
-webkit-animation: sl-pl-window-anim 2.5s ease infinite;
height: 48%;
left: 0;
position: absolute;
transform-origin: 102% 102%;
-webkit-transform-origin: 102% 102%;
width: 48%;
}
#sl-pl-window span {
background: linear-gradient(45deg, #8abcfd, #67a5f5 44%, #5197ec 54%, #4087dc);
border-radius: 20%;
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
#sl-pl-window span:after {
animation: sl-pl-window-anim-visible 5s steps(1, end) -2.5s infinite;
-webkit-animation: sl-pl-window-anim-visible 5s steps(1, end) -2.5s infinite;
background: #0f0;
border: 1px solid #00b300;
box-sizing: border-box;
border-radius: 20%;
content: "";
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
#sl-pl-window div:nth-child(2) {
animation-delay: -0.1s;
-webkit-animation-delay: -0.1s;
left: 0;
top: 52%;
transform-origin: 102% -2%;
-webkit-transform-origin: 102% -2%;
}
#sl-pl-window div:nth-child(3) {
animation-delay: -0.2s;
-webkit-animation-delay: -0.2s;
left: 52%;
top: 52%;
transform-origin: -2% -2%;
-webkit-transform-origin: -2% -2%;
}
#sl-pl-window div:nth-child(4) {
animation-delay: -0.3s;
-webkit-animation-delay: -0.3s;
left: 52%;
transform-origin: -2% 102%;
-webkit-transform-origin: -2% 102%;
}
#sl-pl-window div:nth-child(2) span {
transform: scale(1, -1);
-webkit-transform: scale(1, -1);
}
#sl-pl-window div:nth-child(2) span:after {
background: #ff9800;
border-color: #b36b00;
}
#sl-pl-window div:nth-child(3) span {
transform: scale(-1, -1);
-webkit-transform: scale(-1, -1);
}
#sl-pl-window div:nth-child(3) span:after {
background: #e7519f;
border-color: #772751;
}
#sl-pl-window div:nth-child(4) span {
transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
}
#sl-pl-window div:nth-child(4) span:after {
background: #4e59ff;
border-color: #232877;
}
@-webkit-keyframes sl-pl-window-anim {
0% {
opacity: 0;
-webkit-transform: rotate(0);
}
50% {
-webkit-transform: rotate(360deg);
}
100% {
opacity: 1;
-webkit-transform:rotate(360deg);
}
}
@keyframes sl-pl-window-anim {
0% {
opacity: 0;
transform: rotate(0);
}
50% {
transform: rotate(360deg);
}
100% {
opacity: 1;
transform: rotate(360deg);
}
}
@-webkit-keyframes sl-pl-window-anim-visible {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes sl-pl-window-anim-visible {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
/* * * * * * * * * *
5.2 - infinite
* * * * * * * * * */
#sl-pl-infinite span {
animation: sl-pl-infinite-anim 1.2s linear infinite;
-webkit-animation: sl-pl-infinite-anim 1.2s linear infinite;
background: linear-gradient(#510700, #fd6f53 10%, #fd714c 33%, #ab2000 67%, #7a1400);
border-radius: 50%;
height: 16%;
left: 50%;
position: absolute;
top: 50%;
width: 16%;
}
#sl-pl-infinite span:nth-child(2) {
animation-delay: -0 15s;
-webkit-animation-delay: -0.15s;
}
#sl-pl-infinite span:nth-child(3) {
animation-delay: -0.3s;
-webkit-animation-delay: -0.3s;
}
@-webkit-keyframes sl-pl-infinite-anim {
0% {
-webkit-transform-origin: -180% 50%;
-webkit-transform: translate(-75%, -50%) rotate(10deg);
}
7% {
-webkit-transform-origin: -180% 50%;
-webkit-transform: translate(-75%, -50%) rotate(105deg);
}
20% {
-webkit-transform-origin: -180% 50%;
-webkit-transform: translate(-75%, -50%) rotate(165deg);
}
40% {
-webkit-transform-origin: -180% 50%;
-webkit-transform: translate(-75%, -50%) rotate(245deg);
}
45% {
-webkit-transform-origin: -180% 50%;
-webkit-transform: translate(-75%, -50%) rotate(305deg);
}
50% {
-webkit-transform-origin: -180% 50%;
-webkit-transform: translate(-75%, -50%) rotate(360deg);
}
50.1% {
-webkit-transform-origin: 280% 50%;
-webkit-transform: translate(-25%, -50%) rotate(360deg);
}
57% {
-webkit-transform-origin: 280% 50%;
-webkit-transform: translate(-25%, -50%) rotate(245deg);
}
70% {
-webkit-transform-origin: 280% 50%;
-webkit-transform: translate(-25%, -50%) rotate(165deg);
}
80% {
-webkit-transform-origin: 280% 50%;
-webkit-transform: translate(-25%, -50%) rotate(105deg);
}
90% {
-webkit-transform-origin: 280% 50%;
-webkit-transform: translate(-25%, -50%) rotate(65deg);
}
100% {
-webkit-transform-origin: 280% 50%;
-webkit-transform: translate(-25%, -50%) rotate(10deg);
}
}
@keyframes sl-pl-infinite-anim {
0% {
transform-origin: -180% 50%;
transform: translate(-75%, -50%) rotate(10deg);
}
7% {
transform-origin: -180% 50%;
transform: translate(-75%, -50%) rotate(105deg);
}
20% {
transform-origin: -180% 50%;
transform: translate(-75%, -50%) rotate(165deg);
}
40% {
transform-origin: -180% 50%;
transform: translate(-75%, -50%) rotate(245deg);
}
45% {
transform-origin: -180% 50%;
transform: translate(-75%, -50%) rotate(305deg);
}
50% {
transform-origin: -180% 50%;
transform: translate(-75%, -50%) rotate(360deg);
}
50.1% {
transform-origin: 280% 50%;
transform: translate(-25%, -50%) rotate(360deg);
}
57% {
transform-origin: 280% 50%;
transform: translate(-25%, -50%) rotate(245deg);
}
70% {
transform-origin: 280% 50%;
transform: translate(-25%, -50%) rotate(165deg);
}
80% {
transform-origin: 280% 50%;
transform: translate(-25%, -50%) rotate(105deg);
}
90% {
transform-origin: 280% 50%;
transform: translate(-25%, -50%) rotate(65deg);
}
100% {
transform-origin: 280% 50%;
transform: translate(-25%, -50%) rotate(10deg);
}
}
/* * * * * * * * * *
5.3 - crawl
* * * * * * * * * */
#sl-pl-crawl span {
animation: sl-pl-crawl-anim 1.3s ease-in-out infinite;
-webkit-animation: sl-pl-crawl-anim 1.3s ease-in-out infinite;
background: linear-gradient(#cead8d, #7c4f23);
border-radius: 50%;
height: 20%;
left: 50%;
position: absolute;
top: 50%;
transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
width: 20%;
}
@-webkit-keyframes sl-pl-crawl-anim {
0% {
-webkit-transform: translate(-375%, -50%) scale(0.9, 1.2);
}
15% {
-webkit-transform: translate(-375%, -50%) scale(2.5, 0.7);
}
30% {
-webkit-transform: translate(125%, -50%) scale(2.5, 0.7);
}
50% {
-webkit-transform: translate(275%, -50%) scale(0.9, 1.2);
}
65% {
-webkit-transform: translate(125%, -50%) scale(2.5, 0.7);
}
80% {
-webkit-transform: translate(-375%, -50%) scale(2.5, 0.7);
}
100% {
-webkit-transform: translate(-375%, -50%) scale(0.9, 1.2);
}
}
@keyframes sl-pl-crawl-anim {
0% {
transform: translate(-375%, -50%) scale(0.9, 1.2);
}
15% {
transform: translate(-375%, -50%) scale(2.5, 0.7);
}
30% {
transform: translate(125%, -50%) scale(2.5, 0.7);
}
50% {
transform: translate(275%, -50%) scale(0.9, 1.2);
}
65% {
transform: translate(125%, -50%) scale(2.5, 0.7);
}
80% {
transform: translate(-375%, -50%) scale(2.5, 0.7);
}
100% {
transform: translate(-375%, -50%) scale(0.9, 1.2);
}
}
/* * * * * * * * * *
5.4 - moons
* * * * * * * * * */
#sl-pl-moons span {
animation: sl-pl-moons-anim 2.6s infinite;
-webkit-animation: sl-pl-moons-anim 2.6s infinite;
background: linear-gradient(90deg, #f85032, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827);
border-radius: 50%;
height: 14%;
left: 50%;
position: absolute;
top: 100%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform-origin: 50% -300%;
-webkit-transform-origin: 50% -300%;
width: 14%;
}
#sl-pl-moons span:after {
animation: sl-pl-window-anim-visible 5.2s steps(1, end) -2.6s infinite;
-webkit-animation: sl-pl-window-anim-visible 5.2s steps(1, end) -2.6s infinite;
background: #2196f3;
border-radius: 50%;
content: "";
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
#sl-pl-moons span:nth-child(2) {
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
#sl-pl-moons span:nth-child(2):after {
background: #ff5722;
}
#sl-pl-moons span:nth-child(3) {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
#sl-pl-moons span:nth-child(3):after {
background: #8bc34a;
}
#sl-pl-moons span:nth-child(4) {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
#sl-pl-moons span:nth-child(4):after {
background: #ffc107;
}
#sl-pl-moons span:nth-child(5) {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
#sl-pl-moons span:nth-child(5):after {
background: #e7de9d;
}
@-webkit-keyframes sl-pl-moons-anim {
0% {
-webkit-animation-timing-function: cubic-bezier(0.19, 0.68, 0.75, 0.33);
-webkit-transform: translate(-50%, -50%) rotate(0);
}
40% {
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.45, 1);
-webkit-transform: translate(-50%, -50%) rotate(360deg);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(720deg);
}
}
@keyframes sl-pl-moons-anim {
0% {
animation-timing-function: cubic-bezier(0.19, 0.68, 0.75, 0.33);
transform: translate(-50%, -50%) rotate(0);
}
40% {
animation-timing-function: cubic-bezier(0, 0, 0.45, 1);
transform: translate(-50%, -50%) rotate(360deg);
}
100% {
transform: translate(-50%, -50%) rotate(720deg);
}
}
/* * * * * * * * * *
5.5 - spinner
* * * * * * * * * */
#sl-pl-spinner span {
animation: sl-pl-spinner-anim 2.8s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
-webkit-animation: sl-pl-spinner-anim 2.8s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;
background-color: #ff0000;
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
#sl-pl-spinner span:nth-child(2) {
animation-delay: -0.07s;
-webkit-animation-delay: -0.07s;
border: 1px solid yellow;
opacity: 0.6;
}
@-webkit-keyframes sl-pl-spinner-anim {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(720deg);
}
}
@keyframes sl-pl-spinner-anim {
0% {
transform: rotate(0);
}
100% {
transform: rotate(720deg);
}
}
/* * * * * * * * * *
5.6 - turn
* * * * * * * * * */
#sl-pl-turn svg,
#sl-pl-turn1 svg {
height: 150%;
left: -26%;
position: absolute;
top: -26%;
width: 150%;
}
#sl-pl-turn circle,
#sl-pl-turn1 circle {
fill: none;
stroke: #3a3aff;
stroke-width: 4px;
}
#sl-pl-turn path,
#sl-pl-turn1 path {
animation: sl-pl-turn-anim 1.5s cubic-bezier(0, 0.7, 1, 0.3) infinite;
-webkit-animation: sl-pl-turn-anim 1.5s cubic-bezier(0, 0.7, 1, 0.3) infinite;
fill: none;
stroke-width: 4px;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
}
#sl-pl-turn #sl-pl-turn-path01 {
animation: sl-pl-turn-anim 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
-webkit-animation: sl-pl-turn-anim 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}
@-webkit-keyframes sl-pl-turn-anim {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
30%,
60% {
opacity: 0.8;
}
}
@keyframes sl-pl-turn-anim {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
30%,
60% {
opacity: 0.8;
}
}
/* * * * * * * * * *
5.7 - turn1
* * * * * * * * * */
#sl-pl-turn1 path {
animation: sl-pl-turn-anim 1s cubic-bezier(0.58, 0.35, 0.35, 0.58) infinite;
-webkit-animation: sl-pl-turn-anim 1s cubic-bezier(0.58, 0.35, 0.35, 0.58) infinite;
}
#sl-pl-turn1 #sl-pl-turn1-path01 {
display: none;
}
/* * * * * * * * * *
5.9 - 3d-bar
* * * * * * * * * */
#sl-pl-3d-bar div {
height: 44%;
left: 44%;
perspective: 85px;
-webkit-perspective: 85px;
position: absolute;
top: 50%;
width: 12%;
}
#sl-pl-3d-bar span {
animation: sl-pl-3d-bar-anim 1.5s linear infinite;
-webkit-animation: sl-pl-3d-bar-anim 1.5s linear infinite;
background: linear-gradient(#9cce92, #4f6e4d 49%, #0e450e 50%, #41b03c 91%, #aeee5a);
height: 100%;
left: 0;
position: absolute;
transform-origin: 50% 50% 25px;
-webkit-transform-origin: 50% 50% 25px;
width: 100%;
}
#sl-pl-3d-bar span:after {
animation: sl-pl-window-anim-visible 1.5s steps(1, end) -0.375s infinite;
-webkit-animation: sl-pl-window-anim-visible 1.5s steps(1, end) -0.375s infinite;
background: #8ee4ff;
content: '';
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
#sl-pl-3d-bar div:nth-child(2) span {
animation-delay: -0.12s;
-webkit-animation-delay: -0.12s;
}
#sl-pl-3d-bar div:nth-child(2) span:after {
animation-delay: -0.495s;
-webkit-animation-delay: -0.495s;
background: #ffc107;
}
#sl-pl-3d-bar div:nth-child(3) span {
animation-delay: -0.24s;
-webkit-animation-delay: -0.24s;
}
#sl-pl-3d-bar div:nth-child(3) span:after {
animation-delay: -0.615s;
-webkit-animation-delay: -0.615s;
background: #8bc34a;
}
#sl-pl-3d-bar div:nth-child(4) span {
animation-delay: -0.36s;
-webkit-animation-delay: -0.36s;
}
#sl-pl-3d-bar div:nth-child(4) span:after {
animation-delay: -0.735s;
-webkit-animation-delay: -0.735s;
background: #ff5722;
}
#sl-pl-3d-bar div:nth-child(5) span {
animation-delay: -0.48s;
-webkit-animation-delay: -0.48s;
}
#sl-pl-3d-bar div:nth-child(5) span:after {
animation-delay: -0.855s;
-webkit-animation-delay: -0.855s;
background: #0d8bf2;
}
@-webkit-keyframes sl-pl-3d-bar-anim {
0% {
-webkit-transform: rotateX(15deg) rotateY(0);
}
100% {
-webkit-transform: rotateX(15deg) rotateY(360deg);
}
}
@keyframes sl-pl-3d-bar-anim {
0% {
transform: rotateX(15deg) rotateY(0);
}
100% {
transform: rotateX(15deg) rotateY(360deg);
}
}
/* * * * * * * * * *
5.10 - wheel
* * * * * * * * * */
#sl-pl-wheel div {
animation: sl-pl-3d-bar-anim 1.5s linear infinite;
-webkit-animation: sl-pl-3d-bar-anim 1.5s linear infinite;
height: 100%;
position: absolute;
transform-origin: 50% 50% 25px;
-webkit-transform-origin: 50% 50% 25px;
width: 100%;
}
#sl-pl-wheel svg {
animation: sl-pl-wheel-anim 1.5s linear infinite;
-webkit-animation: sl-pl-wheel-anim 1.5s linear infinite;
height: 160%;
left: -30%;
position: absolute;
top: -30%;
transform-origin: 50% 50% 25px;
-webkit-transform-origin: 50% 50% 25px;
width: 160%;
}
#sl-pl-wheel path{
fill: none;
stroke-width: 2px;
}
@-webkit-keyframes sl-pl-wheel-anim {
0% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(0);
}
}
@keyframes sl-pl-wheel-anim {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0);
}
}
/* * * * * * * * * *
5.11 - 3d-plate
* * * * * * * * * */
#sl-pl-3d-plate {
perspective: 150px;
-webkit-perspective: 150px;
}
#sl-pl-3d-plate span {
animation: sl-pl-3d-plate-anim 3s ease-in-out infinite;
-webkit-animation: sl-pl-3d-plate-anim 3s ease-in-out infinite;
background: linear-gradient(45deg, #27aa1e, #21a11a 48%, #40b23b 50%, #9ace96);
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
@-webkit-keyframes sl-pl-3d-plate-anim {
0% {
-webkit-transform: rotateX(0) rotateY(0);
}
25% {
-webkit-transform: rotateX(-180deg) rotateY(0);
}
50% {
-webkit-transform: rotateX(-180deg) rotateY(-180deg);
}
75% {
-webkit-transform: rotateX(-360deg) rotateY(-180deg);
}
100% {
-webkit-transform: rotateX(-360deg) rotateY(0);
}
}
@keyframes sl-pl-3d-plate-anim {
0% {
transform: rotateX(0) rotateY(0);
}
25% {
transform: rotateX(-180deg) rotateY(0);
}
50% {
transform: rotateX(-180deg) rotateY(-180deg);
}
75% {
transform: rotateX(-360deg) rotateY(-180deg);
}
100% {
transform: rotateX(-360deg) rotateY(0);
}
}
/* * * * * * * * * *
5.12 - blade-horizontal
* * * * * * * * * */
#sl-pl-blade-horizontal div,
#sl-pl-blade-horizontal1 div {
height: 12%;
perspective: 40px;
-webkit-perspective: 40px;
position: absolute;
width: 100%;
}
#sl-pl-blade-horizontal span,
#sl-pl-blade-horizontal1 span {
animation: sl-pl-blade-horizontal-anim 1.8s linear infinite;
-webkit-animation: sl-pl-blade-horizontal-anim 1.8s linear infinite;
background: linear-gradient(90deg, #f85032, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827);
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
#sl-pl-blade-horizontal span:before,
#sl-pl-blade-horizontal1 span:before {
animation: sl-pl-window-anim-visible 1.8s steps(1, end) -0.45s infinite;
-webkit-animation: sl-pl-window-anim-visible 1.8s steps(1, end) -0.45s infinite;
background: #34a744;
content: '';
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 1;
}
#sl-pl-blade-horizontal div:nth-child(1),
#sl-pl-blade-horizontal1 div:nth-child(1) {
top: 6%;
}
#sl-pl-blade-horizontal div:nth-child(2),
#sl-pl-blade-horizontal1 div:nth-child(2) {
top: 25%;
}
#sl-pl-blade-horizontal div:nth-child(3),
#sl-pl-blade-horizontal1 div:nth-child(3) {
top: 44%;
}
#sl-pl-blade-horizontal div:nth-child(4),
#sl-pl-blade-horizontal1 div:nth-child(4) {
top: 63%;
}
#sl-pl-blade-horizontal div:nth-child(5),
#sl-pl-blade-horizontal1 div:nth-child(5) {
top: 82%;
}
#sl-pl-blade-horizontal div:nth-child(2) span,
#sl-pl-blade-horizontal1 div:nth-child(2) span {
animation-delay: -0.15s;
-webkit-animation-delay: -0.15s;
}
#sl-pl-blade-horizontal div:nth-child(2) span:before,
#sl-pl-blade-horizontal1 div:nth-child(2) span:before {
animation-delay: -0.6s;
-webkit-animation-delay: -0.6s;
background: #f27373;
}
#sl-pl-blade-horizontal div:nth-child(3) span,
#sl-pl-blade-horizontal1 div:nth-child(3) span {
animation-delay: -0.3s;
-webkit-animation-delay: -0.3s;
}
#sl-pl-blade-horizontal div:nth-child(3) span:before,
#sl-pl-blade-horizontal1 div:nth-child(3) span:before {
animation-delay: -0.75s;
-webkit-animation-delay: -0.75s;
background: #93cb52;
}
#sl-pl-blade-horizontal div:nth-child(4) span,
#sl-pl-blade-horizontal1 div:nth-child(4) span {
animation-delay: -0.45s;
-webkit-animation-delay: -0.45s;
}
#sl-pl-blade-horizontal div:nth-child(4) span:before,
#sl-pl-blade-horizontal1 div:nth-child(4) span:before {
animation-delay: -0.9s;
-webkit-animation-delay: -0.9s;
background: #ffce14;
}
#sl-pl-blade-horizontal div:nth-child(5) span,
#sl-pl-blade-horizontal1 div:nth-child(5) span {
animation-delay: -0.6s;
-webkit-animation-delay: -0.6s;
}
#sl-pl-blade-horizontal div:nth-child(5) span:before,
#sl-pl-blade-horizontal1 div:nth-child(5) span:before {
animation-delay: -1.05s;
-webkit-animation-delay: -1.05s;
background: #ffff70;
}
@-webkit-keyframes sl-pl-blade-horizontal-anim {
0% {
-webkit-transform: rotateY(0);
}
100% {
-webkit-transform: rotateY(360deg);
}
}
@keyframes sl-pl-blade-horizontal-anim {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
/* * * * * * * * * *
5.13 - blade-horizontal1
* * * * * * * * * */
#sl-pl-blade-horizontal1 span {
animation: sl-pl-blade-horizontal-anim 2.4s linear infinite;
-webkit-animation: sl-pl-blade-horizontal-anim 2.4s linear infinite;
background: linear-gradient(90deg, #fc07ff, #fe95ff 55%, #fea8ff 55%, #fea8ff);
overflow: hidden;
}
#sl-pl-blade-horizontal1 span:before {
animation: sl-pl-window-anim-visible 2.4s steps(1, end) -0.6s infinite;
-webkit-animation: sl-pl-window-anim-visible 2.4s steps(1, end) -0.6s infinite;
}
#sl-pl-blade-horizontal1 span::after {
animation: sl-pl-blade-horizontal1-anim-shadow 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
-webkit-animation: sl-pl-blade-horizontal1-anim-shadow 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
background-color: #000;
content: "";
height: 100%;
left: 0;
position: absolute;
top: -100%;
width: 5%;
z-index: 1;
}
#sl-pl-blade-horizontal1 div:nth-child(1) span:after {
animation-delay: -0.3s;
-webkit-animation-delay: -0.3s;
}
#sl-pl-blade-horizontal1 div:nth-child(2) span:before {
animation-delay: -0.75s;
-webkit-animation-delay: -0.75s;
}
#sl-pl-blade-horizontal1 div:nth-child(2) span:after {
animation-delay: -0.45s;
-webkit-animation-delay: -0.45s;
}
#sl-pl-blade-horizontal1 div:nth-child(3) span:before {
animation-delay: -0.9s;
-webkit-animation-delay: -0.9s;
}
#sl-pl-blade-horizontal1 div:nth-child(3) span:after {
animation-delay: -0.6s;
-webkit-animation-delay: -0.6s;
}
#sl-pl-blade-horizontal1 div:nth-child(4) span:before {
animation-delay: -1.05s;
-webkit-animation-delay: -1.05s;
}
#sl-pl-blade-horizontal1 div:nth-child(4) span:after {
animation-delay: -0.75s;
-webkit-animation-delay: -0.75s;
}
#sl-pl-blade-horizontal1 div:nth-child(5) span:before {
animation-delay: -1.2s;
-webkit-animation-delay: -1.2s;
}
#sl-pl-blade-horizontal1 div:nth-child(5) span:after {
animation-delay: -0.9s;
-webkit-animation-delay: -0.9s;
}
@-webkit-keyframes sl-pl-blade-horizontal1-anim-shadow {
0% {
box-shadow: -9px 6px #fff, -6px 6px #0f0, -3px 6px #f00;
}
50% {
box-shadow: 50px 6px #fff, 53px 6px #0f0, 56px 6px #f00;
}
51% {
box-shadow: 50px 6px #f00, 53px 6px #0f0, 56px 6px #fff;
}
100% {
box-shadow: -9px 6px #f00, -6px 6px #0f0, -3px 6px #fff;
}
}
@keyframes sl-pl-blade-horizontal1-anim-shadow {
0% {
box-shadow: -9px 6px #fff, -6px 6px #0f0, -3px 6px #f00;
}
50% {
box-shadow: 50px 6px #fff, 53px 6px #0f0, 56px 6px #f00;
}
51% {
box-shadow: 50px 6px #f00, 53px 6px #0f0, 56px 6px #fff;
}
100% {
box-shadow: -9px 6px #f00, -6px 6px #0f0, -3px 6px #fff;
}
}
/* * * * * * * * * *
5.14 - blade-vertical
* * * * * * * * * */
#sl-pl-blade-vertical span {
animation: sl-pl-blade-vertical-anim 1.2s ease-in-out infinite;
-webkit-animation: sl-pl-blade-vertical-anim 1.2s ease-in-out infinite;
background: linear-gradient(#ffc6f2, #f000dc 50%, #ffc6f2 50%, #f000dc);
height: 100%;
position: absolute;
width: 12%;
}
#sl-pl-blade-vertical span:nth-child(1) {
left: 0;
}
#sl-pl-blade-vertical span:nth-child(2) {
animation-delay: -0.15s;
-webkit-animation-delay: -0.15s;
left: 20%;
}
#sl-pl-blade-vertical span:nth-child(3) {
animation-delay: -0.3s;
-webkit-animation-delay: -0.3s;
left: 40%;
}
#sl-pl-blade-vertical span:nth-child(4) {
animation-delay: -0.45s;
-webkit-animation-delay: -0.45s;
left: 60%;
}
#sl-pl-blade-vertical span:nth-child(5) {
animation-delay: -0.6s;
-webkit-animation-delay: -0.6s;
left: 80%;
}
@-webkit-keyframes sl-pl-blade-vertical-anim {
0% {
-webkit-transform: scaleY(1);
}
50% {
-webkit-transform: scaleY(0.4);
}
100% {
-webkit-transform: scaleY(1);
}
}
@keyframes sl-pl-blade-vertical-anim {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.4);
}
100% {
transform: scaleY(1);
}
}
/* * * * * * * * * *
5.15 - blade-vertical1
* * * * * * * * * */
#sl-pl-blade-vertical1 span {
animation: sl-pl-blade-vertical1-anim 1.2s ease-in-out infinite;
-webkit-animation: sl-pl-blade-vertical1-anim 1.2s ease-in-out infinite;
background: linear-gradient(#acadad, #7f8081 49%, #151518 49%, #151518 51%, #151519 52%, #242427 80%, #547173 99%, #547173);
height: 100%;
position: absolute;
width: 12%;
}
#sl-pl-blade-vertical1 span:nth-child(1) {
animation-delay: -0.5s;
-webkit-animation-delay: -0.5s;
left: 0;
}
#sl-pl-blade-vertical1 span:nth-child(2) {
animation-delay: -0.4s;
-webkit-animation-delay: -0.4s;
left: 20%;
}
#sl-pl-blade-vertical1 span:nth-child(3) {
animation-delay: -0.3s;
-webkit-animation-delay: -0.3s;
left: 40%;
}
#sl-pl-blade-vertical1 span:nth-child(4) {
animation-delay: -0.2s;
-webkit-animation-delay: -0.2s;
left: 60%;
}
#sl-pl-blade-vertical1 span:nth-child(5) {
animation-delay: -0.1s;
-webkit-animation-delay: -0.1s;
left: 80%;
}
@-webkit-keyframes sl-pl-blade-vertical1-anim {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
}
}
@keyframes sl-pl-blade-vertical1-anim {
0%, 40%, 100% {
transform: scaleY(0.4);
}
20% {
transform: scaleY(1);
}
}
/* * * * * * * * * *
5.16 - balloons
* * * * * * * * * */
#sl-pl-balloons span {
animation: sl-pl-balloons-anim 1.2s linear infinite;
-webkit-animation: sl-pl-balloons-anim 1.2s linear infinite;
background: linear-gradient(45deg, #ff0, #008000 50%, #ff0);
border-radius: 50%;
height: 30%;
left: 0;
position: absolute;
top: 35%;
width: 30%;
}
#sl-pl-balloons span:nth-child(2) {
animation-delay: -0.3s;
-webkit-animation-delay: -0.3s;
left: 35%;
}
#sl-pl-balloons span:nth-child(3) {
animation-delay: -0.6s;
-webkit-animation-delay: -0.6s;
left: 70%;
}
@-webkit-keyframes sl-pl-balloons-anim {
50% {
opacity: 0.3;
-webkit-transform: scale(0.3);
}
0%,
100% {
-webkit-transform: scale(1);
}
}
@keyframes sl-pl-balloons-anim {
50% {
opacity: 0.3;
transform: scale(0.3);
}
0%,
100% {
transform: scale(1);
}
}
/* * * * * * * * * *
5.17 - jump
* * * * * * * * * */
#sl-pl-jump span {
animation: sl-pl-jump-anim 2.2s cubic-bezier(0.6, -0.28, 0.735, 0.045) infinite;
-webkit-animation: sl-pl-jump-anim 2.2s cubic-bezier(0.6, -0.28, 0.735, 0.045) infinite;
background: linear-gradient(45deg, #471c0d, #6d3414 16%, #a83a2a 53%, #de8042 80%, #ecd14f 93%, #dccf40);
border-radius: 50%;
height: 20%;
left: 10%;
position: absolute;
top: 80%;
width: 20%;
}
#sl-pl-jump span:nth-child(2) {
animation-delay: 0.15s;
-webkit-animation-delay: 0.15s;
left: 40%;
}
#sl-pl-jump span:nth-child(3) {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
left: 70%;
}
@-webkit-keyframes sl-pl-jump-anim {
0% {
-webkit-transform: translateY(0);
}
15% {
-webkit-transform: translateY(-400%);
}
30% {
-webkit-transform: translateY(0);
}
37% {
-webkit-transform: translateY(-70%);
}
44% {
-webkit-transform: translateY(0);
}
49% {
-webkit-transform: translateY(-30%);
}
54% {
-webkit-transform: translateY(0);
}
59% {
-webkit-transform: translateY(-20%);
}
64% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(0);
}
}
@keyframes sl-pl-jump-anim {
0% {
transform: translateY(0);
}
15% {
transform: translateY(-400%);
}
30% {
transform: translateY(0);
}
37% {
transform: translateY(-70%);
}
44% {
transform: translateY(0);
}
49% {
transform: translateY(-30%);
}
54% {
transform: translateY(0);
}
59% {
transform: translateY(-20%);
}
64% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
/* * * * * * * * * *
5.18 - queue
* * * * * * * * * */
#sl-pl-queue div {
height: 100%;
left: -125%;
overflow: hidden;
position: absolute;
width: 350%;
}
#sl-pl-queue span {
animation: sl-pl-queue-anim 2.2s cubic-bezier(0.25, 0.5, 0.75, 0.5) infinite;
-webkit-animation: sl-pl-queue-anim 2.2s cubic-bezier(0.25, 0.5, 0.75, 0.5) infinite;
background: linear-gradient(45deg, #8abcfd, #67a5f5 44%, #5197ec 54%, #4087dc);
height: 12%;
left: 39%;
position: absolute;
top: 50%;
width:3.43%;
}
#sl-pl-queue span:nth-child(2) {
animation-delay: -0.1s;
-webkit-animation-delay: -0.1s;
left: 43%;
}
#sl-pl-queue span:nth-child(3) {
animation-delay: -0.2s;
-webkit-animation-delay: -0.2s;
left: 47%;
}
#sl-pl-queue span:nth-child(4) {
animation-delay: -0.3s;
-webkit-animation-delay: -0.3s;
left: 51%;
}
@-webkit-keyframes sl-pl-queue-anim {
0%, 15% {
-webkit-transform: translateX(-400px);
}
30% {
-webkit-transform: translateX(-300%);
}
73% {
-webkit-transform: translateX(300%);
}
85%, 100% {
-webkit-transform: translateX(400px);
}
}
@keyframes sl-pl-queue-anim {
0%, 15% {
transform: translateX(-400px);
}
30% {
transform: translateX(-300%);
}
73% {
transform: translateX(300%);
}
85%, 100% {
transform: translateX(400px);
}
}
/* * * * * * * * * *
5.19 - gear
* * * * * * * * * */
#sl-pl-gear span {
animation: sl-pl-gear-anim 1.2s steps(12, end) infinite;
-webkit-animation: sl-pl-gear-anim 1.2s steps(12, end) infinite;
background-color: #5e091b;
border-radius: 50%;
height: 25%;
left: 47%;
position: absolute;
transform-origin: 50% 200%;
-webkit-transform-origin: 50% 200%;
width: 6%;
}
#sl-pl-gear span:nth-child(2),
#sl-pl-trail span:nth-child(2) {
animation-delay: -0.1s;
-webkit-animation-delay: -0.1s;
opacity: 0.1;
}
#sl-pl-gear span:nth-child(3),
#sl-pl-trail span:nth-child(3) {
animation-delay: -0.2s;
-webkit-animation-delay: -0.2s;
opacity: 0.1;
}
#sl-pl-gear span:nth-child(4),
#sl-pl-trail span:nth-child(4) {
animation-delay: -0.3s;
-webkit-animation-delay: -0.3s;
opacity: 0.2;
}
#sl-pl-gear span:nth-child(5),
#sl-pl-trail span:nth-child(5) {
animation-delay: -0.4s;
-webkit-animation-delay: -0.4s;
opacity: 0.3;
}
#sl-pl-gear span:nth-child(6),
#sl-pl-trail span:nth-child(6) {
animation-delay: -0.5s;
-webkit-animation-delay: -0.5s;
opacity: 0.4;
}
#sl-pl-gear span:nth-child(7),
#sl-pl-trail span:nth-child(7) {
animation-delay: -0.6s;
-webkit-animation-delay: -0.6s;
opacity: 0.5;
}
#sl-pl-gear span:nth-child(8),
#sl-pl-trail span:nth-child(8) {
animation-delay: -0.7s;
-webkit-animation-delay: -0.7s;
opacity: 0.6;
}
#sl-pl-gear span:nth-child(9),
#sl-pl-trail span:nth-child(9) {
animation-delay: -0.8s;
-webkit-animation-delay: -0.8s;
opacity: 0.7;
}
#sl-pl-gear span:nth-child(10),
#sl-pl-trail span:nth-child(10) {
animation-delay: -0.9s;
-webkit-animation-delay: -0.9s;
opacity: 0.8;
}
#sl-pl-gear span:nth-child(11),
#sl-pl-trail span:nth-child(11) {
animation-delay: -1s;
-webkit-animation-delay: -1s;
opacity: 0.9;
}
#sl-pl-gear span:nth-child(12),
#sl-pl-trail span:nth-child(12) {
animation-delay: -1.1s;
-webkit-animation-delay: -1.1s;
opacity: 0.95;
}
@-webkit-keyframes sl-pl-gear-anim {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes sl-pl-gear-anim {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/* * * * * * * * * *
5.21 - trail
* * * * * * * * * */
#sl-pl-trail span {
animation: sl-pl-gear-anim 1.2s steps(12, end) infinite;
-webkit-animation: sl-pl-gear-anim 1.2s steps(12, end) infinite;
background: linear-gradient(#5c0000, #fe0000 30%, #fe0000 70%, #5c0000);
border-radius: 50%;
height: 16%;
left: 42%;
position: absolute;
transform-origin: 50% 310%;
-webkit-transform-origin: 50% 310%;
width: 16%;
}
/* * * * * * * * * *
5.22 - planet
* * * * * * * * * */
#sl-pl-planet div {
animation: sl-pl-gear-anim 2s linear infinite;
-webkit-animation: sl-pl-gear-anim 2s linear infinite;
height: 100%;
position: absolute;
width: 100%;
}
#sl-pl-planet span {
animation: sl-pl-planet-anim 2s ease-in-out infinite;
-webkit-animation: sl-pl-planet-anim 2s ease-in-out infinite;
background: linear-gradient(45deg, #800000, #f00);
border-radius: 50%;
height: 60%;
position: absolute;
width: 60%;
}
#sl-pl-planet span:after {
animation: sl-pl-window-anim-visible 4s steps(1, end) -2s infinite;
-webkit-animation: sl-pl-window-anim-visible 4s steps(1, end) -2s infinite;
background: linear-gradient(#93cb52, #93cb52 20%, #ffce14 20%, #ffce14 40%, #ffff70 40%, #ffff70 60%, #ffce14 60%, #ffce14 80%, #93cb52 80%, #93cb52);
border-radius: 50%;
content: '';
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
#sl-pl-planet span:nth-child(2){
animation-delay: -1s;
-webkit-animation-delay: -1s;
bottom: 0;
top: auto;
}
#sl-pl-planet span:nth-child(2):after{
animation-delay: -3s;
-webkit-animation-delay: -3s;
}
@-webkit-keyframes sl-pl-planet-anim {
0%, 100% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
@keyframes sl-pl-planet-anim {
0%, 100% {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
/* * * * * * * * * *
5.23 - cube
* * * * * * * * * */
#sl-pl-cube,
#sl-pl-cube1 {
perspective: 600px;
-webkit-perspective: 600px;
}
#sl-pl-cube div,
#sl-pl-cube1 div {
animation: sl-pl-cube-anim 3s linear infinite;
-webkit-animation: sl-pl-cube-anim 3s linear infinite;
height: 100%;
position: absolute;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
width: 100%;
}
#sl-pl-cube span,
#sl-pl-cube1 span {
background: linear-gradient(45deg, #f00, #ff0 50%, #f00);
border-radius: 15%;
height: 80%;
left: 10%;
opacity: 0.8;
position: absolute;
top: 10%;
width: 80%;
}
#sl-pl-cube span:nth-child(1),
#sl-pl-cube1 span:nth-child(1) {
transform: rotateY(-90deg) translateX(51%) rotateY(90deg);
-webkit-transform: rotateY(-90deg) translateX(51%) rotateY(90deg);
}
#sl-pl-cube span:nth-child(2),
#sl-pl-cube1 span:nth-child(2) {
transform: rotateY(90deg) rotateY(-90deg) translateX(51%) rotateY(90deg);
-webkit-transform: rotateY(90deg) rotateY(-90deg) translateX(51%) rotateY(90deg);
}
#sl-pl-cube span:nth-child(3),
#sl-pl-cube1 span:nth-child(3) {
transform: rotateY(180deg) rotateY(-90deg) translateX(51%) rotateY(90deg);
-webkit-transform: rotateY(180deg) rotateY(-90deg) translateX(51%) rotateY(90deg);
}
#sl-pl-cube span:nth-child(4),
#sl-pl-cube1 span:nth-child(4) {
transform: rotateY(-90deg) rotateY(-90deg) translateX(51%) rotateY(90deg);
-webkit-transform: rotateY(-90deg) rotateY(-90deg) translateX(51%) rotateY(90deg);
}
#sl-pl-cube span:nth-child(5),
#sl-pl-cube1 span:nth-child(5) {
transform: rotateX(90deg) rotateY(-90deg) translateX(51%) rotateY(90deg);
-webkit-transform: rotateX(90deg) rotateY(-90deg) translateX(51%) rotateY(90deg);
}
#sl-pl-cube span:nth-child(6),
#sl-pl-cube1 span:nth-child(6) {
transform: rotateX(-90deg) rotateY(-90deg) translateX(51%) rotateY(90deg);
-webkit-transform: rotateX(-90deg) rotateY(-90deg) translateX(51%) rotateY(90deg);
}
@-webkit-keyframes sl-pl-cube-anim {
0% {
-webkit-transform: rotate3d(1, 1, 1, 0);
}
100% {
-webkit-transform: rotate3d(1, 1, 1, 360deg);
}
}
@keyframes sl-pl-cube-anim {
0% {
transform: rotate3d(1, 1, 1, 0);
}
100% {
transform: rotate3d(1, 1, 1, 360deg);
}
}
/* * * * * * * * * *
5.25 - cube1
* * * * * * * * * */
#sl-pl-cube1 span {
background: linear-gradient(45deg, #8abcfd, #67a5f5 44%, #5197ec 54%, #4087dc);
border-radius: 15%;
overflow: hidden;
}
#sl-pl-cube1 span::after {
animation: sl-pl-gear-anim 3s linear infinite;
-webkit-animation: sl-pl-gear-anim 3s linear infinite;
background-color: #000;
border-radius: 50%;
box-shadow: 17px 12px #f00, 25px 15px #fff, 28px 23px #0f0, 25px 31px #00f, 17px 34px #f00, 9px 31px #fff, 6px 23px #0f0, 9px 15px #00f;
content: "";
height: 15%;
left: 0;
position: absolute;
top: -15%;
transform-origin: 333% 433%;
-webkit-transform-origin: 333% 433%;
width: 15%;
}
/* * * * * * * * * *
5.26 - cycle
* * * * * * * * * */
#sl-pl-cycle svg {
animation: sl-pl-gear-anim 5.1s linear infinite;
-webkit-animation: sl-pl-gear-anim 5.1s linear infinite;
height: 136%;
left: -18%;
position: absolute;
top: -18%;
width: 136%;
}
#sl-pl-cycle path {
animation: sl-pl-cycle-anim 1.7s ease-out infinite;
-webkit-animation: sl-pl-cycle-anim 1.7s ease-out infinite;
fill: none;
position: absolute;
stroke-dasharray: 110 135;
stroke-dashoffset: -140;
stroke-linecap: round;
stroke-width: 5px;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
vector-effect: non-scaling-stroke;
}
@-webkit-keyframes sl-pl-cycle-anim {
50% {
stroke-dashoffset: -27;
}
0% {
-webkit-transform: scale(0.75) rotate(0);
}
100% {
-webkit-transform: scale(0.75) rotate(720deg);
}
}
@keyframes sl-pl-cycle-anim {
50% {
stroke-dashoffset: -27;
}
0% {
transform: scale(0.75) rotate(0);
}
100% {
transform: scale(0.75) rotate(720deg);
}
}
/* * * * * * * * * *
5.27 - stream
* * * * * * * * * */
#sl-pl-stream svg {
animation: sl-pl-gear-anim 1s linear infinite;
-webkit-animation: sl-pl-gear-anim 1s linear infinite;
height: 100%;
width: 100%;
}
#sl-pl-stream circle {
fill: none;
stroke-width: 5px;
}
/* * * * * * * * * *
5.28 - tube
* * * * * * * * * */
#sl-pl-tube svg {
animation: sl-pl-gear-anim 1s linear infinite;
-webkit-animation: sl-pl-gear-anim 1s linear infinite;
height: 140%;
left: -20%;
position: absolute;
top: -20%;
width: 140%;
}
#sl-pl-tube circle {
fill: none;
stroke: red;
}
/* * * * * * * * * *
5.29 - leap
* * * * * * * * * */
#sl-pl-leap span {
animation: sl-pl-bounce-anim 1s linear infinite;
-webkit-animation: sl-pl-bounce-anim 1s linear infinite;
background: linear-gradient(45deg, #ac4a1d, #d36420 11%, #e79f18 41%, #efca49 79%, #f3dba3);
height: 12%;
left: 6px;
position: absolute;
top: 50%;
transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
width: 12%;
}
#sl-pl-leap span:after {
animation: sl-pl-window-anim-visible 2s steps(1, end) 0.8s infinite;
-webkit-animation: sl-pl-window-anim-visible 2s steps(1, end) 0.8s infinite;
background: #6670ff;
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
width: 100%;
}
#sl-pl-leap span:nth-child(2) {
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
left: 17px;
}
#sl-pl-leap span:nth-child(2):after {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
background: #f44336;
}
#sl-pl-leap span:nth-child(3) {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
left: 28px;
}
#sl-pl-leap span:nth-child(3):after {
animation-delay: 1s;
-webkit-animation-delay: 1s;
background: #89c148;
}
#sl-pl-leap span:nth-child(4) {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
left: 39px;
}
#sl-pl-leap span:nth-child(4):after {
animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
background: #fac90f;
}
/* * * * * * * * * *
5.34 - grid
* * * * * * * * * */
#sl-pl-grid div {
height: 100%;
position: absolute;
width: 100%;
}
#sl-pl-grid span {
animation: sl-pl-grid-anim 1.6s ease-in-out infinite;
-webkit-animation: sl-pl-grid-anim 1.6s ease-in-out infinite;
background: linear-gradient(45deg, #8abcfd, #67a5f5 44%, #5197ec 54%, #4087dc);
float: left;
height: 16px;
width: 16px;
}
#sl-pl-grid span:nth-child(1),
#sl-pl-grid span:nth-child(5),
#sl-pl-grid span:nth-child(9) {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
#sl-pl-grid span:nth-child(2),
#sl-pl-grid span:nth-child(6) {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
#sl-pl-grid span:nth-child(3) {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
#sl-pl-grid span:nth-child(4),
#sl-pl-grid span:nth-child(8) {
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
#sl-pl-grid span:after {
animation: sl-pl-window-anim-visible 3.2s steps(1, end) 0.7s infinite;
-webkit-animation: sl-pl-window-anim-visible 3.2s steps(1, end) 0.7s infinite;
background: #e0e085;
content: "";
height: 16px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 16px;
}
#sl-pl-grid span:nth-child(2):after {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
background: #d1d194;
}
#sl-pl-grid span:nth-child(3):after {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
background: #c2c2a3;
}
#sl-pl-grid span:nth-child(4):after {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
background: #ffbf00;
}
#sl-pl-grid span:nth-child(5):after {
background: #ff9900;
}
#sl-pl-grid span:nth-child(6):after {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
background: #ff7300;
}
#sl-pl-grid span:nth-child(7):after {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
background: #e38fba;
}
#sl-pl-grid span:nth-child(8):after {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
background: #db70d1;
}
#sl-pl-grid span:nth-child(9):after {
background: #d452e8;
}
@-webkit-keyframes sl-pl-grid-anim {
0%, 60%, 100% {
-webkit-transform: scale(1);
}
30% {
-webkit-transform: scale(0);
}
}
@keyframes sl-pl-grid-anim {
0%, 60%, 100% {
transform: scale(1);
}
30% {
transform: scale(0);
}
}
/* * * * * * * * * *
5.36 - fold
* * * * * * * * * */
#sl-pl-fold div {
height: 100%;
position: absolute;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100%;
}
#sl-pl-fold span {
background: linear-gradient(90deg, #785e3d, #e0b6a8);
background-clip: text !important;
-webkit-background-clip: text !important;
float: left;
height: 50%;
perspective: 190px;
-webkit-perspective: 190px;
position: relative;
width: 50%;
}
#sl-pl-fold span::before,
#sl-pl-fold span::after {
animation: sl-pl-fold-anim 2.4s linear infinite, sl-pl-fold-anim-visible 4.8s steps(1, end) infinite;
-webkit-animation: sl-pl-fold-anim 2.4s linear infinite, sl-pl-fold-anim-visible 4.8s steps(1, end) infinite;
background-color: inherit;
background-image: inherit;
content: '';
height: 96%;
left: 0;
opacity: 0;
position: absolute;
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
width: 100%;
}
#sl-pl-fold span::before {
animation-delay: 0s, 2.4s;
-webkit-animation-delay: 0s, 2.4s;
background: #00bfff;
border: 1px solid #007399;
box-sizing: border-box;
}
#sl-pl-fold span:nth-child(2){
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
#sl-pl-fold span:nth-child(3){
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
}
#sl-pl-fold span:nth-child(4){
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
#sl-pl-fold span:nth-child(2):after {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
#sl-pl-fold span:nth-child(2):before {
animation-delay: 0.3s, 2.7s;
-webkit-animation-delay: 0.3s, 2.7s;
background: #ff8000;
border-color: #994d00;
}
#sl-pl-fold span:nth-child(3):after {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
#sl-pl-fold span:nth-child(3):before {
animation-delay: 0.9s, 3.3s;
-webkit-animation-delay: 0.9s, 3.3s;
background: #ffcc80;
border-color: #bd7100;
}
#sl-pl-fold span:nth-child(4):after {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
#sl-pl-fold span:nth-child(4):before {
animation-delay: 0.6s, 3s;
-webkit-animation-delay: 0.6s, 3s;
background: #c2c2a3;
border-color: #7a7a52;
}
@-webkit-keyframes sl-pl-fold-anim {
0%, 10% {
opacity: 0;
-webkit-transform: rotateX(-180deg);
}
25%, 75% {
opacity: 1;
-webkit-transform: rotateX(0);
}
90%, 100% {
opacity: 0;
-webkit-transform: rotateY(180deg);
}
}
@keyframes sl-pl-fold-anim {
0%, 10% {
opacity: 0;
transform: rotateX(-180deg);
}
25%, 75% {
opacity: 1;
transform: rotateX(0);
}
90%, 100% {
opacity: 0;
transform: rotateY(180deg);
}
}
@-webkit-keyframes sl-pl-fold-anim-visible {
50% {
opacity: 0;
}
}
@keyframes sl-pl-fold-anim-visible {
50% {
opacity: 0;
}
}
/* * * * * * * * * *
5.37 - dots
* * * * * * * * * */
#sl-pl-dots div {
height: 100%;
left: -11px;
overflow: hidden;
position: absolute;
width: 72px;
}
#sl-pl-dots span {
background: linear-gradient(90deg, #ff8c59, #ffb37f 24%, #a3bf5f 49%, #7ca63a 75%, #527f32);
border-radius: 50%;
height: 4px;
left: 10px;
opacity: 0.5;
position: absolute;
top: 50%;
width: 4px;
}
#sl-pl-dots span::before,
#sl-pl-dots span::after {
background-color: inherit;
background-image: inherit;
border-radius: 50%;
content: "";
height: 100%;
position: absolute;
width: 100%;
}
#sl-pl-dots span::before {
left: -8px;
}
#sl-pl-dots span::after {
left: 8px;
}
#sl-pl-dots span:nth-child(2) {
left: 34px;
}
#sl-pl-dots span:nth-child(3) {
left: 58px;
}
#sl-pl-dots span:nth-child(4) {
animation: sl-pl-dots-anim 0.9s steps(11, end) infinite;
-webkit-animation: sl-pl-dots-anim 0.9s steps(11, end) infinite;
height: 6px;
left: 9px;
opacity: 1;
top: 48%;
width: 6px;
}
#sl-pl-dots span:nth-child(4):before {
height: 4px;
left: -7px;
top: 1px;
width: 4px;
}
#sl-pl-dots span:nth-child(4):after {
height: 8px;
left: 7px;
top: -1px;
width: 8px;
}
@-webkit-keyframes sl-pl-dots-anim {
0% {
-webkit-transform: translateX(-16px);
}
100% {
-webkit-transform: translateX(72px);
}
}
@keyframes sl-pl-dots-anim {
0% {
transform: translateX(-16px);
}
100% {
transform: translateX(72px);
}
}
/* * * * * * * * * *
5.38 - bubble
* * * * * * * * * */
#sl-pl-bubble svg {
height: 140%;
left: -20%;
position: absolute;
top: -20%;
width: 140%;
}
#sl-pl-bubble circle {
animation: sl-pl-bubble-anim 1.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
-webkit-animation: sl-pl-bubble-anim 1.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
fill: none;
stroke-width: 5px;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
}
#sl-pl-bubble circle:nth-child(2) {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
transform: scale(0);
-webkit-transform: scale(0);
}
@-webkit-keyframes sl-pl-bubble-anim {
0% {
opacity: 1;
stroke-width: 5px;
-webkit-transform: scale(0);
}
30% {
opacity: 1;
stroke-width: 5px;
}
100% {
opacity: 0.5;
stroke-width: 0.1px;
-webkit-transform: scale(1);
}
}
@keyframes sl-pl-bubble-anim {
0% {
opacity: 1;
stroke-width: 5px;
transform: scale(0);
}
30% {
opacity: 1;
stroke-width: 5px;
}
100% {
opacity: 0.5;
stroke-width: 0.1px;
transform: scale(1);
}
}
/* * * * * * * * * *
5.39 - bubble1
* * * * * * * * * */
#sl-pl-bubble1 span {
animation: sl-pl-bubble1-anim 1.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
-webkit-animation: sl-pl-bubble1-anim 1.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
background: linear-gradient(#e9b1e9, #92378f);
border-radius: 50%;
height: 100%;
left: 0;
position: absolute;
transform: scale(0);
-webkit-transform: scale(0);
width: 100%;
}
#sl-pl-bubble1 span:nth-child(2) {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
@-webkit-keyframes sl-pl-bubble1-anim {
0% {
opacity: 1;
-webkit-transform: scale(0);
}
20% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1);
}
}
@keyframes sl-pl-bubble1-anim {
0% {
opacity: 1;
transform: scale(0);
}
20% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1);
}
}
/* * * * * * * * * *
5.41 - dive
* * * * * * * * * */
#sl-pl-dive div {
height: 150%;
left: -25%;
overflow: hidden;
position: absolute;
top: -25%;
width: 150%;
}
#sl-pl-dive div::before {
animation: sl-pl-dive-anim-path 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
-webkit-animation: sl-pl-dive-anim-path 3s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
background: linear-gradient(#c3bbff, #3b00b0);
clip-path: path('M 0.5,34.31 C 9.232,34.8 8.228,38.75 15.08,36.56 24.93,33.42 22.4,38.78 35.71,36.55 43.68,35.22 46.15,36.71 50.02,37.52 54.09,38.37 58.73,34.18 64.09,36.55 66.89,37.79 70.08,37.47 75,35.01 75,35.01 75.72,54.45 63.3,65.85 49.22,78.79 19.49,76.58 9.1,64.22 -0.4729,52.83 0.5,34.31 0.5,34.31 Z');
-webkit-clip-path: path('M 0.5,34.31 C 9.232,34.8 8.228,38.75 15.08,36.56 24.93,33.42 22.4,38.78 35.71,36.55 43.68,35.22 46.15,36.71 50.02,37.52 54.09,38.37 58.73,34.18 64.09,36.55 66.89,37.79 70.08,37.47 75,35.01 75,35.01 75.72,54.45 63.3,65.85 49.22,78.79 19.49,76.58 9.1,64.22 -0.4729,52.83 0.5,34.31 0.5,34.31 Z');
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#sl-pl-dive span {
background-clip: text !important;
-webkit-background-clip: text !important;
background: radial-gradient(#feff56, #fa6900 40%, #c90006 72%, #4a0e0d);
height: 50%;
left: 0;
overflow: hidden;
position: absolute;
width: 100%;
}
#sl-pl-dive span:nth-child(2) {
top: 50%;
}
#sl-pl-dive span::before {
animation: sl-pl-dive-anim 1.7s linear infinite;
-webkit-animation: sl-pl-dive-anim 1.7s linear infinite;
background-color: inherit;
background-image: inherit;
content: "";
height: 44%;
left: 38%;
position: absolute;
top: 40%;
width: 22%;
}
#sl-pl-dive span:nth-child(1):before {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
height: 60%;
left: 31%;
top: 155%;
width: 38%;
}
#sl-pl-dive span:nth-child(2):before {
filter: brightness(0.6);
-webkit-filter: brightness(0.6);
}
@-webkit-keyframes sl-pl-dive-anim {
0% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate(0, 0);
}
50% {
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-webkit-transform: translate(0, -255%) rotate(180deg);
}
75% {
-webkit-animation-timing-function: ease-out;
-webkit-transform: translate(0, -160%) rotate(270deg);
}
100% {
-webkit-transform: translate(0, 0) rotate(360deg);
}
}
@keyframes sl-pl-dive-anim {
0% {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate(0, 0);
}
50% {
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
transform: translate(0, -255%) rotate(180deg);
}
75% {
animation-timing-function: ease-out;
transform: translate(0, -160%) rotate(270deg);
}
100% {
transform: translate(0, 0) rotate(360deg);
}
}
@-webkit-keyframes sl-pl-dive-anim-path {
0% {
-webkit-clip-path: path('M 0.5,34.31 C 9.232,34.8 8.228,38.75 15.08,36.56 24.93,33.42 22.4,38.78 35.71,36.55 43.68,35.22 46.15,36.71 50.02,37.52 54.09,38.37 58.73,34.18 64.09,36.55 66.89,37.79 70.08,37.47 75,35.01 75,35.01 75.72,54.45 63.3,65.85 49.22,78.79 19.49,76.58 9.1,64.22 -0.4729,52.83 0.5,34.31 0.5,34.31 Z');
}
40% {
-webkit-clip-path: path('M 0.5,35.61 C 7.196,38.71 6.526,34.53 17.69,37.02 27.19,39.14 28.4,34.2 38.31,37.02 48.03,39.79 52.06,33.97 57.98,35.71 64.97,37.77 66.9,36.89 68.82,36 70.35,35.29 72.46,33.33 75,33.91 75,33.91 75.72,54.45 63.3,65.85 49.22,78.79 20.03,76.1 9.1,64.22 -0.1338,54.18 0.5,35.61 0.5,35.61 Z');
}
}
@keyframes sl-pl-dive-anim-path {
0% {
clip-path: path('M 0.5,34.31 C 9.232,34.8 8.228,38.75 15.08,36.56 24.93,33.42 22.4,38.78 35.71,36.55 43.68,35.22 46.15,36.71 50.02,37.52 54.09,38.37 58.73,34.18 64.09,36.55 66.89,37.79 70.08,37.47 75,35.01 75,35.01 75.72,54.45 63.3,65.85 49.22,78.79 19.49,76.58 9.1,64.22 -0.4729,52.83 0.5,34.31 0.5,34.31 Z');
}
40% {
clip-path: path('M 0.5,35.61 C 7.196,38.71 6.526,34.53 17.69,37.02 27.19,39.14 28.4,34.2 38.31,37.02 48.03,39.79 52.06,33.97 57.98,35.71 64.97,37.77 66.9,36.89 68.82,36 70.35,35.29 72.46,33.33 75,33.91 75,33.91 75.72,54.45 63.3,65.85 49.22,78.79 20.03,76.1 9.1,64.22 -0.1338,54.18 0.5,35.61 0.5,35.61 Z');
}
}
/* * * * * * * * * *
5.43 - 3d-square
* * * * * * * * * */
#sl-pl-3d-square div {
height: 10px;
left: -4px;
perspective: 85px;
-webkit-perspective: 85px;
position: absolute;
top: 20px;
width: 10px;
}
#sl-pl-3d-square div:nth-child(2) {
left: 12px;
}
#sl-pl-3d-square div:nth-child(3) {
left: 28px;
}
#sl-pl-3d-square div:nth-child(4) {
left: 44px;
}
#sl-pl-3d-square span {
animation: sl-pl-3d-square-anim 1.5s ease-in-out infinite;
-webkit-animation: sl-pl-3d-square-anim 1.5s ease-in-out infinite;
background: linear-gradient(-45deg, #ffc6f2, #f000dc 50%, #ffc6f2 50%, #f000dc);
height: 100%;
left: 0;
position: absolute;
transform-origin: 50% 50% 19px;
-webkit-transform-origin: 50% 50% 19px;
width: 100%;
}
#sl-pl-3d-square div span:nth-child(1) {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
z-index: 1;
}
#sl-pl-3d-square div:nth-child(1) span:nth-child(2) {
background: #8ee4ff !important;
}
#sl-pl-3d-square div:nth-child(2) span {
animation-delay: -0.12s;
-webkit-animation-delay: -0.12s;
}
#sl-pl-3d-square div:nth-child(2) span:nth-child(2) {
background: #ffc107 !important;
}
#sl-pl-3d-square div:nth-child(3) span {
animation-delay: -0.24s;
-webkit-animation-delay: -0.24s;
}
#sl-pl-3d-square div:nth-child(3) span:nth-child(2) {
background: #8bc34a !important;
}
#sl-pl-3d-square div:nth-child(4) span {
animation-delay: -0.36s;
-webkit-animation-delay: -0.36s;
}
#sl-pl-3d-square div:nth-child(4) span:nth-child(2) {
background: #ff5722 !important;
}
@-webkit-keyframes sl-pl-3d-square-anim {
0% {
-webkit-transform: rotate3d(-1, -0.06, 0, 0);
}
100% {
-webkit-transform: rotate3d(-1, -0.06, 0, -360deg);
}
}
@keyframes sl-pl-3d-square-anim {
0% {
transform: rotate3d(-1, -0.06, 0, 0);
}
100% {
transform: rotate3d(-1, -0.06, 0, -360deg);
}
}
/* * * * * * * * * *
5.44 - circle
* * * * * * * * * */
#sl-pl-circle span {
animation: sl-pl-circle-anim 1.2s linear infinite;
-webkit-animation: sl-pl-circle-anim 1.2s linear infinite;
background: linear-gradient(45deg, #800000, #f00);
border-radius: 50%;
height: 28%;
left: -28%;
position: absolute;
top: 38%;
width: 28%;
}
#sl-pl-circle span::after {
animation: sl-pl-window-anim-visible 2.4s steps(1, end) 0.6s infinite;
-webkit-animation: sl-pl-window-anim-visible 2.4s steps(1, end) 0.6s infinite;
background: #ff6;
border-radius: 50%;
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
width: 100%;
}
#sl-pl-circle span:nth-child(2) {
animation-delay: -1.11s;
-webkit-animation-delay: -1.11s;
left: 4%;
}
#sl-pl-circle span:nth-child(2):after {
animation-delay: 0.69s;
-webkit-animation-delay: 0.69s;
background: #ffc107;
}
#sl-pl-circle span:nth-child(3) {
animation-delay: -1.02s;
-webkit-animation-delay: -1.02s;
left: 36%;
}
#sl-pl-circle span:nth-child(3):after {
animation-delay: 0.78s;
-webkit-animation-delay: 0.78s;
background: #8bc34a;
}
#sl-pl-circle span:nth-child(4) {
animation-delay: -0.93s;
-webkit-animation-delay: -0.93s;
left: 68%;
}
#sl-pl-circle span:nth-child(4):after {
animation-delay: 0.87s;
-webkit-animation-delay: 0.87s;
background: #ff5722;
}
#sl-pl-circle span:nth-child(5) {
animation-delay: -0.84s;
-webkit-animation-delay: -0.84s;
left: 100%;
}
#sl-pl-circle span:nth-child(5):after {
animation-delay: 0.96s;
-webkit-animation-delay: 0.96s;
background: #e040fb;
}
@-webkit-keyframes sl-pl-circle-anim {
50% {
-webkit-transform: scale(0);
}
}
@keyframes sl-pl-circle-anim {
50% {
transform: scale(0);
}
}
/* * * * * * * * * *
5.45 - flight
* * * * * * * * * */
#sl-pl-flight span {
animation: sl-pl-flight-anim 1.7s ease-in-out infinite, sl-pl-flight-anim-shadow 1.7s ease-in-out infinite;
-webkit-animation: sl-pl-flight-anim 1.7s ease-in-out infinite, sl-pl-flight-anim-shadow 1.7s ease-in-out infinite;
background: linear-gradient(#ca334f, #dc3e51 12%, #ed5153 28%, #ff645a 48%, #ff8179 67%, #ffa39f 87%, #ffa39f);
height: 8px;
left: -11px;
position: absolute;
top: 8px;
width: 12px;
}
#sl-pl-flight span:nth-child(2) {
animation-delay: -0.12s;
-webkit-animation-delay: -0.12s;
left: 4px;
}
#sl-pl-flight span:nth-child(3) {
animation-delay: -0.24s;
-webkit-animation-delay: -0.24s;
left: 19px;
}
#sl-pl-flight span:nth-child(4) {
animation-delay: -0.12s;
-webkit-animation-delay: -0.12s;
left: 34px;
}
#sl-pl-flight span:nth-child(5) {
left: 49px;
}
@-webkit-keyframes sl-pl-flight-anim {
50% {
-webkit-transform: translate(0, 25px);
}
}
@keyframes sl-pl-flight-anim {
50% {
transform: translate(0, 25px);
}
}
@-webkit-keyframes sl-pl-flight-anim-shadow {
35% {
box-shadow: 0 -1px #ffeb3b, 0 -3px #ffa31a, 0 -6px #54bb57, 0 -9px 0.5px -0.2px #ff3377, 0 -12px 1px -0.2px #bd2fd6;
}
75% {
box-shadow: 0 1px #ffeb3b, 0 3px #ffa31a, 0 6px #54bb57, 0 9px 0.5px -0.2px #ff3377, 0 12px 1px -0.2px #bd2fd6;
}
}
@keyframes sl-pl-flight-anim-shadow {
35% {
box-shadow: 0 -1px #ffeb3b, 0 -3px #ffa31a, 0 -6px #54bb57, 0 -9px 0.5px -0.2px #ff3377, 0 -12px 1px -0.2px #bd2fd6;
}
75% {
box-shadow: 0 1px #ffeb3b, 0 3px #ffa31a, 0 6px #54bb57, 0 9px 0.5px -0.2px #ff3377, 0 12px 1px -0.2px #bd2fd6;
}
}
/* * * * * * * * * *
5.46 - triple-spinner
* * * * * * * * * */
#sl-pl-triple-spinner svg {
animation: sl-pl-triple-spinner-anim 2.7s cubic-bezier(0.59, 0.42, 0.24, 0.47) infinite;
-webkit-animation: sl-pl-triple-spinner-anim 2.7s cubic-bezier(0.59, 0.42, 0.24, 0.47) infinite;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#sl-pl-t-s-path {
animation: sl-pl-triple-spinner-anim-move 5.4s linear infinite;
-webkit-animation: sl-pl-triple-spinner-anim-move 5.4s linear infinite;
}
#sl-pl-t-s1,
#sl-pl-t-s2 {
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
}
#sl-pl-t-s2 {
transform: rotate(240deg);
-webkit-transform: rotate(240deg);
}
@-webkit-keyframes sl-pl-triple-spinner-anim {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(1080deg);
}
}
@keyframes sl-pl-triple-spinner-anim {
0% {
transform: rotate(0);
}
100% {
transform: rotate(1080deg);
}
}
@-webkit-keyframes sl-pl-triple-spinner-anim-move {
20% {
-webkit-transform: translate(0, 4px);
}
40% {
-webkit-transform: translate(0, 0);
}
}
@keyframes sl-pl-triple-spinner-anim-move {
20% {
transform: translate(0, 4px);
}
40% {
transform: translate(0, 0);
}
}
/* * * * * * * * * *
6.0 General styles and background transitions
* * * * * * * * * */
#sl-preloader {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999999;
}
#sl-pl-close-button {
display: none;
position: fixed;
right: 10px;
top: 10px;
}
.sl-pl-loaded #sl-pl-close-button,
.sl-pl-loaded .sl-pl-bar-container,
.sl-pl-loaded .sl-pl-spin-container,
.sl-pl-loaded .sl-pl-brand-container {
opacity: 0;
transition: opacity 0.5s ease-out 0s;
}
.sl-pl-back {
height: 100%;
position: absolute;
transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
width: 50%;
}
.sl-pl-back-fade,
.sl-pl-back-to-left,
.sl-pl-back-to-right,
.sl-pl-back-to-top,
.sl-pl-back-to-bottom,
.sl-pl-back-ellipse-bottom,
.sl-pl-back-ellipse-top,
.sl-pl-back-ellipse-left,
.sl-pl-back-ellipse-right,
.sl-pl-back-rect,
.sl-pl-back-diamond,
.sl-pl-back-circle,
.sl-pl-back-linear-left,
.sl-pl-back-linear-right {
left: 0;
top: 0;
width: 100%;
}
.sl-pl-back-split-horizontal-left,
.sl-pl-back-tear-vertical-left {
left: 0;
top: 0;
}
.sl-pl-back-split-horizontal-right,
.sl-pl-back-tear-vertical-right {
left: 50%;
top: 0;
}
.sl-pl-back-split-vertical-top,
.sl-pl-back-tear-horizontal-top {
height: 50%;
left: 0;
top: 0;
width: 100%;
}
.sl-pl-back-split-vertical-bottom,
.sl-pl-back-tear-horizontal-bottom {
height: 50%;
left: 0;
top: 50%;
width: 100%;
}
.sl-pl-loaded .sl-pl-back-fade {
opacity: 0 !important;
}
.sl-pl-loaded .sl-pl-back-split-vertical-top {
transform: translateY(-51vh);
-webkit-transform: translateY(-51vh);
}
.sl-pl-loaded .sl-pl-back-split-vertical-bottom {
transform: translateY(51vh);
-webkit-transform: translateY(51vh);
}
.sl-pl-loaded .sl-pl-back-split-horizontal-left {
transform: translateX(-51vw);
-webkit-transform: translateX(-51vw);
}
.sl-pl-loaded .sl-pl-back-split-horizontal-right {
transform: translateX(51vw);
-webkit-transform: translateX(51vw);
}
.sl-pl-loaded .sl-pl-back-to-left,
.sl-pl-loaded .sl-pl-back-tear-horizontal-top {
transform: translateX(-101vw);
-webkit-transform: translateX(-101vw);
}
.sl-pl-loaded .sl-pl-back-to-right,
.sl-pl-loaded .sl-pl-back-tear-horizontal-bottom {
transform: translateX(101vw);
-webkit-transform: translateX(101vw);
}
.sl-pl-loaded .sl-pl-back-to-top,
.sl-pl-loaded .sl-pl-back-tear-vertical-left {
transform: translateY(-101vh);
-webkit-transform: translateY(-101vh);
}
.sl-pl-loaded .sl-pl-back-to-bottom,
.sl-pl-loaded .sl-pl-back-tear-vertical-right {
transform: translateY(101vh);
-webkit-transform: translateY(101vh);
}
.sl-pl-back-ellipse-bottom {
clip-path: ellipse(150% 150% at 100% 100%);
-webkit-clip-path: ellipse(150% 150% at 100% 100%);
}
.sl-pl-loaded .sl-pl-back-ellipse-bottom {
clip-path: ellipse(0 0 at 100% 100%);
-webkit-clip-path: ellipse(0 0 at 100% 100%);
}
.sl-pl-back-ellipse-top {
clip-path: ellipse(150% 150% at 0 0);
-webkit-clip-path: ellipse(150% 150% at 0 0);
}
.sl-pl-loaded .sl-pl-back-ellipse-top {
clip-path: ellipse(0 0 at 0 0);
-webkit-clip-path: ellipse(0 0 at 0 0);
}
.sl-pl-back-ellipse-left {
clip-path: ellipse(150% 150% at 0 100%);
-webkit-clip-path: ellipse(150% 150% at 0 100%);
}
.sl-pl-loaded .sl-pl-back-ellipse-left {
clip-path: ellipse(0 0 at 0 100%);
-webkit-clip-path: ellipse(0 0 at 0 100%);
}
.sl-pl-back-ellipse-right {
clip-path: ellipse(150% 150% at 100% 0);
-webkit-clip-path: ellipse(150% 150% at 100% 0);
}
.sl-pl-loaded .sl-pl-back-ellipse-right {
clip-path: ellipse(0 0 at 100% 0);
-webkit-clip-path: ellipse(0 0 at 100% 0);
}
.sl-pl-loaded .sl-pl-back-rect {
transform: scale(0);
-webkit-transform: scale(0);
}
.sl-pl-back-diamond {
clip-path: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);
-webkit-clip-path: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);
}
.sl-pl-loaded .sl-pl-back-diamond {
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
-webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}
.sl-pl-back-circle {
clip-path: circle(75%);
-webkit-clip-path: circle(75%);
}
.sl-pl-loaded .sl-pl-back-circle {
clip-path: circle(0);
-webkit-clip-path: circle(0);
}
.sl-pl-back-linear-left,
.sl-pl-back-linear-right {
width: 100%;
}
.sl-pl-back-linear-left div,
.sl-pl-back-linear-right div {
display: inline-block;
height: 100%;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, background 0s;
width: 10%;
}
.sl-pl-loaded .sl-pl-back-linear-left div,
.sl-pl-loaded .sl-pl-back-linear-right div {
opacity: 0 !important;
}
.sl-pl-loaded .sl-pl-back-linear-left div:nth-child(2),
.sl-pl-loaded .sl-pl-back-linear-right div:nth-child(9) {
transition-delay: 0.025s;
}
.sl-pl-loaded .sl-pl-back-linear-left div:nth-child(3),
.sl-pl-loaded .sl-pl-back-linear-right div:nth-child(8) {
transition-delay: 0.05s;
}
.sl-pl-loaded .sl-pl-back-linear-left div:nth-child(4),
.sl-pl-loaded .sl-pl-back-linear-right div:nth-child(7) {
transition-delay: 0.075s;
}
.sl-pl-loaded .sl-pl-back-linear-left div:nth-child(5),
.sl-pl-loaded .sl-pl-back-linear-right div:nth-child(6) {
transition-delay: 0.1s;
}
.sl-pl-loaded .sl-pl-back-linear-left div:nth-child(6),
.sl-pl-loaded .sl-pl-back-linear-right div:nth-child(5) {
transition-delay: 0.125s;
}
.sl-pl-loaded .sl-pl-back-linear-left div:nth-child(7),
.sl-pl-loaded .sl-pl-back-linear-right div:nth-child(4) {
transition-delay: 0.15s;
}
.sl-pl-loaded .sl-pl-back-linear-left div:nth-child(8),
.sl-pl-loaded .sl-pl-back-linear-right div:nth-child(3) {
transition-delay: 0.175s;
}
.sl-pl-loaded .sl-pl-back-linear-left div:nth-child(9),
.sl-pl-loaded .sl-pl-back-linear-right div:nth-child(2) {
transition-delay: 0.2s;
}
.sl-pl-loaded .sl-pl-back-linear-left div:nth-child(10),
.sl-pl-loaded .sl-pl-back-linear-right div:nth-child(1) {
transition-delay: 0.225s;
}
/* * * * * * * * * *
7.0 - Styles and animations of text
* * * * * * * * * */
.sl-pl-text {
position: relative;
perspective: 200px;
}
.sl-pl-text span {
display: inline-block;
}
/* * * * * * * * * *
7.1 - shadow
* * * * * * * * * */
#sl-pl-shadow span {
animation: sl-pl-shadow-anim 1.2s linear infinite;
-webkit-animation: sl-pl-shadow-anim 1.2s linear infinite;
}
@-webkit-keyframes sl-pl-shadow-anim {
50% {
text-shadow: 0 1px 0 #dba1a1, 0 2px 0 #d89999, 0 3px 0 #d59292, 0 4px 0 #d28a8a,
0 5px 0 #cf8383, 0 6px 0 #cd7c7c, 0 7px 0 #ca7474, 0 8px 0 #c76d6d, 0 0 5px rgba(230, 139, 139, 0.05),
0 -1px 3px rgba(230, 139, 139, 0.2), 0 9px 9px rgba(230, 139, 139, 0.3), 0 12px 12px rgba(230, 139, 139, 0.4),
0 15px 15px rgba(230, 139, 139, 0.4);
}
0%,
100% {
text-shadow: none;
}
}
@keyframes sl-pl-shadow-anim {
50% {
text-shadow: 0 1px 0 #dba1a1, 0 2px 0 #d89999, 0 3px 0 #d59292, 0 4px 0 #d28a8a,
0 5px 0 #cf8383, 0 6px 0 #cd7c7c, 0 7px 0 #ca7474, 0 8px 0 #c76d6d, 0 0 5px rgba(230, 139, 139, 0.05),
0 -1px 3px rgba(230, 139, 139, 0.2), 0 9px 9px rgba(230, 139, 139, 0.3), 0 12px 12px rgba(230, 139, 139, 0.4),
0 15px 15px rgba(230, 139, 139, 0.4);
}
0%,
100% {
text-shadow: none;
}
}
/* * * * * * * * * *
7.2 - glow
* * * * * * * * * */
#sl-pl-glow span {
animation: sl-pl-glow-anim 1s ease-in infinite;
-webkit-animation: sl-pl-glow-anim 1s ease-in infinite;
}
@-webkit-keyframes sl-pl-glow-anim {
50% {
text-shadow: 0 0 5px yellow;
}
}
@keyframes sl-pl-glow-anim {
50% {
text-shadow: 0 0 5px yellow;
}
}
/* * * * * * * * * *
7.3 - yoyo
* * * * * * * * * */
#sl-pl-brand-yoyo,
#sl-pl-yoyo span {
animation: sl-pl-yoyo-anim 1s ease-in infinite;
-webkit-animation: sl-pl-yoyo-anim 1s ease-in infinite;
}
@-webkit-keyframes sl-pl-yoyo-anim {
50% {
-webkit-transform: translate(-2px, -2px);
}
0%,
100% {
-webkit-transform: translate(0, 0);
}
}
@keyframes sl-pl-yoyo-anim {
50% {
transform: translate(-2px, -2px);
}
0%,
100% {
transform: translate(0, 0);
}
}
/* * * * * * * * * *
7.4 - spring
* * * * * * * * * */
#sl-pl-spring span {
animation: sl-pl-spring-anim 1.2s ease infinite;
-webkit-animation: sl-pl-spring-anim 1.2s ease infinite;
transform: scaleY(0.8);
-webkit-transform: scaleY(0.8);
transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
@-webkit-keyframes sl-pl-spring-anim {
0% {
-webkit-transform: scaleY(0.8);
}
40% {
-webkit-transform: scaleY(1.4);
}
100% {
-webkit-transform: scaleY(0.8);
}
}
@keyframes sl-pl-spring-anim {
0% {
transform: scaleY(0.8);
}
40% {
transform: scaleY(1.4);
}
100% {
transform: scaleY(0.8);
}
}
/* * * * * * * * * *
7.5 - bounce
* * * * * * * * * */
#sl-pl-brand-bounce,
#sl-pl-bounce span {
animation: sl-pl-bounce-anim 1.2s linear infinite;
-webkit-animation: sl-pl-bounce-anim 1.2s linear infinite;
transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
@-webkit-keyframes sl-pl-bounce-anim {
0% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate(0, 0) scale(1, 1);
}
40% {
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-webkit-transform: translate(0, -150%) scale(0.8, 1.2);
}
70% {
-webkit-transform: scale(1, 1);
}
85% {
-webkit-transform: translate(0, 0) scale(1.4, 0.6);
}
95% {
-webkit-transform: scale(1, 1);
}
}
@keyframes sl-pl-bounce-anim {
0% {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate(0, 0) scale(1, 1);
}
40% {
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
transform: translate(0, -150%) scale(0.8, 1.2);
}
70% {
transform: scale(1, 1);
}
85% {
transform: translate(0, 0) scale(1.4, 0.6);
}
95% {
transform: scale(1, 1);
}
}
/* * * * * * * * * *
7.6 - zoom
* * * * * * * * * */
#sl-pl-zoom span {
animation: sl-pl-balloons-anim 1.2s linear infinite;
-webkit-animation: sl-pl-balloons-anim 1.2s linear infinite;
}
/* * * * * * * * * *
7.7 - wave
* * * * * * * * * */
#sl-pl-wave span {
animation: sl-pl-blade-vertical-anim 1s linear infinite;
-webkit-animation: sl-pl-blade-vertical-anim 1s linear infinite;
}
/* * * * * * * * * *
7.8 - swing
* * * * * * * * * */
#sl-pl-brand-swing,
#sl-pl-swing span {
animation: sl-pl-swing-anim 1s linear infinite;
-webkit-animation: sl-pl-swing-anim 1s linear infinite;
}
@-webkit-keyframes sl-pl-swing-anim {
20% {
-webkit-transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-10deg);
}
60% {
-webkit-transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
}
100% {
-webkit-transform: rotate(0);
}
}
@keyframes sl-pl-swing-anim {
20% {
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0);
}
}
/* * * * * * * * * *
7.9 - flight01
* * * * * * * * * */
#sl-pl-flight01 span {
animation: sl-pl-flight01-anim 4.8s linear infinite;
-webkit-animation: sl-pl-flight01-anim 4.8s linear infinite;
opacity: 0;
transform-origin: 65% 14% 29px;
-webkit-transform-origin: 65% 14% 29px;
}
@-webkit-keyframes sl-pl-flight01-anim {
0%, 5%, 85%, 100% {
-webkit-transform: rotateZ(0) rotateX(0) rotateY(0) scale(3, 3);
opacity: 0;
}
35%, 70% {
-webkit-transform: rotateZ(-360deg) rotateX(-360deg) rotateY(-360deg) scale(1, 1);
opacity: 1;
}
}
@keyframes sl-pl-flight01-anim {
0%, 5%, 85%, 100% {
transform: rotateZ(0) rotateX(0) rotateY(0) scale(3, 3);
opacity: 0;
}
35%, 70% {
transform: rotateZ(-360deg) rotateX(-360deg) rotateY(-360deg) scale(1, 1);
opacity: 1;
}
}
/* * * * * * * * * *
7.10 - flight02
* * * * * * * * * */
#sl-pl-flight02 span {
animation: sl-pl-flight02-anim 4.8s linear infinite;
-webkit-animation: sl-pl-flight02-anim 4.8s linear infinite;
opacity: 0;
transform-origin: 96% 66% 12px;
-webkit-transform-origin: 96% 66% 12px;
}
@-webkit-keyframes sl-pl-flight02-anim {
0%, 5%, 85%, 100% {
-webkit-transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg) scale(2, 2) translate(10px ,-10px);
opacity: 0;
}
35%, 70% {
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0) scale(1, 1) translate(0 ,0);
opacity: 1;
}
}
@keyframes sl-pl-flight02-anim {
0%, 5%, 85%, 100% {
transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg) scale(2, 2) translate(10px ,-10px);
opacity: 0;
}
35%, 70% {
transform: rotateX(0) rotateY(0) rotateZ(0) scale(1, 1) translate(0 ,0);
opacity: 1;
}
}
/* * * * * * * * * *
7.11 - flight03
* * * * * * * * * */
#sl-pl-flight03 span {
animation: sl-pl-flight03-anim 4.8s linear infinite;
-webkit-animation: sl-pl-flight03-anim 4.8s linear infinite;
opacity: 0;
transform-origin: 102% 31% 25px;
-webkit-transform-origin: 102% 31% 25px;
}
@-webkit-keyframes sl-pl-flight03-anim {
0%, 5%, 85%, 100% {
-webkit-transform: rotateX(660deg) rotateY(0) rotateZ(0) scale(0, 3) translate(0 ,0);
opacity: 0;
}
35%, 70% {
-webkit-transform: rotateX(0) rotateY(0) rotateZ(0) scale(1, 1) translate(0 ,0);
opacity: 1;
}
}
@keyframes sl-pl-flight03-anim {
0%, 5%, 85%, 100% {
transform: rotateX(660deg) rotateY(0) rotateZ(0) scale(0, 3) translate(0 ,0);
opacity: 0;
}
35%, 70% {
transform: rotateX(0) rotateY(0) rotateZ(0) scale(1, 1) translate(0 ,0);
opacity: 1;
}
}
/* * * * * * * * * *
8.0 - Styles and animations of Brand Image
* * * * * * * * * */
.sl-pl-brand,
.sl-pl-custom,
.sl-pl-brand-container div {
display: inline-block;
}
.sl-pl-brand-container,
.sl-pl-brand-container div {
perspective: 200px;
-webkit-perspective: 200px;
position: relative;
text-align: center;
}
/* * * * * * * * * *
8.1 - rotate-2D
* * * * * * * * * */
#sl-pl-brand-rotate-2D {
animation: sl-pl-rotate-2D-anim 3s cubic-bezier(0.2, 0.95, 0.45, 1.15) infinite;
-webkit-animation: sl-pl-rotate-2D-anim 3s cubic-bezier(0.2, 0.95, 0.45, 1.15) infinite;
}
@-webkit-keyframes sl-pl-rotate-2D-anim {
0% {
-webkit-transform: rotate(0);
}
60%, 100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes sl-pl-rotate-2D-anim {
0% {
transform: rotate(0);
}
60%, 100% {
transform: rotate(360deg);
}
}
/* * * * * * * * * *
8.2 - rotate-3D-X
* * * * * * * * * */
#sl-pl-brand-rotate-3D-X {
animation: sl-pl-rotate-3D-X-anim 2.2s cubic-bezier(0.3, 0, 0.45, 1) infinite;
-webkit-animation: sl-pl-rotate-3D-X-anim 2.2s cubic-bezier(0.3, 0, 0.45, 1) infinite;
}
@-webkit-keyframes sl-pl-rotate-3D-X-anim {
0% {
-webkit-transform: rotateX(360deg);
}
60%, 100% {
-webkit-transform: rotateX(0);
}
}
@keyframes sl-pl-rotate-3D-X-anim {
0% {
transform: rotateX(360deg);
}
60%, 100% {
transform: rotateX(0);
}
}
/* * * * * * * * * *
8.3 - rotate-3D-Y
* * * * * * * * * */
#sl-pl-brand-rotate-3D-Y {
animation: sl-pl-rotate-3D-Y-anim 2.2s cubic-bezier(0.3, 0, 0.45, 1) infinite;
-webkit-animation: sl-pl-rotate-3D-Y-anim 2.2s cubic-bezier(0.3, 0, 0.45, 1) infinite;
}
@-webkit-keyframes sl-pl-rotate-3D-Y-anim {
0% {
-webkit-transform: rotateY(360deg);
}
60%, 100% {
-webkit-transform: rotateY(0);
}
}
@keyframes sl-pl-rotate-3D-Y-anim {
0% {
transform: rotateY(360deg);
}
60%, 100% {
transform: rotateY(0);
}
}
/* * * * * * * * * *
8.4 - wrest-X
* * * * * * * * * */
.sl-pl-brand-wrest-X {
animation: sl-pl-wrest-X-anim 2.4s linear infinite;
-webkit-animation: sl-pl-wrest-X-anim 2.4s linear infinite;
}
@-webkit-keyframes sl-pl-wrest-X-anim {
0% {
-webkit-transform: scale(1) rotateX(360deg);
}
25% {
-webkit-transform: scale(1.3) rotateX(180deg);
}
55%, 100% {
-webkit-transform: scale(1) rotateX(0);
}
}
@keyframes sl-pl-wrest-X-anim {
0% {
transform: scale(1) rotateX(360deg);
}
25% {
transform: scale(1.3) rotateX(180deg);
}
55%, 100% {
transform: scale(1) rotateX(0);
}
}
/* * * * * * * * * *
8.5 - wrest-Y
* * * * * * * * * */
.sl-pl-brand-wrest-Y {
animation: sl-pl-wrest-Y-anim 2.4s linear infinite;
-webkit-animation: sl-pl-wrest-Y-anim 2.4s linear infinite;
}
@-webkit-keyframes sl-pl-wrest-Y-anim {
0% {
-webkit-transform: scale(1) rotateY(360deg);
}
25% {
-webkit-transform: scale(1.3) rotateY(180deg);
}
55%, 100% {
-webkit-transform: scale(1) rotateY(0);
}
}
@keyframes sl-pl-wrest-Y-anim {
0% {
transform: scale(1) rotateY(360deg);
}
25% {
transform: scale(1.3) rotateY(180deg);
}
55%, 100% {
transform: scale(1) rotateY(0);
}
}
/* * * * * * * * * *
8.6 - roll
* * * * * * * * * */
.sl-pl-brand-roll {
animation: sl-pl-roll-anim 2.9s cubic-bezier(0.39, 0.58, 0.57, 1) infinite;
-webkit-animation: sl-pl-roll-anim 2.9s cubic-bezier(0.39, 0.58, 0.57, 1) infinite;
transform-origin: -10% 15% -35px;
-webkit-transform-origin: -10% 15% -35px;
}
@-webkit-keyframes sl-pl-roll-anim {
0% {
-webkit-transform: translate(20px ,-20px) rotateX(-720deg) scale(2,2);
}
45%, 100% {
-webkit-transform: translate(0 ,0) rotateX(0) scale(1, 1);
}
}
@keyframes sl-pl-roll-anim {
0% {
transform: translate(20px ,-20px) rotateX(-720deg) scale(2,2);
}
45%, 100% {
transform: translate(0 ,0) rotateX(0) scale(1, 1);
}
}
/* * * * * * * * * *
8.7 - pipe
* * * * * * * * * */
.sl-pl-brand-pipe {
animation: sl-pl-pipe-anim 2.9s ease-in-out infinite;
-webkit-animation: sl-pl-pipe-anim 2.9s ease-in-out infinite;
transform-origin: 70% 14% -40px;
-webkit-transform-origin: 70% 14% -40px;
}
@-webkit-keyframes sl-pl-pipe-anim {
0% {
-webkit-transform: translate(20px ,-20px) rotateZ(-10deg) rotateX(720deg) rotateY(-50deg) scale(2,2);
}
45%, 100% {
-webkit-transform: translate(0 ,0) rotateZ(0) rotateX(0) rotateY(0) scale(1, 1);
}
}
@keyframes sl-pl-pipe-anim {
0% {
transform: translate(20px ,-20px) rotateZ(-10deg) rotateX(720deg) rotateY(-50deg) scale(2,2);
}
45%, 100% {
transform: translate(0 ,0) rotateZ(0) rotateX(0) rotateY(0) scale(1, 1);
}
}
/* * * * * * * * * *
8.8 - swirl
* * * * * * * * * */
.sl-pl-brand-swirl {
animation: sl-pl-swirl-anim 2.9s ease-in-out infinite;
-webkit-animation: sl-pl-swirl-anim 2.9s ease-in-out infinite;
transform-origin: 30% 10% 50px;
-webkit-transform-origin: 30% 10% 50px;
}
@-webkit-keyframes sl-pl-swirl-anim {
0% {
-webkit-transform: translate(20px ,-20px) rotateZ(-360deg) rotateY(50deg) scale(0.5,0.5);
}
45%, 100% {
-webkit-transform: translate(0 ,0) rotateZ(0) rotateY(0) scale(1, 1);
}
}
@keyframes sl-pl-swirl-anim {
0% {
transform: translate(20px ,-20px) rotateZ(-360deg) rotateY(50deg) scale(0.5,0.5);
}
45%, 100% {
transform: translate(0 ,0) rotateZ(0) rotateY(0) scale(1, 1);
}
}
/* * * * * * * * * *
8.9 - sheet
* * * * * * * * * */
.sl-pl-brand-sheet {
animation: sl-pl-sheet-anim 2.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-webkit-animation: sl-pl-sheet-anim 2.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
transform-origin: 90% 0 -40px;
-webkit-transform-origin: 90% 0 -40px;
}
@-webkit-keyframes sl-pl-sheet-anim {
0% {
-webkit-transform: rotateX(0) scale(0.1, 1);
}
45%, 100% {
-webkit-transform: rotateX(-360deg) scale(1, 1);
}
}
@keyframes sl-pl-sheet-anim {
0% {
transform: rotateX(0) scale(0.1, 1);
}
45%, 100% {
transform: rotateX(-360deg) scale(1, 1);
}
}
/* * * * * * * * * *
8.10 - light move
* * * * * * * * * */
#sl-pl-brand-light-move {
display: inline-block;
line-height: 0;
overflow: hidden;
position: relative;
width: fit-content;
}
#sl-pl-brand-light-move:after {
animation: sl-pl-light-move-anim 3.5s linear 0.7s infinite;
-webkit-animation: sl-pl-light-move-anim 3.5s linear 0.7s infinite;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.45) 12%, rgba(255, 255, 255, 0)24%);
content: "";
display: inline-block;
height: 100%;
left: -150%;
position: absolute;
top: 0;
transform: translateX(0px) skewX(-45deg);
-webkit-transform: translateX(0px) skewX(-45deg);
width: 100%;
}
@-webkit-keyframes sl-pl-light-move-anim {
0% {
-webkit-transform: translateX(0) skewX(-45deg);
}
40%, 100% {
-webkit-transform: translateX(400%) skewX(-45deg);
}
}
@keyframes sl-pl-light-move-anim {
0% {
transform: translateX(0) skewX(-45deg);
}
40%, 100% {
transform: translateX(400%) skewX(-45deg);
}
}
/* * * * * * * * * *
8.11 - flash
* * * * * * * * * */
#sl-pl-brand-flash {
animation: sl-pl-flash-anim 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-webkit-animation: sl-pl-flash-anim 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@-webkit-keyframes sl-pl-flash-anim {
24%, 43% {
opacity: 0.2;
}
20%, 30%, 35%, 49% {
opacity: 1;
}
}
@keyframes sl-pl-flash-anim {
24%, 43% {
opacity: 0.2;
}
20%, 30%, 35%, 49% {
opacity: 1;
}
}
/* * * * * * * * * *
9.0 - Styles and animations of progress bar and counter
* * * * * * * * * */
.sl-pl-progress-label {
height: 55px;
text-align: initial;
width: 240px;
}
.sl-pl-progress-div {
height: 100%;
top: 20px;
width: 100%;
}
.sl-pl-progress-div-text {
top: 18px;
width: 100%;
}
.sl-pl-bar-container,
.sl-pl-preview-bar-container {
border-radius: 10px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
box-sizing: content-box;
height: 10px;
left: 50%;
overflow: hidden;
position: absolute;
top: 0;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
width: 210px;
}
.sl-pl-bar-back {
border-radius: inherit;
height: 100%;
left: 0;
opacity: 0.2;
position: absolute;
width: 100%;
}
#sl-pl-progress,
#sl-pl-progress-view1,
#sl-pl-progress-view2,
#sl-pl-preview-progress,
#sl-pl-preview-progress-view1,
#sl-pl-preview-progress-view2 {
border-radius: inherit;
height: 100%;
overflow: hidden;
position: relative;
width: 75%;
}
#sl-pl-progress-view1,
#sl-pl-progress-view2,
#sl-pl-preview-progress,
#sl-pl-preview-progress-view1,
#sl-pl-preview-progress-view2 {
width: 100%;
}
#sl-pl-preview-progress-view1 {
transform: translateX(-30%);
-webkit-transform: translateX(-30%);
}
html[dir*="rtl"] #sl-pl-preview-progress-view1 {
transform: translateX(30%);
-webkit-transform: translateX(30%);
}
#sl-pl-preview-progress-view2 {
transform: translateX(30%);
-webkit-transform: translateX(30%);
}
html[dir*="rtl"] #sl-pl-preview-progress-view2 {
transform: translateX(-30%);
-webkit-transform: translateX(-30%);
}
.sl-pl-bar,
.sl-pl-preview-bar {
height: 100%;
position: absolute;
width: 210px;
}
.sl-pl-preview-bar-container {
top: 20%;
z-index: 99999999;
}
#sl-pl-counter {
position: relative;
line-height: normal;
white-space: nowrap;
}
#sl-pl-counter span{
font-size: inherit;
color: inherit;
}
#sl-pl-bar-middle-container {
position: relative;
}
/* * * * * * * * * *
9.1 - border
* * * * * * * * * */
#sl-pl-border-bar-container,
#sl-pl-border-cell-bar-container,
#sl-pl-border-bulgy-bar-container,
#sl-pl-border-glassy-bar-container,
#sl-pl-border-stripe-bar-container,
#sl-pl-anim-border-stripe-bar-container {
border: 1px solid #000;
box-shadow: none;
padding: 2px;
margin-top: -3px;
}
#sl-pl-border-bar-container .sl-pl-bar-back,
#sl-pl-border-cell-bar-container .sl-pl-bar-back,
#sl-pl-border-bulgy-bar-container .sl-pl-bar-back,
#sl-pl-border-glassy-bar-container .sl-pl-bar-back,
#sl-pl-border-stripe-bar-container .sl-pl-bar-back,
#sl-pl-anim-border-stripe-bar-container .sl-pl-bar-back {
height: calc(100% - 4px);
left: 2px;
width: calc(100% - 4px);
}
#sl-pl-simple-bar-container {
border-radius: 0;
}
#sl-pl-simple-bar,
#sl-pl-simple-bar-container .sl-pl-bar-back {
background: #65009b;
}
#sl-pl-border-bar-container {
border-color: #77410a;
border-radius: 0;
}
#sl-pl-border-bar,
#sl-pl-border-bar-container .sl-pl-bar-back {
background: linear-gradient(15deg, #8abcfd, #67a5f5 44%, #5197ec 54%, #4087dc);
}
#sl-pl-stripe-bar,
#sl-pl-stripe-bar-container .sl-pl-bar-back {
background: linear-gradient(#babc73, #555606);
}
#sl-pl-stripe-bar-delay,
#sl-pl-border-stripe-bar-delay {
animation-delay: -0.6s;
-webkit-animation-delay: -0.6s;
}
#sl-pl-border-stripe-bar-container {
border-color: #00f;
}
#sl-pl-border-stripe-bar,
#sl-pl-border-stripe-bar-container .sl-pl-bar-back {
background: linear-gradient(#f00, #ffb0b0 50%, #f00);
}
#sl-pl-anim-stripe-bar-container {
border-radius: 3px;
}
#sl-pl-anim-stripe-bar,
#sl-pl-anim-stripe-bar-container .sl-pl-bar-back {
background: linear-gradient(#0076ff, #47f4ff 52%, #078eff 95%, #0083ff);
}
#sl-pl-anim-stripe-bar-delay,
#sl-pl-anim-border-stripe-bar-delay {
animation-delay: -0.3s;
-webkit-animation-delay: -0.3s;
}
#sl-pl-anim-border-stripe-bar-container {
border-color: #f00;
border-radius: 3px;
}
#sl-pl-anim-border-stripe-bar,
#sl-pl-anim-border-stripe-bar-container .sl-pl-bar-back {
background: linear-gradient(#ed3908, #ff6e02 19%, #ffb601 31%, #ff0 50%, #ffb600 61%, #ff6d00 81%, #f65304 92%, #ed3908);
}
#sl-pl-cell-bar,
#sl-pl-cell-bar-container .sl-pl-bar-back {
background: linear-gradient(45deg, #6c5b1c, #a49e27 21%, #c3983a 66%, #d79c57 83%, #cdab62 92%, #d8db88);
}
#sl-pl-cell-bar-delay,
#sl-pl-border-cell-bar-delay {
animation-delay: -1.0s;
-webkit-animation-delay: -1.0s;
}
#sl-pl-border-cell-bar-container {
border-color: #ff009d;
}
#sl-pl-border-cell-bar,
#sl-pl-border-cell-bar-container .sl-pl-bar-back {
background: linear-gradient(#510700, #fd6f53 10%, #fd714c 33%, #ab2000 67%, #7a1400);
}
#sl-pl-glassy-bar-container {
border-radius: 2px;
}
#sl-pl-glassy-bar,
#sl-pl-glassy-bar-container .sl-pl-bar-back {
background: linear-gradient(45deg, #ac4a1d, #d36420 11%, #e79f18 41%, #efca49 79%, #f3dba3);
}
#sl-pl-border-glassy-bar-container {
border-color: #b35f7d;
border-radius: 2px;
}
#sl-pl-border-glassy-bar,
#sl-pl-border-glassy-bar-container .sl-pl-bar-back {
background: linear-gradient(90deg, #80fafd, #8080fa 20%, #f882f5 39%, #fa8280 60%, #fafd82 80%, #80fa80);
}
#sl-pl-bulgy-bar,
#sl-pl-bulgy-bar-container .sl-pl-bar-back {
background: linear-gradient(90deg, #f00, #ff0 16%, #0f0 33%, #0ff 51%, #00f 67%, #f0f 85%, #f00);
}
#sl-pl-bulgy-bar-delay,
#sl-pl-border-bulgy-bar-delay {
animation-delay: -0.8s;
-webkit-animation-delay: -0.8s;
}
#sl-pl-border-bulgy-bar-container {
border-color: #212121;
}
#sl-pl-border-bulgy-bar,
#sl-pl-border-bulgy-bar-container .sl-pl-bar-back {
background: linear-gradient(45deg, #27aa1e, #21a11a 48%, #40b23b 50%, #9ace96);
}
/* * * * * * * * * *
9.2 - stripe
* * * * * * * * * */
#sl-pl-stripe-bar::before,
#sl-pl-anim-stripe-bar::before,
#sl-pl-border-stripe-bar::before,
#sl-pl-anim-border-stripe-bar::before {
background-image: linear-gradient(-45deg,rgba(255, 255, 255, 0.3) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, #0000 75%, rgba(0, 0, 0, 0));
background-size: 35px 35px;
border-radius: inherit;
content: "";
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
/* * * * * * * * * *
9.3 - stripe animation
* * * * * * * * * */
#sl-pl-anim-stripe-bar::before,
#sl-pl-anim-border-stripe-bar::before {
animation: sl-pl-anim-stripe-anim 0.75s linear infinite;
-webkit-animation: sl-pl-anim-stripe-anim 0.75s linear infinite;
width: calc(100% + 35px);
}
html[dir*="rtl"] #sl-pl-anim-stripe-bar::before,
html[dir*="rtl"] #sl-pl-anim-border-stripe-bar::before {
animation: sl-pl-anim-stripe-anim-rtl 0.75s linear infinite;
-webkit-animation: sl-pl-anim-stripe-anim-rtl 0.75s linear infinite;
}
@-webkit-keyframes sl-pl-anim-stripe-anim {
0% {
-webkit-transform: translateX(-35px);
}
100% {
-webkit-transform: translateX(0);
}
}
@keyframes sl-pl-anim-stripe-anim {
0% {
transform: translateX(-35px);
}
100% {
transform: translateX(0);
}
}
@-webkit-keyframes sl-pl-anim-stripe-anim-rtl {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-35px);
}
}
@keyframes sl-pl-anim-stripe-anim-rtl {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-35px);
}
}
/* * * * * * * * * *
9.4 - cell
* * * * * * * * * */
#sl-pl-cell-bar,
#sl-pl-border-cell-bar {
mask: linear-gradient(90deg, #fff, #fff 60%, rgba(0, 0, 0, 0) 60.1%, rgba(0, 0, 0, 0));
-webkit-mask: linear-gradient(90deg, #fff, #fff 60%, rgba(0, 0, 0, 0) 60.1%, rgba(0, 0, 0, 0));
mask-size: 15px;
-webkit-mask-size: 15px;
}
/* * * * * * * * * *
9.5 - glassy
* * * * * * * * * */
#sl-pl-bulgy-bar::before,
#sl-pl-glassy-bar::before,
#sl-pl-border-bulgy-bar::before,
#sl-pl-border-glassy-bar::before {
background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 50.1%, rgba(0, 0, 0, 0.04));
border-radius: inherit;
content: "";
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
/* * * * * * * * * *
9.6 - bulgy
* * * * * * * * * */
#sl-pl-bulgy-bar::before,
#sl-pl-border-bulgy-bar::before {
background-image: linear-gradient(rgba(80, 62, 37, 0.4), rgba(251, 220, 135, 0.4) 49%, rgba(165, 141, 85, 0.4) 79%, rgba(80, 62, 36, 0.4));
}
/* * * * * * * * * *
9.7 - light move
* * * * * * * * * */
.sl-pl-light-move-bar {
animation: sl-pl-light-move-bar-anim 1.5s linear infinite;
-webkit-animation: sl-pl-light-move-bar-anim 1.5s linear infinite;
height: 100%;
position: absolute;
text-align: initial;
white-space: nowrap;
width: 100%;
}
html[dir*="rtl"] .sl-pl-light-move-bar {
animation: sl-pl-light-move-bar-anim-rtl 1.5s linear infinite;
-webkit-animation: sl-pl-light-move-bar-anim-rtl 1.5s linear infinite;
}
.sl-pl-light-move-bar::after {
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0));
content: "";
display: inline-block;
height: 100%;
position: absolute;
width: 150px;
}
@-webkit-keyframes sl-pl-light-move-bar-anim {
0% {
-webkit-transform: translateX(-150px);
}
80%, 100% {
-webkit-transform: translateX(100%);
}
}
@keyframes sl-pl-light-move-bar-anim {
0% {
transform: translateX(-150px);
}
80%, 100% {
transform: translateX(100%);
}
}
@-webkit-keyframes sl-pl-light-move-bar-anim-rtl {
0% {
-webkit-transform: translateX(150px);
}
80%, 100% {
-webkit-transform: translateX(-100%);
}
}
@keyframes sl-pl-light-move-bar-anim-rtl {
0% {
transform: translateX(150px);
}
80%, 100% {
transform: translateX(-100%);
}
}