/** BULLET NAV ********************* */ #nav-bullet { position: fixed; padding: 0; top: 50%; transform: translateY(-50%); right: 1em; z-index: 100; } #nav-bullet ul { list-style: none; display: inline-block; padding: 0.92857143em; background: rgba(0, 0, 0, 0.4); border-radius: 1.85714286em; transition: all .2s ease; } #nav-bullet ul:hover { background: rgba(0, 0, 0, 0.6); } #nav-bullet ul li:not(:last-child) { margin-bottom: 1.85714286em; } @media all and (max-width: 767px) { #nav-bullet { right: 0; } #nav-bullet ul { border-radius: 1.85714286em 0 0 1.85714286em; padding: 1.85714286em 0.92857143em; } } #nav-bullet li a { width: 8px; height: 8px; background: #fff; border-radius: 50%; transition: all .2s ease; display: block; position: relative; } #nav-bullet li a:not(:hover) { opacity: .5; } #nav-bullet li.active a { opacity: 1; animation: bulge .5s ease; -webkit-animation: bulge .5s ease; } @keyframes bulge { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } @-webkit-keyframes bulge { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } #nav-bullet li a[data-title]:before { content: attr(data-title); position: absolute; right: 12px; top: -14px; background: #222; color: #fff; border-radius: 6px; padding: 4px 8px; display: inline-block; transition: all .2s ease; white-space: nowrap; } #nav-bullet li a[data-title]:not(:hover):before { opacity: 0; transform: translateX(-20px); }