/* FONTS */

@import url("https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Caveat:wght@400..700&family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

/* COLORS */
:root {
   --darkgray: rgb(45, 45, 45);
   --gray: rgb(104, 104, 104);
   --lightgray: rgb(217, 217, 217);
   --pink: rgb(253, 12, 115);
   --white: rgb(255, 255, 255);
   --highlight: rgb(51, 212, 255);
   --feature-testimonial: rgb(116, 180, 227);
   --blue: rgb(34, 112, 184);
   --darkblue: rgb(49, 59, 151);

   --checkbox-border-color: #8b8c89;
   --checkbox-checked-color: #274c77;
   --checkbox-hover-color: #a3cef1;
   --checkbox-disabled-bg-color: #d9d9d9;

   --gap: 2vw;
   --biggap: 4vw;
   --content-inset: 2vw;
   --block-padding: 4vw;
   --base-font-size: 2vw;
}

pink,
.pink {
   color: var(--pink);
}

* {
   box-sizing: border-box;
}

p {
   margin-top: 0;
}

upper-case {
   text-transform: uppercase;
}

/* FRAME */

body {
   background-attachment: fixed;
   background-image: linear-gradient(
      135deg,
      #eee 6.25%,
      #fff 6.25%,
      #fff 50%,
      #eee 50%,
      #e3e3e3 56.25%,
      #fff 56.25%,
      #fff 100%
   ) !important;
   font-size: var(--base-font-size);
   background-size: 11.31px 11.31px !important;
   font-family: "Noto Sans", sans-serif;
   font-weight: regular;
   letter-spacing: -1px;
   color: var(--darkgray);
   padding: 0;
   margin: 0;
}

page-wrapper {
   display: block;
   padding-top: calc(var(--base-font-size) * 3.5);
   margin: 0 auto;
}

content-inset {
   display: block;
   position: relative;
   padding: var(--biggap);
}

content-inset:first-child {
   padding: 0 var(--biggap) var(--biggap) var(--biggap);
}

content-inset-h {
   display: block;
   position: relative;
   padding: 0 var(--biggap);
}

pagination-block {
   display: block;
   position: relative;
   padding: var(--gap);
   text-transform: uppercase;
   font-size: calc(var(--base-font-size) * 0.8);
   font-weight: 300;
   text-align: center;
   background-color: var(--white);
}

pagination-block a {
   border: 0;
}

/* BUTTONS */

a.pswp__button--permalink {
   color: #fff;
   font-size: 12px !important;
   line-height: 60px;
}

/* LIGHTBOX */
light-box {
   display: block;
   padding-bottom: calc(var(--gap) * 2);
}

.pswp__custom-caption {
   background: var(--lightgray);
   color: var(--darkgray);
   font-weight: 200;
   font-size: calc(var(--base-font-size) * 0.9);
   border-radius: 10px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translateX(-50%);
}

.pswp__custom-caption span {
   display: block;
   padding: 10px 20px;
}

.pswp__custom-caption a {
   text-decoration: underline;
}

.caption,
.permalink {
   display: none;
}

a.button,
button.category {
   letter-spacing: normal;
   display: inline-block;
   border-radius: var(--base-font-size);
   background-color: var(--feature-testimonial);
   color: var(--white);
   border: none;
   font-weight: 700;
   font-size: calc(var(--base-font-size) * 0.6);
   padding: calc(var(--base-font-size) * 0.25) calc(var(--base-font-size) * 0.5);
   margin: 0;
   transition: background-color 0.3s ease;
   cursor: pointer;
   text-transform: uppercase;
}

a.button.large {
   font-size: calc(var(--base-font-size) * 1) !important;
   padding: calc(var(--base-font-size) * .5) calc(var(--base-font-size) * 1.5) !important;
   border-radius: 4rem !important;
}

button.loadmore {
   letter-spacing: normal;
   display: inline-block;
   border-radius: var(--base-font-size);
   background-color: var(--darkblue);
   color: var(--white);
   border: none;
   font-weight: 700;
   font-size: calc(var(--base-font-size) * 0.7);
   padding: calc(var(--base-font-size) * 0.25) calc(var(--base-font-size) * 0.5);
   margin: 0;
   transition: background-color 0.3s ease;
   cursor: pointer;
   text-transform: uppercase;
}

a.button.featured {
   background-color: var(--highlight);
}

a.button.highlighted {
   background-color: var(--darkblue);
}

a.button.active.highlighted, 
a.button.active.featured {
   background-color: var(--pink);
}

a.button.view-more {
   font-size: calc(var(--base-font-size) * .6);
   padding: calc(var(--base-font-size) * 0.25) calc(var(--base-font-size) * 1);
}

a.button:hover,
button.category:hover {
   color: var(--white);
   background-color: var(--darkgray);
}

a.button.large {
   font-size: calc(var(--base-font-size) * 1.5);
   padding: calc(var(--base-font-size) * 0.25) calc(var(--base-font-size) * 1);
}

a.active,
button.active {
   background-color: var(--pink);
}

button[type="submit"] {
   border-radius: calc(var(--base-font-size) * 1.5);
   background-color: var(--pink);
   color: var(--white);
   border: none;
   font-weight: 700;
   font-size: var(--base-font-size);
   padding: calc(var(--base-font-size) * 0.25) var(--base-font-size);
   margin: 0;
   transition: background-color 0.3s ease;
}

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

/* INLINE TAGS */

*[uppercase] {
   text-transform: uppercase;
}

hr {
   border: 0;
   border-top: 8px solid #efefef;
   margin: var(--biggap) 0;
}

a {
   border: none;
   color: var(--darkgray);
   text-decoration: none;
   border-bottom: 1px solid var(--darkgray);
   transition: border 0.3s, color 0.3s;
}

a:hover, a.website-link:hover {
   color: var(--pink);
   border-bottom-color: var(--pink);
}

a.external {
   font-weight: bold;
   border-bottom: 1px solid var(--darkgray);
   transition: border 0.3s, color 0.3s;
}

a.website-link { 
   color: var(--blue);
   font-weight: 500;
   border-bottom: 1px solid var(--blue);
   transition: border 0.3s, color 0.3s;
   margin-bottom: 1.25vw;
}

a.external:hover {
   color: var(--pink);
   border-color: var(--pink);
}

a.no-border {
   border: none;
}

h1,
h2,
h3 {
   font-family: "Noto Sans Display", sans-serif;
   margin: calc(var(--base-font-size) * 0.5) 0;
}

h1 {
   color: inherit;
   font-size: calc(var(--base-font-size) * 2);
   font-weight: 400;
   letter-spacing: -calc(var(--base-font-size) * 0.1);
   line-height: calc(var(--base-font-size) * 2.25);
   text-wrap: pretty;
}

.labs-title b {
   display: block;
   line-height: calc(var(--base-font-size) * 2.25);
   padding-bottom: calc(var(--base-font-size) * .17);
}

h1 > span {
   font-family: "Caveat Brush";
   font-size: calc(var(--base-font-size) * 2.5);
   display: inline-block;
   border-bottom: calc(var(--base-font-size) * 0.2) solid var(--darkgray);
   transform-origin: left;
   margin-left: 6px;
}

h2 {
   color: inherit;
   font-weight: 400;
   font-size: calc(var(--base-font-size) * 1.75);
   letter-spacing: -calc(var(--base-font-size) * 0.1);
   line-height: calc(var(--base-font-size) * 2.25);
   text-wrap: pretty;
}

h3 {
   color: inherit;
   font-weight: 400;
   font-size: calc(var(--base-font-size) * 1.3);
   letter-spacing: -calc(var(--base-font-size) * 0.05);
   text-wrap: pretty;
}

content-block h3 {
   font-weight: 700;
   text-transform: uppercase;
   font-size: var(--base-font-size) * 1.2;
   margin-top: 4vw;
}

content-block h3:first-child {
   margin-top: 2vw;
}

h2 pink {
  font-weight: 500;
}

h2 b,
h3 b,
h4 b {
   color: var(--pink);
   font-weight: inherit;
}

h4 {
   color: inherit;
   font-weight: 300;
   font-size: var(--base-font-size);
   letter-spacing: 0rem;
}

h4.title {
   font-weight: bold;
   text-transform: uppercase;
   border-bottom: 1px solid var(--white);
   display: block;
   padding-bottom: calc(var(--base-font-size) * 0.25);
   margin-bottom: calc(var(--base-font-size) * 0.25);
}

h5 {
   font-family: "Caveat";
   font-size: var(--base-font-size);
   letter-spacing: 0;
   font-weight: 700;
   text-transform: uppercase;
   margin: 0;
}

/* CONTAINERS */

nav {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   background-color: #fff;
   align-items: center;
   justify-content: space-between;
   position: fixed;
   z-index: 1000;
   width: 100%;
   padding: calc(var(--gap) / 2) var(--biggap);
}

nav .close {
   display: none;
   font-size: var(--base-font-size);
   font-weight: 300;
   color: var(--gray);
   border-radius: 2em;
   background-color: #efefef;
   color: var(--darkgray);
   border: none;
   padding: 0.5rem 1rem;
   cursor: pointer;
   margin-bottom: 1em;
}

.rounded-corners, rounded-corners {
   display: block;
   overflow: hidden;
   border-radius: calc(var(--base-font-size) * 0.5);
}

link-block {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-end;
   font-family: "Noto Sans", sans-serif;
   color: var(--darkgray);
   font-size: 0.9rem;
   font-weight: 700;
   letter-spacing: 0;
   text-transform: uppercase;
}

link-block .link-panel {
   transition: visibility 1s, opacity 1s;
   visibility: visible;
   opacity: 1;
}

link-block a {
   cursor: pointer;
   padding: 0.3em;
   border-bottom: 1px dotted transparent;
   margin-right: 0.7em;
}

link-block a:hover {
   transition: border-color 0.5s ease;
   border-color: var(--pink);
}

link-block a.button, a.button.pink {
   border-radius: 1rem;
   background-color: var(--pink);
   color: var(--white);
   border: none;
   font-weight: 700;
   font-size: 0.8rem;
   padding: 0.5rem 1rem;
   margin: 0;
   transition: background-color 0.3s ease;
}

link-block a.button:hover {
   background-color: var(--darkgray);
}

link-block .hamburger {
   display: none;
}

/* ELEMENTS */

work-entry {
   display: block;
   position: relative;
}

work-entry h1 {
   font-weight: 400;
}

stack-v {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
}

stack-h {
   width: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--biggap);
}

