/* ~~~~~~ Global ~~~~~~ */
body {
  /* Bgnd Color & Image */
  /*background-color: #030F2D;*/
  background-image: url("../images/shapes/png/bgnd_noise.png");
  background-repeat: repeat;
  
  /* Type */
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 300;
  font-style: normal;
  line-height: 26px;

  /* Grey Light */
  color: #FFF3FF;

  margin: 0;
}

video {
  width: 100%;
  height: auto;
}


ul {
  padding-left: 0px;
} 

ul > li {
  display: inline-block;
  list-style-type: circle;
  padding-right: 16px;
}


/* ~~~~~~ Type ~~~~~~ */
h1 {
  /* Grey Mid */
  color: #E6E0ED;
  font-family: 'Open Sans', sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 42px;
  font-style: normal;
  text-align: left;
}

h2 {
  margin: auto;
  font-weight: 600;
  font-size: 24px;
}

h3 {
    /* Light Pink */
  color: #FDC1E3;
  height: 60px;
  font-size: 64px;
  font-weight: 700;
  text-align: left;
  margin-bottom: 18px;
}

strong {
  font-weight: 700;
}

.flex-container.col {
  flex-direction: column;
}


/* ~~~~~~ Header ~~~~~~ */
#header {
  padding: 0px 4% 0px 4%;
}

.work .post-it img {
  width: 506px;
}

.work .tablet video {
  width: 600px; 
  padding: 130px 100px 0px 0px;

  /*padding-right: 100px;*/
    /*transform: scale(0.6);*/
    /*margin-left: -35%;*/
}

#header #navigation li a#work, #header #navigation li a#about  {
  font-weight: 700;
  color: #F75DC0;
  text-decoration: overline;
}

#header #navigation li a#about {
  font-weight: 700;
  color: #F75DC0;
  text-decoration: overline;
}

.about p a {
  font-weight: 700;
  color: #FDC1E3;
  text-decoration: none;
  /*text-decoration: underline;*/
}



/* ~~~~~~ Intro ~~~~~~ */
#intro-mobile {
  display: none;
}

#intro {
  display: flex;
  margin-top: 40px;
  /*margin-bottom: 7%;*/
  margin-bottom: 90px;
  width: 90%;

  gap: 2%;

/*        align-items: stretch;
  flex-wrap: nowrap;
  align-content: space-around;
  flex-shrink: 1;*/

/*        width: 100%;
  margin: auto;
*/      

}


#intro img {
  width: 100%;
  height: auto;

}


#intro .flex-container > div {
/*        border-color: blueviolet;
  border-style: solid; 
*/
  /*height: 100%;*/
  margin: auto;
  /*flex-basis: 100%;*/
}

#intro .flex-container.col {
  /*height: auto;*/
}

#intro .flex-container.col div:last-child {
  /*align-self: flex-end;*/
} 

#intro div:first-child {
  flex-basis: 25%;
  /*text-align: left;*/
}

#intro div:nth-child(2) {
  flex-basis: 40%;
}

#intro div:nth-child(3) {
  flex-basis: 25%;
  /*text-align: right;*/
}

#intro img#K {
  width: 58%;
  text-align: right;
  margin: 0px 0px 0px 25%;
}

#intro img#C {
  width: 58%;
  margin: 36% 13% 0px 0px;
}

#intro img#slab-horz {
  width: 33%;
  margin: 21% 33% 0px 0px;
}

#intro img#pyramid {
  width: 23%;
  margin: 60% 0px 0px -25%;
}

img.shapeitem.delay-motion  {
  animation-delay: 300ms;
}

.flex-container > div {
/*        border-color: #f1f1f1;
  border-style: solid;*/
}

/* ~~~~~~ GEO SHAPES ~~~~~~ */

@keyframes Cfloat {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-47px);
  }
  100% {
    transform: translatey(0px);
  }
}

@keyframes Kfloat {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(37px);
  }
  100% {
    transform: translatey(0px);
  }
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}

img.shapeitem {
/*        width: 150px;
  height: 150px;*/
/*        box-sizing: border-box;
  border: 5px white solid;
  border-radius: 50%;
  box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);*/
  overflow: hidden;
  transform: translatey(0px);
  animation: float 6s ease-in-out infinite;
  /*img { width: 100%; height: auto; }*/
}



/* ~~~~~~ Hero Blocks ~~~~~~ */
.hero p {
  width: 333px;
  text-align: left;
  /*line-height: 26px;*/
}

.home .hero a {
  position: relative;
  block-size: 100%;
  inline-size: 100%;

  min-block-size: 100%;
  min-inline-size: 100%;
  box-sizing: border-box;
  display: flex;
  place-content: center;
  font-family: system-ui, sans-serif;
}

.home .hero a::before {  
  transform: scaleX(0);
  transform-origin: bottom right;
}

