body {
  display: flex;
  justify-content: center;
  align-items: center;
  heigth: 100vh;
  background: #000000de;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	margin-left: -10px;
}

.video_box {
    width: 120vw;
    height: 120vh;
	position: fixed;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	z-index: -3;
}

.outside {
  position: relative;
	width: 640px;
	height: 450px;
	background: radial-gradient(circle, rgba(212,251,63,0.8858893899356618) 0%, rgba(92,252,70,0.8354692218684349) 100%);
	-webkit-clip-path: polygon(50% 12%, 96% 14%, 93.5% 86%, 50% 91%, 6.5% 86%, 4% 14%);
	clip-path: polygon(50% 12%, 96% 14%, 93.5% 86%, 50% 91%, 6.5% 86%, 4% 14%);
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	box-shadow: 0 20px 30px -4px rgb(0 0 0 / 60%);
	-webkit-box-shadow: 0 20px 30px -4px rgb(0 0 0 / 60%);
}

.inside {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: white;
  -webkit-clip-path: polygon(50% 11%, 96.5% 13.5%, 94% 87%, 50% 92%, 6% 86.5%, 3.5% 13.5%);
  clip-path: polygon(50% 11%, 96.5% 13.5%, 94% 87%, 50% 92%, 6% 86.5%, 3.5% 13.5%);
  
}

#video2 {
    width: 650px;
    height: 400px;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(110px);
	
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
  
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


.vid_next {
	position: fixed;
  	top: 50%;
    left: 100%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	width: 60px!important;
    height: 60px!important;
}

.vid_prev {
	position: fixed;
    top: 50%;
    left: 0%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	width: 60px!important;
    height: 60px!important;
}


#vid_next_close {
	display:none;
}

.vid_x_box {
	width: 80%;
    height: 80px;
    position: fixed;
    top: 1%;
    left: 51%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
    pointer-events: all;
    cursor: pointer;
    
}

.vid_x_box svg {
	position: fixed;
    top: 74%;
    left: 49%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}


.vid_ero_box {
	width: 88vw;
    max-width: 690px;
    height: 460px;
    position: fixed;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 10;
}


.vid_play_c {
	width: 610px;
    height: 285px;
    position: fixed;
    top: 45%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	pointer-events: all;
	cursor: pointer;
}


.vid_c_playpause {
	
    position: fixed;
    top: 62%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}




@media (max-width: 600px) {

body {
    display: flex;
    justify-content: center;
    align-items: center;
    heigth: 100vh;
    background: #000000de;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	margin-left: 0px;
}


}


#vid_prev {
	display:none;
}

#video {
  z-index: -3;
  transition: transform .4s ease-out;
  clip-path: polygon(2.5% 7.5%, 50% 4%, 97.5% 8%, 95% 93%, 50% 100%, 5% 93%);
  -webkit-clip-path: polygon(2.5% 7.5%, 50% 4%, 97.5% 8%, 95% 93%, 50% 100%, 5% 93%);
  margin: 0 auto;
  
  
  
  @media (max-width: 500px) {
    width: 300px!important;
    height: 167px!important;
  }
}

.blur {
  position: fixed; 
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%) scale(1.5, 1.3);
  -webkit-transform: translate(-50%, -60%) scale(1.5, 1.3);
  border-radius: 30%;
  filter: blur(100px) saturate(9);
  opacity: .5;
  
  @media (max-width: 500px) {
     transform: translate(-50%, -60%) scale(1.3, 1.1);
	 -webkit-transform: translate(-50%, -60%) scale(1.3, 1.1);
    filter: blur(80px) saturate(9);
  }
}