@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap');

body{
    position: relative;
    width: 100vw;
max-width: 1470px;
height: auto;

background: #000000;

box-sizing: border-box;
align-items: flex-start;
flex-shrink: 0;
border-color: transparent;
}

.wenzi{
    position: absolute;
width: 605px;
height: 155px;
left: 500px;
top: 293px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 700;
font-size: 65px;
line-height: 144.02%;
/* or 94px */

letter-spacing: 0.18em;

color: #FFFFFF;

text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}


.loading {
    /* display: flex;
    color: white;
    font-family: 'Roboto Slab', serif;
    text-transform: uppercase;
  
    margin:10px;
    padding: 10px;
  
    text-rendering: optimizeLegibility;
    line-height:1;
    text-shadow:1px 1px 0 #ddd,
                2px 2px 0 #ddd,
                3px 3px 0 #ccc,
                4px 4px 0 #ccc,
                5px 5px 0 #bbb,
                6px 6px 0 #bbb,
                7px 7px 0 #aaa,
                8px 8px 0 #888,
                8px 6px 0 #777,
                8px 9px 0 #666,
              
      rgba(16, 16, 16, 0.4) 8px 16px 6px,
      rgba(16, 16, 16, 0.2) 8px 18px 10px;
      transform-origin: 50% 100%; */
      position: absolute;
      width: 739px;
  
      height: 345px;
      left: -378px;
      top: 28px;
      top: -245px;
 
      font-family: "Saira";
      font-style: normal;
      font-weight: 400;
      font-size: 145px;
      line-height: 99.02%;
      letter-spacing: 0.18em;
      color: #FFFFFF;
      text-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
  
  }

.container{

/* position: absolute;
width: 739px;
height: 68px;
left: -60px;
top: 105px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 144.02%;
/* or 58px */

/* letter-spacing: 0.07em;

color: #FFFFFF;  */

position: absolute;
width: 541px;
height: 70px;
left: -421px;
    top: 47px;

font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-size: 43px;
line-height: 144.02%;
/* identical to box height, or 69px */

letter-spacing: 0.07em;

color: #FFFFFF;

z-index: 1;

}
  .slider-wrapper {
    font-size: 33px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    color:white;
    width: auto;
   
    
  }
  
  .slider {
   width:auto;
    height: 70px;
    overflow: hidden;
    padding: 10px;
  
  }
  
  .slider > div {
    box-sizing: border-box;
 
  border-radius: 25px;

    height: 60px;
    margin-bottom: 50px;
    padding:  0px;
    text-align: center;
  }
  
  .text1 {
  padding-top: 20px;
  
    /* background-color: #fafafa; */
    animation: slide 5s linear infinite;
    opacity: 0.8;
    /* color:rgb(4, 4, 4); */
    color: #FFFFFF;
 
              
    transform-origin: 50% 100%;
   
  }
  
  .text2 {
/*   
    background-color: #000000; */
    margin-top: -13px;
    opacity: 0.8;
    color:white;
    /* border: 2px solid white ; */
    transform-origin: 50% 100%;
 
  }
  
  .text3 {

    /* background-color: #6e6e6e; */
    margin-top: -11px;
    opacity: 0.8;
    color:white;
    transform-origin: 50% 100%;
 

    
  }
  
  @keyframes slide {
    0% { margin-top: -300px; }
    5% { margin-top: -200px; }
    33% { margin-top: -200px; }
    38% { margin-top: -100px; }
    66% { margin-top: -100px; }
    72% { margin-top: -0; }
    100% { margin-top: 0; }
  }


.blue1{
    position: absolute;
    width: 993px;
height: 592px;
left: -370px;
top:-140px;

opacity: 0.3;
}

.blue3{
    position: absolute;
width: 1035px;
height: 582px;
left: -190px;
top: -70px;
opacity: 0.6;
}

