body.fullscreen {
    position: absolute;
    height: 100%;
    background-color: white;
}

#close-x {
    position: fixed;
    top: 20px;
    right: 20px;
    display: none;
    z-index: 1;
    cursor: pointer;

    /* Disable text seleciton on 'x' */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;

    /* circle around the 'x' */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    height: 31px;
    width: 31px;
    background-color: rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 768px) {
    #close-x {
        height: 44px;
        width: 44px;
    }
}

#close-x-icon {
    position: absolute;
    background-image: url('/static/images/sprites/web_core/xclose.png');
    width: 11px;
    height: 11px;
    top: 10px;
    left: 10px;
}

@media screen and (max-width: 768px) {
    #close-x-icon {
        width: 15.6129032px; /* 11/31 x 44 */
        height: 15.6129032px; /* 11/31 x 44 */
        top: 14.1935484px; /* 22 - 15.6129032/2 */
        left: 14.1935484px; /* 22 - 15.6129032/2 */
    }
}

/* Retina version of close 'x' icon. */
/* 1.25 dpr */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    #close-x-icon {
        background-image: url('/static/images/sprites/web_core_2x/xclose.png');
        background-size: 11px 11px;
    }
}

@media (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 768px),
    (min-resolution: 120dpi) and (max-width: 768px) {
    #close-x-icon {
        background-size: 15.6129032px 15.6129032px;
    }
}

body.fullscreen #close-x {
    display: block;
}