@import"//hello.myfonts.net/count/314e35";
@charset "utf-8";
@font-face{
    font-family:Notera;
    src:url(/assets/fonts/314E35_0_0.eot);
    src:url(/assets/fonts/314E35_0_0.eot?#iefix) format('embedded-opentype'),url(/assets/fonts/314E35_0_0.woff2) format('woff2'),url(/assets/fonts/314E35_0_0.woff) format('woff'),url(/assets/fonts/314E35_0_0.ttf) format('truetype')
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{
    display:block
}
audio,canvas,video{
    display:inline-block
}
audio:not([controls]){
    display:none;
    height:0
}
[hidden]{
    display:none
}
html{
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
body{
    margin:0
}
a:active,a:hover{
    outline:0
}
b,strong{
    font-weight:700
}
address,caption,cite,code,dfn,em,strong,th,var{
    font-style:normal
}
code,kbd,pre,samp{
    font-family:monospace,serif;
    font-size:1em
}
pre{
    white-space:pre-wrap
}
q{
    quotes:"\201C" "\201D" "\2018" "\2019"
}
small{
    font-size:80%
}
sub,sup{
    position:relative;
    vertical-align:baseline;
    font-size:75%;
    line-height:0
}
sup{
    top:-.5em
}
sub{
    bottom:-.25em
}
img{
    border:0
}
img,object,embed{
    vertical-align:top
}
figure{
    margin:0
}
button,input,select,textarea{
    margin:0;
    font-size:100%;
    font-family:inherit
}
button,input{
    line-height:normal
}
button,select{
    text-transform:none
}
button,html input[type=button],input[type=reset],input[type=submit]{
    cursor:pointer;
    -webkit-appearance:button
}
button[disabled],html input[disabled]{
    cursor:default
}
input[type=checkbox],input[type=radio]{
    box-sizing:border-box;
    padding:0
}
button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0
}
textarea{
    overflow:auto;
    vertical-align:top
}
h1,h2,h3,h4,h5,h6{
    font-size:100%
}
table{
    border-collapse:collapse;
    border-spacing:0
}
caption,th{
    text-align:left
}
li{
    list-style-type:none
}
em{
    font-weight:700
}
::-moz-selection{
    background:#000;
    color:#fff
}
::selection{
    background:#000;
    color:#fff
}
::-moz-selection{
    background:#000;
    color:#fff
}
::-webkit-scrollbar{
    width:6px;
    height:8px
}
::-webkit-scrollbar-thumb{
    background-color:#191919;
    border-radius:10px
}
::-webkit-scrollbar-track-piece{
    background-color:#f2f2f2
}
*{
    box-sizing:border-box
}
html,body{
    height:100%
}
body{
    color:#fff;
    font-size:10px;
    font-family:Montserrat,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"游ゴシック",YuGothic,"メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック",MS PGothic,Sans-Serif;
    line-height:2;
    background-color:#000;
    min-width:900px;
    overflow-y:scroll;
    overflow-x:auto;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    text-size-adjust:100%;
    -webkit-text-rendering:optimizeLegibility;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
a{
    color:#FFF;
    text-decoration:none
}
#noscript_message{
    position:fixed;
    z-index:10000;
    padding:1em 0;
    width:100%;
    background:#c00;
    color:#fff;
    text-align:center;
    font-size:1.2em
}
.wfont-s{
    font-family:Notera,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"游ゴシック",YuGothic,"メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック",MS PGothic,Sans-Serif;
    font-weight:400
}
.bg-text span,.icon span{
    display:none
}
.hidden{
    display:none
}
.fwb{
    font-weight:700
}
.fwn{
    font-weight:400
}
.fwl{
    font-weight:lighter
}
.tal{
    text-align:left
}
.tar{
    text-align:right
}
.tac{
    text-align:center
}
.taj{
    text-align:justify;
    text-justify:distribute
}
.front{
    z-index:1!important
}
.behind{
    z-index:0!important
}
.va-wrap{
    display:table;
    width:100%;
    height:100%
}
.va-wrap .va-mid{
    display:table-cell;
    vertical-align:middle
}
.va-wrap .va-bottom{
    display:table-cell;
    vertical-align:bottom
}
.va-wrap .va-top{
    display:table-cell;
    vertical-align:top
}
img.fluid{
    width:100%
}
img.fluid-h{
    height:100%
}
.requierd{
    color:#e63900
}
.pointer-none{
    cursor:none!important
}
.embed-container{
    height:0;
    overflow:hidden;
    position:relative;
    padding-bottom:62.5%
}
.embed-container16x9{
    padding-bottom:56.25%
}
.embed-container4x3{
    padding-bottom:75%
}
.embed-item{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%
}
.embed-item img{
    display:inline-block;
    width:100%;
    position:absolute;
    top:50%;
    -webkit-transform:translate3d(0,-50%,0);
    transform:translate3d(0,-50%,0)
}
@-webkit-keyframes boundUp{
    from,to{
        -webkit-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0)
    }
    50%{
        -webkit-transform:translate3d(0,150%,0);
        transform:translate3d(0,150%,0)
    }
}
@keyframes boundUp{
    from,to{
        -webkit-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0)
    }
    50%{
        -webkit-transform:translate3d(0,150%,0);
        transform:translate3d(0,150%,0)
    }
}
@-webkit-keyframes boundDown{
    from,to{
        -webkit-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0)
    }
    50%{
        -webkit-transform:translate3d(0,-150%,0);
        transform:translate3d(0,-150%,0)
    }
}
@keyframes boundDown{
    from,to{
        -webkit-transform:translate3d(0,0,0);
        transform:translate3d(0,0,0)
    }
    50%{
        -webkit-transform:translate3d(0,-150%,0);
        transform:translate3d(0,-150%,0)
    }
}
@keyframes loadingbar{
    from{
        -webkit-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0)
    }
    to{
        -webkit-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }
}
@-webkit-keyframes loadingbar{
    from{
        -webkit-transform:translate3d(-100%,0,0);
        transform:translate3d(-100%,0,0)
    }
    to{
        -webkit-transform:translate3d(100%,0,0);
        transform:translate3d(100%,0,0)
    }
}
#wrap{
    min-height:100%;
    height:100%;
    width:100%;
    position:relative;
    z-index:2
}
#logo{
    position:fixed;
    display:table;
    width:100%;
    height:100%
}
#logo h1{
    display:table-cell;
    vertical-align:middle;
    text-align:center
}
#contents{
    height:100%
}
#stage{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    height:100%;
    width:100%;
    z-index:1;
    overflow:hidden
}
#stage:after{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100%;
    background-color:#1a1a1a;
    opacity:0;
    transition-property:opacity;
    transition-duration:1s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#stage.black:after{
    background-color:#000
}
#stage.covered:after{
    opacity:1
}
#visuals{
    display:none
}
#loading{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1000;
    visibility:hidden;
    opacity:0;
    transition-property:opacity,visibility;
    transition-duration:.6s,0s;
    transition-delay:.0s,.6s;
    transition-timing-function:ease-out
}
#loading.show{
    visibility:visible;
    opacity:1;
    transition-delay:.01s,0s
}
#loading .va-wrap{
    position:relative;
    z-index:2
}
#loading:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(0,0,0,.7);
    z-index:1
}
#loading #progress{
    position:relative;
    width:50px;
    overflow:hidden;
    margin:0 auto;
    font-size:14px;
    text-align:center;
    color:#fff
}
#loading #progress span{
    display:inline-block;
    width:10px
}
#loading #progress:after{
    content:'';
    position:absolute;
    width:100%;
    height:1px;
    background-color:#fff;
    top:50%;
    left:0
}
#loading.start #progress:after{
    -webkit-animation:loadingbar 1s cubic-bezier(.6,0,.3,1) infinite;
    animation:loadingbar 1s cubic-bezier(.6,0,.3,1) infinite
}
#loading.end #progress:after{
    transition-property:-webkit-transform;
    transition-property:transform;
    transition-duration:.5s;
    transition-timing-function:cubic-bezier(.6,0,.3,1);
    -webkit-transform:translate3d(100%,0,0);
    transform:translate3d(100%,0,0)
}
#top{
    height:100%;
    text-align:center
}
#top h1{
    visibility:hidden;
    transition-property:opacity,visibility;
    transition-duration:1s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#top h1.show{
    visibility:visible
}
#top.hide h1{
    opacity:0;
    visibility:visible
}
#top h1 a{
    display:inline-block;
    padding:20px
}

