#modal-holder .modal-wrapper.closed .modal {
	opacity: 0; 
	left: 400vw;
	transform: translate(0,-100px);	
}

#modal-holder .modal-wrapper.closed .backdrop {
	opacity: 0; 
	left: 400vw;
}

#modal-holder .modal {
	position: fixed; 
	background: var(--white); 
	border-radius: 0;
	max-width: 600px;
	box-shadow: 0 0 25px rgba(var(--color-dark),.1);
	z-index: 99996;
	transition-duration: 0.4s;
    transition-timing-function: ease;
    transition-property: opacity,transform;
	width: calc(100% - 2rem); 
}

#modal-holder .modal.bottom {
	bottom: 1rem; 
	left: 50%;
	transform: translate(-50%,0);
}

#modal-holder .modal.center {
	top: 50%; 
	left: 50%;
	transform: translate(-50%,-50%);
}

#modal-holder .modal.bottomright {
	bottom: 1rem;
	left: auto; 
	right: 1rem;
	transform: translate(0,0);
}

#modal-holder .modal.bottomleft {
	bottom: 1rem; 
	left: 1rem;
	transform: translate(0,0);
}

.backdrop.center {
	position: fixed; 
	top: 0;
	left: 0; 
	background: rgba(var(--color-dark),.4); 
	backdrop-filter: blur(3px);
	z-index: 99992;
	opacity: 1;
	width: 100%; 
	height: 100%; 
	transition-duration: 0.4s;
    transition-timing-function: ease;
    transition-property: opacity;
}


#modal-holder .modal h1:first-child,
#modal-holder .modal .h1:first-child,
#modal-holder .modal h2:first-child,
#modal-holder .modal .h2:first-child,
#modal-holder .modal h3:first-child,
#modal-holder .modal .h3:first-child {
	margin-top: 0; 
}


/*Closer*/
.close-modal {
	box-shadow: none; 
	border: 0; 
	position:absolute; 
	top: 0; 
	right: 0;
	width: 2rem;
	height: 2rem; 
	padding: .5rem;
	cursor: pointer; 
	background-color: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center; 
	> img {
		max-width: 100%; 
		height: auto; 
		display: block; 
		transition: ease all 400ms; 
	}
}

.close-modal:hover {
	img {
		transform: rotate(90deg);		
	}
}



/* Inner Modal Styles */

.modal > figure:first-child {
	margin-top: 0; 
}