body{
overflow:hidden;
width:100%;
height:100%;
}

*,*:before,*:after{
box-sizing:border-box;
margin:0;
padding:0}

.rotateImg180XY{
-webkit-transform:rotateX(180deg) rotateY(180deg);
-moz-transform:rotateX(180deg) rotateY(180deg);
-ms-transform:rotateX(180deg) rotateY(180deg);
-o-transform:rotateX(180deg) rotateY(180deg);
transform:rotateX(180deg rotateY(180deg))}

.rotateImg180Y{
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg))}

.demo{
overflow:hidden;
position:absolute;
background-color:none;
height:11%;
width:50%;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-o-box;
display:box;
display:flex;
-webkit-box-align:center;
-moz-box-align:center;
-ms-box-align:center;
-o-box-align:center;
align:center;
align-items:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-ms-box-pack:center;
-o-box-pack:center;
box-pack:center;
justify-content:center}

.demo:nth-of-type(1){
top:5vw;

}

.demo:nth-of-type(2){
top:37.5vw;

}

.demo:nth-of-type(3){
top:5vw;

}

.demo:nth-of-type(4){
top:37.5vw;

}

.demo-Left{
left:-24vw;

}

.demo-Right{
right:-24vw;

}

.demo__loader{
width:33vw;
height:auto;
-webkit-animation:scale 5s ease infinite;
-moz-animation:scale 5s ease infinite;
-ms-animation:scale 5s ease infinite;
-o-animation:scale 5s ease infinite;
animation:scale 5s ease infinite}

.demo__wave{
stroke:url("#gradient1");
stroke-width:.2vw;
-webkit-transform-origin:0% 50%;
-moz-transform-origin:0% 50%;
-ms-transform-origin:0% 50%;
-o-transform-origin:0% 50%;
transform-origin:0% 50%}

.demo__wave:nth-child(2){
-webkit-animation:rotate 2809ms linear infinite;
-moz-animation:rotate 2809ms linear infinite;
-ms-animation:rotate 2809ms linear infinite;
-o-animation:rotate 2809ms linear infinite;
animation:rotate 2809ms linear infinite;
stroke:url("#gradient1")}

.demo__wave:nth-child(3){
-webkit-animation:rotate 2640ms linear infinite;
-moz-animation:rotate 2640ms linear infinite;
-ms-animation:rotate 2640ms linear infinite;
-o-animation:rotate 2640ms linear infinite;
animation:rotate 2640ms linear infinite;
stroke:url("#gradient2")}

.demo__wave:nth-child(4){
-webkit-animation:rotate 2805ms linear infinite;
-moz-animation:rotate 2805ms linear infinite;
-ms-animation:rotate 2805ms linear infinite;
-o-animation:rotate 2805ms linear infinite;
animation:rotate 2805ms linear infinite;
stroke:url("#gradient2")}

.demo__wave:nth-child(5){
-webkit-animation:rotate 3372ms linear infinite;
-moz-animation:rotate 3372ms linear infinite;
-ms-animation:rotate 3372ms linear infinite;
-o-animation:rotate 3372ms linear infinite;
animation:rotate 3372ms linear infinite;
stroke:url("#gradient1")}

.demo__wave:nth-child(6){
-webkit-animation:rotate 3673ms linear infinite;
-moz-animation:rotate 3673ms linear infinite;
-ms-animation:rotate 3673ms linear infinite;
-o-animation:rotate 3673ms linear infinite;
animation:rotate 3673ms linear infinite;
stroke:url("#gradient2")}

.demo__wave:nth-child(7){
-webkit-animation:rotate 3496ms linear infinite;
-moz-animation:rotate 3496ms linear infinite;
-ms-animation:rotate 3496ms linear infinite;
-o-animation:rotate 3496ms linear infinite;
animation:rotate 3496ms linear infinite;
stroke:url("#gradient1")}

.demo__wave:nth-child(8){
-webkit-animation:rotate 3554ms linear infinite;
-moz-animation:rotate 3554ms linear infinite;
-ms-animation:rotate 3554ms linear infinite;
-o-animation:rotate 3554ms linear infinite;
animation:rotate 3554ms linear infinite;
stroke:url("#gradient2")}

