.theme {
	.modal {
		opacity: 0;
		pointer-events: none;
		background: white;

		overflow: auto;
		
		top: 40%;
		height: 20%;
		width: 20%;
		left: 40%;
		z-index: 998;

		transition: .3s;
		position: fixed;

		&.open {
			display: block;
			opacity: 1;
			
			top: 20%;
			height: 60%;
			width: 100% - 50%;
			left: 50%/2;

			@media @small {
				top: 10%;
				left: 10%;
				width: 80%;
				height: 70%;
			}

			pointer-events: all;
		}

		.col-loop(@name, @total, @i) when (@i > 0) {
			&.@{name}@{i} {
				float: left;
				left: auto;
				right: auto;
				box-sizing: border-box;
				left: (100% - (@i * 100% / @total)) / 2;
				width: @i * 100% / @total;
			}
		
			.col-loop(@name, @total, @i - 1);
		}

			
		.col-loop(s, 12, 12);
	
		@media @mediumAndUp {
			.col-loop(m, 12, 12);
		}
	
		@media @largeAndUp {
			.col-loop(l, 12, 12);
		}

		@media @extraLargeAndUp {
			.col-loop(e, 12, 12);
		}
	}
	
	.modal-shade {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 997;
		background: rgba(0, 0, 0, .7);
		opacity: 0;
	}
}