@keyframes fadein {
   from { opacity: 0}
   to   { opacity: 1}
 }

stack-h[work] {
   flex-wrap: wrap;
   align-items: stretch;
   justify-content: flex-start;
   gap: var(--gap);
   padding: 0 var(--content-inset);
   animation: fadein 2s;
}

stack-h[work] div {
   display: block;
   width: 100%;
}

stack-h[work] div a {
   display: block;
   overflow: hidden;
   aspect-ratio: 16 / 9 auto;
   background-size: cover;
   background-position: center center;
   position: relative;
   border: 0;
}

stack-h[stretch] {
   flex-wrap: wrap;
   align-items: stretch;
   justify-content: flex-start;
   gap: var(--biggap);
   padding: 0 var(--biggap);
}

stack-h[nowrap] {
   flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-start;
}

stack-h[nowrap] img {
   max-width: 30%;
}

stack-h[wrap] {
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
   gap: var(--gap);
   padding: 0 var(--biggap);
}

stack-h[bottom] {
   align-items: flex-end;
   justify-content: space-between;
   gap: var(--gap);
}

stack-h[center] {
   align-items: flex-start;
   justify-content: center;
   gap: var(--gap);
}

stack-h[right] {
   align-items: flex-end;
   justify-content: flex-end;
   gap: var(--gap);
}