.demo__wave:nth-child(9){
-webkit-animation:rotate 3088ms linear infinite;
-moz-animation:rotate 3088ms linear infinite;
-ms-animation:rotate 3088ms linear infinite;
-o-animation:rotate 3088ms linear infinite;
animation:rotate 3088ms linear infinite;
stroke:url("#gradient2")}

.demo__wave:nth-child(10){
-webkit-animation:rotate 2768ms linear infinite;
-moz-animation:rotate 2768ms linear infinite;
-ms-animation:rotate 2768ms linear infinite;
-o-animation:rotate 2768ms linear infinite;
animation:rotate 2768ms linear infinite;
stroke:url("#gradient1")}

.demo__wave:nth-child(11){
-webkit-animation:rotate 3864ms linear infinite;
-moz-animation:rotate 3864ms linear infinite;
-ms-animation:rotate 3864ms linear infinite;
-o-animation:rotate 3864ms linear infinite;
animation:rotate 3864ms linear infinite;
stroke:url("#gradient1")}

.demo__wave:nth-child(12){
-webkit-animation:rotate 3576ms linear infinite;
-moz-animation:rotate 3576ms linear infinite;
-ms-animation:rotate 3576ms linear infinite;
-o-animation:rotate 3576ms linear infinite;
animation:rotate 3576ms linear infinite;
stroke:url("#gradient3")}

.demo__wave:nth-child(13){
-webkit-animation:rotate 4067ms linear infinite;
-moz-animation:rotate 4067ms linear infinite;
-ms-animation:rotate 4067ms linear infinite;
-o-animation:rotate 4067ms linear infinite;
animation:rotate 4067ms linear infinite;
stroke:url("#gradient1")}

.demo__wave:nth-child(14){
-webkit-animation:rotate 4481ms linear infinite;
-moz-animation:rotate 4481ms linear infinite;
-ms-animation:rotate 4481ms linear infinite;
-o-animation:rotate 4481ms linear infinite;
animation:rotate 4481ms linear infinite;
stroke:url("#gradient3")}

.demo__wave:nth-child(15){
-webkit-animation:rotate 5249ms linear infinite;
-moz-animation:rotate 5249ms linear infinite;
-ms-animation:rotate 5249ms linear infinite;
-o-animation:rotate 5249ms linear infinite;
animation:rotate 5249ms linear infinite;
stroke:url("#gradient3")}

.demo__wave:nth-child(16){
-webkit-animation:rotate 4503ms linear infinite;
-moz-animation:rotate 4503ms linear infinite;
-ms-animation:rotate 4503ms linear infinite;
-o-animation:rotate 4503ms linear infinite;
animation:rotate 4503ms linear infinite;
stroke:url("#gradient3")}

.demo__wave:nth-child(17){
-webkit-animation:rotate 5857ms linear infinite;
-moz-animation:rotate 5857ms linear infinite;
-ms-animation:rotate 5857ms linear infinite;
-o-animation:rotate 5857ms linear infinite;
animation:rotate 5857ms linear infinite;
stroke:url("#gradient1")}

.demo__wave:nth-child(18){
-webkit-animation:rotate 5754ms linear infinite;
-moz-animation:rotate 5754ms linear infinite;
-ms-animation:rotate 5754ms linear infinite;
-o-animation:rotate 5754ms linear infinite;
animation:rotate 5754ms linear infinite;
stroke:url("#gradient2")}

.demo__wave:nth-child(19){
-webkit-animation:rotate 3380ms linear infinite;
-moz-animation:rotate 3380ms linear infinite;
-ms-animation:rotate 3380ms linear infinite;
-o-animation:rotate 3380ms linear infinite;
animation:rotate 3380ms linear infinite;
stroke:url("#gradient1")}

.demo__wave:nth-child(20){
-webkit-animation:rotate 5803ms linear infinite;
-moz-animation:rotate 5803ms linear infinite;
-ms-animation:rotate 5803ms linear infinite;
-o-animation:rotate 5803ms linear infinite;
animation:rotate 5803ms linear infinite;
stroke:url("#gradient3")}

