/* Reset */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* -ms-overflow-style: -ms-autohiding-scrollbar; */
  /* overflow: -moz-scrollbars-none; */
}

/* *::-webkit-scrollbar { width: 0 !important } */

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  border-bottom: .1rem solid currentColor;
  color: inherit;
  transition: color .2s;
}

/* Geral */

html {
  height: 100%;
  font-size: 62.5%;
  background: var(--palette-darkest);
}

@media (min-width: 360px) {
  html {
    font-size: 70%;
  }
}

@media (min-width: 420px) {
  html {
    font-size: 75%;
  }
}

body {
  height: 100%;
  font-family: 'Flama', sans-serif;
  color: #333;
  font-size: 1.6rem;
  line-height: 2.1rem;
}

p {
  margin: 24px 0;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 4.8rem;
  border-radius: 9999rem;
  text-transform: uppercase;
  padding: .8rem 1.2rem;
  line-height: 1;
  cursor: pointer;
}

@media (min-width: 480px) {
  .button:hover {
    opacity: .8;
  }
}

.button i + span {
  padding-left: 1.2rem;
}

.button span + i {
  padding-left: 1.2rem;
}

.button span {
  padding: 0 .4rem;
}


/* Cover */

.cover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* height: 28.8rem; */
  padding-top: 6.4rem;
  padding-bottom: 4.8rem;
  background-color: var(--palette-background);
}

.cover.extended {
  padding-bottom: 9.6rem;
}

.cover header {
  position: relative;
  width: calc( 100% - 4.8rem );
  max-width: 48rem;
  color: white;
  text-align: center;
}

.cover .title {
  text-transform: uppercase;
  padding: 2.4rem 0;
}

.cover .kicker {
  font-size: 2.1rem;
  line-height: 2.4rem;
}

.cover .highlight {
  display: block;
  color: var(--palette-highlight);
}

.cover h1 {
  font-size: 3.6rem;
  line-height: 4.2rem;
}

.cover p {
  text-align: left;
  color: rgba( 255, 255, 255, 0.8 );
}

.cover .meta {
  font-size: 1.4rem;
  line-height: 2.1rem;
  text-align: left;
  color: rgba( 255, 255, 255, 0.66 );
}

.cover .author {
  font-weight: bold;
}

.cover figure {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--palette-background);
}

.cover figure img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: .33;
}


/* Top bar */

.brand {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.4rem;
}

.brand a {
  border: none;
}

.brand.button img {
  width: 8.8rem;
}

.page .header {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 .8rem;
  z-index: 1;
  height: 6.4rem;
  color: white;
}

.menu,
.share {
  cursor: pointer;
}

.share i {
  font-size: 1.8rem;
}


/* Card */

.card {
  position: relative;
  background: white;
  border-radius: .8rem;
  width: 100%;
  max-width: 72rem;
  margin-bottom: 4.8rem;
  color: var(--palette-carousel-background);
  /* overflow: hidden; */
}

.content-container > .card:first-child {
  margin-top: -4.8rem;
}

.card .splash {
  border-radius: .8rem .8rem 0 0;
  overflow: hidden;
}

.swiper-lazy {
  opacity: 0;
  transition: all .4s;
}

.swiper-lazy.swiper-lazy-loaded {
  opacity: 1;
}

.splash .placeholder {
  position: relative;
  /* background-color: var(--palette-background); */
}

.splash .placeholder[data-ratio="3:2"] {
  height: 0;
  width: 100%;
  padding-bottom: 66.666%;
}

.splash .placeholder[data-ratio="1:1"] {
  height: 0;
  width: 100%;
  padding-bottom: 100%;
}

.splash .placeholder img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}

.splash .placeholder img:not([src]) {
  opacity: 0;
}

.splash .placeholder .img-background {
  object-fit: cover;
  opacity: .5;
  filter: blur( 5px );
  transform: scale( 1.5 );
}

.splash .placeholder .img-foreground {
  object-fit: contain;
}

.card {
  width: calc( 100% - 3.2rem );
}

.card header {
  padding: 0 2.4rem;
}

.card p {
  padding: 0 2.4rem;
  margin: 0 0 2.4rem 0;
}

.card .vote-area + .content {
  margin-top: 0;
}

.slides .card .vote-area {
  padding: 1.6rem 2.4rem;
}

