/* 
    Created on : 18.08.2016, 16:42:16
    Author     : DFD
	Styles for : Presentation tilted shortcode
*/

.dfd-presentation-tilted-wrap {
	.rel();
	z-index: 1;
	.dfd-presentation-tilted-list {
		margin-bottom: 0;
		overflow: hidden;
		.rounded(8px);
	}
	.dfd-presentation-tilted-item {
		.rel();
		padding: 45px 80px;
		overflow: initial;
		.rounded(inherit);
		.head-container {
			.rel();
			display: table;
			padding-bottom: 15px;
			.icon-wrap,
			.title-wrap {
				display: table-cell;
				vertical-align: middle;
			}
			.icon-wrap {
				font-size: 40px;
				color: @main-site-light-color;
			}
			.icon-decoration {
				.rel();
				.block();
			}
			.title-wrap {
				padding-left: 25px;
				.dfd-content-title-big {
					line-height: 1.3;
					padding-bottom: 5px;
				}
				.dfd-content-subtitle {
					font-size: 13px;
					color: #b5b5b5;
					line-height: 1.3;
				}
			}
		}
		.description {
			.rel();
		}
		.main-decoration {
			.abs();
			.block();
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: 0 10px;
			.rounded(inherit);
			&:before {
				content: "";
				.abs();
				top: 0;
				width: 100%;
				height: 100%;
				.rounded(inherit);
			}
		}
		&.dfd-background-light {
			.main-decoration {
				&:before {
					background: @background-grey;
				}
			}
		}
		&.dfd-background-dark {
			.main-decoration {
				&:before {
					background: #343434;
				}
			}
			.head-container .title-wrap .dfd-content-subtitle {
				color: rgba(255,255,255,.4);
			}
		}
		&:first-child {
			padding-left: 50px;
			.main-decoration {
				margin-left: 0;
				&:before {
					width: 150%;
					right: 0;
				}
			}
		}
		&:last-child {
			padding-right: 50px;
			.main-decoration {
				margin-right: 0;
				&:before {
					left: 0;
					width: 150%;
				}
			}
		}
	}
	&.style-1,
	&.style-2 {
		.full-width-element {
			.dfd-presentation-tilted-item {
				.main-decoration {
					.transform(skew(0));
				}
			}
		}
	}
	&.style-1 {
		.dfd-presentation-tilted-item {
			.main-decoration {
				.transform(skew(24deg));
			}
		}
	}
	&.style-2 {
		.dfd-presentation-tilted-item {
			.main-decoration {
				.transform(skew(-24deg));
			}
		}
	}
}