/* Author: Jordan Randleman */

/* GRADIENT OPTIONS CSS*/

.rainbowText {
	background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
	background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
	color:transparent;
	-webkit-background-clip: text;
	background-clip: text;
}
#backgroundgrad { /* USE => id="backgroundgrad1" */
    background-color: violet; /* For browsers that do not support gradients */
    background-image: linear-gradient(violet, lime); /* Standard syntax (must be last) */
}

/*SPINNING STAR CSS*/

/* 5-POINTED */
.spinning3DStar5, .spinning3DStar8, .spinning3DStar12 {
	animation-name: spinning3DText, depth3DText;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	transform-style: preserve-3d;
	position: relative;
	font-weight: bold;
	font-size: 85.5px;
	font-family:georgia;
	margin-top:-5px;
}
.spinning3DStar5::before,
.spinning3DStar5::after {
	content: "\272D";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
/* 8-POINTED */
.spinning3DStar8::before,
.spinning3DStar8::after {
	content: "\2738";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
/* 12-POINTED */
.spinning3DStar12::before,
.spinning3DStar12::after {
	content: "\2739";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
.spinning3DStar5::after, .spinning3DStar8::after, .spinning3DStar12::after { transform: rotateY(-0.5deg);transform-origin: 100% 50%; }

/*SPINNING SUDOKU CSS*/

/* 1 */
.spinning3DSud1, .spinning3DSud2, .spinning3DSud3, 
.spinning3DSud4, .spinning3DSud5, .spinning3DSud6, 
.spinning3DSud7, .spinning3DSud8, .spinning3DSud9 {
	animation-name: spinning3DText, depth3DText;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	transform-style: preserve-3d;
	position: relative;
	font-weight: bold;
	font-size: 85.5px;
	font-family:arial;
	margin-top:-5px
}
.spinning3DSud1::before,
.spinning3DSud1::after {
	content: "1";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
/* 2 */
.spinning3DSud2::before,
.spinning3DSud2::after {
	content: "2";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
/* 3 */
.spinning3DSud3::before,
.spinning3DSud3::after {
	content: "3";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
/* 4 */
.spinning3DSud4::before,
.spinning3DSud4::after {
	content: "4";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
/* 5 */
.spinning3DSud5::before,
.spinning3DSud5::after {
	content: "5";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
/* 6 */
.spinning3DSud6::before,
.spinning3DSud6::after {
	content: "6";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
/* 7 */
.spinning3DSud7::before,
.spinning3DSud7::after {
	content: "7";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
/* 8 */
.spinning3DSud8::before,
.spinning3DSud8::after {
	content: "8";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
/* 9 */
.spinning3DSud9::before,
.spinning3DSud9::after {
	content: "9";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
.spinning3DSud1::after, .spinning3DSud2::after, .spinning3DSud3::after, 
.spinning3DSud4::after, .spinning3DSud5::after, .spinning3DSud6::after, 
.spinning3DSud7::after, .spinning3DSud8::after, .spinning3DSud9::after { transform: rotateY(-0.5deg);transform-origin: 100% 50%; }

/*SPINNING CUBE CSS*/

.cube {
	position: relative;
	width: 75px;
	
	-webkit-transform-style: preserve-3d;
	-webkit-animation: cube-spin 5s infinite linear;
	
	-moz-transform-style: preserve-3d;
	-moz-animation: cube-spin 5s infinite linear;

	-ms-transform-style: preserve-3d;
	-ms-animation: cube-spin 5s infinite linear;

	transform-style: preserve-3d;
	animation: spin 5s infinite linear;
}
.cube div {
	position: absolute;
	width: 60px;
	height: 60px;
	background: rgba(255,255,0,0.15); /* BACKGROUND */
	box-shadow: inset 0 0 7.5px rgba(255,255,0,1); /* EDGES */
}
.wrap { perspective: 800px;perspective-origin: 50% 200px; }
.back { transform: translateZ(-30px) rotateY(180deg); }
.right { transform: rotateY(-270deg) translateX(30px);transform-origin: top right; }
.left { transform: rotateY(270deg) translateX(-30px);transform-origin: center left; }
.top { transform: rotateX(-90deg) translateY(-30px);transform-origin: top center; }
.bottom { transform: rotateX(90deg) translateY(30px);transform-origin: bottom center; }
.front { transform: translateZ(30px); }
@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
}

/* NGMA SPINNING TITLE CSS */

.spinning3DText {
	animation-name: spinning3DText, depth3DText;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 3s; 
	transform-style: preserve-3d;
	margin-top:13px;
	margin-bottom:14px; 
	position: relative;
	font-weight: bold;
	font-style:italic;
	font-size: 72.75px;
	font-family:georgia;
}
.spinning3DText::before,
.spinning3DText::after {
	content: "Ngma";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
.spinning3DText::after { transform: rotateY(-0.5deg);transform-origin: 100% 50%; }
@keyframes spinning3DText {
	from { transform: rotateY(0deg); }
	to { transform: rotateY(-360deg); }
}
@keyframes depth3DText {
	0% { text-shadow: 0 0 yellow; }
	25% { text-shadow: 1px 0 yellow, 2px 0 yellow, 3px 0 yellow, 4px 0 yellow, 5px 0 yellow, 6px 0 yellow, 7px 0 yellow, 8px 0 yellow, 9px 0 yellow, 10px 0 yellow, 11px 0 yellow; }
	50% { text-shadow: 0 0 yellow; }
	75% { text-shadow: -1px 0 yellow, -2px 0 yellow, -3px 0 yellow, -4px 0 yellow, -5px 0 yellow, -6px 0 yellow, -7px 0 yellow, -8px 0 yellow, -9px 0 yellow, -10px 0 yellow, -11px 0 yellow; }
	100% { text-shadow: 0 0 yellow; }
}
.spinning3DText02 {
	animation-name: spinning3DText, depth3DText;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 3s; 
	transform-style: preserve-3d;
	margin-top:13px;
	margin-bottom:14px; 
	position: relative;
	font-weight: bold;
	font-style:italic;
	font-size: 72.75px;
	font-family:georgia;
}
.spinning3DText02::before,
.spinning3DText02::after {
	content: "\03BD\0393\03BC\41";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
.spinning3DText02::after { transform: rotateY(-0.5deg);transform-origin: 100% 50%; }

/*GENERAL CSS*/

.hovColor:hover, .hovColor:active {color: black;background:orange;}
.hovColor2:hover, .hovColor2:active {color: black;background:paleturquoise;font-style:italic;}
.hovColor3:hover, .hovColor3:active {color: black;background:paleturquoise;font-style:italic;}
#line {
	-webkit-transform:rotate(90deg);
	width: 3px;
	height: 150px;
	background: lime;
	margin: 20px auto 0 auto;
}
#lineBox { border:8px double #F5F;margin-left:155px;margin-right:155px;margin-bottom:20px; }
#lineBox2 { border:8px double #F5F;padding-bottom:15px; }
#lineT { text-align:center;color:lime;font-size:30px;font-weight:bold;font-family:Prosto One; }
#spinning3DText2 {
	animation-name: spinning3DText2, depth3DText2;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	transform-style: preserve-3d;
	position: relative;
	font-weight: bold;
	font-style:italic;
	font-size: 82.5px;
	font-family:georgia;
}
#spinning3DText2::before,
#spinning3DText2::after {
	content: "\2374\2113";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
#spinning3DText2::after { transform: rotateY(-0.5deg);transform-origin: 100% 50%; }
@keyframes spinning3DText2 {
	from { transform: rotateY(0deg); }
	to { transform: rotateY(-360deg); }
}
@keyframes depth3DText2 {
	0% { text-shadow: 0 0 yellow; }
	25% { text-shadow: 1px 0 yellow, 2px 0 yellow, 3px 0 yellow, 4px 0 yellow, 5px 0 yellow, 6px 0 yellow, 7px 0 yellow, 8px 0 yellow, 9px 0 yellow, 10px 0 yellow, 11px 0 yellow; }
	50% { text-shadow: 0 0 yellow; }
	75% { text-shadow: -1px 0 yellow, -2px 0 yellow, -3px 0 yellow, -4px 0 yellow, -5px 0 yellow, -6px 0 yellow, -7px 0 yellow, -8px 0 yellow, -9px 0 yellow, -10px 0 yellow, -11px 0 yellow; }
	100% { text-shadow: 0 0 yellow; }
}
#spinning3DText3 {
	animation-name: spinning3DText3, depth3DText3;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	transform-style: preserve-3d;
	position: relative;
	font-weight: bold;
	font-style:italic;
	font-size: 123px; 
	font-family:georgia;
	cursor:help;
}
#spinning3DText3::before,
#spinning3DText3::after {
	content: "?";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	transform: rotateY(0.5deg);
	transform-origin: 0 50%;
}
#spinning3DText3::after { transform: rotateY(-0.5deg);transform-origin: 100% 50%; }
@keyframes spinning3DText3 {
	from { transform: rotateY(0deg); }
	to { transform: rotateY(-360deg); }
}
@keyframes depth3DText3 {
	0% { text-shadow: 0 0 yellow; }
	25% { text-shadow: 1px 0 yellow, 2px 0 yellow, 3px 0 yellow, 4px 0 yellow, 5px 0 yellow, 6px 0 yellow, 7px 0 yellow, 8px 0 yellow, 9px 0 yellow, 10px 0 yellow, 11px 0 yellow; }
	50% { text-shadow: 0 0 yellow; }
	75% { text-shadow: -1px 0 yellow, -2px 0 yellow, -3px 0 yellow, -4px 0 yellow, -5px 0 yellow, -6px 0 yellow, -7px 0 yellow, -8px 0 yellow, -9px 0 yellow, -10px 0 yellow, -11px 0 yellow; }
	100% { text-shadow: 0 0 yellow; }
}
#zoomInNOutText {
	animation-name: spinning3DText2, depth3DText2;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 2s;
	transition-duration: 1s;
	position: relative;
	font-size: 106px;
	font-family:georgia;
	animation-direction:alternate;
	-webkit-animation-name: grow;
}
@keyframes grow {
    from { transform:scale(0.5); }
    to { transform:scale(1.2); }
}
.fadeOut {
    animation: fadeout 3s;
    -moz-animation: fadeout 3s;
    -webkit-animation: fadeout 3s;
    -o-animation: fadeout 3s;
}
@keyframes fadeout {
    from { opacity:1; }
    to { opacity:0; }
}
@-moz-keyframes fadeout { /* Firefox */
    from { opacity:1; }
    to { opacity:0; }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from { opacity:1; }
    to { opacity:0; }
}
@-o-keyframes fadeout { /* Opera */
    from { opacity:1; }
    to { opacity:01; }
}
.animated_div {
	text-align:center;
	font-weight:bold;
	font-size:35px;
	-webkit-transition:font-size .75s;
	-o-transition-property:font-size;
	-moz-transition-property:font-size;
	transition-property:font-size;
}
.animated_div:hover { font-size:37.5px; }
.animated_div1 {
	text-align:center;
	font-weight:bold;
	font-size:36.5px;
	-webkit-transition:font-size .75s;
	-o-transition-property:font-size;
	-moz-transition-property:font-size;
	transition-property:font-size;
}
.animated_div1:hover { font-size:39px; }
.dCanvas {
	width:300;
	height:300;
	position:relative;
	left:50%;
	z-index:2;
	margin-top:-14px;
}
.a9Canvas {
	width:420;
	height:420;
	position:relative;
	right:50%;
	z-index:1;
	background:black;
}
.banner {
	font-style:italic;
	padding:20px;
	color:orange;
	font-family:Homenaje;
}
.banner2 { padding:20px;color:paleturquoise;font-family:Racing Sans One; }
.pageTitle {
	padding:0;
	border:none;
	text-align:center;
	background-color:black;
	font-weight:bold;
	font-size:42px;
	text-decoration: underline;
	font-family:Orbitron;
	color:yellow;
}
.title {
	padding:0;
	border:none;
	background-color:black;
	font-family:Gugi;
	color:yellow;
}
.pageSubtitle { 
	text-align:center;
	font-size:35px;
	font-style:italic;
	font-family:Prosto One;
}
.starSubtitle {
	text-align:center;
	font-size:25px;
	font-style:italic;
	font-family:Prosto One;
}
.subtitle {
	text-align:center;
	font-size:22px;
	font-style:italic;
	font-family:Orbitron;
}
.ngmaTextConversion { 
	text-align:center;
	color:lime;
	font-family:Arial;
	font-weight:bold;
	font-size:35px; 
	font-style:italic;
	cursor:copy;
}
.ngmaText {
	text-align:center;
	color:lime;
	font-family:Arial;
	font-weight:bold;
	font-size:35px; 
	font-style:italic;
}
.ngmaText1 { text-align:center;font-family:Arial;font-weight:bold; }
.ngmaText2 {
	text-align:center;
	font-family:Arial;
	font-weight:bold;
	font-size:20px;
	text-decoration:underline overline;
	font-style:italic;
}
.ngmaText3 {
	text-align:center;
	font-family:Arial Black;
	font-size:40px;
	font-weight:bold;
}
.ngmaText4 {
	text-align:center;
	font-family:Arial;
	font-weight:bold;
	font-size:30px;
	text-decoration:underline overline;
	font-style:italic;
}
.column0 { 
    text-align:center;
    width: 45%;
    padding: 10px;
    color:yellow;
}
.columnS {
	text-align:center;
	float:left;
    width: 20%;
    padding: 15px;
    color:yellow;
    margin-left:10px;
}
.column1 {
    float: left;
    width: 45%;
    padding: 10px;
    color:yellow;
}
.column2 {
	text-align:center;
    float: right;
    width: 45%;
    padding: 10px;
    color:yellow;
}
.column111 {
    float: left;
    width: 36.25%;
    padding: 15px;
    color:yellow;
}
.column222 {
	text-align:center;
    float: right;
    width: 36.25%;
    padding: 15px;
    color:yellow;
}
.column3 {
	text-align:center;
    float: left;
    width: 50%;
    color:yellow;
}
.column4 {
	text-align:center;
    float: right;
    width: 50%;
    color:yellow;
}
.row:after { content: "";display: table;clear: both; }
#drawButton, #redrawButton {
	border-radius: 50%;
	font-weight:bold;
	background:black;
	border:black;
	font-size:70px;
	color:yellow;
	cursor:pointer;
}
#redrawButton { padding-left:12px;padding-right:12px; }
#drawButton:hover, #redrawButton:hover { color:black;background:yellow; }
.pageInput { 
	border-radius: 20px;
	color: black;
	font-size: 17px;
	padding:3px;
	background-color:yellow;
}
.pageButton { 
	border-radius: 20px;
	color: black;
	font-size: 16px;
	padding:3px;
	background-color:yellow;
	cursor:pointer;
}
.button {
	border-radius: 20px;
	color: black;
	font-size: 15px;
	background-color:yellow;
}
.button2 {
	padding:0px;
	border:none;
	background-color:black;
	font-style:italic;
	font-family:Homenaje;
	font-weight:bold;
	color:orange;
}
.button3 {
	padding:0px;
	border:none;
	background-color:black;
	font-family:Sonsie One;
	font-weight:bold;
	color:paleturquoise;
}
.tutIconButton {
	border-radius: 50%;
	border: 3px solid orange;
	color:orange;
	padding:5px;
	text-decoration:none;
	background-color:black;
	font-size:29.1666666px;
}
.proResBtn {
	border-radius: 50%;
	border: 5px solid orange;
	color:orange;
	padding:5px;
	background-color:black;
	text-decoration:none;
	font-size:55px;
}
.proResBtn1 {
	border-radius: 50%;
	border: 5px solid orange;
	color:orange;
	padding:5px;
	background-color:black;
	text-decoration:none;
	font-size:45.8333333px; 
}
.tutIconButton:hover, .proResBtn:hover, .proResBtn1:hover { color:black;background-color:orange;cursor:pointer; }
.resButton {
	border-radius: 20px;
	color: black;
	font-size: 18px;
	background-color:#F9ED4B;
	padding:5px;
	font-family:arial;
}
.resButton:hover { font-style:italic;font-weight:bold; }
.pdfButton {
	border-radius: 20px;
	color: black;
	font-size: 12.5px;
	font-weight:bold;
	background-color:orange;
	padding:5px;
	font-family:Prosto One;
}
.numbersButton1 {
	border-radius: 20px;
	color: black;
	font-size: 12.5px;
	font-weight:bold;
	background-color:yellow;
	padding:5px;
	font-family:Prosto One;
}
.numbersButton {
	border-radius: 20px;
	color: black;
	font-size: 15px;
	font-weight:bold;
	background-color:yellow;
	padding:5px;
	font-family:Prosto One;
}
.starButton {
	border-radius: 20px;
	color: black;
	font-size: 16px;
	font-weight:bold;
	background-color:yellow;
	padding:3px;
	font-family:Arial;
}
.starButton:hover { font-style:italic;cursor:pointer; }
.starLinkButton { 
	border-radius: 25px;
	color: black;
	font-family:Prosto One;
	font-size: 20px;
	background-color:yellow;
	font-weight:bold;
	padding:4px;
}
.pageInput:hover, .pageButton:hover, .button:hover, 
.pdfButton:hover, .numbersButton1:hover, .numbersButton:hover, .starLinkButton:hover  { font-style:italic; }
.returnButton {
	border-radius: 50%;
	border: 2px solid #F9ED4B;
	color:#F9ED4B;
	padding:5px;
	font-family:arial;
	text-decoration:none;
	background-color:black;
}
.returnButton:hover { color:black;background-color:#F9ED4B;border: 2px solid #F9ED4B; }
.iconButton, .niconButton, .perIconButton {
	border-radius:20px;
	color:#F9ED4B;
	font-size:35px;
	font-family:arial;
	text-decoration:none;
	background-color:black;
	border: 2px solid #F9ED4B;
	padding:8px;
}
.iconButton:hover { background-color:#F9ED4B;color:black;font-weight:bold; }
.niconButton:hover {
	background-color:#F9ED4B;
	text-decoration:underline;
	color:black;
	font-weight:bold;
}
.perIconButton:hover {
	background-color:#F9ED4B;
	color:black;
	font-style:italic;
	font-size:31px;
	padding:10px;
}
.blackout { color:black;visibility:hidden; }
.blackLink { color:black;text-decoration:none; }
.df { cursor:default; }
.linkIt { color:#F9ED4B; }
.linkIt:hover { background:#F9ED4B;color:black; }