@font-face {
  font-family:'Garlic' ;
  src: url('Garlic-Outline-Italic.ttf') format('ttf');
}
@font-face {
  font-family:'Garlic' ;
  src: url('./Garlic-Outline-Regular.ttf') format('ttf');
}
@font-face {
  font-family:'Garlic' ;
  src: url('./Garlic-Sans-Regular.ttf') format('ttf');
}
@font-face {
    font-family: 'Channe';
    src: url('Channe-Regular.woff2') format('woff2'),
        url('Channe-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Channe';
    src: url('Channe-Regular.woff2') format('woff2'),
        url('Channe-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body{
  overflow-x: hidden !important;
    background:rgb(0, 0, 0);
   padding: 40px 10vw; 
    height: 100vh;
  }
  
  .grid-container {
    display: grid;
    grid-template: repeat(6, [row] 1fr)/repeat(12, [col] 1fr);
    grid-gap: 20px;
    max-width: 650px;
    margin: 0px auto;
    overflow: hidden;
    min-height: 100vh;
  }
  
  .item-1,
  .item-2 {
    align-items: center;
    justify-items: center;
    line-height: 1;
    color: white;
    display: flex;
  }
  
  .item-1 {
    grid-column: col 2/span 7;
    grid-row: row 2/span 4;
    z-index: 2;
  }
  .headline{
      color: rgb(251, 38, 38);
  }
  @media (max-width: 700px) {
    .item-1 {
      grid-column: col 2/span 11;
      grid-row: row 1/span 3;
    }
  }
  
  .item-2 {
    grid-column: col 5/span 8;
    grid-row: row 1/span 6;
    z-index: 1;
  }
  @media (max-width: 700px) {
    .item-2 {
      grid-column: col 1/14;
      grid-row: row 2/7;
    }
  }
  
  #dream {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0.50);
    visibility: hidden;
    max-height: calc(90vh - 40px);
  }
  @media (max-width: 700px) {
    #dream {
      height: 100%;
      max-height: 100%;
    }
  }
  
  .headline {
    font-size: 2rem;
    /* font-family: 'Channe';
    src: url('Channe-Regular.woff2') format('woff2'),
        url('Channe-Regular.woff') format('woff');
    font-weight: 700; */
    font-family:'Garlic' ;
    src: url('./Garlic-Outline-Regular.ttf') format('ttf');
    text-transform: uppercase;
    overflow: hidden;
    display: block;
    line-height: 1.1;
  }
  .headline  span {
    visibility: hidden;
  }
  .heal{
      font-size: 1rem;
   
      font-family:'Garlic' ;
      src: url('./Garlic-Outline-Regular.ttf') format('ttf');
   
      overflow: hidden !important;
      position: absolute;
      top: 100px;
      left: 100px;
      word-wrap: break-word;
     /* display: flex;
     flex-wrap: wrap-reverse; */
      line-height: 1.5;
      /* z-index: 2; */
  } 

  @media screen and (max-width: 700px) {
    .heal {
      font-size: 2rem;
      display: block;
      position: absolute;
      overflow: hidden !important;
      top: 600px;
      left: 60px;
      word-wrap: break-word;
    }#dream{
        background: auto !important;
    }
  }

  @media screen and (min-width: 720px) {
    .heal {
      font-size: 2rem;
      display: block;
      position: absolute;
      top: 650px;
      left: 550px;
      word-wrap: break-word;
 
    }#dream{
        background-position: contain;
    }
  }
  @media screen and (min-width: 1024px) {
    .heal {
      font-size: 2rem;
      display: block;
      position: absolute;
      top: 510px;
      left: 400px;
      word-wrap: break-word;
 
    }
  }

 @media screen and (min-width: 1440px) {
    .heal {
      font-size: 3rem;
      display: block;
      position: absolute;
      top: 600px;
      left: 550px;
 
    }#dream{
        background-size: contain;
    }
  }
  body::-webkit-scrollbar {
    display: none;
  }
  
  #meow {
    position: relative;
    margin-top: 100px;
    padding: 10vw 0;
    overflow: hidden;
  }
  
  .image-cont {
    position: relative;
    z-index: 2;
    width: 42vw;
    height: 50vw;
    margin: 0 auto;
    overflow: hidden;
  }
  
  .image-cont__inner {
    width: 100%;
    height: 100%;
  }
  
  #flash {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.2);
  }
  
  .text-cont {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 15%;
    right: 15%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 40%;
    transform: translateY(-50%);
    color: #eebb2e;
  }
  
  .text-cont__front {
    z-index: 3;
  }
  .text-cont__front .parallax-text {
    color: transparent;
    -webkit-text-stroke: 0.2vw #ff0101;
  }
  
  .parallax-text {
    position: relative;
    font-family: "Montserrat", sans-serif;
    font-size: 3vw;
    line-height: 12vw;
    text-transform: uppercase;
    white-space: nowrap;
    color: #eb1313;
    margin: 0;
  }
  .parallax-text:last-child {
    /* color: #fc452d; */
    align-self: flex-end;
  }
  
  @media screen and (max-width: 500px) {
     body{ overflow-x: hidden !important ;
     }
     .heal{
      font-size: 1.8rem;
   
      font-family:'Garlic' ;
      src: url('./Garlic-Outline-Regular.ttf') format('ttf');
   
      overflow: hidden;
      position: absolute;
      top: 520px;
      left: 60px;
      word-wrap: break-word;
     /* display: flex;
     flex-wrap: wrap-reverse; */
      line-height: 1.5;
      /* z-index: 2; */
  } 
    .text-cont {
        position: absolute;
        z-index: 9999;
        top: 50%;
         left: 9% !important;
       /* right: 15%; */
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 80%;
        transform: translateY(-100%);
        color: #eebb2e;
      }
    .parallax-text{ 
      position: relative;
      font-family: "Montserrat", sans-serif;
      font-size: 3vw;
      line-height: 10vw;
      text-transform: uppercase;
      white-space: nowrap;
      color: #eb1313;
      margin: 0;
      }#meow {
    position: relative;
    padding: 6vw 0;
    overflow: hidden;
  }
  
  .image-cont {
    position: relative;
    z-index: 2;
    width: 60vw;
    height: 90vw;
    margin: 0 auto;
    overflow: hidden;
  }
  }
  /* @media only screen and (max-width: 2560px) and (min-width: 1700px)  {
    .heal {
        font-size: 1.5rem;
        display: block;
        position: absolute;
        top: 400px;
        left: 550px;
        word-wrap: break-word;
   
      }
    } */

    /* section{
        height: 100vh;
        background-color: rgb(255, 179, 166);
    } */

    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 130px;
        height: 100vh;
        width: 100%;
        position: relative;
      }
      
      .container:nth-child(1) {
        /* background: #8123231e; */
      }
      
      .container:nth-child(2) {
        /* background: #000000; */
      }
      
      .container:nth-child(3) {
        /* background: #b69187; */
      }
      
      .container:nth-child(4) {
        /* background: #3c564f; */
      }
      
        #rev {
          margin-top: 100px !important;
        height: 100%;
        width: 100%;
        object-fit: contain;
        transform-origin: left;
      }
      
      .reveal {
         visibility: hidden; 
        position: relative;
        width: 100%;
        height: 100%;
        max-width: 500px;
        overflow: hidden;
      }
      
      section {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      

      .reveal-text {
        font-size: 3rem;
        max-width: 500px;
        font-family: termina, sans-serif;
        text-transform: lowercase;
        line-height: 1.4;
        color:rgb(250, 96, 96);
      }
      @media (max-width: 600px) {
        .reveal-text {
          font-size: 1.8rem;
        }
      }
      
      .reveal-text {
        visibility: hidden;
        margin-top: 100px;
      }
      
      .line {
        position: relative;
        overflow: hidden;
        display: flex;
      }
      
       /* section {
        background: #948c48;
        display: grid;
        place-items: center;
        min-height: 100vh;
        width: 100%;
        padding: 10vw;
      }
        */
      /* section:nth-child(2) {
        background: #fffbfb;
        height: 20vh;
        margin-top: -120px;
        color:rosybrown;
      } */
      
      /* section:nth-child(3) {
        background: #d3a488;
      } */
      

       #conta { 
          margin: 0%; 
          z-index: 6;
          float: left;
        } 

