.kiosk-wallpaper {
	background: url(/kiosk/kiosk_bg.jpg) no-repeat center fixed;
	background-size: cover;
}

.kiosk-menu {
	background: linear-gradient(rgba(33, 73, 113, 0), white);
	padding: 15px;
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
}

.kiosk-menu .kiosk-icon-container {
	display: table;
	margin: 0 auto;
}

.kiosk-menu .kiosk-icon-container .kiosk-icon {
	display: inline-block;
	padding: 20px;
	border: 5px solid #ffffff;
	border-radius: 100%;
	margin: 0 20px;
	background: linear-gradient(black, rgb(38, 81, 223), black);
	box-shadow: inset 3px 4px 5px #000;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}

.kiosk-menu .kiosk-icon-container .kiosk-icon:hover {
	background: linear-gradient(white, rgba(246, 183, 43, 1), white);
}

.kiosk-menu .kiosk-icon-container .kiosk-icon .kiosk-flip-animation .kiosk-icon-fa {
	color: rgba(255, 255, 255, 0.9);
	/*transform: scale(0.5);*/
	text-shadow: 7px 8px 16px #000;
	line-height: inherit;

	font-size: 40px;
}

.kiosk-menu .kiosk-icon-container .kiosk-icon .kiosk-flip-animation .kiosk-label {
	color: rgba(255, 255, 255, 0.9);
	/*transform: scale(0.5);*/
	text-shadow: 7px 8px 16px #000;
	line-height: inherit;

	font-size: 20px;
	text-decoration: none;
}

.kiosk-menu .kiosk-icon-container .kiosk-icon:hover .kiosk-flip-animation .kiosk-icon-fa {
	color: rgba(255, 255, 255, 0.9);
	/*transform: scale(0.7);*/

	font-size: 60px;
	animation-play-state: paused;
}

.kiosk-fade-animation {
	animation: kioskFade 1s infinite alternate;
	color: white;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 50px;
}

.kiosk-menu .kiosk-icon-container .kiosk-icon .kiosk-flip-animation {
	transition: transform 1s;
	transform-style: preserve-3d;
	animation: kioskFlip 3s infinite alternate;
}

.kiosk-menu .kiosk-icon-container .kiosk-icon .kiosk-flip-animation .kiosk-flip-front {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;

	backface-visibility: hidden;
}

.kiosk-menu .kiosk-icon-container .kiosk-icon .kiosk-flip-animation .kiosk-flip-front {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;

	backface-visibility: hidden;
}

.kiosk-menu .kiosk-icon-container .kiosk-icon .kiosk-flip-animation .kiosk-flip-back {
	position: relative;
	transform: rotateY(180deg);

	backface-visibility: hidden;
}

@keyframes kioskFade {
	from {
		opacity: 0;
	}
}

@keyframes kioskFlip {
	from {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(180deg);
	}
}