@charset "utf-8";   /*  RESET.CSS  */   /*  RESET.CSS  */   /*  RESET.CSS  */   /*  RESET.CSS  */   /*  RESET.CSS  */   /*  RESET.CSS  */   /*  RESET.CSS  */   /*  RESET.CSS  */   
/*******************************************************************************************************************************
@import url("fonts.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, 
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	position: relative;
	background-color: transparent;
/*************************
	background-position: top left;
    background-attachment: fixed;
	background-repeat: repeat;
**************************/
	border: 0;
	margin: 0;
	padding: 0;
	font-size: 100%;
	font: inherit;
    box-sizing: border-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: border-box;
}
*::before, *::after {
   content: '';
}
/*******************************************************************************************************************************/
html {
    line-height: 1.15;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
	background-repeat: repeat;
    scroll-behavior: smooth;
    box-sizing: border-box;
    z-index: 0;
}
body {
    width: 95vw;
    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;
}	
em, address, big, strong, cite, code, tt, var {
	font-style: normal;
}
/*******************************************************************************************************************************/
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a, a:link, a:visited, a:active, a:hover,
a h1, a h2 {
   color: #FFF;
   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%;
	margin: 0 auto;
	color: #000;
}
/*******************************************************************************************************************************/
mark {
    background: #FF0;
    color: #000;
}
code,
kbd,
pre,
samp {
    font-family: monospace, serif;
	font-size: calc((2rem + 2vw)/3.5);
}
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.5vh;
}
sub {
    bottom: -0.25vh;
}
/*******************************************************************************************************************************/
/*******************************************************************************************************************************/
header {
    text-align: center;
}
header, hgroup, section, article {
	width: 100%;
	margin: 0 auto;
	z-index: 2;
}
p {
	margin: 2.5%;
	font-size: max(((2rem + 2vw)/3.5), .95rem);
    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, .bottom {
      position: absolute;
}
#top, .top {
	top: 0;
}
#bottom, .bottom {
	bottom: 0;
}
/******************************************************************************************************************/
/**********************************************************************************************
footer {
	position: absolute;
	width: 100%;
	margin: 0 auto;
	bottom: 0;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: center;
}
/**********************************************************************************************/

.point {
    text-decoration: underline;
}
.point:hover {
    cursor: pointer;
    color: #090;
    text-decoration: none;
}
.buf1, .buf2, .buf3, .buf4, .buf5, .buf6, .buf7, .buf8, .buf9,
.bufa, .bufb, .bufc, .bufd, .bufe, .buff {
    display: block;
    width: 100%;
	margin: 0 auto;
    background-color: transparent;
    visibility: hidden;
    opacity: 0;
    z-index: 19;
}
.buf1 {
	height: 1vmax;
}
.buf2 {
	height: 2vmax;
}
.buf3 {
	height: 3vmax;
}
.buf4 {
	height: 4vmax;
}
.buf5 {
	height: 5vmax;
}
.buf6 {
	height: 6vmax;
}
.buf7 {
	height: 7vmax;
}
.buf8 {
	height: 8vmax;
}
.buf9 {
	height: 9vmax;
}
.bufa {
	height: 10vmax;
}
.bufb {
	height: 11vmax;
}
.bufc {
	height: 12vmax;
}
.bufd {
	height: 13vmax;
}
.bufe {
	height: 14vmax;
}
.buff {
	height: 15vmax;
}
/*******************************************************************************************************************************/
/******************   RETURN TO TOP   /******************   RETURN TO TOP  /******************   RETURN TO TOP /******************   RETURN TO TOP  *************************/ 
#upArrow {
    display: none;
    position: fixed;