#sitename {
    position:absolute;
    top:calc((100% - 45px) / 2);
	left:calc((100% - 390px) / 2);
	width:390px;
    height:45px;
    opacity:1;   
	background:url(/assets/img/logo.png) no-repeat;
}

#discover{
    position:fixed;
    width:220px;
    height:30px;
    line-height:30px;
    left:60px;
    bottom:-40px;
    text-align:left;
    overflow:hidden;
    -webkit-transform-origin:0 100%;
    transform-origin:0 100%;
    -webkit-transform:rotate(-90deg);
    transform:rotate(-90deg)
}
.hide #discover{
    -webkit-transform:rotate(-90deg) translate3d(40px,0,0);
    transform:rotate(-90deg) translate3d(40px,0,0);
    transition-property:-webkit-transform;
    transition-property:transform;
    transition-duration:1.3s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#discover:before,#discover:after{
    content:'';
    position:absolute;
    height:1px;
    width:100%;
    top:45%;
    left:0;
    background-color:#fff;
    -webkit-transform:translate3d(-100%,0,0);
    transform:translate3d(-100%,0,0)
}
.show #discover:before{
    -webkit-transform:translate3d(-130px,0,0);
    transform:translate3d(-130px,0,0);
    transition-property:-webkit-transform;
    transition-property:transform;
    transition-duration:.6s;
    transition-delay:1.4s;
    transition-timing-function:cubic-bezier(0,.6,.3,1)
}
.hide #discover:before{
    left:100%;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-property:-webkit-transform,left;
    transition-property:transform,left;
    transition-delay:0s,.7s;
    transition-duration:.7s,.6s;
    transition-timing-function:cubic-bezier(.6,0,.3,1),cubic-bezier(0,.6,.3,1)
}
.show #discover:after{
    left:100%;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-property:-webkit-transform,left;
    transition-property:transform,left;
    transition-delay:0s,1.3s;
    transition-duration:1.3s,.7s;
    transition-timing-function:cubic-bezier(.6,0,.3,1),cubic-bezier(0,.6,.3,1)
}
#discover a{
    display:inline-block;
    overflow:hidden;
    position:absolute;
    left:110px;
    letter-spacing:.5em;
    -webkit-transform:translate3d(-220px,0,0);
    transform:translate3d(-220px,0,0)
}
#discover a span{
    display:inline-block
}
.show #discover a{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-property:-webkit-transform;
    transition-property:transform;
    transition-duration:1.2s;
    transition-delay:.6s;
    transition-timing-function:cubic-bezier(0,.6,.3,1)
}
.hide #discover a{
    -webkit-transform:translate3d(110px,0,0);
    transform:translate3d(110px,0,0);
    transition-property:-webkit-transform;
    transition-property:transform;
    transition-duration:1.3s;
    transition-delay:0s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
