/* Theme Name: Astrojone */ /* Theme URI: https://astrojone.com */ /* Author: Astrojone */ /* Author URI: https://astrojone.com */ /* Description: The official production theme for Astrojone. */ /* Version: 0.1 */ /* License: Proprietary End User License Agreement */ /* License URI: https://astrojone.com */ /* Tags: Astrojone, Astro, Jone */ /* Reset */ *{ display: block; margin: 0; padding: 0; font-family: inherit; line-height: inherit; font-size: inherit; border: 0; border-radius: 0; border-spacing: 0; border: 0; outline: 0; text-decoration: inherit; font-weight: inherit; list-style: none; color: inherit; background: none; background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-text-size-adjust: none; -webkit-appearance: none; -webkit-touch-callout: none; -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; box-sizing: border-box; z-index: 1; cursor: inherit; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; flex-direction: row; flex-grow: 1; flex-shrink: 0; } input[type=text], textarea{ -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; cursor: text; } input[type=password]{ -webkit-user-select: all; } head, script{ display: none !important; } ::placeholder{ color: #555; line-height: normal; } ::-moz-placeholder{ color: #555; line-height: 1; } /* Font */ @font-face{ font-family: "SD Collie Slab"; src: url("sdcollieslab.eot"); src: local("SD Collie Slab"), local("sdcollieslab"), url("sdcollieslab.eot?#iefix") format("embedded-opentype"), url("sdcollieslab.woff2") format("woff2"), url("sdcollieslab.woff") format("woff"), url("sdcollieslab.ttf") format("truetype"), url("sdcollieslab.svg#sdcollieslab") format("svg"); font-weight: normal; font-style: normal; } /* FontAwesome */ @font-face{ font-family: "Font Awesome 5 Brands"; font-style: normal; font-weight: normal; font-display: auto; src: url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-brands-400.eot"); src: url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-brands-400.woff2") format("woff2"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-brands-400.woff") format("woff"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-brands-400.ttf") format("truetype"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-brands-400.svg#fontawesome") format("svg"); } @font-face{ font-family:"Font Awesome 5 Free"; font-style: normal; font-weight: 400; font-display: auto; src: url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-regular-400.eot"); src: url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-regular-400.woff2") format("woff2"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-regular-400.woff") format("woff"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-regular-400.ttf") format("truetype"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-regular-400.svg#fontawesome") format("svg"); } @font-face{ font-family:"Font Awesome 5 Free"; font-style: normal; font-weight: 900; font-display: auto; src: url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-solid-900.eot"); src: url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-solid-900.woff2") format("woff2"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-solid-900.woff") format("woff"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-solid-900.ttf") format("truetype"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-solid-900.svg#fontawesome") format("svg"); } /* Carousel */ .slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:pointer}.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none} /* Wrappers */ .outer{ margin: 0 auto; max-width: 80em; } .inner{ margin: 0 auto; max-width: 58em; } /* Layout */ html{ min-width: 200px; height: 100%; color: #222; font-family: "Roboto Slab", sans-serif; font-size: 62.5%; font-weight: normal; line-height: 1; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; background-color: #000; background-image: url("background.jpg"); background-size: cover; background-repeat: repeat; background-attachment: fixed; } /* ========== Document ========== */ body{ min-height: 100%; } body.search{ background-color: #fff; } body.error{ background-color: #0000ff; background-image: none; } /* ========== Header ========== */ /* Default */ #header{ position: relative; z-index: 4; background-color: #111; box-shadow: 0 0.5em 1em -0.5em #000; } #header > div{ position: relative; z-index: 10; } #logo{ position: relative; box-shadow: 0 0.125em 1em -0.5em #000; } #logo > a{ overflow: hidden; margin: 0 auto; padding: 1em; width: 7em; height: 3em; color: transparent; text-indent: -999999em; background-image: url("logo.png"); cursor: pointer; } #subheading{ display: none; } #menu{ position: relative; z-index: 12; box-shadow: 0 0.125em 1em -0.5em #000; } #hamburger{ position: absolute; top: -3em; right: 0; cursor: pointer; } #menu.active #hamburger{ background-color: #000; } #hamburger:before{ content: "\f0c9"; display: block; padding: 1em; width: 1em; height: 1em; font-family: "Font Awesome 5 Free"; color: #fff; font-weight: bold; text-align: center; cursor: pointer; } #hamburger:hover:before{ color: #111; text-align: center; background-color: #fff; cursor: pointer; } #menu > h2{ display: none; } #menu > h3{ display: none; } #navigation{ display: none; } #menu.active > #navigation{ display: block; } #navigation{ } #navigation > li{ } #navigation > li.first{ display: none; } #navigation > li > a{ padding: 1em; color: #00c9ff; background-color: #000; cursor: pointer; } #navigation > li.first > a{ padding-left: 3.5em; background-image: url("symbol.png"); background-position: 1em center; background-size: auto 2em; } #navigation > li > a:hover{ color: #111; background-color: #fff; } #navigation > li > ul{ } #navigation > li > ul > li{ } #navigation > li > ul > li > a{ padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 4em; color: #fff; background-color: #222; cursor: pointer; } #navigation > li > ul > li > a:hover{ color: #111; background-color: #fff; } #navigation > li > ul > li > ul{ display: none; } #social{ display: flex; } #social > li{ } #social > li > a{ padding-top: 1em; padding-bottom: 1em; color: #111; background-color: #fff; } #social > li > a:hover{ color: #fff; background-color: #111; cursor: pointer; } #social > li > a:before{ display: block; height: 1em; text-align: center; } #social > li > a > span{ display: none; } #ks{ } #ks > a{ } #ks > a:before{ content: "\f3bc"; font-family: "Font Awesome 5 Brands"; font-weight: bold; } #gj{ } #gj > a{ } #gj > a:before{ content: "\f091"; font-family: "Font Awesome 5 Free"; font-weight: bold; } #st{ } #st > a{ } #st > a:before{ content: "\f3f6"; font-family: "Font Awesome 5 Brands"; font-weight: normal; } #it{ } #it > a{ } #it > a:before{ content: "\f83a"; font-family: "Font Awesome 5 Brands"; font-weight: normal; } #fb{ } #fb > a{ } #fb > a:before{ content: "\f39e"; font-family: "Font Awesome 5 Brands"; font-weight: normal; } #tw{ } #tw > a{ } #tw > a:before{ content: "\f099"; font-family: "Font Awesome 5 Brands"; font-weight: normal; } #dc{ } #dc > a{ } #dc > a:before{ content: "\f392"; font-family: "Font Awesome 5 Brands"; font-weight: normal; } #yt{ } #yt > a{ } #yt > a:before{ content: "\f167"; font-family: "Font Awesome 5 Brands"; font-weight: normal; } #tc{ } #tc > a{ } #tc > a:before{ content: "\f1e8"; font-family: "Font Awesome 5 Brands"; font-weight: normal; } #bc{ } #bc > a{ } #bc > a:before{ content: "\f2d5"; font-family: "Font Awesome 5 Brands"; font-weight: normal; } #pk{ } #pk > a{ } #pk > a:before{ content: "\f2c1"; font-family: "Font Awesome 5 Free"; font-weight: normal; } #em{ } #em > a{ } #em > a:before{ content: "\f0e0"; font-family: "Font Awesome 5 Free"; font-weight: normal; } #breadcrumbs{ position: absolute; right: 0; bottom: -3em; left: 0; z-index: 8; min-height: 3em; overflow: hidden; font-size: 0.75em; background-color: #f3f1eb; box-shadow: 0 0.125em 2em -1em #000; } body.none #breadcrumbs, body.full #breadcrumbs{ display: none; } #breadcrumbs > div{ position: relative; } #breadcrumbs > div > h2{ display: none; } #breadcrumbs > div > ul{ overflow: hidden; max-height: 3em; } #breadcrumbs > div > ul > li{ float: left; } #breadcrumbs > div > ul > li > a{ position: relative; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 2.5em; min-height: 3em; overflow: hidden; /* max-width: 20em; */ color: #111; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; } #breadcrumbs > div > ul > li > a:hover{ color: #fff; background-color: #111; cursor: pointer; } #breadcrumbs > div > ul > li > a:before{ position: absolute; top: 50%; left: 0.5em; content: "\f105"; display: block; width: 1em; height: 1em; margin-top: -0.5em; color: inherit; font-family: "Font Awesome 5 Free"; font-weight: bold; text-align: center; } #breadcrumbs > div > ul > li.first{ } #breadcrumbs > div > ul > li.first > a{ } #breadcrumbs > div > ul > li.first > a:before{ content: "\f015"; left: 1em; } /* Full */ body.full #header{ } body.full #header > div{ max-width: 100%; } body.full #logo{ display: none; } body.full #menu{ display: flex; flex-direction: column; } body.full #menu.active{ position: static; } body.full #navigation{ order: 2; } body.full #navigation > li.first{ display: block; } body.full #navigation > li.first > a{ color: #fff; } body.full #navigation > li.first > a:hover{ color: #111; } body.full #navigation > li.first > a > span{ display: none; } body.full #navigation > li.first > a:before{ content: "Astrojone"; display: block; color: inherit; font-family: "SD Collie Slab"; text-transform: uppercase; } body.full #social{ order: 1; padding-right: 3em; } body.full #social > li{ } body.full #social > li > a{ color: #fff; background-color: #000; } body.full #social > li > a:hover{ color: #111; background-color: #fff; } body.full #hamburger{ top: 0; z-index: 14; } /* None */ body.none #header{ background-color: transparent; box-shadow: none; } body.none #header > div{ max-width: 100%; } body.none #logo{ display: none; } body.none #menu{ position: absolute; top: 3em; right: 0; left: 0; display: flex; flex-direction: column; box-shadow: none; } body.none #menu.active{ position: static; padding-top: 3em; } body.none #navigation{ order: 1; box-shadow: 0 1em 1em -0.25em #000; } body.none #navigation > li.first{ display: block; } body.none #navigation > li.first > a{ color: #fff; } body.none #navigation > li.first > a:hover{ color: #111; } body.none #navigation > li.first > a > span{ display: none; } body.none #navigation > li.first > a:before{ content: "Astrojone"; display: block; color: inherit; font-family: "SD Collie Slab"; } body.none #social{ order: 2; display: none; box-shadow: 0 0.5em 1em -0.25em #000; } body.none #menu.active #social{ display: flex; } body.none #hamburger{ } body.none #menu.active #hamburger{ top: 0; } /* Search */ body.search #header{ } body.search #header > div{ display: flex; flex-direction: column; } body.search #logo{ display: block; margin: 0 auto; padding-top: 2.5em; padding-right: 0; padding-bottom: 2.5em; padding-left: 0; width: 17.5em; box-shadow: none; order: 2; } body.search #logo > a{ padding: 0; width: 100%; height: 5em; background-image: url("search.png"); } body.search #menu{ order: 1; } body.search #menu #hamburger{ } body.search #menu #hamburger:before{ color: #111; background-color: transparent; } body.search #menu #hamburger:hover:before{ color: #fff; background-color: #111; } body.search #menu.active #hamburger:before{ color: #fff; } /* ========== Body ========== */ /* Default */ #body{ position: relative; z-index: 2; padding-top: 2.25em; } /* Full */ body.full #body{ padding-top: 0; } /* None */ body.none #body{ padding-top: 0; } /* Search */ body.search #body{ } #search{ font-family: serif; } #search > div{ } #search > div > h2{ display: none; } #search > div > p{ padding: 0 0.67em; color: #222; font-size: 1.5em; text-align: center; line-height: 1.5; } #search > div > form{ padding: 2.5em 1em; } #search > div > form > input[type=text]{ padding: 1em; height: 3.25em; width: 100%; cursor: pointer; border-width: 0.125em; border-style: solid; border-color: #222 #eee #eee #222; } #search > div > form > input[type=text]::placeholder{ font-family: serif; line-height: 1; } #search > div > form > input[type=submit]{ margin-top: 1em; margin-right: auto; margin-left: auto; padding: 1em 2em; width: 100%; max-width: 50%; height: 3.25em; background-color: #ddd; border-width: 0.125em; border-style: solid; border-color: #eee #222 #222 #eee; cursor: pointer; } #search > div > form > input[type=submit]:active{ background-color: #888; border-color: #222 #eee #eee #222; } #search > div > h2.bottom{ display: block; padding: 2.5em 1em 0; font-weight: bold; border-top: 0.125em solid #eee; } #search > div > h2.bottom:after{ content: ":"; } #search > div > p.bottom{ padding: 2.5em; font-size: 1em; font-weight: bold; } #search > div > ul{ padding-bottom: 1.5em; } #search > div > ul > li{ color: #222; } #search > div > ul > li > a{ padding: 1em; cursor: pointer; } #search > div > ul > li > a > span.top{ color: #0000ff; text-decoration: underline; } #search > div > ul > li > a:hover > span.top{ color: #aa00ff; } #search > div > ul > li > a > span.center{ margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.25; } #search > div > ul > li > a > span.center > span.bottom{ display: inline; } #search > div > ul > li > a > span.center > span.bottom > span{ display: inline; } #search > div > ul > li > a > span.bottom{ color: #888; font-size: 0.75em; } #search > div > p.bottom{ padding: 2.5em; color: #222; font-size: 1em; text-align: center; line-height: 1.25; } /* Error */ body.error #body{ } #error{ padding: 2.5em; color: #fff; font-family: "VT323", monospace; } #error > div{ text-align: center; } #error > div:before{ content: "Astrojone"; display: inline-block; color: #0000ff; font-size: 1.25em; background-color: #fff; } #error > div > h2{ display: none; } #error > div > p{ margin-top: 1em; font-size: 1.25em; text-align: left; } #error > div > ul{ padding-top: 1em; font-size: 1.25em; } #error > div > ul > li{ overflow: hidden; text-align: left; } #error > div > ul > li:before{ content: "*"; float: left; padding-left: 1em; padding-right: 1em; display: block; } #error > div > ul > li > a{ float: left; color: #ffff00; cursor: pointer; } #error > div > ul > li > a:hover{ color: #fff; background-color: #ff0000; } #error > div > form{ overflow: hidden; position: relative; margin-top: 1em; height: 1em; font-size: 1.25em; } #error > div > form > input[type=text]{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding-right: 1em; width: 100%; height: 1em; background-color: #000; cursor: pointer; } #error > div > form > input[type=text]:hover{ background-color: #ff0000; } #error > div > form > input[type=text]:focus{ background-color: #ff0000; } #error > div > form > input[type=submit]{ position: absolute; top: 0; right: 0; z-index: 4; width: 1em; height: 1em; color: #fff; background-color: #ff0000; cursor: pointer; } #error > div > p.bottom{ text-align: center; } #error > div > p.bottom:after{ content: " _"; animation: blink 0.5s step-end infinite; } @keyframes blink{ from, to{ opacity: 100%; } 50%{ opacity: 0; } } /* Front */ body.page #body{ } #front{ } #front > header{ display: none; } #front > h3{ display: none; } #carousel{ position: relative; } #carousel button.slick-arrow{ z-index: 40; position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; width: 1em; height: 100%; color: transparent; font-size: 2em; cursor: pointer; } #carousel button.slick-arrow:before{ content: "\f053"; z-index: 50; position: absolute; top: 50%; left: 0; margin-top: -0.5em; display: block; width: 1em; height: 1em; color: #fff; font-weight: bold; font-family: "Font Awesome 5 Free"; text-align: center; } #carousel button.slick-next{ right: 0; left: auto; } #carousel button.slick-next:before{ content: "\f054"; right: 0; left: auto; } #carousel li{ display: none; background-size: cover; } #carousel li:first-child{ display: block; } body.js #carousel li{ display: block; } #carousel li > a{ cursor: pointer; } #carousel li > a > span{ position: relative; height: 15em; background-size: auto 75%; } #carousel li > a > span > span.top{ position: absolute; top: 2em; right: 2em; bottom: 2em; left: 2em; overflow: hidden; margin: 0 auto; text-indent: -999999em; color: transparent; background-size: contain; } #carousel li > a > span > span.bottom{ z-index: 10; position: absolute; right: 4em; bottom: 4em; padding: 0.5em; color: #222; font-size: 0.5em; font-weight: 600; background-color: #fff; box-shadow: 0.125em 0.125em 1em -0.5em #222; } #carousel ul.slick-dots{ position: absolute; right: 0; bottom: 0; left: 0; height: 0; text-align: center; } #carousel ul.slick-dots > li{ position: relative; top: -1.25em; display: inline-block; } #carousel ul.slick-dots > li > button{ overflow: hidden; margin: 0.075em; width: 1em; height: 1em; text-align: center; text-indent: -999999em; border: 0.125em solid #fff; border-radius: 2em; cursor: pointer; box-shadow: 0 0.125em 0.5em -0.25em #000; } #carousel ul.slick-dots > li.slick-active{ } #carousel ul.slick-dots > li.slick-active > button{ background-color: #fff; } #updates{ z-index: 10; position: relative; padding: 2em; background-color: #f3f1eb; box-shadow: 0 0 2em -1em #000; } #updates > div{ position: relative; } #updates > div > div{ margin-bottom: -2em; } #updates > div > div > section.left{ } #updates > div > div > section.left > header{ display: flex; flex-direction: row; padding-bottom: 1em; } #updates > div > div > section.left > header > h3{ display: flex; flex-direction: row; align-items: center; } #updates > div > div > section.left > header > h3:before{ content: "Latest"; flex-grow: 0; flex-shrink: 1; margin-right: 0.5em; display: block; font-size: 1.5em; font-weight: 600; } #updates > div > div > section.left > header > h3 > span{ display: none; } #updates > div > div > section.left > header > h3:after{ content: " "; flex-grow: 1; flex-shrink: 0; display: block; height: 0.125em; background-color: #111; } #updates > div > div > section.left > header > p{ flex-grow: 0; flex-shrink: 1; } #updates > div > div > section.left > header > p > a{ margin-left: 0.5em; padding: 1em; cursor: pointer; } #updates > div > div > section.left > header > p > a:hover{ color: #fff; background-color: #000; } #updates > div > div > section.left > header > p > a > span.left{ display: none; } #updates > div > div > section.left > header > p > a > span.right{ font-weight: 600; text-transform: capitalize; } #updates > div > div > section.left > header > p > a > span.right:after{ content: "\f105"; margin-left: 0.25em; display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: bold; } #updates > div > div > section.left > div{ padding-bottom: 1em; } #updates > div > div > section.left > div > article{ padding-bottom: 1em; } #updates > div > div > section.left > div > article > div{ position: relative; overflow: hidden; background-color: #fff; box-shadow: 0 0.125em 1em -0.5em #000; } #updates > div > div > section.left > div > article > div:hover{ color: #00c9ff; background-color: #000; } #updates > div > div > section.left > div > article > div > h4{ padding: 1em; margin-left: 25%; min-height: 4em; } #updates > div > div > section.left > div > article > div > p{ order: 1; width: 25%; background-size: 0; background-repeat: no-repeat; background-position: -999999em -999999em; } #updates > div > div > section.left > div > article > div > p:before{ content: " "; display: block; z-index: 2; position: absolute; top: 0; bottom: 0; left: 0; width: 25%; height: 100%; background-image: inherit; background-position: center; background-size: cover; } #updates > div > div > section.left > div > article > div > p > a{ z-index: 40; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; text-indent: -999999em; cursor: pointer; } #updates > div > div > section.right{ } #updates > div > div > section.right > header{ display: flex; flex-direction: row; padding-bottom: 1em; } #updates > div > div > section.right > header > h3{ display: flex; flex-direction: row; align-items: center; } #updates > div > div > section.right > header > h3 > span{ flex-grow: 0; flex-shrink: 1; margin-right: 0.5em; display: block; font-size: 1.5em; font-weight: 600; } #updates > div > div > section.right > header > h3:after{ content: " "; flex-grow: 1; flex-shrink: 0; display: block; height: 0.125em; background-color: #111; } #updates > div > div > section.right > header > p{ flex-grow: 0; flex-shrink: 1; } #updates > div > div > section.right > header > p > a{ margin-left: 0.5em; padding: 1em; cursor: pointer; } #updates > div > div > section.right > header > p > a:hover{ color: #fff; background-color: #000; } #updates > div > div > section.right > header > p > a > span.left{ display: none; } #updates > div > div > section.right > header > p > a > span.right{ font-weight: 600; text-transform: capitalize; } #updates > div > div > section.right > header > p > a > span.right:after{ content: "\f105"; margin-left: 0.25em; display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: bold; } #updates > div > div > section.right > div{ padding-bottom: 1em; } #updates > div > div > section.right > div > article{ padding-bottom: 1em; } #updates > div > div > section.right > div > article > div{ position: relative; background-color: #fff; box-shadow: 0 0.125em 1em -0.5em #000; } #updates > div > div > section.right > div > article > div:hover{ color: #00c9ff; background-color: #000; } #updates > div > div > section.right > div > article > div > h4{ padding-top: 1em; padding-right: 4em; padding-bottom: 1em; padding-left: 1em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #updates > div > div > section.right > div > article > div > p{ } #updates > div > div > section.right > div > article > div > p > a{ z-index: 40; position: absolute; top: 0; right: 0; bottom: 0; right: 0; width: 100%; height: 100%; overflow: hidden; text-indent: -999999em; cursor: pointer; } #updates > div > div > section.right > div > article > div > p > a:before{ content: "\f105"; z-index: 45; position: absolute; top: 0; right: 0; bottom: 0; padding: 1em; display: block; width: 1em; height: 1em; color: #fff; font-family: "Font Awesome 5 Free"; font-weight: 600; text-indent: 0; text-align: center; background-color: #0097c7; } #hero{ padding: 2em; } #hero > div{ position: relative; } #hero > div > h3{ display: none; } #hero > div > p{ margin-bottom: 2em; color: #fff; line-height: 1.25; text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #hero > div > p > strong{ font-weight: 600; font-size: 1.5em; } #hero > div > p > strong > em{ display: inline; font-style: italic; } #hero > div > p:last-child{ margin-bottom: 0; } #hero > div > ul{ margin-top: -0.25em; } #hero > div > ul > li{ margin-top: 0.25em; } #hero > div > ul > li > a{ padding: 1em 2em; color: #fff; background-color: #0097c7; cursor: pointer; } #hero > div > ul > li > a:hover{ background-color: #00c9ff; } #newsletter{ padding: 2em; background-color: #f3f1eb; } #newsletter.block:nth-child(odd){ color: #fff; background-color: transparent; } #newsletter > div{ position: relative; } #newsletter > div > h3{ display: none; } #newsletter > div > p{ font-size: 1.5em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #newsletter > div > p > span{ display: none; } #newsletter > div > form{ position: relative; margin-top: 2em; background-color: #fff; box-shadow: 0 0.25em 1em -0.5em #000; } #newsletter > div > form > label{ display: none; } #newsletter > div > form > input[type=email]{ padding-top: 1em; padding-right: 5em; padding-bottom: 1em; padding-left: 1em; width: 100%; height: 3em; cursor: text; -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; } #newsletter > div > form > div{ display: none; } #newsletter > div > form > input[type=submit]{ position: absolute; top: 0; right: 0; padding: 1em; width: 4em; height: 3em; color: #fff; text-align: center; background-color: #0097c7; cursor: pointer; } #newsletter > div > form > input[type=submit]:hover{ background-color: #00c9ff; } #astrojonetv{ display: none; padding: 2em; } body.js #astrojonetv{ display: block; } #astrojonetv > div{ position: relative; } #astrojonetv > div > h3{ overflow: hidden; margin: 0 auto; width: 7.5em; height: 2.5em; color: transparent; text-indent: -999999em; background-image: url("astrojonetv.png"); } #astrojonetv > div > p{ margin-top: 2em; color: #fff; text-align: center; line-height: 1.25; } #astrojonetv > div > div{ position: relative; margin-top: 2em; } #astrojonetv > div > div > iframe{ z-index: 20; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } #astrojonetv > div > div > img{ margin: 0 auto; width: 100%; height: auto; max-height: 40em; } #astrojonetv > div > p.bottom{ display: none; } #astrojonetv > div > ul{ margin-top: -0.25em; padding-top: 2em; } #astrojonetv > div > ul > li{ margin-top: 0.25em; } #astrojonetv > div > ul > li > a{ padding: 1em 2em; color: #fff; background-color: #0097c7; cursor: pointer; } #astrojonetv > div > ul > li > a:hover{ background-color: #00c9ff; } /* #astrojoneos{ display: none; } #astrojoneos > div{ position: relative; } #astrojoneos > div > h3{ display: none; } #astrojoneos > div > iframe{ z-index: 20; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } #astrojoneos > div > img{ margin: 0 auto; width: 100%; height: auto; max-height: 48em; } */ /* Latest */ body.home #body{ } #latest{ } #latest > header{ padding: 2em; } #latest > header > h2{ } #latest > header > h2 > span{ color: #fff; font-size: 1.5em; } #latest > header > div{ display: none; margin-top: 1em; } #latest > header > div > p{ color: #fff; line-height: 1.25; } #latest > div{ padding-right: 2em; padding-bottom: 2em; padding-left: 2em; } #latest > div > div{ } #latest > div > div > div.left{ } #latest > div > div > div.left > article{ margin-bottom: 2em; } #latest > div > div > div.left > article > div{ position: relative; background-color: #faf7ef; box-shadow: 0 0.125em 1em -0.5em #000; } #latest > div > div > div.left > article > div:hover{ color: #00c9ff; background-color: #000; } #latest > div > div > div.left > article > div > header{ display: flex; flex-direction: column; } #latest > div > div > div.left > article > div > header > h3{ order: 2; overflow: hidden; padding-top: 1em; padding-right: 2.5em; padding-bottom: 1em; padding-left: 1em; font-weight: 600; text-overflow: ellipsis; } #latest > div > div > div.left > article > div > header > div{ order: 1; background-size: cover; background-repeat: repeat; background-color: #000; } #latest > div > div > div.left > article > div > header > div > img{ width: 100%; height: auto; } #latest > div > div > div.left > article > div > div{ } #latest > div > div > div.left > article > div:hover > div{ background-color: transparent; } #latest > div > div > div.left > article > div > div > p{ } #latest > div > div > div.left > article > div > div > p > a{ text-align: right; } #latest > div > div > div.left > article > div > div > p > a > span{ z-index: 10; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; width: 100%; height: 100%; color: transparent; text-indent: -999999em; cursor: pointer; } #latest > div > div > div.left > article > div > div > p > a:after{ position: absolute; top: 50%; right: 1em; content: "\f105"; margin-top: 4em; display: block; font-family: "Font Awesome 5 Free"; font-weight: bold; } #latest > div > div > div.left > nav{ } #latest > div > div > div.left > nav > h3{ display: none; } #latest > div > div > div.left > nav > ul{ overflow: hidden; margin-bottom: 2em; } #latest > div > div > div.left > nav > ul > li.left{ float: left; } #latest > div > div > div.left > nav > ul > li.left > a{ padding: 1em; color: #fff; background-color: #0097c7; cursor: pointer; } #latest > div > div > div.left > nav > ul > li.left > a:hover{ background-color: #00c9ff; } #latest > div > div > div.left > nav > ul > li.left > a:before{ content: "\f104"; display: block; width: 1em; font-family: "Font Awesome 5 Free"; font-weight: bold; text-align: center; } #latest > div > div > div.left > nav > ul > li.left > a > span{ display: none; } #latest > div > div > div.left > nav > ul > li.right{ float: right; } #latest > div > div > div.left > nav > ul > li.right > a{ padding: 1em; color: #fff; background-color: #0097c7; cursor: pointer; } #latest > div > div > div.left > nav > ul > li.right > a:hover{ background-color: #00c9ff; } #latest > div > div > div.left > nav > ul > li.right > a:before{ content: "\f105"; display: block; width: 1em; font-family: "Font Awesome 5 Free"; font-weight: bold; text-align: center; } #latest > div > div > div.left > nav > ul > li.right > a > span{ display: none; } #latest > div > div > div.right{ } #latest > div > div > div.right > div{ } #categories{ } #categories > h2{ margin-bottom: 2em; } #categories > h2 > span{ color: #fff; font-size: 1.5em; } #categories > ul{ } #categories > ul > li{ margin-top: 0.25em; } #categories > ul > li > a{ padding: 1em 2em; color: #fff; background-color: #0097c7; cursor: pointer; } #categories > ul > li > a:hover{ background-color: #00c9ff; } #categories > ul > li > ul{ padding-left: 1em; } #categories > ul > li > ul > li{ margin-top: 0.25em; } #categories > ul > li > ul > li > a{ position: relative; padding-top: 1em; padding-right: 2em; padding-bottom: 1em; padding-left: 2.5em; color: #0097c7; font-weight: 600; cursor: pointer; } #categories > ul > li > ul > li > a:hover{ color: #fff; background-color: #00c9ff; } #categories > ul > li > ul > li > a:before{ content: "L"; z-index: 45; position: absolute; top: 50%; left: 1em; margin-top: -0.5em; display: block; height: 1em; color: inherit; font-family: sans-serif; font-weight: normal; text-indent: 0; text-align: center; } #feeds{ } #feeds > h2{ display: none; } #feeds > h2 > span{ } #feeds > div.first{ margin-top: 2em; } #feeds > div.first > h3{ display: flex; flex-direction: row; align-items: center; } #feeds > div.first > h3:before{ order: 1; content: "Twitter"; margin-right: 0.5em; display: block; color: #fff; font-size: 1.5em; font-weight: 600; } #feeds > div.first > h3 > a{ order: 3; overflow: hidden; margin-left: 0.5em; padding: 1em; color: #fff; cursor: pointer; } #feeds > div.first > h3 > a:hover{ color: #000; background-color: #fff; } #feeds > div.first > h3 > a:before{ content: "More"; float: left; display: block; font-weight: 600; } #feeds > div.first > h3 > a > span{ display: none; } #feeds > div.first > h3 > a:after{ content: "\f105"; float: left; margin-left: 0.25em; display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: bold; } #feeds > div.first > h3:after{ order: 2; content: " "; display: block; width: 100%; height: 0.125em; background-color: #fff; } #feeds > div.first > ul{ } #feeds > div.first > ul > li{ margin-top: 2em; } #feeds > div.first > ul > li > a{ display: flex; flex-direction: column; background-color: #fff; box-shadow: 0 0.125em 1em -0.5em #000; cursor: pointer; } #feeds > div.first > ul > li > a:hover{ color: #fff; background-color: #000; } #feeds > div.first > ul > li > a > p.top{ display: flex; flex-direction: column; order: 2; padding: 2em; } #feeds > div.first > ul > li > a > p.top > span.top{ order: 2; line-height: 1.25; } #feeds > div.first > ul > li > a > p.top > span.bottom{ order: 1; display: flex; flex-wrap: wrap; align-items: center; padding-bottom: 1em; } #feeds > div.first > ul > li > a > p > span.bottom > span.left{ display: inline-block; color: #aaa; } #feeds > div.first > ul > li > a > p > span.bottom > span.right{ display: inline-block; color: #aaa; font-size: 0.75em; font-weight: 600; text-align: right; } #feeds > div.first > ul > li > a > p.bottom{ order: 1; background-size: cover; } #feeds > div.first > ul > li > a > p.bottom > img{ width: 100%; height: auto; } #feeds > div.second{ margin-top: 2em; } #feeds > div.second > h3{ display: flex; flex-direction: row; align-items: center; margin-bottom: 2em; } #feeds > div.second > h3:before{ order: 1; content: "Instagram"; margin-right: 0.5em; display: block; color: #fff; font-size: 1.5em; font-weight: 600; } #feeds > div.second > h3 > a{ order: 3; overflow: hidden; margin-left: 0.5em; padding: 1em; color: #fff; cursor: pointer; } #feeds > div.second > h3 > a:hover{ color: #000; background-color: #fff; } #feeds > div.second > h3 > a:before{ content: "More"; float: left; display: block; font-weight: 600; } #feeds > div.second > h3 > a > span{ display: none; } #feeds > div.second > h3 > a:after{ content: "\f105"; float: left; margin-left: 0.25em; display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: bold; } #feeds > div.second > h3:after{ order: 2; content: " "; display: block; width: 100%; height: 0.125em; background-color: #fff; } #feeds > div.second > ul{ overflow: hidden; margin: -0.5em; } #feeds > div.second > ul > li{ float: left; width: 50%; } #feeds > div.second > ul > li > a{ margin: 0.5em; box-shadow: 0 0.125em 1em -0.5em #000; cursor: pointer; } #feeds > div.second > ul > li > a:hover{ transform: rotate(-2deg) scale(1.125); } #feeds > div.second > ul > li > a > p.top{ display: none; } #feeds > div.second > ul > li > a > p.bottom{ } #feeds > div.second > ul > li > a > p.bottom > img{ width: 100%; height: auto; } /* Category */ body.category #body{ } #category{ } #category > header{ padding: 2em; } #category > header > h2{ } #category > header > h2 > span{ display: inline-block; color: #fff; font-size: 1.5em; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #category > header > div{ margin-top: 1em; } #category > header > div > p{ display: inline; color: #fff; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #category > div{ } #category > div > div{ } #category > div > div > div.left{ padding-right: 2em; padding-bottom: 1em; padding-left: 2em; } #category > div > div > div.left > article{ padding-bottom: 1em; } #category > div > div > div.left > article > div{ position: relative; overflow: hidden; background-color: #fff; box-shadow: 0 0.125em 1em -0.5em #000; } #category > div > div > div.left > article > div:hover{ color: #00c9ff; background-color: #000; } #category > div > div > div.left > article > div > h3{ padding: 1em; margin-left: 25%; min-height: 4em; } #category > div > div > div.left > article > div > p{ order: 1; width: 25%; background-size: 0; background-repeat: no-repeat; background-position: -999999em -999999em; } #category > div > div > div.left > article > div > p:before{ content: " "; display: block; z-index: 2; position: absolute; top: 0; bottom: 0; left: 0; width: 25%; height: 100%; background-image: inherit; background-position: center; background-size: cover; } #category > div > div > div.left > article > div > p > a{ z-index: 40; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; text-indent: -999999em; cursor: pointer; } #category > div > div > div.right{ padding-right: 2em; padding-bottom: 2em; padding-left: 2em; } #category > div > div > div.right > div{ } #category > div > div > div.right > div > h2{ display: none; } #category > div > div > div.right > div > nav{ } #category > div > div > div.right > div > nav > ul{ } #category > div > div > div.right > div > nav > ul > li{ margin-bottom: 0.25em; } #category > div > div > div.right > div > nav > ul > li:last-of-type{ margin-bottom: 0; } #category > div > div > div.right > div > nav > ul > li > a{ padding: 1em; color: #fff; background-color: #0097c7; cursor: pointer; } #category > div > div > div.right > div > nav > ul > li > a:hover{ background-color: #00c9ff; } #category > div > div > div.right > div > nav > ul > li.top{ } #category > div > div > div.right > div > nav > ul > li.top > a{ } #category > div > div > div.right > div > nav > ul > li.top > a:before{ content: "\f104"; float: left; display: block; margin-right: 0.25em; color: inherit; font-family: "Font Awesome 5 Free"; font-weight: bold; text-align: center; } #category > div > div > nav{ padding-right: 2em; padding-left: 2em; } #category > div > div > nav > h3{ display: none; } #category > div > div > nav > ul{ overflow: hidden; margin-bottom: 2em; } #category > div > div > nav > ul > li{ } #category > div > div > nav > ul > li > a{ } #category > div > div > nav > ul > li.left{ float: left; } #category > div > div > nav > ul > li.left > a{ padding: 1em; color: #fff; background-color: #0097c7; cursor: pointer; } #category > div > div > nav > ul > li.left > a:hover{ background-color: #00c9ff; } #category > div > div > nav > ul > li.left > a:before{ content: "\f104"; display: block; width: 1em; font-family: "Font Awesome 5 Free"; font-weight: bold; text-align: center; } #category > div > div > nav > ul > li.left > a > span{ display: none; } #category > div > div > nav > ul > li.right{ float: right; } #category > div > div > nav > ul > li.right > a{ padding: 1em; color: #fff; background-color: #0097c7; cursor: pointer; } #category > div > div > nav > ul > li.right > a:hover{ background-color: #00c9ff; } #category > div > div > nav > ul > li.right > a:before{ content: "\f105"; display: block; width: 1em; font-family: "Font Awesome 5 Free"; font-weight: bold; text-align: center; } #category > div > div > nav > ul > li.right > a > span{ display: none; } /* About */ body.about #body{ } #about{ } #about > header{ padding: 4em 2em; } #about > header > h2{ } #about > header > h2 > span{ overflow: hidden; margin: 0 auto; width: 10em; height: 2.5em; text-indent: -999999em; background-image: url("logo.png"); } #about > header > div.inner{ margin-top: 2em; } #about > header > div.inner > div{ } #about > header > div.inner > div > p{ color: #fff; font-size: 1.5em; font-weight: 600; text-align: center; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #about > header > div.inner > div > div{ margin-top: 2em; width: 100%; height: 10em; } #about > header > div.inner > nav{ margin-top: 2em; } #about > header > div.inner > nav > h3{ } #about > header > div.inner > nav > h3:before{ content: "Need to get in touch?"; display: block; color: #fff; font-weight: 600; text-align: center; } #about > header > div.inner > nav > h3 > span{ display: none; } #about > header > div.inner > nav > ul{ margin-top: 2em; } #about > header > div.inner > nav > ul > li{ margin-bottom: 0.25em; } #about > header > div.inner > nav > ul > li:last-of-type{ margin-bottom: 0; } #about > header > div.inner > nav > ul > li > a{ padding-top: 1em; padding-right: 2em; padding-bottom: 1em; padding-left: 2em; color: #0097c7; text-align: center; border: 0.125em solid #0097c7; cursor: pointer; } #about > header > div.inner > nav > ul > li > a:hover{ color: #fff; background-color: #00c9ff; border-color: #00c9ff; } #about > div.top{ padding: 4em 2em; background-color: #f3f1eb; } #about > div.top > div.inner{ } #about > div.top > div.inner > div{ display: flex; flex-direction: column; } #about > div.top > div.inner > div > div{ } #about > div.top > div.inner > div > div:first-of-type{ order: 2; } #about > div.top > div.inner > div > div:last-of-type{ order: 1; margin-bottom: 2em; } #about > div.top > div.inner > div > div > p{ margin-bottom: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #about > div.top > div.inner > div > div > p > strong{ font-size: 1.5em; font-weight: 600; text-align: center; } #about > div.top > div.inner > div > div > ul{ } #about > div.top > div.inner > div > div > ul > li{ margin-bottom: 0.25em; } #about > div.top > div.inner > div > div > ul > li:last-of-type{ margin-bottom: 0; } #about > div.top > div.inner > div > div > ul > li > a{ padding: 1em 2em; color: #fff; text-align: center; background-color: #0097c7; box-shadow: 0 0.125em 1em -0.5em #000; cursor: pointer; } #about > div.top > div.inner > div > div > ul > li > a:hover{ background-color: #00c9ff; } #about > div.top > div.inner > div > div > figure{ margin-bottom: 2em; } #about > div.top > div.inner > div > div > figure > img{ width: 100%; height: auto; } #about > div.top > div.inner > div > div > div.wp-block-image{ } #about > div.top > div.inner > div > div > div.wp-block-image > figure{ } #about > div.top > div.inner > div > div > div.wp-block-image > figure > img{ margin: 0 auto; max-width: 100%; height: auto; } #about > div.center{ padding: 4em 2em; } #about > div.center > div.inner{ } #about > div.center > div.inner > header{ } #about > div.center > div.inner > header > div{ } #about > div.center > div.inner > header > div > div{ } #about > div.center > div.inner > header > div > div > h2{ display: none; } #about > div.center > div.inner > header > div > div > h3{ margin-bottom: 1.34em; color: #fff; font-size: 1.5em; text-align: center; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #about > div.center > div.inner > header > div > div > h3 > strong{ font-weight: 600; } #about > div.center > div.inner > header > div > div > p{ margin-bottom: 2em; color: #fff; text-align: center; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #about > div.center > div.inner > header > div > div > p:first-of-type{ -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; cursor: default; } #about > div.center > div.inner > header > div > div > p > strong{ display: inline-block; font-size: 1.5em; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #about > div.center > div.inner > ul{ margin-bottom: 2em; } #about > div.center > div.inner > ul > li{ } #about > div.center > div.inner > ul > li > a{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2em; color: #fff; cursor: pointer; } #about > div.center > div.inner > ul > li > a:hover{ color: #000; background-color: #fff; } #about > div.center > div.inner > ul > li > a > span.top{ order: 2; flex-grow: 1; flex-shrink: 1; background-size: cover; border-radius: 4em; } #about > div.center > div.inner > ul > li > a > span > span.top{ font-weight: 600; margin-bottom: 1em; } #about > div.center > div.inner > ul > li > a > span > span.center{ margin-bottom: 1em; } #about > div.center > div.inner > ul > li > a > span > span.center > span.top{ display: inline-block; } #about > div.center > div.inner > ul > li > a > span > span.center > span.bottom{ display: inline-block; font-weight: 600; } #about > div.center > div.inner > ul > li > a > span > span{ text-align: center; line-height: 1.25; } #about > div.center > div.inner > ul > li > a > span.bottom{ order: 1; flex-grow: 0; flex-shrink: 0; margin-bottom: 2em; width: 4em; height: 4em; background-size: cover; border-radius: 4em; } #about > div.center > div.inner > p{ } #about > div.center > div.inner > p > a{ padding: 1em 2em; text-align: center; color: #fff; background-color: #0097c7; box-shadow: 0 0.125em 1em -0.5em #000; cursor: pointer; } #about > div.center > div.inner > p > a:hover{ background-color: #00c9ff; } #about > div.bottom{ padding: 4em 2em; background-color: #f3f1eb; } #about > div.bottom > div.inner{ } #about > div.bottom > div.inner > div{ display: flex; flex-direction: column; } #about > div.bottom > div.inner > div > div{ } #about > div.bottom > div.inner > div > div:first-of-type{ order: 2; } #about > div.bottom > div.inner > div > div:last-of-type{ order: 1; } #about > div.bottom > div.inner > div > div > h2{ display: none; } #about > div.bottom > div.inner > div > div > h3{ display: none; } #about > div.bottom > div.inner > div > div > p{ margin-bottom: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #about > div.bottom > div.inner > div > div > p > strong{ font-size: 1.5em; font-weight: 600; text-align: center; } #about > div.bottom > div.inner > div > div > ul{ } #about > div.bottom > div.inner > div > div > ul > li{ margin-bottom: 0.25em; } #about > div.bottom > div.inner > div > div > ul > li:last-of-type{ margin-bottom: 0; } #about > div.bottom > div.inner > div > div > ul > li > a{ padding: 1em 2em; color: #fff; text-align: center; background-color: #0097c7; box-shadow: 0 0.125em 1em -0.5em #000; cursor: pointer; } #about > div.bottom > div.inner > div > div > ul > li > a:hover{ background-color: #00c9ff; } #about > div.bottom > div.inner > div > div > figure{ margin-bottom: 2em; } #about > div.bottom > div.inner > div > div > figure > img{ width: 100%; height: auto; } #about > div.bottom > div.inner > div > div > div{ } #about > div.bottom > div.inner > div > div > div > figure{ margin-bottom: 2em; } #about > div.bottom > div.inner > div > div > div > figure > img{ width: 100%; height: auto; } /* Roadmap */ body.roadmap #body{ } #roadmap{ } #roadmap > header{ padding: 2em; } #roadmap > header > h2{ text-align: center; } #roadmap > header > h2 > span{ display: inline-block; color: #fff; font-size: 1.5em; text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #roadmap > header > div.inner{ margin-top: 1em; } #roadmap > header > div.inner > div{ } #roadmap > header > div.inner > div > div{ } #roadmap > header > div.inner > div > div > p{ color: #fff; text-align: center; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #roadmap > div.top{ padding: 4em 2em; background-color: #f3f1eb; } #roadmap > div.top > div.inner{ } #roadmap > div.top > div.inner > div{ display: flex; flex-direction: column; } #roadmap > div.top > div.inner > div > div{ } #roadmap > div.top > div.inner > div > div:first-of-type{ order: 1; } #roadmap > div.top > div.inner > div > div:last-of-type{ order: 2; } #roadmap > div.top > div.inner > div > div > h2{ display: none; } #roadmap > div.top > div.inner > div > div > p{ margin-bottom: 2em; line-height: 1.25; text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #roadmap > div.top > div.inner > div > div > p > strong{ font-size: 1.5em; font-weight: 600; } #roadmap > div.top > div.inner > div > div > ul{ } #roadmap > div.top > div.inner > div > div > ul > li{ margin-bottom: 0.25em; } #roadmap > div.top > div.inner > div > div > ul > li:last-of-type{ margin-bottom: 0; } #roadmap > div.top > div.inner > div > div > ul > li > a{ padding: 1em 2em; color: #fff; text-align: center; background-color: #0097c7; box-shadow: 0 0.125em 1em -0.5em #000; cursor: pointer; } #roadmap > div.top > div.inner > div > div > ul > li > a:hover{ background-color: #00c9ff; } #roadmap > div.top > div.inner > div > div > figure{ } #roadmap > div.top > div.inner > div > div > figure > img{ width: 100%; height: auto; } #roadmap > div.center{ padding: 4em 2em; } #roadmap > div.center > div.inner{ } #roadmap > div.center > div.inner > header{ display: none; } #roadmap > div.center > div.inner > ul{ } #roadmap > div.center > div.inner > ul > li{ position: relative; padding-bottom: 2em; padding-left: 3em; } #roadmap > div.center > div.inner > ul > li:last-of-type{ padding-bottom: 0; } #roadmap > div.center > div.inner > ul > li:before{ content: " "; position: absolute; top: 0; bottom: 0; left: 0.9375em; width: 0.125em; height: 100%; background-color: #fff; } #roadmap > div.center > div.inner > ul > li:last-of-type:before{ display: none; } #roadmap > div.center > div.inner > ul > li:after{ content: " "; position: absolute; top: 0; left: 0; width: 2em; height: 2em; background-color: #fff; border-radius: 2em; } #roadmap > div.center > div.inner > ul > li > span.top{ } #roadmap > div.center > div.inner > ul > li > span.top > span.top{ color: #fff; font-size: 1.5em; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #roadmap > div.center > div.inner > ul > li > span.top > span.center{ margin-top: 0.25em; margin-bottom: 1em; } #roadmap > div.center > div.inner > ul > li > span.top > span.center > span.top{ display: inline-block; color: #fff; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #roadmap > div.center > div.inner > ul > li > span.top > span.center > span.bottom{ display: inline-block; color: #fff; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #roadmap > div.center > div.inner > ul > li > span.top > span.bottom{ width: 100%; height: 10em; background-size: cover; } #roadmap > div.center > div.inner > ul > li > span.center{ margin-top: 1em; } #roadmap > div.center > div.inner > ul > li > span.center > span{ color: #fff; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #roadmap > div.center > div.inner > ul > li > span.bottom{ margin-top: 1em; } #roadmap > div.center > div.inner > ul > li > span.bottom > a{ margin-top: 0.25em; padding-top: 1em; padding-right: 2em; padding-bottom: 1em; padding-left: 2em; color: #0097c7; text-align: center; border: 0.125em solid #0097c7; cursor: pointer; } #roadmap > div.center > div.inner > ul > li > span.bottom > a:first-of-type{ margin-top: 0; } #roadmap > div.center > div.inner > ul > li > span.bottom > a:hover{ color: #fff; background-color: #00c9ff; border-color: #00c9ff; } #roadmap > div.center > div.inner > ul > li > span.bottom > a.top{ } #roadmap > div.center > div.inner > ul > li > span.bottom > a.center{ } #roadmap > div.center > div.inner > ul > li > span.bottom > a.bottom{ } #roadmap > div.bottom{ padding: 4em 2em; background-color: #f3f1eb; } #roadmap > div.bottom:nth-child(odd){ background-color: transparent; } #roadmap > div.bottom > div.inner{ } #roadmap > div.bottom > div.inner > div{ display: flex; flex-direction: column; } #roadmap > div.bottom > div.inner > div > div{ } #roadmap > div.bottom > div.inner > div > div:first-of-type{ order: 2; } #roadmap > div.bottom > div.inner > div > div:last-of-type{ order: 1; } #roadmap > div.bottom > div.inner > div > div > h2{ display: none; } #roadmap > div.bottom > div.inner > div > div > p{ margin-bottom: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #roadmap > div.bottom > div.inner > div > div > p > strong{ font-size: 1.5em; font-weight: 600; text-align: center; } #roadmap > div.bottom > div.inner > div > div > ul{ } #roadmap > div.bottom > div.inner > div > div > ul > li{ margin-bottom: 0.25em; } #roadmap > div.bottom > div.inner > div > div > ul > li:last-of-type{ margin-bottom: 0; } #roadmap > div.bottom > div.inner > div > div > ul > li > a{ padding: 1em 2em; color: #fff; text-align: center; background-color: #0097c7; box-shadow: 0 0.125em 1em -0.5em #000; cursor: pointer; } #roadmap > div.bottom > div.inner > div > div > ul > li > a:hover{ background-color: #00c9ff; } #roadmap > div.bottom > div.inner > div > div > figure{ margin-bottom: 2em; } #roadmap > div.bottom > div.inner > div > div > figure > img{ width: 100%; height: auto; } /* Post */ body.post #body{ } #post{ position: relative; overflow: hidden; padding: 2em; background-size: 100% auto; } #post > div.top{ height: 2.5em; } #post > div.top > div{ position: absolute; top: 0; right: 0; left: 0; z-index: 1; width: 100%; height: 13.5em; background-size: cover; } #post > article{ z-index: 2; position: relative; } #post > article > div.top{ display: flex; flex-direction: column; background-color: #fff; box-shadow: 0 0.125em 1em -0.5em #000; } #post > article > div.top > header{ order: 2; padding-top: 2em; padding-right: 2em; padding-left: 2em; } #post > article > div.top > header > h2{ } #post > article > div.top > header > h2 > span{ display: inline-block; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #post > article > div.top > header > p{ margin-top: 0.5em; } #post > article > div.top > header > p > span{ display: inline-block; font-size: 0.75em; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #post > article > div.top > header > p > span:before{ content: "\f017"; margin-right: 0.5em; display: inline-block; color: #222; font-family: "Font Awesome 5 Free"; font-weight: bold; text-indent: 0; } #post > article > div.top > div.top{ position: relative; order: 1; background-size: cover; background-color: #000; } #post > article > div.top > div.top > iframe{ z-index: 8; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } #post > article > div.top > div.top > img{ width: 100%; height: auto; } #post > article > div.top > div.bottom{ order: 3; } #post > article > div.top > div.bottom > div{ } #post > article > div.top > div.bottom > div > div{ overflow: hidden; padding-right: 2em; padding-bottom: 2em; padding-left: 2em; } #post > article > div.top > div.bottom > div > div > p{ margin-top: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #post > article > div.top > div.bottom > div > div > p > a{ display: inline; color: #00c9ff; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #post > article > div.top > div.bottom > aside.right{ } #post > article > div.top > div.bottom > aside.right > div{ padding-right: 1em; padding-bottom: 1em; padding-left: 1em; } #post > article > div.top > div.bottom > aside.right > div > p{ margin-bottom: 1em; display: flex; flex-direction: row; align-items: center; } #post > article > div.top > div.bottom > aside.right > div > p > span{ flex-grow: 0; flex-shrink: 1; margin-right: 0.5em; font-weight: 600; } #post > article > div.top > div.bottom > aside.right > div > p > span > span{ display: none; } #post > article > div.top > div.bottom > aside.right > div > p:after{ content: " "; flex-grow: 1; flex-shrink: 1; display: block; height: 0.125em; background-color: #111; } #post > article > div.top > div.bottom > aside.right > div > ul{ margin-bottom: 2em; } #post > article > div.top > div.bottom > aside.right > div > ul.first{ } #post > article > div.top > div.bottom > aside.right > div > ul.first > li{ margin-bottom: 1em; } #post > article > div.top > div.bottom > aside.right > div > ul.first > li > a{ position: relative; background-color: #faf7ef; box-shadow: 0 0.125em 1em -0.5em #000; cursor: pointer; } #post > article > div.top > div.bottom > aside.right > div > ul.first > li > a:hover{ color: #00c9ff; background-color: #000; border-color: #00c9ff; } #post > article > div.top > div.bottom > aside.right > div > ul.first > li > a > span{ position: absolute; top: 0; bottom: 0; left: 0; width: 4em; height: 100%; background-size: cover; } #post > article > div.top > div.bottom > aside.right > div > ul.first > li > a > p{ position: relative; overflow: hidden; padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 5em; font-weight: 600; text-overflow: ellipsis; } #post > article > div.top > div.bottom > aside.right > div > ul.second{ } #post > article > div.top > div.bottom > aside.right > div > ul.second > li{ margin-bottom: 1em; } #post > article > div.top > div.bottom > aside.right > div > ul.second > li > a{ padding: 1em; font-weight: 600; cursor: pointer; background-color: #faf7ef; border-left: 0.125em solid #0097c7; box-shadow: 0 0.125em 1em -0.5em #000; } #post > article > div.top > div.bottom > aside.right > div > ul.second > li > a:hover{ color: #fff; background-color: #000; } #post > article > div.top > div.bottom > aside.right > div > ul:last-of-type{ margin-bottom: -1em; } #post > article > nav{ } #post > article > nav > h2{ display: none; } #post > article > nav > ul{ overflow: hidden; margin-top: 2em; } #post > article > nav > ul > li{ margin-bottom: 0.25em; } #post > article > nav > ul > li:last-of-type{ margin-bottom: 0; } #post > article > nav > ul > li > a{ position: relative; overflow: hidden; padding: 1em; color: #fff; background-color: #0097c7; cursor: pointer; } #post > article > nav > ul > li > a:hover{ background-color: #00c9ff; } #post > article > nav > ul > li.top{ } #post > article > nav > ul > li.top > a{ } #post > article > nav > ul > li.top > a:before{ content: "\f104"; float: left; display: block; margin-right: 0.25em; color: inherit; font-family: "Font Awesome 5 Free"; font-weight: bold; text-align: center; } #post > article > nav > ul > li.top > a > span{ float: left; } /* Games */ body.games #body{ } #games{ /* padding: 4em 2em; */ } #games > header{ display: none; } #games > header > h2{ } #games > header > h2 > span{ } #games > header > div{ } #games > header > div > p{ } #games > article{ background-size: cover; background-attachment: fixed; } #games > article:nth-child(odd){ background-image: url("alpha.png"); } #games > article > div{ padding: 4em 2em; background-size: cover; } #games > article > div > div{ } #games > article > div > div > div.top{ margin-bottom: 2em; } #games > article > div > div > div.top> h3{ text-align: center; } #games > article > div > div > div.top > h3 > a{ display: inline-block; padding-top: 0.5em; padding-bottom: 0.5em; font-size: 2em; color: #fff; font-weight: 600; cursor: pointer; } #games > article > div > div > div.top > h3 > a.top{ overflow: hidden; display: block; margin: 0 auto; padding: 0; width: 100%; height: 7.5em; color: transparent; font-size: 1em; text-indent: -999999em; } #games > article > div > div > div.top> p{ display: none; } #games > article > div > div > div.center{ } #games > article > div > div > div.center > div.left{ display: none; margin-bottom: 2em; } #games > article > div > div > div.center > div.left > img{ margin: 0 auto; width: 50%; height: auto; } #games > article > div > div > div.center > div.center{ } #games > article > div > div > div.center > div.center > div{ } #games > article > div > div > div.center > div.center > div > p{ color: #fff; font-size: 1em; text-align: justify; text-shadow: 0 0.125em 0.5em #000; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #games > article > div > div > div.center > div.right{ position: relative; margin-top: 2em; background-color: #000; } #games > article > div > div > div.center > div.right > iframe{ z-index: 5; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0.25em 1em -0.5em #000; } #games > article > div > div > div.center > div.right > img{ width: 100%; height: auto; } #games > article > div > div > div.bottom{ margin-top: 2em; } #games > article > div > div > div.bottom > nav{ } #games > article > div > div > div.bottom > nav > h4{ display: none; } #games > article > div > div > div.bottom > nav > ul{ margin-top: -0.25em; } #games > article > div > div > div.bottom > nav > ul > li{ margin-top: 0.25em; } #games > article > div > div > div.bottom > nav > ul > li > a{ position: relative; padding-top: 1em; padding-right: 3em; padding-bottom: 1em; padding-left: 2em; color: #fff; background-color: #0097c7; box-shadow: 0 0.25em 1em -0.5em #000; cursor: pointer; } #games > article > div > div > div.bottom > nav > ul > li > a:hover{ background-color: #00c9ff; } #games > article > div > div > div.bottom > nav > ul > li > a:before{ content: "\f105"; z-index: 45; position: absolute; top: 50%; right: 1em; margin-top: -0.5em; display: block; height: 1em; color: #fff; font-family: "Font Awesome 5 Free"; font-weight: 600; text-indent: 0; text-align: center; } /* Game */ body.game #body{ } #game{ background-color: #f3f1eb; /* padding: 4em 2em; */ } #game > header{ padding: 2em; background-color: #111; background-image: url("background.jpg"); background-size: cover; /* background-attachment: fixed; */ } #game > header.top{ margin-bottom: -3em; padding-bottom: 6em; } #game > header > div{ } #game > header > div > h2{ color: #fff; font-size: 2em; text-align: center; text-shadow: 0 0.125em 0.5em #000; } #game > header > div > h2 > span{ margin: 0 auto; width: 100%; height: 7.5em; font-size: 0.5em; text-indent: -999999em; } #game > header > div > div{ padding: 2em; } #game > header > div > div > h2{ color: #fff; font-size: 2em; text-align: center; } #game > header > div > div > h2 > span{ margin: 0 auto; width: 100%; height: 7.5em; font-size: 0.5em; text-indent: -999999em; } #game > header > div > p{ margin-top: 1em; display: flex; justify-content: center; } #game > header > div > p > span{ flex-grow: 0; flex-shrink: 1; justify-content: center; padding: 0.5em; display: flex; flex-wrap: wrap; align-items: center; background-color: #000; box-shadow: 0 0.5em 1em -0.5em; } #game > header > div > p > span.center{ flex-direction: column; } #game > header > div > p > span > span{ flex-grow: 0; flex-shrink: 1; color: #fff; } #game > header > div > p > span > span.left{ font-weight: 600; } #game > header > div > p > span > span.right{ margin-left: 0.5em; font-size: 0.5em; } #game > header > div > p > span > span.top{ margin-bottom: 0.5em; font-size: 0.5em; } #game > header > div > p > span > span.bottom{ font-weight: 600; } #game > div{ padding: 4em 2em; } #game > div > div{ } #game > div > div > div.top{ } #game > div > div > div.top > div.top{ position: relative; margin-bottom: 2em; background-color: #fff; background-size: cover; box-shadow: 0 0.125em 1em -0.5em #000; } #game > div > div > div.top > div.top > iframe{ z-index: 20; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } #game > div > div > div.top > div.top > img{ width: 100%; height: auto; } #game > div > div > div.top > div.top > img.top{ margin-top: -5em; } #game > div > div > div.top > div.center{ margin-bottom: 2em; } #game > div > div > div.top > div.center > p{ font-weight: 600; font-size: 1.5em; text-align: center; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.top > div.bottom{ margin-bottom: 2em; } #game > div > div > div.top > div.bottom > p{ display: none; } #game > div > div > div.top > div.bottom > ul{ } #game > div > div > div.top > div.bottom > ul > li{ padding-bottom: 1em; } #game > div > div > div.top > div.bottom > ul > li:last-of-type{ padding-bottom: 0; } #game > div > div > div.top > div.bottom > ul > li > a{ position: relative; padding: 1em; color: #fff; background-color: #111; box-shadow: 0 0.125em 1em -0.5em #000; cursor: pointer; } #game > div > div > div.top > div.bottom > ul > li > a:hover{ color: #000; background-color: #fff; } #game > div > div > div.top > div.bottom > ul > li > a:before{ content: "\f199"; position: absolute; top: 0.5em; bottom: 0.5em; left: 0.5em; flex-direction: column; justify-content: center; color: inherit; font-family: "Font Awesome 5 Brands"; font-size: 2em; font-weight: bold; text-indent: inherit; } #game > div > div > div.top > div.bottom > ul > li > a > span.top{ font-size: 0.75em; } #game > div > div > div.top > div.bottom > ul > li > a > span.bottom{ font-size: 1.5em; } #game > div > div > div.top > div.bottom > ul > li.first{ } #game > div > div > div.top > div.bottom > ul > li.first > a{ padding-left: 4em; } #game > div > div > div.top > div.bottom > ul > li.first > a:before{ content: "\f392"; display: flex; } #game > div > div > div.top > div.bottom > ul > li.first > a > span.top{ } #game > div > div > div.top > div.bottom > ul > li.first > a > span.bottom{ } #game > div > div > div.top > div.bottom > ul > li.second{ } #game > div > div > div.top > div.bottom > ul > li.second > a{ padding-left: 4em; } #game > div > div > div.top > div.bottom > ul > li.second > a:before{ content: "\f3bb"; display: flex; } #game > div > div > div.top > div.bottom > ul > li.second > a > span.top{ } #game > div > div > div.top > div.bottom > ul > li.second > a > span.bottom{ } #game > div > div > div.top > div.bottom > ul > li.third{ } #game > div > div > div.top > div.bottom > ul > li.third > a{ padding-left: 4em; } #game > div > div > div.top > div.bottom > ul > li.third > a:before{ content: "\f1b7"; display: flex; } #game > div > div > div.top > div.bottom > ul > li.third > a > span.top{ } #game > div > div > div.top > div.bottom > ul > li.third > a > span.bottom{ } #game > div > div > div.top > div.bottom > ul > li.fourth{ } #game > div > div > div.top > div.bottom > ul > li.fourth > a{ padding-left: 4em; } #game > div > div > div.top > div.bottom > ul > li.fourth > a:before{ content: "\f83a"; display: flex; } #game > div > div > div.top > div.bottom > ul > li.fourth > a > span.top{ } #game > div > div > div.top > div.bottom > ul > li.fourth > a > span.bottom{ } #game > div > div > div.center{ } #game > div > div > div.center > div{ } #game > div > div > div.center > div > div.left{ } #game > div > div > div.center > div > div.left > h3{ position: relative; margin-bottom: 1.34em; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; font-size: 1.5em; font-weight: 600; text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > h3:before{ content: " "; flex-grow: 1; flex-shrink: 1; margin-right: 0.34em; display: block; height: 0.0834em; background-color: #111; } #game > div > div > div.center > div > div.left > h3:after{ content: " "; flex-grow: 1; flex-shrink: 1; margin-left: 0.34em; display: block; height: 0.0834em; background-color: #111; } #game > div > div > div.center > div > div.left > h4{ margin-bottom: 2em; font-weight: 600; text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > p{ margin-bottom: 2em; display: inline-block; width: 100%; text-align: justify; line-height: 1.5; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > p.has-text-align-center{ text-align: center; } #game > div > div > div.center > div > div.left > p.has-medium-font-size{ margin-bottom: 1.34em; font-size: 1.5em; } #game > div > div > div.center > div > div.left > p.has-large-font-size{ margin-bottom: 1em; font-size: 2em; } #game > div > div > div.center > div > div.left > p.has-huge-font-size{ margin-bottom: 0.8em; font-size: 2.5em; } #game > div > div > div.center > div > div.left > p > a{ display: inline; color: #00c9ff; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #game > div > div > div.center > div > div.left > h2.has-text-align-center{ text-align: center; } #game > div > div > div.center > div > div.left > h3.has-text-align-center{ text-align: center; } #game > div > div > div.center > div > div.left > strong{ font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > p > strong{ font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > p > strong > em{ font-style: italic; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > p > strong > em > span.has-pale-pink-color{ color: #ff00ff; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > p > span{ } #game > div > div > div.center > div > div.left > p > span.has-pale-pink-color{ color: #ff00ff; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > p > span.has-pale-pink-color > strong{ font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > p > span.has-pale-pink-color > strong > em{ font-style: italic; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > p > em{ font-style: italic; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > ul{ margin-bottom: 2em; } #game > div > div > div.center > div > div.left > ul > li{ position: relative; margin-bottom: 1em; padding-left: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > ul > li:before{ content: "\f111"; position: absolute; top: 0.125em; left: 0.125em; display: block; color: #111; font-family: "Font Awesome 5 Free"; font-size: inherit; font-weight: normal; text-indent: 0; } #game > div > div > div.center > div > div.left > div.wp-block-image{ margin-bottom: 2em; } #game > div > div > div.center > div > div.left > div.wp-block-image > figure{ } #game > div > div > div.center > div > div.left > div.wp-block-image > figure > img{ max-width: 100%; height: auto; } #game > div > div > div.center > div > div.left > div.wp-block-image > figure.alingcenter{ } #game > div > div > div.center > div > div.left > div.wp-block-image > figure.aligncenter > img{ margin: 0 auto; } #game > div > div > div.center > div > div.left > div.wp-block-columns{ margin-bottom: 2em; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column{ } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > figure.wp-block-image{ margin-bottom: 2em; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > figure > img{ width: 100%; height: auto; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > ul{ margin-bottom: 2em; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > ul > li{ position: relative; margin-bottom: 1em; padding-left: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > ul > li:before{ content: "\f111"; position: absolute; top: 0.125em; left: 0.125em; display: block; color: #111; font-family: "Font Awesome 5 Free"; font-size: inherit; font-weight: normal; text-indent: 0; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > ul > li > strong{ display: inline; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > p{ margin-bottom: 2em; display: inline-block; width: 100%; text-align: justify; line-height: 1.5; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > p:last-of-type{ margin-bottom: 0; } #game > div > div > div.center > div > div.left > div.wp-block-group{ margin-bottom: 2em; } #game > div > div > div.center > div > div.left > div.wp-block-group > div{ } #game > div > div > div.center > div > div.left > div.wp-block-group > div > div.wp-block-columns{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: -0.25em; } #game > div > div > div.center > div > div.left > div.wp-block-group > div > div.wp-block-columns > div.wp-block-column{ flex-basis: 50%; flex-grow: 1; flex-shrink: 1; width: 50%; } #game > div > div > div.center > div > div.left > div.wp-block-group > div > div.wp-block-columns > div.wp-block-column > figure{ margin: 0.25em; } #game > div > div > div.center > div > div.left > div.wp-block-group > div > div.wp-block-columns > div.wp-block-column > figure > img{ width: 100%; height: auto; } #game > div > div > div.center > div > div.left > div.wp-block-group > div > div.wp-block-columns > div.wp-block-column > figure > a{ cursor: pointer; } #game > div > div > div.center > div > div.left > div.wp-block-group > div > div.wp-block-columns > div.wp-block-column > figure > a > img{ width: 100%; height: auto; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery{ margin-bottom: 2em; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.blocks-gallery-grid{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.blocks-gallery-grid > li{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.blocks-gallery-grid > li > figure{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.blocks-gallery-grid > li > figure > img{ width: 100%; height: auto; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider{ position: relative; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > .slick-arrow{ z-index: 40; position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; width: 1em; height: 100%; color: transparent; font-size: 2em; cursor: pointer; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > .slick-arrow:before{ content: "\f053"; z-index: 50; position: absolute; top: 50%; left: 0; margin-top: -0.5em; display: block; width: 1em; height: 1em; color: #fff; font-weight: bold; font-family: "Font Awesome 5 Free"; text-align: center; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > .slick-prev{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > div.slick-list{ cursor: pointer; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > div.slick-list > div.slick-track{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > div.slick-list > div.slick-track > li{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > div.slick-list > div.slick-track > li > figure{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > div.slick-list > div.slick-track > li > figure > img{ width: 100%; height: auto; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > .slick-next{ right: 0; left: auto; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > .slick-next:before{ content: "\f054"; right: 0; left: auto; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > ul.slick-dots{ position: absolute; right: 0; bottom: 0; left: 0; height: 0; text-align: center; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > ul.slick-dots > li{ position: relative; top: -1.25em; display: inline-block; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > ul.slick-dots > li > button{ overflow: hidden; margin: 0.075em; width: 1em; height: 1em; text-align: center; text-indent: -999999em; border: 0.125em solid #fff; border-radius: 2em; cursor: pointer; box-shadow: 0 0.125em 0.5em -0.25em #000; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > ul.slick-dots > li.slick-active{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > ul.slick-dots > li.slick-active > button{ background-color: #fff; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider{ position: relative } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > div.slick-list{ cursor: pointer; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > div.slick-list > div{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > div.slick-list > div > figure{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > div.slick-list > div > figure > img{ width: 100%; height: auto; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > .slick-arrow{ z-index: 40; position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; width: 1em; height: 100%; color: transparent; font-size: 2em; cursor: pointer; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > .slick-arrow:before{ content: "\f053"; z-index: 50; position: absolute; top: 50%; left: 0; margin-top: -0.5em; display: block; width: 1em; height: 1em; color: #fff; font-weight: bold; font-family: "Font Awesome 5 Free"; text-align: center; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > .slick-prev{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > div.slick-list > div.slick-track{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > div.slick-list > div.slick-track > li{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > div.slick-list > div.slick-track > li > figure{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > div.slick-list > div.slick-track > li > figure > img{ width: 100%; height: auto; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > .slick-next{ right: 0; left: auto; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > .slick-next:before{ content: "\f054"; right: 0; left: auto; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > ul.slick-dots{ position: absolute; right: 0; bottom: 0; left: 0; height: 0; text-align: center; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > ul.slick-dots > li{ position: relative; top: -1.25em; display: inline-block; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > ul.slick-dots > li > button{ overflow: hidden; margin: 0.075em; width: 1em; height: 1em; font-size: 0.75em; text-align: center; text-indent: -999999em; border: 0.125em solid #fff; border-radius: 2em; cursor: pointer; box-shadow: 0 0.125em 0.5em -0.25em #000; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > ul.slick-dots > li.slick-active{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > ul.slick-dots > li.slick-active > button{ background-color: #fff; } #game > div > div > div.center > div > div.left > :last-child, #game > div > div > div.center > div > div.left > div:last-child, #game > div > div > div.center > div > div.left > figure:last-child{ margin-bottom: 0; } #game > div > div > div.center > div > div.right{ margin-top: 2em; } #game > div > div > div.center > div > div.right > div.first{ display: none; } #game > div > div > div.center > div > div.right > div.first > p{ margin-bottom: 1em; display: flex; flex-direction: row; align-items: center; } #game > div > div > div.center > div > div.right > div.first > p > span{ flex-grow: 0; flex-shrink: 1; margin-right: 0.5em; font-weight: 600; } #game > div > div > div.center > div > div.right > div.first > p > span > span{ display: none; } #game > div > div > div.center > div > div.right > div.first > p:after{ content: " "; flex-grow: 1; flex-shrink: 1; display: block; height: 0.125em; background-color: #111; } #game > div > div > div.center > div > div.right > div.first > div{ position: relative; } #game > div > div > div.center > div > div.right > div.first > div > img{ width: 100%; height: auto; } #game > div > div > div.center > div > div.right > div.first > div > iframe{ z-index: 2; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; width: 100%; height: 100%; } #game > div > div > div.center > div > div.right > div.second{ } #game > div > div > div.center > div > div.right > div.second > p{ margin-bottom: 1em; display: flex; flex-direction: row; align-items: center; } #game > div > div > div.center > div > div.right > div.second > p > span{ flex-grow: 0; flex-shrink: 1; margin-right: 0.5em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #game > div > div > div.center > div > div.right > div.second > p > span > span{ display: none; } #game > div > div > div.center > div > div.right > div.second > p:after{ content: " "; flex-grow: 1; flex-shrink: 1; display: block; height: 0.125em; background-color: #111; } #game > div > div > div.center > div > div.right > div.second > iframe{ margin-bottom: 1em; display: block; width: 100%; height: 15.5em; background-color: #fff; box-shadow: 0 0.125em 1em -0.5em #000; } #game > div > div > div.center > div > div.right > div.second > iframe:last-of-type{ margin-bottom: 0; } #game > div > div > div.center > div > div.right > div.second > iframe.first{ height: 200px; background-color: #282e39; } #game > div > div > div.center > div > div.right > div.second > iframe.second{ height: 165px; } #game > div > div > div.center > div > div.right > div.third{ } #game > div > div > div.center > div > div.right > div.third > p{ margin-bottom: 1em; display: flex; flex-direction: row; align-items: center; } #game > div > div > div.center > div > div.right > div.third > p > span{ flex-grow: 0; flex-shrink: 1; margin-right: 0.5em; font-weight: 600; } #game > div > div > div.center > div > div.right > div.third > p > span > span{ display: none; } #game > div > div > div.center > div > div.right > div.third > p:after{ content: " "; flex-grow: 1; flex-shrink: 1; display: block; height: 0.125em; background-color: #111; } #game > div > div > div.center > div > div.right > div.third > ul{ } #game > div > div > div.center > div > div.right > div.third > ul > li{ margin-bottom: 1em; } #game > div > div > div.center > div > div.right > div.third > ul > li:last-of-type{ margin-bottom: 0; } #game > div > div > div.center > div > div.right > div.third > ul > li > a{ position: relative; padding: 1em; font-weight: 600; background-color: #fff; border-left: 0.125em solid #0097c7; box-shadow: 0 0.125em 1em -0.5em #000; cursor: pointer; } #game > div > div > div.center > div > div.right > div.third > ul > li > a:hover{ color: #00c9ff; background-color: #000; border-color: #00c9ff; } #game > div > div > div.center > div > div.right > div.fourth{ } #game > div > div > div.center > div > div.right > div.fourth > p{ margin-bottom: 1em; display: flex; flex-direction: row; align-items: center; } #game > div > div > div.center > div > div.right > div.fourth > p > span{ flex-grow: 0; flex-shrink: 1; margin-right: 0.5em; font-weight: 600; } #game > div > div > div.center > div > div.right > div.fourth > p > span > span{ display: none; } #game > div > div > div.center > div > div.right > div.fourth > p:after{ content: " "; flex-grow: 1; flex-shrink: 1; display: block; height: 0.125em; background-color: #111; } #game > div > div > div.center > div > div.right > div.fourth > ul{ } #game > div > div > div.center > div > div.right > div.fourth > ul > li{ margin-bottom: 1em; } #game > div > div > div.center > div > div.right > div.fourth > ul > li:last-of-type{ margin-bottom: 0; } #game > div > div > div.center > div > div.right > div.fourth > ul > li > a{ position: relative; padding: 1em; font-weight: 600; background-color: #fff; border-left: 0.125em solid #0097c7; box-shadow: 0 0.125em 1em -0.5em #000; cursor: pointer; } #game > div > div > div.center > div > div.right > div.fourth > ul > li > a:hover{ color: #00c9ff; background-color: #000; border-color: #00c9ff; } #game > div > div > div.center > div > div.right > div{ margin-bottom: 2em; } #game > div > div > div.center > div > div.right > div:last-of-type{ margin-bottom: 0; } #game > div > div > div.bottom{ margin-top: 2em; } #game > div > div > div.bottom > p{ display: none; } #game > div > div > div.bottom > ul{ margin-bottom: -1em; } #game > div > div > div.bottom > ul > li{ padding-bottom: 1em; } #game > div > div > div.bottom > ul > li:last-of-type{ padding-bottom: 0; } #game > div > div > div.bottom > ul > li > a{ position: relative; padding: 1em; color: #fff; background-color: #111; box-shadow: 0 0.125em 1em -0.5em #000; cursor: pointer; } #game > div > div > div.bottom > ul > li > a:hover{ color: #000; background-color: #fff; } #game > div > div > div.bottom > ul > li > a:before{ content: "\f199"; position: absolute; top: 0.5em; bottom: 0.5em; left: 0.5em; flex-direction: column; justify-content: center; color: inherit; font-family: "Font Awesome 5 Brands"; font-size: 2em; font-weight: bold; text-indent: inherit; } #game > div > div > div.bottom > ul > li > a > span.top{ font-size: 0.75em; } #game > div > div > div.bottom > ul > li > a > span.bottom{ font-size: 1.5em; } #game > div > div > div.bottom > ul > li.first{ } #game > div > div > div.bottom > ul > li.first > a{ padding-left: 4em; } #game > div > div > div.bottom > ul > li.first > a:before{ content: "\f392"; display: flex; } #game > div > div > div.bottom > ul > li.first > a > span.top{ } #game > div > div > div.bottom > ul > li.first > a > span.bottom{ } #game > div > div > div.bottom > ul > li.second{ } #game > div > div > div.bottom > ul > li.second > a{ padding-left: 4em; } #game > div > div > div.bottom > ul > li.second > a:before{ content: "\f3bb"; display: flex; } #game > div > div > div.bottom > ul > li.second > a > span.top{ } #game > div > div > div.bottom > ul > li.second > a > span.bottom{ } #game > div > div > div.bottom > ul > li.third{ } #game > div > div > div.bottom > ul > li.third > a{ padding-left: 4em; } #game > div > div > div.bottom > ul > li.third > a:before{ content: "\f1b7"; display: flex; } #game > div > div > div.bottom > ul > li.third > a > span.top{ } #game > div > div > div.bottom > ul > li.third > a > span.bottom{ } #game > div > div > div.bottom > ul > li.fourth{ } #game > div > div > div.bottom > ul > li.fourth > a{ padding-left: 4em; } #game > div > div > div.bottom > ul > li.fourth > a:before{ content: "\f83a"; display: flex; } #game > div > div > div.bottom > ul > li.fourth > a > span.top{ } #game > div > div > div.bottom > ul > li.fourth > a > span.bottom{ } /* Page */ body.page #body{ } #page{ } #page > header{ display: none; } #page > div.top{ display: none; } .block{ padding: 4em 2em; } .block:nth-child(odd){ color: #fff; } .block:nth-child(even){ background-color: #f3f1eb; } .block > div.inner{ } .content{ } .content p{ margin-bottom: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } .content p.has-text-align-center{ text-align: center; } .content p.has-small-font-size{ margin-bottom: 2.67em; font-size: 0.75em; } .content p.has-normal-font-size{ margin-bottom: 2em; font-size: 1em; } .content p.has-medium-font-size{ margin-bottom: 1.34em; font-size: 1.5em; } .content p.has-large-font-size{ margin-bottom: 1em; font-size: 2em; } .content p.has-huge-font-size{ margin-bottom: 0.8em; font-size: 2.5em; } .content a{ display: inline-block; color: #00c9ff; text-decoration: underline; cursor: pointer; } .content p a{ display: inline; } .content a.button{ margin-bottom: 0.25em; padding: 1em 2em; color: #fff; background-color: #0097c7; cursor: pointer; } .content a.button:hover{ background-color: #00c9ff; } .content h2{ max-width: 100%; margin-bottom: 1em; font-size: 2em; word-break: break-word; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } .content h2.has-text-align-center{ text-align: center; } .content h2.has-small-font-size{ margin-bottom: 2.67em; font-size: 0.75em; } .content h2.has-normal-font-size{ margin-bottom: 2em; font-size: 1em; } .content h2.has-medium-font-size{ margin-bottom: 1.34em; font-size: 1.5em; } .content h2.has-large-font-size{ margin-bottom: 1em; font-size: 2em; } .content h2.has-huge-font-size{ margin-bottom: 0.8em; font-size: 2.5em; } .content h3{ max-width: 100%; display: flex; flex-direction: row; align-items: center; margin-bottom: 1.34em; font-size: 1.5em; word-break: break-word; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } .content h3.has-text-align-center:before{ content: " "; flex-grow: 1; flex-shrink: 0; margin-right: 0.5em; display: block; height: 0.125em; background-color: #111; } .block:nth-child(odd) .content h3:before{ background-color: #fff; } .content h3 *{ max-width: 100%; flex-grow: 0; word-break: break-word; } .content h3:after{ content: " "; flex-grow: 1; flex-shrink: 0; margin-left: 0.5em; display: block; height: 0.125em; background-color: #111; } .block:nth-child(odd) .content h3:after{ background-color: #fff; } .content h3.has-text-align-center{ text-align: center; } .content h3.has-small-font-size{ margin-bottom: 2.67em; font-size: 0.75em; } .content h3.has-normal-font-size{ margin-bottom: 2em; font-size: 1em; } .content h3.has-medium-font-size{ margin-bottom: 1.34em; font-size: 1.5em; } .content h3.has-large-font-size{ margin-bottom: 1em; font-size: 2em; } .content h3.has-huge-font-size{ margin-bottom: 0.8em; font-size: 2.5em; } .content strong{ display: inline; font-weight: 600; } .content div.wp-block-columns{ margin-bottom: 2em; max-width: 100%; } .content blockquote{ position: relative; padding-right: 3em; padding-left: 3em; } .content blockquote:before{ content: "\f10d"; position: absolute; top: 0; left: 0; display: block; font-family: "Font Awesome 5 Free"; font-size: 2em; font-weight: 600; text-align: center; } .content blockquote p{ position: relative; min-height: 2.5em; } .content blockquote p:after{ content: "\f10e"; position: absolute; right: -1.5em; bottom: 0; display: block; font-family: "Font Awesome 5 Free"; font-size: 2em; font-weight: 600; text-align: center; } .content blockquote cite{ margin-right: -3em; text-align: right; line-height: 1.5; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } .content blockquote cite a{ } .content div.wp-block-column{ margin-bottom: 2em; } .content div.wp-block-image{ margin-bottom: 2em; } .content figure{ margin-right: auto; margin-bottom: 2em; margin-left: auto; width: 100%; } .content figure.size-thumbnail{ width: 25%; } .content figure.size-medium{ width: 50%; } .content figure.size-large{ width: 75%; } .content figure.aligncenter{ margin-right: auto; margin-left: auto; text-align: center; } .content figure.alignright{ margin-left: auto; } .content figure.alignleft{ margin-right: auto; } .content figure.wp-block-gallery{ } .content ul.blocks-gallery-grid{ margin-left: 0; padding-left: 0; } .content ul.blocks-gallery-grid > li.blocks-gallery-item{ list-style: none; -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; cursor: default; } .content img{ width: 100%; height: auto; } .content div.wp-block-image.is-style-rounded img{ border-radius: 20em; } .content figcaption{ margin-top: 1em; font-weight: 600; text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } .content ul{ padding-left: 1em; margin-bottom: 2em; margin-left: 1em; } .content ul li{ margin-bottom: 1em; display: list-item; list-style-position: outside; list-style-type: disc; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } .content ul.buttons{ margin-left: 0; padding-left: 0; } .content ul.center{ text-align: center; } .content ul.buttons li{ display: block; margin-bottom: 0.25em; -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; cursor: default; } .content ul.buttons li a{ padding: 1em 2em; width: 100%; color: #fff; text-align: center; background-color: #0097c7; box-shadow: 0 0.125em 1em -0.5em #000; text-decoration: none; cursor: pointer; } .content ul.buttons li a:hover{ background-color: #00c9ff; } .content iframe{ width: 100%; height: 10em; height: 50vw; } .content iframe.youtube{ width: 100%; height: 10em; height: 32vw; } .content form#send{ } .content form#send > p{ margin-bottom: 2em; padding: 1em; color: #fff; text-align: center; box-shadow: 0 0.125em 1em -0.5em #000; } .content form#send > p#success{ background-color: #3fc700; } .content form#send > p#fail{ background-color: #c70000; } .content form#send > label{ margin-bottom: 0.5em; font-weight: 600; } .content form#send > input[type=text]{ margin-bottom: 1em; padding: 1em; width: 100%; color: #222; background-color: #fff; box-shadow: 0 0.125em 1em -0.5em #000; cursor: text; } .content form#send > textarea{ margin-bottom: 2em; padding: 1em; width: 100%; min-height: 7.5em; color: #222; background-color: #fff; box-shadow: 0 0.125em 1em -0.5em #000; resize: vertical; cursor: text; } .content form#send > input[type=submit]{ padding: 1em 2em; width: 100%; color: #fff; background-color: #0097c7; cursor: pointer; } .content form#send > input[type=submit]:hover{ background-color: #00c9ff; } .content form#send > div#phone{ position: fixed; top: -999999em; left: -999999em; overflow: hidden; width: 0; height: 0; } .content form#send > div#phone > input[type=text]{ -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; cursor: default; } .content ul#join{ padding-left: 0; margin-left: 0; text-align: center; } .content ul#join > li{ display: inline-block; margin-right: 0; list-style: none; } .content ul#join > li > a{ } .content ul#join > li > a:hover{ } .content ul#jams{ padding-left: 0; margin-bottom: -1em; margin-left: 0; } .content ul#jams > li{ margin-bottom: 1em; list-style: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } .content ul#jams > li > a{ margin: 0; padding: 2em; color: #222; text-decoration: none; background-color: #fff; box-shadow: 0 0.125em 2em -1em #000; } .content ul#jams > li > a:hover{ color: #fff; background-color: #00c9ff; } .content ul#jams > li > a > span.top{ background-size: contain; } .content ul#jams > li > a > span.top > img{ width: 100%; height: auto; } .content ul#jams > li > a > span.bottom{ margin-top: 1em; font-weight: 600; text-align: center; } .content ul#rewards{ padding-left: 0; margin-bottom: -1em; margin-left: 0; } .content ul#rewards > li{ margin-bottom: 1em; list-style: none; -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; cursor: default; } .content ul#rewards > li > a{ position: relative; padding: 0; display: flex; flex-direction: column; justify-content: center; min-height: 4em; color: #222; text-decoration: none; background-color: #fff; box-shadow: 0 0.125em 2em -1em #000; } .content ul#rewards > li > a:hover{ background-color: #00c9ff; } .content ul#rewards > li > a > span.top{ position: absolute; top: 0; bottom: 0; left: 1em; width: 3em; height: 100%; background-size: contain; } .content ul#rewards > li > a > span.center{ flex-grow: 0; flex-shrink: 1; padding-bottom: 0.25em; padding-right: 1em; padding-left: 5em; margin-top: 1em; font-weight: 600; text-align: left; } .content ul#rewards > li > a > span.bottom{ flex-grow: 0; flex-shrink: 1; padding-right: 1em; padding-left: 5em; margin-bottom: 1em; text-align: left; } .content ul#rules{ padding-left: 0; margin-bottom: -1em; margin-left: 0; } .content ul#rules > li{ margin-bottom: 1em; list-style: none; } .content ul#rules > li > span.top{ margin-bottom: 0.25em; font-weight: 600; } .content ul#rules > li > span.bottom{ line-height: 1.5; } .content ul#sponsors{ padding-left: 0; margin-bottom: -1em; margin-left: 0; } .content ul#sponsors > li{ margin-bottom: 1em; list-style: none; -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; cursor: default; } .content ul#sponsors > li > a{ display: flex; flex-direction: row; align-items: center; padding: 0; color: inherit; text-decoration: none; background: none; box-shadow: none; } .content ul#sponsors > li > a:hover{ color: #fff; background-color: #00c9ff; } .content ul#sponsors > li > a > span.top{ flex-grow: 0; flex-shrink: 0; margin-right: 1em; width: 5em; height: 5em; background-color: #fff; background-size: 4em auto; box-shadow: 0 0.125em 2em -1em #000; } .content ul#sponsors > li > a > span.bottom{ flex-grow: 1; flex-shrink: 1; margin-right: 1em; font-weight: 600; text-align: left; word-break: break-word; } .content ul#submissions{ margin-left: 0; padding-left: 0; } .content ul#submissions > li{ margin-bottom: 2em; list-style: none; box-shadow: 0 0.125em 2em -1em #000; -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; cursor: default; } .content ul#submissions > li > span{ padding: 2em; color: #222; background-color: #fff; } .content ul#submissions > li > span > span.top{ } .content ul#submissions > li > span > span.top > span.top{ } .content ul#submissions > li > span > span.top > span.top > span.top{ font-weight: 600; text-align: center; } .content ul#submissions > li > span > span.top > span.top > span.bottom{ margin-top: 0.5em; margin-bottom: 1em; text-align: center; } .content ul#submissions > li > span > span.top > span.top > span.bottom > span{ display: inline; font-weight: 600; } .content ul#submissions > li > span > span.top > span.top > span.bottom > a{ display: inline; padding: 0; color: #0097c7; text-decoration: underline; background-color: transparent; box-shadow: none; cursor: pointer; } .content ul#submissions > li > span > span.top > span.center{ padding: 0.5em; color: #fff; text-align: center; background-color: #000; } .content ul#submissions > li > span > span.top > span.bottom{ margin-top: 1em; margin-bottom: 1em; width: 100%; height: 5em; background-size: cover; } .content ul#submissions > li > span > span.center{ } .content ul#submissions > li > span > span.center > span.top{ margin-bottom: 2em; font-style: italic; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } .content ul#submissions > li > span > span.center > span.bottom{ margin-bottom: 2em; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } .content ul#submissions > li > span > span.center > span.bottom > span{ overflow: hidden; padding-bottom: 1em; margin-bottom: -1em; } .content ul#submissions > li > span > span.center > span.bottom > span > span.left{ float: left; margin-right: 0.5em; font-weight: 600; text-transform: capitalize; } .content ul#submissions > li > span > span.center > span.bottom > span > span.right{ float: right; } .content ul#submissions > li > span > span.bottom{ } .content ul#submissions > li > span > span.bottom > a{ padding: 1em 2em; width: 100%; color: #fff; background-color: #0097c7; text-align: center; text-decoration: none; cursor: pointer; } .content ul#submissions > li > span > span.bottom > a:hover{ background-color: #00c9ff; } .content ul#submissions > li:last-of-type{ margin-bottom: 0; } .content ul#submissions > li.active{ } .content ul#submissions > li.active > span{ position: relative; overflow: hidden; } .content ul#submissions > li.active > span:before{ } .content ul#submissions > li.active > span > span.center{ } .content ul#submissions > li.active > span > span.center > span.bottom{ } .content ul#submissions > li.active > span > span.center > span.bottom:before{ content: "\f559"; position: absolute; top: 0.25em; right: 0.25em; display: block; font-family: "Font Awesome 5 Free"; font-size: 2em; font-weight: 600; text-align: center; } .content ul#submissions > li.active > span > span.center > span.bottom:after{ content: "Winner!"; position: absolute; top: 1em; left: -2em; padding: 0.25em; width: 7.5em; display: block; color: #fff; font-size: 1em; font-weight: 600; text-align: center; background-color: #222; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .content h2:last-child, .content h3:last-child, .content p:last-child, .content div.wp-block-image:last-child, .content div.wp-block-columns:last-child, .content div.wp-block-column:last-child, .content figure:last-child, .content div.wp-block-image:last-child, .content ul:last-child, .content ul.buttons li:last-child, .content ul#rewards > li:last-child, .content ul#sponsors > li:last-child, .content li:last-child{ margin-bottom: 0; } /* ========== Footer ========== */ /* Default */ #reach{ padding: 2em; background-color: #000; } #reach > div{ position: relative; } #reach > div > h2{ display: none; } #reach > div > p{ margin-bottom: 2em; color: #fff; text-align: center; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #reach > div > ul{ margin-top: -0.25em; } #reach > div > ul > li{ margin-top: 0.25em; } #reach > div > ul > li > a{ padding: 1em 2em; color: #fff; background-color: #0097c7; cursor: pointer; } #reach > div > ul > li > a:hover{ background-color: #00c9ff; } #bragboard{ padding: 2em; background-color: #111; } #bragboard > div{ position: relative; } #bragboard > div > h2{ display: none; } #bragboard > div > ul{ text-align: center; } #bragboard > div > ul > li{ display: inline-block; } #bragboard > div > ul > li > a{ padding: 1em; cursor: pointer; } #bragboard > div > ul > li > a > span{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("bragboard.png"); width: 10em; height: 2.5em; font-size: 0.5em; background-size: 100% auto; } #boingboing{ } #boingboing > a{ } #boingboing > a > span{ background-position: center -50em; } #boingboing > a:hover > span{ background-position: center -55em; } #indiegames{ } #indiegames > a{ } #indiegames > a > span{ background-position: center -40em; } #indiegames > a:hover > span{ background-position: center -45em; } #kotaku{ } #kotaku > a{ } #kotaku > a > span{ background-position: center -30em; } #kotaku > a:hover > span{ background-position: center -35em; } #pcgamer{ } #pcgamer > a{ } #pcgamer > a > span{ background-position: center -20em; } #pcgamer > a:hover > span{ background-position: center -25em; } #rockpapershotgun{ } #rockpapershotgun > a{ } #rockpapershotgun > a > span{ background-position: center -10em; } #rockpapershotgun > a:hover > span{ background-position: center -15em; } #vice{ } #vice > a{ } #vice > a > span{ background-position: center 0; } #vice > a:hover > span{ background-position: center -5em; } #footer{ background-color: #000; } #footer > div{ position: relative; display: flex; flex-direction: column; } #footer > div > div{ order: 2; } #footer > div > div > h2{ display: none; } #footer > div > div > p{ padding: 2.67em; color: #fff; font-size: 0.75em; text-align: center; line-height: 1.25; } #footer > div > div > p > a{ position: relative; margin: -0.25em; padding: 0.25em; display: inline; color: #00c9ff; text-decoration: underline; cursor: pointer; } #footer > div > nav{ order: 1; padding-top: 2em; padding-right: 2em; padding-left: 2em; } #footer > div > nav > h2{ display: none; } #footer > div > nav > ul{ text-align: center; } #footer > div > nav > ul > li{ } #footer > div > nav > ul > li > a{ } #footer > div > nav > ul > li > a{ overflow: hidden; width: 1em; height: 1em; color: transparent; text-align: center; } #footer > div > nav > ul > li.first{ } #footer > div > nav > ul > li.first > a{ overflow: hidden; margin: 0 auto; width: 5em; height: 5em; color: transparent; text-indent: -999999em; background-image: url("symbol.png"); cursor: pointer; } #footer > div > nav > ul > li.second{ display: inline-block; margin-top: 2em; } #footer > div > nav > ul > li.second > a{ overflow: hidden; width: 1em; height: 1em; color: transparent; text-align: center; font-size: 2em; text-indent: -999999em; cursor: pointer; } #footer > div > nav > ul > li.second > a:before{ content: "\f082"; display: block; color: #fff; font-family: "Font Awesome 5 Brands"; font-size: inherit; text-indent: 0; } #footer > div > nav > ul > li.third{ display: inline-block; margin-top: 2em; } #footer > div > nav > ul > li.third > a{ overflow: hidden; width: 1em; height: 1em; color: transparent; text-align: center; font-size: 2em; text-indent: -999999em; cursor: pointer; } #footer > div > nav > ul > li.third > a:before{ content: "\f081"; display: block; color: #fff; font-family: "Font Awesome 5 Brands"; font-size: inherit; text-indent: 0; } #footer > div > nav > ul > li.fourth{ display: inline-block; margin-top: 2em; } #footer > div > nav > ul > li.fourth > a{ overflow: hidden; width: 1em; height: 1em; color: transparent; text-align: center; font-size: 2em; text-indent: -999999em; cursor: pointer; } #footer > div > nav > ul > li.fourth > a:before{ content: "\f1b7"; display: block; color: #fff; font-family: "Font Awesome 5 Brands"; font-size: inherit; text-indent: 0; } #footer > div > nav > ul > li.fifth{ display: inline-block; margin-top: 2em; } #footer > div > nav > ul > li.fifth > a{ overflow: hidden; width: 1em; height: 1em; color: transparent; text-align: center; font-size: 2em; text-indent: -999999em; cursor: pointer; } #footer > div > nav > ul > li.fifth > a:before{ content: "\f199"; display: block; color: #fff; font-family: "Font Awesome 5 Free"; font-size: inherit; font-weight: bold; text-indent: 0; } #preloader{ display: none; } /* Full */ body.full #reach{ } body.full #bragboard{ } body.full #footer{ } /* None */ body.none #reach{ display: none; } body.none #bragboard{ display: none; } body.none #footer{ display: none; } /* Search */ body.search #reach{ } body.search #bragboard{ } body.search #footer{ display: block; font-family: serif; background-color: transparent; border-top: 0.125em solid #eee; } body.search #footer > div{ } body.search #footer > div > div{ } body.search #footer > div > div > p{ padding: 2.5em; color: #222; } body.search #footer > div > nav{ display: none; } /* Portrait */ @media (orientation: portrait) and (min-width: 200px){ html{ } body{ font-size: 5vw; } } /* Landscape */ @media (orientation: landscape) and (min-width: 200px){ html{ } /* ========== Document ========== */ body{ font-size: 1.75vw; } body.error{ display: flex; flex-direction: column; } /* ========== Header ========== */ /* Default */ #header{ } #header > div{ display: flex; } #logo{ flex-grow: 0; overflow: hidden; width: 8em; box-shadow: none; } #logo > a{ margin: 0; width: 8em; height: 4em; background-size: auto 2.25em; } #menu{ box-shadow: none; } #hamburger{ display: none; } #navigation{ position: relative; z-index: 14; display: block; float: right; } #navigation > li{ float: left; } #navigation > li.page_item_has_children{ position: relative; } #navigation > li > a{ padding: 1.5em 1em; background-color: transparent; } #navigation > li.page_item_has_children > a{ position: relative; padding-right: 3em; } #navigation > li.page_item_has_children > a:before{ position: absolute; top: 50%; right: 1em; content: "\f107"; display: block; width: 1em; height: 1em; margin-top: -0.5em; color: inherit; font-family: "Font Awesome 5 Free"; font-weight: bold; text-align: center; } #navigation > li > ul{ z-index: 40; position: absolute; top: 4em; left: 0; display: none; box-shadow: 0 0.125em 1em -0.5em #000; } #navigation > li.page_item_has_children:last-of-type > ul{ left: auto; right: 0; } #navigation > li.page_item_has_children:hover > ul{ display: block; } #navigation > li > ul > li{ } #navigation > li > ul > li > a{ padding: 1em; min-width: 10em; color: #fff; white-space: nowrap; background-color: #000; cursor: pointer; } #navigation > li > ul > li > a:hover{ color: #000; background-color: #fff; } #navigation > li > ul > li > ul{ display: none; } #social{ position: absolute; right: 0; bottom: -3em; overflow: hidden; display: block; } #social > li{ float: left; } #social > li > a{ padding: 1em; background-color: transparent; } #social > li > a:before{ width: 1em; } #breadcrumbs{ font-size: 1em; box-shadow: inset 0 0.5em 0.75em -0.5em #000, 0 0.125em 2em -1em #000; } #breadcrumbs > div{ } #breadcrumbs > div > ul{ padding-right: 21em; } /* Full */ body.full #header{ background-color: #000; } body.full #header > div{ max-width: 100%; } body.full #logo{ z-index: 500; position: absolute; top: 0; left: 0; display: block; width: 4em; } body.full #logo > a{ width: 4em; background-image: url("symbol.png"); background-size: auto 2em; } body.full #logo > a:hover{ background-color: #fff; } body.full #menu{ position: static; } body.full #menu.active{ } body.full #menu #hamburger{ z-index: 20; display: block; } body.full #menu #hamburger:before{ padding: 1.5em; } body.full #navigation{ position: absolute; top: 4em; right: 0; float: none; display: none; box-shadow: 0 0.5em 1em -0.25em #000; } body.full #menu.active #navigation{ display: block; } body.full #navigation > li{ float: none; } body.full #navigation > li > a{ min-width: 15em; background-color: #000; } body.full #navigation > li.page_item_has_children > a{ padding-right: 1.5em; } body.full #navigation > li.page_item_has_children > a:before{ display: none; } body.full #navigation > li > a:hover{ color: #111; background-color: #fff; } body.full #navigation > li > ul{ display: none; } body.full #navigation > li.page_item_has_children:hover > ul{ display: none; } body.full #social{ position: static; right: auto; bottom: auto; z-index: 18; display: flex; padding-right: 4em; padding-left: 4em; } body.full #social > li{ } body.full #social > li > a{ display: flex; align-items: center; justify-content: center; } body.full #social > li > a:before{ flex-grow: 0; margin-right: 0.25em; font-size: 2em; } body.full #social > li > a > span{ flex-grow: 0; display: none; } /* None */ body.none #header{ } body.none #header > div{ } body.none #menu{ position: absolute; top: 0; right: 0; } body.none #menu.active{ position: absolute; top: 4em; left: auto; padding-top: 0; } body.none #menu #hamburger{ top: 0; display: block; } body.none #menu.active #hamburger{ top: -4em; } body.none #menu #hamburger:before{ padding: 1.5em; } body.none #navigation{ float: none; display: none; } body.none #menu.active #navigation{ display: block; } body.none #navigation > li{ float: none; } body.none #navigation > li > a{ min-width: 15em; background-color: #000; } body.none #navigation > li.page_item_has_children > a{ padding-right: 1.5em; } body.none #navigation > li.page_item_has_children > a:before{ display: none; } body.none #navigation > li > a:hover{ color: #111; background-color: #fff; } body.none #navigation > li > ul{ display: none; } body.none #navigation > li.page_item_has_children:hover > ul{ display: none; } body.none #social{ position: relative; right: auto; bottom: auto; z-index: 18; } body.none #menu.active #social{ display: block; } body.none #social > li{ } body.none #social > li > a{ background-color: #f3f1eb; } body.none #social > li > a:hover{ color: #fff; background-color: #111; } /* Search */ body.search #header{ } body.search #header > div{ } body.search #logo{ padding-top: 5em; padding-bottom: 5em; width: 28em; } body.search #logo > a{ height: 7.5em; background-size: contain; } body.search #menu{ } body.search #menu #hamburger{ } /* ========== Main ========== */ #body{ padding-top: 3em; } body.full #body{ padding-top: 0; } body.none #body{ padding-top: 0; } /* Search */ #search{ font-family: serif; } #search > div{ } #search > div > h2{ } #search > div > p{ padding: 0.67em; } #search > div > form{ padding: 2.5em; } #search > div > form > input[type=text]{ margin: 0 auto; max-width: 40em; } #search > div > form > input[type=submit]{ max-width: 10em; } #search > div > h2.bottom{ padding-top: 2.5em; padding-right: 2.5em; padding-left: 2.5em; border-top: none; } #search > div > p.bottom{ } #search > div > ul{ padding-top: 1.25em; padding-bottom: 1.25em; } #search > div > ul > li{ overflow: hidden; } #search > div > ul > li > a{ float: left; padding: 1.25em 2.5em; } #search > div > ul > li > a > span.top{ } #search > div > ul > li > a > span.center{ } #search > div > ul > li > a > span.bottom{ } #search > div > p.bottom{ padding: 1.67em; font-size: 1.5em; font-weight: normal; } /* Error */ #error{ padding: 5em; } #error > div{ max-width: 50em; } #error > div:before{ font-size: 2em; } #error > div > p{ font-size: 2em; } #error > div > ul{ font-size: 2em; } #error > div > form{ margin-right: auto; margin-left: auto; max-width: 20em; font-size: 2em; } /* Front */ body.page #body{ } #front{ } #carousel{ } #carousel li{ } #carousel li > a{ } #carousel li > a > span{ height: 34em; } #carousel li > a > span > span.top{ top: 4em; bottom: 4em; max-width: 40em; } #carousel li > a > span > span.bottom{ right: 2em; bottom: 2em; padding-top: 1em; padding-right: 2em; padding-bottom: 1em; padding-left: 2em; font-size: 1em; } #carousel li > a > span > span.bottom:hover{ color: #00c9ff; background-color: #000; transform: rotate(-2deg) scale(1.125); } #carousel ul.slick-dots{ } #carousel ul.slick-dots > li{ top: -2em; } #carousel ul.slick-dots > li > button{ width: 1.5em; height: 1.5em; border-width: 0.25em; } #updates{ padding: 4em 2em; } #updates > div{ } #updates > div > div{ display: flex; flex-direction: row; align-items: stretch; overflow: hidden; margin: -2em; padding: 2em; } #updates > div > div > section.left{ flex-grow: 1; flex-shrink: 1; } #updates > div > div > section.left > div{ display: flex; flex-direction: row; margin: -0.5em; padding-bottom: 0; } #updates > div > div > section.left > div > article{ flex-grow: 0; flex-shrink: 0; padding-bottom: 0; flex-basis: 33%; width: 33%; } #updates > div > div > section.left > div > article > div{ margin: 0.5em; height: 15em; } #updates > div > div > section.left > div > article > div > h4{ overflow: hidden; margin-top: 12em; margin-left: 0; padding: 1em; min-height: 0; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } #updates > div > div > section.left > div > article > div > p{ } #updates > div > div > section.left > div > article > div > p:before{ width: 100%; height: 12em; } #updates > div > div > section.left > div > article > div > p > a{ } #updates > div > div > section.right{ flex-grow: 1; flex-shrink: 1; padding-left: 4em; min-width: 20em; max-width: 30%; } #updates > div > div > section.right > div{ margin-bottom: -1em; padding-bottom: 0; } #hero{ padding: 8em; } #hero > div{ } #hero > div > p{ font-size: 2em; } #hero > div > p > strong{ } #hero > div > p > strong > em{ } #hero > div > ul{ margin-top: 0; text-align: center; } #hero > div > ul > li{ display: inline-block; margin-top: 0; margin-right: 0.5em; } #hero > div > ul > li:last-child{ margin-right: 0; } #hero > div > ul > li > a{ } #newsletter{ padding: 2em; } #newsletter > div{ display: flex; flex-direction: row; align-items: center; } #newsletter > div > p{ } #newsletter > div > form{ margin-top: 0; } #astrojonetv{ padding: 8em 2em; } #astrojonetv > div{ display: flex; flex-direction: column; } #astrojonetv > div > h3{ order: 1; width: 20em; height: 7.5em; } #astrojonetv > div > p{ order: 2; margin-top: 1em; font-size: 2em; } #astrojonetv > div > div{ order: 4; margin-top: 4em; } #astrojonetv > div > ul{ order: 3; margin-top: 0; padding-top: 4em; text-align: center; } #astrojonetv > div > ul > li{ display: inline-block; margin-top: 0; margin-right: 0.25em; } #astrojonetv > div > ul > li:last-child{ margin-right: 0; } /* Latest */ body.home #body{ } #latest{ } #latest > header{ padding: 4em 2em; } #latest > header > h2{ } #latest > header > h2 > span{ font-size: 2em; } #latest > header > ul{ } #latest > header > ul > li{ display: inline-block; margin-top: 0; margin-right: 0.5em; } #latest > header > ul > li:last-child{ margin-right: 0; } #latest > div{ } #latest > div > div{ overflow: hidden; } #latest > div > div > div.left{ overflow: hidden; float: left; width: 75%; } #latest > div > div > div.left > article{ float: left; width: 50%; } #latest > div > div > div.left > article > div{ margin-right: 2em; } #latest > div > div > div.left > article > div > header{ } #latest > div > div > div.left > article > div > header > h3{ overflow: hidden; padding-right: 8em; text-overflow: ellipsis; white-space: nowrap; } #latest > div > div > div.left > article > div > div{ } #latest > div > div > div.left > article > div > div > p{ } #latest > div > div > div.left > article > div > div > p > a{ } #latest > div > div > div.left > article > div > div > p > a:before{ position: absolute; right: 2em; bottom: 1em; content: "Read more"; display: inline-block; font-weight: 600; } #latest > div > div > div.left > article > div > div > p > a > span{ } #latest > div > div > div.left > article > div > div > p > a:after{ top: auto; bottom: 1em; margin-top: 0; } #latest > div > div > div.left > nav{ float: left; width: 100%; } #latest > div > div > div.left > nav > ul{ margin-bottom: 0; } #latest > div > div > div.left > nav > ul > li.left{ } #latest > div > div > div.left > nav > ul > li.left > a{ overflow: hidden; } #latest > div > div > div.left > nav > ul > li.left > a:before{ float: left; margin-right: 0.25em; width: auto; } #latest > div > div > div.left > nav > ul > li.left > a > span{ float: left; display: block; } #latest > div > div > div.left > nav > ul > li.right{ margin-right: 2em; } #latest > div > div > div.left > nav > ul > li.right > a{ overflow: hidden; } #latest > div > div > div.left > nav > ul > li.right > a:before{ float: right; margin-left: 0.25em; width: auto; } #latest > div > div > div.left > nav > ul > li.right > a > span{ float: left; display: block; } #latest > div > div > div.right{ float: right; width: 25%; } #latest > div > div > div.right > div{ margin-left: 2em; } #categories{ } #categories > h2{ } #categories > h2 > span{ font-size: 2em; } #feeds{ } #feeds > div.first{ } #feeds > div.first > ul{ } #feeds > div.first > ul > li{ } #feeds > div.first > ul > li > a{ } #feeds > div.first > ul > li > a > p.top{ } #feeds > div.first > ul > li > a > p.top > span.bottom{ align-items: flex-start; } /* Category */ body.category #body{ } #category{ } #category > header{ padding: 4em 2em; } #category > header > h2{ } #category > header > h2 > span{ position: relative; z-index: 10; margin-right: 14em; font-size: 2em; } #category > header > div{ } #category > header > div > p{ position: relative; z-index: 10; margin-right: 28em; } #category > div{ padding-right: 2em; padding-bottom: 4em; padding-left: 2em; } #category > div > div{ } #category > div > div > div.left{ overflow: hidden; margin: -0.5em; padding: 0; } #category > div > div > div.left > article{ float: left; padding-bottom: 0; width: 25%; } #category > div > div > div.left > article > div{ margin: 0.5em; height: 15em; } #category > div > div > div.left > article > div > h3{ overflow: hidden; margin-top: 12em; margin-left: 0; padding: 1em; min-height: 0; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } #category > div > div > div.left > article > div > p{ } #category > div > div > div.left > article > div > p:before{ width: 100%; height: 12em; } #category > div > div > div.left > article > div > p > a{ } #category > div > div > div.right{ position: absolute; top: 7em; right: 0; left: 0; padding: 0; padding-right: 2em; padding-left: 2em; width: 100%; height: 0; } #category > div > div > div.right > div{ } #category > div > div > div.right > div > nav{ overflow: hidden; } #category > div > div > div.right > div > nav > ul{ overflow: hidden; float: right; } #category > div > div > div.right > div > nav > ul > li{ float: left; margin-right: 0.25em; margin-bottom: 0; } #category > div > div > div.right > div > nav > ul > li:last-of-type{ margin-right: 0; } #category > div > div > div.right > div > nav > ul > li > a{ } #category > div > div > nav{ margin-top: 2em; padding: 0; } #category > div > div > nav > ul{ } #category > div > div > nav > ul > li{ } #category > div > div > nav > ul > li > a{ } #category > div > div > nav > ul > li.left{ } #category > div > div > nav > ul > li.left > a{ overflow: hidden; } #category > div > div > nav > ul > li.left > a:before{ float: left; margin-right: 0.25em; width: auto; } #category > div > div > nav > ul > li.left > a > span{ float: left; display: block; } #category > div > div > nav > ul > li.right{ } #category > div > div > nav > ul > li.right > a{ overflow: hidden; } #category > div > div > nav > ul > li.right > a:before{ float: right; margin-left: 0.25em; width: auto; } #category > div > div > nav > ul > li.right > a > span{ float: left; display: block; } /* About */ body.about #body{ } #about{ } #about > header{ padding-top: 4em; padding-bottom: 4em; } #about > header > h2{ } #about > header > h2 > span{ width: 15em; height: 5em; } #about > header > div.inner{ margin-top: 4em; margin-right: auto; margin-left: auto; max-width: 58em; } #about > header > div.inner > div{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; } #about > header > div.inner > div > p{ flex-grow: 1; flex-shrink: 1; padding-right: 2em; font-size: 2em; text-align: left; } #about > header > div.inner > div > div{ flex-grow: 0; flex-shrink: 0; margin-top: 0; width: 25em; height: 15em; } #about > header > div.inner > nav{ display: flex; flex-direction: row; justify-content: center; align-items: center; margin-top: 8em; } #about > header > div.inner > nav > h3{ flex-grow: 0; padding-right: 2em; font-size: 1.5em; } #about > header > div.inner > nav > h3:before{ font-weight: normal; text-align: left; } #about > header > div.inner > nav > ul{ flex-grow: 0; overflow: hidden; margin-top: 0; } #about > header > div.inner > nav > ul > li{ float: left; margin-bottom: 0; margin-right: 0.25em; } #about > header > div.inner > nav > ul > li:last-of-type{ margin-right: 0; } #about > header > div.inner > nav > ul > li > a{ } #about > div{ } #about > header{ } #about > div.top{ padding: 4em; } #about > div.top > div.inner{ } #about > div.top > div.inner > div{ flex-direction: row; } #about > div.top > div.inner > div > div{ flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; justify-content: center; } #about > div.top > div.inner > div > div > p{ flex-grow: 0; flex-shrink: 0; line-height: 1.5; } #about > div.top > div.inner > div > div > p > strong{ font-size: 2em; text-align: left; } #about > div.top > div.inner > div > div > ul{ flex-grow: 0; flex-shrink: 0; } #about > div.top > div.inner > div > div > ul > li{ display: inline-block; margin-right: 0.25em; margin-bottom: 0.25em; } #about > div.top > div.inner > div > div > ul > li:last-of-type{ margin-right: 0; margin-bottom: 0; } #about > div.top > div.inner > div > div > figure{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 0; } #about > div.top > div.inner > div > div > figure > img{ flex-grow: 0; } #about > div.top > div.inner > div > div > div.wp-block-image{ display: flex; flex-direction: column; justify-content: center; align-items: center; } #about > div.top > div.inner > div > div > div.wp-block-image > figure{ flex-grow: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } #about > div.top > div.inner > div > div > div.wp-block-image > figure > img{ width: 100%; height: auto; } #about > div.top > div.inner > div > div:first-of-type{ order: 1; flex-basis: 70%; margin-right: 4em; } #about > div.top > div.inner > div > div:last-of-type{ order: 2; margin-bottom: 0; } #about > div.center{ padding: 4em; } #about > div.center > div.inner{ } #about > div.center > div.inner > header{ } #about > div.center > div.inner > header > div{ } #about > div.center > div.inner > header > div > div{ } #about > div.center > div.inner > header > div > div > h3{ margin-bottom: 1em; font-size: 2em; } #about > div.center > div.inner > header > div > div > p{ margin-bottom: 1.34em; font-size: 1.5em; line-height: 2; } #about > div.center > div.inner > header > div > div > p > strong{ font-size: 1.34em; } #about > div.center > div.inner > ul{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; margin-top: 4em; margin-bottom: 4em; } #about > div.center > div.inner > ul > li{ flex-grow: 0; flex-shrink: 1; max-width: 33%; display: flex; flex-direction: column; align-items: stretch; } #about > div.center > div.inner > ul > li > a{ justify-content: flex-start; position: relative; } #about > div.center > div.inner > ul > li > a:before{ z-index: 200; content: " "; display: none; position: absolute; top: 0; left: 50%; margin-left: -1em; width: 2em; height: 2em; background-color: #fff; border-radius: 4em; } #about > div.center > div.inner > ul > li > a > span{ } #about > div.center > div.inner > ul > li > a > span.top{ flex-grow: 0; } #about > div.center > div.inner > ul > li > a > span.top > span{ max-width: 17.5em; } #about > div.center > div.inner > ul > li > a > span.bottom{ z-index: 210; position: relative; border: 0.25em solid #fff; } #about > div.center > div.inner > ul > li > a:after{ z-index: 205; content: " "; display: block; position: absolute; top: 3.875em; right: 0; left: 0; height: 0.25em; background-color: #fff; } #about > div.center > div.inner > ul > li:first-of-type > a:after{ left: 50%; } #about > div.center > div.inner > ul > li:last-of-type > a:after{ right: 50%; } #about > div.center > div.inner > p{ text-align: center; } #about > div.center > div.inner > p > a{ display: inline-block; } #about > div.bottom{ padding: 4em; } #about > div.bottom > div.inner{ } #about > div.bottom > div.inner > div{ flex-direction: row; } #about > div.bottom > div.inner > div > div{ flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; justify-content: center; width: 50%; flex-basis: 50%; } #about > div.bottom > div.inner > div > div > p{ flex-grow: 0; flex-shrink: 0; line-height: 1.5; } #about > div.bottom > div.inner > div > div > p > strong{ font-size: 2em; text-align: left; } #about > div.bottom > div.inner > div > div > ul{ flex-grow: 0; flex-shrink: 0; } #about > div.bottom > div.inner > div > div > ul > li{ display: inline-block; margin-right: 0.25em; margin-bottom: 0.25em; } #about > div.bottom > div.inner > div > div > ul > li:last-of-type{ margin-right: 0; margin-bottom: 0; } #about > div.bottom > div.inner > div > div > figure{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; margin-bottom: 0; } #about > div.bottom > div.inner > div > div > figure > img{ flex-grow: 0; } #about > div.bottom > div.inner > div > div > div{ display: flex; justify-content: center; align-items: center; margin-bottom: 4em; } #about > div.bottom > div.inner > div > div > div > figure{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: auto; margin-bottom: 0; } #about > div.bottom > div.inner > div > div > div > figure > img{ flex-grow: 0; } #about > div.bottom > div.inner > div > div:first-of-type{ order: 1; flex-basis: 70%; margin-right: 4em; } #about > div.bottom > div.inner > div > div:last-of-type{ order: 2; } /* Roadmap */ body.roadmap #body{ } #roadmap{ } #roadmap > header{ padding: 4em 2em; } #roadmap > header > h2{ text-align: left; } #roadmap > header > h2 > span{ font-size: 2em; text-align: left; } #roadmap > header > div.inner{ } #roadmap > header > div.inner > div{ } #roadmap > header > div.inner > div > div{ } #roadmap > header > div.inner > div > div > p{ text-align: left; } #roadmap > div.top{ padding: 4em; } #roadmap > div.top > div.inner{ } #roadmap > div.top > div.inner > div{ flex-direction: row; } #roadmap > div.top > div.inner > div > div{ flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; justify-content: center; } #roadmap > div.top > div.inner > div > div > h2{ flex-grow: 0; flex-shrink: 0; margin-bottom: 1em; display: block; font-size: 2em; font-weight: 600; text-align: left; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #roadmap > div.top > div.inner > div > div > p{ flex-grow: 0; flex-shrink: 0; text-align: left; line-height: 1.5; } #roadmap > div.top > div.inner > div > div > p:last-of-type{ margin-bottom: 0; } #roadmap > div.top > div.inner > div > div > p > strong{ font-size: 2em; text-align: left; } #roadmap > div.top > div.inner > div > div > ul{ flex-grow: 0; flex-shrink: 0; } #roadmap > div.top > div.inner > div > div > ul > li{ display: inline-block; margin-right: 0.25em; margin-bottom: 0; } #roadmap > div.top > div.inner > div > div > figure{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 0; } #roadmap > div.top > div.inner > div > div > figure > img{ flex-grow: 0; } #roadmap > div.top > div.inner > div > div:first-of-type{ order: 1; flex-basis: 50%; margin-right: 4em; } #roadmap > div.top > div.inner > div > div:last-of-type{ order: 2; } #roadmap > div.center{ padding: 4em 2em; } #roadmap > div.center > div.inner{ } #roadmap > div.center > div.inner > header{ margin-bottom: 4em; display: block; } #roadmap > div.center > div.inner > header > div{ } #roadmap > div.center > div.inner > header > div > div{ text-align: center; } #roadmap > div.center > div.inner > header > div > div > h2{ display: none; } #roadmap > div.center > div.inner > header > div > div > p{ display: inline-block; color: #fff; font-size: 1.5em; text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #roadmap > div.center > div.inner > ul{ } #roadmap > div.center > div.inner > ul > li{ margin-right: 50%; padding-right: 3em; padding-left: 0; } #roadmap > div.center > div.inner > ul > li:nth-child(even){ margin-left: 50%; margin-right: 0; padding-right: 0; padding-left: 3em; } #roadmap > div.center > div.inner > ul > li:last-of-type{ margin-right: 0; margin-left: 0; padding-right: 0; padding-left: 0; } #roadmap > div.center > div.inner > ul > li:before{ right: 0.9375em; left: auto; margin-right: -1em; } #roadmap > div.center > div.inner > ul > li:after{ right: 0; left: auto; margin-right: -1em; } #roadmap > div.center > div.inner > ul > li:first-of-type:after{ margin-right: -1.5em; width: 3em; height: 3em; } #roadmap > div.center > div.inner > ul > li:last-of-type:after{ right: 50%; margin-right: -1.5em; width: 3em; height: 3em; } #roadmap > div.center > div.inner > ul > li:nth-child(even):last-of-type:after{ left: 50%; margin-right: 0; margin-left: -1.5em; } #roadmap > div.center > div.inner > ul > li:nth-child(even):before{ left: 0.9375em; right: auto; margin-left: -1em; margin-right: 0; } #roadmap > div.center > div.inner > ul > li:nth-child(even):after{ left: 0; right: auto; margin-left: -1em; margin-right: 0; } #roadmap > div.center > div.inner > ul > li > span.top{ max-width: 24em; } #roadmap > div.center > div.inner > ul > li:nth-child(even) > span.top{ margin-left: auto; } #roadmap > div.center > div.inner > ul > li:last-of-type > span.top{ padding-top: 5em; max-width: 100%; } #roadmap > div.center > div.inner > ul > li > span.top > span.top{ } #roadmap > div.center > div.inner > ul > li:nth-child(even) > span.top > span.top{ text-align: right; } #roadmap > div.center > div.inner > ul > li:last-of-type > span.top > span.top{ font-size: 1.5em; font-weight: 600; text-align: center; } #roadmap > div.center > div.inner > ul > li:nth-child(even) > span.top > span.center{ text-align: right; } #roadmap > div.center > div.inner > ul > li > span.top > span.center{ margin-top: 0.5em; margin-bottom: 2em; } #roadmap > div.center > div.inner > ul > li:last-of-type > span.top > span.center{ text-align: center; } #roadmap > div.center > div.inner > ul > li > span.top > span.bottom{ height: 14em; } #roadmap > div.center > div.inner > ul > li:last-of-type > span.top > span.bottom{ margin: 0 auto; max-width: 40em; height: 24em; } #roadmap > div.center > div.inner > ul > li > span.center{ margin-top: 2em; margin-bottom: 2em; max-width: 24em; } #roadmap > div.center > div.inner > ul > li:nth-child(even) > span.center{ margin-left: auto; } #roadmap > div.center > div.inner > ul > li:last-of-type > span.center{ margin-top: 2em; margin-right: auto; margin-bottom: 2em; margin-left: auto; max-width: 40em; } #roadmap > div.center > div.inner > ul > li > span.center > span{ line-height: 1.5; } #roadmap > div.center > div.inner > ul > li:nth-child(even) > span.center > span{ text-align: right; } #roadmap > div.center > div.inner > ul > li:last-of-type > span.center > span{ font-size: 1.5em; } #roadmap > div.center > div.inner > ul > li > span.bottom{ } #roadmap > div.center > div.inner > ul > li:nth-child(even) > span.bottom{ text-align: right; } #roadmap > div.center > div.inner > ul > li:last-of-type > span.bottom{ text-align: center; } #roadmap > div.center > div.inner > ul > li > span.bottom > a{ display: inline-block; margin-top: 0; margin-left: 0.25em; } #roadmap > div.center > div.inner > ul > li > span.bottom > a:first-of-type{ margin-left: 0; } #roadmap > div.bottom{ padding: 4em; } #roadmap > div.bottom > div.inner{ } #roadmap > div.bottom > div.inner > div{ flex-direction: row; } #roadmap > div.bottom > div.inner > div > div{ flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; justify-content: center; } #roadmap > div.bottom > div.inner > div > div > p{ flex-grow: 0; flex-shrink: 0; line-height: 1.5; } #roadmap > div.bottom > div.inner > div > div > p > strong{ font-size: 2em; text-align: left; } #roadmap > div.bottom > div.inner > div > div > ul{ flex-grow: 0; flex-shrink: 0; } #roadmap > div.bottom > div.inner > div > div > ul > li{ display: inline-block; margin-right: 0.25em; margin-bottom: 0.25em; } #roadmap > div.bottom > div.inner > div > div > ul > li:last-of-type{ margin-right: 0; margin-bottom: 0; } #roadmap > div.bottom > div.inner > div > div > figure{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 0; } #roadmap > div.bottom > div.inner > div > div > figure > img{ flex-grow: 0; } #roadmap > div.bottom > div.inner > div > div:first-of-type{ order: 1; flex-basis: 50%; margin-right: 4em; } #roadmap > div.bottom > div.inner > div > div:last-of-type{ order: 2; } /* Post */ body.post #body{ } #post{ padding: 4em 2em; } #post > div.top{ height: 5em; } #post > div.top > div{ height: 41.65em; } #post > article{ } #post > article > div.top{ } #post > article > div.top > header{ padding-top: 4em; padding-right: 4em; padding-bottom: 2em; padding-left: 4em; } #post > article > div.top > header > h2{ } #post > article > div.top > header > h2 > span{ font-size: 2em; } #post > article > div.top > header.left > h2 > span{ padding-right: 7em; } #post > article > div.top > header > p{ margin-top: 1em; } #post > article > div.top > header > p > span{ font-size: 1em; } #post > article > div.top > div.top{ } #post > article > div.top > div.bottom{ display: flex; flex-direction: row; } #post > article > div.top > div.bottom > div{ flex-shrink: 1; flex-grow: 0; } #post > article > div.top > div.bottom > div > div{ padding-top: 0; padding-right: 4em; padding-bottom: 3em; padding-left: 4em; } #post > article > div.top > div.bottom > div > div > p{ margin-top: 0; margin-bottom: 1em; font-size: 1em; line-height: 1.5; } #post > article > div.top > div.bottom > div.left{ flex-grow: 1; flex-shrink: 1; } #post > article > div.top > div.bottom > aside.right{ flex-grow: 0; flex-shrink: 0; flex-basis: 15em; max-width: 15em; } #post > article > div.top > div.bottom > aside.right > div{ padding-right: 2em; padding-bottom: 2em; padding-left: 0; } #post > article > div.top > div.bottom > aside.right > div > p.first{ display: none; } #post > article > div.top > div.bottom > aside.right > div > ul.first{ } #post > article > div.top > div.bottom > aside.right > div > ul.first > li{ } #post > article > div.top > div.bottom > aside.right > div > ul.first > li > a{ background-color: transparent; box-shadow: none; } #post > article > div.top > div.bottom > aside.right > div > ul.first > li > a > p{ position: relative; padding-right: 2em; display: flex; flex-direction: row; align-items: center; min-height: 4em; } #post > article > div.top > div.bottom > aside.right > div > ul.first > li > a > p:after{ content: "\f105"; position: absolute; top: 50%; right: 0.5em; margin-top: -0.5em; display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: bold; } #post > article > nav{ } #post > article > nav > ul{ overflow: hidden; } #post > article > nav > ul > li{ float: left; margin-bottom: 0; margin-left: 0.25em; } #post > article > nav > ul > li:first-of-type{ margin-left: 0; } #post > article > nav > ul > li > a{ } #post > article > nav > ul > li.top{ } #post > article > nav > ul > li.bottom{ float: right; } /* Games */ body.games #body{ } #games{ } #games > article{ } #games > article > div{ padding: 4em; } #games > article > div > div{ } #games > article > div > div > div.top{ margin-bottom: 4em; } #games > article > div > div > div.top > h3{ } #games > article > div > div > div.top > h3 > a{ } #games > article > div > div > div.top > h3 > a.top{ width: 24em; height: 10em; } #games > article > div > div > div.center{ display: flex; align-items: center; } #games > article > div > div > div.center > div.left{ flex-grow: 0; flex-shrink: 0; display: block; /* display: none; */ margin-right: 4em; margin-bottom: 0; width: 15%; } #games > article > div > div > div.center > div.left > img{ width: 100%; } #games > article > div > div > div.center > div.center{ flex-grow: 1; flex-shrink: 1; } #games > article > div > div > div.center > div.center > div{ } #games > article > div > div > div.center > div.center > div > p{ font-size: 1.5em; text-align: left; line-height: 1.5; } #games > article > div > div > div.center > div.right{ flex-grow: 0; flex-shrink: 0; margin-top: 0; margin-left: 4em; width: 50%; } #games > article > div > div > div.bottom{ margin-top: 4em; } #games > article > div > div > div.bottom > nav{ } #games > article > div > div > div.bottom > nav > ul{ margin-top: 0; text-align: center; } #games > article > div > div > div.bottom > nav > ul > li{ margin-top: 0; margin-right: 0.5em; margin-left: 0.5em; display: inline-block; } #games > article > div > div > div.bottom > nav > ul > li > a{ } /* Game */ body.game #body{ } #game{ } #game > header{ padding: 8em; background-attachment: fixed; } #game > header.top{ padding-bottom: 29em; margin-bottom: -20em; } #game > header > div{ } #game > header > div > h2{ font-size: 4em; } #game > header > div > h2 > span{ max-width: 40em; height: 20em; font-size: 0.25em; } #game > header > div > div{ } #game > header > div > div > h2{ font-size: 4em; } #game > header > div > div > h2 > span{ max-width: 40em; height: 20em; font-size: 0.25em; } #game > header > div > p{ margin-top: 4em; } #game > header > div > p > span{ padding: 1em; } #game > header > div > p > span.center{ } #game > header > div > p > span > span.top{ font-size: 1em; } #game > header > div > p > span > span.bottom{ font-size: 2em; } #game > header > div > p > span > span.left{ font-size: 2em; } #game > header > div > p > span > span.right{ font-size: 1em; } #game > div{ } #game > div > div{ } #game > div > div > div.top{ } #game > div > div > div.top > div.top{ margin-bottom: 4em; } #game > div > div > div.top > div.center{ margin-bottom: 4em; } #game > div > div > div.top > div.center > p{ font-size: 2em; } #game > div > div > div.top > div.bottom{ margin-top: -1em; margin-bottom: 3em; } #game > div > div > div.top > div.bottom > ul{ margin-bottom: 0; text-align: center; } #game > div > div > div.top > div.bottom > ul > li{ padding-bottom: 0; display: inline-block; } #game > div > div > div.top > div.bottom > ul > li > a{ margin: 1em; text-align: left; } #game > div > div > div.top > div.bottom > ul > li > a > span.top{ font-size: 1em; } #game > div > div > div.top > div.bottom > ul > li > a > span.bottom{ font-size: 2em; } #game > div > div > div.top > div.bottom > ul > li.first{ } #game > div > div > div.top > div.bottom > ul > li.second{ } #game > div > div > div.center{ } #game > div > div > div.center > div{ display: flex; flex-direction: row; } #game > div > div > div.center > div > div.left{ flex-grow: 1; flex-shrink: 1; } #game > div > div > div.center > div > div.left > h3{ margin-bottom: 2em; font-size: 2em; } #game > div > div > div.center > div > div.left > h3:before{ margin-right: 0.25em; height: 0.0625em; } #game > div > div > div.center > div > div.left > h3:after{ margin-left: 0.25em; height: 0.0625em; } #game > div > div > div.center > div > div.left > h4{ margin-bottom: 2.48em; font-size: 1.5em; } #game > div > div > div.center > div > div.left > p{ margin-bottom: 4em; line-height: 2; } #game > div > div > div.center > div > div.left > p.has-medium-font-size{ margin-bottom: 2.68em; } #game > div > div > div.center > div > div.left > p.has-large-font-size{ margin-bottom: 2em; } #game > div > div > div.center > div > div.left > p.has-huge-font-size{ margin-bottom: 1.6em; } #game > div > div > div.center > div > div.left > p:last-child{ margin-bottom: 0; } #game > div > div > div.center > div > div.left > ul{ margin-right: auto; margin-bottom: 4em; margin-left: auto; padding-left: 4em; } #game > div > div > div.center > div > div.left > div.wp-block-image{ margin-bottom: 4em; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery{ margin-right: auto; margin-bottom: 4em; margin-left: auto; max-width: 100%; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > ul.slick-dots{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > ul.slick-dots > li{ top: -2em; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery > ul.slick-slider > ul.slick-dots > li > button{ width: 1.5em; height: 1.5em; border-width: 0.25em; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider{ margin-right: auto; margin-bottom: 4em; margin-left: auto; max-width: 100%; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > ul.slick-dots{ } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > ul.slick-dots > li{ top: -2em; } #game > div > div > div.center > div > div.left > figure.wp-block-gallery.slick-slider > ul.slick-dots > li > button{ width: 1.5em; height: 1.5em; font-size: 1em; border-width: 0.25em; } #game > div > div > div.center > div > div.left > div.wp-block-columns{ margin-bottom: 4em; display: flex; flex-direction: row; align-items: center; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column{ flex-grow: 1; flex-shrink: 1; flex-basis: 50%; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column:first-child{ padding-right: 2em; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column:last-child{ padding-left: 2em; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > figure{ margin-right: auto; margin-left: auto; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > figure > img{ margin-right: auto; margin-left: auto; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > figure.size-thumbnail{ max-width: 50%; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > figure.size-medium{ max-width: 75%; } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > figure.size-full{ max-width: 75%; } #game > div > div > div.center > div > div.left > div.wp-block-columns:nth-of-type(even){ } #game > div > div > div.center > div > div.left > div.wp-block-columns:nth-of-type(even) > div.wp-block-column{ } #game > div > div > div.center > div > div.left > div.wp-block-columns:nth-of-type(even) > div.wp-block-column:first-child{ order: 2; padding-right: 0; padding-left: 2em; } #game > div > div > div.center > div > div.left > div.wp-block-columns:nth-of-type(even) > div.wp-block-column:last-child{ order: 1; padding-right: 2em; padding-left: 0; } #game > div > div > div.center > div > div.left > div.wp-block-columns:nth-of-type(odd){ } #game > div > div > div.center > div > div.left > div.wp-block-columns:nth-of-type(odd) > div.wp-block-column{ } #game > div > div > div.center > div > div.left > div.wp-block-columns:nth-of-type(odd) > div.wp-block-column:first-child{ } #game > div > div > div.center > div > div.left > div.wp-block-columns:nth-of-type(odd) > div.wp-block-column:last-child{ } #game > div > div > div.center > div > div.left > div.wp-block-columns > div.wp-block-column > p{ line-height: 2; } #game > div > div > div.center > div > div.left > div.wp-block-group{ margin-bottom: 4em; } #game > div > div > div.center > div > div.left > div.wp-block-group:last-of-type{ margin-bottom: 0; } #game > div > div > div.center > div > div.left > :last-child, #game > div > div > div.center > div > div.left > div:last-child, #game > div > div > div.center > div > div.left > figure:last-child{ margin-bottom: 0; } #game > div > div > div.center > div > div.right{ flex-grow: 1; flex-shrink: 1; margin-top: 0; padding-left: 4em; } #game > div > div > div.center > div > div.right > div{ } #game > div > div > div.center > div > div.right > div.first{ } #game > div > div > div.center > div > div.right > div.second{ } #game > div > div > div.center > div > div.right > div.second > p{ margin-bottom: 2em; } #game > div > div > div.center > div > div.right > div.second > p > span{ font-size: 1.5em; } #game > div > div > div.center > div > div.right > div.second > iframe{ } #game > div > div > div.center > div > div.right > div.second > iframe.first{ } #game > div > div > div.center > div > div.right > div.second > iframe.second{ } #game > div > div > div.center > div > div.right > div.third{ } #game > div > div > div.center > div > div.right > div.third > p{ } #game > div > div > div.center > div > div.right > div.third > p > span{ font-size: 1.5em; } #game > div > div > div.center > div > div.right > div.fourth{ } #game > div > div > div.center > div > div.right > div.fourth > p{ } #game > div > div > div.center > div > div.right > div.fourth > p > span{ font-size: 1.5em; } #game > div > div > div.center > div > div.right > div{ } #game > div > div > div.center > div > div.right > div:last-of-type{ margin-bottom: 0; } #game > div > div > div.center > div.top{ display: block; } #game > div > div > div.center > div.top > div.left{ width: 100%; } #game > div > div > div.center > div.top > div.right{ } #game > div > div > div.bottom{ margin-top: 3em; margin-bottom: -1em; } #game > div > div > div.bottom > ul{ margin-bottom: 0; text-align: center; } #game > div > div > div.bottom > ul > li{ padding-bottom: 0; display: inline-block; } #game > div > div > div.bottom > ul > li > a{ margin: 1em; text-align: left; } #game > div > div > div.bottom > ul > li > a > span.top{ font-size: 1em; } #game > div > div > div.bottom > ul > li > a > span.bottom{ font-size: 2em; } #game > div > div > div.bottom > ul > li.first{ } #game > div > div > div.bottom > ul > li.second{ } /* Page */ body.page #body{ } #page{ } #page > header{ } .block{ padding: 8em 4em; } .block:nth-child(odd){ } .block > div.inner{ } .block > div.inner > div{ } .content p{ line-height: 1.5; } .content p.has-text-align-center{ } .content p.has-medium-font-size{ } .content p.has-large-font-size{ } .content p.has-huge-font-size{ } .content h2{ margin-bottom: 2em; } .content h2.has-text-align-center{ } .content h2.has-medium-font-size{ } .content h2.has-large-font-size{ } .content h2.has-huge-font-size{ } .content h3{ margin-bottom: 2.67em; } .content h3.has-text-align-center{ } .content h3.has-medium-font-size{ } .content h3.has-large-font-size{ } .content h3.has-huge-font-size{ } .content strong{ } .content div.wp-block-columns{ display: flex; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 4em; } .content div.wp-block-columns.top{ align-items: flex-start; } .content div.wp-block-columns.stretch{ align-items: stretch; } .content div.wp-block-column{ flex-grow: 0; flex-shrink: 1; flex-basis: 50%; margin-right: 4em; margin-bottom: 0; } .content div.wp-block-column:first-of-type:last-of-type{ flex-basis: 100%; } .content div.wp-block-image{ } .content blockquote{ display: flex; flex-direction: column; height: 100%; } .content blockquote p{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .content blockquote cite{ flex-grow: 0; } .content figure{ margin-right: 0; margin-bottom: 4em; margin-left: 0; } .content figure.size-thumbnail{ } .content figure.size-medium{ } .content figure.size-large{ } .content figure.aligncenter{ margin-right: auto; margin-left: auto; } .content figure.wp-block-gallery{ } .content ul.blocks-gallery-grid{ } .content ul.blocks-gallery-grid > li.blocks-gallery-item{ } .content figure.columns-3 ul.blocks-gallery-grid{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } .content figure.columns-3 li.blocks-gallery-item{ margin-bottom: 0; width: 33%; flex-basis: 33%; flex-grow: 0; flex-shrink: 1; } .content figure.columns-3 li.blocks-gallery-item img{ } .content figure.columns-8 ul.blocks-gallery-grid{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } .content figure.columns-8 li.blocks-gallery-item{ margin-bottom: 0; width: 12%; flex-basis: 12%; flex-grow: 0; flex-shrink: 1; } .content figure.columns-8 li.blocks-gallery-item img{ } .content img{ } .content ul{ } .content ul li{ } .content ul li a{ } .content ul li a:hover{ } .content ul.buttons{ } .content ul.buttons li{ display: inline-block; margin-bottom: 0.5em; margin-right: 0.5em; } .content ul.buttons li a{ } .content ul.buttons li a:hover{ } .content ul.buttons.center{ text-align: center; } .block#send{ } .block#send > div.inner{ } .content form#send{ margin: 0 auto; max-width: 50em; } .content form#send > h3{ } .content form#send > h3 > span{ font-size: 2em; } .content form#send > p{ } .content form#send > p#success{ } .content form#send > p#fail{ } .content form#send{ } .content form#send > label{ } .content form#send > input[type=text]{ } .content form#send > textarea{ } .content form#send > input[type=submit]{ margin: 0 auto; width: auto; } .content ul#jams{ margin: -1em; text-align: center; } .content ul#jams > li{ margin: 1em; display: inline-block; max-width: 15em; } .content ul#jams > li > a{ } .content ul#jams > li > a:hover{ } .content ul#jams > li > a > span.top{ } .content ul#jams > li > a > span.bottom{ } .content ul#rewards{ margin: -1em; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; text-align: center; } .content ul#rewards > li{ flex-grow: 0; flex-shrink: 1; margin: 1em; display: inline-block; width: 15em; } .content ul#rewards > li:last-child{ margin-bottom: 1em; } .content ul#rewards > li > a{ display: block; padding: 2em; height: 100%; } .content ul#rewards > li > a:hover{ } .content ul#rewards > li > a > span.top{ position: static; margin: 0 auto; width: 100%; height: 8em; } .content ul#rewards > li > a > span.center{ margin-top: 1em; padding: 0; text-align: center; word-break: break-word; } .content ul#rewards > li > a > span.bottom{ margin-top: 1em; padding: 0; text-align: left; word-break: break-word; } .content ul#rules{ } .content ul#rules > li{ margin-right: 0; display: block; } .content ul#rules > li > span.top{ margin-bottom: 0.67em; font-size: 1.5em; } .content ul#rules > li > span.bottom{ } .content ul#sponsors{ margin: -1em; text-align: center; } .content ul#sponsors > li{ display: inline-block; margin: 1em; } .content ul#sponsors > li > a{ display: block; padding: 1em; background-color: #fff; box-shadow: 0 0.125em 2em -1em #000; } .content ul#sponsors > li > a > span.top{ margin-right: 0; margin-bottom: 1em; width: 10em; height: 10em; background-color: transparent; background-size: 8em auto; box-shadow: none; } .content ul#sponsors > li > a > span.bottom{ margin-right: 0; color: #222; text-align: center; } .content ul#submissions{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: -1em; } .content ul#submissions > li{ display: flex; flex-direction: column; flex-basis: 50%; max-width: 50%; margin-right: 0; margin-bottom: 0; box-shadow: none; } .content ul#submissions > li > span{ display: flex; flex-direction: column; margin: 1em; box-shadow: 0 0.125em 2em -1em #000; } .content ul#submissions > li > span > span.top{ flex-grow: 0; flex-shrink: 0; } .content ul#submissions > li > span > span.top > span.top{ } .content ul#submissions > li > span > span.top > span.top > span.top{ } .content ul#submissions > li > span > span.top > span.top > span.bottom{ } .content ul#submissions > li > span > span.top > span.top > span.bottom > span{ } .content ul#submissions > li > span > span.top > span.top > span.bottom > a{ } .content ul#submissions > li > span > span.top > span.center{ } .content ul#submissions > li > span > span.top > span.bottom{ height: 12.5em; } .content ul#submissions > li > span > span.center{ display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 0; } .content ul#submissions > li > span > span.center > span.top{ flex-grow: 1; flex-shrink: 0; line-height: 1.5; } .content ul#submissions > li > span > span.center > span.bottom{ flex-grow: 0; flex-shrink: 0; } .content ul#submissions > li > span > span.center > span.bottom > span{ } .content ul#submissions > li > span > span.center > span.bottom > span > span.left{ } .content ul#submissions > li > span > span.center > span.bottom > span > span.right{ } .content ul#submissions > li > span > span.bottom{ flex-grow: 0; flex-shrink: 0; } .content ul#submissions > li > span > span.bottom > a{ } .content ul#submissions > li > span > span.bottom > a:hover{ } .content ul#submissions > li.active{ } .content ul#submissions > li.active > span{ } .content ul#submissions > li.active > span:before{ } .content ul#submissions > li.active > span > span.center{ } .content ul#submissions > li.active > span > span.center > span.bottom{ } .content ul#submissions > li.active > span > span.center > span.bottom:before{ top: 0.25em; right: 0.25em; font-size: 2.5em; } .content ul#submissions > li.active > span > span.center > span.bottom:after{ } .content p:last-child, .content div.wp-block-image:last-child, .content div.wp-block-columns:last-child, .content div.wp-block-column:last-child, .content figure:last-child, .content div.wp-block-image:last-child, .content ul:last-child, .content ul.buttons li:last-child, .content li:last-child{ margin-bottom: 0; } .content ul.buttons li:last-child, .content div.wp-block-column:last-child{ margin-right: 0; } /* ========== Footer ========== */ /* Default */ #reach{ overflow: hidden; padding: 2em; } #reach > div{ } #reach > div > p{ margin-top: 0.375em; margin-bottom: 0; float: left; font-size: 1.5em; } #reach > div > ul{ float: right; margin-top: 0; margin-left: -0.5em; } #reach > div > ul > li{ float: left; margin-top: 0; margin-left: 0.5em; } #reach > div > ul > li > a{ } #bragboard{ padding-top: 4em; padding-bottom: 4em; } #bragboard > div{ } #bragboard > div > ul{ } #bragboard > div > ul > li{ } #bragboard > div > ul > li > a{ } #bragboard > div > ul > li > a > span{ font-size: 1em; } #footer{ } body.search #footer{ border-top: none; } #footer > div{ position: relative; display: block; } #footer > div > div{ order: 1; } #footer > div > div > p{ padding: 2em; font-size: 1em; } #footer > div > nav{ order: 2; position: absolute; right: 2em; bottom: 0; left: 0; padding-top: 0; padding-right: 0; padding-left: 0; height: 0; } #footer > div > nav > ul{ float: right; margin-top: -3.5em; } #footer > div > nav > ul > li{ float: left; } #footer > div > nav > ul > li > a{ } #footer > div > nav > ul > li.first{ position: absolute; bottom: 0; left: 2em; } #footer > div > nav > ul > li.first > a{ width: 10em; background-image: url("logo.png"); } #footer > div > nav > ul > li.second{ margin-top: 0; } #footer > div > nav > ul > li.second > a{ } #footer > div > nav > ul > li.second > a:before{ } #footer > div > nav > ul > li.third{ margin-top: 0; margin-left: 0.5em; } #footer > div > nav > ul > li.third > a{ } #footer > div > nav > ul > li.third > a:before{ } #footer > div > nav > ul > li.fourth{ margin-top: 0; margin-left: 0.5em; } #footer > div > nav > ul > li.fourth > a{ } #footer > div > nav > ul > li.fourth > a:before{ } #footer > div > nav > ul > li.fifth{ margin-top: 0; margin-left: 0.5em; } #footer > div > nav > ul > li.fifth > a{ } #footer > div > nav > ul > li.fifth > a:before{ } } @media (orientation: landscape) and (min-width: 40em){ html{ } body{ font-size: 1.125em; } } @media (orientation: landscape) and (min-width: 55em){ html{ } /* ========== Document ========== */ body{ } /* ========== Header ========== */ /* Default */ #header{ } #header > div{ } /* Full */ body.full #menu{ } body.full #navigation{ } body.full #social{ } body.full #social > li{ } body.full #social > li > a{ } body.full #social > li > a:before{ } body.full #social > li > a > span{ display: block; } } @media (orientation: landscape) and (min-width: 70em){ html{ } body{ font-size: 1vw; } } /* Print */ @media print{ html{ } body{ } }