.mybox{
  width: 100%;
  height: 182px;
  position: relative;
}
.z-depth {
  height: 100px;
  width: 100px;
  background-color:#fff;
  display: inline-block;
  margin-left:15px;
  margin-top: 30px;
  position: relative;
}
.z-depth1{
  box-shadow: 
    0px 1px 1.5px rgba(0,0,0,0.12),
    0px 1px 1px rgba(0,0,0,0.24);
}
.z-depth2{
  box-shadow: 
    0px 3px 3px rgba(0,0,0,0.16),
    0px 3px 3px rgba(0,0,0,0.23);
}
.z-depth3{
  box-shadow: 
    0px 10px 10px rgba(0,0,0,0.19),
    0px 6px 3px rgba(0,0,0,0.23);
}
.z-depth4{
  box-shadow: 
    0px 14px 14px rgba(0,0,0,0.25),
    0px 10px 5px rgba(0,0,0,0.22);
}
.z-depth5{
  box-shadow: 
    0px 19px 19px rgba(0,0,0,0.3),
    0px 15px 6px rgba(0,0,0,0.22);
}
.depth-text{
  position: absolute;
  bottom: -35px;
  left: 17px;
  color: #666;
}
.box-text{
  position: absolute;
  bottom: -30px;
  left: 235px;
  color: #666;
}
.box {
  height: 150px;
  width: 500px;
  background-color:#fff;
  margin-left:15px;
  margin-top:30px;
  position: relative;
  display: inline-block;
}
.box1:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 10px;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.box2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  height: 10px;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}
.box3:before, .box3:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  height: 10px;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.box3:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.box4
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box4:before, .box4:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.box4:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}
.box5
{
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box5:before, .box5:after
{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.box5:after
{
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}
.backbox{
  background-color:#eee;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:-2;
}
.fire-text{
  display: inline-block;
  margin-top: 70px;
  margin-left: 40px;
  color: #fff;
  font: bold 80px/1.5 arial,sans-serif;
  text-shadow: 
    0 0 5px #fff,
    0 0 20px #fefcc9,
    10px -10px 30px #feec85,
    -20px -20px 40px #ffae34,
    20px -40px 50px #ec760c,
    -20px -60px 60px #cd4606,
    0 -80px 70px #973716,
    10px -90px 80px #451b0e;
}
.neon-text{
  display: inline-block;
  margin-top: 70px;
  margin-left: 100px;
  color: #fff;
  font: bold 80px/1.5 arial,sans-serif;
  text-shadow: 
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #ff00de,
    0 0 70px #ff00de,
    0 0 80px #ff00de,
    0 0 100px #ff00de,
    0 0 150px #ff00de;
}
.emboss-text {
    display: inline-block;
    margin-top: 30px;
    margin-left: 40px;
    color: transparent;
    font: bold 80px/1.5 arial,sans-serif;
    text-shadow: #2D0F00 0 0 5px,-1px 1px #fff,1px -1px #000; 
}
.solid-text {
    display: inline-block;
    margin-top: 30px;
    margin-left: 100px;
    color: #fff;
    font: bold 80px/1.5 arial,sans-serif;
    text-shadow: 
      1px 1px #212121,
      2px 2px #212121,
      3px 3px #212121,
      4px 4px #fafafa,
      5px 5px #fafafa,
      6px 6px #fafafa; 
}
.card{
    transform-style: preserve-3d;
    transition-duration: 1s;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: rgba(0,0,0,0);
    background-color: #666;
    color:#fff;
    width: 150px;
    height:200px;
    line-height:200px;
    cursor: pointer;
    margin: 0 auto;
    font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.center{
    text-align: center !important;
    vertical-align: middle !important;
}
.card-face{
}
.center-in{
    margin: auto;
}
.hide{
    display: none !important;
}
.title{
    font-size: 2em;
}
.features{
    font-size: 1.3em;
    transform:perspective(700px) rotateX(180deg);
    -webkit-transform:perspective(700px) rotateX(180deg);
}
.card-container {
  width: 150px;
  height: 200px;
  position: relative;
  -webkit-perspective: 800px;
  -ms-perspective: 800px;
  perspective: 800px;
  border-radius: 10px;
  margin: 0 auto;
}
.card2 {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  cursor: pointer;
}
.card2 div {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  background: #666;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.card2 .back {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  font-size: 1.3em;
}
.card2 .front {
  font-size: 2em;
}
.card2.flipped {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}