.marvel-device {
  display: inline-block;
  position: relative; }
  .marvel-device .screen {
    width: 100%;
    position: relative;
    height: 100%;
    color: white;
    z-index: 2;
    text-align: center;
    display: block;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 0 0 3px #111;
    box-shadow: 0 0 0 3px #111; }
  .marvel-device .top-bar, .marvel-device .bottom-bar {
    height: 3px;
    background: black;
    width: 100%;
    display: block; }
  .marvel-device .middle-bar {
    width: 3px;
    height: 4px;
    top: 0px;
    left: 90px;
    background: black;
    position: absolute; }
  .marvel-device.iphone6 {
    width: 375px;
    height: 667px;
    padding: 105px 24px;
    background: #d9dbdc;
    -webkit-border-radius: 56px;
    border-radius: 56px;
    -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); }
    .marvel-device.iphone6:before {
      width: calc(100% - 12px);
      height: calc(100% - 12px);
      position: absolute;
      top: 6px;
      content: '';
      left: 6px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      background: #f8f8f8;
      z-index: 1; }
    .marvel-device.iphone6:after {
      width: calc(100% - 16px);
      height: calc(100% - 16px);
      position: absolute;
      top: 8px;
      content: '';
      left: 8px;
      -webkit-border-radius: 48px;
      border-radius: 48px;
      -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #FFFFFF;
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #FFFFFF;
      z-index: 2; }
    .marvel-device.iphone6 .home {
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 68px;
      height: 68px;
      position: absolute;
      left: 50%;
      margin-left: -34px;
      bottom: 22px;
      z-index: 3;
      background: #303233;
      background: -moz-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #303233), color-stop(50%, #b5b7b9), color-stop(69%, #f0f2f2), color-stop(100%, #303233));
      background: -webkit-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: -o-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: -ms-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303233', endColorstr='#303233',GradientType=1 ); }
      .marvel-device.iphone6 .home:before {
        background: #f8f8f8;
        position: absolute;
        content: '';
        -webkit-border-radius: 100%;
        border-radius: 100%;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        top: 4px;
        left: 4px; }
    .marvel-device.iphone6 .top-bar {
      height: 14px;
      background: #bfbfc0;
      position: absolute;
      top: 68px;
      left: 0; }
    .marvel-device.iphone6 .bottom-bar {
      height: 14px;
      background: #bfbfc0;
      position: absolute;
      bottom: 68px;
      left: 0; }
    .marvel-device.iphone6 .sleep {
      position: absolute;
      top: 190px;
      right: -4px;
      width: 4px;
      height: 66px;
      -webkit-border-radius: 0px 2px 2px 0px;
      border-radius: 0px 2px 2px 0px;
      background: #d9dbdc; }
    .marvel-device.iphone6 .volume {
      position: absolute;
      left: -4px;
      top: 188px;
      z-index: 0;
      height: 66px;
      width: 4px;
      -webkit-border-radius: 2px 0px 0px 2px;
      border-radius: 2px 0px 0px 2px;
      background: #d9dbdc; }
      .marvel-device.iphone6 .volume:before {
        position: absolute;
        left: 2px;
        top: -78px;
        height: 40px;
        width: 2px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
      .marvel-device.iphone6 .volume:after {
        position: absolute;
        left: 0px;
        top: 82px;
        height: 66px;
        width: 4px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
    .marvel-device.iphone6 .camera {
      background: #3c3d3d;
      width: 12px;
      height: 12px;
      position: absolute;
      top: 24px;
      left: 50%;
      margin-left: -6px;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      z-index: 3; }
    .marvel-device.iphone6 .sensor {
      background: #3c3d3d;
      width: 16px;
      height: 16px;
      position: absolute;
      top: 49px;
      left: 134px;
      z-index: 3;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .marvel-device.iphone6 .speaker {
      background: #292728;
      width: 70px;
      height: 6px;
      position: absolute;
      top: 54px;
      left: 50%;
      margin-left: -35px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      z-index: 3; }
    .marvel-device.iphone6.gold {
      background: #f9e7d3; }
      .marvel-device.iphone6.gold .top-bar, .marvel-device.iphone6.gold .bottom-bar {
        background: white; }
      .marvel-device.iphone6.gold .sleep, .marvel-device.iphone6.gold .volume {
        background: #f9e7d3; }
      .marvel-device.iphone6.gold .home {
        background: #cebba9;
        background: -moz-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #cebba9), color-stop(50%, #f9e7d3), color-stop(100%, #cebba9));
        background: -webkit-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: -o-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: -ms-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebba9', endColorstr='#cebba9',GradientType=1 ); }
    .marvel-device.iphone6.black {
      background: #464646;
      -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.7);
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.7); }
      .marvel-device.iphone6.black:before {
        background: #080808; }
      .marvel-device.iphone6.black:after {
        -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121;
        box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121; }
      .marvel-device.iphone6.black .top-bar, .marvel-device.iphone6.black .bottom-bar {
        background: #212121; }
      .marvel-device.iphone6.black .volume, .marvel-device.iphone6.black .sleep {
        background: #464646; }
      .marvel-device.iphone6.black .camera {
        background: #080808; }
      .marvel-device.iphone6.black .home {
        background: #080808;
        background: -moz-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #080808), color-stop(50%, #464646), color-stop(100%, #080808));
        background: -webkit-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: -o-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: -ms-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#080808', endColorstr='#080808',GradientType=1 ); }
        .marvel-device.iphone6.black .home:before {
          background: #080808; }
    .marvel-device.iphone6.landscape {
      padding: 24px 105px;
      height: 375px;
      width: 667px; }
      .marvel-device.iphone6.landscape .sleep {
        top: 100%;
        -webkit-border-radius: 0px 0px 2px 2px;
        border-radius: 0px 0px 2px 2px;
        right: 190px;
        height: 4px;
        width: 66px; }
      .marvel-device.iphone6.landscape .volume {
        width: 66px;
        height: 4px;
        top: -4px;
        left: calc(100% - 188px - 66px);
        -webkit-border-radius: 2px 2px 0px 0px;
        border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone6.landscape .volume:before {
          width: 40px;
          height: 2px;
          top: 2px;
          right: -78px;
          left: auto;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone6.landscape .volume:after {
          left: -82px;
          width: 66px;
          height: 4px;
          top: 0;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
      .marvel-device.iphone6.landscape .top-bar {
        width: 14px;
        height: 100%;
        left: calc(100% - 68px -  14px);
        top: 0; }
      .marvel-device.iphone6.landscape .bottom-bar {
        width: 14px;
        height: 100%;
        left: 68px;
        top: 0; }
      .marvel-device.iphone6.landscape .home {
        top: 50%;
        margin-top: -34px;
        margin-left: 0;
        left: 22px; }
      .marvel-device.iphone6.landscape .sensor {
        top: 134px;
        left: calc(100% - 49px - 16px); }
      .marvel-device.iphone6.landscape .speaker {
        height: 70px;
        width: 6px;
        left: calc(100% - 54px - 6px);
        top: 50%;
        margin-left: 0px;
        margin-top: -35px; }
      .marvel-device.iphone6.landscape .camera {
        left: calc(100% - 32px);
        top: 50%;
        margin-left: 0px;
        margin-top: -5px; }
  .marvel-device.iphone6plus {
    width: 414px;
    height: 736px;
    padding: 112px 26px;
    background: #d9dbdc;
    -webkit-border-radius: 56px;
    border-radius: 56px;
    -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2); }
    .marvel-device.iphone6plus:before {
      width: calc(100% - 12px);
      height: calc(100% - 12px);
      position: absolute;
      top: 6px;
      content: '';
      left: 6px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      background: #f8f8f8;
      z-index: 1; }
    .marvel-device.iphone6plus:after {
      width: calc(100% - 16px);
      height: calc(100% - 16px);
      position: absolute;
      top: 8px;
      content: '';
      left: 8px;
      -webkit-border-radius: 48px;
      border-radius: 48px;
      -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #FFFFFF;
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #FFFFFF;
      z-index: 2; }
    .marvel-device.iphone6plus .home {
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 68px;
      height: 68px;
      position: absolute;
      left: 50%;
      margin-left: -34px;
      bottom: 24px;
      z-index: 3;
      background: #303233;
      background: -moz-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #303233), color-stop(50%, #b5b7b9), color-stop(69%, #f0f2f2), color-stop(100%, #303233));
      background: -webkit-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: -o-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: -ms-linear-gradient(-45deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303233', endColorstr='#303233',GradientType=1 ); }
      .marvel-device.iphone6plus .home:before {
        background: #f8f8f8;
        position: absolute;
        content: '';
        -webkit-border-radius: 100%;
        border-radius: 100%;
        width: calc(100% - 8px);
        height: calc(100% - 8px);
        top: 4px;
        left: 4px; }
    .marvel-device.iphone6plus .top-bar {
      height: 14px;
      background: #bfbfc0;
      position: absolute;
      top: 68px;
      left: 0; }
    .marvel-device.iphone6plus .bottom-bar {
      height: 14px;
      background: #bfbfc0;
      position: absolute;
      bottom: 68px;
      left: 0; }
    .marvel-device.iphone6plus .sleep {
      position: absolute;
      top: 190px;
      right: -4px;
      width: 4px;
      height: 66px;
      -webkit-border-radius: 0px 2px 2px 0px;
      border-radius: 0px 2px 2px 0px;
      background: #d9dbdc; }
    .marvel-device.iphone6plus .volume {
      position: absolute;
      left: -4px;
      top: 188px;
      z-index: 0;
      height: 66px;
      width: 4px;
      -webkit-border-radius: 2px 0px 0px 2px;
      border-radius: 2px 0px 0px 2px;
      background: #d9dbdc; }
      .marvel-device.iphone6plus .volume:before {
        position: absolute;
        left: 2px;
        top: -78px;
        height: 40px;
        width: 2px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
      .marvel-device.iphone6plus .volume:after {
        position: absolute;
        left: 0px;
        top: 82px;
        height: 66px;
        width: 4px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
    .marvel-device.iphone6plus .camera {
      background: #3c3d3d;
      width: 12px;
      height: 12px;
      position: absolute;
      top: 29px;
      left: 50%;
      margin-left: -6px;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      z-index: 3; }
    .marvel-device.iphone6plus .sensor {
      background: #3c3d3d;
      width: 16px;
      height: 16px;
      position: absolute;
      top: 54px;
      left: 154px;
      z-index: 3;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .marvel-device.iphone6plus .speaker {
      background: #292728;
      width: 70px;
      height: 6px;
      position: absolute;
      top: 59px;
      left: 50%;
      margin-left: -35px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      z-index: 3; }
    .marvel-device.iphone6plus.gold {
      background: #f9e7d3; }
      .marvel-device.iphone6plus.gold .top-bar, .marvel-device.iphone6plus.gold .bottom-bar {
        background: white; }
      .marvel-device.iphone6plus.gold .sleep, .marvel-device.iphone6plus.gold .volume {
        background: #f9e7d3; }
      .marvel-device.iphone6plus.gold .home {
        background: #cebba9;
        background: -moz-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #cebba9), color-stop(50%, #f9e7d3), color-stop(100%, #cebba9));
        background: -webkit-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: -o-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: -ms-linear-gradient(-45deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        background: linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cebba9', endColorstr='#cebba9',GradientType=1 ); }
    .marvel-device.iphone6plus.black {
      background: #464646;
      -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.7);
      box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.7); }
      .marvel-device.iphone6plus.black:before {
        background: #080808; }
      .marvel-device.iphone6plus.black:after {
        -webkit-box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121;
        box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 6px 3px #212121; }
      .marvel-device.iphone6plus.black .top-bar, .marvel-device.iphone6plus.black .bottom-bar {
        background: #212121; }
      .marvel-device.iphone6plus.black .volume, .marvel-device.iphone6plus.black .sleep {
        background: #464646; }
      .marvel-device.iphone6plus.black .camera {
        background: #080808; }
      .marvel-device.iphone6plus.black .home {
        background: #080808;
        background: -moz-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #080808), color-stop(50%, #464646), color-stop(100%, #080808));
        background: -webkit-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: -o-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: -ms-linear-gradient(-45deg, #080808 0%, #464646 50%, #080808 100%);
        background: linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#080808', endColorstr='#080808',GradientType=1 ); }
        .marvel-device.iphone6plus.black .home:before {
          background: #080808; }
    .marvel-device.iphone6plus.landscape {
      padding: 26px 112px;
      height: 414px;
      width: 736px; }
      .marvel-device.iphone6plus.landscape .sleep {
        top: 100%;
        -webkit-border-radius: 0px 0px 2px 2px;
        border-radius: 0px 0px 2px 2px;
        right: 190px;
        height: 4px;
        width: 66px; }
      .marvel-device.iphone6plus.landscape .volume {
        width: 66px;
        height: 4px;
        top: -4px;
        left: calc(100% - 188px - 66px);
        -webkit-border-radius: 2px 2px 0px 0px;
        border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone6plus.landscape .volume:before {
          width: 40px;
          height: 2px;
          top: 2px;
          right: -78px;
          left: auto;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone6plus.landscape .volume:after {
          left: -82px;
          width: 66px;
          height: 4px;
          top: 0;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
      .marvel-device.iphone6plus.landscape .top-bar {
        width: 14px;
        height: 100%;
        left: calc(100% - 68px -  14px);
        top: 0; }
      .marvel-device.iphone6plus.landscape .bottom-bar {
        width: 14px;
        height: 100%;
        left: 68px;
        top: 0; }
      .marvel-device.iphone6plus.landscape .home {
        top: 50%;
        margin-top: -34px;
        margin-left: 0;
        left: 24px; }
      .marvel-device.iphone6plus.landscape .sensor {
        top: 154px;
        left: calc(100% - 54px - 16px); }
      .marvel-device.iphone6plus.landscape .speaker {
        height: 70px;
        width: 6px;
        left: calc(100% - 59px - 6px);
        top: 50%;
        margin-left: 0px;
        margin-top: -35px; }
      .marvel-device.iphone6plus.landscape .camera {
        left: calc(100% - 29px);
        top: 50%;
        margin-left: 0px;
        margin-top: -5px; }
  .marvel-device.iphone5s, .marvel-device.iphone5c {
    padding: 105px 22px;
    background: #2c2b2c;
    width: 320px;
    height: 568px;
    -webkit-border-radius: 50px;
    border-radius: 50px; }
    .marvel-device.iphone5s:before, .marvel-device.iphone5c:before {
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      top: 4px;
      content: '';
      left: 4px;
      -webkit-border-radius: 46px;
      border-radius: 46px;
      background: #1e1e1e;
      z-index: 1; }
    .marvel-device.iphone5s .sleep, .marvel-device.iphone5c .sleep {
      position: absolute;
      top: -4px;
      right: 60px;
      width: 60px;
      height: 4px;
      -webkit-border-radius: 2px 2px 0px 0px;
      border-radius: 2px 2px 0px 0px;
      background: #282727; }
    .marvel-device.iphone5s .volume, .marvel-device.iphone5c .volume {
      position: absolute;
      left: -4px;
      top: 180px;
      z-index: 0;
      height: 27px;
      width: 4px;
      -webkit-border-radius: 2px 0px 0px 2px;
      border-radius: 2px 0px 0px 2px;
      background: #282727; }
      .marvel-device.iphone5s .volume:before, .marvel-device.iphone5c .volume:before {
        position: absolute;
        left: 0px;
        top: -75px;
        height: 35px;
        width: 4px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
      .marvel-device.iphone5s .volume:after, .marvel-device.iphone5c .volume:after {
        position: absolute;
        left: 0px;
        bottom: -64px;
        height: 27px;
        width: 4px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
    .marvel-device.iphone5s .camera, .marvel-device.iphone5c .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 32px;
      left: 50%;
      margin-left: -5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      z-index: 3; }
    .marvel-device.iphone5s .sensor, .marvel-device.iphone5c .sensor {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 60px;
      left: 160px;
      z-index: 3;
      margin-left: -32px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px; }
    .marvel-device.iphone5s .speaker, .marvel-device.iphone5c .speaker {
      background: #292728;
      width: 64px;
      height: 10px;
      position: absolute;
      top: 60px;
      left: 50%;
      margin-left: -32px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      z-index: 3; }
    .marvel-device.iphone5s.landscape, .marvel-device.iphone5c.landscape {
      padding: 22px 105px;
      height: 320px;
      width: 568px; }
      .marvel-device.iphone5s.landscape .sleep, .marvel-device.iphone5c.landscape .sleep {
        right: -4px;
        top: calc(100% - 120px);
        height: 60px;
        width: 4px;
        -webkit-border-radius: 0px 2px 2px 0px;
        border-radius: 0px 2px 2px 0px; }
      .marvel-device.iphone5s.landscape .volume, .marvel-device.iphone5c.landscape .volume {
        width: 27px;
        height: 4px;
        top: -4px;
        left: calc(100% - 180px);
        -webkit-border-radius: 2px 2px 0px 0px;
        border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone5s.landscape .volume:before, .marvel-device.iphone5c.landscape .volume:before {
          width: 35px;
          height: 4px;
          top: 0px;
          right: -75px;
          left: auto;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone5s.landscape .volume:after, .marvel-device.iphone5c.landscape .volume:after {
          bottom: 0px;
          left: -64px;
          z-index: 999;
          height: 4px;
          width: 27px;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
      .marvel-device.iphone5s.landscape .sensor, .marvel-device.iphone5c.landscape .sensor {
        top: 160px;
        left: calc(100% - 60px);
        margin-left: 0px;
        margin-top: -32px; }
      .marvel-device.iphone5s.landscape .speaker, .marvel-device.iphone5c.landscape .speaker {
        height: 64px;
        width: 10px;
        left: calc(100% - 60px);
        top: 50%;
        margin-left: 0px;
        margin-top: -32px; }
      .marvel-device.iphone5s.landscape .camera, .marvel-device.iphone5c.landscape .camera {
        left: calc(100% - 32px);
        top: 50%;
        margin-left: 0px;
        margin-top: -5px; }
  .marvel-device.iphone5s .home {
    -moz-border-radius: 36px;
    -webkit-border-radius: 36px;
    border-radius: 36px;
    width: 68px;
    -webkit-box-shadow: inset 0 0 0 4px #2c2b2c;
    box-shadow: inset 0 0 0 4px #2c2b2c;
    height: 68px;
    position: absolute;
    left: 50%;
    margin-left: -34px;
    bottom: 19px;
    z-index: 3; }
  .marvel-device.iphone5s .top-bar {
    top: 70px;
    position: absolute;
    left: 0; }
  .marvel-device.iphone5s .bottom-bar {
    bottom: 70px;
    position: absolute;
    left: 0; }
  .marvel-device.iphone5s.landscape .home {
    left: 19px;
    bottom: 50%;
    margin-bottom: -34px;
    margin-left: 0px; }
  .marvel-device.iphone5s.landscape .top-bar {
    left: 70px;
    top: 0px;
    width: 3px;
    height: 100%; }
  .marvel-device.iphone5s.landscape .bottom-bar {
    right: 70px;
    left: auto;
    bottom: 0px;
    width: 3px;
    height: 100%; }
  .marvel-device.iphone5s.silver {
    background: #bcbcbc; }
    .marvel-device.iphone5s.silver:before {
      background: #fcfcfc; }
    .marvel-device.iphone5s.silver .volume, .marvel-device.iphone5s.silver .sleep {
      background: #d6d6d6; }
    .marvel-device.iphone5s.silver .top-bar, .marvel-device.iphone5s.silver .bottom-bar {
      background: #eaebec; }
    .marvel-device.iphone5s.silver .home {
      -webkit-box-shadow: inset 0 0 0 4px #bcbcbc;
      box-shadow: inset 0 0 0 4px #bcbcbc; }
  .marvel-device.iphone5s.gold {
    background: #f9e7d3; }
    .marvel-device.iphone5s.gold:before {
      background: #fcfcfc; }
    .marvel-device.iphone5s.gold .volume, .marvel-device.iphone5s.gold .sleep {
      background: #f9e7d3; }
    .marvel-device.iphone5s.gold .top-bar, .marvel-device.iphone5s.gold .bottom-bar {
      background: white; }
    .marvel-device.iphone5s.gold .home {
      -webkit-box-shadow: inset 0 0 0 4px #f9e7d3;
      box-shadow: inset 0 0 0 4px #f9e7d3; }
  .marvel-device.iphone5c {
    background: white;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
    .marvel-device.iphone5c .top-bar, .marvel-device.iphone5c .bottom-bar {
      display: none; }
    .marvel-device.iphone5c .home {
      background: #242324;
      -moz-border-radius: 36px;
      -webkit-border-radius: 36px;
      border-radius: 36px;
      width: 68px;
      height: 68px;
      z-index: 3;
      position: absolute;
      left: 50%;
      margin-left: -34px;
      bottom: 19px; }
      .marvel-device.iphone5c .home:after {
        width: 20px;
        height: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        position: absolute;
        display: block;
        content: '';
        top: 50%;
        left: 50%;
        margin-top: -11px;
        margin-left: -11px; }
    .marvel-device.iphone5c.landscape .home {
      left: 19px;
      bottom: 50%;
      margin-bottom: -34px;
      margin-left: 0px; }
    .marvel-device.iphone5c .volume, .marvel-device.iphone5c .sleep {
      background: #dddddd; }
    .marvel-device.iphone5c.red {
      background: #f96b6c; }
      .marvel-device.iphone5c.red .volume, .marvel-device.iphone5c.red .sleep {
        background: #ed5758; }
    .marvel-device.iphone5c.yellow {
      background: #f2dc60; }
      .marvel-device.iphone5c.yellow .volume, .marvel-device.iphone5c.yellow .sleep {
        background: #e5ce4c; }
    .marvel-device.iphone5c.green {
      background: #97e563; }
      .marvel-device.iphone5c.green .volume, .marvel-device.iphone5c.green .sleep {
        background: #85d94d; }
    .marvel-device.iphone5c.blue {
      background: #33a2db; }
      .marvel-device.iphone5c.blue .volume, .marvel-device.iphone5c.blue .sleep {
        background: #2694cd; }
  .marvel-device.iphone4s {
    padding: 129px 27px;
    width: 320px;
    height: 480px;
    background: #686868;
    -webkit-border-radius: 54px;
    border-radius: 54px; }
    .marvel-device.iphone4s:before {
      content: '';
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      top: 4px;
      left: 4px;
      z-index: 1;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      background: #1e1e1e; }
    .marvel-device.iphone4s .top-bar {
      top: 60px;
      position: absolute;
      left: 0; }
    .marvel-device.iphone4s .bottom-bar {
      bottom: 90px;
      position: absolute;
      left: 0; }
    .marvel-device.iphone4s .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 72px;
      left: 134px;
      z-index: 3;
      margin-left: -5px;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .marvel-device.iphone4s .speaker {
      background: #292728;
      width: 64px;
      height: 10px;
      position: absolute;
      top: 72px;
      left: 50%;
      z-index: 3;
      margin-left: -32px;
      -webkit-border-radius: 5px;
      border-radius: 5px; }
    .marvel-device.iphone4s .sensor {
      background: #292728;
      width: 40px;
      height: 10px;
      position: absolute;
      top: 36px;
      left: 50%;
      z-index: 3;
      margin-left: -20px;
      -webkit-border-radius: 5px;
      border-radius: 5px; }
    .marvel-device.iphone4s .home {
      background: #242324;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 72px;
      height: 72px;
      z-index: 3;
      position: absolute;
      left: 50%;
      margin-left: -36px;
      bottom: 30px; }
      .marvel-device.iphone4s .home:after {
        width: 20px;
        height: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        -webkit-border-radius: 4px;
        border-radius: 4px;
        position: absolute;
        display: block;
        content: '';
        top: 50%;
        left: 50%;
        margin-top: -11px;
        margin-left: -11px; }
    .marvel-device.iphone4s .sleep {
      position: absolute;
      top: -4px;
      right: 60px;
      width: 60px;
      height: 4px;
      -webkit-border-radius: 2px 2px 0px 0px;
      border-radius: 2px 2px 0px 0px;
      background: #4D4D4D; }
    .marvel-device.iphone4s .volume {
      position: absolute;
      left: -4px;
      top: 160px;
      height: 27px;
      width: 4px;
      -webkit-border-radius: 2px 0px 0px 2px;
      border-radius: 2px 0px 0px 2px;
      background: #4D4D4D; }
      .marvel-device.iphone4s .volume:before {
        position: absolute;
        left: 0px;
        top: -70px;
        height: 35px;
        width: 4px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
      .marvel-device.iphone4s .volume:after {
        position: absolute;
        left: 0px;
        bottom: -64px;
        height: 27px;
        width: 4px;
        -webkit-border-radius: 2px 0px 0px 2px;
        border-radius: 2px 0px 0px 2px;
        background: inherit;
        content: '';
        display: block; }
    .marvel-device.iphone4s.landscape {
      padding: 27px 129px;
      height: 320px;
      width: 480px; }
      .marvel-device.iphone4s.landscape .bottom-bar {
        left: 90px;
        bottom: 0px;
        height: 100%;
        width: 3px; }
      .marvel-device.iphone4s.landscape .top-bar {
        left: calc(100% - 60px);
        top: 0px;
        height: 100%;
        width: 3px; }
      .marvel-device.iphone4s.landscape .camera {
        top: 134px;
        left: calc(100% - 72px);
        margin-left: 0; }
      .marvel-device.iphone4s.landscape .speaker {
        top: 50%;
        margin-left: 0;
        margin-top: -32px;
        left: calc(100% - 72px);
        width: 10px;
        height: 64px; }
      .marvel-device.iphone4s.landscape .sensor {
        height: 40px;
        width: 10px;
        left: calc(100% - 36px);
        top: 50%;
        margin-left: 0;
        margin-top: -20px; }
      .marvel-device.iphone4s.landscape .home {
        left: 30px;
        bottom: 50%;
        margin-left: 0;
        margin-bottom: -36px; }
      .marvel-device.iphone4s.landscape .sleep {
        height: 60px;
        width: 4px;
        right: -4px;
        top: calc(100% - 120px);
        -webkit-border-radius: 0px 2px 2px 0px;
        border-radius: 0px 2px 2px 0px; }
      .marvel-device.iphone4s.landscape .volume {
        top: -4px;
        left: calc(100% - 187px);
        height: 4px;
        width: 27px;
        -webkit-border-radius: 2px 2px 0px 0px;
        border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone4s.landscape .volume:before {
          right: -70px;
          left: auto;
          top: 0px;
          width: 35px;
          height: 4px;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
        .marvel-device.iphone4s.landscape .volume:after {
          width: 27px;
          height: 4px;
          bottom: 0px;
          left: -64px;
          -webkit-border-radius: 2px 2px 0px 0px;
          border-radius: 2px 2px 0px 0px; }
    .marvel-device.iphone4s.silver {
      background: #bcbcbc; }
      .marvel-device.iphone4s.silver:before {
        background: #fcfcfc; }
      .marvel-device.iphone4s.silver .home {
        background: #fcfcfc;
        -webkit-box-shadow: inset 0 0 0 1px #bcbcbc;
        box-shadow: inset 0 0 0 1px #bcbcbc; }
        .marvel-device.iphone4s.silver .home:after {
          border: 1px solid rgba(0, 0, 0, 0.2); }
      .marvel-device.iphone4s.silver .volume, .marvel-device.iphone4s.silver .sleep {
        background: #d6d6d6; }
  .marvel-device.nexus5 {
    padding: 50px 15px 50px 15px;
    width: 320px;
    height: 568px;
    background: #1e1e1e;
    -webkit-border-radius: 20px;
    border-radius: 20px; }
    .marvel-device.nexus5:before {
      -webkit-border-radius: 600px / 50px;
      border-radius: 600px / 50px;
      background: inherit;
      content: '';
      top: 0;
      position: absolute;
      height: 103.1%;
      width: calc(100% - 26px);
      top: 50%;
      left: 50%;
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%); }
    .marvel-device.nexus5 .top-bar {
      width: calc(100% - 8px);
      height: calc(100% - 6px);
      position: absolute;
      top: 3px;
      left: 4px;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      background: #181818; }
      .marvel-device.nexus5 .top-bar:before {
        -webkit-border-radius: 600px / 50px;
        border-radius: 600px / 50px;
        background: inherit;
        content: '';
        top: 0;
        position: absolute;
        height: 103.0%;
        width: calc(100% - 26px);
        top: 50%;
        left: 50%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%); }
    .marvel-device.nexus5 .bottom-bar {
      display: none; }
    .marvel-device.nexus5 .sleep {
      width: 3px;
      position: absolute;
      left: -3px;
      top: 110px;
      height: 100px;
      background: inherit;
      -webkit-border-radius: 2px 0px 0px 2px;
      border-radius: 2px 0px 0px 2px; }
    .marvel-device.nexus5 .volume {
      width: 3px;
      position: absolute;
      right: -3px;
      top: 70px;
      height: 45px;
      background: inherit;
      -webkit-border-radius: 0px 2px 2px 0px;
      border-radius: 0px 2px 2px 0px; }
    .marvel-device.nexus5 .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 18px;
      left: 50%;
      z-index: 3;
      margin-left: -5px;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
      .marvel-device.nexus5 .camera:before {
        background: #3c3d3d;
        width: 6px;
        height: 6px;
        content: '';
        display: block;
        position: absolute;
        top: 2px;
        left: -100px;
        z-index: 3;
        -webkit-border-radius: 100%;
        border-radius: 100%; }
    .marvel-device.nexus5.landscape {
      padding: 15px 50px 15px 50px;
      height: 320px;
      width: 568px; }
      .marvel-device.nexus5.landscape:before {
        width: 103.1%;
        height: calc(100% - 26px);
        -webkit-border-radius: 50px / 600px;
        border-radius: 50px / 600px; }
      .marvel-device.nexus5.landscape .top-bar {
        left: 3px;
        top: 4px;
        height: calc(100% - 8px);
        width: calc(100% - 6px); }
        .marvel-device.nexus5.landscape .top-bar:before {
          width: 103%;
          height: calc(100% - 26px);
          -webkit-border-radius: 50px / 600px;
          border-radius: 50px / 600px; }
      .marvel-device.nexus5.landscape .sleep {
        height: 3px;
        width: 100px;
        left: calc(100% - 210px);
        top: -3px;
        -webkit-border-radius: 2px 2px 0px 0px;
        border-radius: 2px 2px 0px 0px; }
      .marvel-device.nexus5.landscape .volume {
        height: 3px;
        width: 45px;
        right: 70px;
        top: 100%;
        -webkit-border-radius: 0px 0px 2px 2px;
        border-radius: 0px 0px 2px 2px; }
      .marvel-device.nexus5.landscape .camera {
        top: 50%;
        left: calc(100% - 18px);
        margin-left: 0;
        margin-top: -5px; }
        .marvel-device.nexus5.landscape .camera:before {
          top: -100px;
          left: 2px; }
  .marvel-device.s5 {
    padding: 60px 18px;
    -webkit-border-radius: 42px;
    border-radius: 42px;
    width: 320px;
    height: 568px;
    background: #bcbcbc; }
    .marvel-device.s5:before, .marvel-device.s5:after {
      width: calc(100% - 52px);
      content: '';
      display: block;
      height: 26px;
      background: inherit;
      position: absolute;
      -webkit-border-radius: 500px / 40px;
      border-radius: 500px / 40px;
      left: 50%;
      -moz-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%); }
    .marvel-device.s5:before {
      top: -7px; }
    .marvel-device.s5:after {
      bottom: -7px; }
    .marvel-device.s5 .bottom-bar {
      display: none; }
    .marvel-device.s5 .top-bar {
      -webkit-border-radius: 37px;
      border-radius: 37px;
      width: calc(100% - 10px);
      height: calc(100% - 10px);
      top: 5px;
      left: 5px;
      background: radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 0 0, radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 3px 3px;
      background-color: white;
      background-size: 4px 4px;
      background-position: center;
      z-index: 2;
      position: absolute; }
      .marvel-device.s5 .top-bar:before, .marvel-device.s5 .top-bar:after {
        width: calc(100% - 48px);
        content: '';
        display: block;
        height: 26px;
        background: inherit;
        position: absolute;
        -webkit-border-radius: 500px / 40px;
        border-radius: 500px / 40px;
        left: 50%;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%); }
      .marvel-device.s5 .top-bar:before {
        top: -7px; }
      .marvel-device.s5 .top-bar:after {
        bottom: -7px; }
    .marvel-device.s5 .sleep {
      width: 3px;
      position: absolute;
      left: -3px;
      top: 100px;
      height: 100px;
      background: #cecece;
      -webkit-border-radius: 2px 0px 0px 2px;
      border-radius: 2px 0px 0px 2px; }
    .marvel-device.s5 .speaker {
      width: 68px;
      height: 8px;
      position: absolute;
      top: 20px;
      display: block;
      z-index: 3;
      left: 50%;
      margin-left: -34px;
      background-color: #bcbcbc;
      background-position: top left;
      -webkit-border-radius: 4px;
      border-radius: 4px; }
    .marvel-device.s5 .sensor {
      display: block;
      position: absolute;
      top: 20px;
      right: 110px;
      background: #3c3d3d;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 8px;
      height: 8px;
      z-index: 3; }
      .marvel-device.s5 .sensor:after {
        display: block;
        content: '';
        position: absolute;
        top: 0px;
        right: 12px;
        background: #3c3d3d;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        width: 8px;
        height: 8px;
        z-index: 3; }
    .marvel-device.s5 .camera {
      display: block;
      position: absolute;
      top: 24px;
      right: 42px;
      background: black;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 10px;
      height: 10px;
      z-index: 3; }
      .marvel-device.s5 .camera:before {
        width: 4px;
        height: 4px;
        background: #3c3d3d;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        position: absolute;
        content: '';
        top: 50%;
        left: 50%;
        margin-top: -2px;
        margin-left: -2px; }
    .marvel-device.s5 .home {
      position: absolute;
      z-index: 3;
      bottom: 17px;
      left: 50%;
      width: 70px;
      height: 20px;
      background: white;
      -webkit-border-radius: 18px;
      border-radius: 18px;
      display: block;
      margin-left: -35px;
      border: 2px solid black; }
    .marvel-device.s5.landscape {
      padding: 18px 60px;
      height: 320px;
      width: 568px; }
      .marvel-device.s5.landscape:before, .marvel-device.s5.landscape:after {
        height: calc(100% - 52px);
        width: 26px;
        -webkit-border-radius: 40px / 500px;
        border-radius: 40px / 500px;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      .marvel-device.s5.landscape:before {
        top: 50%;
        left: -7px; }
      .marvel-device.s5.landscape:after {
        top: 50%;
        left: auto;
        right: -7px; }
      .marvel-device.s5.landscape .top-bar:before, .marvel-device.s5.landscape .top-bar:after {
        width: 26px;
        height: calc(100% - 48px);
        -webkit-border-radius: 40px / 500px;
        border-radius: 40px / 500px;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
      .marvel-device.s5.landscape .top-bar:before {
        right: -7px;
        top: 50%;
        left: auto; }
      .marvel-device.s5.landscape .top-bar:after {
        left: -7px;
        top: 50%;
        right: auto; }
      .marvel-device.s5.landscape .sleep {
        height: 3px;
        width: 100px;
        left: calc(100% - 200px);
        top: -3px;
        -webkit-border-radius: 2px 2px 0px 0px;
        border-radius: 2px 2px 0px 0px; }
      .marvel-device.s5.landscape .speaker {
        height: 68px;
        width: 8px;
        left: calc(100% - 20px);
        top: 50%;
        margin-left: 0;
        margin-top: -34px; }
      .marvel-device.s5.landscape .sensor {
        right: 20px;
        top: calc(100% - 110px); }
        .marvel-device.s5.landscape .sensor:after {
          left: -12px;
          right: 0px; }
      .marvel-device.s5.landscape .camera {
        top: calc(100% - 42px);
        right: 24px; }
      .marvel-device.s5.landscape .home {
        width: 20px;
        height: 70px;
        bottom: 50%;
        margin-bottom: -35px;
        margin-left: 0;
        left: 17px; }
    .marvel-device.s5.black {
      background: #1e1e1e; }
      .marvel-device.s5.black .speaker {
        background: black; }
      .marvel-device.s5.black .sleep {
        background: #1e1e1e; }
      .marvel-device.s5.black .top-bar {
        background: radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 0 0, radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 3px 3px;
        background-color: #2c2b2c;
        background-size: 4px 4px; }
      .marvel-device.s5.black .home {
        background: #2c2b2c; }
  .marvel-device.lumia920 {
    padding: 80px 35px 125px 35px;
    background: #ffdd00;
    width: 320px;
    height: 533px;
    -moz-border-radius: 40px / 3px;
    -webkit-border-radius: 40px / 3px;
    border-radius: 40px / 3px; }
    .marvel-device.lumia920 .bottom-bar {
      display: none; }
    .marvel-device.lumia920 .top-bar {
      width: calc(100% - 24px);
      height: calc(100% - 32px);
      position: absolute;
      top: 16px;
      left: 12px;
      -moz-border-radius: 24px;
      -webkit-border-radius: 24px;
      border-radius: 24px;
      background: black;
      z-index: 1; }
      .marvel-device.lumia920 .top-bar:before {
        background: #1e1e1e;
        display: block;
        content: '';
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        top: 2px;
        left: 2px;
        position: absolute;
        -moz-border-radius: 22px;
        -webkit-border-radius: 22px;
        border-radius: 22px; }
    .marvel-device.lumia920 .volume {
      width: 3px;
      position: absolute;
      top: 130px;
      height: 100px;
      background: #1e1e1e;
      right: -3px;
      -webkit-border-radius: 0px 2px 2px 0px;
      border-radius: 0px 2px 2px 0px; }
      .marvel-device.lumia920 .volume:before {
        width: 3px;
        position: absolute;
        top: 190px;
        content: '';
        display: block;
        height: 50px;
        background: inherit;
        right: 0px;
        -webkit-border-radius: 0px 2px 2px 0px;
        border-radius: 0px 2px 2px 0px; }
      .marvel-device.lumia920 .volume:after {
        width: 3px;
        position: absolute;
        top: 460px;
        content: '';
        display: block;
        height: 50px;
        background: inherit;
        right: 0px;
        -webkit-border-radius: 0px 2px 2px 0px;
        border-radius: 0px 2px 2px 0px; }
    .marvel-device.lumia920 .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 34px;
      right: 130px;
      z-index: 5;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px; }
    .marvel-device.lumia920 .speaker {
      background: #292728;
      width: 64px;
      height: 10px;
      position: absolute;
      top: 38px;
      left: 50%;
      margin-left: -32px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      z-index: 3; }
    .marvel-device.lumia920.landscape {
      padding: 35px 80px 35px 125px;
      height: 320px;
      width: 568px;
      -moz-border-radius: 2px / 100px;
      -webkit-border-radius: 2px / 100px;
      border-radius: 2px / 100px; }
      .marvel-device.lumia920.landscape .top-bar {
        height: calc(100% - 24px);
        width: calc(100% - 32px);
        left: 16px;
        top: 12px; }
      .marvel-device.lumia920.landscape .volume {
        height: 3px;
        right: 130px;
        width: 100px;
        top: 100%;
        -webkit-border-radius: 0px 0px 2px 2px;
        border-radius: 0px 0px 2px 2px; }
        .marvel-device.lumia920.landscape .volume:before {
          height: 3px;
          right: 190px;
          top: 0px;
          width: 50px;
          -webkit-border-radius: 0px 0px 2px 2px;
          border-radius: 0px 0px 2px 2px; }
        .marvel-device.lumia920.landscape .volume:after {
          height: 3px;
          right: 430px;
          top: 0px;
          width: 50px;
          -webkit-border-radius: 0px 0px 2px 2px;
          border-radius: 0px 0px 2px 2px; }
      .marvel-device.lumia920.landscape .camera {
        right: 30px;
        top: calc(100% - 140px); }
      .marvel-device.lumia920.landscape .speaker {
        width: 10px;
        height: 64px;
        top: 50%;
        margin-left: 0;
        margin-top: -32px;
        left: calc(100% - 48px); }
    .marvel-device.lumia920.black {
      background: black; }
    .marvel-device.lumia920.white {
      background: white;
      -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
    .marvel-device.lumia920.blue {
      background: #00acdd; }
    .marvel-device.lumia920.red {
      background: #CC3E32; }
  .marvel-device.htc-one {
    padding: 72px 25px 100px 25px;
    width: 320px;
    height: 568px;
    background: #bebebe;
    -webkit-border-radius: 34px;
    border-radius: 34px; }
    .marvel-device.htc-one:before {
      content: '';
      display: block;
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      position: absolute;
      top: 2px;
      left: 2px;
      background: #adadad;
      -webkit-border-radius: 32px;
      border-radius: 32px; }
    .marvel-device.htc-one:after {
      content: '';
      display: block;
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      top: 4px;
      left: 4px;
      background: #eeeeee;
      -webkit-border-radius: 30px;
      border-radius: 30px; }
    .marvel-device.htc-one .top-bar {
      width: calc(100% - 4px);
      height: 635px;
      position: absolute;
      background: #424242;
      top: 50px;
      z-index: 1;
      left: 2px; }
      .marvel-device.htc-one .top-bar:before {
        content: '';
        position: absolute;
        width: calc(100% - 4px);
        height: 100%;
        position: absolute;
        background: black;
        top: 0px;
        z-index: 1;
        left: 2px; }
    .marvel-device.htc-one .bottom-bar {
      display: none; }
    .marvel-device.htc-one .speaker {
      height: 16px;
      width: 216px;
      display: block;
      position: absolute;
      top: 22px;
      z-index: 2;
      left: 50%;
      margin-left: -108px;
      background: radial-gradient(#343434 25%, transparent 50%) 0 0, radial-gradient(#343434 25%, transparent 50%) 4px 4px;
      background-size: 4px 4px;
      background-position: top left; }
      .marvel-device.htc-one .speaker:after {
        content: '';
        height: 16px;
        width: 216px;
        display: block;
        position: absolute;
        top: 676px;
        z-index: 2;
        left: 50%;
        margin-left: -108px;
        background: inherit; }
    .marvel-device.htc-one .camera {
      display: block;
      position: absolute;
      top: 18px;
      right: 38px;
      background: #3c3d3d;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 24px;
      height: 24px;
      z-index: 3; }
      .marvel-device.htc-one .camera:before {
        width: 8px;
        height: 8px;
        background: black;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        position: absolute;
        content: '';
        top: 50%;
        left: 50%;
        margin-top: -4px;
        margin-left: -4px; }
    .marvel-device.htc-one .sensor {
      display: block;
      position: absolute;
      top: 29px;
      left: 60px;
      background: #3c3d3d;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      width: 8px;
      height: 8px;
      z-index: 3; }
      .marvel-device.htc-one .sensor:after {
        display: block;
        content: '';
        position: absolute;
        top: 0px;
        right: 12px;
        background: #3c3d3d;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        width: 8px;
        height: 8px;
        z-index: 3; }
    .marvel-device.htc-one.landscape {
      padding: 25px 72px 25px 100px;
      height: 320px;
      width: 568px; }
      .marvel-device.htc-one.landscape .top-bar {
        height: calc(100% - 4px);
        width: 635px;
        left: calc(100% - 685px);
        top: 2px; }
      .marvel-device.htc-one.landscape .speaker {
        width: 16px;
        height: 216px;
        left: calc(100% - 38px);
        top: 50%;
        margin-left: 0px;
        margin-top: -108px; }
        .marvel-device.htc-one.landscape .speaker:after {
          width: 16px;
          height: 216px;
          left: calc(100% - 692px);
          top: 50%;
          margin-left: 0;
          margin-top: -108px; }
      .marvel-device.htc-one.landscape .camera {
        right: 18px;
        top: calc(100% - 38px); }
      .marvel-device.htc-one.landscape .sensor {
        left: calc(100% - 29px);
        top: 60px; }
        .marvel-device.htc-one.landscape .sensor :after {
          right: 0;
          top: -12px; }
  .marvel-device.ipad {
    width: 576px;
    height: 768px;
    padding: 90px 25px;
    background: #242324;
    -webkit-border-radius: 44px;
    border-radius: 44px; }
    .marvel-device.ipad:before {
      width: calc(100% - 8px);
      height: calc(100% - 8px);
      position: absolute;
      content: '';
      display: block;
      top: 4px;
      left: 4px;
      -webkit-border-radius: 40px;
      border-radius: 40px;
      background: #1e1e1e; }
    .marvel-device.ipad .camera {
      background: #3c3d3d;
      width: 10px;
      height: 10px;
      position: absolute;
      top: 44px;
      left: 50%;
      margin-left: -5px;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .marvel-device.ipad .top-bar, .marvel-device.ipad .bottom-bar {
      display: none; }
    .marvel-device.ipad .home {
      background: #242324;
      -webkit-border-radius: 36px;
      border-radius: 36px;
      width: 50px;
      height: 50px;
      position: absolute;
      left: 50%;
      margin-left: -25px;
      bottom: 22px; }
      .marvel-device.ipad .home:after {
        width: 15px;
        height: 15px;
        margin-top: -8px;
        margin-left: -8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        -webkit-border-radius: 4px;
        border-radius: 4px;
        position: absolute;
        display: block;
        content: '';
        top: 50%;
        left: 50%; }
    .marvel-device.ipad.landscape {
      height: 576px;
      width: 768px;
      padding: 25px 90px; }
      .marvel-device.ipad.landscape .camera {
        left: calc(100% - 44px);
        top: 50%;
        margin-left: 0;
        margin-top: -5px; }
      .marvel-device.ipad.landscape .home {
        top: 50%;
        left: 22px;
        margin-left: 0;
        margin-top: -25px; }
    .marvel-device.ipad.silver {
      background: #bcbcbc; }
      .marvel-device.ipad.silver:before {
        background: #fcfcfc; }
      .marvel-device.ipad.silver .home {
        background: #fcfcfc;
        -webkit-box-shadow: inset 0 0 0 1px #bcbcbc;
        box-shadow: inset 0 0 0 1px #bcbcbc; }
        .marvel-device.ipad.silver .home:after {
          border: 1px solid rgba(0, 0, 0, 0.2); }

body,
html {
  width: 100%;
  height: 100%;
  background: white;
  font-family: 'Open Sans', sans-serif; }

* {
  outline: none !important; }

h1, h2, h3, h4, h5, h6 {
  padding: 4px 0; }

h1 {
  font-size: 28px; }

h2 {
  font-size: 22px; }

h3 {
  font-size: 18px; }

.visible-authed {
  display: none; }

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  max-width: 768px;
  max-height: 1004px;
  background: white;
  z-index: 10;
  overflow: hidden;
  overflow-y: scroll; }
  .wrapper .pages {
    position: relative; }
    .wrapper .pages .navbar {
      margin-bottom: -15px; }
    .wrapper .pages .page {
      display: none; }
      .wrapper .pages .page.active {
        display: block; }
      .wrapper .pages .page .pad {
        padding: 5px;
        margin: 5px; }
      .wrapper .pages .page .top-btn {
        margin-top: 20px; }
    .wrapper .pages #page-login .login-form {
      margin-top: 20px; }
    .wrapper .pages #page-login input {
      max-width: 250px; }
    .wrapper .pages #page-numbers label {
      font-size: 12pt;
      display: block;
      line-height: 40px; }
    .wrapper .pages #page-numbers input {
      max-width: 300px; }
    .wrapper .pages #page-object .open-btn {
      display: block;
      float: left;
      margin: 20px 10px; }
    .wrapper .pages #page-object .extrainfo {
      float: right;
      text-align: right;
      padding: 10px; }
    .wrapper .pages #page-object .current-reservations {
      list-style: none;
      padding-left: 0; }
      .wrapper .pages #page-object .current-reservations .info {
        display: none; }
        .wrapper .pages #page-object .current-reservations .info:first-child {
          display: block;
          color: #37d;
          font-size: 12pt;
          font-weight: bold;
          margin-top: 10px;
          margin-bottom: 5px; }
    .wrapper .pages #page-object .res-title {
      display: block;
      margin-bottom: 4px; }
      .wrapper .pages #page-object .res-title.has-active {
        display: none; }
    .wrapper .pages #page-object .week-browser {
      text-align: center; }
      .wrapper .pages #page-object .week-browser button {
        margin-bottom: 3px; }
    .wrapper .pages #page-object .object-days {
      list-style: none;
      padding: 0;
      margin: 10px -10px;
      border: 1px solid #777;
      border-style: solid none;
      text-shadow: 0 1px rgba(255, 255, 255, 0.25); }
      .wrapper .pages #page-object .object-days > li {
        position: relative;
        display: block;
        padding: 0;
        background: #eee;
        border-top: 1px solid #777; }
        .wrapper .pages #page-object .object-days > li.disabled {
          opacity: .5; }
        .wrapper .pages #page-object .object-days > li:first-child {
          border-top: none; }
      .wrapper .pages #page-object .object-days .weekday {
        font-size: 25px;
        line-height: 50px;
        display: block;
        margin-left: 10px; }
      .wrapper .pages #page-object .object-days .date {
        font-size: 17px;
        display: block;
        position: absolute;
        top: 0;
        height: 50px;
        left: 140px;
        width: 70px;
        text-align: right;
        margin-right: 10px;
        line-height: 50px; }
      .wrapper .pages #page-object .object-days .object-times {
        list-style: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 220px; }
        .wrapper .pages #page-object .object-days .object-times li {
          font-size: 18px;
          font-weight: 300;
          background: #6d6;
          display: block;
          float: left;
          height: 100%;
          line-height: 50px;
          text-align: center;
          white-space: nowrap;
          font-weight: 500;
          cursor: pointer;
          box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.2); }
          .wrapper .pages #page-object .object-days .object-times li:active {
            background: #90e690;
            box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.4); }
          .wrapper .pages #page-object .object-days .object-times li:active {
            background: #3cd43c; }
          .wrapper .pages #page-object .object-days .object-times li.disabled {
            background: #6d6 !important;
            box-shadow: none !important;
            cursor: default;
            opacity: .5; }
          .wrapper .pages #page-object .object-days .object-times li.current {
            box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.2), inset 0 0 0 4px rgba(255, 255, 255, 0.7); }
          .wrapper .pages #page-object .object-days .object-times li.booked {
            background: #f66; }
            .wrapper .pages #page-object .object-days .object-times li.booked:active {
              background: #ff9999; }
            .wrapper .pages #page-object .object-days .object-times li.booked:active:active {
              background: #ff3333; }
            .wrapper .pages #page-object .object-days .object-times li.booked.disabled {
              background: #f66 !important;
              box-shadow: none !important;
              cursor: default; }
            .wrapper .pages #page-object .object-days .object-times li.booked.shared {
              background: #f66;
              background: linear-gradient(to right bottom, #f66 50%, #6da 50%); }
          .wrapper .pages #page-object .object-days .object-times li.booked-owned {
            background: #59f; }
            .wrapper .pages #page-object .object-days .object-times li.booked-owned:active {
              background: #88b8ff; }
            .wrapper .pages #page-object .object-days .object-times li.booked-owned:active:active {
              background: #227aff; }
            .wrapper .pages #page-object .object-days .object-times li.booked-owned.disabled {
              background: #59f !important;
              box-shadow: none !important;
              cursor: default; }
            .wrapper .pages #page-object .object-days .object-times li.booked-owned.shared {
              background: #59f;
              background: linear-gradient(to right bottom, #59f 50%, #6da 50%); }
              .wrapper .pages #page-object .object-days .object-times li.booked-owned.shared.booked {
                background: linear-gradient(to right bottom, #59f 50%, #f00 50%); }

.sweet-alert button.hidden-custom {
  display: none !important; }

.tablet-wrapper {
  width: 818px !important;
  height: 1184px !important;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto; }

.list-group .list-group-item {
  background: #fafafa; }
  .list-group .list-group-item:active {
    background: #dfdfdf; }

.shared-check {
  color: black;
  display: block;
  margin: 12px 0; }
  .shared-check input {
    margin-right: 8px; }

@media (max-width: 818px), (max-height: 1184px) {
  .wrapper {
    margin: 0 auto;
    max-width: none;
    max-height: none;
    overflow: visible; }

  .tablet-wrapper {
    display: none !important; } }
@media (min-width: 768px) {
  .wrapper .multiline {
    padding: 4px;
    line-height: 20px; } }
@media (max-width: 740px) {
  #object > h1 > button {
    display: block !important;
    float: none !important;
    margin-bottom: 15px !important; }

  .object-times {
    position: static !important;
    height: 50px !important;
    border-top: 1px solid #777; } }
@media (max-width: 600px) {
  .object-times li {
    font-size: 10pt !important; } }
@media (max-width: 480px) {
  .object-times li {
    font-size: 9pt !important; } }
@media (max-width: 320px) {
  .object-times li {
    font-size: 8.5pt !important; } }

/*# sourceMappingURL=style.css.map */