.marvel-device.macbook {
    width: 60em;
    height: 37.5em;
    padding: 2.75em 2.75em 4.75em;
    border-radius: 2.125em;
}
.marvel-device.macbook.slim {
    height: 29.79em;
}
.marvel-device.macbook::before {
    width: calc(100% - 0.5em);
    height: calc(100% - 0.5em);
    top: 0.25em;
    left: 0.25em;
    border-radius: 1.875em;
}
.marvel-device.macbook .top-bar {
    width: calc(100% + 2 * 4.375em);
    height: 2.5em;
    top: 42.5em;
    left: -4.375em;
    border-bottom-left-radius: 5.625em 1.125em;
    border-bottom-right-radius: 5.625em 1.125em;
}
.marvel-device.macbook .top-bar::before {
    height: 1.5em;
    border-radius: 0.3125em;
}
.marvel-device.macbook .top-bar::after {
    width: 16%;
    height: 0.875em;
    border-radius: 0 0 1.25em 1.25em;
}
.marvel-device.macbook .camera {
    width: 0.625em;
    height: 0.625em;
    top: 1.25em;
    left: 50%;
    margin-left: -0.3125em;
}
.marvel-device.macbook .bottom-bar {
    width: calc(100% + 2 * 4.375em);
    height: 1.625em;
    top: 42.5em;
    left: -4.375em;
}

.marvel-device.macbook.slim .top-bar,
.marvel-device.macbook.slim .bottom-bar {
    width: calc(100% + 2 * 2.375em);
    left: -2.375em;
    top: 34.8em;
}




.marvel-device.ipad {
    width: 36em;
    height: 48em;
    padding: 5.625em 1.5625em;
    border-radius: 2.75em;
}
.marvel-device.ipad.landscape {
    width: 48em;
    height: 36em;
    padding: 1.5625em 5.625em;
}
.marvel-device.ipad::before {
    width: calc(100% - 0.5em);
    height: calc(100% - 0.5em);
    top: 0.25em;
    left: 0.25em;
    border-radius: 2.5em;
}
.marvel-device.ipad .camera {
    width: 0.625em;
    height: 0.625em;
    top: 2.75em;
    margin-left: -0.3125em;
}
.marvel-device.ipad.landscape .camera {
    left: calc(100% - 7.75em);
    margin-top: -0.3125em;
}
.marvel-device.ipad .home {
    border-radius: 2.25em;
    width: 3.125em;
    height: 3.125em;
    margin-left: -1.5625em;
    bottom: 1.375em;
}
.marvel-device.ipad.landscape .home {
    left: 1.375em;
    margin-top: -1.5625em;
}
.marvel-device.ipad .home::after {
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
    border-radius: 0.25em;
}

