/**
 * Content
 */
 html{
    scroll-behavior: smooth;
  }
   body {
       background:#333;
  }
  
  h1 {
    padding: 0;
    margin: 0;
    color: white;
      transition:all .4s ease-in-out;
  }
      
  @keyframes gradient { 
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
  }
  
  a, a:hover{
    transition:all .4s ease;
     
  }
  
  a:active {
    opacity: 0.7;
  }
  
  .page a.active {
    opacity: 1;
  }
  
  i,
  em {
    font-style: italic;
  }
  
  b,
  strong {
    font-weight: bold;
  }
  
  sub,
  sup {
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    top: 0.3em;
  }
  
  sup {
    top: -0.4em;
  }
  
  s {
    text-decoration: line-through;
  }
  
  img {
    border: 0;
    padding: 0;
  }
  
  ul,
  ol {
    margin: 0;
    padding: 0 0 0 1em;
  }
  
  blockquote {
    margin: 0;
    padding: 0 0 0 2em;
  }
  
  hr {
    background: rgba(255, 255, 255, .7);
    border: 0;
    height: 1px;
    display: block;
  }
  h3{
    font-family: "Miller Text", Icons;
      font-weight: 400;
      font-size:2.2rem;
    font-style: normal;
      margin:2rem 0;
      line-height:1.4;
  }
  .content img {
    float: none;
    margin-bottom: 1em;
  }
  
  .gallery_image_caption {
      margin-top: 1.2rem;
      margin-bottom: 0.5rem;
      font-size: 1.5rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.35);
    font-family: Karla, Icons;
    font-style: normal;
    line-height: 1.3; 
  }
  
  /**
   * Loading Animation
   */
  
  .loading[data-loading] {
    position: fixed;
    bottom: 8px; 
      left: 8px;
  }
  
  /**
   * Editor styles
   */
  
  [data-predefined-style="true"] bodycopy {
    font-weight: 400;
    color:rgb(41, 41, 41);
    font-family: "ROM Variable", Icons;
    line-height: 1.4;
    font-size: 1.5rem;
    font-style: normal;
      font-variation-settings: 'slnt' 0;
  }
  p {
    font-size: 3rem;
    font-weight: 700;
    font-family: Karla, Icons;
    font-style: normal;
    line-height: 1.5;
  }
  
  [data-predefined-style="true"] bodycopy a {
    text-decoration: none;
    font-style: normal;
      transition:all .3s ease;
      font-weight: 700;
      font-family: "Social Variable", Icons;
      color:rgb(0, 0, 0);
   padding:.5rem;
      font-variation-settings: 'wdth' 100, 'slnt' 0;
  }
  
  [data-predefined-style="true"] bodycopy a.white-hover-state:hover {
  color: #ffffff !important;
      transition:all .3s ease;
    border-bottom: 2px solid rgba(255, 255, 255, 1);  
  }
  [data-predefined-style="true"] bodycopy a:hover {
      transition:all .2s ease;
      color:#000 !important;
      background:rgba(255, 255, 0, 0.5);
  
  }
  
  
  bodycopy a.image-link,
  bodycopy a.icon-link,
  bodycopy a.image-link:hover,
  bodycopy a.icon-link:hover {
    border-bottom: 0;
    padding-bottom: 0;
  }
  
  [data-predefined-style="true"] h1 {
    font-family: Karla, Icons;
    font-style: normal;
    font-weight: 700;
    padding: 0;
    margin-bottom: 1rem;
    /* font-size: 5.5rem; */
    line-height: 1;
    color: rgb(255, 255, 255);
        font-size: 4rem;
      }
  
  [data-predefined-style="true"] h1 a {
    color: rgb(255, 213, 0);
  }
  
  [data-predefined-style="true"] h2 {
    font-family: "Social Variable", Icons;
    font-style: normal;
    font-weight: 700;
    padding: 0;
    margin: 0 0 2rem 0;
    line-height: 1.1;
      color: rgb(255, 255, 255);
      font-size: 3.6rem;
      font-variation-settings: 'wdth' 100, 'slnt' 0;
  }
  
  [data-predefined-style="true"] h2 a {
    color: rgba(0, 0, 0, 0.85);
      font-family: Karla, Icons;
      font-style: normal;
      font-weight: 700;
  }
  
  [data-predefined-style="true"] small {
    font-size: 1.3rem;
    line-height: 1.5;
    font-family: "Social Variable", Icons;
    font-style: normal;
    font-weight: 700;
    color: rgb(128, 128, 128);
      padding-bottom:1.5rem;
      display:inline-block;
      font-variation-settings: 'wdth' 100, 'slnt' 0;
  }
  
  [data-predefined-style="true"] small a {
    color: rgb(0, 0, 0);
    border-bottom-width: 0em;
  }
  
  /**
   * Breakpoints
   */
  
  [data-css-preset].mobile #plugin,
  [data-css-preset].mobile #backdrop,
  .mobile #backdrop,
  .mobile #plugin {
    position: relative;
    height: 50vh;
    min-width: 100%;
    width: calc(100% - 80rem) /*!right_fit*/;
    top: 0;
    bottom: auto;
    left: 0 /*!right_fit*/;
  }
  
  [data-css-preset] .page {
      background-color: initial /*!page_bgcolor*/;
  }
  
  .mobile .page,
  [data-css-preset].mobile .page {
    position: relative;
    max-width: 100%;
    width: 100%;
      padding:2rem;
    background-color: transparent /*!page_bgcolor*/;
  }
  
  [data-css-preset] .container {
    margin-left: auto /*!content_center*/;
    margin-right: auto /*!content_center*/;
    text-align: left /*!text_left*/;
  }
  
  [data-css-preset] body {
    background-color: rgb(0, 0, 0)/*!body_bgcolor*/;
  }
  
  [data-css-preset] .container_width {
    width: 100%/*!content_center*/;
  }
  
  [data-css-preset] .content_padding {
    padding-top: 1.4rem /*!main_margin*/;
    padding-bottom: 1.4rem /*!main_margin*/;
    padding-left: 1.4rem /*!main_margin*/;
    padding-right: 1.4rem /*!main_margin*/;
  }
  
  [data-css-preset] .backdrop {
    width: 100% /*!background_cover*/;
  }
  
  [data-css-preset] text-limit {
    display: inline-block /*!text_width*/;
    max-width: 66rem/*!text_width*/;
  }
  
  /**
   * Thumbnails
   */
  
  div[thumbnails] {
    justify-content: flex-start;
  }
  
  [data-css-preset] .thumbnails {
      background-color: transparent/*!thumbnails_bgcolor*/;   
  }
  
  [data-css-preset] .thumbnails_width {
      width: 93%/*!thumbnails_width*/;
  }
  .thumbnails .content_padding{
      margin-top:3.5rem;
  }
  
  [data-css-preset] [thumbnails-pad] {
      padding: 2.2rem/*!thumbnails_padding*/;
  }
  
  [data-css-preset] [thumbnails-gutter] {
      margin: -4.4rem/*!thumbnails_padding*/;
  }
  
  [data-css-preset] [responsive-layout] [thumbnails-pad] {
      padding: 0.4rem/*!responsive_thumbnails_padding*/; 
  }
  
  [data-css-preset] [responsive-layout] [thumbnails-gutter] {
      margin: -0.8rem/*!responsive_thumbnails_padding*/; 
  }
  
  .thumbnails .thumb_image {
    outline: 0px solid rgba(0,0,0,.12);
      outline-offset: -1px;
  }
  
  .thumbnails .title {
      margin-top: 1.2rem;
      margin-bottom: 0.1rem;
      font-size: 1.6rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.75);
    font-family: "Social Variable", Icons;
    font-style: normal;
    line-height: 1.1;
      font-variation-settings: 'wdth' 100, 'slnt' 0;
  }
  
  .thumbnails .tags {
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      font-size: 1.3rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.25);
    font-family: Karla, Icons;
    font-style: normal;
    line-height: 1.2;
  }
  
  .thumbnails .tags a {
    border-bottom: 0;
      color: rgba(0, 0, 0, 0.35);
      text-decoration: none;
  }
  
  .thumbnails .has_title .tags {
    margin-top: 0rem;
  }
  
  /**
   * Site Menu
   */
  
  [data-css-preset] #site_menu_button {
      color: rgba(0, 0, 0, 1);
      line-height: 1;
      font-size: 30px /*!site_menu_button*/;
      padding: .35rem;
      border-radius:50%;
      line-height: 1;
      background: rgba(255,255,255,.5);
      position: fixed;
    top: 0rem;
    right: 0rem;
      margin:.6rem 1rem 1rem 1rem !important;
  }
  
  body.mobile #site_menu_button {
    margin: -6px;
      font-size: 34px;
  }
  
  #site_menu_button.custom_icon {
    width: 40px;
      height: auto;
  }
  
  #site_menu_button.active {
    display: none;
  }
  
  
  /**
   * Site Menu
   */
  
  #site_menu {
    font-family: "ROM Variable", Icons;
    background: rgba(255,255,255, 0.95);  
    font-size: 1.65rem;
    font-style: normal;
    font-weight: 400;
    line-height:2;
    padding: 7rem 3rem 4rem 3rem !important;
    max-width: 600px;
    min-width: 300px;
    text-align: left;
     color:#000;
    display: flex;
    justify-content: flex-start;
      font-variation-settings: 'slnt' 0;
  }
  
  body.mobile #site_menu {
    width: 100%;
  }
  
  #site_menu .page-link a {
    color: rgba(0,0,0,1);
      padding:0 .5rem !important;
      font-size: 1.65rem;
    font-style: normal;
    font-weight: 400;
  }
  #site_menu .page-link a:hover,#site_menu .set-link a:hover{
       background:rgba(255, 255, 0, 1);
      color:rgba(0, 0, 0, 1);
      font-size: 1.65rem;
    font-style: normal;
    font-weight: 400;
  }
  
  #site_menu .set-link > a {
    color: rgba(0, 0, 0, 1);      
    font-size: 1.65rem;
    font-style: normal;
    font-weight: 400;
      padding:0 .5rem !important;
  }
  
  #site_menu a:active {
    opacity: .8;
  }
  
  #site_menu a.active {
    opacity: .8;
  }
  
  #site_menu .close {
    display: none;
    color: rgba(0, 0, 0, 1);
    font-size: 57px;
  }
  
  body.mobile #site_menu .close {
    display: block;
    font-size: 57px;
    line-height: 1em;
      margin:.6rem .7rem 1rem 1rem !important;
  }
  
  #site_menu .break {
    height: 28px;
  }
  
  #site_menu .indent {
    margin-left: 28px;
  }
  
  /*
   * Shop Button
   */
  
  [data-css-preset] #shop_button {
    color: rgba(0, 0, 0, 0.85);
      background: transparent;
    font-size: 36px;
      font-style: normal;
    font-weight: 400;
      line-height: 1;
      position: fixed;
    padding: 6px;
    top: 5rem /*!shop_button*/;
    right: 3rem /*!shop_button*/;
  }
  
  #shop_button.text {
      font-size: 1.4rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.75);
    font-family: Karla, Icons;
      padding: 0;
      line-height: 1.3;
  }
  
  #shop_button.custom_icon {
    width: 40px;
      height: auto;
  }
  
  body.mobile #shop_button:not(.text) {
    margin: -6px;
      font-size: 40px;
  }
  
  /*
   * Shop Product Widget
   */
  
  .shop_product {
      width: 100%;
    max-width: 22rem;
      position: relative;
      display: block;
  }
  
  .shop_product .price {
    font-family: Karla, Icons;
    font-size: 1.4rem;
    line-height: 1;
    color: rgba(0, 0, 0, 0.75);
      display: block;
      margin-bottom: 1rem;
    font-style: normal;
    font-weight: 400;
  }
  
  .shop_product .dropdown {
      font-family: Karla, Icons;
      font-size: 1.4rem;
      display: inline-block;
    width: 100%;
      border: 1px solid rgba(0,0,0,.2);
      background:  white url(https://static.cargo.site/assets/images/select-arrows.svg) no-repeat right;
      margin-bottom: 1rem;
      line-height: 1.2;
      padding: .7rem 1rem;
    font-style: normal;
    font-weight: 400;
  }
  
  .shop_product .button {
      font-family: Karla, Icons;
    font-size: 1.4rem;
      background: rgba(0, 0, 0, 0.75);
      color: rgba(255,255,255,1);
      flex: 0 0 50%;
      text-align: left;
      display: inline-block;
    line-height: 1;
      padding: .8rem 1rem .9rem;
    font-style: normal;
    font-weight: 400;
  }
  
  /*
   * Image Zoom
   */
  
  .content img.image-zoom:active {
    opacity: .7;
  }
  
  /**
   * Quick View
   */
  
  [data-css-preset] .quick-view {
      padding-top: 2.5rem /*!quick_view_padding*/;
      padding-bottom: 2.5rem /*!quick_view_padding*/;
      padding-left: 2.5rem /*!quick_view_padding*/;
      padding-right: 2.5rem /*!quick_view_padding*/;
      height: 100% /*!quick_view_height*/;
      width: 100% /*!quick_view_width*/;
  }
  
  body.mobile .quick-view {
      width: 100%;
      height: 100%;
      margin: 0;
  }
  
  
  [data-css-preset] .quick-view-background {
    background: rgba(0, 0, 0, 0.90) /*!quick_view_bgcolor*/;
  }
  
  .quick-view-caption {
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
      transition: 100ms opacity ease-in-out;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 2rem 0;
      text-align: center;
      font-size: 1.8rem;
  }
  
  .quick-view-caption span {
      padding: 0.5rem 1rem;
      display: inline-block;
      background: rgba(0,0,0,0.4);
      color: white;
  }
  
  
  /**
   * Quick View Navigation 
   */
  
  .quick-view-navigation .left-arrow {
      left: 10px;
  }
  
  .quick-view-navigation .right-arrow {
      right: 10px;
  }
  
  .quick-view-navigation .left-arrow,
  .quick-view-navigation .right-arrow {
      /* Change height/width together to scale */
      height: 36px;
      width: 36px;
  }
  
  .quick-view-navigation .left-arrow .inner-color,
  .quick-view-navigation .right-arrow .inner-color {
      stroke: #fff;
      stroke-width: 1.5px;
  }
  
  .quick-view-navigation .left-arrow .outer-color,
  .quick-view-navigation .right-arrow .outer-color {
      stroke: #000;
      stroke-width: 2.5px;
      opacity: 0.6;
  }
  
  .quick-view-navigation .close-button {  
      top: 10px;
      right: 10px;
      /* Change height/width together to scale */
      width: 36px;
      height: 36px;
  }
  
  .quick-view-navigation .close-button .inner-color {
      stroke: #fff;
      stroke-width: 1.5px;
  }
  
  .quick-view-navigation .close-button .outer-color {
      stroke: #000;
      stroke-width: 2.5px;
      opacity: 0.6;
  }
  
  /** 
   * Image Gallery Navigation Arrows 
   */
   
  .image-gallery-navigation .left-arrow,
  .image-gallery-navigation .right-arrow {
      /* Change height/width together to scale */
      height: 36px;
      width: 36px;
  }
  
  .image-gallery-navigation .left-arrow .inner-color,
  .image-gallery-navigation .right-arrow .inner-color {
      stroke: #fff;
      stroke-width: 1.5px;
  }
  
  .image-gallery-navigation .left-arrow .outer-color,
  .image-gallery-navigation .right-arrow .outer-color {
      stroke: #000;
      stroke-width: 2.5px;
      opacity: 0.6;
  }
  
  /**
   * Wallpaper Backdrop Navigation Arrows 
   */
  
  .wallpaper-navigation .left-arrow,
  .wallpaper-navigation .right-arrow {
     /* Change height/width together to scale */
     width: 36px;
     height: 36px;
  }
  
  .wallpaper-navigation .left-arrow .inner-color,
  .wallpaper-navigation .right-arrow .inner-color {
     stroke: #fff;
      stroke-width: 1.5px;
  }
  
  .wallpaper-navigation .left-arrow .outer-color,
  .wallpaper-navigation .right-arrow .outer-color {
      stroke: #000;
      stroke-width: 2.5px;
      opacity: 0.6;
  }
  
  
  /**
   * Feed
   */
  
  .feed .content_container .page {
   border:none !important;
  }
  
  .feed .content_container .page_container:first-child .page {
    border-top: 0;
  }
  
  /**
  * Custom Styles
  */
  a#logo { border-bottom:none;
      text-decoration:none;
      background:transparent;
      float:left;
      color:#fff;
      font-family: "Social Variable", Icons;
      transition:all .3s ease;
    font-style: normal;
    font-weight: 700;
      font-size:2rem !important;
      font-variation-settings: 'wdth' 100, 'slnt' 0;
  }
  a#logo:hover { transition:all .3s ease;
      color:#f900ff;background:transparent;}
  
  .page_container {
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
  }
  a.JL_logo{
      writing-mode: vertical-rl;
    padding:.7rem;
      font-family: Roboto, Icons;
    font-style: normal;
      margin:0rem 1rem 1rem 1rem;
      top:-3.5rem;
      left:.5rem;
      position:fixed;
      overflow:visible;
    font-weight: 700;
  }
  a.black-hover-state:hover {
    color:rgba(65, 65, 65, 1) !important;
      /*border-bottom:2px solid rgba(41,41,41,1) !important;*/
  }
  hr.top-thick-border  {
      height:280px;
      background:#222;
      position:relative;
  }
  
  a.white-hover-state:hover{
      transition:all .4s ease;
      border-bottom:2px solid #fff;
      color:rgba(255, 255, 255, 1) !important;
  }
  /*ANCHOR DIV ON CRATE INTRO SLIDE FROM HOMEPAGE*/
  #scroll-to-crate-intro{
     /* height:100%;
      position:absolute;*/
      -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
  height:100%;
      min-height:100%;
      top:0px;
      position:absolute;
  }
    
  .centered-content h2 {
    padding-top:1.2rem;
  }
  
  #scroll-to-crate-intro .centered-content{ 
      background:#fff;
      text-align:left;
      width:60rem;
      height:60rem;
      margin-top:5%;
     /* margin-top:33%; */
    
      /*box-shadow: .1rem .53rem 2rem rgba(0,0,0,0.125);
      border-top-left-radius:2rem;
      border-bottom-right-radius:2rem;*/
    -moz-border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    border-radius: 50% !important;
   
  }
    
  a[id= "#scroll-to-crate-intro"]:target ~ .page_container {
    -webkit-transform: translateY(-17em);
    transform: translateY(-17em);
  }
  .large-black-button{
    display:inline;
      left:-3rem;
      position:relative;
      margin-top:2rem;
      width:120%;
      display:inline-block;
      overflow:visible;
      padding:1.75rem 0rem 1.75rem 3rem;
      background:rgba(29, 23, 41, 0.47); 
      transition:all .5s ease;
      color:#fff !important;
  }
  .large-black-button:hover{
      background:rgb(255, 0, 237); 
      transition:all .5s ease;
      color:#fff !important;
  }
  
  .plain-small-list-dark li{
      border-bottom:none !important;
  list-style:none !important;
      list-style-type:none !important;
       line-height:1.4 !important;
  }
  .plain-small-list-dark li:last-child{
      border-bottom:1px solid rgba(255,255,255,0) !important;
  }
  /*******************
  ***** HEADER *******
  *******************/
  
  /* SHOW OR HIDE HEADER ON SCROLL */
  
  .page-header {
    overflow:hidden;
    width:100% !important;
      padding:0rem 0 1rem;
      top: 0;
      transition: top 0.2s ease-in-out;
      left:0;
  }
  
  .pull-left {
    float:left;
  }
  .pull-right {
    float:right;
  }
  
  
  .menu {
     overflow:hidden;
     list-style: none;
   padding:0;
      position:absolute;right:3rem;
      margin-top:0;
      margin-bottom:0;
  
  }
  
  
  .menu li,.menu li a {
    float:left;
    font-family: "ROM Variable", Icons;
    margin-left: 1em;
      font-style: normal;
      font-weight: 400;
      font-size:1.4rem;
      line-height:2.8;
      font-variation-settings: 'slnt' 0;
  }
  .menu li a {
    color:#002326 !important;
    text-decoration:none;
  }
  
  .menu li a:hover{
  
  }
  /** LOGO **/
  header .container .logo {
      font-size:2.25rem !important;
      font-family: "ROM Variable", Icons;
    font-style: normal;
      color:rgba(0, 0, 0, 1)
   !important;
    font-weight: 500;
      line-height:2;
      text-align:left;
      font-variation-settings: 'slnt' 0;
  }
  header .container .logo:hover{
  }
  /*
  - - - Relevant to demo - - - */
  .page-header {
    position: fixed;
    left:0; top:0; width:100%;
    box-sizing:border-box;
    transition: top 0.6s;
    
  }
  .page-header .container{
      background:rgba(255, 255, 255, 1);
      transition:.2s all ease-in-out;
      padding:1.4rem 1rem 1.4rem 1rem;
     /* box-shadow: 0rem .1rem 2rem rgba(1, 1, 1, 0.34);*/
  }
  
  .page-header.off-canvas {
    top: -89px;
  }
  .page-header.fixed {
    top:0;
      z-index: 9999;
  }
  
  
  /**********************
  ***** HOME PAGE *******
  **********************/
  
  
  /** CRATE INTRO SECTION ON HOME PAGE - DEFAULT DESKTOP STYLES **/
  
  #crate-home-intro.content-in-circle{
    text-align: center; 
      border-radius: 50% !important; 
      width: 52rem; 
      height: 52rem; 
      position: absolute; 
      top: 50%; left: 50%; 
      transform: translate(-50%, -50%); 
      display: block; 
      padding: 2rem;
      opacity:1;      
      background: linear-gradient(-45deg, #7e007e, #033232, #080917, #a03eda);
    background-size: 450% 450%;
    -webkit-animation: Gradient 20s ease infinite;
    -moz-animation: Gradient 20s ease infinite;
    animation: Gradient 20s ease infinite;
       transition:all .6s ease-in-out !important;
  }
  #crate-home-intro.content-in-circle:hover{
    background: linear-gradient(-45deg, #ff83ff, #0bca8a, #faa632, #36c2fb);
    background-size: 350% 350%;
    -webkit-animation: Gradient 40s ease infinite;
    -moz-animation: Gradient 40s ease infinite;
    animation: Gradient 40s ease infinite;
       transition:all .6s ease-in-out !important;
  }
  #crate-home-intro.content-in-circle:hover a{
    color:#fff !important;
       transition:all .3s ease-in-out !important;
  }
  #crate-home-intro.content-in-circle small{
    margin-top:3rem !important;
      margin:0 auto;
      width:100%;
      text-align:center !important;
  }
  #crate-home-intro.content-in-circle h2{
    max-width:78%;
      margin:0 auto;
  }
  
  @-webkit-keyframes Gradient {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
  
  @-moz-keyframes Gradient {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
  
  @keyframes Gradient {
    0% {
      background-position: 0% 50%
    }
    50% {
      background-position: 100% 50%
    }
    100% {
      background-position: 0% 50%
    }
  }
  
  
  
  i.hide-icon {
    color:rgba(255,255,255,0);
      transition:all .4s ease;
  }
  i.hide-icon:hover {
      transition:opacity .3s ease;
      color:rgba(255,255,255,1);
      transition:all .4s ease;
  }
  h1.page-title{
   /* font-size:4.2rem !important;
      text-align:left !important;
      padding-left:5rem;*/
  }
  h1.page-title-centered{
      text-align:center !important;
  }
   .crate-intro-hr{
          display:block;
          background:rgba(255,255,255,0.3);
          max-width:27%;
          height:1px;
       text-align:center;
          margin-top:1rem;
  }
  a.sans-serif-cta{
    color:#ff04c0 !important; 
      font-family:Karla,sans-serif !important;
  }
  #crate-home-intro a:hover{
      color:#414141;
  }
  h2.home-intro a{
     font-family: Karla, Icons;
    font-style: normal;
    font-weight: 700;
  }
  h2.home-intro a:hover{
    opacity:.5;
      transition:all .4s ease;
  }
  
  
  /** GOOGLE MATERIAL ICONS **/
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
      opacity:1;
    font-size: 70% !important;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
   vertical-align: middle;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
  }
  
  .material-icons.rotate-90-clockwise{
    
  }
  .material-icons.rotate-90-clockwise:hover,
  .material-icons.rotate-90-clockwise:on-click{
    
  }
  
  .plain-small-list,.plain-small-list-dark{
      list-style:none !important;
      list-style-type:none !important;
      padding-left:0px;
      font-size:1.4rem !important;
       line-height:1.2 !important;
          font-family: Karla, Icons;
      font-style: normal;
      font-weight: 400;
      letter-spacing:.031rem;
  }
  .plain-small-list li,.plain-small-list-dark li {
  border-bottom:none !important;
  }
      hr.mobile-only{
      display:none;
  }
  
  .shows-on-desktop-only{
      display: contents;
  }
  
   .page_content h2.headline {
      font-size:5.5rem;
          line-height:1.12;
      margin-bottom:3rem;
  }
  /************************
  ***** MEDIA QUERIES *****
  *************************
  ******* SMALLEST ********
  ************************/
  
  @media screen and (max-width:680px) {
  
       .page_content h2.headline {
      font-size:3.8rem !important;
          line-height:1.2 !important;
      margin-bottom:2rem !important;
  }
      /** GOOGLE MATERIAL ICONS **/
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
      opacity:1;
    font-size: 90% !important;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
   vertical-align: middle;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
  }
   
      .small-brand-logo{
	max-height:2rem !important;
}
      .site-video, .site-video iframe{
      display:block !important;
          visibility:visible !important;
          
  }
     .page .page_content{
      width:100% !important;
         padding:0 !important;
  }
    
      .container .small-crate-logo img, img.small-crate-logo{
      margin-bottom:1em !important;
  }
     .eyebrow{
      line-height:1.3 !important;
          font-size:1.1rem !important;
      margin-bottom:0;
  }
      
      .page-header{
      visibility: visible;
          display:block;
  }
    
      h3{
      font-size:2rem;
  }
      h2.headline{
      margin-bottom:2rem !important;
          font-size:95% !important;
  }
      
      header .container .logo {
      font-size:2.5rem !important;
      font-family: "ROM Variable", Icons;
    font-style: normal;
      color:rgba(0, 0, 0, 1)
   !important;
    font-weight: 700;
      line-height:1;
      text-align:left;
          padding:1rem;
      font-variation-settings: 'slnt' 0;
  }
      header .container ul.menu {
      display:none;
  }
      
      .shows-on-desktop-only{
      display: none;
  }
      .content_padding {
    padding-top: 3rem !important;
    padding-bottom: 1rem !important;
    padding-left: .5rem !important;
    padding-right:.5rem !important;
  }
      
  /** LOGO **/
  #jliss_logo{
    color:rgba(255, 255, 255, 1);
      font-size:2rem;
      line-height:1;
      /* background:#00b578; */
      font-family: "ROM Variable", Icons;
    font-style: normal;
    font-weight: 900;
      position:fixed;
      left:1.2rem;
      top:1.4rem;
      width:auto;
      font-variation-settings: 'slnt' 0;
  }
  #jliss_logo:hover{
      color:rgba(255, 255, 255, 0.67)
   !important;
  }
  
      bodycopy {
    font-weight: 400;
    color:rgb(41, 41, 41);
    font-family: "Miller Text", Icons;
    line-height: 1.5 !important;
    font-size: 2.1rem !important;
    font-style: normal;
  }
      
      .desktop_header_nav{
    position:absolute;
      right:1rem;
      top:1rem;
      width:auto;
      visibility:hidden;
      display: none;
  }
  .desktop_header_nav a{
      float:right;
      padding:0rem 1.7rem;
      font-size:1.7rem !important;
      font-family: Karla, Icons;
    font-style: normal;
    font-weight: 700;
  }
    .mobile_header_nav{
    position:fixed;
    background:transparent;
      right:1rem;
      top:1.3rem;
      width:auto;
      visibility:visible !important;
      display:block !important;
  }
  .mobile_header_nav a{
    color:#ffffff !important;
      float:right;
      margin:0rem 0rem 0rem 3rem;
      font-size:1.6rem !important;
      font-family: Karla, Icons;
    font-style: normal;
    font-weight: 700;
  }
      
  h1.page-title-centered{
      text-align:left !important;
      padding-bottom:2rem;
  }
      h2{
      font-size:3.5rem !important;
      line-height:1.2 !important;
  }
   .crate-gradient-bg{
    background: linear-gradient(-45deg, #7e007e, #033232, #080917, #a03eda);
    background-size: 450% 450%;
    -webkit-animation: Gradient 20s ease infinite;
    -moz-animation: Gradient 20s ease infinite;
    animation: Gradient 20s ease infinite;
       transition:background 1s ease-in-out !important;
      }
      .page_content div{
      width:100% !important;
          max-width:100% !important;
          padding:0rem !important;
      margin:0 auto;
}
   
  #crate-home-intro.content-in-circle {
    text-align: left !important; 
      border-radius: 0px !important; 
      width: 95% !important; 
      height:auto !important;
      margin:0 auto;
      float:none;
      position: absolute; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      display: block; 
      padding:0rem 2rem 3rem 2.7rem !important;
      opacity:1;
      background: linear-gradient(-45deg, #7e007e, #033232, #080917, #a03eda);
    background-size: 350% 350%;
    -webkit-animation: Gradient 10s ease infinite;
    -moz-animation: Gradient 10s ease infinite;
    animation: Gradient 10s ease infinite;
     }
     
      #crate-home-intro.content-in-circle h2{
    text-align:left !important;
      padding-left:0 !important;
      margin-left:0px;
      max-width:100% !important;
      width:100% !important;
      font-size:2.5rem;
  }
      #crate-home-intro.content-in-circle small{
          text-align:left !important;
        margin-top:0rem !important;
      padding-top:0rem !important;
      font-size:1.2rem;
  }
        h1 {
    font-family: Karla, Icons;
    font-style: normal;
    font-weight: 700;
    padding: 0;
    margin: 0;
      font-size:2.9rem !important;
      /* font-size:5rem !important;*/
    /* font-size: 5.5rem !important; */
    line-height: 1.1 !important;
    color: rgb(255, 255, 255);
             transition:all .4s ease-in-out;
      }
  h1.page-title{
      padding-bottom:2rem;
      text-align: left !important;
      font-size:4.25rem !important;
      padding-left:0rem;
  }
      .small-crate-logo img{
      margin-bottom:0em !important;
  }
      .desktop_header_nav{
      display:none;
  }
      small{
          text-align:left !important;
        margin-top:1rem !important;
      padding-top:0rem !important;
      font-size:1.6rem !important;
  }
      .plain-small-list,.plain-small-list-dark{
      list-style:none !important;
      list-style-type:none !important;
      padding-left:0px;
      font-size:1.6rem !important;
       line-height:1.2 !important;
          font-family: Karla, Icons;
      font-style: normal;
      font-weight: 400;
      letter-spacing:.031rem;
  }
     .plain-small-list li{
      border-bottom:1px solid rgba(0,0,0,0.1);
         padding:0rem 0rem .5rem 0rem;
         margin-bottom:.5rem;
      }
      .plain-small-list-dark li{
      border-bottom:1px solid rgba(255,255,255,0.1);
     list-style:none !important;
      list-style-type:none !important;
  }
         .plain-small-list li:last-child{
      border-bottom:none !important;
  }
      ul.info-section li a{
      font-size:2rem;
      line-height:1.8
  }
      hr.mobile-only{
      display:visible !important;
          height:2px;
          margin:1.5rem auto 3rem !important;
          background:rgba(255,255,255,0.7) !important;
          color:rgba(255,255,255,0.7) !important;
  
      }
  }
      
       
  /************************
  ***** MEDIA QUERIES *****
  *************************
  ******* MEDIUM ********
  ************************/
  @media screen and (min-width: 550px) and (max-width: 915px) {
       
      h1 {
    font-family: Karla, Icons;
    font-style: normal;
    font-weight: 700;
    padding: 0;
    margin: 0;
    /* font-size: 7rem; */
    line-height: 1;
    color: rgb(255, 255, 255);
        transition:all .4s ease-in-out;
      }
  }
  .page-title img{
     position: relative; 
      top: 4rem; 
      width:70%;
      height:70%;
      max-width:320px;
      left: 50%; 
      transform: translate(-50%, -50%); 
      display: block; 
  }
  .text-align-left{
    text-align:left !important;
  }
  ul.project-details {
    padding-left:0;
  }
