@charset "utf-8";
/*
Theme Name: ietani
Description: 家谷植景研究所テーマ
Author: toshinoriCawai(office MONARCH)
Version: 2014
*/

/*
----------------------------------------------------------------------------
Customize
----------------------------------------------------------------------------
*/

body{
background-color: #41B1FF;
animation: bg-color 20s infinite;
-ms-animation: bg-color 20s infinite;
-o-animation: bg-color 20s infinite;
-moz-animation: bg-color 20s infinite;
-webkit-animation: bg-color 20s infinite;
}

#wrapper{
display: none;
width:100%;
height:100%;
}

#main{
}

/*
----------------------------------------------------------------------------
header
----------------------------------------------------------------------------
*/

header{
position: fixed;
margin: 8vh 5% 0;
overflow: hidden;
z-index:10000;
}

a.logo p.company{
display: block;
width: 280px;
height: 61px;
padding: 20px 0 0 0;
font: 22px 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
letter-spacing: 5px;
line-height: 200%;
text-align: right;
color: white;
background: url(http://www.ietani.com/img/logo_en@2x.png);
background-repeat:no-repeat;
background-positiou:center left;
background-size:80px 80px;
}

aside{
width: 500px;
margin: 30px auto 20px;
padding-bottom: 15px;
font-size: 1rem;
letter-spacing: 4px;
text-align: center;
border-bottom: dashed 1px white;
-webkit-transition: border-bottom 1s ease-out;
-moz-transition: border-bottom 1s ease-out;
-ms-transition: border-bottom 1s ease-out;
transition: border-bottom 1s ease-out;
z-index: 10000;
}

aside ul.sidebar ul li a{
margin: 0 15px;
padding-bottom:1px;
border:none;
float: left;
}

aside ul.sidebar ul li a span {
color: white;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
-ms-transition: color 1s ease-out;
transition: color 1s ease-out;
}

aside ul.sidebar ul li a:hover,
aside ul.sidebar ul li a.active{
padding-bottom:0px;
border-bottom:solid 1px black;
}

/*
----------------------------------------------------------------------------
footer
----------------------------------------------------------------------------
*/

p.open{
position:fixed;
bottom:0;
left:50%;
margin-left:-20px;
width:50px;
height:40px;
background: url(/img/open@2x.png) no-repeat 50% 50%;
background-size:50px 40px;
display:block;
-webkit-transition: display 0.5s ease-out;
-moz-transition: display 0.5s ease-out;
-ms-transition: display 0.5s ease-out;
transition: display 0.5s ease-out;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
z-index:10000;
}

p.open:hover{
display:none;
-webkit-display:none;
-moz-display:none;
}

footer{
width: 94%;
padding: 0px 3% 15px;
position: fixed;
bottom: 0;
font-size: 0.8rem;
text-align: center;
line-height: 180%;
z-index: 10005;
background-color: rgba(0,0,0,0);
color: white;
opacity:0;
-webkit-transition: background-color 0.5s ease-out,color 0.5s ease-out,opacity 0.5s ease-out;
-moz-transition: background-color 0.5s ease-out,color 0.5s ease-out,opacity 0.5s ease-out;
-ms-transition: background-color 0.5s ease-out,color 0.5s ease-out,opacity 0.5s ease-out;
transition: background-color 0.5s ease-out,color 0.5s ease-out,opacity 0.5s ease-out;
}

footer:hover{
background-color: rgba(255,255,255,1);
-webkit-background-color: rgba(255,255,255,1);
-moz-background-color: rgba(255,255,255,1);
color:black;
-webkit-color: black;
-moz-color: black;
opacity:1;
-webkit-opacity:1;
-moz-opacity:1;
}

footer a{
color:white;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
-ms-transition: color 1s ease-out;
transition: color 1s ease-out;
}

footer:hover a,
footer:hover aside ul.sidebar ul li a span{
color:black;
-webkit-color: black;
-moz-color: black;
}

footer:hover a:hover{
color:#ccc;
}

footer:hover aside{
border-bottom: dashed 1px black;
-webkit-border-bottom: dashed 1px black;
-moz-border-bottom: dashed 1px black;
}

#topcontrol{
top: 50%;
right: 3%;
margin-top: -45px;
z-index: 9999;
}

