@charset "utf-8";   /*  RESET.CSS  */   /*  RESET.CSS  */   /*  RESET.CSS  */   /*  RESET.CSS  */   /*  RESET.CSS  */   /*  RESET.CSS  */   /*  RESET.CSS  */   /*  RESET.CSS  */   
/*******************************************************************************************************************************/
::selection {
	background-color: #000;
	color: #FFF;
}
::-moz-selection {
	background-color: #C02;
	color: #2FC;
}
/*******************************************************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    box-sizing: content-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
*, *::before, *::after {
    box-sizing: content-box;
}
/*******************************************************************************************************************************/
html {
    line-height: 1.15;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    box-sizing: content-box;
    z-index: 0;
}
body {
    width: 85vw;
    height: 100%;
	font-family: Arial, 'Times New Roman', sans-serif;
    background: transparent;
    margin: 0 auto;
	min-height: 100vh;
	z-index: 1;
}
ol, ul, li {
	list-style: none;
	list-style-type: none;
}
ol, ul, li, nav, .nav, nav ul  {
	white-space: nowrap;
}	
/*******************************************************************************************************************************/
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a, a:link, a:visited, a:active, a:hover,
a h1, a h2 {
   text-decoration: none;
}
img {
    max-width: 100%;
    border: 0;
}
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b,
strong {
    font-weight: bold;
}
dfn {
    font-style: italic;
}
/*******************************************************************************************************************************/
hr {
    display: block;
    box-sizing: content-box;
    height: .15vh;
    width: 100%;
    color: #000;
}
/*******************************************************************************************************************************/
mark {
    background: #FF0;
    color: #000;
}
code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1rem;
}
pre {
    white-space: pre-wrap;
}
q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5rem;
}
sub {
    bottom: -0.25rem;
}
/*******************************************************************************************************************************/
/***   FORMS   ***   FORMS   ***   FORMS   ***   FORMS   ***   FORMS   ***   FORMS   ***   FORMS   ***   
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
legend {
    border: 0;
    padding: 0; 
}
button,
input,
select,
textarea {
    font-family: inherit; 
    font-size: 100%; 
    margin: 0;
}
button,
input {
    line-height: normal;
}
button,
select {
    text-transform: none;
}
button,
html input[type="button"], 
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; 
    cursor: pointer; 
}
button[disabled],
html input[disabled] {
    cursor: default;
}
textarea {
    overflow: auto; 
    vertical-align: top; /
}
/*******************************************************************************************************************************/
header {
    text-align: center;
}
header, hgroup, section, article {
	width: 100%;
	margin: 0 auto;
	z-index: 2;
}
p {
	margin: 2.5%;
	font-size: calc((2rem + 2vw)/3.5);
    line-height: 1.5;
	text-indent: 7.5%;
	text-align: justify;
    text-align-last: auto;
}
/*******************************************************************************************************************************/
.clearfix::before,
.clearfix::after {
  content: ".";    
  display: table; 
  width: 0;   
  height: 0;
  border: 0;    
  overflow: hidden;        
}
.clearfix,
.clearfix::after {
  visibility: hidden;
  opacity: 0;
}
.clearfix {
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    border: 0;
	overflow: hidden;
    zoom: 1;
}
.clearfix::after {
  font-size: 0;
  clear: both;
  float: none;
}
.clear, .clear::after {
    display: flow-root;
}
.left, .leftcol, .leftside {
    float: left;
}
.central, .middle {
    clear: both;
    float: none;
    position: relative;
    text-align: center;
    margin: 0 auto;
}
.right, .rightcol, .rightside {
    float: right;
}
.red {
   color: #F00;    
}
.blue {
   color: #00F;
}
.green {
   color: #0F0;
}
/*******************************************************************************************************************************/
#top, .top, #bottom, .bottom {
	display: block;
	margin: 0 auto;
}
#top, #bottom, .top {
	position: relative;
}
.bottom {
	position: absolute;
}
#top, .top {
	top: 0;
}
#bottom, .bottom {
	bottom: 0;
}
/******************************************************************************************************************
#base {
    width: 100%;;
    height: 2rem;
    padding: 0;
    margin: 2rem auto;
    text-align: center;
    background-color: transparent;
    color: #000;
	dispaly: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
    z-index: 6;
}
#base a:link, #base a:visited {
    color: #000;
    text-shadow: 1px 1px 0 #0FC, -1px -1px 0 #F0C;
    text-align: center;
    margin: 0 auto;
    text-decoration: none;
}
#base a:hover {
    color: #FFF;
    text-shadow: 1px 1px 0 #F0C, -1px -1px 0 #0CF;
    text-align: cener;
    text-decoration: none;
}
#base a:active {
    background: linear-gradient(#999, #333);
    color: #F22;
    text-shadow: 2px 2px 1px #0FC, -2px -2px 1px #F0C;
}
/******************************************************************************************************************/
.point {
    text-decoration: underline;
}
.point:hover {
    cursor: pointer;
    color: #090;
    text-decoration: none;
}
.buf1, .buf2, .buf3, .buf4, .buf5, .buf6, .buf7, .buf8 {
    display: block;
    width: 100%;
    background-color: transparent;
}
.buf1 {
    height: 1rem;
}
.buf2 {
    height: 2rem;
}
.buf3 {
    height: 3rem;
}
.buf4 {
    height: 4rem;
}
.buf5 {
    height: 5rem;
}
.buf6 {
    height: 6rem;
}
.buf7 {
    height: 7rem;
}
.buf8 {
    height: 8rem;
}
.space1 {
    margin-bottom: 1rem;
}
.space2 {
    margin-bottom: 2rem;
}
.space3 {
    margin-bottom: 3rem;
}
.sp1, .sp2, .sp3, .sp4, .sp5, .sp6 {
    display: inline;
    background-color: transparent;
}
.sp1:after {
    content: "   ";
}
.sp2:after {
    content: "     ";
}
.sp3:after {
    content: "       ";
}
.sp4:after {
    content: "         ";
}
.sp5:after {
    content: "           ";
}
.sp6:after {
    content: "             ";
}
i, em {
    font-style: italic;
}
b, strong {
    font-weight: bolder;
}
/*******************************************************************************************************************************/
/******************   RETURN TO TOP   /******************   RETURN TO TOP  /******************   RETURN TO TOP /******************   RETURN TO TOP  *************************/ 
#upArrow {
    display: none;
    position: fixed;
    width: 3vw;
    height: 3vh;
    padding-top: 1vh;
    text-align: center;
    color: #F00;
    font-size: 1vw;
    font-weight: bolder;
    bottom: 2vh;
    right: 1vw;
    background-image: url("http://lukasko.org/.pix/arrow_48.png");
    background-repeat: no-repeat;
    opacity: 1;
}
#upArrow:hover {
    color: #F0C;
    font-size: 1.2vw;
    opacity: 0.65;
}
#top-back {
    display: none;
	background-color: transparent;
	position: fixed;
	bottom: 2vh;
	right: 2vw;
	color: #F00;
	text-transform: smallcaps;
	font-size: 1vw;
	font-weight: bold;
    z-index: 3;
}
#top-back:hover {
	color: #FFF;
}
/*******************************************************************************************************************************/
/*******************************************************************************************************************************/
/***********   TABLE STUFF   **************   TABLE STUFF   ***************   TABLE STUFF   ***********   TABLE STUFF   *************/
#table, .table, #caption, .caption, #thead, .thead, #tfoot, .tfoot, .row, .cell, .row li,
#table ul, .table ul, #table ul li, .table ul li {
    border: .0625rem solid #000;
    border-collapse: collapse;
    text-align: center;
	font-size: calc((2rem + 2vw)/3.5);
    line-height: 1.5;
    color: #000;
}
#table, .table {
    width: 100%;
    margin: 0 auto;
    background: transparent;
    display: table;
}
#caption, .caption, #thead, .thead, #tfoot, .tfoot, .row, #table ul, .table ul {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
#thead, .thead, #tfoot, .tfoot, .row, .cell, .row li, 
#table ul, .table ul, #table ul li, .table ul li {
    background: transparent;
}    
#caption, .caption {
    display: table-caption;
    text-align: -webkit-center;
    text-align: center;
    caption-side: top;
    background: transparent;
    font-size: 1.7rem;
}
#caption:hover, .caption:hover {
    background: transparent;
    color: #000;
    border-radius: 1.2rem;
}
#thead, .thead {
    display: table-header-group;
    font-weight: bold;
    background: transparent;
}
.row, #table ul, .table ul {
    display: table-row;
    width: 100%;
    background: transparent;
}
.cell, .row li, #table ul li, .table ul li {
    display: table-cell;
    background: transparent;
}
#thead .row .cell, .thead .cell,.thead .row li, #thead ul li, .thead ul li {
    color: #0F0;
    background: transparent;
}
.row:hover, .row:hover li, #table ul:hover, .table ul:hover li {
     background: transparent;
}
.cell:hover, .row li:hover, #table ul li:hover , .table ul li:hover {
    background: transparent;
    color: #000;
    border: 1px solid #000;
}
#tfoot, .tfoot {
    display: table-footer-group;
    width: 100%;
    background: transparent;
}
#table ul li:first-child, .table ul li:first-child {
	color: #000;
}
/*******************************************************************************************************************************/
/***********   TABLE STUFF   **************   TABLE STUFF   ***************   TABLE STUFF   ***********   TABLE STUFF   *************/
table {
	border-collapse: collapse;
	border-spacing: 0;
    width: 100%;
    display: table;
    background: transparent;
}
tr {
    width: 100%;
    display: table-row;
}
caption {
    display: table-caption;
    width: 100%;
    background: transparent;
    text-align: -webkit-center;
    text-align: center;
    caption-side: top;
}
thead {
    display: table-header-group;
    font-weight: bold;
    width: 100%;
    background: transparent;
}
tfoot {
    display: table-footer-group;
    width: 100%;
    background: transparent;
}
th, td {
    display: table-cell;
    text-align: center;
    vertical-align: center;
    background: transparent;
}
th {
    font-weight: bold;
}
/*******************************************************************************************************************************/
/***********   TABLE STUFF   **************   TABLE STUFF   ***************   TABLE STUFF   ***********   TABLE STUFF   *************/
/**********************************************************************************************/
/*****************************************************************************************************************************************************************/
button, a:link button, a:visited button {
    text-align: center;
	padding: auto;
	cursor: pointer;
	width: 10rem;
	height: 2rem;
	margin: 1rem;
	background: linear-gradient(#C8C8C8, #969696);
	color: #F00;
	font-variant: small-caps;
	font-size: calc((2rem + 2vw)/3.5);
    border: .12rem inset #FFF, .12rem outset #000;
    border-radius: .1rem;
	outline: .12rem solid #DD3;
	outline-offset: .1rem;
    z-index: 3;
}
button:hover, a:hover button {
	background: linear-gradient(#969696, #C8C8C8);
	border: .12rem outset #F63, .12rem inset #000;
	color: #FFF;
	font-family: morpheus, serif;
    text-transform: uppercase;
	text-decoration: none;
	outline: .12rem solid #0D3;
}
button:active, a:active button {
    color: #0F4;
    background: #970;
    border: .1rem solid #FFF;
    box-shadow: inset 0 0 #C9F;
	outline: .12rem solid #00D;
}
/*****************************************************************************************************************************************************************/
/**********************************************************************************************/
#close {
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: space-around; 
    align-items: center;
	width: 6rem;
	margin: 0 auto 3rem;
    height: 1.2rem;
	text-align: center;
	background: linear-gradient(#EAEAEA, #636363);
	padding: .25rem;
	border: .2rem groove #0F0;
	outline: .2rem solid #F00;
    outline-offset: .15rem;
}
#close::before {
	content: "Close";
	color: #E34;
	text-align: center;
	font-size: calc((1.75rem + 2vw)/3.5);
	font-weight: 700;
    text-shadow: .12rem .12rem 0 #0C2;
}
#close:hover {
	background: linear-gradient(#636363, #EAEAEA);
	color: #43E;
	border: .185rem double #F00;
	outline: .2rem solid #00F;
}
#close:hover::before {
	color: #43E;
    text-shadow: .1rem .1rem 0 #C92;
}
/**********************************************************************************************/
/**********************************************************************************************/
#refresh, a #refresh {
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: space-around; 
    align-items: center;
	width: 4.5rem;
	margin: auto;
	height: 1.5rem;
	text-align: center;
	background: linear-gradient(#EAEAEA, #636363);
	padding: .25rem auto 0;
	border: .1rem solid #E07;
	outline: .15rem sold #FE3;
	outline-offset: .12rem;
}
#refresh::before, a #refresh::before {
	content: 'Refresh';
	color: #F00;
	text-align: center;
	font-size: calc((1rem + 2vw)/3.5);
	font-weight: 300;
}
#refresh:hover, a #refresh:hover {
	background: linear-gradient(#636363, #EAEAEA);
	color: #0CF;
	border: .1rem solid #0E7;
	outline: .15rem sold #000;
}
#refresh:hover::before, a #refresh:hover::before,
#refresh:hover::after, a #refresh:hover::after {
	color: #0CF;
	font-weight: bolder;
}
#refresh:active, a #refresh:active {
	background: linear-gradient(#C5C5C5, #5C5C5C);
	border: .1rem solid #0E0;
	outline: .15rem sold #F2F;
}
#refresh:active::before, a #refresh:active::before {
	color: #349;
	font-weight: 700;
}
	