.hide #discover a span{
    -webkit-transform:translate3d(-110px,0,0);
    transform:translate3d(-110px,0,0);
    transition-property:-webkit-transform;
    transition-property:transform;
    transition-duration:1.3s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#category-nav{
    position:fixed;
    top:0;
    left:100%;
    height:100%;
    z-index:500
}
#category-nav:before,#category-nav:after{
    position:absolute;
    content:'';
    display:block;
    width:50px;
    height:1px;
    right:0;
    top:50%;
    background-color:#fff;
    visibility:visible
}
#category-nav:after{
    background-color:#fff;
    width:100%;
    -webkit-transform:translate3d(-100%,0,0);
    transform:translate3d(-100%,0,0)
}
#category-nav.trans:before{
    transition-property:top,right,visibility;
    transition-duration:1.2s,.6s,0s;
    transition-delay:0s,.6s,.6s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#category-nav.trans:after{
    transition-property:-webkit-transform,visibility;
    transition-property:transform,visibility;
    transition-duration:1s,0s;
    transition-delay:.1s,0s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#category-nav.on-top:before{
    top:80px
}
#category-nav.on-top-sub:before{
    right:-50px;
    top:80px;
    transition-duration:0s,.3s,0s;
    transition-delay:.3s,0s,.3s
}
#category-nav.hide:before{
    right:-50px;
    transition-delay:0s,.4s,1.2s
}
#category-nav.remove:before{
    right:-50px;
    transition-duration:1.2s,.2s,0s;
    transition-delay:0s,0s,1.2s
}
#category-nav.hide:after,#category-nav.remove:after{
    visibility:hidden;
    transition-delay:0s,1s;
    -webkit-transform:translate3d(100%,0,0);
    transform:translate3d(100%,0,0)
}
#category-nav.show-counter:before{
    visibility:hidden
}
#category-nav.trans.show-counter:before{
    transition-delay:0s,0s,0s
}
@media only screen and (max-width:900px){
    #category-nav{
        left:900px
    }
}
#category-nav>ul{
    position:absolute;
    top:50%;
    right:70px;
    min-width:250px;
    font-size:10px;
    height:100%;
    padding:80px 0;
    margin-top:-80px
}
#category-nav.trans ul{
    transition-property:top;
    transition-duration:1.2s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#category-nav.on-top>ul{
    top:80px;
    transition-delay:.2s
}
#category-nav.on-top-sub>ul{
    top:50px;
    transition-delay:.2s
}
#category-nav>ul>li{
    -webkit-transform:translate3d(0,-50%,0);
    transform:translate3d(0,-50%,0)
}
#category-nav ul li:before,#category-nav ul li:after{
    content:" ";
    display:table
}
#category-nav ul li:after{
    clear:both
}
#category-nav.trans ul li{
    transition-property:opacity,visibility;
    transition-duration:.6s,0s;
    transition-delay:.01s,0s;
    transition-timing-function:ease-out
}
#category-nav.trans.remove ul li{
    transition-timing-function:ease-in
}
#category-nav.hide ul li,#category-nav ul li.hide{
    opacity:0;
    visibility:hidden;
    transition-delay:0s,.6s
}
#category-nav.hide ul li.hide{
    transition-duration:0s;
    transition-delay:0s
}
#category-nav.trans ul li.hide{
    transition-delay:0s,.6s
}
#category-nav ul li .counter{
    line-height:15px;
    position:absolute;
    top:-23px;
    right:-70px;
    width:50px;
    height:86px;
    text-align:center;
    letter-spacing:.1em;
    visibility:hidden
}
#category-nav.show-counter ul li.active .counter,#category-nav .sub-categories ul li.active.show-counter .counter{
    visibility:visible
}
#category-nav.trans ul li.active .counter,#category-nav.trans .sub-categories ul li.active .counter{
    transition-property:visibility;
    transition-duration:0s;
    transition-delay:.6s
}
#category-nav.trans.show-counter ul li.active .counter,#category-nav.trans .sub-categories ul li.active.show-counter .counter{
    transition-delay:0s
}
#category-nav ul li .counter:after{
    position:absolute;
    content:'';
    display:block;
    width:50px;
    height:1px;
    left:0;
    top:50%;
    background-color:#fff
}
#category-nav .sub-categories ul li .counter:after{
    -webkit-transform:translate3d(50px,0,0);
    transform:translate3d(50px,0,0)
}
#category-nav.show-counter ul li .counter:after,#category-nav .sub-categories ul li.show-counter .counter:after{
    width:15px
}
#category-nav .sub-categories ul li.show-counter .counter:after{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
#category-nav.trans ul li.active .counter:after{
    transition-property:width;
    transition-duration:.3s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#category-nav.trans .sub-categories ul li .counter:after{
    transition-property:width,-webkit-transform;
    transition-property:width,transform;
    transition-duration:.3s,0;
    transition-delay:0s,.3s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#category-nav.trans .sub-categories ul li.show-counter .counter:after{
    transition-duration:.3s;
    transition-delay:.3s,0s
}
#category-nav ul li .counter span{
    display:block;
    width:15px;
    height:43px;
    overflow:hidden
}
#category-nav ul li .counter span span{
    height:43px
}
#category-nav ul li .counter span.no,#category-nav ul li .counter span.total{
    transition-property:-webkit-transform;
    transition-property:transform;
    transition-duration:.3s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#category-nav .draggable:hover .counter span.no{
    -webkit-transform:translate3d(0,-10px,0);
    transform:translate3d(0,-10px,0)
}
#category-nav .draggable:hover .counter span.total{
    -webkit-transform:translate3d(0,10px,0);
    transform:translate3d(0,10px,0)
}
#category-nav ul li .counter span.no span{
    padding-bottom:28px;
    -webkit-transform:translate3d(0,43px,0);
    transform:translate3d(0,43px,0)
}
#category-nav ul li .counter span.total span{
    padding-top:28px;
    -webkit-transform:translate3d(0,-43px,0);
    transform:translate3d(0,-43px,0)
}
#category-nav.trans ul li.active .counter span.no span,#category-nav.trans ul li.active .counter span.total span{
    transition-property:-webkit-transform;
    transition-property:transform;
    transition-duration:.3s;
    transition-delay:.3s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#category-nav.trans .sub-categories ul li.active .counter span.no span,#category-nav.trans .sub-categories ul li.active .counter span.total span{
    transition-delay:0s
}
#category-nav.show-counter ul li.active .counter span.no span,#category-nav.show-counter ul li.active .counter span.total span,#category-nav .sub-categories ul li.active.show-counter .counter span.no span,#category-nav .sub-categories ul li.active.show-counter .counter span.total span{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
#category-nav.trans.show-counter ul li.active .counter span.no span,#category-nav.trans.show-counter ul li.active .counter span.total span,#category-nav.trans .sub-categories ul li.active.show-counter .counter span.no span,#category-nav.trans .sub-categories ul li.active.show-counter .counter span.total span{
    transition-delay:.5s
}
#category-nav ul li.draggable,#category-nav ul li span.draggable{
    display:block;
    position:absolute;
    top:0;
    width:100%;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
