.icon {
    height: 24px;
    width: 24px;
    display: block;
}
.icon_menu {
    background: url("../icon/menu.png");
}
.icon_x {
    background: url("../icon/x.png");
}
.icon_search {
    background: url("../icon/search.png");
}
.icon_search:hover {
    cursor: pointer;
}
.icon_logo {
    background: url("../icon/logo.png");
}
.header__logo{
    background: url("../icon/logo.png");
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
}


.icon_nav {
    height: 16px;
    width: 16px;
    display: block;
}
.icon_back {
    background: url("../icon/back.png");
}
.icon_home {
    background: url("../icon/home.png");
}
.icon_article {
    background: url("../icon/article.png");
}
.icon_quran {
    background: url("../icon/quran.png");
}
.icon_quran2 {
    background: url("../icon/quran2.png");
}
.icon_hadits {
    background: url("../icon/hadits.png");
}
.icon_kitab {
    background: url("../icon/kitab.png");
}
.icon_ulama {
    background: url("../icon/ulama.png");
}
.icon_mp3 {
    background: url("../icon/mp3.png");
}
.icon_youtube {
    background: url("../icon/youtube.png");
}
.icon_jadwal {
    background: url("../icon/jadwal.png");
}
.icon_instagram {
    background: url("../icon/instagram.png");
}
.icon_facebook {
    background: url("../icon/facebook.png");
}
.icon_image {
    background: url("../icon/image.png");
}
.icon_design {
    background: url("../icon/design.png");
}
.icon_playpause {
    background: url("../icon/playpause.png");
}




.icon_share {
    height: 16px;
    width: 16px;
    display: block;
}
.icon_sharebutton {
    background: url("../icon/sharebutton.png");
}
.icon_sharefacebook {
    background: url("../icon/sharefacebook.png");
}
.icon_sharelink {
    background: url("../icon/sharelink.png");
}
.icon_sharesemail {
    background: url("../icon/sharesemail.png");
}
.icon_sharetwitter {
    background: url("../icon/sharetwitter.png");
}
.icon_sharewhatsapp {
    background: url("../icon/sharewhatsapp.png");
}
.icon_sharelinkedin {
    background: url("../icon/sharelinkedin.png");
}



.social-share-icon{
    position: fixed;
    bottom: 10px;
    right: 10px;
  }
  .social-share-icon a.a{
    z-index: 123;
  }
  .social-share-icon a{
    padding: 15px 0 0 14px;
    text-decoration: none;
    color: #212121;
    height: 45px;
    width: 45px;
    border-radius: 100px;
    display: inline-block;
    background-color: var(--container-color);
    line-height: 45px;
    text-align: center;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2)
  }
  .social-share-icon a:hover{
    background-color: #DDD;
  }
  .social-share-icon a i{
    line-height: inherit;
  }
  .social-share-icon a.a1{
    transform: translateX(245px);
    transition: all ease-in-out 200ms;
    opacity: 0;
  }
  .social-share-icon a.a2{
    transform: translateX(196px);
    transition: all ease-in-out 300ms;
    opacity: 0;
  }
  .social-share-icon a.a3{
    transform: translateX(147px);
    transition: all ease-in-out 400ms;
    opacity: 0;
  }
  .social-share-icon a.a4{
    transform: translateX(98px);
    transition: all ease-in-out 500ms;
    opacity: 0;
  }
  .social-share-icon a.a5{
    transform: translateX(49px);
    transition: all ease-in-out 600ms;
    opacity: 0;
  }
  .social-share-icon:hover a.a1{
    transform: translateX(0);
    transition: all ease-in-out 600ms;
    opacity: 1;
  }
  .social-share-icon:hover a.a2{
    transform: translateX(0);
    transition: all ease-in-out 500ms;
    opacity: 1;
  }
  .social-share-icon:hover a.a3{
    transform: translateX(0);
    transition: all ease-in-out 400ms;
    opacity: 1;
  }
  .social-share-icon:hover a.a4{
    transform: translateX(0);
    transition: all ease-in-out 300ms;
    opacity: 1;
  }
  .social-share-icon:hover a.a5{
    transform: translateX(0);
    transition: all ease-in-out 200ms;
    opacity: 1;
  }