@-webkit-keyframes showTab {
  from {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes showTab {
  from {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.tabsy > button {
  width: 100%;
  font-family: proxima-nova, sans-serif;
  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: #ddddda;
  color: #a9a9a9;
  text-align: center;
  transition: all 200ms ease-in-out; 
 
}
.tabsy > input {
  display: none; }
  .tabsy > input:checked + label + .tab {
    display: block; }
    .tabsy > input:checked + label + .tab > .content {
      -webkit-animation: showTab 200ms ease-in-out;
      animation: showTab 200ms ease-in-out; }
.tabsy > .tab {
  background: #fff;
  display: none; 
	width: 100%;
	text-align: center;
}

.tabButton { 
	font-weight:700; padding:20px 30px;  font-size:20px; 
    text-transform:uppercase; 
    letter-spacing: 2px;
	box-sizing: border-box;
}


.tab { padding: 20px; text-align: left; box-sizing: border-box;}


@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: #012169; }
  .tabsy > .tab {order:2;} 
	.tabButton {width: 33.33%;}
}