/* 
    Created on : 01.12.2016, 13:47:57
    Author     : DFD
	Styles for : Modal Box Dfd shortcode
*/
.dfd-modal-box-overlay {
	position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(2,2,2,0.7);
    z-index: 999;
    visibility: hidden;
	.transition(~"visibility .3s ease-out, opacity .3s ease-out");
	opacity: 0;
	will-change: visibility, opacity;
	.backface-visibility(hidden);
	.transform(translate3d(0, 0, 0));
	.dfd-modal-box-cover {
		.abs();
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		visibility: hidden;
		.transition(visibility .5s ease-out);
		.transform(translate3d(0, 0, 0));
		&.scroll-show {
			overflow: scroll;
			&::-webkit-scrollbar {
				width: 3px;
				margin-right: 20px;
			}
			&::-webkit-scrollbar-track {
				background-color: transparent;
				border: none;
			}
			&::-webkit-scrollbar-thumb {
				height: 50px;
				background-color: fade(@black-color, 25%);
				border-radius: 5px;
			}
			&::-webkit-scrollbar-thumb:hover {
				background-color: fade(@black-color, 80%);
			}
		}
		.dfd-modal-box-wrap {
			width: 600px;
			margin: 0 auto;
			top: 50%;
			.rel();
			.transform(translateY(-50%));
			&.height-resize {
				top: 0;
				transform: none;
				overflow: hidden;
			}
			.dfd-socicon-cross-24 {
				font-size: 20px;
				position: absolute;
				top: 0;
				left: 100%;
				width: 20px;
				height: 20px;
				text-align: center;
				color: #fff;
				z-index: 9999;
				padding-left: 20px;
				cursor: pointer;
				.transition(color .3s ease);
				&:hover {
					color:rgba(255, 255, 255, .5);
				}
			}
			.dfd-modal-box-shortcode {
				padding: 30px;
				.vc-row-wrapper {
					> .row {
						min-width: auto;
					}
				}  
				&:not(.with-image){
					background: #fff;	
				}
				&.with-image {
					.background-size(cover);
					background-repeat: no-repeat;
				}
			}
		}
	}
}
.dfd-btn-open-modal-box {
	&.button-left {
		text-align: left;
	}
	&.button-center {
		text-align: center;
	}
	&.button-right {
		text-align: right;
	}
	.dfd-btn-wrap {
		.transition(all .5s cubic-bezier(.3,.95,.3,.95));
		border-width: 0;
		.rel();
		.inline-block();
		.dfd-btn-border {
			.abs();
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background: transparent;
			.rounded(inherit);
			.transition(all .5s cubic-bezier(.3,.95,.3,.95));
		}
	}
}