.home .hero a:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.home .hero a::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  /*background: rgba(247, 93, 192, 0.4);*/
  background: rgba(165, 36, 158, 0.4);
  /*z-index: -1;*/
  transition: transform .3s ease;
}

.hero .metadata {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 6%;
  flex-basis: 40%;
}

.hero .metadata .shapeitem {
  position: absolute;
  margin-top: 500px;
}

.hero.left .metadata .shapeitem {
  margin-left: 240px;
/*  margin-top: 250px;*/
}

#things.hero .metadata .shapeitem {
  margin-top: 500px;
}

#elephants.hero .metadata .shapeitem {
  margin-top: 480px;
  margin-right: 286px;
}

.hero div:nth-child(2) {
  flex-basis: 80%;
  justify-content: center;
  margin: auto;
}

.hero img.heroshot {
  width: 100%;
  height: auto;
  margin: auto;
  /*flex-basis: 60%;*/
  vertical-align: middle;
}

.hero.left {
  flex-direction: row-reverse;
}

.hero .divider {
  margin: 2px 0px 20px 0px;
}

.hero.left .divider {
  margin-left: -20%;
}

.hero#daydream p {
  width: 316px;
}

.wrapper > * {
/*      padding: 10px;
  flex: 1 100%;*/
  max-width: 1280px;
  align-content: center;
  justify-content: center;
  margin: auto;
  /*margin-bottom: 12%;*/
  margin-bottom: 182px;
}

.flex-container {
  display: flex;
  justify-content: center;
  /*align-items: flex-end;*/
}

.flex-container > div {
/*  border-color: #f1f1f1;
  border-style: solid;
*/  
  width: 100%;
  /*margin: 10px;*/
  text-align: center;
  line-height: 26px;
  /*max-width: 1120px;*/
  /*flex: 1 1 33%;*/
}

.logo {
  margin-bottom: 12px;
}

.content img {
  width: 100%;
  height:auto;
}


/* ~~~~~~ Work Content ~~~~~~ */

.wrapper.work #header {
  margin-bottom: 40px;
}

.wrapper.work > * {
  margin-bottom: 3.6%;
}

.wrapper.work #daydream .metadata, .wrapper.work #jamboard .metadata, .wrapper.work #gplus .metadata, .wrapper.work #gct .metadata, .wrapper.work #appleweb .metadata {
  padding-bottom: 5%;
}

.wrapper.work .hero img {
  border-radius: 4px;
}

.wrapper.work .content.two-up {
  justify-content: left;
  flex-wrap: wrap;
}


.wrapper.work img.polybrowser {
  width: 326px; padding: 0px 16% 0px 5%;
  /*transform: scale(0.8);*/
}

.wrapper.work img.tool-picker {
  width: 335px; padding: 0px 16% 0px 5%;
  /*transform: scale(0.8);*/
}

.wrapper.work img.hands {
  width: 580px; padding: 26px 64px 26px 26px;
  /*transform: scale(0.8);*/
}

.wrapper.work .content.two-up.rt {
  flex-direction: row-reverse;
}

.wrapper.work .content.two-up div {
  flex-basis: 50%;
  margin: auto;
  /*gap: 0px;*/
}

.wrapper.work .content.two-up div:first-child {
  flex-grow: 2;
  margin: auto;
}

.wrapper.work .content.two-up div:first-child img {
  margin-bottom: -9px;
}

.wrapper.work .content.two-up div:nth-child(2n) {
  flex-basis: 40%;
  text-align: right;
}

.wrapper.work .content.four-up {
  /*display: flex;*/
  flex-wrap: wrap;
}

.wrapper.work .content.four-up div {
  flex-basis: 50%;
  margin-bottom: -9px;
}

.wrapper.work .content.four-up div:nth-child(2n) {
  /*flex-basis: 100%;*/
}
.wrapper.work .content.fill-black {
  background-color: #000;
}

.wrapper.work .content.fill {
  background-color: #FFF;
}

.wrapper.work .buttonstates {
  padding: 0px 80px 0px 0px;
  width: 336px;
}

.wrapper.work .jingles {
  width:406px;
  padding: 26px 26px 26px 64px;
}

.wrapper.work .story-mobile {
  padding: 0px 80px 0px 0px;
  width:297px;
}

.wrapper.work .ipod {
  width: 428px; 
  /*height: 718px;*/
  border-radius: 43px;
}



/* Header / Footer */
#header {
  height: 64px;
  /* Light Pink */
  color: #FDC1E3;
  /*background-color: DodgerBlue;*/
  background-image: url("../images/shapes/svg/hairline_horizontal2.svg");
  background-repeat: no-repeat;
  background-position: center bottom;

  margin-bottom: 0px;
}

#header > div {
  margin: auto;
/*        width: 50%;
  align-items: stretch;
  flex-flow: column wrap;*/

