*:before { box-sizing: border-box; }

/* Grid */
.grid__item , .grid__item-duplicate{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding: 0px;
	margin: 0px;
	margin-top: 20px;
	text-align: center;
	-webkit-transform: translate3d(0,0,0); /* Solves Safari bug because of SVG clipping mask */	
	position: absolute;
	top: 0;
	width: 100%;
	margin-left: auto;
	margin-right: auto;	
}

/* General link styles */
.link {
	position: relative;
	line-height: 1;
	display: inline-block;
}

/* Yaku */
.link--yaku, .link--yaku-jp {
	
	color: #000;
	font-family: 'Crimson Text', serif;
	font-weight: 400;
	
	font-size: 3em;
	overflow: hidden;
	padding: 0 0 10px;
}

.link--yaku span, .link--yaku-jp span {
    perspective: 1000px;
    transform-style: preserve-3d;

	display: inline-block;
	position: relative;
	-webkit-transform: rotate3d(0,1,0,0deg);
	transform: rotate3d(0,1,0,0deg);
	-webkit-transition: -webkit-transform 0.5s, color 0.5s;
	transition: transform 0.5s, color 0.5s;	
	
}


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


/* * * * * * * * * * * * * * */
/* Animations                */
/* * * * * * * * * * * * * * */
.link--yaku{
	border-width: 2px 0;
	border-color: rgba(255,255,255,0.0);
	border-style: solid;	
}

.link--yaku span{
    /* -webkit-animation: mymove 1.1s forwards;  Chrome, Safari, Opera */ 
    animation: mymove 1.1s forwards;	
	
	
	-webkit-animation-name: mymove;
	-webkit-animation-duration: 1.1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;

}

.link--yaku span:nth-child(4),
.link--yaku:hover span:first-child {
	animation-delay: 1.0s;
}

.link--yaku span:nth-child(3),
.link--yaku:hover span:nth-child(2) {
	animation-delay: .8s;
}

.link--yaku span:nth-child(2),
.link--yaku:hover span:nth-child(3) {
	animation-delay: .6s;
}

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


/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    0%   {
		
		color: #000;
		/* -webkit-transform: rotate3d(0,1,0,0deg); */
		-webkit-transform: rotateY(0deg);
	}
    5%  {
		
	}
    50%  {
		opacity: 1;
	}
	
    100% {
		color: #ffb900;
		/* -webkit-transform: rotate3d(0,1,0,360deg); */
		-webkit-transform: rotateY(360deg);
		opacity: 0.0;
	}
}

/* Standard syntax */
@keyframes mymove {
    0%   {
		
		color: #000;

		/* transform: rotate3d(0,1,0,0deg); */
		transform: rotateY(0deg);
	}
    25%  {

	}
    50%  {
		opacity: 1;
	}
	
    100% {
		color: #ffb900;

		/* transform: rotate3d(0,1,0,360deg); */
		transform: rotateY(360deg);		
		opacity: .0;
	}
}		

/* Standard syntax */
@-ms-keyframes mymove {
    0%   {
		
	}
    25%  {
	}
    50%  {
		opacity: 1;
	}	
    100% {
		opacity: .0;
	}
}		
		
		
		
		
/* * * * * * * * * * * * * * */
/* HOVER DUPLICATE Animations     */
/* * * * * * * * * * * * * * */		
.link--yaku-jp{
	border-width: 2px 0;
	border-color: #aaa;
	border-style: solid;
	opacity: 1;
}
.link--yaku-jp::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	border-width: 2px 0;
	border-color: #ab9350;
	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-jp:hover::before {
	 -webkit-transform: translate3d(0,0,0);
	 transform: translate3d(0,0,0);

}
		
.link--yaku-jp:hover span {
	color: #ab9350;
	/* -webkit-transform: rotate3d(0,1,0,360deg);*/
	/* transform: rotate3d(0,1,0,360deg);*/
	-webkit-transform: rotateY(360deg);
	transform: rotateY(360deg);
	transform: rotate3d(0,1,0,360deg);
}

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

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

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

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


	
.link--yaku-jp span{
	opacity: 0;
    -webkit-animation: mymove-jp 1.8s forwards; /* Chrome, Safari, Opera */ 
    animation: mymove-jp 1.8s forwards;		
	animation-delay: 2.1s;

	
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove-jp {
	from {
		opacity: 0;
	}
	to {	
		opacity: 1;
	}
}

/* Standard syntax */
@keyframes mymove-jp {	
	from {
		opacity: 0;
	}
	to {	
		opacity: 1;
	}
}

/* Standard syntax */
@-ms-keyframes mymove-jp {
	from {
		opacity: 0;
	}
	to {	
		opacity: 1;
	}
}	

/* line effect */
.link--yaku-jp::before {
	right: 0;
	top: 0;
	-webkit-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}

.link--yaku-jp::after {
	left: 0;
	bottom: 0;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
}



.link--yaku-jp {
    -webkit-animation: mymove-line .5s forwards;
    animation: mymove-line .5s forwards;	
	animation-delay: 0.1s;	
}


/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove-line {
    0%   {	
		-webkit-transform: scale3d(0,1,1);

	}
    100% {	
		-webkit-transform: scale3d(1,1,1);

	}
}

/* Standard syntax */
@keyframes mymove-line {
    0%   {	

		transform: scale3d(0,1,1);
	}
    100% {	

		transform: scale3d(1,1,1);
	}
}			

/* Standard syntax */
@-ms-keyframes mymove-line {
    0%   {	
		-webkit-transform: scale3d(0,1,1);
		transform: scale3d(0,1,1);
	}
    100% {	
		-webkit-transform: scale3d(1,1,1);
		transform: scale3d(1,1,1);
	}
}