/**********************************************************************************************//**********************************************************************************************/
/** use this inside of an anchor: "A"  **/
#contact {
    display: block;
    margin: 1vh auto;
	cursor: pointer;
	padding-bottom: 1vh;
	text-align: center;
	width: 10vw;
	height: 3vh;
	background: linear-gradient(#D9D9D9, #858585);
    box-shadow: inset 0 0 .25em #F03;
    text-decoration: none;
	outline: .2em solid #3D3;
	outline-offset: .1em;
    overflow: hidden;
    z-index: 3;
}
#contact::before {
	content: 'Contact Us';
	color: #F03;
	font-weight: 900;
	text-align: center;
	font-variant: small-caps;
	font-size: calc((2rem + 2vw)/3.5);
}
#contact:hover {
	background: linear-gradient(#858585, #D9D9D9);
	color: #0D0;
    box-shadow: inset 0 0 .25em #0D0;
	outline: .2em solid #F33;
}
#contact:hover::before {
	color: #0D0;
	text-decoration: none;
}
#contact:active {
    box-shadow: inset 0 0 #CCC;
    color: #404;
    background: #A73;
    box-shadow: inset 0 0 .25em #404;
	outline: .2em solid #000;
}
/**********************************************************************************************/
#copy {
	display: block;
	margin: 0 auto;
	text-align: center;
	font-size: calc((2rem + 2vw)/3.5);
	color: #000;
	font-weight: 900;
}
/**********************************************************************************************/
#contact {
    display: block;
    margin: 1rem auto;
	cursor: help;
	padding-bottom: 1.5rem;
	text-align: center;
	width: 8rem;
	height: .75rem;
	background: linear-gradient(#D9D9D9, #858585);
    box-shadow: inset 0 0 .25rem #F03;
    border-radius: .2rem;
    text-decoration: none;
	outline: .2rem solid #3D3;
	outline-offset: .1rem;
    z-index: 3;
}
#contact::before {
	content: 'Contact Us';
	color: #F03;
	font-weight: 500;
	text-align: center;
	font-variant: small-caps;
	font-size: 1.25rem;
}
#contact:hover {
	background: linear-gradient(#858585, #D9D9D9);
	color: #0D0;
    box-shadow: inset 0 0 .25rem #0D0;
	outline: .2rem solid #F33;
}
#contact:hover::before {
	color: #0D0;
	text-decoration: none;
}
#contact:active {
    box-shadow: inset 0 0 #CCC;
    color: #404;
    background: #A73;
    box-shadow: inset 0 0 .25rem #404;
	outline: .2rem solid #000;
}
/**********************************************************************************************/
/**********************************************************************************************/
/**********************************************************************************************/
/**********************************************************************************************/
/*  ==================================== #wrote Begin  ================================  */
#wrote {
	position: absolute;
	bottom: 2vh;
	width: 100%;
	color: #F29;
	font-size: calc((2rem + 2vw)/3.5);
	font-weight: bolder;
	text-shadow: .15rem .15rem 0 0 #0CF, -.15rem -.15rem 0 0 #CF0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: center;
}
/*  ==================================== #wrote End  =================================  */
/**********   DATA-TITLE   ***********   DATA-TITLE   **********   DATA-TITLE   ***********   DATA-TITLE   *********/
*[data-title]
{
    display: inline;
    position: relative;
    border-bottom: .1rem dotted #333;
    cursor: help;
}
*[data-title]:before, *[data-title]:after
{
    content: "";
    position: absolute;
	font-size: calc((2rem + 2vw)/3.5);
    font-weight: 900;
    opacity: 0;
    z-index: 9999;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transition: all 300ms ease 200ms;
    transition: all 300ms ease 200ms;
}
        
*[data-title]:before
{
    content: attr(data-title);
    width: 12rem;
    bottom: 1rem;
    text-align: center;
    line-height: 1.4rem;
    padding: 0.2rem 0.5rem;
    color: #555;
    background-color: #ff8;
    border-radius: .4rem;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}
        
*[data-title]:after 
{
    width: 0;
    height: 0;
    left: 2rem;
    bottom: 0;
    border: 0.6rem solid transparent;
    border-top-color: #ff8;
    -webkit-transform-origin: left top;
    transform-origin: left top;
}
*[data-title]:hover:before, *[data-title]:hover:after
{
    bottom: 2rem;
    opacity: 1;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
*[data-title]:hover:after
{
    bottom: 1rem;
}
/***********************************************************/
@media only screen and (max-width: 60rem) {
	*[data-title], *[data-title]::before, *[data-title]::after, *[data-title]:hover::before, *[data-title]:hover::after {
		display: none;
	}
}
/**********   DATA-TITLE   ***********   DATA-TITLE   **********   DATA-TITLE   ***********   DATA-TITLE   *********/