.themodal {
	z-index: 101;
	position: fixed;
	top:-100vh;
	left: 0;
	width:100%;
	height:100%;
	overflow-y:auto;
	padding:1rem;
	transition:all 0.5s ease;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* IE 10+ */
}

.themodal.active { top:0 }
.themodal::-webkit-scrollbar {
	width: 0;
	background: transparent; /* Chrome/Safari/Webkit */
}

.modal-wrapper {
	padding:15px;
	margin:0 auto;
	position: relative;
}

.admin-bar .modal-wrapper { margin-top: 6.2rem }

.modal-body { position: relative }

.modal-close {
	right:0;
	position: absolute;
	top:0;
	font-size: 1.5rem;
    cursor: pointer;
    display: flex;
	align-items: center;
	justify-content: center;
    width:32px;
    height: 32px;
}

.modal-close svg {
	width: 12px;
	height: 12px;
}

.modal-close svg path { 
	fill:#000;
	transition:all 0.5s ease;
}

.modal-close:hover svg path { fill:#000 }

.modal-overlay {
	background: rgba(0,0,0,.85);
	position: fixed;
	width:100vw;
	height:100vh;
	top:0;
	left:0;
	z-index: 100;
	opacity:0;
	transition:all 0.25s ease;
}
.modal-overlay.active { opacity:1 }

@media (min-width: 768px) {
	.modal-wrapper { padding:30px; }
}

@media (min-width: 992px) {
	.modal-wrapper { margin:30px auto 0; }
}