html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: white;

display: flex;
flex-flow: column nowrap;

align-items: center;
justify-content: flex-start;

box-sizing: border-box;

--width: 960px;
--mts-red: rgb(230,10,30);
--mts-red-hl: rgb(200,5,20);
--text-color: rgb(50,50,50);
}

*, *:before, *:after {
box-sizing: inherit;
color: var(--text-color);
font-size: 13pt; 
font-family: 'Roboto Condensed', 'Fira Sans', Scada, Arial, Helvetica, sans-serif;
//border: 1px solid black;
}

body>* {
width: var(--width);

display: flex;
flex-shrink: 0;
flex-flow: row wrap;
align-items: center;
justify-content: flex-start;
}




#Head {
height: 50pt;
z-index: 0;
position: relative;
justify-content: space-between;
}

#Head:after {
content: "";

width: 350pt;
height: 90pt;
display: block;

right: -5pt;
bottom: -40pt;
z-index: -1;
position: absolute;

background-size: 350pt 90pt ;
background-repeat: no-repeat fixed;
background-image: url("/resources/images/backg00.png");
}

#Head:hover:after {
image-rendering: pixelated;
filter: hue-rotate(140deg) url("/resources/styles/filters.svg#Sharpen6");
}

#Head * {
float: left;
display: block;
text-decoration: none;
}

#Logo img, #Logo svg {
width: auto;
margin: 10pt;
height: 25pt;
}

#Logo b {
margin-top: 8pt;
font-size: 0.8rem;
font-weight: bold;
color: var(--mts-red);
font-variant: small-caps;
}

#Logo *:hover {
color: var(--mts-red-hl);
}
.Logo path {
fill: var(--mts-red);
}
.Logo:hover path {
fill: var(--mts-red-hl);
}

#Lang {
color: white;
padding: 3pt;
margin: 15pt;
font-size: 0.7rem;
border-radius: 0 10pt;
border: 2pt solid white;
background: var(--mts-red);
}

#Lang:hover {
background: var(--mts-red-hl);
}



#Menu {
height: 40pt;
z-index: 0;
padding-left: 10pt;
}

#Menu * {
font-size: 1.2rem;
margin-top: -10pt;
margin-right: 20pt;
padding-bottom: 5pt;
text-decoration: none;
}

#Menu a:hover {
color: var(--mts-red-hl);
box-shadow: 0 -3pt 0 0 var(--mts-red-hl) inset;
}

#Menu b:hover {
color: var(--mts-red-hl);
}


#Show, #Hide {
display: none;
visibility: hidden;
background: white;
}


#Main {
width: 100%;
padding: 20pt 0 30pt;
justify-content: center;
background: rgb(244,246,250);
border-top: 1px solid rgb(190,200,250);

	display: flex;
	flex-shrink: 0;
	flex-flow: column wrap;
	align-items: center;
	justify-content: flex-start;
}



#Term {
width: var(--width);
background: white;

margin-bottom: 20pt;
padding: 10pt 10pt 5pt 15pt;

border-radius: 5pt;
border: 1px solid var(--mts-red-hl);
}

#Term:hover {
border-color: var(--mts-red);
}

#Term.Hide {
display: none;
visibility: hidden;
}


#Text {
width: var(--width);
background: white;

padding: 0 10pt 15pt 15pt;

border-radius: 5pt;
border: 1px solid rgb(220,220,230);
}

#Text.Home {
column-count: 2;
column-gap: 30pt;
column-rule: 3pt solid rgb(230,235,250);
}

#Text:hover {
border-color: rgb(190,190,190);
}

#Text h1 {
font-size: 1.7rem;
margin: 15pt 5pt;
column-span: all;
font-weight: normal;

//display: flex;
//align-items: center;
//justify-content: flex-start;
}

#Text h1:hover {
color: var(--mts-red-hl);
}

#Text h2 {
font-size: 1.3rem;
margin: 20pt 0 0;
font-weight: normal;
}

#Text h2:hover {
color: var(--mts-red-hl);
}

#Text h3 {
font-size: 0.9rem;
margin: 0 0 30pt;;
font-style: italic;
font-weight: normal;
}

