body{
    width: 100%;
    height: 100%;
    position: inherit;
}
.cloud,.cloud1,.cloud-p{
    width: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.cloud{
    transform: translate(-50%,-50%);
    animation: fadeincloud 1s;
}
.cloud1,.cloud-p{
    transform: translate(-50%,-60%);
}
.cloud1{
    animation: fadeincloud1 2s;
}
.cloud-p{
    width: 190px;
    height: 100px;
}
.hosti{
    position: absolute;
    left: 50%;
    transform: translate(-100%, 21%);
    top: 50%;
    width: 100px;
    border: 7px solid white;
    border-top-right-radius: 17px;
    border-top-left-radius: 17px;
    background-color: white;
    animation: hosti 2s;
}
.cloud-p:after{
    content: "t";
    position: absolute;
    right: -21%;
    background: url(./img/heart.png) no-repeat;
    width: 55px;
    height: 55px;
    background-position: center;
    background-size: contain;
    z-index: 9!important;
    opacity: 1;
    /* bottom: 50%!important; */
    top: 32%!important;
    color: transparent;
    animation: fadein 4s;
    
}
@keyframes hosti {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@keyframes fadein {
    from {
        opacity:0;
        transform: translateX(-100%);
    }
    to {
        opacity:1;
        transform: translateX(0);
    }
}

@keyframes fadeincloud {
    from {
        opacity:0;
        transform: translate(-10%,-50%);
        left: 50%;
        top: 50%;
    }
    to {
        opacity:1;
        transform: translate(-50%,-50%);
        left: 50%;
        top: 50%;
    }
}

@keyframes fadeincloud1 {
    from {
        opacity:0;
        transform: translate(-100%,-60%);
        left: 50%;
        top: 50%;
    }
    to {
        opacity:1;
        transform: translate(-50%,-60%);
        left: 50%;
        top: 50%;
    }
}