* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


body {
    --body-text-font: sans-serif;
    --body-text-color: #000;
    --body-link-color: #000;
    --background-color: #fff;
    --submenu-link-color: #000;
    --submenu-background-color: #fff;
    --text-stroke-width: 0;
    --text-stroke-color: default;
    
	margin: 0;
	width: 100%;
	/* height: 100%; */
    font-family: var(--body-text-font);
    color: var(--body-text-color);
    background-color: var(--background-color);
    -webkit-text-stroke-width: var(--text-stroke-width);
    -webkit-text-stroke-color: var(--text-stroke-color);
}

body.viewing-fullwindow {
    height: 100vh;
    overflow: hidden;
}

p {
	margin: 0;
}

img, video {
	width: 100%;
	/* padding: 1em; */
  	/* filter: grayscale(100%); */
}

a:link,
a:visited {
    color: var(--body-link-color);
    text-decoration: none;
    -webkit-text-stroke-color: var(--text-stroke-color);
}

a[href$=".pdf"]::before {
    background-image: url('/media/svg/pdf-3-w.svg');
}

i {
    transform: skewX(-70deg);
}

header {
	position: relative;
	padding: 1em;
}

header.homepage {
	z-index: 10;
}

ul {
	list-style-type: none;
	padding-left: 1em;
	margin: 0px;
}

ul:first-child {
	padding-left: 0px;
}

blockquote {
    margin-block-start: 1em;
    margin-block-end: 1em;
    hanging-punctuation: first;
}

svg .st0 {
    /* .st0 is the default class for svg elements. at least for svgs exported from illustrator */
    stroke: var(--body-text-color);
}

/* ids */

#menu {
    min-height: 100%;
    background-color: var(--background-color);
    color: var(--body-text-color);
    position: fixed;
    width: 100vw;
    max-width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    display: none;
	padding: 20px;
}

#menu-222-bowery,
#menu-fiftieth {
    font-family: 'eurostile_extended_black', sans-serif;
    text-transform: uppercase;
    font-size: 88px;
    letter-spacing: -1px;
}

#menu-fiftieth {
    /* animation: blur-in .5s ease-out forwards; */
    animation: inflate .5s ease-out 2;
}

#menu-fiftieth-container {
    --horizontal-distance: 30vw;
    position: fixed !important;
    right: var(--horizontal-distance);
    transform: translate(50%, 50%);
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    z-index: 1000;
}

#menu-join-container {
    width: 300px;
    height: 400px;
    position: absolute;
    top:90%;
    left:50%;
    transform: rotateZ(6deg) translate(-50%,-50%);
    perspective:500px;
    cursor: pointer;
    z-index: 1000;
}

#menu-join-container .img {
    height: 33.33333333333333%;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
    overflow:hidden;
    transition:300ms;
    box-sizing:border-box;
    animation: flip .1s ease-out 5;
}

#menu-join-container .img img{
    position: absolute;
    max-width:300px;
}

#menu-join-container:hover .img {
    box-shadow:-40px 0 30px rgba(255,255,255,0.2);
}

#menu-gps-records {
    font-family: 'Univers', sans-serif;
}

#menu-dial-a-poem {
    font-family: 'Futura Std', sans-serif;
    font-size: 93px; 
    padding-top: 4px;
}

#menu-grants {
    font-family: 'ocr_x', monospace;
    line-height: 0.82;
}

#menu-john-giorno {
    font-family: 'new-century-schoolbook', serif;
    padding-top: 5px;
}

#breadcrumb {
    position: sticky;
    top: 20px;
    padding-left: 20px;
    margin-bottom: 160px;
    width: 880px;
    transition: opacity .25s;
    z-index: +1;
}

#breadcrumb img,
#grid .grid-item img {
    width: auto;
    height: 175px;  /* line-height? */
    margin: initial;
    margin-top: -40px;
    margin-bottom: -40px;
    opacity: 1.0 !important;
}

#home.body-container {
    width: initial;
}

#home ~ #breadcrumb {
    display: none;
}

#submenu {
    position: sticky;
    top: 20px;
}

#submenu.img { 
    /* ** fix ** */
    position: initial;
}

#submenu a > .button,
#next a > .button {
    position: relative;
    display: inline-block;
    left: 20px;
    width: 400px;
    height: 75px;
    margin-bottom: 14px;
    margin-right: 20px;
    border-radius: 25px;
    color: #FFF;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .25s;
    z-index: +2;
    background-color: var(--submenu-background-color);
}

#submenu a > .button:hover,
#next a > .button:hover {
    opacity: 0.5;
}

#submenu a > .button:active,
#next a > .button:active {
    opacity: 0.0;
}

#submenu a > .button .label,
#next a > .button .label {
    position: absolute; 
    bottom: 0px;
    width: 400px;
    padding: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: +1;
    color: var(--submenu-link-color);
    /* background-color: var(--submenu-background-color); */
}

#next a > .button {
    padding-right: 60px;
}

#submenu #children a > .button img {
    position: absolute;
    height: 400px;
    object-fit: cover;
    z-index: -1;
    display: none;
}

