/* Use, tweak, improve, enjoy. Just link back! */
/* http://marvelapp.com */
/* http://twitter.com/olegtsaplin */

.device, .device div, *:before, *:after {
  -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1);
  -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

section .wrap {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 0;
}

.device .screen {
  width: 100%;
  position: relative;
  height: 100%;
  z-index: 2;
  text-align: left;
  text-indent: -999px;
  display: block;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: 0 0 0 3px #111;
  box-shadow: 0 0 0 3px #111;
}

.device .screen:before {
  content: '';
  display: block;
  text-indent: -9999px;
  height: 34px;
  display: inline-block;
  text-align: left;
  width: 96px;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 50%;
  margin-left: -48px;
  background: transparent;
}

#iphone5s .device, #iphone5c .device {
  padding: 105px 22px;
  margin: 0 auto;
  background: #2c2b2c;
  position: relative;
  width: 320px;
  height: 568px;
  display: block;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

#iphone5s.landscape .device, #iphone5c.landscape .device {
  padding: 22px 105px;
  height: 320px;
  width: 568px;
}

#iphone5s .inner, #iphone5c .inner {
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  position: absolute;
  top: 4px;
  left: 4px;
  -moz-border-radius: 46px;
  -webkit-border-radius: 46px;
  border-radius: 46px;
  background: #1e1e1e;
  z-index: 1;
}

#iphone5s .sleep, #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;
}

#iphone5s.landscape .sleep, #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;
}

#iphone5s .volume, #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;
}

#iphone5s.landscape .volume, #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;
}

#iphone5s .volume:before, #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;
}

#iphone5s.landscape .volume:before, #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;
}

#iphone5s .volume:after, #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;
}

#iphone5s.landscape .volume:after, #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;
}

#iphone5s .camera, #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;
}

#iphone5s.landscape .camera, #iphone5c.landscape .camera {
  left: calc(100% - 32px);
  top: 50%;
  margin-left: 0px;
  margin-top: -5px;
}

#iphone5s .sensor, #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;
}

#iphone5s.landscape .sensor, #iphone5c.landscape .sensor {
  top: 160px;
  left: calc(100% - 60px);
  margin-left: 0px;
  margin-top: -32px;
}

#iphone5s .speaker, #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;
}

#iphone5s.landscape .speaker, #iphone5c.landscape .speaker {
  height: 64px;
  width: 10px;
  left: calc(100% - 60px);
  top: 50%;
  margin-left: 0px;
  margin-top: -32px;
}

#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;
}

#iphone5s.landscape .home {
  left: 19px;
  bottom: 50%;
  margin-bottom: -34px;
  margin-left: 0px;
}

iframe { position: absolute; }

#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;
}

#iphone5s.landscape .home {
  left: 19px;
  bottom: 50%;
  margin-bottom: -34px;
  margin-left: 0px;
}

#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;
}

#iphone5c.landscape .home {
  left: 19px;
  bottom: 50%;
  margin-bottom: -34px;
  margin-left: 0px;
}

#iphone5s .home:after {
  display: none;
}

#iphone5s .top-bar {
  top: 70px;
  position: absolute;
  left: 0;
}

#iphone5s .bottom-bar {
  bottom: 70px;
  position: absolute;
  left: 0;
}

#iphone5s.silver .device, #iphone4s.silver .device, #ipad.silver .device, #ipad-landscape.silver .device {
  background: #bcbcbc;
}

#iphone5s.gold .device {
  background: #f1e2d0;
}

#iphone5s.silver .inner, #iphone5s.gold .inner, #iphone4s.silver .inner, #ipad.silver .inner, #ipad-landscape .inner {
  background: #fcfcfc;
}

#iphone5s.silver .home {
  -webkit-box-shadow: inset 0 0 0 4px #bcbcbc;
  box-shadow: inset 0 0 0 4px #bcbcbc;
}

#iphone5s.gold .home {
  -webkit-box-shadow: inset 0 0 0 4px #f1e2d0;
  box-shadow: inset 0 0 0 4px #f1e2d0;
}

.silver .home:after, .gold .home:after {
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

#iphone5s.silver .top-bar, #iphone5s.silver .bottom-bar, #iphone5s.gold .top-bar, #iphone5s.gold .bottom-bar {
  background: #eaebec;
}

#iphone5s.silver .volume, #iphone5s.silver .sleep,  #iphone4s.silver .volume, #iphone4s.silver .sleep {
  background: #d6d6d6;
}