.wcs-timetable--countdown{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	align-content: stretch;
	align-items: stretch;
	flex-direction: column;
	position: relative;
	z-index: 0;

	> div{
		flex-grow: 1;
		padding: 1em 0;
	}

	h2.wcs-class__title,
	h3.wcs-class__title{
		font-size: 120%;
		margin: 0;
		padding: 0;
		color: inherit;
	}
	h2.wcs-class__title + h3.wcs-class__title{
		font-size: 140%;
		margin-top: 0.85em;
		color: inherit;
	}
	h3.wcs-class__title + .wcs-class__time-location{
		margin-top: 0.25em;
	}

	.wcs-class__title{
		text-align: left;
		width: 100%;
	}

	&-position-top-left{
		.wcs-class__image{
			background-position: top left;
		}
	}
	&-position-top-center{
		.wcs-class__image{
			background-position: top center;
		}
	}
	&-position-top-right{
		.wcs-class__image{
			background-position: top right;
		}
	}
	&-position-middle-left{
		.wcs-class__image{
			background-position: center left;
		}
	}
	&-position-middle-center{
		.wcs-class__image{
			background-position: center center;
		}
	}
	&-position-middle-right{
		.wcs-class__image{
			background-position: center right;
		}
	}
	&-position-bottom-left{
		.wcs-class__image{
			background-position: bottom left;
		}
	}
	&-position-bottom-center{
		.wcs-class__image{
			background-position: bottom center;
		}
	}
	&-position-bottom-right{
		.wcs-class__image{
			background-position: bottom right;
		}
	}

	.wcs-class{
		&__image{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-size: cover;
			z-index: -1;
		}
		&__titles{
			flex-grow: 4;
			flex-shrink: 0;
			padding: 1em;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
		}
		&__action{
			align-self: stretch;
			flex-grow: 1;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-left: 10px;
			padding-right: 10px;

			&::before{
				content: '';
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				opacity: 0.1;
			}
		}
		&__excerpt{
			font-size: 80%;
			text-align: left;
			margin-top: 1em;
			opacity: 0.8;
		}
		&__time-location{
			text-align: left;
			width: 100%;
		}
		&__countdown{
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			flex-grow: 6;
			padding-top: 0;
			padding-right: 1em;
			padding-left: 1em;
			padding-right: calc(1em - 5px);
			padding-left: calc(1em - 5px);
			align-items: center;
			align-content: center;

			@media(min-width: 992px){
				padding-left: 0
			}

			&-years,
			&-months,
			&-days,
			&-hours,
			&-minutes,
			&-seconds{
				flex-grow: 1;
				flex-basis: 10%;
			}
			&-label{
				display: block;
				font-size: 40%;
				opacity: 0.65;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			&-time{
				position: relative;
				padding: 1em 10px;
				font-size: 150%;
				white-space: nowrap;
				overflow: hidden;
				flex-basis: 2.75em;

				@media(min-width: 992px){
					font-size: 175%;
				}

				@media(min-width: 1200px){
					font-size: 200%;
				}

				> span{
					display: block;
					position: relative;
				}

				&::before{
					content: '';
					display: block;
					position: absolute;
					top: 5px;
					right: 5px;
					left: 5px;
					bottom: 5px;
					opacity: 0.8;
				}
			}
		}
	}

	@media(min-width: 768px){
		flex-direction: row;

		> div{
			flex-basis: 10%;
		}

		.wcs-class{
			&__titles{
				flex-basis: 350px;
			}
			&__countdown{
				padding-top: 1em;
				flex-basis: 350px;
			}
			&__action{
				flex-basis: 180px;
			}
		}

	}

	@media(min-width: 992px){

		> div{
			flex-basis: 10%;
			padding: 2em 0;
		}

		h2.wcs-class__title,
		h3.wcs-class__title{
			font-size: 160%;
		}
		h2.wcs-class__title + h3.wcs-class__title{
			font-size: 120%;
		}

		.wcs-class{
			&__titles{
				padding: 2em;
			}
			&__countdown{
				padding-top: 2em;
				padding-right: 2em;
				padding-left: 2em;
				flex-grow: 4;
			}

		}

	}

	&-vertical{
		flex-direction: column;

		> div {
			flex-basis: auto;
		}

		.wcs-class__title{
			text-align: center;
		}

		.wcs-class{
			&__titles{
				flex-basis: auto;
			}
			&__countdown{
				padding-left: 2em;
				padding-top: 0;
				flex-basis: auto;
			}
			&__action{
				padding-left: 2em;
				padding-right: 2em;
				padding-top: 0;
				flex-basis: auto;

				&::before{
					opacity: 1;
				}
			}
			&__time-location{
				text-align: center;
			}
		}
	}

}