#Text.Home a {
display: block;
padding: 0 0 5pt 0;
text-decoration: none;
}

#Text.Home a:before {
content: '\27a7';
content: '\1f842';
content: '\23f5';
padding-right: 3pt;
display: inline-block;
color: var(--mts-red-hl);
}

#Text.Home a:hover:before {
color: var(--text-color);
}

#Text.News>i {
float: left;
display: block;
margin-right: 10pt;
}

#Text.News>a {
display: block;
padding: 0 0 5pt 0;
text-decoration: none;
}

#Text a:hover {
color: var(--mts-red-hl);
text-decoration: underline;
}

#Text a:hover:after{
visibility: visible;
}

#Text:after {
content: "\22c5\22c6\2606\22c6\22c5";
width: 100%;
clear: both;
display: block;
font-size: 1.15rem;
line-height: 10pt;
margin-top: 30pt;
padding-right: 7%;
text-align: center;
}

#Text.Home:after  {
display: none;
visibility: hidden;
}

#Text table {
 border-collapse: collapse;
}

#Text table * {
font-size: 0.8rem;
text-align: left;
vertical-align: middle;
}

#Text table .nowrap {
white-space: nowrap;
}

#Text table th {
font-weight: bold;
vertical-align: top;
}

#Text table th, #Text table td {
padding: 0.5rem;
border: 1px solid var(--text-color);
}


#Side {
width: 25%;
float: right;
margin: 10pt 0 10pt 10pt ;
padding: 5pt 0 0pt 10pt;
backgrount: white;
border-left: 1px dotted black;
}

#Side h1 {
margin: 0;
padding: 0;
font-size: 1.1rem;
font-weight: normal;
}

#Side>a {
color: white;
font-size: 0.7rem;
font-weight: bold;
margin: 5pt;
padding: 5pt 12pt;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 0 15px;
background: var(--mts-red);
}

#Side>a:hover {
color: white;
text-decoration: none;
background: var(--mts-red-hl);
}

#Side>h2 {
padding: 0;
margin: 0 0 5pt;
font-size: 0.8rem;
font-weight: normal;
display: inline-block;
color: var(--text-color);
}

#Side>h2:hover {
color: var(--text-color);
}

#Side>h2:before {
width: 1.1rem;
content: '\2709';
font-size: 1rem;
display: inline-block;
}

#Side>h3 {
margin: 0;
padding: 0;
font-size: 0.8rem;
font-style: normal;
font-weight: normal;
display: inline-block;
color: var(--text-color);
}

#Side>h3:before {
width: 1.1rem;
content: '\260E';
font-size: 0.8rem;
display: inline-block;
}

#Side:after {
content: "\22c5\22c6\2606\22c6\22c5";
width: 100%;
clear: both;
display: block;
line-height: 10pt;
text-align: center;
margin: 10pt 0 0 -5pt;
}




#Foot {
width: 100%;
padding-bottom: 40pt; 

position: relative;

background: rgb(230,232,240);
border-top: 1px solid rgb(120,180,230);

flex-grow: 1;
align-items: flex-start;
justify-content: center;
}

#Foot>article {
z-index: 15;
margin-top: 10pt;
padding: 0 15pt;
width: var(--width);
}

#Foot>article>* *{
margin: 0;
padding: 0;
display: block;
font-size: 0.8rem;
text-decoration: none;
}

#Foot>article>*:nth-child(1) {
float: left;
}

#Foot>article>*:nth-child(1) * {
font-size: 0.9rem;
margin-bottom: 6pt;
text-decoration: none;
}

#Foot>article>*:nth-child(1) b {
font-size: 1rem;
margin-bottom: 12pt;
}

#Foot>article>*:nth-child(1) a:hover {
color: var(--mts-red-hl);
text-decoration: underline;
}

#Foot>article>*:nth-child(1) .Logo {
height: 15pt;
margin-top: 12pt;
margin-left: -10pt;
}

#Foot>article>*:nth-child(2) {
float: left;
margin-left: 40pt;
padding: 0 0 20pt 10pt;
border-left: 1px dotted black;
}

#Foot>article>*:nth-child(2) b {
font-size: 1rem;
margin-bottom: 12pt;
}

