@import 'init';
@blue: @brown;
@d-blue: @d-brown;

.modal {
	h1,h2,h3,h4,h5,h6 {
/*		color: @blue;*/
	}
	.modal-body {
		.btn-close {
			background-color: white !important;
			font-size: 2rem;
			line-height: 1.8;
			width: initial !important;
			margin: 0;
		}
		.modal-date {
			&.event-header-date {
				position: absolute;
				top: 1rem;
				right: -24px;
				height: 4rem;
				font-size: 2rem;
				background: @blue;
				padding: 0.5rem 1rem;
				color: white;
				&:after {
					content: '';
					display: block;
					position: absolute;
					width: 24px;
					height: 24px;
					bottom: -24px;
					right: 0;
					border-bottom: 12px transparent solid;
					border-right: 12px transparent solid;
					border-left: 12px @d-blue solid;
					border-top: 12px @d-blue solid;
				}
			}
		}
		.modal-padding {
			.event-title {
				font-weight: 700;
			}
			.event-date, .event-address {
				font-size: 1.2em;
			}
			.event-description {
				margin-top: 0.8rem;
/*				color: @grey;*/
			}
		}
	}
}

@media only screen and (max-width: 425px) {
	.modal {
		.modal-body {
			.modal-date.event-header-date {
				font-size: 1.2rem;
				right: -8px;
				height: 2.4rem;
				line-height: 1;
				&:after {
					width: 8px;
					height: 8px;
					bottom: -8px;
					border-width: 4px;
				}
			}
			.btn-close {
				font-size: 1rem;
			}
			.modal-padding {
				.event-title {
					font-size: 1.2rem;
				}
				.event-date, .event-address {
					font-size: 1rem;
				}
				.event-description {
					font-size: 14px;
				}
			}
		}
	}
}