.sideItems{
    /* background-color: rebeccapurple; */
    z-index: 10000;
    position: fixed;
    top: 50%;
    display: block;
    
}
  /* div {
    display: block;
    position:absolute;
    top:50%;
    left:50%;
    -ms-transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
  } */
  
  /* Icons */
  
  .media_icons {
    color:#fff;
    background: #00bef2;
    border-radius:4px;
    text-align:center;
    text-decoration:none;
    font-family:fontawesome;
    position: relative;
    display: block;
    width: 54px;
    height: 45px;
    padding-top:12px;
    margin:7px 2px;
    -o-transition:all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
     -webkit-font-smoothing: antialiased;
  }
  
  .media_icons:hover {
    background: #fdf3f5;
  }
  
  /* pop-up text */
  
  .media_icons span {
    color:#ffffff;
    position:absolute;
    font-family:sans-serif;
    bottom:0;
    left:-25px;
    /* right:-25px; */
    padding:10px 7px;
    z-index:-1;
    font-size:14px;
    top: 0px;
    margin-top: 0px;
    border-radius:2px;
    background:#00bef2;
    visibility:hidden;
    /* width: 100; */
    opacity:0;
    -o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  
  /* text pops up when icon is in hover state */
  
  .media_icons:hover span {
    /* bottom:50px; */
    visibility:visible;
    opacity:1;
    left: 60px;
  }
  
  /* font awesome icons */
  
  .media_icons:nth-of-type(1):before {
  content:'\f09a';
  }
  .media_icons:nth-of-type(2):before {
  content:'\f099';
  }
  .media_icons:nth-of-type(3):before {
  content:'\f16d';
  }