.vote-area {
  display: flex;
  padding: 1.6rem;
  border-top: .1rem solid #eeeeee;
}

.vote-area .vote-button.disabled:not(.voted) {
  display: none;
}

.vote-area .vote-button.voted {
  opacity: .5;
  pointer-events: none;
}

.vote-area .vote-button.voted span {
  display: none;
}

.vote-area .vote-button.voted::before {
  content: 'Votou';
  padding: 0 .4rem;
}

.vote-area .vote-button {
  background: var(--palette-highlight);
  color: white;
  height: 3.2rem;
  margin-right: .8rem;
}

.vote-area .vote-count {
  display: flex;
  align-items: center;
  /* height: 3.2rem; */
  font-size: 80%;
  line-height: 1.333;
  opacity: .8;
}

.page .content .card p {
  max-width: initial;
  margin-right: initial;
  margin-left: initial;
}

p .material-icons:first-child {
  width: 3.2rem;
}

.card .label {
  position: absolute;
  top: 0;
  left: 1.6rem;
  display: block;
  line-height: 3.2rem;
  background: var(--palette-highlight);
  color: white;
  border-radius: .3rem;
  height: 3.2rem;
  padding: 0 .8rem;
  font-weight: bold;
  transform: translateY( -1.6rem );
  max-width: calc( 100% - 8rem );
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card .label:last-child {
  max-width: calc( 100% - 3.2rem );
}

.card .medals {
  position: absolute;
  top: 0;
  right: 1.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.2rem;
  width: 3.2rem;
  transform: scale( 1.2 ) translateY( -1.6rem );
}

.card .medal {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--palette-background);
  color: white;
  border-radius: 999rem;
  height: 3.2rem;
  width: 3.2rem;
  padding: 0;
  font-weight: bold;
  z-index: 2;
}

.card .medals::before {
  content: '';
  position: absolute;
  top: 1.6rem;
  left: .7rem;
  display: block;
  width: 1.8rem;
  height: 2.8rem;
  background-image: url(../img/stripe.svg);
  background-repeat: no-repeat;
  z-index: 1;
}

.card .medal.gold {
  background: #ddac31;
}

.card .medal.silver {
  background: #a2afba;
}

.card .medal.bronze {
  background: #dd733e;
}

.card .medal.gold span::before {
  content: '1º';
}
.card .medal.silver span::before {
  content: '2º';
}
.card .medal.bronze span::before {
  content: '3º';
}

.splash figure {
  position: relative;
}

.splash figure img {
  opacity: .9;
}

.badges {
  position: relative;
  z-index: 1;
}

.splash figcaption {
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  padding: .8rem 1.2rem;
  font-size: 1rem;
  color: white;
  text-shadow: 0 0 0.8rem rgba( 0, 0, 0, .5 );
}


/* Slider */

.sliders {
  width: 100%;
}

