* {
  margin: 0;
  padding: 0;
  border: 0;
}
@font-face {
  font-family: "Barlow";
  src: url(fonts/Barlow_Condensed/BarlowCondensed-Regular.ttf);
}

@font-face {
  font-family: "Paytone One";
  src: url(fonts/Paytone-One-Regular-400.ttf);
}

body {
  /* background: linear-gradient(
    221.04deg,
    #480d21 19.79%,
    rgba(193, 25, 82, 0.881895) 96.47%,
    rgba(203, 61, 109, 0.272222) 114.89%,
    rgba(248, 83, 138, 0) 115.35%
  ); */
  /*  background: #ce2a36; */

  font-family: "Barlow";
  overflow: hidden;
  background: #fff6f3;
}

main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  width: 100%;
  background: #f9182d;
  display: flex;
  height: 12vw;
  align-items: center;
  border-radius: 0 0 1vw 1vw;
  justify-content: center;
  position: absolute;
  top: 0;
  box-shadow: inset 0 -2.14vw 2.92vw rgb(0 0 0 / 15%);
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 2.73vw;
}
header .logo {
  height: 4.4vw;
}
.cards_ {
  position: absolute;
  height: 100vh;
  width: 100vw;
}

#containerQuestions {
  width: 91.57vw;
  margin: 0 auto;
  height: 78vh;
}
#container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.questionDiv {
  min-height: 4.81vw;
  display: flex;
  font-family: "Paytone One";
  align-items: center;
  font-style: normal;
  font-weight: 500;
  font-size: 1.2em;
  line-height: 4.07vw;
  /* text-align: center; */
  color: #ffffff;
  /* height: 4vh; */
  /* text-align: center; */
  /* display: flex; */
  justify-content: center;
}

.answerDivContainer {
  /* padding-top: 1.81vw; */
  min-height: 61.96vh;
  display: flex;
  /* display: grid; */
  grid-template-columns: 5fr;
  /* grid-gap: 0.8vw; */
  grid-row: 1;
  /* flex-direction: row; */
  position: absolute;
  top: 19vh;
  align-items: center;
}

.question-number {
  font-family: "Barlow";
  font-weight: bold;
}
.answerDiv {
  width: 17.5vw;
  font-size: 1.6vw;
  /* min-height: 7.31vw; */
  background: #fff;
  color: #000;
  border-radius: 0.92vw;
  display: flex;
  align-items: center;
  height: 25vw;
  flex-direction: column;
  background: #ffffff;
  /* margin-right: 0.8vw; */
  box-shadow: 0px 0.4vw 0.4vw rgba(0, 0, 0, 0.25);
  margin: 0 0.5vw;
}
.answerDiv p {
  height: 30%;
  text-align: center;
  margin: 1.06vw 0.66vw 0 0.66vw;
  font-weight: bold;
  width: 72%;
}

.answerDiv .c-image {
  width: 100%;
  height: 60%;
  /* background-color: red; */

  background: rgba(238, 238, 238, 0.4);
  /* background: #EEEEEE;*/
  border-radius: 0.97vw;
}

.answerDiv .c-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.97vw 0.97vw 0 0;
}
.pagesDiv {
  display: flex;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.57vw;
  align-items: center;
  text-align: center;
  color: #000000;
  font-weight: bold;
  justify-content: center;
  flex-direction: column;
}
.sendContainer,
.previousContainer,
.pagesDiv {
  /* color: #000000; */
  width: 33.33%;
}
.previousContainer {
  display: flex;
  /* background: red; */
  width: 24vw;
  /* height: 5vw; */
  position: absolute;
  z-index: 0;
  left: 4.64vw;
  bottom: 9vw;
  height: 4.64vw;
}
.previous-c {
  width: 24vw;
  position: absolute;
  z-index: 0;
  left: 7.64vw;
  bottom: 7vw;
  height: 4.64vw;
}

.sendContainer {
  display: flex;
  justify-content: flex-end;
}

.buttonSendPrevious {
  /* width: 21.97vw; */
  /* height: 6.64vw; */
  border-radius: 0.92vw;
  display: flex;
  /* align-items: center; */
}
/* background: #f9182d;
 */
