.video-wrapper {111TOP: 0 !IMPORTANT; 111MARGIN-TOP: 0PX !IMPORTANT; 111MARGIN: 0 !IMPORTANT;
  --color: #1F242D;  --color: #ffb338;
  --color-invert: #ffffff;
  --clip-path: circle(15px at left);
  --clip-path-hover: circle(70px at left);
  --clip-path-clicked: circle(100vw at left);
  --duration: .4s;
  --timing-function: ease;
  font: 400 16px "Poppins", sans-serif;
  position: relative; POSITION: ABSOLUTE; 
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;  
	box-sizing: border-box;  
	clear: both; 


	/**CENTER DIV**/
        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        max-width:100%;
        max-height:100%;
        overflow:auto;
	/**END OF CENTER DIV**/
	}

.video-wrapper .video {
  height: 100vh;  
  overflow: hidden;
  display: flex;
  justify-content: center;  
  align-items: center;
  margin-left: 15px;
  -webkit-clip-path: var(--clip-path);
          clip-path: var(--clip-path);
  transition: -webkit-clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function), -webkit-clip-path var(--duration) var(--timing-function);
}
.video-wrapper .video video {
  position: fixed;
  background: #c4cbde;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%); 
	 background: radial-gradient(#272727, #1b1b1b);
}
.video-wrapper .text {
  position: relative;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.2px;
  opacity: var(--opacity, 1);
  transition: opacity 0.3s var(--timing-function) 0.2s;
}
.video-wrapper .text::before, .video-wrapper .text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -1px;
  right: 25px;
  height: 0;
}
.video-wrapper .text::before {
  box-shadow: 26px 0 0 1px var(--color);
  right: var(--r, 100%);
  opacity: var(--opacity, 0);
  transition: right 0.5s ease-in, opacity 0.1s linear;
}
.video-wrapper .text::after {
  box-shadow: 26px 0 0 1px var(--color-invert);
  -webkit-clip-path: var(--clip-path);
          clip-path: var(--clip-path);
  transition: -webkit-clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function), -webkit-clip-path var(--duration) var(--timing-function);
}
.video-wrapper .text > span::before, .video-wrapper .text > span::after {
  content: attr(data-text);
  padding-left: 26px;
}
.video-wrapper .text > span::before {
  color: var(--color);
}
.video-wrapper .text > span::after {
  color: var(--color-invert);
  -webkit-clip-path: var(--clip-path);
          clip-path: var(--clip-path);
  transition: -webkit-clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function), -webkit-clip-path var(--duration) var(--timing-function);
  position: absolute;
  left: 0;  
}
.video-wrapper input {
  width: 220px;
  height: 40px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 40px;
  outline: none;
  z-index: 2;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;  
	}


.video-wrapper input:focus {
  outline: 0;
}
.video-wrapper input:hover ~ .video {
  -webkit-clip-path: var(--clip-path-hover);
          clip-path: var(--clip-path-hover);
}
.video-wrapper input:hover ~ .text::before {
  --r: 25px;
  --opacity: 1;
}
.video-wrapper input:hover ~ .text::after {
  -webkit-clip-path: var(--clip-path-hover);
          clip-path: var(--clip-path-hover);
}
.video-wrapper input:hover ~ .text > span::after {
  -webkit-clip-path: var(--clip-path-hover);
          clip-path: var(--clip-path-hover);
}
.video-wrapper input:checked {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.video-wrapper input:checked ~ .video {
  -webkit-clip-path: var(--clip-path-clicked);
          clip-path: var(--clip-path-clicked);
}
.video-wrapper input:checked ~ .text {
  --opacity: 0;
  transition: opacity 0.3s var(--timing-function);
}
.video-wrapper input:checked ~ .text::after {
  -webkit-clip-path: var(--clip-path-clicked);
          clip-path: var(--clip-path-clicked);
}
.video-wrapper input:checked ~ .text > span::after {
  -webkit-clip-path: var(--clip-path-clicked);
          clip-path: var(--clip-path-clicked);
}