@font-face {
            font-family: 'Attendant Medium';
            src: url(../fonts/Retail/Attendant/Attendant0.3-Medium.woff2);
        }

        @font-face {
            font-family: 'Quadrant Text';
            src: url(../fonts/Retail/QuadrantText/QuadrantText-Regular.woff2);
        }

        @font-face {
            font-family: 'Quadrant Text Regular Italic';
            src: url(../fonts/Retail/QuadrantText/QuadrantText-RegularItalic.woff2);
        }

        @font-face {
            font-family: 'Quadrant Text Mono Regular';
            src: url(../fonts/Retail/QuadrantTextMono/QuadrantTextMono-Regular.woff2);
        }

        @font-face {
            font-family: 'Quadrant Text Mono Regular Italic';
            src: url(../fonts/Retail/QuadrantTextMono/QuadrantTextMono-RegularItalic.woff2);
        }

        @font-face {
            font-family: 'Quadrant Slab Duo Thin';
            src: url(../fonts/Retail/QuadrantSlab/QuadrantSlabDuo-Thin.woff2);
        }

        @font-face {
            font-family: 'Quadrant Slab Duo Thin Italic';
            src: url(../fonts/Retail/QuadrantSlab/QuadrantSlabDuo-ThinItalic.woff2);
        }

        @font-face {
            font-family: 'Turnery Regular';
            src: url(../fonts/Retail/Turnery/Turnery-Regular.woff2);
        }

        @font-face {
            font-family: 'Turnery Regular Italic';
            src: url(../fonts/Retail/Turnery/Turnery-RegularItalic.woff2);
        }

        @font-face {
            font-family: 'Turnery Medium';
            src: url(../fonts/Retail/Turnery/Turnery-Medium.woff2);
        }

        @font-face {
            font-family: 'Turnery Bold';
            src: url(../fonts/Retail/Turnery/Turnery-Bold.woff2);
        }

        @font-face {
            font-family: 'Cassette Hairline';
            src: url(../fonts/Retail/Cassette/CassetteB-Hairline.otf);
        }

        @font-face {
            font-family: 'Cassette Light';
            src: url(../fonts/Retail/Cassette/CassetteB-Light.otf);
        }

        @font-face {
            font-family: 'Cassette Regular';
            src: url(../fonts/Retail/Cassette/CassetteB-Regular.otf);
        }

        @font-face {
            font-family: 'Cassette Medium';
            src: url(../fonts/Retail/Cassette/CassetteB-Medium.otf);
        }

        @font-face {
            font-family: 'Cassette Bold';
            src: url(../fonts/Retail/Cassette/CassetteB-Bold.otf);
        }

        @font-face {
            font-family: 'Cassette Black';
            src: url(../fonts/Retail/Cassette/CassetteB-Black.otf);
        }











        @font-face {
            font-family: 'Recollection Banner Hairline';
            src: url(../fonts/Retail/Recollection/RecollectionBannerTrial-Hairline.otf);
        }

        @font-face {
            font-family: 'Recollection Banner Thin';
            src: url(../fonts/Retail/Recollection/RecollectionBannerTrial-Thin.otf);
        }

        @font-face {
            font-family: 'Recollection Banner Light';
            src: url(../fonts/Retail/Recollection/RecollectionBannerTrial-Light.otf);
        }

        @font-face {
            font-family: 'Recollection Banner Regular';
            src: url(../fonts/Retail/Recollection/RecollectionBannerTrial-Regular.otf);
        }

        @font-face {
            font-family: 'Recollection Banner Medium';
            src: url(../fonts/Retail/Recollection/RecollectionBannerTrial-Medium.otf);
        }

        @font-face {
            font-family: 'Recollection Banner Bold';
            src: url(../fonts/Retail/Recollection/RecollectionBannerTrial-Bold.otf);
        }

        @font-face {
            font-family: 'Recollection Banner Extrabold';
            src: url(../fonts/Retail/Recollection/RecollectionBannerTrial-Extrabold.otf);
        }

        @font-face {
            font-family: 'Recollection Banner Black';
            src: url(../fonts/Retail/Recollection/RecollectionBannerTrial-Black.otf);
        }




        @font-face {
            font-family: 'Recollection Disp Thin';
            src: url(../fonts/Retail/Recollection/RecollectionDisplayTrial-Thin.otf);
        }

        @font-face {
            font-family: 'Recollection Disp Light';
            src: url(../fonts/Retail/Recollection/RecollectionDisplayTrial-Light.otf);
        }

        @font-face {
            font-family: 'Recollection Disp Regular';
            src: url(../fonts/Retail/Recollection/RecollectionDisplayTrial-Regular.otf);
        }

        @font-face {
            font-family: 'Recollection Disp Medium';
            src: url(../fonts/Retail/Recollection/RecollectionDisplayTrial-Medium.otf);
        }

        @font-face {
            font-family: 'Recollection Disp Bold';
            src: url(../fonts/Retail/Recollection/RecollectionDisplayTrial-Bold.otf);
        }

        @font-face {
            font-family: 'Recollection Disp Extrabold';
            src: url(../fonts/Retail/Recollection/RecollectionDisplayTrial-Extrabold.otf);
        }

        @font-face {
            font-family: 'Recollection Text Light';
            src: url(../fonts/Retail/Recollection/RecollectionTextTrial-Light.otf);
        }

        @font-face {
            font-family: 'Recollection Text Regular';
            src: url(../fonts/Retail/Recollection/RecollectionTextTrial-Regular.otf);
        }

        @font-face {
            font-family: 'Recollection Text Medium';
            src: url(../fonts/Retail/Recollection/RecollectionTextTrial-Medium.otf);
        }

        @font-face {
            font-family: 'Recollection Text Bold';
            src: url(../fonts/Retail/Recollection/RecollectionTextTrial-Bold.otf);
        }
        
        @font-face {
            font-family: 'Recollection Mono Light';
            src: url(../fonts/Retail/Recollection/RecollectionMono-Light.woff2);
        }

        @font-face {
            font-family: 'Recollection Mono Regular';
            src: url(../fonts/Retail/Recollection/RecollectionMono-Regular.woff2);
        }

        @font-face {
            font-family: 'Recollection Mono Medium';
            src: url(../fonts/Retail/Recollection/RecollectionMono-Medium.woff2);
        }

        @font-face {
            font-family: 'Recollection Mono Bold';
            src: url(../fonts/Retail/Recollection/RecollectionMono-Bold.woff2);
        }

        @font-face {
            font-family: 'Article Text Light';
            src: url(../fonts/Retail/Article/ArticleText-Light.otf);
        }

        @font-face {
            font-family: 'Article Text Light Italic';
            src: url(../fonts/Retail/Article/ArticleText-LightItalic.otf);
        }

        @font-face {
            font-family: 'Article Text Regular';
            src: url(../fontsRetail//Article/ArticleText-Regular.otf);
        }

        @font-face {
            font-family: 'Article Text Regular Italic';
            src: url(../fonts/Retail/Article/ArticleText-RegularItalic.otf);
        }

        @font-face {
            font-family: 'Article Text Medium';
            src: url(../fonts/Retail/Article/ArticleText-Medium.otf);
        }

        @font-face {
            font-family: 'Article Text Medium Italic';
            src: url(../fonts/Retail/Article/ArticleText-MediumItalic.otf);
        }

        @font-face {
            font-family: 'Article Text Bold';
            src: url(../fonts/Retail/Article/ArticleText-Bold.otf);
        }

        @font-face {
            font-family: 'Article Text Bold Italic';
            src: url(../fonts/Retail/Article/ArticleText-BoldItalic.otf);
        }

        @font-face {
            font-family: 'Article Text Extrabold';
            src: url(../fonts/Retail/Article/ArticleText-Extrabold.otf);
        }

        @font-face {
            font-family: 'Article Text Extrabold Italic';
            src: url(../fonts/Retail/Article/ArticleText-ExtraboldItalic.otf);
        }

        @font-face {
            font-family: 'Article Text Black';
            src: url(../fonts/Retail/Article/ArticleText-Black.otf);
        }

        @font-face {
            font-family: 'Article Text Black Italic';
            src: url(../fonts/Retail/Article/ArticleText-BlackItalic.otf);
        }

        @font-face {
            font-family: 'Quadrant Text Light';
            src: url(../fonts/Retail/QuadrantText/QuadrantText-201218-Light.otf);
        }

        @font-face {
            font-family: 'Quadrant Text Regular';
            src: url(../fonts/Retail/QuadrantText/QuadrantText-201218-Regular.otf);
        }

        @font-face {
            font-family: 'Quadrant Text Medium';
            src: url(../fonts/Retail/QuadrantText/QuadrantText-201218-Medium.otf);
        }

        @font-face {
            font-family: 'Quadrant Text Semibold';
            src: url(../fonts/Retail/QuadrantText/QuadrantText-201218-Semibold.otf);
        }

        @font-face {
            font-family: 'Quadrant Text Bold';
            src: url(../fonts/Retail/QuadrantText/QuadrantText-201218-Bold.otf);
        }

        @font-face {
            font-family: 'Quadrant Text Extrabold';
            src: url(../fonts/Retail/QuadrantText/QuadrantText-201218-Extrabold.otf);
        }

        @font-face {
            font-family: 'Quadrant Text Black';
            src: url(../fonts/Retail/QuadrantText/QuadrantText-201218-Black.otf);
        }


        @font-face {
            font-family: 'Syllabus Regular';
            src: url(../fonts/Retail/Syllabus/Syllabus-0324-Regular.otf);
        }

        @font-face {
            font-family: 'Syllabus Regular Italic';
            src: url(../fonts/Retail/Syllabus/Syllabus-0324-RegularItalic.otf);
        }

        @font-face {
            font-family: 'Syllabus Medium';
            src: url(../fonts/Retail/Syllabus/Syllabus-0324-Medium.otf);
        }

        @font-face {
            font-family: 'Syllabus Bold';
            src: url(../fonts/Retail/Syllabus/Syllabus-0324-Bold.otf);
        }

        @font-face {
            font-family: 'Syllabus Extrabold';
            src: url(../fonts/Retail/Syllabus/Syllabus-0324-Extrabold.otf);
        }

        @font-face {
            font-family: 'Syllabus Black';
            src: url(../fonts/Retail/Syllabus/Syllabus-0324-Black.otf);
        }


        @font-face {
            font-family: 'Field Grot Cond Thin';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Cond_0624_Trial-Thin.woff);
        }

        @font-face {
            font-family: 'Field Grot Cond Light';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Cond_0624_Trial-Light.woff);
        }
        
        @font-face {
            font-family: 'Field Grot Cond Regular';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Cond_0624_Trial-Regular.woff);
        }

        @font-face {
            font-family: 'Field Grot Cond Medium';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Cond_0624_Trial-Medium.woff);
        }

        @font-face {
            font-family: 'Field Grot Cond Bold';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Cond_0624_Trial-Bold.woff);
        }

        @font-face {
            font-family: 'Field Grot Cond Black';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Cond_0624_Trial-Black.woff);
        }


        @font-face {
            font-family: 'Field Grot Narrow Thin';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Narrow_0624_Trial-Thin.woff);
        }

        @font-face {
            font-family: 'Field Grot Narrow Light';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Narrow_0624_Trial-Light.woff);
        }

        @font-face {
            font-family: 'Field Grot Narrow Regular';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Narrow_0624_Trial-Regular.woff);
        }

        @font-face {
            font-family: 'Field Grot Narrow Medium';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Narrow_0624_Trial-Medium.woff);
        }

        @font-face {
            font-family: 'Field Grot Narrow Bold';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Narrow_0624_Trial-Bold.woff);
        }

        @font-face {
            font-family: 'Field Grot Narrow Black';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Narrow_0624_Trial-Black.woff);
        }


        @font-face {
            font-family: 'Field Grot Thin';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_0624_Trial-Thin.woff);
        }

        @font-face {
            font-family: 'Field Grot Light';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_0624_Trial-Light.woff);
        }

        @font-face {
            font-family: 'Field Grot Regular';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_0624_Trial-Regular.woff);
        }

        @font-face {
            font-family: 'Field Grot Medium';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_0624_Trial-Medium.woff);
        }

        @font-face {
            font-family: 'Field Grot Bold';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_0624_Trial-Bold.woff);
        }

        @font-face {
            font-family: 'Field Grot Black';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_0624_Trial-Black.woff);
        }



        @font-face {
            font-family: 'Field Grot Wide Thin';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Wide_0624_Trial-Thin.woff);
        }

        @font-face {
            font-family: 'Field Grot Wide Light';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Wide_0624_Trial-Light.woff);
        }

        @font-face {
            font-family: 'Field Grot Wide Regular';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Wide_0624_Trial-Regular.woff);
        }

        @font-face {
            font-family: 'Field Grot Wide Medium';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Wide_0624_Trial-Medium.woff);
        }

        @font-face {
            font-family: 'Field Grot Wide Bold';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Wide_0624_Trial-Bold.woff);
        }

        @font-face {
            font-family: 'Field Grot Wide Black';
            src: url(../fonts/Retail/FieldGrot/Field_Grot_Wide_0624_Trial-Black.woff);
        }

        @font-face {
            font-family: 'Turnery Regular';
            src: url(../fonts/Retail/Turnery/Turnery-Regular.woff2);
        }

        @font-face {
            font-family: 'Turnery Regular Italic';
            src: url(../fonts/Retail/Turnery/Turnery-RegularItalic.woff2);
        }

        @font-face {
            font-family: 'Turnery Medium';
            src: url(../fonts/Retail/Turnery/Turnery-Medium.woff2);
        }

        @font-face {
            font-family: 'Turnery Bold';
            src: url(../fonts/Retail/Turnery/Turnery-Bold.woff2);
        }


        @font-face {
            font-family: 'Trestle Light';
            src: url(../fonts/Retail/Trestle/Trestle-Light.woff2);
        }

        @font-face {
            font-family: 'Trestle Regular';
            src: url(../fonts/Retail/Trestle/Trestle-Regular.woff2);
        }

        @font-face {
            font-family: 'Trestle Medium';
            src: url(../fonts/Retail/Trestle/Trestle-Medium.woff2);
        }

        @font-face {
            font-family: 'Trestle Bold';
            src: url(../fonts/Retail/Trestle/Trestle-Bold.woff2);
        }

        @font-face {
            font-family: 'Johanna Bold';
            src: url(../fonts/Retail/Johanna/Johanna-Bold.woff2);
        }

        @font-face {
            font-family: 'Staunch Cond Bold';
            src: url(../fonts/Retail/Staunch/StaunchTitlingCond-Bold.woff2);
        }

        @font-face {
            font-family: 'Staunch XCond Bold';
            src: url(../fonts/Retail/Staunch/StaunchTitlingXCond-Bold.woff2);
        }

        html, body {
          touch-action: none; /* Disables all touch-based interactions including zoom and pan */
        }
        

        html {
            scroll-behavior: smooth;
        }

        body {
/*          font-family: 'Turnery Regular'; */
            font-family: 'Attendant Medium';
            font-weight: 400;
            background-color: rgb(0,0,0);
            color: rgb(220, 220, 220);
            -webkit-font-smoothing: antialiased;
            font-size: 1.1vw;
            line-height: 1.3;
            margin: 0;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        [contenteditable] {
            outline: 0px solid transparent;
        }

        .orientation {
            display: flex;
            flex-direction: row;
/*            overflow: hidden;*/
            height: 100vh;
/*            height: 100%;*/
        }

        .verso, .recto {
/*            padding: 1em 2em 4em 2em;*/
             padding: 0 1.2em 4em 1em; 
            /* border-right: 1px solid rgb(40,40,40); */
            /* border-right: 1px solid rgb(100,100,100); */
            /* border-right: 1px solid rgb(80,80,80); */
            border-right: 1px solid rgb(50,50,50);
            flex: 1;
/*            width: 342px;*/
            overflow-y: scroll;
            overflow-x: hidden;
        }


        .verso {
            padding-bottom: 10em;
        }

        .recto {
            border-right: 0;
             padding: 0; 
            /* flex: 2.5; */
            flex: 2.16;
            background: linear-gradient(rgb(50,50,50), rgb(50,50,50)) no-repeat center/1px 100%;
            padding-bottom: 10em;
        }
        
        .recto .first-recto {
            padding-top: 0.7em;
            margin-bottom: 0;
            display: inline-block;
            /* font-size: 1.2vw; */
        }

        p {
            margin: 0;
            letter-spacing: 0.01em;
        }

        .specimens p {
            letter-spacing: 0;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        a:hover {
            /* color: rgb(120,120,120); */
             color: white; 
            /* border-bottom: rgb(66, 245, 182); */
/*            color: rgb(246, 45, 45);*/
        }

        .home {
            /* margin-right: 1em; */

        }


        .verso-index p {
            margin: 0;
            text-indent: 3em;
        }

        .verso-index p.studio {
            width: 100%;
            margin: 1em auto;
            text-indent: 0;
        }

        .updownnav {
            position: fixed;
            bottom: 1.5em;
            right: 1.7em;
            z-index: 9999;
            opacity: 0.98;
        }


        .updownnav img {
            width: 3.5vw;
            padding: 0 0.05em;
        }

        .updownnav img:hover {
            filter: brightness(1.1);
            cursor: pointer;
        }

        nav {
            padding-top: 0.7em;
            /* padding-bottom: 4em; */
/*             font-size: 18px; */
             font-size: 1.4vw; 
            /* color: rgb(45, 159, 235); */
            /* color: rgb(66, 245, 182); */
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            /* color: rgb(246, 45, 45); */
        }

        nav span a {
/*            border-bottom: 1px solid rgb(246, 45, 45);*/
/*            padding-bottom: 3px;*/
        }

        nav span a:hover {
            /* border-bottom: 1px solid white; */
            color: white;
            /* color: rgb(246, 45, 45); */
/*            border-bottom: 1px solid rgb(246, 45, 45);*/
/*            border-bottom: 1px solid white;*/
        }

        header h1 {
            border-bottom: 0;
        }

        .information img {
            padding-top: 0.15em;
            width: 60px;
            position: relative;
            left: -10px;
/*            filter: invert(100%);*/
        }
        
        .counterforms {
            font-family: 'Cassette A';
            font-size: 0.95vw;
            margin-top: 0.2em;
        }

        p.no-indent {
            text-indent: 0;
            margin-top: 0.25em;
        }

        .fonts, .custom, .information {
/*            margin-top: 0.25em;*/
            /* padding-top: 0.5em; */
            /* border-top: 1px solid rgb(120,120,120); */
        }
        
        .section-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            font-size: 18px; 
        }

        h1 {
/*          font-size: 1vw; */
            font-size: 1.4vw; 
            font-weight: normal;
            margin: 0 0 0.2em 3em;
            padding-top: 0.75em;
/*             color: rgb(66, 245, 182); */
/*             color: rgb(45, 159, 235); */
/*            border-bottom: 1px solid rgb(175,175,175);*/
/*            border-bottom: 1px solid rgb(246, 45, 45);;*/

        }

        h1 + a {
            font-size: 1.4vw; 
            border-bottom: none;
        }


        .fonts p, .custom p {
/*            font-size: 0.95vw;*/
            /* font-size: 1.27vw; */
            margin-bottom: 1em;
        }

        figure {
            padding-top: 1em;
            margin: 0;
            /* border: 1px solid rgb(30,30,30); */
            /* transform: rotate(1.1deg); */
        }

        figure + figure {
            padding: 0;
        }

        img {
            width: 100%;
/*          filter: grayscale(0) blur(20px);*/
            transition: all 0.1s ease-in-out;
            border-radius: 0.15em;
            opacity: 0;
            -webkit-transition: opacity 0.2s;
            transition: opacity 0.2s;
        }

        img.show {
            opacity: 1;
        }

        #information img {
            opacity: 1;
        }

        .main-carousel:hover img {
            filter: grayscale(0) blur(0);
        }

        img:hover {
            filter: grayscale(0);
        }

        .img-large {
            width: 90%;
            margin: 0 auto;
            display: block;
        }

        .img-medium {
            width: 80%;
            margin: 0 auto;
            display: block;
        }

        .img-small {
            width: 60%;
            margin: 0 auto;
            display: block;
        }

        .img-xsmall {
            width: 50%;
            margin: 0 auto;
            display: block;
        }

        .img-xxsmall {
            width: 40%;
            margin: 0 auto;
            display: block;
        }


        .recto .img-caption {
             font-size: 0.85vw; 
            width: 100%;
            margin: 0.75em 0 6em 0;
            /* color: rgb(255, 255, 255); */
            text-align: center;
        }



        .synopsis {
            padding: 0 1em;
        }
        
        .specimens {
/*            padding-bottom: 4em;*/
            padding: 0 0.9em 8em 0.9em;
        }

        .specimens .synopsis, .specimens .specimens {
            padding: 0;
        }

        .specimens .editable:last-child p:last-child {
/*            margin-bottom: 1em;*/
        }

        .item {
/*            font-family: 'Turnery Regular';*/
            font-family: 'Attendant Medium';
            border-top: 1px solid rgb(40,40,40);
        }

        .item p {
            padding: 0.1rem 0rem;
            margin: 0;
        }
        
        .item:last-child {
             border-bottom: 1px solid rgb(40,40,40); 
        }

       .item:last-child:hover {
             border-bottom: 1px solid rgb(246,45,45); 
        }

        .item:hover {
            /* color: rgb(120,120,120); */
            /* border-top: 1px solid rgb(239, 239, 239); */
            /* border-bottom: 1px solid white; */
            border-top: 1px solid rgb(246, 45, 45);;
/*            border-bottom: 1px solid rgb(246, 45, 45);;*/
            /* border-top: 1px solid rgb(0, 0, 0); */
            /* border-bottom: 1px solid rgb(0, 0, 0); */
        }

        .item:hover + .item {
            /* color: rgb(120,120,120); */
            /* border-top: 1px solid rgb(239, 239, 239); */
            /* border-bottom: 1px solid white; */
            border-top: 1px solid rgb(246, 45, 45);;
/*            border-bottom: 1px solid rgb(246, 45, 45);;*/
            /* border-top: 1px solid rgb(0, 0, 0); */
            /* border-bottom: 1px solid rgb(0, 0, 0); */
        }

        .item.no-hover {
            border-top: none;
        }

        .item.no-hover:hover + .item {
            border-top: 1px solid rgb(40,40,40);
        }

        .item a:hover {
            color: rgb(255,255,255);
        }

        .item.disabled a {
            color: rgb(120,120,120);
            cursor: default;
        }

        .item.disabled a:hover {
            cursor: default;
        }

        .item.disabled:hover {
            border-top: 1px solid rgb(40,40,40);
        }

        .item.disabled:hover + .item {
            border-top: 1px solid rgb(40,40,40);
        }

        .item.disabled:last-child:hover {
            border-bottom: 1px solid rgb(40,40,40);
        }

        .item-details {
/*            font-size: 0.8vw;*/
            margin: 0 0 0 5em;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

        }

        .item-details span {
            /* padding-right: 0.5em; */
        }

        p.intro {
/*            font-size: 0.95vw;*/
        }

        .title {
            width: 33%;
        }

        .collaborator, .client {
            width: 60%;
        }

        .year {
            /* width: 5%; */
            font-feature-settings: "tnum";
        }

        .commissioner {
            width: 24%;
        }


        .styles {
            width: 30%;
        }

        .fonts-year {
            width: 13%;
            text-align: right;
            font-feature-settings: "tnum";
        }

        .information p {
            margin: 0;
            /* font-size: 1vw; */
            text-indent: 4em;
        }

        .information p a, .description a {
            border-bottom: 1px solid rgb(80, 80, 80);
            padding-bottom: 1px;
        }

        .information p a:hover, .description a:hover {
            border-bottom: 1px solid white;
        }

        p.contact {
            margin: 0.75em 0 0 3.8em;
/*            margin-top: 0.75em;*/
            text-indent: 0;
/*            font-size: 0.98vw;*/
/*            font-family: 'Recollection Mono Regular';*/
/*            font-family: 'Cassette Light';*/

        }

        .information .no-indent {
            text-indent: 0;
        }


        .recto p {
            margin-bottom: 1.4em;
/*            font-size: 0.95vw;*/
        }

        .recto h1 {
            margin-left: 3em;
        }
        
        .dummy-image {
            background-color: rgb(255, 255, 255);
            height: 450px;
            width: 100%;
            margin-bottom: 1em;
        }

        p.caption {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            /* width: 80%; */
            margin-bottom: 0;
            color: rgb(70,70,70);
            font-size: 1vw;
        }

        .font-name {
            flex: 1;
        }

        .font-style {
            flex: 0.94;
        }

        .firstpara {
            /* border-top: 1px solid rgb(60,60,60); */
            /* padding-top: 0.25em; */
            /* margin-top: 0.75em; */
        }

        .firstitem {
            margin-top: 0;
        }

        p.article-text {
            font-size: 9.7vw;
            line-height: 1.1;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.article-text-light {
            font-family: 'Article Text Light';
        }

        p.article-text-light-italic {
            font-family: 'Article Text Light Italic';
        }

        p.article-text-regular {
            font-family: 'Article Text Regular';
        }

        p.article-text-regular-italic {
            font-family: 'Article Text Regular Italic';
        }

        p.article-text-medium {
            font-family: 'Article Text Medium';
        }

        p.article-text-medium-italic {
            font-family: 'Article Text Medium Italic';
        }

        p.article-text-bold {
            font-family: 'Article Text Bold';
        }

        p.article-text-bold-italic {
            font-family: 'Article Text Bold Italic';
        }

        p.article-text-extrabold {
            font-family: 'Article Text Extrabold';
        }

        p.article-text-extrabold-italic {
            font-family: 'Article Text Extrabold Italic';
        }

        p.article-text-black {
            font-family: 'Article Text Black';
        }

        p.article-text-black-italic {
            font-family: 'Article Text Black Italic';
        }


        p.recollection-banner {
            font-size: 10.35vw;
            line-height: 1.1;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.recollection-banner-hairline {
            font-family: 'Recollection Banner Hairline';
        }

        p.recollection-banner-thin {
            font-family: 'Recollection Banner Thin';
        }

        p.recollection-banner-light {
            font-family: 'Recollection Banner Light';
        }

        p.recollection-banner-regular {
            font-family: 'Recollection Banner Regular';
        }

        p.recollection-banner-medium {
            font-family: 'Recollection Banner Medium';
        }

        p.recollection-banner-bold {
            font-family: 'Recollection Banner Bold';
        }

        p.recollection-banner-extrabold {
            font-family: 'Recollection Banner Extrabold';
        }

        p.recollection-banner-black {
            font-family: 'Recollection Banner Black';
        }

        p.recollection-disp {
            font-size: 8.6vw;
            line-height: 1.1;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.recollection-disp-thin {
            font-family: 'Recollection Disp Thin';
        }

        p.recollection-disp-light {
            font-family: 'Recollection Disp Light';
        }

        p.recollection-disp-regular {
            font-family: 'Recollection Disp Regular';
        }

        p.recollection-disp-medium {
            font-family: 'Recollection Disp Medium';
        }

        p.recollection-disp-bold {
            font-family: 'Recollection Disp Bold';
        }

        p.recollection-disp-extrabold {
            font-family: 'Recollection Disp Extrabold';
        }

        p.recollection-mono {
            font-size: 6.7vw;
            line-height: 1.15;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.recollection-mono-light {
            font-family: 'Recollection Mono Light';
        }

        p.recollection-mono-regular {
            font-family: 'Recollection Mono Regular';
        }

        p.recollection-mono-medium {
            font-family: 'Recollection Mono Medium';
        }

        p.recollection-mono-bold {
            font-family: 'Recollection Mono Bold';
        }

        p.recollection-text {
            font-size: 7.3vw;
            line-height: 1.18;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.recollection-text-light {
            font-family: 'Recollection Text Light';
        }

        p.recollection-text-regular {
            font-family: 'Recollection Text Regular';
        }

        p.recollection-text-medium {
            font-family: 'Recollection Text Medium';
        }

        p.recollection-text-bold {
            font-family: 'Recollection Text Bold';
        }

        p.quadrant-text {
            font-family: 'Quadrant Text';
            font-size: 9.44vw;
            line-height: 1.15;
            margin-bottom: 0;
        }

        p.quadrant-text-light {
            font-family: 'Quadrant Text Light';
        }

        p.quadrant-text-regular {
            font-family: 'Quadrant Text Regular';
        }

        p.quadrant-text-regular-italic {
            font-family: 'Quadrant Text Regular Italic';
        }

        p.quadrant-text-medium {
            font-family: 'Quadrant Text Medium';
        }

        p.quadrant-text-semibold {
            font-family: 'Quadrant Text Semibold';
        }

        p.quadrant-text-bold {
            font-family: 'Quadrant Text Bold';
        }

        p.quadrant-text-extrabold {
            font-family: 'Quadrant Text Extrabold';
        }

        p.quadrant-text-black {
            font-family: 'Quadrant Text Black';
        }

        p.quadrant-text-mono {
            font-family: 'Quadrant Text Mono';
            font-size: 9.65vw;
            line-height: 1.1;
            margin-bottom: 0;
        }

        p.quadrant-text-mono-regular {
            font-family: 'Quadrant Text Mono Regular';
        }

        p.quadrant-text-mono-regular-italic {
            font-family: 'Quadrant Text Mono Regular Italic';
        }

        p.quadrant-slab-duo {
            font-family: 'Quadrant Slab Duo Thin';
            font-size: 9vw;
            line-height: 1.15;
            margin-bottom: 0;
        }

        p.quadrant-slab-duo-thin {
            font-family: 'Quadrant Slab Duo Thin';
        }

        p.quadrant-slab-duo-thin-italic {
            font-family: 'Quadrant Slab Duo Thin Italic';
        }


        p.syllabus {
            font-size: 9.1vw;
            line-height: 1.1;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.syllabus-regular {
            font-family: 'Syllabus Regular';
        }

        p.syllabus-regular-italic {
            font-family: 'Syllabus Regular Italic';
        }

        p.syllabus-medium {
            font-family: 'Syllabus Medium';
        }

        p.syllabus-bold {
            font-family: 'Syllabus Bold';
        }

        p.syllabus-extrabold {
            font-family: 'Syllabus Extrabold';
        }

        p.syllabus-black {
            font-family: 'Syllabus Black';
        }

        p.fieldgrotcond {
            font-size: 8.34vw;
            line-height: 1;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.fieldgrotcond-thin {
            font-family: 'Field Grot Cond Thin';
        }

        p.fieldgrotcond-light {
            font-family: 'Field Grot Cond Light';
        }

        p.fieldgrotcond-regular {
            font-family: 'Field Grot Cond Regular';
        }

        p.fieldgrotcond-medium {
            font-family: 'Field Grot Cond Medium';
        }

        p.fieldgrotcond-bold {
            font-family: 'Field Grot Cond Bold';
        }

        p.fieldgrotcond-black {
            font-family: 'Field Grot Cond Black';
        }

        p.fieldgrotnarrow{
            font-size: 8.5vw;
            line-height: 1;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.fieldgrotnarrow-thin {
            font-family: 'Field Grot Narrow Thin';
        }

        p.fieldgrotnarrow-light {
            font-family: 'Field Grot Narrow Light';
        }

        p.fieldgrotnarrow-regular {
            font-family: 'Field Grot Narrow Regular';
        }

        p.fieldgrotnarrow-medium {
            font-family: 'Field Grot Narrow Medium';
        }

        p.fieldgrotnarrow-bold {
            font-family: 'Field Grot Narrow Bold';
        }

        p.fieldgrotnarrow-black {
            font-family: 'Field Grot Narrow Black';
        }

        p.fieldgrot {
            font-size: 9vw;
            line-height: 1.05;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.fieldgrot-thin {
            font-family: 'Field Grot Thin';
        }

        p.fieldgrot-light {
            font-family: 'Field Grot Light';
        }

        p.fieldgrot-regular {
            font-family: 'Field Grot Regular';
        }

        p.fieldgrot-medium {
            font-family: 'Field Grot Medium';
        }

        p.fieldgrot-bold {
            font-family: 'Field Grot Bold';
        }

        p.fieldgrot-black {
            font-family: 'Field Grot Black';
        }


        p.fieldgrotwide {
            font-size: 8.1vw;
            line-height: 1.1;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.fieldgrotwide-thin {
            font-family: 'Field Grot Wide Thin';
        }

        p.fieldgrotwide-light {
            font-family: 'Field Grot Wide Light';
        }

        p.fieldgrotwide-regular {
            font-family: 'Field Grot Wide Regular';
        }

        p.fieldgrotwide-medium {
            font-family: 'Field Grot Wide Medium';
        }

        p.fieldgrotwide-bold {
            font-family: 'Field Grot Wide Bold';
        }

        p.fieldgrotwide-black {
            font-family: 'Field Grot Wide Black';
        }



        p.turnery {
            font-size: 9vw;
            line-height: 1.2;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.turnery-regular {
            font-family: 'Turnery Regular';
        }

        p.turnery-regularitalic {
            font-family: 'Turnery Regular Italic';
        }

        p.turnery-medium {
            font-family: 'Turnery Medium';
        }

        p.turnery-bold {
            font-family: 'Turnery Bold';
        }

        p.cassette {
/*            font-size: 5.35vw;*/
            font-size: 8.67vw;
            line-height: 1.08;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.cassette-hairline {
            font-family: 'Cassette Hairline';
        }

        p.cassette-light {
            font-family: 'Cassette Light';
        }

        p.cassette-regular {
            font-family: 'Cassette Regular';
        }

        p.cassette-medium {
            font-family: 'Cassette Medium';
        }

        p.cassette-bold {
            font-family: 'Cassette Bold';
        }

        p.cassette-black {
            font-family: 'Cassette Black';
        }



        p.trestle {
            font-size: 6.9vw;
            line-height: 1.2;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.trestle-light {
            font-family: 'Trestle Light';
        }

        p.trestle-regular {
            font-family: 'Trestle Regular';
        }

        p.trestle-medium {
            font-family: 'Trestle Medium';
        }

        p.trestle-bold {
            font-family: 'Trestle Bold';
        }

        p.johanna {
            font-size: 16.1vw;
            line-height: 0.68;
            margin-bottom: 0;
            padding: 0 0 0.2em 0;
        }

        p.johanna-bold {
            font-family: 'Johanna Bold';
        }

        p.staunch {
            font-size: 13.4vw;
            line-height: 0.96;
            margin-bottom: 0;
            padding-top: 0em;
        }

        p.staunch-cond {
            font-family: 'Staunch Cond Bold';
        }

        p.staunch.staunch-xcond {
            font-family: 'Staunch XCond Bold';
            font-size: 11.8vw;
        }






/* C U S T O M   T Y P E */

        #meccadirectional .specimens img {
            padding: 0.5em 0 0.6em 0;
        }

        #agsa img, #nrma img {
            padding: 0.2em 0 0.6em 0;
        }

        #hkremid img {
            padding: 0.4em 0 0.7em 0;
        }

        #whitebay img {
            padding: 0.3em 0 0.5em 0;
        }

        #telstra img {
            padding: 0.3em 0 0.5em 0;
        }

        #filar img {
            padding: 0.4em 0 0.35em 0;
        }

        #cambium img {
            padding: 0.1em 0 0em 0;
        }

        #caruso img {
            padding: 0.2em 0 0em 0;
        }

        #virideon img {
            padding: 0.7em 0 0.5em 0;
        }

        #fereday img {
            padding: 0.7em 0 0.5em 0;
        }

        #preston img {
            padding: 0;
        }

        #brut img {
            padding: 0.7em 0 0.5em 0;
        }

        #bvn img {
            padding: 0.7em 0 0.4em 0;
        }

        #obelisc img {
            padding: 0.7em 0 0.4em 0;
        }

        #internal .customtype .caption {
            margin: 0;
        }

        #miff img {
            padding: 0.7em 0 0.4em 0;
        }

        #aptype img {
            padding: 1em 0 0.3em 0;
        }

        #transfer img {
            padding: 1em 0 0.3em 0;
        }

        #grandstand img {
            padding: 0.4em 0 0.8em 0;
        }

        #telegram img {
            padding: 0em 0 0em 0;
        }

        #passenger img {
            padding: 0.8em 0 1.2em 0;
        }

        #verity img {
            padding: 0em 0 0em 0;
        }

        #foxtel img {
            padding: 0em 0 0em 0;
        }

        #pmasans img {
            padding: 0em 0 0em 0;
        }



        p.s3 {
            font-size: 3vw;
            line-height: 1.1;
            /* margin-bottom: 0; */
        }

        p.description {
            padding-top: 0.25em;
/*            padding-left: 1em;*/
            width: calc(50% - 1em);
        }

        .editable:not(hover):hover {
            /* color: rgb(235, 45, 45); */
            /* color: rgb(230, 38, 38); */
            color: white;
        }

        .editable {
            filter: blur(0);
            transition: 0.005s ease-in-out;
        }

        .editable:hover .caption {
            /* color :rgb(235, 45, 45); */
            /* color: rgb(0, 0, 0); */
            color: rgb(239, 239, 239);
            /* color: rgb(255, 255, 255); */
            /* color: rgb(246, 45, 45); */
        }

        .specimens:hover .editable:not(:hover) {
            /* color: rgb(235, 45, 45); */
            /* filter: blur(3px); */
            /* opacity: 0.95; */
        }

        .customtype:hover .caption {
            color: rgb(70,70,70) ;
        }

        .customtype .caption {
            margin: 0.5em 0 0.4em 0;
        }



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

            body {
                font-size: 3.3vw;
/*                letter-spacing: 0.04em;*/
                overflow-x: hidden;
                max-width: 100%;
            }

            nav {
                position: fixed;
                top: 0;
                width: calc(100vw - 1.5em);
                background-color: black;
                padding-bottom: 0.5em;
                z-index: 9999;
/*                border-bottom: 1px solid rgb(246, 45, 45);*/
            }

           .updownnav {
                bottom: 0.5em;
                left: 0.7em;
            }
 
            .updownnav img {
                width: 12vw;
                padding: 0 0.05em;
            }
             p.caption {
                font-size: 3vw;
            }

            .verso-index {
                margin-top: 3em;
            }

            h1, nav {
                font-size: 4vw;
            }

            h1, .recto h1 {
                margin-left: 2.5em;
            }

            .orientation {
                flex-direction: column;
                height: 100%;
            }

            .specimens {
                padding-bottom: 3em;
            }

            p {
                letter-spacing: 0.02em;
            }

            .item p {
                margin: 0;
                 padding: 0.2rem 0 0.1rem 0 ; 
            }

            .verso {
                border-bottom: 1px solid rgb(50,50,50);
/*                flex: 1.1;*/
/*                position: relative;*/
/*                top: 0;*/
                padding-bottom: 4em;
            }

            .recto {
                overflow-x: hidden;
                max-width: 100%;
                flex: 4;
            }

            .section-header {
                padding-top: 1.5em;
            }
            .synopsis {
                padding-top: 2.2em;
            }

            .title {
                width: 34%;
            }

            h1 {
                scroll-margin-top: 1.65em;
            }

            p.description {
                width: auto;
                margin-bottom: 1em;
            }

            p.contact {
                margin-left: 3em
            }

            .information p {
                text-indent: 3em;
            }

            img {
                filter: none;
                border-radius: 0.2em;
            }

            .recto .img-caption {
                margin-bottom: 1em;
                font-size: 2.5vw;
                padding: 0 2em;
                width: calc(100vw - 4em);
            }

            p.cassette {
                font-size: 12.6vw;
                line-height: 0.8;
            }

            #cassette p.caption {
                margin: 0.75em 0 0 0;
            }

            p.syllabus {
                font-size: 13.2vw;
                line-height: 0.8;
            }

            #syllabus p.caption {
                margin: 0.6em 0 0.2em 0;
            }

            p.staunch {
                font-size: 19.6vw;
                line-height: 0.8;
            }

            #staunch p.caption {
                margin: 0.6em 0 0.2em 0;
            }
  
            p.staunch.staunch-xcond {
                font-size: 17.2vw;
            }

            p.quadrant-text {
                font-size: 13.8vw;
                line-height: 0.8;
            }

            #quadrant p.caption {
                margin: 0.75em 0 0em 0;
            }

            p.quadrant-text-mono {
                font-size: 14.1vw;
            }

            p.quadrant-slab-duo {
                font-size: 13vw;
            }

            p.article-text {
                font-size: 14.1vw;
                line-height: 0.85;
            }

            #article p.caption {
                margin: 0.75em 0 0em 0;
            }

            p.recollection-banner {
                font-size: 15vw;
                line-height: 0.8;
            }
             #recollection p.caption {
                margin: 0.8em 0 0em 0;
            }

            p.recollection-disp {
                font-size: 12.6vw;
                line-height: 0.8;
            }

           #recollectiondisplay p.caption {
                margin: 0.5em 0 0.4em 0;
            }

            p.recollection-text {
                font-size: 10.6vw;
                line-height: 0.8;
            }

           #recollectiontext p.caption {
                margin: 0.5em 0 0.4em 0;
            }
  
            p.recollection-mono {
                font-size: 9.7vw;
                line-height: 0.75;
            }

            #RecollectionMonoText p.caption {
                margin: 0.7em 0 0.4em 0;
            }

            p.fieldgrotcond {
                font-size: 12.2vw;
                line-height: 0.72;
            }

            #fieldgrotcond p.caption {
                margin: 0.75em 0 0em 0;
            }

            p.fieldgrotnarrow {
                font-size: 12.3vw;
                line-height: 0.75;
            }

            #fieldgrotnarrow p.caption {
                margin: 0.75em 0 0em 0;
            }

            p.fieldgrot {
                font-size: 13vw;
                line-height: 0.75;
            }

            #fieldgrot p.caption {
                margin: 0.75em 0 0em 0;
            }

            p.fieldgrotwide {
                font-size:11.9vw;
                line-height: 0.8;
            }

            #fieldgrotwide p.caption {
                margin: 0.75em 0 0em 0;
            }
 
           p.turnery {
                font-size:13.1vw;
                line-height: 0.8;
           }

           #turnery p.caption {
                margin: 0.4em 0 0.25em 0;
            }

           p.trestle {
                font-size: 10.4vw;
           }

           p.johanna {
                font-size:23.7vw;
           }

            #agsa img {
                padding: 0;
            }

            #agsa .caption {
                margin: 0.2em 0 0.1em 0;
            }

            #nrma img {
                padding: 0;
            }

            #nrma .caption {
                margin: 0.35em 0 0.3em 0;
            }

            #meccadirectional .specimens img {
                padding: 0;
            }

            #meccadirectional .caption {
                margin: 0.25em 0 0.25em 0;
            }

            #hkremix .specimens img {
                padding: 0;
            }

            #hkremix .caption {
                margin: 0.25em 0 0.25em 0;
            }

            #whitebay .specimens img {
                padding: 0;
            }

            #whitebay .caption {
                margin: 0em 0 0.3em 0;
            }

            #acosans .specimens img {
                padding: 0;
            }

            #acosans .caption {
                margin: 0.3em 0 0em 0;
            }

            #telstra .specimens img {
                padding: 0;
            }

            #telstra .caption {
                margin: 0.3em 0 0.25em 0;
            }

            #filar .specimens img {
                padding: 0;
            }

            #filar .caption {
                margin: 0.2em 0 0.25em 0;
            }

            #cambium .specimens img {
                padding: 0;
            }

            #cambium .caption {
                margin: 0em 0 0.1em 0;
            }

            #punctum .specimens img {
                padding: 0;
            }

            #punctum .caption {
                margin: 0em 0 0.1em 0;
            }

            #caruso .specimens img {
                padding: 0;
            }

            #caruso .caption {
                margin: 0.15em 0 0.1em 0;
            }

            #virideon .specimens img {
                padding: 0;
            }

            #virideon .caption {
                margin: 0.2em 0 0.15em 0;
            }

            #fereday .specimens img {
                padding: 0;
            }

            #fereday .caption {
                margin: 0.2em 0 0.15em 0;
            }

            #brut .specimens img {
                padding: 0;
            }

            #brut .caption {
                margin: 0.2em 0 0.2em 0;
            }

            #bvn .specimens img {
                padding: 0;
            }

            #obelisc .caption {
                margin: 0.2em 0 0.2em 0;
            }

            #obelisc .specimens img {
                padding: 0;
            }

            #internal .caption {
                margin: 0;
            }

            #internal .specimens img {
                padding: 0;
            }

            #miff .caption {
                margin: 0.2em 0 0.2em 0;
            }

            #miff .specimens img {
                padding: 0;
            }

            #aptype .caption {
                margin: 0.2em 0 0.2em 0;
            }

            #aptype .specimens img {
                padding: 0;
            }

            #transfer .caption {
                margin: 0.2em 0 0.2em 0;
            }

            #transfer .specimens img {
                padding: 0;
            }

            #grandstand .caption {
                margin: 0.2em 0 0.2em 0;
            }

            #grandstand .specimens img {
                padding: 0;
            }

            #telegram .caption {
                margin: 0em 0 0em 0;
            }

            #telegram .specimens img {
                padding: 0;
            }

             #passenger .caption {
                margin: 0em 0 0em 0;
            }

            #passenger .specimens img {
                padding: 0;
            }

            #verity .caption {
                margin: 0em 0 0em 0;
            }

            #verity .specimens img {
                padding: 0;
            }

            #foxtel .caption {
                margin: 0em 0 0em 0;
            }

            #foxtel .specimens img {
                padding: 0;
            }

            #pmasans .caption {
                margin: 0em 0 0em 0;
            }

            #pmasans .specimens img {
                padding: 0;
            }



            figure {
                padding: 0;
            }

        }