<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;
			}
}