.ninejfloaticon-module {

}
.ninejfloaticon-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.0);
  z-index: 1030;
}
.ninejfloaticon-container {
  position: fixed;
  top: 0;
  left: auto;
  right: -50%;
  bottom: 0;
  height: 100%;
  width: 100%;
  max-width: 50%;
  background: #FFF;
  box-shadow: 0 0 0 rgba(0,0,0,0.3);
  padding: 90px 15px 30px;
  z-index: 1030;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
  overflow-y: auto;
}
.ninejfloaticon-logo {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -50%;
  background: #666;
  padding: 90px 15px 15px;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}
.ninejfloaticon-logo-inner {
  max-width:none;
  margin: 0 auto;
  max-width: 300px;
}
.ninejfloaticon-logo-inner img {
  -webkit-filter: grayscale(100%) contrast(0%) brightness(200%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%) contrast(0%) brightness(200%);
}
/*
.ninejfloaticon-container p,
.ninejfloaticon-container h1,
.ninejfloaticon-container h2,
.ninejfloaticon-container h3,
.ninejfloaticon-container h4,
.ninejfloaticon-container h5,
.ninejfloaticon-container h6 {
  color: #FFF;
}
.ninejfloaticon-container a {
  color: #FFF;
}*/
.ninejfloaticon-icon {
  position: fixed;
  top: 20%;
  right: 0;
  left: auto;
  bottom: auto;
  width: 46px;
  height: 46px;
  padding: 0;
  text-align:center;
  overflow: hidden;
  z-index: 1031;
  font-size: 28px;
  background: #666;
  color: #FFF;
  cursor: pointer;
  -webkit-transition: top 500ms ease-in-out,
                      height 500ms ease-in-out,
                      background 500ms ease-in-out;
  transition: top 500ms ease-in-out,
              height 500ms ease-in-out,
              background 500ms ease-in-out;
}
.ninejfloaticon-module .icopen {
  top: 0;
}
.ninejfloaticon-module .open {
  right: 0;
  box-shadow: 0 0 6px rgba(0,0,0,0.0);
}
.ninejfloaticon-module .logopen {
  left: 0;
}
.ninejfloaticon-module .icon-open {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-trans: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  opacity: 0.8;
}
.ninejfloaticon-module .icon-close {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-trans: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  opacity: 0.8;
  width: 70%;
  height: 70%;
}
.ninejfloaticon-module .icon-close span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #FFF;
  left: 0;
  top: 50%;
}
.ninejfloaticon-module .icon-close span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.ninejfloaticon-module .icon-close span:nth-child(2) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@media (max-width: 620px) {
  .ninejfloaticon-logo {
    width: 0;
  }
  .ninejfloaticon-container {
    width: 100%;
    max-width: 100%;
    right: -100%;
  }
}