.modal {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.7);

	@include animation(fadein 0.2s);

	padding: 30px;

	&__wrapper {

		position: relative;
		padding: 60px 20px 20px 20px;

		width: 100%;
		height: 100%;
		background-color: $color-base;
		border-radius: 6px;

	}

	&__header {
		line-height: 100%;
		z-index: 100;
		position: absolute;
		top: 30px;
		left: 0;
		width: 100%;
		padding: 0 40px;
		font-family: 'Ubuntu Mono';
		color: white;
		@include font-size(18px);
	}

	&__content {
		width: 100%;
		height: 100%;
		canvas {
			@include animation(fadeinwithdelay 0.5s);
			border-radius: 6px;
		}
	}

	&__close {
		position: fixed;
		z-index: 101;
		top: 60px;
		right: 60px;
		width: 30px;
		height: 30px;
		fill: white;
		cursor: pointer;
		opacity: 0.7;
		&:hover { opacity: 1; }
	}

}