    .profile-card {
        background: #E0E0E0;
        position: fixed;
		left: 120px;
        z-index: 2;
        overflow: hidden;
        opacity: 0;
        -webkit-transform: translate(-20%, -20%);
        transform: translate(-50%, -50%);
        -webkit-border-radius: 50%;
        border-radius: 50%;
        box-shadow: 0px 17px 16px rgba(0, 0, 0, 0.16), 0px 17px 16px rgba(0, 0, 0, 0.23);

        -webkit-box-shadow: 0px 0px 95px -21px rgba(0, 0, 0, 0.44);
        -moz-box-shadow: 0px 0px 95px -21px rgba(0, 0, 0, 0.44);
        box-shadow: 0px 0px 95px -21px rgba(0, 0, 0, 0.44);

        animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards,
            moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards,
            moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
            materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;
    }

    .profil-card-content {
        margin: 0;
        padding: 0;
    }

    @keyframes init {
        0% {
            width: 0px;
            height: 0px;
        }

        100% {
            width: 56px;
            height: 56px;
            margin-top: 0px;
            opacity: 1;
        }
    }

    @keyframes moveDown {
        0% {
            top: 50%;
        }

        50% {
            top: 40%;
        }

        100% {
            top: 100%;
        }
    }

    @keyframes moveUp {
        0% {
            background: #E0E0E0;
            top: 100%;
        }

        50% {
            top: 40%;
        }

        100% {
            top: 80%;
            background: #E0E0E0;
        }
    }

    @keyframes materia {
        0% {
            background: #E0E0E0;
        }

        50% {
            border-radius: 4px;
        }

        100% {
			top: 300px;
            width: 250px;
            height: 250px;
            background: #FFFFFF;
            border-radius: 8px;
        }
    }




    .img-center {
        width: 100%;
        height: auto;
    }
