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

#container {
    width: 100%;
    height: 100vh;
}

.fondo {
    /*clip-path: inset(0 9% 10% 2%);*/
    /* ? clip-path: polygon(0 0, 75% 0, 25% 100%, 0 100%);*/
    /*background-image: url(../Prop_Clip-path/imgs/Proyect\ THE\ DEMOCRACY\ -\ La\ Democracia.mp4);*/
    /* width: 100%;*/
}

#bg-video {
    /* ? background-image: url(../Prop_Clip-path/imgs/CAM\ Delantera\ comercial\ 01.jpg);*/
    background-size: cover; /* * establece el tamaño de fondo como "cubierto" para que la imagen de fondo se adapte al tamaño de la ventana.*/
    background-position: center; /* * Hace que la imagen se centre*/
    height: 100vh; /* * estabelce la altura del elemento en 100% de la altura de la ventana.*/
    -webkit-clip-path: polygon(0 0, 75% 0, 25% 100%, 0 100%);
            clip-path: polygon(0 0, 75% 0, 25% 100%, 0 100%); /* * establece un clip-path para recortar el elemento en un polígono definido por los puntos especificados.*/
    position: absolute; /* * Establece el elemento como absoluto (para evitar problemas de superposion con otros elementos)*/
    top: 0; /* * establece la parte superior del elemento en 0*/
    left: 0; /* * establece la parte iz del elemento en 0*/
    height: 100%; /* * establece la altura del elemento en 100%.*/
    width: 100%; /* * establece la anchura del elemento en 100%.*/
    -o-object-fit: cover;
       object-fit: cover; /* * establece el object-fit como cubierto o portada (para que ocupe toda la pantalla con efecto liquido).*/
    z-index: 1; /* * El orden en las capas*/
    transition: -webkit-clip-path 0.5s ease-in-out;
    -webkit-transition: -webkit-clip-path 0.5s ease-in-out;
    -o-transition: clip-path 0.5s ease-in-out;
    transition: clip-path 0.5s ease-in-out;
    transition: clip-path 0.5s ease-in-out, -webkit-clip-path 0.5s ease-in-out; /* * Establece una trans. que pondre inmediatamente en el hover de este elemento justo debajo*/
}

#bg-video-wrapper:hover #bg-video {
    z-index: 2; /*? Superpone la capa a #bg-video_02*/
    -webkit-clip-path: polygon(0 0, 95% 0, 50% 100%, 0 100%);
            clip-path: polygon(0 0, 95% 0, 50% 100%, 0 100%); /*? Desplaza #bg-video*/
}

/*#bg-video:hover {
    clip-path: polygon(0 0, 95% 0, 50% 100%, 0 100%);
    autoplay loop
  }*/


#bg-video_02 {
    /* ? background-image: url(../Prop_Clip-path/imgs/CAM\ Delantera\ comercial\ 01.jpg);*/
    background-size: cover;
    background-position: center;
    height: 100vh;
    -webkit-clip-path: polygon(75% 0, 100% 0, 100% 100%, 25% 100%);
            clip-path: polygon(75% 0, 100% 0, 100% 100%, 25% 100%);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 1;
    transition: -webkit-clip-path 0.5s ease-in-out;
    -webkit-transition: -webkit-clip-path 0.5s ease-in-out;
    -o-transition: clip-path 0.5s ease-in-out;
    transition: clip-path 0.5s ease-in-out;
    transition: clip-path 0.5s ease-in-out, -webkit-clip-path 0.5s ease-in-out;
    -webkit-animation: expand 0.5s ease-in-out forwards;
            animation: expand 0.5s ease-in-out forwards;
}

#bg-video-wrapper_02:hover #bg-video_02 {
    /*? Desplaza #bg-video_02*/
    -webkit-clip-path: polygon(45% 0, 100% 0, 100% 100%, 25% 100%);
            clip-path: polygon(45% 0, 100% 0, 100% 100%, 25% 100%);
}

/* TODO LLama clip-path de #bg-video*/
#bg-video-wrapper_02:hover ~ #bg-video {
    /*? Desplaza #bg-video*/
    -webkit-clip-path: polygon(0 0, 95% 0, 10% 100%, 0 100%);
            clip-path: polygon(0 0, 95% 0, 10% 100%, 0 100%);
}

#aviso{
    z-index: 5;
    position: absolute;
    font-size: 45px;
    color: rgb(252, 83, 26);
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}