@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap");
.photo--fade-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.photo--fade-container div {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 241%;
  transition: opacity 1.25s ease-out, background-size 2s ease-in-out;
}
.photo--fade-container .photo--zoomed {
  background-size: 100%;
}

.photo--fade-solo {
  transform: translateX(3px);
  z-index: 10;
  background-image: url("src/images/carrieThemHomeSolo.png");
}

.photo--fade-color {
  z-index: 5;
  background-image: url("src/images/carrieThemHomeColor.png");
}

.photo--fade-bnw {
  z-index: 3;
  background-image: url("src/images/carrieThemHomeb&w.png");
}

.photo--final-spot {
  transform: translateX(-34%);
  scale: 1.25;
}

.navigation {
  position: absolute;
  z-index: 70;
  right: calc(-1 * var(--nav-ms));
  top: 0;
  height: 100%;
  min-width: var(--nav-ms);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}
.navigation > div {
  transition: all 0.6s cubic-bezier(0.83, 0.08, 0.67, 1.14);
}
.navigation .nav--link {
  border: 5px solid black;
  padding: 5px;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 2.5rem;
  background-color: rgb(245, 240, 233);
}
.navigation .nav--hero {
  width: 100px;
  height: 100px;
  border: 5px solid black;
  border-radius: 50%;
  background-image: url("./src/images/dogs/dogs18.jpg");
  background-size: cover;
  background-position: center;
}

@media only screen and (max-width: 768px) {
  .navigation {
    overflow: visible;
  }
  .navigation .nav--hero {
    transform: translateX(-13vw);
  }
  .navigation .slide--out-menu {
    transform: translateX(-50vw);
  }
}
#contactCard {
  margin-top: 0px;
}

#contactForm {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 80%;
  padding: 1rem;
  margin-top: 8px;
  animation: popInFromLeft 0.5s ease-in;
}
#contactForm .form--sent {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#contactForm > .form-group {
  display: flex;
  align-content: flex-start;
  margin: 1rem;
}
#contactForm > .form-group > label {
  position: relative;
  width: 90px;
  text-transform: uppercase;
  display: inline-block;
  font-family: var(--header-font);
}
#contactForm > .form-group input,
#contactForm > .form-group textarea {
  width: 100%;
  max-width: 520px;
  line-height: 1.5rem;
}
#contactForm > .form-group input.invalid,
#contactForm > .form-group textarea.invalid {
  border: 1px solid red;
}
#contactForm > .form-group input.invalid::after,
#contactForm > .form-group textarea.invalid::after {
  position: absolute;
  top: 110%;
  left: 0;
  width: 400px;
  color: red;
  content: attr(data-value);
}
#contactForm #submit {
  position: absolute;
  bottom: -60px;
  left: calc(50% - 50px);
  width: 100px;
  height: 50px;
  font-size: 1.2rem;
  font-family: var(--header-font);
  background-color: none;
  background-image: url("./src/components/images/c3.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#contactForm #submit:hover {
  scale: 1.05;
}
#contactForm #submit:hover::after {
  content: "Submit";
}