/*
----------------------------------------------------------------------------
index
----------------------------------------------------------------------------
*/

@-webkit-keyframes bg-color {
  0% { background-color: #8BBE94; }
  20% { background-color: #5FEAED; }
  40% { background-color: #4FB0FF; }
  60% { background-color: #FFA5A5; }
  80% { background-color: #FFCA8D; }
  100% { background-color: #8BBE94; }
}
@-moz-keyframes bg-color {
  0% { background-color: #8BBE94; }
  20% { background-color: #5FEAED; }
  40% { background-color: #4FB0FF; }
  60% { background-color: #FFA5A5; }
  80% { background-color: #FFCA8D; }
  100% { background-color: #8BBE94; }
}
@keyframes bg-color {
  0% { background-color: #8BBE94; }
  20% { background-color: #5FEAED; }
  40% { background-color: #4FB0FF; }
  60% { background-color: #FFA5A5; }
  80% { background-color: #FFCA8D; }
  100% { background-color: #8BBE94; }
}

/*
top
*/

section#index{
position:relative;
width: 100%;
height: 100%;
background-color: #80ffff;
animation: bg-color 20s infinite;
-moz-animation: bg-color 20s infinite;
-webkit-animation: bg-color 20s infinite;
text-align: center;
z-index:1000;
}

section#index article{
height: 100%;
margin:0;
overflow: hidden;
z-index: 10000;
}

section#index article img.simbol{
position: absolute;
top: 50%;
left: 50%;
margin: -145px 0 0 -100px;
z-index: 10000;
}

section#index article p.company{
position: absolute;
top: 50%;
left:50%;
margin: 75px 0 0 -148px;
font: 30px 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
letter-spacing:15px;
line-height:200%;
z-index: 10000;
}

section#index article aside ul.sidebar ul li a{
text-decoration:none;
}

section#index div.down{
width: 50px;
height: 70px;
position: absolute;
bottom: 60px;
right: 10%;
-webkit-transition: -webkit-transform 0.4s;
-webkit-transition: transform 0.4s;
transition: transform 0.4s;
-webkit-animation: fuwafuwa 1.0s linear 0.4s infinite;
animation: fuwafuwa 1.0s linear 0.4s infinite;
}

@-webkit-keyframes fuwafuwa {
to {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(0px, -8px);
transform: translate(0px, -8px);
}
}
@keyframes fuwafuwa {
to {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(0px, -8px);
transform: translate(0px, -8px);
}
}

/*
top galler area
*/

p.here{
width:100%;
position: fixed;
bottom:30px;
text-align:center;
font-size:1.2rem;
letter-spacing:3px;
}

/*
action
*/

section#recent a.action{
position: relative;
display: inline-block;
top: 20px;
left: 0;
width: auto;
min-width: 400px;
padding: 8px 0;
color: white;
font-size:1rem;
letter-spacing:2px;
line-height: 40px;
text-align: center;
background: white;
}

section#recent a.action:after{
content: "";
position: absolute;
top: 50%;
bottom: 0px;
margin: -10px 0 0 0;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 0px 10px 20px;
}

section#recent a.action{
color:white;
border: solid 1px white;
background: none;
-webkit-transition: color 0.5s ease-out, border 0.5s ease-out, background 0.5s ease-out;
-moz-transition: color 05.s ease-out, border 0.5s ease-out, background 0.5s ease-out;
-ms-transition: color 0.5s ease-out, border 0.5s ease-out, background 0.5s ease-out;
transition: color 0.5s ease-out, border 0.5s ease-out, background 0.5s ease-out;
}

section#recent a.action:hover{
color:black;
-webkit-color: white;
-moz-color: white;
border: solid 1px #ddd;
-webkit-border: solid 1px #ddd;
-moz-border: solid 1px #ddd;
background: white;
-webkit-background: white;
-moz-background:  white;
}

section#recent a.action:after
border-color: transparent white;
-webkit-transition: border-color 0.5s ease-out;
-moz-transition: border-color 0.5s ease-out;
-ms-transition: border-color 0.5s ease-out;
transition: border-color 0.5s ease-out;
}

section#recent a.action:hover:after{
border-color: transparent white;
-webkit-border-color: transparent white;
-moz-border-color: transparent white;
}

/*
----------------------------------------------------------------------------
category
----------------------------------------------------------------------------
*/

h2.category{
position:fixed;
left: 5%;
}

#container{
overflow-y: scroll;
overflow-y:hidden\9;
overflow-x:hidden\9;
}

#container.category{
background: rgba(0,0,0,0.15);
overflow-y: scroll;
overflow-y:hidden\9;
overflow-x:hidden\9;
}

#container.category #content{
width:960px;
margin:5% auto;
}

article.post-list{
display: inline-block;
width: 100%;
height: 100%;
background: none;
margin: 50px 0;
padding-bottom: 50px;
}

.etxt{
width: 100%;
max-width: 760px;
float:right;
}

#infscr-loading{
margin:30px auto;
text-align:center;
}

/*
----------------------------------------------------------------------------
暮らす場所をつくる user page
----------------------------------------------------------------------------
*/

#container.user{
color:black;
background: rgba(0,0,0,0.15);
overflow-y: hidden;
}

.user img.title-kurasubasho{
width:280px;
height:40px;
position: fixed;
top: 20vh;
left: 5%;
margin:0;
background:none;
z-index: 10000;
}

#container.category.user {
margin-right: 250px;
background:#f9f9f9;
}

