.card
  .chip
    %ul
      %li
      %li
      %li
      %li 
    
  .number
    %ul
      %li
      %li
      %li
      %li
  
  .name
    %ul
      %li
      %li
    
  .logo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background-image: linear-gradient( 135deg, #FDEB71 10%, #F8D800 100%);
  overflow: hidden;
}

ul li {
  display:inline-block;
  list-style:none;
}

.card {
  width: 320px;
  height: 200px;
  background: #fff;
  margin: -200px 0 0 -300px;
  border-radius: 10px;
  position: absolute;
  box-shadow: 41px 10px 105px rgba(0, 0, 0, 0.2);
  border: 1px solid #eee;
  zoom: 1.7;
  left:50%;
  top:50%;
  animation: anime 1.5s ease infinite;
  
  .chip{
    background:#f1c40f;
    width:50px;
    height:40px;
    border-radius:10px;
    position:absolute;
    top:20px;
    left:25px;

    li {
      width:100%; 
      height:4px;
      background:#d35400;
      padding:0;
      margin:7px 0;
      display:block;
      opacity:0.3;
      
      &:last-child{
        width:25px;
        height:26px;
        margin:0;
        position:absolute;
        top:7px;
        left:12px;
        opacity:0.2;
      }
    } 
  }
  
  .number{
    padding-left:10px;
    position:absolute;
    top:40%;
    
    li {
      width:60px; 
      height:12px;
      margin:5px;
      background:#1abc9c;      
    }    
  }
  
  .name{
    padding-left:10px;
    position:absolute;
    bottom:25px;
    
    li {
      width:80px; 
      height:12px;
      margin:5px;
      background:#bdc3c7;      
    }
  }
  
  .logo{
    width:50px;
    height:50px;
    position:absolute;
    background:#FBD83F;
    border-radius:25px;
    bottom:20px;
    right:20px;
    z-index:99;

    &::before {
      background:#e74c3c;
      border-radius: 50px;
      bottom: 0;
      content: "";
      display: block;
      height: 50px;
      position: relative;
      right: 30px;
      width: 50px;
      z-index: 1;
    }
  }
}

@-webkit-keyframes anime {
  0% {
    transform: matrix3d(0.15, -0.0539372, 0, -0.000978854, -0.321054, 0.52452, 0, -0.000750467, 0, 0, 1, 0, 1, 102, 0, 1);
  }
    50% {
    transform: matrix3d(0.3, -0.0539372, 0, -0.000978854, -0.321054, 0.42452, 0, -0.000750467, 0, 0, 1, 1, 109, 102, 0, 1);
  }
  
    100% {
    transform: matrix3d(0.15, -0.0539372, 0, -0.000978854, -0.321054, 0.52452, 0, -0.000750467, 0, 0, 1, 0, 1, 102, 0, 1);
  }
}