.svg-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.overlay-to-front .svg-overlay {
z-index: 100;
}
.android-browser .svg-overlay {
display: none;
}
.svg-overlay.fixed {
position: fixed;
}
.svg-overlay.left {
top: 50%;
left: 0;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
}
.svg-overlay.right {
top: 50%;
right: 0;
left: auto;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
}
.svg-overlay.top {
top: 0;
left: 50%;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
}
.svg-overlay.bottom {
bottom: 0;
left: 50%;
top: auto;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
}
.svg-overlay.left-top {
top: 0;
left: 0;
transform: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
}
.svg-overlay.left-bottom {
bottom: 0;
left: 0;
top: auto;
transform: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
}
.svg-overlay.right-top {
top: 0;
right: 0;
left: auto;
transform: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
}
.svg-overlay.right-bottom {
bottom: 0;
right: 0;
top: auto;
left: auto;
transform: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
}
.preloader {
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
display: none;
}
.load-animation .preloader {
display: flex;
}
.ie9 .load-animation .preloader {
display: none;
}
.preloader .preloader-container {
width: 10rem;
height: 10rem;
background: transparent;
-webkit-box-flex: 1;
-webkit-flex: 1 1 1;
-ms-flex: 1 1 1;
flex: 1 1 1;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
-webkit-animation: animeThree 0.1s linear infinite;
animation: animeThree 0.1s linear infinite;
}
.preloader .preloader-container .circleOne {
background: transparent;
border: 1px solid;
width: 10rem;
height: 10rem;
border-radius: 50%;
-webkit-animation: animeOne 7.2s linear infinite;
animation: animeOne 7.2s linear infinite;
position: absolute;
}
.preloader .preloader-container .circleTwo {
background: transparent;
border: 1px solid;
width: 10rem;
height: 10rem;
border-radius: 50%;
-webkit-animation: animeTwo 7.2s linear infinite;
animation: animeTwo 7.2s linear infinite;
position: absolute;
}
.preloader .preloader-container .circleThree {
background: transparent;
border: 1px solid;
width: 10rem;
height: 10rem;
border-radius: 50%;
-webkit-animation: animeOne 4.8s linear infinite;
animation: animeOne 4.8s linear infinite;
position: absolute;
}
.preloader .preloader-container .circleFour {
background: transparent;
border: 1px solid;
width: 10rem;
height: 10rem;
border-radius: 50%;
-webkit-animation: animeTwo 4.8s linear infinite;
animation: animeTwo 4.8s linear infinite;
position: absolute;
}
.preloader .preloader-container .circleFive {
background: transparent;
border: 1px solid;
width: 10rem;
height: 10rem;
border-radius: 50%;
-webkit-animation: animeOne 2.4s linear infinite;
animation: animeOne 2.4s linear infinite;
position: absolute;
}
.preloader .preloader-container .circleSix {
background: transparent;
border: 1px solid;
width: 10rem;
height: 10rem;
border-radius: 50%;
-webkit-animation: animeTwo 2.4s linear infinite;
animation: animeTwo 2.4s linear infinite;
position: absolute;
}
.preloader-container:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes animeOne {
from {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 0.2;
}
to {
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
opacity: 0.6;
}
}
@keyframes animeOne {
from {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
opacity: 0.2;
}
to {
-webkit-transform: rotateX(360deg);
transform: rotateX(360deg);
opacity: 0.6;
}
}
@-webkit-keyframes animeTwo {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 0.2;
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
opacity: 0.6;
}
}
@keyframes animeTwo {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 0.2;
}
to {
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
opacity: 0.6;
}
}
@-webkit-keyframes animeThree {
from {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
to {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
@keyframes animeThree {
from {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
to {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
.flask {
width: 200px;
height: 230px;
}
.ie9 .flask {
display: none;
}
.flask .flask-fill {
transition: fill-opacity 0.3s;
}
.flask:hover .flask-fill {
fill-opacity: 0.7;
}
.flask.left-bottom {
margin: 0 0 45px 120px;
}
.flask svg {
overflow: hidden;
width: 200px;
height: 230px;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
.flask .background {
width: 197px;
height: 100px;
position: absolute;
z-index: 0;
bottom: 0;
left: 0;
-webkit-animation: liquid 3s infinite,liquid-color 80s infinite;
-moz-animation: liquid 3s infinite,liquid-color 80s infinite;
-ms-animation: liquid 3s infinite,liquid-color 80s infinite;
animation: liquid 3s infinite,liquid-color 80s infinite;
}
.android-browser-4_3minus .flask .background {
animation: none;
-webkit-animation: none;
}
.flask-bubbles.from-bottom {
margin-bottom: 180px;
margin-left: 40px;
}
.flask-bubbles.from-bottom.right-bottom {
right: 70px;
}
.flask-bubbles.additional {
margin-bottom: 180px;
margin-left: 600px;
}
.flask-bubbles.additional .b0 {
right: 40px;
}
.flask-bubbles.additional .b1 {
right: 50px;
}
.flask-bubbles.additional .b2 {
right: 60px;
}
.flask-bubbles.additional .b3 {
right: 70x;
}
.flask-bubbles.additional .b4 {
right: 90px;
}
.flask-bubbles.additional .b5 {
right: 100px;
}
.flask-bubbles.additional .b6 {
right: 110px;
}
.flask-bubbles.additional .b7 {
right: 120px;
}
.flask-bubbles.additional .b8 {
right: 130px;
}
.flask-bubbles.additional .b9 {
right: 140px;
}
.flask-bubbles .bubble {
width: 40px;
height: 40px;
border-radius: 40px;
position: absolute;
top: 190px;
}
.flask-bubbles .b1,
.flask-bubbles .b2,
.flask-bubbles .b3 {
right: 65px;
transform: scale(0.4);
opacity: 0.6;
-webkit-animation: bubble 8s linear infinite, side 2s ease-in-out infinite alternate;
-moz-animation: bubble 8s linear infinite, side 2s ease-in-out infinite alternate;
-ms-animation: bubble 8s linear infinite, side 2s ease-in-out infinite alternate;
animation: bubble 8s linear infinite, side 2s ease-in-out infinite alternate;
}
.android-browser-4_3minus .flask-bubbles .b1,
.android-browser-4_3minus .flask-bubbles .b2,
.android-browser-4_3minus .flask-bubbles .b3 {
animation: none;
-webkit-animation: none;
}
.flask-bubbles .b2 {
right: 70px;
transform: scale(0.5);
animation-delay: 2s,2s;
}
.flask-bubbles .b3 {
right: 75px;
animation-delay: 5s,5s;
-webkit-animation: bubble 10s linear infinite, side 3s ease-in-out infinite alternate;
-moz-animation: bubble 10s linear infinite, side 3s ease-in-out infinite alternate;
-ms-animation: bubble 10s linear infinite, side 3s ease-in-out infinite alternate;
animation: bubble 10s linear infinite, side 3s ease-in-out infinite alternate;
}
.android-browser-4_3minus .flask-bubbles .b3 {
animation: none;
-webkit-animation: none;
}
.flask-bubbles .b4,
.flask-bubbles .b5 {
right: 70px;
transform: scale(0.5);
opacity: 0.8;
-webkit-animation: bubble 16s linear infinite, side 5s ease-in-out infinite alternate;
-moz-animation: bubble 16s linear infinite, side 5s ease-in-out infinite alternate;
-ms-animation: bubble 16s linear infinite, side 5s ease-in-out infinite alternate;
animation: bubble 16s linear infinite, side 5s ease-in-out infinite alternate;
animation-delay: 4s,4s;
}
.android-browser-4_3minus .flask-bubbles .b4,
.android-browser-4_3minus .flask-bubbles .b5 {
animation: none;
-webkit-animation: none;
}
.flask-bubbles .b5 {
right: 60px;
animation-delay: 5s,5s;
}
.flask-bubbles .b6,
.flask-bubbles .b7,
.flask-bubbles .b8 {
right: 70px;
transform: scale(0.6);
opacity: 0.4;
-webkit-animation: bubble 14s linear infinite, side 3s ease-in-out infinite alternate;
-moz-animation: bubble 14s linear infinite, side 3s ease-in-out infinite alternate;
-ms-animation: bubble 14s linear infinite, side 3s ease-in-out infinite alternate;
animation: bubble 14s linear infinite, side 3s ease-in-out infinite alternate;
animation-delay: 9s,9s;
}
.android-browser-4_3minus .flask-bubbles .b6,
.android-browser-4_3minus .flask-bubbles .b7,
.android-browser-4_3minus .flask-bubbles .b8 {
animation: none;
-webkit-animation: none;
}
.flask-bubbles .b7 {
right: 75px;
transform: scale(0.7);
animation-delay: 3s,3s;
}
.flask-bubbles .b8 {
right: 70px;
animation-delay: 7s,7s;
}
.flask-bubbles .b9,
.flask-bubbles .b0 {
right: 75px;
transform: scale(0.65);
opacity: 0.7;
-webkit-animation: bubble 20s linear infinite, side 5s ease-in-out infinite alternate;
-moz-animation: bubble 20s linear infinite, side 5s ease-in-out infinite alternate;
-ms-animation: bubble 20s linear infinite, side 5s ease-in-out infinite alternate;
animation: bubble 20s linear infinite, side 5s ease-in-out infinite alternate;
}
.android-browser-4_3minus .flask-bubbles .b9,
.android-browser-4_3minus .flask-bubbles .b0 {
animation: none;
-webkit-animation: none;
}
.flask-bubbles .b0 {
right: 65px;
animation-delay: 13s,13s;
}
.flask-bubbles .swirl {
width: 20px;
height: 20px;
border-radius: 20px;
position: absolute;
top: 140px;
left: 80px;
}
.flask-bubbles .s0 {
-webkit-animation: swirl 1s ease-in-out infinite alternate;
-moz-animation: swirl 1s ease-in-out infinite alternate;
-ms-animation: swirl 1s ease-in-out infinite alternate;
animation: swirl 1s ease-in-out infinite alternate;
}
.android-browser-4_3minus .flask-bubbles .s0 {
animation: none;
-webkit-animation: none;
}
.flask-bubbles .s1 {
left: 100px;
transform: scale(1.2);
-webkit-animation: swirl 2s ease-in-out infinite alternate;
-moz-animation: swirl 2s ease-in-out infinite alternate;
-ms-animation: swirl 2s ease-in-out infinite alternate;
animation: swirl 2s ease-in-out infinite alternate;
animation-delay: 2s;
}
.android-browser-4_3minus .flask-bubbles .s1 {
animation: none;
-webkit-animation: none;
}
.flask-bubbles .s2 {
left: 40px;
transform: scale(0.8);
-webkit-animation: swirl 2s ease-in-out infinite alternate;
-moz-animation: swirl 2s ease-in-out infinite alternate;
-ms-animation: swirl 2s ease-in-out infinite alternate;
animation: swirl 2s ease-in-out infinite alternate;
animation-delay: 3s;
}
.android-browser-4_3minus .flask-bubbles .s2 {
animation: none;
-webkit-animation: none;
}
.flask-bubbles .s3 {
left: 60px;
transform: scale(1.4);
-webkit-animation: swirl 1s ease-in-out infinite alternate;
-moz-animation: swirl 1s ease-in-out infinite alternate;
-ms-animation: swirl 1s ease-in-out infinite alternate;
animation: swirl 1s ease-in-out infinite alternate;
animation-delay: 5s;
}
.android-browser-4_3minus .flask-bubbles .s3 {
animation: none;
-webkit-animation: none;
}
.flask-bubbles .s4 {
left: 120px;
-webkit-animation: swirl 2s ease-in-out infinite alternate;
-moz-animation: swirl 2s ease-in-out infinite alternate;
-ms-animation: swirl 2s ease-in-out infinite alternate;
animation: swirl 2s ease-in-out infinite alternate;
animation-delay: 3s;
}
.android-browser-4_3minus .flask-bubbles .s4 {
animation: none;
-webkit-animation: none;
}
.flask-bubbles .s5 {
left: 135px;
transform: scale(0.8);
-webkit-animation: swirl 1s ease-in-out infinite alternate;
-moz-animation: swirl 1s ease-in-out infinite alternate;
-ms-animation: swirl 1s ease-in-out infinite alternate;
animation: swirl 1s ease-in-out infinite alternate;
animation-delay: 2s;
}
.android-browser-4_3minus .flask-bubbles .s5 {
animation: none;
-webkit-animation: none;
}
@-webkit-keyframes liquid {
0% {
height: 74px;
}
10% {
height: 71px;
}
35% {
height: 74px;
}
50% {
height: 76px;
}
80% {
height: 72px;
}
100% {
height: 74px;
}
}
@-moz-keyframes liquid {
0% {
height: 74px;
}
10% {
height: 71px;
}
35% {
height: 74px;
}
50% {
height: 76px;
}
80% {
height: 72px;
}
100% {
height: 74px;
}
}
@-ms-keyframes liquid {
0% {
height: 74px;
}
10% {
height: 71px;
}
35% {
height: 74px;
}
50% {
height: 76px;
}
80% {
height: 72px;
}
100% {
height: 74px;
}
}
@-o-keyframes liquid {
0% {
height: 74px;
}
10% {
height: 71px;
}
35% {
height: 74px;
}
50% {
height: 76px;
}
80% {
height: 72px;
}
100% {
height: 74px;
}
}
@keyframes liquid {
0% {
height: 74px;
}
10% {
height: 71px;
}
35% {
height: 74px;
}
50% {
height: 76px;
}
80% {
height: 72px;
}
100% {
height: 74px;
}
}
.bubble-mixi 0% {
top: 190px;
}
.bubble-mixi 100% {
top: -200px;
opacity: 0;
}
@-webkit-keyframes bubble {
0% {
top: 190px;
}
100% {
top: -200px;
opacity: 0;
}
}
@-moz-keyframes bubble {
0% {
top: 190px;
}
100% {
top: -200px;
opacity: 0;
}
}
@-ms-keyframes bubble {
0% {
top: 190px;
}
100% {
top: -200px;
opacity: 0;
}
}
@-o-keyframes bubble {
0% {
top: 190px;
}
100% {
top: -200px;
opacity: 0;
}
}
@keyframes bubble {
0% {
top: 190px;
}
100% {
top: -200px;
opacity: 0;
}
}
@-webkit-keyframes side {
0% {
margin-right: 0px;
}
100% {
margin-right: 25px;
}
}
@-moz-keyframes side {
0% {
margin-right: 0px;
}
100% {
margin-right: 25px;
}
}
@-ms-keyframes side {
0% {
margin-right: 0px;
}
100% {
margin-right: 25px;
}
}
@-o-keyframes side {
0% {
margin-right: 0px;
}
100% {
margin-right: 25px;
}
}
@keyframes side {
0% {
margin-right: 0px;
}
100% {
margin-right: 25px;
}
}
@-webkit-keyframes swirl {
0% {
top: 140px;
}
100% {
top: 128px;
}
}
@-moz-keyframes swirl {
0% {
top: 140px;
}
100% {
top: 128px;
}
}
@-ms-keyframes swirl {
0% {
top: 140px;
}
100% {
top: 128px;
}
}
@-o-keyframes swirl {
0% {
top: 140px;
}
100% {
top: 128px;
}
}
@keyframes swirl {
0% {
top: 140px;
}
100% {
top: 128px;
}
}
@-webkit-keyframes light {
0% {
opacity: 0;
}
80% {
opacity: 0.4;
}
100% {
opacity: 0.4;
}
}
@keyframes light {
0% {
opacity: 0;
}
80% {
opacity: 0.4;
}
100% {
opacity: 0.4;
}
}
@-webkit-keyframes light-b {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
80% {
opacity: 0.36;
}
100% {
opacity: 0.36;
}
}
@keyframes light-b {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
80% {
opacity: 0.36;
}
100% {
opacity: 0.36;
}
}
@-webkit-keyframes light-c {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
80% {
opacity: 0.32;
}
100% {
opacity: 0.32;
}
}
@keyframes light-c {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
80% {
opacity: 0.32;
}
100% {
opacity: 0.32;
}
}
@-webkit-keyframes light-d {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
80% {
opacity: 0.24;
}
100% {
opacity: 0.24;
}
}
@keyframes light-d {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
80% {
opacity: 0.24;
}
100% {
opacity: 0.24;
}
}
@-webkit-keyframes sky {
0% {
opacity: 1;
}
100% {
opacity: 0.16;
}
}
@keyframes sky {
0% {
opacity: 0.4;
}
100% {
opacity: 0.15;
}
}
#light0 {
opacity: 0;
-webkit-animation: light 6s 1s infinite forwards alternate;
animation: light 6s 1s infinite forwards alternate;
}
#light-1,
#light1 {
opacity: 0;
-webkit-animation: light-b 6s 1s infinite forwards alternate;
animation: light-b 6s 1s infinite forwards alternate;
}
#light-2,
#light2 {
opacity: 0;
-webkit-animation: light-c 6s 1s infinite forwards alternate;
animation: light-c 6s 1s infinite forwards alternate;
}
#light3 {
opacity: 0;
-webkit-animation: light-d 6s 1s infinite forwards alternate;
animation: light-d 6s 1s infinite forwards alternate;
}
#sky {
opacity: 0.4;
-webkit-animation: sky 6s 1s infinite forwards alternate;
animation: sky 6s 1s infinite forwards alternate;
}
.fan {
width: 200px;
height: 200px;
margin: 0 0 20px -100px;
}
.fan svg {
width: 200px;
height: 200px;
}
.fan:hover svg {
-moz-animation-name: cubing;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-webkit-animation-name: cubing;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
animation-name: cubing;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.fan .upper {
width: 250px;
height: 250px;
-moz-animation-name: circle1;
-moz-animation-duration: 10s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-webkit-animation-name: circle1;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: circle1;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.ie9 .fan svg,
.ie10 .fan svg,
ie11 .fan svg,
.edge .fan svg {
animation-name: circle1;
animation-duration: 7s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.fan .lower {
width: 250px;
height: 250px;
-moz-animation-name: circle2;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-webkit-animation-name: circle2;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: circle2;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-webkit-keyframes cubing {
100% {
-webkit-transform: rotateY(360deg);
}
}
@keyframes cubing {
100% {
transform: rotateY(360deg);
}
}
@-moz-keyframes cubing {
100% {
-moz-transform: rotateY(360deg);
}
}
@-webkit-keyframes circle1 {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes circle1 {
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes circle1 {
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes circle2 {
100% {
-webkit-transform: rotate(-360deg);
}
}
@keyframes circle2 {
100% {
transform: rotate(-360deg);
}
}
@-moz-keyframes circle2 {
100% {
-moz-transform: rotate(-360deg);
}
}
.liquidness.bottom {
margin-left: -100px;
}
.liquidness-wrapper {
-webkit-filter: contrast(20);
-webkit-transform: scale(0.5);
height: 400px;
width: 400px;
-webkit-animation: spin 30s linear infinite;
}
.liquidness-wrapper div {
position: absolute;
border-radius: 200px;
}
.ballone {
width: 400px;
height: 400px;
-webkit-filter: blur(10px);
}
.balltwo {
width: 340px;
height: 340px;
-webkit-filter: blur(10px);
-webkit-transform: translate(30px, 30px);
}
.ballthree {
width: 280px;
height: 280px;
-webkit-filter: blur(10px);
-webkit-transform: translate(60px, 60px);
}
.ballfour {
width: 200px;
height: 200px;
-webkit-filter: blur(10px);
-webkit-transform: translate(100px, 100px);
}
.ballfour {
width: 160px;
height: 160px;
-webkit-filter: blur(10px);
-webkit-transform: translate(120px, 120px);
}
.warp li {
width: 40px;
height: 40px;
margin-top: 140px;
-webkit-filter: blur(20px);
position: absolute;
-webkit-transform: translate(120px, -15px);
}
.warp li:nth-of-type(1) {
-webkit-animation: grow 20s ease-in-out infinite alternate;
opacity: 0.6;
}
.warp li:nth-of-type(2) {
-webkit-animation: move 5s ease-in-out infinite alternate;
-webkit-transform: translateY(50px);
top: 0px;
}
.warp li:nth-of-type(3) {
-webkit-animation: move 5s ease-in-out infinite alternate-reverse;
-webkit-transform: translateY(50px);
top: 100px;
}
@-webkit-keyframes grow {
0% {
width: 40px;
height: 40px;
border-radius: 40px;
-webkit-transform: translate(120px, 100px);
}
80% {
width: 40px;
height: 40px;
border-radius: 40px;
-webkit-transform: translate(120px, 100px);
}
90% {
width: 200px;
height: 200px;
border-radius: 100px;
-webkit-transform: translate(120px, 100px);
}
95% {
width: 200px;
height: 200px;
border-radius: 100px;
-webkit-transform: translate(120px, 100px);
}
100% {
width: 600px;
height: 600px;
border-radius: 300px;
-webkit-transform: translate(-100px, -200px);
}
}
@-webkit-keyframes move {
0% {
-webkit-transform: translateX(-100px);
}
100% {
-webkit-transform: translateX(400px);
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: scale(0.5) rotate(0deg);
}
100% {
-webkit-transform: scale(0.5) rotate(360deg);
}
}
.arrow-scroll {
margin-bottom: 60px;
}
.arrow-scroll.right-bottom {
right: 80px;
}
.arrow-scroll .scroll-mouse {
transition: fill-opacity 0.3s;
}
.arrow-scroll:hover .scroll-mouse {
fill-opacity: 0.35;
}
.arrow-scroll .mouse-point {
-webkit-animation: mouse-anim 1.8s ease-in-out infinite;
-moz-animation: mouse-anim 1.8s ease-in-out infinite;
-ms-animation: mouse-anim 1.8s ease-in-out infinite;
animation: mouse-anim 1.8s ease-in-out infinite;
animation-delay: 0.3s;
}
.android-browser-4_3minus .arrow-scroll .mouse-point {
animation: none;
-webkit-animation: none;
}
.arrow-scroll .mouse-arrow {
-webkit-animation: mouse-anim 1.8s ease-in-out infinite;
-moz-animation: mouse-anim 1.8s ease-in-out infinite;
-ms-animation: mouse-anim 1.8s ease-in-out infinite;
animation: mouse-anim 1.8s ease-in-out infinite;
}
.android-browser-4_3minus .arrow-scroll .mouse-arrow {
animation: none;
-webkit-animation: none;
}
@media (max-width: 991px) {
.arrow-scroll {
display: none;
}
}
@media (max-height: 684px) {
.arrow-scroll {
margin-bottom: 38px;
}
}
@media (max-height: 662px) {
.arrow-scroll {
display: none;
}
}
@-webkit-keyframes mouse-anim {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(4px);
}
100% {
transform: translateY(0px);
}
}
@-moz-keyframes mouse-anim {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(4px);
}
100% {
transform: translateY(0px);
}
}
@-ms-keyframes mouse-anim {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(4px);
}
100% {
transform: translateY(0px);
}
}
@-o-keyframes mouse-anim {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(4px);
}
100% {
transform: translateY(0px);
}
}
@keyframes mouse-anim {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(4px);
}
100% {
transform: translateY(0px);
}
}