body {
   
    background-color: black;
    width: 100vw;
    padding: 0 ;
    margin: 0 ;
    overflow-x: hidden;
}



/* #scroll-wrapper {
    will-change: transform;
  } */

.vw100 {
    display: flex;
    width: 100vw;
}

.vwh100 {
    display: flex;
    width: 100vw;
    height: 100vh;
}

.vh100 {
    display: flex;
    height: 100vh;
}

.cj {
    display: flex;
    justify-content: center;
}

.ca {
    display: flex;
    align-items: center;
}

.overflow {
    overflow: hidden;
}

.radius-top {
    border-radius: 100px 100px 0px 0px;
}

.full-width, .whole-screen {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.whole-screen {
    height: 100vh;
}
.relative, .cat-card {
    position: relative;
}
.absolute, .arrow-down {
    position: absolute;
}
.overflow-x {
    overflow-x: hidden;
}
.overflow-y {
    overflow-y: hidden;
}

/**
 * flexbox
 */
 .flex, .cat-cards-row, .cat-card {
    display: flex;
    overflow: hidden;
}
.flexbox, .cat-cards-container{
    display: flex;
    width: 80vw;
    max-width: 1200px;
    overflow: hidden;
}
.cc, .cat-cards-row, .cat-card {
    display: flex;
    justify-content: center;
    align-items: center;
}
.center{
    justify-content: center;
}
.vertical, .cat-cards-container {
    display: flex;
    flex-direction: column;
}
.horizontal, .cat-cards-row {
    display: flex;
    flex-direction: row;
}
.h800 {
    height: 800px;
}
.h600 {
    height: 600px;
}
.h300 {
    height: 300px;
}
.h290 {
    height: 300px;
}
.w100pc, .cat-card {
    width: 100%;
}
.w50pc {
    width: 50%;
}
.cover {
    object-fit: cover;
}

/******
********/



/**
 * image
 */
.background-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}
.cat-card, .rounded-img, .rounded-box {
    border-radius: 20px;
}
.circle-more, .circle-more-light {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: #333;
    border-radius: 50%;
}
.circle-more-light {
    background-color: #7f7f7f;
}
 /******
********/

/**
 * text
 */
