* {
 font-family: 'Roboto Mono', sans-serif;
 -webkit-box-sizing: border-box;
 box-sizing: border-box
}
html,
pre {
 word-wrap: break-word
}
.row,
table {
 width: 100%;
 margin: 0 auto
}
a, body {
 color: #ffffff
}
body {
 font-family: 'Roboto Mono', sans-serif;
 font-size: 14px;
 line-height: 1.8;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 flex-direction: column;
 width: 100% !important;
 min-height: 100;
 letter-spacing: .09em;
 background: #687C97;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column
}
body>main {
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 -ms-flex: 1;
 flex: 1
}
html {
 overflow-y: scroll;
 -ms-text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
 text-rendering: optimizeLegibility
}
a,
article,
aside,
b,
body,
center,
code,
dd,
del,
details,
div,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
header,
hgroup,
html,
img,
label,
legend,
li,
mark,
menu,
nav,
object,
p,
pre,
section,
small,
span,
strong,
u,
ul,
var,
video {
 font-size: 100%;
 border: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
heading,
hgroup,
menu,
nav,
p,
section {
 display: block;
 margin: 0 auto
}
ul {
 list-style: none
}
a,
a:hover {
 cursor: pointer
}
.yellow {
 color: #FFC125
}
.port_pic img {
 width: 490px !important;
 height: 320px !important
}
#marblappdiv img {
  display: block;
  margin: 0 auto
}
#marblapp {
  width: 25%;
  padding-bottom: 50px
}
#discovery {
  width: 85%;
}
#artboard2,
#artboard1 {
  width: 99%
}
.container,
.narrow-container,
.wide-container {
 width: 100%;
 padding: 10px;
 position: relative;
}
.container:after,
.narrow-container:after,
.wide-container:after {
 display: block
}
.row {
 display: block;
 margin: 0 auto
}
.row:after {
 display: block
}
.pic-row,
[class*=pic-row] {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex-flow: row wrap;
 -ms-flex-flow: row wrap;
 flex-flow: row wrap;
 -webkit-box-pack: justify;
 -webkit-justify-content: space-between;
 -ms-flex-pack: justify;
 justify-content: space-between;
 margin: 0 auto
}
.pic-row-d6 .item,
.pic-row-d6 [class*=col-] {
 width: auto;
 margin: 0 auto
}
::-moz-selection {
 color: #fff;
 background: #ffffff
}
::selection {
 color: #fff;
 background: #ffffff
}
a,
a *,
a:after,
a:before {
 -webkit-transition: all ease .5s;
 transition: all ease .5s
}
a {
 text-decoration: none
}
a:hover {
 color: #B2DFEE
}
a img {
 border: none
}
img {
 /*ms-interpolation-mode: bicubic*/
}
header.all-header .upper-nav .left-nav-piece a:after,
header.all-header a:after {
 bottom: -4px;
 left: 0;
 height: 1px;
 content: '';
 background: #FFC125
}
header.all-header {
 line-height: 1

}
header.all-header a {
 position: relative
}
header.all-header a:after {
 position: absolute;
 width: 0;
 -webkit-transition: .4s ease;
 transition: .4s ease
}
header.all-header a:hover:after {
 width: 100%
}
header.all-header nav {
 position: fixed;
 z-index: 100;
 left: 0;
 width: 100%
}
header.all-header .upper-nav {
 top: 5.55556vw;
 letter-spacing: .07em
}
header.all-header .upper-nav .left-nav-piece h1 {
 margin-bottom: 10px
}
header.all-header .upper-nav .left-nav-piece a {
 position: relative
}
header.all-header .upper-nav .left-nav-piece a:after {
 position: absolute;
 -webkit-transition: .4s ease;
 transition: .4s ease
}
header.all-header .upper-nav .left-nav-piece a:hover:after {
 width: 100%
}
header.all-header .upper-nav .right-nav-piece ul {
 position: fixed;
 width: 16px;
 margin-top: 0;
 text-align: left;
 -ms-writing-mode: tb-rl;
 -webkit-writing-mode: vertical-rl;
 writing-mode: vertical-rl;
 writing-mode-top: 5.55556vw
}
header.all-header .upper-nav .right-nav-piece ul li.before-border:before {
 width: 0.5px;
 height: 4px
}
header.all-header .upper-nav .right-nav-piece ul li a {
 position: relative
}
header.all-header .upper-nav .right-nav-piece ul li a:after {
 position: absolute;
 top: 0;

 width: 1px;
 height: 0;
 content: '';
 -webkit-transition: .4s ease;
 transition: .4s ease;
 background: #FFC125
}
header.all-header .upper-nav .right-nav-piece ul li a:hover:after {
 height: 100%;
 width: 100%
}
.about-content-wrap .container>* a:after,
footer.works-single-footer a:after,
{
 bottom: -3px;
 content: ''
}
.port-wrap a.piece,
header.all-header ul {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox
}

