#headerTop{ width: 100%; height: 100%; padding: 5px; position: relative; min-height: 100px; background-color: #0085bc; } #headerTop .arrow-wrapper{ display: flex; flex-direction: column; } #headerTop .arrow{ position: absolute; width: 30px; } #headerTop #top_left.arrow{ left: 4px; } #headerTop #top_right.arrow{ right: 5px; transform: rotate(90deg); } #headerTop #bottom_left.arrow{ bottom: 5px; transform: rotate(-90deg); left: 4px; } #headerTop #bottom_right.arrow{ bottom: 5px; right: 5px; transform: rotate(180deg); } #headerTop #track{ width: 125px; margin: 0 auto; z-index: 0; margin-top: -10px; } #headerTop .arrow-wrapper .background{ content: ""; position: absolute; width: 90%; height: 20%; margin-left: 5%; background-color: rgb(0, 133, 188, 0.6); z-index: 10; filter: blur(5px); -moz-filter: blur(5px); -webkit-filter: blur(5px); -o-filter: blur(5px); transition: all 2s linear; -moz-transition: all 2s linear; -webkit-transition: all 2s linear; -o-transition: all 2s linear; position: absolute; left: 0; right: 0; bottom: 10%; } #headerTop #projectname{ position: absolute; left: 0; right: 0; bottom: 5%; z-index: 100; font-size: 1.1em; text-align: center; }