#submenu #children.img a > .button {
    height: 400px;
}

#submenu #children.img a > .button img {
    display: block;
}

#submenu #children.img a > .button .label {
    bottom: 0px;
    background-color: var(--submenu-background-color);
}

#submenu #children.no-txt a > .button .label {
    display: none;
}

#submenu #children.full-size a > .button {
    height: 618px;
}

#submenu #children.full-size a > .button img {
    height: auto;
    opacity: 1.0;
}

#submenu #children.no-txt a > .button .label {
    display: none;
}

#submenu #children.img .txt-only {
    position: relative;
    display: inline-block;
    left: 20px;
    width: 400px;
    height: auto;
    margin-bottom: 14px;
    margin-right: 20px;
    color: #FFF;
    white-space: initial;
    overflow: initial;
    text-overflow: initial;
}
   
#submenu #children.img .txt-only a > .button {
    display: initial;
    height: initial;
    left: initial;
    margin-right: initial;
    color: var(--body-link-color);
    background-color: initial;
}

#submenu #children.img div.no-img img {
    display: none;
}

#next {
    position: fixed;
    top: 20px;
    transition: opacity .25s;
}

#next a > .button {
    display: block;
}

#next a#next-up > .button .label::after,
#next a#go-back > .button .label::after {
    position: absolute;
    right: 20px;
    margin-top: 3px;
    content: "";
    height: 25px;
    width: 25px;
    background-size: 100%;
    background-repeat: no-repeat;
}

#next a#next-up > .button .label::after {
    background-image: url('/media/svg/arrow-right-3-w.svg');
}

#next a#go-back > .button .label::after {
    background-image: url('/media/svg/arrow-up-left-3-w.svg');
}

#nav a {
    color: inherit;
    position: relative;
    float: left;
    clear: both;
    /* display: block; */
}

/* #nav a:active {
    opacity: 0.0;
} */

/*
#nav a.highlight {
    opacity: 0.75;
}
*/

/*
#nav a.highlight:after {
    content:"";
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--body-text-color); 
    display:inline-block;
    margin: 10px;
}
*/

#nav a,
#submenu a {
    border-bottom: initial;
}

#dial-a-poem-call {
    position: sticky;
    top: 20px;
    left: 20px;
    padding: 18px 50px 13px 17px;
    border-radius: 25px;
    border: 3px solid;
    background-color: #060;
    color: #FFF;
    z-index: +2;
    opacity: 1.0;
}

#dial-a-poem-call.opacity {
    opacity: 0.0;
    pointer-events: none;
}

#dial-a-poem-call::after {
    margin-left: 10px;
    content: "";
    /* display:inline-block; */
    height: 25px;
    width: 25px;
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-image: url('/media/svg/phone-fill-w.svg');
    position: absolute;
    top: 15px;
    right: 15px;
}

#gps-supports {
    position: fixed;
    top: 10px;
    left: 10px;
    margin: 20px;
    z-index: 1000;
    width: 650px;
}

#and-more-information {
    position: sticky;
    margin: 20px;
    padding-left: 340px;
    top: 63px;
    width: 70vw;
    display: block;
}

#visit-our-store {
    position: sticky;
    margin: 20px;
    /* padding-left: 220px; */
    top: 100px;
    width: 70vw;
    display: block;
}

#twotwotwo-bowery-street {
    margin: auto;
    margin-top: 500px;
    margin-bottom: 200px;
    padding: 5px;
    width: 350px;
    background-color: #FFF;
}

#a-non-profit-tax-exempt-foundation {
    margin: auto;
    margin-top: 50vh;
    padding-bottom: 20px;
    width: 550px;
}

#badge-container {
	position: fixed;
	right: 30px;
    bottom: 30px;
    /* padding: 10px; */
    width: 150px;
    height: 150px;
    z-index: 1010;
}

#badge {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border-radius: 50%;
    cursor: pointer;
    transform: rotate(0deg);
    transition: transform 0.4s;
}

#date {
    float: right;
    padding: 20px;
    transform: rotate(345deg);
}

#content {
    padding: 1em;
}

#home {
    padding-top: 50px;
}
/* 
#home img {
    display: inline-block;
    float: left;
} */

#main .cover-img {
    margin-top: 75px;
    margin-bottom: 70px;
}

/*
#main .columns img {
    width: 75%;
    margin: auto;
}
*/

#main a > img,
#main .image-wrapper > img {
    display: block;
    opacity: 0.5;
    /* mix-blend-mode: multiply; */
}

#main .grid-item :not(.zoom) img {
    height: 400px;
    object-fit: cover;
}

#detail .grid-item :not(.zoom) img {
    width: inherit;
    height: inherit;
    object-fit: inherit;
}

#detail .grid-container {
    width: 400px;
}

#detail .grid-item {
    width: auto;
    display: block;
}

#detail .grid-item img {
    width: 100%;
    height: 300px;
    object-fit: contain;
    /* object-position: center; */
}

#detail .grid-item-container {
    position: fixed;
    top: 0px;
    left: 0px;
    margin: 0px;
}

