.opus-sm-links {
  /* Basic Font Styles */
  font-size:13px;
  color:white;

  position: fixed;
  z-index:1000;
}

.opus-sm-link:hover,
.opus-sm-link:focus {
  color:inherit;
  text-decoration: none;
}

/* **************** Layout 2 **************** */
.opus-sm-links--layout-flyout {
  top:50%;
  transform:translateY(-50%);
  max-width:100%;
}
.opus-sm-links--layout-flyout::after {
  content:' ';
  display:table;
  clear: both;
}
.opus-sm-links--layout-flyout .opus-sm-link {
  width:44px;
  max-width:100%;
  height:44px;
  display:flex;
  flex-wrap:nowrap;
  overflow:hidden;
  margin-bottom:2px;
  position:relative;
  transition:width .4s ease;
  will-change: width;
  z-index:0;
}
.opus-sm-links--layout-flyout .opus-sm-link:last-child {
  margin-bottom:0;
}
.opus-sm-links--layout-flyout .opus-sm-link__image {
  display:flex;
  flex-wrap:nowrap;
  justify-content: center;
  align-items: center;
  height:100%;
  position: relative;
  z-index:1;
  flex:0 0 44px;
  max-width:44px;
}
.opus-sm-links--layout-flyout .opus-sm-link__image img {
  width:30px;
  height:30px;
}
.opus-sm-links--layout-flyout .opus-sm-link__text {
  display:flex;
  flex-wrap: nowrap;
  align-items: center;
  height:100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  width:100%;
  text-align:center;
  padding:0 15px;
  
  transition: text-indent 0.6s ease;
  overflow:hidden;
}

.opus-sm-links--layout-flyout .opus-sm-link__background {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
}
/* HOVER */
.opus-sm-links--layout-flyout .opus-sm-link:hover {
  width:230px;
}
.opus-sm-links--layout-flyout .opus-sm-link:hover .opus-sm-link__text {
  text-indent: 0;
}

/* POSITIONS */
.opus-sm-links--layout-flyout.opus-sm-links--pos-right {
  right:0;
}
.opus-sm-links--layout-flyout.opus-sm-links--pos-right .opus-sm-link {
  float:right;
  clear:right;
  justify-content: flex-end;
}
.opus-sm-links--layout-flyout.opus-sm-links--pos-right .opus-sm-link__image {
  order:1;
}
.opus-sm-links--layout-flyout.opus-sm-links--pos-right .opus-sm-link__text {
  text-indent: 425px;
}


.opus-sm-links--layout-flyout.opus-sm-links--pos-left {
  left:0;
}
.opus-sm-links--layout-flyout.opus-sm-links--pos-left .opus-sm-link {
  float:left;
  clear:left;
  justify-content: flex-start;
}
.opus-sm-links--layout-flyout.opus-sm-links--pos-left .opus-sm-link__text {
  text-indent: -425px;
}


/* **************** Layout 1 **************** */
.opus-sm-links--layout-default {
  display:flex;
  flex-wrap:nowrap;
  height:60px;
  width:260px;
  overflow:hidden;
}
.opus-sm-links--layout-default .opus-sm-link {
  display:flex;
  flex-wrap:nowrap;
  align-items: center;
  justify-content: flex-start;
  height:100%;
  flex:0 0 100%;
  max-width:100%;
  width:100%;
  padding-left:20px;
  padding-right:20px;
  pointer-events: none;
  position:absolute;
  z-index:0;
  color:inherit;
  text-decoration: none;
}
.opus-sm-links--layout-default .opus-sm-link__image {
  flex:0 0 35px;
  max-width:35px;
  display:flex;
  flex-wrap:nowrap;
  height:100%;
  align-items: center;
  justify-content: flex-start;
}
.opus-sm-links--layout-default .opus-sm-link__image img {
  width:20px;
  height:auto;
}
.opus-sm-links--layout-default .opus-sm-link__text {
  width:100%;
  font-family: inherit;
  font-weight: inherit;
}
.opus-sm-links--layout-default .opus-sm-link__background,
.opus-sm-links--layout-default .opus-sm-link__background::after {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
}
.opus-sm-links--layout-default .opus-sm-link__background::after {
  content:'';
  z-index:0;
  opacity: 0;
  background:#000000;
}

