/* 
 * version 1.0 J!Elastic Modal
 * @copyright Copyright (C) 2020 Jfriendly.net. All rights reserved.
 * @license http://www.gnu.org/copyleft/gpl.html GNU/GPL
*/

.elastic-modal {
	position: relative;
	width: 100%;
}

.elastic-modal .window-header {
	padding: 0px 5px 0px 0px;
	position: relative;
	z-index: 1;
	height: 20px;
}


/* The Modal (background) */

.elastic-modal .modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 1;
	/* Sit on top */
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: unset;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	z-index: 1;
}

.elastic-modal .fade-in {
	animation-name: elastic-modal-fade-in;
	animation-duration: 1s;
}

.elastic-modal .fade-out {
	animation-name: elastic-modal-fade-out;
	animation-duration: 1s;
}

.elastic-modal .zoom-in {
	animation: elastic-modal-animatezoom-in 0.6s
}

.elastic-modal .zoom-out {
	animation: elastic-modal-animatezoom-out 0.6s
}

.elastic-modal .top-in {
	animation: elastic-modal-animatetop-in 0.4s
}

.elastic-modal .top-out {
	animation: elastic-modal-animatetop-out 0.4s
}

.elastic-modal .bottom-in {
	animation: elastic-modal-animatebottom-in 0.4s
}

.elastic-modal .bottom-out {
	animation: elastic-modal-animatebottom-out 0.4s
}

.elastic-modal .left-in {
	animation: elastic-modal-animateleft-in 0.4s
}

.elastic-modal .left-out {
	animation: elastic-modal-animateleft-out 0.4s
}

.elastic-modal .right-in {
	animation: elastic-modal-animateright-in 0.4s
}

.elastic-modal .right-out {
	animation: elastic-modal-animateright-out 0.4s
}

.elastic-modal .spin-in {
	animation: elastic-modal-animatespin-in 0.6s
}

.elastic-modal .spin-out {
	animation: elastic-modal-animatespin-out 0.6s
}

@keyframes elastic-modal-animatespin-in {
	0% {
		transform: scale(1) rotate(0deg);
		opacity: 20%;
	}
	25% {
		transform: scale(2) rotate(120deg);
		opacity: 50%;
	}
	50% {
		transform: scale(.5) rotate(240deg);
		opacity: 75%;
	}
	100% {
		transform: scale(1) rotate(360deg);
		opacity: 100%;
	}
}

@keyframes elastic-modal-animatespin-out {
	0% {
		transform: scale(1) rotate(60deg);
		opacity: 100%;
	}
	25% {
		transform: scale(1.5) rotate(120deg);
		opacity: 70%;
	}
	75% {
		transform: scale(.75) rotate(240deg);
		opacity: 30%;
	}
	90% {
		transform: scale(.5) rotate(330deg);
		opacity: 20%;
	}
	100% {
		transform: scale(.5) rotate(360deg);
		opacity: 5%;
	}
}

@keyframes elastic-modal-animateleft-in {
	from {
		left: -300px;
		opacity: 0
	}
	to {
		left: 50%;
		opacity: 1
	}
}

@keyframes elastic-modal-animateleft-out {
	from {
		opacity: 1
	}
	to {
		left: -300px;
		opacity: 0
	}
}

@keyframes elastic-modal-animateright-in {
	from {
		right: -1000px;
		opacity: 0
	}
	to {
		right: 0;
		opacity: 1
	}
}

@keyframes elastic-modal-animateright-out {
	from {
		right: 0;
		opacity: 1
	}
	to {
		right: -1000px;
		opacity: 0
	}
}

@keyframes elastic-modal-animatebottom-in {
	from {
		bottom: -1000px;
		opacity: 0
	}
	to {
		bottom: 0;
		opacity: 1
	}
}

@keyframes elastic-modal-animatebottom-out {
	from {
		bottom: 0;
		opacity: 1
	}
	to {
		bottom: -1000px;
		opacity: 0
	}
}

@keyframes elastic-modal-animatetop-in {
	from {
		top: -300px;
		opacity: 0
	}
	to {
		top: 50%;
		opacity: 1
	}
}

@keyframes elastic-modal-animatetop-out {
	from {
		opacity: 1
	}
	to {
		top: -300px;
		opacity: 0
	}
}

@keyframes elastic-modal-animatezoom-in {
	from {
		transform: scale(0)
	}
	to {
		transform: scale(1)
	}
}

