/** code by webdevtrick ( https://webdevtrick.com ) **/
/*
@import url(https://fonts.googleapis.com/css?family=Anton&display=swap);
body {
  height: 100vh;
  background-size: 100% 100%;
  font-family: 'Anton', sans-serif;
  color: #fff;
}
*/
.sbuttons 
{
  bottom: 5%;
  position: fixed;
  margin: 10em;
  right: 0;
  color: white;  
}

.sbutton
{
  display: block;
  width:  60px;
  height: 60px;
  border-radius: 50%;
  text-align: center;
  color: white;
  margin: 20px auto 0;
  /*
  box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);
  */
  box-shadow: 0 10px 18px rgba(0,0,0,0.25),
              0 10px 10px rgba(0,0,0,0.22);
  cursor: pointer;
  -webkit-transition: all .1s ease-out;
  transition: all .1s ease-out;
  position: relative;
}

.sbutton > i 
{
  font-size: 22px;
  line-height: 60px;
  transition: all .2s ease-in-out;
  transition-delay: 2s;
}

.sbutton:active,
.sbutton:focus,
.sbutton:hover
{
  background-color: black;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
}

.sbutton:not(:last-child)
{
  width:  60px;
  height: 60px;
  margin: 20px auto 0;
  opacity: 0;
}

.sbutton:not(:last-child) > i 
{
  font-size:   20px;
  line-height: 60px;
  transition: all .3s ease-in-out;
}

.sbuttons:hover .sbutton:not(:last-child)
{
  opacity: 1;
  width:  60px;
  height: 60px;
  margin: 15px auto 0;
}

.sbutton:nth-last-child(1)
{
  -webkit-transition-delay: 25ms;
  transition-delay: 25ms;
}

.sbutton:not(:last-child):nth-last-child(2)
{
  -webkit-transition-delay: 20ms;
  transition-delay: 20ms;
}

.sbutton:not(:last-child):nth-last-child(3)
{
  -webkit-transition-delay: 40ms;
  transition-delay: 40ms;
}

.sbutton:not(:last-child):nth-last-child(4)
{
  -webkit-transition-delay: 60ms;
  transition-delay: 60ms;
}

.sbutton:not(:last-child):nth-last-child(5)
{
  -webkit-transition-delay: 80ms;
  transition-delay: 80ms;
}

.sbutton:not(:last-child):nth-last-child(6)
{
  -webkit-transition-delay: 100ms;
  transition-delay: 100ms;
}
 
[tooltip]:before
{
  font-family: 'Roboto';
  font-weight: 600;
  border-radius: 2px;
  background-color: #585858;
  color: #fff;
  content: attr(tooltip);
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  padding: 5px 7px;
  margin-left: 10px;
  position: absolute;
  left: 100%;
  bottom: 20%;
  white-space: nowrap;
}
 
[tooltip]:hover:before,
[tooltip]:hover:after
{
  cursor: pointer;    
  visibility: visible;
  opacity: 1;
}

.sbutton.mainsbutton
{
  background: #12A4FC; /*#0C5D69; #2ab1ce;*/
}

.sbutton.mainsbutton:hover
{
  opacity: 1;
  background: #2ab1ce;
}
/*
.sbutton.gplus 
{
  background: #F44336;
}

.sbutton.pinteres
{
  background: #e60023;
}

.sbutton.twitt
{
  background: #03A9F4;
}

.sbutton.fb
{
  background: #3F51B5;
}
*/
.sbutton.whatsapp
{
  background: #00e676;
}