/*************************/
/**   retroClock       **/
/*************************/

:root {
	/* Farben */
	--dark-bg: #DDD;
	--dark-text: #222;
	--dark-bg-clockface: #FFF;
	--light-bg: #151515;
	--light-text: #FFF;
	--highlight-dark: #EEE;
	--highlight-light: #202020;

	/* Größen */
	--clock-width: 50px;
	--clock-width-month: 100%;
	--clock-height: 80px;
	--clock-mobile-width: 30px;
	--clock-mobile-width-month: 200px;
	--clock-mobile-height: 50px;
	--dot-size: 10px;
	--mobile-dot-size: 8px;
}

.retroClock {
	display: inline-block;
	overflow: visible;
	min-width: 510px;
	font-family: "Roboto",  sans-serif;
	font-weight: bold;
}

.retroClockM {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    font-family: "Roboto",  sans-serif;
    font-weight: bold;
}

.retroClockContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.retroClockBody {
	display: flex;
	width: 100%;
	justify-content: center;
}

/**** Dark ****/

.retroClock .clockFace-Group-Headline:before,
/***** mit dunklen Hintergrund *****/
.retroClock.dark .clockFace-Group-Headline:before {
	color: var(--highlight-dark);
}

.retroClock.headlineBg .clockFace-Group-Headline:before,
.retroClock.dark.headlineBg .clockFace-Group-Headline:before {
	background-color: chocolate !important;
	border-radius: 4px !important;
}

.retroClock .clockFace-Group:nth-child(n+2):nth-child(-n+3):before,
.retroClock .clockFace-Group:nth-child(n+2):nth-child(-n+3):after,
/***** mit dunklen Hintergrund *****/
.retroClock.dark .clockFace-Group:nth-child(n+2):nth-child(-n+3):before,
.retroClock.dark .clockFace-Group:nth-child(n+2):nth-child(-n+3):after {
	background-color: var(--dark-bg-clockface);
}

.retroClock .clockFace,
.retroClock .clockFace-Top,
.retroClock .clockFace-Sheet-Frontside,
/***** mit dunklen Hintergrund *****/
.retroClock.dark .clockFace,
.retroClock.dark .clockFace-Top,
.retroClock.dark .clockFace-Sheet-Frontside,

.retroClockM .clockFace,
.retroClockM .clockFace-Top,
.retroClockM .clockFace-Sheet-Frontside,
/***** mit dunklen Hintergrund *****/
.retroClockM.dark .clockFace,
.retroClockM.dark .clockFace-Top,
.retroClockM.dark .clockFace-Sheet-Frontside{
	color: var(--dark-text);
	background-color: var(--dark-bg-clockface);
}

.retroClock .clockFace-Bottom,
.retroClock .clockFace-Sheet-Backside,
/***** mit dunklen Hintergrund *****/
.retroClock.dark .clockFace-Bottom, 
.retroClock.dark .clockFace-Sheet-Backside,

.retroClockM .clockFace-Bottom,
.retroClockM .clockFace-Sheet-Backside,
/***** mit dunklen Hintergrund *****/
.retroClockM.dark .clockFace-Bottom, 
.retroClockM.dark .clockFace-Sheet-Backside{
	color: #333;
	background-color: var(--dark-bg-clockface);
}

.retroClock .clockFace:after,
/***** mit dunklen Hintergrund *****/
.retroClock.dark .clockFace:after,

.retroClockM .clockFace:after,
/***** mit dunklen Hintergrund *****/
.retroClockM.dark .clockFace:after {
	border-top: solid 1px var(--dark-text);
}


/**** overwrite 4 light ****/
.retroClock.light .clockFace-Group-Headline:before {
	color: #000 !important;
}

.retroClock.light.headlineBg .clockFace-Group-Headline:before {
	background-color: navajowhite !important;
	border-radius: 4px !important;
}
.retroClock.light .clockFace-Group:nth-child(n+2):nth-child(-n+3):before,
.retroClock.light .clockFace-Group:nth-child(n+2):nth-child(-n+3):after {
	background-color: var(--light-bg) !important;
}

