@charset "UTF-8";
/*
Theme Name: Redbrick
Theme URI: https://github.com/jivanpal/redbrick-theme-for-wordpress
Author: Jivan Pal
Author URI: https://www.jivanpal.com/
Description: A WordPress theme designed for Redbrick, the official University of Birmingham student newspaper.
Version: 0.19.09.29.0
License: GNU GPLv3
License URI: https://www.gnu.org/licenses/gpl-3.0-standalone.html
Text Domain: redbrick
Tags:
This theme doesn't have a more detailed description — yet!
*/
/**
 * CSS reset
 * Adapted from the work of Eric A. Meyer.
 * http://meyerweb.com/eric/tools/css/reset/ (v2.0, 2011-01-26)
 */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
  text-decoration: underline;
}

/**
 * END - CSS reset
 */
/** Colors **/
/** END - Colors **/
/**
 * The maximum amount of vertical screen real estate that intrusive block
 * elements (e.g. images/figures) should take up.
 */
/**
 * Main styles
 */
p {
  margin: 10px;
}

h6, h5, h4, h3, h2, h1 {
  margin: 10px;
  font-weight: bold;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 1.1rem;
}

h6 {
  font-size: 1rem;
}

svg {
  /**
     * Forces SVGs to match the height of their container whilst retaining their
     * aspect ratio.
     */
  height: 100%;
  width: auto;
}

#wpstats {
  display: none;
}

body {
  font: 16px/1.3 'Helvetica Neue', 'Helvetica', 'Arial', monospace;
  background-color: #272727;
}

body.login #login {
  width: 352px;
  padding: 50px 0 30px;
}

body.login #login, body.login #login a {
  color: #ddd;
}

body.login #login a:hover {
  color: #fff;
  text-decoration: underline;
}

body.login #login h1 a {
  background: none;
  width: auto;
  height: auto;
}

body.login #login h1 a svg {
  display: block;
  margin: 0 auto;
  fill: white;
}

body.login #login .message, body.login #login form {
  width: auto !important;
}

body.login #login .message {
  padding: 0;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background: none;
  color: #ddd;
  text-align: center;
}

body.login #login form {
  background-color: white;
  color: #272727;
  border-radius: 10px;
  font-size: 14px;
}

header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /**
     * Prevents other non-statically positioned elements
     * from sitting on top of the header.
     */
  z-index: 999;
  width: 100%;
  height: 50px;
  background-color: #272727;
  color: white;
  border-bottom: 1px solid white;
}

@media only screen and (min-width: 601px) and (max-width: 782px) {
  body.admin-bar header {
    top: 46px;
  }
}

@media only screen and (min-width: 783px) {
  body.admin-bar header {
    top: 32px;
  }
}

header .content {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /**
         * We only assign `padding-left` here, and assign `padding-right` to
         * `.search` to overcome a browser inconsistency relating to whether padding
         * and margin at the end of scrollable elements are realised.
         *
         * See the following StackOverflow answer for details:
         * https://stackoverflow.com/a/38177668/9996911
         */
  padding-left: 15px;
  border-bottom: 5px solid #c00;
}

header .content .hamburger {
  height: 20px;
}

