.box  {
  background: #F5B4CF;
  border-radius: 0px 4px 4px 0px;
  left: -304px ;
  padding: 4px 4px 4px 0px;
  position: fixed;
  top: 100px;
  transition: transform 0.4s;
  width: 300px;
  z-index: 999;
}

.box--right {
  border-radius: 4px 0px 0px 4px;  
  left: auto;
  right: -304px;
  padding: 4px 0px 4px 4px;
}
            
.box:hover {
  transform: translateX(304px);
}

.box--right:hover {
  transform: translateX(-304px);
}
            
.box .box__content {
  background: #fff;
  min-height: 200px;
  max-height: 400px;
  padding: 10px;
  position: relative;
  
    
}
            
.box .box__title {
  background: #fff;
  border: solid #F5B4CF;
  border-radius: 0px 0px 4px 4px;
  border-width: 0px 4px 4px;
  cursor: default;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  right: -74px;
  text-align: center;
  top: 70px;
  transform: rotate(-90deg);
  width: 106px;
}

.box--right .box__title {
  border-radius: 4px 4px 0px 0px;
  border-width: 4px 4px 0px;
  position: absolute;
  left: -74px;
}

.textbox-h2 {
    font-size: 16px;
    font-family: 'Yantramanav', Arial, sans-serif;
}

.textbox-p {
    font-size: 14px;
}

.box__description {
    overflow-y: scroll;
    max-height: 380px;         
}