mobile.scss

@media screen and (max-width: 768px) {

  /* Landing Page and Global Styles */
  
  .player-header-nav.navbar {
    padding: 16px;
    margin-bottom: 0;
    .mobile-nav-trigger {
      position: relative;
      float: right;
      padding: 8px 16px;
      border: 1.5px solid white;
      border-radius: 4px;
      top: 36px;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      cursor: pointer;
      .fa-chevron-down {
        font-size: 2em;
        color: white;
        transition: all 0.1s linear;
        -webkit-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -ms-transition: all 0.1s linear;
        &.open {
          transform: rotate(180deg);
          -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
        }
      }
      &:hover {
        background-color: white;
        .fa-chevron-down {
          color: rgba(123, 70, 163, .9);
        }
      }
    }
    .navbar-nav {
      li {
        text-align: center;
      }
    }
  }
  .hero-content {
    h1, h3 {
      text-align: center;
    }
  }
  .selling-points {
    padding: 0;
    .point {
      padding: 3em 0.75em;
      h5 {
        height: 36px;
      }
      p {
        text-align: center;
        font-size: 1.25em;
      }
    }
  }
  .landing-album-list {
    .album-cover {
      position: relative;
      left: calc(50% - 200px);
    }
  }

  /* Collection View */

  .collection-album-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 280px;
    .collection-overlay-button {
      width: 72px;
      height: 72px;
      .fa-play, .fa-plus {
        text-align: center;
        line-height: 72px;
        vertical-align: middle;
        font-size: 36px;
      }
    }
  }

  /* Player bar styles */
  
  .player-bar {
    height: 200px;
    padding-bottom: 40px;
    .player-bar-control-group {
      display: block;
      padding: 24px;
    }
    .seek-control {
      top: 10px;
      bottom: 10px;
      display: block;
    }
    .currently-playing {
      width: 100%;
      height: 90px;
      .song-name, .artist-name {
        position: relative;
        top: 0px;
        bottom: 10px;
      }
      .artist-name {
        top: 16px;
      }
    }
    .left-controls, .slider, .right-controls {
      width: 100%;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    .play-controls {
      .previous, .next, .play-pause {
        position: relative;
        width: calc(100% / 3);
        display: inline;
        .fa {
          margin-right: 30px;
          margin-left: 30px;
          text-align: center;
        }
      }
    }
  }

}