#detail .grid-item .zoom {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    z-index: +1;
}

#headline {
    padding: 20px;
}

#notes {
    border-top: 1px solid #000;
    margin-top: 33px;
    padding-top: 10px;
    padding-bottom: 33vw;
}

#notes div {
    margin-bottom: 0px;
}

#notes a::before {
    padding-right: 10px;
    content: "";
    display:inline-block;
    height:20px;
    width:20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

#notes a[href$=".pdf"]::before {
    background-image: url('/media/svg/pdf-1-k.svg');
}

#notes a:not([href$=".pdf"])::before {
    background-image: url('/media/svg/arrow-up-right-1-k.svg');
}

#fullscreen {
	/* width: auto; */
	height: auto;
}

#fullscreen:-webkit-full-screen,
#f:-webkit-full-screen,
:-webkit-full-screen {
    position: fixed;
    top: 0px;
    left: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    box-sizing: border-box;
    background-color: #000;
    filter: initial;
}

#fullscreen:-ms-fullscreen,
:-ms-fullscreen {
	width: auto;
	height: auto;
	margin: auto;
  	filter: initial;
}

#logo-container {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 20px;
    transform: scale(1.25);
    z-index: 1500;
}

#logo {
    font-family: "franklin_gothic_stdno.2roman", sans-serif;
    font-size: 36px;
    line-height: 0.9;
    -webkit-text-stroke-width: 1px;
    text-align: left;
    border: 3px solid;
    border-radius: 30px;
    padding: 15px 15px 60px 15px;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

#foot {
    font-family: serif;
    font-weight: 700;
    padding-top: 200px;
    padding-bottom: 20px;
    text-align: center;
    font-size: 22px;
    line-height: 22px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

/* classes */

/* .mono {
    font-family: sf-mono, monaco, courier, monospace;
} */

.helvetica {
    font-family: Helvetica, sans-serif;
}

.new-century-schoolbook {
    font-family: new-century-schoolbook, serif;
    font-style: normal;
    -webkit-text-stroke-width: 0.05em;
}

.new-century-schoolbook i {
    font-family: new-century-schoolbook, serif;
    font-style: italic;
    -webkit-text-stroke-width: 0.05em;
}
.ocr_x {
    font-family: 'ocr_x', monospace;
    -webkit-text-stroke-width: 0;
}
.futura {
    font-family: 'Futura Std', sans-serif;
    -webkit-text-stroke-width: 0;
}
.center {
    text-align: center;
}

.white {
    color: #FFF;
}

.black {
    color: #000 !important;
}

.black a:hover {
    border-bottom: 4px solid;
}

.half {
    display: inline-block;
    width: 49%;
}

.centre {
	position: relative;
    top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.v-centre {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.h-centre {
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

.invisible {
    opacity: 0;
    pointer-events: none;    
}

.collapsed {
    opacity: 0.0;
    position: absolute;
}

.float-container:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
}
/* 
.make blockquote {
    margin-block-start: 15px;
    margin-block-end: 15px;
    margin-inline-start: 24px;
    margin-inline-end: 0px;
    font-size: 10px;
    line-height: 15px;
    text-indent: initial;
}
    
.make #columns {
    columns: 3;
    column-gap: 50px;
    width: 750px;
}

.make #about {
    margin-inline-start: 0;
    margin-inline-end: 0;
    border-top: inherit;
    padding-bottom: 0;
}

.make #about blockquote {
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin-top: 0px;
}

.make #about #print-or-download {
    display: none;
}

.make #notes {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
    font-size: 10px;
    line-height: 15px;
    break-inside: avoid;
}

.make #notes a::before {
    content: none;
}

.make #body {
	font-family: sf-text, Helvetica, Arial, sans-serif; 
    font-size: 12px;
    line-height: 15px;
    text-indent: 24px;
}

.make #body div {
    margin-bottom: 0px;
}

.make #body img {
    display: inline-block;
    margin-left: -24px;
}

.make #body div:first-of-type {
    text-indent: 0;
}

.make .skip-column {
    display: none;
}

.pdf #columns {
    columns: 100px 6;
}

.pdf #notes {
    padding-bottom: 22px;
} */

.grid-container {
    vertical-align: top;
    display: inline-block;
}

.grid-item {
    position: relative;
    width: 400px;
    margin: 20px;
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    border: 3px solid;
    border-radius: 7%;
}

#main .grid-item .caption {
    display: none;
}

#detail .grid-item .caption {
    text-align: center;
}

.grid-section-head {
    position: sticky;
    top: 20px;
    margin-left: -120px;
    padding: 10px;
    padding-left: 40px;
    width: 400px;
    background-color: #FF0;
    transform: rotate(-45deg);
}

.grid-section-head ~ section .grid-section-head {
    top: 90px;
}