.send {
  background: #fff;
  justify-content: space-between;
  margin-right: 2vw;
  position: absolute;
  bottom: 9vw;
  height: 4.64vw;
  right: 2vw;
  box-shadow: 0 0.01vw 0.93vw rgba(0, 0, 0, 0.25);
}
.previous {
  background: #fff;
  position: absolute;
  bottom: 9vw;
  left: 11vw;
  height: 4.64vw;
  width: 17.87vw;
  /* width: 21.97vw; */
  box-shadow: 0 0.01vw 0.93vw rgb(0 0 0 / 25%);
  bottom: 0;
  left: 6vw;
}

.send p,
.previous p {
  font-size: 3.125vw;
  color: #000;
}

.init p {
  font-size: 3.125vw;
  color: #fff;
  margin-left: 2.92vw;
  padding-top: 1.3vw;
}

.send p {
  margin-left: 2.92vw;
  padding-top: 0.3vw;
}
.previous p {
  color: #000;
  padding-top: 0.3vw;
  margin-left: 0.11vw;
}
.navigationDiv {
  height: 6.25vw;
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100vw;
  background: #ffffff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
  justify-content: center;
}

.c-home {
  width: 5vw;
  height: 4.64vw;
  border-radius: 1vw;
  /* margin: 0 1vw 0 3vw; */
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  box-shadow: 0 0.01vw 0.93vw rgb(0 0 0 / 25%);
  left: 0;
}

.c-home img {
  height: 80%;
}

.arrowLeftContainer {
  width: 4.62vw;
  height: 100%;
  display: flex;
  justify-content: center;
}
.init .arrowG {
  height: 0.27vw;
  width: 2.5vw;
  position: absolute;
}
.init .arrow45g,
.previous .arrow45g {
  transform: matrix(-0.71, 0.7, 0.71, 0.71, 0, 0);
  margin-top: 1.85vw;
}
.init .arrow135g,
.previous .arrow135g,
.init .arrow45g,
.previous .arrow45g {
  background-color: #000;
}

.init .arrow135g {
  transform: matrix(-0.71, -0.7, -0.71, 0.71, 0, 0);
  margin-top: 3.33vw;
}

.init .arrow315g,
.init .arrow225g {
  background-color: #fff;
}

.div-result {
  font-size: 4.88vw;
  font-family: "Paytone One";
  /* padding-left: 0.97vw; */
  text-align: left;
  /* padding-left: 4vw; */
  /* padding-top: 3vw; */
  padding: 0 0 0 4vw;
}

.text-secundary {
  font-size: 2.14vw;
  font-family: "Barlow";
  text-align: left;
  width: 76%;
  padding: 2vw 0 0 4vw;
}

.init .arrow315g {
  transform: matrix(0.71, 0.7, -0.71, 0.71, 0, 0);
  margin-top: 2.25vw;
}

.send .arrow225g {
  transform: matrix(0.71, -0.7, 0.71, 0.71, 0, 0);
  margin-top: 3vw;
}

.send .arrowG,
.previous .arrowG {
  height: 0.27vw;
  width: 2.2vw;
  position: absolute;
}
.send .arrow45g {
  transform: matrix(-0.71, 0.7, 0.71, 0.71, 0, 0);
  margin-top: 1.85vw;
}
.previous .arrow45g {
  margin-top: 1.55vw;
}

.send .arrow135g {
  transform: matrix(-0.71, -0.7, -0.71, 0.71, 0, 0);
  margin-top: 3.33vw;
}

.previous .arrow135g {
  margin-top: 3vw;
  transform: matrix(-0.71, -0.7, -0.71, 0.71, 0, 0);
}

.send .arrow315g,
.send .arrow225g,
.previous .arrow135g {
  background-color: #000;
}

.send .arrow315g {
  transform: matrix(0.71, 0.7, -0.71, 0.71, 0, 0);
  margin-top: 1.55vw;
}

.init .arrow225g {
  transform: matrix(0.71, -0.7, 0.71, 0.71, 0, 0);
  margin-top: 3.9vw;
}

.containerProduct {
  display: flex;
  /* flex-direction: column; */
  /* font-size: 3.62vw; */
  background: #fff;
  /* color: #000; */
  width: 86vw;
  height: 66vh;
  /* align-items: center; */
  /* margin: 0 auto; */
  text-align: center;
  box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
  border-radius: 0.97vw;
  /* margin: auto;*/
}

.containerProduct .c {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.containerProduct strong {
  font-size: 5.46vw;
}
.img_vinho {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 0.97vw 0.97vw 0;
}

.c-d-flex {
  display: flex;
  height: 87vh;
  flex-direction: column;
  justify-content: space-between;
}

#layer_1 {
  z-index: 2;
}

