@charset "UTF-8";
/* CSS Document */

@import url("//fonts.googleapis.com/css?family=Open+Sans:100,400,700");

/************* gerneral styles *******************/

* { margin: 0; padding: 0; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-weight: 100; text-decoration: none; list-style: none; letter-spacing: 1px; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, main { display: block; }

*, *:before, *:after { box-sizing: inherit; }

noscript div { position: fixed; top: 10px; left: 10%; padding: 1%; width: 78%; font-size: 20px; text-align: center; color: #fff; background-color: #f00; border-radius: 10px; z-index: 100; }

html { font-size: 62.5%; height: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; }

img { max-width: 100%; display: block; }

body { height: 100%; background-color: #fbf9f6; width: 100%; }

#container { height:100%; width: 100%; position: relative; }

p { color: inherit; font-size: 16px; line-height: 150%; padding: 0 0 20px 0; }

h2 { color: inherit; font-size: 30px; line-height: 150%; padding: 10px 0 10px 0; }

h3 { color: inherit; font-size: 20px; line-height: 150%; padding: 10px 0 10px 0; }

a { color: #44515c; transition: color 500ms ease-in-out; }

a:hover, .footer-nav li a.selected { color: #e31d1a; }

a:active, a img { border: none; }

a[href^=tel] { color: inherit; text-decoration: none; }

strong { font-weight: bold; }

.clear { clear: both; width: 0; height: 0; font-size: 0; overflow: hidden; }

/****************************************header*******************************************/


h1 { width: 200px; margin: 0 0 20px 20px; }

h1 a { display: block; width: 100%; height: 0; padding-top: 14.59%; font-size: 0; background: url(../img/main-title.png) 0 0 no-repeat; background-size: cover; }

#nav-button { position: fixed; left: -9999px; }

.line { display: block; height: 8px; width: 40px; background:#44515c; border-radius: 0; cursor: pointer; position: absolute; top: 35px; right: 20px; }

.top, .bottom { display: block; position: absolute; height: 8px; background: #44515c; border-radius: 0; top: 20px; }

.pad1, .pad2 { display: block; position: absolute; height: 8px; background: transparent;}

.pad1 { top:28px;}

.pad2 { top:43px;}

.bottom { top: 50px; }

.line { -webkit-transition: background 0s 0s; transition: background 0s 0s; }

.top, .bottom { -webkit-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s; -webkit-transition-property: top, -webkit-transform; transition-property: top, transform; }

.middle { -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, transform; }

#nav-button:checked ~ .middle { opacity: 0; }

#nav-button:checked ~ .pad1 { top:15px; height:25px; }

#nav-button:checked ~ .pad2 { top:40px; height:25px; }

#nav-button:checked + .top { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 35px; }

#nav-button:checked ~ .bottom { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: 35px; }

/****************************************main area*******************************************/

main { padding: 20px 10px; margin: 0 auto; }

.content { padding:20px; background-color: #fff;}

/*************************************footer************************************************/


footer { width: 100%; padding: 20px 0 20px 0; margin: 0 auto 20px auto; }

.copyright { float: right; display: inline; font-size: 16px; margin-right:20px; }

.footer-nav { float: left; display: inline; font-size: 16px; margin-left: 20px; }

.footer-nav li { display: inline-block; margin-right:20px;}

.footer-nav li a { font-size: 16px;}

/* slide in panel from the left*/


aside { position: fixed; width:300px; background-color: #316279; top:0; right:-300px; overflow: visible; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);  box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4); height: 100%; }

aside ul { width: 100%; padding:50px 20px; }

aside ul li { width: 100%; padding:5px 0; border-bottom: 1px solid #fff; }

aside ul li a { font-size: 16px; color: #fff; }

aside ul li a:hover, aside ul li a.selected { font-size: 16px; color: #000; }


main { /*...*/
position: relative; width:100%; height: 100%; top: 0; left: 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

main.is-visible, aside.is-visible  { -webkit-transform: translate3d(-300px, 0, 0); transform: translate3d(-300px, 0, 0); -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }

table.exhibition { font-size: 20px; }

table.exhibition td { padding-bottom: 20px; vertical-align: top; }

table.exhibition tr > td:first-child { font-weight:700 !important; }

/* curation services */

img.artist { float: none; margin: 0 0 20px 0; width:100%; }

/* patent leather shoes */

img.shoes, img.full { float:none;margin: 0 0 20px 0; width:100%; }

p.story { padding:5rem; font-size: 3rem; text-align: justify; float: none; margin: 0 0 20px 0; width:100%;}

.pt200 { padding: 5rem !important; }

@media only screen and (min-width : 1270px) {

img.artist { float:left; margin: 0 20px 20px 0; width:calc(60% - 20px); }

img.shoes, p.story { display: inline-block; vertical-align: top; margin: 0 20px 50px 0; width:calc(50% - 23px); }

.pt200 { padding: 20rem 5rem 0rem 5rem !important; }

main { padding: 20px 100px; margin: 0 auto; }

h1 { width: 300px; }

.line { right:120px; width:60px; }
}