div:not(.sticked) > section.wrapper_header.bottom[data-cattype="212"], .sticky-wrapper:not(.sticked) section.wrapper_header.bottom[data-cattype="212"] { border-bottom: 0; } section[data-cattype="600"].wrapper_middle { height: 100vh; position: relative; } [data-cattype="600"] h1 { font-size: 3.4em; color: #fb9202; } [data-cattype="600"] h2 { font-size: 2em; color: #000; font-weight: normal; margin-top: 5px; } [data-cattype="600"] .person-one { position: absolute; left: 15%; top: 25%; z-index: 3; } [data-cattype="600"] .person-two { position: absolute; right: 15%; top: 25%; z-index: 3; } [data-cattype="600"] .person-center { position: absolute; left: 0; top: 25%; right: 0; z-index: 3; } [data-cattype="600"] .person-center img { width: 360px; } [data-cattype="600"] .bg-note { position: absolute; top: 6px; left: -5px; z-index: 2; } [data-cattype="600"] .arrow-down { position: absolute; bottom: 80px; left: auto; right: auto; width: 25px; left: 50%; transform: translate(-50%, -50%); } [data-cattype="600"] .bg { height: 100%; background-position: center; background-repeat: no-repeat; background-size: 95%; z-index: -1; position: absolute; left: 0; width: 100%; right: 0; transform: translate(0%, -7%); top: 5%; } [data-cattype="600"] .arrow-down { animation: pulse 3s ease-out; animation-iteration-count: infinite; @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; transform: translateY(10px); } 100% { opacity: 0.5; } } } @keyframes rhythm { 0% { transform: translateY(100%); opacity: 0; } 2.5%, 12.5% { transform: translateY(100%); opacity: 1; } 17.5%, 100% { transform: translateY(0); opacity: 1; } } [data-cattype="600"] .word { display: flex; grid-column: 2; grid-row: auto; margin: auto; width: 945px; } [data-cattype="600"] .word span { display: inline-block; } .rhythm span:nth-child(1) { animation: rhythm 6s ease-in-out both 0.05s; } .rhythm span:nth-child(2) { animation: rhythm 6s ease-in-out both 0.1s; } .rhythm span:nth-child(3) { animation: rhythm 6s ease-in-out both 0.15s; } .rhythm span:nth-child(4) { animation: rhythm 6s ease-in-out both 0.2s; } .rhythm span:nth-child(5) { animation: rhythm 6s ease-in-out both 0.25s; } .rhythm span:nth-child(6) { animation: rhythm 6s ease-in-out both 0.3s; } .rhythm span:nth-child(7) { animation: rhythm 6s ease-in-out both 0.35s; } .rhythm span:nth-child(8) { animation: rhythm 6s ease-in-out both 0.4s; } .rhythm span:nth-child(9) { animation: rhythm 6s ease-in-out both 0.45s; } .rhythm span:nth-child(10) { animation: rhythm 6s ease-in-out both 0.5s; } .rhythm span:nth-child(11) { animation: rhythm 6s ease-in-out both 0.55s; } .rhythm span:nth-child(12) { animation: rhythm 6s ease-in-out both 0.6s; } .rhythm span:nth-child(13) { animation: rhythm 6s ease-in-out both 0.65s; } .rhythm span:nth-child(14) { animation: rhythm 6s ease-in-out both 0.7s; } .rhythm span:nth-child(15) { animation: rhythm 6s ease-in-out both 0.75s; } .city span:nth-child(15) { animation: city 6s ease-in-out both 0.75s; } .voice span:nth-child(15) { animation: voice 6s ease-in-out both 0.75s; } .rhythm span:nth-child(16) { animation: rhythm 6s ease-in-out both 0.8s; } .rhythm span:nth-child(17) { animation: rhythm 6s ease-in-out both 0.85s; } .rhythm span:nth-child(18) { animation: rhythm 6s ease-in-out both 0.9s; } .rhythm span:nth-child(19) { animation: rhythm 6s ease-in-out both 0.95s; } .rhythm span:nth-child(20) { animation: rhythm 6s ease-in-out both 1s; } .rhythm span:nth-child(21) { animation: rhythm 6s ease-in-out both 1.05s; } .rhythm span:nth-child(22) { animation: rhythm 6s ease-in-out both 1.1s; } .rhythm span:nth-child(23) { animation: rhythm 6s ease-in-out both 1.15s; } .rhythm span:nth-child(24) { animation: rhythm 6s ease-in-out both 1.2s; } .rhythm span:nth-child(25) { animation: rhythm 6s ease-in-out both 1.25s; } .rhythm span:nth-child(26) { animation: rhythm 6s ease-in-out both 1.3s; } .rhythm span:nth-child(27) { animation: rhythm 6s ease-in-out both 1.35s; } .rhythm span:nth-child(28) { animation: rhythm 6s ease-in-out both 1.4s; } .rhythm span:nth-child(29) { animation: rhythm 6s ease-in-out both 1.45s; } .rhythm span:nth-child(30) { animation: rhythm 6s ease-in-out both 1.5s; } .rhythm span:nth-child(31) { animation: rhythm 6s ease-in-out both 1.55s; } section[data-cattype="600"] .title2 { padding: 5px 40px; display: grid; grid-template-columns: repeat(2, min-content); grid-template-rows: auto; overflow: hidden; max-height: 8vw; } section[data-cattype="600"] .title2 { color: #fb9202; text-align: center; width: auto; font-weight: bold; display: block; padding: 0; font-size: 3.4em; } .muzieknootjes { display: block; margin: auto; position: relative; width: 80%; min-width: 300px; height: 200px; border: 0px solid #000; color: #d3ccdb; top: 20%; z-index: 5; } .noot-1, .noot-2, .noot-3, .noot-4, .noot-5, .noot-6, .noot-7, .noot-8 { position: absolute; animation: notes 2s infinite linear; font-size: 70px; opacity: 0; } .noot-1 { top: 120px; left: 50px; animation-delay: 0.5s; } .noot-2 { top: 140px; left: 250px; animation-delay: 1s; } .noot-3 { top: 100px; left: 30%; animation-delay: 1.5s; } .noot-4 { top: 100px; left: 42%; animation-delay: 2s; } .noot-5 { top: 100px; left: 55%; animation-delay: 2.5s; } .noot-6 { top: 100px; left: 60%; animation-delay: 3s; } .noot-7 { top: 100px; left: 80%; animation-delay: 3.5s; } .noot-8 { top: 100px; left: 90%; animation-delay: 4s; } @keyframes notes { 0% { transform: scale(1) translate(0, 0); opacity: 0; } 50% { opacity: 1; transform: scale(1.5) translate(50%, -50%); } 80% { opacity: 0; transform: scale(1.5) translate(100%, -100%); } 100% { transform: scale(1.5) translate(100%, -100%); opacity: 0; } } @media (min-width: 1350px) and (max-width: 1750px) { [data-cattype="600"] .bg { background-size: 85%; } [data-cattype="600"] .person-one { left: 7%; top: 25%; width: 400px; } [data-cattype="600"] .person-two { right: 6%; top: 24%; width: 420px; } [data-cattype="600"] .arrow-down { bottom: 75px; width: 20px; } [data-cattype="600"] .person-center { top: 28%; } [data-cattype="600"] .person-center img { width: 230px; } .muzieknootjes { width: 90%; top: 8%; } .noot-1, .noot-2, .noot-3, .noot-4, .noot-5, .noot-6, .noot-7, .noot-8 { font-size: 60px; } } @media (min-width: 768px) and (max-width: 1080px) { section[data-cattype="600"].wrapper_middle { overflow: hidden; } [data-cattype="600"] .person-one { left: -10%; top: 15%; width: 500px; } [data-cattype="600"] .person-center { top: 20%; } [data-cattype="600"] .bg-note { top: 25%; left: -80px; } [data-cattype="600"] .person-two { right: -22%; top: 15%; } .noot-1, .noot-2, .noot-3, .noot-4, .noot-5, .noot-6, .noot-7, .noot-8 { font-size: 40px; } section[data-cattype="600"] .title2 { font-size: 45px; } [data-cattype="600"] .word { padding-left: 40px; } [data-cattype="600"] .arrow-down { bottom: 180px; } } @media (min-width: 980px) and (max-width: 1080px) { [data-cattype="600"] .word { padding-left: 110px; } [data-cattype="600"] .bg-note { top: 13%; left: -80px; } .muzieknootjes { top: 13%; } [data-cattype="600"] .person-two { right: -13%; top: 15%; } [data-cattype="600"] .person-one { left: -5%; top: 15%; width: 500px; } [data-cattype="600"] .arrow-down { bottom: 40px; } } @media (max-width: 767px) {} @media (max-width: 480px) { section[data-cattype="600"].wrapper_middle { overflow: hidden; height: 90vh; padding-bottom: 0 !important; } [data-cattype="600"] .person-one { left: -16%; width: 270px; top: 28%; } [data-cattype="600"] .person-two { right: -25%; width: 280px; top: 30%; } [data-cattype="600"] .person-center { top: 34%; } [data-cattype="600"] .person-center img { width: 170px; } [data-cattype="600"] .bg-note { top: 30%; left: -40px; z-index: 2; width: 135%; } .muzieknootjes { width: 90%; top: 8%; } .noot-1, .noot-2, .noot-3, .noot-4, .noot-5, .noot-6, .noot-7, .noot-8 { font-size: 30px; } [data-cattype="600"] h1 { font-size: 30px; } section[data-cattype="600"] .title2 { font-size: 30px; } [data-cattype="600"] h2 { font-size: 20px; padding: 0px 10px; } [data-cattype="600"] p { font-size: 15px; } }