.card{
    box-shadow: 0px 0px 40px 2px rgba(215, 6, 59, 0.40) inset;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.5s ease-in-out;
    }

#card {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

@media (max-width: 768px) {
    .card {
      flex-direction: column;
      width: 100%;
    }
    .step-inactive{
      display: none;
    }

    #step-1.step-inactive{
        display: none;
      }
  
    #step-1.step-inactive::after{
      display: none;
    }

  }  

.card.appear {
    transform: translateY(0px);
    opacity: 1;
}

#section-2-title {
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}

input::placeholder {
    font-size: 1rem;
}

.container {
    display: flex;
    justify-content: space-between;
}

.btn-liquid {
	display: inline-block;
	position: relative;
	width: 240px;
	height: 60px;

	border-radius: 27px;

	color: #D7063B;
	font: 900 16px/60px "Lato", sans-serif;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.btn-liquid .inner {
	position: relative;

	z-index: 2;
}

.btn-liquid canvas {
	position: absolute;
	top: -50px;
	right: -50px;
	bottom: -50px;
	left: -50px;

	z-index: 1;
}

#hero-red-jelly {
    z-index: 49;
}

input[type="checkbox"]:checked + div svg {
    display: block;
}

.steps{
    position: relative;
    left: 0;
    
    overflow: hidden;
    transition: 1.5s ease-in-out;
    flex:0.05    
}
.step-active{
    flex: 2;
}

.step-inactive{
    background-color: #FFDFDE !important;
    padding: 0px 20px 0px 20px;
}

.step-inactive::after{
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 20;
    background-color: #FFDFDE;
}

.answer {
    display: none;
    transition: max-height 0.2s ease-out;
    max-height: 0;
    overflow: hidden;
}