.user #userprof{
display: block;
position: relative;
margin: 0;
padding: 0;
text-align: center;
line-height: 200%;
z-index: 1000;
}

#userprof .profimg{
width: 200px;
height: 200px;
position: relative;
top: 10%;
left: 50%;
margin: 15% 0 0 -100px;
border-radius: 130px;
background: url(http://www.ietani.com/wp-content/uploads/2014/11/noimage.png) no-repeat;
background-size: 200px 200px;
z-index: 10;
}

#userprof .profimg img {
width: 200px;
height: auto;
border-radius: 130px;
}

#userprof .profinfo {
padding: 90px 0 30px;
background: white;
position: relative;
bottom: 0;
margin-top: -50px;
z-index: 0;
}

#userprof p.username {
font-size: 20px;
letter-spacing: 3px;
}

#userprof p.userarea {
margin: 30px 0;
}

img.backto{
width: 50px;
height: 50px;
position: fixed;
top: 3%;
right: 3%;
z-index: 10000;
}

/*
user insta posts list
*/

section#user{
display:flex;
display:-webkit-flex;
display:-moz-box-flex;
width: 100%;
height: 100%;
min-height: 50vh;
overflow: hidden;
text-align: center;
background: white;
}

section#user #instaarea{
display: inline-block;
display:-moz-box-flex;
width:100%;
}

section#user header.entry-header{
position: relative;
margin:0;
overflow: hidden;
padding: 80px 0;
z-index: 10000;
}

section#user #instaarea .instalist {
width: 25%;
height: auto;
margin: 0;
overflow: hidden;
float: left;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
}

section#user #instaarea .instalist figure{
position: relative;
overflow: hidden;
width:auto\9;
height:auto\9;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
}

section#user #instaarea .instalist figure div {
display: flex!important;
display:-webkit-flex;
display: -moz-box;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
}

section#user #instaarea .instalist figure div img {
width: 100%;
height: 100%;
vertical-align: bottom;
}

section#user #instaarea .instalist figcaption {
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    box-sizing: border-box;
}

section#user #instaarea .instalist figcaption p {
position: absolute;
width: 90%;
top: 20%;
text-align: center;
font-size: 0.9rem;
line-height: 180%;
}

section#user #instaarea .instalist figcaption p.caption{
position: absolute;
width: 90%;
top:55%;
text-align: center;
font-size: 0.8rem;
line-height: 1.6em;
}