header.all-header ul {
 display: flex;
 padding: 0
}
footer.all-footer {
 font-size: 12px;
 line-height: 1;
 padding: 5.55556vw 0;
 text-align: right
}
.content-wrap {
 margin-top: 19.44444vw;
 -webkit-transition: opacity .3s ease;
 transition: opacity .3s ease
}

/*.fade-in {
 -webkit-transition: opacity .3s ease;
 transition: opacity .3s ease;
 opacity: 0
}*/
.before-border:before {
 display: inline-block;
 width: 10px;
 height: 1px;
 margin: 0 8px;
 content: '';
 -webkit-transform: translateY(-3px);
 -ms-transform: translateY(-3px);
 transform: translateY(-3px);
 background: #B2DFEE
}
.home-lead p{
 font-size: 28px;
 letter-spacing: .07em;
 padding-bottom: 30px;
 margin: 0 auto
}
.home-lead img{
 display: inline;
 /*float: right;*/
 margin: 0 auto
}
.port-wrap a.piece {
 display: flex;
 -webkit-flex-flow: column nowrap;
 -ms-flex-flow: column nowrap;
 flex-flow: column nowrap;
 -webkit-box-pack: end;
 -webkit-justify-content: flex-end;
 -ms-flex-pack: end;
 justify-content: flex-end
}
.port-wrap a.piece figcaption{
 padding-bottom: 50px
}
.port-wrap a.piece figcaption,
.port-wrap a.piece figure {
 width: 490px;
 margin: 0 auto
}
.port-wrap a.piece figure {
 line-height: 0;
 position: relative;
 margin-bottom: 2.77778vw
}
.port-wrap a.piece figure .piece-hover {
 position: absolute;
 top: 0;
 left: -100px;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 width: 100%;
 height: 100%;
 opacity: 0;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-flex-flow: row wrap;
 -ms-flex-flow: row wrap;
 flex-flow: row wrap
}
.port-wrap a.piece figure .piece-hover p {
 display: inline-block
}
.port-wrap a.piece figure .piece-hover>* {
 -webkit-transform: scale(.4);
 -ms-transform: scale(.4);
 transform: scale(.4)
}
.port-wrap a.piece figure:after {
 position: absolute;
 z-index: 1;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 content: '';
 -webkit-transition: .8s ease all;
 transition: .8s ease all;
 background: 0 0
}
.port-wrap a.piece figure img {
 line-height: 0;
 width: 490px;
 height: 320px
}
.port-wrap a.piece figure img.in-viewport {
 -webkit-transition: all 1s ease;
 transition: all 1s ease;
 opacity: 1
}
.port-wrap a.piece figure:hover .piece-hover {
 opacity: 1
}
.port-wrap a.piece figure:hover .piece-hover>* {
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1)
}
.port-wrap a.piece figure:hover:after {
 height: 320px !important;
 width: 490px !important;
 background: rgba(0, 0, 0, .05)
}
.port-wrap a.piece figure:hover img {
 -webkit-transition: .4s ease all;
 transition: .4s ease all;
 -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
 opacity: 0
}
.port-wrap a.piece figure:active:after {
 background: rgba(0, 0, 0, .04)
}
.port-wrap a.piece figure:active img {
 -webkit-transition: .4s ease all;
 transition: .4s ease all;
 -webkit-transform: scale(1.2);
 -ms-transform: scale(1.2);
 transform: scale(1.2);
 opacity: .2
}
.port-wrap a.piece figcaption h2 {
 font-size: 16px;
 color: #FFC125;
 font-weight: 700;
 line-height: 1;
 margin-bottom: 11px;
 letter-spacing: .1em
}
.port-wrap a.piece figcaption p {
 font-size: 12px;
 line-height: 1;
 letter-spacing: .07em
}
.port-wrap a.piece figcaption p.before-border:before {
 margin: 0 10px 0 0
}
.port-wrap a.piece:hover img {
 opacity: .8
}
header.works-single-header h2 {
 font-size: 24px;
 font-weight: 700;
 margin-bottom: 1.38889vw
}
header.works-single-header p.works-single-header-subtitle {
 font-size: 12px;
 margin-bottom: 5px
}
header.works-single-header span {
 font-size: 12px;
 display: block;
 margin-bottom: 8.33333vw
}
header.works-single-header span:before {
 margin: 0 10px 0 0
}
.content-body img {
 width: 490px !important;
 height: 320px !important;
 line-height: 0;
 margin-bottom: 5.55556vw;
 -webkit-transition: opacity .3s ease;
 transition: opacity .3s ease;
 opacity: 0
}
.content-body figure {
 line-height: 0;
 cursor: pointer
}
.content-body img.in-viewport {
 opacity: 1
}
.content-body p {
 line-height: 2;
 margin: 2.77778vw 0 5.55556vw
}
.content-body p.ja {
 line-height: 2;
 letter-spacing: 0
}
.content-body .half-wrap {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 padding: 0;
 -webkit-flex-flow: row wrap;
 -ms-flex-flow: row wrap;
 flex-flow: row wrap
}
.content-body .half-wrap>* {
 width: 50%

}
footer.works-single-footer {
 padding-bottom: 2.77778vw;
 border-bottom: 1px solid rgba(126, 76, 34, .2)
}
footer.works-single-footer a {
 position: relative
}
footer.works-single-footer a:after {
 position: absolute;
 width: 0;
 height: 1px;
 -webkit-transition: .4s ease;
 transition: .4s ease;
 background: #FFC125
}
footer.works-single-footer a:hover:after {
 width: 100%
}
footer.works-single-footer p.before-border {
 margin-bottom: 2.77778vw
}
footer.works-single-footer p.before-border:before {
 margin: 0 10px 0 0
}
footer.works-single-footer .works-credit-wrap {
 padding-left: 8.33333vw
}
nav.works-single-nav-wrap {
 padding: 5.55556vw 0
}
nav.works-single-nav-wrap h2.works-single-nav-heading {
 margin-bottom: 2.77778vw
}
nav.works-single-nav-wrap .item figcaption,
nav.works-single-nav-wrap .item figure {
 width: auto
}
nav.works-single-nav-wrap .item figure {
 line-height: 0;
 position: relative;
 margin-bottom: 2.77778vw
}
nav.works-single-nav-wrap .item figure .piece-hover {
 position: absolute;
 top: 0;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 width: 100%;
 height: 100%;
 opacity: 0;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-flex-flow: row wrap;
 -ms-flex-flow: row wrap;
 flex-flow: row wrap
}
nav.works-single-nav-wrap .item figure .piece-hover p {
 display: inline-block
}
nav.works-single-nav-wrap .item figure .piece-hover>* {
 -webkit-transform: scale(.4);
 -ms-transform: scale(.4);
 transform: scale(.4)
}
nav.works-single-nav-wrap .item figure:after {
 position: absolute;
 z-index: 1;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 content: '';
 -webkit-transition: .8s ease all;
 transition: .8s ease all;
 background: 0 0
}
nav.works-single-nav-wrap .item figure img {
 line-height: 0;
 width: 100%;
 height: auto
}
nav.works-single-nav-wrap .item figure img.in-viewport {
 -webkit-transition: all 1s ease;
 transition: all 1s ease;
 opacity: 1
}
nav.works-single-nav-wrap .item figure:hover .piece-hover {
 opacity: 1
}
nav.works-single-nav-wrap .item figure:hover .piece-hover>* {
 -webkit-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1)
}
nav.works-single-nav-wrap .item figure:hover:after {
 background: rgba(0, 0, 0, .05)
}
nav.works-single-nav-wrap .item figure:hover img {
 -webkit-transition: .4s ease all;
 transition: .4s ease all;
 -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
 opacity: 0
}
nav.works-single-nav-wrap .item figcaption h2 {
 font-size: 16px;
 font-weight: 700;
 line-height: 1;
 margin-bottom: 11px;
 letter-spacing: .1em
}
nav.works-single-nav-wrap .item figcaption p {
 font-size: 12px;
 line-height: 1;
 letter-spacing: .07em
}
nav.works-single-nav-wrap .item figcaption p.before-border:before {
 margin: 0 10px 0 0
}
nav.works-single-nav-wrap .item:hover img {
 opacity: .9
}
header.about-header h2 {
 margin-bottom: 0
}
header.about-header span {
 margin-bottom: 5.55556vw
}
.about-content-wrap .container .before-border.about-heading {
 display: block;
 margin-top: 30px
}
.about-content-wrap .container ul {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex-flow: row wrap;
 -ms-flex-flow: row wrap;
 flex-flow: row wrap;
 -webkit-box-pack: justify;
 -webkit-justify-content: space-between;
 -ms-flex-pack: justify;
 justify-content: space-between
}
.about-content-wrap .container ul li {
 font-size: 12px;
 line-height: 1.7;
 width: 31%;
 margin-bottom: 50px;
 padding: 10px 0 0;
 border-top: 1px solid rgba(126, 76, 34, .4)
}
.about-content-wrap .container ul li strong {
 font-size: 10px
}
.about-content-wrap .container a {
 position: relative
}
.about-content-wrap .container a:after {
 position: absolute;
 width: 0;
 height: 1px;
 -webkit-transition: .4s ease;
 transition: .4s ease;
 background: #7e4c22
}
.about-content-wrap .container a:hover:after {
 width: 100%
}
.about-content-wrap .container>* p,
.about-content-wrap .container>* ul {
 margin: 0 0 30px;
 padding: 0 0 0 8.33333vw
}
.about-heading.before-border:before {
 margin: 0 10px 0 0
}
#section07 a {
 padding-top: 650px
}
#section07 a span {
	position: absolute;
 top: 30%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb07 2s infinite;
	animation: sdb07 2s infinite;
	opacity: 0;
	box-sizing: border-box
}
#section07 a span:nth-of-type(1) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s
}
#section07 a span:nth-of-type(2) {
	top: 30.5%;
	-webkit-animation-delay: .15s;
	animation-delay: .15s
}
#section07 a span:nth-of-type(3) {
	top: 31%;
	-webkit-animation-delay: .3s;
	animation-delay: .3s
}
@-webkit-keyframes sdb07 {
	0% {
	opacity: 0
	}
	50% {
	opacity: 1
	}
	100% {
	opacity: 0
	}
}
@keyframes er {
	0% {
	opacity: 0
	}
	50% {
	opacity: 1
	}
	100% {
	opacity: 0
	}
}



