/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

.hero--video {
  background-image: url("/assets/images/poster-home.jpg");
  background-position: center;
}

.hero--home {
  background-image: url("/assets/images/hero-home.jpg");
  background-position: center;
}

.hero--premio {
  background-image: url("/assets/images/hero-premio.png");
  background-position: center;
}

.hero--home .block-1 .content {
  font-size: 1.33rem;
}

.block .circle {
  position: absolute;
  width: 100px;
  height: 100px;
  top: -57px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

.slick-prev {
  left: 20px;
  z-index: 1;
}

.slick-next {
  right: 20px;
}

.slick-prev::before,
.slick-next::before {
  border-color: white;
}

#player {
  width: 100%;
  height: 100%;
}

/* Block 1 */

.block.block-1 {
  background: url("/assets/images/brasil-bg.png") no-repeat 15% center;
  background-size: 45%;
}

.block.block-1 .content {
  padding-left: 50px;
}

.block.block-1 .container-small {
  --color-hightlight: var(--color-text-highlight);
}

.block.block-1 .container-small h3 {
  color: var(--color-hightlight);
  font-size: 4rem;
  font-family: var(--font-secondary);
}

.block.block-1 .container-small .description .hightlight {
  font-size: 2rem;
  color: var(--color-hightlight);
}

/* Block 2 */
.block.block-2 {
  position: relative;
  /* background-color: #ece7e3; */
}

.block.block-2 .content .description .highlight {
  font-size: 1.8424rem;
  color: var(--color-tertiary);
  font-family: var(--font-secondary);
}

.block.block-2 .container-small h3 {
  font-size: 4rem;
  color: var(--color-tertiary);
  font-family: var(--font-secondary);
}

/* Block 3 */
.block.block-3 {
  position: relative;
  background-color: var(--color-primary);
}

.block.block-3 .container-small h3 {
  font-size: 4rem;
  color: var(--color-secondary);
  font-family: var(--font-secondary);
}

.block.block-3 .container-small .description {
  color: var(--color-secondary);
}

.block.block-3 .container-small a {
  color: var(--color-primary);
}

/* Block 4 */

.block.block-4 .container-small .content {
  width: 580px;
  margin: 0 auto;
}

.block.block-4 .container-small h3 {
  font-size: 2.8424rem;
  color: var(--color-tertiary);
  font-family: var(--font-secondary);
}

/* Block 5 */
.block.block-5 {
  position: relative;
  background-color: #ece7e3;
}

.block.block-5 .image-mobile {
  position: absolute;
  right: 0;
  top: -50px;
  z-index: 0;
}

.block.block-5 .container-small h3 {
  font-size: 2.8424rem;
  color: var(--color-tertiary);
  font-family: var(--font-secondary);
}

.block.block-5 .container-small h3.sub {
  color: var(--color-primary);
}

/* Block 6 */
.block.block-6 .container-small h3 {
  font-size: 2.8424rem;
  color: white;
  font-family: var(--font-secondary);
}

/* Wrapper CTA */
.wrapper-cta .container-small {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

/* Generics */
.block .description {
  font-size: 1.4212rem;
  line-height: 1.3;
}

.block .img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 256px;
  flex: 0 0 256px;
}

@media screen and (max-width: 768px) {
  .block.block-1 .content {
    padding-left: 16px;
  }

  .block.block-1 .container-small h3 {
    font-size: 4rem;
  }

  .block .img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 132px;
    flex: 0 0 132px;
  }

  .block .description {
    font-size: 2.429rem;
  }

  .block.block-1 .container-small .description .hightlight {
    font-size: 2.429rem;
  }

  .block.block-3 .container-small h3 {
    font-size: 4rem;
  }

  .block.block-5 .container-small h3 {
    font-size: 4rem;
  }

  .block.block-5 .image-mobile {
    width: 50%;
    top: -25px;
  }

  .block.block-5 .content .description {
    font-size: 2.429rem;
  }

  .block.block-5 .content p,
  .block.block-5 .content p a {
    font-size: 2rem;
    margin-bottom: 16px;
  }
}
