Адаптивні вкладки на всю ширину

lt;div id="Tabs" class="Tabs"gt; ...lt;/divgt;

lt;ulgt;lt;ligt; lt;a href="# Section-1" class="Icon-shop"gt; lt;spangt; Магазинlt;/spangt; lt;/agt; lt;/ligt;lt;ligt; lt;a href="# Section-2" class="Icon-cup"gt; lt;spangt; Напоїlt;/spangt; lt;/agt; lt;/ligt;lt;ligt; lt;a href="# Section-3" class="Icon-food"gt; lt;spangt; Їжаlt;/spangt; lt;/agt; lt;/ligt;lt;ligt; lt;a href="# Section-4" class="Icon-lab"gt; lt;spangt; Лабораторіяlt;/spangt; lt;/agt; lt;/ligt;lt;ligt; lt;a href="# Section-5" class="Icon-truck"gt; lt;spangt; Списокlt;/spangt; lt;/agt; lt;/ligt;lt;/ulgt;lt;/navgt;

lt;div class="Content"gt;
id="Section-1"gt;lt;div class="Mediabox"gt; ...lt;/divgt;lt;div class="Mediabox"gt; ...lt;/divgt;lt;div class="Mediabox"gt; ...lt;/divgt;lt;/sectiongt; ...lt;/divgt;

@ Font-face {font-family: `Icomoon`-src:url("../fonts/icomoon/icomoon.eot?pvm5gj `)-src:url(`../fonts/icomoon/icomoon.eot?#iefixpvm5gj`) format(`Embedded-opentype`),url(`../fonts/icomoon/icomoon.woff?pvm5gj`) format(`Woff`),url(`../fonts/icomoon/icomoon.ttf?pvm5gj`) format(`Truetype`),url(`../fonts/icomoon/icomoon.svg?pvm5gj#icomoon`) format(`Svg`)-font-weight: normal-font-style: normal-}.icon-food: before {content: " e600"-}.icon-lab: before {content: " e601"-}.icon-cup: before {content: " e602"-}.icon-truck: before {content: " e603"-}.icon-shop: before {content: " e604"-}

.tabs {position: relative-width: 100%-overflow: hidden-margin: 1em 0 2em-font-weight: 300-}.tabs nav {text-align: center-}.tabs nav ul {padding: 0-margin: 0-list-style: none-display: inline-block-}.tabs nav ul li {border: 1px solid # becbd2-border-bottom: none-margin: 0 0.25em-display: block-float: left-position: relative-}.tabs nav li.tab-current {border: 1px solid # 47a3da-box-shadow: inset 0 2px # 47a3da-border-bottom: none-z-index: 100-}.tabs nav li.tab-current: before,.tabs nav li.tab-current: after {content: ``-position: absolute-height: 1px-right: 100%-bottom: 0-width: 1000px-background: # 47a3da-}.tabs nav li.tab-current: after {right: auto-left: 100%-width: 4000px-}.tabs nav a {color: # becbd2-display: block-font-size: 1.45em-line-height: 2.5-padding: 0 1.25em-white-space: nowrap-}.tabs nav a: hover {color: # 768e9d-}.tabs nav li.tab-current a {color: # 47a3da-}.tabs nav a: before {display: inline-block-vertical-align: middle-text-transform: none-font-weight: normal-font-variant: normal-font-family: `Icomoon`-line-height: 1-speak: none--webkit-font-smoothing: antialiased-margin: -0.25em 0.4em 0 0-}.content section {font-size: 1.25em-padding: 3em 1em-display: none-max-width: 1230px-margin: 0 auto-}.content section: before,.content section: after {content: ``-display: table-}.content section: after {clear: both-}.no-js .content section {display: block-padding-bottom: 2em-border-bottom: 1px solid # 47a3da-}.content section.content-current {display: block-}.mediabox {float: left-width: 33%-padding: 0 25px-}.mediabox img {max-width: 100%-display: block-margin: 0 auto-}.mediabox h3 {margin: 0.75em 0 0.5em-}.mediabox p {padding: 0 0 1em 0-margin: 0-line-height: 1.3-}

@media screen and (max-width: 52.375em) {.tabs nav a span {display: none-}.tabs nav a: before {margin-right: 0-}.mediabox {float: none-width: auto-padding: 0 0 35px 0-font-size: 90%-}.mediabox img {float: left-margin: 0 25px 10px 0-max-width: 40%-}.mediabox h3 {margin-top: 0-}.mediabox p {margin-left: 40%-margin-left: calc(40% + 25px)-}.mediabox: before,.mediabox: after {content: ``-display: table-}.mediabox: after {clear: both-}}@media screen and (max-width: 32em) {.tabs nav ul,.tabs nav ul li a {width: 100%-padding: 0-}.tabs nav ul li {width: 20%-width: calc(20% + 1px)-margin: 0 0 0 -1px-}.tabs nav ul li: Last-child {border-right: none-}.mediabox {text-align: center-}.mediabox img {float: none-margin: 0 auto-max-width: 100%-}.mediabox h3 {margin: 1.25em 0 1em-}.mediabox p {margin: 0-}}

lt;script src="Js / cbpFWTabs.js"gt; lt;/scriptgt;lt;scriptgt; new CBPFWTabs (document.getElementById ( `tabs`)) -lt;/scriptgt;