section[data-cattype="606"].wrapper_middle { background-position: left bottom !important; position: relative; padding-bottom: 0 !important; padding: 0px 120px !important; background-size: 90% !important; } [data-cattype="606"] h1 { font-size: 2.5em; color: #fb9202; text-align: center; } [data-cattype="606"] h2 { color: darkorange; } section[data-cattype="606"] .form { background-color: #f5efe3; padding: 20px 40px 40px 40px; text-align: left; border-radius: 20px; width: 500px; margin: auto auto 80px auto; } [data-cattype="606"] .title { width: 200px; overflow: hidden; white-space: no-wrap !important; display: block; border-right: 3px solid #f9d566; animation: typewriter 11s steps(7) , blinking-cursor 0.8s ; animation-fill-mode: forwards; height: 70px; } @keyframes typewriter { 0% { width:0 } 25% { width: 70% } 48% { width: 100% } 50% { width: 100% } 55% { width: 100% } 75% { width: 70%; } 85% { width: 30%; } 100% { width: 0; } } @keyframes blinking-cursor { from { border-color: transparent } to { border-color: #f9d566 } } [data-cattype="606"] .form-control { margin-bottom: 10px; } @keyframes rhythm { 0% { transform: translateY(0); } 26.6666666667% { transform: translateY(0); opacity: 1; } 33.3333333333% { transform: translateY(-100%); opacity: 0; } 33.3343333333% { transform: translateY(100%); opacity: 0; } 33.3363333333% { transform: translateY(100%); opacity: 1; } 93.3333333333% { transform: translateY(100%); } 100% { transform: translateY(0); } } @keyframes city { 0% { transform: translateY(0); } 26.6666666667% { transform: translateY(0); } 33.3333333333% { transform: translateY(-100%); } 60% { transform: translateY(-100%); opacity: 1; } 66.6666666667% { transform: translateY(-200%); opacity: 0; } 66.6676666667% { transform: translateY(0); } 66.6696666667% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); } } @keyframes voice { 0% { transform: translateY(-300%); } 0.0001% { transform: translateY(0); } 26.6666666667% { transform: translateY(0); } 33.3333333333% { transform: translateY(-100%); } 60% { transform: translateY(-100%); } 66.6666666667% { transform: translateY(-200%); } 93.3333333333% { transform: translateY(-200%); opacity: 1; } 100% { transform: translateY(-300%); opacity: 0; } } [data-cattype="606"] .word { display: flex; grid-column: 2; grid-row: auto; } [data-cattype="606"] .word span { display: inline-block; } .rhythm span:nth-child(1) { animation: rhythm 6s ease-in-out both 0.05s ; } .city span:nth-child(1) { animation: city 6s ease-in-out both 0.05s ; } .voice span:nth-child(1) { animation: voice 6s ease-in-out both 0.05s ; } .acapella span:nth-child(1) { animation: voice 6s ease-in-out both 0.05s ; } .rhythm span:nth-child(2) { animation: rhythm 6s ease-in-out both 0.1s ; } .city span:nth-child(2) { animation: city 6s ease-in-out both 0.1s ; } .voice span:nth-child(2) { animation: voice 6s ease-in-out both 0.1s ; } .acapella span:nth-child(2) { animation: voice 6s ease-in-out both 0.1s ; } .rhythm span:nth-child(3) { animation: rhythm 6s ease-in-out both 0.15s ; } .city span:nth-child(3) { animation: city 6s ease-in-out both 0.15s ; } .voice span:nth-child(3) { animation: voice 6s ease-in-out both 0.15s ; } .acapella span:nth-child(3) { animation: voice 6s ease-in-out both 0.15s ; } .rhythm span:nth-child(4) { animation: rhythm 6s ease-in-out both 0.2s ; } .city span:nth-child(4) { animation: city 6s ease-in-out both 0.2s ; } .voice span:nth-child(4) { animation: voice 6s ease-in-out both 0.2s ; } .acapella span:nth-child(4) { animation: voice 6s ease-in-out both 0.2s ; } .rhythm span:nth-child(5) { animation: rhythm 6s ease-in-out both 0.25s ; } .city span:nth-child(5) { animation: city 6s ease-in-out both 0.25s ; } .voice span:nth-child(5) { animation: voice 6s ease-in-out both 0.25s ; } .acapella span:nth-child(5) { animation: voice 6s ease-in-out both 0.25s ; } .rhythm span:nth-child(6) { animation: rhythm 6s ease-in-out both 0.3s ; } .city span:nth-child(6) { animation: city 6s ease-in-out both 0.3s ; } .voice span:nth-child(6) { animation: voice 6s ease-in-out both 0.3s ; } .acapella span:nth-child(6) { animation: voice 6s ease-in-out both 0.3s ; } .rhythm span:nth-child(7) { animation: rhythm 6s ease-in-out both 0.35s ; } .city span:nth-child(7) { animation: city 6s ease-in-out both 0.35s ; } .voice span:nth-child(7) { animation: voice 6s ease-in-out both 0.35s ; } .acapella span:nth-child(7) { animation: voice 6s ease-in-out both 0.35s ; } .rhythm span:nth-child(8) { animation: rhythm 6s ease-in-out both 0.4s ; } .city span:nth-child(8) { animation: city 6s ease-in-out both 0.4s ; } .voice span:nth-child(8) { animation: voice 6s ease-in-out both 0.4s ; } .acapella span:nth-child(8) { animation: voice 6s ease-in-out both 0.4s ; } .rhythm span:nth-child(9) { animation: rhythm 6s ease-in-out both 0.45s ; } .city span:nth-child(9) { animation: city 6s ease-in-out both 0.45s ; } .voice span:nth-child(9) { animation: voice 6s ease-in-out both 0.45s ; } .acapella span:nth-child(9) { animation: voice 6s ease-in-out both 0.45s ; } .rhythm span:nth-child(10) { animation: rhythm 6s ease-in-out both 0.5s ; } .city span:nth-child(10) { animation: city 6s ease-in-out both 0.5s ; } .voice span:nth-child(10) { animation: voice 6s ease-in-out both 0.5s ; } .acapella span:nth-child(10) { animation: voice 6s ease-in-out both 0.5s ; } .rhythm span:nth-child(11) { animation: rhythm 6s ease-in-out both 0.55s ; } .city span:nth-child(11) { animation: city 6s ease-in-out both 0.55s ; } .voice span:nth-child(11) { animation: voice 6s ease-in-out both 0.55s ; } .acapella span:nth-child(11) { animation: voice 6s ease-in-out both 0.55s ; } .rhythm span:nth-child(12) { animation: rhythm 6s ease-in-out both 0.6s ; } .city span:nth-child(12) { animation: city 6s ease-in-out both 0.6s ; } .voice span:nth-child(12) { animation: voice 6s ease-in-out both 0.6s ; } .acapella span:nth-child(12) { animation: voice 6s ease-in-out both 0.6s ; } .rhythm span:nth-child(13) { animation: rhythm 6s ease-in-out both 0.65s ; } .city span:nth-child(13) { animation: city 6s ease-in-out both 0.65s ; } .voice span:nth-child(13) { animation: voice 6s ease-in-out both 0.65s ; } .acapella span:nth-child(13) { animation: voice 6s ease-in-out both 0.65s ; } .rhythm span:nth-child(14) { animation: rhythm 6s ease-in-out both 0.7s ; } .city span:nth-child(14) { animation: city 6s ease-in-out both 0.7s ; } .voice span:nth-child(14) { animation: voice 6s ease-in-out both 0.7s ; } .acapella span:nth-child(14) { animation: voice 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 ; } .acapella 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 ; } .city span:nth-child(16) { animation: city 6s ease-in-out both 0.8s ; } .voice span:nth-child(16) { animation: voice 6s ease-in-out both 0.8s ; } .acapella span:nth-child(16) { animation: voice 6s ease-in-out both 0.8s ; } .rhythm span:nth-child(17) { animation: rhythm 6s ease-in-out both 0.85s ; } .city span:nth-child(17) { animation: city 6s ease-in-out both 0.85s ; } .voice span:nth-child(17) { animation: voice 6s ease-in-out both 0.85s ; } .acapella span:nth-child(17) { animation: voice 6s ease-in-out both 0.85s ; } .rhythm span:nth-child(18) { animation: rhythm 6s ease-in-out both 0.9s ; } .city span:nth-child(18) { animation: city 6s ease-in-out both 0.9s ; } .voice span:nth-child(18) { animation: voice 6s ease-in-out both 0.9s ; } .acapella span:nth-child(18) { animation: voice 6s ease-in-out both 0.9s ; } .rhythm span:nth-child(19) { animation: rhythm 6s ease-in-out both 0.95s ; } .city span:nth-child(19) { animation: city 6s ease-in-out both 0.95s ; } .voice span:nth-child(19) { animation: voice 6s ease-in-out both 0.95s ; } .acapella span:nth-child(19) { animation: voice 6s ease-in-out both 0.95s ; } .rhythm span:nth-child(20) { animation: rhythm 6s ease-in-out both 1s ; } .city span:nth-child(20) { animation: city 6s ease-in-out both 1s ; } .voice span:nth-child(20) { animation: voice 6s ease-in-out both 1s ; } .acapella span:nth-child(20) { animation: voice 6s ease-in-out both 1s ; } .rhythm span:nth-child(21) { animation: rhythm 6s ease-in-out both 1.05s ; } .city span:nth-child(21) { animation: city 6s ease-in-out both 1.05s ; } .voice span:nth-child(21) { animation: voice 6s ease-in-out both 1.05s ; } .acapella span:nth-child(21) { animation: voice 6s ease-in-out both 1.05s ; } .rhythm span:nth-child(22) { animation: rhythm 6s ease-in-out both 1.1s ; } .city span:nth-child(22) { animation: city 6s ease-in-out both 1.1s ; } .voice span:nth-child(22) { animation: voice 6s ease-in-out both 1.1s ; } .acapella span:nth-child(22) { animation: voice 6s ease-in-out both 1.1s ; } .rhythm span:nth-child(23) { animation: rhythm 6s ease-in-out both 1.15s ; } .city span:nth-child(23) { animation: city 6s ease-in-out both 1.15s ; } .voice span:nth-child(23) { animation: voice 6s ease-in-out both 1.15s ; } .acapella span:nth-child(23) { animation: voice 6s ease-in-out both 1.15s ; } .rhythm span:nth-child(24) { animation: rhythm 6s ease-in-out both 1.2s ; } .city span:nth-child(24) { animation: city 6s ease-in-out both 1.2s ; } .voice span:nth-child(24) { animation: voice 6s ease-in-out both 1.2s ; } .acapella span:nth-child(24) { animation: voice 6s ease-in-out both 1.2s ; } .rhythm span:nth-child(25) { animation: rhythm 6s ease-in-out both 1.25s ; } .city span:nth-child(25) { animation: city 6s ease-in-out both 1.25s ; } .voice span:nth-child(25) { animation: voice 6s ease-in-out both 1.25s ; } .acapella span:nth-child(25) { animation: voice 6s ease-in-out both 1.25s ; } section[data-cattype="606"] .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="606"] .title2 { font-size: 2.5em; color: #fb9202; text-align: center; margin: 0px 0px 0px 110px; font-weight: bold; } section[data-cattype="606"] .btn { background-color: #f79206; color: #000 !important; margin: auto; display: block; width: 150px; padding: 10px; margin-top: 20px; } section[data-cattype="606"] .btn:hover { background-color: #333; color: #fff !important; } @media (min-width: 1200px) and (max-width: 1750px) { section[data-cattype="606"].wrapper_middle { background-position: left bottom !important; background-size: 90% !important; } section[data-cattype="606"] .title2 { margin: 0px 0px 0px -30px; } section[data-cattype="606"] .form { width: 400px; } } @media (min-width: 768px) and (max-width: 980px) { } @media (max-width: 767px) { } @media (max-width: 480px) { section[data-cattype="606"].wrapper_middle { padding: 0px 0px 220px 0px !important; background-size: contain !important; background-position: left bottom !important; background-size: 160% !important; } section[data-cattype="606"] .form { background-color: #e9ddc6; padding: 20px; text-align: center; border-radius: 20px; width: auto; margin: 20px; } [data-cattype="606"] h1 { font-size: 30px; } [data-cattype="606"] .title2 { font-size: 28px !important; color: #fb9202; text-align: center !important; margin: 0 !important; font-weight: bold; padding: 0px 0px 40px 0px !important; position: relative; transform: translateX(5%) translateY(-0%); } [data-cattype="606"] p { padding: 0px 20px; } }