/** * Layout */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { margin: 0; } section { overflow: hidden; margin: 2.25em 0 4em; padding: 2em 0 4em; } .main-col { max-width: 40em; margin: 0 auto; padding: 0 1em; } hr { display: block; height: 1px; border: 0; background: #000; width: 100%; margin: 2em 0; padding: 0; } footer { margin: 4em 0 2em; } /** * 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; } input { font-family: 'glacial_cl', sans-serif; } h1, h2, h3, h4 { font-weight: normal; } .h1 { font-size: 2em; margin-bottom: 0.5em; } .h2 { font-size: 1.5em; margin: 0.25em 0 0.5em; } p, li, dd { line-height: 1.3; } dd { margin: 0 0 1.5em; } small { font-size: 0.75em; } .text-muted { color: #878d96 !important; } .border-image { border: 1px solid #000; } /** * Form */ input[type="text"], input[type="email"] { display: block; width: 100%; border: 1px solid #222; padding: 0.5em 0.25em; margin: 0.5em 0 0; } form .btn { margin-top: 1em; } .btn { background: #cecfd3; border: 0; border-radius: 1em; margin: 0.5em 0; padding: 0.5em 1em; width: 100%; font-size: 1em; text-align: center; display: inline-block; color: #000; text-decoration: none; cursor: pointer; } .btn:hover, .btn:focus, .btn:active { background-color: #bcbec0; } .btn.btn-half { width: 49%; margin-left: 0; margin-right: 2%; min-width: 11.45em; } .btn.btn-half:nth-child(2n+1) { margin-right: 0; } /** * Colours */ .white { background-color: #fff; } .bold-yellow { background-color: #ffad00; } .bright-yellow { background-color: #f0d106; } .pale-yellow { background-color: #fff021; } .bold-orange { background-color: #eb7905; } .pale-orange { background-color: #ffc04e; } .red { background-color: #e96762; } .pastel-pink { background-color: #e099c1; } .pale-pink { background-color: #ffcde5; } .pastel-purple { background-color: #7d6f94; } .blue-grey { background-color: #6f879c; } .bright-green { background-color: #5ec233; } .pastel-green { background-color: #72b889; } .pale-green { background-color: #73ebaf; } .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 { font-size: 1em; margin: 0; 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 { display: none; } .carousel.active .carousel-control { display: block; position: absolute; top: 0; bottom: 0; width: 1.75em; border: 0; background-color: #fff; background-position: center center; background-size: contain; background-repeat: no-repeat; cursor: pointer; } .carousel.active .carousel-control:hover, .carousel.active .carousel-control:active, .carousel.active .carousel-control:focus { border: 0; outline: none; opacity: 0.6; } .carousel button::-moz-focus-inner { border:0; } .carousel-control.next { right: -1em; background-image: url('images/arrow-next.png'); } .carousel-control.back { left: -1em; background-image: url('images/arrow-back.png'); } .carousel-content { padding: 0; list-style: none; } .carousel-content li { text-align: center; } .carousel.active .carousel-content li { display: none; } .carousel.active .carousel-content li.current { display: block; } /** * Logos */ .logo-list { text-align: center; padding: 0; list-style: none; } .logo-list li { display: inline-block; width: 8em; padding: 0 0.25em; vertical-align: middle; } .logo-list li:first-child { width: 4em; } /** * Data categories */ .data-category-list { padding: 0; text-align: center; list-style: none; margin: 0 -0.75em; } .data-category-list li { display: inline-block; vertical-align: bottom; width: 9em; height: 9em; margin: 0.375em; 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; }