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

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

.tabsy>button {
	width: 100%;
	font-family: inherit;
	font-size: 100%;
	margin: 0;
	outline: 0;
	border: 0;
	vertical-align: baseline;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	background: transparent
}

.tabsy>.tabButton {
	display: block;
	margin-top: 1px;
	background: #c10000;
	color: #ffffff;
	text-align: center;
	-webkit-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out
}

.tabsy>input {
	display: none
}

.tabsy>input:checked+label+.tab {
	display: block
}

.tabsy>input:checked+label+.tab>.content {
	-webkit-animation: showTab 250ms ease-in-out;
	animation: showTab 250ms ease-in-out
}

.tabsy>.tab {
	background: #fff;
	display: none
}

.tabsy>input:checked+label {
	background: #fff;
	color: #c10000
}

@media screen and (min-width: 768px) {
	.tabsy {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap
	}
	.tabsy>.tabButton {
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		-ms-flex-order: 1;
		order: 1;
		-webkit-box-align: start;
		-webkit-align-items: flex-start;
		-ms-flex-align: start;
		align-items: flex-start;
		cursor: pointer
	}
	.tabsy>.tab {
		-webkit-box-ordinal-group: 3;
		-webkit-order: 2;
		-ms-flex-order: 2;
		order: 2
	}
}