/* === General === */
html, body { height:100%; }
html { box-sizing:border-box; }
*,*:before,*:after { -webkit-box-sizing:inherit; -moz-box-sizing:inherit; box-sizing:inherit; }
html,body { font-size: 100%; }
body { background:#f2f2f2; color:#333; cursor:auto; font-family:"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-style:normal; font-weight:normal; line-height:1.5; margin:0; padding:0; position:relative; }
h1 { color:#fff; font-size:140%; margin:0 0 15px 0; padding:0; }
h2 { color:#fff; font-size:120%; margin:0 0 15px 0; padding:0; }
h3 { font-size:120%; text-align:center; }
a { color:#333; }
a:hover { color:#666; cursor:pointer; }
#toolbar { background:#333; color:#fff; margin-bottom:15px; padding:15px 0; text-align:center; }
#toolbar button { margin-right:15px; }
#hit,#stay,#playAgain { display:none; }
button { background:#7cacc2; border:1px solid #7cacc2; border-radius:5px; color:#f2f2f2; font-weight:bold; padding:5px 15px; text-transform:uppercase; }
 button:hover { background:#999; border:1px solid #999; cursor:pointer; }
.lose { background:#f00; }
.win { background:#060; }
#madeBy { font-weight:bold; font-size:90%; text-align:center; }

/* === Cards === */
.card { background:#fff; border:1px solid #000; border-radius:5px; margin-bottom:15px; padding:5px; text-align:center; vertical-align:center; }
.card h3 { margin:0; padding:0; }
.hearts,.diams { color:#f00; }

/* === Grid === */
.row {
  margin: 0 auto;
  max-width: 62.5em;
  width: 100%; }
  .row:before, .row:after {
    content: " ";
    display: table; }
  .row:after {
    clear: both; }
  .row.collapse > .column,
  .row.collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .row.collapse .row {
    margin-left: 0;
    margin-right: 0; }
  .row .row {
    margin: 0 -0.9375em;
    max-width: none;
    width: auto; }
    .row .row:before, .row .row:after {
      content: " ";
      display: table; }
    .row .row:after {
      clear: both; }
    .row .row.collapse {
      margin: 0;
      max-width: none;
      width: auto; }
      .row .row.collapse:before, .row .row.collapse:after {
        content: " ";
        display: table; }
      .row .row.collapse:after {
        clear: both; }

.column,
.columns {
  padding-left: 0.9375em;
  padding-right: 0.9375em;
  width: 100%;
  float: left; }

.column + .column:last-child,
.columns + .column:last-child, .column +
.columns:last-child,
.columns +
.columns:last-child {
  float: right; }
.column + .column.end,
.columns + .column.end, .column +
.columns.end,
.columns +
.columns.end {
  float: left; }

@media only screen {
  .column,
  .columns {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    float: left; }

  .small-1 {
    width: 8.33333%; }

  .small-2 {
    width: 16.66667%; }

  .small-3 {
    width: 25%; }

  .small-4 {
    width: 33.33333%; }

  .small-5 {
    width: 41.66667%; }

  .small-6 {
    width: 50%; }

  .small-7 {
    width: 58.33333%; }

  .small-8 {
    width: 66.66667%; }

  .small-9 {
    width: 75%; }

  .small-10 {
    width: 83.33333%; }

  .small-11 {
    width: 91.66667%; }

  .small-12 {
    width: 100%; }

}

@media only screen and (min-width: 40.0625em) {
  #toolbar h1 { text-align:left; }
  #toolbar #buttons { text-align:right; }
  h1,h2 { margin-bottom:0; }
  .card { font-size:260%; padding:30px; }	
  .column,
  .columns {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    float: left; }

  .medium-1 {
    width: 8.33333%; }

  .medium-2 {
    width: 16.66667%; }

  .medium-3 {
    width: 25%; }

  .medium-4 {
    width: 33.33333%; }

  .medium-5 {
    width: 41.66667%; }

  .medium-6 {
    width: 50%; }

  .medium-7 {
    width: 58.33333%; }

  .medium-8 {
    width: 66.66667%; }

  .medium-9 {
    width: 75%; }

  .medium-10 {
    width: 83.33333%; }

  .medium-11 {
    width: 91.66667%; }

  .medium-12 {
    width: 100%; }

}