/** FLOATING SOCIAL BUTTON **/

/** Opens/Closes Top **/
.float-btn {
  position: fixed;
  right: 78px;
  bottom: 9px;
  margin: auto; /* Demo Use Only */
  height: 60px; /* Demo Use Only */
  z-index: 5000000;
  text-align: center;
}

.float-btn .main-btn {
  font-size: 1.8rem;
  z-index: 999;
  background-color: #1dff34; 
  background-image: url(https://app.blinger.io/images/widget/ic.png); 
  background-size: 50%; 
  background-position: center; 
  background-repeat: no-repeat;
}

.float-btn a.main-btn {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: white !important;
    text-align: center;
    text-decoration: none !important;
    font-size: 1.6rem !important;
    cursor: pointer;
    -webkit-box-shadow: 0 0 30px rgba(116,116,116,.33);
    -moz-box-shadow: 0 0 30px rgba(116,116,116,.33);
    box-shadow: 0 0 30px rgba(116,116,116,.33);
    animation: launcher-button-init .7s cubic-bezier(.62,.28,.23,.99),launcher-button infinite 6s 2s;
    transition: background-color .4s;
}
.main-btn.opened {
    background-image: url(https://app.blinger.io/images/widget/ic-close.png)!important;
    background-color: white !important;
    background-size: 20% !important;
    animation: launcher-button-init .7s cubic-bezier(.62,.28,.23,.99),launcher-button-rotate .4s !important;
    border: 1px solid #ececec!important;
}

.float-btn .rings {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: .6;
    z-index: -1;
    display: none;
}

.float-btn .rings .ring {
    border: 1px solid #ff4242;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    animation: launcher-button-pulsate infinite 3s;
}

.float-btn .rings .ring:nth-child(1) { animation-delay: .1s; }
.float-btn .rings .ring:nth-child(2) { animation-delay: .25s; }
.float-btn .rings .ring:nth-child(3) { animation-delay: .4s; }

.float-btn.top ul {
  text-align: center;
  position: absolute;
  z-index: 990;
/*  right: 0;*/
  left: -37px;
  padding-left: 0;
  list-style-type: none;
  opacity: 0;
  transition: 0.4s;
  -webkit-transform: scal(0);
  -ms-transform: scale(0);  transform: scale(0);
  bottom: -60px;
}

.float-btn.top ul li {
  margin-bottom: 0.6rem; /* Space between sub buttons */
}



.float-btn.top ul li a {
    position: relative;
    border: 0.125rem solid transparent;
    color: #fefefe !important;
    font-weight: normal;
    transition: all 0.5s ease;
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    text-decoration: none !important;
    font-size: 1.6rem !important;
    cursor: pointer;
    -webkit-box-shadow: 0 0 30px rgba(116,116,116,.33);
    -moz-box-shadow: 0 0 30px rgba(116,116,116,.33);
    box-shadow: 0 0 30px rgba(116,116,116,.33);
    padding-top: 0px;
}

.float-btn .social-button:hover, .float-btn .social-button:focus {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

.float-btn ul li a svg {
    width: 15px;
    margin-top: -3px;
    margin-left: -3px;
}

.float-btn .social-button {
  background: #3b5998;
  width: 50px;
  height: 50px;
}

.float-btn .social-button:hover, .float-btn .social-button:focus {
  color: #3b5998 !important;
  background: #fefefe;
  border-color: #3b5998;
}




.float-btn.top ul.toggled {
  opacity: 1;
  bottom: 45px;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}



/** Opens/Closes Left **/

.float-btn.left ul {
  width: 250px; /* Must define width for horizontal implementations */
  text-align: center;
  position: absolute;
  opacity: 0;
  right: -100px;
  bottom: 9px;  /* Ensure this matches the toggled version of this class below */
  transition: 0.4s;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.float-btn.left ul li {
  margin-right: 1rem; /* Space between sub buttons */
  margin-bottom: 0;
  display: inline-block;
}

.float-btn.left ul li a {
  width: 42px;
  height: 42px;
  padding-top: 8px;
}



.float-btn.left ul.toggled {
  opacity: 1;
  right: 60px;
  bottom: 9px;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}



@keyframes launcher-button-init{
    0%{
        transform:scale(0);
        opacity:0;
    }
    30%{
        transform:scale(.5) rotate(-180deg);
        opacity:0;
    }
    to{
        transform:scale(1) rotate(0);
        opacity:1;
    }
}



@keyframes launcher-button{
    0%{
        transform:rotate(0)
    }
    5%{
        transform:rotate(359deg)
    }
    to{
        transform:rotate(360deg)
    }
}

@keyframes launcher-button-pulsate{
    60%{
        transform:scale(1,1);
        opacity:0;
    }

    70%{
        transform:scale(1,1);
        opacity:1
    }
    100%{
        transform:scale(1.7,1.7);
        opacity:0
    }
}

@keyframes launcher-button-rotate{
    0%{
        transform:rotate(-90deg)
    }
    100%{
        transform:rotate(0)
    }
}