header .content .central-element {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

header .content .central-element .logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

header .content .central-element .logo > div {
  margin: 3px;
}

header .content .central-element .logo .icon {
  height: 28px;
}

header .content .central-element .logo .wordmark {
  height: 22px;
}

@media only screen and (max-width: 280px) {
  header .content .central-element .logo .wordmark {
    display: none;
  }
}

header .content .central-element nav {
  /**
                * Despite mobile-first design, this media query prevents the
                * otherwise necessary use of `!important` to override many
                * properties in desktop query that are explicitly set here,
                * but for which we would like to assume default values.
                *
                * In other words, we specify mobile-only layout rules here.
                */
}

/* Wordpress images */
figure.alignright {
    display: inline-block;
    float: right;
    margin-left: 10px;
}
figure.alignleft {
    display: inline-block;
    float: left;
    margin-left: 10px;
}
/* end */

header .content .central-element nav .submenu:not(.visible) {
  display: none;
}

@media only screen and (max-width: 600px) {
  header .content .central-element nav {
    z-index: 998;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    top: 50px;
    /** TODO: Handle this properly for all screen widths **/
    width: 100vw;
    /**
                    * The `visible` class is toggled on `<nav>` via JS when the
                    * hamburger icon in the header is clicked.
                    * See `scripts/toggle-hamburger-menu.js` for details.
                    */
    -webkit-transition: left 300ms;
    transition: left 300ms;
    /**
                    * TODO: Consider applying this. Perhaps only apply to the
                    * active section (e.g. on a "Comment" page, bold "Comment")?
                    */
  }
  body.admin-bar header .content .central-element nav {
    top: 96px;
  }
  header .content .central-element nav:not(.visible) {
    left: -100vw;
  }
  header .content .central-element nav .menu-container {
    width: calc(100vw - 50px);
    max-width: 3in;
    overflow-x: hidden;
    position: relative;
    background-color: #272727;
  }
  header .content .central-element nav .menu-container ul {
    overflow-x: hidden;
    overflow-y: auto;
  }
  header .content .central-element nav .menu-container ul li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
  header .content .central-element nav .menu-container .menu, header .content .central-element nav .menu-container .submenu-container, header .content .central-element nav .menu-container .submenu {
    height: 100%;
  }
  header .content .central-element nav .menu-container .menu, header .content .central-element nav .menu-container .submenu-container {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-right: 1px solid #ddd;
    background-color: inherit;
  }
  header .content .central-element nav .menu-container .menu {
    z-index: 1;
    -webkit-transition: left 300ms;
    transition: left 300ms;
  }
  header .content .central-element nav .menu-container .menu.hidden {
    left: -100vw;
  }
  header .content .central-element nav .menu-container .menu .name-and-arrow-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  header .content .central-element nav .menu-container .submenu-container .post-list {
    display: none;
  }
  header .content .central-element nav .rest-of-screen {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.8)), color-stop(25%), to(rgba(0, 0, 0, 0.05)));
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), 25%, rgba(0, 0, 0, 0.05));
  }
}

header .content .search {
  height: 22px;
  padding-right: 15px;
}

header .content .search-bar {
  width: 100vw;
  height: 100vh;
  z-index: -1;
  position: fixed;
  left: 0;
  top: 50px;
  /**
            * The `visible` class is toggled on `.search-bar` via JS when the
            * serach icon in the header is clicked.
            * See `scripts/toggle-search-bar.js` for details.
            */
  -webkit-transition: top 300ms;
  transition: top 300ms;
}

body.admin-bar header .content .search-bar {
  top: 96px;
}

@media only screen and (min-width: 601px) {
  body.admin-bar header .content .search-bar {
    top: 82px;
  }
}

header .content .search-bar:not(.visible) {
  /**
                 * Here, `!important` is used to directly override the `top`
                 * value set when the admin bar is present.
                 */
  top: -100vh !important;
}

header .content .search-bar #search-form {
  background-color: #272727;
  padding: 8px 5px;
  border-bottom: 1px solid #ddd;
}

header .content .search-bar #search-form #search-field {
  width: 100%;
  height: 36px;
  padding: 5px 10px;
  border-radius: 18px;
  font-size: 1.2em;
}

header .content .search-bar .rest-of-screen {
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), 50px, rgba(0, 0, 0, 0));
}

header.section--news .content {
  border-color: #cc0000;
}

header.section--comment .content {
  border-color: #7d43a3;
}

header.section--culture .content {
  border-color: #ffcc00;
}

header.section--music .content {
  border-color: #ffb3b3;
}

header.section--film .content {
  border-color: #30979b;
}

header.section--tv .content {
  border-color: #05c765;
}

header.section--gaming .content {
  border-color: #ff3333;
}

header.section--food .content {
  border-color: #fa8338;
}

header.section--travel .content {
  border-color: #66b2ff;
}

header.section--lifestyle .content {
  border-color: #9397cb;
}

header.section--tech .content {
  border-color: #4572a1;
}

header.section--sport .content {
  border-color: forestgreen;
}

header.section--features .content {
  border-color: #c8c8c8;
}

main {
  background-color: white;
  color: #000;
}

main a {
  color: #222;
}

footer {
  background-color: #272727;
  color: #ddd;
}

footer a:hover {
  color: #fff;
}

footer h1 {
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
}

footer h2 {
  font-size: 1.2rem;
}

