.device-mock {
  display:inline-block;
  position:relative;
  -webkit-box-sizing:content-box !important;
  box-sizing:content-box !important;
  z-index: 0;
  background: #fdfdfd;
  -webkit-box-shadow: inset 0 0 1em 0 rgba(0, 0, 0, 0.35);
  box-shadow:
    inset 0 0 1em 0 rgba(0, 0, 0, 0.35),
    0 1rem 3rem rgba(60, 68, 66, .25),
    0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.device-mock .screen {
  width:100%;
  position:relative;
  height:100%;
  z-index:3;
  background:white;
  overflow:hidden;
  display:block;
  border-radius:.1em;
  -webkit-box-shadow:0 0 0 .2em #efefef;
  box-shadow:0 0 0 .2em #efefef;
}

.device-mock.iphone5s {
  padding:6.25em 1.25em;
  width:20em;
  height:35.5em;
  border-radius:3em;
  box-shadow:
    inset 0 0 .5em 0 rgba(0, 0, 0, 0.35),
    0 1rem 3rem rgba(60, 68, 66, .25),
    0 0.5rem 1rem rgba(0, 0, 0, 0.1);

}

.device-mock.iphone5s:before {
  width:calc(100% - .4em);
  height:calc(100% - .4em);
  position:absolute;
  top:.2em;
  content:'';
  left:.2em;
  border-radius:2.9em;
  /* background:#fcfcfc; */
  z-index:1;
}

.device-mock.iphone5s .speaker {
  background: #efefef;
  width:4em;
  height:.4em;
  position:absolute;
  top:3.5em;
  left:50%;
  margin-left:-2em;
  border-radius:.25em;
  z-index:3;
}

.device-mock.iphone5s .home {
  border-radius:2.75em;
  width:4.5em;
  -webkit-box-shadow:inset 0 0 0 .25em #efefef;
  box-shadow:inset 0 0 0 .25em #efefef;
  height:4.5em;
  position:absolute;
  left:50%;
  margin-left:-2.25em;
  bottom:1em;
  z-index:3;
}

.device-mock.iphone-x {
  width: 18.75em;
  height: 41.8em;
  padding: 1.3em;
  border-radius: 3.3em;
}

.device-mock.iphone-x .overflow {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  border-radius:3.3em;
  overflow:hidden;
}

.device-mock.iphone-x .shadow {
  border-radius: 100%;
  width: 4.5em;
  height: 4.5em;
  position: absolute;
  background: radial-gradient(ellipse at center, rgba(192, 192, 192, 0.3) 0%, rgba(255,255,255,0) 70%);
}

.device-mock.iphone-x .shadow-top-left{
  top:-1em;
  left:-1em;
}

.device-mock.iphone-x .shadow-top-right{
  top:-1em;
  right:-1em;
}

.device-mock.iphone-x .shadow-bottom-left{
  bottom:-1em;
  left:-1em;
}

.device-mock.iphone-x .shadow-bottom-right{
  bottom:-1em;
  right:-1em;
}

.device-mock.iphone-x:before {
  width: calc(100% - 1em);
  height: calc(100% - 1em);
  position: absolute;
  top: .5em;
  content: '';
  left: .5em;
  border-radius: 2.7em;
  background: white;
  z-index: 1;
}

.device-mock.iphone-x .screen{
  border-radius:2em;
  -webkit-box-shadow:none;
  box-shadow:none;
}

.device-mock.iphone-x .speaker {
  height: .3em;
  width: 3em;
  left: 50%;
  position: absolute;
  top: .4em;
  margin-left: -1.5em;
  background: #efefef;
  border-radius: .3em;
}
.device-mock.iphone-x .notch{
  position:absolute;
  width:10.5em;
  height:1.5em;
  top:1.3em;
  left:5.4em;
  z-index:4;
  background:white;
  border-bottom-left-radius:1.2em;
  border-bottom-right-radius:1.2em;
}
.device-mock.iphone-x .notch:before,.device-mock.iphone-x .notch:after{
  content:'';
  height:.4em;
  position:absolute;
  top:0;
  width:.4em;
}
.device-mock.iphone-x .notch:after{
  background:radial-gradient(circle at bottom left, transparent 0, transparent 70%, white 70%, white 100%);
  left:-.4em;
}
.device-mock.iphone-x .notch:before{
  background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, white 70%, white 100%);
  right:-.4em;
}

.device-mock .screen img {
  width: 100%;
}