#category-nav ul li.show-children:before{
    content:'';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    z-index:3
}
#category-nav ul li.draggable .cover,#category-nav ul li span.draggable .cover{
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    z-index:3;
    right:0
}
#category-nav ul li.draggable:hover a,#category-nav ul li span.draggable:hover a{
    opacity:.5
}
#category-nav li>span{
    display:block;
    width:100%;
    float:left
}
#category-nav li>span:before,#category-nav li>span:after{
    content:" ";
    display:table
}
#category-nav li>span:after{
    clear:both
}
#category-nav a{
    display:block;
    float:right;
    opacity:.5;
    line-height:4;
    letter-spacing:.8em;
    transition-property:opacity,-webkit-transform;
    transition-property:opacity,transform;
    transition-duration:.25s;
    transition-timing-function:ease-out,cubic-bezier(.6,0,.3,1)
}
#category-nav .active>a,#category-nav .active>span>a,#category-nav a:hover,#category-nav a:focus,#category-nav a:active{
    opacity:1
}
#category-nav ul li.active.draggable.draging a,#category-nav ul li.active span.draggable.draging a{
    -webkit-transform:scale3d(.9,.9,.9);
    transform:scale3d(.9,.9,.9);
    transition-duration:.1s;
    transition-timing-function:ease-out
}
#category-nav .sub-categories{
    display:none;
    position:absolute;
    top:60px
}
#category-nav .show-children .sub-categories{
    display:block
}
#category-nav .sub-categories ul{
    position:relative;
    min-width:130px;
    top:0;
    right:0
}
.stage{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    min-height:625px;
    overflow:hidden
}
.layer{
    position:absolute;
    width:100%;
    top:0;
    left:0;
    height:100%;
    min-height:625px;
    overflow:hidden
}
.stage .full-height{
    height:100%;
    min-height:625px
}
#portfolio-index .stage{
    transition-property:-webkit-transform;
    transition-property:transform;
    transition-duration:1.2s;
    transition-delay:.6s;
    transition-timing-function:cubic-bezier(0,.6,.3,1)
}
#portfolio-index.slide-out .stage{
    -webkit-transform:translate3d(100%,0,0);
    transform:translate3d(100%,0,0);
    transition-delay:0s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#portfolio-index .logo{
    position:absolute;
    left:50%;
    top:15%;
    top:calc(((100% - 500px) / 2) * .55);
    margin-left:-121px;
    margin-top:-23px;
    z-index:100;
    opacity:0;
    visibility:hidden;
    -webkit-transform:translate3d(0,100%,0);
    transform:translate3d(0,100%,0);
    transition-property:-webkit-transform,opacity,visibility;
    transition-property:transform,opacity,visibility;
    transition-duration:.7s,.7s,0s;
    transition-delay:.251s,.251s,.25s;
    transition-timing-function:cubic-bezier(.6,0,.3,1),cubic-bezier(.6,0,.3,1)
}
#portfolio-index .logo a{
    display:block;
    padding:10px
}
#portfolio-index.show .logo{
    opacity:1;
    visibility:visible;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
