html,
body {
    font-family: 'Roboto', 'Helvetica', sans-serif;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
	width: 220px;
	height: 220px;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.mdl-grid {
    max-width: 1024px;
    margin: auto;
}
.mdl-layout__header-row {
    padding: 0;
}
h3 {
    background: url('firebase-logo.png') no-repeat;
    background-size: 40px;
    padding-left: 50px;
}
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 200px;
    background-size: cover;
    background-repeat: no-repeat;
}
div.outer {
    float: left;
}
a {
    width: 200px;
    height 200px;
}

div.face{
float:left;
padding:15px;
}

img.del {
    width: 20px !important;
    height 20px !important;
    float: top !important;
    float: left !important;
    position: relative;
    z-index: 1;
    animation-name: example;
    animation-duration: 1s;
}
img.edit {
    width: 20px !important;
    height 20px !important;
    float: bottom !important;
    float: left !important;
    position: relative;
    z-index: 1;
    animation-name: example;
    animation-duration: 1s;
}
img.del:hover {
    border: 1px solid #777;
}
div.img:hover {
    border: 1px solid #777;
}
p#comment {
    background-color: white;
    margin-top: 176px;
}
textarea {
    float: bottom;
    width: 50%;
}
div.img img {
    width: 100%;
    height: auto;
}
div.desc {
    padding: 15px;
    text-align: center;
}
@keyframes example {
    0% {
        left: 0px;
        bottom: 0px;
    }
    50% {
        left: 0px;
        bottom: 50px;
    }
    100% {
        left: 0px;
        bottom: 0px;
    }
}
div.img {
    width: 200px;
    height: 200px;
    position: relative;
    animation-name: example;
    animation-duration: 1s;
}
div.quickstart-user-details-container {
    float: bottom;
}