/* HOVER */
.opus-sm-links--layout-default .opus-sm-link:hover .opus-sm-link__background::after{
  opacity: .3;
}


/* ANIMATION */
.opus-sm-links--layout-default .opus-sm-link,
.opus-sm-links--layout-default .opus-sm-link__background::after {
  -webkit-transition: all 250ms cubic-bezier(.645,.045,.355,1);
  transition: all 250ms cubic-bezier(.645,.045,.355,1);
}
.opus-sm-links--layout-default .opus-sm-link__image, .opus-sm-link__text  {
  -webkit-transition: opacity .2s cubic-bezier(.455,.03,.515,.955) 150ms,-webkit-transform .3s cubic-bezier(.455,.03,.515,.955) 80ms;
  transition: opacity .2s cubic-bezier(.455,.03,.515,.955) 150ms,-webkit-transform .3s cubic-bezier(.455,.03,.515,.955) 80ms;
  transition: transform .3s cubic-bezier(.455,.03,.515,.955) 80ms,opacity .2s cubic-bezier(.455,.03,.515,.955) 150ms;
  transition: transform .3s cubic-bezier(.455,.03,.515,.955) 80ms,opacity .2s cubic-bezier(.455,.03,.515,.955) 150ms,-webkit-transform .3s cubic-bezier(.455,.03,.515,.955) 80ms;
}

.opus-sm-links--layout-default .opus-sm-link {
  opacity: 0;
  transform:translateX(100%);
}
.opus-sm-links--layout-default .opus-sm-link__text,
.opus-sm-links--layout-default .opus-sm-link__image {
  opacity: 0;
  transform:translate(100%);
}


.opus-sm-links--layout-default .opus-sm-link.out {
  transform:translateX(0);
  opacity:1;
  pointer-events: none;
}
.opus-sm-links--layout-default .opus-sm-link.out .opus-sm-link__text,
.opus-sm-links--layout-default .opus-sm-link.out .opus-sm-link__image {
  opacity: 1;
  transform:translate(0);
}

.opus-sm-links--layout-default .opus-sm-link.moved-out {
  opacity: 0;
  transform:translateX(100%);
  pointer-events: none;
}
.opus-sm-links--layout-default .opus-sm-link.moved-out .opus-sm-link__text,
.opus-sm-links--layout-default .opus-sm-link.moved-out .opus-sm-link__image {
  opacity: 0;
  transform:translate(100%);
}

.opus-sm-links--layout-default .opus-sm-link.active {
  pointer-events: auto;
  transform:translateX(0);
  opacity:1;
  z-index:1;
}
.opus-sm-links--layout-default .opus-sm-link.active .opus-sm-link__text,
.opus-sm-links--layout-default .opus-sm-link.active .opus-sm-link__image {
  opacity: 1;
  transform:translate(0);
}

/* MOBILE */
@media (max-width:768px){
  .opus-sm-links--layout-default .opus-sm-link__text {
    display:none;
  }
  .opus-sm-links--layout-default {
    width:50px !important;
    height:50px !important;
  }
  .opus-sm-links--layout-default .opus-sm-link {
    padding-left:0;
    padding-right:0;
  }
  .opus-sm-links--layout-default .opus-sm-link__image {
    flex:0 0 100%;
    max-width:100%;
    justify-content: center;
  }
}

/* POSITIONS */
.opus-sm-links--layout-default.opus-sm-links--,
.opus-sm-links--layout-default.opus-sm-links--pos-rb {
  bottom:0;
  right:0;
}
.opus-sm-links--layout-default.opus-sm-links--pos-lb {
  bottom:0;
  left:0;
}
.opus-sm-links--layout-default.opus-sm-links--pos-lt {
  top:0;
  left:0;
}
.opus-sm-links--layout-default.opus-sm-links--pos-rt {
  top:0;
  right:0;
}