#circle { 
    /* position: relative;  */
    width: 100%;
     padding-bottom: 100%; 
     overflow: hidden;
    z-index: 3;
    color: red !important;
 }

#circle text { 
    font-family: 'Helvetica Neue', Arial; 
    font-size: 16px; 
    font-weight: bold;
    z-index: 3;
    right: relative;
    color: red !important;
   
 }

#circle svg { 
    position: absolute; 
    left: 140px; 
    top: -450px;
     width: 80%; 
     height: 540px;
     color: red !important;
     z-index: 3;

  -webkit-animation-name: rotate;
     -moz-animation-name: rotate;
      -ms-animation-name: rotate;
       -o-animation-name: rotate;
          animation-name: rotate;
  -webkit-animation-duration: 5s;
     -moz-animation-duration: 5s;
      -ms-animation-duration: 5s;
       -o-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
      -ms-animation-iteration-count: infinite;
       -o-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
     -moz-animation-timing-function: linear;
      -ms-animation-timing-function: linear;
       -o-animation-timing-function: linear;
          animation-timing-function: linear;

}

@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(360deg); }
    to { -webkit-transform: rotate(0); }
}
@-moz-keyframes rotate {
    from { -moz-transform: rotate(360deg); }
    to { -moz-transform: rotate(0); }
}
@-ms-keyframes rotate {
    from { -ms-transform: rotate(360deg); }
    to { -ms-transform: rotate(0); }
}
@-o-keyframes rotate {
    from { -o-transform: rotate(360deg); }
    to { -o-transform: rotate(0); }
}
@keyframes rotate {
    from { transform: rotate(360deg); }
    to { transform: rotate(0); }
}

@media screen and (min-width: 720px) {
    #circle svg { 
        position: absolute; 
        left: 500px; 
        top: -450px;
         width: 55%; 
         height: 140px;
         color: red !important;
      }
}


@media screen and (max-width: 1024px) {
    .text-cont {
        position: absolute;
        z-index: 9999;
        /* top: 60%; */
        left: -20%;
        /* right: 0%; */
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        width: 70%;
        transform: translateY(-50%);
        color: #eebb2e;
      }
    .parallax-text{ 
      position: relative;
      font-family: "Montserrat", sans-serif;
      font-size: 3vw;
      line-height: 12vw;
      text-transform: uppercase;
      white-space: nowrap;
      color: #eb1313;
      /* margin-bottom: 100px; */
      }#meow {
    position: relative;
    padding: 10vw 0;
    overflow: hidden;
  }
  
  .image-cont {
    position: relative;
    z-index: 2;
    width: 60vw;
    height: 80vw;
    margin: 0 auto;
    overflow: hidden;
  }
  }