.grid-section-head div {
    text-overflow: ellipsis;
    overflow: hidden; 
    white-space: nowrap;
    width: 220px;
    /* background-color: #00F; */
}
body.dark #menu{
    background-color: #000 !important;
    color: #000 !important;
}
#menu-fiftieth {
    position: relative;
    line-height: 1;
    z-index: 100;
}
body.dark #menu-fiftieth {
    display: none;
}
body.dark #menu-fiftieth-container.lit #menu-fiftieth {
    display: block;
    animation: blur-in .5s ease-out forwards;
}
#menu-fiftieth-container {
    transform: translate(50%, 50%) rotate(10deg);
    /* transition: filter .25s; */
}
#menu-fiftieth-container.lit {
    width: 200px;
    height: 200px;
}
#menu-fiftieth-background {
    opacity: 0;
    background-image: radial-gradient(#fff 5%, #66d 60%, #000 80%);  
    filter: blur(30px);
    position: absolute;
    z-index: 200;
    transition: filter 1s, transform 1s;
    width: 80%;
    height: 80%;
    border-radius: 50%;;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    pointer-events:none;
}   
#menu-fiftieth-container.lit #menu-fiftieth-background{
    opacity: 1;
    mix-blend-mode: multiply;
    filter: blur(5px);
    transform: translate(-50%, -50%) scale(1);
    animation: candle 4s forwards linear alternate-reverse infinite 1.5s;
}
.popper {
    position: fixed;
    pointer-events: none;
    font-size: 70px;
    z-index: 2000;
}
.balloon {
    position: fixed;
    cursor: default;
    transform: translate3d(0, 0, 0);
    z-index: 2000;
    line-height: 1;
    font-family: serif;
}
.balloon.ready {
    transform: translate3d(0, 100vh, 0);
}
.balloon.rising {
    transform: translate3d(0, 100vh, 0);
    animation: rise 2s linear;
}
.balloon.bouncing {
    /* transition: transform 1s;
    transition-timing-function: ease-out;
    animation: bounce-vertically .5s ease-out; */
    animation: bounce 1s ease-out forwards;
}
@keyframes blur-in {
    0% {
        /* opacity: 1; */
        filter: blur(10px);
    }
    100% {
        /* opacity: 1; */
        filter: blur(0px);
    }
}
@keyframes candle {
    0% {
        filter: blur(5px);
        transform: translate3d(-50%, -50%, 0) scale(1);
    }
    10% {
        filter: blur(10px);
        transform: translate3d(-50%, -50%, 0) scale(0.93);
    }
    25% {
        filter: blur(8px);
        transform: translate3d(-50%, -50%, 0) scale(0.97);
    }
    30% {
        filter: blur(8px);
        transform: translate3d(-50%, -50%, 0) scale(0.97);
    }
    40% {
        filter: blur(6px);
        transform: translate3d(-50%, -50%, 0) scale(1);
    }
    55% {
        filter: blur(14px);
        transform: translate3d(-50%, -50%, 0) scale(0.92);
    }
    65% {
        filter: blur(10px);
        transform: translate3d(-50%, -50%, 0) scale(0.95);
    }
    70% {
        filter: blur(12px);
        transform: translate3d(-50%, -50%, 0) scale(0.95);
    }
    85% {
        filter: blur(12px);
        transform: translate3d(-50%, -50%, 0) scale(0.95);
    }
    90% {
        filter: blur(7px);
        transform: translate3d(-50%, -50%, 0) scale(0.97);
    }
    100% {
        filter: blur(5px);
        transform: translate3d(-50%, -50%, 0) scale(1);
    }
}
@keyframes rise{
    0% {
        transform: translate3d(0, 100vh, 0);
    }
    20% {
        transform: translate3d(-10px, 80vh, 0);
    }
    60% {
        transform: translate3d(10px, 40vh, 0);
    }
    /* 50% {
        transform: translate3d(-10px, 50vh, 0);
    }
    70% {
        transform: translate3d(10px, 30vh, 0);
    }
    90% {
        transform: translate3d(-10px, 10vh, 0);
    } */
    100% {
        transform: translate3d(0, 0, 0);
    }
}
/* @keyframes bounce-vertically{
    0% {
        margin-top: 0px;
    }
    50% {
        margin-top: 20px;
    }
    100% {
        margin-top: 0px;
    }
} */
@keyframes bounce{
    0% {
        transform: translate3d(var(--balloon-bounce-begin), 0, 0);
        margin-top: 0px;
    }
    50% {
        /* transform: translate3d(calc(var(--balloon-x) / 2), 0, 0); */
        margin-top: 20px;
    }
    100% {
        transform: translate3d(var(--balloon-bounce-end), 0, 0);
        margin-top: 0px;
    }
}
@keyframes inflate {
    0% {            
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1.0);
    }
}
@keyframes flip {
    0% {
       transform:rotateX(180deg);
    }
    100% {
       transform:rotateX(0deg);
    }
}

/*
    css columns
    https://stackoverflow.com/questions/43814097/insert-column-break-in-css3-column
/*

/*
.columns {
    columns: 2 400px;
    column-gap: 40px;
}

.columns * {
  margin: 0;
}

.columns img {
    width: 100%;
}
    
.columns .column {
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}
*/


/* 
    inline-block columns
    (use flex box?)
*/

