.downBalloon {
top:-100%;
z-index:999;
right:5%;
position:fixed;
transition:.2s ease-in;
height:100%;
animation:topBalloon 2s;
animation-delay:5s;
animation-fill-mode:forwards
}

.balloon {
top:5%;
position:relative;
transition:.2s ease-in;
animation:bounceBalloon 5s infinite;
animation-delay:5s;
cursor:pointer;
width:150px
}

.balloon button.close {
width:20px;
height:20px;
background:0 0;
outline:0;
position:absolute;
right:-10px;
top:-10px;
display:block;
border:none
}

.balloon button.close::after,.balloon button.close::before {
content:"";
width:100%;
height:2px;
background-color:red;
position:absolute;
left:0;
top:50%
}

.balloon button.close::before {
transform:rotate(-45deg)
}

.balloon button.close::after {
transform:rotate(45deg)
}

.balloon img {
width:100%;
height:100%;
object-fit:contain
}

@keyframes topBalloon {
to {
top:40%
}
}

@keyframes bounceBalloon {
50% {
top:15%
}
}

@media screen and (max-width:1200px) {
.balloon {
width:100px
}
}

@media screen and (max-width:480px) {
.balloon {
width:60px
}
}