@keyframes upAndIn {
  0% {
    rotate: 0deg;
  }
  70% {
    rotate: 0deg;
  }
  80% {
    transform: translateY(-14 5%);
    rotate: -7deg;
  }
  100% {
    transform: translateY(-145%);
    rotate: -10deg;
  }
}
@keyframes chipper {
  0% {
    transform: translateY(0px) rotatey(0deg) scaleY(100%);
  }
  10% {
    transform: translateY(10px) rotatey(0deg) scaleY(90%);
  }
  20% {
    transform: translateY(0px) rotatey(0deg) scaleY(100%);
  }
  30% {
    transform: translateY(-30px) rotatey(0deg) scaleY(100%);
  }
  50% {
    transform: translateY(-30px) rotatey(360deg) scaleY(100%) scaleX(100%);
  }
  68% {
    transform: translateY(10px) rotatey(360deg) scaleY(90%) scaleX(105%);
  }
  80% {
    transform: translateY(15px) rotatey(360deg) scaleY(85%) scaleX(108%);
  }
  90% {
    transform: translateY(15px) rotatey(360deg) scaleY(85%) scaleX(108%);
  }
  100% {
    transform: translateY(0px) rotatey(360deg) scaleX(100%);
  }
}
@keyframes popInFromLeft {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(0vh);
  }
}
@keyframes popInSayHi1 {
  0% {
    rotate: 0deg;
    translate: 0px 100px;
  }
  70% {
    rotate: 900deg;
    translate: -10px -190px;
    scale: 0.9;
  }
  80% {
    rotate: 915deg;
    translate: -20px -195px;
    scale: 0.85;
  }
  90% {
    rotate: 720deg;
    translate: 0px 0px;
    scale: 1;
  }
}
@keyframes popInSayHi2 {
  0% {
    rotate: 0deg;
    translate: 0px 100px;
  }
  25% {
    translate: 180px -70px;
    scale: 0.7;
  }
  50% {
    translate: 0px -250px;
    scale: 0.65;
    rotate: 0deg;
  }
  100% {
    scale: 1;
    rotate: 1800deg;
  }
}
@keyframes popInSayHi3 {
  0% {
    rotate: 0deg;
    translate: 0px 300px;
  }
  15% {
    rotate: 0deg;
    translate: 0px -300px;
  }
  30% {
    rotate: 0deg;
    translate: 0px 0px;
  }
  45% {
    rotate: 0deg;
    translate: 0px -110px;
  }
  60% {
    rotate: 0deg;
    translate: 0px 0px;
  }
  70% {
    rotate: 0deg;
    translate: 0px -50px;
  }
  80% {
    rotate: 0deg;
    translate: 0px 0px;
  }
  90% {
    rotate: 0deg;
    translate: 0px -10px;
  }
  100% {
    rotate: 0deg;
    translate: 0px 0px;
  }
}
@media only screen and (max-width: 768px) {
  .ref--container {
    width: 100%;
    margin: 0;
  }
  .ref--linkbox {
    width: 100%;
  }
  #contactForm {
    width: 100%;
    margin-left: 0;
  }
  #contactForm .form-group {
    margin-bottom: 0;
    flex-direction: column;
  }
  #contactForm textarea {
    height: 25vh;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --header-text: "";
  --main-text: "";
  --sub-text: "";
  --accent-color: #fff700;
  --background-color: rgb(5, 255, 255);
  --ghost-color: rgb(230, 232, 223);
  --moody-background-color: rgb(100, 173, 173);
  --textcolor: black;
  --button-text-color: var(var(--background-color));
  --d-accent-color: #ffff8a;
  --d-background-color: #333;
  --d-textcolor: white;
  --trans: 1.5s;
  --landscape: rgba(0, 128, 0, 0.3);
  --skillsetfont: rgba(51, 51, 51, 0.243);
  --paper: #f5f5e6;
  --header-font: "Buda", cursive;
  --letter-font: "Libre Baskerville", serif;
  --bad-input-text: "Hi! Please fill all sections out";
  --copy-svg: url("data:image/svg+xml, %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='15px' height='15px' viewBox='0 0 115.77 122.88' style='enable-background:new 0 0 115.77 122.88' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bfill-rule:evenodd;clip-rule:evenodd;%7D%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M89.62,13.96v7.73h12.19h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02v0.02 v73.27v0.01h-0.02c-0.01,3.84-1.57,7.33-4.1,9.86c-2.51,2.5-5.98,4.06-9.82,4.07v0.02h-0.02h-61.7H40.1v-0.02 c-3.84-0.01-7.34-1.57-9.86-4.1c-2.5-2.51-4.06-5.98-4.07-9.82h-0.02v-0.02V92.51H13.96h-0.01v-0.02c-3.84-0.01-7.34-1.57-9.86-4.1 c-2.5-2.51-4.06-5.98-4.07-9.82H0v-0.02V13.96v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07V0h0.02h61.7 h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02V13.96L89.62,13.96z M79.04,21.69v-7.73v-0.02h0.02 c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v64.59v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h12.19V35.65 v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07v-0.02h0.02H79.04L79.04,21.69z M105.18,108.92V35.65v-0.02 h0.02c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v73.27v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h61.7h0.02 v0.02c0.91,0,1.75-0.39,2.37-1.01c0.61-0.61,1-1.46,1-2.37h-0.02V108.92L105.18,108.92z'/%3E%3C/g%3E%3C/svg%3E");
  --checked-svg: url("<?xml version='1.0' encoding='utf-8'?><svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='122.881px' height='89.842px' viewBox='0 0 122.881 89.842' enable-background='new 0 0 122.881 89.842' xml:space='preserve'><g><path d='M1.232,55.541c-1.533-1.388-1.652-3.756-0.265-5.289c1.388-1.534,3.756-1.652,5.29-0.265l34.053,30.878l76.099-79.699 c1.429-1.501,3.804-1.561,5.305-0.132c1.502,1.428,1.561,3.803,0.133,5.305L43.223,88.683l-0.005-0.005 c-1.396,1.468-3.716,1.563-5.227,0.196L1.232,55.541L1.232,55.541z'/></g></svg>");
}