stack-h[rightlink] {
   align-items: flex-end;
   justify-content: flex-end;
   padding: var(--gap);
}

stack-h[social] {
   margin-top: var(--biggap);
   align-items: center;
   justify-content: flex-start;
   gap: var(--gap);
}

stack-h[social] a {
   border: none; 
}

stack-h[left] {
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: flex-start;
   gap: calc(var(--gap) * .3);
}

stack-h[top] {
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: flex-start;
   gap: var(--biggap);
   padding: 0 var(--biggap);
}

stack-h[work-entry-title] {
   padding-top: 0.5vw; 
   font-size: calc(var(--base-font-size) * 0.8);
}

content-block stack-h[top] {
   padding: 0;
}

.margin-vertical {
   margin: var(--biggap) 0;
}

text-block {
   display: block;
   font-size: calc(var(--base-font-size) * 0.8);
   font-weight: 300;
   text-wrap: pretty;
}

text-block-image {
   display: block;
   aspect-ratio: 16/9 auto;
   overflow: hidden;
   text-align: center;
}

text-block-image img {
   width: 90%;
   height: 90%;
   object-fit: contain;
}

text-block h3 {
   font-size: calc(var(--base-font-size) * 1.2);
   font-weight: 600;
   text-align: center;
}

tagline-block {
   display: block;
   text-wrap: pretty;
   background-color: var(--darkblue);
   font-size: calc(var(--base-font-size) * 1.4);
   font-weight: 200;
   margin-top: var(--gap);
   padding: var(--gap) var(--biggap);
   color: var(--white);
   /*   text-align: center; */
}

