/* 
    Created on : 24.10.2016, 9:44:01
    Author     : DFD
	Styles for : Responsive VC param
*/
.dfd-responsive-param-container {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 450px;
	.box-sizing(border-box);
	* {
		.box-sizing(border-box);
	}
	.dfd-responsive-properties-wrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		&:nth-child(1) {
			h4 {
				background-position: 50% 2px;
			}
		}
		&:nth-child(2) {
			h4 {
				margin-left: 85px;
				background-position: 50% -18px;
			}
		}
		&:nth-child(3) {
			h4 {
				margin-left: 170px;
				background-position: 50% -82px;
			}
		}
		&.active {
			h4 {
				background-color: #f2f2f2;
			}
			.inner-wrap {
				visibility: visible;
				opacity: 1;
				z-index: 7;
			}
		}
		h4 {
			position: absolute;
			display: inline-block;
			width: 80px;
			text-transform: capitalize;
			padding: 13px 15px;
			background-color: transparent;
			background-image: url(../img/column_offset_screen_size.png);
			background-repeat: no-repeat;
			cursor: pointer;
			z-index: 9;
			.rounded(3px);
			.transition(background-color .3s ease);
			.tooltip {
				font-size: 12px;
				font-weight: normal;
				text-transform: capitalize;
				position: absolute;
				top: 100%;
				left: 50%;
				text-align: center;
				min-width: 86px;
				padding: 3.5px 10px;
				margin-top: 11px;
				color: #ffffff;
				background: #383838;
				visibility: hidden;
				opacity: 0;
				.transition(~"opacity .3s ease, visibility .3s ease");
				.transform(translateX(-50%));
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 25px;
					margin-left: -1px;
					border: 2px solid transparent;
					border-bottom: 2px solid #383838;
					border-left: 2px solid #383838;
				}
			}
			&:hover {
				.tooltip {
					visibility: visible;
					opacity: 1;
				}
			}
		}
		.inner-wrap {
			position: relative;
			width: 100%;
			height: 380px;
			margin: 70px auto 0;
			visibility: hidden;
			opacity: 0;
			.transition(~"visibility .3s ease, opacity .3s ease");
			.dfd-margin-size {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: 100%;
				height: 100%;
				label {
					font-size: 9px;
					position: absolute;
					top: 6px;
					left: 5px;
					text-transform: lowercase;
					color: #2c2c2c;
				}
			}
			.dfd-margin-size {
				background: #ffffff;
				border: 1px dashed #bababa;
				label {
					
				}
				input {
					&.crum_number_field {
						position: absolute;
						max-width: 50px;
						min-height: 30px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						padding: 0;
						background: transparent;
						&:nth-child(2) {
							top: 10px;
							left: 50%;
							.transform(translateX(-50%));
						}
						&:nth-child(3) {
							top: 50%;
							right: 10px;
							.transform(translateY(-50%));
						}
						&:nth-child(4) {
							bottom: 10px;
							left: 50%;
							.transform(translateX(-50%));
						}
						&:nth-child(5) {
							top: 50%;
							left: 10px;
							.transform(translateY(-50%));
						}
					}
				}
				.dfd-border-size {
					position: absolute;
					top: 50px; bottom: 50px;
					left: 70px; right: 70px;
					display: block;
					padding: 5px;
					background: #f6f6f6;
					border: 1px solid #d7d7d7;
					label {
						
					}
					.dfd-padding-size {
						position: absolute;
						top: 50px; bottom: 50px;
						left: 70px; right: 70px;
						display: block;
						padding: 5px;
						background: #ebebeb;
						border: 1px solid #bababa;
						label {

						}
						&:before {
							content: "";
							display: block;
							width: 40%;
							height: 40px;
							position: absolute;
							top: 50%;
							left: 50%;
							margin-top: -20px;
							margin-left: -20%;
							background: #ebebeb url(../img/logo_ce.png) center center no-repeat;
							border: 1px solid #bababa;
						}
					}
				}
			}
		}
	}
}