.back{
display: inline-block;
width:80px;
height:80px;
margin:50px 0 50px -40px;position:relative;
left:50%;
background:url(/img/back.png) no-repeat center center;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

.back:hover{
background:url(/img/back_hover.png) no-repeat center center;
}

/*
----------------------------------------------------------------------------
content page
----------------------------------------------------------------------------
*/

h2.pagetitle{
width: 180px;
position: fixed;
top: 90px;
right: 5%;
text-align: center;
letter-spacing: 5px;
}

h3.pagetitle{
margin:5px 0 15px;
}

h4{
margin: 50px 0;
font-size: 30px;
font-weight: lighter;
letter-spacing: 16px;
line-height: 100%;
text-align:centr;
}

#container.page{
background: rgba(0,0,0,0.15);
overflow-y: scroll;
overflow-y:hidden\9;
overflow-x:hidden\9;
}

#container.page #content{
width:960px;
margin:5% auto;
}

#container.page #content article{
width: 650px;
margin: 180px auto;
text-align: left;
font-size: 1rem;
line-height: 200%;
letter-spacing: 3px;
}

dt{
margin-bottom: 15px;
border-bottom: solid 1px white;
}

dd{
margin-bottom: 50px;
}

.browser img {
margin-top: 5px;
}

/*
----------------------------------------------------------------------------
404
----------------------------------------------------------------------------
*/

section#index div.notfound{
margin: 3% auto;
text-align: center;
font-size: 0.8rem;
line-height: 300%;
letter-spacing: 3px;
}

section#index div.notfound h1 {
font-size: 2rem;
letter-spacing: 5px;
line-height: 100%;
}

section#index div.notfound p{
font-size: 1rem;
margin:15px 0;
}

a.backtohome {
display: block;
position:fixed;
bottom:10%;
left:50%;
width: 500px;
height: 45px;
margin: 0 0 0 -250px;
font-size: 1.2em;
line-height: 300%;
letter-spacing: 3px;
text-align: center;
z-index:10000;
}

a.backtohome:after {
content: "";
position: relative;
top: -1px;
left: 50%;
margin-left: -15px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 30px 30px 0px;
}

a.backtohome{
color:white;
border: solid 1px white;
background: none;
-webkit-transition: color 0.5s ease-out, border 0.5s ease-out, background 0.5s ease-out;
-moz-transition: color 05.s ease-out, border 0.5s ease-out, background 0.5s ease-out;
-ms-transition: color 0.5s ease-out, border 0.5s ease-out, background 0.5s ease-out;
transition: color 0.5s ease-out, border 0.5s ease-out, background 0.5s ease-out;
}

a.backtohome:hover{
color:black;
-webkit-color: white;
-moz-color: white;
border: solid 1px white;
-webkit-border: solid 1px white;
-moz-border: solid 1px white;
background: white;
-webkit-background: white;
-moz-background:  white;
}

a.backtohome:after{
border-color: transparent white;
-webkit-transition: border-color 0.5s ease-out;
-moz-transition: border-color 0.5s ease-out;
-ms-transition: border-color 0.5s ease-out;
transition: border-color 0.5s ease-out;
}

a.backtohome:hover:after{
border-color: transparent white;
-webkit-border-color: transparent white;
-moz-border-color: transparent white;
}

/*
----------------------------------------------------------------------------
INFORMATION
----------------------------------------------------------------------------
*/

body#information{
overflow-y:hidden;
}

.information th,
.information td {
padding:0 20px 15px 0;
}

a.action{
position: fixed;
display: inline-block;
top: 145px;
right: 5%;
width: auto;
margin: 0 auto;
padding: 3px 20px;
color: white;
font-size:0.8rem;
letter-spacing:2px;
line-height: 40px;
text-align: center;
background: white;
}

a.action:after {
content: "";
position: absolute;
top: 50%;
right: -20px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 0 10px 20px;
}

