/* Individual tab styles */

/*****************************/
/* Bar */
/*****************************/

.tabs-style-bar nav { background: rgba(40,44,42,0.05); }
.tabs-style-bar nav ul { border: 4px solid transparent; }
.tabs-style-bar nav ul li a { margin: 0 2px; background-color: #f7f7f7; color: #74777b; transition: background-color 0.2s, color 0.2s; }
.tabs-style-bar nav ul li a:hover,
.tabs-style-bar nav ul li a:focus { color: #2CC185; }
.tabs-style-bar nav ul li a span { text-transform: uppercase; letter-spacing: 1px; font-weight: 500; font-size: 0.6em; }
.tabs-style-bar nav ul li.tab-current a { background: #2CC185; color: #fff; }
/*****************************/
/* Icon box */
/*****************************/

.tabs-style-iconbox nav { background: rgba(255,255,255,0.4); }
.tabs-style-iconbox nav ul li a { overflow: visible; padding: 20px 25px; line-height: 1; -webkit-transition: color 0.2s; transition: color 0.2s; border-right: 1px solid #d5d5d5; }
.tabs-style-iconbox nav ul li a span { font-size: 15px; }
.tabs-style-iconbox nav ul li.tab-current { z-index: 100; }
.tabs-style-iconbox nav ul li.tab-current a { background: #897051; box-shadow: -1px 0 0 #897051; }
.tabs-style-iconbox nav ul li.tab-current a::after { position: absolute; top: 100%; left: 50%; margin-left: -10px; width: 0; height: 0; border: solid transparent; border-width: 10px; border-top-color: #897051; content: ''; pointer-events: none; }
.tabs-style-iconbox nav ul li:first-child::before,
.tabs-style-iconbox nav ul li::after { position: absolute; top: 20%; right: 0; z-index: -1; width: 1px; height: 60%; background: rgba(255,255,255,0.07); content: ''; }
.tabs-style-iconbox nav ul li span a:active { outline: 0; /*background:#897051;*/ color: #fff; text-decoration: none; }
.tabs-style-iconbox nav ul li:first-child::before { right: auto; left: 0; }
.tabs-style-iconbox .icon::before { display: block; margin: 0 0 0.25em 0; }
/*****************************/
/* Underline */
/*****************************/

.tabs-style-underline nav { background: #fff; }
.tabs-style-underline nav a { padding: 0.25em 0 0.5em; border-left: 1px solid #e7ecea; -webkit-transition: color 0.2s; transition: color 0.2s; }
.tabs-style-underline nav li:last-child a { border-right: 1px solid #e7ecea; }
.tabs-style-underline nav li a::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; background: #2CC185; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translate3d(0, 150%, 0); transform: translate3d(0, 150%, 0); }
.tabs-style-underline nav li.tab-current a::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.tabs-style-underline nav a span { font-weight: 700; }
/*****************************/
/* Triangle and line */
/*****************************/

.tabs-style-linetriangle nav a { overflow: visible; border-bottom: 1px solid rgba(0,0,0,0.2); -webkit-transition: color 0.2s; transition: color 0.2s; }
.tabs-style-linetriangle nav a span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1em; }
.tabs-style-linetriangle nav li.tab-current a:after,
.tabs-style-linetriangle nav li.tab-current a:before { position: absolute; top: 100%; left: 50%; width: 0; height: 0; border: solid transparent; content: ''; pointer-events: none; }
.tabs-style-linetriangle nav li.tab-current a:after { margin-left: -10px; border-width: 10px; border-top-color: #e7ecea; }
.tabs-style-linetriangle nav li.tab-current a:before { margin-left: -11px; border-width: 11px; border-top-color: rgba(0,0,0,0.2); }
 @media screen and (max-width: 58em) {
.tabs-style-linetriangle nav { font-size: 0.6em; }
}
/*****************************/
/* Top Line */
/*****************************/

.tabs-style-topline { max-width: 1200px; }
.tabs-style-topline nav li { border: 1px solid rgba(40,44,42,0.1); }
.tabs-style-topline nav li:not(:last-child) { border-right: none; }
.tabs-style-topline nav li.tab-current { border-top-color: #2CC185; border-bottom: none; }
.tabs-style-topline nav a { padding: 0.65em 0 0.5em; background: rgba(40,44,42,0.05); color: #74777b; line-height: 1; -webkit-transition: color 0.2s; transition: color 0.2s; }
.tabs-style-topline nav a:hover,
.tabs-style-topline nav a:focus { color: #2CC185; }
.tabs-style-topline nav li.tab-current a { background: none; box-shadow: inset 0 3px 0 #2CC185; color: #2CC185; }
.tabs-style-topline .icon::before { display: block; margin: 0; }
.tabs-style-topline nav a span { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 0.5em; }
/*****************************/
/* Falling Icon, from http://vintageproductions.eu/grid/interactivity/ */ 
/*****************************/

.tabs-style-iconfall { overflow: visible; }
.tabs-style-iconfall nav a { display: inline-block; overflow: visible; padding: 1em 0 2em; color: #74777b; line-height: 1; -webkit-transition: color 0.3s cubic-bezier(0.7, 0, 0.3, 1); transition: color 0.3s cubic-bezier(0.7, 0, 0.3, 1); }
.tabs-style-iconfall nav a:hover,
.tabs-style-iconfall nav a:focus,
.tabs-style-iconfall nav li.tab-current a { color: #2CC185; }
.tabs-style-iconfall nav a span { font-weight: 700; }
.tabs-style-iconfall nav li::before { position: absolute; bottom: 1em; left: 50%; margin-left: -20px; width: 40px; height: 4px; background: #2CC185; content: ''; opacity: 0; -webkit-transition: -webkit-transform 0.2s ease-in; transition: transform 0.2s ease-in; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); }
.tabs-style-iconfall nav li.tab-current::before { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
.tabs-style-iconfall .icon::before { display: block; margin: 0 0 0.35em; opacity: 0; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s; -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); pointer-events: none; }
.tabs-style-iconfall nav li.tab-current .icon::before { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
 @media screen and (max-width: 58em) {
.tabs-style-iconfall nav li .icon::before { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}
/*****************************/
/* Moving Line */
/*****************************/

.tabs-style-linemove nav { background: #fff; }
.tabs-style-linemove nav li:last-child::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: #2CC185; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; }
/* Move the line */
.tabs-style-linemove nav li:first-child.tab-current ~ li:last-child::before { -webkit-transform: translate3d(-400%, 0, 0); transform: translate3d(-400%, 0, 0); }
.tabs-style-linemove nav li:nth-child(2).tab-current ~ li:last-child::before { -webkit-transform: translate3d(-300%, 0, 0); transform: translate3d(-300%, 0, 0); }
.tabs-style-linemove nav li:nth-child(3).tab-current ~ li:last-child::before { -webkit-transform: translate3d(-200%, 0, 0); transform: translate3d(-200%, 0, 0); }
.tabs-style-linemove nav li:nth-child(4).tab-current ~ li:last-child::before { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }
.tabs-style-linemove nav a { padding: 1em 0; color: #74777b; line-height: 1; -webkit-transition: color 0.3s, -webkit-transform 0.3s; transition: color 0.3s, transform 0.3s; }
.tabs-style-linemove nav li.tab-current a { color: #2CC185; -webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0); }
.tabs-style-linemove nav a span { font-weight: 700; }
/*****************************/
/* Line */
/*****************************/

.tabs-style-line nav ul { padding: 0 2em; max-width: none; box-shadow: inset 0 -2px #d1d3d2; }
.tabs-style-line nav a { padding: 0.7em 0.4em; box-shadow: inset 0 -2px #d1d3d2; color: #74777b; text-align: left; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 0.8em; line-height: 1; -webkit-transition: color 0.3s, box-shadow 0.3s; transition: color 0.3s, box-shadow 0.3s; }
.tabs-style-line nav a:hover,
.tabs-style-line nav a:focus { box-shadow: inset 0 -2px #74777b; }
.tabs-style-line nav li.tab-current a { box-shadow: inset 0 -2px #2CC185; color: #2CC185; }
 @media screen and (max-width: 58em) {
.tabs-style-line nav ul { display: block; box-shadow: none; }
.tabs-style-line nav ul li { display: block; -webkit-flex: none; flex: none; }
}
/*****************************/
/* Circle */
/*****************************/

.tabs-style-circle { overflow: visible; }
.tabs-style-circle nav li::before { position: absolute; top: 50%; left: 50%; margin: -60px 0 0 -60px; width: 120px; height: 120px; border: 1px solid #2CC185; border-radius: 50%; content: ''; opacity: 0; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); -webkit-transform: scale3d(0, 0, 1); transform: scale3d(0, 0, 1); }
 @media screen and (max-width: 58em) {
.tabs-style-circle nav li::before { margin: -40px 0 0 -40px; width: 80px; height: 80px; }
}
.tabs-style-circle nav li.tab-current::before { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
.tabs-style-circle nav a { overflow: visible; color: #74777b; font-weight: 700; font-size: 0.9em; line-height: 1.1; -webkit-transition: color 0.3s cubic-bezier(0.7, 0, 0.3, 1); transition: color 0.3s cubic-bezier(0.7, 0, 0.3, 1); }
.tabs-style-circle nav a span { display: inline-block; }
.tabs-style-circle nav a span,
.tabs-style-circle .icon::before { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1); transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1); }
.tabs-style-circle nav a:hover,
.tabs-style-circle nav a:focus { color: #4a4a4b; }
.tabs-style-circle nav li.tab-current a { color: #2CC185; }
.tabs-style-circle nav li.tab-current a span { -webkit-transform: translate3d(0, 4px, 0); transform: translate3d(0, 4px, 0); }
.tabs-style-circle .icon::before { display: block; margin: 0; pointer-events: none; }
.tabs-style-circle nav li.tab-current .icon::before { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); }
/*****************************/
/* Shape */
/*****************************/

.tabs-style-shape { max-width: 1200px; }
.tabs-style-shape nav ul li { margin: 0 3em; }
.tabs-style-shape nav ul li:first-child { margin-left: 0; }
.tabs-style-shape nav ul li.tab-current { z-index: 100; }
.tabs-style-shape nav li a { overflow: visible; margin: 0 -3em 0 0; padding: 0; color: #fff; font-weight: 500; }
.tabs-style-shape nav li:first-child a span { padding-left: 2em; border-radius: 30px 0 0 0; }
.tabs-style-shape nav li:last-child a span { padding-right: 2em; border-radius: 0 30px 0 0; }
.tabs-style-shape nav li a svg { position: absolute; left: 100%; margin: 0; width: 3em; height: 100%; fill: #bdc2c9; }
.tabs-style-shape nav li a svg:nth-child(2),
.tabs-style-shape nav li:last-child a svg { right: 100%; left: auto; -webkit-transform: scale3d(-1, 1, 1); transform: scale3d(-1, 1, 1); }
.tabs-style-shape nav li a span { display: block; overflow: hidden; padding: 0.65em 0; background-color: #bdc2c9; text-overflow: ellipsis; white-space: nowrap; }
.tabs-style-shape nav li a:hover span { background-color: #2CC185; }
.tabs-style-shape nav li a:hover svg { fill: #2CC185; }
/* Make only shape clickable */
.tabs-style-shape nav li a svg { pointer-events: none; }
.tabs-style-shape nav li a svg use { pointer-events: auto; }
.tabs-style-shape nav li.tab-current a span,
.tabs-style-shape nav li.tab-current a svg { -webkit-transition: none; transition: none; }
.tabs-style-shape nav li.tab-current a span { background: #fff; }
.tabs-style-shape nav li.tab-current a svg { fill: #fff; }
.tabs-style-shape .content-wrap { background: #fff; }
 @media screen and (max-width: 58em) {
.tabs-style-shape nav ul { display: block; padding-top: 1.5em; }
.tabs-style-shape nav ul li { display: block; margin: -1.25em 0 0; -webkit-flex: none; flex: none; }
.tabs-style-shape nav ul li a { margin: 0; }
.tabs-style-shape nav ul li svg { display: none; }
.tabs-style-shape nav ul li a span { padding: 1.25em 0 2em !important; border-radius: 30px 30px 0 0 !important; box-shadow: 0 -1px 2px rgba(0,0,0,0.1); line-height: 1; }
.tabs-style-shape nav ul li:last-child a span { padding: 1.25em 0 !important; }
.tabs-style-shape nav ul li.tab-current { z-index: 1; }
}
/*****************************/
/* Line Box */
/*****************************/

.tabs-style-linebox nav ul li { margin: 0 0.5em; -webkit-flex: none; flex: none; }
.tabs-style-linebox nav a { padding: 0 1.5em; color: #74777b; font-weight: 700; -webkit-transition: color 0.3s; transition: color 0.3s; }
.tabs-style-linebox nav a:hover,
.tabs-style-linebox nav a:focus { color: #2CC185; }
.tabs-style-linebox nav li.tab-current a { color: #fff; }
.tabs-style-linebox nav a::after { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: #d2d8d6; content: ''; -webkit-transition: background-color 0.3s, -webkit-transform 0.3s; transition: background-color 0.3s, transform 0.3s; -webkit-transition-timing-function: ease, cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: ease, cubic-bezier(0.7, 0, 0.3, 1); -webkit-transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0); transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0); }
.tabs-style-linebox nav li.tab-current a::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.tabs-style-linebox nav a:hover::after,
.tabs-style-linebox nav a:focus::after,
.tabs-style-linebox nav li.tab-current a::after { background: #2CC185; }
 @media screen and (max-width: 58em) {
.tabs-style-linebox nav ul { display: block; box-shadow: none; }
.tabs-style-linebox nav ul li { display: block; -webkit-flex: none; flex: none; }
}
/*****************************/
/* Flip */
/*****************************/

.tabs-style-flip { max-width: 1200px; }
.tabs-style-flip nav a { padding: 0.5em 0; color: #2CC185; -webkit-transition: color 0.3s; transition: color 0.3s; }
.tabs-style-flip nav a:hover,
.tabs-style-flip nav a:focus,
.tabs-style-flip nav li.tab-current a { color: #74777b; }
.tabs-style-flip nav a span { text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 0.625em; }
.tabs-style-flip nav a::after { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: #f0f0f0; content: ''; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s; -webkit-transform: perspective(900px) rotate3d(1, 0, 0, 90deg); transform: perspective(900px) rotate3d(1, 0, 0, 90deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-perspective-origin: 50% 100%; perspective-origin: 50% 100%; }
.tabs-style-flip nav li.tab-current a::after { background-color: #fff; -webkit-transform: perspective(900px) rotate3d(1, 0, 0, 0deg); transform: perspective(900px) rotate3d(1, 0, 0, 0deg); }
.tabs-style-flip .content-wrap { background: #fff; }
/*****************************/
/* Fill up */
/*****************************/

.tabs-style-fillup nav ul li a { padding: 1.9em 0; border-right: 1px solid #2CC185; line-height: 1; -webkit-transition: color 0.3s; transition: color 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tabs-style-fillup nav ul li:last-child a { border: none; }
.tabs-style-fillup nav ul li.tab-current { z-index: 100; }
.tabs-style-fillup nav ul li.tab-current a { color: #fff; }
.tabs-style-fillup nav ul li a::after { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; height: calc(100% + 1px); border: 1px solid #2CC185; background: #2CC185; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
.tabs-style-fillup nav ul li.tab-current a::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.tabs-style-fillup nav ul li a span,
.tabs-style-fillup .icon::before { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); }
.tabs-style-fillup nav ul li a span { display: block; font-weight: 700; font-size: 0.7em; line-height: 1.5; }
.tabs-style-fillup .icon::before { display: block; margin: 0; }
.tabs-style-fillup nav ul li.tab-current a span,
.tabs-style-fillup li.tab-current .icon::before { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }
/*****************************/
/* Trapezoid, based on http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/ */
/*****************************/ 

.tabs-style-tzoid { max-width: 1200px; }
.tabs-style-tzoid nav { padding: 0 1em; }
.tabs-style-tzoid nav ul li { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tabs-style-tzoid nav ul li a { padding: 0 1.5em 0 0.3em; color: #0d9564; -webkit-transition: color 0.2s; transition: color 0.2s; }
 @media screen and (max-width: 54em) {
.tabs-style-tzoid nav ul li a { padding: 0 0.5em 0 0.3em; }
}
.tabs-style-tzoid nav ul li a:hover,
.tabs-style-tzoid nav ul li a:focus { color: #fff; }
.tabs-style-tzoid nav ul li.tab-current a,
.tabs-style-tzoid nav ul li.tab-current a:hover { color: #2CC185; }
.tabs-style-tzoid nav ul li a span { font-weight: 500; font-size: 0.75em; }
.tabs-style-tzoid nav ul li a::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; outline: 1px solid transparent; border-radius: 10px 10px 0 0; background: #2CC185; box-shadow: inset 0 -3px 3px rgba(0,0,0,0.05); content: ''; -webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px); transform: perspective(5px) rotateX(0.93deg) translateZ(-1px); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tabs-style-tzoid nav ul li.tab-current a::after,
.tabs-style-tzoid .content-wrap { background: #fff; box-shadow: none; }
/*****************************/
/* Circle fill */
/*****************************/

.tabs-style-circlefill { max-width: 700px; border: 1px solid #2CC185; }
.tabs-style-circlefill nav ul li { overflow: hidden; border-right: 1px solid #2CC185; }
.tabs-style-circlefill nav li a { padding: 1.5em 0; color: #fff; font-size: 1.25em; }
.tabs-style-circlefill nav li:first-child { border-left: none; }
.tabs-style-circlefill nav li:last-child { border: none; }
.tabs-style-circlefill nav li::before { position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; width: 80px; height: 80px; border: 1px solid #2CC185; border-radius: 50%; background: #2CC185; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; }
.tabs-style-circlefill nav li.tab-current::before { -webkit-transform: scale3d(2.5, 2.5, 1); transform: scale3d(2.5, 2.5, 1); }
.tabs-style-circlefill nav a { -webkit-transition: color 0.3s; transition: color 0.3s; }
.tabs-style-circlefill nav a span { display: none; }
.tabs-style-circlefill nav li.tab-current a { color: #fff; }
.tabs-style-circlefill .icon::before { display: block; margin: 0; pointer-events: none; }
.tabs-style-circlefill .content-wrap { border-top: 1px solid #2CC185; }