tagline-block[highlight] {
   background-color: var(--highlight);
   color: var(--darkgrey);
}

.flex-columns-1 {
   display: block;
   flex: 0 0 100%;
}

.flex-columns-2 {
   display: block;
   flex: 0 0 calc(50% - ((var(--biggap) * 1) / 2));
}

.flex-columns-3 {
   display: block;
   flex: 0 0 calc(33.33333% - ((var(--gap) * 2) / 3));
}

.flex-columns-4 {
   display: block;
   flex: 0 0 calc(25% - ((var(--gap) * 3) / 4));
}


breadcrumb-links {
   display: block;
   width: 100%;
   text-align: right;
   font-size: var(--base-font-size);
   font-weight: 300;
   padding: 0 0 var(--gap) 0;
}

breadcrumb-links a {
   color: var(--gray);
   border-bottom: 1px dotted var(--gray);
}

image-gallery {
   width: 100%;
   min-height: 200px;
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   gap: var(--gap);
   padding: 0 var(--content-inset);
   margin: var(--gap) 0;
}

image-gallery a {
   display: block;
   aspect-ratio: 16 / 9 auto;
   border-radius: calc(var(--base-font-size) * 0.5);
   background-position: center center;
   background-size: cover;
   transition: transform 0.2s ease-in-out, outline 0.2s ease-in-out;
   border: 1px solid #ccc;
   outline: 0;
   box-shadow: 0px 1px 3px 0px rgba(143, 143, 143, 0.3);
   position: relative;
}

image-gallery a:hover {
   border-color: var(--pink);
   /* outline: 4px solid var(--pink); */
   outline-offset: 2px;
   transform: scale(1.03);
}