.demo__wave:nth-child(21){
-webkit-animation:rotate 5986ms linear infinite;
-moz-animation:rotate 5986ms linear infinite;
-ms-animation:rotate 5986ms linear infinite;
-o-animation:rotate 5986ms linear infinite;
animation:rotate 5986ms linear infinite;
stroke:url("#gradient1")}

.demo__wave:nth-child(22){
-webkit-animation:rotate 4361ms linear infinite;
-moz-animation:rotate 4361ms linear infinite;
-ms-animation:rotate 4361ms linear infinite;
-o-animation:rotate 4361ms linear infinite;
animation:rotate 4361ms linear infinite;
stroke:url("#gradient2")}

.demo__wave:nth-child(23){
-webkit-animation:rotate 5519ms linear infinite;
-moz-animation:rotate 5519ms linear infinite;
-ms-animation:rotate 5519ms linear infinite;
-o-animation:rotate 5519ms linear infinite;
animation:rotate 5519ms linear infinite;
stroke:url("#gradient1")}

.demo__wave:nth-child(24){
-webkit-animation:rotate 6007ms linear infinite;
-moz-animation:rotate 6007ms linear infinite;
-ms-animation:rotate 6007ms linear infinite;
-o-animation:rotate 6007ms linear infinite;
animation:rotate 6007ms linear infinite;
stroke:url("#gradient1")}

.demo__wave:nth-child(25){
-webkit-animation:rotate 6294ms linear infinite;
-moz-animation:rotate 6294ms linear infinite;
-ms-animation:rotate 6294ms linear infinite;
-o-animation:rotate 6294ms linear infinite;
animation:rotate 6294ms linear infinite;
stroke:url("#gradient2")}

@-webkit-keyframes rotate{
from{
-webkit-transform:rotateX(0);
transform:rotateX(0)}
to{
-webkit-transform:rotateX(360deg);
transform:rotateX(360deg)}}

@-moz-keyframes rotate{
from{
-moz-transform:rotateX(0);
transform:rotateX(0)}
to{
-moz-transform:rotateX(360deg);
transform:rotateX(360deg)}}

@-ms-keyframes rotate{
from{
-ms-transform:rotateX(0);
transform:rotateX(0)}
to{
-ms-transform:rotateX(360deg);
transform:rotateX(360deg)}}

@-o-keyframes rotate{
from{
-o-transform:rotateX(0);
transform:rotateX(0)}
to{
-o-transform:rotateX(360deg);
transform:rotateX(360deg)}}

@keyframes rotate{
from{
transform:rotateX(0)}
to{
transform:rotateX(360deg)}}

@-webkit-keyframes scale{
0%{
-webkit-transform:scaleY(0.6);
transform:scaleY(0.6)}
50%{
-webkit-transform:scaleY(0.4);
transform:scaleY(0.4)}
100%{
-webkit-transform:scaleY(0.6);
transform:scaleY(0.6)}}

@-moz-keyframes scale{
0%{
-moz-transform:scaleY(0.6);
transform:scaleY(0.6)}
50%{
-moz-transform:scaleY(0.4);
transform:scaleY(0.4)}
100%{
-moz-transform:scaleY(0.6);
transform:scaleY(0.6)}}

@-ms-keyframes scale{
0%{
-ms-transform:scaleY(0.6);
transform:scaleY(0.6)}
50%{
-ms-transform:scaleY(0.4);
transform:scaleY(0.4)}
100%{
-ms-transform:scaleY(0.6);
transform:scaleY(0.6)}}

@-o-keyframes scale{
0%{
-o-transform:scaleY(0.6);
transform:scaleY(0.6)}
50%{
-o-transform:scaleY(0.4);
transform:scaleY(0.4)}
100%{
-o-transform:scaleY(0.6);
transform:scaleY(0.6)}}

@keyframes scale{
0%{
transform:scaleY(0.6)}
50%{
transform:scaleY(0.4)}
100%{
transform:scaleY(0.6)}}