/** * Layout */ html, body { margin: 0; } /** * Typography */ @font-face { font-family: 'glacial_cl'; src: url('fonts/glacialindifference-regular-webfont.woff2') format('woff2'), url('fonts/glacialindifference-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } html, body { font-family: 'glacial_cl', sans-serif; font-size: 105%; background: #fff; color: #222; } h1, h2, h3, h4 { font-weight: normal; } .text-muted { color: #878d96 !important; } /** * Colours */ .white { background-color: #fff; } .bold-yellow { background-color: #ffad00; } .bright-yellow { background-color: #f0d106; } .bold-orange { background-color: #eb7905; } .red { background-color: #e96762; } .pastel-pink { background-color: #e099c1; } .pastel-purple { background-color: #7d6f94; } .blue-grey { background-color: #6f879c; } .bright-green { background-color: #5ec233; } .pastel-green { background-color: #72b889; } .bright-blue { background-color: #72b2fe; } .pale-grey { background-color: #a6a6a7; } .pale-brown { background-color: #918e6e; } /** * Logo */ .logo { display: block; font-size: 2em; width: 6em; margin: 0 auto; padding: 0.5em 0 1em; text-transform: uppercase; color: #000; text-decoration: none; } .logo .logotype { display: inline-block; vertical-align: bottom; } .logo .logotype span { display: block; font-size: 0.75em; letter-spacing: 0.15em; } .logo .logotype span:first-child { font-size: 0.625em; letter-spacing: 0; } .logo .grid { position: relative; top: -1px; display: inline-block; vertical-align: bottom; font-size: 0; } .logo .row { display: block; margin: 0 0 5px 0; } .logo .cell { display: inline-block; background-color: #222; width: 15px; height: 15px; margin: 0 3px 0 0; } .logo .row:nth-child(1) .cell:nth-child(1) { animation: pulse 47s infinite; animation-delay: 1.5s; } .logo .row:nth-child(1) .cell:nth-child(2) { animation: pulse 32s infinite; animation-delay: 0.5s; } .logo .row:nth-child(1) .cell:nth-child(3) { animation: pulse 49s infinite; animation-delay: 6s; } .logo .row:nth-child(1) .cell:nth-child(4) { animation: pulse 35s infinite; animation-delay: 10s; } .logo .row:nth-child(2) .cell:nth-child(1) { animation: pulse 34s infinite; animation-delay: 7s; } .logo .row:nth-child(2) .cell:nth-child(2) { animation: pulse 48s infinite; animation-delay: 9s; } .logo .row:nth-child(2) .cell:nth-child(3) { animation: pulse 31s infinite; animation-delay: 5s; } .logo .row:nth-child(2) .cell:nth-child(4) { animation: pulse 46s infinite; animation-delay: 4.5s; } .logo .row:nth-child(3) .cell:nth-child(1) { animation: pulse 32s infinite; animation-delay: 3.5s; } .logo .row:nth-child(3) .cell:nth-child(2) { animation: pulse 49s infinite; animation-delay: 5.5s; } .logo .row:nth-child(3) .cell:nth-child(3) { animation: pulse 35s infinite; animation-delay: 4s; } .logo .row:nth-child(3) .cell:nth-child(4) { animation: pulse 34s infinite; animation-delay: 17s; } @keyframes pulse { 0%, 100% { background-color: #ffad00; } 8% { background-color: #ffad00; } 10% { background-color: #f0d106; } 16% { background-color: #f0d106; } 18% { background-color: #eb7905; } 24% { background-color: #eb7905; } 26% { background-color: #e96762; } 32% { background-color: #e96762; } 34% { background-color: #e099c1; } 40% { background-color: #e099c1; } 42% { background-color: #7d6f94; } 48% { background-color: #7d6f94; } 50% { background-color: #5ec233; } 56% { background-color: #5ec233; } 58% { background-color: #72b889; } 64% { background-color: #72b889; } 66% { background-color: #72b2fe; } 72% { background-color: #72b2fe; } 74% { background-color: #a6a6a7; } 80% { background-color: #a6a6a7; } 82% { background-color: #918e6e; } 88% { background-color: #918e6e; } 90% { background-color: #ffad00; } } /** * Content */ img { display: inline-block; max-width: 100%; } .offscreen-text { overflow: hidden; text-indent: -999px; } /** * Carousel */ .carousel { position: relative; } .carousel-control { position: absolute; top: 0; bottom: 0; width: 1em; } .carousel-control.next { right: 0; } .carousel-control.back { left: 0; } .carousel-content { padding: 0; list-style: none; } .carousel-content li { display: none; text-align: center; } .carousel-content li.active { display: block; } /** * Logos */ .logo-list { text-align: center; padding: 0; list-style: none; } .logo-list li { display: inline-block; width: 10em; padding: 0 1em; vertical-align: middle; } .logo-list li:first-child { width: 4em; } /** * Data categories */ .data-category-list { padding: 0; text-align: center; list-style: none; } .data-category-list li { display: inline-block; vertical-align: bottom; width: 9em; height: 9em; margin: 0.5em; padding: 0.1em; } .data-category-list .category { text-align: center; font-size: 1.5em; margin: 1.4em 0 0.5em; } .data-category-list .description { text-align: center; font-size: 1em; margin: 0; }