@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

*, *:before, *:after {
	margin: 0;
	padding: 0;
/*	box-sizing: border-box;
*/
}

.main {
	margin: 0 auto;
	min-width: 320px;
	max-width: 800px;
	min-height: 560px;
	font: 14px 'Open Sans', sans-serif;
}

.tab_content {
	background: #ffffff;
	color: #373737;
}

.tab_content > div {
	display: none;
	padding: 20px 25px 5px;
}

.main > input  {
	display: none;
}

.main > label  {
	display: inline-block;
	padding: 15px 10px;
	font-weight: 600;
	text-align: center;
	color: #7c7c7c;
	border: 1px solid transparent;
	background: #eeeeee;
}

.main > label:hover {
	color: #888888;
	cursor: pointer;
	background: #ffffff;
}

.main > input:checked + label {
	background: #ffffff;
	color: #000000;
	border: 1px solid #dddddd;
	border-top: 2px solid orange;
	border-bottom: 1px solid #ffffff;
}

.main #tab_1:checked ~ .tab_content #content_tab1,
.main #tab_2:checked ~ .tab_content #content_tab2,
.main #tab_3:checked ~ .tab_content #content_tab3,
.main #tab_4:checked ~ .tab_content #content_tab4,
.main #tab_5:checked ~ .tab_content #content_tab5,
.main #tab_6:checked ~ .tab_content #content_tab6,
.main #tab_7:checked ~ .tab_content #content_tab7 {
  display: block;
}

@media screen and (max-width: 400px) {
	.main  > label {
		padding: 15px 10px;
	}
}