.device, .device *, .device *:after, .device *:before {
    backface-visibility: hidden;
}

.device {
    background: #616774;
    border-radius: 25px;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.05);
    transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}

.device__header {
    position: absolute;
    top: 22.5px;
    left: 50%;
    margin-left: -15px;
    width: 30px;
    height: 3px;
    background: #7c7c7c;
    border-radius: 1.5px;
    transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}

.device__header:after, .device__header:before {
    position: absolute;
    content: "";
    transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}

.device__header:before {
    top: -0.5px;
    left: -9px;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    border: 1px solid #333;
    background: #333;
}

.device__header:after {
    top: -12.5px;
    left: 50%;
    margin-left: -3px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #7c7c7c;
}

.device__content {
    width: 290px;
    height: 450px;
    background: #FFF;
    border: 1px solid #333;
    border-radius: 1.5px;
    margin: 40px 7.5px 40px 7.5px;
    transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}

.device__footer {
    position: absolute;
    bottom: 5px;
    left: 50%;
    background:#f7f7f7;
    margin-left: -15px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}

.device__footer:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -5px;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid #a8a8a8;
    border-radius: 2.5px;
    transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}

/**
 * iPad and iPad Mini
 */
.device--ipad .device__header,
.device--ipad-mini .device__header {
    width: 0;
    margin-left: 0;
    border-radius: 0;
    background: transparent;
}

.device--ipad .device__header:before,
.device--ipad-mini .device__header:before {
    transform: scale(0);
}

.device--ipad .device__header:after,
.device--ipad-mini .device__header:after {
    transform: translate(0, 7.5px);
}

.device--ipad .device__content {
    width: 384px;
    height: 512px;
    margin: 40px;
}

.device--ipad-mini .device__content {
    width: 460px;
    height: 614px;
    margin: 40px 12.5px;
}

/**
 * Browser
 */
.device--browser {
    border-radius: 4px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    border: 1px solid #666;
}

.device--browser .device__header,
.device--browser .device__header:after,
.device--browser .device__header:before {
    width: 7px;
    height: 7px;
    left: 5px;
    top: 0px;
    transform: translate(0px, 0px) scale(1);
    margin-left: 0px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid #333;
}

.device--browser .device__header {
    top: 6px;
    background-color:#fb625d;
}

.device--browser .device__header:before {
    left: 9px;
    top: -1px;
    background-color:#fac86b;
}

.device--browser .device__header:after {
    left: 19px;
    top: -1px;
    background-color:#a0d57a;
}

.device--browser .device__content {
    width: 800px;
    height: 550px;
    border-right-width: 0px;
    border-left-width: 0px;
    border-bottom-width: 0px;
    border-radius: 0px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    margin: 20px 0px 0px 0px;
}

.device--browser .device__footer {
    transform: scale(0);
}

@media screen and (max-width:980px) {
	#devicelab{
		display:none;
	}
}

.isometric {
  -webkit-transform: rotateX(33deg) rotateY(0deg) rotateZ(-15deg) translate(-14%, -20%) scale3d(1, 1, 1);
  -moz-transform: rotateX(33deg) rotateY(0deg) rotateZ(-15deg) translate(-14%, -20%) scale3d(1, 1, 1);
  -ms-transform: rotateX(33deg) rotateY(0deg) rotateZ(-15deg) translate(-14%, -20%) scale3d(1, 1, 1);
  -o-transform: rotateX(33deg) rotateY(0deg) rotateZ(-15deg) translate(-14%, -20%) scale3d(1, 1, 1);
  transform: rotateX(33deg) rotateY(0deg) rotateZ(-15deg) translate(-14%, 0%) scale3d(1, 1, 1);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.content {
  padding: 22px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.phone-card {
  width: 100%;
  height: 160px;
  border-radius: 2px;
  background:rgba(238,238,238,0.8);
  border-bottom: 2px solid #c7c7c7;
  border-left: 2px solid #c7c7c7;
  -webkit-transform: translate3d(0, 0, 12px);
  -moz-transform: translate3d(0, 0, 12px);
  -ms-transform: translate3d(0, 0, 12px);
  -o-transform: translate3d(0, 0, 12px);
  transform: translate3d(0, 0, 12px);
  box-shadow: -14.4px 18px 6px rgba(0, 0, 0, 0.1), -14.4px 15.6px 6px rgba(0, 0, 0, 0.1);
  -webkit-transition: background .5s ease-out, -webkit-transform 0.5s, box-shadow 0.5s;
  -moz-transition: background .5s ease-out, -moz-transform 0.5s, box-shadow 0.5s;
  transition: background .5s ease-out, transform 0.5s, box-shadow 0.5s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: hideDelay 0.5s, drop 2s 0.5s;
  -moz-animation: hideDelay 0.5s, drop 2s 0.5s;
  animation: hideDelay 0.5s, drop 2s 0.5s;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 8px;
  float: left;
}
.phone-card:before {
  -webkit-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px);
  -moz-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px);
  -ms-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px);
  -o-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px);
  transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px);
  display: block;
  position: absolute;
  right: 100%;
  top: 50%;
  margin-top: -1em;
  opacity: 0;
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  -moz-transition: opacity 0.5s, -moz-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
}