* {
    font-family: Poppins, sans-serif;
    color: whitesmoke;
}
.main-title {
    color: white;
    font-size: 100px;
    text-align: center;
    letter-spacing: 3px;
    font-weight: 200;
    margin-top: 60px;
}
.subtitle {
    font-size: 28px;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 500;
    margin-top: -115px
}
.gradient-title{
    font-size: 70px;
    letter-spacing: 3px;
    font-weight: 500;
    background: linear-gradient(135deg, rgb(9, 9, 9) 0%, rgba(225,225,227,1) 50%, rgb(44, 44, 44) 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text; text-align: center;
}
.gradient-title-2 {
    font-size: 70px; letter-spacing: 3px; font-weight: 500;
    background: linear-gradient(135deg, #6e3d12 0%, #DC802A 50%, #7b410a 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text; text-align: center;
}

.gradient-title-3 {
    font-size: 70px; letter-spacing: 3px; font-weight: 500;
    background: 'url(/Users/macbook/Desktop/W&M/text-bckg.png)';
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text; text-align: center;
} 

.gradient-text {
          /* background: linear-gradient(135deg, rgb(118, 118, 119) 0%, rgba(225,225,227,1) 50%, rgba(106,106,106,1) 100%);
          color: transparent;
          background-clip: text;
          -webkit-background-clip: text;  */
          text-align: center; font-size: 26px; font-weight: 400; max-width: 1000px; line-height: 45px;
}
.watermark-v, .watermark-v-black{
    position: absolute;
    left: 7px;
    bottom: 20px;
    text-orientation: upright;
    writing-mode: vertical-lr;
    opacity: 35%;
    font-size: 13px;
    z-index: 3;
}

.watermark-v-right, .watermark-v-black-right{
    position: absolute;
    right: 7px;
    bottom: 20px;
    text-orientation: upright;
    writing-mode: vertical-lr;
    opacity: 35%;
    font-size: 13px;
    z-index: 3;
}

.watermark-h, .watermark-h-black {
    position: absolute;
    letter-spacing: 8px;
    left: 45px;
    bottom: 6px;
    opacity: 35%;
    font-size: 13px;
    z-index: 3;
}

.watermark-h-right, .watermark-h-black-right {
    position: absolute;
    letter-spacing: 8px;
    right: 40px;
    bottom: 6px;
    opacity: 35%;
    font-size: 13px;
    z-index: 3;
}

.watermark-v-black, .watermark-h-black {
    color: black;
}

.cat-header {
    position: absolute;
    font-size: 25px;
    letter-spacing: 2px;
    font-weight: 600;
}
.cat-header-big {
    font-size: 80px;
    letter-spacing: -2px; 
    margin-bottom: -55px;
    margin-top: -50px; 
    font-weight:700 
}
.cat-header-acolyte {
    font-size: 40px;
    letter-spacing: 3px;
    font-weight:400 
}
.text-subtitle {
    font-size: 20px;
    letter-spacing: 3px;
    font-style: italic;
    font-weight: 300;
    color: rgb(221, 129, 43);
    margin-bottom: -25px;
}
.text-title {
    font-size: 30px;
    letter-spacing: 3px;
    font-weight: 600;
    color: white;
    margin-bottom: 10px
}
.text {
    font-size: 20px;
    max-width: 600px;
    color: rgb(156, 155, 155);
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

/** text színek*/
.color-orng {
    color: rgb(221, 129, 43)
}
.black {
    color: black
}
.white {
    color: white
}

/******
********/

.bckgr-black, .cat-card {
    background: #000;
}
.opacity100 {
    opacity: 1;
}
.opacity90 {
    opacity: 90%;
}
.opacity85 {
    opacity: 85%;
}
.opacity75 {
    opacity: 75%;
}
.opacity65 {
    opacity: 65%;
}
.opacity50 {
    opacity: 50%;
}
.opacity35 {
    opacity: 35%;
}
.z3 {
    z-index: 3;
}
.z5 {
    z-index: 5;
}
.z99 {
    z-index: 99;
}
.z-1 {
    z-index: -1;
}

/** media queries */
@media screen and (max-width: 1300px) {
    .hero {
     top: 2000px;
    }
  }
 
  /** check */
.peach {
    background-color: #FFC0CB; ;
  }

.babyblue  { background-color: #dceafa
}
    
.green {
    background-color: #33A852 ;
  }

  .blue {
    background-color: #4384F3 ;
  }

  .orange {
    background-color: rgb(221, 129, 43) ;
  }

  .white-bckg {
    background-color: white; 
  }
  .trq {
    background-color: #00889E ;
  }


.lilac {
    background-color: #d8b4fe; ;
  }
.gr{
    background: #171717;
  }
  .red{
    background: #E6341E;
  }
  
.hidden {
    display: none;  
    }

   /**specific*/


/**structure*/
.cat-cards-row {
    margin-bottom: 20px;
}
.arrow-down {
    width: 12px;
    bottom: 55px;
    right: 53px
}
.button2, .button2w {
    border: solid 3px black;
    border-radius: 20px;
    padding: 0px;
    width: 250px;
    height: 50px;
    cursor: pointer;
   
    p  {
        color: black;   
    font-size: 17px;
    letter-spacing: 0px;
      }
}
.button2:hover {
    background-color: rgba(0,0,0, .08);
}
.button2w {
    border-color: white;
    p {
        color: white;
    }
}
.button2w:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.menu {
    position: fixed;
    border-radius: 20px;
    top: 15px;
    left: 5vw;
    width: 90vw;
    height: 70px;
    z-index: 99;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;

}





/**pin-scroll*/
.ps-left-cont-img {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 50vw;
    height: 100vh;
    align-items: center;
}
.ps-left-img {
    display: flex;
    overflow: hidden;
    position: absolute;
    border-radius: 20px;
    height: 600px;
    right: 0px;
}
.ps-right-cont-text {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    width: 50vw;
    height: 100vh;
    padding-left: 40px;
    justify-content: center;
}



 .text {margin-top: 2px; width: 800px; justify-content: center;
}
 #split {
    font-family: caveat; font-style: italic; color: #EE6C36; font-size: 50px; font-weight: 300; height: 100px; margin-top: 30px; margin-left: 20px;transform: rotate(345deg);
  }
  
 
  .mask {
    width: 140%;
    height: 100%;
    position: absolute;
    background: rgb(165, 175, 182, 0.7);
    left: 0;
    bottom: 0;
  
  }