/* Read More styles */
.dfd-module-readmore {
	display: inline-block;
	line-height: 1.3;

	span, a {
		display: inline-block;
	}

	.read-more-01,
	.read-more-08,
	.read-more-09 {
		.box-name();
		font-size: @box-name-font-size - 2;
		text-transform: uppercase;
		.transition(all .3s ease);
	}
	.read-more-01 {
		color: @box-name-color;
		padding-left: 0;
		border-left: 0 solid transparent;
		.transition(~"padding-left .3s ease, border-left-width .3s ease, border-left-color .3s ease");
		&:hover {
			padding-left: 15px;
			border-left-width: 3px;
			border-left-color: @third-site-light-color;
		}
	}
	.read-more-02 {
		@s: 20px;
		.rel();
		font-size: 0;
		margin: 0;
		width: 72px;
		height: 15px;
		span {
			.abs();
			top: 50%;
			.block();
			width: @s;
			height: 2px;
			background: @box-name-color;
			.transform-origin(100% 0%);
			.transition(all .3s ease);
			&:nth-child(1) {
				left: 0;
			}
			&:nth-child(2) {
				left: 50%;
				margin-left: -@s/2;
			}
			&:nth-child(3) {
				right: 0;
			}
		}
		&:hover {
			span {
				&:nth-child(1) {
					left: 50%;
					margin-left: -@s/2;
				}
				&:nth-child(2) {
					width: @s/2;
					margin-left: 0;
					.rotate(45deg);
				}
				&:nth-child(3) {
					width: @s/2;
					right: 50%;
					margin-right: -@s/2;
					.rotate(-45deg);
				}
			}
		}
	}
	.read-more-03 {
		font-size: 0;
		margin: 12px -4px 0 -4px;
		span {
			width: 8px;
			height: 8px;
			margin: 0 4px;
			border-radius: 100%;
			background: @box-name-color;
			.transform(translateY(0));
			&:nth-child(1) {
				-webkit-transition: background .3s ease, -webkit-transform .3s ease 0s, transform .3s ease 0s;
				-moz-transition: background .3s ease, -moz-transform .3s ease 0s;
				-ms-transition: background .3s ease, -ms-transform .3s ease 0s;
				-o-transition: background .3s ease, -o-transform .3s ease 0s;
				transition: background .3s ease, transform .3s ease 0s;
			}
			&:nth-child(2) {
				-webkit-transition: background .3s ease, -webkit-transform .3s ease .15s, transform .3s ease .15s;
				-moz-transition: background .3s ease, -moz-transform .3s ease .15s;
				-ms-transition: background .3s ease, -ms-transform .3s ease .15s;
				-o-transition: background .3s ease, -o-transform .3s ease .15s;
				transition: background .3s ease, transform .3s ease .15s;
			}
			&:nth-child(3) {
				-webkit-transition: background .3s ease, -webkit-transform .3s ease .3s, transform .3s ease .3s;
				-moz-transition: background .3s ease, -moz-transform .3s ease .3s;
				-ms-transition: background .3s ease, -ms-transform .3s ease .3s;
				-o-transition: background .3s ease, -o-transform .3s ease .3s;
				transition: background .3s ease, transform .3s ease .3s;
			}
		}
		&:hover {
			span {
				background: @third-site-light-color;
				&:nth-child(1) {
					.transform(translateY(-4px));
				}
				&:nth-child(2) {
					.transform(translateY(-4px));
				}
				&:nth-child(3) {
					.transform(translateY(-4px));
				}
			}
		}
	}
	.read-more-04 {
		overflow: hidden;
		padding: 0 7px;
		span {
			.rel();
			width: 4px;
			height: 12px;
			margin-left: 5px;
			left: 0;
			background: @third-site-dark-color;
			-webkit-transform: skewX(-45deg);
			transform: skewX(-45deg);
			.transition(~"left .3s ease, background .3s ease");
			
		}
		&:hover {
			span {
				background: @third-site-light-color;
				&:nth-child(1) {
					left: -2px;
				}
				&:nth-child(2) {
					
				}
				&:nth-child(3) {
					left: 2px;
				}
			}
		}
	}
	.read-more-05 {
		.rel();
		overflow: hidden;
		white-space: nowrap;
		span {
			.link-style();
			.link-decoration();
			top: -5px;
			&:hover {
				color: @link-color;
			}
		}
		i {
			font-size: 20px;
			.transition(margin .3s ease);
			&:first-child {
				margin-left: 0;
				margin-right: 10px;
			}
			&:last-child {
				margin-left: 10px;
				margin-right: -22px;
			}
		}
		&:hover {
			i {
				&:first-child {
					margin-left: -22px;
				}
				&:last-child {
					margin-right: 0;
				}
			}
		}
	}
	.read-more-06 {
		overflow: hidden;
		i {
			font-size: 26px;
			color: transparent;
			text-shadow: -30px 0 0 @third-site-light-color, 0 0 0 @box-name-color;
			.transition(text-shadow .3s ease);
		}
		&:hover {
			i {
				text-shadow: 0 0 0 @third-site-light-color, 30px 0 0 @box-name-color;
			}
		}
	}
	.read-more-07 {
		width: 38px;
		height: 38px;
		line-height: 38px;
		text-align: center;
		border-radius: 100%;
		i {
			position: relative;
			right: -1px;
			color: @box-name-color;
			font-size: 12px;
			text-shadow: 0 0 0 transparent, 0 0 0 transparent;
			.transition(~"right .3s ease, text-shadow .3s ease");
		}
		&:hover {
			i {
				right: -11px;
				text-shadow: -10px 0 0 @box-name-color, -20px 0 0 @box-name-color;
			}
		}
	}
	.read-more-08 {
		.default-button();
	}
	.read-more-09 {
		&:hover {
			color: @third-site-light-color;
		}
	}
	.read-more-10 {
		.block();
		width: 40px;
		height: 7px;
		.rel();
		margin-top: -20px;
		> span {
			display: block;
			width: 10px;
			height: 1px;
			.abs();
			top: 3px;
			left: 50%;
			margin-left: -5px;
			background: transparent;
			&:before,
			&:after {
				content: "";
				.block();
				width: 10px;
				height: 1px;
				.abs();
				top: 0;
				left: 0;
				.transform(rotate(0deg));
			}
			&:before {
				background: rgba(40,38,43,0.3);
				-webkit-transition: -webkit-transform .3s ease, background .3s linear;
				-moz-transition: -moz-transform .3s ease, background .3s linear;
				-o-transition: -o-transform .3s ease, background .3s linear;
				transition: transform .3s ease, background .3s linear;
			}
			&:after {
				background: transparent;
				-webkit-transition: -webkit-transform .3s ease, background .3s linear .2s;
				-moz-transition: -moz-transform .3s ease, background .3s linear .2s;
				-o-transition: -o-transform .3s ease, background .3s linear .2s;
				transition: transform .3s ease, background .3s linear .2s;
			}
			&:first-child {
				left: 0;
				margin-left: 0;
			}
			&:last-child {
				left: auto;
				right: 0;
				margin-left: 0;
			}
		}
		&:hover {
			> span {
				&:before {
					.transform(rotate(-45deg));
				}
				&:after {
					background: rgba(40,38,43,0.3);
					.transform(rotate(45deg));
					-webkit-transition: -webkit-transform .3s ease, background 0s linear .05s;
					-moz-transition: -moz-transform .3s ease, background 0s linear .05s;
					-o-transition: -o-transform .3s ease, background 0s linear .05s;
					transition: transform .3s ease, background 0s linear .05s;
				}
			}
		}
	}
}

/* Hover styles */
.more-hover {
	.dfd-module-readmore {
		> * {
			opacity: 0;
			.transform(translateY(110%));
			.transition(~"all .3s ease");
		}
	}
	&:hover {
		.dfd-module-readmore {
			> * {
				.opacity(1);
				.transform(translateY(0));
			}
		}
	}
}