.white {
  color: aliceblue;
}

ul {
  list-style: none;
}

.b {
  display: inline;
  font-weight: 800;
}

.ind {
  margin-left: 1rem;
}

.words-header {
  font-family: var(--business-font);
}

.h {
  font-family: var(--letter-font);
  font-size: 1.5rem;
  line-height: 1rem;
}

.handy {
  font-family: var(--letter-font);
  font-size: 2.5rem;
  line-height: 3rem;
}

.under {
  text-decoration: underline;
}

.trans {
  opacity: 0;
}

.transition--cover .offset--down {
  transition: none;
  transform: translateY(100vh);
}
.transition--cover .offset--up {
  transform: translateY(-100vh);
}
.transition--cover.offset--up {
  transform: translateY(-100vh);
}
.transition--cover.offset--upS {
  transform: translateY(-350vh);
}
.transition--cover.offset--down {
  transform: translateY(100vh);
}
.transition--cover.offset--left-soft {
  transform: translateX(-120%);
  opacity: 0;
}
.transition--cover.offset--left {
  transform: translateX(-100vw);
}
.transition--cover.offset--right {
  transform: translateX(100vw);
}
.transition--cover.faded--down {
  transform: translateY(100%);
  opacity: 0%;
}
.transition--cover.shrunk {
  scale: 0;
}

@media only screen and (max-width: 768px) {
  .h {
    font-family: var(--letter-font);
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 1.75rem;
  }
  .ind {
    margin-left: 2rem;
  }
}
.tucked--back-slides {
  position: absolute;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  background-color: rgb(36, 37, 39);
  display: flex;
  flex-direction: column;
  gap: 80px;
  overflow: hidden;
}

