*{margin: 0; padding:0} body{ font-family: 'Titillium Web', sans-serif; color: #f178b0; } .shape-top{ display: block; float: left; height: 90px; width: 100%; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABaCAIAAACpA+bmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REE5NDkzMjMzMUNFMTFFNDlGNjFCMTM0ODg5NDNCQ0QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REE5NDkzMjQzMUNFMTFFNDlGNjFCMTM0ODg5NDNCQ0QiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEQTk0OTMyMTMxQ0UxMUU0OUY2MUIxMzQ4ODk0M0JDRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEQTk0OTMyMjMxQ0UxMUU0OUY2MUIxMzQ4ODk0M0JDRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrzSRBMAAAjZSURBVHja7FzNjxzF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'); } .shape-top ul{ width: 100%; text-align: center; } .shape-top ul li{ display: inline-block; font: none; } .shape-top ul li a{ display: inline-block; font: none; color: #f178b0; padding: 24px 40px; font-size: 18px; text-decoration: none; position: relative; } .shape-top ul li a:after{ content: ""; position: absolute; right: 40%; top: 4px; width: 16px; height: 16px; background: #f178b0; border-radius: 50%; opacity: 0; } .shape-top ul li a:before{ content: ""; position: absolute; right: 40%; top: 24px; width: 8px; height: 8px; background: #f178b0; border-radius: 50%; opacity: 0; } .shape-top ul li a.active:before{ animation: bubbles infinite 2s linear; } .shape-top ul li a.active:after{ animation: bubbles infinite 3s linear; } .shape-top ul li a:hover:before{ animation: bubbles infinite 2s linear; } .shape-top ul li a:hover:after{ animation: bubbles infinite 3s linear; } @keyframes bubbles{ from{ opacity: 0; top: 40px; } 20%{ opacity: 0.5; top: 20px; } 70%{ opacity: 1; top: 0px; } 70%{ opacity: 0; top: -10px; } 100%{ opacity: 0; top: -20px; } }