@font-face{
	font-family:"National";
	src: url("NationalTest-Light.woff") format("woff");
}

@font-face{
	font-family:"Pitch";
	src: url("PitchTest-Light.woff") format("woff");
}
@keyframes color1{ 
    0%{
        background-color:#DAD0E5; 
    }
    50%{
        background-color:#AEA8D5;
    }
    100%{
        background-color:#8B779A;
    }
}

@keyframes color2{ 
    0%{
        background-color:#6750F4; 
    }
    50%{
        background-color:#C4A6E5;
    }
    100%{
        background-color:#A7ACCF;
    }
}
@keyframes color3{ 
    0%{
        background-color:#AF4B5C; 
    }
    50%{
        background-color:#EBACA0;
    }
    100%{
        background-color:#FFADB2;
    }
}

@keyframes color4{ 
    0%{
        background-color:#BA3271; 
    }
    50%{
        background-color:#FA8873;
    }
    100%{
        background-color:#FAB2C0;
    }
}

@keyframes color5{ 
    0%{
        background-color:#B30100; 
    }
    50%{
        background-color:#C72A5B;
    }
    100%{
        background-color:#C27A7D;
    }
}

@keyframes color6{ 
    0%{
        background-color:#BF3A3A; 
    }
    50%{
        background-color:#B96F6F;
    }
    100%{
        background-color:#FF8383;
    }
}

@keyframes color7{ 
    0%{
        background-color:#D0384A; 
    }
    50%{
        background-color:#FA6F0F;
    }
    100%{
        background-color:#FCB600;
    }
}

@keyframes color8{ 
    0%{
        background-color:#E18929; 
    }
    50%{
        background-color:#E3B01E;
    }
    100%{
        background-color:#FAD87E;
    }
}
@keyframes color9{ 
    0%{
        background-color:#878D02; 
    }
    50%{
        background-color:#C9D207;
    }
    100%{
        background-color:#E9EA7C;
    }
}

@keyframes color10{ 
    0%{
        background-color:#4B9975; 
    }
    50%{
        background-color:#27B882;
    }
    100%{
        background-color:#96DB65;
    }
}

@keyframes color11{ 
    0%{
        background-color:#2F7700; 
    }
    50%{
        background-color:#28A873;
    }
    100%{
        background-color:#B5D2AE;
    }
}

@keyframes color12{ 
    0%{
        background-color:#0F524C; 
    }
    50%{
        background-color:#2F8280; 
    }
    100%{
        background-color:#30C5BF;
    }
}

@keyframes color13{ 
    0%{
        background-color:#12776C; 
    }
    50%{
        background-color:#33AF88;
    }
    100%{
        background-color:#9FF7DC;
    }
}

@keyframes color14{ 
    0%{
        background-color:#5864A7; 
    }
    50%{
        background-color:#88A9E3;
    }
    100%{
        background-color:#BBE5FA;
    }
}

@keyframes color15{ 
    0%{
        background-color:#8C8D8C; 
    }
    50%{
        background-color:#1D00E0;
    }
    100%{
        background-color:#3F5364;
    }
}

body{
	background-color:black;
    color:white;
}
 .page1{
    width: 100%;
    height:100%;
    position: fixed;
    z-index: 1000;
 }

.over{
	position: absolute;
	z-index: 10001;
	width:100%;
	height: 100%;
	margin:auto 0 auto 0;
}

.t1{
	opacity: 0.1;
}

.t2{
	opacity: 0.2;
}

.t3{
	opacity: 0.3;
}

.t4{
	opacity: 0.4;
}

.t5{
	opacity: 0.5;
}

.t6{
	opacity: 0.6;
}


.color1{ /*100-81 15*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color1;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;	
}
.color2{ /*80-61 14*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color2;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.color3{ /*60-51 13*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color3;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.color4{ /*50-41 12*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color4;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.color5{ /*40-31 11*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color5;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.color6{ /*30-26 10*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color6;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.color7{ /*25-21 9*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color7;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.color8{ /*20-16 8*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color8;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.color9{ /*15-11 7*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color9;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.color10{ /*10-6 6*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color10;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.color11{ /*5-1 5*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color11;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.color12{/*0--4 4*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color12;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.color13{/*-5--9 3*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color13;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.color14{/* -10--14 2*/
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color14;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

.color15{/*-15--20 1 */
	padding:0;
	margin:0;
	height:100%;
	width:100%;
	animation-name: color15;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}



/*ROW 1*//*/*//*/*
.r1c1{
    left:0px;
    top:0px;
}

.r1c2{
    left:15px;
    top:0px;
}

.r1c3{
    left:30px;
    top:0px;
}

.r1c4{
    left:45px;
    top:0px;
}

.r1c5{
    left:60px;
    top:0px;
}

.r1c6{
    left:75px;
    top:0px;
}

.r1c7{
    left:90px;
    top:0px;
}

.r1c8{
    left:105px;
    top:0px;
}

.r1c9{
    left:120px;
    top:0px;
}

.r1c10{
    left:135px;
    top:0px;
}

.r1c11{
    left:150px;
    top:0px;
}

.r1c12{
    left:165px;
    top:0px;
}

.r1c13{
    left:180px;
    top:0px;
}

.r1c14{
    left:195px;
    top:0px;
}

.r1c15{
    left:210px;
    top:0px;
}
/*
ROW 2*/
/*.r2c1{
    left:0px;
    top:15px;
}

.r2c2{
    left:15px;
    top:15px;
}

.r2c3{
    left:30px;
    top:15px;
}

.r2c4{
    left:45px;
    top:15px;
}

.r2c5{
    left:60px;
    top:15px;
}

.r2c6{
    left:75px;
    top:15px;
}

.r2c7{
    left:90px;
    top:15px;
}

.r2c8{
    left:105px;
    top:15px;
}

.r2c9{
    left:120px;
    top:15px;
}

.r2c10{
    left:135px;
    top:15px;
}

.r2c11{
    left:150px;
    top:15px;
}

.r2c12{
    left:165px;
    top:15px;
}

.r2c13{
    left:180px;
    top:15px;
}

.r2c14{
    left:195px;
    top:15px;
}

.r2c15{
    left:210px;
    top:15px;
}*/

/*ROW 3*/

/*.r3c1{
    left:0px;
    top:30px;
}

.r3c2{
    left:15px;
    top:30px;
}

.r3c3{
    left:30px;
    top:30px;
}

.r3c4{
    left:45px;
    top:30px;
}

.r3c5{
    left:60px;
    top:30px;
}

.r3c6{
    left:75px;
    top:30px;
}

.r3c7{
    left:90px;
    top:30px;
}

.r3c8{
    left:105px;
    top:30px;
}

.r3c9{
    left:120px;
    top:30px;
}

.r3c10{
    left:135px;
    top:30px;
}

.r3c11{
    left:150px;
    top:30px;
}

.r3c12{
    left:165px;
    top:30px;
}

.r3c13{
    left:180px;
    top:30px;
}

.r3c14{
    left:195px;
    top:30px;
}

.r3c15{
    left:210px;
    top:30px;
}
*/