.phone-card1:before{
    content: "Edit text and add new elements";
}

.phone-card2:before{
    content: "Images and text rendered separately";
}

.phone-card:hover {
  background:rgba(255,255,255,1);
  -webkit-transform: translate3d(0, 0, 38px);
  -moz-transform: translate3d(0, 0, 38px);
  -ms-transform: translate3d(0, 0, 38px);
  -o-transform: translate3d(0, 0, 38px);
  transform: translate3d(0, 0, 38px);
  box-shadow: -21.6px 27px 9px rgba(0, 0, 0, 0.1), -21.6px 23.4px 9px rgba(0, 0, 0, 0.1);
}
.phone-card:hover:before {
  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 56px);
  -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 56px);
  -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 56px);
  -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0, 0, 56px);
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(-50px, 20px, 56px);
  opacity: 0.8;
}

.floor {
  width: auto;
  height: auto;
  border-radius: 4px;
  background: #FFFFFF;
  border-bottom: 8px solid #bbbbbb;
  border-left: 4px solid #bbbbbb;
  display: block;
  width: 320px;
  height: 560px;
  padding: 0;
  position: absolute;
  left: 0;
  top:-80px;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

@-webkit-keyframes drop {
  0%, from {
    -webkit-transform: translate3d(0, 0, 90px);
    box-shadow: -108px 135px 45px rgba(0, 0, 0, 0.1), -108px 117px 45px rgba(0, 0, 0, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-moz-keyframes drop {
  0%, from {
    -moz-transform: translate3d(0, 0, 90px);
    box-shadow: -108px 135px 45px rgba(0, 0, 0, 0.1), -108px 117px 45px rgba(0, 0, 0, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes drop {
  0%, from {
    -webkit-transform: translate3d(0, 0, 90px);
    -moz-transform: translate3d(0, 0, 90px);
    -ms-transform: translate3d(0, 0, 90px);
    -o-transform: translate3d(0, 0, 90px);
    transform: translate3d(0, 0, 90px);
    box-shadow: -108px 135px 45px rgba(0, 0, 0, 0.1), -108px 117px 45px rgba(0, 0, 0, 0.1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes hideDelay {
  from, to {
    opacity: 0;
  }
}
@-moz-keyframes hideDelay {
  from, to {
    opacity: 0;
  }
}
@keyframes hideDelay {
  from, to {
    opacity: 0;
  }
}

.desc {
  text-align: center;
}
.desc h1 {
  text-transform: uppercase;
  font-weight: 300;
}
.desc a {
  color: #008fa1;
  font-weight: 500;
  text-decoration: none;
}

.material-icons.md-18 {
  font-size: 18px;
}

.material-icons.md-24 {
  font-size: 24px;
}

.material-icons.md-36 {
  font-size: 36px;
}

.material-icons.md-48 {
  font-size: 48px;
}

.md-light {
  color: #FFFFFF;
}

#drawerOpener {
  cursor: pointer;
}

.iphone {
    width: 16.06em;
    height: 30.6em;
    border-radius: 1.875em;
    position: relative;
    background: #eee;
}
.iphone:before {
    content: "";
    width: 14.5em;
    height: 20.938em;
    position: absolute;
    top: 4.75em;
    left: .750em;
    background: #4f4f4f;
}
.iphone:after {
    content: "";
    position: absolute;
    top: 4.75em;
    left: .750em;
    border-top: 20.938em solid #595959;
    border-left: 14.5em solid transparent;
}

.powerButton {
    width: 2.188em;
    height: .188em;
    background: #e0e0e0;
    position: absolute;
    right: 2.5em;
    top: -.188em;
}

.leftButtons {
    width: .188em;
    height: 1.250em;
    top: 3.250em;
    left: -.188em;
    position: absolute;
    background: #e0e0e0;
}
.leftButtons:before {
    content: "";
    width: .188em;
    height: .875em;
    position: absolute;
    top: 3em;
    background: #e0e0e0;
}
.leftButtons:after {
    content: "";
    width: .188em;
    height: .875em;
    position: absolute;
    top: 5.5em;
    background: #e0e0e0;
}

.details {
    width: 2em;
    height: .25em;
    border-radius: .25em;
    position: absolute;
    top: 1.313em;
    left: 7em;
    background: #7c7c7c;
}
.details:before {
    content: "";
    width: 2.5em;
    height: .25em;
    border-radius: .25em;
    position: absolute;
    top: 1em;
    left: -.25em;
    background: #7c7c7c;
}
.details:after {
    content: "";
    width: .438em;
    height: .438em;
    border-radius: 100%;
    position: absolute;
    top: .9em;
    left: -1.25em;
    background: #4f4f4f;
}

.homeButton {
    width: 2.25em;
    height: 2.25em;
    border-radius: 100%;
    position: absolute;
    bottom: 1em;
    right: 6.75em;
    background: #f7f7f7;
}
.homeButton:before {
    content: "";
    width: .813em;
    height: .813em;
    border: .15em solid #a8a8a8;
    border-radius: .2em;
    position: absolute;
    top: .6em;
    left: .77em;
}