/*----------------------------------------------*    COMPONENTS
	==========

	@package variablo

\*----------------------------------------------*/
/* 
 *
 * / Variables
------------------------------------------------*/
/* Colors */
/* Fonts */
/* Breakpoints */
/*----------------------------------------------*    RESET
	=====

	@package yaybrigade

\*----------------------------------------------*/
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, font, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, button {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline; }

html {
  overflow-y: scroll;
  /* Keeps page centred in all browsers regardless of content height */
  -webkit-text-size-adjust: 100%;
  /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
  -ms-text-size-adjust: 100%;
  /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */ }

* {
  /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
  -webkit-box-sizing: border-box;
  /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
  -moz-box-sizing: border-box;
  /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
  box-sizing: border-box; }

body {
  background: #fff; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block; }

figure {
  margin: 0; }

ol, ul {
  list-style: none; }

table {
  /* tables still need 'cellspacing="0"' in the markup */
  border-collapse: separate;
  border-spacing: 0; }

caption, th, td {
  font-weight: normal;
  text-align: left; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: ""; }

blockquote, q {
  quotes: "" ""; }

a:focus {
  outline: thin dotted; }

a:hover,
a:active {
  /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
  outline: 0; }

img {
  border: 0 none;
  height: auto;
  /* width: 100%; */
  max-width: 100%; }

a img {
  border: 0; }

button {
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer; }

/* Text meant only for screen readers */
.screen-reader-text {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0; }

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar */ }

/* Clearing */
.clear:before,
.clear:after {
  content: '';
  display: table; }

.clear:after {
  clear: both; }

/* Webkit specific */
input, textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0; }

/* 
 *
 * Global  
------------------------------------------------*/
@media (max-width: 900px), (max-height: 1100px) {
  html {
    font-size: 1.4em; } }

@media (max-width: 600px), (max-height: 850px) {
  html {
    font-size: 1.2em; } }

@media (max-width: 500px), (max-height: 600px) {
  html {
    font-size: 1em; } }

body {
  background-color: #E3D9CC;
  border: #B3B3B3 solid 0.25em;
  padding: 1.75em;
  min-height: 100vh;
  font-family: "Source Code Pro", monospace;
  min-width: 20em;
  counter-reset: rounds; }

.wrapper {
  max-width: 16em;
  margin: 0 auto;
  position: relative; }

/* 
 *
 * Navigation  
------------------------------------------------*/
.nav-icon {
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 1000;
  min-height: 2em; }

.nav-icon__line {
  display: block;
  background-color: #B3B3B3;
  height: 0.25em;
  margin: 0.25em;
  width: 1.5em;
  transition: opacity ease .2s, margin ease .2s, transform ease .2s; }

.nav--is-open .nav-icon {
  outline: 0; }
  .nav--is-open .nav-icon::-moz-focus-inner {
    border: 0; }

.nav--is-open .nav-icon__line:first-child {
  transform: rotate(-45deg); }

.nav--is-open .nav-icon__line:last-child {
  transform: rotate(45deg);
  margin-top: -1em; }

.nav--is-open .nav-icon__line:nth-child(2) {
  opacity: 0; }

.navigaton {
  background-color: #E3D9CC;
  position: absolute;
  right: 0;
  top: -1em;
  bottom: 0;
  left: -1.2em;
  /* cover up numbers */
  padding-left: 1.2em;
  padding-top: 2em;
  max-height: 0;
  opacity: 0;
  transition: opacity .5s ease, max-height 0s ease .5s;
  pointer-events: none; }
  .nav--is-open .navigaton {
    pointer-events: auto;
    max-height: 100vh;
    opacity: 1;
    transition: opacity .5s ease; }
  .navigaton .logo {
    color: white;
    font-size: 1.2em;
    font-weight: 600; }

.nav-items {
  margin-top: 2em;
  max-width: 13em; }

