@font-face {
  font-family: "Estado Headline";
  src: url("https://infograficos.estadao.com.br/assets/fonts/Estado/EstadoHeadline/EstadoHeadline-Semibold-webfont.eot");
  src: url("https://infograficos.estadao.com.br/assets/fonts/Estado/EstadoHeadline/EstadoHeadline-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("https://infograficos.estadao.com.br/assets/fonts/Estado/EstadoHeadline/EstadoHeadline-Semibold-webfont.woff2") format("woff2"), url("https://infograficos.estadao.com.br/assets/fonts/Estado/EstadoHeadline/EstadoHeadline-Semibold-webfont.woff") format("woff"), url("https://infograficos.estadao.com.br/assets/fonts/Estado/EstadoHeadline/EstadoHeadline-Semibold-webfont.ttf") format("truetype"), url("https://infograficos.estadao.com.br/assets/fonts/Estado/EstadoHeadline/EstadoHeadline-Semibold-webfont.svg#estado_headlinesemibold") format("svg");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Flama";
  src: url("https://infograficos.estadao.com.br/assets/fonts/Flama/Flama/Flama-Bold-webfont.eot");
  src: url("https://infograficos.estadao.com.br/assets/fonts/Flama/Flama/Flama-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("https://infograficos.estadao.com.br/assets/fonts/Flama/Flama/Flama-Bold-webfont.woff2") format("woff2"), url("https://infograficos.estadao.com.br/assets/fonts/Flama/Flama/Flama-Bold-webfont.woff") format("woff"), url("https://infograficos.estadao.com.br/assets/fonts/Flama/Flama/Flama-Bold-webfont.ttf") format("truetype"), url("https://infograficos.estadao.com.br/assets/fonts/Flama/Flama/Flama-Bold-webfont.svg#flamabold") format("svg");
  font-weight: bold;
  font-style: normal;
}

html {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 62.5%;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

@-ms-viewport {
  width: device-width;
}

body {
  margin: 0;
  font-family: "Lato", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1.5;
  color: #333;
  background-color: white;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
  outline-width: 0;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details,
menu {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

[tabindex="-1"]:focus {
  outline: none !important;
}

.btn {
  outline: none;
  border: 3px solid white;
  border-radius: 0.6rem;
  border-radius: 50%;
  padding: 0;
  width: 4.5rem;
  height: 4.5rem;
  background: transparent;
  color: white;
  font-size: 2.6rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.btn:hover, .btn:focus {
  background: white;
  color: #003552;
}

.btn-home,
.btn-help,
.btn-fullscreen {
  border: none;
}

.btn-home:hover, .btn-home:focus,
.btn-help:hover,
.btn-help:focus,
.btn-fullscreen:hover,
.btn-fullscreen:focus {
  background: transparent;
  color: white;
}

.btn-play,
.btn-replay {
  border: 4px solid white;
  width: 6rem;
  height: 6rem;
  font-size: 4rem;
}

@media (min-width: 360px) and (max-aspect-ratio: 4 / 3) {
  .btn-play,
  .btn-replay {
    border-width: 6px;
    width: 9rem;
    height: 9rem;
    font-size: 5.2rem;
  }
}

@media (min-width: 600px) and (max-aspect-ratio: 4 / 3) {
  .btn-play,
  .btn-replay {
    border-width: 6px;
    width: 9rem;
    height: 9rem;
    font-size: 5.2rem;
  }
}

@media (min-width: 768px) {
  .btn-play,
  .btn-replay {
    border-width: 6px;
    width: 9rem;
    height: 9rem;
    font-size: 5.2rem;
  }
}

.btn-play {
  padding-left: 0.2em;
}

body {
  background-color: #003552;
  background-image: url(../img/bg.svg);
  background-position: 100% 100%;
  background-repeat: repeat;
  color: white;
  -webkit-animation: animatedBackground 20s linear infinite;
          animation: animatedBackground 20s linear infinite;
}

@media (min-width: 600px) {
  body {
    -webkit-animation: animatedBackground 40s linear infinite;
            animation: animatedBackground 40s linear infinite;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 2.1rem;
  }
}

@media (min-width: 1200px) {
  body {
    -webkit-animation: animatedBackground 60s linear infinite;
            animation: animatedBackground 60s linear infinite;
  }
}

@media (min-width: 1600px) {
  body {
    -webkit-animation: animatedBackground 80s linear infinite;
            animation: animatedBackground 80s linear infinite;
  }
}

p {
  margin: 0;
  text-align: center;
}

.canvas {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
  width: 100%;
  max-width: 96rem;
}

.canvas-2 .player {
  padding: 0 4.5rem;
}

.canvas-4 .player {
  width: 50%;
  height: 50%;
}

.canvas-8 .player {
  width: 25%;
  height: 50%;
}

.player {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.player.turn .player-indicator {
  opacity: 1;
}

.player-1.turn .card form:hover .label, .player-1.turn .card form:focus .label {
  opacity: 0.6;
}

.player-1.turn .card form:hover .label:hover, .player-1.turn .card form:hover .label:focus, .player-1.turn .card form:focus .label:hover, .player-1.turn .card form:focus .label:focus {
  opacity: 1 !important;
}

.player-1.turn .card .label {
  cursor: pointer;
}

.player-1.turn .card .label:hover, .player-1.turn .card .label:focus {
  position: relative;
  z-index: 1000;
  box-shadow: 0 0 0 2px #006194;
}

.player-name {
  display: none;
}

.deck-length {
  font-size: 0.8em;
}

.card-container {
  position: relative;
  opacity: 1;
  -webkit-transform: translate(0);
      -ms-transform: translate(0);
          transform: translate(0);
  transition: opacity 0.2s, -webkit-transform 0.2s;
  transition: transform 0.2s, opacity 0.2s;
  transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s;
  transition-timing-function: ease-out;
}

.card-container.lose {
  z-index: 0;
  opacity: 0;
  -webkit-transform: translateX(125%);
      -ms-transform: translateX(125%);
          transform: translateX(125%);
}

.card-container.win {
  z-index: 0;
  opacity: 0;
  -webkit-transform: translateX(-125%);
      -ms-transform: translateX(-125%);
          transform: translateX(-125%);
}

.card-container.draw {
  z-index: 0;
  opacity: 0;
  -webkit-transform: translateY(125%);
      -ms-transform: translateY(125%);
          transform: translateY(125%);
}

.card-wrapper {
  margin: 0 auto;
  border-radius: 0.5rem;
  width: 13.25rem;
  height: 18rem;
  -webkit-perspective: 2500px;
          perspective: 2500px;
  -webkit-transform: perspective(2500px);
          transform: perspective(2500px);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

@media (min-width: 400px) and (max-aspect-ratio: 1 / 1) {
  .card-wrapper {
    border-radius: 0.625rem;
    width: 16.5625rem;
    height: 22.5rem;
  }
}

@media (min-height: 640px) and (orientation: portrait) {
  .card-wrapper {
    border-radius: 0.625rem;
    width: 16.5625rem;
    height: 22.5rem;
  }
}

@media (min-width: 720px) and (min-aspect-ratio: 1 / 1) {
  .card-wrapper {
    border-radius: 0.625rem;
    width: 16.5625rem;
    height: 22.5rem;
  }
}

@media (min-width: 768px) {
  .card-wrapper {
    border-radius: 1rem;
    width: 26.5rem;
    height: 36rem;
  }
}

.card {
  position: relative;
  border-radius: inherit;
  width: 13.25rem;
  height: 18rem;
  color: #333;
  font-size: 0.65rem;
  line-height: 1.25rem;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
}

@media (min-width: 400px) and (max-aspect-ratio: 1 / 1) {
  .card {
    width: 16.5625rem;
    height: 22.5rem;
    font-size: 0.8125rem;
    line-height: 1.5625rem;
  }
}

@media (min-height: 640px) and (orientation: portrait) {
  .card {
    width: 16.5625rem;
    height: 22.5rem;
    font-size: 0.8125rem;
    line-height: 1.5625rem;
  }
}

@media (min-width: 720px) and (min-aspect-ratio: 1 / 1) {
  .card {
    width: 16.5625rem;
    height: 22.5rem;
    font-size: 0.8125rem;
    line-height: 1.5625rem;
  }
}

@media (min-width: 768px) {
  .card {
    width: 26.5rem;
    height: 36rem;
    font-size: 1.3rem;
    line-height: 2.5rem;
  }
}

.card.hide .front {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.card.hide .back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

.card .front,
.card .back {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.75);
  border-radius: inherit;
  padding: 0.625rem;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
  -webkit-transform-style: inherit;
          transform-style: inherit;
  transition: inherit;
}

@media (min-width: 400px) and (max-aspect-ratio: 1 / 1) {
  .card .front,
  .card .back {
    padding: 0.78125rem;
  }
}

@media (min-height: 640px) and (orientation: portrait) {
  .card .front,
  .card .back {
    padding: 0.78125rem;
  }
}

@media (min-width: 720px) and (min-aspect-ratio: 1 / 1) {
  .card .front,
  .card .back {
    padding: 0.78125rem;
  }
}

@media (min-width: 768px) {
  .card .front,
  .card .back {
    padding: 1.25rem;
  }
}

.card .front {
  z-index: 2;
  background: white;
}

.card .back {
  background: url(../img/back.png) no-repeat center;
  background-size: cover;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 0.25rem;
  box-shadow: 0 0 0 1px #003552;
  border-radius: 0.25rem;
  width: 12rem;
}

@media (min-width: 400px) and (max-aspect-ratio: 1 / 1) {
  .card header {
    margin-bottom: 0.3125rem;
    border-radius: 0.3125rem;
    width: 15rem;
  }
}

@media (min-height: 640px) and (orientation: portrait) {
  .card header {
    margin-bottom: 0.3125rem;
    border-radius: 0.3125rem;
    width: 15rem;
  }
}

@media (min-width: 720px) and (min-aspect-ratio: 1 / 1) {
  .card header {
    margin-bottom: 0.3125rem;
    border-radius: 0.3125rem;
    width: 15rem;
  }
}

@media (min-width: 768px) {
  .card header {
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    width: 24rem;
  }
}

.card .title {
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
  margin: 0;
  border-radius: 0 0 0.25rem 0.25rem;
  background: #006194;
  background: linear-gradient(to right, #003552 0%, #006194 20%, #006194 80%, #003552 100%);
  color: white;
  font-family: 'Estado Headline', serif;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

@media (min-width: 400px) and (max-aspect-ratio: 1 / 1) {
  .card .title {
    border-radius: 0 0 0.3125rem 0.3125rem;
  }
}

@media (min-height: 640px) and (orientation: portrait) {
  .card .title {
    border-radius: 0 0 0.3125rem 0.3125rem;
  }
}

@media (min-width: 720px) and (min-aspect-ratio: 1 / 1) {
  .card .title {
    border-radius: 0 0 0.3125rem 0.3125rem;
  }
}

@media (min-width: 768px) {
  .card .title {
    border-radius: 0 0 0.5rem 0.5rem;
    font-size: 1.6rem;
  }
}

.card img {
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  display: block;
  border-radius: 0.25rem 0.25rem 0 0;
  width: 100%;
  height: 6.75rem;
}

@media (min-width: 400px) and (max-aspect-ratio: 1 / 1) {
  .card img {
    border-radius: 0.3125rem 0.3125rem 0 0;
    height: 8.4375rem;
  }
}

@media (min-height: 640px) and (orientation: portrait) {
  .card img {
    border-radius: 0.3125rem 0.3125rem 0 0;
    height: 8.4375rem;
  }
}

@media (min-width: 720px) and (min-aspect-ratio: 1 / 1) {
  .card img {
    border-radius: 0.3125rem 0.3125rem 0 0;
    height: 8.4375rem;
  }
}

@media (min-width: 768px) {
  .card img {
    border-radius: 0.5rem 0.5rem 0 0;
    height: 13.5rem;
  }
}

.card label:nth-of-type(even) .label {
  background: #d6f1ff;
}

.card label.selected .label {
  position: relative;
  z-index: 1000;
  box-shadow: 0 0 0 2px #006194;
}

.card label.win .label {
  position: relative;
  z-index: 1000;
  box-shadow: 0 0 0 2px #006194;
  transition: 0.1s all;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-name: blink;
          animation-name: blink;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

.card label.win .label .value {
  transition: 0.1s all;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-name: blink-value;
          animation-name: blink-value;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

.card label .label {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-radius: 0.15rem;
  padding: 0 0.25rem;
  height: 1.25rem;
}

@media (min-width: 400px) and (max-aspect-ratio: 1 / 1) {
  .card label .label {
    border-radius: 0.1875rem;
    padding: 0 0.3125rem;
    height: 1.5625rem;
  }
}

@media (min-height: 640px) and (orientation: portrait) {
  .card label .label {
    border-radius: 0.1875rem;
    padding: 0 0.3125rem;
    height: 1.5625rem;
  }
}

@media (min-width: 720px) and (min-aspect-ratio: 1 / 1) {
  .card label .label {
    border-radius: 0.1875rem;
    padding: 0 0.3125rem;
    height: 1.5625rem;
  }
}

@media (min-width: 768px) {
  .card label .label {
    border-radius: 0.3rem;
    padding: 0 0.5rem;
    height: 2.5rem;
  }
}

.card label .label .unit {
  font-size: 0.5rem;
}

@media (min-width: 400px) and (max-aspect-ratio: 1 / 1) {
  .card label .label .unit {
    font-size: 0.625rem;
  }
}

@media (min-height: 640px) and (orientation: portrait) {
  .card label .label .unit {
    font-size: 0.625rem;
  }
}

@media (min-width: 720px) and (min-aspect-ratio: 1 / 1) {
  .card label .label .unit {
    font-size: 0.625rem;
  }
}

@media (min-width: 768px) {
  .card label .label .unit {
    font-size: 1rem;
  }
}

.card label .label .value {
  color: #006194;
  font-size: 0.8rem;
  font-weight: 900;
}

@media (min-width: 400px) and (max-aspect-ratio: 1 / 1) {
  .card label .label .value {
    font-size: 1rem;
  }
}

@media (min-height: 640px) and (orientation: portrait) {
  .card label .label .value {
    font-size: 1rem;
  }
}

@media (min-width: 720px) and (min-aspect-ratio: 1 / 1) {
  .card label .label .value {
    font-size: 1rem;
  }
}

@media (min-width: 768px) {
  .card label .label .value {
    font-size: 1.6rem;
  }
}

.card input[type="radio"] {
  display: none;
}

@-webkit-keyframes blink {
  from {
    background: white;
    color: #333;
  }
  to {
    background: #006194;
    color: white;
  }
}

@keyframes blink {
  from {
    background: white;
    color: #333;
  }
  to {
    background: #006194;
    color: white;
  }
}

@-webkit-keyframes blink-value {
  from {
    color: #006194;
  }
  to {
    color: #d6f1ff;
  }
}

@keyframes blink-value {
  from {
    color: #006194;
  }
  to {
    color: #d6f1ff;
  }
}

.screen {
  display: none;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
}

.screen button {
  margin: 0.5em;
}

.screen-splash-estadao img {
  width: 66.6666%;
  max-width: 36rem;
}

.screen-splash-jornal-do-carro img {
  width: 75%;
  max-width: 48rem;
}

.screen-intro {
  padding: 4.5rem 0 7.5rem;
}

.screen-intro img {
  width: 24rem;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-filter: blur(5px);
          filter: blur(5px);
  transition: all 2s;
  transition-delay: 1s;
}

@media (min-width: 600px) and (max-aspect-ratio: 4 / 3) {
  .screen-intro img {
    width: 48rem;
  }
}

@media (min-width: 768px) {
  .screen-intro img {
    width: 48rem;
  }
}

.site-title {
  margin: 0.2em auto 1em;
  font-family: Flama, sans-serif;
  font-size: 4.4rem;
  font-weight: bold;
  line-height: 1.1;
  text-transform: uppercase;
  opacity: 0;
  transition: all 0.2s;
  -webkit-transform: translateY(-25%);
      -ms-transform: translateY(-25%);
          transform: translateY(-25%);
}

@media (min-aspect-ratio: 16 / 10) {
  .site-title {
    margin-bottom: 0;
  }
}

@media (min-width: 600px) and (max-aspect-ratio: 4 / 3) {
  .site-title {
    margin-bottom: 0.5em;
    font-size: 8.8rem;
  }
}

@media (min-width: 768px) {
  .site-title {
    margin-bottom: 0.5em;
    font-size: 8.8rem;
  }
}

.screen-splash,
.screen-intro,
.screen-win,
.screen-lose {
  padding: 1.5rem;
  background: linear-gradient(to bottom, rgba(0, 13, 20, 0.9) 0%, rgba(0, 119, 184, 0.9) 100%);
}

.screen-help,
.screen-board {
  background: linear-gradient(to bottom, #000d14 0%, #0077b8 100%);
}

.alert {
  margin: 0 auto 1em;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 600px) and (max-aspect-ratio: 4 / 3) {
  .alert {
    margin-bottom: 2em;
    font-size: 6rem;
  }
}

@media (min-width: 768px) {
  .alert {
    margin-bottom: 2em;
    font-size: 6rem;
  }
}

.topbar {
  display: none;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1050;
}

.homebar {
  margin-right: 4.5rem;
}

.brandbar {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
}

.brandbar a {
  text-decoration: none;
}

.brandbar img {
  margin-top: 1.6rem;
  height: 1.6rem;
}

@media (min-width: 360px) {
  .brandbar img {
    margin-top: 0.9rem;
    height: 2.4rem;
  }
}

.sharebar {
  display: none;
  position: absolute;
  bottom: 3rem;
  left: 0;
  width: 100%;
  height: 4.5rem;
  font-size: 4.2rem;
  line-height: 4.5rem;
}

@media (max-width: 767px) and (min-aspect-ratio: 4 / 3) {
  .sharebar {
    bottom: 2.25rem;
    height: 3.6rem;
    font-size: 3.4rem;
    line-height: 3.6rem;
  }
}

.sharebar ul {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sharebar li {
  display: block;
  margin: 0.15rem 0.2em;
}

.sharebar a {
  display: block;
  border-radius: 50%;
  padding-bottom: 0.3em;
  width: 4.5rem;
  height: 4.5rem;
  color: white;
  text-align: center;
  transition: all 0.2s;
}

@media (max-width: 767px) and (min-aspect-ratio: 4 / 3) {
  .sharebar a {
    width: 3.6rem;
    height: 3.6rem;
  }
}

@-webkit-keyframes animatedBackground {
  from {
    background-position: 100% 100%;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes animatedBackground {
  from {
    background-position: 100% 100%;
  }
  to {
    background-position: 0 0;
  }
}

[data-screen="intro"] .screen-intro img {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  -webkit-filter: blur(0);
          filter: blur(0);
}

[data-screen="intro"] .site-title {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.player p {
  margin: 0.5em;
  text-align: center;
}

.player-indicator {
  margin: 0;
  opacity: 0;
  font-size: 2.6rem;
}

.player-turn {
  margin: 1.5rem;
  line-height: 3rem;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 479px) and (max-aspect-ratio: 1 / 2) {
  .player-turn {
    display: none;
  }
}

@media (min-height: 360px) {
  .player-turn {
    margin: 1.5rem;
  }
}

@media (min-height: 480px) and (orientation: landscape) {
  .player-turn {
    margin: 3rem;
  }
}

@media (min-height: 640px) and (orientation: portrait) {
  .player-turn {
    margin: 1.5rem;
  }
}

@media (min-height: 640px) and (orientation: landscape) {
  .player-turn {
    margin: 3rem;
  }
}

.pool {
  margin: 0.5em;
  font-size: 0.8em;
}

.overlay {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
}

.ad-super-banner {
  display: none;
  position: absolute;
  bottom: 1.5rem;
  right: 0;
  left: 0;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (min-width: 1024px) {
  .ad-super-banner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

.texto-publicidade {
  display: none;
}

[data-screen="splash-estadao"] .screen-splash-estadao {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

[data-screen="splash-jornal-do-carro"] .screen-splash-jornal-do-carro {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

[data-screen="intro"] .topbar,
[data-screen="help"] .topbar,
[data-screen="board"] .topbar,
[data-screen="win"] .topbar,
[data-screen="lose"] .topbar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

[data-screen="intro"] .sharebar,
[data-screen="win"] .sharebar,
[data-screen="lose"] .sharebar {
  display: block;
}

[data-screen="intro"] .homebar {
  visibility: hidden;
}

[data-screen="intro"] .screen-intro {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

[data-screen="help"] .screen-help {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

[data-screen="help"] body,
[data-screen="board"] body {
  background: #003552;
}

[data-screen="board"] .screen-board {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

[data-screen="win"] .screen-win {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

[data-screen="lose"] .screen-lose {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

article {
  padding: 1.5rem;
  max-width: 54rem;
}

article h1 {
  color: #d6f1ff;
}

article p {
  text-align: left;
}

.more {
  font-size: 0.8em;
}

.more a {
  color: white;
}

@media (min-height: 360px) {
  .more a {
    display: block;
  }
}

.separator {
  display: none;
  position: relative;
  top: -0.4rem;
}

@media (min-width: 600px) {
  .separator {
    display: inline;
  }
}

.brand-estadao {
  display: none;
}

@media (min-width: 600px) {
  .brand-estadao {
    display: inline;
  }
}



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