@keyframes (showTab) {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

    .tabButton {

        font-size: 15px; font-weight: bold; padding: 15px 20px; 

    }
	
    @media screen and (min-width: 768px) {

        main {

            width: 100%;

        }

    }
.tabsy > button {
  width: 100%;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  outline: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
  background: transparent;
}
.tabsy > .tabButton {
display: block;
  margin-top: 1px;
  background: #36394f;
  color: #FFF;
  text-align: center;
  transition: all 200ms ease-in-out;
}
.tabsy > input {
  display: none;
}
.tabsy > input:checked + label + .tab {
  display: block;
  width: 100%;
}
@keyframes showTab {}
.tabsy > .tab {
  background: #fff;
  display: none;
}
@media screen and (min-width: 768px) {
  .tabsy {
    display: flex;
    flex-wrap: wrap;
  }
  .tabsy > .tabButton {
    order: 1;
    align-items: flex-start;
    cursor: pointer;
  }
  .tabsy > input:checked + label {
    background: #fff;
    color: #5a5243;
  }
  .tabsy > .tab {
    order: 2;
  }
}