@include tooltip(box-share-master-container, social-sharing, '\ea0b' ); 

.box-share-master-container {
  position: absolute;
  right: -80px;
  top: 0;

  @include breakpoint(1200px down) {
    right: -60px;
  }

  a {
    background-color: #fff;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    @include box-shadow(0px 0px 50px 0px rgba(0, 0, 0, 0.08));

    &:after {
      position: absolute;
      top: calc(50% - 10px);
      left: calc(50% - 12px);
      font-size: 20px !important; 
      font-weight: 700 !important;
    } 

    @include breakpoint(1280px down) {
      width: 45px;
      height: 45px;   
      &:after {
        position: absolute;
        top: calc(50% - 9px);
        left: calc(50% - 9px);
        font-size: 16px !important; 
        font-weight: 700 !important;
      }        
    }

    &:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #000;
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        border-radius: 50%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;          
    }

    body:not(.is-mobile) & {
        &:hover {
          &:before {
            -webkit-transform: scale(1);
            transform: scale(1);
          }
          &:after {
            color: #fff;
            transform: scale(.8);
          }
        }  
    }

     
  }
  
}

/* ============================ */
/* SHARING POPUP                */
/* ============================ */

.arthref{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;

  .overlay{
    z-index: 100;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(255,255,255,0.6);
    pointer-events: none;
    display: none;
    @include transition(all 200ms ease-in-out);

    &.active{
      opacity: 1;
      pointer-events: all;
    }
  }

  .opaque{
    background: rgba(255,255,255,0.6);
  }

  .icon-container{
    z-index: 101;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    &:before{
      content: '';
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }

    .centered {
      display: inline-block;
      padding: 1em;
      vertical-align: middle;
      text-align: left;
      width: 90%;
      max-width: 725px;
    }

    .share-title {
      display: block;
      margin-bottom: 40px;


      @include transition(all .2s ease);
      text-align: center;


      h4 {
        font-size: 16px;
        line-height: 26px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 30px;      
      }

      // h1 {
      //   text-transform: uppercase;
      //   font-weight: 500;
      //   font-size: 44px;
      //   line-height: 52px;
      //   @include breakpoint(small only) {
      //     font-size: 36px;
      //     line-height: 40px;
      //   }        
      // }
    }

    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      text-align: center;
      @include transition(all 200ms ease-in-out);     
      pointer-events: none;

      &.active{
        pointer-events: auto;
      }
      li {
        opacity: 0;
        @include transition(all 1s cubic-bezier(.19,1,.22,1));

        @include breakpoint(small only) {
          margin-right: rem-calc(30);
        }

        &:last-child {
          margin-right: 0;
        }


        a {
          background-color: transparent;
          width: 30px;
          height: 30px;    

          svg {
            margin-top: 1px;
            width: 30px;
            height: 30px;
          }

          @include breakpoint(small only) {
              width: 24px;
              height: 24px; 
            svg {
              margin-top: -9px;
              width: 24px;
              height: 24px;              
            }
          }
        }
        // display: inline-block;
        // text-align: center;
        // width: 70px;
        // margin-bottom: 15px;
            // @include breakpoint(small only) {
            //   width: 50px;
            // } 

        // a {
        //   text-align: center;
        //   display: inline-block;
        //   width: auto;

        //   &:before {
        //     width: 50px;
        //     height: 50px;
        //     font-size: 36px;
        //     line-height: 50px;
        //     @include border-radius(60px);
        //     @include breakpoint(small only) {
        //       font-size: 30px;
        //       line-height: 40px;
        //     } 
        //   }

        //     &:hover:before {
        //       // color: #fff;
        //       // background-color: $maincolor;
        //       @include transform(scale(1.4))
        //     } 

        // }
        // span {
        //   display: none !important;
        //   margin-top: 10px !important;
        //   text-align: center;
        //   font-size: 14px !important;
        //   font-weight: bold;
        //   font-weight: 400 !important;
        // }
      }
    }    
  }



  /* Animations */


  .launchpadReverse .icon-container .share-title,
  .launchpadReverse .icon-container .social-icons li {
    -webkit-transform-origin: center 20%;
    -webkit-transform: scale(1.3);
    
    -moz-transform-origin: center 20%;
    -moz-transform: scale(1.3);

    -o-transform-origin: center 20%;
    -o-transform: scale(1.3);

    -ms-transform-origin: center 20%;
    -ms-transform: scale(1.3);

    transform-origin: center 20%;
    transform: scale(1.3);
  }


  .launchpadReverse.active .icon-container .share-title {
    @include transform(scale(1));
  }

  .launchpadReverse.active .icon-container .social-icons li {

    @include transform(scale(1));
      opacity: 1;
      @for $i from 1 through 100 {
        &:nth-child(#{$i}) {
          transition-delay: (0.1s * $i);
        }
      }    
  }

}


.blurred {
  @include filter(blur(14px));
  @include transition(filter .3s ease-in-out);
}