#layer_2 {
  z-index: 3;
}

.pop-up {
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  position: fixed;
  width: 100vw;
  height: 100vh;

  margin: 0 auto;
}

.pop-up-c {
  background: #fff8f3;
  border-radius: 0.92vw;
  margin: auto;
}

.button-x {
  width: 3.9vw;
  height: 3.9vw;
  background: #f9182d;
  box-shadow: inset -6px -6px 20px rgba(0, 0, 0, 0.25);
  /* border-radius: 0.97vw; */
  border-radius: 0.92vw;
  position: absolute;
  top: auto;
  right: 25.9vw;
}
.button-x .deg45-r {
  transform: rotate(-45deg);
}
.button-x .deg135-r {
  transform: rotate(-135deg);
}
.button-x div {
  position: absolute;
  width: 0.39vw;
  height: 2.92vw;
  background: #fff6f3;
  top: 0.5vw;
  right: 1.7vw;
}

#layer_1 .pop-up-c {
  width: 80vw;
  height: 23vw;
  box-shadow: inset 0 0.39vw 0.97vw rgb(0 0 0 / 25%);
}

#layer_1 .pop-up-c h1 {
  width: 77%;
  margin: 3vw auto;
  text-align: center;
  font-size: 2.7vw;
}

#layer_2 .pop-up-c {
  width: 48vw;
  height: 14vw;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 2.7vw;
  height: 13vw;
}
#layer_2 .pop-up-c .text {
  width: 65%;
  margin: 1vw auto 1vw auto;
}

#layer_1 .c {
  display: flex;
  /* margin: 0 auto; */
  justify-content: center;
  /* gap: 1vw; */
}

#layer_1 .choice-c {
  width: 5.5vw;
  height: 5vw;
  background: #f9182d;
  border-radius: 1vw;
  color: #fff8f3;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3vw;
  box-shadow: 0 0.39vw 0.39vw rgb(0 0 0 / 25%),
    inset 0 0.39vw 0.39vw rgb(0 0 0 / 25%);
  font-family: "Paytone One";
  margin: 0 0.5vw;
}

#card_3 {
  background: #ce2a36;
  display: flex;
  justify-content: center;
  align-items: center;
}

#card_4 {
  background: #ce2a36;
}
#card_4 h1 {
  text-align: center;
  width: 100%;
  color: #fff;
  margin: 6vw auto 3vw auto;
  font-family: "Paytone One";
  font-size: 4.1vw;
}
#card_4 .c {
  width: 84.375vw;
  height: 30.07vw;
  margin: 0 auto;
  display: flex;
  /* gap: 0.8vw; */
}

#card_4 .c .c-els {
  height: 100%;
  width: 20.5vw;
  background: #fff6f3;
  border-radius: 0.97vw;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.8vw;
}

#card_4 .c .c-els img {
  max-width: 81%;
  max-height: 84%;
  padding-bottom: 2vw;
}

#card_4 .c .c-els .c-saiba {
  width: 11.71vw;
  height: 5.27vw;
  background: #ce2a36;
  color: #fff6f3;
  font-size: 22px;
  font-family: "Barlow";
  right: -1px;
  bottom: 2vw;
  border-radius: 0.97vw 0 0 0.97vw;
  position: absolute;
  /* padding: 2vw; */
  z-index: 1;
}
#card_4 .c .c-els .c-saiba p {
  margin: 1.3vw 0 0 1.6vw;
  font-size: 2.14vw;
}
#back-image {
  position: absolute;
  top: 12vh;
  z-index: -1;
  width: 100vw;
  height: 107vh;
  object-fit: cover;
}

.c h1 {
  color: #000;
  text-align: center;
  margin-top: 3vw;
  font-size: 3vw;
  position: absolute;
  left: 5vw;
  top: 49vh;
  width: 31vw;
  text-align: left;
  font-size: 4.1vw;
  line-height: 4vw;
}

.c-quiz {
  width: 29.5vw;
  height: 11.62vw;
  background: #ffffff;
  box-shadow: 0 0.39vw 0.39vw rgba(0, 0, 0, 0.25);
  border-radius: 0 2.53vw 2.53vw 0;
  position: absolute;
  left: 0;
  top: 28vh;
}

