/* Style the tab */
.tab {
  overflow: hidden;
  width: 100%;
}

/* Style the buttons inside the tab */
.tab button {
    float: left;
    outline: none;
    cursor: pointer;
    padding: 10px 30px;
    transition: 0.3s;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    text-align: left;
    border-radius: 6px;
    margin-bottom: 6px;
    background-color: #f6f6f6;
    border: 2px solid #e4e4e4;
}

.tablinks::after {
    content: '';
    display: inline-block;
    position: relative;
    left: 6px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='11'%3E%3Cpath d='M.99 4.624A1 1 0 000 5.629v-.282a.998.998 0 00.991 1.005h11.916l-2.514 2.693c-.373.4-.375 1.048.005 1.455l-.214-.23a.92.92 0 001.363 0l3.771-4.04a1.085 1.085 0 000-1.46L11.548.73a.917.917 0 00-1.362-.003L10.4.499a1.085 1.085 0 00.008 1.464l2.482 2.66H.99z' fill='%231b232a' fill-rule='evenodd'/%3E%3C/svg%3E");
    width: 16px;
    height: 11px;
    margin-right: -6px;
    top: 5px;
    float: right;
}

.tablinks:hover::after, .tablinks:active::after {
    width: 22px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='11'%3E%3Cpath d='M1.002 4.624C.449 4.624 0 5.078 0 5.629v-.282c0 .555.449 1.005 1.003 1.005h17.904l-2.514 2.693c-.373.4-.375 1.048.005 1.455l-.214-.23a.92.92 0 001.363 0l3.771-4.04a1.085 1.085 0 000-1.46L17.548.73a.917.917 0 00-1.362-.003L16.4.499a1.085 1.085 0 00.008 1.464l2.482 2.66H1.002z' fill='%231b232a' fill-rule='evenodd'/%3E%3C/svg%3E");
    margin-right: -12px;
    top: 5px;
    float: right;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ffc82f;
    border: 2px solid #ffc82f;
    
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 30px;
    background-color:#fff;
    border-radius: 6px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

.tabcontent h3 {font-size:28px;}

.tabcontent p {margin-top:15px;}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@media only screen and (max-width : 991px) {
    .tabcontent h3 {font-size:24px;}
    
}