/* THIS IS FOR A TAB SYSTEM WITHIN NORMAL PAGES (NOT THE HOMEPAGE TABS) */

.tabs {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  font-family: 'Open Sans', Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.tabs button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-family: 'Open Sans', Trebuchet, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
}

.tabs button:hover {
  background-color: #d9d9d9;
}

.tabs button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  font-family: arial;
}

.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

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



/* FOR A SECOND TABBED SYSTEM IN A SINGLE PAGE */

.tabs2 {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tabs2 button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-family: arial;
  font-weight: 700;
}

.tabs2 button:hover {
  background-color: #d9d9d9;
}

.tabs2 button.active {
  background-color: #ccc;
}

.tabcontent2 {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  font-family: arial;
}

.tabcontent2 {
  animation: fadeEffect2 1s; /* Fading effect takes 1 second */
}

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




/* FOR A THIRD TABBED SYSTEM IN A SINGLE PAGE */

.tabs3 {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tabs3 button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-family: arial;
  font-weight: 700;
}

.tabs3 button:hover {
  background-color: #d9d9d9;
}

.tabs3 button.active {
  background-color: #ccc;
}

.tabcontent3 {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  font-family: arial;
}

.tabcontent3 {
  animation: fadeEffect3 1s; /* Fading effect takes 1 second */
}

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