.button-dark {
    background: #1ed760;
    color: white;
    border: 1px solid #1ed760;
    border-radius: 20px;
}
.button-dark:hover {
  background: #43e57d;
}
.artist__header {
    height: 320px;
    border-bottom: 1px solid #282828;
    position: relative;
    /* background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/spotify_img_bground.png); */
    background-color: rgba(0, 0, 0, 0.02 );
    background-blend-mode: screen;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-end;
  }
  .artist__header:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.15;
    /* background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/7022/g-eazy.png); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
  }
  .artist__header .artist__info {
    padding: 15px;
   
    width: 80%;
    margin-top: 78px;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
  }
  .artist__header .artist__info .profile__img {
    margin-right: 15px;
  }
  .artist__header .artist__info .profile__img img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .artist__header .artist__info__type {
    color: #f7f4f4;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
  }
  .artist__header .artist__info__name {
    color: white;
    font-size: 36px;
    font-weight: 300;
    padding: 0 0 10px 0;
  }
  .artist__header .artist__info__actions {
    display: flex;
    flex-flow: row wrap;
  }
  .artist__header .artist__info__actions button {
    margin-right: 10px;
    height: 27px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: 0 15px;
    font-weight: 500;
  }
  .artist__header .artist__info__actions button i {
    font-size: 20px;
    margin-right: 5px;
  }
  .artist__header .artist__info__actions .more {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    padding: 0;
    text-align: center;
  }
  .artist__header .artist__info__actions .more i {
    margin: 0;
    padding-left: 6px;
  }
  .artist__header .artist__info__meta {
    margin: 0;
    padding-bottom: 30px;
  }
  .artist__header .artist__listeners {
    width: 20%;
    z-index: 1;
    padding: 15px;
    text-align: right;
    color: #fdfdfd;
    font-weight: 100;
    font-size: 16px;
    letter-spacing: 1px;
  }
  .artist__header .artist__listeners__label {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
  }
  .artist__header .artist__navigation {
    width: 100%;
    z-index: 1;
    background: rgba(24, 24, 24, 0.6);
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
  }
  .artist__header .artist__navigation ul {
    border: none;
  }
  .artist__header .artist__navigation ul li {
    padding: 0 15px;
  }
  .artist__header .artist__navigation ul li a {
    padding: 15px 0;
    color: #aaaaaa;
    border: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    border-bottom: 4px solid rgba(0, 0, 0, 0);
  }
  .artist__header .artist__navigation ul li a:hover {
    background: none;
    border: none;
    color: white;
    transition: all 0.4s ease;
    border-bottom: 4px solid rgba(0, 0, 0, 0);
  }
  .artist__header .artist__navigation ul li.active a {
    color: white;
    background: none;
    border: none;
    border-bottom: 4px solid #1ed760;
  }
  .artist__header .artist__navigation ul li.active a:hover {
    border-bottom: 4px solid #1ed760;
  }
  .artist__header .artist__navigation__friends {
    padding: 15px;
  }
  .artist__header .artist__navigation__friends img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
  }
  .artist__header .artist__navigation__friends .tooltip {
    z-index: 1;
    position: absolute;
  }
  .artist.is-verified .profile__img {
    position: relative;
  }
  .artist.is-verified .profile__img:after {
    font-family: "Ionicons";
    content: "\f3fd";
    position: absolute;
    bottom: 5px;
    right: 25px;
    color: white;
    background: #4688d7;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
    line-height: 1;
  }
  .artist__content {
    padding: 15px;
  }
  .artist__content .overview {
    display: flex;
    flex-flow: row wrap;
  }
  .artist__content .overview__artist {
    padding-right: 15px;
    width: 70%;
  }
  .artist__content .overview__artist .latest-release {
    margin-bottom: 30px;
    display: flex;
    flex-flow: row wrap;
  }
  .artist__content .overview__artist .latest-release__art {
    width: 75px;
  }
  .artist__content .overview__artist .latest-release__art img {
    width: 75px;
    height: 75px;
  }
  .artist__content .overview__artist .latest-release__song {
    width: calc( 100% - 75px );
    padding: 10px 15px;
    background: #282828;
    color: #aaaaaa;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
  }
  .artist__content .overview__artist .latest-release__song__title {
    color: #c8c8c8;
  }
  .artist__content .overview__related {
    width: 30%;
  }
  @media (max-width: 1024px) {
    .artist__content .overview__artist {
      width: 100%;
    }
    .artist__content .overview__related {
      width: 100%;
      margin-top: 15px;
    }
  }
  @media (max-width: 768px) {
    .artist__content .overview__artist {
      padding-right: 0;
    }
  }
  
  @media (max-width: 768px) {
    .artist {
      overflow-y: auto;
    }
  }
  @media (max-width: 522px) {
    .artist__header {
      height: auto;
      flex-flow: column wrap;
    }
    .artist__header .artist__info {
      margin-top: 0;
      width: 100%;
      display: flex;
      flex-flow: column wrap;
      align-items: center;
      text-align: center;
    }
    .artist__header .artist__info .profile__img {
      margin-right: 0;
    }
    .artist__header .artist__info__type {
      margin-top: 10px;
    }
    .artist__header .artist__listeners {
      width: 100%;
      text-align: center;
    }
  }

  /* .artist__header .artist_header_side_nav
  {
    position: absolute;
    background-color: red;
    top: 0;
    right:0;
    width: 100%;
    height: 100%;
    color: black;
    text-align: center;
    animation-name: reducetime;
    animation-duration: 2s;
    float: right;
  } */
/* 
  
  @keyframes reducetime {
    0% {
      width: 0;
    }
    100% {
      width: 100%;
    }
  } */

  /* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: absolute;/* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color:rgba(126, 9, 9, 0.9); /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}


/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


 .uploader
{
  padding: 0;
  margin: 0;
  color: #f1f1f1;
  text-align: center;
  

}

.uploader input[type="file"]
{
  
  margin : 0 auto;
}