/* 
    Created on : 21.12.2015
    Author     : Crumina
	Styles for : Info box module
*/
.dfd-info-box {
	position: relative;
	.wrap-delimiter {
		font-size: 0;
	}
	.ovh{
		overflow: hidden;
	}
	.full-box-link{
		display: block;
		background: transparent;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.clear{
		clear: both;
	}
	.delimiter {
		display: inline-block;
		margin: 10px 0 0;
		border-bottom: 1px dotted fade(#000, 10%);
		max-width: 90%;
		width: 100%;
	}
	.icon-wrapper {
		margin-bottom: 15px;
	}
	.info-box-readmore {
		margin-top: 15px;
	}
	.icon-wrapper,
	.module-icon {
		display: inline-block;
		position: relative;
	}
	.module-icon {
		.transition(border-color .3s ease);
		i {
			.transition(color .3s ease);
		}
	}
	.description a {color: inherit;}
	&:not(.with-text) {
		.module-icon {
			width: 1em;
			height: 1em;
			font-size: 102px;
			border-radius: 100%;
			background-size: cover;
			color: fade((#000), 10%);
			position: relative;
			img {
				position: relative;
			}
		}
	}
	.featured-icon {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		text-align: center;
		transform: translateY(-50%);
		font-size: 40px;
		color: @widget-title-h1-color;
	}
	.info-box-icon-text {
		text-align: center;
		width: 2.2em;
		height: 2.2em;
		line-height: 2.25em;
		background: #a16961;
		color: #fff;
		border-radius: 100%;
		position: absolute;
		right: -.75em;
		bottom: 0;
		margin: 0;
		font-family: @widget-title-font-family;
		font-size: 18px;
		font-weight: bold;
	}

	/* Style of icon */
	&.style-01 {
		.icon-wrapper {
			margin-bottom: 5px;
		}
		.featured-icon {
			font-size: 66px;
		}
		.module-icon {
			background: none !important;
		}
		&:not(.with-icon) {
			font-size: 96px;
		}
		.info-box-icon-text {
			bottom: .5em;
		}
	}
	&.style-02 {
		.module-icon {
			background: @third-site-light-color;
		}
		.featured-icon {
			color: #fff;
		}
	}
	&.style-03 {
		.module-icon {
			box-sizing: border-box;
			border-width: 1px;
			border-style: solid;
			.info-box-icon-text {
				bottom: -1px;
			}
		}
	}
	&.style-04 {
		.module-icon {
			box-sizing: border-box;
			border: 4px solid;
		}
	}
	&.style-05 {
		.module-icon:before {
			content: " ";
			position: absolute;
			border-radius: inherit;
			border: 1px solid;
			z-index: -1;
			top: -5px;
			left: -5px;
			right: -5px;
			bottom: -5px;
		}
		.info-box-icon-text {
			bottom: -5px;
		}
	}
	&.style-04 {
		.module-icon:before {
			content: " ";
			position: absolute;
			border-radius: inherit;
			top: -10px;
			left: -10px;
			right: -10px;
			bottom: -10px;
			border: 1px solid;
		}
		.info-box-icon-text {
			bottom: -4px;
		}
	}
	&.style-06 {
		text-align: center;
		.module-icon, .icon-wrapper {
			display: block;
			width: 100%;
		}
		.module-icon {
			background: none !important;
			border: none !important;
			font-size: 60px;
		}
		.featured-icon {
			color: inherit;
			transform: translate(0);
			top: 0;
			font-size: 220px;
		}
		.info-box-icon-text {
			display: none;
		}
	}
	&.style-06, &.style-01 {
		.hover-layer {
			display: none;
		}
	}

	/* module layout */

	&.layout-02 {
		.icon-wrapper {
			margin: 15px;
		}
	}
	&.layout-01, &.layout-03, &.layout-04, &.layout-05, &.layout-06, &.layout-07 {
		.description + div {
			margin-top: 20px;
		}
	}
	&.layout-03 {
		.icon-wrapper {
			margin: 5px 0 15px 0;
		}
	}

	&.layout-04, &.layout-06 {
		.icon-wrapper {
			float: left;
			margin-right: 25px;
		}
		.content-wrap, .clear {
			text-align: left;
		}
	}
	&.layout-05, &.layout-07 {
		.icon-wrapper {
			float: right;
			margin-left: 25px;
		}
		.content-wrap, .clear {
			text-align: right;
		}

	}
	&.layout-06,&.layout-07{
		.module-icon{
			font-size: 80px;
		}
	}
	&.hover-up-box, &.hover-up-icon .module-icon {
		transform:(translate3d(0,0,0));
		.transition(transform .3s ease-in-out);
	}
	&.hover-up-icon:hover {
		.module-icon {
			.transform(translateY(-10px));
		}
	}
	&.hover-up-box:hover {
		.transform(translateY(-10px));
	}
	&.icon-bg-change {
		.hover-layer {
			opacity: 0;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			border-radius: inherit;
			.transition(opacity .3s ease-in-out);
		}
		&:hover{
			.hover-layer{
				opacity: 1;
			}
		}
	}
}

.single-product {
	.dfd-info-box {
		.description {
			border-width: 0;
			margin: 0;
			padding: 0;
		}
	}
}