image-gallery a .caption {
   display: none;
   position: absolute;
   top: calc(100% + 10px);
   left: 0;
   right: 0;
   text-align: center;
   width: 100%;
   box-sizing: border-box; 
   font-size: calc(var(--base-font-size) * 0.7);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

photo-container {
   display: block;
   aspect-ratio: 16 / 9 auto;
   overflow: hidden;
}

header-container {
   display: block;
   overflow: hidden;
   height: auto;
   width: 100%;
   aspect-ratio: 16 / 9 auto;
   background-size: cover;
   background-position: center center;
}

header-container a {
   width: 100%;
   height: 100%;
   display: block;
   border: 0;
}

.flex-columns-2 h5 {
   font-size: calc(var(--base-font-size) * 1.1);
}

.flex-columns-3 h5 {
   font-size: calc(var(--base-font-size) * 0.65);
}

.flex-columns-4 h5 {
   font-size: calc(var(--base-font-size) * 0.6);
}

/* POLAROID FRAME */
polaroid-frame {
   aspect-ratio: 1027 / 799 auto;
   display: block;
   position: relative;
   overflow: hidden;
   box-shadow: 0px 6px 8px 0px rgba(143, 143, 143, 0.6);
}

polaroid-frame a {
   border: 0;
}

polaroid-frame h5 {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   text-align: center;
   position: absolute;
   font-size: calc(var(--base-font-size) * 2.5);
   bottom: 0;
   height: 21.5%;
}

polaroid-bkgnd {
   width: 100%;
   border-radius: calc(var(--base-font-size) * 0.2);
   display: block;
   overflow: hidden;
}

polaroid-bkgnd img {
   width: 100%;
   display: block;
}

image-container {
   position: absolute;
   top: 10%;
   left: 3%;
   width: 94%;
   display: block;
   aspect-ratio: 16/9 auto;
   border-radius: calc(var(--base-font-size) * 0.1);
   overflow: hidden;
   z-index: 100;
   background-color: var(--lightgray);
   box-shadow: inset 0 0 1vw rgba(0, 0, 0, 0.2);
}

placeholder-photo {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
   background-color: var(--darkgray);
   overflow: hidden;
   background-size: cover;
   background-position: center center;
   box-shadow: inset 0 0 1vw rgba(0, 0, 0, 0.2);
}

polaroid-frame {
   transform: rotate(0.4deg);
   transition: transform 0.2s ease-in-out;
}

polaroid-frame:nth-child(2n) {
   transform: rotate(-1.3deg);
   scale: 1.01;
}

polaroid-frame:nth-child(3n) {
   transform: rotate(0.2deg);
   scale: 1.05;
}

polaroid-frame:nth-child(4n) {
   transform: rotate(-0.5deg);
   scale: 0.98;
}

polaroid-frame:nth-child(5n) {
   transform: rotate(-0.83deg);
   scale: 1.02;
}

polaroid-frame:nth-child(6n) {
   transform: rotate(0.9deg);
   scale: 0.97;
}

polaroid-frame.flex-columns-2:hover {
   transform: scale(1.1);
   z-index: 10;
   position: relative;
}

polaroid-frame:hover,
span > polaroid-frame:hover {
   z-index: 10;
   position: relative;
}

feature-testimonial {
   background-color: var(--feature-testimonial);
   display: block;
   padding: calc(var(--block-padding) * 2);
}

content-block {
   background-color: var(--lightgray);
   display: block;
   padding: var(--gap) var(--biggap);
   font-size: calc(var(--base-font-size) * 0.75);
   font-weight: 300;
   columns: 2;
}

text-block[about],
text-block[blue],
text-block[contact] {
   background-color: var(--blue);
   display: block;
   margin-top: var(--biggap);
   padding: var(--gap) var(--biggap);
   color: var(--white);
}
   
text-block[blue] p {
   font-size: calc(var(--base-font-size) * 0.6);
   columns: 2;
}

text-block[contact] {
   display: flex;
   flex-wrap: wrap;
   padding: var(--biggap);
}

text-block[contact] stack-h[top] {
   padding: 0;
   gap: var(--gap);
}

text-block[contact] a {
   color: var(--white);
   border-bottom-color: var(--white);
}

text-block[contact] a:hover {
   color: var(--white);
   border-bottom-color: var(--pink);
}

text-block[contact] strong {
   font-weight: 300;
   font-size: calc(var(--base-font-size) * 1.05);
}

text-block[contact] h4 {
   font-weight: 700;
   margin: 4vw 0 0.5vw 0;
}

text-block[contact] h4:first-child {
   margin-top: 1vw;
}

text-block[gray] {
   background-color: var(--darkgray);
}

text-block[darkblue] {
   background-color: var(--darkblue);
}

thumbnail-container {
   height: auto;
   flex: 0 0 calc(16.6667% - ((var(--gap) * 5) / 6));
   border: 1px solid #ccc;
   border-radius: 0.5em;
   background-color: var(--white);
   aspect-ratio: 16/9 auto;
   padding: var(--gap);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0px 1px 3px 0px rgba(143, 143, 143, 0.3);
}

thumbnail-container img {
   width: 100% !important;
   aspect-ratio: 16/9 auto;
}

thumbnail-container a {
   border: none;
   transition: transform 0.3s;
   cursor: pointer;
}

thumbnail-container a:hover {
   transform: scale(1.15);
}

feature-testimonials {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   align-items: stretch;
   justify-content: flex-start;
   gap: var(--gap);
   animation: fadein 2s;
}

feature-testimonials div {
   display: block;
   position: relative;
   border-radius: 0.5em;
   background-color: var(--white);
   border: 1px solid #ccc;
   box-shadow: 0px 1px 3px 0px rgba(143, 143, 143, 0.3);
   padding: var(--biggap) var(--biggap) calc(var(--biggap) + var(--gap)) var(--biggap);
   font-size: calc(var(--base-font-size) * 0.4);
}

feature-testimonials span {
   width: calc(100% - (var(--biggap) * 2));
   display: block;
   position: absolute;
   bottom: var(--biggap);
   font-size: calc(var(--base-font-size) * 0.6);
}




feature-testimonials stack-h {
   flex-direction: column-reverse;
   gap: calc(var(--gap) * 0.2);
}

feature-testimonials span {
   font-size: calc(var(--base-font-size) * .8);
   width: calc(100% - (var(--biggap) * 2));
}


feature-testimonial h3 {
   font-weight: 300;
   position: relative;
}

feature-testimonial h3 span {
   position: relative;
   z-index: 100;
}

feature-testimonial h3::before {
   content: "";
   background: url("/images/quote.png") top left no-repeat;
   background-size: contain;
   width: calc(var(--gap) * 3.5);
   height: calc(var(--gap) * 2.5);
   position: absolute;
   opacity: 0.2;
   top: calc(-2 * var(--gap));
   left: calc(-2.5 * var(--gap));
   z-index: 0;
}

feature-testimonial h3::after {
   content: "";
   transform: rotate(180deg);
   background: url("/images/quote.png") top left no-repeat;
   background-size: contain;
   width: calc(var(--gap) * 3.5);
   height: calc(var(--gap) * 2.5);
   position: absolute;
   opacity: 0.2;
   bottom: calc(-2 * var(--gap));
   right: calc(-2.5 * var(--gap));
   z-index: 0;
}

feature-testimonials h3 {
   font-weight: 300;
   font-size: calc(var(--base-font-size) * .8);
   padding-bottom: var(--biggap);
   position: relative;
}

feature-testimonials h3::before {
   content: "";
   background: url("/images/quote.png") top left no-repeat;
   background-size: contain;
   width: calc(var(--gap) * 2.5);
   height: calc(var(--gap) * 1.5);
   position: absolute;
   opacity: 0.5;
   top: calc(-1.5 * var(--gap));
   left: calc(-1 * var(--gap));
   z-index: 0;
}

feature-testimonials h3::after {
   content: "";
   transform: rotate(180deg);
   background: url("/images/quote.png") top left no-repeat;
   background-size: contain;
   width: calc(var(--gap) * 2.5);
   height: calc(var(--gap) * 1.5);
   position: absolute;
   opacity: 0.5;
   bottom: calc(-0.5 * var(--gap) + var(--biggap));
   right: calc(-1 * var(--gap));
   z-index: 0;
}

featured-tag {
   display: inline-block;
   color: #fff; 
   position: absolute; 
   top: 10px; 
   right: 10px;
   background-color: var(--pink); 
   padding: .25vw .5vw; 
   font-size: calc(var(--base-font-size) * .3); 
   font-weight: 800;
   text-align: center;
   z-index:100; 
   width: 100px;
   border-radius: 1vw;
   letter-spacing: 0px;
}

blockquote {
   position: relative;
   display: block;
   padding: var(--gap) 0 0 0;
   background-color: var(--lightgray);
   border-radius: 0.5em;
}

blockquote::before {
   content: "";
   background: url("/images/quote-white.png") top left no-repeat;
   background-size: contain;
   width: calc(var(--gap));
   height: calc(var(--gap));
   position: absolute;
   opacity: 0.2;
   top: calc(var(--gap) * .75);
   left: calc(-1.5 * var(--gap));
   z-index: 0;
}

blockquote::after {
   content: "";
   transform: rotate(180deg);
   background: url("/images/quote-white.png") top left no-repeat;
   background-size: contain;
   width: calc(var(--gap));
   height: calc(var(--gap));
   position: absolute;
   opacity: 0.2;
   bottom: calc(var(--gap) * 3);
   right: calc(-1.5 * var(--gap));
   z-index: 0;
}

blockquote cite {
   font-weight: 500;
   font-style: italic;
/*   font-size: calc(var(--base-font-size) * 1);
   padding-bottom: var(--biggap); */
   position: relative;
}


/* FOOTER */


footer {
   color: var(--white);
   background-color: var(--darkblue);
   padding: 1em 2em;
   /* max-width: 1500px; */
   margin: 0 auto;
   font-size: calc(var(--base-font-size) * 0.75);
}

footer a {
   color: var(--white);
   border: none;
}

footer a.button {
   display: inline-block;
   font-size: calc(var(--base-font-size) * 0.5);
   border-radius: var(--base-font-size);
   padding: calc(var(--base-font-size) * 0.25) calc(var(--base-font-size) * 0.5);
   font-weight: 700;
   background-color: #efefef;
   color: var(--darkgray);
   border: none;
   margin: 0;
   transition: background-color 0.3s ease, color 0.3s ease;
}

footer a.button:hover {
   color: var(--white);
   background-color: var(--pink);
}

footer stack-h img {
   width: calc(var(--base-font-size) * 5);
}

footer h2 {
   font-size: calc(var(--base-font-size) * 1.5);
   line-height: calc(var(--base-font-size) * 2.5);
}

footer stack-h[nowrap] {
   align-items: flex-start;
}

img.we-make-image {
   max-width: 25% !important;
}

#bts-slideshow-app {
   height: 90vw;
}

