body{
      background-color: black;
      display: cover; 
       height: 100vh;
       margin: 0;
       min-height: 100vh;
     }
     
   .grid-container {
    border-color: transparent;
    padding-top:0px; /*12*/
    grid-template-columns: auto auto auto auto auto auto;
    display: grid;
  }

  .grid-item {
     border: 0px ;
  }
  
  .grid-item #video-1{
    width:100%;
    height:100%;
  } 

  .grid-item #video-1:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(12vw)) translateY(calc(12vh));
}
.grid-item #video-2{
    margin-left:0;
    width:100%;
    height:100%;
  } 

  .grid-item #video-2:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(8vw)) translateY(calc(12vh));
    justify-content: center;
} 
  .grid-item #video-3{
    margin-left:0;
    width:100%;
    height:100%;
  
   } 

   .grid-item #video-3:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(5vh)) translateY(calc(12vh));
    justify-content: center;
} 

    .grid-item #video-4{
    margin-left:0;
    width:100%;
    height:100%;
  
     } 
  .grid-item #video-4:hover{
    border-radius:15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(-5vh)) translateY(calc(12vh));
    justify-content: center;
} 

  .grid-item #video-5{
    margin-left:0;
     width:100%;
    height:100%;
  
    } 

  .grid-item #video-5:hover{
      border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(-12vh)) translateY(calc(12vh));
    justify-content: center;

    
   }
  .grid-item #video-6{
    margin-left:0;
    width:100%;
    height:100%;
     
  } 
  .grid-item #video-6:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(-25vh)) translateY(calc(12vh));
    justify-content: center;
   }

  .grid-item #video-7{
    margin-left:0;
    width:100%;
    height:100%;
  
   } 
  .grid-item #video-7:hover{
     border-radius: 15%;
      transition: all 3s ease;  
      transform: scale(3) translateX(calc(25vh)) translateY(calc(6vh));
      justify-content: center;
  

    }
  
  .grid-item #video-8{
    margin-left:0;
    width:100%;
    height:100%;
    
  } 
  .grid-item #video-8:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(12vh)) translateY(calc(6vh));
    justify-content: center;
   /* background-image: url(media/08.mp4);*/
    
} 

   .grid-item #video-9{
    margin-left:0;
    width: 100%;
    height: 100%;      
  } 
  .grid-item #video-9:hover{
   border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(5vh)) translateY(calc(6vh));
    justify-content: center;
 }
  .grid-item #video-10{
    margin-left:0;
    width:100%;
    height:100%;
 } 
.grid-item #video-10:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(-5vh)) translateY(calc(6vh));
    justify-content: center;
  }

  .grid-item #video-11{
    margin-left:0;
    width: 100%;
    height: 100%;
  } 
.grid-item #video-11:hover{
  border-radius:15%;
  transition: all 3s ease;  
  transform: scale(3) translateX(calc(-12vh)) translateY(calc(6vh));
  }

  .grid-item #video-12{
    margin-left:0;
    width: 100%;
    height: 100%;
 } 
 .grid-item #video-12:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(-25vh)) translateY(calc(6vh));
   }

  .grid-item #video-13{
    margin-left:0;
    width:100%;
    height:100%;
  } 
  .grid-item #video-13:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(25vh));
   }

  .grid-item #video-14{
    margin-left:0;
    width:100%;
    height:100%; 
} 
 
.grid-item #video-14:hover{
  border-radius: 15%;
  transition: all 3s ease;  
  transform: scale(3) translateX(calc(12vh));
 }
  
  .grid-item #video-15{
    margin-left:0;
    width:100%;
    height:100%;
  }  
  .grid-item #video-15:hover{
   border-radius:15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(5vh));
       
   }

  .grid-item #video-16{
    margin-left:0;
    width:100%;
    height:100%;
  } 
 
.grid-item #video-16:hover{
 border-radius: 15%;
  transition: all 3s ease;  
  transform: scale(3) translateX(calc(-5vh));
 
 }

  .grid-item #video-17{
    margin-left:0;
    width:100%;
    height:100%;
  } 