@keyframes elastic-modal-animatezoom-out {
	from {
		transform: scale(1)
	}
	to {
		transform: scale(0)
	}
}

@keyframes elastic-modal-fade-in {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}

@keyframes elastic-modal-fade-out {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0
	}
}

.elastic-modal-center {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.elastic-modal .modal-center {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.elastic-modal .modal-top-center {
	margin: 0;
	position: absolute;
	top: 0;
	left: 50%;
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
}

.elastic-modal .modal-bottom-center {
	margin: 0;
	position: absolute;
	bottom: 0;
	left: 50%;
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
}

.elastic-modal .modal-top-right {
	margin: 0;
	position: absolute;
	top: 0;
	right: 0;
}

.elastic-modal .modal-center-right {
	margin: 0;
	position: absolute;
	top: 50%;
	right: 0;
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}

.elastic-modal .modal-bottom-right {
	margin: 0;
	position: absolute;
	bottom: 0;
	right: 0;
}

.elastic-modal .modal-top-left {
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
}

.elastic-modal .modal-center-left {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 0;
	-ms-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}

.elastic-modal .modal-bottom-left {
	margin: 0;
	position: absolute;
	bottom: 0;
	left: 0;
}

.elastic-modal .overflow-modal {
	overflow: hidden;
}

.elastic-modal .move-modal {
	cursor: move;
}

.elastic-modal .modal-transparent {
	border: none !important;
	background: transparent !important;
	border-radius: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	/*overflow: hidden !important;*/
}

.elastic-modal-launch-modal {
	text-align: center;
}

.elastic-modal-launch-modal img:hover {
	-moz-transform: translate(-2px, -2px);
	-ms-transform: translate(-2px, -2px);
	-o-transform: translate(-2px, -2px);
	-webkit-transform: translate(-2px, -2px);
	transform: translate(-2px, -2px);
	cursor: pointer;
}


/* The sticky class is added to the header with JS when it reaches its scroll position */

.elastic-modal .sticky-header {
	top: 0;
	position: sticky;
	background: #fff;
	z-index: 1;
}

.elastic-modal .sticky-footer {
	bottom: 0;
	position: sticky;
	background: #fff;
	z-index: 1;
}


/* Modal Content */

.elastic-modal .modal-content {
	margin: auto !important;
	border: 1px solid #888;
	width: 100% !important;
	max-height: 80vh;
	overflow-y: auto;
	-ms-overflow-style: none;
	/* Internet Explorer 10+ */
	scrollbar-width: none;
	/* Firefox */
}

.elastic-modal .modal-content::-webkit-scrollbar {
	display: none;
	/* Safari and Chrome */
}

.elastic-modal .modal-header {
	padding: 20px 40px 10px 30px;
}


.elastic-modal .modal-title {
	display:unset;
}

.elastic-modal .modal-footer {
	padding: 10px 40px 10px 30px;
}

.elastic-modal .modal-body {
	padding: 20px 40px 20px 40px;
    background: #fff;
	width: unset;
}

.elastic-modal .modal-dialog {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	max-width: none !important;
	max-height: none !important;
}

@media only screen and (max-width: 1200px) {
	.elastic-modal .modal-position {
		min-width: 75vw !important;
	}
}

}
@media only screen and (max-width: 900px) {
	.elastic-modal .modal-position {
		min-width: 85vw !important;
	}
}
@media only screen and (max-width: 600px) {
	.elastic-modal .modal-position {
		min-width: 95vw !important;
	}
}
@media only screen and (max-width: 400px) {
	.elastic-modal .modal-position {
		min-width: 98vw !important;
	}
}

/* The Close Button */
.elastic-modal .close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}
.elastic-modal .close:hover,
.elastic-modal .close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

/*Resizeable*/
.elastic-modal .resizer-right {
	width: 5px;
	height: 100%;
	background: transparent;
	position: absolute;
	right: 0;
	bottom: 0;
	cursor: e-resize;
	z-index: 1;
}
.elastic-modal .resizer-bottom {
	width: 100%;
	height: 5px;
	background: transparent;
	position: absolute;
	right: 0;
	bottom: 0;
	cursor: n-resize;
	z-index: 1;
}
.elastic-modal .resizer-both {
	width: 5px;
	height: 5px;
	background: transparent;
	z-index: 10;
	position: absolute;
	right: 0;
	bottom: 0;
	cursor: nw-resize;
	z-index: 1;
}