#wrap {
    position: absolute;
 width:110%;
     height: 100%;
    display: flex;
    align-items: stretch;
    left:0px
 
}

.hb {
    position: relative;
    width: 25%;
    z-index: 1;
    display: flex;
    align-items: center;
    z-index: 2;
    trasnform: scale(.97);
}

.c {
    position: relative;
    display: block;
    max-width: 90%;
}

    .c img {
        position: relative;
        display: block;
        width: 350px;
        height: 400px;
        z-index: 2;
        margin-right:10px
    }





.fullBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: transform .5s, opacity .5s;
    transform: scale(1);
    z-index: 1;
}

    .fullBg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        opacity: .5;
    }

.hb:hover + .fullBg {
    opacity: 1;
    transform: scale(1.02);
}

.credits {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 1.5em;
    font-size: .8em;
    text-align: right;
    font-style: italic;
    opacity: .8;
    transition: opacity .2;
    z-index: 3;
}

    .credits:hover {
        text-decoration: underline;
        opacity: 1;
    }



@-webkit-keyframes pulse {
    0% {
        background: #f44336;
    }

    25% {
        background: #e91e63;
    }

    50% {
        background: #9c2780;
    }

    75% {
        background: #673ab7;
    }

    100% {
        background: #f44336;
    }
}

@keyframes pulse {
    0% {
        background: #f44336;
    }

    25% {
        background: #e91e63;
    }

    50% {
        background: #9c2780;
    }

    75% {
        background: #673ab7;
    }

    100% {
        background: #f44336;
    }
}

.bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: translateZ(0);
}

    .bubbles li {
        position: absolute;
        list-style: none;
        display: block;
        background-color: rgba(0, 0, 0, 0.62);
        bottom: -100px;
        animation: circle 80s infinite;
        transition-timing-function: linear;
        border-radius:50px
        ;
        border:1px solid rgba(233, 30, 99, 0.35)
    }

        .bubbles li:nth-child(1) {
            width: 30px;
            height: 30px;
            left: 20%;
        }

        .bubbles li:nth-child(2) {
            width: 40px;
            height: 40px;
            left: 40%;
            animation-delay: 2s;
            animation-duration: 20s;
        }

        .bubbles li:nth-child(3) {
            width: 30px;
            height: 30px;
            left: 60%;
            animation-delay: 4s;
            animation-duration: 25s;
        }

        .bubbles li:nth-child(4) {
            width: 35px;
            height: 35px;
            left: 80%;
            animation-delay: 1s;
            animation-duration: 30s;
        }

        .bubbles li:nth-child(5) {
            width: 55px;
            height: 55px;
            left: 50%;
            animation-delay: 5s;
            animation-duration: 35s;
        }

        .bubbles li:nth-child(6) {
            width: 25px;
            height: 25px;
            left: 10%;
            animation-delay: 3s;
            animation-duration: 40s;
        }

        .bubbles li:nth-child(7) {
            width: 55px;
            height: 55px;
            left: 70%;
            animation-delay: 2.5s;
            animation-duration: 45s;
        }

        .bubbles li:nth-child(8) {
            width: 30px;
            height: 30px;
            left: 30%;
            animation-delay: 3.5s;
            animation-duration: 50s;
        }

@keyframes circle {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-1080px) rotate(800deg);
        transform: translateY(-3000px) rotate(800deg);
    }
}