@keyframes animateModalComic {
	from {opacity: 0}
	to {opacity: 1;}
}

.modal-container-comic {
	position: absolute;
	z-index: 100;
	opacity: 0;
	width: 100%;
	height: 100%;
	overflow-y: visible;
	top: 100%;
	bottom: 0;
	padding: 4em;
	padding-top: 4em;
	animation-name: animateModalComic;
	animation-duration: 0.5s;
	transition: opacity 0.5s;
	background-color: rgba(0,0,0,0.2);
	cursor: pointer;
}

.modal-container-comic > div {
	position: sticky;
	display: block;
	top: 24px;
	padding: 0;
	height: 100%;
	/*top: 24px;
	bottom: 24px;*/
}

.modal-container-comic > div > div {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 2em;
	overflow-y: scroll;
}

.btn-comic {
	/*position: sticky;*/
	/*left: 1.2em;*/
	position: absolute;
	right: 5rem;
	left: auto;
	bottom: 0;
	z-index: 0;
	margin-bottom: 132px;
	/*bottom: 24px;*/
	/*bottom: 112px;*/
	border: none;
	border-radius: 50% !important;
	padding: 16px !important;
	width: 128px;
	height: 128px;
	background-color: rgba(235, 110, 5, 0.75);
	/*background-color: rgba(0,0,0,0);*/
	/*z-index: 10;*/
}
/*.page-id-114 .btn-comic,
.page-id-2439 .btn-comic,
.page-id-2901 .btn-comic,
.page-id-2866 .btn-comic,
.page-id-324 .btn-comic,
.page-id-2490 .btn-comic,
.page-id-2965 .btn-comic,
.page-id-2922 .btn-comic {
	bottom: 112px;
}*//*
.page-id-2190 .btn-comic,
.page-id-2457 .btn-comic,
.page-id-326 .btn-comic,
.page-id-2499 .btn-comic,
.page-id-2970 .btn-comic,
.page-id-2928 .btn-comic,
.page-id-328 .btn-comic,
.page-id-2505 .btn-comic,
.page-id-2975 .btn-comic,
.page-id-2933 .btn-comic {
	bottom: 24px;
}*/
.btn-comic:hover {
	background-color: rgba(0,0,0,0.3);
	animation-duration: 0.5s;
}
.btn-comic svg path {
	fill: rgba(255,255,255,0.9);
}
.btn-comic svg .layer1 path, .btn-comic svg .layer2 path {
	fill: #777;
}
.btn-comic:hover svg .layer1 path {
	color: #663421;
	fill: #663421;
}
.btn-comic:hover svg .layer2 path {
	color: #285e23;
	fill: #285e23;
}
.btn-comic:hover svg .layer3 path {
	color: #f93b3b;
	fill: #f93b3b;
}
.btn-comic:hover svg .layer4 path {
	color: #ff4;
	fill: #ff4;
}

@media only screen and (min-width: 768px) {
	.btn-comic {
		/*left: 3em;
		bottom: 140px;*/
		margin-bottom: 110px;
		/*margin-bottom: 142px;*/
		z-index: 0;
	}
	/*.page-id-2190 .btn-comic,
	.page-id-2457 .btn-comic,
	.page-id-2901 .btn-comic,
	.page-id-2866 .btn-comic,
	.page-id-326 .btn-comic,
	.page-id-2499 .btn-comic,
	.page-id-2970 .btn-comic,
	.page-id-2928 .btn-comic,
	.page-id-328 .btn-comic,
	.page-id-2505 .btn-comic,
	.page-id-2975 .btn-comic,
	.page-id-2933 .btn-comic {
		bottom: 24px !important;
	}*/
}