a.action{
color:white;
border: solid 1px white;
background: none;
-webkit-transition: color 0.5s ease-out, border 0.5s ease-out, background 0.5s ease-out;
-moz-transition: color 05.s ease-out, border 0.5s ease-out, background 0.5s ease-out;
-ms-transition: color 0.5s ease-out, border 0.5s ease-out, background 0.5s ease-out;
transition: color 0.5s ease-out, border 0.5s ease-out, background 0.5s ease-out;
}

a.action:hover{
color:black;
-webkit-color: white;
-moz-color: white;
border: solid 1px #ddd;
-webkit-border: solid 1px #ddd;
-moz-border: solid 1px #ddd;
background: white;
-webkit-background: white;
-moz-background:  white;
}

a.action:after{
border-color: transparent white;
-webkit-transition: border-color 0.5s ease-out;
-moz-transition: border-color 0.5s ease-out;
-ms-transition: border-color 0.5s ease-out;
transition: border-color 0.5s ease-out;
}

a.action:hover:after{
border-color: transparent white;
-webkit-border-color: transparent white;
-moz-border-color: transparent white;
}

/*
----------------------------------------------------------------------------
PHILOSOPHY
----------------------------------------------------------------------------
*/

div#container.philosophy{
width:100%;
min-height: 100%;
background: rgba(0,0,0,0.15) url(http://www.ietani.com/img/filter.png) repeat;
position:absolute;
}

#container.page #content article div.6th,
#container.page #content article div.10th{
margin-top:50px!important;
}

div#container.philosophy article{
display: block!important;
margin: 150px auto!important;
padding: 80px;
color:white;
font-size: 1.2rem!important;
font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
line-height: 280%!important;
letter-spacing: 3px;
text-align: left;
}

/*
----------------------------------------------------------------------------
暮らす場所をつくる
----------------------------------------------------------------------------
*/

.title-kurasubasho{
width: 430px;
height: 40px;
position: absolute;
top: 115px;
left: 50%;
margin-left: -215px;
background: url(http://www.ietani.com/img/title_kurasubasho.png) no-repeat center center;
background-size: 430px auto;
z-index: 9999;
}

.discription{
width: 90%;
position: absolute;
top: 170px;
text-align: center;
font-size: 1rem;
z-index: 9999;
}

/*
category posts list
*/

section#kurasubasho{
width: 90vw;
margin: 18% 5vw 5%;
overflow: hidden;
text-align: center;
border-top: solid 1px white;
border-bottom: solid 1px white;
}

section#kurasubasho #instaarea{
display: inline-block;
width: 95%;
margin: 30px 5px 0;
padding: 20px 20px 0;
}

section#kurasubasho #recentlist{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
margin: 0;
padding: 20px 0;
}

section#kurasubasho #recentlist div a{
display: block;
position: relative;
margin-top: -40px;
}

section#kurasubasho #recentlist div p.date{
top: -20px;
position: relative;
}

section#kurasubasho .instalist {
width: 20vw;
height: auto;
margin: 2% 0;
padding: 1.5% 0 0;
box-sizing:border-box;
background:white;
color:black;
float: left;
}

html.ua-ie section#kurasubasho .instalist {
width: 20vw;
height: auto;
margin: 2% 1.25vw;
}

section#kurasubasho .instalist h3 {
font-size: 0.9rem;
font-weight: bold;
line-height: 100%;
}

section#kurasubasho .instalist img.instaowner{
width: 80px;
height: 80px;
margin-top:10px;
background:white;
border-radius: 45px;
border: solid 5px white;
position: relative;
z-index: 10;
}

section#kurasubasho .instalist figure{
     width: 20vw;
    height: 20vw;
position: relative;
overflow: hidden;
text-align: center;
color: black;
z-index: 0;
}

section#kurasubasho .instalist figure figcaption p {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.2rem;
line-height: 150%;
}

section#kurasubasho .instalist figure img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

section#kurasubasho p.caption{
display: block;
position: relative;
margin: -30px 0 20px;
height: 80px;
max-height: 80px;
overflow: hidden;
}

/*
庭いろいろ RECENT LIST
*/

section#iroiro{
display: inline-block;
width: 100%;
margin: 0;
padding: 0 0 200px;
color: white;
text-align: center;
}

