/* ========================================================================= *
 * Smaller Than Tablet                                                       *
 * ========================================================================= */
@media (max-width: 749px) {
  /* Base styles.
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .columns-sp {
    float: left;
    margin-left: 4%;
    margin-bottom: 10px;
  }
  .columns-sp:first-child {
    margin-left: 0;
  }

  .one.columns-sp    { width: 4.66666666667%;       }
  .two.columns-sp    { width: 13.3333333333%;       }
  .three.columns-sp  { width: 22%;                  }
  .four.columns-sp   { width: 30.6666666667%;       }
  .five.columns-sp   { width: 39.3333333333%;       }
  .six.columns-sp    { width: 48%;                  }
  .seven.columns-sp  { width: 56.6666666667%;       }
  .eight.columns-sp  { width: 65.3333333333%;       }
  .nine.columns-sp   { width: 74.0%;                }
  .ten.columns-sp    { width: 82.6666666667%;       }
  .eleven.columns-sp { width: 91.3333333333%;       }
  .twelve.columns-sp { width: 100%; margin-left: 0; }

  /* Header styles.
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .header {
    background-image: url('../img/bg-sp.jpg');
  }

  /* Article styles.
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .article {
    padding-top: 12px;
  }
    .article .fa-facebook {
      color: #305097;
    }
    .article .fa-twitter {
      color: #00ACED;
    }
    .article .fa-instagram {
      /*color: #3F729B;*/
      color: #A87A60;
    }
    .article .fa-github-alt {
      color: #333;
    }
    .article .fa-youtube-play {
      color: #CD201F;
    }
    .article img {
      width: 100%;
      border: solid 1px #666;
      border-radius: 10px;
      box-shadow: 0 2px 3px 0 rgba(0,0,0,0.3);
    }

  .four {
    position: relative;
  }
    .four:after {
      padding-top: 100%;
      display: block;
      content: "";
    }
    .four a {
      font-family: "Fredoka One";
      text-decoration: none;
      color: #00A73C;
      border: dashed 3px #00A73C;
      border-radius: 10px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .four svg {
      position: absolute;
      top: 50%;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      margin-top: -20%;
      width: 50%;
    }
}


/* ========================================================================= *
 * Larger Than Tablet                                                        *
 * ========================================================================= */
@media (min-width: 750px) {
  /* Base styles.
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  body {
    background-image: url('../img/bg.jpg');
  }

  /* Article styles.
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  .article {
    display: none;
  }
}