/* ------------------------------------------------------------
 *
 *   ****   ****   ***  *   *  ***  ***** ****
 *   *   *  *   * *   * *   * *   * *     *   *
 *   *   *  *   * *   * *   * *     *     *   *
 *   ****   ****  *   * * * *  ***  ***   ****
 *   *   *  * *   *   * * * *     * *     * *
 *   *   *  *  *  *   * ** ** *   * *     *  *
 *   ****   *   *  ***  *   *  ***  ***** *   *
 *
 * ------------------------------------------------------------ */

.background {
	position: absolute;
	background-image: url("img/img_3479-2.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100vw;
	height: 100vh;
	}
.images {
	}
/* Background behind skaters */
.layer1 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vh;
	height: 100vh;
	transform: translate(-50%, -50%);
	z-index: 990;
	}
/* Behind layer2 */
.layer1a {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vh;
	height: 170vh;
	transform: translate(-50%, -50%) rotate(-40deg);
	z-index: 890;
	}
/* Ring text */
.layer2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vh;
	height: 100vh;
	transform: translate(-50%, -50%);
	z-index: 900;
//	background-color: #cccccc;
	}
/* In front of layer2 */
.layer2a {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vh;
	height: 170vh;
	transform: translate(-50%, -50%) rotate(-40deg);
	z-index: 902;
	}
/* Male skater */
.layer3 {
	position: absolute;
	top: 55%;
	left: 50%;
	width: 50vh;
	height: 50vh;
	transform: translate(-80%, -50%) rotateY(-180deg);
	z-index: 992;
	}
/* Female skater */
.layer4 {
	position: absolute;
	top: 50%;
	right: 50%;
	width: 50vh;
	height: 50vh;
	transform: translate(80%, -50%);
	z-index: 992;
	}

.t1 {
	position: absolute;
	top: 50%;
	left: 0%;
	width: 25vw;
	transform: translate(0, -50%);
	text-align: center;
/*	border: 1px solid;
	border-color: green; */
	}
.t2 {
	position: absolute;
	top: 50%;
	right: 0%;
	width: 25vw;
	transform: translate(0, -50%);
	text-align: center;
/*	border: 1px solid;
	border-color: green; */
	}

.ptext {
	font-family: sans-serif;
	opacity: 60%;
	}

.outlined {
	font: 400 40px Arial;
	color: white;
	text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
	-webkit-text-stroke: 1px;
	-webkit-font-smoothing: antialiased;
	}
.outlinedNear { animation: outlinedNear 2s ease-in-out infinite; }
@keyframes outlinedNear {
	33% { text-shadow:1px 1px 2px red,0 0 1em blue,0 0 0.2em blue; }
	66% { text-shadow:4px 4px 5px red,0 0 1em blue,0 0 0.2em blue; }
	33% { text-shadow:1px 1px 2px red,0 0 1em blue,0 0 0.2em blue; }
	}

.countdownClock {
	width: 25vw;
	padding-top: 1px;
	}
.countdownClock > legend {
	border-top: 1px black solid;
	border-bottom: 1px black solid;
	margin-left: 1em;
	margin-right: 1em;
	padding: 0.2em 0.8em;
	color: black;
	font-size: 20px;
	font-size: 1vw;
	padding: 2px 2px 2px 2px;
	background-color: rgba(255,174,0,0.8);
	}
.countdownClock > legend:hover {
	background-color: rgba(255,174,0,1.0);
	}
.countdownClock > div {
	text-align: center;
	font-size: 14px;
	font-size: 1vw;
	}
#tilRegionals {
	margin-top: 1vw;
	font-size: 40px;
	font-size: 2vw;
	}
#tilNationals {
	margin-top: 1vw;
	font-size: 40px;
	font-size: 2vw;
	}

.logoPos {
	position: absolute;
	top: 0.5vw;
	left: 0.5vw;
	width: 5vw;
	height: 5vw;
	z-index: 999999;
	}

/* Spin the male skater - make this the same as layer3 */
.mspin:hover {
	position: absolute;
	top: 55%;
	left: 50%;
	width: 50vh;
	height: 50vh;
	animation: mspin 1s ease-in-out infinite;
	}
@keyframes mspin {
	from {	transform: translate(-80%, -50%) rotateY(180deg); }
	to {	transform: translate(-80%, -50%) rotateY(-180deg); }
	}
/* Spin the female skater - make this the same as layer4 */
.fspin:hover {
	position: absolute;
	top: 50%;
	right: 50%;
	width: 50vh;
	height: 50vh;
	animation: fspin 1s ease-in-out infinite;
	}
@keyframes fspin {
	from {	transform: translate(80%, -50%) rotateY(360deg); }
	to {	transform: translate(80%, -50%) rotateY(0deg); }
	}

/* For outer ring */
.rotateZ { animation: rotationZ 60s linear infinite; }
@keyframes rotationZ {
	from { transform:translate(-50%,-50%) rotateZ(0deg); }
	to   { transform:translate(-50%,-50%) rotateZ(-360deg); }
	}

/* For inner ring */
.rotateZ1 { animation: rotationZ1 70s linear infinite; }
@keyframes rotationZ1 {
	from { transform:translate(-50%,-50%) rotateZ(-360deg); }
	to   { transform:translate(-50%,-50%) rotateZ(0deg); }
	}

/* For outer ring to fade from red to blue */
.fader1 { animation: fading1 10s ease-in-out infinite, rotationZ 60s linear infinite; }
@keyframes fading1 {
	100% { opacity: 0.2 }
	80%  { opacity: 0.8 }
	60%  { opacity: 1.0 }
	40%  { opacity: 0.8 }
	20%  { opacity: 0.2 }
	0%   { opacity: 0.2 }
	}
.fader2 { animation: fading2 10s ease-in-out infinite, rotationZ 60s linear infinite; }
@keyframes fading2 {
	100% { opacity: 0.8 }
	80%  { opacity: 0.2 }
	60%  { opacity: 0.0 }
	40%  { opacity: 0.2 }
	20%  { opacity: 0.8 }
	0%   { opacity: 1.0 }
	}

.innerLabel {
	position: absolute;
	bottom: 20%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 999999;
	color: #fb8500;
	font-size: 30px;
	font-weight: 900;
	font-family: cursive;
	opacity: 0.0;
	animation: bevisible 3s linear 10s 1 forwards;
	animation: befader 3s ease-in-out 13s infinite;
	}
@keyframes bevisible {
	0%   { opacity: 0.0 }
	100% { opacity: 1.0 }
	}
@keyframes befader {
	0%   { opacity: 1.0 }
	50%  { opacity: 0.5 }
	100% { opacity: 1.0 }
	}