.sliders.native-scroll .swiper-container {
  padding-bottom: 2.4rem;
  padding-right: 2.4rem;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.sliders.native-scroll .swiper-container .swiper-wrapper::after {
  content: '';
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
}

.sliders:not(.native-scroll) .slider:first-child .swiper-container::before {
  content: '← Clique e arraste →';
  width: 100%;
  display: flex;
  padding: .8rem 0;
  justify-content: center;
  text-transform: uppercase;
  font-size: 75%;
  opacity: .75;
}

.slider .swiper-wrapper {
  padding-top: 2.4rem;
}

.sliders .swiper-slide {
  width: 24rem;
}

.sliders .card {
  background: white;
  width: 100%;
  border-radius: .8rem;
  margin-bottom: 0;
}

.sliders .card .medals {
  transform: scale( 1 ) translateY( -1.6rem );
}

.sliders .swiper-slide + .swiper-slide {
  margin-left: 1.2rem;
}

.sliders > ul {
  display: flex;
  flex-direction: column;
}

.sliders ul > li {
  padding: 4.8rem 0;
  border-top: 1px solid #dddddd;
}

.sliders .intro {
  max-width: 52.8rem;
  margin: 0 auto;
}

.sliders .intro > h2 {
  text-transform: uppercase;
  font-size: 1.6rem;
  padding: 0 2.4rem;
  margin-bottom: 1.6rem;
  /* height: 2.4rem; */
  /* line-height: 0; */
}

.page .sliders .intro > p {
  margin-top: 0;
  padding: 0;
  max-width: calc( 100% - 4.8rem );
}

.sliders .swiper-container {
  padding: 0 2.4rem;
}

.sliders .card header {
  padding: 1.6rem;
}

.sliders .tagline {
  font-size: 80%;
  line-height: 1;
}

.sliders .card h1 {
  font-size: 1.6rem;
}

/* Text */

/* section.text {
  max-width: 48rem;
} */

.page .content .text header,
.page .content p {
  padding: 0 2.4rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem;
  max-width: calc( 48rem + 4.8rem);
}

.page .content .text header {
  padding: 0 2.4rem;
}

.page .content .text p {
  padding: 0 2.4rem;
}

.content > figure {
  max-width: 128rem;
  width: calc( 100% - 4.8rem );
  margin: 3.2rem auto;
}

.content > figure.medium {
  max-width: 54rem;
}

.content > figure.small {
  max-width: 43.2rem;
}

.content > figure figcaption {
  /* background: pink; */
  font-size: 75%;
  line-height: 1;
  padding: 1.2rem;
  text-align: left;
  opacity: .75;
}

/* List */

.list {
  width: 100%;
}

.list ol {
  padding: 0 2.4rem;
  width: 100%;
}

.list li {
  width: 100%;
}

.list li + li {
  margin-top: 2.4rem;
}

.list .mini-card {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 9.6rem;
  background: white;
  border-radius: .8rem;
  overflow: hidden;
}

.list .mini-card .info {
  padding: 1.6rem;
}

.list .mini-card figure {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 9.6rem;
  height: 9.6rem;
}

.list .mini-card figure img {
  max-width: initial;
  height: 9.6rem;
}


/* Tab */

.carousel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  /* bottom: 0; */
  left: 0;
  z-index: 2;
  color: white;
  background: var(--palette-carousel-background);
  transform: translateY( 100% );
  transition: transform .8s ease-in-out;
  -webkit-font-smoothing: antialiased;
}

.carousel .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel .background img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: initial;
  object-fit: cover;
  opacity: .25;
  filter: blur( 10px );
}

.app.carousel-open .carousel {
  transform: translateY( 0 );
}

.carousel .header {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 .8rem;
  z-index: 2;
  height: 6.4rem;
  color: white;
}

.carousel .header::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  left: 0;
  height: 16rem;
  pointer-events: none;
}

.carousel .header > * {
  position: relative;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
  transition-delay: .8s;
  z-index: 3;
}

.app.carousel-open .carousel .header > * {
  pointer-events: all;
  opacity: 1;
}

.app.carousel-open .container{
  /* overflow: hidden; */
}

.carousel .handle {
  background: var(--palette-carousel-background);
  border-radius: 2.4rem 2.4rem 0 0;
  box-shadow: 0 0 0 0 var(--palette-carousel-background);
  transition: box-shadow .4s;
  pointer-events: all;
}

.carousel .handle:hover {
  opacity: 1;
  /* box-shadow: 0 0 0 .4rem var(--palette-carousel-background); */
}

.handle-wrapper {
  position: absolute;
  top: -5.1rem;
  left: 0;
  right: 0;
  height: 5.2rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transform: translateY( 0 );
  transition: transform .4s ease-in-out;
  pointer-events: none;
}

.mobile-safari .handle-wrapper {
  transform: translateY( -44px ); /* iOS bottom dead-dlick zone fix */
}

.mobile-safari .handle {
  border-radius: 2.4rem;
}

.carousel .card {
  width: 100%;
  margin-bottom: 9.6rem;
}

.carousel .swiper-container {
  width: 100%;
  height: 100%;
}

.carousel .swiper-slide {
  display: flex;
  justify-content: center;
  width: calc( 100% - 4.8rem );
  max-width: calc( 54rem + 1.6rem);
  transition: transform .4s, opacity .4s;
}

.carousel .swiper-slide .card {
  max-width: 54rem;
  transition: transform .4s;
}

@media ( min-width: 800px ) {

  .carousel .swiper-slide {
    opacity: .2;
  }

  .carousel .swiper-slide.swiper-slide-active {
    opacity: 1;
  }

  .carousel .swiper-slide .card {
    transform: scale( .9 );
  }

  .carousel .swiper-slide.swiper-slide-active .card {
    transform: scale( 1 );
  }

}

.carousel .scroll-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-height: 100vh;
  padding-top: 16.8rem;
  padding-bottom: 0;
  overflow: hidden;
}

