div#answer {
    height: auto;
	font-size: 20px;
}

.main_text a {
    text-decoration: auto !important;
}

.headers {
    height: 30px;
    margin-top: 20px;
}
div#m-wr {
    position: absolute;
    width: 300px;
    height: 300px;
    top: 0px;
    left: 0px;
}
    .step-wrapper{
        width:100%;position:relative
    }
div#step-3 img,div#step-2 img  {
    margin-left: -50px;
}

#header-1, #header-2, #header-3{
     width:300px;
    margin:0 auto;
    text-align:center;
}
#quote{
    width:300px;
    margin:0 auto;
    text-align:center;
}
    .choose-from img{
        width:30%;
        display:flex;
    }
    .choose-from {
            display: flex;
    justify-content: space-around;
    }
    #step-1,#step-2,#step-2-overlay,#step-3,#step-5{
        max-width:500px;
        height:300px;
        display:flex;
        align-items:center;
        justify-content: center;
        margin: 0 auto;
    }
    #step-4{
        max-width:500px;
        height:300px;
     
        align-items:auto;
        justify-content: center;
        margin: 0 auto;
    }
    .show-flex{
        display:flex !important;
    } div#m-wr {
    width: 300px !important;
    margin: 0 auto !important;
}
    @media screen and (max-width:991px){
       div#step-1 img {
    width: 149% !important;
    max-width: 200px !important;
    margin: 0 -19% 0px 0px !important;
}
        .match {
    height: 250px !important;
   
}
       #step-1,#step-2,#step-2-overlay,#step-3,#step-4,#step-5{
        max-width:320px;
        margin: 0 auto;
    } 
    .choose-from img{
        width:50%;
        display:flex;
    }
    }
    
    #step-2 img,#step-3 img{
        max-width:100%;
    }
    body { 
		background-color: white
			; 
}
.hide{
	animation-name: hideit;
		animation-delay: 0ms;
		animation-duration: 0.8s;
	animation-fill-mode: forwards;
}
.hidden{
	display:none !important
}
.firepit {
    position: relative;
    width: 45px;
    height: 100px;
    margin: -15px auto;
    z-index: 999;
    transform-origin: center bottom;
    transform: scale(.7,1.5);
}
.flame-move {
			animation-name: firemove;
		animation-duration: 3.5s;
		animation-fill-mode: forwards;
		animation-timing-function: ease-in;
		animation-direction: alternate;
}
.flame {
		position: absolute;
		bottom: 0px;
		border-radius: 8% 50% 50% 50%;
		
		transform: rotate(45deg);
}

.flameLayer {
		bottom: 0;
		position: absolute;

		/* animation description */
		animation-name: layerRandomize;
		animation-delay: 10ms;
		animation-duration: 200ms;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in;
		animation-direction: alternate;
}

.red {
	width: 50px;
	height: 50px;
	background-color: rgba(255, 37, 19, 0.76);
	border: 0px;
	box-shadow: 0px 0px 5px 4px rgba(255, 37, 19, 0.8);
	
	/* animation description */
	animation-name: flickRed;
	animation-delay: 10ms;
	animation-duration: 500ms;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
	animation-direction: alternate;
}

.orange {
		left: 5px;
		width: 40px;
		height: 40px;
		background-color: rgb(245, 96, 21);
		box-shadow: 0px 0px 12px 6px rgb(245, 96, 21);

		/* animation description */
		animation-name: flickOrange;
		animation-delay: 5ms;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in;
		animation-direction: alternate;
}

.yellow {
		left: 10px;
		width: 30px;
		height: 30px;
		background-color: rgba(254, 182, 69, 0.74);
		box-shadow: 0px 0px 12px 6px rgba(254, 182, 69, 0.91);

		/* animation description */
		animation-name: flickYellow;
		animation-delay: 	0ms;
		animation-duration: 405ms;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in;
		animation-direction: alternate;
}

.white {
		left: 10px;
		bottom: -5px;
		width: 30px;
		height: 30px;
		background-color: rgba(255, 255, 255, 0.55);
		box-shadow: 0px 0px 9px 4px rgba(255, 255, 255, 1);

		/* animation description */
		animation-name: flickWhite;
		animation-delay: 0ms;
		animation-duration: 522ms;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in;
		animation-direction: alternate;
}

.offset {
		position: absolute;
		left: 10px; bottom: -45px;
		width: 50px; height: 10px;

		border-radius: 50%;

		/* animation description */
		animation-name: flickOffset;
		animation-delay: 0ms;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in;
		animation-direction: alternate;
}

.glow {
		/* TODO: Fix glow */
		left: -20px; bottom: -10px;
		width: 70px; height: 70px;
		background: radial-gradient(
			ellipse at center,
			rgba(255, 40, 20, 0.1) 0%,
			rgba(255, 40, 20, 0.05) 100%
		);
		opacity: 0.6;

		/* animation description */
		animation-name: flickGlow;
		animation-delay: 0ms;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in;
		animation-direction: alternate;
}
.show{
    display:block !important
}

.black {
	background-color: rgba(0, 0, 0, 1);
	box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 1);
}

.blue {
	display: none; 		/* TODO: Add this blue flame */
	background: rgba(0, 0, 255, 0.9);
	box-shadow: 0px 0px 15px 10px rgba(0, 0, 255, 1);
}

