/**
 * CSS Modal Theme 'Resize'
 * http://drublic.github.com/css-modal
 */
@import "../modal-config";

%modal--resize {
	.modal-inner {
		-webkit-transition: none;
		        transition: none;
	}

	// When screen isn't as wide as the modal anymore
	@media screen and (max-width: $modal-max-width + 40) {
		.modal-inner {
			right: auto !important;

			img {
				max-width: 100% !important;
			}
		}

		.modal-close:after {
			right: 50%;
		}
	}

	@media screen and (max-width: $modal-small-breakpoint) {
		.modal-inner {
			left: 0 !important;
			right: 0 !important;
			margin-left: 0 !important;
			margin-right: 0 !important;
		}
	}
}

.modal-content img {
	display: block;
	margin: 0 auto;
}