@font-face {
  font-family: 'PlantinMTStd';
  src: url('/fonts/PlantinMTStd-Light.eot');
  src: url('/fonts/PlantinMTStd-Light.woff2') format('woff2'),
       url('/fonts/PlantinMTStd-Light.woff') format('woff'),
       url('/fonts/PlantinMTStd-Light.ttf') format('truetype'),
       url('/fonts/PlantinMTStd-Light.svg#PlantinMTStd-Light') format('svg'),
       url('/fonts/PlantinMTStd-Light.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'PlantinMTStd';
  src: url('/fonts/PlantinMTStd-LightItalic.eot');
  src: url('/fonts/PlantinMTStd-LightItalic.woff2') format('woff2'),
       url('/fonts/PlantinMTStd-LightItalic.woff') format('woff'),
       url('/fonts/PlantinMTStd-LightItalic.ttf') format('truetype'),
       url('/fonts/PlantinMTStd-LightItalic.svg#PlantinMTStd-LightItalic') format('svg'),
       url('/fonts/PlantinMTStd-LightItalic.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: italic;
}

/********************************
*        BASIC ELEMENTS         *
********************************/

html
{
    background-color: #f9f6ef;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

body
{
    font-family: PlantinMTStd, helvetica, arial;
    margin: 0px;
    padding: 0px;
    color: #333132;
    background-color: #f9f6ef;
    overflow-x: hidden;
}

p
{
    padding: 0px;
}

ul
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

li
{
    list-style-type: none;
}

h1, h2, h3, h4, h5, h6
{
    margin: 0px;
    padding: 0px;
}

.display-block
{
    display: block;
}

.display-none
{
    display: none;
}

/********************************
*         BASIC CLASSES         *
********************************/

.no-decoration
{
    text-decoration: none;
    color: inherit;
}

.bold
{
    font-weight: bold;
}

.italic
{
    font-style: italic;
}

/********************************
*        GENERAL STYLES         *
********************************/

.spacer
{
    height: 2em;
    display: block;
}

#blog-post-right-content > .spacer
{
    height: 64px;
    display: none;
}

.spacer.quarter
{
    height: .5em;
}

.spacer.half
{
    height: 1em;
}

.spacer.double
{
    height: 4em;
}

.spacer.triple
{
    height: 6em;
}

/* FLEX BOX */

.flex-box
{
    display: flex;
}

.flex-box.align-start
{
    align-items: flex-start;
}

.flex-box.align-center, .flex-box.center
{
    align-items: center;
}

.flex-box.align-end
{
    align-items:flex-end;
}

.flex-box.justify-center, .flex-box.center
{
    justify-content: center;
}

.flex-box.justify-around
{
    justify-content: space-around;
}

.flex-box.justify-between
{
    justify-content: space-between;
}

.flex-box.column
{
    flex-flow: column;
}

.flex-box.wrap
{
  flex-wrap: wrap;
}

.flex-box.nowrap
{
  flex-wrap: nowrap;
}

/********************************
*          BASIC STRUCTURE      *
********************************/

.fade-in-able
{
    opacity: 0;
    transition: transform 2s cubic-bezier(0.06, 0.63, 0.1, 0.99), opacity 2s cubic-bezier(0.15, 0.73, 0.21, 0.94);
}

.slide-able
{
    transform: translate3d(0,25px,0);
}

.loaded .fade-in-able
{
    opacity: 1;
}

.loaded .slide-able
{
    transform: translate3d(0,0,0);
}

/********************************
*             HEADER            *
********************************/

#menu
{
  display:flex;
  align-items:center;
  /* justify-content:space-between; */
  width: 82vw;
  position:fixed;
  z-index: 100;
  top: 70px;
  left:86px;
}

.blog-post-page #menu
{
  /* fade content behind menu */
  padding-top: 70px;
  padding-left: 86px;
  padding-bottom: 40px;
  top: 0px;
  left: 0px;
  width: auto;
  width: 100%;
  background: rgba(249,246,239,1);
  background: -moz-linear-gradient(top, rgba(249,246,239,1) 0%, rgba(249,246,239,1) 80%, rgba(249,246,239,0) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(249,246,239,1)), color-stop(80%, rgba(249,246,239,1)), color-stop(100%, rgba(249,246,239,0)));
  background: -webkit-linear-gradient(top, rgba(249,246,239,1) 0%, rgba(249,246,239,1) 80%, rgba(249,246,239,0) 100%);
  background: -o-linear-gradient(top, rgba(249,246,239,1) 0%, rgba(249,246,239,1) 80%, rgba(249,246,239,0) 100%);
  background: -ms-linear-gradient(top, rgba(249,246,239,1) 0%, rgba(249,246,239,1) 80%, rgba(249,246,239,0) 100%);
  background: linear-gradient(to bottom, rgba(249,246,239,1) 0%, rgba(249,246,239,1) 80%, rgba(249,246,239,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f6ef', endColorstr='#f9f6ef', GradientType=0 );
}

#menu-logo
{margin-right: 2.5vw;}

#menu-logo h1
{
  font-size: 16pt;
  font-weight: 200;
  letter-spacing: .25px;
}

.loaded #menu-logo
{
  transition-delay: 0s;
}

#menu-line-container
{max-width: 300px;height: 1px;overflow:hidden;margin: 0px 2.5vw 3px;width: 15.65vw;min-width: 160px;}

.loaded.index-page #menu-line-container
{
  transition-delay:  .1s;
}

#menu-line
{
  stroke: #333132;
  stroke-width: 1px;
}

.menu-item
{font-size: 10.5pt;margin: 0px 2.5vw;padding: 0px 2px;}

.loaded.index-page #cool-stuff-item
{transition-delay: .2s;}

.loaded.index-page #social-item
{transition-delay: .3s;}

#contact-item
{margin-right: 0px;}

.loaded.index-page #contact-item
{
  transition-delay: .4s;
}

#copyright
{
  transform: rotateZ(-90deg);
  position: fixed;
  left: 86px;
  bottom:0px;
  margin-bottom: 60px;
  width: 150px;
  height: 150px;
  font-size: 10.5pt;
  letter-spacing: .25px;
  transition: opacity 1s cubic-bezier(0.8, 0.0, 0.1, 0.99);
  }

.index-page.loaded #copyright
{transition-delay: 1.25s;}

/********************************
*             INDEX             *
********************************/

#content
{
    width: 40%;
    display: flex;
    flex-flow: column nowrap;
    padding-bottom: 60px;
    padding-top: 325px;
    opacity: 1;
    transition: opacity .3s cubic-bezier(0.06, 0.63, 0.1, 0.99), opacity 2s cubic-bezier(0.15, 0.73, 0.21, 0.94);
}

.index-page #content
{
  padding-bottom: 0px;
}

body.adjusting-page #content
{
    opacity: 0;
}

.blog-page #content, .blog-post-page #content
{
  flex-flow: row wrap;
}
.blog-page #content
{
  padding-bottom: 46px;
  max-width: 1600px;
}

#about-block, #coming-soon-block, #not-found-block
{display: flex;align-items: flex-start;margin-left: calc(86px + 116px + 4vw);position: fixed;top: 325px;left: 0px;}

.block
{
    margin-bottom: 130px;
    display: flex;
}

.blog-page .block
{
  width: calc(15.65vw + 58.5px + 34.5px + 45px + 15vw);
}

.blog-post-page .block
{
  width: 100%;
  max-width: 2000px;
  margin-bottom: 0px;
}

.blog-page .right-block
{
    flex: 1 1;
}

.last-left-block, .last-right-block
{
  margin-bottom: 0px;
}

.block-left-content-container
{
 font-size: 12pt;
 line-height: 27pt;
 position: relative;
 max-width: 300px;
 width: 15.65vw;
 min-width: 170px;
 margin: 0px !important;
 transition: opacity .25s;
}

#blog-post-block-left
{
  max-width: none;
  line-height: 18pt;
  padding-bottom: 0px;
  height: auto;
  align-self: flex-start;
}

.block-left-content-container.fade-out
{
    opacity: 0;
}

.block-left-content
{
  margin-left: 14px;
  display: inline-block;
  position: relative;
  width: calc(100% - 6vw);
}

.blog-post-page .block-left-content
{
  margin-left:0px;
}

.blog-post-page .block-left-content p:last-child
{
  margin-bottom: 0px;
}

body:not(.loaded) .block-left-content
{
  transition-delay: .6s;
}

body:not(.blog-post-page) .block-left-content::before, .blog-post-title::before
{
  content: '\00b7';
  font-size: 30pt;
  position: absolute;
  top: 1px;
  left: -14px;
}

.block-right-content
{font-size: 12pt;line-height: 27pt;width: calc(100% - 18vw);}

.blog-page .left-block .block-right-content
{
  width: calc(58.5px + 34.5px + 45px + 15vw);
}

.index-page .block-right-content
{
  display: flex;
  flex-flow: column nowrap;
}

.blog-page .right-block .block-right-content
{
  max-width: 45%;
}

#blog-post-block-right
{
  align-self: flex-start;
}

.blog-post-page .scrollmagic-pin-spacer #blog-post-block-right
{max-width: 600px;}

#blog-post-block .scrollmagic-pin-spacer:last-child
{
  margin: 0px !important;
}

.blog-post-link-container
{
   max-width: 75%;
   position: relative;
}

.blog-post-link-container.fading > a
{
  pointer-events: none;
}

.block-right-content .blog-post-link
{
   display: block;
   overflow: hidden;
   transition: opacity .15s ease-in-out;
   top: 0px;
   left: 0px;
   position: absolute;
   max-width: 100%;
}

.block-right-content .blog-post-link.italic
{letter-spacing: .5px;}

.block-right-content .blog-post-link.italic
{
    opacity: 0;
    position: absolute;
}

.block-right-content .blog-post-link-container:not(.fading):hover .blog-post-link:not(.italic)
{
    opacity: 0 !important;
    position: absolute;
}

.block-right-content .blog-post-link:not(.italic)
{
    opacity: 1;
    position:relative;
}

.block-right-content .blog-post-link-container:not(.fading):hover .blog-post-link.italic
{
    opacity: 1 !important;
    position:relative;
}

.block-right-content
{
  transition-delay: .75s;
}

.block-right-content .fade-in-able:nth-child(1)
{
  transition-delay: .7s;
}

.block-right-content .fade-in-able:nth-child(2)
{
  transition-delay: .75s;
}


.block-right-content .fade-in-able:nth-child(3)
{
  transition-delay: .8s;
}


.block-right-content .fade-in-able:nth-child(4)
{
  transition-delay: .85s;
}


.block-right-content .fade-in-able:nth-child(5)
{
  transition-delay: .9s;
}

#about-block .block-right-content, #coming-soon-block .block-right-content, #not-found-block .block-right-content
{
  width: calc(58.5px + 34.5px + 45px + 15vw + 12px);
  display: inline-block;
}

.blog-post-content
{display: flex;position: relative;margin: 0px !important;width: 100%;height: auto;flex-flow: column nowrap;justify-content: space-between;}

#blog-post-left-content
{
    left: 0px !important;
    width: calc(100% - 6vw);
}

#blog-post-left-content *:last-child
{
  margin-bottom: -6px;
}

#blog-post-right-content
{
  padding-left: 6px;
}

#brands-block

{display: flex;width: 100%;}


#press-block

{display: flex;}

.block-sublabel
{position: absolute;display: inline-block;left: 15px;top: 36px;font-size: 10.5pt;}

body:not(.loaded) .block-sublabel
{
  transition-delay: 0.7s;
}

/********************************
*              BLOG             *
********************************/

.blog-post-title
{
    position:relative;
    left: 11px;
    line-height: 27pt;
}

.blog-post-title::before
{
    top: 0px;
    left: -14px;
}

.blog-post-image
{
  max-width:100%;
  margin-bottom: 64px;
  width: 100%;
}

.blog-post-image:last-child
{
  margin-bottom: 0px;
}

/********************************
*        MEDIA QUERIES          *
********************************/

@media only screen and (min-width: 1800px)
{
    .blog-post-link-container
    {
       max-width: 100%;
    }
}

@media only screen and (min-width:1440px)
{
    .coming-soon-page #content
    {
      width: auto;
    }

    #about-block, #coming-soon-block, #not-found-block
    {margin-left: calc(86px + 116px + 5vw);}
}

@media only screen and (min-width:1280px) and (max-width: 1439px)
{
    #menu-logo
    {
      margin-right: 2vw;
    }

    #menu-line-container
    {margin: 0px 2vw 3px;
    width: 18vw;}

    .menu-item
    {margin: 0px 2vw;}

    #about-block
    {
      margin-left: calc(86px + 116px + 4vw);
    }

    .block-left-content-container
    {
      width: 20vw;
    }
    
    #about-block .block-right-content, #coming-soon-block .block-right-content, #not-found-block .block-right-content
    {
      width: calc(58.5px + 34.5px + 45px + 12vw + 12px);
    }
}

@media only screen and (max-width: 1279px)
{
    #menu-logo
    {
      margin-right: 3vw;
    }

    #menu-line-container
    {margin: 0px 3vw 3px;
    width: 25vw;}

    .menu-item
    {margin: 0px 3vw;}

    #about-block, #coming-soon-block, #not-found-block
    {
      margin-left: 0px;
      position: relative;
      top: 0px;
    }

    #blog-post-block-left
    {
      /* padding-bottom:64px; */
    }
    
    #blog-post-right-content
    {
      padding-left: 0px;
    }

    #blog-post-right-content > .spacer
    {
        display: block;
    }

    .block-right-content
    {
      transition-delay: 1.1s;
    }

    .block-left-content-container
    {
      width: 25vw;
    }

    .blog-post-page #menu
    {
      padding-right: calc(18vw - 86px);
    }
    
    .blog-page #content, .blog-post-page #content
    {
      flex-flow: column nowrap;
    }

    .blog-page .block
    {
      width: auto;
    }

    .blog-page .last-block:not(:last-child)
    {
      margin-bottom: 130px;
    }

    .blog-post-page .block
    {
      flex-flow:column nowrap;
    }

    #blog-post-block-left
    {
    width: 70%;
    }

    #blog-post-block-right
    {
      margin-left: 0px;
      width: 70%;
    }
    
    #about-block .block-right-content, #coming-soon-block .block-right-content, #not-found-block .block-right-content
    {
    width: calc(58.5px + 34.5px + 45px + 24vw + 12px);
    }

    .blog-post-link-container
    {
       max-width: 100%;
    }
}

@media only screen and (max-width: 799px)
{
    #menu
    {
      width: calc(100% - 120px);
      left: 60px;
      top: 50px;
    }

    .blog-post-page #menu
    {
      padding-left: 60px;
      padding-top: 50px;
      width: calc(100% - 120px);
    }
    
    #copyright
    {
      left: 60px;
        bottom:0px;
        margin-bottom: 50px;
    }
    
    #menu-line-container
    {
      min-width:auto;
      flex: 1;
    }

    .block
    {
      width: 100%;
    }
    .last-block:last-child .block-right-content .blog-post-link
    {
      padding:0px;
      margin:0px;
    }

    .block-right-content
    {
      width:  50%;
    }
    
    .block-left-content-container
    {
      width: 50%;
      max-width: none;
      margin: 0px !important;
    }

    #content, .blog-page #content, .blog-post-page #content
    {
        padding-left: 120px;
        width: calc(100% - 136px);
    }
    
    .blog-page #content, .blog-post-page #content
    {
      padding-bottom: 37px;
    }

    #blog-post-block-right, #blog-post-block-left
    {
      width: calc(100vw - 180px);
    }

    .blog-post-image:last-child
    {
      margin-bottom: 16px;
    }
}

@media only screen and (max-width: 599px)
{
    #menu
    {
      width: calc(100% - 120px);
      left: 60px;
      top: 50px;
      justify-content: space-between;
    }

    .blog-post-page #menu
    {
      justify-content: space-between;
    }

    #menu-logo
    {margin: 0px;}

    #menu-line-container
    {display: none;}

    .menu-item
    {margin: 0px;}
}

@media only screen and (max-width: 520px)
{
    #menu
    {
      width: calc(100% - 60px);
      left: 30px;
      top: 20px;
    }

    .blog-post-page #menu
    {
      width: calc(100% - 60px);
      padding-left: 30px;
      padding-top: 20px;
    }

    #content, .blog-page #content, .blog-post-page #content
    {
      width: calc(100% - 65px);
      padding-left: 65px;
      padding-top: 250px;
    }

    .blog-page #content, .blog-post-page #content
    {
      padding-bottom: 6px;
    }

    #copyright
    {
      left: 30px;
        bottom:0px;
        margin-bottom: 20px;
      font-size: 8.5pt;
    }
    
    .menu-item
    {
    font-size: 10pt;
    }

    #menu-logo h1
    {
      font-size: 14pt;
    }

    .block-left-content-container
    {
      font-size: 10pt;
      min-width: auto;
    }

    .block-left-content
    {
      margin-left: 11px;
    }

    .block-left-content::before, .blog-post-title::before
    {
      font-size: 22pt;
    }

    .block-sublabel
    {
      font-size: 8.5pt;
      left: 12px;
    }

    .block-right-content
    {
      font-size: 10pt;
    }

    .block-right-content .blog-post-link:hover
    {
      font-size: 10.25pt;
    }

    #blog-post-block-right, #blog-post-block-left
    {
      width: calc(100vw - 120px);
    }
}

@media only screen and (max-width: 413px)
{
    #menu
    {
      width: calc(100% - 30px);
      left: 15px;
      top: 18px;
    }

    .blog-post-page #menu
    {
      width: calc(100% - 30px);
      padding-left: 15px;
      padding-top: 18px;
    }

    #content, .blog-page #content, .blog-post-page #content
    {
      width: calc(100% - 35px);
      padding-left: 35px;
      padding-top: 210px;
    }

    .blog-page #content
    {
      padding-bottom: 8px;
    }

    #copyright
    {
      left: 15px;
        bottom:0px;
        margin-bottom: 18px;
    }
    
    .menu-item
    {
    font-size: 10pt;
    }
    
    .block-right-content, .block-left-content-container
    {
        line-height: 22pt;
    }

    #menu-logo h1
    {
      font-size: 14pt;
    }

    .block-left-content-container
    {
      font-size: 10pt;
      width: 50%;
    }

    .block-left-content
    {
      margin-left: 11px;
    }

    .block-left-content::before, .blog-post-title::before
    {
      font-size: 22pt;
    }

    .block-sublabel
    {
      font-size: 8.5pt;
      left: 11px;
    }

    .block-right-content
    {
      font-size: 10pt;
    }

    #blog-post-block-right, #blog-post-block-left
    {
      width: calc(100vw - 70px);
    }

    .last-block:last-child .blog-post-link-container
    {
    padding-bottom: 8px;
    }
}

@media only screen and (max-width: 370px)
{
    #menu
    {
      width: calc(100% - 20px);
      left: 10px;
      top: 12px;
    }

    #content, .blog-page #content, .blog-post-page #content
    {
      width: calc(100% - 26px);
      padding-left: 26px;
      padding-top: 180px;
      padding-bottom: 0px;
    }

    #copyright
    {
      left: 10px;
        bottom:0px;
        margin-bottom: 16px;
    }
    
    .menu-item
    {
    font-size: 9pt;
    }
    
    .block-right-content, .block-left-content-container
    {
        line-height: 17pt;
    }

    #menu-logo h1
    {
      font-size: 13pt;
    }

    .block-left-content-container
    {
      font-size: 9pt;
    }

    .block-left-content
    {
      margin-left: 11px;
    }

    .block-left-content::before, .blog-post-title::before
    {
      font-size: 20pt;
      top:0px;
    }

    .block-sublabel
    {
      font-size: 8pt;
      left: 11px;
    }

    .block-right-content
    {
      font-size: 9pt;
    }

    #blog-post-block-right
    {
      width: calc(100vw - 52px);
    }
}

@media only screen and (max-height: 414px)
{
  #content
  {
    padding-top: 40vh;
  }
}
/**/