:root {
  
  /* Grid */
  --grid-gutter: 20px;
  
  /* Typography */
  --heading-font-family: 'Devign Sans', sans-serif;
  --body-font-family: 'Devign Sans', sans-serif;
  --pretty-font:'Devign Serif Normal', serif;

  /* Colors */
  --brand-orange:#EA9F74;
  --brand-blue:#7F9797;

  --brand-green:#899586;
  --brand-green-20:#E3E6E2;
  
  --brand-black:#232222;
  --brand-white:#fffdfd;
  
  --transition:all 1.5s ease-out;

}

@font-face {
    font-family: 'Devign Serif Normal';
    src: url('/app/themes/devignstudios-toolkit/assets/fonts/Devign-Serif.woff2') format('woff2'),
        url('/app/themes/devignstudios-toolkit/assets/fonts/Devign-Serif.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Devign Sans';
    src: url('/app/themes/devignstudios-toolkit/assets/fonts/Devign-Sans.woff2') format('woff2'),
        url('/app/themes/devignstudios-toolkit/assets/fonts/Devign-Sans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



.row {
  --bs-gutter-x: 4rem !important;
}

#AppMain img {
  background:#333;
}

/*--------------------------------------------------------------
  >> : GSAP Setup ~ edit at your own risk!
--------------------------------------------------------------*/

  #main-menu {
    position: fixed;
    top: 0;
    height: 100px; /* the height of the navbar */
    z-index: 99;
  }

  #AppMain {
    min-height: 100vh;
  }

  #smooth-content {
    padding-top: 100px; /* the height of the navbar */
  }

/*--------------------------------------------------------------
  >> : Typography
--------------------------------------------------------------*/

  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5,
  h6, .h6,
  em,
  li,
  p  {
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }
  
  body {
    font-family: var(--body-font-family);
    line-height: 1.5;
    font-size:1.2rem;
/*    opacity: 0;*/
  }

  .row-indent {
      padding-left:calc(var(--bs-gutter-x) * 1.5) !important;
      padding-right:calc(var(--bs-gutter-x) * 1.5) !important;
  }

  p {
    margin-bottom: 1.75rem;
    font-size:2.2rem;
  }


  .text-indent {
    text-indent: 4rem;
  }

  em {
    font-family:var(--pretty-font);
    letter-spacing: -0.06em;
    font-size:1.2em;
    line-height:0.5em;
  }

  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5,
  h6, .h6 {
    font-family: var(--heading-font-family);
    font-weight: 400;
    font-style: normal;
  }

  h1, .h1 {
    font-size:clamp(6rem, 9rem, 9rem);
    font-weight:400;
    margin: 2rem 0;
    line-height:1.1em;
  }



  h1 em {
    /*font-family:var(--pretty-font);
    letter-spacing: -6px;*/
  }


  h2, .h2 {
    font-size:clamp(4.5rem, 7rem, 7rem);
    line-height: 1.2;
    margin: 1rem 0;
    color: var(--color-blue);
  }

  h3, .h3 {
    font-size: 2.5rem;
    line-height: 1.5;
    font-weight: 500;
  }

  h4, .h4 {
    font-size: 1.8rem;
    line-height: 1.5;
  }

  h5, .h5 {
    font-size: 1.7rem;
    line-height: 1.5;
  }

  h6, .h6 {
    font-size: 1.5rem;
    line-height: 1.5;
  }

  #AppMain ul {
    padding: 0;
    list-style: none;
  }


  @media (max-width: 1920px) {
    h1, .h1 {
      font-size:7rem;
    }

  }
  @media (max-width: 1400px) {
    h2, .h2 {
      font-size: 4.5rem;
      line-height: 1.1em;
    }
    h3, .h3 {
      font-size: 2rem;
      line-height: 1.1em;
    }
  }

  @media (max-width: 992px) {

    h1, .h1 {
      font-size: 5rem;
      line-height: 1.1em;
    }

    h2, .h2 {
      font-size: 3.5rem;
      line-height: 1.1em;
    }


  }

  @media (max-width: 768px) {

    h1,
    .h1 {
      font-size: 5rem;
      line-height: 1.1em;
    }

    h2, .h2 {
      font-size: 3rem;
      line-height: 1.1em;
    }


    p {
      font-size: 1.2rem;
    }
    .padded-spacer {
      height: 7rem;
    }
    .padded-spacer-sm {
      height: 2rem;
    }

  }

  @media (max-width: 576px) {
    h1,
    .h1 {
      font-size: 3rem;
      line-height: 1.1em;
    }

    h2, .h2 {
      font-size: 2rem;
      line-height: 1.1em;
    }

  }

  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child,
  p:first-child, 
  ul:first-child, 
  ol:first-child {
    margin-top: 0;
  }

  h1:last-child,
  h2:last-child,
  h3:last-child,
  h4:last-child,
  h5:last-child,
  h6:last-child,
  p:last-child, 
  ul:last-child, 
  ol:last-child {
    margin-bottom: 0;
  }

  .padded-spacer {
    display: inline-flex;
    height: 10rem;
    width: 100%;
    align-items: center;
    vertical-align: middle;
  }

  .padded-spacer-sm {
     display: inline-flex;
      height: 4rem;
      width: 100%;
      align-items: center;
      vertical-align: middle;
  }

/*--------------------------------------------------------------
  >> : Aspect Ratios
--------------------------------------------------------------*/


[data-aspect-ratio="1/1"] {
    aspect-ratio: 1/1 !important;
}

[data-aspect-ratio="1/2"] {
    aspect-ratio: 1/2 !important;
}

[data-aspect-ratio="1/3"] {
    aspect-ratio: 1/3 !important;
}

[data-aspect-ratio="2/1"] {
    aspect-ratio: 2/1 !important;
}

[data-aspect-ratio="2/3"] {
    aspect-ratio: 2/3 !important;
}

[data-aspect-ratio="3/1"] {
    aspect-ratio: 3/1 !important;
}

[data-aspect-ratio="3/2"] {
    aspect-ratio: 3/2 !important;
}

[data-aspect-ratio="3/4"] {
    aspect-ratio: 3/4 !important;
}

[data-aspect-ratio="4/1"] {
    aspect-ratio: 4/1 !important;
}

[data-aspect-ratio="4/3"] {
    aspect-ratio: 4/3 !important;
}

/*--------------------------------------------------------------
  >> : Colours
--------------------------------------------------------------*/
  
  [data-bg-color="brand-white"] {
    background: var(--brand-white);
    color: var(--brand-black);
  }

  [data-bg-color="brand-orange"] {
    background: var(--brand-orange);
  }

  [data-bg-color="brand-blue"] {
    background: var(--brand-blue);
  }

  [data-bg-color="brand-green"] {
    background: var(--brand-green);
    color: var(--brand-white);
  }

  [data-bg-color="brand-green-20"] {
    background: var(--brand-green-20);
    color: var(--brand-black);
  }

  [data-bg-color="brand-black"] {
    background: var(--brand-black);
    color: var(--brand-white);
  }