@font-face {
    font-family: "mainFont";
    src: url("../font/comfortaa.regular.ttf");
    font-weight: 700;
}

@font-face {
    font-family: "mainFontBig";
    src: url("../font/MursGothic-WideDark.woff");
    font-weight: 700;
}
*{
    font-family: mainFont;
    font-weight: 200;
    box-sizing: border-box;
    user-select: none;
}
img{
    user-select: none;
}
body{
    display: grid;
    place-items: center;
    width: 100%;
    max-height: 100vh;
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
   position: relative;
   background-color: rgb(0, 0, 0);
}

:root{
--button-color:blue;
--back-blue:aliceblue;
--inshi-blue:#EFA95B;
--inshi-text-desc:#efaa5b98;
}

#canvas1 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    
}

.canvasBlock {
    display: grid;
    place-items: center;
    position: relative;
    z-index: 5;
    background-color: transparent;
    border: 2px solid white;
    width: 95%;
    max-width: 900px;
    border-radius: 20px;
    overflow: hidden;
}

.logoMyLand {
    width: 100%;
    z-index: 10;
    background-color: transparent;
    position: relative;
}
.hideSand{
    opacity: 0;
    transition: .5s ease;
}
.myLandFullBlock{
    background-color: black;
    min-height: 100vh;
    z-index: 10;
}

.mainBlock{
    width: 100%;
    max-height: 100%;
    position: relative;
    display: grid;
    place-items: center;
    color:white;
    min-height: 100vh;
    background-color: black;
    overflow: hidden;
    /* background-image: url(../image/inshi/back.png); */
}
.mainBlock > .textBlock{
    position: absolute;
    font-size: min(400%,15rem);
    user-select: none;
}
#mainLogo{
    overflow: hidden;
}
.growBall{
    transform-origin: center center;
}
.mainBackBlock{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-image: url(../image/inshi/IMG_0883.JPG);
    background-size: cover;
    filter: brightness(50%);
    background-position: center center;
    opacity: 0;
    transform: scale(1.5);
}

.backPhoto{
    width: 100%;
    filter: brightness(20%);
    height: 100%;
}
.pageBlock{
    width: 100%;
    max-height: 100%;
    position: relative;
    display: grid;
    place-items: center;
    color:white;
    min-height: 100vh;
}
.blockItemInfo{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    filter: brightness(50%);
    background-position: center center;
    background-color: green;
    opacity: 0;
    transform: scale(1.5);
}