/*    width: 7.5vw;
    height: 10vh;
    padding-top: 1em;
*/  
    bottom: 5vh;
    right: 5vw;
    background-image: url("/.pix/arrow_48.png");
    background-repeat: no-repeat;
    opacity: 1;
}
#upArrow::before {
	content: 'Top';
	text-align: center;
	color: #F00;
	font-size: calc((1.5rem + 4vw)/3.5);
	font-weight: bolder;
	
}
#upArrow:hover {
   background-image: url("/.pix/45.png");
}
#upArrow::before:hover {
	color: #C0E;
}
#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: calc((2.75rem + 2vw)/3.5);
}
#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;
	vertical-align: baseline;
	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;
    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 {
	width: 6vmax;
	margin: 0 auto;
	text-align: center;
	vertical-align: middle;
	background: linear-gradient(#EAEAEA, #636363);
	border: .2vmax groove #0F0;
	outline: .2vmax solid #F00;
    outline-offset: .15vmin;
	color: #E34;
	text-align: center;
	font-size: calc((1.75rem + 2vw)/3.5);
	line-height: 1.35;
	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;
	color: #43E;
    text-shadow: .1rem .1rem 0 #C92;
}
/**********************************************************************************************/
/**********************************************************************************************/
#refresh, a #refresh {
	display: flex;
    justify-content: space-around;
    align-items: center;
    width: 7.5vmax;
	height: 2.5vmax;
	text-align: center;
	margin: 0 auto;
	padding: auto;
	text-align: center;
	background: linear-gradient(#EAEAEA, #636363);
	border: .1vmax solid #E07;
	outline: .15vmax sold #FE3;
	outline-offset: .12vmin;
}
#refresh::before, a #refresh::before {
	content: 'Refresh';
	color: #F00;
	text-align: center;
	font-size: calc((.75rem + 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;
}
/**********************************************************************************************/
/**********************************************************************************************/
#copy {
	display: block;
	margin: 0 auto;
	text-align: center;
	font-size: calc((2rem + 2vw)/3.5);
	color: #000;
	font-weight: 900;
}
/**********************************************************************************************/
.eight, .four {
    width: 95vw;
    background-color: transparent;
	margin: 0 auto;
	padding: .125vh auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 6;
}
.eight {
	height: 6.75vh;
}
.four {
	height: 40px;
}
.eighty, .forty {
    margin: .2vmax;
    background-repeat: no-repeat;
    border-radius: .5vmax;
    z-index: 7;
}
.eighty {
    width: 6.5vw;
    height: 6.5vh;
    background-image: url('/.pix/euro_extracted_80.png');
}
.forty {
	width: 40px;
	height: 40px;
    background-image: url('/.pix/euro_extracted_40.png');
}
.eighty:hover, .forty:hover {
    background: rgba(0,0,0,.2);
    background-repeat: no-repeat;
}
.eighty:hover {
    background-image: url('/.pix/euro_extracted_80.png');
}
.forty:hover {
    background-image: url('/.pix/euro_extracted_40.png');
}
/**********************************************************************************************/
#contact {
	display: flex;
    justify-content: space-around;
    align-items: center;
	cursor: help;
	text-align: center;
	width: 10vw;
    height: 3vh;
	background: linear-gradient(#D9D9D9, #858585);
    box-shadow: inset 0 0 .2vmin #F03;
    border-radius: .2vmin;
    text-decoration: none;
	outline: .2vmin solid #3D3;
	outline-offset: .1vmin;
    z-index: 3;
}
#contact::before {
	content: 'Contact Us';
	color: #F03;
	font-weight: 500;
	text-align: center;
	font-variant: small-caps;
	font-size: max(((2rem + 2vw)/3.5), .95rem);
}
#contact:hover {
	background: linear-gradient(#858585, #D9D9D9);
	color: #0D0;
    box-shadow: inset 0 0 .25vmin #0D0;
	outline: .2vmin 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 .25vmin #404;
	outline: .2vmin solid #000;
}
/**********************************************************************************************/
/**********************************************************************************************/
/***************************  <div id = "wrote"><?= $wrote; ?></div>  ************************/
/*********************************************************************************************/
/*  ==================================== #wrote Begin  ================================  */
#wrote {
	position: absolute;
	bottom: 2vh;
	width: 100%;
	color: #F9C;
	font-size: calc((2rem + 2vw)/3.5);
    text-align: center;
	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  =================================  */
.modal_head {
	position: fixed;
	text-align: center;
    padding: 1vmin auto; 
}
/**********   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   *********/
@media only screen and (max-width: 45rem) {
   #contact::before {
	    content: 'Contact';
    	font-weight: 600;
   }
}
/**************************************************************/
@media only screen and (max-width: 30rem) {
   #contact {
	    display: none;
   }
}
/**************************************************************/