@charset "UTF-8";

	/* 
		-:[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]:-
	
		xy.css : home page
		   design : monzilla media @ https://monzillamedia.com/
		   design : copyright xy.css : all rights reserved.
	
		-:[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]::[+]:-
	*/

	body { height: 100%; overflow-x: hidden;
		/* xy matrix */
		background-image: url(../img/grid.gif);
		background-color: transparent;
		background-attachment: fixed;
		}
		a {
			text-decoration: none; cursor: pointer; cursor: hand;
			-webkit-transition-property: color; -moz-transition-property: color; transition-property: color;
			-webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s;
			}
			a:link, a:visited { color: rgba(255,255,255,0.8); }
			a:hover, a:active { color: rgba(255,255,255,1.0); }

			li:nth-child(1) a { background-color: rgba(204,153,102,0.77); }
			li:nth-child(2) a { background-color: rgba(204,204,102,0.77); }
			li:nth-child(3) a { background-color: rgba(255,102,0,  0.77); }
			li:nth-child(4) a { background-color: rgba(204,204,153,0.77); }
			li:nth-child(5) a { background-color: rgba(255,153,51, 0.77); }
			li:nth-child(6) a { background-color: rgba(153,153,102,0.77); }
			li:nth-child(7) a { background-color: rgba(204,153,51, 0.77); }
			li:nth-child(8) a { background-color: rgba(255,204,51, 0.77); }

			li:nth-child(1) a:hover { background-color: rgba(204,153,102,0.88); }
			li:nth-child(2) a:hover { background-color: rgba(204,204,102,0.88); }
			li:nth-child(3) a:hover { background-color: rgba(255,102,0,  0.88); }
			li:nth-child(4) a:hover { background-color: rgba(204,204,153,0.88); }
			li:nth-child(5) a:hover { background-color: rgba(255,153,51, 0.88); }
			li:nth-child(6) a:hover { background-color: rgba(153,153,102,0.88); }
			li:nth-child(7) a:hover { background-color: rgba(204,153,51, 0.88); }
			li:nth-child(8) a:hover { background-color: rgba(255,204,51, 0.88); }

	h1 { 
		position: absolute; top: 50%; left: 50%; height: 0; width: 0; 
		font-size: 5.0em; text-shadow: none !important;
		}
		h1 a {
			background-color:    rgba(204,0,0,0.77);
			background-image:    url(../img/bg01.png), url(../img/bg02.png);
			background-position: center 11px, 0 100px;
			background-repeat:   no-repeat, repeat-x;
	
			position: relative; z-index: 999; top: -216px; left: -216px; 
			display: block; height: 432px; width: 432px; line-height: 400px; font-weight: bold; text-align: center;
			border-radius: 216px; -moz-border-radius: 216px; -webkit-border-radius: 216px; -khtml-border-radius: 216px;
			/* box-shadow: 0 0 11px #777; -moz-box-shadow: 0 0 11px #777; -webkit-box-shadow: 0 0 11px #777; -khtml-box-shadow: 0 0 11px #777; @bug:Webkit(hover) */
			}
			h1 a:hover {
				top: -225px; left: -225px; width: 450px; height: 450px;
				border-radius: 225px; -moz-border-radius: 225px; -webkit-border-radius: 225px; -khtml-border-radius: 225px;
				}
				h1 a span { /* @ xy.js : xycss_swap_text() */
					position: absolute; top: 132px; left: 5%; width: 90%; line-height: 48px; font-size: 48px;
					}
					h1 a:hover span {
						top: 168px;
						}

@media all and (min-width: 600px) {

	ul {
		position: absolute; width: 100%; height: 100%; margin-left: 0;
		list-style-type: none; font-size: 1.5em; /* 18px */
		}
		ul li {
			position: absolute; top: 50%; left: 50%; height: 0; width: 0;
			list-style-type: none;
			}
			li:nth-child(1) { top: 14%; }
			li:nth-child(2) { top: 24.5%; left: 75.5%; }
			li:nth-child(3) { left: 86%; }
			li:nth-child(4) { top: 75.5%; left: 75.5%; }
			li:nth-child(5) { top: 86%; }
			li:nth-child(6) { top: 75.5%; left: 24.5%; }
			li:nth-child(7) { left: 14%; }
			li:nth-child(8) { top: 24.5%; left: 24.5%; }

			li a {
				position: relative; z-index: 999; top: -126px; left: -126px; 
				display: block; height: 252px; width: 252px; line-height: 248px; font-weight: bold; text-align: center;
				border-radius: 126px; -moz-border-radius: 126px; -webkit-border-radius: 126px; -khtml-border-radius: 126px;
				/* box-shadow: 0 0 7px rgba(0,0,0,0.3); -moz-box-shadow: 0 0 7px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.3); -khtml-box-shadow: 0 0 7px rgba(0,0,0,0.3); @bug:Webkit(hover) */
				}
				li a:hover { 
					top: -135px; left: -135px; height: 270px; width: 270px; 
					border-radius: 135px; -moz-border-radius: 135px; -webkit-border-radius: 135px; -khtml-border-radius: 135px;
					}
					li a span { /* @ xy.js : xycss_swap_text() */
						position: absolute; top: 100px; left: 3%; width: 94%; line-height: 24px;
						}
						li a:hover span {
							top: 109px;
							}

	p { 
		position: fixed; z-index: 9999; left: 0; bottom: 0; font-size: 0.9em; color: rgba(0,0,0,0.0); /* rgba(0,0,0,0.3); */ margin: 0.75em; 
		}
		p a:link, p a:visited { color: rgba(0,0,0,0.0); /* rgba(0,0,0,0.3); */ }
		p a:hover, p a:active { color: rgba(0,0,0,0.7); }

}

@media all and (max-width: 599px) {

	body { padding-bottom: 650px; }

	h1 { position: fixed; top: 72px; left: 120px; }

	ul   { 
		position: absolute; z-index: 999; top: 180px; width: 100%; margin: 0; list-style-type: none; 
		box-shadow: 0 0 11px rgba(0,0,0,0.7); -moz-box-shadow: 0 0 11px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 11px rgba(0,0,0,0.7); -khtml-box-shadow: 0 0 11px rgba(0,0,0,0.7);
		}
		li { 
			width: 100%; list-style-type: none; 
			font-weight: bold; font-size: 1.167em; line-height: 1.286; /* 14px */
			}
			li a { display: block; padding: 1.286em; }
				li a span { font-weight: normal; }

	p { 
		position: fixed; z-index: -999; bottom: 0.8182em; left: 0.8182em; 
		font-size: 0.9167em; line-height: 1.6364; margin: 0; /* 11px */ 
		}
		p a:link, p a:visited, p a:hover, p a:active { color: rgba(0,0,0,0.2); }

	#browser-size { display: none; /* xy.js @ xycss_dynamic_browser_size() */ }

}

#twitter_link[style] { right: 18px !important; }

/* all your code are belong to poetry */