#Foot>article>*:nth-child(2) p {
margin-bottom: 5pt;
}

#Foot>article>*:nth-child(3) {
float: left;
margin-left: 40pt;
padding: 0 0 65pt 10pt;
border-left: 1px dotted black;
}

#Foot>article>*:nth-child(3) b {
font-size: 1rem;
padding-left: 5pt;
margin-bottom: 8pt;
}

#Foot>article>*:nth-child(3) p:before {
width: 15pt;
font-size: 1.1rem;
content: '\a9';
font-weight: bold;
display: inline-block;
}

#Foot>article>*:nth-child(3) a {
display: inline-block;
text-decoration: none;
color: var(--mts-red-hl);
}

#Foot>article>*:nth-child(3) a:before {
width: 15pt;
font-size: 1.1rem;
content: "\1f6c8";
display: inline-block;
text-decoration: none;
}

#Foot>article>*:nth-child(3) a:hover {
color: var(--mts-red);
text-decoration: underline;
}


.Icon {
height: auto;
vertical-align: text-bottom;
}

.Icon path {
fill: var(--text-color);
}

.Icon:hover path {
fill: var(--mts-red-hl);
}

#NewsIcon {
width: 50pt;
margin-top: -10pt;
margin-right: 15pt;
}

#AboutIcon {
width: 40pt;
margin-top: -10pt;
margin-right: 15pt;
}

#LegalIcon {
width: 40pt;
margin-top: -5pt;
margin-right: 5pt;
}

#ContactIcon {
width: 50pt;
float: left;
//margin-top: 5pt;
margin-right: 10pt;
}

#FeedbackIcon {
width: 42pt;
float: left;
margin-top: -10pt;
margin-right: 15pt;
}

input, textarea {
width: 25rem;
height: 2rem;
padding: 0.5rem;
display: block;
font-size: 0.80rem;
margin-top: 1rem;
border: 1px solid var(--text-color);
border-color: rgb(80,80,80);
}

#Subject {
width: 30rem;
height: 10rem;;
}
/*
#Submit {
margin: 0;
color: white;
font-size: 0.8rem;
font-weight: bold;
margin-top: 1em;
padding: 10pt 12pt;
border: 0; border-radius: 0 15px;
}

#Submit:enabled {
background-color: var(--mts-red-hl);
}

#Submit:enabled:hover {
background-color: var(--mts-red);
}

#Submit:disabled {
background-color: gray;                           `
}

#Submit:disabled:hover {
background-color: darkgray;
}
*/
#Submit {
margin: 0;
margin-top: 1em;
padding: 10pt 12pt;
border: 0; border-radius: 0 15px;
position: relative;
}

#Submit:enabled {
background-color: var(--mts-red-hl);
}

#Submit:enabled:hover {
background-color: var(--mts-red);
}

#Submit:disabled {
background-color: gray;                           `
}

#Submit:disabled:hover {
background-color: darkgray;
}


#Submit>* {
color: white;
font-size: 0.8rem;
font-weight: bold;
}

#Submit>*:nth-child(2) {
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
opacity: 0;
font-size: 200%;
}

#Submit.Test {
background-color: green;
}

#Submit.Move {
/* #Submit:focus { */
animation: Extend 2s ease-in-out forwards;
}

#Submit>*:nth-child(1).Hide {
/* #Submit:focus>*:nth-child(1) { */
animation: Disappear .6s ease-in-out forwards;
}

#Submit>*:nth-child(2).Show {
/* #Submit:focus>*:nth-child(2) { */
animation: Appear .4s .6s ease-in-out forwards;
}

@keyframes Extend {
40%, 60% { width: 3.3rem; height: 3.3rem; margin-left: 7rem; border-radius: 50%; background: green; }
100% { width: 3.3rem; height: 3.3rem; margin-left: 1rem; border-radius: 50%; background: green; }
}

@keyframes Disappear {
100% { opacity: 0; }
}

@keyframes Appear {
100% { opacity: 1; }
}






#Contact a {
color: var(--mts-red-hl);
}

#Contact a:hover {
color: var(--mts-red);
}

#Contact i {
font-size: 0.8rem;
font-style: italic;
}