.title-iroiro{
width: 550px;
height: 50px;
position: relative;
top: 0px;
left: 50%;
margin-left: -275px;
background: url(http://www.ietani.com/img/title_iroiro.png) no-repeat center center;
background-size: 550px 50px;
z-index: 9999;
}

section#iroiro h3 {
font-size: 0.9rem;
font-weight: bold;
line-height: 100%;
}

section#iroiro #ietnrecent {
      display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 90vw;
    margin: 0 5vw;
    padding: 0;
    box-sizing: border-box;
}

section#iroiro .instalist {
    width: 13vw;
    height: auto;
    margin: 0;
    padding: 1vw;
    background: white;
    box-sizing: border-box;
    float: left;
}

html.ua-ie section#iroiro .instalist {
	margin: 0 1vw;
}

section#iroiro .instalist:last-child {
    margin: 0;
}

section#iroiro .instalist figure{
position: relative;
overflow: hidden;
text-align: center;
color: black;
z-index: 0;
}

section#iroiro .instalist figure figcaption p {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.2rem;
line-height: 150%;
}

section#iroiro p.date{
font-size: 0.7rem;
line-height:150%;
color: black;
}

/*
----------------------------------------------------------------------------
WORKS
----------------------------------------------------------------------------
*/

/*
Tile Ver.
*/

section#works .pagetitle{
width: 180px;
position: fixed;
top: 90px;
right: 5%;
font-size:1.2rem;
text-align: center;
letter-spacing: 5px;
z-index:9999;
}

ul.tile li{
width: 100%;
height: 300px;
overflow: hidden;
}

ul.tile li figure {
position: relative;
overflow: hidden;
text-align: center;
color: black;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

ul.tile li figure img.transform {
width:100%;
height:auto;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-ms-transition: all 10s ease;
-o-transition: all 10s ease;
transition: all 10s ease;
}

ul.tile li figure p.view{
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    margin: 0;
    padding: 15px 80px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.4rem;
    line-height: 150%;
    letter-spacing: 5px;
    border: solid 1px white;
    z-index: 1;
}

ul.tile li figure:hover p.view{
opacity:0!important;
}

ul.tile li figure:hover img.transform {
width:100%;
height:auto;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}

ul.tile li figure figcaption{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
overflow: hidden;
background: rgba(255,255,255,.8);
-webkit-transition: 1s;
-moz-transition: 1s;
-nms-transition: 1s;
-o-transition: 1s;
transition: 1s;
z-index: 2;
}

ul.tile li figure figcaption p{
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    margin: 0;
    padding: 15px 80px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: black;
    font-size: 1.4rem;
    line-height: 150%;
    letter-spacing: 5px;
    border: solid 1px black;
    z-index: 1;
}

section#works a.old{
position: fixed;
display: inline-block;
bottom: 20px;
right: 20px;
width: auto;
margin: 0 auto;
min-width: 160px;
padding: 5px 0;
line-height: 30px;
text-align: center;
font-size:0.8rem;
letter-spacing:2px;
background: none;
z-index: 10010;
}

section#works a.old{
border: solid 1px white;
color:white;
background: none;
-webkit-transition: color 0.5s ease-out, background 0.5s ease-out;
-moz-transition: color 0.5s ease-out, background 0.5s ease-out;
-o-transition: color 0.5s ease-out, background 0.5s ease-out;
-ms-transition: color 0.5s ease-out, background 0.5s ease-out;
transition: color 0.5s ease-out, background 0.5s ease-out;
}

section#works a.old:hover{
color:black;
-webkit-color: black;
-moz-color: black;
-ms-color: black;
-o-color: black;
background: white;
-webkit-background: white;
-moz-background:  white;
-ms-background:  white;
-o-background:  white;
}

/*
----------------------------------------------------------------------------
other
----------------------------------------------------------------------------
*/

span.hand{
font-size: 27px;
line-height: 0;
position: relative;
top: 6px;
}

/*
cloud
*/

