@font-face {
    font-family: 'FuturaBoldOblique';
    src: url('rsrc/fonts/FuturaBoldOblique.eot');
    src: url('rsrc/fonts/FuturaBoldOblique.eot?#iefix') format('embedded-opentype'),
         url('rsrc/fonts/FuturaBoldOblique.woff2') format('woff2'),
         url('rsrc/fonts/FuturaBoldOblique.woff') format('woff'),
         url('rsrc/fonts/FuturaBoldOblique.ttf') format('truetype'),
         url('rsrc/fonts/FuturaBoldOblique.otf') format('otf'),
         url('rsrc/fonts/FuturaBoldOblique.svg#Futura-BoldOblique') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'YoungSerif';
    src: url('rsrc/fonts/YoungSerif-Regular.eot');
    src: url('rsrc/fonts/YoungSerif-Regular.eot?#iefix') format('embedded-opentype'),
        url('rsrc/fonts/YoungSerif-Regular.woff2') format('woff2'),
        url('rsrc/fonts/YoungSerif-Regular.woff') format('woff'),
        url('rsrc/fonts/YoungSerif-Regular.ttf') format('truetype'),
        url('rsrc/fonts/YoungSerif-Regular.svg#YoungSerif-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CurvedSquare';
    src: url('rsrc/fonts/CurvedSquare.eot');
    src: url('rsrc/fonts/CurvedSquare.eot?#iefix') format('embedded-opentype'),
        url('rsrc/fonts/CurvedSquare.woff2') format('woff2'),
        url('rsrc/fonts/CurvedSquare.woff') format('woff'),
        url('rsrc/fonts/CurvedSquare.ttf') format('truetype'),
        url('rsrc/fonts/CurvedSquare.otf') format('otf'),
        url('rsrc/fonts/CurvedSquare.svg#CurvedSquare') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FrostbiteWide';
    src: url('rsrc/fonts/FROSTBITEWide-Regular.eot');
    src: url('rsrc/fonts/FROSTBITEWide-Regular.eot?#iefix') format('embedded-opentype'),
        url('rsrc/fonts/FROSTBITEWide-Regular.woff2') format('woff2'),
        url('rsrc/fonts/FROSTBITEWide-Regular.woff') format('woff'),
        url('rsrc/fonts/FROSTBITEWide-Regular.ttf') format('truetype'),
        url('rsrc/fonts/FROSTBITEWide-Regular.svg#FROSTBITEWide-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}







/* ----------------------------------------------
 * Generated by Animista on 2018-9-26 10:26:2
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
@-webkit-keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity:0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity:1
    }
}

@keyframes slide-in-top {
    0% {
        -webkit-transform: translateY(-1000px);
        transform: translateY(-1000px);
        opacity:0
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}


/* =========================================================================
	PAGE WEB
   ========================================================================= */

	/* ------------------------------------
		COMMON
	   ------------------------------------ */

	   body
	   {
	   		margin:0;
	   		padding:0;
	   }

	   h2
	   {
	   		font-family: FrostbiteWide, "arial";
	   		color: white;
	   		font-size: 32px;
	   		text-align: right;
	   }

	   #dateTimeContainer
	   {
	   		/* Universal Horizontal & Vertical Align */
	   		margin: 0;
  			position: absolute;
  			top: 50%;
  			left: 50%;
  			-ms-transform: translate(-50%, -50%);
  			transform: translate(-50%, -50%);
	   }

	   #time
	   {

	   }

	   #date
	   {

	   }

	   #week
	   {

	   }

	/* ------------------------------------
		80'S DEV
	   ------------------------------------ */

	   body.EightysDEV
	   {
	   		background-color: black;
	   }

	   .EightysDEV header
	   {
	   		position: fixed;
	   		top:20px;
	   		left: 10px;

	   		margin: 0;
	   		padding: 0;
	   		
	   		height: 80px;
	   		width: 80px;

	   		background-color: white;

	   		text-align: center;
	   }

	   		.EightysDEV header h1
	   		{
	   			font-family: YoungSerif;
	   			font-size: 20px;
	   			position: absolute;
	   			bottom: 0;
	   			margin: 0;
	   			padding: 0;
	   			padding-left: 2px;
	   			padding-bottom: 2px;

	   			text-align: center;
	   			text-transform: lowercase;
	   		}

	   .EightysDEV #dateTimeContainer
	   {
	   		/* Text */
  			font-family: FuturaBoldOblique, "arial"; /* Font Canal */
		    font-weight: bold;
		    color: black;
		    text-decoration: none;

		    /* Background */
		    background-color: white;
	   }

	   .EightysDEV #time
	   {
  			/* Position */
	   		text-align: center;
	   		padding-right: 2vw; /* bad correct */

	   		/* Text */
	   		font-size: 24vw;

	   		/* Space between the numbers*/
	   		letter-spacing: -0.75vw;
	   		/*font-variant: no-common-ligatures proportional-nums;*/

	   		/* Background */
	   		background-color: #ffc715; /* orange-yellow */

	   }

	   .EightysDEV #date
	   {
	   		/* Position */
  			text-align: right;
  			padding-right: 2vw;

  			/* Text */
  			font-size: 4vw;
  			text-transform: uppercase;

  			/* Background */
  			background-color: #fe4519; /* soft red */
	   }

	   .EightysDEV #week
	   {
	   		/* Position */
  			text-align: right;
  			padding-right: 2vw;

  			/* Text */
  			font-size: 3vw;
  			text-transform: uppercase;

  			/* Background */
  			background-color: #c81b9b; /* purple */
	   }

	/* ------------------------------------
		MinimalDark
	   ------------------------------------ */

	   body.MinimalDark
	   {
	   		background-color: black;
	   }

	   .MinimalDark header
	   {
	   		position: fixed;
	   		top:20px;
	   		left: 10px;

	   		margin: 0;
	   		padding: 0;
	   		
	   		height: 80px;
	   		width: 80px;

	   		background-color: white;

	   		text-align: center;
	   }

	   		.MinimalDark header h1
	   		{
	   			font-family: YoungSerif;
	   			font-size: 20px;
	   			position: absolute;
	   			bottom: 0;
	   			margin: 0;
	   			padding: 0;
	   			padding-left: 2px;
	   			padding-bottom: 2px;

	   			text-align: center;
	   			text-transform: lowercase;
	   		}

	   .MinimalDark #dateTimeContainer
	   {
	   		/* Text */
  			font-family: FuturaBoldOblique, "arial"; /* Font Canal */
		    font-weight: bold;
		    color: white;
		    text-decoration: none;

		    /* Background */
		    background-color: black;
	   }

	   .MinimalDark #time
	   {
  			/* Position */
	   		text-align: center;
	   		padding-right: 2vw; /* bad correct */

	   		/* Text */
	   		font-size: 24vw;
	   		color: lightgray;

	   		/* Space between the numbers*/
	   		letter-spacing: -0.75vw;
	   		/*font-variant: no-common-ligatures proportional-nums;*/

	   		/* Background */
	   		background-color: black; /* orange-yellow */

	   		white-space: nowrap;

	   }

		   .MinimalDark #time .digit
		   {
		   		color: white;
		   }

		   .MinimalDark #time .digit.mm
		   {
		   		font-size: 16vw;
		   		letter-spacing: -0.35vw;
		   }

		   .MinimalDark #time .digit.ss
		   {
		   		font-size: 8vw;
		   		letter-spacing: 0vw;
		   		color: lightgray;
		   }



	   .MinimalDark #date
	   {
	   		/* Position */
  			text-align: center;
  			/*padding-right: 2vw;*/
  			padding-top: 1vw;

  			/* Text */
  			font-size: 4vw;
  			text-transform: uppercase;

  			/* Background */
  			background-color: black; /* soft red */
	   }

	   .MinimalDark #week
	   {
	   		/* Position */
	   		padding-top: 1vw;
  			text-align: center;
  			/*padding-right: 2vw;*/

  			/* Text */
  			font-size: 3vw;
  			text-transform: uppercase;
  			color: lightgray;

  			/* Background */
  			background-color: black; /* purple */
	   }

	/* ------------------------------------
		ThreeDMinimalDark
	   ------------------------------------ */

	   body.ThreeDMinimalDark
	   {
	   		background-color: black;
	   }

	   .ThreeDMinimalDark header
	   {
	   		position: fixed;
	   		top:20px;
	   		left: 10px;

	   		margin: 0;
	   		padding: 0;
	   		
	   		height: 80px;
	   		width: 80px;

	   		background-color: white;

	   		text-align: center;
	   }

	   		.ThreeDMinimalDark header h1
	   		{
	   			font-family: YoungSerif;
	   			font-size: 20px;
	   			position: absolute;
	   			bottom: 0;
	   			margin: 0;
	   			padding: 0;
	   			padding-left: 2px;
	   			padding-bottom: 2px;

	   			text-align: center;
	   			text-transform: lowercase;
	   		}

	   .ThreeDMinimalDark #dateTimeContainer
	   {
	   		/* Text */
  			font-family: FuturaBoldOblique, "arial"; /* Font Canal */
		    font-weight: bold;
		    color: white;
		    text-decoration: none;

		    /* Background */
		    background-color: black;
	   }

	   .ThreeDMinimalDark #time
	   {
  			/* Position */
	   		text-align: center;
	   		padding-right: 2vw; /* bad correct */

	   		/* Text */
	   		font-size: 24vw;
	   		text-shadow: 1vw 1vw gray;

	   		/* Space between the numbers*/
	   		letter-spacing: -0.75vw;
	   		/*font-variant: no-common-ligatures proportional-nums;*/

	   		/* Background */
	   		background-color: black; /* orange-yellow */

	   }

	   .ThreeDMinimalDark #date
	   {
	   		/* Position */
  			text-align: right;
  			padding-right: 2vw;

  			/* Text */
  			font-size: 4vw;
  			text-transform: uppercase;
  			text-shadow: 0.4vw 0.4vw gray;

  			/* Background */
  			background-color: black; /* soft red */
	   }

	   .ThreeDMinimalDark #week
	   {
	   		/* Position */
  			text-align: right;
  			padding-right: 2vw;

  			/* Text */
  			font-size: 3vw;
  			text-transform: uppercase;
  			text-shadow: 0.3vw 0.3vw gray;

  			/* Background */
  			background-color: black; /* purple */
	   }

	/* ------------------------------------
		MinimalSquareDark
	   ------------------------------------ */

	   body.MinimalSquareDark
	   {
	   		background-color: black;
	   }

	   .MinimalSquareDark header
	   {
	   		position: fixed;
	   		top:20px;
	   		left: 10px;

	   		margin: 0;
	   		padding: 0;
	   		
	   		height: 80px;
	   		width: 80px;

	   		background-color: white;

	   		text-align: center;
	   }

	   		.MinimalSquareDark header h1
	   		{
	   			font-family: YoungSerif;
	   			font-size: 20px;
	   			position: absolute;
	   			bottom: 0;
	   			margin: 0;
	   			padding: 0;
	   			padding-left: 2px;
	   			padding-bottom: 2px;

	   			text-align: center;
	   			text-transform: lowercase;
	   		}

	   .MinimalSquareDark #dateTimeContainer
	   {
	   		/* Text */
  			font-family: CurvedSquare, "arial"; /* Font Canal */
		    font-weight: bold;
		    color: white;
		    text-decoration: none;

		    /* Background */
		    background-color: black;
	   }

	   .MinimalSquareDark #time
	   {
  			/* Position */
	   		text-align: center;
	   		padding-right: 2vw; /* bad correct */

	   		/* Text */
	   		font-size: 20vw;

	   		/* Space between the numbers*/
	   		letter-spacing: -0.75vw;
	   		/*font-variant: no-common-ligatures proportional-nums;*/

	   		/* Background */
	   		background-color: black; /* orange-yellow */

	   }

	   .MinimalSquareDark #date
	   {
	   		/* Position */
  			text-align: right;
  			padding-right: 2vw;

  			/* Text */
  			font-family: FuturaBoldOblique, "arial";
  			font-size: 4vw;
  			text-transform: uppercase;

  			/* Background */
  			background-color: black; /* soft red */
	   }

	   .MinimalSquareDark #week
	   {
	   		/* Position */
  			text-align: right;
  			padding-right: 2vw;

  			/* Text */
  			font-family: FuturaBoldOblique, "arial";
  			font-size: 3vw;
  			text-transform: uppercase;

  			/* Background */
  			background-color: black; /* purple */
	   }