.control{
  box-sizing : border-box;
  position : absolute;
  top : 0px;
  right : 0px;
  width : 150px;
  z-index : 1000;
}

.control ul{
  width:100%;
  margin-top:0px;
  padding-left:0px;
}

.control ul li{
  height:48px;
  line-height: 48px;
}

.control ul li.title{
  box-sizing:border-box;
  position:relative;
  display:block;
  list-style:none;
  padding-left: -30px;
  width:100%;
  background-color: rgba(255, 255, 255, 0.9);
  color:#6EA0A4;
  font-weight:400;
  text-align: center;
  font-family:Arial,sans-serif;
  text-transform : uppercase;
  cursor : pointer;
  transition : box-shadow 160ms linear;
}
/*    mekes block as flag shape       
 .control ul li.title:before{
              content: "";
              position: absolute;
              left: -23px;
              bottom: 0;
              width: 0;
              height: 0;
              border-left : 23px solid transparent;
              border-top: 23px solid #D4645C;
              border-bottom: 23px solid #D4645C;
        }
*/
.control ul li.title:hover {
  box-shadow: inset 0 -4px 0 #6EA0A4;
  background-color:#fff;
  color:#666;
}

.control ul li.title.active{
  box-shadow: inset 0 -4px 0 #6EA0A4;
  background-color:#fff;
  color:#666;
}

.control ul li.style {
  box-sizing:border-box;
  display:block;
  position:absolute;
  list-style:none;
  width:100%;
  left:150px;
  background-color:rgba(255,255,255,0.9);
  color:#666;
  font-weight:400;
  text-align: center;
  font-family:sans-serif;
  text-transform : uppercase;
  cursor : pointer;
  transition: box-shadow 160ms ease-in-out, background-color 160ms linear;
}
.control ul li.style:hover{
  background-color:#6EA0A4;
  color:#fff;
}

.control ul li.style:nth-child(1){
  transition: left 0.1s linear;
}
.control ul li.style:nth-child(2){
  transition: left 0.2s linear;
}
.control ul li.style:nth-child(3){
  transition: left 0.3s linear;
}
.control ul li.style:nth-child(4){
  transition: left 0.4s linear;
}
.control ul li.style:nth-child(5){
  transition: left 0.5s linear;
}
.control ul li.style:nth-child(6){
  transition: left 0.6s linear;
}
.control ul li.style:nth-child(7){
  transition: left 0.7s linear;
}
.control ul li.style:nth-child(8){
  transition: left 0.8s linear;
}
.control ul li.show{
  left:0px;
}
.control ul li.style.active{
  background-color:#6EA0A4;
  color:#fff;
}

@media (max-width: 768px) {

  .control{
    width:110px;
    top:60px;
    font-size:14px;
  }
}