/*! ========= INFORMATION ============================
	- document:  Sticky buttons Pure CSS3
	- author:    Dmytro Lobov
	- url:       https://lobov.dev
	- email:     i@lobov.dev
======================================================
*/
/*--------------------------------------------------------------
		Reset
--------------------------------------------------------------*/
.sticky-buttons, .sticky-buttons * {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  text-decoration: none;
  background: none;
  line-height: 1;
}

/*--------------------------------------------------------------
		Main Style
--------------------------------------------------------------*/
.sticky-buttons {
  position: fixed;
  z-index: 99999;
}

.sticky-buttons .sb-icon {
  display: inline-block;
  text-align: center;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.sticky-buttons .sb-icon img {
  vertical-align: middle;
  max-width: 100%;
}

.sticky-buttons .sb-label {
  position: absolute;
  padding: 0 10px;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  white-space: nowrap;
  z-index: 3;
}

.sticky-buttons .sb-label:before {
  content: "";
  display: block;
  position: absolute;
}

.sticky-buttons a:hover .sb-label {
  visibility: visible;
  opacity: 1;
}

/* Label Visible */
.sticky-buttons .sb-label.-visible {
  visibility: visible;
  opacity: 1;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
  z-index: 2;
}

/* Shadow */
.sticky-buttons.-shadow .sb-icon,
.sticky-buttons.-shadow .sb-label {
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

/*--------------------------------------------------------------
		Size
--------------------------------------------------------------*/
.sticky-buttons.-small .sb-icon,
.sticky-buttons.-small .sb-label {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}

.sticky-buttons.-small .sb-icon {
  width: 30px;
}

.sticky-buttons.-medium .sb-icon,
.sticky-buttons.-medium .sb-label {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
}

.sticky-buttons.-medium .sb-icon {
  width: 40px;
}

.sticky-buttons.-large .sb-icon,
.sticky-buttons.-large .sb-label {
  height: 50px;
  line-height: 50px;
  font-size: 24px;
}

.sticky-buttons.-large .sb-icon {
  width: 50px;
}

/*--------------------------------------------------------------
		Shapes
--------------------------------------------------------------*/
.sticky-buttons.-square .sb-icon,
.sticky-buttons.-square .sb-label {
  border-radius: 0;
}

.sticky-buttons.-rsquare .sb-icon,
.sticky-buttons.-rsquare .sb-label {
  border-radius: 5px;
}

.sticky-buttons.-circle .sb-icon {
  border-radius: 50%;
}

.sticky-buttons.-circle .sb-label {
  border-radius: 5px;
}

.sticky-buttons.-ellipse .sb-icon {
  border-radius: 25% 75%;
}

.sticky-buttons.-ellipse .sb-label {
  border-radius: 5px;
}

/*--------------------------------------------------------------
		Position
--------------------------------------------------------------*/
.sticky-buttons.-left-top,
.sticky-buttons.-left-center,
.sticky-buttons.-left-bottom {
  left: 0;
}

.sticky-buttons.-left-top.-space,
.sticky-buttons.-left-center.-space,
.sticky-buttons.-left-bottom.-space {
  margin-left: 2px;
}

.sticky-buttons.-left-top.-space li,
.sticky-buttons.-left-center.-space li,
.sticky-buttons.-left-bottom.-space li {
  margin: 2px 0;
}

.sticky-buttons.-left-top .sb-label,
.sticky-buttons.-left-center .sb-label,
.sticky-buttons.-left-bottom .sb-label {
  margin-left: 12px;
}

.sticky-buttons.-left-top .sb-label:before,
.sticky-buttons.-left-center .sb-label:before,
.sticky-buttons.-left-bottom .sb-label:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 0 3px 0 0;
  -webkit-transform: translateY(-7px) rotate(45deg);
      -ms-transform: translateY(-7px) rotate(45deg);
          transform: translateY(-7px) rotate(45deg);
  background-color: inherit;
}

.sticky-buttons.-right-top,
.sticky-buttons.-right-center,
.sticky-buttons.-right-bottom {
  right: 0;
}

.sticky-buttons.-right-top.-space,
.sticky-buttons.-right-center.-space,
.sticky-buttons.-right-bottom.-space {
  margin-right: 2px;
}

.sticky-buttons.-right-top.-space li,
.sticky-buttons.-right-center.-space li,
.sticky-buttons.-right-bottom.-space li {
  margin: 2px 0;
}

.sticky-buttons.-right-top .sb-label,
.sticky-buttons.-right-center .sb-label,
.sticky-buttons.-right-bottom .sb-label {
  right: 100%;
  margin-right: 12px;
}

.sticky-buttons.-right-top .sb-label:before,
.sticky-buttons.-right-center .sb-label:before,
.sticky-buttons.-right-bottom .sb-label:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: -7px;
  width: 14px;
  height: 14px;
  border-radius: 0 3px 0 0;
  -webkit-transform: translateY(-7px) rotate(45deg);
      -ms-transform: translateY(-7px) rotate(45deg);
          transform: translateY(-7px) rotate(45deg);
  background-color: inherit;
}