footer :not(ul):not(div):not(a):not(svg) {
  margin: 10px;
}

footer .upper, footer .lower, footer .footer-links {
  border-top: 1px solid #ddd;
}

footer .social-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

footer .social-media ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

footer .social-media ul .icon-container {
  height: 25px;
}

footer .lower {
  /**
         * Despite mobile-first design, these are mobile-specific styles that
         * we want to override on desktop, but we just use the defaults desktop,
         * so we just use a `@media` query here instead.
         */
}

footer .lower .latest-issue {
  /** This is the Issuu embed */
}

footer .lower .latest-issue > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /** TODO: Deal with presentation on tablets; thumbnail is far too large. */
}

footer .lower .latest-issue > a .thumbnail {
  padding: 10px;
}

footer .lower .latest-issue > a .thumbnail img {
  display: block;
  margin: 0 auto;
  max-height: 50vh;
  max-width: 100%;
}

@media only screen and (min-width: 400px) {
  footer .lower .latest-issue > a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

footer .lower .latest-issue .summary > div {
  display: none;
}

@media only screen and (max-width: 600px) {
  footer .lower .footer-links {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  footer .lower .footer-links ul li {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

@media only screen and (min-width: 601px) {
  footer .lower .flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  footer .lower .footer-links {
    border-top: none;
    border-left: 1px solid #ddd;
  }
}

.constrained {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.showcase-container {
  width: 100%;
  /** Overflow shadows */
  position: relative;
  /** END - Overflow shadows */
}

.showcase-container::before, .showcase-container::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-transition: width 100ms;
  transition: width 100ms;
}

.showcase-container.left-shadow::before {
  width: 50px;
}

.showcase-container.right-shadow::after {
  width: 50px;
}

.showcase-container::before {
  left: 0;
  background: -webkit-gradient(linear, left top, right top, from(black), color-stop(rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to right, black, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
}

.showcase-container::after {
  right: 0;
  background: -webkit-gradient(linear, right top, left top, from(black), color-stop(rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to left, black, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
}

.showcase {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  height: calc(100vw - 60px);
  max-height: 50vh;
}

.showcase, .showcase a {
  color: white;
}

.showcase .showcase-item {
  /**
         *`$max-vh-usage` matches `max-height` of `.showcase`, so here we are
         * instructing items to take width ≥ showcase-height.
         */
  -webkit-box-flex: 1;
      -ms-flex: 1 0 50vh;
          flex: 1 0 50vh;
  /**
         * When showcase-height < max-vh-usage, items still take
         * width = max-vh-usage as given above. The following rule imposes
         * that items take width ≤ showcase-height so that the showcase-peek
         * value still takes effect.
         */
  max-width: calc(100vw - 60px);
  display: block;
  height: 100%;
}

.showcase .showcase-item:not(:last-child) {
  border-right: 1px solid white;
}

.showcase .showcase-item a {
  /** Allows `position: absolute` on `.text-overlay` to work as intended. */
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.showcase .showcase-item .featured-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.showcase .showcase-item .tint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.30;
}

.showcase .showcase-item a:hover .tint {
  opacity: 0.40;
}

.showcase .showcase-item .tint.section-- {
  background-color: #c8c8c8;
}

.showcase .showcase-item .tint.section--news {
  background-color: #cc0000;
}

.showcase .showcase-item .tint.section--comment {
  background-color: #7d43a3;
}

.showcase .showcase-item .tint.section--culture {
  background-color: #ffcc00;
}

.showcase .showcase-item .tint.section--music {
  background-color: #ffb3b3;
}

.showcase .showcase-item .tint.section--film {
  background-color: #30979b;
}

.showcase .showcase-item .tint.section--tv {
  background-color: #05c765;
}

.showcase .showcase-item .tint.section--gaming {
  background-color: #ff3333;
}

.showcase .showcase-item .tint.section--food {
  background-color: #fa8338;
}

.showcase .showcase-item .tint.section--travel {
  background-color: #66b2ff;
}

.showcase .showcase-item .tint.section--lifestyle {
  background-color: #9397cb;
}

.showcase .showcase-item .tint.section--tech {
  background-color: #4572a1;
}

.showcase .showcase-item .tint.section--sport {
  background-color: forestgreen;
}

.showcase .showcase-item .tint.section--features {
  background-color: #c8c8c8;
}

.banner {
  width: 100%;
}

.banner a {
  display: block;
}

.banner .content {
  text-align: center;
  margin: 0 auto;
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/**
 * == Margin overlap workaround ==
 * This prevents the first and last children of selected elements from
 * overlapping with those of their neighbours. In detail, it prevents the
 * bounding box of selected elements from not containinng the margins of
 * children at its extremeties. This is necessary in order for margins and
 * background colours to function as intended.
 */
main.front-page section.posts, main.author, main.search-results, main.not-found {
  padding-top: 1px;
}

main:not(.front-page) {
  padding-bottom: 1px;
}

@media only screen and (min-width: 1001px) {
  main.author .constrained, main.category .constrained {
    max-width: 1600px;
  }
  main.author .author-box, main.category .author-box {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  main.author .post-list, main.category .post-list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
}

main.front-page .front-page-display section.posts {
  padding: 1px 0;
}

main.front-page .front-page-display section.posts:nth-child(2n) {
  background-color: #f0f0f0;
}

main.front-page .front-page-display section.posts h1 {
  padding-bottom: 0.2em;
  border-bottom: 1px solid gray;
}

main.front-page .front-page-display section.posts.posts--news h1 {
  color: #cc0000;
  border-color: #cc0000;
}

main.front-page .front-page-display section.posts.posts--top-stories h1 {
  color: #c8c8c8;
  border-color: #c8c8c8;
}

main.front-page .front-page-display section.posts.posts--comment h1 {
  color: #7d43a3;
  border-color: #7d43a3;
}

main.front-page .front-page-display section.posts.posts--features h1 {
  color: black;
  border-color: black;
}

main.front-page .front-page-display section.posts.posts--sport h1 {
  color: forestgreen;
  border-color: forestgreen;
}

main.front-page .front-page-display section.posts.posts--other h1 {
  color: black;
  border-color: black;
}

main.front-page .front-page-display section.posts.posts--trending {
  background-color: black;
}

main.front-page .front-page-display section.posts.posts--trending h1 {
  color: white;
  border-color: white;
}

main.front-page .front-page-display section.posts.posts--trending, main.front-page .front-page-display section.posts.posts--trending a {
  color: white;
}

@media only screen and (min-width: 1001px) {
  main.front-page .front-page-display .constrained {
    max-width: 1001px;
  }
  main.front-page .front-page-display .upper {
    max-width: 1001px;
    margin-left: auto;
    margin-right: auto;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 1fr;
        grid-template-columns: 2fr 1fr;
    grid-column-gap: 30px;
  }
  main.front-page .front-page-display .upper section.posts--news .post-list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
  }
  main.front-page .front-page-display .upper section.posts--news .post-list .post-item:nth-child(1) {
    grid-column: 1/-1;
  }
  main.front-page .front-page-display .upper section.posts--latest {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1/3;
    -ms-grid-column: 2;
    grid-column: 2;
    background: none;
  }
  main.front-page .front-page-display .upper section.posts--latest .constrained {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  main.front-page .front-page-display .upper section.posts--latest .constrained .post-list {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  main.front-page .front-page-display .upper section.posts--latest .constrained .post-list .post-item {
    /**
                                     * Setting height to a small constant here
                                     * results in all post items being of the
                                     * same height, so that `flex: 1;` results
                                     * in them all being stretched by the same
                                     * amount. As a result, all the items end
                                     * up filling the height of the container
                                     * `.posts--latest` and being of the same
                                     * height :-)
                                     */
    height: 1px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  main.front-page .front-page-display .upper section.posts--latest .constrained .post-list .post-item .featured-image-box {
    height: 100%;
  }
  main.front-page .front-page-display .upper section.posts--latest .constrained .post-list .post-item .excerpt {
    display: none;
  }
  main.front-page .front-page-display .upper section.posts--comment .post-list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
  main.front-page .front-page-display section.posts--features .post-list, main.front-page .front-page-display section.posts--sport .post-list, main.front-page .front-page-display section.posts--trending .post-list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
  }
  main.front-page .front-page-display section.posts--features .post-item:nth-child(1) {
    grid-column: 1/-1;
  }
}

main .featured-image-box {
  position: relative;
  height: 50vh;
}

main .featured-image-box .featured-image {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

main .author-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: stretch;
      -ms-flex-pack: stretch;
          justify-content: stretch;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 10px;
}

main .author-box .avatar {
  height: 64px;
  width: 64px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-right: 10px;
  border-radius: 32px;
}

main .author-box .author-name {
  font-weight: bold;
}

main .author-box .author-bio {
  font-size: 0.8rem;
  margin-top: 3px;
}

main .post-list .post-item {
  margin: 10px;
  border-bottom: 1px solid gray;
}



main .post-list .post-item .featured-image-box {
  width: 100%;
  height: 250px;
  max-height: 50vh;
}

main .post-list .post-item .featured-image-box .text-overlay {
  padding: 0;
}

main .pagination {
  text-align: center;
  padding: 1em;
}



@media only screen and (min-width: 1001px) {
  main.post .grid-container, main.static-page .grid-container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 400px;
        grid-template-columns: 1fr 400px;
  }
  main.post .grid-container .comments, main.static-page .grid-container .comments {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3;
  }
  main.post .grid-container .recommended, main.static-page .grid-container .recommended {
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2;
    margin-right: 20px;
  }
}

main.post article, main.static-page article {
  padding-bottom: 20px;
}

main.post article .excerpt, main.static-page article .excerpt {
  font-size: 1.1em;
  font-weight: 600;
  text-align: justify;
}

main.post article a, main.static-page article a {
  text-decoration: underline;
}

main.post article.section-- .wp-block-pullquote p, main.static-page article.section-- .wp-block-pullquote p {
  color: #c8c8c8;
}

main.post article.section--news .wp-block-pullquote p, main.static-page article.section--news .wp-block-pullquote p {
  color: #cc0000;
}

main.post article.section--comment .wp-block-pullquote p, main.static-page article.section--comment .wp-block-pullquote p {
  color: #7d43a3;
}

main.post article.section--culture .wp-block-pullquote p, main.static-page article.section--culture .wp-block-pullquote p {
  color: #ffcc00;
}

main.post article.section--music .wp-block-pullquote p, main.static-page article.section--music .wp-block-pullquote p {
  color: #ffb3b3;
}

main.post article.section--film .wp-block-pullquote p, main.static-page article.section--film .wp-block-pullquote p {
  color: #30979b;
}

main.post article.section--tv .wp-block-pullquote p, main.static-page article.section--tv .wp-block-pullquote p {
  color: #05c765;
}

main.post article.section--gaming .wp-block-pullquote p, main.static-page article.section--gaming .wp-block-pullquote p {
  color: #ff3333;
}

main.post article.section--food .wp-block-pullquote p, main.static-page article.section--food .wp-block-pullquote p {
  color: #fa8338;
}

main.post article.section--travel .wp-block-pullquote p, main.static-page article.section--travel .wp-block-pullquote p {
  color: #66b2ff;
}

main.post article.section--lifestyle .wp-block-pullquote p, main.static-page article.section--lifestyle .wp-block-pullquote p {
  color: #9397cb;
}

main.post article.section--tech .wp-block-pullquote p, main.static-page article.section--tech .wp-block-pullquote p {
  color: #4572a1;
}

main.post article.section--sport .wp-block-pullquote p, main.static-page article.section--sport .wp-block-pullquote p {
  color: forestgreen;
}

main.post article.section--features .wp-block-pullquote p, main.static-page article.section--features .wp-block-pullquote p {
  color: #c8c8c8;
}

main.post article .wp-block-embed-youtube, main.static-page article .wp-block-embed-youtube {
  margin: 10px;
}

main.post article .wp-block-embed-youtube iframe.youtube-player, main.static-page article .wp-block-embed-youtube iframe.youtube-player {
  width: 100%;
}

main.post .info-box, main.static-page .info-box {
  padding: 1px 0;
  background-color: #f0f0f0;
}

main.post .info-box .label, main.static-page .info-box .label {
  font-weight: bold;
}

main.post .info-box .timestamps, main.post .info-box .photographer-credits, main.static-page .info-box .timestamps, main.static-page .info-box .photographer-credits {
  margin: 10px;
  font-size: 0.8rem;
}

main.post .post-body, main.static-page .post-body {
  text-align: justify;
  /**
         * This prevents pullquote and other floating items from overflowing
         * past the bottom of `.post-body`, i.e. into `.comments`.
         */
}

main.post .post-body .clearfix, main.static-page .post-body .clearfix {
  height: 0;
  clear: both;
}

main.post .post-body ul, main.static-page .post-body ul {
  list-style: disc inside none;
}

main.post .post-body ul > li, main.static-page .post-body ul > li {
  padding-left: 1em;
  margin-top: 10px;
  margin-bottom: 10px;
}

main.post .post-body .wp-block-pullquote, main.static-page .post-body .wp-block-pullquote {
  text-align: left;
  margin: 30px 0;
  padding: 0;
}

main.post .post-body .wp-block-pullquote, main.post .post-body .wp-block-pullquote.size-normal, main.static-page .post-body .wp-block-pullquote, main.static-page .post-body .wp-block-pullquote.size-normal {
  font-size: 1.8rem;
}

main.post .post-body .wp-block-pullquote.size-small, main.static-page .post-body .wp-block-pullquote.size-small {
  font-size: 1.5rem;
}

main.post .post-body .wp-block-pullquote.size-smallest, main.static-page .post-body .wp-block-pullquote.size-smallest {
  font-size: 1.2rem;
}

main.post .post-body .wp-block-pullquote blockquote .opening-quotemark, main.static-page .post-body .wp-block-pullquote blockquote .opening-quotemark {
  font-size: 3.5em;
  margin: -0.3em 0 -0.77em 5px;
  color: #c8c8c8;
}

main.post .post-body .wp-block-pullquote blockquote p, main.static-page .post-body .wp-block-pullquote blockquote p {
  font-size: 1em;
  line-height: normal;
}

main.post .post-body .wp-block-pullquote.float-left, main.post .post-body .wp-block-pullquote.float-right, main.static-page .post-body .wp-block-pullquote.float-left, main.static-page .post-body .wp-block-pullquote.float-right {
  width: calc(50% - 20px);
}

main.post .post-body .wp-block-pullquote.float-left, main.static-page .post-body .wp-block-pullquote.float-left {
  float: left;
  margin-right: 20px;
}

main.post .post-body .wp-block-pullquote.float-right, main.static-page .post-body .wp-block-pullquote.float-right {
  float: right;
  margin-left: 20px;
}

main.post .post-body > figure, main.post .post-body > img, main.static-page .post-body > figure, main.static-page .post-body > img {
  margin: 10px;
  max-width: calc(100vw - 20px);
}

main.post .post-body > figure > img, main.static-page .post-body > figure > img {
  width: 100%;
  height: auto;
}

main.post .comments, main.static-page .comments {
  padding: 1px 0;
  background-color: #272727;
  color: white;
}

main.post .comments #disqus_thread, main.static-page .comments #disqus_thread {
  padding: 0 12px;
}

main.post .recommended .more-posts .category.section--, main.static-page .recommended .more-posts .category.section-- {
  color: #c8c8c8;
}

main.post .recommended .more-posts .category.section--news, main.static-page .recommended .more-posts .category.section--news {
  color: #cc0000;
}

main.post .recommended .more-posts .category.section--comment, main.static-page .recommended .more-posts .category.section--comment {
  color: #7d43a3;
}

main.post .recommended .more-posts .category.section--culture, main.static-page .recommended .more-posts .category.section--culture {
  color: #ffcc00;
}

main.post .recommended .more-posts .category.section--music, main.static-page .recommended .more-posts .category.section--music {
  color: #ffb3b3;
}

main.post .recommended .more-posts .category.section--film, main.static-page .recommended .more-posts .category.section--film {
  color: #30979b;
}

main.post .recommended .more-posts .category.section--tv, main.static-page .recommended .more-posts .category.section--tv {
  color: #05c765;
}

main.post .recommended .more-posts .category.section--gaming, main.static-page .recommended .more-posts .category.section--gaming {
  color: #ff3333;
}

main.post .recommended .more-posts .category.section--food, main.static-page .recommended .more-posts .category.section--food {
  color: #fa8338;
}

main.post .recommended .more-posts .category.section--travel, main.static-page .recommended .more-posts .category.section--travel {
  color: #66b2ff;
}

main.post .recommended .more-posts .category.section--lifestyle, main.static-page .recommended .more-posts .category.section--lifestyle {
  color: #9397cb;
}

main.post .recommended .more-posts .category.section--tech, main.static-page .recommended .more-posts .category.section--tech {
  color: #4572a1;
}

main.post .recommended .more-posts .category.section--sport, main.static-page .recommended .more-posts .category.section--sport {
  color: forestgreen;
}

main.post .recommended .more-posts .category.section--features, main.static-page .recommended .more-posts .category.section--features {
  color: #c8c8c8;
}

main.category .subsections {
  position: -webkit-sticky;
  position: sticky;
  z-index: 998;
  top: 50px;
  margin-top: 1px;
  border-bottom: 1px solid white;
  /** Overflow shadows */
  /** END - Overflow shadows */
}

main.category .subsections::before, main.category .subsections::after {
  content: "";
  height: 100%;
  width: 0;
  -webkit-transition: width 100ms;
  transition: width 100ms;
  position: absolute;
  top: 0;
  z-index: 1;
  pointer-events: none;
}

main.category .subsections.left-shadow::before {
  width: 30px;
}

main.category .subsections.right-shadow::after {
  width: 30px;
}

main.category .subsections::before {
  left: 0;
  background: -webkit-gradient(linear, left top, right top, from(black), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to right, black, rgba(0, 0, 0, 0));
}

main.category .subsections::after {
  right: 0;
  background: -webkit-gradient(linear, right top, left top, from(black), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to left, black, rgba(0, 0, 0, 0));
}

main.category .subsections .category-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow-x: scroll;
  height: 44px;
  background-color: #272727;
}

main.category .subsections .category-list li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  height: 100%;
  color: white;
}

main.category .subsections .category-list li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

main.category .subsections .category-list li span {
  padding: 0 10px;
}

main.category .subsections.section--news li.category:hover {
  background-color: rgba(204, 0, 0, 0.35);
}

main.category .subsections.section--comment li.category:hover {
  background-color: rgba(125, 67, 163, 0.35);
}

main.category .subsections.section--culture li.category:hover {
  background-color: rgba(255, 204, 0, 0.35);
}

main.category .subsections.section--music li.category:hover {
  background-color: rgba(255, 179, 179, 0.35);
}

main.category .subsections.section--film li.category:hover {
  background-color: rgba(48, 151, 155, 0.35);
}

main.category .subsections.section--tv li.category:hover {
  background-color: rgba(5, 199, 101, 0.35);
}

main.category .subsections.section--gaming li.category:hover {
  background-color: rgba(255, 51, 51, 0.35);
}

main.category .subsections.section--food li.category:hover {
  background-color: rgba(250, 131, 56, 0.35);
}

main.category .subsections.section--travel li.category:hover {
  background-color: rgba(102, 178, 255, 0.35);
}

main.category .subsections.section--lifestyle li.category:hover {
  background-color: rgba(147, 151, 203, 0.35);
}

main.category .subsections.section--tech li.category:hover {
  background-color: rgba(69, 114, 161, 0.35);
}

main.category .subsections.section--sport li.category:hover {
  background-color: rgba(34, 139, 34, 0.35);
}

main.category .subsections.section--features li.category:hover {
  background-color: rgba(200, 200, 200, 0.35);
}

main.search-results #inline-search-form {
  padding: 0 5px;
}

main.search-results #inline-search-form #inline-search-field {
  width: 100%;
  height: 36px;
  padding: 5px 10px;
  border-radius: 18px;
  font-size: 1.2em;
}

/**
 * END - Main styles
 */
/**
  * Element styles
  */
.featured-image-box .text-overlay, .showcase-item .text-overlay, nav .post-item .text-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  color: white;
}

.featured-image-box .text-overlay .title, .showcase-item .text-overlay .title, nav .post-item .text-overlay .title {
  margin: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

/**
 * END - Element styles
 */
/**
 * Desktop styles
 */
@media only screen and (min-width: 601px) {
  header .content .hamburger {
    display: none;
  }
  header .content .central-element {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    /**
                * In conjunction with the properties set on `nav`, this renders
                * scrollable navigation of the correct width.
                */
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
  header .content .central-element .logo {
    padding-right: 10px;
  }
  header .content .central-element nav {
    display: block;
    height: 100%;
    /**
                    * Set the width of the `nav` to accomodate all of the space
                    * between the `.logo` and `.search`.
                    */
    width: 0;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    /** Overflow shadows */
    position: relative;
    /** END - Overflow shadows */
  }
  header .content .central-element nav::before, header .content .central-element nav::after {
    content: "";
    height: 100%;
    width: 0;
    -webkit-transition: width 100ms;
    transition: width 100ms;
    position: absolute;
    top: 0;
    z-index: 1;
    pointer-events: none;
  }
  header .content .central-element nav.left-shadow::before {
    width: 30px;
  }
  header .content .central-element nav.right-shadow::after {
    width: 30px;
  }
  header .content .central-element nav::before {
    left: 0;
    background: -webkit-gradient(linear, left top, right top, from(black), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(to right, black, rgba(0, 0, 0, 0));
  }
  header .content .central-element nav::after {
    right: 0;
    background: -webkit-gradient(linear, right top, left top, from(black), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(to left, black, rgba(0, 0, 0, 0));
  }
  header .content .central-element nav .menu-container {
    height: 100%;
  }
  header .content .central-element nav .menu-container ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    overflow-x: auto;
  }
  header .content .central-element nav .menu-container ul li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    height: 100%;
  }
  header .content .central-element nav .menu-container ul li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
  }
  header .content .central-element nav .menu-container ul li a span {
    padding: 0 10px;
  }
  header .content .central-element nav .menu-container ul li a .submenu-arrow {
    display: none;
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section-- {
    background-color: rgba(200, 200, 200, 0.35);
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section--news {
    background-color: rgba(204, 0, 0, 0.35);
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section--comment {
    background-color: rgba(125, 67, 163, 0.35);
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section--culture {
    background-color: rgba(255, 204, 0, 0.35);
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section--music {
    background-color: rgba(255, 179, 179, 0.35);
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section--film {
    background-color: rgba(48, 151, 155, 0.35);
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section--tv {
    background-color: rgba(5, 199, 101, 0.35);
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section--gaming {
    background-color: rgba(255, 51, 51, 0.35);
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section--food {
    background-color: rgba(250, 131, 56, 0.35);
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section--travel {
    background-color: rgba(102, 178, 255, 0.35);
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section--lifestyle {
    background-color: rgba(147, 151, 203, 0.35);
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section--tech {
    background-color: rgba(69, 114, 161, 0.35);
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section--sport {
    background-color: rgba(34, 139, 34, 0.35);
  }
  header .content .central-element nav .menu-container ul li.tint:hover.section--features {
    background-color: rgba(200, 200, 200, 0.35);
  }
  header .content .central-element nav .menu-container .submenu-container {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100vw;
    height: auto;
    background-color: #272727;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu {
    height: 264px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-transition: height 300ms;
    transition: height 300ms;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu.visible {
    border-bottom: 1px solid white;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu:not(.visible) {
    height: 0;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .subcategories {
    height: 44px;
    border-bottom: 1px;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .back-button {
    display: none;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 220px;
    padding-left: 5px;
    padding-right: 5px;
    /**
                                     * TODO: This is mostly a duplication of
                                     * styles used for `.showcase-item`;
                                     * consider refactoring
                                     */
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 10px 5px;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item a {
    /** Allows `position: absolute` on `.text-overlay` to work as intended. */
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .featured-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .text-overlay {
    padding: 0;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .text-overlay .title {
    font-size: 1rem;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.30;
  }
  .showcase .showcase-item a:hover .tint {
    opacity: 0.40;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section-- {
    background-color: #c8c8c8;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section--news {
    background-color: #cc0000;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section--comment {
    background-color: #7d43a3;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section--culture {
    background-color: #ffcc00;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section--music {
    background-color: #ffb3b3;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section--film {
    background-color: #30979b;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section--tv {
    background-color: #05c765;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section--gaming {
    background-color: #ff3333;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section--food {
    background-color: #fa8338;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section--travel {
    background-color: #66b2ff;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section--lifestyle {
    background-color: #9397cb;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section--tech {
    background-color: #4572a1;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section--sport {
    background-color: forestgreen;
  }
  header .content .central-element nav .menu-container .submenu-container .submenu .post-list .post-item .tint.section--features {
    background-color: #c8c8c8;
  }
  header .content .search {
    padding-left: 15px;
  }
}
/*# sourceMappingURL=style.css.map */