#portfolio-index.hide .logo{
    opacity:0;
    -webkit-transform:translate3d(0,-150%,0);
    transform:translate3d(0,-150%,0);
    transition-duration:1s,1s,0s;
    transition-delay:.01s,.01s,.0s;
    transition-timing-function:cubic-bezier(.6,0,.3,1),cubic-bezier(.6,0,.3,1)
}
#portfolio-index .categories_image,#portfolio-index .categories_name,#portfolio-category .photos,#portfolio-category-sub #sub-categories{
    opacity:0;
    visibility:hidden;
    -webkit-transform:translate3d(0,30%,0) scale3d(1.1,1.1,1.1);
    transform:translate3d(0,30%,0) scale3d(1.1,1.1,1.1);
    transition-property:-webkit-transform,opacity,visibility;
    transition-property:transform,opacity,visibility;
    transition-delay:.01s,.01s,0s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#portfolio-index .categories_name{
    z-index:1
}
#portfolio-index.show .categories_image,#portfolio-index.show .categories_name,#portfolio-category.show .photos,#portfolio-category-sub.show #sub-categories{
    opacity:1;
    visibility:visible;
    -webkit-transform:translate3d(0,0,0) scale3d(1,1,1);
    transform:translate3d(0,0,0) scale3d(1,1,1);
    transition-duration:1s,1s,0s
}
#portfolio-index.hide .categories_image,#portfolio-index.hide .categories_name,#portfolio-category.hide .photos,#portfolio-category-sub.hide #sub-categories{
    transition-duration:.8s,.8s,0s
}
#portfolio-index .categories_name{
    transition-delay:.2s,.2s,0s
}
#portfolio-index.hide .categories_image{
    opacity:0;
    -webkit-transform:translate3d(0,-20%,0) scale3d(.95,.95,.95);
    transform:translate3d(0,-20%,0) scale3d(.95,.95,.95);
    transition-delay:.25s,.25s,0s
}
#portfolio-index.hide .categories_name{
    opacity:0;
    -webkit-transform:translate3d(0,-10%,0) scale3d(.95,.95,.95);
    transform:translate3d(0,-10%,0) scale3d(.95,.95,.95);
    transition-delay:.25s,.25s,0s
}
#portfolio-category.hide .photos,#portfolio-category-sub.hide #sub-categories{
    opacity:0;
    -webkit-transform:translate3d(0,-20%,0) scale3d(.95,.95,.95);
    transform:translate3d(0,-20%,0) scale3d(.95,.95,.95);
    transition-delay:.2s,.2s,0s
}
.thumb{
    text-align:center;
    position:relative;
    padding:0;
    line-height:0
}
.category .thumb .name{
    padding-top:.35em;
    font-size:100px;
    font-weight:400;
    line-height:1;
    -webkit-transform:rotate(.05deg);
    transform:rotate(.05deg)
}
.category .thumb a{
    display:inline-block;
    width:816px;
    height:510px;
    position:relative;
    overflow:hidden;
    transform:scale3d(.98,.98,.98);
    transition-property:transform;
    transition-duration:.25s;
    transition-timing-function:ease-out
}
.category .thumb a.hover{
    -webkit-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1)
}
.category .thumb .image{
    z-index:1;
    opacity:.3;
    transform:scale3d(1.05,1.05,1.05);
    transition-property:opacity,transform;
    transition-duration:.25s;
    transition-timing-function:ease-out
}
.category .thumb a.hover .image{
    opacity:.8;
    -webkit-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1)
}
.category .thumb .image img{
    width:100%
}
.category .thumb .image .embed-item{
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:cover
}
.photo .thumb a{
    display:inline-block;
    width:100%;
    height:625px
}
.photo .thumb .image{
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:contain
}
#portfolio-category-sub #sub-categories .sub-category{
    position:relative;
    overflow:hidden
}
.photo-nav{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    overflow:hidden;
    visibility:hidden;
    transition-property:visibility;
    transition-duration:0s;
    transition-delay:1.4s
}
.sub-category .photo-nav{
    position:absolute
}
.photo-nav.show{
    visibility:visible;
    transition-delay:0s
}
.photo-nav:after{
    content:'';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    background-color:rgba(0,0,0,.8);
    transition-property:opacity;
    transition-duration:.8s;
    transition-delay:.6s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
.photo-nav.show:after{
    opacity:1;
    transition-delay:0s
}
.photo-nav-in{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:1;
    opacity:0;
    -webkit-transform:scale3d(1.14,1.14,1);
    transform:scale3d(1.14,1.14,1);
    transition-property:-webkit-transform,opacity;
    transition-property:transform,opacity;
    transition-duration:.6s,.6s;
    transition-delay:.2s,.2s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
.sub-category .photo-nav-in{
    position:absolute
}
.photo-nav.show .photo-nav-in{
    opacity:1;
    -webkit-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1);
    transition-delay:.1s,.1s
}
.photo-nav ul{
    position:absolute;
    top:50%;
    left:50%;
    text-align:center
}
.photo-nav .list{
    width:300px;
    margin-top:-93.5px;
    margin-left:-150px;
    z-index:1
}
.photo-nav .list:after{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.6);
    z-index:1;
    opacity:0;
    transition-property:opacity;
    transition-duration:.4s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
.photo-nav.show .list:after{
    opacity:1;
    transition-delay:.4s
}
.photo-nav .window{
    width:400px;
    height:247px;
    z-index:2;
    overflow:hidden;
    margin-top:-123.5px;
    margin-left:-200px;
    opacity:0;
    -webkit-transform:scale3d(.75,.75,1);
    transform:scale3d(.75,.75,1);
    transition-property:-webkit-transform,opacity;
    transition-property:transform,opacity;
    transition-duration:.4s,.2s;
    transition-delay:.0s,.2s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
.photo-nav.show .window{
    opacity:1;
    -webkit-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1);
    transition-delay:.4s
}
.photo-nav .list a{
    display:block;
    position:relative;
    height:185px;
    width:300px
}
.photo-nav .window a{
    display:block;
    width:400px;
    height:247px
}
.photo-nav a img{
    width:100%
}
.photo-nav-btn{
    position:absolute;
    left:50%;
    width:80px;
    line-height:4;
    letter-spacing:.8em;
    text-align:center;
    margin-left:-40px;
    opacity:0;
    transition-property:-webkit-transform,opacity;
    transition-property:transform,opacity;
    transition-duration:.6s,.6s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
.photo-nav-prev{
    top:30px;
    -webkit-transform:translate3d(0,10px,0);
    transform:translate3d(0,10px,0)
}
.photo-nav-next{
    bottom:30px;
    -webkit-transform:translate3d(0,-10px,0);
    transform:translate3d(0,-10px,0)
}
.show .photo-nav-btn{
    opacity:1;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-delay:.6s
}
.hide .photo-nav-prev.photo-nav-btn{
    opacity:0;
    -webkit-transform:translate3d(0,10px,0);
    transform:translate3d(0,10px,0);
    transition-delay:0s
}
.hide .photo-nav-next.photo-nav-btn{
    opacity:0;
    -webkit-transform:translate3d(0,-10px,0);
    transform:translate3d(0,-10px,0);
    transition-delay:0s
}
.photo-nav-btn a{
    display:block;
    height:100%;
    transition-property:opacity;
    transition-duration:.25s
}
.photo-nav-btn a:hover{
    opacity:.5
}
.photo-nav-btn.disable a{
    opacity:.5;
    cursor:default
}
#portfolio-detail{
    z-index:800;
    cursor:none
}
#portfolio-detail:after{
    content:'';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:1;
    background-color:rgba(0,0,0,.8);
    opacity:0;
    transition-property:opacity;
    transition-duration:.4s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#portfolio-detail.show:after{
    opacity:1
}
#portfolio-detail.hide:after{
    opacity:0
}
#photo{
    position:relative;
    height:100%;
    z-index:2;
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:contain;
    opacity:0;
    -webkit-transform:scale3d(1.15,1.15,1);
    transform:scale3d(1.15,1.15,1);
    transition-property:-webkit-transform,opacity;
    transition-property:transform,opacity;
    transition-duration:.6s
}
#portfolio-detail.show #photo{
    opacity:1;
    -webkit-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1);
    transition-timing-function:cubic-bezier(.6,0,.3,1),ease-in
}
#portfolio-detail.hide #photo{
    opacity:0;
    -webkit-transform:scale3d(1.15,1.15,1);
    transform:scale3d(1.15,1.15,1);
    transition-timing-function:cubic-bezier(.6,0,.3,1),ease-out
}
#to_biography{
    position:fixed;
    top:50%;
    z-index:200;
    margin-top:-15px;
    width:240px;
    height:30px;
    line-height:30px;
    overflow:hidden
}
#to_biography.slide-out{
    width:280px
}
#to_biography a{
    display:block;
    position:absolute;
    left:60px;
    width:170px;
    height:30px;
    letter-spacing:.5em;
    padding-left:20px;
    opacity:.3;
    overflow:hidden;
    -webkit-transform:translate3d(-240px,0,0);
    transform:translate3d(-240px,0,0);
    transition-property:-webkit-transform,opacity;
    transition-property:transform,opacity;
    transition-timing-function:cubic-bezier(0,.6,.3,1),linear
}
#to_biography a:hover{
    opacity:1
}
.show #to_biography a{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-duration:1s,.25s;
    transition-delay:.8s,0s;
    transition-timing-function:cubic-bezier(.6,0,.3,1),linear
}
.slide-out #to_biography.slide-out a{
    -webkit-transform:translate3d(220px,0,0);
    transform:translate3d(220px,0,0);
    transition-duration:1.2s,.25s;
    transition-delay:0s,0s
}
#to_biography.slide-out.slide-out-back a{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-duration:1s,.25s;
    transition-delay:.6s,0s
}
.hide #to_biography a{
    -webkit-transform:translate3d(-240px,0,0);
    transform:translate3d(-240px,0,0);
    transition-delay:0s,0s
}
.hide #to_biography.remove a{
    -webkit-transform:translate3d(-240px,0,0);
    transform:translate3d(-240px,0,0);
    transition-duration:1.2s,.25s;
    transition-delay:0s,0s;
    transition-timing-function:cubic-bezier(.6,0,.3,1),linear
}
#to_biography a span{
    display:block;
    transition-property:-webkit-transform;
    transition-property:transform;
    transition-timing-function:cubic-bezier(.6,0,.3,1);
    transition-duration:1.2s
}
.slide-out #to_biography.slide-out a span{
    -webkit-transform:translate3d(-160px,0,0);
    transform:translate3d(-160px,0,0)
}
#to_biography.slide-out.slide-out-back a span{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-duration:0s
}
#to_biography:before,#to_biography:after{
    content:'';
    position:absolute;
    height:1px;
    top:50%;
    left:0;
    background-color:#fff;
    opacity:.3
}
#to_biography:before{
    width:240px;
    -webkit-transform:translate3d(-240px,0,0);
    transform:translate3d(-240px,0,0);
    transition-property:-webkit-transform,left,width;
    transition-property:transform,left,width
}
.show #to_biography:before{
    left:240px;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-duration:.7s,.6s,0s;
    transition-delay:.5s,1.2s,0s;
    transition-timing-function:cubic-bezier(.6,0,.3,1),cubic-bezier(0,.6,.3,1)
}
#to_biography.slide-out:before{
    left:280px;
    transition-duration:0s,0s,0s;
    transition-delay:0s,0s,0s
}
.hide #to_biography:before{
    left:50px;
    width:0;
    transition-duration:0s,.6s,.6s;
    transition-delay:0s,0s,.6s;
    transition-timing-function:linear,cubic-bezier(0,.6,.3,1),cubic-bezier(.6,0,.3,1)
}
.hide #to_biography.remove:before{
    left:0;
    width:240px;
    -webkit-transform:translate3d(-240px,0,0);
    transform:translate3d(-240px,0,0);
    transition-duration:.7s,.6s,0s;
    transition-delay:0s,.6s,0s;
    transition-timing-function:cubic-bezier(0,.6,.3,1),cubic-bezier(.6,0,.3,1),linear
}
#to_biography:after{
    width:60px;
    -webkit-transform:translate3d(-60px,0,0);
    transform:translate3d(-60px,0,0);
    transition-property:-webkit-transform,width;
    transition-property:transform,width
}
.show #to_biography:after{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-duration:.6s;
    transition-delay:1.1s;
    transition-timing-function:cubic-bezier(0,.6,.3,1)
}
.slide-out #to_biography.slide-out:after{
    width:280px;
    -webkit-transform:translate3d(100%,0,0);
    transform:translate3d(100%,0,0);
    transition-duration:.6s,.6s;
    transition-delay:.6s,0s;
    transition-timing-function:cubic-bezier(0,.6,.3,1),cubic-bezier(.6,0,.3,1)
}
#to_biography.slide-out.slide-out-back:after{
    width:60px;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-duration:.6s,.6s;
    transition-delay:.6s,1.2s
}
.hide #to_biography:after{
    -webkit-transform:translate3d(-60px,0,0);
    transform:translate3d(-60px,0,0);
    transition-delay:0s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#back{
    position:fixed;
    width:240px;
    height:40px;
    margin-top:-20px;
    left:0;
    top:50%;
    z-index:100;
    overflow:hidden;
    transition-property:width,-webkit-transform;
    transition-property:width,transform;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
