/* Reset */
  * {
  	margin: 0;
  	padding: 0;
  }

  html,body {
    height:100%;
    margin:0;
    font-family: 'Montserrat', 'sans-serif';
    color:#424242;
  }
  .display {
    text-align: center;
    display: table;
    height:120px;
    margin:0 auto;
  }
  .wrap {
    display: table-cell;
    vertical-align: middle;
  }
  p {
    font-size: 100px; /* For lamers who don't support viewport sizing */
    font-size:18px;
    text-align: center;
    margin: 0;
  }
  p.text-display {
    display: inline-block;
    color: #5E5E5E;
    font: bold 20px arial;
    text-decoration: none;
    text-align: center;
    margin: 20px auto;
    padding: 15px 20px;
    background: #EFF0F2;
    border-radius: 4px;
    border-top: 1px solid #F5F5F5;
    box-shadow: inset 0 0 25px #E8E8E8, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333;
    text-shadow: 0px 1px 0px #F5F5F5;
  }

  span.love {
    display: block;
    position: absolute;
    bottom:10px;
    width: 100%;
    text-align: center;
  }
  span.love a {
    text-decoration: none;
    color:#D12026;
  }
  .twitter-follow-button {
    vertical-align: text-bottom;
  }
  .twitter-share-button {
    vertical-align: text-bottom;
  }

#container {
    padding: 10px 20px 20px 20px;
    display: inline-block;
    width:100%;
    box-sizing: border-box;
    text-align: center;
}

#keyContainer {
    text-align: left;
    font-size: 0;
}

.keys {
    display: inline-block;
    padding: 3px 6px;
    background: #f1f1f1;
    margin: 2px;
    width: calc(50% - 4px);
    position: relative;
    padding-left: 50px;
    font-size:14px;
    font-family:arial;
    box-sizing: border-box;
    transition: all 0.2s;
}

.keys:before {
    background: #ccc;
    position: absolute;
    left: 0;
    top: 0;
    padding: 3px 6px;
    width: 25px;
}

.active{background-color:#666;color:#fff;transform-origin: 0% 50%;transform:scale(1,1.15);z-index:2;}
.active:before {background-color: #000;color:#fff;}

@media only screen and (min-width: 300px){ .keys {width: calc(100% - 4px);}}
@media only screen and (min-width: 360px){ .keys {width: calc(50% - 4px);}}
@media only screen and (min-width: 720px){ .keys {width: calc(33% - 4px);}}
@media only screen and (min-width: 960px){ .keys {width: calc(25% - 4px);}}
@media only screen and (min-width: 1280px){ .keys {width: calc(20% - 4px);}}
@media only screen and (min-width: 1920px){ .keys {width: calc(16.66% - 4px);}}