body { background: #1a1b2e; color: #fff; font-family: "HCo Gotham SSm", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.4; padding: 0; margin: 0; } a { color: #1cbfff; text-decoration: none; } a:focus, a:hover { color: #4fcdff; } section { padding: 3em 1em 2em; position: relative; min-width: 320px; } section:before { position: absolute; width: 0; height: 0; top: 0; left: 50%; content: ''; margin-left: -4.5em; border-width: 2.8125em 4.5em 0; border-style: solid; border-color: transparent; } section:nth-child(2n+2) { background: #26273b; } section:nth-child(2n+2):before { border-top-color: #232f4e; } section:nth-child(2n+1) { background: #232f4e; } section:nth-child(2n+1):before { border-top-color: #26273b; } section:nth-child(2):before { border-top-color: #1a1b2e; } section:first-child { background: inherit; padding-top: 1em; } section:first-child:before { border-top-color: transparent; } .container { max-width: 800px; margin: 0 auto; overflow: hidden; } h1, h2, h3, h4, h5, h6 { font-weight: 300; margin: .5em 0; } h1 { font-size: 2em; } h2 { font-size: 1.8em; } .btn { display: inline-block; color: #fff; background: #1cbfff; padding: .5em 2em; border-radius: 2em; } .btn:focus, .btn:hover { color: #fff; background: #4fcdff; } .logo { display: none; } .list-big { counter-reset: list-big-counter; list-style-type: none; margin: 0; padding: 0; } .list-big li:before { content: counter(list-big-counter); counter-increment: list-big-counter; display: block; position: absolute; left: 0; top: 0; width: 1.6em; height: 1.6em; line-height: 1.65em; /* slightly bigger that height for better vertical centering */ background: #fd3868; padding: 0; font-size: 2.2em; font-weight: 700; text-align: center; border-radius: 2em; } .list-big li { position: relative; margin: 2em 0 4em; padding: 1em 0 1em 6em; animation-name: brighten; animation-duration: 12s; animation-iteration-count: infinite; } .list-big li:nth-child(0) { animation-delay: -12s; } .list-big li:nth-child(1) { animation-delay: -8s; } .list-big li:nth-child(2) { animation-delay: -4s; } @keyframes brighten { 0%, 12%, 87%, 100% { opacity: 1; } 20%, 80% { opacity: 0.33; } } .column { width: 100%; } @media screen and (min-width: 35.5em) { .columns { display: flex; } .column { width: 50%; } .column-list { order: 1; } .column-slideshow { order: 2; } .inner-content { padding-left: 25%; } .logo { display: block; float: left; width: 18%; margin-top: 1em; } } .slideshow { padding: 2em; } .slideshow .frames { position: relative; box-shadow: 0 0 2em rgba(0, 0, 0, 0.5); overflow: hidden; } .slideshow img { width: 100%; display: block; } .slideshow .dummy { visibility: hidden; } .slideshow .frame { position: absolute; top: 0; left: 0; opacity: 0; } .frame { animation-duration: 12s; animation-name: fade; animation-iteration-count: infinite; animation-fill-mode: forwards; } .frame1 { animation-delay: -12s; } .frame2 { animation-delay: -8s; } .frame3 { animation-delay: -4s; } @keyframes fade { 0% { opacity: 0; transform: translateX(100%); } 5% { opacity: 1; transform: translateX(0); } 40% { opacity: 1; } 55% { opacity: 0; } } .slideshow .boops { position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; } .boop { display: block; position: absolute; width: 14%; height: 8.627%; background: #fd3868; top: 0; left: 0; opacity: 0; border-radius: 2em; animation-duration: 12s; animation-iteration-count: infinite; box-sizing: border-box; } .boop1 { animation-name: tap; animation-delay: -9.5s; top: 2.6%; left: 83.6% } .boop2 { animation-name: tap; animation-delay: -5.4s; top: 35.5%; left: 27%; } .boop3 { border: 2px solid #fd3868; border-radius: 0.5em; background: transparent; width: 96%; height: 14.5%; top: 14.7%; left: 2%; animation-name: highlight; animation-delay: -3.2s; } @keyframes tap { 0%, 20% { opacity: 0; } 9% { opacity: 0.5; } 10% { opacity: 1; } 15% { opacity: 0.5; } } @keyframes highlight { 0%, 50% { opacity: 0; } 20%, 30% { opacity: 0.5; } } svg { fill: currentColor; } .logo svg { display: block; width: 100%; height: auto; } #teconsent:not(:empty) { margin:2em 0; text-align: center; }