// Color variables (appears count calculates by raw css)
@color0: #0066cc; // Appears 3 times
@color1: #cccccc; // Appears 2 times



.tabset>input[type="radio"] {
	left: -200vw;
	position: absolute;
}
.tabset {
	max-width: 65em;
	.tab-panel {
		display: none;
	}
}
.tabset>input:first-child:checked~.tab-panels>.tab-panel:first-child, .tabset>input:nth-child(3):checked~.tab-panels>.tab-panel:nth-child(2), .tabset>input:nth-child(5):checked~.tab-panels>.tab-panel:nth-child(3), .tabset>input:nth-child(7):checked~.tab-panels>.tab-panel:nth-child(4), .tabset>input:nth-child(9):checked~.tab-panels>.tab-panel:nth-child(5), .tabset>input:nth-child(11):checked~.tab-panels>.tab-panel:nth-child(6)  {
	display: block;
}
body {
	color: #333333;
	font-weight: 300;
	font: 16px/1.5em "Overpass", "Open Sans", Helvetica, sans-serif;
	padding: 30px;
}
.tabset>label {
	border-bottom: 0;
	border: 1px solid transparent;
	cursor: pointer;
	display: inline-block;
	font-weight: 600;
	padding: 15px 15px 25px;
	position: relative;
	&: {
		after {
			background: #8d8d8d;
			bottom: 10px;
			content: "";
			height: 4px;
			left: 15px;
			position: absolute;
			width: 22px;
		}
	}
	&:hover {
		color: @bgHover;
		 {
			after {
				background: @color0;
			}
		}
	}
}
.tabset>input {
	&:focus+label {
		color: @bgHover;
		 {
			after {
				background: @color0;
			}
		}
	}
	&:checked+label {
		border-bottom: 1px solid #ffffff;
		border-color: @color1;
		margin-bottom: -1px;
		 {
			after {
				background: @color0;
			}
		}
	}
}
.tab-panel {
	border-top: 1px solid @color1;
	padding: 30px 0;
}
* {
	box-sizing: border-box;
	&:before {
		box-sizing: border-box;
	}
	&:after {
		box-sizing: border-box;
	}
}