.bcSlideOut {
  position: fixed;
  z-index: 10000;
  border: 1px solid white;
}

/* dont display on ie 9 and below */
@media \0screen\, screen\9 {
  .bcSlideOut {
    display: none;
  }
}

.bcSlideOut.bcAnimateSlideOut {
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}
.bcSlideOut.bcRight {
  right: 0;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}
.bcSlideOut.bcRight.bcSlideOutOpen {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}
.bcSlideOut.bcLeft {
  left: 0;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}
.bcSlideOut.bcLeft.bcSlideOutOpen {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
}
.bcSlideOut.bcBottom {
  bottom: 0;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}
.bcSlideOut.bcBottom.bcSlideOutOpen {
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}
.bcSlideOut.bcTop {
  top: 0;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}
.bcSlideOut.bcTop.bcSlideOutOpen {
  -webkit-transform: translateY(0%);
  -ms-transform: translateY(0%);
  transform: translateY(0%);
}

/* And now the default styling */

.bcSlideOutTrigger:hover {
  background: #999;
}
.bcSlideOutContent {
  float: left;
  background: #666;
  color: #fff;
  min-height: 100px;
  padding-left: 10px;
  padding-right: 10px;
}
.bcSlideOutTrigger {
  -webkit-backface-visibility: hidden;
  background: #666;
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  padding: 5px 10px;
  position: absolute;
}
.bcSlideOutTrigger h4 {
  margin: 0px;
  padding: 0px;
  white-space: nowrap;
  color: #fff;
}
.bcSlideOut.bcVerticalOrientation.bcRight .bcSlideOutTrigger,
.bcSlideOut:not(.bcVerticalOrientation).bcBottom .bcSlideOutTrigger,
.bcSlideOut.bcBottom {
  border-bottom-width: 0px;
}
.bcSlideOut.bcVerticalOrientation.bcLeft .bcSlideOutTrigger,
.bcSlideOut:not(.bcVerticalOrientation).bcTop .bcSlideOutTrigger,
.bcSlideOut.bcTop {
  border-top-width: 0px;
}

.bcSlideOut.bcVerticalOrientation.bcTop .bcSlideOutTrigger,
.bcSlideOut:not(.bcVerticalOrientation).bcRight .bcSlideOutTrigger,
.bcSlideOut.bcRight {
  border-right-width: 0px;
}
.bcSlideOut.bcVerticalOrientation.bcBottom .bcSlideOutTrigger,
,
.bcSlideOut:not(.bcVerticalOrientation).bcLeft .bcSlideOutTrigger,
.bcSlideOut.bcLeft {
  border-left-width: 0px;
}
.bcSlideOut.bcRight .bcSlideOutTrigger {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  left: 0;
  top: 0;
  margin-top: -1px;
}
.bcSlideOut.bcVerticalOrientation.bcRight .bcSlideOutTrigger {
  -webkit-transform: rotate(-90deg) translateY(-100%) translateX(-100%);
  -ms-transform: rotate(-90deg) translateY(-100%) translateX(-100%);
  transform: rotate(-90deg) translateY(-100%) translateX(-100%);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}
.bcSlideOut.bcLeft .bcSlideOutTrigger {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  right: 0;
  top: 0;
  margin-top: -1px;
}
.bcSlideOut.bcVerticalOrientation.bcLeft .bcSlideOutTrigger {
  -webkit-transform: translateX(100%) rotate(-90deg) translateX(-100%);
  -ms-transform: translateX(100%) rotate(-90deg) translateX(-100%);
  transform: translateX(100%) rotate(-90deg) translateX(-100%);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}
.bcSlideOut.bcVerticalOrientation.bcTop .bcSlideOutTrigger {
  -webkit-transform: translateY(100%) rotate(-90deg) translateX(-100%);
  -ms-transform: translateY(100%) rotate(-90deg) translateX(-100%);
  transform: translateY(100%) rotate(-90deg) translateX(-100%);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}
.bcSlideOut.bcTop .bcSlideOutTrigger {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  left: 0;
  bottom: 0;
  margin-left: -1px;
}
.bcSlideOut.bcVerticalOrientation.bcBottom .bcSlideOutTrigger {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}
.bcSlideOut.bcBottom .bcSlideOutTrigger {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  left: 0;
  top: 0;
  margin-left: -1px;
}