@charset "UTF-8";

/* CSS Document */


/* Popup Box */


/* The Modal (background) */

.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 8888;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: hidden;
	/* Enable scroll if needed */
	background-color: rgb(242, 234, 218);
	/* Fallback color */
	background-color: rgba(242, 234, 218, 0.7);
	/* Color w/ opacity < change back to 237,227,209 when testing animation is done */
	margin-left: auto;
	margin-right: auto;
}


/* Modal Content/Box */

.modal_content {
	background-color: #fff;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	max-width: 728px;
	padding: 20px 20px 60px 20px;
	height: 85%;
	/* Full height */
	overflow-y: auto;
	box-shadow: 0px 5px 20px 10px rgba(122, 75, 61, 0.1);
	border-radius: 25px;
}


/* Add to CSS for fade animation */

.fade_in {
	-webkit-animation: fadeIn ease-in 0.3s;
	-moz-animation: fadeIn ease-in 0.3s;
	animation: fadeIn ease-in 0.3s;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-duration: 0.3s;
	-moz-animation-duration: 0.3s;
	animation-duration: 0.3s;
}

.fade_out {
	-webkit-animation: fadeOut ease-in 0.3s;
	-moz-animation: fadeOut ease-in 0.3s;
	animation: fadeOut ease-in 0.3s;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-duration: 0.3s;
	-moz-animation-duration: 0.3s;
	animation-duration: 0.3s;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-moz-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}


/*
Check out:
https://cssanimate.com


Notes:
Use these key frames:

@keyframes slide-in-bottom {
  0%{
    -webkit-transform: translateY(1000px);
    transform: translateY(1000px);
    opacity: 0;
  }
  100%{
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

From:
https://angrytools.com/css/animation/
slide-in/slide-in-bottom

*/

.slide_in {
	animation-name: slide_in;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: none;
}

.slide_out {
	animation-name: slide_out;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: alternate;
	animation-fill-mode: none;
}

@keyframes slide_in {
	0% {
		-webkit-transform: translateY(300px);
		transform: translateY(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slide_out {
	100% {
		-webkit-transform: translateY(300px);
		transform: translateY(300px);
		opacity: 0;
	}
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slide {
	0% {
		-webkit-transform: translateY(300px);
		transform: translateY(300px);
		opacity: 0.2;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}


/* The Close Button */

.close {
	background-color: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	padding: 12px 12px 8px 12px;
	border-radius: 30px;
	/* box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.20); « does not work on safari, the blur-radius throws it off also spred will throw it off*/
	/* float:right; */
	position: fixed;
	top: 20px;
	right: 10px;
	z-index: 1;
}

.close:hover,
.close:focus {
	cursor: pointer;
}

button.button {
	border: none;
}

button.button:hover {
	border: none;
}

@media screen and (min-width: 900px) {}

@media screen and (min-width: 481px) and (max-width: 899px) {
	.modal_content {
		max-width: 635px;
	}
}

@media screen and (max-width: 480px) {}