#tabgroup {
  margin: 20px;
  font-family: "Lucida Console", monospace; 
}

.tab {
  border: none;
  
  min-height: 43px;
  margin: 0;
  width: 100%;
  
  text-align: left;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: #f1f1f1;
  
  display: inline-block;
  font-family: "Lucida Console", monospace; 
  
  border: none;
  border-radius: 10px 10px 0 0;
  
  cursor: pointer;
  
  margin: 0 10px 0 0;
  padding: 15px 16px;
  
  transition: 0.3s;
}

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

/* Create an active/current tablink class */
.tab .active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  
  margin: 0;
  padding: 12px 12px;
  border: 1px solid #ccc;
  
  font-family: "Arial", sans-serif;
  text-align: center;  
  
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

.tabcontent img {
  margin: 1%;
  display: inline-block;
  
  vertical-align: middle;
}

.single {
  width: 97%; 
}

.double {
  width: 44%; 
}

.split75 {
  width: 60%; 
}

.split25 {
  width: 30%; 
}

.triple {
  width: 30%; 
}

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