.show #back{
    width:100px;
    transition-duration:.6s;
    transition-delay:.6s
}
.hide #back{
    -webkit-transform:translate3d(-70px,0,0);
    transform:translate3d(-70px,0,0);
    transition-duration:0s .6s;
    transition-delay:0s .6s;
    transition-timing-function:cubic-bezier(0,.6,.3,1)
}
#back a{
    display:block;
    position:absolute;
    left:40px;
    width:40px;
    height:40px;
    padding-top:20px;
    padding-left:10px;
    -webkit-transform:translate3d(200px,0,0);
    transform:translate3d(200px,0,0);
    transition-property:-webkit-transform,opacity;
    transition-property:transform,opacity;
    transition-duration:.6s,.25s;
    transition-timing-function:cubic-bezier(.6,0,.3,1),linear
}
.show #back a:hover{
    opacity:.5
}
.show #back a{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
}
.hide #back a{
    -webkit-transform:translate3d(-60px,0,0);
    transform:translate3d(-60px,0,0);
    transition-timing-function:cubic-bezier(0,.6,.3,1),linear
}
#back a:before,#back a:after{
    content:'';
    position:absolute;
    top:20px;
    left:10px;
    width:5px;
    height:1px;
    background-color:#fff;
    opacity:0;
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    transition-property:-webkit-transform,opacity;
    transition-property:transform,opacity;
    transition-duration:.6s;
    transition-delay:.6s
}
#back a:before{
    -webkit-transform-origin:0 100%;
    transform-origin:0 100%
}
.show #back a:before{
    opacity:1;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg)
}
#back a:after{
    -webkit-transform-origin:0 0;
    transform-origin:0 0
}
.show #back a:after{
    opacity:1;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg)
}
#back a span{
    display:block;
    width:190px;
    height:0;
    padding-top:1px;
    background-color:#fff;
    overflow:hidden;
    opacity:0;
    transition-property:width,opacity;
    transition-duration:.6s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
