.motta-popup {

	position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

	z-index: 1100;

	display: none;

}



.motta-popup__backdrop {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    cursor: pointer;

    background-color: rgba(0, 0, 0, 0.24);

}



.motta-popup__content {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    max-width: 640px;

    width: 100%;

    transition: 0.5s;

}



.motta-popup__close {

    position: absolute;

    right: 16px;

    top: 16px;

    font-size: 16px;

    font-size: 1rem;

    z-index: 1;

    cursor: pointer;

}



.motta-popup-position--left-bottom .motta-popup__content {

	top: auto;

	bottom: 40px;

	left: 30px;

	right: auto;

	transform: translateX(-100%);

	transform: none;

}



.motta-popup-position--right-bottom .motta-popup__content {

	top: auto;

	bottom: 40px;

	left: auto;

	right: 30px;

	transform: translateX(100%);

	transform: none;

}



.motta-popup-position--left-top .motta-popup__content {

	top: 40px;

	bottom: auto;

	left: 30px;

	right: auto;

	transform: translateX(100%);

	transform: none;

}



.motta-popup-position--center-bottom .motta-popup__content {

	top: auto;

	bottom: auto;

	left: 30px;

	right: auto;

	transform: translateY(-100%);

	transform: none;

}



@media (min-width: 768px) {

	.motta-popup.hide-overlay .motta-popup__backdrop {

		display: none;

	}



	.motta-popup.hide-overlay {

		pointer-events: none;

	}



	.motta-popup.hide-overlay .motta-popup__content  {

		pointer-events: auto;

	}



}



@media (max-width: 767px) {

	.motta-popup-position--left-bottom .motta-popup__content {

		left: 0;

		bottom: 0;

		max-width: 100%;

	}



	.motta-popup-position--center .motta-popup__content {

		left: 16px;

		right: 16px;

		transform: translateY(-50%);

		width: auto;

		margin: 0 auto;

	}



	.motta-popup.hide-overlay-mobile .motta-popup__backdrop {

		display: none;

	}

}