bts-slideshow {
   display: block;
   position: relative;
}

bts-slideshow h5 {
   font-size: calc(var(--base-font-size) * .8);
}

bts-grid {
   margin-top: 5vw;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1vw;
}

iframe {
   width: 100%;
   height: 100%;
 }

.video-player-multi-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 1vw;
   width: 100%;
   box-sizing: border-box;
}

.video-player-container {
   flex: 0 0 calc(50% - 1vw);
   width: 100%;
   aspect-ratio: 16/9;
   box-sizing: border-box;
}

.featured-video-container .video-player-container,
.hero-video-container .video-player-container {
   flex: 1 0 calc(50% - 1vw);
}

.video-caption {
   font-size: calc(var(--base-font-size) * .8);
   font-weight: 300;
   color: var(--darkgray);
}

.hero-video-container {
   display: block;
   width: 100%;
   aspect-ratio: 16/9;
}

.hero-video-container .video-player-container {
   margin-bottom: 0;
}

.featured-video-container {
   padding: 0 var(--gap);
   display: block;
   width: 100%;
   aspect-ratio: 16/9;
}

.pd-video-multi-player .video-player-container .react-player,
.featured-video-container .video-player-container .react-player {
   border-radius: 1vw;
   aspect-ratio: 16/9;
   width: 100%;
   display: block;
   background: url(/images/gear-spinner-white.svg) no-repeat center center;
   background-size: 30%;
   background-color: rgba(0, 0, 0, 0.4);
   margin-bottom: 0;
}

