<div class="card-container">
  
  <div class="card card-hearts">
    <span class="card_rank">13</span>
  </div>

  <div class="card card-hearts">
    <span class="card_rank">A</span>
  </div>

  <div class="card card-clubs">
    <span class="card_rank">K</span>
  </div>

  <div class="card card-hearts card-small--left">
    <span class="card_rank">2</span>
  </div>
  
  <div class="card card-hearts  card-small--right">
    <span class="card_rank">Q</span>
  </div>
  <div class="smallcards">
    <div class="card card-small rotate"></div>
    <div class="card card-small"></div>

  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/*colors*/
$greenBackground: #23A484;
$grey: #434A54;
$red: #FC6E51;
$purple: #967ADC;
$yellow: #FFCE54;
$pink: #EC87C0;

*,
*:before,
*:after
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
a:active
{
    /*remove all the Dotted Link Borders*/
    outline: none;
}
html,
body
{
    overflow: visible;

    height: 100%;
    margin: 0;
    padding: 0;
}

body
{
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    color: #333;
    background: $greenBackground;
}

/*
 Spade : \2660
heart: \2665
diamond: \2666
club: \2663
 */

.card-container{
    background-color: $greenBackground;
    font-size: 0.226em;
    overflow: hidden;
    padding: 86px;
    position:relative;
    width: 500px;
    height:500px;
    }

/*card module*/
.smallcards {
        height: 53px;
        position: relative;
        top: 99px;
        width: 100px;
        z-index: 3;
      }
.card
{
    font-family: 'Open Sans', sans-serif;
    position: relative;
    z-index: 2;

    display: table;
    float: left;

    width: 58px;
    height: 81px;
    margin: 0 5px 0 0;

    border-radius: .8em;
    background-color: #fff;
    box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.2);
      
      &.card-small{
        background-color: #48cfad;
        box-shadow: none;
        height: 35px;
        left: 36px;
        top: 9px;
        position: absolute;
        width: 25px;
        z-index: 1;
        &:before,
        &:after{
          background-color: #fc6e51;
          border: 3px solid #fff;
          border-radius: 50%;
          content: "";
          height: 15px;
          width: 15px;
          position: absolute;
          z-index: 1;
        }
          &:before{  
            left: 35px;
            top: -4px;
          }
          &:after{
            left: 34px;
            top: 6px;
            z-index: 2;
            background-color: $purple;
          }
        &.rotate{
          box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.2);
          left: 21px;
            top: 10px;
          z-index: 2;
          -ms-transform: rotate(-29deg); /* IE 9 */
          -webkit-transform: rotate(-29deg); /* Chrome, Safari, Opera */
          transform: rotate(-29deg);
          &:before{
            background-color: #ffce54;
            left: 42px;
            top: 35px;
            transform: rotate(0deg);
          }
          &:after{
            background-color: #ec87c0;
            left: 37px;
            top: 43px;
            transform: rotate(0deg);
            z-index: 2;
          }
        }
      }

    .card_rank
    {
        position: relative;
        font-size: 9em;
        font-weight: bold;
        line-height: 1;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    

      .card_rank:before{
        width: 100%;
        height: 1em;
        display:block;
        text-align: center;
      }
      

    &.card-spades{
      .card_rank:before{
        /*spade*/
        content: "\2660";
        
      }
    }
    &.card-diams{
        color: $red;
      .card_rank:before{
        /*spade*/
        content: "\2666";
        
      }
    }
    &.card-hearts{
        color: $red;
      .card_rank:before{
        /*spade*/
        content: "\2665";
      }
    }
    &.card-clubs{
      .card_rank:before{
        /*spade*/
        content: "\2663";
      }
    }

      &.card-small--left,
      &.card-small--right{
        font-size: 0.5em;
        height: 41px;
        
        position: absolute;
        top: 190px;
        width: 28px;
      }
      &.card-small--left{
        left: 186px;
      }
      &.card-small--right{
        left: 222px;
      }
}