/* Importing Fonts */
 @import url('https://rawcdn.githack.com/betsyze/Roobert/ade264a03965d7d4cf3f21c63377455ee49b9489/Roobert.css');

 @font-face {
     font-family: "Roobert-Medium", Helvetica;
     font-style: normal;
     font-weight: 500;
     src: url('/Assets/Fonts/Roobert/Roobert-Medium.otf') format("opentype");
 }

 @font-face {
     font-family: "Roobert-Regular", Helvetica;
     font-style: normal;
     font-weight: 400;
     src: url('/Assets/Fonts/Roobert/Roobert-Regular.otf') format("opentype");
 }

 @font-face {
     font-family: "Roobert-Semibold", Helvetica;
     font-style: normal;
     font-weight: 700;
     src: url('/Assets/Fonts/Roobert/Roobert-SemiBold.otf') format("opentype");
 }

 @font-face {
     font-family: "Roobert-Bold", Helvetica;
     font-style: normal;
     font-weight: 800;
     src: url('/Assets/Fonts/Roobert/Roobert-Bold.otf') format("opentype");
 }


 @font-face {
     font-family: "Apfel Grotezk-Regular";
     font-style: normal;
     font-weight: 400;
     src: url('https://anima-uploads.s3.amazonaws.com/projects/61428154992a408f45ab95b1/fonts/apfelgrotezk-regular.otf') format("opentype");
 }

 /* Global */

 :root {
     /* neutral */
     --desert-wind: #faf9f5;
     --neutral-0: #F7F4EB;
     --neutral-2: #F1EDDD;
     --neutral-6: #D8D2BA;
     --neutral-8: #9B9064;
     --neutral-10: #766830;

     /* yellow */
     --yellow-primary: #FFE79B;
     --yellow-6: #E3CA7B;
     --yellow-8: #9C812E;
     --yellow-10: #715600;

     /* blue */
     --sapphire: #5981FA;
     --blue-6: #4769D0;
     --blue-8: #1B2E68;
     --blue-10: #010B2A;
 }

 body {
     margin: 0;
     padding: 0;
     width: 100%;
     background-color: var(--desert-wind);
 }

 .homepage-ux {
     align-items: center;
     justify-content: center;
     background-color: var(--desert-wind);
     display: flex;
     /* width: 100%; */
     min-width: 200px;
     height: 100%;
     padding: 40px 40px 20px 40px;
     flex-direction: column;
     gap: 8px;

 }

 a {
     color: black
 }

 .filler {
     height: 100px;
     width: 200px;
 }

 .vertical-line {
     border-left: solid var(--neutral-10) 0.5px;
     height: 50px;
 }

 .horiz-line {
     border-bottom: solid var(--neutral 10) 0.5px;
     width: 100%;
 }

 .footer {

     /* layout */
     display: flex;
     width: 100%;
     height: 43px;
     padding: 12px 8px 0px 20px;
     align-items: flex-start;
     gap: 10px;


     /* position */
     position: fixed;
     bottom: 0px;

     /* style */
     background: #FAF9F5;
     color: #000;
     font-family: "Roobert-Regular", Helvetica, sans-serif;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
 }

 /* popover */


 /* popover */


 /* Popover styling */
 .popover {
     position: fixed;
     top: 10%;
     left: 33.33%;
     background-color: white;
     border: 1px solid #ccc;
     padding: 10px;
     box-shadow: 0 2px 16px #999999;
     /* border-radius: 4px; */
     display: none;
     z-index: 1000;
     min-width: 460px;

 }

 button {
     padding: 0;
     margin: 0;
     border: none;
     outline: none;
     background: none;
     color: var(--sapphire);
     font-family: "Roobert-Regular", Helvetica;
     font-size: 12px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
 }

 .popover.visible {
     display: block;
 }

 .pop-header {
     display: flex;
     padding: 4px 4px;
     justify-content: space-between;
     align-items: center;
     align-self: stretch;
     border-bottom: #999999 1px solid;
 }

 h3.pop-txt {
     font-family: "Roobert-Regular", Helvetica;
     font-weight: 500;
     font-size: 12px;
     margin: 0%;
     padding: 0%;
 }

 p.pop-txt {
     font-family: "Roobert-Regular", Helvetica;
     font-size: 14px;
     color: var(--neutral-10);
 }

 .pbox {
     padding: 4px 8px;
     background-color: var(--neutral-2);
     border: 0.5px solid var(--neutral-6);
     display: flex;
     flex-direction: row;
     gap: 12px;
 }

 .pbox2 {
     padding: 4px 8px;
     background-color: var(--neutral-0);
     border: 0.5px solid var(--neutral-6);
     display: flex;
     flex-direction: row;
     gap: 12px;
     height: 24px;
 }

 .pop-txxt {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 8px;
     font-family: "Roobert-Regular", Helvetica;
     font-size: 12px;
     cursor: default;
     padding: 4px 4px;


     & a {
         color: var(--neutral-10);
     }

     & a:hover {
         cursor: pointer;
     }
 }

 .pop-txxt:hover {

     border: 0.5px solid var(--neutral-10);
     border-radius: 2px;
     padding: 12px 4px;

 }

 .dog {
     width: 100%;
     display: flex;
     justify-content: space-between;

     & p:hover {
         border: none;


     }

 }

 .spacer {
     height: 8px;
 }

 .spacer-mini {
     height: 4px;
 }

 .popover-close {
     font-family: "Roobert-Regular", Helvetica;
     font-size: 12px;
     background: none;
     border: none;
     font-size: 12px;
     cursor: pointer;
     color: var(--witch);
 }

 .popover-close:hover {
     color: var(--duval);
 }


 .page {
     /* display: flex;
    width: 100%;
    height: 100%;
    padding: 40px 40px 80px 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; */

     align-items: flex-start;
     background-color: var(--desert-wind);
     display: flex;
     /* width: 100%; */
     /* height: 100%; */
     padding: 40px 40px 20px 40px;
     flex-direction: column;

     background-color: var(--desert-wind);
 }

 header {
     margin: 0;
     padding: 0;
     width: 100%;
 }

 .header-box {
     display: flex;
     align-items: center;
     flex-direction: column;
     gap: 10px;
     align-self: stretch;
 }

 .header-top {
     display: flex;
     align-items: center;
     gap: 10px;
     align-self: stretch;
 }

 .bw-icons-row {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .header-face {
     width: 48px;
     height: 48px;
 }

 .header-grid {
     width: 36px;
     height: 36px;
 }

 .header-blob {
     width: 36px;
     height: 36px;
 }

 /* Functional Header */
 .header-box {
     display: flex;
     align-items: center;
     flex-direction: column;
     gap: 10px;
     align-self: stretch;
 }

 .header-top {
     display: flex;
     align-items: center;
     gap: 10px;
     align-self: stretch;
 }

 .bw-icons-row {
     display: flex;
     align-items: center;
     gap: 10px;
 }


 .divider-fit {
     display: flex;
     align-items: flex-start;
     gap: 1px;
     align-self: stretch;
     border: var(--duval);
 }

 .divider-style {
     height: 0px;
     align-self: stretch;

 }

 /* Header images and animations */
 .img-fit {
     height: 72px;
     position: relative;
     width: 72px;
 }

 .UX-gif {
     display: none;
 }

 .UX-static {
     position: absolute;
     background: white;
 }

 .art-static {
     position: absolute;
     background: white;
 }

 .header-blob:hover .art-static {
     opacity: 0;
 }

 .header-grid:hover .UX-static {
     opacity: 0;
 }

 main {
     width: 100%;
 }


 .pg-header {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 25px;
     align-self: stretch;
 }

 .cs-body {
     display: flex;
     padding: 24px 0px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 24px;
     align-self: stretch;
 }

 .cs-context {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
     gap: 12px;
     justify-content: space-between;
 }

 .breadcrumb-banner {
     display: flex;
     justify-content: center;
     width: 100%;
     padding: 8px;
     gap: 4px;

     /* style */
     background: var(--neutral-2);
     color: var(--neutral-8);
     font-family: "Roobert-Regular", Helvetica;
     font-size: 12px;
     color: var(--neutral-10);

     :hover {
         cursor: pointer;
     }

 }

 .breadcrumb-banner a {
     color: var(--neutral-10);
 }

 .badge {
     display: flex;
     justify-content: center;
     padding: 4px 12px;
     gap: 4px;

     /* style */
     background: var(--yellow-primary);
     border: var(--yellow-8) 1px solid;
     border-radius: 12px;
     font-family: "Roobert-Regular", Helvetica;
     font-size: 12px;
     color: var(--yellow-8);
 }


 h1.title {

     margin: 0;
     padding: 4px 0px 4px 0px;

     /* fit */
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: left;
     gap: 10px;
     align-self: stretch;

     /* type */
     color: var(--neutral-10);
     font-family: "Roobert-Regular", Helvetica;
     font-size: 32px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     letter-spacing: -1.6px;
 }

 p.copy {
     margin: 0;
     padding: 0;

     color: var(--neutral-10);

     /* Case Study/Body/Regular */
     font-family: "Roobert-Regular", Helvetica;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     letter-spacing: -0.6px;

 }

 /* study context: info box */


 /* MED */

 .med-info {
     display: flex;
     max-height: 140px;
     padding: 8px 0px;
     align-items: flex-start;
     gap: 12px;
     align-self: stretch;
 }

 .med-info .client-fit {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 2px;
 }

 .med-info .published {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 2px;
 }

 .med-info .team {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 2px;

 }

 .med-info .keyword-fit {
     display: flex;
     min-width: 75px;
     flex-direction: column;
     align-items: flex-start;
     gap: 2px;
     flex: 1 0 0;
 }

 .med-info h2.subtitle {
     margin: 0;
     padding: 0;

     color: var(--neutral-10);
     text-align: center;
     font-family: "Roobert-Regular", Helvetica;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
     /* 150% */
     letter-spacing: -0.6px;
 }

 .med-info p.copy {

     margin: 0;
     padding: 0;

     color: black;
     font-family: "Roobert-Regular", Helvetica;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
     /* 150% */
     letter-spacing: -0.6px;
 }


 /* SML */

 .sml-info {
     width: 100px;
     height: 100px;
     background-color: #000;
     gap: 10px;
 }

 /* lrg */

 .lrg-info {
     display: flex;
     width: 200px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     /* align-self: center; */
     gap: 8px;
     /* background-color: aquamarine; */
     /* padding: 12px; */

 }

 .lrg-info .client-fit {
     display: flex;
     width: 100%;
     flex-direction: column;
     align-items: center;
     gap: 2px;
 }

 .lrg-info .middle-fit {
     display: flex;
     width: 100%;
     justify-content: center;
     align-items: center;
     gap: 12px;
     align-self: stretch;
 }

 .lrg-info .middle-fit .published {

     display: flex;
     /* max-width: 80px; */
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 2px;
 }

 .lrg-info .middle-fit .team {
     display: flex;
     /* max-width: 80px; */
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 2px;
 }

 .lrg-info .keyword-fit {
     display: flex;
     width: 100%;
     flex-direction: column;
     align-items: center;
     gap: 2px;
 }

 .lrg-info h2.subtitle {
     margin: 0;
     padding: 0;
     color: var(--neutral-10);
     text-align: center;
     font-family: "Roobert-Regular", Helvetica;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
     /* 150% */

 }

 .lrg-info p.copy {
     margin: 0;
     padding: 0;
     color: black;
     text-align: center;
     font-family: "Roobert-Regular", Helvetica;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
     /* 150% */
     letter-spacing: -0.6px;
     max-width: 180px;
 }

 /* -------------------------------- */

 /* cs content */

 .spacer-huge {
     height: 48px;
     width: 100%;
 }

 .cs-content {
     display: flex;
     width: 100%;
     /* min-width: 300px; */
     max-width: 700px;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     gap: 24px;
     align-self: stretch;
     padding-top: 12px;

 }

 .chunk {
     gap: 12px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 100%;
 }

 .cs-content p.copy {
     margin: 0;
     padding: 0;

     color: #000;

     /* Case Study/Body/Regular */
     font-family: "Roobert-Regular", Helvetica;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     letter-spacing: 0.01rem;
     line-height: 1rem;
     width: 100%;
 }

 .cs-content span.bold {
     font-weight: 600;
 }

 .pull-quote {
     display: flex;
     width: 100%;
     min-width: 200px;
     max-width: 480px;
     padding: 12px 12px;
     flex-direction: column;
     align-items: flex-start;
     gap: 10px;
     background-color: var(--neutral-0);
     margin: 0;
     border: 0.5px solid var(--neutral-6);
     border-radius: 4px;
 }

 .pull-quote .content {
     display: flex;
     width: 100%;
     flex-direction: row;
     align-items: flex-start;
     gap: 10px;
 }



 h2 {
     /* Case Study/Body/Regular */
     font-family: "Roobert-Medium", Helvetica;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     letter-spacing: 0.01rem;
     line-height: 1rem;
     margin: 0;
     color: var(--yellow-10);
     text-align: center;
     width: 100%;
     display: flex;
     justify-content: center;

     padding: 0;

 }

 p.subhead {
     margin: 0;
     padding: 0;

     color: var(--yellow-10);

     /* Case Study/Body/Regular */
     font-family: "Roobert-medium", Helvetica;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     letter-spacing: 0.01px;
     text-align: left;
     width: 100%;
 }

 h2.subhead {
     /* Case Study/Body/Regular */
     font-family: "Roobert-Medium", Helvetica;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
     letter-spacing: 0.01rem;
     line-height: 1rem;
     margin: 0;
     color: var(--yellow-10);
     text-align: left;
     width: 100%;
 }

 h3 {
     /* Case Study/Body/Regular */
     font-family: "Roobert-Medium", Helvetica;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     letter-spacing: 0.01rem;
     line-height: 1rem;
     margin: 0;
     padding: 0;
     color: var(--yellow-10);
 }

 /* link table */

 .horiz-div {
     stroke-width: 1px;
     stroke: #000;
     width: 100%;
     height: 0px;
     align-self: stretch;
 }

 .link-table {
     width: auto;
     display: flex;
     align-items: center;
     align-content: center;
     gap: 8px;
     align-self: stretch;
     flex-wrap: wrap;
 }

 .link-table .row {
     display: flex;
     width: auto;
     align-items: flex-start;
     gap: 4px;
 }

 .link-table .row p.num {
     padding: 0;
     margin: 0;
     color: #000;
     text-align: center;
     font-family: "Roobert-Regular", Helvetica;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
     /* 150% */
     letter-spacing: -0.6px;
 }

 .link-table .row p.link-text {

     /* flex: 1 0 0; */
     padding: 0;
     margin: 0;

     color: #000;
     font-family: "Roobert-Regular", Helvetica;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
     /* 150% */
     letter-spacing: -0.6px;
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-skip-ink: auto;
     text-decoration-thickness: auto;
     text-underline-offset: auto;
     text-underline-position: from-font;
 }

 /* -------------------------------------- */

 /* Media Queries */

 /* SML */
 @media (max-width:480px) {


     /* info box: */
     .sml-info {
         display: none;
     }

     .med-info {
         display: none;
     }

     .lrg-info {
         display: block;
     }

     .cs-content {
         width: 100%;
         min-width: 300px;
     }



 }

 /* MED */

 @media (min-width:481px) {

     /* info box: */
     .sml-info {
         display: none;
     }

     .lrg-info {
         display: none;
     }
 }

 /* LRG */
 @media (min-width:790px) {

     .cs-body {
         padding: 16px;
     }

     /* orientation */
     .cs-context {
         flex-direction: row;
         gap: 36px;
         align-self: center;
         /* max-width: 1024px; */
     }

     /* info box: */
     .sml-info {
         display: none;
     }

     .med-info {
         display: none;
     }

     .lrg-info {
         display: block;
     }

     .filler {
         display: none;
     }

     /* title */
     h1.title {
         font-size: 48px;
         text-align: center;
     }



     .cs-content {
         width: 100%;
         min-width: 400px;
     }

     .link-table {
         flex-direction: column;
         max-width: 190px;
         min-width: 90px;
         align-content: flex-start;
         align-items: flex-start;
         /* align-self: flex-start; */
     }

     .link-table .row {
         width: 100%;
         max-width: 190px;
     }


 }

 .link-table {
     flex-direction: column;
     max-width: 190px;
     min-width: 90px;
     align-content: flex-start;
     align-items: flex-start;
     /* align-self: flex-start; */
 }

 .link-table .row {
     width: 100%;
     max-width: 190px;
 }