.tabs{
    padding: 1% 0 3%;
    margin-bottom: 20px;
}
.tabs br{
    display: none;
}
.tabs .btn{
    margin: 0 15px;
    float: left;
}

.tabs .title{
    color: #4a4a4a;
    background: #d5d9e4;
    border-radius: 5px;
    cursor: pointer;
}

.tabs .description{
    height: 0;
    overflow: hidden;
    color: #9b9b9b;
    background: #e9ebf1;
    border-radius: 5px;
    padding: 0 40px;
    box-sizing: content-box;
    -webkit-transition: all 0.5s ease-out;
       -moz-transition: all 0.5s ease-out;
         -o-transition: all 0.5s ease-out;
            transition: all 0.5s ease-out;
}
.tab{
    margin-bottom: 1px;
}
.tab > p{
    display: none;
}
.tab .title{
    position: relative;
    padding: 15px 15px 15px 60px;
    text-align: center;
    -webkit-transition: all 0.1s ease-out;
       -moz-transition: all 0.1s ease-out;
         -o-transition: all 0.1s ease-out;
            transition: all 0.1s ease-out;
}
.tab .title:hover{
    -webkit-filter: brightness(1.02);
            filter: brightness(1.02);
}
.tab .title:before{
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 30px;
    background: #243772;
    left: 12px;
    top: 8px;
}
.tab .title:after{
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-left: solid 1px #fff;
    border-bottom: solid 1px #fff;
    left: 21px;
    top: 15px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.tab.active .title:after{
    border-left: none;
    border-bottom: none;
    border-right: solid 1px #fff;
    border-top: solid 1px #fff;
    top: 19px;
}

.tab .description .info{
    opacity: 0;
}
.tab.active .description .info{
    opacity: 1;
    -webkit-transition: all 0.25s ease-out 0.5s;
       -moz-transition: all 0.25s ease-out 0.5s;
         -o-transition: all 0.25s ease-out 0.5s;
            transition: all 0.25s ease-out 0.5s;
}

.tab.active .description{
    padding: 40px;
}


.description .buttons{
    display: inline-block;
}
.description center{
    margin: 40px 0 0;
}

#main .description p,
#main .description ul li{
    margin: 0 0 15px;
}
.tab .description ul {
    list-style: none; /* Remove default bullets */
}
.tab .description ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #243772; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}