@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400");
html {
  min-height: 100%;
  display: grid;
}

body {
  display: grid;
  background: #D0D8DB;
}

.box {
  margin: auto;
  width: 100px;
  height: 50px;
}

.share {
  position: absolute;
  width: 120px;
  height: 50px;
  border-radius: 30px;
  outline: none;
  border: 0;
  background: #2A4870;
  overflow: hidden;
  transition: all .5s ease;
  box-shadow: 3px 5px 10px rgba(42, 72, 112, 0.5);
}

.scale {
  transform: scale(1.1);
  transition: all .5s ease;
}

.line, .line2, .line3 {
  width: 13px;
  height: 60px;
  position: absolute;
  transform: rotate(15deg);
}

.line {
  right: 22px;
  top: -5px;
  background: #9ECE92;
}

.line2 {
  right: 10px;
  background: #33A8CC;
}

.line3 {
  right: -3px;
  background: #1E73B5;
}

.icon {
  user-select: none;
  position: absolute;
  color: #D0D8DB;
  left: 15px;
  top: 6px;
}
.icon h1 {
  font-family: XBRoyaBold, "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0px;
  font-size: .9em;
}
.icon .btn {
  position: absolute;
  right: -27px;
  background: rgba(208, 216, 219, 0.9);
  color: #2A4870;
  top: 7px;
  padding: 3px 7px;
  border-radius: 50%;
}

.active {
  z-index: -2;
  margin-top: -10px;
  margin-left: -60px;
  position: absolute;
  opacity: 0;
  transition: all .7s ease;
}
.active li {
  list-style-type: none;
  width: 40px;
  height: 40px;
  color: #D0D8DB;
  border-radius: 50%;
  background: #2A4870;
  position: absolute;
  box-shadow: 2px 2px 6px rgba(42, 72, 112, 0.5);
}
.active i {
  margin: 10px 10px 8px 9px;
}

.open {
  position: absolute;
  margin-left: -60px;
  margin-top: 50px;
  opacity: 1;
}

.fab {
  padding-left: 5px;
}

.one {
  left: 0;
}

.two {
  left: 50px;
}

.three {
  left: 100px;
}

.four {
  left: 150px;
}

.five {
  left: 200px;
}

#hide {
  visibility: hidden;
}