.grid-item #video-17:hover{
 border-radius: 15%;
  transition: all 3s ease;  
  transform: scale(3) translateX(calc(-12vh));
 }

  .grid-item #video-18{
    margin-left:0;
    width:100%;
    height:100%;
  } 
  .grid-item #video-18:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(-25vh));
   }

  .grid-item #video-19{
    margin-left:0;
    width:100%;
    height:100%;
  }
  .grid-item #video-19:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(25vh)) translateY(calc(-6vh));
   } 
  
  .grid-item #video-20{
    margin-left:0;
    width:100%;
    height:100%;
  } 

.grid-item #video-20:hover{
 border-radius: 15%;
  transition: all 3s ease;  
  transform: scale(3) translateX(calc(12vh)) translateY(calc(-6vh));
 
 }
  .grid-item #video-21{
    margin-left:0;
    width:100%;
    height:100%;
  } 
 
.grid-item #video-21:hover{
 border-radius: 15%;
  transition: all 3s ease;  
  transform: scale(3) translateX(calc(5vh)) translateY(calc(-6vh));
 }
  .grid-item #video-22{
    margin-left:0;
    width:100%;
    height:100%;
  } 

.grid-item #video-22:hover{
 border-radius: 15%;
  transition: all 3s ease;  
  transform: scale(3) translateX(calc(-5vh)) translateY(calc(-6vh));
 }

  .grid-item #video-23{
    margin-left:0;
    width:100%;
    height:100%;
  } 
 
.grid-item #video-23:hover{
 border-radius: 15%;
  transition: all 3s ease;  
  transform: scale(3) translateX(calc(-12vh)) translateY(calc(-6vh));
 }

  .grid-item #video-24{
    margin-left:0;
    width:100%;
    height:100%;
   /* padding: 10px;*/
  } 
  .grid-item #video-24:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(-25vh)) translateY(calc(-6vh));
   }

  .grid-item #video-25{
    margin-left:0;
    width:100%;
    height:100%;
   /* padding: 10px;*/
  } 
  .grid-item #video-25:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(25vh)) translateY(calc(-12vh));
   }
  .grid-item #video-26{
    margin-left:0;
    width:100%;
    height:100%;
   /* padding: 10px;*/
  } 
  .grid-item #video-26:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(12vh)) translateY(calc(-12vh));
   }

  .grid-item #video-27{
    margin-left:0;
    width:100%;
    height:100%;
   /* padding: 10px;*/
  } 
  .grid-item #video-27:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(5vh)) translateY(calc(-12vh));
   }

  .grid-item #video-28{
    margin-left:0;
    width:100%;
    height:100%;
   /* padding: 10px;*/
  } 
  .grid-item #video-28:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(-5vh)) translateY(calc(-12vh));
   }

  .grid-item #video-29{
    margin-left:0;
    width:100%;
    height:100%;
   /* padding: 10px;*/
  } 
  .grid-item #video-29:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(-12vh)) translateY(calc(-12vh));
   }

  .grid-item #video-30{
    margin-left:0;
    width:100%;
    height:100%;
   /* padding: 10px;*/
  } 
  .grid-item #video-30:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(-25vh)) translateY(calc(-12vh));
   
   }



  /* @keyframes power { 
    0% {
        opacity: 0;
        transform: translateY(700px);
    }
    8% {
        opacity: 1;
        transform: translateY(300px);
    }
    17% {
        opacity: 1;
        transform: scale(1);
    }
    19% { opacity: 0 }
    25% {
        opacity: 0;
        transform: scale(10);
    }
    100% { opacity: 0 }
 }*/

 @media only screen and (max-width: 600px) {
  .grid-container {
    border-color: transparent;
    padding-top:0px; /*12*/
    grid-template-columns: auto auto auto ;
    display: grid;
  }



 /* look hover*/

  .grid-item #video-1:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(7.5vh)) translateY(calc(12vh));
}


  .grid-item #video-2:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(0vh)) translateY(calc(12vh));
    justify-content: center;
} 
  

   .grid-item #video-3:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(-7.5vh)) translateY(calc(12vh));
    justify-content: center;
} 
     
} 
  .grid-item #video-4:hover{
    border-radius:15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(7.5vh)) translateY(calc(12vh));
    justify-content: center;
} 

 

  .grid-item #video-5:hover{
      border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(0vh)) translateY(calc(12vh));
    justify-content: center;       
  }
 

  .grid-item #video-6:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(-7.5vh)) translateY(calc(12vh));
    justify-content: center;
   }

  
  .grid-item #video-7:hover{
     border-radius: 15%;
      transition: all 2s ease;  
      transform: scale(3) translateX(calc(7.5vh)) translateY(calc(6vh));
      justify-content: center;
  
    }
  
   .grid-item #video-8:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(0vh)) translateY(calc(6vh));
    justify-content: center;
   /* background-image: url(media/08.mp4);*/
    
} 

 
  .grid-item #video-9:hover{
   border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(-7.5vh)) translateY(calc(6vh));
    justify-content: center;
 }
 