.show #back a span{
    width:20px;
    opacity:1;
    transition-delay:.6s
}
.hide #back a span{
    width:80px;
    opacity:.3;
    transition-duration:.6s,1.2s;
    transition-delay:0s;
    transition-timing-function:cubic-bezier(0,.6,.3,1)
}
.pointer-close{
    position:absolute;
    cursor:none;
    width:50px;
    height:50px;
    top:0;
    left:0;
    opacity:0;
    z-index:600;
    transition:opacity .25s ease-out
}
.pointer-close.show{
    opacity:1
}
.pointer-close:before,.pointer-close:after{
    content:'';
    position:absolute;
    width:40px;
    height:1px;
    background-color:#fff;
    top:25px;
    left:-12px;
    -webkit-transform-origin:50% 50%;
    transform-origin:50% 50%;
    z-index:1
}
.pointer-close:before{
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg)
}
.pointer-close:after{
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg)
}
.pointer-close a{
    position:relative;
    display:block;
    width:190%;
    height:100%;
    z-index:3;
    cursor:none
}
.pointer-close span{
    display:none
}
.pointer-grab{
    position:absolute;
    width:30px;
    height:30px;
    pointer-events:none;
    cursor:none;
    opacity:0;
    visibility:hidden;
    transition-property:opacity,visibility;
    transition-duration:.25s,0;
    transition-delay:0s,.25s;
    transition-timing-function:ease-out
}
.pointer-grab.show{
    opacity:1;
    visibility:visible;
    transition-delay:0s,0s
}
.pointer-grab .circle{
    position:absolute;
    top:2px;
    left:2px;
    width:26px;
    height:26px;
    border:1px solid #fff;
    border-radius:50%;
    opacity:.3;
    transition-property:-webkit-transform,opacity;
    transition-property:transform,opacity;
    transition-duration:.25s;
    transition-timing-function:ease-out
}
.pointer-grab.pressed .circle{
    opacity:.7;
    -webkit-transform:scale3d(.77,.77,1);
    transform:scale3d(.77,.77,1)
}
.pointer-grab .arrow{
    position:absolute;
    width:10px;
    left:10px
}
.pointer-grab .arrow-up{
    top:-23px;
    transition:top .25s ease-out
}
.pointer-grab .arrow-down{
    bottom:-22px;
    transition:bottom .25s ease-out
}
.pointer-grab .arrow:before,.pointer-grab .arrow:after{
    content:'';
    position:absolute;
    width:7px;
    height:1px;
    background-color:#fff
}
.pointer-grab .arrow-up:before{
    left:-1px;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg)
}
.pointer-grab .arrow-up:after{
    left:3px;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg)
}
.pointer-grab .arrow-down:before{
    left:3px;
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg)
}
.pointer-grab .arrow-down:after{
    left:-1px;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg)
}
.pointer-grab.pressed .arrow-up{
    top:-33px
}
.pointer-grab.pressed .arrow-down{
    bottom:-32px
}
#biography{
    position:relative;
    width:50%;
    height:100%;
    overflow:hidden;
    padding-top:150px;
    padding-left:12.5%;
    z-index:501
}
#biography.show{
    height:auto;
    overflow:inherit
}
#biography .biography{
    opacity:0;
    -webkit-transform:translate3d(-100%,0,0);
    transform:translate3d(-100%,0,0);
    transition-property:-webkit-transform,opacity;
    transition-property:transform,opacity;
    transition-duration:1.2s;
    transition-delay:.4s
}
#biography.show .biography{
    opacity:1;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-timing-function:cubic-bezier(0,.6,.3,1)
}
#biography.hide .biography{
    opacity:0;
    -webkit-transform:translate3d(-100%,0,0);
    transform:translate3d(-100%,0,0);
    transition-duration:1.2s;
    transition-delay:0s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#biography .section{
    margin-bottom:10em
}
#biography .section-title{
    font-size:1.4em;
    letter-spacing:.5em;
    margin-bottom:2em
}
#biography .section-title h2{
    font-weight:400
}
#biography .section-content{
    font-size:1.3em;
    letter-spacing:.15em;
    line-height:2.3
}
#biography .section-content p{
    margin-bottom:2em;
    text-align:justify;
    color:rgba(255,255,255,.7)
}
#biography .section-content a{
    color:rgba(255,255,255,.7);
    text-decoration:underline;
    transition-property:color;
    transition-duration:.25s;
    transition-timing-function:cubic-bezier(0,.6,.3,1)
}
#biography .section-content a:hover{
    color:#fff;
    text-decoration:none
}
#biography-contact{
    position:fixed;
    left:50%;
    top:150px;
    padding-left:100px
}
#biography-contact.section{
    margin-bottom:0
}
#biography-clients p,#biography-contact p{
    padding-left:20px;
    position:relative
}
#biography-clients p:before,#biography-contact p:before{
    content:'-';
    position:absolute;
    left:5px
}
#biography-connect{
    position:fixed;
    left:50%;
    top:150px;
    padding-left:160px;
    margin-left:270px
}
#biography-connect .sns-links{
    padding-left:15px
}
#biography-connect .sns-links li{
    display:inline-block;
    margin-right:15px;
    width:30px;
    height:30px
}
#biography-connect .sns-links a{
    display:inline-block;
    width:30px;
    height:30px;
    opacity:.7;
    transition-property:opacity;
    transition-duration:.25s;
    transition-timing-function:cubic-bezier(0,.6,.3,1)
}
#biography-connect .sns-links a:hover{
    opacity:1
}
#biography-connect i.icon{
    display:inline-block;
    width:30px;
    height:30px;
    background:no-repeat 50% 50%
}
#biography-connect i.icon-instagram{
    background-image:url(/assets/img/icons/icon_instagram.png);
    background-image:url(/assets/img/icons/icon_instagram.svg)
}
#biography-connect i.icon-facebook{
    background-image:url(/assets/img/icons/icon_facebook.png);
    background-image:url(/assets/img/icons/icon_facebook.svg)
}
@media screen and (max-width:1200px){
    #biography-connect{
        position:inherit;
        left:inherit;
        top:inherit;
        padding-left:0;
        margin-left:0
    }
}
@media screen and (max-width:960px),screen and (max-height:730px){
    #biography{
        width:100%;
        padding-right:12.5%
    }
    #biography-contact{
        position:inherit;
        left:inherit;
        top:inherit;
        padding-left:0;
        margin-left:inherit
    }
    #biography-connect{
        position:inherit;
        left:inherit;
        top:inherit;
        padding-left:0;
        margin-left:0
    }
    #biography-contact .section-content{
        margin-bottom:10em
    }
}
#to_portfolio{
    position:fixed;
    top:50%;
    right:0;
    z-index:600;
    margin-top:-15px;
    width:240px;
    height:30px;
    line-height:30px;
    overflow:hidden
}
#to_portfolio a{
    display:block;
    position:absolute;
    left:0;
    width:170px;
    height:30px;
    padding-right:.2em;
    letter-spacing:.8em;
    text-align:right;
    opacity:.3;
    overflow:hidden;
    -webkit-transform:translate3d(240px,0,0);
    transform:translate3d(240px,0,0);
    transition-property:-webkit-transform,width,opacity;
    transition-property:transform,width,opacity;
    transition-timing-function:cubic-bezier(.6,0,.3,1),cubic-bezier(.6,0,.3,1),linear
}
#to_portfolio a:hover{
    opacity:1
}
.show #to_portfolio a{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-duration:1s,1s,.25s;
    transition-delay:.8s,0s,0s
}
.hide #to_portfolio a{
    -webkit-transform:translate3d(-170px,0,0);
    transform:translate3d(-170px,0,0);
    transition-delay:0s,0s,0s
}
#to_portfolio a span{
    display:block;
    transition-property:-webkit-transform;
    transition-property:transform;
    transition-duration:1s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