.featured-video-container.frontpage-featured-video .video-player-container .react-player{
   background: url(/images/pd-frontpage-placeholder.jpg) no-repeat center center;
   background-size: contain;
}

/* FORM */

form-container {
   display: block;
   padding: var(--gap) var(--biggap);
   border-radius: calc(var(--base-font-size) * 0.5);
}

label {
   font-size: calc(var(--base-font-size) * 0.625);
   padding-bottom: calc(var(--base-font-size) * 0.25);
}

input, textarea {
   font-family: "Arial", sans-serif;
}

textarea {
   border-bottom-right-radius: 0 !important;
}

input::placeholder, textarea::placeholder {
   font-weight: 400;
   color: var(--lightgray);
   font-family: "Arial", sans-serif;
}

input::file-selector-button {
   font-weight: bold;
   color: var(--white);
   padding: 0.5vw 1vw;
   border: thin solid grey;
   border-radius: calc(var(--base-font-size) * 1);
   background-color: var(--darkgray);
   font-family: "Noto Sans", sans-serif;
 }

 input::file-selector-button:hover {
   cursor: pointer;
   background-color: var(--darkblue);
   transition: background-color 0.3s ease;
 }

input:not([type="file"]),
textarea {
   font-size: calc(var(--base-font-size) * 0.75);
   border: 1px solid #ccc;
   border-radius: calc(var(--base-font-size) * 0.5);
   padding: calc(var(--base-font-size) * 0.25) calc(var(--base-font-size) * 0.5);
}

input[type="file"] {
   font-family: "Noto Sans", sans-serif;
   font-size: calc(var(--base-font-size) * 0.625);
   margin-bottom: calc(var(--base-font-size) * 2);
}

input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"] {
   position: relative;
   border: none;
   background-color: transparent;
   border-top-left-radius: calc(var(--base-font-size) * .25);
   border-top-right-radius: calc(var(--base-font-size) * .25);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   border-bottom: 1px solid var(--darkgray);
   padding: 0 calc(var(--base-font-size) *.4);
   font-size: calc(var(--base-font-size) * 1.2);
   line-height: calc(var(--base-font-size) * 2);
   color: #000;
   font-weight: 400;
   width: 60vw;
   outline: none; 
}

