
.wizard {
	z-index:2;
	position:relative;
}
  .steps {
    height:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:25px;

  }
    .steps .step {
      width:34px;
      height:34px;
      border-radius:34px;
      text-align:center;
      line-height:34px;
      font-weight:bold;
      background:rgba(0,0,0,.1);
			background:var(--pink-25);
      color:white;
      position:relative;
      overflow:visible;
			transition:.3s;
    }
		.steps .step:first-of-type {
			margin-top:10px;
		}
    .steps .step.current {
      background:var(--pink);

    }
		.steps .step.current ~ .step {
			background:rgba(0,0,0,.1);
		}



      .steps .step:after {
        content:" ";
        width:0px;
        height:25px;
        position:absolute;
        top:100%;
        left:calc(50% - 0.5px);
        border-left:1px solid var(--pink-25);
				transition:.3s;
      }
			.steps .step.current:after,
			.steps .step.current ~ .step:after {
        border-color:rgba(0,0,0,.1);
				opacity:1;
      }
      .steps .step:last-of-type:after {
        display:none;
      }


.questions {
	position:relative;
	overflow:visible;
}
.question {
	transform:translateY(0);
	top:0;
	transition:.5s .2s;
}
.question:not(.current) {
	position:absolute;
	transform:translateY(-150px);
	opacity:0;
	transition:.5s;
	pointer-events:none;
}
.question.current + .question {
	transform:translateY(150px);
}

.question h2 {
	margin-top:0;
}
  .question .options {
    width:100%;
    height:auto;
    display:flex;
    gap:20px;
    flex-wrap:wrap;
      max-width:400px;
      margin:20px 0;
  }
    .question .options .opt {
      flex:calc(50% - 10px);
      background-color:white;
      border-radius:15px;
      padding:10px;
      margin:0;
      color:var(--gray) !important;
      font-weight:normal;
    }
    .question .options .opt:hover {
      color:white !important;
    }
    .question .options .opt.selected {
      box-shadow:inset 0px 0px 0px 2px var(--pink);
      color:var(--pink) !important;
    }
    .question .options .opt.selected .bubble {
      opacity:0 !important; transition:.3s;
    }
      .question .options .opt i {
        font-size:34px;
        display:block;
        margin-bottom:4px;

      }


.imce-preview {
	min-width:100%;
  height:calc(100% + 150px);
  position:absolute;
  bottom:0;
  pointer-events:none;
}
@media (max-width:991px) {
	.imce-preview {
		min-width:0;
		height:auto;
		width:100%;
		max-width:300px;
		margin:-60px auto 0px auto;
		position:relative;
		display:block;
		border-bottom:1px solid rgba(0,0,0,.2);
		padding:0px 20px;
	}


	.steps {
		padding:20px 0 !important;
		flex-direction:row;
		justify-content:center;
	}
		.steps .step:first-of-type {
			margin-top:0;
		}
			.steps .step:after {
				width:25px;
				height:0px;
				border-left:0px;
				border-top:1px solid var(--pink-25);
				top:calc(50% - .5px);
				left:100%;
			}

	.question {
		padding-top:10px;
	}
	.question:not(.current) {
		transform:translateX(-150px);
	}
	.question.current + .question {
		transform:translateX(150px);
	}

	.question .options {
		gap:10px;
	}
}
