/* Global tab styles */ .et-tabs nav ul li a img { margin-right: 10px; margin-top: 4px; width: 32px; height: 32px; } /* Individual tab styles */ /*****************************/ /* Bar */ /*****************************/ /*.et-tabs-style-bars nav { background: rgba(40,44,42,0.05); } .et-tabs-style-bars nav ul { border: 4px solid transparent; }*/ .et-tabs-style-bars nav ul li a { background-color: inherit; color: #74777b; transition: all 0.2s ease-in; padding: 0 1em; } .et-tabs-style-bars nav ul li a:hover, .et-tabs-style-bars nav ul li a:focus { color: #2A90DA; transition: all 0.2s ease-in; } .et-tabs-style-bars nav ul li a span { text-transform: uppercase; letter-spacing: 1px; font-weight: 500; } .et-tabs-style-bars nav ul li.tab-current a { background: inherit; color: #fff; } .et-tabs-style-bars nav ul li.tab-current { background: #2A90DA; } .et-tabs-style-bars nav ul li { background: #EBEBEB; } .et-tabs-style-bars nav ul li a img, .et-tabs-style-underline nav a img, .et-tabs-style-topline nav a img, .et-tabs-style-linebox nav a img, .et-tabs-style-flip nav a img, .et-tabs-style-tzoid nav ul li a img, .et-tabs-style-line nav ul li a img { display: inline-block; margin-right: 10px; } /*****************************/ /* Icon box - Icon List */ /*****************************/ .et-tabs-style-iconbox-iconlist nav { width: 100%; margin-top: 10px; } .et-tabs-style-iconbox-iconlist nav ul li { background: #eee; } .et-tabs-style-iconbox-iconlist nav ul li:first-child a, .et-vertical.et-tabs-style-iconbox-iconlist nav ul li a { margin-left: 0; } .et-tabs-style-iconbox-iconlist nav ul li a { overflow: visible !important; margin-left: 0.9px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .et-tabs-style-iconbox-iconlist nav ul li a.et-anchor-tag, .et-tabs-style-iconbox-iconlist nav ul li a.et-anchor-tag span { word-wrap: break-word; white-space: normal; font-size: 15px; line-height: normal !important; border-radius: 6px; padding: 0 10px; } .et-tabs-style-iconbox-iconlist nav ul li.tab-current { z-index: 100; background: #2A90DA; color: #2A90DA; } .et-tabs-style-iconbox-iconlist nav ul li.tab-current a { color: #fff; } .et-tabs-style-iconbox-iconlist nav ul li::after { opacity: 0; } .et-tabs-style-iconbox-iconlist nav ul li.tab-current::after { opacity: 1; } .et-tabs-style-iconbox-iconlist nav ul li.tab-current::after, .et-tabs-style-iconbox-iconlist nav ul li::after { position: absolute; top: 100%; left: 50%; margin-left: -20px; width: 0; height: 0; border: solid transparent; border-width: 20px; border-top-color: inherit; content: ''; pointer-events: none; } .et-tabs-style-iconbox-iconlist .iw-icons::before { display: block; margin: 0 0 0.25em 0; } .et-tabs-style-iconbox-iconlist .iw-icons { margin: 0; font-size: 50px; display: block; margin-bottom: 20px; } .et-tabs-style-iconbox-iconlist .title-has-subtitle .iw-icons { margin-bottom: 5px; } .et-tabs-style-iconbox-iconlist nav ul li:first-child:before { border: none; background: transparent; } .et-vertical.et-tabs-style-iconbox-iconlist nav ul li:first-child:before { background: #fff !important; } .et-tabs-style-iconbox-iconlist nav ul li a img, .et-tabs-style-iconfall nav a img { margin: 0 auto; padding: 0; margin-bottom: 10px; text-align: center; display: block; } .et-tabs-style-iconfall nav a img { display: inline-block; } .et-tabs.et-tabs-style-iconbox-iconlist nav ul li { margin-right: 30px; width: 150px; height: 150px; display: inline-grid; border-radius: 6px; border: 1px solid; } .et-tabs.et-tabs-style-iconbox-iconlist nav ul li:last-child { margin-right: 0; } .et-tabs-style-iconbox-iconlist .et-content-wrap { margin-top: 15px; } .et-tabs-style-iconbox-iconlist .et-content-wrap section { padding-top: 10px; } .et-tabs.et-tabs-style-iconbox-iconlist nav ul { width: auto; float: left; display: flex; } .et-tabs.et-tabs-style-iconbox-iconlist nav ul:after { content: ""; width: 90%; left: 5%; display: block; border: 1px dashed; border-color: inherit; position: absolute; top: 49%; } .et-tabs.et-tabs-style-iconbox-iconlist.et-align-center nav ul.elegant-tabs-list-container { float: none; } .et-tabs.et-tabs-style-iconbox-iconlist.et-align-right nav ul { float: right; } /*****************************/ /* Icon box */ /*****************************/ .et-tabs-style-iconbox nav { background: rgba(255, 255, 255, 0.4); } .et-tabs-style-iconbox nav ul li { background: #eee; } .et-tabs-style-iconbox nav ul li:before { width: 1px; height: 70%; background: #fff; content: ""; position: absolute; top: 15%; left: 0; } .et-tabs-style-iconbox nav ul li:first-child a, .et-vertical.et-tabs-style-iconbox nav ul li a { margin-left: 0; } .et-tabs-style-iconbox nav ul li a { overflow: visible !important; padding: 1em; margin-left: 0.9px; line-height: 1; } .et-tabs-style-iconbox nav ul li.tab-current { z-index: 9; background: #2A90DA; color: #2A90DA; } .et-tabs-style-iconbox nav ul li.tab-current a { color: #fff; } .et-tabs-style-iconbox nav ul li::after { opacity: 0; } .et-tabs-style-iconbox nav ul li.tab-current::after { opacity: 1; } .et-tabs-style-iconbox nav ul li.tab-current::after, .et-tabs-style-iconbox nav ul li::after { position: absolute; top: 100%; left: 50%; margin-left: -10px; width: 0; height: 0; border: solid transparent; border-width: 10px; border-top-color: inherit; content: ''; pointer-events: none; } .et-tabs-style-iconbox .iw-icons::before { display: block; margin: 0 0 0.25em 0; } .et-tabs-style-iconbox .iw-icons { margin: 0; display: block; } .et-tabs-style-iconbox nav ul li:first-child:before { border: none; background: transparent; } .et-vertical.et-tabs-style-iconbox nav ul li:first-child:before { background: #fff !important; } .et-tabs-style-iconbox nav ul li a img, .et-tabs-style-iconfall nav a img { margin: 0 auto; padding: 0; margin-bottom: 10px; text-align: center; display: block; } .et-tabs-style-iconfall nav a img { display: inline-block; } /*****************************/ /* Underline */ /*****************************/ .et-tabs-style-underline nav { background: #fff; } .et-tabs-style-underline nav a { padding: 0.4em 1em; border-left: 1px solid #e7ecea; -webkit-transition: color 0.2s; transition: color 0.2s; } .et-tabs-style-underline nav li:last-child a { border-right: 1px solid #e7ecea; } .et-tabs-style-underline nav li a::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; background: #2A90DA; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translate3d(0, 150%, 0); transform: translate3d(0, 150%, 0); } .et-tabs-style-underline nav li.tab-current a::after, .et-vertical.et-tabs-style-underline nav li.tab-current a::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .et-tabs-style-underline nav a span { font-weight: 700; } /*****************************/ /* Triangle and line */ /*****************************/ .et-tabs-style-linetriangle nav a { overflow: visible !important; border-bottom: 1px solid rgba(0, 0, 0, 0.2); -webkit-transition: color 0.2s; transition: color 0.2s; } .et-tabs-style-linetriangle nav a span { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .et-tabs-style-linetriangle nav li.tab-current a:after, .et-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; } .et-tabs-style-linetriangle nav li.tab-current a:after { margin-left: -10px; border-width: 10px; border-top-color: #e7ecea; } .et-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) { .et-tabs-style-linetriangle nav { font-size: 0.6em; } } /*****************************/ /* Top Line */ /*****************************/ .et-tabs-style-topline { max-width: 1200px; } .et-tabs-style-topline nav li { border: 1px solid rgba(40, 44, 42, 0.1); } .et-tabs-style-topline nav li:not(:last-child) { border-right: none; } .et-tabs-style-topline nav li.tab-current { border-top-color: #2A90DA; border-bottom: none; } .et-tabs-style-topline nav a { padding: 0.55em 1em; background: rgba(40, 44, 42, 0.05); color: #74777b; line-height: 1; -webkit-transition: color 0.2s; transition: color 0.2s; } .et-tabs-style-topline nav a:hover, .et-tabs-style-topline nav a:focus { color: #2A90DA; } .et-tabs-style-topline nav li.tab-current a { background: none; box-shadow: inset 0 3px 0 #2A90DA; color: #2A90DA; } .et-tabs-style-topline .iw-icons::before { display: block; margin: 0; } .et-tabs-style-topline nav a span { text-transform: uppercase; letter-spacing: 1px; } /*****************************/ /* Falling Icon, from http://vintageproductions.eu/grid/interactivity/ */ /*****************************/ .et-tabs-style-iconfall { overflow: visible !important; } .et-tabs-style-iconfall nav a { display: inline-block; overflow: visible !important; padding: 1em 1em 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); } .et-tabs-style-iconfall nav a:hover, .et-tabs-style-iconfall nav a:focus, .et-tabs-style-iconfall nav li.tab-current a { color: #2A90DA; } .et-tabs-style-iconfall nav a i.iw-icons { margin: 0; display: block; } .et-tabs-style-iconfall nav a span { font-weight: 700; display: block; } .et-tabs-style-iconfall nav li::before { position: absolute; bottom: 1em; left: 50%; margin-left: -20px; width: 40px; height: 4px; background: #2A90DA; 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); } .et-tabs-style-iconfall nav li.tab-current::before { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .et-tabs-style-iconfall .iw-icons::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; } .et-tabs-style-iconfall nav li.tab-current .iw-icons::before { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .et-tabs.et-tabs-style-iconfall.et-vertical { float: left; } @media screen and (max-width: 58em) { .et-tabs-style-iconfall nav li .iw-icons::before { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /*****************************/ /* Moving Line */ /*****************************/ .et-tabs-style-linemove nav { background: #fff; } .et-tabs-style-linemove nav li::before { position: absolute; bottom: 0; left: 0; width: 98%; border: 2px solid; height: 0px; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } /* Move the line */ .et-tabs-style-linemove nav li.tab-current::before { position: absolute; top: 8px; bottom: auto; left: 0; width: 98%; border: 2px solid; height: 0px; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .et-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; } .et-tabs-style-linemove nav li.tab-current a { color: #2A90DA; -webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0); } .et-tabs-style-linemove nav li { color: #2A90DA; background: transparent !important; } .et-tabs-style-linemove nav a span { font-weight: 700; } /*****************************/ /* Line */ /*****************************/ .et-tabs-style-line nav ul { padding: 0 2em; max-width: none; box-shadow: inset 0 -2px #d1d3d2; } .et-tabs-style-line nav a { padding: 0.7em 0.7em; box-shadow: inset 0 -2px #d1d3d2; color: #74777b; text-align: left; text-transform: uppercase; letter-spacing: 1px; line-height: 1; -webkit-transition: color 0.3s, box-shadow 0.3s; transition: color 0.3s, box-shadow 0.3s; } .et-tabs-style-line nav a:hover, .et-tabs-style-line nav a:focus { box-shadow: inset 0 -2px #74777b; } .et-tabs-style-line nav li.tab-current a { box-shadow: inset 0 -2px #2A90DA; color: #2A90DA; } @media screen and (max-width: 58em) { .et-tabs-style-line nav ul { display: block; box-shadow: none; } .et-tabs-style-line nav ul li { display: block; -webkit-flex: none; flex: none; } } /*****************************/ /* Circle */ /*****************************/ .et-tabs-style-circle { overflow: visible !important; } .et-tabs-style-circle nav li { background: transparent !important; color: #2A90DA; } .et-tabs-style-circle nav li::before { position: absolute; top: 50%; left: 50%; margin: -60px 0 0 -60px; width: 120px; height: 120px; border: 1px solid; 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); background: #2A90DA; border-color: #2A90DA; } .et-tabs.et-tabs-style-circle nav ul li::after { position: absolute; top: 50%; left: 50%; margin: -60px 0 0 -60px; width: 120px; height: 120px; border: 1px solid; border-radius: 50%; content: ''; opacity: 1; -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(1, 1, 1); transform: scale3d(1, 1, 1); border: 1px solid; } @media screen and (max-width: 58em) { .et-tabs-style-circle nav li::before { margin: -40px 0 0 -40px; width: 80px; height: 80px; } } .et-tabs-style-circle nav li.tab-current::before { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .et-tabs-style-circle nav a { overflow: visible !important; color: #74777b; 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); } .et-tabs-style-circle nav a span { display: block; } .et-tabs-style-circle nav a span, .et-tabs-style-circle .iw-icons::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); } .et-tabs-style-circle nav a:hover, .et-tabs-style-circle nav a:focus { color: #4a4a4b; } .et-tabs-style-circle nav li.tab-current a { color: #ffffff; } .et-tabs-style-circle nav li.tab-current a span { -webkit-transform: translate3d(0, 4px, 0); transform: translate3d(0, 4px, 0); } .et-tabs-style-circle .iw-icons::before { display: block; margin: 0; pointer-events: none; } .et-tabs-style-circle nav li.tab-current .iw-icons::before { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } .et-tabs.et-tabs-style-circle ul { margin-bottom: 15px; } /*****************************/ /* Square */ /*****************************/ .et-tabs-style-square { overflow: visible !important; } .et-tabs-style-square nav li { background: transparent !important; color: #2A90DA; max-width: 180px; } .et-tabs-style-square nav li::before { position: absolute; top: 50%; left: 50%; margin: -60px 0 0 -60px; width: 120px; height: 120px; border: 1px solid; border-radius: 2px; 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); background: #2A90DA; border-color: #2A90DA; } .et-tabs-style-square nav li::after { position: absolute; top: 50%; left: 50%; margin: -60px 0 0 -60px; width: 120px; height: 120px; border: 1px solid; border-radius: 2px; content: ''; opacity: 1; -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); border: 1px solid; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } @media screen and (max-width: 58em) { .et-tabs-style-square nav li::before { margin: -40px 0 0 -40px; width: 80px; height: 80px; } } .et-tabs-style-square nav li.tab-current::before { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .et-tabs-style-square nav a { overflow: visible !important; color: #74777b; 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); } .et-tabs-style-square nav a span { display: block; } .et-tabs-style-square nav a span, .et-tabs-style-square .iw-icons::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); } .et-tabs-style-square nav a:hover, .et-tabs-style-square nav a:focus { color: #4a4a4b; } .et-tabs-style-square nav li.tab-current a { color: #ffffff; } .et-tabs-style-square nav li.tab-current a span { -webkit-transform: translate3d(0, 4px, 0); transform: translate3d(0, 4px, 0); } .et-tabs-style-square .iw-icons::before { display: block; margin: 0; pointer-events: none; } .et-tabs-style-square nav li.tab-current .iw-icons::before { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } .et-tabs.et-tabs-style-square ul { margin-bottom: 15px; } .et-tabs-style-circle .et-content-wrap, .et-tabs-style-square .et-content-wrap { margin-top: 30px; } /*****************************/ /* Line Box */ /*****************************/ .et-tabs-style-linebox nav ul li { margin: 0 0.5em; -webkit-flex: none; flex: none; } .et-tabs-style-linebox nav a { padding: 0 1.5em; color: #74777b; font-weight: 700; -webkit-transition: color 0.3s; transition: color 0.3s; } .et-tabs-style-linebox nav a:hover, .et-tabs-style-linebox nav a:focus { color: #2A90DA; } .et-tabs-style-linebox nav li.tab-current a { color: #fff; } .et-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, 0, 0); transform: translate3d(0, 100%, 0) translate3d(0, 0, 0); } .et-tabs-style-linebox nav li.tab-current a::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .et-tabs-style-linebox nav a:hover::after, .et-tabs-style-linebox nav a:focus::after, .et-tabs-style-linebox nav li.tab-current a::after { background: #2A90DA; } @media screen and (max-width: 58em) { .et-tabs-style-linebox nav ul { display: block; box-shadow: none; } .et-tabs-style-linebox nav ul li { display: block; -webkit-flex: none; flex: none; } } /*****************************/ /* Flip */ /*****************************/ .et-tabs-style-flip { max-width: 1200px; } .et-tabs-style-flip nav a { padding: 0.2em 1em; color: #2A90DA; -webkit-transition: color 0.3s; transition: color 0.3s; } .et-tabs-style-flip nav a:hover, .et-tabs-style-flip nav a:focus, .et-tabs-style-flip nav li.tab-current a { color: #74777b; } .et-tabs-style-flip nav a span { text-transform: uppercase; letter-spacing: 1px; } .et-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%; } .et-tabs-style-flip nav li.tab-current a { background: #ddd; } .et-tabs-style-flip nav li.tab-current a::after { background-color: inherit; -webkit-transform: perspective(900px) rotate3d(1, 0, 0, 0deg); transform: perspective(900px) rotate3d(1, 0, 0, 0deg); } .et-tabs-style-flip .content-wrap { background: #fff; } /*****************************/ /* Fill up */ /*****************************/ .et-tabs-style-fillup nav ul li a { padding: 1.2em 0.8em; border-right: 1px solid #2A90DA; line-height: 1; -webkit-transition: color 0.3s; transition: color 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .et-tabs-style-fillup nav ul li:last-child a { border: none; } .et-tabs-style-fillup nav ul li.tab-current { z-index: 100; } .et-tabs-style-fillup nav ul li.tab-current a { color: #fff; } .et-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 #2A90DA; background: #2A90DA; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .et-tabs-style-fillup nav ul li.tab-current a::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .et-tabs-style-fillup nav ul li a span, .et-tabs-style-fillup .iw-icons::before { -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } .et-tabs-style-fillup nav ul li a span { display: block; line-height: 1.5; padding: 5px; } .et-tabs-style-fillup .iw-icons::before { display: block; margin: 0; } .et-tabs-style-fillup nav ul li.tab-current a span, .et-tabs-style-fillup li.tab-current .iw-icons::before { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } .et-tabs-style-fillup nav ul li a img { border: none; box-shadow: none; display: block; margin: 0 auto; } .et-tabs-style-fillup nav ul li.tab-current a img { margin-bottom: 10px; } /*****************************/ /* Trapezoid, based on http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/ */ /*****************************/ .et-tabs-style-tzoid { max-width: 1200px; } .et-tabs-style-tzoid nav { padding: 0 1em; } .et-tabs-style-tzoid nav ul li { -webkit-backface-visibility: hidden; backface-visibility: hidden; margin-right: -8px !important; background: transparent !important; } .et-tabs-style-tzoid nav ul li a { padding: 0.5em 1.8em 0 0.8em; color: #ffffff; -webkit-transition: color 0.2s; transition: color 0.2s; margin-bottom: 5px; line-height: 1.5em; min-height: 45px; } @media screen and (max-width: 54em) { .et-tabs-style-tzoid nav ul li a { padding: 0 0.5em 0 0.3em; } } .et-tabs-style-tzoid nav ul li a:hover, .et-tabs-style-tzoid nav ul li a:focus { color: #fff; } .et-tabs-style-tzoid nav ul li.tab-current a, .et-tabs-style-tzoid nav ul li.tab-current a:hover { color: #2A90DA; } .et-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: #2A90DA; box-shadow: inset 0 -3px 3px rgba(0, 0, 0, 0.05); content: ''; -webkit-transform: perspective(5px) rotateX(0.75deg) translateZ(-1px); transform: perspective(5px) rotateX(0.75deg) translateZ(-1px); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .et-tabs-style-tzoid nav ul li.tab-current a::after, .et-tabs-style-tzoid .content-wrap { background: #F2F2F2; box-shadow: none; } .et-tabs-style-circle .iw-icons, .et-tabs-style-fillup .iw-icons, .et-tabs-style-square .iw-icons { margin: 0; } .et-tabs-style-tzoid nav { padding: 0 !important; } /****************** * Border Scale *******************/ .et-tabs-style-border-scale nav ul { border: none; margin-bottom: 30px; margin-top: 10px !important; --active-background: #4f000b; --active-text-color: #fff; } .et-tabs-style-border-scale nav ul li { background: transparent !important; } .et-tabs-style-border-scale nav ul li a { padding: 10px 20px; margin-right: 15px; font-size: 18px; font-weight: 700; color: #4f000b; border-color: #4f000b; text-transform: uppercase; border-radius: 0; z-index: 1; position: relative; overflow: visible; } .et-tabs-style-border-scale nav ul li a:hover, .et-tabs-style-border-scale nav ul li a:hover i { color: var( --hover-text-color ) !important; } .et-tabs-style-border-scale nav ul li.tab-current a, .et-tabs-style-border-scale nav ul li.tab-current a i { border: none; color: var( --active-text-color ) !important; } .et-tabs-style-border-scale nav ul li a:before { content: ""; width: calc( 100% - 6px ); height: 100%; border: 3px solid; border-color: inherit; position: absolute; top: 0; left: 0; opacity: 1; transform: scale(1); transition: all 0.5s ease 0s; } .et-vertical.et-tabs-style-border-scale nav ul li a:before { width: 100%; } .et-tabs-style-border-scale nav ul li a:hover:before, .et-tabs-style-border-scale nav ul li.tab-current a:before { opacity: 0; transform: scale(0.5); } .et-tabs-style-border-scale nav ul li a:after { content: ""; width: 100%; height: 100%; background: var( --active-background ); position: absolute; top: 0; left: 0; opacity: 0; z-index: -1; transform: scale(1.2); transition: all 0.5s ease 0s; } .et-tabs-style-border-scale nav ul li a:hover:after, .et-tabs-style-border-scale nav ul li.tab-current a:after { opacity: 1; transform: scale(1); } .et-tabs-style-border-scale nav ul li:not(.tab-current) a:hover:after { background: var( --hover-bg-color ); } .et-tabs.et-tabs-style-border-scale.et-vertical nav ul { grid-row-gap: 10px; } @media only screen and (max-width: 479px) { .et-tabs-style-border-scale nav ul { overflow: hidden; } .et-tabs-style-border-scale nav ul li { width: 100%; text-align: center; margin-bottom: 15px; } .et-tabs-style-border-scale nav ul li a { margin-right: 0; } } /* transition */ .et-tabs.et-tabs-style-tzoid li.tab-current a::after, .et-tabs.et-tabs-style-tzoid nav ul li.tab-current a, .et-tabs.et-tabs-style-tzoid nav ul li.tab-current a>i, .et-tabs.et-tabs-style-iconfall nav ul li.tab-current a, .et-tabs.et-tabs-style-iconfall nav ul li.tab-current a>i, .et-tabs-style-iconfall nav li.tab-current::before, .et-tabs.et-tabs-style-fillup nav ul li.tab-current a, .et-tabs.et-tabs-style-fillup nav ul li.tab-current a>i, .et-tabs-style-flip nav li.tab-current a, .et-tabs.et-tabs-style-iconbox nav ul li.tab-current::after, .et-tabs.et-tabs-style-iconbox nav ul li.tab-current a>i, .et-tabs.et-tabs-style-iconbox nav ul li.tab-current::after, .et-tabs.et-tabs-style-iconbox-iconlist nav ul li.tab-current::after, .et-tabs.et-tabs-style-iconbox-iconlist nav ul li.tab-current a>i, .et-tabs.et-tabs-style-iconbox-iconlist nav ul li.tab-current::after, .et-tabs-style-topline nav li.tab-current, .et-tabs.et-tabs-style-underline nav ul li.tab-current a, .et-tabs.et-tabs-style-underline nav ul li.tab-current a>i, .et-tabs.et-tabs-style-underline nav ul li a, .et-tabs.et-tabs-style-underline nav ul li a>i { transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; }