.columns .column {
    display: inline-block;
    width: 400px;
    vertical-align: top;
}

.column + .column {
    margin-left: 40px;
}

.rule + .columns {
    margin-bottom: 2em;
}

.rule {
    position: sticky;
    top: 20px;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: 2px solid #FFF;
}

/* use margin instead of <br> */
/*
.columns div {
    margin-bottom: 22px;
}
*/

.columns .break {
    break-after: column;
    margin-bottom: 0px;
}

/* systems */

/* 222-bowery */

body[system="222-bowery"] {
    --background-color: #006;
    --body-text-font: 'eurostile_extended_black', sans-serif;
    --body-text-color: #FC0;
    --body-link-color: #FC0;
    --submenu-link-color: #006;
    --submenu-background-color: #FC0;
}

body[system="222-bowery"] #breadcrumb.full-width {
    width: 95vw;
}

body[system="222-bowery"] #breadcrumb b {
    font-weight: normal;
    color: #FFF;
}

body[system="222-bowery"] #breadcrumb .large {
    text-transform: uppercase;
    font-size: 88px;
    line-height: 0.98;
    letter-spacing: -1px;
}

body[system="222-bowery"] .medium {
    font-size: 28px;
    line-height: 1.2;
}

body[system="222-bowery"] .small {
    font-size: 22px;
    line-height: 1.2;
}

body[system="222-bowery"] #submenu a,
body[system="222-bowery"] #next a {
    text-transform: uppercase;
    letter-spacing: -1px;
}

body[system="222-bowery"] b {
    text-transform: uppercase;
    color: #FC0;
    margin-top: initial;
    display: inline;
}

body[system="222-bowery"] .columns ~ .columns {
    font-family: 'eurostile_regular', sans-serif; 
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: initial;
}

/* gps-records */

body[system="gps-records"]{
    --background-color: #F30;
    --body-text-font: 'Univers', sans-serif;
    --body-text-color: #03F;
    --body-link-color: #03F;
    --submenu-link-color: #F30;
    --submenu-background-color: #03F;
}

body[system="gps-records"] #submenu a > .button .label,
body[system="gps-records"] #next a > .button .label {
    bottom: 2px;
}

/* dial-a-poem */

body[system="dial-a-poem"]{
    --background-color: #060;
    --body-text-font: 'Futura Std', sans-serif;
    --body-text-color: #C0C;
    --body-link-color: #C0C;
    --submenu-link-color: #060;
    --submenu-background-color: #C0C;
}

body[system="dial-a-poem"] #breadcrumb .large {
    font-size: 94px; 
}

body[system="dial-a-poem"] .small,
body[system="dial-a-poem"] .medium {
    line-height: 1.2;
}

body[system="dial-a-poem"] #submenu a > .button .label,
body[system="dial-a-poem"] #next a > .button .label {
    bottom: -4px;
}

body[system="dial-a-poem"] #next a#next-up div::after,
body[system="dial-a-poem"] #next a#go-back div::after {
    margin-top: 3px;
}

/* grants */

body[system="grants"] {
    --background-color: #606;
    --body-text-font: 'ocr_x', monospace;
    --body-text-color: #F90;
    --body-link-color: #F90;
    --submenu-link-color: #606;
    --submenu-background-color: #F90;
}

body[system="grants"] #breadcrumb .large {
    font-family: 'ocr_x', monospace;
    font-size: 102px;
    line-height: 0.82;
}

body[system="grants"] .small {
    font-size: 22px;
    line-height: 1.25;
}

body[system="grants"] .medium {
    font-size: 30px;
    line-height: 1.25;
}

body[system="grants"] #submenu a > .button .label,
body[system="grants"] #next a > .button .label {
    bottom: -2px;
}

body[system="grants"] #next a#next-up div::after,
body[system="grants"] #next a#go-back div::after {
    margin-top: 1px;
}

/* john-giorno */

body[system="john-giorno"] {
    --body-text-font: 'new-century-schoolbook', serif;
    --body-text-color: #9F3;
    --body-link-color: #9F3;
    --background-color: #303;
    --submenu-link-color: #303;
    --submenu-background-color: #9F3;
}

body[system="john-giorno"] #breadcrumb .large {
    font-family: 'new-century-schoolbook', serif;
}

body[system="john-giorno"] .medium {
    font-size: 28px;
    -webkit-text-stroke-width: 1.0px;
}

body[system="john-giorno"] #submenu a > .button .label,
body[system="john-giorno"] #next a > .button .label {
    bottom: 2px;
}

body[system="membership"] {
    --background-color: #FC0;
}

/* default */

body[system="default"],
body[system="store"] {
    --body-text-color: #000;
    --background-color: #FFF;
    font-family: new-century-schoolbook, serif;
    font-style: normal;
    -webkit-text-stroke-width: 0.05em;
}
body[system="default"].membership,
body[system="default"].support,
body[system="default"].donate {
    --background-color: #FC0;
}