.hide #to_portfolio a span{
    -webkit-transform:translate3d(150px,0,0);
    transform:translate3d(150px,0,0)
}
#to_portfolio:before,#to_portfolio:after{
    content:'';
    position:absolute;
    top:50%;
    right:0;
    height:1px;
    background-color:#fff;
    opacity:.3
}
#to_portfolio:before{
    width:60px;
    -webkit-transform:translate3d(60px,0,0);
    transform:translate3d(60px,0,0);
    transition-property:-webkit-transform,width;
    transition-property:transform,width;
    transition-timing-function:cubic-bezier(0,.6,.3,1)
}
.show #to_portfolio:before{
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-duration:.6s;
    transition-delay:1.2s
}
.hide #to_portfolio:before{
    width:210px;
    -webkit-transform:translate3d(-240px,0,0);
    transform:translate3d(-240px,0,0);
    transition-duration:0s,.6s;
    transition-delay:.8s,.2s
}
#to_portfolio:after{
    width:0;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
    transition-property:-webkit-transform,width;
    transition-property:transform,width
}
.show #to_portfolio:after{
    width:240px;
    -webkit-transform:translate3d(-240px,0,0);
    transform:translate3d(-240px,0,0);
    transition-duration:.6s,.6s;
    transition-delay:1.2s,.6s;
    transition-timing-function:cubic-bezier(0,.6,.3,1),cubic-bezier(.6,0,.3,1)
}
#error{
    height:100%
}
#error.hide{
    opacity:0;
    transition-property:opacity;
    transition-duration:.6s;
    transition-timing-function:cubic-bezier(.6,0,.3,1)
}
#error h1{
    font-size:80px;
    line-height:1;
    margin-bottom:.2em;
    text-align:center
}
#error h2{
    font-size:36px;
    line-height:1;
    margin-bottom:.5em;
    text-align:center
}
#error p{
    font-size:14px;
    text-align:center;
    color:#999
}