/* Default tab style */ .tabs { position: relative; overflow: hidden; margin: 0 auto; width: 100%; font-weight: 300; font-size: 1.25em; margin-top: 30px; } /* Nav */ .tabs nav { text-align: center; } .tabs nav ul { position: relative; display: -ms-flexbox; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; margin: 0 auto; padding: 0; max-width: 1200px; list-style: none; -ms-box-orient: horizontal; -ms-box-pack: center; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; } .tabs nav ul li { position: relative; z-index: 1; display: block; margin: 0; text-align: center; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .tabs nav a { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 2.5; } .tabs nav a span { vertical-align: middle; } .tabs nav li.tab-current a { color: #74777b; } .tabs nav a:focus { outline: none; } /* Icons */ .icon::before { z-index: 10; display: inline-block; margin: 0 0.4em 0 0; vertical-align: middle; text-transform: none; font-weight: normal; font-variant: normal; font-size: 1.3em; font-family: 'stroke7pixeden'; line-height: 1; speak: none; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Content */ .content-wrap { position: relative; } .content-wrap section { display: none; margin: 0 auto; padding: 15px 10px 15px 10px; max-width: 1200px; } .content-wrap section.content-current { display: block; } /* Fallback */ .no-js .content-wrap section { display: block; padding-bottom: 2em; border-bottom: 1px solid rgba(255,255,255,0.6); } .no-flexbox nav ul { display: block; } .no-flexbox nav ul li { min-width: 15%; display: inline-block; } @media screen and (max-width: 58em) { .tabs nav a.icon span { display: none; } .tabs nav a:before { margin-right: 0; } }