section[data-cattype="601"].wrapper_middle { position: relative; padding-top: 0; } [data-cattype="601"] h2 { font-size: 2.5em; color: #fb9202; } [data-cattype="601"] h3 { font-size: 2em; color: #000; font-weight: normal; } [data-cattype="601"] .wave { width: 600px; margin: 60px auto; } [data-cattype="601"] .abstract { width: 600px; position: absolute; top: 100px; left: -250px; } [data-cattype="601"] .music { width: 500px; height: 200px; position: relative; display: inline-flex; align-items: center; justify-content: space-between; } [data-cattype="601"] .music .bar { width: 12px; border-radius: 10px; background: white; animation: loader 1.5s ease-in-out infinite; } @keyframes loader { 0%, 100% { height: 2px; } 50% { height: 80px; } } [data-cattype="601"] .music .bar:nth-child(1) { background: purple; animation-delay: 1s; } [data-cattype="601"] .music .bar:nth-child(2) { background: crimson; animation-delay: 0.8s; } [data-cattype="601"] .music .bar:nth-child(3) { background: deeppink; animation-delay: 0.6s; } [data-cattype="601"] .music .bar:nth-child(4) { background: orange; animation-delay: 0.4s; } [data-cattype="601"] .music .bar:nth-child(5) { background: gold; animation-delay: 0.2s; } [data-cattype="601"] .music .bar:nth-child(6) { background: gold; animation-delay: 0.2s; } [data-cattype="601"] .music .bar:nth-child(7) { background: orange; animation-delay: 0.4s; } [data-cattype="601"] .music .bar:nth-child(8) { background: deeppink; animation-delay: 0.6s; } [data-cattype="601"] .music .bar:nth-child(9) { background: crimson; animation-delay: 0.8s; } [data-cattype="601"] .music .bar:nth-child(10) { background: purple; animation-delay: 1s; } [data-cattype="601"] .mic { width: 600px; position: absolute; top: 0; left: -130px; } @media (min-width: 1350px) and (max-width: 1750px) { [data-cattype="601"] .mic { width: 500px; top: 0; left: -130px; } } @media (min-width: 768px) and (max-width: 980px) {} @media (max-width: 767px) {} @media (max-width: 480px) { section[data-cattype="601"].wrapper_middle { overflow: visible; } [data-cattype="601"] .music { width: 100%; } [data-cattype="601"] .abstract { display: none; } [data-cattype="601"] p { padding: 0 20px; } [data-cattype="601"] h2 { font-size: 30px; margin-left: 150px; text-align: left; } [data-cattype="601"] h3 { font-size: 20px; margin-left: 150px; text-align: left; } [data-cattype="601"] .mic { width: 150px; top: 60%; left: -5px; } [data-cattype="601"] p { font-size: 15px; } }