.quizz{
  font-family: 'Gotham-Bold';
  background-image: url('../img/bg_test.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
  position: relative;
	color: #ffffff;
  height: auto;
  background-color: #5700e6;
}
.quizz .text1{
  font-size: 1.87vw;
  line-height: 2.39vw;
  letter-spacing: 0;
}
.quizz .text2{
	font-family: 'Gotham-Medium';
  font-size: 1.04vw;
  line-height: 1.25vw;
  letter-spacing: 0;
  width: fit-content;
}
.quizz .text2::after{
  content: '';
  width: 100%;
  height: 0.15vw;
  background: #FE369C;
  border-radius: 0.26vw;
  display: block;
}
.quizz .text3{
  font-size: 1.04vw;
  line-height: 1.56vw;
  letter-spacing: 0;
}
.quizz .text4{
  font-size: 2.81vw;
  line-height: 3.33vw;
  letter-spacing: 0;
  min-height: 10.42vw;
  height: auto;
}
.quizz .text5{
  font-family: 'Gotham-Medium';
  font-size: 1.25vw;
  line-height: 1.77vw;
  letter-spacing: 0;
}
.quizz .text6{
  font-family: 'Gotham-Book';
  font-size: 0.83vw;
  line-height: 1.35vw;
  letter-spacing: 0;
  margin: 2.60vw 0;
}
.quizz a{
  text-decoration: none;
}
.quizz a:hover{
  text-decoration: none;
}
.quizz .btn{
	font-family: 'Gotham-Bold';
  font-size: 1.25vw;
  line-height: 1.77vw;
  letter-spacing: 0;
  color: #5700E6;
  min-width: 12.08vw;
  width: auto;
  height: 3.64vw;
  background: #FFFFFF;
  border-radius: 0.26vw;
  margin: 2.60vw 0;
  padding: 0 1.04vw;
}
.quizz .btn:hover{
  color: #FFFFFF;
  background-color: #FE369C;
}
.quizz .btn::after{
  content: '';
  background-image: url('../img/arrow_pink.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  width: 1.25vw;
  height: 1.25vw;
  display: block;
  margin: 0 0 0 0.78vw;
}
.quizz .btn:hover::after{
  background-image: url('../img/arrow_white.png');
}
.quizz .myBar{
	height: 0.52vw;
	background-color: #FC3799;
	text-align: center;
	line-height: 1.56vw;
	color: white;
	border-radius: 2.60vw;
}
.quizz .myBar::after{
  position: absolute;
  right: -0.42vw;
  top: -0.42vw;
  content: '';
  background-image: url('../img/butterfly.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  width: 2.18vw;
  height: 1.25vw;
}
.quizz .item-edad {
  font-size: 1.04vw;
  line-height: 0.98vw;
	margin: 0 0 6vw 0;
	width: 6.25vw !important;
	height: 4vw;
}
.quizz .divs div .row {
	padding: 5.20vw 0 5.20vw 0;
}
.quizz .myProgress {
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 2.60vw;
	margin: 1.04vw 0 1.04vw 0;
}
.quizz .switch-container {
	width: 12vw;
	height: 6vw;
	position: relative;
	background-color: #FFFFFF;
	border: 0.06vw solid #E8E8E8;
	border-radius: 2.83vw;
	box-shadow: 0.15vw 0.46vw 1.82vw 0 rgba(45, 70, 79, 0.07);
	margin: 0 0 5vw 0;
}
.quizz .switch-container .switch-button {
	width: 100%;
	height: 5vw;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate3D(-50%, -50%, 0);
	will-change: transform;
	cursor: pointer;
	transition: 0.3s ease all;
}
.quizz .switch-container .switch-button-case {
	position: relative;
	background: none;
	width: 48%;
	height: 100%;
	border: none;
	transition: 0.3s ease all;
	text-transform: capitalize;
	cursor: pointer;
	font-size: 1.04vw;
	line-height: 0.98vw;
	text-align: center;
	color: #8416AE;
}
.quizz .switch-container .switch-button .active-case {
	color: #FFFFFF;
	background-color: #FC3799;
	transition: 0.3s ease-out all;
	border-radius: 100%;
}
.quizz #next {
	font-family: 'Gotham-Medium';
	font-size: 1.04vw;
	text-align: center;
	position: absolute;
	left: 24vw;
	bottom: 7vw;
	cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.quizz #next:hover {
  color: #FC3799;
}
.quizz #next::after {
  content: '';
  background-image: url('../img/arrow_white_right.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  width: 1.66vw;
  height: 1.66vw;
  margin: 0 0.52vw;
}
.quizz #next:hover::after{
  background-image: url('../img/arrow_pink_right.png');
}
.quizz #prev {
	font-family: 'Gotham-Medium';
	font-size: 1.04vw;
	text-align: center;
	position: absolute;
	left: 16vw;
	bottom: 7vw;
	cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.quizz #prev:hover {
  color: #FC3799;
}
.quizz #prev::before{
  content: '';
  background-image: url('../img/arrow_white_left.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  width: 1.66vw;
  height: 1.66vw;
  margin: 0 0.52vw;
}
.quizz #prev:hover::before{
  background-image: url('../img/arrow_pink_left.png');
}
.quizz .contain_stain-1{
  position: absolute;
  right: 0;
  top: 1vw;
}
.quizz .contain_stain-1 img{
  width: 22vw;
}
.quizz .contain_stain-2{
  position: absolute;
  left: 0;
  bottom: 0;
}
.quizz .contain_stain-2 img{
  width: 22vw;
}
.quizz .hiddent_point{
  display: none;
}

