.accordian {
  display: flex;
height: 600px;
    width: 100%;
  background-color:#fff;
  color: white;
  line-height: 1.75;
  font-size: 0.875rem;
}

@media only screen and (min-width: 900px) {
   .accordian { 
margin-left: auto;
    margin-right: auto;
    
}}


@media only screen and (max-width: 899px) {
   .accordian { 
display:none;
    
}}


.accordian--vertical {
  flex-direction: column;
}
.accordian--vertical .accordian__item {
  height: 60px;
}
.accordian--vertical .accordian__heading {
  height: 30px;

}
.accordian--horizontal .accordian__item {
  width: 50px;
  display: flex;
  position: relative;
}
.accordian--horizontal .accordian__heading {
  width: 89px;
  height: 100%;
  border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    cursor: pointer; 
  -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
}
.accordian--horizontal .accordian__body {
  min-width: calc(400px - 186px);
  overflow: hidden;
}
.accordian__item {
  flex-grow: 0.03;
  transition: flex-grow 0.25s ease-in;
  overflow: hidden;
  background-color: #268caa;
}
.accordian__item.active {
  flex-grow: 1;
}
.accordian__heading {
  text-transform: uppercase;
  font-size: 1.2rem;
  line-height: 1.90;
  padding: 1rem;
  background: linear-gradient(0deg, #269db9 20%, #30c4e0 150%);
}


.accordian__heading:hover {
     background: #30c4e0!important;
  background-color: #30c4e0;   
  color: #fff;
}


.accordian__heading:hover .accordian__desc{
  background-color: #30c4e0;   
  color: #fff;
}


.accordian__desc {
  text-transform: uppercase;
  font-size: 1.2rem;
  line-height: 1.5;
  background-color: transparent;
      float:right;
      color:#fff;
}

.accordian__desc:hover {
  background-color: #30c4e0;   
  color: #fff;
}


.accordian__body {
  padding: 3rem;
  color: #ffffff;
  background:linear-gradient(0deg, #269db9 20%, #30c4e0 150%);
}

.accordian-txt {
font-size:17px;
font-weight:300;
padding-top:20px;
width:90%;
    }