body[system="default"] .body-container a,
body[system="store"] .body-container a {
    color: #C00;
}
body[system="default"] .body-container a.shop-btn,
body[system="store"] .body-container a.shop-btn {
    color: #000;
}
form.shop-btn {
    position: relative;
}
form.shop-btn input[type="image"] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
}
body[system="default"].membership .body-container a.paypal-button {
    color: #000;
}
body[system="default"].support .body-container a.paypal-button {
    color: #fff;
}
body[system="default"] #breadcrumb {
    display: none;
}
body[system="default"].support #breadcrumb,
body[system="default"].membership #breadcrumb {
    display: block;
}   
body[system="default"].support #next,
body[system="default"].membership #next {
    display: none;
}

body[system="default"] .rule {
    border-top: 1px solid #000;
}

body[system="default"] .body.medium,
body[system="store"] .body.medium {
    font-size: 28px;
    -webkit-text-stroke-width: 1.0px;
}

body[system="default"] .white {
    color: #000;
}
body[system="default"].support .white {
    color: #fff;
}
body[system="store"] {
    --submenu-link-color: #fff;
    --submenu-background-color: #000;
}







.viewing-menu,
.viewing-submenu {
    max-height: 100vh;
    overflow: hidden;
}

.viewing-menu #menu,
.viewing-submenu #submenu {
    display: block;
}

.viewing-menu #badge-submenu[submenu="3"],
.viewing-submenu #badge{
    display: none;
}

.viewing-menu #badge {
    /* transform: rotate(405deg); */
    transform: rotate(315deg);
    transition: transform 0.4s;
}

.headline {
    font-weight: 700;
    letter-spacing: -5px;
    -webkit-text-stroke-width: 2px;
}

.small,
.small input,
input.small {
    font-size: 24px;
    line-height: 1.1;
}

.medium,
.medium input,
input.medium {
    font-size: 32px;
    line-height: 1.05;
}

.large {
    font-size: 96px;
    line-height: 0.98;
}

.caps {
    text-transform: uppercase;
}

.text-box { 
    margin: 20px;
}

.text-box.right { 
    float: right; 
    padding-right: 40px; 
    padding-left: 0;
}

.text-column { 
    width: 400px;
    margin: 20px;
    padding: 20px;
    vertical-align: top;
    display: inline-block;
}

.clear.left {
    clear: left;
}

.clear.right {
    clear: right;
}

.body-container:empty {
    display: none;
}

.cover-img:empty {
    display: none;
}

.text-box:empty {
    display: none !important;
}

.body-container,
.grid-container,
.nav-container {
    width: 880px;
}

.body-container.center > .text-box {
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

.body-container.center {
    text-align: center;
}

.body-container img {
    /* width: 75%; */
    margin: 0 auto;
    /* display: block; */
}

.artwork-section {
    float: left;
}

.artwork-section-title {
    text-align: center;
    margin: 2em 0;
}
.artwork-section:first-of-type .artwork-section-title {
    margin-top: 0;
}

.page-info-container {
    margin-bottom: 36px;
}

.caption,
blockquote {
    margin-top: 1em;
    margin-bottom: 1.5em;
    margin-left: 40px;
    margin-right: 40px;
    font-size: 16px;
    line-height: 1.2;
}

.figure {
    margin-bottom: 1em;
}

.caption.page-meta,
.caption.page-content {
    text-align: left;
    margin-top: 5px;
}

.caption.page-content {
    margin-top: 23px;
}

.artwork-section-title.single-line,
.books-and-records-section-title.single-line {
    text-align: center;
}

.alternative-columns-container .body:nth-of-type(2n-1){
    float: right;
    padding-right: 40px;
    padding-left: 0;
}

.alternative-columns-container .body:nth-of-type(2n){
    float: left;
}

.list-row
{
    display: flex;
}
.list-row-index
{
    flex: 0 0 9em;
}
.list-row-content
{
    flex: 1;
}
.list-row + .list-row
{
    margin-top: 0.5em;
}
.list-row + .list-row.list-row-singleLine
{
    margin-top: 1em;
    margin-bottom: 1em;
}

.transparent {
    background-color: transparent;
}
.no-select {
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard syntax */
}
#buy-buttons-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    font-size: 36px;
    /* min-width: 240px; */
}
.buy-button {
    /* display: inline-block; */
    padding: 25px;
    border-radius: 30px;
    cursor: pointer;
    border: 3px solid;
    -webkit-text-stroke-width: 1.0px;
    min-width: 240px;
    text-align: center;
    float: left;
    clear: both;
}
.buy-button + .buy-button {
    margin-top: 10px;
}
.buy-button span {
    content: "";
    width: 1.1em;
    height: 1.1em;
    vertical-align: bottom;
    display: inline-block;
    margin-left: 5px;
    background-size: 100%;
    background-position: center;
}

body[system="gps-records"] .buy-button span {
    background-image: url("/media/svg/arrow-up-right-3-b.svg");
}

body[system="john-giorno"] .buy-button span {
    background-image: url("/media/svg/arrow-up-right-3-g.svg");
}

body[system="222-bowery"] .buy-button span {
    background-image: url("/media/svg/arrow-up-right-3-y.svg");
}