.grid-item #video-10:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(7.5vh)) translateY(calc(6vh));
    justify-content: center;
  }

 
.grid-item #video-11:hover{
  border-radius:15%;
  transition: all 2s ease;  
  transform: scale(3) translateX(calc(0vh)) translateY(calc(6vh));
  }


 .grid-item #video-12:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(-7.5vh)) translateY(calc(6vh));
   }

  
  .grid-item #video-13:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(7.5vh));
   }

  
 
.grid-item #video-14:hover{
  border-radius: 15%;
  transition: all 2s ease;  
  transform: scale(3) translateX(calc(0vh));
 }
  
 
  .grid-item #video-15:hover{
   border-radius:15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(-7.5vh));
       
   }

  
.grid-item #video-16:hover{
 border-radius: 15%;
  transition: all 2s ease;  
  transform: scale(3) translateX(calc(7.5vh));
 
 }

 
.grid-item #video-17:hover{
 border-radius: 15%;
  transition: all 2s ease;  
  transform: scale(3) translateX(calc(0vh));
 }

  
  .grid-item #video-18:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(-7.5vh));
   }

  
  .grid-item #video-19:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(7.5vh)) translateY(calc(-6vh));
   } 
  
 

.grid-item #video-20:hover{
 border-radius: 15%;
  transition: all 2s ease;  
  transform: scale(3) translateX(calc(0vh)) translateY(calc(-6vh));
 
 }
  
.grid-item #video-21:hover{
 border-radius: 15%;
  transition: all 2s ease;  
  transform: scale(3) translateX(calc(-7.5vh)) translateY(calc(-6vh));
 }
 

.grid-item #video-22:hover{
 border-radius: 15%;
  transition: all 2s ease;  
  transform: scale(3) translateX(calc(7.5vh)) translateY(calc(-6vh));
 }

  
.grid-item #video-23:hover{
 border-radius: 15%;
  transition: all 2s ease;  
  transform: scale(3) translateX(calc(0vh)) translateY(calc(-6vh));
 }


  .grid-item #video-24:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(-7.5vh)) translateY(calc(-6vh));
   }

  
  .grid-item #video-25:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(7.5vh)) translateY(calc(-12vh));
   }
  
  .grid-item #video-26:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(0vh)) translateY(calc(-12vh));
   }

 
  .grid-item #video-27:hover{
    border-radius: 15%;
    transition: all 2s ease;  
    transform: scale(3) translateX(calc(-7.5vh)) translateY(calc(-12vh));
   }

  
  .grid-item #video-28:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(7.5vh)) translateY(calc(-12vh));
   }

  
  .grid-item #video-29:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(0vh)) translateY(calc(-12vh));
   }

  
  .grid-item #video-30:hover{
    border-radius: 15%;
    transition: all 3s ease;  
    transform: scale(3) translateX(calc(-7.5vh)) translateY(calc(-12vh));
   
   }