/*! defram v0.1.2 */

.device {
    display: inline-block;
    margin: 1em;
    font-size: 1rem;
    color: #fff;
    border: .5em solid currentColor;
    border-width: 4.5em .5em;
    border-radius: 2em;
    background: currentColor;
    box-shadow: 0 0 0 .3em #e9e9e9, 0 0 0 .35em #999, 0 .2em 1.5em rgba(0, 0, 0, .4);
    position: relative;
    box-sizing: content-box;
    width: 18em;
    height: 32em;
}

.device:before {
    content: "";
    position: absolute;
    left: 50%;
    width: 5em;
    top: -2.25em;
    height: .35em;
    transform: translate(-50%, -50%);
    background: #ccc;
    border-radius: .3em;
}

.device:after {
    position: absolute;
    left: 50%;
    bottom: -2.5em;
    transform: translate(-50%, 44%);
    width: 2.7em;
    height: 2.7em;
    border: .2em solid #ddd;
    border-radius: 2em;
    border-color: #ccc #ddd #ddd #ccc;
}

.device>* {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: .1em solid #333;
    border-radius: .2em;
    background: #fff;
}

.device img {
    display: block;
    object-fit: cover;
    object-position: 0 0;
}

.device img[src=""], .device img:not([src]) {
    background: #000;
}

.device>div {
    overflow: hidden;
}

.device>div>img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.device-scroll>div {
    overflow-y: auto;
}

.device-scroll>div>img {
    height: auto;
}

.device-scroll-thin>div {
    scrollbar-width: thin;
    scrollbar-color: #999 #ccc;
}

.device-scroll-thin>div::-webkit-scrollbar {
    width: .4em;
    background: #ccc;
}

.device-scroll-thin>div::-webkit-scrollbar-thumb {
    background: #999;
}

.device-landscape {
    width: 32em;
    height: 18em;
    border-width: .5em 4.5em;
}

.device-landscape.device-tablet {
    border-width: .8em 4.5em;
}

.device-landscape:not(.device-laptop):not(.device-desktop):before {
    top: 50%;
    width: .35em;
    left: -2.25em;
    height: 5em;
    transform: translate(-50%, -50%);
}

.device-landscape:not(.device-laptop):not(.device-desktop):after {
    top: 50%;
    left: auto;
    right: -2.5em;
    transform: translate(44%, -50%);
}

[class*="device-button-"]:after {
    content: "";
}

.device-button-round:after {
}

.device-button-square:after {
    border-radius: .5em;
}

.device-button-long:after {
    width: 5em;
    height: 1.4em;
    border-width: .15em;
    border-radius: .8em;
}

.device-button-long.device-landscape:after {
    width: 1.4em;
    height: 5em;
}

.device-tablet {
    width: 30em;
    height: 45em;
    border-width: 4.5em .8em;
}

.device-tablet.device-landscape {
    width: 45em;
    height: 30em;
}

.device-laptop {
    width: 45em;
    height: 30em;
    border-width: 1.5em 1em;
    border-radius: 1em;
    margin: 1em 5em;
    box-shadow: 0 0 0 .2em #e9e9e9, 0 0 0 .25em #999, 0 .2em 1.5em rgba(0, 0, 0, .4);
}

.device-laptop:before {
    top: -.7em;
    height: .7em;
    width: .7em;
}

.device.device-laptop:after {
    content: "";
    left: 50%;
    bottom: 0;
    width: 125%;
    height: 1.5em;
    transform: translate(-50%, 2.5em);
    border-radius: .5em .5em 2em 2em;
    border: none;
    border-top: .7em solid #ddd;
    background: currentColor;
    box-shadow: inset 0 -.5em 1em rgba(0, 0, 0, .3);
}

.device.device-laptop.device-black:after {
    border-top-color: #999;
}

.device-desktop {
    width: 45em;
    height: 30em;
    border-width: 1em 1em 1.5em 1em;
    border-radius: .5em;
    margin: 1em 1em 5em 1em;
    box-shadow: 0 0 0 .1em #e9e9e9, 0 0 0 .15em #999, 0 .5em 1.5em rgba(0, 0, 0, .4);
}

.device-desktop:before {
    top: auto;
    left: auto;
    right: 0;
    bottom: -.9em;
    transform: none;
    width: 2em;
    border-radius: .1em;
}

.device.device-desktop:after {
    content: "";
    width: 10em;
    height: 4em;
    z-index: -1;
    bottom: -1em;
    transform: translate(-50%, 100%);
    border-radius: .2em;
    border: none;
    border-bottom: 1em solid #ddd;
    background: #eee;
    padding: 0 4em;
    background-clip: content-box;
}

.device.device-desktop.device-silver:after {
    background-color: #e9e9e9;
    border-bottom-color: #d9d9d9;
}

.device.device-desktop.device-black:after {
    background-color: #aaa;
    border-bottom-color: #666;
}

.device-silver {
    color: #bbb;
}

.device-silver:before {
    background: #999;
}

.device-silver:after {
    border-color: #999 #aaa #aaa #999;
}

.device-black {
    color: #333;
}

.device-black:before {
    background: #666;
}

.device-black:after {
    border-color: #555 #666 #666 #555;
}

.device {
    font-size: .8rem;
}

.device-xxs {
    font-size: .35rem;
}

.device-xs {
    font-size: .5rem;
}

.device-s {
    font-size: .65rem;
}

.device-l {
    font-size: 1rem;
}

.device-xl {
    font-size: 1.25rem;
}

.device-xxl {
    font-size: 1.6rem;
}

@media (max-width: 899px) {
    .device {
        font-size: .65rem;
    }

    .device-xxs {
        font-size: .35rem;
    }

    .device-xs {
        font-size: .45rem;
    }

    .device-s {
        font-size: .55rem;
    }

    .device-l {
        font-size: .8rem;
    }

    .device-xl {
        font-size: 1rem;
    }

    .device-xxl {
        font-size: 1.25rem;
    }
}