@charset "UTF-8";
/**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * http://cssreset.com
    */
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;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

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

body {
  line-height: 1; }

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; }

/*----------------------------------------------------------------------------------------------------------------------------
    GLOBAL
------------------------------------------------------------------------------------------------------------------------------*/
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.clear {
  font-size: 0em;
  line-height: 0em;
  height: 0px;
  position: relative;
  clear: both; }

html, body {
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent; }

img {
  color: transparent; }

/*----------------------------------------------------------------------------------------------------------------------------
        MORE SPECIFIC RESETS
    ------------------------------------------------------------------------------------------------------------------------------*/
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both; }

html, body {
  -webkit-tap-highlight-color: transparent; }

hr {
  border: none;
  margin: 0; }

/*----------------------------------------------------------------------------------------------------------------------------
    GENERAL
------------------------------------------------------------------------------------------------------------------------------*/
li, p, a {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: #fefefe;
  color: black; }

a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%; }

/*----------------------------------------------------------------------------------------------------------------------------
    PAGE
------------------------------------------------------------------------------------------------------------------------------*/
body {
  background: #f0f0ed; }

.diagonal {
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 120vh; }
  @media screen and (min-height: 425px) {
    .diagonal {
      height: 100vh; } }
  .diagonal::after {
    position: absolute;
    top: 50%;
    right: 50%;
    margin-top: -1600px;
    margin-right: -1600px;
    display: block;
    content: "";
    width: 3200px;
    height: 3200px;
    border-top: 3200px solid transparent;
    border-right: 3200px solid #e1e1da;
    border-bottom: 0 solid transparent; }

/*----------------------------------------------------------------------------------------------------------------------------
    CROWN
------------------------------------------------------------------------------------------------------------------------------*/
.logo {
  width: 100%;
  max-width: 30px;
  margin: 25px 0 0 20px; }
  @media screen and (min-height: 425px) {
    .logo {
      position: absolute;
      top: 25px;
      left: 20px;
      margin: inherit; } }
  @media screen and (min-height: 425px) and (min-width: 950px) {
    .logo {
      left: 28px; } }
  @media screen and (min-height: 425px) and (min-width: 1201px) {
    .logo {
      left: 20px; } }
  @media screen and (min-height: 425px) and (min-width: 1240px) {
    .logo {
      left: 50%;
      margin-left: -600px; } }

svg {
  fill: #ffcc00;
  fill: #ca2027;
  /*
        &:hover ellipse {
            fill: red;
        }
*/ }

/*----------------------------------------------------------------------------------------------------------------------------
    BLOCK LINKS
------------------------------------------------------------------------------------------------------------------------------*/
.container {
  height: 100vh;
  padding: 0 20px; }

.nerd-grid {
  max-width: 1200px;
  margin: 0 auto 0px;
  border-top: 2px solid transparent;
  display: block;
  position: relative;
  overflow: hidden;
  top: 45px;
  /*----------------------------------------------------------------------------------------------------------------------------
            2 SMALL BOXES WIDE - below 470px 
        ------------------------------------------------------------------------------------------------------------------------------*/
  /*----------------------------------------------------------------------------------------------------------------------------
            2 SMALL BOXES WIDE - 470px to 620px 
        ------------------------------------------------------------------------------------------------------------------------------*/
  /*----------------------------------------------------------------------------------------------------------------------------
            4 SMALL BOXES WIDE - 620px to 900px 
        ------------------------------------------------------------------------------------------------------------------------------*/
  /*----------------------------------------------------------------------------------------------------------------------------
            6 SMALL BOXES WIDE - 900px to 1200px 
        ------------------------------------------------------------------------------------------------------------------------------*/
  /*----------------------------------------------------------------------------------------------------------------------------
            8 SMALL BOXES WIDE - 1200px and above
        ------------------------------------------------------------------------------------------------------------------------------*/ }
  @media screen and (min-height: 425px) {
    .nerd-grid {
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); } }
  .nerd-grid li {
    position: relative;
    display: block;
    float: left;
    height: 48px;
    border-left: 2px solid rgba(170, 105, 52, 0.25);
    border-bottom: 2px solid rgba(170, 105, 52, 0.25);
    font-size: .625em;
    line-height: 48px;
    letter-spacing: 2px;
    text-transform: uppercase; }
    .nerd-grid li a {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-left: 10px;
      padding-right: 10px;
      position: relative; }
      .nerd-grid li a::after {
        content: "→";
        margin-left: 5px; }
      .nerd-grid li a::before {
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: -145%;
        width: 130%;
        height: 100%;
        content: "";
        background: rgba(255, 255, 255, 0.1);
        background: rgba(85, 85, 69, 0.2);
        transition: .2s;
        transform: skewX(45deg); }
      .nerd-grid li a:hover::before {
        left: -15%; }
      .nerd-grid li a:active::after {
        margin-left: 6px; }
    .nerd-grid li:first-child {
      padding-left: 10px; }
    .nerd-grid li:last-child::after {
      position: absolute;
      top: 0;
      right: -2px;
      display: block;
      content: "";
      height: 48px;
      width: 2px;
      background: rgba(170, 105, 52, 0.25); }
  @media screen and (min-width: 0) and (max-width: 480px) {
    .nerd-grid {
      width: 100%; }
      .nerd-grid li {
        height: 34px;
        line-height: 34px;
        font-size: .675em;
        width: 50%; }
        .nerd-grid li:nth-child(1) {
          width: 100%; }
        .nerd-grid li:nth-child(-n+1) {
          border-top: 2px solid rgba(170, 105, 52, 0.25); }
        .nerd-grid li:nth-child(2n+1) {
          border-right: 2px solid rgba(170, 105, 52, 0.25); }
        .nerd-grid li:nth-child(2n+1)::after {
          background: transparent; } }
  @media screen and (min-width: 481px) and (max-width: 625px) {
    .nerd-grid {
      width: 99.9%; }
      .nerd-grid li {
        width: 33.3%; }
        .nerd-grid li:nth-child(1) {
          width: 66.6%; }
        .nerd-grid li:nth-child(-n+2) {
          border-top: 2px solid rgba(170, 105, 52, 0.25); }
        .nerd-grid li:nth-child(3n+2) {
          border-right: 2px solid rgba(170, 105, 52, 0.25); }
        .nerd-grid li:nth-child(3n+2)::after {
          background: transparent; } }
  @media screen and (min-width: 626px) and (max-width: 950px) {
    .nerd-grid {
      width: 100%; }
      .nerd-grid li {
        width: 25%; }
        .nerd-grid li:nth-child(1) {
          width: 50%; }
        .nerd-grid li:nth-child(-n+3) {
          border-top: 2px solid rgba(170, 105, 52, 0.25); }
        .nerd-grid li:nth-child(4n+3) {
          border-right: 2px solid rgba(170, 105, 52, 0.25); }
        .nerd-grid li:nth-child(4n+3)::after {
          background: transparent; } }
  @media screen and (min-width: 951px) and (max-width: 1200px) {
    .nerd-grid {
      width: 98.6%; }
      .nerd-grid li {
        width: 16.6%; }
        .nerd-grid li:nth-child(1) {
          width: 49.8%; }
        .nerd-grid li:nth-child(-n+4) {
          border-top: 2px solid rgba(170, 105, 52, 0.25); }
        .nerd-grid li:nth-child(6n+4) {
          border-right: 2px solid rgba(170, 105, 52, 0.25); }
        .nerd-grid li:nth-child(6n+4)::after {
          background: transparent; } }
  @media screen and (min-width: 1201px) {
    .nerd-grid {
      width: 100%; }
      .nerd-grid li {
        width: 12.5%; }
        .nerd-grid li:nth-child(1) {
          width: 50%; }
        .nerd-grid li:nth-child(-n+5) {
          border-top: 2px solid rgba(170, 105, 52, 0.25); }
        .nerd-grid li:nth-child(8n+5) {
          border-right: 2px solid rgba(170, 105, 52, 0.25); }
        .nerd-grid li:nth-child(8n+5)::after {
          background: transparent; } }

/*--------------------------------
     * CHOICE-OF-AGE STYLES
    ---------------------------------*/