.carousel .swiper-slide-active .scroll-container {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}


/* Counter */

.slides .fixed {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  top: 6.4rem;
  right: 0;
  left: 0;
}

.slides .fixed .counter {
  display: inline-flex;
  height: 4.8rem;
  background: var(--palette-darkest);
  margin: 2.4rem 0;
  border-radius: 999rem;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transform-origin: center top;
  transition: .4s transform, .4s margin;
}

.slides .fixed .counter .button i {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 2.4rem;
}

.slides .counter .button {
  padding: 1.2rem;
  transition: .4s padding, .4s height;
}

.slides .counter .button.next.swiper-button-disabled {
  display: none;
}

.button.rewind {
  display: none;
}

.slides .counter .button.next.swiper-button-disabled + .rewind {
  display: block;
  transform: rotateY( 180deg );
}

.slides .counter .display {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.4rem;
  font-weight: bold;
  transition: .4s font-size;
}

.slides .counter .current,
.slides .counter .total {
  position: relative;
  margin-top: -.2rem;
}

.slides .counter .current .placeholder {
  color: transparent;
  opacity: 0;
}

.slides .counter .current span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: right;
}

.slides .counter .separator {
  position: relative;
  margin-top: -.6rem;
  padding: 0 .8rem;
}

.slides .counter .separator::before {
  content: '/';
}

.scrolling .slides .fixed .counter {
  transform: scale( .666 ) translateY( -50% );
}

/* App skeleton */

.app {
  width: 100%;
  height: 100%;
  background: var(--palette-navigation-background);
}

.app .perspective-wrapper {
  perspective: 1000px;
  width: 100%;
  height: 100%;
}

.app .container {
  width: 100%;
  height: 100%;
  border-radius: 0;
  transition: transform .4s ease-in-out, border-radius .4s;
}

.app .container::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 102%;
  display: block;
  background: linear-gradient(
    to right,
    rgba( 52, 47, 60, .95 ),
    rgba( 52, 47, 60, 0 )
  );
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity .4s;
}

.page {
  position: relative;
  width: 100%;
  height: 100%;
}

.page .content {
  width: 100%;
  background-color: var(--palette-neutral-light);
}

.page .content .content-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app.menu-open {
  overflow: hidden;
}

.app.menu-open .container {
  transform: rotateY( -30deg ) scale( .75 ) translateX( 75% );
  border-radius: .8rem;
  overflow: hidden;
}

.app.menu-open .container::after {
  opacity: 1;
}

.app.menu-open .handle-wrapper {
  transform: translateY( 100% );
}

.app.menu-open .navigation {
  transform: translateX( 0 );
}


/* Navigation */

.navigation {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60vw;
  color: white;
  padding: 10vh 0 10vh 6.666vw;
  transform: translateX( -100% );
  transition: transform .4s ease-in-out;
}

.navigation .scroll-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.navigation a {
  border: none;
  font-size: 1.8rem;
}

.navigation a:hover {
  color: var(--palette-highlight);
}

.navigation div > ul > li {
  margin: 2.4rem 0;
}

.navigation div > ul > li span {
  font-size: 1.4rem;
  text-transform: uppercase;
  opacity: .5;
}

.navigation div > ul > li > ul li {
  margin: .8rem 0;
}

.navigation div > ul > li:first-child {
  margin-top: 0;
}
.navigation div > ul > li:last-child {``
  margin-bottom: 0;
}


/* Credits */

.credits {
  width: 100%;
  background: #dddddd;
  padding: 4.8rem 2.4rem 9.6rem;
  /* margin-bottom: -4.8rem; */
  margin-top: 4.8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: .75;
  font-size: 75%;
  line-height: 1.333;
}

.credits p {
  max-width: 28.8rem;
}


/* Stats */

.stats {
  display: flex;
  flex-direction: column;
  padding: 1.6rem;
  border-top: .1rem solid #eeeeee;
}

.stats > div {
  display: flex;
  width: 100%;
}

.stats .subject {
  width: 50%;
  padding: .8rem;
  display: flex;
  flex-shrink: 0;
}

