io.parrots
Version:
Parrots.io App
1,196 lines (1,155 loc) • 34.3 kB
text/less
// Star
@keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
@-webkit-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
@-moz-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
@-ms-keyframes move-twink-back {
from {
background-position: 0 0;
}
to {
background-position: -10000px 5000px;
}
}
@keyframes move-clouds-back {
from {
background-position: 0 0;
}
to {
background-position: 10000px 0;
}
}
@-webkit-keyframes move-clouds-back {
from {
background-position: 0 0;
}
to {
background-position: 10000px 0;
}
}
@-moz-keyframes move-clouds-back {
from {
background-position: 0 0;
}
to {
background-position: 10000px 0;
}
}
@-ms-keyframes move-clouds-back {
from {
background-position: 0;
}
to {
background-position: 10000px 0;
}
}
// Parrots
@-webkit-keyframes movewingp {
20% {
transform: rotate(-50deg);
}
23% {
transform: rotate(-80deg);
}
26% {
transform: rotate(-50deg);
}
29% {
transform: rotate(-50deg);
}
32% {
transform: rotate(-80deg);
}
35% {
transform: rotate(-50deg);
}
38% {
transform: rotate(-50deg);
}
42% {
transform: rotate(-80deg);
}
45% {
transform: rotate(-50deg);
}
80% {
transform: rotate(-50deg);
}
83% {
transform: rotate(-80deg);
}
86% {
transform: rotate(-50deg);
}
}
@keyframes movewingp {
20% {
transform: rotate(-50deg);
}
23% {
transform: rotate(-80deg);
}
26% {
transform: rotate(-50deg);
}
29% {
transform: rotate(-50deg);
}
32% {
transform: rotate(-80deg);
}
35% {
transform: rotate(-50deg);
}
38% {
transform: rotate(-50deg);
}
42% {
transform: rotate(-80deg);
}
45% {
transform: rotate(-50deg);
}
80% {
transform: rotate(-50deg);
}
83% {
transform: rotate(-80deg);
}
86% {
transform: rotate(-50deg);
}
}
@-webkit-keyframes movewings {
20% {
transform: rotate(-75deg);
}
23% {
transform: rotate(-105deg);
}
26% {
transform: rotate(-75deg);
}
29% {
transform: rotate(-75deg);
}
32% {
transform: rotate(-105deg);
}
35% {
transform: rotate(-75deg);
}
38% {
transform: rotate(-75deg);
}
42% {
transform: rotate(-105deg);
}
45% {
transform: rotate(-75deg);
}
80% {
transform: rotate(-75deg);
}
83% {
transform: rotate(-105deg);
}
86% {
transform: rotate(-75deg);
}
}
@keyframes movewings {
20% {
transform: rotate(-75deg);
}
23% {
transform: rotate(-105deg);
}
26% {
transform: rotate(-75deg);
}
29% {
transform: rotate(-75deg);
}
32% {
transform: rotate(-105deg);
}
35% {
transform: rotate(-75deg);
}
38% {
transform: rotate(-75deg);
}
42% {
transform: rotate(-105deg);
}
45% {
transform: rotate(-75deg);
}
80% {
transform: rotate(-75deg);
}
83% {
transform: rotate(-105deg);
}
86% {
transform: rotate(-75deg);
}
}
@-webkit-keyframes movewingt {
20% {
transform: rotate(-100deg);
}
23% {
transform: rotate(-130deg);
}
26% {
transform: rotate(-100deg);
}
29% {
transform: rotate(-100deg);
}
32% {
transform: rotate(-130deg);
}
35% {
transform: rotate(-100deg);
}
38% {
transform: rotate(-100deg);
}
42% {
transform: rotate(-130deg);
}
45% {
transform: rotate(-100deg);
}
80% {
transform: rotate(-100deg);
}
83% {
transform: rotate(-130deg);
}
86% {
transform: rotate(-100deg);
}
}
@keyframes movewingt {
20% {
transform: rotate(-100deg);
}
23% {
transform: rotate(-130deg);
}
26% {
transform: rotate(-100deg);
}
29% {
transform: rotate(-100deg);
}
32% {
transform: rotate(-130deg);
}
35% {
transform: rotate(-100deg);
}
38% {
transform: rotate(-100deg);
}
42% {
transform: rotate(-130deg);
}
45% {
transform: rotate(-100deg);
}
80% {
transform: rotate(-100deg);
}
83% {
transform: rotate(-130deg);
}
86% {
transform: rotate(-100deg);
}
}
@keyframes shadow {
20% {
height: 58.5px;
}
23% {
height: 57.5px;
}
26% {
height: 58.5px;
}
29% {
height: 58.5px;
}
32% {
height: 57.5px;
}
35% {
height: 58.5px;
}
38% {
height: 58.5px;
}
42% {
height: 57.5px;
}
45% {
height: 58.5px;
}
80% {
height: 58.5px;
}
83% {
height: 57.5px;
}
86% {
height: 58.5px;
}
}
@-webkit-keyframes shadow {
20% {
height: 58.5px;
}
23% {
height: 57.5px;
}
26% {
height: 58.5px;
}
29% {
height: 58.5px;
}
32% {
height: 57.5px;
}
35% {
height: 58.5px;
}
38% {
height: 58.5px;
}
42% {
height: 57.5px;
}
45% {
height: 58.5px;
}
80% {
height: 58.5px;
}
83% {
height: 57.5px;
}
86% {
height: 58.5px;
}
}
@keyframes moveparrot {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
@-webkit-keyframes moveparrot {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
// Earth
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgb(30, 47, 73);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgb(38, 58, 91);
box-shadow: 0 0 0 10px rgb(38, 58, 91);
}
100% {
-moz-box-shadow: 0 0 0 0 rgb(38, 58, 91);
box-shadow: 0 0 0 0 rgb(38, 58, 91);
}
}
//Shooting Star
@keyframes particleAnimation {
from {
left: -100px;
}
to {
left: calc( 100% + 100px);
}
}
.app-preload-page {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #f6f6f6;
.stars,
.twinkling,
.clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: #000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
}
.twinkling {
background: transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
z-index: 1;
-moz-animation: move-twink-back 200s linear infinite;
-ms-animation: move-twink-back 200s linear infinite;
-o-animation: move-twink-back 200s linear infinite;
-webkit-animation: move-twink-back 200s linear infinite;
animation: move-twink-back 200s linear infinite;
}
.clouds {
background: transparent url(http://www.script-tutorials.com/demos/360/images/clouds3.png) repeat top center;
z-index: 3;
-moz-animation: move-clouds-back 200s linear infinite;
-ms-animation: move-clouds-back 200s linear infinite;
-o-animation: move-clouds-back 200s linear infinite;
-webkit-animation: move-clouds-back 200s linear infinite;
animation: move-clouds-back 200s linear infinite;
}
@keyframes moveparrot-up-down {
0% {
top: 35%;
left: 41.5%;
}
25% {
top: 30%;
left: 43.5%;
}
50% {
top: 37%;
left: 45.5%;
}
75% {
top: 30%;
left: 43.5%;
}
100% {
top: 35%;
left: 41.5%;
}
}
>.wrapper-parrot {
top: 25%;
left: 40.5%;
width: 200px;
height: 200px;
position: relative;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-animation: moveparrot-up-down 7s infinite;
-o-animation: moveparrot-up-down 7s infinite;
animation: moveparrot-up-down 7s infinite;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
// -webkit-transform-origin: 100% 100%;
// -ms-transform-origin: 100% 100%;
// transform-origin: 100% 100%;
// -webkit-animation: moveparrot 7s infinite;
// -o-animation: moveparrot 7s infinite;
// animation: moveparrot 7s infinite;
// -webkit-animation-timing-function: linear;
// -o-animation-timing-function: linear;
// animation-timing-function: linear;
z-index: 1;
>.parrot {
width: 110px;
height: 120px;
min-width: 110px;
min-height: 120px;
position: relative;
transform: rotate(13deg);
>.header {
position: absolute;
width: 45px;
height: 45px;
border-radius: 50%;
right: 9px;
transform: rotate(-35deg);
z-index: 11;
top: -3px;
>.face {
position: absolute;
width: 45px;
height: 45px;
border-radius: 50%;
right: 0px;
background-color: white;
background: linear-gradient( to right,
rgba(240, 240, 240, 1) 0%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 0) 51%,
rgba(255, 255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff",
endColorstr="#00ffffff",
GradientType=1);
z-index: 20;
}
>.eye {
position: absolute;
left: 5px;
top: 50%;
margin-top: -12.5px;
width: 12.5px;
height: 12.5px;
background-color: #4f4f4f;
border-radius: 50%;
z-index: 100;
}
>.white-eye {
position: absolute;
left: 7px;
top: 35%;
margin-top: -3.25px;
width: 5px;
height: 5px;
background-color: #ffffff;
border-radius: 50%;
z-index: 100;
}
>.peakt {
width: 50px;
height: 55px;
position: absolute;
right: -8px;
border-radius: 50%;
background: linear-gradient( to bottom,
rgba(241, 236, 77, 1) 0%,
rgba(241, 215, 77, 1) 7%,
rgba(243, 193, 62, 1) 26%,
rgba(233, 176, 62, 1) 39%,
rgba(233, 167, 62, 1) 47%,
rgba(215, 144, 59, 1) 50%,
rgba(241, 185, 77, 0) 51%,
rgba(255, 255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1b94d",
endColorstr="#00ffffff",
GradientType=0);
}
>.peakf {
width: 35px;
height: 35px;
position: absolute;
right: 6px;
border-radius: 50%;
background: linear-gradient( to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(240, 154, 57, 0) 49%,
rgba(217, 126, 53, 1) 50%,
rgba(224, 137, 53, 1) 76%,
rgba(240, 152, 53, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00ffffff",
endColorstr="#f09835",
GradientType=0);
bottom: 0;
z-index: 10;
}
}
>.body {
position: absolute;
top: 0px;
z-index: 10;
width: 37.5px;
background-color: #18a47e;
background-color: rgba(255, 76, 76, 1);
border-radius: 200px 0px;
right: 27.5px;
height: 45px;
>.wing1,
>.wing2,
>.wing3,
.shadowing {
position: absolute;
border-radius: 61%;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
/* FF3.6+ */
/* Chrome,Safari4+ */
/* Chrome10+,Safari5.1+ */
/* Opera 11.10+ */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQxJSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* IE10+ */
background: linear-gradient( to right,
rgba(255, 76, 76, 1) 0%,
rgba(239, 62, 68, 1) 17%,
rgba(225, 52, 65, 1) 40%,
rgba(24, 164, 126, 0) 41%,
rgba(255, 255, 255, 0) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#18a47e",
endColorstr="#00ffffff",
GradientType=1);
/* IE6-8 */
transform: rotate(-60deg);
z-index: 200;
}
>.wing1 {
z-index: 11;
height: 65px;
width: 50px;
/* top: -12.5px;
right: 15px; */
/* new */
top: -24.5px;
right: -2px;
transform: rotate(-50deg);
-webkit-transform-origin: 80% 80%;
-ms-transform-origin: 80% 80%;
transform-origin: 80% 80%;
-webkit-animation: movewingp 3s infinite;
-o-animation: movewingp 3s infinite;
animation: movewingp 3s infinite;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
>.wing2 {
z-index: 111;
height: 65px;
width: 50px;
/* top: 2.5px;
right: 12.5px; */
/* new */
top: -28.5px;
right: 4.5px;
transform: rotate(-75deg);
-webkit-transform-origin: 80% 80%;
-ms-transform-origin: 80% 80%;
transform-origin: 80% 80%;
-webkit-animation: movewings 3s infinite;
-o-animation: movewings 3s infinite;
animation: movewings 3s infinite;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
>.wing3 {
z-index: 11;
height: 65px;
width: 50px;
/* top: 13px;
right: 7px; */
/* new */
top: -25px;
right: 10px;
transform: rotate(-100deg);
-webkit-transform-origin: 80% 80%;
-ms-transform-origin: 80% 80%;
transform-origin: 80% 80%;
-webkit-animation: movewingt 3s infinite;
-o-animation: movewingt 3s infinite;
animation: movewingt 3s infinite;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
>.shadowing {
z-index: 1;
height: 57.5px;
width: 49px;
/* top: 21.5px;
right: 4.011px; */
/* new */
top: -17.5px;
right: 11.011px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIwOGU3MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIxJSIgc3RvcC1jb2xvcj0iIzIwOGU3MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzIwOGU3MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQxJSIgc3RvcC1jb2xvcj0iIzIwOGU3MSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient( left,
rgba(191, 44, 44, 1) 0%,
rgba(191, 44, 44, 1) 21%,
rgba(191, 44, 44, 1) 40%,
rgba(32, 142, 113, 0) 41%,
rgba(255, 255, 255, 0) 100%);
/* FF3.6+ */
background: -webkit-gradient( linear,
left top,
right top,
rgba(191, 44, 44, 1) 0%,
rgba(191, 44, 44, 1) 21%,
rgba(191, 44, 44, 1) 40%,
color-stop(41%, rgba(32, 142, 113, 0)),
color-stop(100%, rgba(255, 255, 255, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient( left,
rgba(191, 44, 44, 1) 0%,
rgba(191, 44, 44, 1) 21%,
rgba(191, 44, 44, 1) 40%,
rgba(32, 142, 113, 0) 41%,
rgba(255, 255, 255, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient( left,
rgba(191, 44, 44, 1) 0%,
rgba(191, 44, 44, 1) 21%,
rgba(191, 44, 44, 1) 40%,
rgba(32, 142, 113, 0) 41%,
rgba(255, 255, 255, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient( left,
rgba(191, 44, 44, 1) 0%,
rgba(191, 44, 44, 1) 21%,
rgba(191, 44, 44, 1) 40%,
rgba(32, 142, 113, 0) 41%,
rgba(255, 255, 255, 0) 100%);
/* IE10+ */
background: linear-gradient( to right,
rgba(191, 44, 44, 1) 0%,
rgba(191, 44, 44, 1) 21%,
rgba(191, 44, 44, 1) 40%,
rgba(255, 255, 255, 0) 41%,
rgba(255, 255, 255, 0) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#208e71",
endColorstr="#00ffffff",
GradientType=1);
transform: rotate(-110deg);
/* IE6-8 */
-webkit-transform-origin: 80% 80%;
-ms-transform-origin: 80% 80%;
transform-origin: 80% 80%;
-webkit-animation: shadow 3s infinite;
-o-animation: shadow 3s infinite;
animation: shadow 3s infinite;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
}
>.foot {
position: absolute;
width: 82.5px;
height: 77.5px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzFkYTY4MSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOGE0N2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(255, 76, 76, 1) 50%,
rgba(255, 76, 76, 1) 76%,
rgba(255, 76, 76, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient( linear,
left top,
left bottom,
color-stop(0%, rgba(255, 255, 255, 0)),
color-stop(49%, rgba(29, 166, 129, 0)),
color-stop(50%, rgba(224, 64, 64, 1)),
color-stop(76%, rgba(231, 75, 75, 1)),
color-stop(100%, rgba(255, 99, 98, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(224, 64, 64, 1) 50%,
rgba(231, 75, 75, 1) 76%,
rgba(255, 99, 98, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(224, 64, 64, 1) 50%,
rgba(231, 75, 75, 1) 76%,
rgba(255, 99, 98, 1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(224, 64, 64, 1) 50%,
rgba(231, 75, 75, 1) 76%,
rgba(255, 99, 98, 1) 100%);
/* IE10+ */
background: linear-gradient( to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 128, 0) 49%,
rgba(224, 64, 64, 1) 50%,
rgba(231, 75, 75, 1) 76%,
rgba(255, 99, 98, 1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00ffffff",
endColorstr="#18a47e",
GradientType=0);
border-radius: 50%;
left: 2px;
transform: rotate(-65deg);
z-index: 8;
top: 15px;
/* IE6-8 */
}
>.tail1 {
position: absolute;
width: 40px;
height: 30px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzFkYTY4MSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOGE0N2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(225, 110, 4, 1) 50%,
rgba(225, 110, 4, 1) 76%,
rgba(225, 110, 4, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient( linear,
left top,
left bottom,
color-stop(0%, rgba(255, 255, 255, 0)),
color-stop(49%, rgba(29, 166, 129, 0)),
color-stop(50%, rgba(225, 110, 4, 1)),
color-stop(76%, rgba(225, 110, 4, 1)),
color-stop(100%, rgba(225, 110, 4, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(225, 110, 4, 1) 50%,
rgba(225, 110, 4, 1) 76%,
rgba(225, 110, 4, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(225, 110, 4, 1) 50%,
rgba(225, 110, 4, 1) 76%,
rgba(225, 110, 4, 1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(225, 110, 4, 1) 50%,
rgba(225, 110, 4, 1) 76%,
rgba(225, 110, 4, 1) 100%);
/* IE10+ */
background: linear-gradient( to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 128, 0) 49%,
rgba(225, 110, 4, 1) 50%,
rgba(225, 110, 4, 1) 76%,
rgba(225, 110, 4, 1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=".00ffffff",
endColorstr="#18a47e",
GradientType=0);
border-radius: 50%;
left: 9px;
transform: rotate(-65deg);
bottom: 21.5px;
/* IE6-8 */
}
>.tail2 {
position: absolute;
width: 40px;
height: 40px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzFkYTY4MSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOGE0N2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(255, 145, 14, 1) 50%,
rgba(255, 145, 14, 1) 76%,
rgba(255, 145, 14, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient( linear,
left top,
left bottom,
color-stop(0%, rgba(255, 255, 255, 0)),
color-stop(49%, rgba(29, 166, 129, 0)),
color-stop(50%, rgba(255, 145, 14, 1)),
color-stop(76%, rgba(255, 145, 14, 1)),
color-stop(100%, rgba(255, 145, 14, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(255, 145, 14, 1) 50%,
rgba(255, 145, 14, 1) 76%,
rgba(255, 145, 14, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(255, 145, 14, 1) 50%,
rgba(255, 145, 14, 1) 76%,
rgba(255, 145, 14, 1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(255, 145, 14, 1) 50%,
rgba(255, 145, 14, 1) 76%,
rgba(255, 145, 14, 1) 100%);
/* IE10+ */
background: linear-gradient( to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 128, 0) 49%,
rgba(255, 145, 14, 1) 50%,
rgba(255, 145, 14, 1) 76%,
rgba(255, 145, 14, 1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00ffffff",
endColorstr="#18a47e",
GradientType=0);
border-radius: 50%;
left: 12.5px;
transform: rotate(-85deg);
bottom: 15px;
/* IE6-8 */
}
>.tail3 {
position: absolute;
width: 40px;
height: 40px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzFkYTY4MSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc2JSIgc3RvcC1jb2xvcj0iIzE4YTQ3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOGE0N2UiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(255, 209, 35, 1) 50%,
rgba(255, 209, 35, 1) 76%,
rgba(255, 209, 35, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient( linear,
left top,
left bottom,
color-stop(0%, rgba(255, 255, 255, 0)),
color-stop(49%, rgba(29, 166, 129, 0)),
color-stop(50%, rgba(255, 209, 35, 1)),
color-stop(76%, rgba(255, 209, 35, 1)),
color-stop(100%, rgba(255, 209, 35, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(255, 209, 35, 1) 50%,
rgba(255, 209, 35, 1) 76%,
rgba(255, 209, 35, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(255, 209, 35, 1) 50%,
rgba(255, 209, 35, 1) 76%,
rgba(255, 209, 35, 1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient( top,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 129, 0) 49%,
rgba(255, 209, 35, 1) 50%,
rgba(255, 209, 35, 1) 76%,
rgba(255, 209, 35, 1) 100%);
/* IE10+ */
background: linear-gradient( to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(29, 166, 128, 0) 49%,
rgba(255, 209, 35, 1) 50%,
rgba(255, 209, 35, 1) 76%,
rgba(255, 209, 35, 1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00ffffff",
endColorstr="#18a47e",
GradientType=0);
border-radius: 50%;
left: 19.5px;
transform: rotate(-95deg);
bottom: 15.5px;
/* IE6-8 */
/* IE6-8 */
}
}
}
>.earth {
border-radius: 50%;
width: 200px;
height: 200px;
background: transparent;
background-image: url(https://pre00.deviantart.net/384e/th/pre/i/2016/034/4/5/earth___adobe_illustrator__hd__by_shaddow24-d9qcch8.png);
background-size: contain;
z-index: 1;
margin: 0 auto;
position: relative;
right: 5.5%;
top: 35%;
animation: pulse 2s infinite;
}
div {
>.shooting-star {
position: fixed;
left: 0px;
top: 50px;
width: 1px;
height: 1px;
background-color: white;
animation-name: particleAnimation;
animation-timing-function: linear;
animation-iteration-count: infinite;
z-index: 1;
}
>.shooting-star::before {
position: absolute;
display: block;
content: "";
width: 100px;
right: 1px;
top: 0px;
height: 1px;
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
}
>.shooting-star-1 {
animation-duration: 10s;
}
>.shooting-star-2 {
animation-duration: 5s;
top: 60%;
}
>.shooting-star-3 {
animation-duration: 20s;
top: 90%;
}
}
}
.wrapper-page-left-preload {
.wrapper-page-left();
z-index: 3;
>.menu-left-preload {
.wrapper-under-line(72pt);
align-items: center;
cursor: unset;
>.img-preload {
.img-proload();
margin-left: 7%;
}
>.wrapper-title-description-preload {
display: inline-block;
padding-left: 5%;
>.label-title-preload {
.text-preload();
}
>.label-description-preload {
.text-preload(190px, 8pt, extract(@CLR_1, 7));
margin-top: 5pt;
}
}
}
}
.wrapper-menu-page-internal-preload {
.wrapper-under-line(72pt);
position: absolute;
cursor: unset;
box-shadow: 0px 2px 4px extract(@CLR_1, 6);
align-items: center;
z-index: 2;
>.link-preload {
.text-preload(100px, 28pt);
margin-left: 5%;
}
}
.post {
width: 100%;
max-width: 478px;
height: 300px;
padding: 12px;
margin-bottom: 10px;
color: #141823;
background: #fff;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
border-radius: 3px;
}
.preloader {
display: block;
position: relative;
height: 100%;
background: #f6f7f8;
background-image: -webkit-gradient( linear, left center, right center, from(#f6f7f8), color-stop(.2, #edeef1), color-stop(.4, #f6f7f8), to(#f6f7f8));
background-image: -webkit-linear-gradient( left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
background-repeat: no-repeat;
background-size: 800px 100%;
animation: placeHolderShimmer 1s linear infinite forwards;
> * {
background: transparent;
position: relative;
margin: 0 auto;
width: 100%;
overflow: hidden;
&:after {
content: '';
position: absolute;
border: 500px solid #fff;
width: 100%;
}
}
.loader-circle {
height: 200px;
&:after {
left: -325px;
top: -475px;
border-radius: 100%;
width: 150px;
height: 150px;
}
}
.loader-bar {
height: 40px;
&:after {
left: -85%;
top: -485px;
border-radius: 1500px;
height: 10px;
width: 60%;
}
}
.filler{
height: 20px;
background: #fff;
}
}
@-webkit-keyframes placeHolderShimmer {
0% {
background-position: -468px 0
}
100% {
background-position: 468px 0
}
}