#wcs-vue-modal,
.wcs-vue-modal{
	display: none;
}
.wcs_modal--opened #wcs-vue-modal,
.wcs_modal--opened .wcs-vue-modal{
	display: block;
}
.wcs-modal{
	color: rgba(0,0,0,0.65);
	text-align: center;
	font-size: 16px;
	width: 100%;
	z-index: 1;
	background-color: rgba(0,0,0,0.8);
	z-index: 9999999;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	overflow-x: hidden;
	overflow-y: scroll;

	*{
		box-sizing: border-box;
	}

	&__loader{
		background-color: rgba(0,0,0,0.8);
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		text-align: center;
		display: flex;
		align-items: center;
		align-content: center;
		padding-top: 60px 0;
	}

	h2{
		margin: 0 0 20px;
		color: inherit;
		font-size: 160%;
		text-align: left;
		line-height: 1.42;

		small{
			display: block;
			font-weight: normal;
		}
	}
	a:not(.wcs-btn):not(.wcs-modal__close){
		color: inherit;
	}
	&--light{
		background-color: rgba(255,255,255,0.8);

		&.wcs-modal__loader{
			background-color: rgba(255,255,255,0.8);
		}

		&.wcs-modal__loader .wcs-spinner > div{
			background-color: rgba(0,0,0,0.65);
		}

		.wcs-modal__close{
			color: rgba(0,0,0,0.65);

			&:hover{
				color: rgba(0,0,0,0.35);
			}
		}
		.wcs-modal__inner{
			box-shadow: 0px 0px 33px 4px rgba(0, 0, 0, 0.125);
		}

	}
	&__box{
		margin: auto;
		background-size: cover;
		position: relative;


		@media (min-width: 992px) {
			width: 800px;
		}
		@media (min-width: 1200px) {
			width: 1000px;
		}
	}
	&__inner{
		background-color: rgba(255, 255, 255, 1);
		border-radius: 2px;
		margin: 60px 0 0;
		display: flex;
		flex-wrap: wrap;
		text-align: left;

		@media (min-width: 992px) {
			flex-wrap: nowrap;
			margin: 100px 0;
		}

	}
	&__content{
		width: 100%;
		padding: 50px;

		@media (min-width: 992px) {
			width: calc(100% - 300px);

			&--full{
				width: 100%;
			}
		}
	}
	&__side{
		width: 100%;
		position: relative;
		padding: 0;

		&::before,
		&::after{
			content: '';
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: currentcolor;
			opacity: 0.05;
		}
		&::after{
			right: 0;
			bottom: auto;
			border-top: 1px solid currentcolor;
			opacity: 0.1;
		}
		@media (min-width: 992px) {
			width: 300px;
			display: block;

			&::after{
				right: auto;
				bottom: 0;
				border-left: 1px solid currentcolor;
				opacity: 0.1;
			}
		}
	}
	&__meta{
		list-style: none;
		margin: 0;
		padding: 50px 50px 20px;
		width: 100%;

		@media (min-width: 992px) {
			padding: 50px 30px;
		}

		li{
			position: relative;
			padding: 0 0 0 30px;
			font-size: 90%;
			margin: 0 0 10px 0;
			display: block;
		}
		[class*='ti-']::before{
			position: absolute;
			left: 0;
			top: 1px;
		}
	}
	&__close{
		position: absolute;
		right: 20px;
		top: 0;
		margin-top: -40px;
		color: #fff;
		font-size: 24px;
		text-decoration: none !important;

		&:hover{
			color: #fff;
			opacity: 0.75;
		}
		@media (min-width: 992px) {
			right: 0;
		}
	}
	&--muted{
		opacity: 0.65;
		font-size: inherit;
	}
	&__action{
		padding: 50px 50px 20px;
		width: 100%;

		@media (min-width: 992px) {
			padding: 50px 30px;
		}
	}
	.wcs-map{
		width: 100%;
		height: 300px !important;
	}
	.wcs-image{
		display: none;
		border-radius: 0;
		border-top-right-radius: 2px;

		@media (min-width: 992px) {
			width: 100%;
			height: auto;
			display: block;
		}
	}
	.ti-time{
		&::before{
			margin-top: 2px;
		}
	}
	.wcs-btn{
		margin: 0 10px 10px 0;
	}
	&--large{
		&.wcs-modal--with-image{
			.wcs-modal__side{
				padding-top: 30vh;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
			}
		}
		.wcs-modal{
			&__inner{
				flex-direction: row-reverse;
				display: block;
			}
			&__content{
				width: 100%;
			}
			&__side{
				width: 100%;
				color: white;
			}
			&__meta{
				padding: 0;

				li{
					width: auto;
					display: inline-block;
					margin-right: 10px;
					white-space: nowrap;
				}
			}
		}
		.wcs-modal__inner-side{
			padding: 50px 50px 20px;
			background-color: rgba(0,0,0,0.45);
			position: relative;

			@include pseudo-block( 'before', 'bg', 0.5, 0,0,0,0 );

			&::before{
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+100&0+14,0.65+100 */
				/* IE9 SVG, needs conditional override of 'filter' to 'none' */
				background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE0JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
				background: -moz-linear-gradient(top,  rgba(0,0,0,0) 1%, rgba(0,0,0,0) 14%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 1%,rgba(0,0,0,0) 14%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  rgba(0,0,0,0) 1%,rgba(0,0,0,0) 14%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			}
		}
		h2{

		}
		.wcs-btn{
			margin: 5px 0 0 10px;
			padding: 10px 25px;
			float: right;
			font-size: 15px;
			position: relative;

			&:hover{
				color: inherit;

				&::before{
					opacity: 0.35;
				}
			}

			&::before{
				content: '';
				position: absolute;
				display: block;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: currentcolor;
				opacity: 0.225
			}
		}
		.wcs-label--sold-out{
			display: inline-block;
			background-color: rgba(0,0,0,0.25);
			float: right;
			margin: 5px 0 0 10px;
			font-size: 15px;
			line-height: 1;
			margin: 5px 0 0 10px;
			padding: 10px 25px;
		}
	}
}


body.wcs_modal--opened{
	overflow: hidden;

	>:not(#wcs-vue-modal):not(.wcs-vue-modal),
	&::before,
	&::after{
		filter: blur(7px) grayscale(1);
	}
}