@keyframes layerRandomize {
	  0% { transform: rotate(-1deg); }
	 20% { transform: rotate( 1deg); }
	 40% { transform: rotate(-1deg); }
	 60% { transform: rotate( 1deg); }
	 80% { transform: rotate( 2deg); }
	100% { transform: rotate( 1deg); }
}
@keyframes firemove {
	  0% { margin:-15px auto 0px}
	100% { margin:90px auto 0px}
}
@keyframes hideit {
	  0% { opacity:1 }
	100% { opacity:0 }
}

@keyframes flickRed {
	0% {
		width: 50px; height: 45px;
		border-top-left-radius: 15%;
	}
	20% {
		width: 50px; height: 49px;
		border-top-left-radius: 2%;
	}
	40% {
		width: 50px; height: 47px;
		border-top-left-radius: 7%;
	}
	60% {
		width: 50px; height: 51px;
		border-top-left-radius: 0%;
	}
	80% {
		width: 50px; height: 48px;
		border-top-left-radius: 2%;
	}
	100% {
		width: 52px; height: 50px;
		border-top-left-radius: 8%;
	}
}

@keyframes flickOrange {
	0% {
		width: 40px; height: 36px;
		opacity: 0.5;
	}
	25% {
		width: 38px; height: 38px;
	}
	50% {
		width: 35px; height: 40px;
	}
	75% {
		width: 39px; height: 42px;
	}
	100% {
		width: 41px; height: 44px;
		opacity: 1;
	}
}

@keyframes flickYellow {
	0% {
		width: 29px; height: 30px;
	}
	33% {
		width: 32px; height: 30px;
	}
	66% {
		width: 30px; height: 30px;
	}
	100% {
		width: 27px; height: 30px;
	}
}

@keyframes flickWhite {
	0% {
		width: 32px; height: 35px;
		opacity: 0.01;
	}
	50% {
		width: 35px; height: 32px;
		opacity: 0.2;
	}
	100% {
		width: 33px; height: 34px;
		opacity: 0.1;
	}
}

/* TODO: Improve this offset so I can add a blue offset too */
@keyframes flickOffset {
	0% 		{ left:  6px; width: 49px; height: 45px;	}
	100% 	{ left: 12px; width: 40px; height: 48px;  }
}

@keyframes flickGlow {
	  0% { width: 90px; height: 90px; }
	100% { left: -30px; width: 110px; height: 110px; }
}
.match {
    height: 250px !important;
  
}
img.match.match1 {
    z-index: 1;
}
img.match.match2 {
    z-index: 2;
}
img.match.match3 {
    z-index: 3;
}
.match-wrapper {
    width: 100%;
    /* text-align: center; */
    position: absolute;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
}
div#step-1 img {
    width: 100%;
    max-width: 169px;
    margin: 0 auto 
}


div#step-1 div#step-inner {
    margin-left: -20px;
}

.variant-3 .red {
    background-color: rgba(0, 0, 0, 0.76);
    border: 0px;
    box-shadow: 0px 0px 5px 4px rgba(0, 0, 0, 0.8);
}

.variant-5 .white {
    background-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0px 0px 9px 4px rgb(255, 255, 255);
 
}
.variant-5 .yellow {
    background-color: rgba(69, 176, 254, 0.74);
    box-shadow: 0px 0px 12px 6px rgba(69, 164, 254, 0.91);
}
.variant-5 .orange {
    background-color: rgb(21, 151, 245);
    box-shadow: 0px 0px 12px 6px rgb(21, 157, 245);
 
}
.variant-5
.red {
    background-color: rgba(35, 19, 255, 0.76);
    border: 0px;
    box-shadow: 0px 0px 5px 4px rgba(255, 19, 225, 0.8);
}


.variant-6 .orange {
    background-color: rgb(255, 85, 0);
    box-shadow: 0px 0px 12px 6px #F44336;
}
.variant-6 .yellow {
    background-color: rgb(255, 0, 0);
    box-shadow: 0px 0px 12px 6px rgb(255, 0, 0);
}
.variant-6 .red {
    background-color: #ffc313;
    box-shadow: 0px 0px 5px 4px #ffc313;
}

.variant-7 .red {
    background-color: rgba(121, 255, 144, 0.76);
    border: 0px;
    box-shadow: 0px 0px 5px 4px rgba(178, 255, 110, 0.8);
}
.cursor-default{
    cpointer-events: none !important;
}
.ask-again {
    cursor: pointer;
    border-radius: 6px;
    padding: 0.8rem 1.5rem 0.8rem;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    border: 0px solid transparent;
    line-height: 1;
    background: #3394e6;
    color: #fff;
    border: 1px solid #1c88e3;
    transition: all 250ms ease-out;
    opacity: 1;
    max-width: 200px;
    font-family: 'Arial';
    margin: 30px auto 0px;
    font-size: 1.8rem;
}
.ask-again:hover {
    background: #60acec;
    color: #fff;
}
@media screen and (min-width: 992px){
    div#step-1 img {
    width: 158% !important;
    max-width: 235px !important;
    margin: 0 auto !important;
    margin-left: -17% !important;
}
}
.headers{
    height: 30px;
	font-size: 15px;
}