.sticky-buttons.-right-top,
.sticky-buttons.-left-top {
  top: 0;
}

.sticky-buttons.-right-center,
.sticky-buttons.-left-center {
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.sticky-buttons.-right-bottom,
.sticky-buttons.-left-bottom {
  bottom: 0;
}

.sticky-buttons.-top-left,
.sticky-buttons.-top-center,
.sticky-buttons.-top-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  top: 0;
}

.sticky-buttons.-top-left.-space,
.sticky-buttons.-top-center.-space,
.sticky-buttons.-top-right.-space {
  margin-top: 2px;
}

.sticky-buttons.-top-left.-space li,
.sticky-buttons.-top-center.-space li,
.sticky-buttons.-top-right.-space li {
  margin: 0 2px;
}

.sticky-buttons.-top-left .sb-label,
.sticky-buttons.-top-center .sb-label,
.sticky-buttons.-top-right .sb-label {
  top: 100%;
  left: 0;
  margin-top: 2px;
}

.sticky-buttons.-bottom-left,
.sticky-buttons.-bottom-center,
.sticky-buttons.-bottom-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  bottom: 0;
}

.sticky-buttons.-bottom-left.-space,
.sticky-buttons.-bottom-center.-space,
.sticky-buttons.-bottom-right.-space {
  margin-bottom: 2px;
}

.sticky-buttons.-bottom-left.-space li,
.sticky-buttons.-bottom-center.-space li,
.sticky-buttons.-bottom-right.-space li {
  margin: 0 2px;
}

.sticky-buttons.-bottom-left .sb-label,
.sticky-buttons.-bottom-center .sb-label,
.sticky-buttons.-bottom-right .sb-label {
  bottom: 100%;
  left: 0;
  margin-bottom: 2px;
}

.sticky-buttons.-bottom-left,
.sticky-buttons.-top-left {
  left: 0;
}

