*{
	margin: 0px;
	padding: 0px;
}
input[type="checkbox"]{
	display: none;
}
label{
	position: relative;
	font-size: 18px;
	cursor: pointer;
	padding-left: 30px;
}
label::before{
	content: "";
	background: url("../images/iconmonstr-check-mark-7.svg");
	background-position: center;
	background-size: contain;
	width: 32px;
	height: 32px;
	position: absolute;
	left: -6px;
	top: -6px;
	transform: scale(0) rotateZ(180deg);
	transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}
input[type="checkbox"]:checked + label::before{
	transform: scale(1) rotateZ(0deg);
}
label::after{
	content:"";
	border: 2px solid black;
	width: 24px;
	height: 24px;
	position: absolute;
	left: -2px;
	top: -2px;
	border-radius: 50%;
}
.order-option{
	margin-top: 40px;
	margin-bottom: 20px;
}
#all-options{
	text-align: center;
}
#all-options img{
	width: 100%;
	padding-bottom: 10px;
}
.expand-space{
	padding: 10px;
}
@media screen and (max-width: 990px){
	#bottom-space{
		height: 400px;
		width: 100%;
	}
	#bottom-space-mobile{
		height: 100px;
		width: 100%;
	}
	.order-options-display{
		text-align: center;
	}
	.order-option{
		font-size: 22px;
	}
}
@media screen and (min-width: 991px){
	.all-options-div{
		display: flex;
		justify-content: space-around;
	}
    .single-eye-option-div{
		width: 12%;
	}
	.single-fingernail-option-div{
		width: 9%;
	}
	#bottom-space{
		height: 140px;
		width: 100%;
	}
}
.orange-line{
	display: inline-block;
	height: 8px;
	width: 50px;
	background-color: orange;
	margin: 0 20px 6px 20px;
}
.order-options-display{
	width: 100%;
	background-color: black;
	color: white;
	position: fixed;
	bottom: 0px;
	font-size: 20px;
	line-height: 30px;
	padding-bottom: 10px;
}
.fa-angle-double-down{
	z-index: 10;
	opacity: 0.8;
	position: absolute;
	right: 20px;
	top: 10px;
	font-size: 40px;
	cursor: pointer;
}
.fa-angle-double-up{
	z-index: 10;
	opacity: 0;
	position: absolute;
	right: 20px;
	bottom: 20px;
	font-size: 40px;
	cursor: pointer;
	transition: all 0.8s;
}
.fa-angle-double-down:hover{
	opacity: 1;
}
.fa-angle-double-up:hover{
	opacity: 1;
}
/*#add-to-cart{
	line-height: 40px;
	padding-top: 10px;
}*/
.option-vertical-line{
	display: inline-block;
	height: 16px;
	width: 5px;
	background: orange;
	margin-right: 4px;
}
#added-to-cart-indicator{
	position: absolute;
	top: -10px;
	left: 4px;
	opacity: 1;
	font-size: 30px;
	opacity: 0;
	color: red;
}
.added-to-cart-indicator-animation{
    animation: itemadded 0.5s;
}
@keyframes itemadded{
    0%{
		transform: translateY(0px);
		opacity: 1;
    }
    100%{
		transform: translateY(-40px);
		opacity: 0;
    }
}
.model-list{
	padding: 10px;
}
#options-list{
	position: sticky;
	top: 8vh;
	border-left: solid 5px orange; 
	text-align: left; 
	background-color: #ececec; 
	font-size: 16px;
	padding: 10px 5px 5px 5px;
}
.each-option{
	padding: 5px 0px;
}
/*.add-to-cart{
	margin: 10px 0px;
	background-color: orange;
	text-align: center;
	font-size: 20px;
	cursor: pointer;
	border-radius: 5px;
	color: white;
	opacity: 0.8;
	transition: all 0.5s;
}
.add-to-cart:hover{
	opacity: 1;
}
.fa-cart-plus{
	cursor: pointer;
	transition: all 0.6s;
	position: relative;
	z-index: 5;
}
.fa-cart-plus:hover{
	opacity: 1;
}*/
.cart-button{
	position: relative;
	height: 40px;
	margin-top: 10px;
	width: 100%;
	border: 0;
	border-radius: 5px;
	background-color: #ff0000;
	cursor: pointer;
	color: white;
	font-size: 18px;
	transition: .3s ease-in-out;
	overflow: hidden;
}
.cart-button:hover{
	background-color: #ee1717;
}
.cart-button:active{
	transform: scale(.9);
}
.cart-button .fa-shopping-cart{
	position: absolute;
	top: 50%;
	left: -10%;
	font-size: 26px;
	z-index: 2;
	transform: translate(-50%, -50%);
}
.cart-button .fa-gift{
	position: absolute;
	top: -20%;
	left: 51%;
	font-size: 20px;
	z-index: 1;
	transform: translate(-50%, -50%);
}
.cart-button span{
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 50%;
	color: #fff;
	transform: translate(-50%, -50%);
}
.cart-button span.add-to-cart{
	opacity: 1;
}
.cart-button span.added{
	opacity: 0;
}
.cart-button.clicked .fa-shopping-cart{
	animation: cart 1.5s ease-in-out forwards;
}
.cart-button.clicked .fa-gift{
	animation: gift 1.5s ease-in-out forwards;
}
.cart-button.clicked span.add-to-cart{
	animation: txt1 1.5s ease-in-out forwards;
}
.cart-button.clicked span.added{
	animation: txt2 1.5s ease-in-out forwards;
}
@keyframes cart{
	0%{
		left: -10%;
	}
	40%, 60%{
		left: 50%;
	}
	100%{
		left: 110%;
	}
}
@keyframes gift{
	0%, 40%{
		top: -20%;
	}
	60%{
		top: 40%;
		left: 51%;
	}
	100%{
		top: 40%;
		left: 110%;
	}
}
@keyframes txt1{
    0%{
		opacity: 1;
	}
	20%, 100%{
		opacity: 0;
	}
}
@keyframes txt2{
    0%, 80%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.hightlighted{
	animation: highlight 1.5s ease-in-out forwards;
}
@keyframes highlight{
    0%{
		opacity: 0;
	}
	20%, 80%{
		opacity: 0.8;
	}
	100%{
		opacity: 1;
	}
}