/* PLACE YOUR CUSTOM STYLES IN THIS FILE */

/*Preview Page Child Pages*/
.brand {
  font-family: "Playfair Display",serif;
  font-weight: 600;
  color: #171717;
  letter-spacing: .025em;
  font-size: 1.8rem;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 14px;
}

.creative {
  font-family: "Work Sans",sans-serif;
  line-height: 1.65;
  letter-spacing: .004em;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 500;
  text-transform: uppercase;
  font-size: .96rem;
  color: #5f5f5f;
  padding: 10px 0 10px 0 !important;
  background-color: #e3e3e3;
}

.done {
 font-family: "Work Sans",sans-serif;
 display:inline-block;
 padding:18px 25px;
 font-size:.96rem;
 font-weight:500;
 line-height:1.2;
 text-align:center;
 text-transform:uppercase;
 white-space:nowrap;
 vertical-align:middle;
 cursor:pointer;
 -webkit-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 background-color:#f5f5f5;
 border:0;
 text-decoration: none;
 transition:.5s all
}

.done.active,
.done.hover,
.done:active,
.done:focus,
.done:hover {
 background-color:#444;
 color: white !important;
}

.active-tab {
  color: white !important;
  background-color:#444;
  font-weight: initial !important;
}

.sidebar {
  width: 250px;
}

.portfolio-desc {
  font-family: "Work Sans",sans-serif;
  line-height: 1.3;
  letter-spacing: .004em;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  font-size: 0.85rem;
  font-weight: 400;
  text-align: left;
  color: #5f5f5f;
  margin-top: 2em !important;
  margin-left: 1rem !important;
  margin-right: 1rem !important;
  padding: initial !important;
  top: initial !important;
  display: inline-block;
  height: initial !important;
}

@media (max-width:667px) {

  .done {
    line-height: 2.3;
  }

  .active-tab {
    color: white !important;
    background-color:#444 !important;
    font-weight: initial !important;
  }

  .sidebar {
    border-bottom: 0px solid #ccc;
    width: 100%;
    height: 64px;
  }

  .sidebar .menu {
  float: left;
  position: absolute;
  top: 10px;
  left: 10px;
  }

  .sidebar ul {
  overflow: hidden;
  }

  .sidebar ul li {
  padding: 0 0 7px;
  }

  .brand {
    margin-bottom: 0 !important;
    margin-top: 18px !important;
  }

  .creative {
   margin-bottom: 10px !important;
  }

}

/*@media (max-width:667px) {
  .active-tab {
  font-weight: initial !important;
  }

  .sidebar {
    border-bottom: 0px solid #ccc;
  }

  .creative {
  margin-bottom: 0 !important;
  }

  .brand {
    margin-bottom: 0 !important;
    margin-top: 18px !important;
  }

  .done {
    background-color: #f5f5f5;
  }

  .sidebar .menu {
  float: left;
  position: absolute;
  top: 10px;
  left: 10px;
  }

  .sidebar ul {
    margin-top: 0;
  }

  .sidebar ul li a {
  padding: 5px 0; //comment out
  background-color: #444; //comment out
  color: white !important;
  }

  .sidebar ul li a.done {
    background-color: #444;
  }

  .done.active, .done.hover, .done:active, .done:focus, .done:hover {
  background-color: #444;
  color: white !important;
  }

}*/