@charset "utf-8";
/* Top Page
****************************************/
#eyesee-10th-top{
 width:100%;
 margin:0 auto;
 padding:3px 0 0 0;
 vertical-align:top;
}
#eyesee-10th-top:after{
 content:"";
 display:block;
 height:0px;
 clear:both;
}
.grid{margin:0 auto; padding:0;}

.grid-item-sizer{width:25%;}
.grid-item-wrapp{
 display:block;
 float:left;
 padding:0;
 margin:0;
}
.ten-box-1{
 width:50%;
}
.ten-box-2{
 width:25%;
}
.grid-item{
 position:relative;
 width:100%;
 height:auto;
 padding:0;
 margin:0;
 box-sizing:border-box;
 border:3px solid #fff;
}
.issues-item:before{
 content:"";
 display:block;
 padding-top:100%;
}
.ten-box-1 .grid-item:before{
 padding-top:97.961%;
}

.grid-innner{
 display:block;
 width:100%;
 height:auto;
 text-decoration:none !important;
 font-weight:bold;
 box-sizing:border-box;
 text-align:center;
}
.issues-item .grid-innner{
 position:absolute;
 top:0;
 left:0;
 height:100%;
}
.grid-innner img{
 width:100%;
 height:auto;
}
.item-content,
.issues-panel{
 position:relative;
 display:block;
 width:100%;
 height:100%;
 margin:0;
 padding:0;
 line-height:1px;
 overflow:hidden;
}
.issues-panel{
 line-height:1.25;
 background-color:#f4f4f4;
}
.item-caption{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 color: #fff;
 font-weight: bold;
 vertical-align: middle;
 background-color: rgba(0,0,0,0.4);
 
 opacity:0;
}
.item-caption span{
 position: absolute;
 display: block;
 width: 100%;
 height: auto;
 text-align: left;
 left:0;
 bottom: 7%;
 margin: 0 0 0 7%;
 font-size:150%;
 line-height:1.25;

 -webkit-transform: translateX(30px);
 -moz-transform: translateX(30px);
 -o-transform: translateX(30px);
 -ms-transform: translateX(30px);
 transform: translateX(30px);
/*
 -webkit-transform: scale(0.7);
 -moz-transform: scale(1.3);
 -o-transform: scale(1.3);
 -ms-transform: scale(1.3);
 transform: scale(0.8) translateY(-20px);
*/
 opacity:0;
}
.ten-box-1 .item-caption span{
 bottom:4%;
 margin-left:4%;

}
.issues-panel p{
 position:absolute;
 bottom:6%;
 left:7%;
 margin:0;
 padding:0;
 font-size:175%;
 text-align:left;
 color:#000;
}
.arrow{
 display:block;
 width:10.4325%;
 height:auto;
 position:absolute;
 bottom:7.3665%;
 right:7.3665%;
 opacity:1;
}
.ten-box-1 .arrow{
 width:5.15%;
 bottom:3.7688%;
 right:3.7688%;
}

.grid-innner img.panel-img,
.item-caption,
.item-caption span{
 -webkit-transition: all 0.3s ease-out;
 -moz-transition: all 0.3s ease-out;
 -ms-transition: all 0.3s ease-out;
 -o-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}
.arrow{
 -webkit-transition: all 0.3s linear;
 -moz-transition: all 0.3s linear;
 -ms-transition: all 0.3s linear;
 -o-transition: all 0.3s linear;
 transition: all 0.3s linear;
}

.grid-innner:hover img.panel-img{
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
}
.grid-innner:hover .item-caption,
.grid-innner:hover .item-caption > span{
 opacity:1;
}
.grid-innner:hover .item-caption > span{
 -webkit-transform: translateY(0px);
 -moz-transform: translateY(0px);
 -o-transform: translateY(0px);
 -ms-transform: translateY(0px);
 transform: translateY(0px);
/*
 transform: scale(1) translateY(0px);
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 */
}
.grid-innner:hover .issues-panel{
 background-color:#d0d0d0;
}

.grid-innner:hover .arrow{
	-webkit-animation: arrow-anime 0.4s forwards;
	animation: arrow-anime 0.4s forwards;
}
.ten-box-1 .grid-innner:hover .arrow{
	-webkit-animation: arrow-anime2 0.4s forwards;
	animation: arrow-anime2 0.4s forwards;
}

@-webkit-keyframes arrow-anime {
	45% {bottom:0%; right:0%; opacity:0;}
	50% {bottom:14%; right:14%;}
	100% {bottom:7.3665%; right:7.3665%; opacity:1;}
}
@keyframes arrow-anime {
	45% {bottom:0%; right:0%; opacity:0;}
	50% {bottom:14%; right:14%;}
	100% {bottom:7.3665%; right:7.3665%; opacity:1;}
}
@-webkit-keyframes arrow-anime2 {
	45% {bottom:0%; right:0%; opacity:0;}
	50% {bottom:14%; right:14%;}
	100% {bottom:3.7688%; right:3.7688%; opacity:1;}
}
@keyframes arrow-anime2 {
	45% {bottom:0%; right:0%; opacity:0;}
	50% {bottom:8%; right:8%;}
	100% {bottom:3.7688%; right:3.7688%; opacity:1;}
}

.introduction{
 -webkit-transition: all 0.3s linear;
 -moz-transition: all 0.3s linear;
 -ms-transition: all 0.3s linear;
 -o-transition: all 0.3s linear;
 transition: all 0.3s linear;
}
.introduction:hover{
 opacity:0.5;
}
.eyesee-logo{
 display:block;
 width:25.86%;
 margin:50px auto 26px;
}
.eyesee-copy{
 display:block;
 width:56.855%;
 margin:0 auto 15px;
}
.ten-years-logo{
 display:block;
 width:83%;
 text-align:center;
 margin:0 auto;
}
.ten-years-logo > img{
 width:59.1%;
 margin:0 auto 25px;
}
.ten-years-logo .ten-lead{
 color:#000;
 text-align:left;
 font-size:91%;
 line-height:1.5;
}
.ten-years-logo .ten-lead p{
 margin:0 auto;
}

.read-more{
 display:inline-block;
 font-size:138%;
 font-weight:bold;
 line-height:1.2;
 padding:0 30px 0 0;
 margin:40px auto;
 background:url(../img/more_arrow.gif) no-repeat 100% 50%;
 color:#000;
}


@media screen and (max-width: 640px){
.ten-box-1{
 width:100%;
}
.ten-box-2{
 width:50%;
}
.issues-panel p{
 font-size:150%;
}
.item-caption span{
 font-size:120%;
}
}