#home-footer {
    font-family: Helvetica, sans-serif;
    position: absolute;
    bottom: 20px;
}


.home-footer-item {
    display: inline-block;
}
.home-footer-item-about {
    display: none;
}
.home-footer-item {
    /* font-size: 24px; */
    margin-right: 20px;
}

input[type="text"],
input[type="email"] {
    font-family: var(--body-text-font);
    color: var(--body-text-color);
    padding: 8px 10px; 
    background-color: transparent;
    border: none;
    border-bottom: 3px solid;
    width: 360px;
    max-width: 80vw;
}

input:focus {
    outline: none;
    /* background-color: #fff; */
}

button[type="submit"] {
    cursor: pointer;
    font-size: inherit;
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    background-image: url('../../media/svg/arrow-up-right-3-k.svg');
    background-size: cover;
    background-color: transparent;
    border: none;
    margin-top: 5px;
    /* border-bottom: none; */
}

button[type="submit"]:hover {
    background-color: var(--body-link-color);
    background-image: url('../../media/svg/arrow-up-right-3-w.svg');
    border-color: var(--body-link-color);
}

button[type="submit"]:hover .st0{
    stroke: var(--background-color);
}

.image-wrapper + .image-wrapper{
    margin-top: 1.5em;
}

.sticky-pad {
    display: block;
    height: 95vh;
    /*
    background-color: #FF0;
    opacity: 0.5;
    */
}
.buy-button-wrapper a {
    display: inline-block;
    text-align: center;
    min-width: 200px;
    padding: 12px 17px 12px 17px;
    border-radius: 25px;
    border: 3px solid;
    /* background-color: #060; */
    color: #FFF;
    /* z-index: +2; */
    opacity: 1.0;
}
#subForm {
    display: inline-block;
    margin-top: 1em;
}
#subForm input[type="email"] {
    vertical-align: top;
}
.shop-btn {
    /* font-size: 36px; */
    line-height: 0.9;
    -webkit-text-stroke-width: 1px;
    font-family: "franklin_gothic_stdno.2roman", sans-serif;
    padding: 25px;
    border: 3px solid;
    border-radius: 30px;
    cursor: pointer;
    background-color: transparent;
    display: inline-block;
}
.shop-btn:hover {
    opacity: 0.5
}
span.shop-btn{
    cursor: auto;
}
span.shop-btn:hover {
    opacity: 1;
}
.shop-btn.medium .dollar-sign {
    -webkit-text-stroke-width: 0;
}
.paypal-button {
    -webkit-text-stroke-width: 0;
}
body[system="default"].support form {
    mix-blend-mode: darken;
}
body.donate .shop-btn {
    margin-right: 10px;
    margin-bottom: 10px;
}
body.donate .shop-btn {
    
}

/* vertical iPad / horizontal iPhone */
@media screen and (max-width: 900px) {

    .body-container,
    .grid-container,
    .nav-container {
        width: auto;
    }

    #menu {
        top: 0;
        bottom: 0;
        overflow-y:scroll;
        overflow-x:hidden;
        padding-bottom: 200px;
    }

    #home-footer {
        position: fixed;
    }

    #logo-container {
        display: none;
    }

    body #breadcrumb {
        width: auto;
        margin-right: 20px;
    }

    .column + .column {
        margin-left: 20px;
    }

    .columns .column {
        width: calc(50% - 10px);
    }

    #columns .break {
        break-after: initial;
        margin-bottom: -22px;
    }

    .artwork-section {
        padding-left: 1em;
        padding-right: 1em;
    }
}
@media screen and (max-width: 838px) { 
    body.donate .shop-btn {
        float: left;
        clear: both;
    }
}

