@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;1,300;1,700&family=Montserrat:wght@800&family=Rethink+Sans:wght@400;800&display=swap');


@keyframes w4animate {
  from { background-position: 0 0 }
  to { background-position: 400% 0 }
}


.ogintro {width: 1px; height: 1px; opacity: 0; position: absolute; left: -1000px; top:-1000px}

body {
  background: linear-gradient(15deg, #f1e7e7, #e5e5e5, #faeeee, #e5e5e5, #f1e7e7, #e5e5e5, #faeeee, #e5e5e5);
  background-size: 200%;
  margin-bottom: -40vw;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0;box-sizing:border-box;}

body {font-family: 'Merriweather', serif; font-size: 18px; line-height: 26px; color: #111;}

header {height: 80px; display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 5px 20px 0; position: absolute; z-index: 1000;}

header nav {display: flex; justify-content: flex-start; padding-top: 10px; height: 40px;}
header nav::before {content:""; width: 8vw; border-top: 4px solid #000; display: inline-block; position: relative; top: 22px; height: 1px;}
header nav > a { padding: 7px 10px 5px; color: #000; text-decoration: none; margin: 0 10px; white-space: nowrap; font-family: 'Merriweather', serif; font-style: italic; font-size: 11px;}
header nav > a::first-letter {text-transform: uppercase; font-family: 'Rethink Sans', 'Montserrat', sans-serif; font-style: normal; font-weight: 800; font-size: 180%;}
header nav > a:hover {text-decoration: underline; opacity: 0.75;}
header nav > a:hover span {writing-mode: vertical-lr; display: inline-block; position: absolute; text-orientation: mixed; white-space: nowrap; padding-top:32px; padding-left: 5px; text-decoration: inherit;}
header nav > a:hover span::before {content:""; position: absolute; top: 14px; left: -2px; border-width: 2px; border-radius: 50%; border-style: solid; border-color: transparent #000 transparent transparent; width: 15px; height: 15px; display: block; transform: rotateZ(315deg);}

.hamburger-container {display: none;}


.c {/*width: 1200px;*/ margin: 0 auto;}

section .title {position: relative; z-index: 20; margin: 15px 0 20px; font-weight: 800; font-size: 11vw; line-height: normal; white-space: nowrap; text-align: center; background: url(img/w1bg.gif) no-repeat; background-size: cover; -webkit-background-clip: text; background-clip: text; color: transparent; font-family: 'Rethink Sans', 'Montserrat', sans-serif;}
section .title span {writing-mode: vertical-lr; padding-top: 11vw; display: inline-block; position: relative; text-orientation: mixed; white-space: nowrap; transform: rotateZ(180deg); background: inherit;}
section .title span::before {content:""; position: absolute; top: 2vw; left: 5vw; border-width: 4px; border-radius: 50%; border-style: solid; border-color: transparent #000 transparent transparent; width: 11vw; height: 11vw; display: block; transform: rotateZ(225deg);}

section .title span.down {transform: none; position: absolute; }
section .title span.down:before {transform: rotateZ(315deg);}
section .title span.straight {transform: none; writing-mode: initial; background: none; padding-left: 0; padding-top: 0;}
section .title span.straight:before {height: 1px; border: none; border-top:4px solid #000; border-radius: 0; transform: none; top:0; left: 0; position: static; width: 10vw; margin-bottom: 0.9vw;}
section .title span.straight.long:before {width: 20vw}
section .title span.slash {transform: rotateZ(315deg); writing-mode: initial; background: none; padding-left: 0; padding-top: 0;}
section .title span.slash:before {height: 1px; border: none; border-top:4px solid #000; border-radius: 0; transform: none; position: static; width: 22vw; margin-bottom:7vw;}

section .title span.bracket {transform: none; writing-mode: initial; background: none; padding-left: 0; padding-top: 0;}
section .title span.bracket:before {transform: none; position: static; height: 7.5vw; width: 7.5vw; margin-bottom:-2.4vw; margin-left: -6.2vw}
section .title span.bracket.left:before {margin-right: -6.2vw; margin-left: 0; border-color: transparent transparent transparent #000;}

section .title.type1 {background-image: url(img/w1bg.gif)}
section .title.type2 {background-image: url(img/w2bg.gif)}
section .title.type3 {background-image: url(img/w3bg.jpg)}
section .title.type4 {background-image: url(img/w4bg.jpg); background-size: 80%; background-position: 0 0; animation: w4animate 20s linear infinite; background-repeat: repeat;}
section .title.type4 span {background-size: 240%;}
section .title.type5 {background-image: url(img/w5bg.jpg)}
section .title.type6 {background-image: url(img/w6bg.jpg)}
section .title.type7 {background-image: url(img/w7bg.jpg); background-position: center center;}
section .title.type8 {background-image: url(img/w8bg.jpg)}
section .title.type9 {background-image: url(img/w9bg.jpg)}
section .title.type10 {background-image: url(img/w10bg.jpg)}
section .title.type11 {background-image: url(img/w11bg.jpg)}
section .title.type12 {background-image: url(img/w12bg.gif)}
section .title.type13 {background-image: url(img/w13bg.jpg); background-position: left 15%;}
section .title.type14 {background-image: url(img/w14bg.jpg)}
section .title.type15 {background-image: url(img/w15bg.jpg)}
section .title.type16 {background-image: url(img/w16bg.jpg); background-position: center 4%;}
section .title.type17 {background-image: url(img/w17bg.gif); background-position: left 15%;}
section .title.type18 {background-image: url(img/w18bg.gif)}
section .title.type19 {background-image: url(img/w19bg.jpg)}
section .title.type20 {background-image: url(img/w20bg.jpg)}
section .title.type21 {background-image: url(img/w21bg.jpg)}
section .title.type22 {background-image: url(img/w22bg.gif)}

section .title.type23 {background-image: url(img/w23bg.jpg)}
section .title.type24 {background-image: url(img/w24bg.jpg)}
section .title.type25 {background-image: url(img/w25bg.jpg)} 
section .title.type26 {background-image: url(img/w26bg.jpg)}
section .title.type27 {background-image: none; /*url(img/w27bg.jpg)*/ background-color: #000;} /* fix bg */
section .title.type28 {background-image: url(img/w28bg.gif)} 
section .title.type29 {background-image: url(img/w29bg.gif)}
section .title.type30 {background-image: url(img/w30bg.jpg)}
section .title.type31 {background-image: url(img/w31bg.jpg)}
section .title.type32 {background-image: url(img/w32bg.jpg)}


section div.subtitle {display: flex; padding: 0 3vw; justify-content: space-between; align-items: stretch; font-style: italic;}
section div.subtitle span {align-self: stretch; display: block;}
section div.subtitle .sub1 {font-size: 4.5vw; }
section div.subtitle .sub2 {flex:1; margin: 0px 8vw 0 3vw;}
section div.subtitle .sub2::before {content: ""; border-top: 4px solid #000; display: block; position: relative; top: 1vw}
section div.subtitle .sub3 {writing-mode: vertical-lr; padding-top: 6vw; display: inline-block; position: relative; text-orientation: mixed; white-space: nowrap; font-size: 2.8vw; }
section div.subtitle .sub3:before {content:""; position: absolute; top: 1vw; left: -4.5vw; border-width: 4px; border-radius: 50%; border-style: solid; border-color: transparent #000 transparent transparent; width: 5vw; height: 5vw; display: block; transform: rotateZ(315deg);}

section div.maintext {position: relative; top: -36vw; margin-bottom: -30vw; font-style: italic;}
section div.simpletext {margin-top: 6vw; margin-bottom: 10vw}
section div.maintext p,
section div.simpletext p {padding: 0 0 25px 3vw; width: 50%; line-height: 1.5; text-align: justify; position: relative; z-index: 10;}
section div.simpletext p {width: auto; padding-right: 3vw; text-align: left;}
section div.maintext p strong,
section div.simpletext p strong {font-family: 'Montserrat', sans-serif; font-style: normal;}
section div.maintext p a, 
section div.simpletext p a {color: #000; text-decoration: none; border-bottom: 4px solid #000}
section div.maintext p a:hover, 
section div.simpletext p a:hover {text-decoration: none; border-bottom-color: transparent}
section div.maintext p strong.border,
section div.simpletext p strong.border {width: 12vw; border-top: 4px solid #000; display: inline-block; margin-right: 10px; height: 1px;}
section div.simpletext p strong.border {margin-left:8px}
section div.maintext p strong.border.right {width: 15vw; float: right; margin-right: 0; margin-left: 10px; flex-grow: 1}
section div.maintext p.note {width: 90%; font-size: 1.2vw; white-space: nowrap; position: relative; z-index: 1; top: -22vw; margin-bottom: -22vw;}
section div.maintext p.note span {writing-mode: vertical-lr; padding-top: 2.6vw; padding-right: 1.5vw; display: inline-block; position: relative; text-orientation: mixed; white-space: nowrap; transform: rotateZ(180deg); background: inherit;}
section div.maintext p.note span::before {content:""; position: absolute; top: 0; left: .8vw; border-width: 4px; border-radius: 50%; border-style: solid; border-color: transparent #000 transparent transparent; width: 2vw; height: 2vw; display: block; transform: rotateZ(225deg);} 
section div.maintext p.note strong.border {width: 24vw}

section.work {padding: 50px 3vw 0;}
section.work .title {text-align: left; margin-bottom: 0; display: block; text-decoration: none !important; z-index: 10;}
section.work .title strong.corner {display: inline-block; margin-top: -4vw; margin-left: 1.5vw; margin-right: -2vw; border-width: 4px; border-radius: 50%; border-style: solid; border-color: transparent #000 transparent transparent; width: 7vw; height: 7vw; transform: rotateZ(135deg); top: -0.7vw; position: relative;}
section.work div.subtitle {padding: 0; z-index: 15; position: relative; display: inline-block;}
section.work div.subtitle .sub1 {font-size: 2.8vw;}
/* section.work .bio {font-size: 1.2vw; font-size: max(1.2vw, 14px); line-height: 120%}
section.work .bio span.left {writing-mode: vertical-lr; display: inline-block; position: relative; text-orientation: mixed; white-space: nowrap; background: inherit; padding-bottom: 3.4vw; padding-right: 2vw;}
section.work .bio span.left::before {content:""; position: absolute; bottom: 0.2vw; left: .7vw; border-width: 4px; border-radius: 50%; border-style: solid; border-color: transparent #000 transparent transparent; width: 4vw; height: 4vw; display: block; transform: rotateZ(135deg);}
section.work .bio span.right {writing-mode: vertical-lr; display: inline-block; position: relative; text-orientation: mixed; white-space: nowrap; background: inherit; padding-top: 3.5vw; padding-right: 2vw; transform: rotateZ(180deg);}
section.work .bio span.right::before {content:""; position: absolute; bottom: 1.3vw; left: .6vw; border-width: 4px; border-radius: 50%; border-style: solid; border-color: transparent #000 transparent transparent; width: 4vw; height: 4vw; display: block; transform: rotateZ(225deg);}*/

section.work div.duo {display: flex; flex-direction: row; }
section.work div.duo > div {flex-grow: 1; flex-shrink: 1; flex-basis: 0; max-width: 430px;}
section.work div.duo > div:nth-child(even) {padding-left: 15px;}
section.work div.duo > div:nth-child(odd) {padding-right: 15px; padding-left: 0;}

section.work .bio {font-style: italic;}
section.work .bio span.left::after,
section.work .bio span.right::before {content: ""; width: 120px; border-top: 4px solid #000; display: inline-block; margin: 0 10px; position: relative; top: -2px}

section.work .description {margin-top: 30px; padding-left: 30vw; position: relative; text-align: justify; max-width: 1200px; z-index: 100; font-style: italic;}
section.work .description::before {content:"2023"; font-family: 'Montserrat', sans-serif; font-style: normal; font-size: 80%; width: 29vw; border-top: 4px solid #000; left: 0; top:5px; height: 1px; position: absolute;}
section.work.year2024 .description::before {content:"2024"}
section.work .description.plain::before {content:""}
section.work .description a, section.work .description strong {color: #000 !important; text-decoration: none !important; border-bottom: 4px solid #000; font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: normal;}
section.work .description a:hover {border-bottom-color: transparent;}
section.work .description::first-letter {font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: normal;}

section.work.w1 {margin-top: 12vw;}
section.work.w1 .title {font-size: 8vw; margin-top: -14vw; background-image: url(img/w1bg.gif)}
section.work.w1 .title span {padding-top: 9vw;}

section.work.w2 {margin-top: 13vw;}
section.work.w2 .title {font-size: 8vw; margin-top: -13vw; background-image: url(img/w2bg.gif)}
section.work.w2 .title span {padding-top: 9vw;}
section.work.w2 .title span::before {left: 4.5vw;}

body.en section.work.w2 {margin-top: 11vw;}
body.en section.work.w2 .title span::before {left: 4vw;}

section.work.w3 {margin-top: 3vw;}
section.work.w3 .title {font-size: 3.7vw; margin-top: 1vw; line-height: 100%; background-image: url(img/w3bg.jpg); margin-bottom: 25px; background-size: cover; background-position: center center;}
section.work.w3 .title span {padding-top: 7vw; padding-left: 3vw;}
section.work.w3 .title span::before {width: 8vw; height: 8vw; top: 2vw; left: -3.5vw;}

body.en section.work.w3 .title {font-size: 5.5vw;}

section.work.w4 {margin-top: 4vw;}
section.work.w4 .title {font-size: 5vw; margin-top: -6vw; background-image: url(img/w4bg.jpg); background-repeat: repeat; background-size: 50%; background-position: 0 0; animation: w4animate 20s linear infinite;}
section.work.w4 .title span {padding-top: 6vw; background-size: 200%;}
section.work.w4 .title span::before {width: 7vw; height: 7vw; top: 1vw; left: 2.5vw;}

body.en section.work.w4 .title {margin-top: -5vw; font-size: 7vw;}

section.work.w5 {margin-top: 13vw;}
section.work.w5 .title {font-size: 16vw; margin-top: -15vw; background-image: url(img/w5bg.jpg); margin-bottom: -30px;}
section.work.w5 .title span {font-size: 6vw; padding-top: 12vw; padding-right: 3vw;}
section.work.w5 .title span::before {top: 4vw; left: 3.5vw;}

body.en section.work.w5 {margin-top: 7vw;}
body.en section.work.w5 .title {font-size: 11vw; margin-top: -10vw; margin-bottom: -5px;}

section.work.w6 {margin-top: 3vw;}
section.work.w6 .title {font-size: 4.5vw; margin-top: 0; background-image: url(img/w6bg.jpg); margin-bottom: 10px; background-position: left center;}
section.work.w6 .title span {padding-top: 5vw;}
section.work.w6 .title span::before {width: 5vw; height: 5vw; top: .5vw; left: 1vw;}

section.work.w7 {margin-top: 11vw;}
section.work.w7 .title {font-size: 6.5vw; margin-top: -12.5vw; background-image: url(img/w7bg.jpg); background-position: center center;}
section.work.w7 .title span {padding-top: 6vw;}
section.work.w7 .title span::before {width: 8vw; height: 8vw; top: 1vw; left: 3vw;}

body.en section.work.w7 {margin-top: 3vw;}
body.en section.work.w7 .title {font-size: 9.5vw; margin-top: -4.5vw;}
body.en section.work.w7 .title span {padding-top: 7vw;}
body.en section.work.w7 .title span::before {left: 5vw;}

section.work.w8 {margin-top: 4vw;}
section.work.w8 .title {font-size: 3.6vw; margin-top: -5.5vw; background-image: url(img/w8bg.jpg); background-position: center center;}
section.work.w8 .title span {padding-top: 5vw;}
section.work.w8 .title span::before {width: 4vw; height: 4vw; top: .5vw; left: 2vw;}
section.work.w8 .title span::after {content:""; position: absolute; top: .5vw; left: -4.5vw; border-width: 4px; border-radius: 50%; border-style: solid; border-color: transparent #000 transparent transparent; width: 7vw; height: 7vw; display: block; transform: rotateZ(135deg);}
section.work.w8 .bio {padding-top: 15px}

body.en section.work.w8 .title {font-size: 5vw; margin-top: -1vw;}

section.work.w9 {margin-top: 6vw;}
section.work.w9 .title {font-size: 12vw; margin-top: -6vw; background-image: url(img/w9bg.jpg)}
section.work.w9 .title span::before {left: 7vw;}

body.en section.work.w9 .title {margin-top: -4vw;}

section.work.w10 {margin-top: 6vw;}
section.work.w10 .title {margin-top: -7vw; background-image: url(img/w10bg.jpg)}

section.work.w11 {margin-top: 11vw;}
section.work.w11 .title {font-size: 10vw; margin-top: -14vw; background-image: url(img/w11bg.jpg)}

body.en section.work.w11 {margin-top: 3vw;}
body.en section.work.w11 .title {margin-top: -5vw}

section.work.w12 {margin-top: 6vw;}
section.work.w12 .title {font-size: 13vw; margin-top: -8vw; background-image: url(img/w12bg.gif); background-position: -23vw -8vw;}
section.work.w12 .title span {line-height: 110%; background-position: bottom right;}

body.en section.work.w12 .title {font-size: 16vw; margin-top: -7vw; margin-bottom: -30px}
body.en section.work.w12 .title span::before {left: 7vw;}

section.work.w13 {margin-top: 3vw;}
section.work.w13 .title {font-size: 6vw; margin-top: 1vw; line-height: 100%; background-image: url(img/w13bg.jpg); margin-bottom: 25px; background-size: cover; background-position: center center;}
section.work.w13 .title span {padding-top: 9vw; padding-left: 4vw;}
section.work.w13 .title span::before {width: 8vw; height: 8vw; top: 3vw; left: -2vw;}

section.work.w14 {margin-top: 3vw;}
section.work.w14 .title {font-size: 3.7vw; margin-top: -6vw; background-image: url(img/w14bg.jpg); line-height: 120%; margin-bottom: 20px;}
section.work.w14 .title span {padding-top: 5vw; padding-right: 2.5vw;}
section.work.w14 .title span.down {padding-left: 2.5vw; padding-top: 6vw;}
section.work.w14 .title span::before {width: 5vw; height: 5vw; top: 1vw; left: 2.2vw;}
section.work.w14 .title span.down::before {top: 2vw; left: -1.3vw}

body.en section.work.w14 .title {margin-top: -3vw}

section.work.w15 {margin-top: 3vw;}
section.work.w15 .title {font-size: 6.3vw; margin-top: -5vw; background-image: url(img/w15bg.jpg);}
section.work.w15 .title span {padding-top: 8vw; padding-right: 2.5vw;}
section.work.w15 .title span::before {width: 10vw; height: 10vw; top: 1.5vw; left: 4vw;}

body.en section.work.w15 .title {margin-top: -7vw; font-size: 10vw;}
body.en section.work.w15 .title span {padding-right:0}

section.work.w16 {margin-top: 10vw;}
section.work.w16 .title {font-size: 8vw; margin-top: -13vw; background-image: url(img/w16bg.jpg); background-position: center 11%;}
section.work.w16 .title span {padding-right: 2vw;}
section.work.w16 .title span::before {top: 2vw; left: 4.5vw;}

body.en section.work.w16 {margin-top: 7vw;}
body.en section.work.w16 .title {margin-top: -8vw;}

section.work.w17 {margin-top: 3vw;}
section.work.w17 .title {font-size: 6vw; margin-top: -6.5vw; background-image: url(img/w17bg.gif); background-position: left 40%;}
section.work.w17 .title span {padding-top: 8vw; padding-right: 2.5vw;}
section.work.w17 .title span::before {top: 1vw; left: 3vw;}

section.work.w18 {margin-top: 6vw;}
section.work.w18 .title {font-size: 8vw; margin-top: -8vw; background-image: url(img/w18bg.gif)}
section.work.w18 .title span {padding-top: 9vw;}
section.work.w18 .title span::before {left: 4.5vw;}

body.en section.work.w18 .title span::before {left: 4vw}

section.work.w19 {margin-top: 3vw;}
section.work.w19 .title {font-size: 3.5vw; margin-top: -7vw; background-image: url(img/w19bg.jpg); background-position: left 40%;}
section.work.w19 .title span {padding-top: 8vw; padding-right: 3.5vw;}
section.work.w19 .title span::before {top: 1vw; left: 2vw;}

body.en section.work.w19 .title {background-position: left 20%; font-size: 4.5vw;}

section.work.w20 {margin-top: 5vw;}
section.work.w20 .title {font-size: 3.5vw; margin-top: -9vw; background-image: url(img/w20bg.jpg); background-position: left 40%;}
section.work.w20 .title span {padding-top: 8vw; padding-right: 4vw;}
section.work.w20 .title span::before {top: 1vw; left: 2vw;}

body.en section.work.w20 .title {font-size: 5.5vw; margin-top: -8vw;}

section.work.w21 {margin-top: 7vw;}
section.work.w21 .title {font-size: 7vw; margin-top: -10vw; background-image: url(img/w21bg.jpg)}
section.work.w21 .title span {padding-top: 9vw; padding-right: 3vw;}
section.work.w21 .title span::before {left: 4.5vw;}

body.en section.work.w21 .title {font-size: 8.5vw; margin-top: -9vw;}
body.en section.work.w21 .title span::before {top: 1vw; left: 5.5vw}

section.work.w22 {margin-top: 7vw;}
section.work.w22 .title {font-size: 6vw; margin-top: -10vw; background-image: url(img/w22bg.gif)}
section.work.w22 .title span {padding-top: 9vw; padding-right: 3vw;}
section.work.w22 .title span::before {left: 3.5vw; top: 1vw}

body.en section.work.w22 .title {font-size: 7vw; margin-top: -8vw;}

/* 2024 edition */

section.work.w23 {margin-top: 4vw;}
section.work.w23 .title {background-image: url(img/w23bg.jpg); background-position: 0% 57%; margin-top: -5vw;}

section.work.w24 {margin-top: 12vw;}
section.work.w24 .title {margin-top: -12vw; background-image: url(img/w24bg.jpg); background-position: 0 -56%; font-size: 9vw;}
section.work.w24 .title span {padding-top: 9vw;}

body.en section.work.w24 {margin-top: 17vw}
body.en section.work.w24 .title {margin-top: -22vw;}

section.work.w25 {margin-top: 3vw;}
section.work.w25 .title {font-size: 4vw; margin-top: 2vw; line-height: 100%; background-image: url(img/w25bg.jpg); margin-bottom: 25px; background-size: cover; background-position: center 30%;}

section.work.w26 {margin-top: 15vw;}
section.work.w26 .title {font-size: 5.5vw; margin-top: -18vw; line-height: 100%; background-image: url(img/w26bg.jpg); margin-bottom: 25px; background-size: cover; background-position: center -126%;}
section.work.w26 .title span {padding-top: 4vw;}
section.work.w26 .title span::before {left: 1vw; top: 0; width: 5vw; height: 5vw;}

body.en section.work.w26 {margin-top: 3vw}
body.en section.work.w26 .title {background-position: left top; margin-top: -2vw;}

section.work.w27 {margin-top: 2vw;}
section.work.w27 .title {font-size: 20vw; margin-top: -2vw; /*background-image: url(img/w27bg.jpg);*/ background-image: none; background-color: #000;}

section.work.w28 {margin-top: 6vw;}
section.work.w28 .title {font-size: 6.4vw; margin-top: -9vw; background-image: url(img/w28bg.gif); background-position: left 84%;}
section.work.w28 .title span {font-size: 10vw}
section.work.w28 .title span::before {left: 6vw; }

section.work.w29 {margin-top: 5vw;}
section.work.w29 .title {font-size: 5.5vw; margin-top: 0; background-image: url(img/w29bg.gif);     background-position: left 67%; margin-bottom: 2vw;}
section.work.w29 .title b {font-size: 8.3vw;}

section.work.w30 {margin-top: 9vw;}
section.work.w30 .title {font-size: 13vw; margin-top: -13vw; background-image: url(img/w30bg.jpg);}
section.work.w30 .title span {margin-left: -3vw; padding-top: 10vw;}

body.en section.work.w26 {margin-top: 3vw}
body.en section.work.w30 .title {margin-top: -12vw; font-size: 7vw;}
body.en section.work.w30 .title span {margin-left: 4vw;}

section.work.w31 {margin-top: 16vw;}
section.work.w31 .title {background-image: url(img/w31bg.jpg); font-size: 5.5vw; margin-top: -20vw;}
section.work.w31 .title span {padding-top: 7vw;}
section.work.w31 .title span::before {left: 3vw; top: 1vw; width: 8vw; height: 8vw;}

body.en section.work.w31 .title {margin-top: -16vw; font-size: 4.5vw;}
body.en section.work.w31 .title span::before {left: 2vw;}

section.work.w32 {margin-top: 15vw;}
section.work.w32 .title {background-image: url(img/w32bg.jpg); font-size: 5vw; margin-top: -18vw;}
section.work.w32 .title span {padding-top: 7vw;}
section.work.w32 .title span::before {left: 2vw; top: 1vw; width: 8vw; height: 8vw;}

body.en section.work.w32 {margin-top: 10vw;}
body.en section.work.w32 .title {margin-top: -10.5vw;}



footer {margin: 150px 3vw 20px; font-size: .75rem; border-top: 4px solid #000; display: flex; justify-content: space-between; flex-wrap: wrap;}
footer > div {text-align: left; padding: 30px 15px}
footer div div {display: flex; padding-top: 15px;}
footer div img {height: 50px; width: auto; margin-right: 50px;}
footer div.last img {margin-right: 0;}




.work-main {position: relative;}

.videoembed,
.pdflayout,
.photobook {width:100%; max-width: 1000px; margin: 80px 0; text-align: center;}
.pdflayout img {display: block; width: 100%; height: auto; margin-bottom: 10px;}
.pdflayout img.single {width: 50%; margin-left: auto; margin-right: auto;}
.photobook img {display: block; height: auto; max-width: 100%; margin-bottom: 20px;}

.triplet {margin: 80px 0; display: flex; justify-content: space-between;}
.triplet img {display: block; width: 32%;}

.duplet {display: flex; justify-content: space-between; align-items: center;}
.duplet img {display: block; width: 48% !important; height: fit-content !important}

.essay {width:100%; max-width: 1000px; margin: 80px 0; text-align: left; font-style: normal;}
.essay p {font-weight: 300; line-height: 160%; margin: 25px 0;}
.essay p.lettered::first-letter {font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 200%;}
.essay img {display: block; width: 100%; height: auto; margin-bottom: 10px; margin-top: 25px;}
.essay img.single {width: 60%; margin-left: auto; margin-right: auto;}
.essay p.caption {text-align: right; font-style: italic; font-size: 80%; padding-left: 20%; margin-top: 0;}
.essay p.caption.left {text-align: left; padding-left: 0; margin-top: -15px; margin-left: 20px;}
.essay p.caption strong.corner {display: inline-block; margin-top: 0; margin-left: 0; margin-right: -5px; border-width: 4px; border-radius: 50%; border-style: solid; border-color: transparent #000 transparent transparent; width: 30px; height: 30px; transform: rotateZ(135deg); top: 0; position: relative;}
.essay p.subheader {font-family: 'Montserrat', sans-serif; font-weight: 800; font-style: normal; font-size: 140%; line-height: normal; margin-top: 40px;}
.essay p.quote {font-style: italic; padding-left: 25px; border-left: 4px solid #000; margin-left: 20px; font-size: 90%;}
.essay p a {color:#000 !important; text-decoration: none !important; border-bottom: 4px solid #000;}
.essay p a:hover { border-bottom-color: transparent;}

.essay p.courier {font-family: 'Courier New', Courier, monospace;}
.essay p.subheader.courier strong {font-weight: normal;}
section.work .essay div.duo > div {max-width: none}

span.hint {border-bottom: 4px dotted #000; cursor: pointer; position: relative;}
span.hint:hover {border-bottom-color: transparent} 
span.hint .tip {display: none; position: absolute; z-index: 500; left:0; bottom: 100%; border:4px solid #000; border-radius: 20px; background-color: #fff; padding: 10px 15px; font-style: italic; font-size: 80%; line-height: normal; min-width: 200px; cursor: auto;}
span.hint.active .tip {display: block}

div.portrait {position: relative; max-width: 400px; margin-top: 20px; margin-bottom: 20px; overflow: hidden;}
div.portrait img {border-radius: 0 0 54px 0; width: 100%; display: block}
.portrait::before {content:""; position: absolute; z-index: 10000; bottom: 0; right: 0; border-width: 4px; border-radius: 50%; border-style: solid; border-color: transparent #000 transparent transparent; width: 100px; height: 100px; display: block; transform: rotateZ(45deg);} 
.portrait::after {content:""; position: absolute; z-index: 10000; bottom: 20px; right: 20px; border-width: 4px; border-radius: 50%; border-style: solid; border-color: transparent #000 transparent transparent; width: 200px; height: 200px; display: block; transform: rotateZ(45deg);} 

section.work.work-main.w1 .title {margin-top: -20vw; font-size: 13vw;}
section.work.work-main.w1 .title span {padding-top: 11vw;}
section.work.work-main.w1 .title span::before {left:8vw}

section.work.work-main.w5 .title {margin-top: -9vw; font-size: 24vw;}
section.work.work-main.w9 .title {font-size: 16vw;}
section.work.work-main.w10 .title {font-size: 16vw;}
section.work.work-main.w10 .title span::before {left: 9vw;}
section.work.work-main.w12 .title {font-size: 20vw;}
section.work.work-main.w12 .title span::before {left: 9vw;}

#logotitle { text-align: left; padding: 0 3vw; overflow: hidden;}
#logotitle strong.corner {display: inline-block; margin-top: -4vw; margin-left: 1.5vw; margin-right: -2vw; border-width: 4px; border-radius: 50%; border-style: solid; border-color: transparent #000 transparent transparent; width: 7vw; height: 7vw; transform: rotateZ(135deg); top: -0.7vw; position: relative;}

.w1 #logotitle { font-size: 15.3vw;}
.w1 #logotitle span::before {left: 9vw}

.w2 #logotitle { font-size: 10.5vw;}

.w3 #logotitle { font-size: 5.5vw; overflow: visible; padding-top:8vw}
.w3 .title span {padding-top: 9vw; padding-left: 2vw;}
.w3 .title span::before {width: 9vw; height: 9vw; top: 3.5vw; left: -4vw;}

.w4 #logotitle { font-size: 6.8vw;}
.w4 .title span {padding-top: 9vw;}
.w4 .title span::before {width: 9vw; height: 9vw; top: 2vw; left: 2.5vw;}

.w5 #logotitle { font-size: 19vw}
.w5 #logotitle span::before {left: 13vw}

.w6 #logotitle { font-size: 5vw; padding-top: 9vw;}

body.en .w6 #logotitle {font-size: 4.7vw;}

.w7 #logotitle { font-size: 7.7vw;}
.w7 .title span {padding-top: 9vw;}
.w7 .title span::before {left: 3vw;}

body.en .w7 #logotitle {font-size: 14vw;}
body.en .w7 .title span::before {left: 9vw;}

.w8 #logotitle {font-size: 3.7vw; padding-top: 8vw;}
.w8 .title span {padding-top: 5vw;}
.w8 .title span::before {width: 4vw; height: 4vw; top: .5vw; left: 2vw;}
.w8 .title span::after {content:""; position: absolute; top: .5vw; left: -4.5vw; border-width: 4px; border-radius: 50%; border-style: solid; border-color: transparent #000 transparent transparent; width: 7vw; height: 7vw; display: block; transform: rotateZ(135deg);}

body.en .w8 #logotitle {font-size: 5.3vw; padding-top: 80px;}

.w9 #logotitle { font-size: 24vw}
.w9 #logotitle span {padding-top: 16vw;}
.w9 #logotitle span::before {width: 16vw; height: 16vw; left: 14vw; top:4vw}

body.en .w9 #logotitle {font-size: 18vw; padding-top: 30px;}

.w10 #logotitle { font-size: 24vw; padding-top: 3vw;}
.w10 #logotitle span {padding-top: 15vw;}
.w10 #logotitle span::before {width: 17vw; height: 17vw; left: 14vw; top:3vw}

.w11 #logotitle { font-size: 13vw}
.w11 #logotitle span::before {left: 7vw}

body.en .w11 #logotitle { font-size: 11vw}

.w12 #logotitle { font-size: 27vw}
.w12 #logotitle span::before {width: 17vw; height: 17vw; left: 16vw;}
.w12 #logotitle span {padding-top: 14.5vw;}

body.en .w12 #logotitle span::before {left:19vw}

.w13 #logotitle { font-size: 6.5vw}
.w13 #logotitle span {padding-top: 8vw;}
.w13 #logotitle span::before {width: 7vw; height: 7vw; left: 3vw;}

body.en .w13 #logotitle {font-size: 7.5vw;}

.w14 #logotitle { font-size: 4.1vw; margin-bottom: 30px; text-align: center;}
.w14 #logotitle span {padding-top: 8vw; padding-right: 3vw}
.w14 #logotitle span::before {width: 9vw; height: 9vw; left: 2vw; top: 1vw;}

.w15 #logotitle { font-size: 6.5vw;}
.w15 #logotitle span {padding-top: 8vw}
.w15 #logotitle span::before {width: 8vw; height: 8vw; left: 3vw; top: 2vw}

body.en .w15 #logotitle {font-size: 12vw;}
body.en .w15 #logotitle span::before {left: 8vw}

.w16 #logotitle { font-size: 9.2vw}

body.en .w16 #logotitle { font-size: 13vw}

.w17 #logotitle { font-size: 6.2vw}
.w17 #logotitle span {padding-top: 8vw}
.w17 #logotitle span::before {width: 8vw; height: 8vw; left: 2.5vw; top: 1.5vw}

.w18 #logotitle { font-size: 12vw}
body.en .w18 #logotitle { font-size: 11vw}

.w19 #logotitle { font-size: 3.65vw; }
.w19 #logotitle span {padding-top: 6vw; padding-right: 2vw;}
.w19 #logotitle span::before {width: 7vw; height: 7vw; left: 2vw; top: 1vw;}

body.en .w19 #logotitle {font-size: 4.5vw;}

.w20 #logotitle { font-size: 5.5vw;}
.w20 #logotitle span {padding-right: 3vw; padding-top: 8vw;}
.w20 #logotitle span::before {left: 3vw; top:1vw}

body.en .w20 #logotitle {font-size: 7vw;}

.w21 #logotitle { font-size: 7.5vw;}
.w21 #logotitle span {padding-right: 1vw}
.w21 #logotitle span::before {left: 3vw;}

body.en .w21 #logotitle {font-size: 9vw;}
body.en .w21 #logotitle span {padding-top: 9vw; padding-right: 2vw}
body.en .w21 #logotitle span::before {left: 5vw; top: 1vw}

.w22 #logotitle { font-size: 6.3vw;}
.w22 #logotitle span {padding-top: 8vw; padding-right: 2vw;}
.w22 #logotitle span::before {width: 9vw; height: 9vw; left: 2.5vw; top: 1.5vw;}

body.en .w22 #logotitle {font-size: 9.2vw;}
body.en .w22 #logotitle span::before {left: 5.5vw;}

body.en .w24 #logotitle {font-size: 9vw;}

.w25 #logotitle {font-size: 4vw; padding-top: 6vw;}

.w26 #logotitle {font-size: 6vw;}
.w26 #logotitle span {padding-top: 6vw}
.w26 #logotitle span::before {left: 2vw; top: 0; width: 8vw; height: 8vw;}
body.en .w26 #logotitle {font-size: 7vw; padding-top: 6vw}

.w27 #logotitle {padding-top: 8vw}
.w27 #logotitle span.slash:before {width: 13vw; margin-bottom: 4vw;}

.w28 #logotitle {font-size: 6vw; padding-top: 6vw;}
.w28 #logotitle span {padding-top: 8vw}
.w28 #logotitle span::before {left: 2.5vw; top: 1vw;}

.w29 #logotitle {font-size: 5.5vw; padding-top: 6vw;}

.w30 #logotitle {padding-top: 6vw;}

.w31 #logotitle {font-size: 5.5vw}
.w31 #logotitle span {padding-top: 8vw}
.w31 #logotitle span::before {left: 2vw; top: 1vw;}
body.en .w31 #logotitle {font-size: 4.8vw}
body.en .w31 #logotitle span::before {left: 1vw; top: 0}

.w32 #logotitle {font-size: 5vw}
.w32 #logotitle span {padding-top: 7vw}
.w32 #logotitle span::before {left: 2vw; top: 1vw; width: 8vw; height: 8vw;}
body.en .w32 #logotitle {font-size: 8vw}
body.en .w32 #logotitle span::before {left: 5vw;}

section.work-main {padding-top: 0;} 
section.work-main div.subtitle .sub1 {font-size: 36px}

a.insta {background: url(img/instagram.svg) left center no-repeat; background-size: 25px 25px; padding-left: 30px; border-bottom: none !important}
a.insta span {border-bottom: 4px solid #000 !important}
a.insta:hover span {border-bottom-color: transparent !important}

section .calendar {display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: center; margin-bottom: 30px;}
section .calendar .vol {padding: 0 40px;}
section .calendar .vol p {font-size: 1.2vw; text-align: center; margin-bottom: -3vw;}
section .calendar .vol .title {font-size: 9vw}
section .calendar .vol a.title {font-size: 5vw}
section .calendar .vol a.title span {padding-top: 5vw;}
section .calendar .vol a.title span::before {width: 6vw; height: 6vw; left: 2.5vw; top: 1vw} 

.filters {margin: 0 20px; border: 4px solid #000; text-align: center; padding: 15px 0; max-width: 90%;}

.filters .subtitle {margin: 30px 0; padding: 0 15px; text-align: left; cursor: pointer; position: relative; font-size: 20px; display: block; user-select: none;}
.filters .subtitle .sub1 {align-self: normal; display: inline;}
.filters .subtitle::after {content: ""; display: inline-block; width: 20px; height: 20px; border-width: 4px; border-color: #000 #000 transparent transparent; border-style: solid; transform: rotateZ(135deg); margin-left: 25px; position: relative; top: -10px;}
.filters .subtitle.collapse::after {transform: rotateZ(-45deg); top: 10px}
.filters p {font-weight: 800; font-family: 'Rethink Sans', 'Montserrat', sans-serif; padding-top: 5px; padding-right: 20px;}

.filters .content {display: none; text-align: left; font-size: 16px; padding: 5px 15px}

.filters .content .group {padding-bottom: 10px; display: flex; flex-wrap: wrap;}
.filters .content .group label {display: block; cursor: pointer; margin-right: 20px; font-weight: 400;}
.filters .content .group label input {margin-right: 5px; width:20px; height: 20px; vertical-align: middle; cursor: pointer; }
.filters .content p::before {content:''; width: 80%; height: 15px; display: block; border-top:1px solid #000; margin: 0 auto;}
.filters .content p:first-child::before {display: none}

.filters .content .buttons {display: flex; flex-wrap: wrap; justify-content: center; padding: 20px 0;}
.filters .content .buttons > div {padding:10px 15px; margin: 0 15px;}
.filters .content .buttons .apply {background-color: transparent; color: #000; width: auto; cursor: pointer; border-radius: 6px; text-transform: uppercase; font-family: 'Rethink Sans', 'Montserrat', sans-serif; border: 4px solid #000;}
.filters .content .buttons .apply:hover {background-color: #000; color: #fff;}
.filters .content .buttons .simple {font-weight: 400;}
.filters .content .buttons .simple span {border-bottom: 2px dotted #000; cursor: pointer;}
.filters .content .buttons .simple:hover span {border-bottom-color: transparent;}

.filters .content.alt .buttons {display: flex; flex-wrap: wrap; justify-content: left; padding: 0 0 10px;}
.filters .content.alt .buttons > div.simple {padding:5px 15px 10px 0; margin: 0 15px 0 0; cursor: pointer;}
.filters .content .buttons .simple span {color: #000;}
.filters .content .buttons .simple.active {font-weight: 800; font-family: 'Montserrat', sans-serif; text-decoration: none; cursor: auto; color: #000;}
.filters .content .buttons .simple.active span {border-bottom: none; cursor: auto; color: #000; font-weight: 700;}
.filters .content .buttons .simple.inactive {cursor: auto;}
.filters .content .buttons .simple.inactive span {border-bottom: none; cursor: auto; color: #000;}
.filters .content.alt .buttons .apply {margin: 10px auto 5px;}

@media only screen and (max-width: 1220px) {
    .c {width: 100%; margin: 0;}
    .content {padding: 0 15px}
    footer p.asterisk {padding: 0 15px;}

    .panels .library .item.lastcall {display: block;}
}

@media only screen and (max-width: 900px) {

  header nav::before {display: none;}
  section div.maintext p {width: 70%; font-size: .75em}
  section div.maintext p.note strong.border {width: 36vw}
  section div.simpletext p {font-size: .75em}
  section div.subtitle .sub3 {font-size: 3.8vw;}
  section div.maintext {top: -40vw;}

  section.work div.subtitle .sub1 {font-size: 4vw;}
  section.work-main div.subtitle .sub1 {font-size: 28px}

  section.work .description {font-size: .75em; line-height: 150%; padding-left: 20vw;}
  section.work .description::before {width: 18vw;}
  section.work p.bio {font-size: 14px; line-height: 20px;}

  .essay p {line-height: 160%; margin: 20px 0; font-size: 16px;}
  .essay p.caption {padding-left: 10%;}
  .essay p.subheader {font-size: 125%; margin-top: 30px}
  .essay p.quote {font-size: 85%; margin-left: 10px;}

  .triplet {flex-direction: column;}
  .triplet img {width: 100%; margin-bottom: 20px;}

  .duplet {flex-direction: column; }
  .duplet img {width: 100% !important}

  .pdflayout.clearsingles img.single {width: 100%; margin-left: 0; margin-right: 0;}
  .essay img.single {width: 100%;}

  .filters .subtitle {margin: 20px 0;}
  .filters .subtitle::after {width: 10px; height: 10px; top: -5px;}
  .filters .content.alt .buttons > div.simple {padding: 5px 10px 5px 0; margin-right: 10px; font-size: 90%;}

  section #logotitle {padding-top:30px}
  .w2 #logotitle,
  .w5 #logotitle,
  .w18 #logotitle {padding-top:10px}
  .w3 #logotitle,
  .w19 #logotitle,
  .w6 #logotitle {padding-top:40px}

  body.en section.work.w12 .title {font-size: 20vw; margin-bottom: -10px;}
  body.en .w8 #logotitle {padding-top: 50px;}

  section.work.w5 .title {font-size: 26vw; margin-top: -8vw; margin-bottom: -20px;}
  section.work.w12 .title {font-size: 19vw; margin-top: -7vw; margin-bottom: -10px;}

    nav > a {display: none}

    .hamburger-container {
        display: flex;
        justify-content: space-between;
        height: 64px;
        align-items: center;
      }
      
      .menu-items {
        order: 2;
        display: flex;
      }
      
      .menu-items li {
        list-style: none;
        margin-left: 1.5rem;
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
      }
      
      .menu-items a {
        text-decoration: none;
        font-weight: 500;
        padding: 10px 10px 10px 0; color: #000; text-decoration: none; margin: 0 10px; white-space: nowrap; font-family: 'Merriweather', serif; font-style: italic; font-size: 12px;
        display: inline-block;
      }

      .menu-items a::first-letter {text-transform: uppercase; font-family: 'Rethink Sans', 'Montserrat', sans-serif; font-style: normal; font-weight: 800; font-size: 180%;}

      .menu-items a.separate {border-top: 4px solid #000; margin-top: 10px; padding-top: 20px;}


    .hamburger-container input[type="checkbox"],
    .hamburger-container .hamburger-lines {
      display: block;
    }

    .hamburger-container input[type="checkbox"] {
        position: absolute;
        display: block;
        height: 32px;
        width: 30px;
        top: 10px;
        left: 20px;
        z-index: 500;
        opacity: 0;
        cursor: pointer
      }
    
      .hamburger-container .hamburger-lines {
        display: block;
        height: 23px;
        width: 35px;
        position: absolute;
        top: 7px;
        left: 20px;
        z-index: 200;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    
      .hamburger-container .hamburger-lines .line {
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 0;
        background: #333;
      }
    
      .hamburger-container .hamburger-lines .line1 {
        transform-origin: 0% 0%;
        transition: transform 0.4s ease-in-out;
      }
    
      .hamburger-container .hamburger-lines .line2 {
        transition: transform 0.2s ease-in-out;
      }
    
      .hamburger-container .hamburger-lines .line3 {
        transform-origin: 0% 100%;
        transition: transform 0.4s ease-in-out;
      }

      .hamburger-container .menu-items {
        padding-top: 65px;
        background: #fff;
        height: 100vh;
        max-width: 300px;
        transform: translate(-150%);
        left: 0;
        top: -10px;
        padding-right: 30px;
        display: block;
        position: absolute;
        z-index: 100;
        flex-direction: column;
        margin-left: -40px;
        padding-left: 50px;
        transition: transform 0.5s ease-in-out;
        box-shadow: 5px 0px 10px 0px #aaa;
      }
    
      .hamburger-container .menu-items li {
        margin-bottom: 1.5rem;
        font-weight: 500;
      }

      /*.hamburger-container .menu-items li a {
        color: #fd4d4d; text-decoration: none; text-transform: uppercase; 
      }

      .hamburger-container .menu-items li a:hover {
        color: #fd4d4d; text-decoration: underline;
      }*/

      .hamburger-container input[type="checkbox"]:checked ~ .menu-items {
        transform: translateX(0);
      }
    
      .hamburger-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
        transform: rotate(35deg);
      }
    
      .hamburger-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
        transform: scaleY(0);
      }
    
      .hamburger-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
        transform: rotate(-35deg);
      }

      .menu-items li.active a {font-weight: 700; text-decoration: none !important}
      .menu-items li.active a::before {content:''; background-color: #fd4d4d; width: 20px; height: 14px; display: inline-block; margin-right: 5px;}


      footer {flex-wrap: wrap; flex-direction: column;}
      footer div div {flex-direction: column;}
      footer div img {height:35px; padding: 10px 0;}
      
}

@media only screen and (max-width: 600px) {
  section.work div.duo {flex-direction: column;}
  section.work div.duo > div {width: 100%; padding: 0 !important}

  .w25 #logotitle {padding-top: 12vw;}
  body.en .w26 #logotitle {padding-top: 9vw}
  .w27 #logotitle {padding-top: 13vw}
}

@media only screen and (max-width: 400px) {
  .logo {margin-left: 0; margin-right: 0; background-position: center right;}
  header {justify-content: flex-end;}
  .gallery .item {width: 100% !important;}
  section p.quote {margin-left: 0;}
}