.slide--row {
  position: relative;
  display: flex;
  height: 250px;
  justify-content: space-evenly;
  gap: 25px;
  transform: rotate(-10deg) translateY(-1vh);
}
.slide--row .slides {
  position: absolute;
  left: -350px;
  width: 320px;
  height: 100%;
  border: 3px dashed white;
  border-radius: 10px;
  animation: slideShowInBack 28s LINEAR infinite;
  background-size: cover;
  background-position: center;
}
.slide--row .slides:nth-child(7n+1) {
  animation-delay: 0s;
}
.slide--row .slides.paused {
  animation-play-state: paused;
}
.slide--row .slides:nth-child(7n+2) {
  animation-delay: 4s;
}
.slide--row .slides.paused {
  animation-play-state: paused;
}
.slide--row .slides:nth-child(7n+3) {
  animation-delay: 8s;
}
.slide--row .slides.paused {
  animation-play-state: paused;
}
.slide--row .slides:nth-child(7n+4) {
  animation-delay: 12s;
}
.slide--row .slides.paused {
  animation-play-state: paused;
}
.slide--row .slides:nth-child(7n+5) {
  animation-delay: 16s;
}
.slide--row .slides.paused {
  animation-play-state: paused;
}
.slide--row .slides:nth-child(7n+6) {
  animation-delay: 20s;
}
.slide--row .slides.paused {
  animation-play-state: paused;
}
.slide--row .slides:nth-child(7n+7) {
  animation-delay: 24s;
}
.slide--row .slides.paused {
  animation-play-state: paused;
}
.slide--row .slides:nth-child(1) {
  background-image: url("./src/images/dogs/dogs1.jpg");
}
.slide--row .slides:nth-child(2) {
  background-image: url("./src/images/dogs/dogs2.jpg");
}
.slide--row .slides:nth-child(3) {
  background-image: url("./src/images/dogs/dogs3.jpg");
}
.slide--row .slides:nth-child(4) {
  background-image: url("./src/images/dogs/dogs4.jpg");
}
.slide--row .slides:nth-child(5) {
  background-image: url("./src/images/dogs/dogs5.jpg");
}
.slide--row .slides:nth-child(6) {
  background-image: url("./src/images/dogs/dogs6.jpg");
}
.slide--row .slides:nth-child(7) {
  background-image: url("./src/images/dogs/dogs7.jpg");
}
.slide--row .slides:nth-child(8) {
  background-image: url("./src/images/dogs/dogs8.jpg");
}
.slide--row .slides:nth-child(9) {
  background-image: url("./src/images/dogs/dogs9.jpg");
}
.slide--row .slides:nth-child(10) {
  background-image: url("./src/images/dogs/dogs10.jpg");
}
.slide--row:nth-child(2n) .slides {
  animation: slideShowInBackRev 28s linear infinite;
}
.slide--row:nth-child(2n) .slides:nth-child(7n+1) {
  animation-delay: 0s;
}
.slide--row:nth-child(2n) .slides:nth-child(7n+2) {
  animation-delay: 4s;
}
.slide--row:nth-child(2n) .slides:nth-child(7n+3) {
  animation-delay: 8s;
}
.slide--row:nth-child(2n) .slides:nth-child(7n+4) {
  animation-delay: 12s;
}
.slide--row:nth-child(2n) .slides:nth-child(7n+5) {
  animation-delay: 16s;
}
.slide--row:nth-child(2n) .slides:nth-child(7n+6) {
  animation-delay: 20s;
}
.slide--row:nth-child(2n) .slides:nth-child(7n+7) {
  animation-delay: 24s;
}
.slide--row:nth-child(2n) .slides:nth-child(1) {
  background-image: url("./src/images/dogs/dogs11.jpg");
}
.slide--row:nth-child(2n) .slides:nth-child(2) {
  background-image: url("./src/images/dogs/dogs12.jpg");
}
.slide--row:nth-child(2n) .slides:nth-child(3) {
  background-image: url("./src/images/dogs/dogs13.jpg");
}
.slide--row:nth-child(2n) .slides:nth-child(4) {
  background-image: url("./src/images/dogs/dogs14.jpg");
}
.slide--row:nth-child(2n) .slides:nth-child(5) {
  background-image: url("./src/images/dogs/dogs15.jpg");
}
.slide--row:nth-child(2n) .slides:nth-child(6) {
  background-image: url("./src/images/dogs/dogs16.jpg");
}
.slide--row:nth-child(2n) .slides:nth-child(7) {
  background-image: url("./src/images/dogs/dogs17.jpg");
}
.slide--row:nth-child(2n) .slides:nth-child(8) {
  background-image: url("./src/images/dogs/dogs18.jpg");
}
.slide--row:nth-child(2n) .slides:nth-child(9) {
  background-image: url("./src/images/dogs/dogs19.jpg");
}
.slide--row:nth-child(2n) .slides:nth-child(10) {
  background-image: url("./src/images/dogs/dogs20.jpg");
}
.slide--row:nth-child(2n) .slides.paused {
  animation-play-state: paused;
}
.slide--row:nth-child(3n) .slides:nth-child(1) {
  background-image: url("./src/images/dogs/dogs21.jpg");
}
.slide--row:nth-child(3n) .slides:nth-child(2) {
  background-image: url("./src/images/dogs/dogs22.jpg");
}
.slide--row:nth-child(3n) .slides:nth-child(3) {
  background-image: url("./src/images/dogs/dogs23.jpg");
}
.slide--row:nth-child(3n) .slides:nth-child(4) {
  background-image: url("./src/images/dogs/dogs24.jpg");
}
.slide--row:nth-child(3n) .slides:nth-child(5) {
  background-image: url("./src/images/dogs/dogs25.jpg");
}
.slide--row:nth-child(3n) .slides:nth-child(6) {
  background-image: url("./src/images/dogs/dogs26.jpg");
}
.slide--row:nth-child(3n) .slides:nth-child(7) {
  background-image: url("./src/images/dogs/dogs27.jpg");
}
.slide--row:nth-child(3n) .slides:nth-child(8) {
  background-image: url("./src/images/dogs/dogs28.jpg");
}
.slide--row:nth-child(3n) .slides:nth-child(9) {
  background-image: url("./src/images/dogs/dogs29.jpg");
}
.slide--row:nth-child(3n) .slides:nth-child(10) {
  background-image: url("./src/images/dogs/dogs30.jpg");
}
.slide--row:nth-child(3n) .slides.paused {
  animation-play-state: paused;
}
.slide--row:nth-child(4n) .slides:nth-child(1) {
  background-image: url("./src/images/dogs/dogs31.jpg");
}
.slide--row:nth-child(4n) .slides:nth-child(2) {
  background-image: url("./src/images/dogs/dogs32.jpg");
}
.slide--row:nth-child(4n) .slides:nth-child(3) {
  background-image: url("./src/images/dogs/dogs33.jpg");
}
.slide--row:nth-child(4n) .slides:nth-child(4) {
  background-image: url("./src/images/dogs/dogs34.jpg");
}
.slide--row:nth-child(4n) .slides:nth-child(5) {
  background-image: url("./src/images/dogs/dogs35.jpg");
}
.slide--row:nth-child(4n) .slides:nth-child(6) {
  background-image: url("./src/images/dogs/dogs36.jpg");
}
.slide--row:nth-child(4n) .slides:nth-child(7) {
  background-image: url("./src/images/dogs/dogs37.jpg");
}
.slide--row:nth-child(4n) .slides:nth-child(8) {
  background-image: url("./src/images/dogs/dogs38.jpg");
}
.slide--row:nth-child(4n) .slides:nth-child(9) {
  background-image: url("./src/images/dogs/dogs39.jpg");
}
.slide--row:nth-child(4n) .slides:nth-child(10) {
  background-image: url("./src/images/dogs/dogs40.jpg");
}
.slide--row:nth-child(4n) .slides.paused {
  animation-play-state: paused;
}