.marvel-device.iphone-12,
.marvel-device.iphone-14 {
    background: #8f8f8f;
    width: 21.8em;
    /*height: 43.6em; iphone 12 */
    height: 47.3em; /* iphone 14 */
    padding: 0.6em;
    border-radius: 3.7em;
}
.marvel-device.iphone-14 .screen,
.marvel-device.iphone-12 .screen {
    border-radius: 3.5em;
    background: #000;
}
.marvel-device.iphone-12:not(.blank-screen) .screen,
.marvel-device.iphone-14:not(.blank-screen) .screen {
    background:
            radial-gradient(
                    110.35% 80.79% at 6% 103.92%,
                    rgba(37, 169, 239, 1) 0%,
                    rgba(37, 169, 239, 0) 100%
            ),
            linear-gradient(
                    169.3deg,
                    rgba(205, 249, 232, 1) 15%,
                    rgba(205, 249, 232, 0) 46%
            ),
            radial-gradient(
                    123% 73% at 107% 96%,
                    rgba(255, 253, 177, 1) 20%,
                    rgba(254, 228, 191, 1) 60%,
                    rgba(240, 189, 208, 1) 75%,
                    rgba(255, 129, 38, 0) 100%
            ),
            linear-gradient(
                    0deg,
                    rgba(0, 204, 131, 1) 0%,
                    rgba(0, 204, 131, 1) 100%
            );
    background-blend-mode: , , , ;
}
.marvel-device.iphone-12 .shadows {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3.7em;
}
.marvel-device.iphone-12::before {
    width: calc(100% - 1.2em);
    height: calc(100% - 1.2em);
    top: 0.6em;
    left: 0.6em;
    border-radius: 3.7em;
    /*background: #c9c9c9;*/
    box-shadow: 0px 0px 0.5em 0 #000;
}
.marvel-device.iphone-12 .shadows::before {
    content: '';
    background: #000;
    width: 200%;
    height: 0%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(75deg);
    opacity: 0.75;
    box-shadow: 0 0 6rem 6rem rgba(0,0,0,0.75);
}
.marvel-device.iphone-12 .shadows::after {
    content: '';
    background: #000;
    width: 200%;
    height: 0%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(175deg);
    opacity: 0.75;
    box-shadow: 0 0 6rem 6rem rgba(255,255,255,0.75);
}
.marvel-device.iphone-12 .camera {
    position: absolute;
    top: 0.6em;
    width: 7em;
    z-index: 10;
    border-radius: 0 0 1em 1em;
    height: 1.8em;
    left: 50%;
    transform: translateX(-50%);
    background: #2b2a2a;
}
.marvel-device.iphone-12 .camera .speaker {
    top: 0.8em;
    height: 0.4em;
    background: #000;
    width: 1.9em;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 0 0 -0.1em;
}
.marvel-device.iphone-12 .camera .lens {
    position: absolute;
    background: #000;
    border-radius: 1em;
    top: 0.6em;
    right: 1.4em;
    height: 0.7em;
    width: 0.7em;
}
.marvel-device.iphone-12 .camera .lens::before,
.marvel-device.iphone-12 .camera .lens::after {
    content: '';
    display: block;
    background: #0d4d71;
    top: 0.25em;
    position: absolute;
    height: 0.15em;
    border-radius: 100%;
    box-shadow: 0 0 0.2em 0.1em #0d4d71;
}
.marvel-device.iphone-12 .camera .lens::before {
    width: 0.115em;
    left: 0.2em;
}
.marvel-device.iphone-12 .camera .lens::after {
    width: 0.015em;
    left: 0.5em;
}
.marvel-device-container {
    display: inline-block;
    position: relative;
    box-shadow: 0 0px 8em -2em rgb(0, 0, 0);
    border-radius: 3.7em;
}
.marvel-device-container.iphone-12 .controls {

}
.marvel-device-container.iphone-12 .controls > * {
    position: absolute;
    width: 0.3em;
    height: 2em;
    top: 0;
    left: 0;
    background: #8f8f8f;
    box-shadow: 0 0 0.4em 0em #5b5b5b inset;
    border: 1px solid #cecece;
}
.marvel-device-container.iphone-12 .controls > div.left {
    border-radius: 0.3em 0 0 0.3em;
    border-right: none;
    left: -0.3em;
}
.marvel-device-container.iphone-12 .controls > div.right {
    border-radius: 0 0.3em 0.3em 0;
    border-left: none;
    right: -0.3em;
    left: auto;
}
.marvel-device-container.iphone-12 .controls > div.lock {
    top: 7em;
    height: 1.6em;
}
.marvel-device-container.iphone-12 .controls > div.volume-up,
.marvel-device-container.iphone-12 .controls > div.volume-down {
    height: 3.2em;
}
.marvel-device-container.iphone-12 .controls > div.volume-up {
    top: 10.3em;
}
.marvel-device-container.iphone-12 .controls > div.volume-down {
    top: 14.1em;
}
.marvel-device-container.iphone-12 .controls > div.main {
    top: 14.1em;
}

.marvel-device-container  .dot-navigation {
    display: inline-block;
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: -3em;
    transform: translateX(-50%);
    z-index: 100;
    width: 100%;
}
.marvel-device-container  .dot-navigation > span::before {
    content: '';
    display: inline-block;
    border-radius: 100%;
    width: 1em;
    height: 1em;
    background: #8f8f8f;
}
.marvel-device-container  .dot-navigation > span.active::before {
    background: #ffb81c;
}
.marvel-device-container  .dot-navigation > span + span {
    margin-left: 0.5em;
}
.marvel-device-container .tour-navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 100;
}
.marvel-device-container .tour-navigation li {
    float: left;
}
.marvel-device-container .tour-navigation li.prev,
.marvel-device-container .tour-navigation li.next {
    background: #ffb81c;
    width: 3em;
    height: 3em;
    position: absolute;
}
.marvel-device-container .tour-navigation li.prev {
    left: -3.5em;
}
.marvel-device-container .tour-navigation li.next {
    right: -3.5em;
}
.marvel-device-container .tour-navigation li.prev .fa,
.marvel-device-container .tour-navigation li.next .fa {
    line-height: 1.7em;
    font-size: 1.7em;
    color: #fff;
}