@charset "utf-8";



.logosplash{
    display: none;
 }
.animation-1{display: none;}
.animation-2{display: none;}
.animation-3{display: none;}
.animation-4{display: none;}
.animation-5{display: none;}

@media only screen and (min-width: 768px) {
    .logosplash {
    position: absolute;
    bottom:8%;
    right: 5%;
    width: 0%;
    margin-top: 0px;
    background-color: transparent;
    display: block;
    animation: agrand 800ms ease-out normal 600ms forwards;
 }
 @keyframes agrand{
     from {width: 12%; right:12%}
/*     40% {width: 12%; right:12%}*/
     to   {width: 28%;right: 5%;}
 }
 .animation-1{
     width:0px;
     bottom:50%;
     right:16%;
     position: absolute;
     animation: bounce 2s ease-out normal 0.8s forwards;
     display: block;
}
@keyframes bounce{
     from {bottom: 20%; right:16%; width:30px}
     to   {bottom: 100%;right: 10%;width:15px}
}

.animation-2{
     width:0px;
     bottom: 53%;
     right:26%;
     position: absolute;
     animation: bounce2 2s ease-out normal 0.8s forwards;
     display: block;
}

@keyframes bounce2{
     from {bottom: 20%; right:22%;width:30px}
     to   {bottom: 100%;right: 26%;width:15px}
}
.animation-3{
    width:0px;
    bottom:22%;
     right:14%;
     position: absolute;
     animation: bounce3 2.4s ease-out normal 0.8s forwards;
     display: block;
}
@keyframes bounce3{
     from {bottom: 22%; right:12%;width:35px}
     50%  {width:15px}
     to   {bottom: 0;right: 0.1%; width:0px}
}
.animation-4{
     width:0px;
     bottom:17%;
     right:31%;
     position: absolute;
     animation: bounce4 2.4s ease-out normal 0.8s forwards;
     display: block;
}
@keyframes bounce4{
     from {bottom: 17%; right:25%; width:35px}
     50%  {width:15px}
     to   {bottom: 0.1%;right: 48%;width:0%}
}
.animation-5{
     width:0px;
     bottom: 48%;
     right:23%;
     position: absolute;
     animation: bounce5 2.2s ease-out normal 0.8s forwards;
     display: block;
}
@keyframes bounce5{
     from {bottom: 20%; right:16%;width:30px}
     to   {bottom: 100%;right: 19%;width:15px}
}


}


@media only screen and (min-width: 1024px) {
    .logosplash {
        bottom: 5%;
    }
    
    .animation-1{
     width:0px;
     bottom:50%;
     right:16%;
     position: absolute;
     animation: bounce 2s ease-out normal 1s forwards;
}
@keyframes bounce{
     from {bottom: 20%; right:14%; width:40px}
     to   {bottom: 100%;right: 8%;width:20px}
}

.animation-2{
     width:0px;
     bottom: 53%;
     right:26%;
     position: absolute;
     animation: bounce2 2s ease-out normal 1s forwards;
}

@keyframes bounce2{
     from {bottom: 20%; right:20%;width:40px}
     to   {bottom: 100%;right: 24%;width:20px}
}
.animation-3{
    width:0px;
    bottom:22%;
     right:14%;
     position: absolute;
     animation: bounce3 1.8s ease-out normal 1.2s forwards;
}
@keyframes bounce3{
     from {bottom: 22%; right:9%;width:40px}
     50%  {width:20px}
     to   {bottom: 0;right: 0.2%; width:0px}
}
.animation-4{
     width:0px;
     bottom:17%;
     right:31%;
     position: absolute;
     animation: bounce4 1.8s ease-out normal 1.2s forwards;
}
@keyframes bounce4{
     from {bottom: 17%; right:20%; width:40px}
     50%  {width:20px}
     to   {bottom: 0%;right: 36%;width:0%}
}
.animation-5{
     width:0px;
     bottom: 48%;
     right:23%;
     position: absolute;
     animation: bounce5 1.7s ease-out normal 1s forwards;
}
@keyframes bounce5{
     from {bottom: 20%; right:14%;width:40px}
     to   {bottom: 100%;right: 16%;width:30px}
}
    
}
@media only screen and (min-width: 1200px) {
    
    .logosplash{
    width: 0%;
    bottom: 3%;
    right: 13%;
    animation: agrand 800ms ease-out normal 600ms forwards;
    }
    @keyframes agrand{
        from {width: 9%; right:20%}
/*        40%  {width: 9%; right:20%}*/
        to   {width: 25%;right: 13%;}
    }
    .animation-1{
     width:0px;
     bottom:50%;
     right:20%;
     position: absolute;
     animation: bounce 1.6s ease-out normal 1s forwards;
}
@keyframes bounce{
     from {bottom: 20%; right:20%; width:50px}
     to   {bottom: 100%;right: 13%;width:20px}
}

.animation-2{
     width:0px;
     bottom: 53%;
     right:26%;
     position: absolute;
     animation: bounce2 1.6s ease-out normal 1s forwards;
}

@keyframes bounce2{
     from {bottom: 20%; right:26%;width:50px}
     to   {bottom: 100%;right: 30%;width:20px}
}
.animation-3{
    width:0px;
    bottom:22%;
     right:14%;
     position: absolute;
     animation: bounce3 1.4s ease-out normal 1.1s forwards;
}
@keyframes bounce3{
     from {bottom: 22%; right:14%;width:50px}
     50%  {width:25px}
     to   {bottom: 0;right: 6%; width:0%}
}
.animation-4{
     width:0px;
     bottom:17%;
     right:31%;
     position: absolute;
     animation: bounce4 1.4s ease-out normal 1s forwards;
}
@keyframes bounce4{
     from {bottom: 17%; right:31%; width:50px}
     50%  {width:25px}
     to   {bottom: 0.1%;right: 40%;width:0%}
}
.animation-5{
     width:0px;
     bottom: 48%;
     right:23%;
     position: absolute;
     animation: bounce5 1.8s ease-out normal 1s forwards;
}
@keyframes bounce5{
     from {bottom: 20%; right:21%;width:50px}
     to   {bottom: 100%;right: 24%;width:20px}
}
    
}