/* vertical iPhone */
@media screen and (max-width: 500px) {

    /* ids */

    #logo-container {
        display: none;
    }

    #home~#logo-container {
        display: block;
    }

    #badge-container {
        right: 20px;
        bottom: 20px;
        width: 120px;
        height: 120px;
    }
    #gps-supports {
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
    }

    #home img {
        display: block;
        clear: left;
        width: 100% !important;
    }

    #menu-222-bowery,
    #menu-fiftieth {
        font-size: 55px;
    }

    #menu-join-container {
        width: 200px;
        height: 270px;
    }

    #menu-gps-records {
        padding-top: 3px;
    }

    #menu-dial-a-poem {
        font-size: 56px;
        padding-top: 5px;
    }

    #menu-grants {
        font-size: 64px;
    }

    #submenu a, 
    #next a {
        background-color: transparent;
    }

    #submenu a > .button, 
    #next a > .button {
        height: 66px;
        width: 90vw;    /* fallback */
        width: calc(100vw - 40px);        
    }

    #submenu #children.full-size a > .button {
        background-color: transparent;
    }

    #next a > .button {
        width: auto;
        left: 0;
    }

    #next a > .button .label {
        width: 100%;
    }

    #next {
        width: 100%;
        padding-left: 20px;
    }

    #main .cover-img {
        margin-top: 100px;
        margin-bottom: 50px;
    }

    #a-non-profit-tax-exempt-foundation {
        text-align: left;
        padding: 20px;
        width: calc(100vw - 150px);
        margin-left: 0;
        margin-right: 0;
    }

    /* systems */

    body[system="222-bowery"] #breadcrumb .large {
        font-size: 55px;
    }

    /*
    body[system="222-bowery"] #breadcrumb {
        padding-right: 0;
    }
    */

    body[system="222-bowery"] .small,
    body[system="222-bowery"] .medium {
        font-size: 20px;
    }

    body[system="222-bowery"] #next a#next-up > .button .label::after,
    body[system="222-bowery"] #next a#go-back > .button .label::after {
        margin-top: -2px;
    }

    body[system="gps-records"] #submenu a > .button .label,
    body[system="gps-records"] #next a > .button .label {
        bottom: 1px;
    }

    body[system="gps-records"] #next a#next-up > .button .label::after,
    body[system="gps-records"] #next a#go-back > .button .label::after {
        margin-top: -1px;
    }

    body[system="dial-a-poem"] #breadcrumb .large {
        font-size: 56px;
    }

    body[system="dial-a-poem"] #next a#next-up > .button .label::after,
    body[system="dial-a-poem"] #next a#go-back > .button .label::after {
        margin-top: -1px;
    }

    body[system="dial-a-poem"] #submenu a > .button .label,
    body[system="dial-a-poem"] #next a > .button .label {
        bottom: -2px;
    }

    body[system="grants"] #breadcrumb .large {
        font-size: 64px;
        line-height: 0.82;
    }

    body[system="grants"] .small,
    body[system="grants"] .medium {
        font-size: 22px;
    }

    body[system="grants"] #next a#next-up > .button .label::after,
    body[system="grants"] #next a#go-back > .button .label::after {
        margin-top: -2px;
    }

    body[system="grants"] #submenu a > .button .label,
    body[system="grants"] #next a > .buttom .label {
        bottom: -1px;
    }

    body[system="john-giorno"] .small,
    body[system="john-giorno"] .medium {
        font-size: 21px;
        -webkit-text-stroke-width: 0.5px;
    }

    body[system="john-giorno"] #next a#next-up > .button .label::after,
    body[system="john-giorno"] #next a#go-back > .button .label::after {
        margin-top: 0px;
    }

    body[system="john-giorno"] #submenu a > .button .label,
    body[system="john-giorno"] #next a > .button .label {
        line-height: initial;
        bottom: initial;
    }

    /* classes */

    .columns .column {
        display: block;
        width: auto;
    }

    .column + .column {
        margin-left: 0;
        margin-top: 1.1em;
    }

    .grid-item {
        width: 100%;
        margin: initial;
    }

    #main .grid-item :not(.zoom) img {
        width: 100%;
        height: 100%;
    }

    .body-container,
    .grid-container,
    .nav-container {
        width: initial;
    }

    .body-container img {
        width: 100%;
        margin: 0 auto;
    }

    .grid-container {
        display: block;
    }

    .text-box {
        width: initial;
    }

    .small,
    .medium {
        font-size: 24px;
    }

    .large {
        font-size: 60px;
    }

    .hyphens {
        hyphens: auto;
    }

    .home-footer-item {
        display: block;
    }

    .home-footer-item + .home-footer-item {
        margin-top: 5px;
        margin-left: 0;
    }
    input[type="email"] {
        width: calc(100% - 36px);
    }
    #subForm {
        display: block;
    }
    body.donate .shop-btn {
        float: none;
        /* clear: both; */
    }
}

/* print (currently printing works best in chrome) */
@media print { 
    main {
        /* padding-top: 20px; */
        padding-bottom: 40px;
    }
    #content.make,
    .make #columns {
        padding: 0px;
    }
    .white,
    .buy-button-wrapper a {
        color: #000000;
    }
    #submenu, 
    .sticky-pad,
    #next,
    #cart-container,
    #cart-toggle  {
        display: none;
    }
    #a-non-profit-tax-exempt-foundation {
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 12px;
        -webkit-text-stroke-width: 0.02em;
    }
    #logo-container {
        transform: scale(1);
        top: 0;
        right: 0;
        padding: 0;
    }
    #breadcrumb {
       position: static;
       opacity: 1 !important;
    }
    #breadcrumb,
    .body-container, 
    .grid-container, 
    .nav-container,
    [data-store-layout="detail"] #product-container .columns {
        width: calc(100% - 8cm);
    }
    [data-store-layout="detail"] #product-container .columns {
        column-gap: 2cm;
    }
    .columns .column,
    .grid-item {
        width: calc(50% - 1cm);
    }
    .grid-item {
        margin-left: 0;
        margin-right: 0;
    }
    .column + .column,
    .grid-item:nth-child(2n) {
        margin-left: 2cm;
    }
    #badge-container {
        right: 0;
        bottom: 0;
    }
    .rule {
        position: static;
        border-color: #000;
    }
    .small, 
    .small input, 
    input.small
    {
        font-size: 16px;
    }
    .medium, 
    .medium input, 
    input.medium {
        font-size: 22px;
    }
    
}