.popover {
    position: absolute;
    width: calc(100% - 1em);
    background-color: #ffffff80;
    height: 100%;

    transition-property:opacity;
    transition-duration:500ms;
}
.popover.hide {
    opacity:0;
}
.popover > .content {
    width: 30em;
    margin: 1em auto;
    border: 1px solid black;
    border-radius: 0;
    background-color: white;
    padding: 1ex 1em;

    background-color: #e0e0e0;
    box-shadow: .5ex .5ex 1ex black,  0ex 0ex 4ex white;
    border-radius: .5ex;

    text-align:left;

    transition-property:transform;
    transition-duration:500ms;
}
.popover.hide > .content {
    transform:scale(.2) rotate(270deg);
}
.popover .close {
    float:right;
}