.retroClock.light .clockFace,
.retroClock.light .clockFace-Top,
.retroClock.light .clockFace-Sheet-Frontside,

.retroClockM.light .clockFace,
.retroClockM.light .clockFace-Top,
.retroClockM.light .clockFace-Sheet-Frontside {
	color: var(--light-text);
	background-color: var(--light-bg) !important;
}

.retroClock.light .clockFace-Bottom,
.retroClock.light .clockFace-Sheet-Backside,
.retroClockM.light .clockFace-Bottom,
.retroClockM.light .clockFace-Sheet-Backside {
	color: #EFEFEF !important;
	background-color: var(--highlight-light) !important;
}

.retroClock.light .clockFace:after,
.retroClockM.light .clockFace:after {
	border-top: solid 1px var(--light-bg) !important;
}

/***** Ende Farben ****/

.retroClock .clockFace-Group {
	position: relative;
	float: left;
	padding-right: 30px;
}

.retroClockM .clockFace-Group {
	padding-right: 8px;
}

.retroClock .clockFace-Group:last-child {
	padding-right: 0;
}

.retroClock .clockFace-Group-Headline:before {
	display: block;
	height: 30px;
	line-height: 30px;
	text-align: center;
}

.retroClock .clockFace-Group .clockFace-Group-Headline:before {
	content: attr(data-before);
}

.retroClock .clockFace-Group:nth-child(n+2):nth-child(-n+3):before {
	content: '';
	position: absolute;
	bottom: 20px;
	left: 115px;
	width: var(--dot-size);
	height: var(--dot-size);
	border-radius: 50%;
}

.retroClock .clockFace-Group:nth-child(n+2):nth-child(-n+3):after {
	content: '';
	position: absolute;
	bottom: 50px;
	left: 115px;
	width: var(--dot-size);
	height: var(--dot-size);
	border-radius: 50%;
}

.retroClock .clockFace, .retroClockM .clockFace {
	position: relative;
	float: left;
	width: var(--clock-width);
	height: var(--clock-height);
	margin: 0px 5px 0px 0px;
	border-radius: 4px;
	font-size: 4rem;
	text-align: center;
	perspective: 200px;
}

.retroClockM .clockFace {
    width: 350px;
}

.retroClockM.day .clockFace {
    width: 88px;
}

.retroClockM.year .clockFace {
    width: 160px;
}

.retroClock .clockFace:last-child {
	margin-right: 0;
}

.retroClock .clockFace-Top,
.retroClock .clockFace-Bottom, 

.retroClockM .clockFace-Top,
.retroClockM .clockFace-Bottom {
	overflow: hidden;
	position: absolute;
	width: var(--clock-width);
	height: 40px;
}

.retroClockM .clockFace-Top,
.retroClockM .clockFace-Bottom {
    width: var(--clock-width-month);
}

.retroClock .clockFace-Sheet, .retroClockM .clockFace-Sheet {
	z-index: 1;
	position: absolute;
	width: var(--clock-width);
	height: var(--clock-height);
	transform-style: preserve-3d;
	transition: transform 0s;
}

.retroClockM .clockFace-Sheet {
    width: var(--clock-width-month);
}

.retroClock .clockFace-Sheet.turnOver, 
.retroClockM .clockFace-Sheet.turnOver {
	transform: rotateX(-180deg);
	transition: all 0.5s ease-in-out;
}

.retroClock .clockFace-Sheet-Frontside,
.retroClock .clockFace-Sheet-Backside,

