a.accent, a#scroll, .btn.primary, header a::after, a.accent::after, a.accent::before, a.scroll::before, #clients_wrap img.img_3x2, header label[for=nav-trigger] span { transition: all 0.1s cubic-bezier(0.30, 0.25, 0.15, 1) 0s; } label[for=contact-trigger]::after { transition: top 0.3s ease-in-out 0s; } .btn.play, .btn.secondary { transition: padding 0.1s ease-in-out 0s; } html { scroll-behavior: smooth; -webkit-scroll-behavior: smooth; } /* █████████████████████████████████████████████████████ C L I E N T L O G O S ▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂ */ #client_logos .flex [class*='col-'] img { --length: 20s; } @keyframes clientone { 0% { } 4% { } 16% { opacity: 1; z-index: 0; } 18% { opacity: 0; z-index: 0; } 21% { opacity: 0; z-index: -1; } 92% { opacity: 0; z-index: 0; } 98% { opacity: 0; } 100%{ opacity: 1; } } @keyframes clienttwo { 0% { opacity: 0; } 18% { opacity: 0; } 20% { opacity: 1; } 24% { opacity: 1; } 36% { opacity: 1; z-index: 0; } 38% { opacity: 0; z-index: 0; } 41% { opacity: 0; z-index: -1; } 100%{ opacity: 0; z-index: -1; } } @keyframes clientthree { 0% { opacity: 0; } 38% { opacity: 0; } 40% { opacity: 1; } 44% { opacity: 1; } 56% { opacity: 1; } 58% { opacity: 0; z-index: 0; } 61% { opacity: 0; z-index: -1; } 100%{ opacity: 0; z-index: -1; } } @keyframes clientfour { 0% { opacity: 0; } 58% { opacity: 0; } 60% { opacity: 1; } 64% { opacity: 1; } 76% { opacity: 1; z-index: 0; } 78% { opacity: 0; z-index: 0; } 81% { opacity: 0; z-index: -1; } 100%{ opacity: 0; z-index: -1; } } @keyframes clientfive { 0% { opacity: 0; } 78% { opacity: 0; } 80% { opacity: 1; } 84% { opacity: 1; } 96% { opacity: 1; z-index: 0; } 98% { opacity: 0; z-index: 0; } 100%{ opacity: 0; z-index: -1; } } #client_logos .flex [class*='col-'] img:nth-child(1) { animation: clientone var(--length) ease-in-out infinite; } #client_logos .flex [class*='col-'] img:nth-child(2) { animation: clienttwo var(--length) ease-in-out infinite; } #client_logos .flex [class*='col-'] img:nth-child(3) { animation: clientthree var(--length) ease-in-out infinite; } #client_logos .flex [class*='col-'] img:nth-child(4) { animation: clientfour var(--length) ease-in-out infinite; } #client_logos .flex [class*='col-'] img:nth-child(5) { animation: clientfive var(--length) ease-in-out infinite; } #client_logos .flex:nth-child(1) [class*='col-']:nth-child(1) img { animation-delay: 0s; } #client_logos .flex:nth-child(1) [class*='col-']:nth-child(2) img { animation-delay: 1s; } #client_logos .flex:nth-child(1) [class*='col-']:nth-child(3) img { animation-delay: 2s; } #client_logos .flex:nth-child(1) [class*='col-']:nth-child(4) img { animation-delay: 3s; } #client_logos .flex:nth-child(1) [class*='col-']:nth-child(5) img { animation-delay: 4s; } #client_logos .flex:nth-child(1) [class*='col-']:nth-child(6) img { animation-delay: 5s; } #client_logos .flex:nth-child(1) [class*='col-']:nth-child(7) img { animation-delay: 6s; } #client_logos .flex:nth-child(1) [class*='col-']:nth-child(8) img { animation-delay: 7s; } #client_logos .flex:nth-child(2) [class*='col-']:nth-child(1) img { animation-delay: 1s; } #client_logos .flex:nth-child(2) [class*='col-']:nth-child(2) img { animation-delay: 2s; } #client_logos .flex:nth-child(2) [class*='col-']:nth-child(3) img { animation-delay: 3s; } #client_logos .flex:nth-child(2) [class*='col-']:nth-child(4) img { animation-delay: 4s; } #client_logos .flex:nth-child(2) [class*='col-']:nth-child(5) img { animation-delay: 5s; } #client_logos .flex:nth-child(2) [class*='col-']:nth-child(6) img { animation-delay: 6s; } #client_logos .flex:nth-child(2) [class*='col-']:nth-child(7) img { animation-delay: 7s; } #client_logos .flex:nth-child(2) [class*='col-']:nth-child(8) img { animation-delay: 8s; } /* █████████████████████████████████████████████████████ S U B - B R A N D S B E N E F I T S ▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂ */ @keyframes benefitone { 0% { opacity: 1; z-index: 0; } 8.3% { opacity: 0; z-index: -1; } 16.6% { opacity: 0; z-index: -1; } 33.3% { opacity: 0; z-index: -1; } 50% { opacity: 0; z-index: -1; } 58.3% { opacity: 0; z-index: -1; } 66.6% { opacity: 1; z-index: 0; } 83.3% { opacity: 1; z-index: 0; } 100% { opacity: 1; z-index: 0; } } @keyframes benefittwo { 0% { opacity: 0; z-index: -1; } 8.3% { opacity: 0; z-index: -1; } 16.6% { opacity: 1; z-index: 0; } 33.3% { opacity: 1; z-index: 0; } 50% { opacity: 1; z-index: 0; } 58.3% { opacity: 0; z-index: -1; } 66.6% { opacity: 0; z-index: -1; } 83.3% { opacity: 0; z-index: -1; } 100% { opacity: 0; z-index: -1; } } #sub-brands ul li div:first-of-type { animation: benefitone 6s ease-in-out infinite; } #sub-brands ul li div:last-of-type { animation: benefittwo 6s ease-in-out infinite; } #sub-brands ul li:nth-child(1) div { animation-delay: 1s; } #sub-brands ul li:nth-child(2) div { animation-delay: 2s; } #sub-brands ul li:nth-child(3) div { animation-delay: 3s; } #sub-brands ul li:nth-child(4) div { animation-delay: 4s; } #sub-brands ul li:nth-child(5) div { animation-delay: 5s; } @keyframes opacity-only { 0% { opacity: 0; } 100% { opacity: 1; } } /* █████████████████████████████████████████████████████ T I M E L I N E ▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂ */ /* @keyframes timeline { 0% { transform: translateX(0vw); } 65% { transform: translateX(-100vw); } 80% { transform: translateX(-100vw); } 85% { transform: translateX(0vw); } 100% { transform: translateX(0vw); } } .timeline { animation-name: timeline; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: normal; animation-fill-mode: both } .timeline:hover { animation-play-state: paused; } */ /* █████████████████████████████████████████████████████ N A V ▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂ */ @keyframes mobile-nav { 0% { opacity: 0; transform: scale(0.95) translateX(100vw); } 70% { opacity: 1; transform: translateX(4vw); transform: scale(0.95); } 100% { transform: scale(1); } } @keyframes quick-contact { 0% { opacity: 0; height: 0; transform: rotateX(90deg); } 100% { opacity: 1; transform: rotateX(0deg); height: auto; } } #quick-contact li ul { transform-origin: 0 0; } #quick-contact:hover li ul { animation-name: quick-contact; animation-duration: 0.5s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(0.30, 0.25, 0.15, 1); animation-direction: normal; animation-fill-mode: forwards; } @media screen and ( max-width: 1000px ) { header nav { animation-name: mobile-nav; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(0.30, 0.25, 0.15, 1); animation-direction: normal; animation-fill-mode: forwards; } header nav #main-nav li { opacity: 0; animation-name: opacity-only; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease-out; animation-direction: normal; animation-fill-mode: forwards; } header nav #main-nav li:nth-child(1) { animation-delay: 0.2s; } header nav #main-nav li:nth-child(2) { animation-delay: 0.4s; } header nav #main-nav li:nth-child(3) { animation-delay: 0.6s; } header nav #main-nav li:nth-child(4) { animation-delay: 0.8s; } header nav #main-nav li:nth-child(5) { animation-delay: 1s; } header nav #main-nav li:nth-child(6) { animation-delay: 1.2s; } header nav #main-nav li:nth-child(7) { animation-delay: 1.4s; } header nav #main-nav li:nth-child(8) { animation-delay: 1.6s; } header nav #main-nav li:nth-child(9) { animation-delay: 1.8s; } header nav #main-nav li:nth-child(10) { animation-delay: 2s; } }