/* General link styles */
.link {
	outline: none;
	text-decoration: none;
	position: relative;
	font-size: 8em;
	line-height: 1;
	color: #9e9ba4;
	display: inline-block;
}


/* Yaku */
.link--yaku {
	color: #3B9689;
	font-family: 'Playfair Display';
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1em;
	overflow: hidden;
	padding: 0 0 10px;
}

.link--yaku::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	border-width: 2px 0;
	border-color: #3B9689;
	border-style: solid;
	left: 0;
	-webkit-transform: translate3d(-101%,0,0);
	transform: translate3d(-101%,0,0);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.link--yaku:hover::before {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.link--yaku span {
	display: inline-block;
	position: relative;
	-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
	transform: perspective(1000px) rotate3d(0,1,0,0deg);
	-webkit-transition: -webkit-transform 0.5s, color 0.5s;
	transition: transform 0.5s, color 0.5s;
}

.link--yaku:hover span {
	color: #3B9689;
	-webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg);
	transform: perspective(1000px) rotate3d(0,1,0,360deg);
}

.link--yaku span:nth-child(4),
.link--yaku:hover span:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.link--yaku span:nth-child(3),
.link--yaku:hover span:nth-child(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.link--yaku span:nth-child(2),
.link--yaku:hover span:nth-child(3) {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.link--yaku span:first-child,
.link--yaku:hover span:nth-child(4) {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

@media screen and (max-width: 42em) {
	.link--yaku { font-size: 4em; }
}

/* Yaku */
.link--yaku2 {
	color: #3B9689;
	font-family: 'Playfair Display';
	font-weight: 400;
	text-transform: uppercase;
	font-size: 1em;
	overflow: hidden;
	padding: 0 0 10px;
}

.link--yaku2::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	border-width: 2px 0;
	border-color: #3B9689;
	border-style: solid;
	left: 0;
	-webkit-transform: translate3d(-101%,0,0);
	transform: translate3d(-101%,0,0);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.link--yaku2:hover::before {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.link--yaku2 span {
	display: inline-block;
	position: relative;
	-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
	transform: perspective(1000px) rotate3d(0,1,0,0deg);
	-webkit-transition: -webkit-transform 0.5s, color 0.5s;
	transition: transform 0.5s, color 0.5s;
}

.link--yaku2:hover span {
	color: #ffffff;
	-webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg);
	transform: perspective(1000px) rotate3d(0,1,0,360deg);
}

.link--yaku2 span:nth-child(4),
.link--yaku2:hover span:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.link--yaku2 span:nth-child(3),
.link--yaku2:hover span:nth-child(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.link--yaku2 span:nth-child(2),
.link--yaku2:hover span:nth-child(3) {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.link--yaku2 span:first-child,
.link--yaku2:hover span:nth-child(4) {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}