.gradColor{
    background: -webkit-linear-gradient(#F1A3FF, #BB4FFF);
    font-size: 72px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#video-container {
    height: 100%;
    position: relative;
    width: 100%;
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  #hero-video {
    position: absolute;
    object-fit: cover;
    width: 100%;
      height: 100%;
}
.loaderBlock{
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    /* background-color: rgba(0, 0, 0, 1); */
}
.logoBlock{
    display: grid;
    place-items: center;
}
.logoInshi{
    height: 400px;
}
.aboutBlock{
    /* min-height: 100vh; */
    /* background-image: url(../image/inshi/IMG_0883.JPG); */
    background-size: cover;
    /* filter: brightness(50%); */
    background-position: center center;
    width: 100%;
    display: grid;
    place-items: center;
    position: relative;
}
.infoBlock{
    display: grid;
    place-items: center;
    width: clamp(250px,90%,800px);
    color: white;
    padding: 10px;
    border-radius: 10px;
    font-family: mainFontBig;
    font-weight: 200;
    color:white;
    font-size: 1.2rem;
    /* text-transform: uppercase ; */
    text-align: justify;
    z-index: 5;
    overflow: hidden;
    
}

.markInfo{
    color: var(--inshi-blue);
}
.backInfoBlock{
    position: absolute;
    background-image: url(../image/inshi/IMG_0883.JPG);
    background-size: cover;
    filter: brightness(20%);
    background-position: center center;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: scale(1.2);
}

.headerBlock{
    font-family: mainFontBig;
    font-weight: 150;
    /* color: var(--inshi-blue); */
    color:white;
    font-size: 1.5rem;
    /* text-transform: uppercase ; */
    text-align: justify;
    z-index: 5;
    overflow: hidden;
}
.revesLogo{
    width: 100%;
    max-width: 800px;
}


.gap{
    min-height: 100vh;
    width: 100%;
    background-color: black;
}

.textBlock > span{
    /* display: inline-block; */
}

.topBlock{
    display: grid;
    place-items: center;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.topBlock > div{
    position: absolute;
}

.topBlock .headerBlock,.topBlock .aboutBlock{
    opacity: 0;
}

.lightBlock{
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
    opacity: 0;
}

.lightImg{
    position: absolute;
    width: clamp(50px,50vw,400px);
    top: 0;
    opacity: 0.75;
}
.lightCenter{
    opacity: 0;
}

.lightCenterLeft{
    transform: translate(-30vw,10%) rotate(-10deg);
}

.lightCenterRight{
    transform: translate(+30vw,10%) rotate(10deg);
}
.smoke{
    height: 100%;
    position: absolute;
    bottom: 0;
}

.reggieBlock{
    display: grid;
    place-items: center;
    width: 90%;
    position: relative;
    height: clamp(200px,60vh,582px);
    opacity: 1;
}
.reggieImg{
    position: absolute;
    max-width: 350px;
}
.textReggie{
    font-family: mainFontBig;
    font-weight: 200;
    color: var(--inshi-blue);
    font-size: 2rem;
    text-transform: uppercase ;
    z-index: 5;
    position: absolute;
    bottom: 0;
    /* background-color: rgb(212, 212, 212); */
    width: 100%;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
}
.textReggie > span{
    display: inline-block;
    font-size: 1rem;
    color: white;
}

.storyBlocks{
    display: grid;
    place-items: center;
    width: 100%;
    background-color: black;
    position: relative;
}
.storySection{
    display: grid;
    place-items: center;
    height: clamp(200px,70vh,582px);
    width: clamp(200px,90%,1036px);
    box-shadow: 0 0 40px rgb(0, 0, 0);
    border: 2px solid rgba(255, 255, 255, 0.719);
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    margin: 15vh 0;
    background-color: black;
    z-index: 2;
}
.storyGif{
    position: absolute;
    height: 100%;
    filter: brightness(40%);
}

.blockTextStory{
    z-index: 5;
    font-family: mainFontBig;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.582);
    font-size: 2.5em;
    text-transform: uppercase ;
    user-select: none;
}
.ballBlock{
    width: clamp(200px,90%,220px);
}
.ballBlockSection{
    display: grid;
    place-items: center;
    width: 100%;
    height: 100vh;
    opacity: 0.5;
    overflow: hidden;
}

.wrapBallBlock{
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: grid;
    justify-items: center;
    overflow: hidden;
    z-index: 0;
}
.blockDirectors{
    display: grid;
    place-items: center;
    width: clamp(200px,90%,1036px);
    height: 100vh;
    grid-template-columns:100%;
    position: relative;
}
.reggieRoman{
    /* min-height: 100vh; */
    /* transform: translateY(-100vh); */
    
}
.wrap100Height{
    height: 100vh;
    display: grid;
    place-items: center;
    width: 100%;
    position: sticky;
    top:-100vh;
}
.blockWrapR{
    display: grid;
    place-items: start;
    height: 300vh;
    position: relative;
    width: 100%;
    /* transform: translateY(-100vh); */
}
.creditBlock > .textInfo{
    width: clamp(200px,90%,700px);
    color: white;
    /* padding: 20px;
    border: 2px solid rgba(255, 255, 255, 0.719);
    border-radius: 30px; */
    margin: 20px 0;
}
.creditBlock{
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    box-shadow: 0px -20px 40px rgb(0, 0, 0);
}
.textLabel{
    font-family: mainFontBig;
    font-weight: 200;
    color: var(--inshi-blue);
    text-transform: uppercase ;
}

.creditBlock > .backInfoBlockCredit{
    position: absolute;
    background-image: url(../image/inshi/backGroup.jpg);
    background-size: cover;
    filter: brightness(30%);
    background-position: center center;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: scale(1.2);
}
/* .backDirectImag{
    position: absolute;
    background-image: url(../image/inshi/backReggie.jpg);
    background-size: cover;
    filter: brightness(30%);
    background-position: center left;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
} */

.fullDirect{
    display: grid;
    place-items: center;
    width: 100%;
    position: relative;
}

.blockUa{
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    background-color: black;
    position: fixed;
    top:0;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

.svgWrap{
    display: grid;
    place-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: rgb(0, 0, 0);
    height: 100vh;
    overflow: hidden;
}
.svgWrap > svg {
    width: clamp(200px, 95%, 700px);
    background-color: transparent;
    overflow: visible;
}

.ballInsideUa {
    /* transition: 1.5s cubic-bezier(.44, .56, .29, 1.37); */
    /* fill: white; */
    /* filter: drop-shadow(7px 7px 2px rgb(0 0 0 / 0.4)); */
    /* box-shadow: 5px 5px 15px black; */
}
.fall{
    transition: 3s cubic-bezier(1,.01,.56,.54);
}

.textUa {
    fill: white;
}

.fullPage{
    min-height: 100vh;
    display: grid;
    place-items: center;
    width: 100%;
    overflow: hidden;
}
.festivalBlock{
    min-height: 100vh;
    display: grid;
    place-items: center;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.posterBox{
    width: 100%;
    max-width: 500px;
    background-color: transparent;
    height: auto;
    display: grid;
    place-items: center;
    position: relative;
}
.mainPoster{
    position: relative;
    width: 100%;
    z-index: 5;
}
.posterParts{
    position: absolute;
    width: 100%;
}
.posterBox>.poster{
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.726));
}
.posterPart1{
    transform-origin: 50% 30%;
    transform: rotate(-20deg) ;
    z-index: 4;
}
.posterPart2{
    transform-origin: 50% 29%;
    transform: rotate(-40deg) translateY(2%);
    z-index: 3;
}
.posterPart3{
    transform-origin: 50% 37%;
    transform: rotate(-60deg) translateY(10%);
    z-index: 2;
}
.posterPart4{
    transform-origin: 50% 40%;
    transform: rotate(-90deg) translateY(19%) ;
    z-index: 2;
}
.posterBox > img{
    user-select: none;
    pointer-events: none;
}
.backInfoBlockFest{
    position: absolute;
    background-image: url(../image/inshi/festival/backFest.jpg);
    background-size: cover;
    filter: brightness(10%);
    background-position: center center;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: scale(1.2);
}
.gallaryBlock{
    display: grid;
    place-items: center;
    width: 100%;
    z-index: 10;
    background-color: rgb(0, 0, 0);
    position: relative;
}
.imgGal{
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
    border-radius: 15px;
    /* box-shadow:  4px 4px 7px rgb(160, 160, 160); */
    /* border: 2px solid white; */
    width: 95%;
}
.placeGallery{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    width: 85%;
    margin: 50px 0;
}
.placeGallery > a{
    height: 35vh;
    flex-grow: 2;
}

.placeGallery > a:last-child {
    flex-grow: 10;
  }

  .topLangMenu{
    position: fixed;
    top: 0;
    width: 100%;
    display: grid;
    place-items: center;
    z-index: 100;
    background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,1) 28%, rgba(0,0,0,0.33657212885154064) 100%);
  }
  .langs{
    font-family: mainFontBig;
    font-weight: 200;
    color: rgb(255, 255, 255);
    font-size: 1em;
    text-transform: uppercase ;
    user-select: none;
    text-decoration: none;
    border-right: 1px solid white;
    display: grid;
    place-items: center;
    width: 100%;
  }
  .mainText{
    font-family: mainFontBig;
    font-weight: 200;
    color: rgb(255, 255, 255);
    font-size: 2em;
    text-transform: uppercase ;
    user-select: none;
  }
  .langBlock{
    display: grid;
    place-items: center;
    width: 80%;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 7px;
    position: absolute;
    transform: translateY(-50px);
    transition: .3s ease;
    z-index: 4;
    left: 0;
    background-color: black;
    height: 100%;
    border-radius: 10px;
  }
  .selectedLang{
    color: var(--inshi-blue);
  }

  .showLangs{
    transform: translateY(0);
    transition: .3s ease;
  }

  .blockMove{
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100vh;
    position: fixed;
    top: 0;
    z-index: 5;
  }

  .ballBlockMove{
    width: clamp(50px,30vh,100px);
    opacity: 0;
    position: absolute;
    z-index: 99;
  }

  .artistBlock{
    display: grid;
    place-items: center;
    background-color: rgb(15, 15, 15);
    width: clamp(250px,95%,350px);
    border-radius: 10px;
    padding: 10px;
  }
  .artistPhoto{
    width: clamp(150px,90%,250px);
    border-radius: 50%;
  }
  .artistName{
    font-family: mainFontBig;
    font-weight: 200;
    color: var(--inshi-blue);
    font-size: 2em;
    text-transform: uppercase ;
    margin: 10px;
    text-align: center;
  }
  .artistDesc{
    color: white;
    padding: 10px;
  }
  .backBlack{
    background-color: black;
    display: grid;
    place-items: center;
    height: fit-content;
  }
  .ganreArtist{
    color: white;
  }
  .castBlock{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1400px;
    width: 85%;
    justify-content: center;
    margin-bottom: 40px;
  }
  .castHeader{
    font-family: mainFontBig;
    font-weight: 200;
    color: var(--inshi-blue);
    font-size: 3em;
    text-transform: uppercase ;
    margin: 40px 0px;
    text-align: center;
  }
  .contactBlock{
    display: grid;
    place-items: center;
    grid-template-rows: max-content;
    width: 100%;
    min-height: 100vh;
    background-color: black;
    position: relative;
    padding: 50px 0;
  }
  .topNav{
    display: grid;
    place-items: center;
    width: clamp(200px,95%,400px);
    grid-template-columns: 40% 40% 20%;
    margin: 5px 0;
    position: relative;
  }
  .topNav>*{
    cursor: pointer;
  }
  .navBlock{
    font-family: mainFontBig;
    font-weight: 200;
    color: white;
    font-size: 1em;
    text-transform: uppercase ;
    text-align: center;
    border-right: 1px solid white;
    width: 100%;
  }
  .langHandlerSvg{
    width: 30px;
    stroke: white;
  }
  .socialBlock{
    display: grid;
    place-items: center;
    height: min-content;
    width: 100%;
    max-width: 900px;
  }
  .socialItem{
    display: grid;
    place-items: center;
    width: clamp(200px,95%,350px);
    grid-template-columns: 20% 80%;
    color: white;
    text-decoration: none;
    text-decoration-line: none;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid white;
    margin: 10px 0;
  }

  .linkInfo{
    color: white;
    text-decoration: none;
    text-decoration-line: none;
  }

  .socialItem .logoBlockInfo svg{
    width: clamp(20px,80%,40px);
  }
  .logoBlockInfo{
    display: grid;
    place-items: center;
  }
  .eventBlock{
    display: grid;
    place-items: center;
    width: 100%;
    background-color: black;
    background-image: url(../image/inshi/backEvent.jpg);
    background-size: cover;
    background-position: center center;
  }
  .eventsBlockWrap{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    width: 100%;
    margin: 50px 0;
    justify-content: center;
  }
  .eventItem{
    display: grid;
    place-items: center;
    border: 1px solid white;
    border-radius: 10px;
    width: clamp(200px,95%,400px);
    color: white;
    background-color: black;
    margin: 40px 0;
    a:not(.eventLink){
          color: var(--inshi-blue);
      }
  }
  .eventImage{
    width: 95%;
    display: grid;
    place-items: center;
    margin: 10px 0;
  }
  .eventImage img{
    width: 85%;
  }
  .eventName{
    font-family: mainFontBig;
    font-weight: 200;
    color: var(--inshi-blue);
    font-size: 1.5em;
    text-transform: uppercase ;
    margin: 10px 0px;
    text-align: center;
    width: 95%;
  }
  .eventDesc{
    margin: 10px 0px;
    width: 95%;
  }
  .eventLink{
    padding: 10px;
    color: white;
    background-color: var(--inshi-blue);
    text-decoration: none;
    border-radius: 10px;
    margin: 10px 0;
    text-transform: uppercase ;
  }

  .blockInfoReview{
    width: clamp(200px,95%,600px);
    display: grid;
    place-items: center;
    border: 1px solid white;
    border-radius: 10px;
    padding: 20px;
  }


@keyframes donateToAnim {
    0%{transform: translateX(-50%);}
    10%{transform: translateX(-50%);}
    20%{transform: translateX(0%);}
    100%{transform: translateX(0%);}
}
@media screen and (min-width:1000px)  {
    .topNav *:hover{
        cursor: pointer;
        color: var(--inshi-blue);
        stroke: var(--inshi-blue);
        transition: .2s ease;
      }

    .doneProgress:hover{
        transform: scale(1.1);
        transition: .4s ease;
    }
    .postItemList{
        grid-template-columns: 50% 50%;
    }
    .blockDonateWrap{
        grid-template-columns: 50% 50%;
    }
    .mobileToogle{
        display: none;
    }

    .docImgBlock{
        overflow-x: hidden;
        max-width: 1200px;
        grid-template-columns: 50% 50%;
    }
    .textBackDron{
        text-align: center;
        font-size: 3rem;
    }

    .blockDirectors{
        grid-template-columns: 100%;
    }
    .blockTextStory{
        z-index: 5;
        font-family: mainFontBig;
        font-weight: 200;
        color: rgba(255, 255, 255, 0.582);
        font-size: 4em;
        text-transform: uppercase ;
        user-select: none;
    }
}