/*** UNIVERSAL-------------------------------------------------------------**/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
  }

/*--------FONTS--------------------------------------------------------------*/

@font-face {
    font-family: 'Basis Grotesque Light';
    src: url(basis-light.otf) format('opentype');
    font-weight: normal;
  }

@font-face {
    font-family: 'Founders Grotesk Light';
    src: url(FoundersGrotesk-Light.otf) format('opentype');
    font-weight: normal;
  }

/*---------MAIN-STYLES-------------------------------------------------------*/

body {
    font-family: 'Founders Grotesk Light', Helvetica, sans-serif;
    color: white;
    background-color: #dccebe;
    font-weight: 100;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .5px;
    position: fixed;
    overflow: hidden;
    height: 100%;
    width: 100%;
    /* overflow-y: auto;
    overflow-x: hidden; */
  }

div.main {
    min-height: 88vh;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
  }

section.blurb {
    padding: 20vw 10vw 0 10vw;
    display: flex;
  }
/*overflow auto for mobile???? */
section.work {
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 padding: 10vw 0 0 10vw;
 height: 75vh;
}

section.social {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20vw 10vw 0 10vw;
}

section.info {
    padding: 0 10vw 10vw 10vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

h1 {
      line-height: 1.3;
      font-size: 36px;
      letter-spacing: .5px;
      font-weight: 100;
}

h1.work__h1 {
  font-size: 24px;
}

div.work-item {
  /* width: 66vw; */
  /* height: 8vw; */
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  /* justify-content: space-between; */
}

div.work-item > p {
  padding-top: 0;
}

/* --Links ------------------------------------------------------------------*/

a   {
      border-bottom: 1px solid transparent;
      transition: border-bottom 200ms linear;
      padding: 0 3px 0 3px;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
    }

a:hover {
      border-bottom: 1px solid #fff;
    }

a.emailLrg,
span.locationLrg {
      display: none;
    }

/*-------COLOR-FADE-ANIMATION------------------------------------------------*/

body.nightMode {
    animation: bgNight 15s linear 1s infinite alternate;
    color: #dfdfd9;
    background-color: #1d1d21;
  }

body.dayMode {
    animation: bgDay 15s linear 1s infinite alternate;
  }

@keyframes bgDay {
    0% {background-color: #dccebe;}
    50% {background-color: #dabebe;}
    100% {background-color: #c8d6d8;}
  }

@keyframes bgNight {
    0% {background-color: #1d1d21;}
    50% {background-color: #18162b;}
    100% {background-color: #3b3233;}
  }

/*-- MOBILE INTRO ANIMATIONS ----------------------------------------------- */

.item1 {
    transition: opacity .33s .75s ease-out;
    opacity: 0;
  }

.item2 {
    transition: opacity .33s 1.1s ease-out;
    opacity: 0;
  }

.item3 {
    transition: opacity .33s 1.4s ease-out;
    opacity: 0;
  }

.active {
    opacity: 1;
  }


/* ---- FOR PARAGRAPH TOGGLE ------------------------------------------------*/


.isClicked {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s, visibility 0s linear 300ms;
  }

.notClicked {
    visibility: hidden;
    position: absolute;
   
  }

/* ------ MEDIAQUERIES ------------------------------------------------------*/

/*--- Most Mobile Devices----------------------------------------------------*/

@media screen and
  (min-width: 375px)
  and (max-width: 767px) {

      section.blurb {
          max-width: 500px;
        }

        section.work {
          height: 75vh;
        }

      p:nth-child(n+1) { padding-top: 24px; }

    }

/* IPHONE X *----------------------------------------------------------------*/

@media only screen
  and (device-width : 375px)
  and (device-height : 812px)
  and (-webkit-device-pixel-ratio : 3) {

      div.main {
          min-height: 88vh;
        }
    }

/*--Iphone 6+, 7+, 8+, XR and XR Max ----------------------------------------*/

@media screen and
  (min-height: 668px)
  and (max-height: 897px)
  and (-webkit-max-device-pixel-ratio: 3) {

      div.main {
          min-height: 90vh;
        }
    }

/*------Most Ipads <12 inches----------------------------------------------- */

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

      div.main {
          min-height: 100vh;
        }

      a.emailSml,
      span.locationSml {
          display: none;
        }

      a.emailLrg,
      span.locationLrg {
          display: inline;
        }

      section.blurb {
          padding: 20vw 10vw 0 10vw;
          max-width: 500px;
        }

      section.info {
          padding: 0 0 16vw 10vw;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

      section.work {
        padding: 5vw 0 0 10vw;
      }

        p:nth-child(n+2) { padding-top: 24px; }

    }

/*-----Desktop and Laptop Territory------------------------------------------*/

@media screen and
  (min-width: 1024px) {

  /*--Layout / Type Adjustments ---------------------------------------*/

    div.main {
        width: 80%;
        height: 100vh;
        display: flex;
        flex-direction: row;
        justify-content: left;
      }

    h1 {
        font-size: 56px;
        line-height: 1.3;
        letter-spacing: .5px;
      }

      h1.work__h1 {
        font-size: 36px;
      }

    section.social,
    section.work {
      padding: 0 0 0 50px;
    }

    section.blurb {
          padding: 0;
          max-width: 500px;
          margin: auto 0 auto 0;
        }

    section.info {
          /* padding: 0 16vw 0 10vw; May need to fiddle w/ padding here
          need to figure out how much offset 50x is in vw*/
          padding: 0 12vw 0 10vw;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 130px;
          margin: auto 0 auto 0;
        }

    section.work {
          padding-top: 20vw;
     }

    section.info p {
          width: 70px;
          font-size: 18px;
          line-height: 1.5;
          letter-spacing: .5px;
        }

    p:nth-child(n+2) { padding-top: 24px; }


/* --Update Longer Links ----------------------------------------------*/

    a.emailSml,
    span.locationSml {
        display: none;
      }

    a.emailLrg,
    span.locationLrg {
        display: inline;
      }

/* Intro Animation ----------------------------------------------------*/

.landingBlurb {
    width: 500px;
    animation: slide-right 1.5s cubic-bezier( .33 , 0 , .2 , 1 ) 1 forwards;
  }

.contactBlurb {
    width: 500px;
    animation: slide-right 1.5s cubic-bezier( .33 , 0 , .2 , 1 ) 1 forwards;
  }

  @keyframes slide-right {
  0% {}
  100% {transform: translateX(50px)}
}

.fade {
  animation: fade-in .8s ease-out 1 forwards;
}

@keyframes fade-in {
  0% {opacity:0}
  100% {opacity:1}
}


/* below is the same animation used with transitions/transforms.
chose @keyframes to have more control

    .landingBlurb {
        opacity: 0;
        transition: transform 1.5s cubic-bezier(.45, 0, .68, 1), opacity 1s;
        width: 500px;
      }

    .contactBlurb {
        transition: transform 1.5s cubic-bezier(.45, 0, .68, 1);
        width: 500px;
      }

    .transform {
        transform: translateX(100px);
        opacity: 1;
      } */



/*---Special HOVER STATES---------------------------------------------**/

    a:hover {
      border-bottom: 1px solid transparent;
    }

    h1 > a {
          text-decoration: none;
          color: inherit;
          display: inline-block;
          padding-left: 3px;
          padding-right: 3px;
          padding-bottom: 0;
          position: relative;
          line-height: 1;
        }

    h1 > a:after {
        background: none repeat scroll 0 0 transparent;
        bottom: 0;
        content: "";
        display: block;
        height: 2px;
        left: 50%;
        position: absolute;
        background: #fff;
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 0;
      }

    h1 > a:hover:after {
        width: 100%;
        left: 0;
      }

    p > a {
        text-decoration: none;
        color: inherit;
        display: inline-block;
        padding-left: 3px;
        padding-right: 3px;
        position: relative;
        line-height: 1;
      }

    p > a:after {
      background: none repeat scroll 0 0 transparent;
      bottom: 0;
      content: "";
      display: block;
      height: 1px;
      left: 50%;
      position: absolute;
      background: #fff;
      transition: width 0.3s ease 0s, left 0.3s ease 0s;
      width: 0;
    }

    p > a:hover:after {
      width: 100%;
      left: 0;
    }

    p >a::selection {
      width: 100%;
      
    }

  }

/*-----Mega-screens----------------------------------------------------------*/

  @media screen and
    (min-width: 1440px) {

/*---Layout Adjustments ---------------------------------------------*/

        div.main {
            width: 66%;
          }

      }