@import url('//fonts.googleapis.com/css?family=Open+Sans:400,600,700');
p
{
	margin:0;line-height:1.5;color:#444;font-size:12px;
}
a
{
	color:#07adf0;font-size:12px;
}
.main
{
	height:auto;
	margin:0 auto; 
	max-width:100%;
	min-width:320px;
	margin:0; 
}
.content 
{
	color:#444;
	height:auto;
	background:#fff;	
	border-top:solid 1px #e8e8e8;
}
.content > div 
{
	padding:0;
	display:none;	
}
input.col-drop 
{
	display:none;
}
label 
{
   	display:inline-block;padding:10px 20px;font-weight:500;text-align:center;background:#fff;border:solid 1px #e8e8e8;
	text-transform:uppercase;border-bottom:none;margin:0 0 0 0.5em;border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
}
label:hover
{
   color:#444;cursor:pointer;background:#f0f0f0;
}
input:checked + label 
{
	background:#f0f0f0;color:#000;border:1px solid #e8e8e8;
}
 
#tab1:checked ~ .content #content1,
#tab2:checked ~ .content #content2,
#tab3:checked ~ .content #content3,
#tab4:checked ~ .content #content4 
{
	width:100%;
	display:block;
	padding:1em 0 1em 0;}
 
@media (max-width: 765px)
{
	.main 
	{
		margin:0 auto; 
		min-width:100%; 
		max-width:100%;
	}
	label 
	{
		display:inline-block;padding:10px 4px;font-weight:normal;text-align:center;background:#fafafa;border:solid 1px #e8e8e8;
		border-bottom:none;font-size:11px;
	}
	p 
	{
		margin:0;font-size:12px;line-height:1.5;color:#444;
	}
	a
	{	
		color:#07adf0;font-size:12px;
	}
	#tab3:checked ~ .content #content3
	{
		width:100%;
	}
}
@media (max-width: 500px)
{
	.main
	{
		margin: 0 auto; 
	    min-width:100%; 
	    max-width:100%;
	}
	label 
	{
		display:inline-block;padding:10px 4px;font-weight:normal;text-align:center;background:#fafafa;border:solid 1px #e8e8e8;
		border-bottom:none;font-size:11px;
	}
	p 
	{
		margin:0;font-size:12px;line-height:1.5;color:#444;
	}
   	a
   	{	
		color:#07adf0;font-size:12px;
   	}
	#tab1:checked ~ .content #content1,
	{
		width:100%;
	}
	.content #content2 h2
	{
		padding:0;margin:0;width:auto;
	}
}