/* Aromars: botón de pausa de los vídeos de fondo (contenedores con aw-video-fondo, añadida desde PHP). */

.aw-video-fondo {
	position: relative;
}

/*
 * Abajo a la derecha, alineado al borde derecho del contenido (ancho del sitio de Avada,
 * --site_width).
 */
.aw-video-pausa {
	position: absolute;
	bottom: 20px;
	right: max(24px, calc((100% - var(--site_width, 1200px)) / 2));
	z-index: 5;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 22px;
	border: 1px solid rgba(243, 239, 232, 0.4);
	background: rgba(14, 13, 12, 0.5);
	color: var(--awb-color8);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.2s;
}

.aw-video-pausa:hover {
	border-color: var(--awb-color5);
}

/* El botón lleva los dos iconos; se muestra el de la acción disponible. */
.aw-video-pausa .aw-icono-play,
.aw-video-pausa.is-pausado .aw-icono-pausa {
	display: none;
}

.aw-video-pausa.is-pausado .aw-icono-play {
	display: block;
}

/*
 * Preview image on every screen until the video plays (Avada only shows it on phones, and
 * covered the video with it). The JS adds is-playing once the video is really playing; if
 * it never does (reduced motion, Save-Data, autoplay blocked) the image stays. Selectors
 * are specific enough to beat Avada's `.ua-mobile .fullwidth-box.video-background …`.
 */
.fullwidth-box.video-background.aw-video-fondo .fullwidth-video-image {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
}

.fullwidth-box.video-background.aw-video-fondo.is-playing .fullwidth-video-image {
	display: none;
}

/* Mobile preview (featured image of the "-movil" video), set by PHP; desktop from 641px. */
.fullwidth-box.video-background.aw-video-fondo .fullwidth-video-image[style*="--aw-poster-mobile"] {
	background-image: var(--aw-poster-mobile) !important;
}

@media (min-width: 641px) {
	.fullwidth-box.video-background.aw-video-fondo .fullwidth-video-image[style*="--aw-poster-mobile"] {
		background-image: var(--aw-poster) !important;
	}
}