.nav-item {
  color: #B3B3B3;
  margin-bottom: .5em; }
  .nav-item--on {
    color: black; }
  .nav-item__settings {
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .nav-item__description {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 0.95em;
    padding: 0.5em 0 1em;
    color: #888;
    line-height: 1.3;
    letter-spacing: 0.5px; }

.nav-switch {
  cursor: pointer;
  display: inline-block;
  width: 2em;
  height: 1em;
  background-image: url(/assets/images/switch-off.svg);
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  .nav-item--on .nav-switch {
    background-image: url(/assets/images/switch-on.svg); }

.nav-label {
  font-size: 1.2em;
  font-weight: bold; }

.nav-value input {
  background-color: transparent;
  color: #B3B3B3;
  border: 1px solid #B3B3B3;
  border-radius: 0.25em;
  max-width: 2em;
  padding: 0.125em 0.5em;
  text-align: center;
  font-family: "Source Code Pro", monospace;
  font-size: 1.2em;
  font-weight: bold; }
  .nav-item--on .nav-value input {
    color: black;
    border-color: black; }

.new-game-button {
  margin-top: 2em; }
  .new-game-button__message {
    font-size: .95em;
    margin-top: .5em;
    color: #F15353;
    font-family: "Source Sans Pro", sans-serif;
    line-height: 1.3;
    letter-spacing: 0.5px; }

/* 
 *
 * Structure  
------------------------------------------------*/
.left {
  width: 11.5em; }

.right {
  width: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; }

.shape {
  width: 3.5em;
  height: 3.5em;
  display: flex;
  align-items: center;
  justify-content: center; }
  .shape--circle {
    border-radius: 50%; }
  .columns--4 .shape {
    width: 2.75em;
    height: 2.75em; }
  .columns--5 .shape {
    width: 2.25em;
    height: 2.25em; }
  .columns--6 .shape {
    width: 1.85em;
    height: 1.85em; }

/* 
 *
 * Buttons
------------------------------------------------*/
@keyframes evaluate-guess-appear {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.button {
  cursor: pointer;
  background-color: #B3B3B3;
  border-radius: 0.25em;
  display: inline-flex;
  padding: 0.375em;
  color: white; }
  .button--evaluate-guess {
    margin-top: .5em;
    width: 2em;
    animation: evaluate-guess-appear .4s both; }
  .button--reverse {
    background: transparent;
    border: 1px solid #B3B3B3;
    color: #888; }

/* 
 *
 * Question 
------------------------------------------------*/
.code-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1em; }
  .code-wrapper .left {
    position: relative; }
    .game--is-over .code-wrapper .left:after {
      position: absolute;
      content: "";
      top: -0.5em;
      right: -0.5em;
      bottom: -0.5em;
      left: -0.5em;
      border: 2px solid #B3B3B3; }

.code {
  display: flex;
  justify-content: space-between; }

/* 
 *
 * Answers  
------------------------------------------------*/
.row {
  display: flex;
  justify-content: space-between;
  margin-bottom: .5em;
  position: relative; }
  .row .left:before {
    counter-increment: rounds;
    content: counter(rounds);
    position: absolute;
    left: -2em;
    top: calc(50% - .8em);
    font-size: .6em;
    color: #B3B3B3; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 100%; } }

.fade-in {
  animation: fade-in .3s both .7s; }

.guess {
  display: flex;
  width: 11.5em;
  justify-content: space-between; }
  .row--current-round .guess li:not(.color--selected) {
    cursor: pointer; }

@keyframes hint-appear {
  0% {
    transform: rotate(-180deg) scale(0.5); }
  100% {
    transform: rotate(180deg) scale(1); } }

.hint {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  transform: rotate(180deg);
  margin: 0 auto;
  animation: hint-appear .7s both; }
  .hint li {
    border-radius: 50%;
    height: 1em;
    margin: 0.125em;
    width: 1em; }
    .columns--5 .hint li,
    .columns--6 .hint li {
      height: .75em;
      width: .75em; }
  .hint--correct-position {
    background-color: black; }
  .hint--correct-color {
    background-color: white; }
  .hint--incorrect {
    border: 1px solid #B3B3B3; }

.time {
  font-size: 0.75em;
  color: #B3B3B3; }

/* 
 *
 * Guess Picker
------------------------------------------------*/
.guess-picker {
  position: relative;
  border: 4px solid #B3B3B3;
  display: flex;
  flex-wrap: wrap;
  margin-top: 1em;
  padding: 0.5em; }
  .colors--2 .guess-picker,
  .colors--3 .guess-picker,
  .colors--4 .guess-picker {
    max-width: 11.5em;
    justify-content: center; }
  .colors--5 .guess-picker {
    justify-content: center; }
  .guess-picker:before {
    position: absolute;
    top: -.6em;
    content: '';
    width: 0;
    height: 0;
    border-left: .5em solid transparent;
    border-right: .5em solid transparent;
    border-bottom: 0.5em solid #B3B3B3;
    transition: left .2s ease; }
  .guess-picker li {
    cursor: pointer;
    border-radius: 50%;
    margin: 0.1em 0.33em;
    height: 1.75em;
    width: 1.75em; }
    .colors--7 .guess-picker li {
      margin: .5em .4em; }
    .colors--8 .guess-picker li {
      margin: .5em .25em; }

.columns--3 .guess-picker-for-column--0:before {
  left: 1em; }

.columns--3 .guess-picker-for-column--1:before {
  left: 5em; }

.columns--3 .guess-picker-for-column--2:before {
  left: 9em; }

.columns--4 .guess-picker-for-column--0:before {
  left: .65em; }

.columns--4 .guess-picker-for-column--1:before {
  left: 3.5em; }

.columns--4 .guess-picker-for-column--2:before {
  left: 6.5em; }

.columns--4 .guess-picker-for-column--3:before {
  left: 9.4em; }

.columns--5 .guess-picker-for-column--0:before {
  left: .35em; }

.columns--5 .guess-picker-for-column--1:before {
  left: 2.7em; }

.columns--5 .guess-picker-for-column--2:before {
  left: 5.1em; }

.columns--5 .guess-picker-for-column--3:before {
  left: 7.35em; }

.columns--5 .guess-picker-for-column--4:before {
  left: 9.7em; }

.columns--6 .guess-picker-for-column--0:before {
  left: .25em; }

.columns--6 .guess-picker-for-column--1:before {
  left: 2.2em; }

.columns--6 .guess-picker-for-column--2:before {
  left: 4.1em; }

.columns--6 .guess-picker-for-column--3:before {
  left: 6em; }

.columns--6 .guess-picker-for-column--4:before {
  left: 7.95em; }

.columns--6 .guess-picker-for-column--5:before {
  left: 9.85em; }

/* 
 *
 * Tips
------------------------------------------------*/
.row--tips {
  margin-top: 2em;
  color: #888;
  font-family: "Source Sans Pro", sans-serif; }

/* 
 *
 * Game over  
------------------------------------------------*/
@keyframes game-over-appear {
  0% {
    transform: scale(1);
    opacity: 0; }
  25% {
    opacity: 1; }
  50% {
    transform: scale(1.1); }
  90% {
    transform: scale(0.9); }
  100% {
    transform: scale(1); } }

.row--game-over {
  display: block;
  margin-top: 2em;
  border-top: 2px solid #B3B3B3;
  padding-top: 1.75em;
  text-align: center;
  color: #888;
  animation: game-over-appear .7s both .7s; }
  .row--game-over:before {
    content: '';
    /* no number */ }
  .row--game-over h1 {
    font-size: .9em;
    font-weight: bold;
    margin-bottom: .125em;
    line-height: 1.3;
    font-family: "Source Sans Pro", sans-serif;
    letter-spacing: .5px; }
  .row--game-over p {
    line-height: 1.3;
    font-family: "Source Sans Pro", sans-serif;
    letter-spacing: .5px; }
  .row--game-over .button {
    margin-top: 1em;
    font-size: .8em; }

/* 
 *
 * Colors  
------------------------------------------------*/
@keyframes color-code-appear {
  0% {
    transform: rotateY(90deg); }
  100% {
    transform: rotateY(0deg); } }

.color--code {
  background-color: #B3B3B3;
  color: #ddd;
  font-weight: bold;
  cursor: default;
  animation: color-code-appear .5s both; }

.color--unset {
  border: 1px solid #B3B3B3; }

.color--selected {
  border: 4px solid #B3B3B3; }

.color--0 {
  background-color: #FFFF00; }

.color--1 {
  background-color: #754C24; }

.color--2 {
  background-color: #3FA9F5; }

.color--3 {
  background-color: #7AC943; }

.color--4 {
  background-color: #FF931E; }

.color--5 {
  background-color: #FF1D25; }

.color--6 {
  background-color: purple; }

.color--7 {
  background-color: pink; }

/*# sourceMappingURL=variablo.css.map */