_modal.scss

.themodal-lock {
	/* when modal is opened we're removing scrollbars from the main content */
	overflow: hidden;
}

.themodal-overlay {
	/* overlay will stay fixed and will take all the space available */
	position: fixed;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	z-index: 100;

	/* if modal content doesn't fit inside the overlay, display scrollbars */
	overflow: auto;

	/* allow one-finger iPad scrolling */
	-webkit-overflow-scrolling: touch;

}

/* fix for iPad glitches */
.themodal-overlay > * {
	-webkit-transform: translateZ(0px);
}

.themodal-overlay {
	background: rgba(0, 0, 0, 0.5);
	/* IE6–IE8 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #7F000000, endColorstr = #7F000000);
	zoom: 1;
}


.themodal-overlay {
	padding-left: 15px;
	background-color: rgba($blue, 0.96);
}

.modal {
	background-color: $base-background-color;
	padding: $base-spacing;
	position: relative;

	.close {
		position: absolute;
		top: $small-spacing;
		right: $small-spacing;
		color: $base-font-color;

		span {
			@include hide-text;
			display: block;
			width: 0;
			height: 0;
		}

		&:before {
			@include icon-font();
			content: "\e911";
			font-size: 1.3em;
		}
	}

	h1, h2, h3, h4, h5, h6 {
		&:first-of-type {
			margin-top: 0;
			margin-bottom: 0.2em;
			padding: 0;
			border: none;
			font-size: em(20);
		}
	}

	&#upload {
		@include MQ(L) {
			max-width: 350px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 100px;
		}

		p {
			font-size: em(14);
		}

		button {
			display: block;
			width: 100%;
		}

		.file {
			margin-top: $base-spacing;

			.remove {
				float: right;
				color: $medium-gray;
				cursor: pointer;

				span {
					@include hide-text;
					display: block;
					width: 0;
					height: 0;
				}

				&:before {
					@include icon-font();
					content: "\e913";
					font-size: 1.3em;
				}

				&:hover {
					color: $dark-gray;
				}
			}

			.file-name {
				font-size: em(14);
				font-weight: normal;
				line-height: 1.5em;

				&:before {
					@include icon-font();
					content: "\e912";
					font-size: 1.5em;
					float: left;
				}
			}

			.progress-bar {
				margin-top: $small-spacing;
				margin-bottom: $small-spacing;
			}

			textarea {
				font-size: em(13);
			}
		}
	}
}