@keyframes Brouds {
  from	{border-radius: 7vw;}
  to	{border-radius: 1vw;}
}
@keyframes Sizmin {
  from	{transform: scale(75%);}
  to	{transform: scale(100%);}
}
@keyframes Sizmax {
  from	{transform: scale(100%);}
  to	{transform: scale(120%);}
}
@keyframes BroudsRever {
  from	{border-radius: 1vw;}
  to	{border-radius: 7vw;}
}
@keyframes SizminRever {
  from	{transform: scale(100%);}
  to	{transform: scale(75%);}
}
@keyframes SizmaxRever {
  from	{transform: scale(120%);}
  to	{transform: scale(100%);}
}
@keyframes Broudspart2 {
  from	{border-style: solid; border-radius: 1vw;}
  to	{border-style: double; border-radius: 5vw;}
}
@media (max-width: 1000px) {
	body{
		font: 5vw !important;
	}
}
button, a, body, lable, p, input,
h1, h2, h3, h4, h5, h6{
	font-family: 'Times New Roman', Times, serif;
}
body {
    background-color: #000088;
	background-image: url("./IMG/BGs/MainBg.png");
    background-size: 100vw;
    background-position: top;
	background-repeat: no-repeat;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	font: 2vw;
    min-width: 100%;
    min-height: 50%;
	padding: 0;
	margin: 0;
}
header{
    background-size: 100%;
    display: flex;
    position: relative;
    flex-flow: row wrap;
	justify-content: center;
	border-top: 1vw #000088 solid;
	color: #ffffff;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
	height: 25vw;
    min-height: 25vw%;
    max-height: 25vw%;
	width: 100%;

}
header>*{
    display: flex;
    position: relative;
    background-position-x: center;
    background-position-y: 20%;
    background-size: cover;
    width: 15vw;
	height: 15vw;
    border: 0.5vw white solid;
    border-radius: 50%;
}
header>#R-ico{
    background-image: url("./IMG/Users/RIco.png");
	transform: translate(-5vw,0.5vw) scale(65%) rotateZ(-10deg) rotateY(+40deg);
	box-shadow: -0.9vw 1vw 1.15vw #000000
}
header>#F-ico{
    background-image: url("./IMG/Users/FIco.png");
	transform: translate(0, 0.5vw);
	box-shadow: 0vw 1vw 1.15vw #000000
}
header>#Y-ico{
    background-image: url("./IMG/Users/YIco.png");
	transform: translate(+5vw,0.5vw) scale(65%) rotateZ(+10deg) rotateY(-40deg);
	box-shadow: +0.9vw 1vw 1.15vw #000000
}
nav{
	width: 100%;
    display: flex;
    position: relative;
    flex-flow: row wrap;
    background-color: #000088;
	justify-content: center;
	color: #ffffff;
	border-top: 1.5vw #000088 solid;
	border-bottom: 1.5vw #000088 solid;
}
nav>*{
	width: 10vw;
	height: 10vw;
    display: flex;
    position: relative;
    flex-flow: column wrap;
	justify-content: center;
	vertical-align:top;
	text-align: center;
	margin: 0px auto;
    border: 1vw #D52563 solid;
	border-radius: 15vw;
	font-size: 1.5vw;
	text-decoration: none;
	
	animation-name: BroudsRever;
	animation-duration: 2s;
}
nav>*:hover{
	border-radius: 1vw;
	
	animation-name: Brouds;
	animation-duration: 0.2s;
}
nav>*>*{
	max-width: 100%;
	width: 10vw;
	height: 10vw;
	transform: scale(75%);
	cursor: pointer;
	font-size: 3.75vw;
	color: #D52563;
	
	animation-name: SizminRever;
	animation-duration: 2s;
}
nav>*:hover>*{
	transform: scale(100%);
	
	animation-name: Sizmin;
	animation-duration: 0.2s;
}
main {
	display: flex;
	flex-flow: column nowrap;
    background-color: #000055;
	width: 100vw;
	align-items: center;
	padding: 0;
	margin: 0;
}
section {
	display: flex;
	min-width: 80%;
	max-width: 80%;
	background-color: #000000;
	text-align: center;
	display: flex;
	flex-flow: column nowrap;
	padding: 0;
	margin: 0;
}
section>img{
	min-width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
}
.table {
	display: flex;
	flex-flow: column wrap;
	table-layout: fixed;
	border-collapse: collapse;
	border: #000000 0.2vw solid;
	border-bottom: none;
	padding: 0;
	margin: 0;
}
.table>*{
	display: flex;
	flex-flow: row wrap;
	padding: 0;
	margin: 0;
}
.table>*>*{
	justify-content: center;
	display: flex;
	flex: 1;
	font-size: 0.8vw;
	align-content: center;
	padding: 0;
	margin: 0;
	border: #000000 0.01vw solid;
}
button{
	background-color: #ffffff;
	border: none;
	border-radius: 30px;
	font-size: 1.5vw;
}
button:hover{
	background-color: #aaffff;
}
button:active{
	background-color: #aaaaaa;
}
input {
	background-color: inherit;
	color: inherit;
	font-size: 0.8vw;
	border: none;
	padding: 0;
	margin: 0;
	vertical-align: 800%;
}
::-webkit-calendar-picker-indicator {
	background: transparent;
	position: absolute;
	text-align: center;
}
th,
td {
	background-color: inherit;
	border: #000000 0.045vw solid;
	border-bottom: none;
	font-size: 0.8vw;
	padding: 0;
	margin: 0;
}
footer{
    display: flex;
    position: relative;
	flex-flow: column wrap;
    background-color: #000088;
    color: #FFFFFF;
    bottom: 0px;
    margin: 0;
    padding: 40px;
}
footer>*{
	margin:0px;
	color:#ffffff88;
    font-size: 1vw;
}
#HomP>*{
	width:13vw; height:13vw;
}
#tm8,#t0,#tp8 {
	background-color: red;
	color: #ffffff;
}
#tm7,#tp1,#tp9 {
	background-color: orange;
	color: #000000;
}
#tm6,#tp2,#tp10 {
	background-color: yellow;
	color: #000000;
}
#tm5,#tp3,#tp11 {
	background-color: lime;
	color: #000000;
}
#tm12,#tm4,#tp4,#tp12 {
	background-color: cyan;
	color: #000000;
}
#tm11,#tm3,#tp5,#tp13 {
	background-color: blue;
	color: #ffffff;
}
#tm10,#tm2,#tp6 {
	background-color: #7B00FF;
	color: #ffffff;
}
#tm9,#tm1,#tp7 {
	background-color: magenta;
	color: #000000;
}