.css-tabs-wrapper {
	max-width: 700px;
	margin: 50px auto 20px
}

.css-tabs-wrapper>input {
	display: none
}

.css-tabs-wrapper>label {
	display: block;
	float: left;
	padding: 10px 20px;
	margin-right: 5px;
	cursor: pointer;
	font: bold 16px "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	letter-spacing: 1px;
	-webkit-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out
}

.css-tabs-wrapper>label:hover,
.css-tabs-wrapper>input:checked+label {
	background: #4a9998;
	color: #fff
}

.tabs {
	clear: both;
	min-height: 350px;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	-ms-perspective: 600px;
	perspective: 600px
}

.tabs p {
	text-align: justify;
	font: 14px/22px Verdana, sans-serif;
}

.tabs>div {
	position: absolute;
	opacity: 0;
	max-width: 700px;
	border: 2px solid #4a9998;
	padding: 10px 30px 40px;
	background: #e0f0f0;

	-webkit-transform: rotateX(-25deg);
	-ms-transform: rotateX(-25deg);
	-o-transform: rotateX(-25deg);
	transform: rotateX(-25deg);

	-webkit-transform-origin: top center;
	-moz-transform-origin: top center;
	-ms-transform-origin: top center;
	-o-transform-origin: top center;
	transform-origin: top center;

	-webkit-transition: opacity .3s ease-in-out, transform 1s;
	-o-transition: opacity .3s ease-in-out, transform 1s;
	transition: opacity .3s ease-in-out, transform 1s
}

.tabs>div h3 {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif
}

#tab-nav-1:checked ~ .tabs>div:nth-of-type(1),
#tab-nav-2:checked ~ .tabs>div:nth-of-type(2),
#tab-nav-3:checked ~ .tabs>div:nth-of-type(3),
#tab-nav-4:checked ~ .tabs>div:nth-of-type(4) {
	opacity: 1;
	z-index: 1;
	-webkit-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	transform: rotateX(0deg)
}

@media only screen and (max-width:992px) {
	.tabs {
		min-height: 420px
	}
}

@media only screen and (max-width:768px) {
	.tabs {
		min-height: auto
	}
	.css-tabs-wrapper>label {
		display: none
	}
	.tabs>div {
		border: 0;
		padding-bottom: 5px;
		opacity: 1;
		position: static;
		-webkit-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none
	}
	.tabs>div h3 {
		border-bottom: 2px solid #272822;
		padding-bottom: .5em;
		margin-bottom: .5em
	}
}