@keyframes slideShowInBack {
  0% {
    left: -350px;
  }
  100% {
    left: calc(100vw + 350px);
  }
}
@keyframes slideShowInBackRev {
  0% {
    left: calc(100vw + 350px);
  }
  100% {
    left: -350px;
  }
}
:root {
  --nav-ms: 200px;
}

.main--card {
  position: absolute;
  z-index: 40;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 228, 196, 0.351);
  transition: all 1s ease-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}
.main--card .name {
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--letter-font);
  font-size: 2rem;
  text-decoration: underline;
  background-color: rgba(255, 255, 255, 0.818);
}
.main--card .title {
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--letter-font);
  font-size: 1.2rem;
  background-color: rgba(255, 255, 255, 0.818);
}

.sec--card {
  position: absolute;
  z-index: 40;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(238, 210, 175);
  transition: all 1s ease-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.grid--box {
  margin-top: 120px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10%;
  width: 100%;
  max-width: 480px;
  overflow-y: scroll;
}
.grid--box > div {
  border: 1px solid black;
}
.grid--box .grid1 {
  display: grid;
  grid-template-rows: 400px auto;
}
.grid--box .grid1 .grid--img {
  background-image: url("./src/images/dogs/dogs1.jpg");
  background-size: cover;
  background-position: center;
}
.grid--box .grid1 .grid--blurb {
  padding: 8px 16px;
  overflow-wrap: break-word;
  max-width: 95vw;
}
.grid--box .grid2 {
  display: grid;
  grid-template-rows: 400px auto;
}
.grid--box .grid2 .grid--img {
  background-image: url("./src/images/humanelogo.png");
  background-size: cover;
  background-position: center;
}
.grid--box .grid2 .grid--blurb {
  padding: 8px 16px;
  overflow-wrap: break-word;
}

#missionCard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  font-size: 1.25rem;
}