.c-quiz p {
  font-family: "Paytone One";
  font-style: normal;
  font-size: 8.2vw;
  color: #df0021;
  text-align: center;
}

.b-sugest {
  width: 27.63vw;
  height: 6.34vw;
  background: #f9182d;
  box-shadow: 0px 0.68vw 1.56vw rgb(0 0 0 / 25%);
  border-radius: 0.97vw;
  font-family: "Paytone One";
  font-size: 2.44vw;
  display: flex;
  text-align: center;
  color: #fff;
  justify-content: center;
  margin: 3vw 0 0 4vw;
}

.b-sugest p {
  padding-top: 4%;
}

#card_1 .c {
  width: 79vw;
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center;
}

#card_1 .init {
  /* margin-top: 0vw; */
  position: absolute;
  left: 5vw;
  top: 77vh;
  background: #f9182d;
  justify-content: space-between;
  margin-right: 2vw;
  width: 21.97vw;
  height: 6.64vw;
}

#card_5 {
  /* position: absolute; */
  z-index: 3;
  /* top: 0; */
}

#card_5 .c1 {
  width: 27%;
  background: #f9182d;
  height: 100%;
}
#card_5 .c2 {
  width: 73%;
  background: #fff6f3;
  height: 100%;
}

#card_5 .l_1 {
  width: 33.49vw;
  height: 48.44vw;
  background: #ffffff;
  box-shadow: 0 1.26vw 2.14vw rgba(0, 0, 0, 0.25);
  border-radius: 0.97vw;
  position: absolute;
  /* z-index: 0; */
  top: 7vw;
  left: 5vw;
}
.show_card_4 {
  width: 5vw;
  top: 1vw;
  left: 5vw;
}

#card_5 .l_2 {
  width: 51.49vw;
  height: 48.44vw;
  background: #ffffff;
  box-shadow: 0 1.26vw 2.14vw rgba(0, 0, 0, 0.25);
  border-radius: 0.97vw;
  position: absolute;
  /* z-index: 0; */
  top: 7vw;
  left: 43vw;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#card_5 .l_1 .c_1 {
  width: 24.02vw;
  height: 29.42vw;
  background: #fff6f3;
  box-shadow: 0px 0.39vw 0.39vw rgba(0, 0, 0, 0.25);
  border-radius: 1.95vw;
  margin: 3vw auto 2vw auto;
  display: flex;
}

#card_5 .l_1 h1 {
  color: #000;
  font-family: "Barlow";
  /* margin: 0 auto; */
  font-size: 2.51vw;
  margin: 0 0 0 5vw;
  width: 81%;
  line-height: 3.22vw;
}

#card_5 .l_1 .c_2 {
  font-size: 2.44vw;
  font-weight: 300;
  margin: 0.5vw auto;
  width: 69%;
  display: flex;
  align-items: center;
}

#card_5 .l_2 .c_3 {
  width: 80%;
  margin: 2.5vw auto 0 auto;
  display: flex;
  flex-wrap: wrap;
}

#card_5 .l_2 .c_3 .c {
  width: 50%;
  margin-bottom: 1vw;
}

#card_5 .l_2 .c_3 .c .c-image img {
  width: 80%;
  height: 0.7vw;
}

#card_5 .l_2 .c_3 .c .tag {
  font-size: 1.83vw;
  font-size: 1.54vw;
}

#card_5 .l_2 .c_3 .c .tag {
  /* font-size: 1.83vw; */
  font-size: 1.54vw;
}

#card_5 .l_1 .c_2 .c {
  width: 50%;
}

#card_5 .l_1 .c_3 {
  width: 80%;
  margin: 4vw auto;
}

#card_5 .l_1 .c_2 .img-c {
  width: 3vw;
  /* display: flex; */
  /* align-items: center; */
}
#card_5 .l_1 .c_2 .img-c img {
  width: 65%;
}

#card_5 .l_2 .c_1 p {
  font-weight: 400;
  font-size: 1.64vw;
  width: 87%;
  /* margin: 3.5vw auto 3vw auto; */
  text-align: center;
  margin: 1vw auto 1vw auto;
  /* min-height: 21vw; */
}

#card_5 .l_2 .c_2 p {
  width: 89%;
  /* font-size: 1.83vw; */
  font-size: 1.54vw;
  margin: 0 auto.5vw 5vw;
}

#card_5 .l_1 .c_1 img {
  margin: auto;
  max-width: 90%;
  max-height: 90%;
}