.retroClockM .clockFace-Sheet-Frontside,
.retroClockM .clockFace-Sheet-Backside{
	overflow: hidden;
	position: absolute;
	width: var(--clock-width);
	height: 40px;
	margin: 0;
	transform: rotateX(0deg);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.retroClockM .clockFace-Sheet-Frontside,
.retroClockM .clockFace-Sheet-Backside {
    width: var(--clock-width-month);
}

.retroClock .clockFace-Sheet-Frontside, 
.retroClockM .clockFace-Sheet-Frontside {
	line-height: 80px;
	border-radius: 4px 4px 0px 0px;
}

.retroClock .clockFace-Sheet-Backside, 
.retroClockM .clockFace-Sheet-Backside {
	line-height: 0px;
	border-radius: 0px 0px 4px 4px;
	transform: rotateX(-180deg);
}

.retroClock .clockFace-Top, 
.retroClockM .clockFace-Top {
	line-height: 80px;
	border-radius: 4px 4px 0px 0px;
}

.retroClock .clockFace-Bottom, 
.retroClockM .clockFace-Bottom {
	bottom: 0;
	line-height: 0px;
	border-radius: 0px 0px 4px 4px;
}

.retroClock .clockFace:after, .retroClockM .clockFace:after {
	content: '';
	z-index: 2;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: var(--clock-width);
	height: 40px;
	border-radius: 0px 0px 4px 4px;
}

.retroClockM .clockFace:after {
	width: var(--clock-width-month);
}

.retroClock #retroClockTitle {
	text-align: center;
}

.disp-none { display: none; }

@media (max-width: 768px) {

	.retroClock, retroClockM {
		min-width: 380px;
		width: 312px;
	}

	.retroClock .clockFace, .retroClockM .clockFace {
		font-size: 2.2rem;
		margin-right: 3px;
	}

	.retroClock .clockFace,
	.retroClock .clockFace-Sheet,
	.retroClock .clockFace-Sheet-Frontside,
	.retroClock .clockFace-Sheet-Backside,
	.retroClock .clockFace-Top,
	.retroClock .clockFace-Bottom,
	.retroClock .clockFace:after {
		width: var(--clock-mobile-width);
	}

	.retroClockM .clockFace {
        width: var(--clock-mobile-width-month);
    }

	.retroClockM.day .clockFace {
        width: 56px;
    }

	.retroClockM.year .clockFace {
        width: 96px;
    }

    .retroClockM .clockFace-Sheet,
    .retroClockM .clockFace-Sheet-Frontside,
    .retroClockM .clockFace-Sheet-Backside,
    .retroClockM .clockFace-Top,
    .retroClockM .clockFace-Bottom,
    .retroClockM .clockFace:after {
        width: 100%;
    }
	.retroClock .clockFace-Group {
		padding-right: 20px;
	}

	.retroClockM .clockFace-Group {
		padding-right: 4px;
	}
	.retroClock .clockFace-Group:last-child {
		padding-right: 0px;
	}

	.retroClock .clockFace-Group-Headline:before {
		font-size: 0.8rem;
		height: 20px;
		line-height: 20px;
	}

	.retroClock .clockFace-Group:nth-child(n+2):nth-child(-n+3):before,
	.retroClock .clockFace-Group:nth-child(n+2):nth-child(-n+3):after {
		left: 69px;
	}

	.retroClock .clockFace-Group:nth-child(n+2):nth-child(-n+3):before {
		bottom: 13px;
		height: var(--mobile-dot-size);
		width: var(--mobile-dot-size);
	}

	.retroClock .clockFace-Group:nth-child(n+2):nth-child(-n+3):after {
		bottom: 29px;
		height: var(--mobile-dot-size);
		width: var(--mobile-dot-size);
	}

	.retroClock .clockFace-Sheet-Frontside,
	.retroClock .clockFace-Top,
	.retroClockM .clockFace-Sheet-Frontside,
    .retroClockM .clockFace-Top {
		line-height: 50px;
	}

	.retroClock .clockFace-Sheet,
	.retroClock .clockFace,
	.retroClockM .clockFace-Sheet,
    .retroClockM .clockFace {
        height: var(--clock-mobile-height);
    }

	.retroClock .clockFace-Sheet-Frontside,
	.retroClock .clockFace-Sheet-Backside,
	.retroClock .clockFace-Top,
	.retroClock .clockFace-Bottom,
	.retroClock .clockFace:after,
	
	.retroClockM .clockFace-Sheet-Frontside,
    .retroClockM .clockFace-Sheet-Backside,
    .retroClockM .clockFace-Top,
    .retroClockM .clockFace-Bottom,
    .retroClockM .clockFace:after {
		height: 25px;
	}

}