@media only screen and (max-width: 768px) {
  #missionCard {
    justify-content: flex-start;
    padding-top: 16vh;
    height: 100%;
    overflow-y: scroll;
  }
  .trans--mobile {
    opacity: 0.1;
  }
  .main--card {
    justify-content: flex-end;
    align-items: center;
  }
  .sec--card {
    max-height: 90vh;
    overflow: scroll;
    padding-top: 16vh;
  }
  h3 {
    margin-top: 10px;
  }
  .grid--box {
    margin-top: 30px;
    max-width: 100vw;
  }
  .grid--box > div {
    max-width: 100vw;
  }
  .grid--box .grid2 {
    margin-bottom: 10vh;
  }
}
footer {
  grid-area: footer;
  height: 10vh;
  max-height: 400px;
  width: 100%;
  max-width: 800px;
  background-color: burlywood;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  transition: all 0.5s ease-out;
}
footer img {
  max-width: 50px;
  max-height: 50px;
}

@media only screen and (max-width: 768px) {
  footer {
    font-size: 0.8rem;
  }
}
:root {
  --letter-sizing: 45px;
}

.site--shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 90% 10%;
  grid-template-areas: "body" "footer";
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.business--card-container {
  position: relative;
  width: 100vw;
  max-width: 800px;
  height: 100%;
  grid-area: body;
}
.business--card-container .title--container {
  position: absolute;
  z-index: 90;
  top: calc(-1 * var(--letter-sizing) - 10px);
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.6s cubic-bezier(0.83, 0.08, 0.67, 1.14);
}
.business--card-container .title--container.slide--out-menu {
  left: -50vw;
  transition: all 0.6s cubic-bezier(0.83, 0.08, 0.67, 1.14);
}
.business--card-container .title--letter {
  width: calc(3.5 * var(--letter-sizing));
  height: var(--letter-sizing);
  background-color: rgba(255, 255, 255, 0.818);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--letter-font);
  font-size: 270%;
  opacity: 0;
}
.business--card-container .title--letter.drop--in {
  transition: all 2s ease-out;
  transform: translateY(calc(20px + var(--letter-sizing)));
  opacity: 1;
}

.trans {
  opacity: 0;
}

@media all and (max-width: 1023px) and (orientation: portrait) {
  .site--shell {
    align-items: flex-start;
  }
}
@media only screen and (max-width: 768px) {
  :root {
    --letter-sizing: 35px;
  }
  .business--card-container .title--container .title--letter.drop--in {
    transform: translateY(0);
    font-size: 2rem;
  }
}/*# sourceMappingURL=index.css.map */