/*      height: 100%;
  vertical-align: middle;*/
  /*flex-basis: 100%;*/
}

#header #navigation {
  /*width: 17%;*/
  text-align: left;
}

#header #link-items {
  text-align: right;
  /*padding-left: 30px;*/
  height: 29%;
  width: 90%;
/*      justify-content: right;
  align-items: right;
  float: right;
  margin-right: 90%;*/
}

#header #link-items img {
  padding-left: 30px;
  /*text-align: right;*/
}

#header a:link {
  color: #FDC1E3;
  text-decoration: none;
}

#header a:hover, #header a:visited, #header a:focus {
  color: #FDC1E3;
  text-decoration: overline;
  /*font-weight: 600;*/
}

#footer {
  height: 118px;

  background-image: url("../images/shapes/svg/hairline_horizontal2.svg");
  background-repeat: no-repeat;
  background-position: center top;
  /*margin-bottom: 0px;*/
  /*margin-top: 80px;*/
}

#footer .main {
  text-align: center;
  /*flex-basis: 50%;*/
}

#footer > div {
  margin: auto;
  text-align: left;
  height: auto;

/*  border-color: #f1f1f1;
  border: solid;*/
}

#footer > div.text {
  height: 68%;
}

#footer h4 {
    color: #E6E0ED;
  /*font-family: 'Open Sans', sans-serif;*/
  /*font-size: 34px;*/
  font-weight: 400;
  line-height: 13px;
  font-style: normal;

  font-size: 26px;
  text-align: right;
}

#footer a {
  text-decoration: none;
}

#footer .previous-link h4 {
  text-align: left;
}

#footer .next-link {
  text-align: right;
}

#footer .desktop {
  display: block;
}

#footer .mobile {
  display: none;
}

/*#footer .arrow-rt {
  text-align: right;
}
*/


/*      #navigation {
  margin: auto;
  height: 100%;
}*/

/*@media all and (max-width: 1280px) {
  #header #navigation ul {
    margin-left: 20px;
  }

  #header #link-items {
    margin-right: 20px;
  }
}*/




/* ~~~~~~ About ~~~~~~ */
.about p {
  width: 500px;
  padding-right: 30px;
  /*margin-top: -8px;*/
  /*text-align: left;*/
  /*line-height: 26px;*/
  /*height: 28px;*/
}

.about #aboutshape {
  text-align: right;
  padding-right: 140px;
  margin-top: -190px;
}

/*.about .flex-container > div {
  border-color: paleturquoise;
  border-style: solid;
}*/

.about .flex-container.hero .metadata {
  flex-basis: 50%;
}

.about .flex-container.hero #profile {
  flex-basis: 50%;
}

.about li {
  list-style: disc;
}

.about .hero img {
  float: right;
  padding: 30px 30px 0px 30px;
  width: 80%;
  height: 80%;
}

.about .metadata {
  margin-top: 0px;
  padding-left: 1.5%;
}

.about .metadata h3 {
  font-size: 52px;
  height: 44px;
  margin: 44px 0px 0px 0px;
  /*text-align: right;*/
}


.hero .divider {
  margin: 2px 0px 20px 0px;
}


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

    /* ~~~~~~ Global ~~~~~~ */
    #link-items, #shapes, .shapeitem, .hero .divider, #header div:nth-child(2), #footer .main {
      display: none;
    }

    #footer .desktop {
      display: none;
    }

    #footer .mobile {
      display: block;
    }

    h1 {
      margin: 0px;
    }

    iframe {
      height: 480px;
    }

    .hero {
      margin-bottom: 20%;
    }

    /* ~~~~~~ Footer ~~~~~~ */

    #footer {
      padding: 0px 14px 0px 14px;
    }
    #footer .flex-container {
      /*flex-basis: 50%;*/
    }
    
    #footer a {
      /*width: 50%;*/
    }

    #footer img {
      shape-rendering: geometricPrecision;
    /*  width: 60%;
      height: 60%;*/
    }

/*    .wrapper.home .flex-container > div{  
          border-color: #f1f1f1;
      border: solid;
    }*/

    /* ~~~~~~ Header ~~~~~~ */
    #header {
      padding: 0px; 
      height: 60px;
      /*width: 100%;*/
    }

    #header #navigation {
      /*flex-basis: 100%;*/
      text-align: center;
    }

    #header #navigation ul li:last-child {
      padding-right: 0px;
    }

    #header div:nth-child(2) {
      flex-basis: 30%;
    }

    #header li {
      font-size: 22px;
      padding-right: 49px;
    }

    #header h2 {
      font-size: 22px;
      text-align: right;
    }

    .heroshot {
      height: auto;
      max-width: 100%;
    }


    /* ~~~~~~ Home Mobile ~~~~~~ */

    .metadata img { 
      shape-rendering: geometricPrecision;
    }

    #things .logo {
      width: 135px;
      height: 57px;
    }

    #daydream .logo {
      width: 209px;
      height: 56px;
    }
  
    #jamboard .logo {
      width: 172px;
      height: 56px;
    }

    #gplus .logo {
      width: 57px;
      height: 57px;
    }

    /* ~~~~~~ Home - Intro Mobile ~~~~~~ */
    #intro { 
      display: none;
    }

    #intro-mobile {
      display: flex;
      margin-top: 40px;
      /*margin-bottom: 7%;*/
      margin-bottom: 90px;
      width: 90%;

      gap: 2%;
    }


    #intro-mobile img {
      width: 100%;
      height: auto;
    }

    #intro-mobile #face {
      margin-left: -2%;
