
.tk-lp-modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 15px;
  overflow: auto;
  background-color: rgba(0,0,0,.7);
  animation-duration: .3s;
  animation-fill-mode: both;
  animation-name: fadeIn;
  z-index: 9999;

  .tk-lp-modal-close {
	position: fixed;
	top: 20px;
	right: 40px;
	border: none;
	color: #ccc;
	background-image: none;
	cursor: pointer;
	padding: 10px;
	background-color: var(--tk-lp-dark-color);
	fill: var(--tk-lp-white-color);
	border-radius: 100%;
	transition: all .3s ease;
	display: flex;

	&:hover,
	&:focus {
	  background-color: var(--tk-lp-accent-color);
	}
  }

  /* States */
  &.is-modal-active {
	display: flex;
  }
}

body.popup-active {
  overflow: hidden;
}

.tk-lp-modal-close-link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Animation */
@keyframes fadeIn {
  0% {
	opacity: 0;
  }

  100% {
	opacity: 1;
  }
}