.cloud1{
width: 250px;
height: 60px;
background: url(http://ietani.com/img/cloud1.png) no-repeat center center;
font-size: 10px;
text-align: center;
position: absolute;
top: 50%;
left: 10%;
text-indent:-9999px;
z-index: 8888;
}

.cloud2{
width: 250px;
height: 60px;
background: url(http://ietani.com/img/cloud2.png) no-repeat center center;
font-size: 10px;
text-align: center;
position: absolute;
top: 20%;
right:30%;
text-indent:-9999px;
z-index: 8888;
}

.cloud3{
width: 250px;
height: 60px;
background: url(http://ietani.com/img/cloud3.png) no-repeat center center;
font-size: 10px;
text-align: center;
position: absolute;
top: 80%;
left: 40%;
text-indent:-9999px;
z-index: 8888;
}

.cloud4{
width: 250px;
height: 60px;
background: url(http://ietani.com/img/cloud4.png) no-repeat center center;
font-size: 10px;
text-align: center;
position: absolute;
top: 60%;
left: 60%;
text-indent:-9999px;
z-index: 8888;
}

.cloud5{
width: 250px;
height: 60px;
background: url(http://ietani.com/img/cloud5.png) no-repeat center center;
font-size: 10px;
text-align: center;
position: absolute;
top: 80%;
left: 10%;
text-indent:-9999px;
z-index: 8888;
}

.cloud6{
width: 250px;
height: 60px;
background: url(http://ietani.com/img/cloud6.png) no-repeat center center;
font-size: 10px;
text-align: center;
position: absolute;
top: 10%;
left: 30%;
text-indent:-9999px;
z-index: 8888;
}

.cloud7{
width: 250px;
height: 60px;
background: url(http://ietani.com/img/cloud7.png) no-repeat center center;
font-size: 10px;
text-align: center;
position: absolute;
top: 10%;
left: 0;
text-indent:-9999px;
z-index: 8888;
}

/*
overlay
*/

figure {
position: relative;
overflow: hidden;
text-align:center;
color:black;
}

figure a,
figure a:link,
figure a:active,
figure a:visited{color: black; text-decoration:none;}
figure a:hover {color: gray; text-decoration:underline;}

figcaption {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 90%;
height: 90%;
padding: 5%;
overflow: hidden;
background: rgba(255,255,255,.8);
-webkit-transition: .8s;
-moz-transition: .8s;
-ms-transition: .8s;
-o-transition: .8s;
transition: .8s;
opacity: 0;
}

figure:hover figcaption {
opacity: 1;
}

figcaption img.instaowner{
width: 80px;
height: 80px;
border-radius: 45px;
position: relative;
margin-top: 15%;
}

figcaption img.instazoom{
      width: 60px;
    height: 60px;
    position: relative;
    padding: 30% 35% 35%;
    left: 0;
}

figcaption h3 {
font-size: 0.9rem;
font-weight:bold;
line-height: 100%;
}

figcaption p {
font-size: 0.7rem;
line-height: 150%;
}

/*
fancy box
*/

.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
background: url(http://www.ietani.com/img/overlay.png) repeat;
z-index: 10000;
}

#fancybox-loading,
.fancybox-close,
.fancybox-prev span,
.fancybox-next span {
position: absolute!important;
top: 0%!important;
right: -60px!important;
cursor: pointer!important;
width: 50px!important;
height: 50px!important;
background: url(http://www.ietani.com/img/close.png) no-repeat center center!important;
background-size:50px 50px!important;
z-index: 10000!important;
}

.fancybox-title-float-wrap{
position: absolute;
width: 30%!important;
top: 50%!important;
left: -40%!important;
margin: 0;
padding: 0 0 0 3%!important;
z-index: 9999;
text-align: left;
border-left: dashed 1px black!important;
}

.fancybox-title-float-wrap .child {
display: inline-block!important;
color: white!important;
width: 100%!important;
margin: 0!important;
padding: 0!important;
background: none!important;
border: none!important;
color:black!important;
text-shadow: none!important;
font-weight: normal!important;
line-height: 200%!important;
white-space: normal!important;
word-wrap:break-word;
}