/**************************\
  Basic Modal Styles
\**************************/

.modal {
	display: none;
}
.modal.is-open {
	display: block;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
	background: rgb(136, 136, 136,.5);
  display: flex;
  justify-content: center;
  align-items: center;
	z-index: 100;
}

.modal__container {
	position: relative;
  background-color: #fff;
  padding: 30px 20px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal__head {
	margin-bottom: 10px;
}

.modal__img {
	overflow: auto;
	max-height: 300px;
	padding-right: 10px;
	margin-right: -10px;
	margin-bottom: 20px;
}

.modal__close {
  background: transparent;
  border: 0;
}

.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0,0,0,.8);
}

.modal__close {
 background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%20fill%3D%22none%22%3E%3Crect%20width%3D%2225%22%20height%3D%2225%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill%3D%22%23d50035%22%20rx%3D%2212.5%22%2F%3E%3Crect%20width%3D%2225%22%20height%3D%2225%22%20x%3D%22.5%22%20y%3D%22.5%22%20stroke%3D%22%23d50035%22%20rx%3D%2212.5%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m8.047%2017.951%209.9-9.9m-9.893.001%209.9%209.9%22%2F%3E%3C%2Fsvg%3E") no-repeat left top / contain;
	width: 26px;
	height: 26px;
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}
@media screen and ( min-width:600px ){
	.modal__container {
		padding: 30px 100px;
		max-width: 900px;
		max-height: 800px;
		height: fit-content;
	}
	
	.modal__head {
		margin-bottom: 20px;
	}
	
	.modal__img {
		min-height: 439px;
		max-height: none;
		padding-right: 30px;
		margin-right: -30px;
		margin-bottom: 20px;
	}
	
	.modal__close {
		width: 40px;
		height: 40px;
		top: 30px;
		right: 30px;
	}
}

/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

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

@keyframes mmslideIn {
  from { transform: translateY(15%); }
    to { transform: translateY(0); }
}

@keyframes mmslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}