.blue2{
  position: absolute;
  width: 1034px;
  height: 618px;
  left: -168px;
top: -81px;
opacity: 0.6;
   }


   .blue4{
    position: absolute;
    width: 1140px;
    height: 655px;
    left: -188px;
    top: -99px;
   
   }

   .blue5{
    position: absolute;
    width: 1110px;
    height: 659px;
    left: -180px;
    top:-110px;
   }

   .blue6{
    position: absolute;
    width: 1092px;
    height: 635px;
    left: -190px;
    top: -92px;
   }

   .blue7{
    position: absolute;
width: 1065px;
height: 655px;
left: -191px;
    top: -100px;


   }

 


  nav {
    display: block;
    position: absolute;
    width: 500px;
    height: 500px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    transform: translate3d(35px, -35px, 0);
    /* transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9); */
  }
  nav.open {
    transform: translate3d(0, 0, 0);
  }
  nav.top-right {
    top: -140px;
    right: -140px;
  }
  
  .disc {
    position: absolute;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    font:  'Roboto Slab', serif;
   
   
    line-height: 40px;
    padding-top: 10px;
    border-radius: 300px;
    transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 190deg);
    pointer-events: none;
    opacity: 0;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s;
  }
  .disc div {
    transform: rotate(180deg);
  }
  .open .disc {
    pointer-events: auto;
    opacity: 1;
  }
  
  /* .l1 {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgb(0, 0, 0);
   
    transition-delay: 0s;
  }
  .open .l1 {
    transition-delay: 0s;
    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
    opacity: 1;
  }
  .open .l1:hover {
    background: shade(rgb(1, 1, 1), 90%);
    color: rgb(254, 254, 254);
    transition-delay: 0s;
  }
  .open .l1:active {
    background: shade(rgb(1, 1, 1), 50%);
    color: rgb(250, 250, 250);
  }
  .open .l1.toggle {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
  } */
  
  .l2 {
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    background: #494949;
    color: rgb(179, 175, 175);
    transition-delay: 0.1s;
    
  }
  .open .l2 {
    transition-delay: 0.1s;
    transform: scale3d(1, 1, 1) rotate3d(0, 180, 360, 80deg);
    opacity: 1;
  }
  
  .l2 p{
    position: absolute;
    left:42%;
    top:83%;
    font-size: 20px ;
    letter-spacing: .1rem;
   
  }
  .open .l2:hover {
    background: shade(#5b5a5a, 90%);
    color: #ffffff;
    transition-delay: 0s;
  }
  .open .l2:active {
    background: shade(#ff7a39, 50%);
    color: #ff7a39;
  }
  .open .l2.toggle {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
  }
  
  .l3 {
    top: 100px;
    left: 100px;
    right: 100px;
    bottom: 100px;
    background: #6d6d6c;
    color: rgb(169, 169, 169);
    transition-delay: 0.2s;
    
  }
  .open .l3 {
    transition-delay: 0.2s;
    transform: scale3d(1, 1, 1) rotate3d(0, 180, 360, 80deg);
    opacity: 1;
  }
  
  .l3 p{
    position: absolute;
    left:35%;
    top:77%;
    font-size: 20px ;
    letter-spacing: .1rem;
   
  }
  .open .l3:hover {
    background: shade(#bdbbbb, 90%);
    color: #ffffff;
    transition-delay: 0s;
  }
  .open .l3:active {
    background: shade(#ff912b, 50%);
    color: #ff912b;
  }
  .open .l3.toggle {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0,0, 1, 10deg);
  }
  
  .l4 {
    top: 150px;
    left: 150px;
    right: 150px;
    bottom: 150px;
    background: #adacac;
    transition-delay: 0.3s;
    color: rgba(80, 79, 79, 0.802);
  
   
  }
  .open .l4 {
    transition-delay: 0.3s;
    transform: scale3d(1, 1, 1) rotate3d(0, 180, 360, 70deg);
    opacity: 1;
    padding-top: 0px;
  }
  
  .l4 p{
    position: absolute;
    left:28%;
    top:125px;
    font-size: 20px ;
    letter-spacing: .1rem;
    transform: scale3d(1, 1, 1) rotate3d(0, 180, 360, 20deg);
  }
  .open .l4:hover {
    background: shade(#c6c6c6, 90%);
    color: #fcfcfc;
    transition-delay: 0s;
  }
  .open .l4:active {
    background: shade(#ffa91c, 50%);
    color: #0c0c0c;
  }
  .open .l4.toggle {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
  }
  
  .l5 {
    top: 210px;
    left: 210px;
    right: 200px;
    bottom: 200px;
    background: #b8b6b6;
    transition-delay: 0.4s;
    color:rgb(208, 206, 206);
    letter-spacing: .1rem;
  }
  .open .l5 {
    transition-delay: 0.4s;
    transform: scale3d(1, 1, 1) rotate3d(0, 180, 360, 80deg);
    opacity: 1;
  }
  .open .l5:hover {
    background: shade(#949393, 90%);
    color: #ffffff;
    transition-delay: 0s;
  }
  .open .l5:active {
    background: shade(#e3e377, 50%);
    color: #b4b45b;
  }
  .open .l5.toggle {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 180, 360, 80deg);
  }
  
  .toggle {
    line-height: 80px;
    padding: 0px;
    width: 80px;
    height: 80px;
    background: rgb(255, 255, 255);
    color:rgb(0, 0, 0);
    /* opacity: 0.6; */
    font-family: 'Roboto Slab', serif;
    font-size: 8px ;
    text-shadow: 1px 1px grey;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .open .toggle {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  .toggle:hover {
    background-color: (rgb(201, 201, 73), 90%);
    text-decoration: underline;
    transform: scale(1.1);
    color:rgb(0, 0, 0);
  }
  .toggle:active {
    background: shade(gold, 50%);
    color: rgba(255, 215, 0, 0.5);
    transform: scale(1);
    transition-duration: 0.5s;
  
  }
  
  

  
  section {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
  }
  
  a {
    padding-top: 1230px;
  }
  a span {
    position: absolute;
    top: 109%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 4px solid #fff;
    border-bottom: 4px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: scroll 2s infinite;
    animation: scroll 2s infinite;
    box-sizing: border-box;
  }
  @-webkit-keyframes scroll {
    0% {
      -webkit-transform: rotate(-45deg) translate(0, 0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      -webkit-transform: rotate(-45deg) translate(-20px, 20px);
      opacity: 0;
    }
  }
  @keyframes scroll {
    0% {
      
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: rotate(-45deg) translate(-20px, 20px);
      opacity: 0;
    }
  }
  
  .demo a {
    position: absolute;
    top:120%;
    left: 50%;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #fff;
    font: normal 400 20px/1 "Josefin Sans", sans-serif;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.3s;
  }
  .demo a:hover {
    opacity: 1;
  }
  
  .white{
    position: absolute;
width: 1468px;
height: 920px;
left: -500px;
top: 600px;

background: #FFFFFF;
  }
  
  .introduction{
    position: absolute;
    width: 211px;
    height: 59px;
    left: 113px;
    top: 415px;
    
    font-family: 'Roboto Serif';
    font-style: light;
    font-weight: 700;
    font-size: 40px;
    line-height: 144.02%;
    /* or 58px */
    
    letter-spacing: 0.05em;
    
    color: #000000;
    
  }

  .opearte{
    position: absolute;
width: 30px;
height: 38px;
left: 89px;
top: 474px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 200;
font-size: 60px;
line-height: 144.02%;
/* or 86px */
/* or 86px */

letter-spacing: 0.07em;

color: #000000;
  }
  
  .clip{
    width: 434px;
    height: 641px;
    position: absolute;
    left: 888px;
    top: 94px;
  }
     /* .in{
      display: inline-block;
  /* font-family: arial;
  position: relative; */
      /* font-size:25px;
      color:white;
      position: absolute;
    margin-top: 65%;
      left:10%;
      text-shadow: 2px 2px rgb(133, 131, 131);
      
   }  */
   
   
  
   .introduction:hover{
    transform: scale(1, 1);
   }
  
  
  
  
   .intro{
   
    position: absolute;
    width: 555px;
    height: 242px;
    left: 113px;
    top: 531px;
    
    font-family: 'Roboto Serif';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 144.02%;
    /* or 29px */
    
    letter-spacing: 0.07em;
    
    color: #000000;
   }
  
  
   
  
   .intro:hover{
    transform: scale(1.05,1.05);
   }
  
  /* .opearte{
    font-size: 50px;
    font-weight: 20;
  } */
  
  .black{
    position: absolute;
width: 1468px;
height: 920px;
left: -500px;
top: 700px;
  }
  
   .important{
    position: absolute;
width: 694px;
height: 313px;
left: 657px;
top: 1460px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 300;
font-size: 17px;
line-height: 144.02%;
/* or 29px */

letter-spacing: 0.07em;

color: #FFFFFF;

     
   }
  
   .important:hover{
    transform: scale(1.1,1.1);
   }

  
   .importantimage{
    position: absolute;
    width: 434px;
    height: 591px;
    left: 113px;
    top: 1125px;
   
   }

#whitesection{
    
position: absolute;
width: 1473px;
height: 900px;
left: -500px;
top: 2600px;



background: #FFFFFF;
}
   .however{
    position: absolute;
    width: 753px;
    height: 228px;
    left: 49px;
    top: 617px;
    
    font-family: 'Roboto Serif';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 144.02%;
    /* or 29px */
    
    letter-spacing: 0.07em;
    
    color: #000000;
   }
   .however:hover{
    transform: scale(1.1,1.1);
   }
  

  #project{
    position: absolute;
    width: 1473px;
    height: auto;
    left: -500px;
    top: 800px;
   
    
    letter-spacing: 0.05em;
    
    
   }

   .pt{
    position: absolute;
width: 297px;
height: 115px;
left: 80px;
top: 2900px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 144.02%;
/* or 58px */

letter-spacing: 0.09em;

color: #FFFFFF;
   }

   .light{

position: absolute;
width: 1318px;
height: 376px;
left: 63px;
top: 3098px;

background: #252424;
border-radius: 33px;
color: #FFFFFF;
   }

 .lighthover{
  display:none;
 }

 .light:hover + .lighthover{
  display: block;
  position: absolute;
width: 553px;
height: 289px;
left: 810px;
top: 3850px;
 }


    .light:hover{
       /* background-color:#EAEAEA;   */

      background-image: url(img/paperlight.png);
     opacity: 0.75;
     /* color:#5B5B5B; */

     color:white;
     

    }
.light:visited{
    background-color:#002fa7;
        opacity: 0.55;
        color:#5B5B5B;
        }

        /* .lighthover{
          position: absolute;
          opacity: 0;
          width: 100px;
          height: 100px;
          left: 0;
          top: -20px;
          transition: opacity .5s, top .5s;
        }

        .light .lighthover:hover{
          opacity: 1;
          top: 40px;
          left:50px;
          z-index: 2;
        } */
  

   .light1{
    position: absolute;
width: 454px;
height: 81px;
left: 82px;


font-family: 'Roboto Serif';
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 144.02%;
/* or 43px */

letter-spacing: 0.07em;

/* color: #FFFFFF; */
   }
  
   .light2{
    position: absolute;
width: 495px;
height: 115px;
left: 89px;
top: 220px;


font-family: 'Roboto Serif';
font-style: normal;
font-weight: 600;
font-size: 15px;
line-height: 144.02%;
/* or 22px */

letter-spacing: 0.07em;

/* color: #FFFFFF; */

   }

   .light3{
    position: absolute;
width: 220px;
height: 72px;
left: 1100px;


font-family: 'Roboto Serif';
font-style: normal;
font-weight: 600;
font-size: 25px;
line-height: 144.02%;
/* or 43px */

letter-spacing: 0.07em;

/* color: #FFFFFF; */
   }
  

   .per{
    position: absolute;
    width: 1318px;
    height: 376px;
    left: 68px;
    top: 3550px;
    
    background: #252424;
    border-radius: 33px;
    color: #FFFFFF;
   }

   
   .per:hover{
   
    opacity: 0.75;
    color:#ffffff;
    background-image: url(img/performer.gif);
    background-size: 100% 100%;
   }

   .per1{
    position: absolute;
width: 454px;
height: 81px;
left: 80px;


font-family: 'Roboto Serif';
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 144.02%;
/* or 43px */

letter-spacing: 0.07em;

/* color: #FFFFFF; */
   }

   .per2{
    position: absolute;
width: 454px;
height: 81px;
left: 80px;
    top: 240px;



font-family: 'Roboto Serif';
font-style: normal;
font-weight: 600;
font-size: 15px;
line-height: 144.02%;
/* or 22px */

letter-spacing: 0.07em;
/* color:white; */
   }


 

.per3{
    position: absolute;
    width: 454px;
    height: 81px;
    left: 1100px;
    
    
    font-family: 'Roboto Serif';
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 144.02%;
    /* or 43px */
    
    letter-spacing: 0.07em;
    /* color:white; */
    
}
  
.statue{
    position: absolute;
    width: 1318px;
    height: 376px;
    left: 68px;
    top: 4002px;
    
    background: #252424;
    border-radius: 33px;
    color: #FFFFFF;
   }

   .statue:hover{
    background-color:#EAEAEA;
    opacity: 0.75;
    color:#5B5B5B;
     background-image: url(img/statue2.png); 

  /*no repeat, center */
  background-position: center;
  background-repeat: no-repeat;

   }

   .sta.statue:visited{
    background-color:#002fa7;
        opacity: 0.55;
        color:#f1f1f1;

   }


   .statuehover{
    display:none;
   }
  
   .statue:hover + .statuehover{
    display: block;
    position: absolute;
  width: 553px;
  height:289px;

 
   }

  

    /* .statue:hover + .statuehover{
      display: block;
      position: absolute;
      width: 553px;
height: 289px;
left: 668px;
top: 4734px;} */


  .statue1{
    position: absolute;
width: 454px;
height: 81px;
left: 80px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 144.02%;
/* or 43px */

letter-spacing: 0.07em;

/* color: #FFFFFF; */

  }
  

  .statue2{
    position: absolute;
width: 454px;
height: 81px;
left: 80px;
    top: 220px;


    font-family: 'Roboto Serif';
font-style: normal;
font-weight: 600;
font-size: 15px;
line-height: 144.02%;
/* or 22px */

letter-spacing: 0.07em;
/* color:white; */


  }

  .statue3{
    position: absolute;
width: 454px;
height: 81px;
left: 1100px;
font-family: 'Roboto Serif';
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 144.02%;
/* or 43px */

letter-spacing: 0.07em;

/* color: #FFFFFF; */

  }
    

  .graphic{
    position: absolute;
    width: 1318px;
    height: 376px;
    left: 68px;
    top: 4454px;
    
    background: #252424;
    border-radius: 33px;
    color: #FFFFFF;
   
  }

    .graphic:hover{
        background-color:#EAEAEA;
        opacity: 0.75;
        color:#ffffff;
        background-image: url(img/clip.jpeg);
        background-repeat: no-repeat;
        background-position: center;
       background-image: 100% 100%;
       
     }

  .graphic1{
    position: absolute;
width: 454px;
height: 81px;
left: 80px;
font-family: 'Roboto Serif';
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 144.02%;
/* or 43px */

letter-spacing: 0.07em;

/* color: #FFFFFF;*/
  }

    .graphic2{
        position: absolute;
width: 454px;
height: 81px;
left: 80px;
    top: 240px;
font-family: 'Roboto Serif';
font-style: normal;
font-weight: 600;
font-size: 15px;
line-height: 144.02%;
/* or 22px */
letter-spacing: 0.07em;

/* color: #FFFFFF; */
}


.graphic3{
    position: absolute;
width: 454px;
height: 81px;
left: 1100px;
font-family: 'Roboto Serif';
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 144.02%;
/* or 43px */

letter-spacing: 0.07em;

/* color: #FFFFFF; */
}
  
   
.art{
    position: absolute;
    width: 1318px;
    height: 376px;
    left: 68px;
    top: 4906px;
    
    background: #252424;
    border-radius: 33px;
    color: #FFFFFF;
   }

    .art:hover{
     background-color:#EAEAEA;
     /* background-color:#002fa7; */
    
     color:#ffffff;
     background-image: url(img/blur.png);
     background-repeat:no-repeat;
     /* background-position: 70% 40%; */
      background-size: 100% 100%;
      /* filter: blur(7px); */
      filter:brightness(-1.5);
    filter:contrast(-1.5);
    
    }

   .art1{
    position: absolute;
width: 454px;
height: 81px;
left: 80px;
font-family: 'Roboto Serif';
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 144.02%;
/* or 43px */

letter-spacing: 0.07em;


/* color: #FFFFFF; */
   }

   .art2{
    position: absolute;
width: 454px;
height: 81px;
left: 80px;
    top: 240px;
font-family: 'Roboto Serif';
font-style: normal;
font-weight: 600;
font-size: 15px;
line-height: 144.02%;
/* or 22px */

letter-spacing: 0.07em;
/* 
color: #FFFFFF; */
   }

   .art3{
    position: absolute;
width: 454px;
height: 81px;
left: 1100px;
font-family: 'Roboto Serif';
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 144.02%;
/* or 43px */



letter-spacing: 0.07em;


/* color: #FFFFFF; */
   }
  
 .howeverimage{
  position: absolute;
width: 404px;
height: 550px;
    left: 852px;

    top: -463px;
filter:blur(10px)
 }