.stats .score {
  display: flex;
  padding: .8rem 0 .8rem .8rem;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.stats .bar {
  position: relative;
  width: 100%;
  height: 6px;
}

.stats .bar::before {
  content: '';
  display: block;
  position: absolute;
  background: var(--palette-highlight);
  height: 100%;
  width: 100%;
  opacity: .25;
  border-radius: 6px;
}

.stats .bar .fill {
  position: relative;
  height: 100%;
  background: var(--palette-highlight);
  border-radius: 999px;
}

.card .stats .score .value {
  width: 4.8rem;
  justify-content: flex-end;
}

.stats [data-stars] {
  position: relative;
  bottom: -.4rem;
}

.stats .value {
  display: flex;
  font-size: 75%;
  line-height: .75;
  padding: 0 1.2rem;
}

.mini-card .stats {
  padding: 0;
}

/* The styles below were on index */

.card .content {
  background: initial;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  margin-top: 2.4rem;
}

.card {
  margin-right: auto;
  margin-left: auto;
}

.page .content .text p + p {
  margin-top: 0;
}

.page .content .text h2 {
  margin: 3.2rem 0 1.6rem;
}

.page .content .text h3 {
  margin: 3.2rem 0 .8rem;
}

.content header,
.card header {
  text-transform: uppercase;
  padding: 3.2rem 2.4rem 0;
  line-height: 1.333;
}

.card header {
  display: flex;
  flex-direction: column;
}

.card .tagline {
  text-transform: none;
  font-weight: normal;
  line-height: 1.333;
  margin-top: .8rem;
  opacity: .8;
}

.card h1 {
  font-size: 2.4rem;
}

.card h2 {
  font-size: 1.8rem;
}

.trivia h4 {
  font-size: 1.2rem;
  line-height: 1;
  text-align: center;
}

.card .kicker {
  padding: 3.2rem 2.4rem 0;
  line-height: 1.333;
  font-weight: bold;
  font-size: 75%;
  text-transform: uppercase;
}

.featured {
  border-top: .1rem solid #eeeeee;
  border-bottom: .1rem solid #eeeeee;
  display: flex;
  text-align: center;
}

.featured > div {
  padding: 1.2rem;
  width: 100%;
}

.featured > div + div {
  border-left: .1rem solid #eeeeee;
}

.featured .featured-label {
  text-transform: uppercase;
  font-size: 75%;
  opacity: .75;
  line-height: 1;
  margin-bottom: .4rem;
}

.featured .featured-value {
  font-size: 150%;
  font-weight: bold;
  line-height: 1;
}

.featured .featured-value:empty::before {
  content: '–';
  opacity: .25;
}

a.call-to-action {
  display: flex;
  justify-content: center;
  border: none;
  border-radius: 0 0 .8rem .8rem;
  padding: 1.2rem 2.4rem;
  border-top: 1px solid #eeeeee;
  font-size: 1.2rem;
  transition: background-color .2s;
}

a.call-to-action:hover {
  background: #f4f4f4;
}

a.call-to-action > div {
  display: flex;
  align-items: center;
}

.call-to-action .material-icons {
  transform: rotateY( 180deg );
  margin-left: .8rem;
  font-size: 1.6rem;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.rating {
  display: flex;
  flex-direction: column;
  padding: 1.6rem
}

.rating > div {
  display: flex;
  width: 100%;
}

.rating .subject {
  width: 50%;
  padding: .8rem;
  display: flex;
  flex-shrink: 0;
}

.rating .score {
  display: flex;
  padding: .8rem;
  align-items: baseline;
}

.card .rating .score .value {
  display: none;
}

.rating [data-stars] {
  position: relative;
  bottom: -.4rem;
}

.rating .value {
  display: flex;
  font-size: 75%;
  line-height: .75;
  padding: 0 1.2rem;
}

.mini-card .rating {
  padding: 0;
}

.mini-card .score {
  padding: 0;
}

.trivia {
  max-width: 48rem;
  width: 100%;
  padding: 2.4rem;
}

.trivia > div {
  display: flex;
  border-top: 1px solid #dddddd;
  padding: 1.6rem 0 3.2rem;
}

.trivia .number {
  position: relative;
  bottom: -.2rem;
  width: 25%;
  text-align: center;
  font-size: 125%;
  font-weight: bold;
  line-height: 1;
}

.trivia .text {
  width: 75%;
}

.trivia .heading {
  margin: 0;
  padding: 0;
}

.page .content .text .trivia header {
  padding: 0;
  padding-bottom: 2.4rem;
}

.pros-and-cons {
  display: flex;
  flex-direction: column;
  border-top: .1rem solid #eeeeee;
}

.pros,
.cons {
  display: flex;
  padding: 0 2.4rem 2.4rem;
}

.card .pros p,
.card .cons p {
  margin: 0;
  padding: 0;
}

.pros::before,
.cons::before {
  width: 4.8rem;
  flex-shrink: 0;
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.pros::before {
  content: 'check';
  color: #8ba566;
}

.cons::before {
  content: 'close';
  color: #c15757;
}

.list {
  margin-bottom: 9.6rem;
}

[data-stars] {
  position: relative;
  width: 8rem;
  height: 1.6rem;
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

[data-stars]::before {
  content: 'star';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 1.6rem;
  color: #ddd;
  text-shadow:
    1.6rem 0 0,
    3.2rem 0 0,
    4.8rem 0 0,
    6.4rem 0 0;
}

[data-stars]::after {
  content: 'star';
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.6rem;
  color: orange;
  width: 100%;
  overflow: hidden;
  text-shadow:
    1.6rem 0 0,
    3.2rem 0 0,
    4.8rem 0 0,
    6.4rem 0 0;
}

[data-stars="0"  ]::after { width: 0%;   }
[data-stars="0.5"]::after { width: 10%;  }
[data-stars="1"  ]::after { width: 20%;  }
[data-stars="1.5"]::after { width: 30%;  }
[data-stars="2"  ]::after { width: 40%;  }
[data-stars="2.5"]::after { width: 50%;  }
[data-stars="3"  ]::after { width: 60%;  }
[data-stars="3.5"]::after { width: 70%;  }
[data-stars="4"  ]::after { width: 80%;  }
[data-stars="4.5"]::after { width: 90%;  }
[data-stars="5"  ]::after { width: 100%; }

/* Compartilhamento */
.overlay {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

.overlay.show {
  display: flex;
}

.modal {
  /* justify-content: flex-end; */
  /* align-self: flex; */
  /* position: relative; */
  /* width: 28.8rem; */
  /* background: white; */
}

.modal {
  position: relative;
  /* margin-bottom: 4.8rem; */
  border-radius: 0.8rem;
  /* padding: 0.8rem 0 1.6rem; */
  padding: 0;
  width: 100%;
  max-width: 28.8rem;
  background: white;
  color: var(--palette-carousel-background);
  overflow:hidden;
}

.modal button,
.modal input[type=text] {
  outline: none;
}

.modal [role=button] {
  width: 100%;
  background: transparent;
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  border-bottom: 0;
  padding: 0 1.6rem;
  height: 4.8rem;
  cursor: pointer;
  outline: 0;
  -webkit-transition: background .3s,color .3s;
  transition: background .3s,color .3s;
  text-decoration: none;
}

.modal [role=button]:hover,
.modal [role=button]:focus {
  background: #f2f2f2;
}

.social .fa {
  width: 2.4rem;
  margin-right: 1.2rem;
  text-align: center;
}

.facebook {
  color: #3b5998;
}

.google-plus {
  color: #dd4b39;
}

.linkedin {
  color: #0077b5;
}

.mail {
  color: #666666;
}

.twitter {
  color: #1da1f2;
}

.whatsapp {
  color: #25d366;
}

.clipboard {
  display: flex;
  display: none;
  padding: 0 1.6rem;
}

.clipboard-text {
  flex: 1;
  letter-spacing: .033em;
  color: #777;
  font-size: 1.2rem !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 3.5rem;
  border: 1px solid #ddd;
  border-right: none;
  border-radius: 0.3rem 0 0 0.3rem;
  padding: 0.4rem;
  font-family: Flama, sans-serif;
  transition: color 0.3s;
}

.clipboard-button {
  /* margin-left: 1.6rem; */
  border: none;
  border-radius: 0 0.3rem 0.3rem 0;
  padding: 0.6rem 1.2rem;
  background-color: var(--palette-background);
  color: white;
  font-family: Flama, sans-serif;
  font-size: 1.2rem;
  /* font-weight: bold; */
  text-transform: uppercase;
  cursor: pointer;
}

.clipboard-button:hover,
.clipboard-button:focus {
  background-color: var(--palette-highlight);
}

.scroll-container .ps__rail-y,
.scroll-container .ps__thumb-y {
  opacity: 0 !important;
}