/*      width: 90%;*/
    }

    #intro-mobile {
      display: flex;
      gap: 0px;
      margin-bottom: 16%;
      flex-direction: column;
    }

    #intro-mobile .shape-block{
      display: none;
    }

    #intro-mobile div:first-child {
/*      flex-basis: 50%;*/
      /*text-align: left;*/
    }

    #intro-mobile div:nth-child(2) {
      flex-basis: 90%;
    }

    #intro-mobile div:nth-child(3) {
/*      flex-basis: 50%;*/
      /*text-align: right;*/
    }

    #intro-mobile img#K {
      width: 32%;
      /*text-align: right;*/
/*      margin: 70% 0px 0px 20%;*/
      margin: -10px 0px 0px -44%;
      transform: translatey(0px);
      overflow: hidden;
      animation: Kfloat 13s ease-in-out infinite;
    }

    #intro-mobile img#C {
      width: 32%; 
/*      margin: 250% 0% 0px -15%;*/
      margin: -23% 0% 0% 46%;
      transform: translatey(0px);
      overflow: hidden;
      animation: Cfloat 13s ease-in-out infinite;
    }

    #intro-mobile img#slab-horz {
      width: 60%;
      margin: 150% -12% 0px 0px;
    }

    #intro-mobile img#pyramid {
      width: 33%;
      margin: 310% 0px 0px 10%;
    }



    /* ~~~~~~ Hero Mobile ~~~~~~ */
    .hero.flex-container {
      flex-direction: column-reverse;
      width: 90%;
    }

    .hero .metadata {
      padding: 5% 0px 0px 5%;
    }

    .hero .metadata p {
      font-size: 18px;
      /*line-height: 1.6em;*/
      width: 100%;
    }

    .hero#daydream p {
      width: 100%;
    }

    .hero .metadata .logo {
      margin-bottom: 0px;
    }



    /* ~~~~~~ Work Mobile ~~~~~~ */
    .wrapper.work .wrap-that {
      flex-wrap: wrap;
      flex-direction: column;
    }

    .work .save-tip {
      /*transform: scale(1.5);*/
      /*margin:-46% 0px 0px -76%;*/
      /*width: 251%;*/
      /*margin-top: -9%;*/

      width: 100%;
      height: auto;

      /*padding: -10% 0px 0px 0px;*/
      /*padding: 10%;*/
    }

    .work .verts {
      margin-bottom: 2%;
    }

    .wrapper.work img.hands {
      /*transform: scale(0.65);*/
      /*margin-left: -36%;*/
      /*margin-top: -5%;*/
      padding: 0px;
      width: 100%;
      height: auto;
    }

    .work .tablet video {
      width: 84%;
      height: auto;

      padding: 30px;
    }

    .wrapper.work img.polybrowser {
      transform: scale(0.7);
    }

    .wrapper.work img.tool-picker {
      transform: scale(0.7);
    }

    .work .post-it img {
      width: inherit;
    }

    .work video.leftclip {
      margin-left: -9%;
    }

    .work video.rightclip {
      margin-right: -9%;
    }

    .wrapper.work .jingles {
      padding: 26px 0px 0px 0px;
      width: 330px;
    }
  
    .wrapper.work .story-mobile {
      padding: 0px;
    }

    .wrapper.work .flipper {
      padding-right: 35px;
      /*width: 240px;*/
      width: 80%;
    }

    .wrapper.work .ipod {
      width: 240px;
      border-radius: 24px;
      margin-top: 26px;
    }


    /* ~~~~~~ About Mobile ~~~~~~ */
    .about .hero {
      /*margin-top: -42%;*/
      width: 85%;
    }

    .about .hero img {
      float: inherit !important;
    }

    .about .hero .metadata {
      padding: inherit;
    }


    /* ~~~~~~ Work Mobile ~~~~~~ */
    .wrapper.work .content.two-up div:last-child img {
      padding: 24px 0px 4px 0px;
    }

    .wrapper.work .buttonstates {
      padding: 80px;
      width: 200px;
    }

    #footer {
      height: 80px;
    }

  }