/* IAG Expo — countdown ([ex_countdown], ex-countdown.php): FlipClock.js + flipclock/flipclock.css, styled as the flip
   clock on the Elementor home page was: wp-flipclock's added.css and Code Snippet 11's .flip-clock-* rules, here
   scoped to .ex-cd so nothing else on the page is touched. Heading in the kit's Roboto 600, 32 px. */

.ex-cd { text-align: center; }
.ex-cd .ex-cd__title {
	margin: 0 0 15px;
	font-family: var(--ex-body);
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	color: var(--ex-text);
	text-align: center;
}
/* The clock shrink-wraps its cards (they float) and sits centred, as on the Elementor page. */
.ex-cd .ex-cd__clock.flip-clock-wrapper {
	display: inline-block;
	width: auto;
	margin: 11px 0 45px;
	vertical-align: top;
}
.ex-cd .ex-cd__clock:empty { min-height: 100px; } /* room for the clock before the script draws it */

/* wp-flipclock added.css */
.ex-cd .flip-clock-wrapper ul { list-style: none; }    /* theme list styles would break the cards */
.ex-cd .flip-clock-wrapper ul li { margin-left: 0; line-height: 87px; }

/* Code Snippet 11 */
.ex-cd .flip-clock-divider .flip-clock-label { color: #fff; text-transform: uppercase; }

@media (max-width: 767px) {
	/* wp-flipclock added.css */
	.ex-cd .ex-cd__clock.flip-clock-wrapper { margin: 45px auto; } /* 45px above: room for the labels, as on the Elementor page */
	.ex-cd .ex-cd__clock:empty { min-height: 50px; }
	.ex-cd .flip-clock-wrapper ul { height: 50px; line-height: 50px; width: 37px; }
	.ex-cd .flip-clock-wrapper ul li { line-height: 50px; }
	.ex-cd .flip-clock-wrapper ul li a div.up:after { top: 24px; }
	.ex-cd .flip-clock-wrapper ul li a div div.inn { font-size: 30px; }
	.ex-cd .flip-clock-divider { height: 50px; }
	.ex-cd .flip-clock-dot { height: 6px; width: 6px; left: 7px; }
	.ex-cd .flip-clock-dot.top { top: 17px; }
	.ex-cd .flip-clock-dot.bottom { bottom: 8px; }
	.ex-cd .flip-clock-divider .flip-clock-label { font-size: 16px; }
	.ex-cd .flip-clock-divider.hours .flip-clock-label { right: -66px; }
	.ex-cd .flip-clock-divider.minutes .flip-clock-label,
	.ex-cd .flip-clock-divider.seconds .flip-clock-label { right: -78px; }

	/* Code Snippet 11: the cards share the width of the phone */
	.ex-cd .ex-cd__clock.flip-clock-wrapper { display: flex; width: 100%; }
	.ex-cd .flip-clock-wrapper ul.flip { flex: 0.9; margin: 0; }
	.ex-cd .flip-clock-divider .flip-clock-label { left: 10px; }
}