*{
    margin:0px;
    padding:0px;
}

body{
    position: relative;
width: 1440px;

    background-color: rgb(255, 255, 255);

}




.background{
    position: absolute;
width: 1440px;
height: 900px;
left: 0px;
top: 0px;
animation: fadeIn 5s ease-in-out;
-webkit-animation: fadeIn 5s;
-moz-animation: fadeIn 5s;
-o-animation: fadeIn 5s;
-ms-animation: fadeIn 5s;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-ms-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }


  #stop{
    position: absolute;
width: 1440px;
height: 918px;
left: 0px;
top: -8px;

background: #000000;
  }
.performer{
  position: absolute;
  width: 946px;
  height: 188px;
  left: 310px;
  top: 365px;
  
  font-family: 'Roboto Serif';
  font-style: normal;
  font-weight: 400;
  font-size: 150px;
  line-height: 176px;
  letter-spacing: 0.065em;
  
  color: #FFFFFF;
  }

.remix{
  position: absolute;
  width: 253px;
  height: 69px;
  left: 1024px;
  top: 569px;
  
  font-family: 'Roboto Serif';
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  line-height: 35px;
  letter-spacing: 0.035em;
  
  color: #FFFFFF;
}

.descript{
    position: absolute;
width: 1222px;
height: 180px;
left: 109px;
top: 1118px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 600;
font-size: 50px;
line-height: 59px;

color: #000000;

}

.detail{
    position: absolute;
width: 950px;
height: 205px;
left: 380px;
top: 1363px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 23px;

color: #000000;
}

.view{
    position: absolute;
width: 75px;
height: 29px;
left: 1230px;
top: 1525px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 10px;

color: #3332328c;
background-color: white;
border:none;
/* border-bottom: 1px rgba(43, 43, 43, 0.222) solid; */

}

.detail2{
    position: absolute;
    width: 945px;
    height: 119px;
    left:380px;
    top: 1568px;
    
    font-family: 'Roboto Serif';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 23px;
    
    color: #000000;
   display:none;
}

.projectimage{
  position: absolute;
width: 1252px;
height: 800px;
left: 94px;
top: 1922px;

}

.demo{
  position: absolute;
width: 155px;
height: 78px;
left: 113px;
top: 1927px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 400;
font-size: 40px;
line-height: 47px;

color: #FFFFFF;
}


.blacksection{
  position: absolute;
width: 1440px;
height: 900px;
left: 0px;
top: 2806px;

background: #000000;
}

.process{
  position: absolute;
width: 138px;
height: 48px;
left: 37px;
top: 36px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 600;
font-size: 30px;
line-height: 35px;

color: #FFFFFF;

}

.one{
  position: absolute;
width: 112px;
height: 94px;
left: 175px;
top: 131px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 600;
font-size: 80px;
line-height: 94px;
/* identical to box height */


color: #4D4D4D;
}

.onetext{
  position: absolute;
width: 305px;
height: 98px;
left: 175px;
top: 247px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 400;
font-size: 25px;
line-height: 29px;

color: #FFFFFF;

}

.onetext2{
  position: absolute;
width: 237px;
height: 44px;
left: 175px;
top: 357px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 300;
font-size: 15px;
line-height: 23px;

color: #FFFFFF;
}

.two{
  position: absolute;
width: 112px;
height: 94px;
left: 704px;
top: 131px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 600;
font-size: 80px;
line-height: 94px;
/* identical to box height */


color: #4D4D4D;

}

.twotext{
  position: absolute;
width: 240px;
height: 51px;
left: 672px;
top: 236px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 400;
font-size: 25px;
line-height: 29px;

color: #FFFFFF;
}


.twoimg{
  position: absolute;
width: 312px;
height: 178px;
left: 618px;
top: 270px;
}

.three{
  position: absolute;
width: 112px;
height: 94px;
left: 1178px;
top: 131px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 600;
font-size: 80px;
line-height: 94px;
/* identical to box height */


color: #4D4D4D;
}

.threetext{
  position: absolute;
width: 255px;
height: 76px;
left: 1128px;
top: 232px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 400;
font-size: 25px;
line-height: 29px;

color: #FFFFFF;
}


.four{
  position: absolute;
width: 112px;
height: 94px;
left: 175px;
top: 533px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 600;
font-size: 80px;
line-height: 94px;
/* identical to box height */


color: #4D4D4D;
}

.fourtext{
  position: absolute;
width: 340px;
height: 65px;
left: 168px;
top: 639px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 400;
font-size: 25px;
line-height: 29px;

color: #FFFFFF;
}

.fourtexttwo{
  position: absolute;
width: 253px;
height: 68px;
left: 162px;
top: 722px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 200;
font-size: 15px;
line-height: 23px;

color: #FFFFFF;

}

.five{
  position: absolute;
width: 112px;
height: 94px;
left: 718px;
top: 533px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 600;
font-size: 80px;
line-height: 94px;
/* identical to box height */


color: #4D4D4D;
}

.fivetext{
  position: absolute;
width: 274px;
height: 103px;
left: 690px;
top: 637px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 400;
font-size: 25px;
line-height: 29px;

color: #FFFFFF;

}

.six{
  position: absolute;
  width: 112px;
  height: 94px;
  left: 1178px;
  top: 533px;
  
  font-family: 'Roboto Serif';
  font-style: normal;
  font-weight: 600;
  font-size: 80px;
  line-height: 94px;
  /* identical to box height */
  
  
  color: #4D4D4D;



}

.sixtext{
  position: absolute;
width: 221px;
height: 57px;
left: 1146px;
top: 647px;

font-family: 'Roboto Serif';
font-style: normal;
font-weight: 400;
font-size: 25px;
line-height: 29px;

color: #FFFFFF;
}


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:87%;
  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: 85%;
  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: 146px;
  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;

}