/* apply a natural box layout model to all elements */
*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input.tab {
	position:absolute;
	left:-999em;
}
label.tab {
	float:left;
	border:1px solid #B4E3FF;
	background:#E0E4E9;
	color:#666666;
	padding:5px 10px;
	overflow:hidden;
	cursor:pointer;
	font-weight: bolder;
}
.tabwrap{
	overflow:hidden;
	width:88%;
	margin-bottom: 20px;
	margin-top: 70px;
	padding-bottom: 20px;
}
.tabs {
	display:table;
	width:100%;
	white-space:nowrap;
	clear:both;
	border-bottom:3px solid #B4E3FF;
	word-spacing:-.25em;
}
.content {
	display:inline-block;
	vertical-align:top;
	border:3px solid #B4E3FF;
	border-bottom:none;
	white-space:normal;
	width:100%;
	margin-right:-100%;
	word-spacing:0;
}
.content-inner{padding:10px;}
[type=radio]:checked + label  { background: #B4E3FF;}
.tab[type=radio] ~ .tabs .content .content-inner {
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transform: translateX(100%);
 	-moz-transform:    translateX(100%);
 	-ms-transform:     translateX(100%);
 	-o-transform:      translateX(100%);
 	transform:         translateX(100%);
	-webkit-transition: all 0.6s ease;
	-moz-transition:    all 0.6s ease;
	-ms-transition:     all 0.6s ease;
	-o-transition:      all 0.6s ease;
	transition:      all 0.6s ease;
}
.tab1[type=radio]:checked ~ .tabs .content1 .content-inner,
.tab2[type=radio]:checked ~ .tabs .content2 .content-inner,
.tab3[type=radio]:checked ~ .tabs .content3 .content-inner,
.tab4[type=radio]:checked ~ .tabs .content4  .content-inner  {
 opacity: 1;
 -webkit-transform: translateX(0%);
 -moz-transform:    translateX(0%);
 -ms-transform:     translateX(0%);
 -o-transform:      translateX(0%);
 transform:         translateX(0%);
}

@media screen and (max-width:760px){
 label.tab {float:none;display:block}	
	.tabs{display:block;font-size:0}
	.content{font-size:16px;font-size:1rem}	
}