.sticky-buttons.-bottom-center,
.sticky-buttons.-top-center {
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.sticky-buttons.-bottom-right,
.sticky-buttons.-top-right {
  right: 0;
}

/*--------------------------------------------------------------
		Animation
--------------------------------------------------------------*/
.sticky-buttons.-fade .sb-label,
.sticky-buttons.-flip-x .sb-label,
.sticky-buttons.-flip-y .sb-label,
.sticky-buttons.-slide .sb-label,
.sticky-buttons.-slide-out .sb-label,
.sticky-buttons.-zoom .sb-label,
.sticky-buttons.-rotate .sb-label,
.sticky-buttons.-rotate-zoom .sb-label {
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

/* FlipX */
.sticky-buttons.-flip-x a .sb-label {
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.sticky-buttons.-flip-x a:hover .sb-label {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}

/* FlipY */
.sticky-buttons.-flip-y a .sb-label {
  -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
          transform: scaleY(0);
}

.sticky-buttons.-flip-y a:hover .sb-label {
  -webkit-transform: scaleY(1);
      -ms-transform: scaleY(1);
          transform: scaleY(1);
}

/* Rotate */
.sticky-buttons.-rotate a .sb-label {
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
}

.sticky-buttons.-rotate a:hover .sb-label {
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

/* Zoom */
.sticky-buttons.-zoom a .sb-label {
  -webkit-transform: scale(0, 0);
      -ms-transform: scale(0, 0);
          transform: scale(0, 0);
}

.sticky-buttons.-zoom a:hover .sb-label {
  -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
          transform: scale(1, 1);
}

/* Rotate Zoom */
.sticky-buttons.-rotate-zoom a .sb-label {
  -webkit-transform: rotate(0deg) scale(0, 0);
      -ms-transform: rotate(0deg) scale(0, 0);
          transform: rotate(0deg) scale(0, 0);
}

.sticky-buttons.-rotate-zoom a:hover .sb-label {
  -webkit-transform: rotate(360deg) scale(1, 1);
      -ms-transform: rotate(360deg) scale(1, 1);
          transform: rotate(360deg) scale(1, 1);
}


/* Slide */
.sticky-buttons.-slide.-left-top a .sb-label,
.sticky-buttons.-slide.-left-center a .sb-label,
.sticky-buttons.-slide.-left-bottom a .sb-label {
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
}

.sticky-buttons.-slide.-right-top a .sb-label,
.sticky-buttons.-slide.-right-center a .sb-label,
.sticky-buttons.-slide.-right-bottom a .sb-label {
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}

.sticky-buttons.-slide.-bottom-left a .sb-label,
.sticky-buttons.-slide.-bottom-center a .sb-label,
.sticky-buttons.-slide.-bottom-right a .sb-label {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}

.sticky-buttons.-slide.-top-left a .sb-label,
.sticky-buttons.-slide.-top-center a .sb-label,
.sticky-buttons.-slide.-top-right a .sb-label {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

.sticky-buttons.-slide.-left-top a:hover .sb-label,
.sticky-buttons.-slide.-left-center a:hover .sb-label,
.sticky-buttons.-slide.-left-bottom a:hover .sb-label {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

.sticky-buttons.-slide.-right-top a:hover .sb-label,
.sticky-buttons.-slide.-right-center a:hover .sb-label,
.sticky-buttons.-slide.-right-bottom a:hover .sb-label {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

.sticky-buttons.-slide.-bottom-left a:hover .sb-label,
.sticky-buttons.-slide.-bottom-center a:hover .sb-label,
.sticky-buttons.-slide.-bottom-right a:hover .sb-label {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.sticky-buttons.-slide.-top-left a:hover .sb-label,
.sticky-buttons.-slide.-top-center a:hover .sb-label,
.sticky-buttons.-slide.-top-right a:hover .sb-label {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

/* Slide Out */
.sticky-buttons.-slide-out.-left-top a .sb-label,
.sticky-buttons.-slide-out.-left-center a .sb-label,
.sticky-buttons.-slide-out.-left-bottom a .sb-label {
  -webkit-transform: translateX(25%);
      -ms-transform: translateX(25%);
          transform: translateX(25%);
}

.sticky-buttons.-slide-out.-right-top a .sb-label,
.sticky-buttons.-slide-out.-right-center a .sb-label,
.sticky-buttons.-slide-out.-right-bottom a .sb-label {
  -webkit-transform: translateX(-25%);
      -ms-transform: translateX(-25%);
          transform: translateX(-25%);
}

.sticky-buttons.-slide-out.-bottom-left a .sb-label,
.sticky-buttons.-slide-out.-bottom-center a .sb-label,
.sticky-buttons.-slide-out.-bottom-right a .sb-label {
  -webkit-transform: translateY(-25%);
      -ms-transform: translateY(-25%);
          transform: translateY(-25%);
}

.sticky-buttons.-slide-out.-top-left a .sb-label,
.sticky-buttons.-slide-out.-top-center a .sb-label,
.sticky-buttons.-slide-out.-top-right a .sb-label {
  -webkit-transform: translateY(25%);
      -ms-transform: translateY(25%);
          transform: translateY(25%);
}

.sticky-buttons.-slide-out.-left-top a:hover .sb-label,
.sticky-buttons.-slide-out.-left-center a:hover .sb-label,
.sticky-buttons.-slide-out.-left-bottom a:hover .sb-label {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

.sticky-buttons.-slide-out.-right-top a:hover .sb-label,
.sticky-buttons.-slide-out.-right-center a:hover .sb-label,
.sticky-buttons.-slide-out.-right-bottom a:hover .sb-label {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

.sticky-buttons.-slide-out.-bottom-left a:hover .sb-label,
.sticky-buttons.-slide-out.-bottom-center a:hover .sb-label,
.sticky-buttons.-slide-out.-bottom-right a:hover .sb-label {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.sticky-buttons.-slide-out.-top-left a:hover .sb-label,
.sticky-buttons.-slide-out.-top-center a:hover .sb-label,
.sticky-buttons.-slide-out.-top-right a:hover .sb-label {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

/*--------------------------------------------------------------
		Colors
--------------------------------------------------------------*/

/* white */
.sticky-buttons [class^=white] .sb-icon {
  color: #ffffff;
}

.sticky-buttons [class^=white] .sb-label {
  background: #ffffff;
}

.sticky-buttons [class^=white]:hover .sb-icon {
  background: #ffffff;
}

.sticky-buttons [class$=white] .sb-icon {
  background: #ffffff;
}

.sticky-buttons [class$=white] .sb-label {
  color: #ffffff;
}

.sticky-buttons [class$=white]:hover .sb-icon {
  color: #ffffff;
}

/* black */
.sticky-buttons [class^=black] .sb-icon {
  color: #000000;
}

.sticky-buttons [class^=black] .sb-label {
  background: #000000;
}

.sticky-buttons [class^=black]:hover .sb-icon {
  background: #000000;
}

.sticky-buttons [class$=black] .sb-icon {
  background: #000000;
}

.sticky-buttons [class$=black] .sb-label {
  color: #000000;
}

.sticky-buttons [class$=black]:hover .sb-icon {
  color: #000000;
}


.sticky-buttons [class^=grey] .sb-icon {
  color: #808080;
}

.sticky-buttons [class^=grey] .sb-label {
  background: #808080;
}

.sticky-buttons [class^=grey]:hover .sb-icon {
  background: #808080;
}

.sticky-buttons [class$=grey] .sb-icon {
  background: #808080;
}

.sticky-buttons [class$=grey] .sb-label {
  color: #808080;
}

.sticky-buttons [class$=grey]:hover .sb-icon {
  color: #808080;
}

/* red */
.sticky-buttons [class^=red] .sb-icon {
  color: #e3001b;
}

.sticky-buttons [class^=red] .sb-label {
  background: #e3001b;
}

.sticky-buttons [class^=red]:hover .sb-icon {
  background: #e3001b;
}

.sticky-buttons [class$=red] .sb-icon {
  background: #e3001b;
}

.sticky-buttons [class$=red] .sb-label {
  color: #e3001b;
}

.sticky-buttons [class$=red]:hover .sb-icon {
  color: #e3001b;
}

/* orange */
.sticky-buttons [class^=orange] .sb-icon {
  color: #f60;
}

.sticky-buttons [class^=orange] .sb-label {
  background: #f60;
}

.sticky-buttons [class^=orange]:hover .sb-icon {
  background: #f60;
}

.sticky-buttons [class$=orange] .sb-icon {
  background: #f60;
}

.sticky-buttons [class$=orange] .sb-label {
  color: #f60;
}

.sticky-buttons [class$=orange]:hover .sb-icon {
  color: #f60;
}

/* yellow */
.sticky-buttons [class^=yellow] .sb-icon {
  color: #ffcc01;
}

.sticky-buttons [class^=yellow] .sb-label {
  background: #ffcc01;
}

.sticky-buttons [class^=yellow]:hover .sb-icon {
  background: #ffcc01;
}

.sticky-buttons [class$=yellow] .sb-icon {
  background: #ffcc01;
}

.sticky-buttons [class$=yellow] .sb-label {
  color: #ffcc01;
}

.sticky-buttons [class$=yellow]:hover .sb-icon {
  color: #ffcc01;
}

/* lime */
.sticky-buttons [class^=lime] .sb-icon {
  color: #b1c903;
}

.sticky-buttons [class^=lime] .sb-label {
  background: #b1c903;
}

.sticky-buttons [class^=lime]:hover .sb-icon {
  background: #b1c903;
}

.sticky-buttons [class$=lime] .sb-icon {
  background: #b1c903;
}

.sticky-buttons [class$=lime] .sb-label {
  color: #b1c903;
}

.sticky-buttons [class$=lime]:hover .sb-icon {
  color: #b1c903;
}

/* green */
.sticky-buttons [class^=green] .sb-icon {
  color: #27a22d;
}

.sticky-buttons [class^=green] .sb-label {
  background: #27a22d;
}

.sticky-buttons [class^=green]:hover .sb-icon {
  background: #27a22d;
}

.sticky-buttons [class$=green] .sb-icon {
  background: #27a22d;
}

.sticky-buttons [class$=green] .sb-label {
  color: #27a22d;
}

.sticky-buttons [class$=green]:hover .sb-icon {
  color: #27a22d;
}

/* cyan */
.sticky-buttons [class^=cyan] .sb-icon {
  color: #00b1e5;
}

.sticky-buttons [class^=cyan] .sb-label {
  background: #00b1e5;
}

.sticky-buttons [class^=cyan]:hover .sb-icon {
  background: #00b1e5;
}

.sticky-buttons [class$=cyan] .sb-icon {
  background: #00b1e5;
}

.sticky-buttons [class$=cyan] .sb-label {
  color: #00b1e5;
}

.sticky-buttons [class$=cyan]:hover .sb-icon {
  color: #00b1e5;
}

/* blue */
.sticky-buttons [class^=blue] .sb-icon {
  color: #006bb3;
}

.sticky-buttons [class^=blue] .sb-label {
  background: #006bb3;
}

.sticky-buttons [class^=blue]:hover .sb-icon {
  background: #006bb3;
}

.sticky-buttons [class$=blue] .sb-icon {
  background: #006bb3;
}

.sticky-buttons [class$=blue] .sb-label {
  color: #006bb3;
}

.sticky-buttons [class$=blue]:hover .sb-icon {
  color: #006bb3;
}

/* purple */
.sticky-buttons [class^=purple] .sb-icon {
  color: #ad007c;
}

.sticky-buttons [class^=purple] .sb-label {
  background: #ad007c;
}

.sticky-buttons [class^=purple]:hover .sb-icon {
  background: #ad007c;
}

.sticky-buttons [class$=purple] .sb-icon {
  background: #ad007c;
}

.sticky-buttons [class$=purple] .sb-label {
  color: #ad007c;
}

.sticky-buttons [class$=purple]:hover .sb-icon {
  color: #ad007c;
}

/* pink */
.sticky-buttons [class^=pink] .sb-icon {
  color: #ea4c89;
}

.sticky-buttons [class^=pink] .sb-label {
  background: #ea4c89;
}

.sticky-buttons [class^=pink]:hover .sb-icon {
  background: #ea4c89;
}

.sticky-buttons [class$=pink] .sb-icon {
  background: #ea4c89;
}

.sticky-buttons [class$=pink] .sb-label {
  color: #ea4c89;
}

.sticky-buttons [class$=pink]:hover .sb-icon {
  color: #ea4c89;
}

@media print
{    
    .sticky-buttons, .sticky-buttons *
    {
        display: none !important;
    }
}