.modal {
	position: fixed;
	background: rgb(9, 112, 246, 0.45);
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9;

	opacity: 0;
	pointer-events: none;

	transition: opacity 0.2s ease-in-out;
}

.active-modal .modal {
	opacity: 1;
	pointer-events: auto;
}

.modal_content {
	position: absolute;
	width: 600px;
	left: calc(50% - 300px);
	top: 25%;
}

.modal_content::after {
	content: url("../img/gift.png");
	position: absolute;
	top: -50px;
	left: -90px;
	display: inline-block;
	width: 220px;
	height: 220px;
	z-index: 10;
}

.modal_content .boxer_package .btn {
    z-index: 11;
}

@media screen and (max-width: 800px) {
	.modal_content {
		width: 90%;
		left: 5%;
		right: 5%;
		top: 10%;
	}

	.modal_content::after {
		top: -60px;
		left: -20px;
	}
}

#discount_halloween {
	background: #673570c7;
}

#discount_halloween .modal_content::after {
	content: url(../img/halloween_pumpkin.png);
    position: absolute;
    top: -100px;
	left: calc(50% - 120px);
	width: 240px;
	height: 240px;	
    z-index: 10;
}

#halloween_background_image {
	background: url(../img/halloween_background.png) no-repeat center center fixed;
    -webkit-background-size: 100vw 100vh;
    -moz-background-size: 100vw 100vh;
    -o-background-size: 100vw 100vh;
	background-size: 100vw 100vh !important;
    height: 100%;
}

@media screen and (max-width: 800px) {
	#halloween_background_image {
		background: url(../img/halloween_background-xs.png) no-repeat center center fixed;
	}
	.modal_content {
		width: 80%;
		left: 10%;
		top: 15%;
	}
	.modal_content .like_h4 {
		font-size: 20px;
	}
	.modal_content .like_h2 {
    	font-size: 32px;
	}
}