@media (max-width: 992px){
  .quizz{
    background-image: none;
  }
  .quizz .text1{
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0;
  }
  .quizz .text2{
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
  }
  .quizz .text2::after{
    content: '';
    height: 3px;
    background: #FE369C;
    border-radius: 5px;
    display: block;
  }
  .quizz .text3{
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0;
  }
  .quizz .text4{
    font-size: 24px;
    line-height: 34px;
    letter-spacing: 0;
    min-height: 125px;
    height: auto;
  }
  .quizz .text5{
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
  }
  .quizz .text6{
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
    margin: 50px 0;
  }
  .quizz .btn{
    font-size: 24px;
    line-height: 34px;
    letter-spacing: 0;
    min-width: 232px;
    height: 70px;
    border-radius: 5px;
    margin: 50px 0 0 0;
    padding: 0 20px;
  }
  .quizz .btn::after{
    width: 24px;
    height: 24px;
    margin: 0 0 0 15px;
  }
  .quizz .myBar{
    width: 10%;
		height: 10px;
		line-height: 30px;
		border-radius: 50px;
  }
  .quizz .myBar::after{
    display: none;
  }
  .quizz .item-edad {
    font-size: 16px;
    line-height: 26px;
    width: 120px !important;
    height: 60px;
    margin: 0 0 50px 0;
  }
  .quizz .divs div .row {
  	padding: 25px 0 25px 0;
  }
  .quizz .myProgress {
    width: 100%;
		border-radius: 50px;
		margin: 20px 0 20px 0;
  }
  .quizz .switch-container {
		width: 200px;
		height: 100px;
		border: 1.3px solid #E8E8E8;
		border-radius: 50px;
		box-shadow: 3px 9px 35px 0 rgba(45, 70, 79, 0.07);
		margin: 0 0 50px 0;
	}
	.quizz .switch-container .switch-button {
		width: 190px;
		height: 90px;
	}
	.quizz .switch-container .switch-button-case {
		width: 48%;
		height: 100%;
		font-size: 16px;
		line-height: 16px;
	}
  .quizz #next {
    position: absolute;
    font-size: 20px;
    left: 25%;
    bottom: -5%;
	}
  .quizz #next::after {
    width: 32px;
    height: 32px;
    margin: 0 10px;
  }
  .quizz #prev {
    position: absolute;
    font-size: 20px;
    left: 0;
    bottom: -5%;
  }
  .quizz #prev::before{
    width: 32px;
    height: 32px;
    margin: 0 10px;
  }
  .quizz .contain_stain-1{
    display: none;
  }
  .quizz .contain_stain-2{
    display: none;
  }
}
@media (max-width: 559px){
  .quizz{
    background-image: none;
  }
  .quizz .text1{
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0;
  }
  .quizz .text2{
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
  }
  .quizz .text2::after{
    content: '';
    height: 3px;
    background: #FE369C;
    border-radius: 5px;
    display: block;
  }
  .quizz .text3{
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0;
  }
  .quizz .text4{
    font-size: 24px;
    line-height: 34px;
    letter-spacing: 0;
    min-height: 125px;
    height: auto;
  }
  .quizz .text5{
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
  }
  .quizz .text6{
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
    margin: 50px 0;
  }
  .quizz .btn{
    font-size: 24px;
    line-height: 34px;
    letter-spacing: 0;
    min-width: 232px;
    height: 70px;
    border-radius: 5px;
    margin: 50px 0 0 0;
    padding: 0 20px;
  }
  .quizz .btn::after{
    width: 24px;
    height: 24px;
    margin: 0 0 0 15px;
  }
  .quizz .myBar{
    width: 10%;
		height: 10px;
		line-height: 30px;
		border-radius: 50px;
  }
  .quizz .myBar::after{
    display: none;
  }
  .quizz .item-edad {
    font-size: 16px;
    line-height: 26px;
    width: 120px !important;
    height: 60px;
    margin: 0 0 50px 0;
  }
  .quizz .divs div .row {
  	padding: 25px 0 25px 0;
  }
  .quizz .myProgress {
    width: 100%;
		border-radius: 50px;
		margin: 20px 0 20px 0;
  }
  .quizz .switch-container {
		width: 200px;
		height: 100px;
		border: 1.3px solid #E8E8E8;
		border-radius: 50px;
		box-shadow: 3px 9px 35px 0 rgba(45, 70, 79, 0.07);
		margin: 0 0 50px 0;
	}
	.quizz .switch-container .switch-button {
		width: 190px;
		height: 90px;
	}
	.quizz .switch-container .switch-button-case {
		width: 48%;
		height: 100%;
		font-size: 16px;
		line-height: 16px;
	}
  .quizz #next {
    position: absolute;
    font-size: 15px;
    left: 50%;
    bottom: -5%;
	}
  .quizz #next::after {
    width: 32px;
    height: 32px;
    margin: 0 10px;
  }
  .quizz #prev {
    position: absolute;
    font-size: 15px;
    left: 0;
    bottom: -5%;
  }
  .quizz #prev::before{
    width: 32px;
    height: 32px;
    margin: 0 10px;
  }
  .quizz .contain_stain-1{
    display: none;
  }
  .quizz .contain_stain-2{
    display: none;
  }
}