.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: @page_spacer_mobile;
	display: none;

	&.grey {
		background-color: #efefef;
	}

	&.edit-form,
	&.add-form,
	&.search-form,
	&.onboarding-form,
	&.modal-close {

		&:before {
			content: none;
		}

		.modal-content {
			max-width: none;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;

			@media @bp_768 {
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}

			@media @bp_1024 {
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}

			@media @bp_1200 {
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
		}
	}

	&.artist-detail-wide {

		&.open {

			&:before {
				.opacity(0.75);
			}
		}

		.modal-content {

			@media @bp_768 {
				max-width: 1210px;
			}
		}

		&:before {
			.opacity(0.5);
			background: @black;
		}

		.btn-close {
			background-size: 10px;
		}

		.pro-section {
			padding: 24px 0;
		}
		
		.modal-scroller {
			scrollbar-width: thin;

			&::-webkit-scrollbar {
				width: 5px;
			}

			&::-webkit-scrollbar-button {
				//background: #000;
			}

			&::-webkit-scrollbar-track-piece {
				background: #eee;
			}

			&::-webkit-scrollbar-thumb {
				background: #ccc;
			}
		}
	}

	&.payment {
		justify-content: center;
		align-items: center;
		padding: 0;
		display: none;

		&.open {
			display: flex;
		}
		
		.modal-content {
			height: 100%;
			width: 100%;
			top: auto;
			right: auto;
			bottom: auto;
			left: auto;

			@media @bp_768 {
				max-width: 600px;
				max-height: 430px;
			}

			@media @bp_1024 {
				max-width: 600px;
				max-height: 400px;
			}
		}

		&:before {
			.opacity(0.5);
			background: @black;
		}

		.payment-process {
			.box-sizing;
			padding: 0 30px;
			width: 100%;

			.content-container {

				&.loading {

					&:before {
						z-index: 10;
					}
				}

				&.payment-details {

					.form-row.submit {
						
						.btn-primary {
							.font-size(15);
							font-weight: 500;
						}
					}
				}
			}
		}
	}

	&.registration-form {
		justify-content: center;
		align-items: center;
		padding: 0;
		display: none;

		&.open {
			display: flex;
		}
		
		.modal-content {
			height: 100%;
			width: 100%;
			top: auto;
			right: auto;
			bottom: auto;
			left: auto;

			@media @bp_1200 {
				max-width: 1024px;
				max-height: 760px;
			}
		}

		&:before {
			.opacity(0.5);
			background: @black;
		}
	}

	&.registration-form-v2 {

		&.network {

			&.facebook {

				.modal-content {

					@media @bp_768 {
						max-height: 768px;
					}
				}
			}
		}

		&.reset-password {

			.modal-content {

				@media @bp_768 {
					max-height: 520px;
				}
			}
		}

		.modal-content {

			@media @bp_768 {
				max-width: 460px;
				max-height: 660px;
			}
		}
	}

	&.open {
		//.animation(fade-in 0.3s linear 0s forwards);
		.opacity(1);
		display: block;

		&:before {
			//.animation(fade-in 0.5s linear 0s forwards);
			.opacity(1);
		}
	}

	&.framed {

		.modal-content {
			top: 20px;
			right: 20px;
			bottom: 20px;
			left: 20px;

			@media @bp_768 {
				top: 60px;
				right: 60px;
				bottom: 60px;
				left: 60px;
			}

			@media @bp_1200 {
				top: 90px;
				right: calc(~'50% - 520px');
				bottom: 90px;
				left: calc(~'50% - 520px');
			}
		}
	}

	&.video {

		.modal-content {
			.translate(-50%,-50%);
			bottom: auto;
			top: 50%;
			left: 50%;
			margin: 0;
			width: 100%;

			@media @bp_768 {
				width: 90%;
			}

			@media @bp_1024 {
				width: auto;
			}
		}

		.page {
			justify-content: center;
			align-items: center;
			display: flex;
			padding: 40px 20px;
			flex: 1;

			@media @bp_768 {
				padding: 55px;
			}
		}

		.media-container {
			width: 100%;
		}

		.modal-scroller {
			position: static
;			overflow: visible;
			flex: 1;
		}
	}

	&.adaptive {

		.modal-content {
			.translate(-50%,-50%);
			top: 50%;
			left: 50%;
			margin: 0;
		}
	}

	&.paywall {
		justify-content: center;
		align-items: center;
		padding: 0;

		&.open {
			display: flex;
		}

		&:before {
			background: rgba(0,0,0,0.86);
		}

		.modal-content {
			width: 90%;
			height: 90%;
			text-align: center;

			@media @bp_768 {
				width: 740px;
				height: 650px;
				max-width: 780px;
				max-height: 650px;
			}

			.page {

				@media @bp_768 {
					padding-left: 40px;
					padding-right: 40px;
				}
			}

			h2 {
				.font-size(24);
				line-height: 36px;
				padding: 30px 0;
				font-weight: 600;
			}
		}

		.available {

			small {
				.font-size(12);
				display: block;
				padding-top: 40px;
				font-weight: 600;

				@media @bp_768 {
					padding-top: 80px;
				}
			}
		}

		.trial-days {
			.font-size(12);
			color: @green;
			letter-spacing: 1px;
			display: block;
			padding: ;
		}

		.screenshots {
			padding-bottom: 20px;

			@media @bp_768 {
				display: flex;
				flex-direction: row;
			}

			.item {
				.box-sizing;
				padding: 10px;

				@media @bp_768 {
					width: 33.33%;
				}
			}

			h4 {
				.font-size(16);
				line-height: 18px;
				font-weight: 500;
				padding: 0 0 15px 0;
				margin: 0;
			}
		}

		.section-main {
			padding-bottom: 30px;

			@media @bp_768 {
				min-height: 370px;
				padding-top: 30px;
				padding-bottom: 15px;
				display: flex;
				flex: 1;
				flex-direction: row;
				background-image: url('https://viberatecdn.blob.core.windows.net/com/landing/product-pre-pro.png');
				background-size: 90%;
				background-repeat: no-repeat;
				background-position: right -100px center;
				margin: 0 -40px 0 -40px;
			}

			.col {
				padding: 20px 0;

				@media @bp_768 {
					padding: 0;
					display: flex;
					align-items: flex-end;
					position: relative;
				}
			}

			.col-1 {
				text-align: center;

				@media @bp_768 {
					justify-content: flex-end;
					order: 2;
					width: 55%;
					align-items: center;
				}

				article {
					padding: 20px 0 0 0;
					text-align: center;
					max-width: 400px;
					margin: 0 auto;

					@media @bp_768 {
						text-align: left;
						padding: 60px 0 60px 0;
						flex: 1;
						max-width: 500px;
					}
				}

				img {

					@media @bp_768 {
						display: none;
					}
				}
			}

			.col-2 {
				padding-top: 0;
				text-align: center;
				padding-bottom: 10px;
			
				@media @bp_768 {
					.box-sizing();
					order: 1;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: 45%;
					text-align: left;
					padding-bottom: 0;
					padding-left: 40px;
					align-items: flex-end;
    				padding-bottom: 40px;
				}

				article {
					.box-sizing;
					width: 100%;
					
					@media @bp_360 {
						padding-left: 30px;
						padding-right: 30px;
					}

					@media @bp_768 {
						padding: 0;
					}

					h2 + p {

						@media @bp_768 {
							max-width: 200px;
						}
					}
				}
			}

			h2 {
				.font-size(22);
				line-height: 26px;
				font-weight: 500;
				padding: 0;
				letter-spacing: 0;

				@media @bp_768 {
					.font-size(28);
					line-height: 34px;
				}
			}

			p {
				.font-size(12);
				line-height: 16px;
				font-weight: 500;
				text-align: center;
				padding: 0;

				@media @bp_768 {
					.font-size(14);
					text-align: left;
					line-height: 20px;
				}
			}
		}

		.checkmarks {
			.font-size(13);
			line-height: 18px;
			text-align: left;
			padding: 10px 0 20px 0;

			li {
				margin-top: 6px;
				background-position: left top 4px;
				background-repeat: no-repeat;
				background-size: 12px;
				background-image: url('../images/svg/checkmark-fat-light-blue.svg');
				padding-left: 26px;

				&:first-child {
					margin-top: 0;
				}
			}
		}

		.suggested-artists {
			position: relative;
			min-height: 40px;

			@media @bp_768 {
				display: flex;
				flex-direction: row;
			}

			.item {
				.box-sizing;
				padding: 5px;

				@media @bp_768 {
					width: 33.33%;
				}
			}
		}

		.action-txt {
			.font-size(12);
			border-top: 1px solid #D8D8D8;
			padding: 30px 0;
			margin: 0;
			font-weight: 500;
		}

		.micro-artist {
			.vertical(#ffffff, #FAFBFC);
			color: @black;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0;
			border: 1px solid #eee;
			cursor: pointer;

			a {
				color: @blue;
			}

			figure {
				width: 68px;
				height: 68px;
				min-width: 68px;
				background-size: cover;
				background-position: center top;
				background-repeat: no-repeat;
			}

			strong {
				.clamp-lines(1);
				.font-size(12);
				flex: 1;
				text-align: left;
				padding: 0 12px;
				color: @blue;
			}
		}
	}

	&.onboarding,
	&.booking,
	&.change-city {
		justify-content: center;
		align-items: center;
		padding: 0;

		&.open {
			display: flex;
		}

		&:before {
			background: rgba(0,0,0,0.86);
		}

		.modal-content {
			width: 90%;
			height: 90%;
			max-height: 360px;
			max-width: 460px;
			text-align: center;

			@media @bp_768 {
				width: 460px;
				height: 460px;
				max-height: 460px;
			}
		}

		.page {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-between;
			text-align: center;
			align-items: center;

			@media @bp_768 {
				padding: 0 40px;
			}

			@media @bp_1200 {
				padding: 0 70px;
			}
		}

		h2 {
			.font-size(24);
			line-height: 29px;
			font-weight: 500;
			padding: 40px 0 35px 0;

			@media @bp_768 {
				padding-top: 102px;
			}
		}

		p {
			.font-size(12);
			line-height: 16px;
			font-weight: 500;
			color: @grey-1;
			flex-grow: 1;
			display: flex;
			max-width: 292px;
			padding-top: 0;
			margin: 0 auto;

			&.lead {
				color: @black;
			}
		}

		footer {
			padding: 20px 0 40px 0;

			.btn-text {
				.font-size(14);
				letter-spacing: 3px;
			}
		}
	}

	&.change-city {

		.modal-main {
			background-color: @white-2;
		}

		.modal-content {

			@media @bp_768 {
				height: 540px;
				max-height: 540px;
			}
		}

		.page {
			justify-content: flex-start;
		}

		h2 {

			@media @bp_768 {
				padding-top: 95px;
				padding-bottom: 25px;
			}
		}

		p {
			.font-size(14);
			line-height: 18px;
			flex: unset;
		}

		fieldset {
			position: relative;
			text-align: left;
		}

		.form-row {
			padding: 0;
		}

		.search-wrapper {
			position: relative;

			&.loading {

				&:after {
					content: none;
				}

				&:before {
					.prevent-click();
					background-image: url('../images/svg/loader-ani-black.svg');
					background-color: transparent;
					height: 35px;
					width: 35px;
					position: absolute;
					right: 45px;
					top: 50%;
					left: auto;
					bottom: auto;
					background-size: 35px;
					z-index: 1;
				}
			}
		}

		.input-search-cities {
			.font-size(24);
			font-weight: 500;
			background-color: @white;
			border: 0;
			margin-top: 35px;
			padding: 12px 80px 12px 24px;
			height: auto;
			line-height: 1;
			background-position: right 24px center;
			background-image: url(../images/svg/search-grey.svg);
			background-repeat: no-repeat;
			background-size: 18px;

			&::-webkit-input-placeholder {
				.font-size(14);	
			}

			&:-moz-placeholder {
				.font-size(14);
			}

			&::-moz-placeholder {
				.font-size(14);
			}

			&:-ms-input-placeholder {
				.font-size(14);	
			}

			&::-ms-input-placeholder {
				.font-size(14);	
			}

			&::placeholder {
				.font-size(14);	
			}
		}

		.search-results {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background-color: #f6f6f6;
			max-height: 185px;
			overflow: hidden;
			overflow-y: auto;

			&.show {
				display: block;
			}

			&::-webkit-scrollbar {
				width: 5px;
			}

			&::-webkit-scrollbar-button {
				//background: @grey;
			}

			&::-webkit-scrollbar-track-piece {
				background: @white-2;
			}

			&::-webkit-scrollbar-thumb {
				background: @grey;
			}

			.item {
				padding: 6px 24px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				cursor: pointer;

				&:hover {
					background-color: #eee;
				}

				&:first-child {
					margin-top: 10px;
				}

				&:last-child {
					margin-bottom: 10px;
				}
			}

			.city {
				.clamp-lines(1);
				color: @black;
			}

			.country {
				.font-size(10);
				line-height: 1;
				text-transform: uppercase;
				white-space: nowrap;
				vertical-align: middle;
				width: 10px;
				padding-right: 24px;

				.flag {
					vertical-align: middle;
				}
			}
		}
	}

	&.how-to {

		h1 {
			.font-size(22);
			line-height: 28px;
			font-weight: 500;
			padding: 40px 0 35px 0;
			padding-bottom: 40px;

			& + h2 {
				padding-top: 0;
			}
		}

		h2 {
			.font-size(18);
			line-height: 24px;
			font-weight: 500;
			padding: 40px 0 25px 0;

			& + p {
				padding-top: 0;
				margin-top: 0;
			}
		}

		h3 {
			.font-size(16);
			line-height: 24px;
			font-weight: 500;
			padding: 10px 0 0 0;
			
			@media @bp_768 {
				padding-left: 20px;
			}

			& + p {
				padding-top: 0;
				margin-top: 0;
			}
		}

		a {
			color: @dashboard-blue;
		}

		strong {
			font-weight: 500;
		}

		ul {
			padding-left: 20px;
			padding-bottom: 20px;

			@media @bp_768 {
				padding-left: 40px;
			}

			li {
				padding: 5px 0;
				list-style: disc;

				p {
					margin: 0;
					padding: 0;

					+ p {
						padding-top: 10px;
					}
				}
			}
		}

		.modal-content {
			.font-size(12);
			line-height: 18px;
			height: 70%;
			width: 90%;
			text-align: left;

			@media @bp_768 {
				.font-size(16);
				line-height: 24px;
			}

			@media @bp_1024 {
				height: 80%;
				width: 900px;
			}
		}

		.page {
			width: 100%;

			@media @bp_768 {
				padding-left: 50px;
				padding-right: 50px;
			}
		}
	}

	&.billing-info {

		h2 {
			.font-size(24);
			line-height: 29px;
			font-weight: 500;
			padding: 40px 0 15px 0;
		}

		.modal-content {
			height: 70%;
			width: 90%;

			@media @bp_768 {
				height: 440px;
				width: 540px;
			}
		}

		.page {
			width: 100%;
			//text-align: center;

			@media @bp_768 {
				padding-left: 50px;
				padding-right: 50px;
			}

			p {
				font-weight: 300;
				line-height: 24px;
				padding: 8px 0;
			}
		}

		.custom-input {
			text-align: left;
		}

		.form-row {

			&.cols {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 0 -12px;

				.col {
					padding: 0 12px;

					&.ccv {
						width: 80px;
					}
				}
			}
		}

		.actions {
			padding-top: 20px;
		}

		.btn-solid {
			.font-size(12);
			margin-top: 20px;
			font-weight: 500;
			text-transform: uppercase;
			color: @white;
			background-color: @blue;
			letter-spacing: 1px;
			line-height: 1;
			padding: 12px 24px;
			margin-top: 14px;

			&:hover {
				background-color: @blue-roll;
			}
		}

		.btn-not-solid {
			.font-size(12);
			font-weight: 500;
			text-transform: uppercase;
			color: @blue;
			letter-spacing: 1px;
			line-height: 1;
			margin-top: 14px;

			&:hover {
				color: @blue-roll;
			}
		}

		.btn + .btn {
			margin-left: 14px;
		}
	}
	
	&:before {
		.opacity(0);
		content: "";
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: url(../images/gif/noise-animated-dark.gif);
		background-repeat: repeat;
		background-size: 400px;
		background-position: center center;
		z-index: -1;
	}

	.page {
		padding: @page_spacer_mobile;
		margin: 0;
		max-width: none;

		@media @bp_480 {
			padding: @page_spacer_mobile_landscape;
		}

		@media @bp_768 {
			padding-left: @page_spacer_tablet;
			padding-right: @page_spacer_tablet;
		}

		@media @bp_1024 {
			padding-left: @page_spacer_tablet_landscape;
			padding-right: @page_spacer_tablet_landscape;
		}

		@media @bp_1200 {
			padding-left: @page_spacer_desktop;
			padding-right: @page_spacer_desktop;
		}
	}

	.modal-content {
		.box-sizing();
		.translate(0,0);
		background-color: @white;
		z-index: 1;
		margin: 0 auto;
		position: absolute;
		max-width: 1258px;
		display: flex;
		flex-direction: column;
		right: @page_spacer_mobile;
		top: @page_spacer_mobile;
		bottom: @page_spacer_mobile;
		left: @page_spacer_mobile;

		@media @bp_768 {
			right: @page_spacer_tablet;
			top: @page_spacer_tablet;
			bottom: @page_spacer_tablet;
			left: @page_spacer_tablet;
		}

		@media @bp_1024 {
			right: @page_spacer_tablet_landscape;
			top: @page_spacer_tablet_landscape;
			bottom: @page_spacer_tablet_landscape;
			left: @page_spacer_tablet_landscape;
		}

		@media @bp_1200 {
			right: @page_spacer_desktop;
			top: @page_spacer_desktop;
			bottom: @page_spacer_desktop;
			left: @page_spacer_desktop;
		}
	}

	/*.full-width {
		.box-sizing();

		@media @bp_1440 {
			padding: 0 110px;
		}
	}*/

	.modal-main {
		position: relative;
		height: 100%;

		@media @bp_768 {
			
			display: flex;
		}
	}

	.modal-scroller {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow-y: auto;
		display: flex;
		flex-direction: column;

		> .page {
			flex: 1;
		}
	}

	.btn-close {
		.font-size(0);
		position: absolute;
		top: 15px;
		right: 15px;
		width: 20px;
		height: 20px;
		background-size: 16px;
		z-index: 1;

		@media @bp_768 {
			width: 22px;
			height: 22px;
		}

		@media @bp_1440 {
			top: 24px;
		}
	}
}