.small-brand-logo{
	max-height:2rem !important;
}
  
  ul.project-details li{
    font-family: "ROM Variable", Icons;
    font-style: normal;
    font-weight: 400;
      font-size:1.4rem !Important;
      line-height:1.2;
      margin-bottom:.7rem;
      border-bottom:1px dotted rgba(0,0,0,.2);
      padding-bottom:.8rem;
      list-style:none;   
      font-variation-settings: 'slnt' 0;
  }
  ul.project-details li a{
      color:#fff !important;
  }
  .purple{
      color:#f100f7 !important;
      line-height:.9 !important;
  }
  .purple:hover{
      color:#6a0b62 !important;
  }
  ul.project-details li:last-child{
        border-bottom:1px solid rgba(0,0,0,0);
  }
  .crate-small-logo img{
    float:left;
      max-width:19% !important;
      height:auto !important;
      margin:2rem 0rem 2rem 0rem;
  }
  .small-crate-logo img{
    max-width:30% !important;
      height:auto !important;
      width:100%;
      margin-top:0rem !important;
  }
  a.visit-external-site {
       padding:0rem 0rem .5rem 0rem;
      background:transparent;
      color:#f100f7 !important;
      transition:all .4s ease;
      text-transform:uppercase;
      font-size:1.5rem;
  }
  a.visit-external-site i.material-icons{
    font-size:1.5rem;
  }
  a.visit-external-site:hover {
     color:#414141 !important;
          transition:all .4s ease-in-out;
  }
  h2.guyot-serif{
    font-family: "Guyot Text", Icons;
    font-style: normal;
    font-weight: bold;
  }
  #about-me-section h1{
      text-align:left;
      margin-left:0px;
      padding-bottom:3rem;   
  }
  .info-section li{
      margin-bottom:1.3rem;
      line-height:1;
  }
  .down-arrow {
      transform: rotate(-90deg);
  }
  a.yellow-hover-state:hover{
      color:#ffff57 !important;
      transition:all .4s ease;
  }
  .plain-small-list{
      list-style:none;
      padding-left:0px;
      font-size:1.3rem;
  }
  
  
  
  .white-type,h2.white-type{
      color:#ffffff !important;
  }
  i.header-icon{
      font-size:2.3rem !important;
  }
  .container nav {
      position:absolute;
      right:2rem;
      line-height:1.3;
       padding:.5rem 0rem !important;
  }
  .container nav a{
     margin-left:2rem;
      margin-right:0rem !important;
      font-family: "Social Variable", Icons;
      font-style: normal;
      font-size:1.3rem;
      width:auto;
  line-height:1;
      font-weight: 350;
      letter-spacing:0rem;
      color:#515151 !important;
      border-radius:.3rem;
      font-variation-settings: 'wdth' 100, 'slnt' 0;
  }
  .container nav i{
      font-size:1.8rem !important;
  }
  
  .container nav a:hover{
          
  }
  .animated-gradient-bg {
      color: #fff;overflow:visible !important;
      background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
      background-size: 600% 600%;
      -webkit-animation: Gradient 15s ease infinite;
      -moz-animation: Gradient 15s ease infinite;
      animation: Gradient 15s ease infinite;
  }
  
  @-webkit-keyframes Gradient {
      0% {
          background-position: 0% 50%
      }
      50% {
          background-position: 100% 50%
      }
      100% {
          background-position: 0% 50%
      }
  }
  
  @-moz-keyframes Gradient {
      0% {
          background-position: 0% 50%
      }
      50% {
          background-position: 100% 50%
      }
      100% {
          background-position: 0% 50%
      }
  }
  
  @keyframes Gradient {
      0% {
          background-position: 0% 50%
      }
      50% {
          background-position: 100% 50%
      }
      100% {
          background-position: 0% 50%
      }
  }
  
  .marker-overlay{
      display:none;
  }
  
  .small-crate-logo img{
      margin:0rem 0rem 0 0 !important;
      padding:0;
      
  }
  small.eyebrow{
      line-height:1.3 !important;
          font-size:1.3rem !important;
      margin-bottom:0;
  }
  
  .page .small-breakout-bodycopy{
    font-family: "ROM Variable", Icons;
    font-style: normal;
    font-weight: 400;
      font-size:1.6rem;
      line-height:1 !important;
      margin-bottom:.7rem;
      margin-top:0;
      padding-top:0;
       
      font-variation-settings: 'slnt' 0;
  }
  a.white{
      color:#fff !important;
  }
   
  
  .page_content.videoWrapper {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      padding-top: 25px;
      min-height:100% !important;
      min-width:100% !important;
  }
  .page_content.videoWrapper iframe {
      position: absolute;
      margin:0 auto !important;
      min-width: 100% !important;
      min-height: 100% !Important;
  }
  /*
   * Audio Player
   */
  
  .audio-player {
      max-width: 36rem;
      height: 3.3rem;
      outline: 1px solid rgba(0,0,0,0.15);
      color: rgba(0, 0, 0, 0.6);
      background: #fff;
      font-size: 1.2rem;
      line-height: 1.3;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
      font-style: normal;
      font-weight: 400;
      text-align: left;
      margin: 1px 1px 1em 1px;
  }
  
  body.mobile .audio-player {
      max-width: 100%;
  }
  
  .audio-player .separator {
      width: 1px;
      background-color: rgba(0,0,0,0.15);
  }
  
  .audio-player .button {
      background: transparent;
      cursor: pointer;
      fill: rgba(0, 0, 0, 0.85);
  }
  
  .audio-player .icon {
      fill: rgba(0, 0, 0, 0.85);
      padding: 30%;
      width: 100%;
      margin: auto;
  }
  
  .audio-player .buffer {
      background: rgba(0,0,0,0.03);
  }
  
  .audio-player .progress {
      background: rgba(0,0,0,0.1);
  }
  
  .audio-player .progress-indicator {
      border: 1px solid rgba(0, 0, 0, 0.7);
      width: 1px;
      height: 100%;
      right: 0;
      position: absolute;
      cursor: ew-resize;
  }
  
  .audio-player .note-icon {
      height: 100%;
      width: 3.8rem;
      padding: 1rem;
      fill: rgba(0, 0, 0, 0.5);
  }
  
  .audio-player .current-time {
      padding-left: 1rem;
  }
  
  .audio-player .total-time {
      padding-right: 1rem;
  }
  
  .container div.project-byline {
      width:auto;
      height:2rem;
  
  
  }
  .project-byline .date{
      font-size:1.7rem;
      text-align:left;
      margin-left:13rem;
      line-height:1.4 !important;
      font-family: "ROM Variable", Icons;
      font-style: normal;
      font-weight: 400;
      color: rgba(255,255,255,1);
      font-variation-settings: 'slnt' 0;
  }
  .project-byline img{
      height:1.7rem;
      float:left;
      line-height:1;
      padding:0 1.5rem 0 0 !important;
  }
  .overline{
		font-size:1.3rem;
}
.small-brand-logo{
	margin:3rem 0 1rem 0;
}
.gallery_image_caption{
	color:#fff;
}
.top-margin-4rem{
	margin-top:4rem;
}