@font-face {
            font-family: 'Matter SQ';
            src: url('../fonts/MatterSQ-Regular.woff2') format('woff2'),
            url('../fonts/MatterSQ-Regular.woff') format('woff'),
            url('../fonts/MatterSQ-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        @font-face {
            font-family: 'Matter Med';
            src: url('../fonts/MatterSQ-Medium.woff2') format('woff2'),
            url('../fonts/MatterSQ-Medium.woff') format('woff'),
            url('../fonts/MatterSQ-Medium.ttf') format('truetype');
            font-weight: 500;
            font-style: normal;
        }
        @font-face {
            font-family: 'Matter Med';
            src: url('../fonts/MatterSQ-Medium.woff2') format('woff2'),
            url('../fonts/MatterSQ-Medium.woff') format('woff'),
            url('../fonts/MatterSQ-Medium.ttf') format('truetype');
            font-weight: medium;
            font-style: normal;
        }

        @font-face {
            font-family: 'Matter SQ';
            src: url('../fonts/MatterSQ-Light.woff2') format('woff2'),
            url('../fonts/MatterSQ-Light.woff') format('woff'),
            url('../fonts/MatterSQ-Light.ttf') format('truetype');
            font-weight: 100;
            font-style: normal;
        }
        @font-face {
            font-family: 'Matter SQ';
            src: url('../fonts/MatterSQ-Light.woff2') format('woff2'),
            url('../fonts/MatterSQ-Light.woff') format('woff'),
            url('../fonts/MatterSQ-Light.ttf') format('truetype');
            font-weight: 300;
            font-style: normal;
        }
        @font-face {
            font-family: 'Matter Semi';
            src: url('../fonts/MatterSQ-SemiBold.woff2') format('woff2'),
            url('../fonts/MatterSQ-SemiBold.woff') format('woff'),
            url('../fonts/MatterSQ-SemiBold.ttf') format('truetype');
            font-weight: 700;
            font-style: normal;
        }
        @font-face {
            font-family: 'Matter SQ';
            src: url('../fonts/Matter-Bold.woff2') format('woff2'),
            url('../fonts/Matter-Bold.woff') format('woff'),
            url('../fonts/Matter-Bold.ttf') format('truetype');
            font-weight: bold;
            font-style: normal;
        }
        @font-face {
            font-family: 'Matter SQ';
            src: url('../fonts/Matter-Bold.woff2') format('woff2'),
            url('../fonts/Matter-Bold.woff') format('woff'),
            url('../fonts/Matter-Bold.ttf') format('truetype');
            font-weight: 900;
            font-style: normal;
        }
        html{
            height: 100%;
        }
        body{
            height: 100%;
            padding:0;
            margin: 0;
            /* overflow: hidden; */
            font-size: calc(15px + 0.390625vw); 
            font-family: Matter SQ; 
        }
        a{
            color: #000000;
        }
        a:visited{
            color: #000000;
        }
        #toggleSwitch{
            display: block;
            width: 5.2vw;
            height: 5.2vw;
            position: fixed;
            bottom: 0;
            right: 0;
            padding: 0;
            margin: 0;
            cursor: pointer;
            /* background-color: antiquewhite; */
        }
        #arrow{
            width: 100%;
            height: 100%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            /* background-color:antiquewhite; */
        }
        #svgWrapper{
            margin-top: 30%;
            width: 40%;
            height: 40%;
            /* background-color: blue; */
            display: flex;
            justify-content: center;
            vertical-align: middle;
            /* transform: rotate(180deg); */
        }
        .cls-1{
            fill:#000000;
            stroke-width:0px;
            
        }
        #outerWrapper{
            height: 100%;
            overflow: hidden;
        }
        #main{
            height: 100%;
            min-height: 100%;
            /* width: 89.6vw; */
            /* padding: 5.2vw; */
            padding-top: 0;
            padding-bottom: 0;
            position: relative;
            /* overflow: hidden; */
            background-color: #fafafa;
        }
        #main-content{
            height: 100%;
            min-height: 100%;
            margin: 5.2vw;
            margin-top: 0;
            margin-bottom: 0;
            overflow: hidden;
        }
        #header{
            height: 5.2vw;
            /* width: 100%; */
            position: sticky;
            top: 0;
            /* background-color: bisque; */
            /* border: #000 1px solid; */
        }
        #headerLeft{
            float: left;
            height: 5.2vw;
            line-height:  5.2vw;
            
        }
        #headerRight{
            float: right;
            height: 5.2vw;
            line-height: 5.2vw;
        }
        #footer{
            height: 5.2vw;
            width: 100%;
            position: sticky;
            bottom: 0;
            background-color: #fafafa;
        }
        #infoTitle{
            text-align: right;
            /* font-weight: 500; */
            font-family: 'Matter Semi';
            font-size: 1.4em;
            font-weight:700;
            letter-spacing: -0.015em;
            line-height: 5.2vw;
            padding:0;
            margin: 0;
            
        }
        #container{
            /* min-height: 100%; */
            /* height: calc(100vh - 10.4vw); */
            height: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 3.2136vw;
            /* background-color: coral;    */
            position:relative;
            top: 0;
            overflow: hidden;
        }
        #leftCol{
            width: 100%;
            position: relative;
            /* overflow: hidden; */
            /* position: static; */
            top:0;
            /* background-color:crimson; */
        }
        #leftColContainer{
            position: absolute;
            top: 0;
            width: 100%;
            height: fit-content;
            /* padding-bottom: 5.2vw; */
            /* background-color: coral; */
        }
        #rightCol{
            position: relative;
            width: 100%;
            /* overflow: hidden; */
        }
        #rightColContainer{
            position: absolute;
            bottom: 0;
            width: 100%;
            padding-bottom: 5.2vw;
        }
        #about{
            background-color: #000;
            height: 100%;
            padding-top: 0;
            padding-bottom: 0;
            background-image: url(../img/ICHI_Portrait_BW_UltraBlack.webp);
            background-position: bottom right;
            background-position-x: 95%;
            background-repeat: no-repeat;
            background-size: 33.33%;
        }
        #about-content{
            margin: 5.2vw;
            margin-top: 0;
            margin-bottom: 0;
            padding-top: 5.2vw;
            padding-bottom: 5.2vw;
            color: #fafafa;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            column-gap: 3.2136vw;
        }
        #client-experience{
            margin-top: 0.75em;
        }
        #clients{
            width: 100%;
            display: grid;
            grid-template-columns: 45% 25% 30%;
        }
        #clients ul, #work ul{
            list-style: none;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        #clients li, #work li{
            list-style: none;
            list-style-type: none;
            padding: 0;
            margin: 0;
            padding-bottom: 0.5vh;
            margin-bottom: 1vh;
            font-size: 1.067em;
            font-weight: 100;
            letter-spacing: 0.03em; 
            border-bottom: 1px solid rgba(250,250,250,0.75) ;
        }
   
        #sideBar{
            width: 5.2vw;
            height: 100vh;
            position: fixed;
            right: 0;
            top: 0;
        }
        #sideBarTop{
            height: 5.2vw;
            width: 100%;
        }
        #sidebarMid{
            height: calc(100vh - 10.4vw);
            width: 100%;
            /* background-color: aquamarine; */
            position: relative;
        }
        #sideBarBottom{
            height: 5.2vw;
            width: 100%;
        }
        #breadCrumbContainer{
            display: flex;
            justify-content: center;
            vertical-align: middle;
            height: 100%;
            width: 100%;
        }
        #breadCrumbs{
            height: 15vh;
            width: 100%;
            position: relative;
            top: calc(((100vh - 10.4vw) - 15vh) / 2);
        }
        .headerText{
            font-family: 'Matter Semi';
            font-size: 1.4em;
            font-weight:700;
            letter-spacing: -0.015em;
            padding:0;
            margin: 0;
        }
        .bodyCopy{
            font-size: 0.41667em;
        }
        .p-item{
            height: calc(100vh - 10.4vw);
            width: 100%;
            /* border: #000 0.25px solid; */
            /* border: #000 0.005vw solid; */
            overflow: hidden;
            margin-bottom: 5.2vw;
            /* background-color: rebeccapurple; */
            /* display: flex;
            /* text-align: center; */
            /* justify-content: center; */
            position: relative; 
        }
        .p-item-small{
            height: calc((100vh - 13.6136vw)/2);
            width: 100%;
            /* background-color: rgb(255, 0, 183); */
            overflow: hidden;
            position: relative;
            margin-bottom: 3.2136vw;
        }
        .spacer{
            height:calc(5.2vw - 3.2136vw);
            width: 100%;
            /* background-color: rgb(94, 255, 0); */
        }
        .p-image{
            display: flex;
            text-align: right;
            justify-content: right;
            position: relative;
            height: 100%;
        }
        .p-image img{
            /* height: 100%;
            width: auto; */
            display: block; 
            object-fit: cover;
            /* margin-left: auto;
            margin-right: auto; */
            object-position: right bottom;
            text-align: right;
            justify-content: right;
        }
        .p-image-small{
            display: flex;
            text-align: right;
            justify-content: right;
            align-items: center;
            position: relative;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
        .p-image-small img{
            align-items: center;
            width: 100%;
            /* object-fit:cover; */
            /* object-position:right bottom;
            align-items: bottom;
            display: block; */
            /* margin-left: auto;
            margin-right: auto; */
            /* text-align: right; */
            /* bottom: 0; */
        }
        .caption{
            position: absolute;
            bottom: 0;
            text-align: left;
            justify-content: left;
            padding-left: 1.98vw;
            padding-bottom: 1.9vw;
        }
        .caption-header{
            font-weight: bold;
            padding: 0;
            margin: 0;
        }
        .caption-header h1{
            font-size: 3.2em;
            padding: 0;
            padding-bottom: 0.1em;
            margin: 0;
            line-height: 0.8em;
        }
        .caption-body{
            font-weight: 100;
            font-size: 1.6em;
            padding: 0;
            margin: 0;
        }
        .caption-body p{
            padding: 0;
            margin: 0;
            /* line-height: 1.05em; */
            line-height: 1.1em;
            letter-spacing: 0.025em;
        }
        .aboutHeader{
            font-weight: bold;
            padding: 0;
            margin: 0;
            color: #fafafa;
            font-size: 3.2em;
            padding: 0;
            padding-bottom: 0.25em;
            margin: 0;
            line-height: 0.8em;
        }
        .aboutBodyCopy{
            font-size: 1.067em;
            font-weight: 100;
            line-height: 1.375em;
            letter-spacing: 0.03em;
            margin: 0;
            padding: 0;
            margin-bottom: 0.75em;
            hyphens: none;     
            color: #fafafa;  
        }
        .aboutBodyCopy p{
            margin: 0;
            padding: 0; 
            hyphens: none;        
        }
        .contactLink{
            font-size: 1.6em;
            font-weight: normal;
            padding: 0; 
            padding-bottom: 5px;
            margin: 0;  
            margin-bottom: 0.5em;
            color: #fafafa;
            /* border-bottom: 1px solid rgba(250,250,250,0.75) ; */
        }
        .contactLink a, .contactLink a:visited{
            color: #fafafa;
            text-decoration: none;
        }
        .aboutSpacer{
            height: 2vh;
            width: 100%;
        }
        table{
            width: 100%;
            /* background-color: aqua; */
            border: none;
            border: 0;
            font-size: 1.067em;
            font-weight: 100;
            letter-spacing: 0.03em; 
        }
        td{
            padding: 0;
            padding-right: 2vw;
            /* background-color: antiquewhite; */
            width: 33.33%;
            border: none;
            border: 0;
            border-bottom: 1px solid #fafafa;  
            color: #fafafa; 
            padding-bottom:0.5vh ; 
            padding-top: 1vh;
            white-space: nowrap

        }
        tr{
            /* border-bottom: 1px solid #fafafa; */
            border: none;
            border: 0;
            /* background-color: antiquewhite; */
            
        }
        .bcDot{
            /* background-color: blueviolet; */
            height: 5vh;
            width:100%;
            display: flex;
            text-align: center; 
            justify-content: center;
            vertical-align: middle; 
        }
        .dot {
            height: 1.75vh;
            width: 1.75vh;
            border-radius: 50%;   
            justify-content: center;
            vertical-align: middle;
            margin-top: 1.625vh; 
        }
        #dot1{
            background-color: #000;
        }
        #dot2, #dot3{
            background-color: #e8e8e8;
        }

        /* -------- Desktop -------- */

        @media screen and (max-width: 1600px) {
            #about{
                height: 100vh;
                overflow: hidden;
                /* background-size: 25%; */
            }
            .aboutBodyCopy{
                font-size: 1.067em;
                font-weight: 100;
                line-height: 1.375em;
                letter-spacing: 0.03em;
                margin: 0;
                padding: 0;
                margin-bottom: 0.75em;      
            }
        }

        @media screen and (max-width: 1550px) {
            #about{
                height: 100vh;
                overflow: hidden;
                /* background-size: 25%; */
            }
            .aboutBodyCopy{
                font-size: 1.067em;
                font-weight: 100;
                line-height: 1.375em;
                letter-spacing: 0.03em;
                margin: 0;
                padding: 0;
                margin-bottom: 0.75em;      
            }
        } 

        @media screen and (max-width: 1500px) {
            #about{
                height: 100vh;
                overflow: hidden;
                /* background-size: 25%; */
            }
            .aboutBodyCopy{
                font-size: 1em;
                font-weight: 100;
                line-height: 1.375em;
                letter-spacing: 0.03em;
                margin: 0;
                padding: 0;
                margin-bottom: 0.75em;      
            }
            .caption-header h1{
                font-size: 3em;
            }
            .caption-body{
                font-size: 1.5em;
            }
            #clients li, #work li{
                font-size: 1em;
            }
        }
        @media screen and (max-width: 1440px) {
            .p-image img{
                display: block; 
                /* object-fit:fill; */
                width: 100%;
                height: auto;
                object-position: center bottom;
                text-align: left;
                justify-content: left;
            }
        }

        @media screen and (max-width: 1366px) {
            #about{
                height: 100vh;
                overflow: hidden;
                /* background-size: 25%; */
            }
            .aboutBodyCopy{
                font-size: 0.95em;
                font-weight: 100;
                line-height: 1.375em;
                letter-spacing: 0.03em;
                margin: 0;
                padding: 0;
                margin-bottom: 0.75em;      
            }
            #clients li, #work li{
                font-size: 0.95em;
            }
        }

        @media screen and (max-width: 1280px) {
            .p-image img{
                display: block; 
                /* object-fit:fill; */
                width: 100%;
                height: auto;
                object-position: center bottom;
                text-align: left;
                justify-content: left;
            }
            .aboutBodyCopy,  #clients li, #work li{
                font-size: 1em;
            }
            #clients{
                display:grid;
                grid-template-columns: 1fr 1fr ;
            }
        }

        @media screen and (max-width: 1024px) {
            #about{
                background-image: none;
            }
            #about-content{
                display: grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 3.2136vw;
            }
            #clients{
                display:grid;
                grid-template-columns: 45% 25% 30%;
            }
        }

        @media screen and (max-width: 1000px) {
            #main-content{
                height: 858.5vh;
            }
            
            #container{
                display: flex;
                flex-direction: column;
                /* gap: 3.2136vw; */
            }
            #leftCol{
                height: 300vh;
            }
            #rightCol{
                position: relative;
                height: 290vh;
                top: 268.5vh;
            }

            #rightColContainer{
                height: 290vh;
                display: flex;
                flex-direction: column-reverse;
            }

            #outerWrapper{
                height: 100%;
                overflow: auto;
            }

            #breadCrumbContainer{
                display: none;
            }

            .spacer{
                height:0;
            }

            .p-item, .p-item-small{
                height: calc(100vh - 10.4vw);
                width: 100%;
                overflow: hidden;
                margin-bottom: 5.2vw;
                position: relative; 
            }

            #about{
                height: 100vh;
                overflow: hidden;
            }

            #about-content{
                display: grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 3.2136vw;
            }
        }

        /* -------- Mobile -------- */

        @media screen and (max-width: 800px) {
            #outerWrapper{
                position: relative;
                top: 0;
                height: 100%;
                overflow: auto;
            }
            #main{
                height: 100%;
            }
            #main-content{
                /* height: calc(858.4vw + 14vh); */
                height: 883.6vw;
            }
            #header{
                margin-top: 5.2vw;
                margin-bottom: 5.2vw;
                height: 20vw;
                line-height: 2em;
            }
            #headerLeft{
                /* width: 75%; */
                float: none;
                margin-bottom: 1vw;
            }
            #headerRight{
                float: none;
                width: 75%;
                margin-bottom: 1vw;
                line-height: 1.8em;
            }
            #container{
                height: 858.4vw;
                display: flex;
                flex-direction: column;
                /* gap: 3.2136vw; */
            }
            #leftCol{
                height: 284.4vw;
            }
            #rightCol{
                position: relative;
                height: 568.8vw;
                top: 5.2vw;
            }
            #infoTitle{
                display: none;
                visibility: hidden;
            }

            .p-item, .p-item-small{
                height: 89.6vw;
                width: 100%;
                overflow: hidden;
                margin-bottom: 5.2vw;
                position: relative; 
            }
            .p-image img{
                display: block; 
                /* object-fit:fill; */
                width: 100%;
                height: auto;
                object-position: right bottom;
                text-align: right;
                justify-content: right;
            }

            .p-image-small{
                display: flex;
                text-align: right;
                justify-content: right;
                position: relative;
                height: 100%;
            }
            .p-image-small img{
                height: 89.6vw;
                width: auto;
                display: block; 
                /* object-fit: cover; */
                /* margin-left: auto;
                margin-right: auto; */
                object-position: right bottom;
                text-align: right;
                justify-content: right;
            }

            .caption-header h1{
                font-size: 2.8em;
                padding: 0;
                padding-bottom: 0.1em;
                margin: 0;
                line-height: 0.8em;
            }
            .caption-body{
                font-weight: 100;
                font-size: 1.4em;
                padding: 0;
                margin: 0;
            }

            #about{
                height: fit-content;
                overflow: hidden;
                background-image: none;
            }

            #about-content{
                display: flex;
                flex-direction: column;
                column-gap: 5.2vw;
            }
            #about-col2{
                margin-top: 5.2vw;
                /* background-color:rgb(255, 0, 183); */
            }
            #clients{
                display: flex;
                flex-direction: column;
            }
        }

        @media screen and (max-width: 400px) {
            #headerRight{
                float: none;
                width: 85%;
                margin-bottom: 1vw;
                line-height: 1.8em;
            }
        }