.freeform-row {
   padding-bottom: calc(var(--base-font-size) * 0.5);
}

.freeform-instructions {
   font-size: calc(var(--base-font-size) * 0.625) !important;
   color: var(--gray) !important;
   font-weight: 400;
   padding-bottom: calc(var(--base-font-size) * .5);
}

ul.freeform-errors {
   font-size: calc(var(--base-font-size) * 0.5);
}

.freeform-row .freeform-column label:has(input[type="checkbox"]), .freeform-row .freeform-column label:has(input[type="radio"]) {
   display: inline-block !important;
   flex-direction: row !important;
   margin-right: calc(var(--base-font-size));
}
 
label input[type="checkbox"], label input[type="radio"] {
   vertical-align: middle;
   display: inline-block !important;
   box-sizing: border-box;
   width: var(--base-font-size) !important;
   height: var(--base-font-size) !important;
   padding: 0;
   margin: 0 1vw 0 0 !important;
   border: 2px solid var(--checkbox-border-color);
   appearance: none;
   background-color: transparent;
   outline: none;
   transition: outline 0.1s;
   transform: translateY(-.2vw);
 }
 
 label input[type="checkbox"]:checked, label input[type="radio"]:checked {
   background-size: cover;
   padding: 2px;
 }
 
 label input[type="checkbox"]:not(:disabled):checked, label input[type="radio"]:not(:disabled):checked {
   border-color: var(--checkbox-checked-color);
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23274c77" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
 }
 
 label input[type="checkbox"]:disabled, label input[type="radio"]:disabled {
   background-color: var(--checkbox-disabled-bg-color);
 }
 
 label input[type="checkbox"]:disabled:checked, label input[type="radio"]:disabled:checked {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %238b8c89" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
 }
 
 @media (hover: hover) {
   label input[type="checkbox"]:not(:disabled):hover, label input[type="radio"]:not(:disabled):hover {
     background-color: var(--checkbox-hover-color);
     outline: 6px solid var(--checkbox-hover-color);
     transform: scale(1.05) translateY(-.2vw);
   }
 }
 
 label input[type="checkbox"]:focus-visible, label input[type="radio"]:focus-visible {
   outline: 6px solid var(--checkbox-hover-color);
   transform: scale(1.05);
 }
 
 @media (prefers-reduced-motion: reduce) {
   label input[type="checkbox"], label input[type="radio"] {
     transition: none;
   }
 }

 select {
   /* appearance: none; */
   background-color: #fff;
   cursor: pointer;
   font-size: calc(var(--base-font-size) * 0.75);
   border: 1px solid #ccc;
   border-radius: calc(var(--base-font-size) * 0.5);
   padding: calc(var(--base-font-size) * 0.25) calc(var(--base-font-size) * 1);
   height: calc(var(--base-font-size) * 2);
   font-family: "Noto Sans", sans-serif;
   background-color: var(--white);
}

.freeform-row .freeform-column select.freeform-input  {
   width: 50%;
}

/* select::before,
select::after {
  --size: 0.3rem;
  position: absolute;
  content: "";
  right: 1rem;
  pointer-events: none;
  z-index: 100;
}

select::before {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-bottom: var(--size) solid black;
  top: 40%;
}

select::after {
  border-left: var(--size) solid transparent;
  border-right: var(--size) solid transparent;
  border-top: var(--size) solid black;
  top: 55%;
} */

.draft-list {
   padding: var(--gap);
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
   font-size: calc(var(--base-font-size) * 0.5);
}


.draft-list div {
   display: block;
   flex: 0 0 calc(33.3333% - ((var(--gap) * 2) / 3));
   box-sizing: border-box;
}

.draft-list span {
   display: block;
   position: relative;
   width: 100%;
   aspect-ratio: 1/1;
   background-color: var(--darkgray);
}

.draft-list.client-logos span {
   display: block;
   position: relative;
   width: 100%;
   aspect-ratio: 1/1;
   background-color: var(--white);
}

.draft-list span img {
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   transform: translateY(-50%);
}


.draft-list ul {
   text-align: left;
}

ul {
	margin: 0;
    padding: 0 0 1vw 1.5vw;
}

li {
	text-wrap: pretty;
    padding-top: .5vw;
}


#categories a {
   display: inline-block;
   margin-bottom: calc(var(--gap) * .3);
}