@media screen and (min-width: 769px) {
 .container {
 width: 100%;
 padding: 0 8.33333vw
 }
 header.all-header .upper-nav .right-nav-piece ul li {
 float: left
 }
 header.all-header.scrolled span {
 opacity: 0
 }
 header.all-header.scrolled:hover span {
 opacity: 1
 }
 .mobile-only {
 display: none !important
 }
 .pc-only {
 display: block !important
 }
 .port-wrap a.piece:nth-child(10),
 .port-wrap a.piece:nth-child(11),
 .port-wrap a.piece:nth-child(14),
 .port-wrap a.piece:nth-child(15),
 .port-wrap a.piece:nth-child(2),
 .port-wrap a.piece:nth-child(3),
 .port-wrap a.piece:nth-child(6),
 .port-wrap a.piece:nth-child(7) {
 padding: 0
 }
 .port-wrap a.piece:nth-child(1) figcaption,
 .port-wrap a.piece:nth-child(12) figcaption,
 .port-wrap a.piece:nth-child(16) figcaption,
 .port-wrap a.piece:nth-child(20) figcaption,
 .port-wrap a.piece:nth-child(5) figcaption,
 .port-wrap a.piece:nth-child(9) figcaption {
 padding-left: 0px !important
 }
}
@media screen and (min-width: 2560px){
 .port-wrap a.piece {
 width: 100%
 }
}
@media screen and (max-width: 769px) {
 .port-wrap a.piece {
 display: flex;
 margin-bottom: 150px;

 margin: 0 auto
 }
 .container,
 .narrow-container {
 width: 100%;
 padding: 0 2%
 }
 .wide-container {
 padding: 0 2%
 }
 .about-content-wrap .container ul li {
 width: 49%
 }
}
@media screen and (max-width: 769px) {
 #section07 a, #section07 a span, #section07 a span:nth-of-type(1),
 #section07 a span:nth-of-type(2), #section07 a span:nth-of-type(3){
 display: none

 }
 header.all-header .lower-nav a:after,
 header.all-header .upper-nav .left-nav-piece,
 header.all-header .upper-nav .left-nav-piece a:after,
 header.all-header a:after {
 display: none
 }
 .container.no-gutter,
 .narrow-container.no-gutter,
 .wide-container.no-gutter {

 }
 .pic-row [class*=col-d],
 .pic-row [class*=col-g] {
 width: 100%;
 margin: 0 auto
 }
 .pic-row-md12 .item,
 .pic-row-md12 [class*=col-] {
 width: 100%
 }
 header.all-header .upper-nav .right-nav-piece ul {
 -webkit-transform: translateX(15px);
 -ms-transform: translateX(15px);
 transform: translateX(15px)
 }
 header.all-header .upper-nav .right-nav-piece ul li.before-border:before {
 -webkit-transform: translateX(3px);
 -ms-transform: translateX(3px);
 transform: translateX(3px)
 }
 footer.global-footer {
 padding: 5.55556vw 0 33.33333vw
 }
 .content-wrap {
 margin-top: 25.92593vw
 }
 .mobile-only {
 display: block !important
 }
 .pc-only {
 display: none !important
 }
 .about-content-wrap .container a:after,
 .home-lead br,
 footer.works-single-footer a:after {
 display: none
 }
 .home-lead {
 font-size: 16px;
 margin-bottom: 8.33333vw;

 margin: 0 auto
 }
 .port-wrap a.piece figcaption {
 padding: 10px 5.55556vw
 }
 header.works-single-header .works-single-header-inner {
 padding: 0 !important
 }
 .content-body p {
 margin: 4.16667vw 0
 }
 .content-body .half-wrap {
 padding: 8.33333vw 0 !important
 }
 .content-body .half-wrap>* {
 width: 100%;
 padding: 0 !important
 }
 footer.works-single-footer .works-credit-wrap {
 padding-left: 0 !important
 }
 footer.works-single-footer {
 padding: 5.55556vw 0 11.11111vw
 }
 nav.works-single-nav-wrap .item figcaption {
 padding: 10px 0 8.33333vw
 }
 .about-content-wrap .container {
 padding: 0 20px !important
 }
 .about-content-wrap .container>* p,
 .about-content-wrap .container>* ul {
 padding: 0 0 2.77778vw !important
 }
}
@media screen and (max-width: 500px) {
  #bio, #contact {
    padding-bottom: 30px;
    margin: 0 auto;
  }
  #marblapp {
    width: 70%;
    padding-bottom: 40px
  }
  #discovery {
    width: 100%
  }
  #v1 {
    display: none
  }
  .port-wrap a.piece figcaption {
  padding: 0
  }
 .port-wrap a.piece figure img {
   width: 95%;
   height: auto;
   margin: 0 auto
 }
 .port-wrap a.piece figcaption,
 .port-wrap a.piece figure {
 width: auto;
 padding-top: 30px
 }
 .container,
 .narrow-container,
 .wide-container {
 width: 100%
 }
 .about-content-wrap .container ul li {
 width: 100%
 }
 #section07 a, #section07 a span, #section07 a span:nth-of-type(1),
 #section07 a span:nth-of-type(2), #section07 a span:nth-of-type(3){
 display: none
 }

}
@-webkit-keyframes fadeIn {
 from {
 opacity: 0
 }
 to {
 opacity: 1
 }
}
@keyframes fadeIn {
 from {
 opacity: 0
 }
 to {
 opacity: 1
 }
}
@-webkit-keyframes fadeInDown {
 from {
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@keyframes fadeInDown {
 from {
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@-webkit-keyframes fadeInDownBig {
 from {
 -webkit-transform: translate3d(0, -2000px, 0);
 transform: translate3d(0, -2000px, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@keyframes fadeInDownBig {
 from {
 -webkit-transform: translate3d(0, -2000px, 0);
 transform: translate3d(0, -2000px, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@-webkit-keyframes fadeInLeft {
 from {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@keyframes fadeInLeft {
 from {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@-webkit-keyframes fadeInLeftBig {
 from {
 -webkit-transform: translate3d(-2000px, 0, 0);
 transform: translate3d(-2000px, 0, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@keyframes fadeInLeftBig {
 from {
 -webkit-transform: translate3d(-2000px, 0, 0);
 transform: translate3d(-2000px, 0, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@-webkit-keyframes fadeInRight {
 from {
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@keyframes fadeInRight {
 from {
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@-webkit-keyframes fadeInRightBig {
 from {
 -webkit-transform: translate3d(2000px, 0, 0);
 transform: translate3d(2000px, 0, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@keyframes fadeInRightBig {
 from {
 -webkit-transform: translate3d(2000px, 0, 0);
 transform: translate3d(2000px, 0, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@-webkit-keyframes fadeInUp {
 from {
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@keyframes fadeInUp {
 from {
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@-webkit-keyframes fadeInUpBig {
 from {
 -webkit-transform: translate3d(0, 2000px, 0);
 transform: translate3d(0, 2000px, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@keyframes fadeInUpBig {
 from {
 -webkit-transform: translate3d(0, 2000px, 0);
 transform: translate3d(0, 2000px, 0);
 opacity: 0
 }
 to {
 -webkit-transform: none;
 transform: none;
 opacity: 1
 }
}
@-webkit-keyframes fadeOut {
 from {
 opacity: 1
 }
 to {
 opacity: 0
 }
}
@keyframes fadeOut {
 from {
 opacity: 1
 }
 to {
 opacity: 0
 }
}
@-webkit-keyframes fadeOutDown {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
 opacity: 0
 }
}
@keyframes fadeOutDown {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(0, 100%, 0);
 transform: translate3d(0, 100%, 0);
 opacity: 0
 }
}
@-webkit-keyframes fadeOutDownBig {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(0, 2000px, 0);
 transform: translate3d(0, 2000px, 0);
 opacity: 0
 }
}
@keyframes fadeOutDownBig {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(0, 2000px, 0);
 transform: translate3d(0, 2000px, 0);
 opacity: 0
 }
}
@-webkit-keyframes fadeOutLeft {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 opacity: 0
 }
}
@keyframes fadeOutLeft {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 opacity: 0
 }
}
@-webkit-keyframes fadeOutLeftBig {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(-2000px, 0, 0);
 transform: translate3d(-2000px, 0, 0);
 opacity: 0
 }
}
@keyframes fadeOutLeftBig {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(-2000px, 0, 0);
 transform: translate3d(-2000px, 0, 0);
 opacity: 0
 }
}
@-webkit-keyframes fadeOutRight {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
 opacity: 0
 }
}
@keyframes fadeOutRight {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(100%, 0, 0);
 transform: translate3d(100%, 0, 0);
 opacity: 0
 }
}
@-webkit-keyframes fadeOutRightBig {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(2000px, 0, 0);
 transform: translate3d(2000px, 0, 0);
 opacity: 0
 }
}
@keyframes fadeOutRightBig {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(2000px, 0, 0);
 transform: translate3d(2000px, 0, 0);
 opacity: 0
 }
}
@-webkit-keyframes fadeOutUp {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 opacity: 0
 }
}
@keyframes fadeOutUp {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(0, -100%, 0);
 transform: translate3d(0, -100%, 0);
 opacity: 0
 }
}
@-webkit-keyframes fadeOutUpBig {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(0, -2000px, 0);
 transform: translate3d(0, -2000px, 0);
 opacity: 0
 }
}
@keyframes fadeOutUpBig {
 from {
 opacity: 1
 }
 to {
 -webkit-transform: translate3d(0, -2000px, 0);
 transform: translate3d(0, -2000px, 0);
 opacity: 0
 }
}
@-webkit-keyframes bodyBackground {
 0%, 100% {
 background-color: #f4f3ed
 }
 50% {
 background-color: #fafafa
 }
}
@keyframes bodyBackground {
 0%, 100% {
 background-color: #f4f3ed
 }
 50% {
 background-color: #fafafa
 }
}
@media screen and (max-width: 769px) {
 .port-wrap a.piece {
 display: flex;
 margin-bottom: 150px;
 margin-left: 0px !important
 }
 .container,
 .narrow-container {
 width: 100%;
 padding: 0 2%
 }
 .wide-container {
 padding: 0 2%
 }
 .about-content-wrap .container ul li {
 width: 49%
 }
}

@media screen and (max-width: 767px) {
 .port-wrap a.piece {
 display: flex;
 margin-bottom: 150px;
 margin-left: 0px !important
 }
 header.all-header .lower-nav a:after,
 header.all-header .upper-nav .left-nav-piece,
 header.all-header .upper-nav .left-nav-piece a:after,
 header.all-header a:after {
 display: none
 }
 .container.no-gutter,
 .narrow-container.no-gutter,
 .wide-container.no-gutter {
 padding: 0
 }
 .pic-row [class*=col-d],
 .pic-row [class*=col-g] {
 width: 100%;
 }
 .pic-row .col-md12 {
 width: 100%
 }
 header.all-header .upper-nav .right-nav-compornent ul {
 -webkit-transform: translateX(15px);
 -ms-transform: translateX(15px);
 transform: translateX(15px)
 }
 header.all-header .upper-nav .right-nav-compornent ul li.before-border:before {
 -webkit-transform: translateX(3px);
 -ms-transform: translateX(3px);
 transform: translateX(3px)
 }
 footer.global-footer {
 padding: 5.55556vw 0 33.33333vw
 }
 .content-wrap {
 margin-top: 25.92593vw
 }
 .mobile-only {
 display: block !important
 }
 .pc-only {
 display: none !important
 }
 .about-content-wrap .container a:after,
 .home-lead br,
 footer.works-single-footer a:after {
 display: none
 }
 .home-lead {
 margin-bottom: 8.33333vw
 }
 .works-archive-wrap a.piece figcaption {
 padding: 10px 5.55556vw
 }
 header.works-single-header .works-single-header-inner {
 padding: 0 !important
 }
 .content-body .container {
 padding: 0 20px !important
 }
 .content-body .container figure {
 padding: 0 !important
 }
 .content-body p {
 margin: 4.16667vw 0
 }
 .content-body .half-wrap {
 padding: 8.33333vw 0 !important
 }
 .content-body .half-wrap>* {
 width: 100%;
 padding: 0 !important
 }
 footer.works-single-footer .works-credit-wrap {
 padding-left: 0 !important
 }
 footer.works-single-footer {
 padding: 5.55556vw 0 11.11111vw
 }
 nav.works-single-nav-wrap .item figcaption {
 padding: 10px 0 8.33333vw
 }
 .about-content-wrap .container {
 padding: 0 20px !important
 }
 .about-content-wrap .container>* p,
 .about-content-wrap .container>* ul {
 padding: 0 0 2.77778vw !important
 }
}