.morphbutton.fullwidth{
  width: 100%;
}
/* Buttons */
.morphbutton-close{
  top: 0;
  right: 0;
  background: none;
  border: none;

  position: absolute;
}
.morphbutton-open{
  width: 100%;
}

/* Boxes */
.morphbutton{
  /*overflow: hidden;
  position: absolute;*/

  display: inline-block;
  overflow: hidden;
  position: relative;

  /*transition: all .5s;*/
}
.morphbutton.active{
  overflow: inherit;
}
.morphbutton::before{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  content: '';
  z-index: 800;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.morphbutton.active::before{
  opacity: 1;
  pointer-events: auto;
}
.morphbutton .morphbutton-content{
  width: 0;
  height: 0;
  left: 0;
  top: 0;
  margin-left: 0;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;

  overflow: hidden;
  position: fixed;
  z-index: 801;
  transition: opacity 0.3s 0.0s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);


}
.morphbutton.active .morphbutton-content{
  width: 320px !important;
  height: 400px !important;
  padding: 20px;
  left: 50% !important;
  top: 50% !important;
  margin-left: -160px;
  margin-top: -200px;
  /*opacity: 1;*/
  pointer-events: auto;
  /*z-index: 801;*/
}
.morphbutton .morphbutton-content *{
  opacity: 0;
}
.morphbutton.open .morphbutton-content *{
  opacity: 1;
}

