.tabs { position: relative; width: 100%; overflow: hidden;}

/* Nav */
.tabs nav { margin-bottom: -1px; text-align: left; background: none;}

.tabs nav ul { padding: 0; margin: 0; list-style: none; display: inline-block;}

.tabs nav ul li { position: relative; float: left; display: block; margin-right: -1px; background-color: #f9f9f9; border: 1px solid #d7d7d7;}
.tabs nav li.tab-current { background-color: #fff; border-bottom-color: #fff; z-index: 100;}

.tabs nav a { padding: 0 20px; display: block; font-size: 170%; font-weight: 600; color: #999; line-height: 48px; text-shadow: none; white-space: nowrap;}
.tabs nav a:hover { color: #222; text-decoration: none;}
.tabs nav li.tab-current a { color: #222;}

/* Icons */
.tabs nav a:before { display: inline-block; margin: -5px 10px 0 0; width: 15px; height: 15px; background-color: #fff; border: 5px solid #0083C9; vertical-align: middle; text-transform: none; speak: none; content: "";}

/* Content */
.content { padding: 2em; background-color: #fff; border: 1px solid #d7d7d7; overflow: hidden;}
.content article { font-size: 150%; display: none;}

.content article:before,
.content article:after { content: ''; display: table;}
.content article:after { clear: both;}

/* Fallback example */
.no-js .content article { display: block; border-bottom: 1px solid #47a3da;}
.content article.content-current { display: block;}

/* Example media queries */

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 480px) {
	.tabs nav a { padding: 0 15px;}
	.tabs nav a:before { display: none;}
	.content { padding: 1em;}
}

@media screen and (max-width: 320px) {
	.tabs nav ul,
	.tabs nav ul li a { width: 100%;}
	/*.tabs nav ul li { width: 20%; width: calc(20% + 1px); margin: 0 0 0 -1px;}*/
	/*.tabs nav ul li:last-child { border-right: none;}*/
	.tabs nav a:before { display: none;}

}