/* Style the tab */
.tab {
  overflow: hidden;
  border: none;
  background-color: transparent;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: #e1e1e1;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-weight: 700;
  border-radius: 10px;
  margin-right: 1em;
  color: #009bc2;
  margin-bottom:1em;
}

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

/* Create an active/current tablink class */
.tab button.active {
  background-color: #009bc2;
  color:#fff;
  font-size: 21px;
}

/* Style the tab content */
.tabcontent {
  background-color: #ededed;
  display: none;
  padding: 21px;
  border: none;
  border-top: none;
  border-radius:10px;
} 

.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
  overflow: auto;
  max-height: 1030px;
}

.tabcontent h4 {
    font-weight: 700;
    margin-bottom: 1.5em;
}
.tabcontent h4 span{
  color:#009bc2;
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@media (max-width: 568px){
  .tablinks{
    width: 100%;
  }
}