.tabs { overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; } .tabs li { float: left; margin: 0 -15px 0 0; } .tabs a { float: left; position: relative; padding: 0 40px; height: 0; line-height: 30px; text-transform: uppercase; text-decoration: none; color: #fff; border-right: 30px solid transparent; border-bottom: 30px solid var(--mainColor); /*border-bottom-color: #777 \9;*/ opacity: .3; filter: alpha(opacity=30); } .tabs a:hover { border-bottom-color: var(--mainColor); opacity: 0.5; filter: alpha(opacity=50); } .tabs a:focus { outline: 0; } .tabs-content .tabs { display: none; } .tabs .current { z-index: 3; border-bottom-color: var(--mainColor); opacity: 1; filter: alpha(opacity=100); } .tabs-content { background: #fff; border-top: 2px solid var(--mainColor); padding: 1rem 0; } .tabs-content h2, #content h3, #content p { margin: 0 0 15px 0; }