button { -webkit-appearance: none; color: currentColor; font-size: inherit; } body { overflow: hidden; pointer-events: auto; } figcaption { font-size: 1.25rem; } header { position: fixed; width: calc(100% - 10vw); z-index: 999 } footer { display: none } .page { position: absolute; left: 0; height: 100%; width: 100%; } main { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 15vh; position: absolute; height: 95%; width: calc(100% - 10vw); left: 5vw; } main > * { overflow-y: auto; } main > div { width: 70%; padding-left: 5vw; } aside { width: 30%; overflow-wrap: break-word } aside section { margin-bottom: 4rem } aside section > div{ margin-bottom: 1rem } h2 { margin-bottom: 2rem } section { font-size: 2rem; margin-bottom: 2rem; } section.awards ol { max-height: none; height: auto; } section.awards > div { text-align: center; margin-top: 2rem; } section.awards ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .year{ width: 30%; font-size: 1.25rem; margin-bottom: 10px; margin-top: 25px; text-transform: full-width; } section.awards ul li.desc{ } section.press a{ display: block; margin-bottom: 1rem; } section.press span{ display: block; } section.press span.medium{ font-size: 1.25rem } section.legal { margin-bottom: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1.25rem; } section.legal p{ margin-right: 1rem } section.made { margin-bottom: 6rem } section.made, section.bottommade { font-size: 1.25rem } section.bottommade { display: none; } section.made svg, section.bottommade svg { height: .75em; width: auto; } section.made:hover svg, section.bottommade:hover svg { fill: #ff6f61 } @keyframes tonext { 75% { left: 0; } 95% { left: 100%; } 98% { left: 100%; } 99% { left: 0; } } @keyframes tostart { 75% { left: 0; } 95% { left: -300%; } 98% { left: -300%; } 99% { left: 0; } } @keyframes snap { 96% { scroll-snap-align: center; } 97% { scroll-snap-align: none; } 99% { scroll-snap-align: none; } 100% { scroll-snap-align: center; } } * { box-sizing: border-box; scrollbar-color: transparent transparent; /* thumb and track color */ scrollbar-width: 0px; } *::-webkit-scrollbar { width: 0; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: transparent; border: none; } * { -ms-overflow-style: none; } ol, li { list-style: none; margin: 0; padding: 0; } .carousel { position: relative; padding-top: 75%; filter: drop-shadow(0 0 10px #0003); perspective: 100px; z-index:10; top:0; left:0; background:white; display:none; cursor: url("x.png"), auto; color: white; } .carousel img { max-width: 100%; max-height: 100vh; text-align: center; } .carousel__viewport { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; overflow-x: scroll; counter-reset: item; scroll-behavior: smooth; scroll-snap-type: x mandatory; } .carousel__slide { position: relative; flex: 0 0 100%; width: 100%; background-color: white; counter-increment: item; } .carousel__slide:nth-child(even) { background-color: white; } .carousel__slide:before { content: counter(item); position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-40%,70px); color: #fff; font-size: 2em; } .carousel__snapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; scroll-snap-align: center; text-align: center; } @media (hover: hover) { .carousel__snapper { animation-name: tonext, snap; animation-timing-function: ease; animation-duration: 4s; animation-iteration-count: infinite; } .carousel__slide:last-child .carousel__snapper { animation-name: tostart, snap; } } @media (prefers-reduced-motion: reduce) { .carousel__snapper { animation-name: none; } } .carousel:hover .carousel__snapper, .carousel:focus-within .carousel__snapper { animation-name: none; } .carousel__navigation { position: absolute; right: 0; bottom: 0; left: 0; text-align: center; } .carousel__navigation-list, .carousel__navigation-item { display: inline-block; } .carousel__navigation-button { display: inline-block; width: 1.5rem; height: 1.5rem; background-color: #transparent; background-clip: content-box; border: 0.25rem solid transparent; font-size: 0; transition: transform 0.1s; } .carousel::before, .carousel::after, .carousel__prev, .carousel__next { position: absolute; top: 0; margin-top: 50vh; width: 20vw; height: 100vh; transform: translateY(-50%); font-size: 0; outline: 0; } .carousel::before, .carousel__prev { left: -1rem; cursor: url("arrow-left.png"), auto !important; } .carousel::after, .carousel__next { right: -1rem; cursor: url("arrow-right.png"), auto !important; } .carousel::before, .carousel::after { content: ''; z-index: 1; background-size: 1.5rem 1.5rem; background-repeat: no-repeat; background-position: center center; color: #fff; font-size: 2.5rem; line-height: 4rem; text-align: center; pointer-events: none; } /* .carousel::before { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E"); } .carousel::after { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E"); }*/