@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) {
	main{
		font-size: 4vw !important;
		flex-flow: column wrap !important;
	}
	main>*{
		width: 90%;
		Flex: 90;
	}
	main a{
		flex-flow: column wrap !important;
		text-align: center !important;
		justify-content: center !important;
		align-content: center !important;
	}
	main a>*{
		display: flex !important;
		text-align: center !important;
		justify-content: center !important;
		align-content: center !important;
	}
	main a>img{
		display: flex !important;
		width: 10vw !important;
		height: 10vw !important;
	}
	main a, main a>iframe{
		max-width: 99% !important;
	}
}
button, a, body, lable, p,
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;
    min-width: 100%;
    min-height: 50%;
    margin: 0;
    padding: 0;
	z-index:-1;
}
body>*{
	z-index:0;
}
header{
	height: 25vw;
    min-height: 25vw%;
    max-height: 25vw%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
	display: flex;
    position: relative;
}
header>*{
	height: 25vw;
    min-height: 25vw%;
    max-height: 25vw%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
	display: flex;
    position: relative;
    flex-flow: row wrap;
    background-size: 100%;
	justify-content: center;
	color: #ffffff;
	border-top: 1vw #000088 solid;
}
.ico>*{
	width: 100%;
	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%;
}
.ico>#R-ico{
    background-image: url("IMG/Users/RIco.png");
	transform: translate(-5vw,2vw) scale(65%) rotateZ(-10deg) rotateY(+40deg);
	box-shadow: -0.9vw 1vw 1.15vw #000000
}
.ico>#F-ico{
    background-image: url("IMG/Users/FIco.png");
	transform: translate(0VW, 2vw);
	box-shadow: 0vw 1vw 1.15vw #000000
}
.ico>#Y-ico{
    background-image: url("IMG/Users/YIco.png");
	transform: translate(+5vw,2vw) 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>*>*{
	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;
}
#Mp3s:hover{
    border-color: #67E753;
}
#Timz:hover{
    border-color: #E7E7E7;
}
#Mids:hover{
    border-color: #65C8E1;
}
#HomP:hover{
    border-color: #C51553;
	color: #C51553;
}
main{
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	display: flex;
    position: relative;
    flex-flow: column wrap;
}
aside{
	width: 100%;
	display: flex;
    position: relative;
    flex-flow: column wrap;
	justify-content: center;
    background-color: #0000AA;
	color: #FF0066FF;
	font-size: 1.5vw;
	padding: 0%;
	margin: 0%;
}
aside>*{
    background-color: #00000000;
	width: 70%;
	display: flex;
    position: relative;
	justify-content: center;
	align-content:center;
	text-align:center;
	padding: 0%;
	margin: 0% auto;
}
aside>*>*{
	padding: 0%;
	margin: 0% auto;
}
.infosec{
	display: flex;
    position: relative;
	flex-flow: column wrap;
}
.infosec>*{
	display: flex;
    position: relative;
	flex-flow: column wrap;
}
.triSec{
	display: flex;
    position: relative;
	flex-flow: row wrap;
	justify-content: center;
	align-content:center;
	text-align:center;
    background-color: #000055;
	color: #FFFFFF;
	font-size: 1.50vw;
	padding: 0%;
	margin: 0%;
}
.triSec>*{
	display: flex;
    position: relative;
	flex-flow: column wrap;
	border: solid #FFFFFF 0.3vw;
	border-radius: 1vw;
	flex:1;
}
.triSec>*>*{
	display: flex;
    position: relative;
	flex-flow: column wrap;
    position: relative;
	width: 100%;
}
.triSec>*>.ports{
	display: flex;
    position: relative;
	flex-flow: row wrap;
	bottom: 0vw;
	align-content: center;
}
.triSec>*>*>*{
	display: flex;
    position: relative;
	flex-flow: column wrap;
	width: 100%;
	text-align: center;
}
.triSec a{
	display:flex;
	flex-flow: row wrap;
	width: 100%;
	transform: scale(100%);
	animation-name: SizmaxRever;
	text-decoration: none;
	cursor: pointer;
	animation-duration: 2s;
	justify-content: center;
	align-content:center;
	text-align: center;
	padding: 1%;
	margin: 0%;
}
.triSec a:hover{
	transform: scale(120%);
	
	animation-name: Sizmax;
	animation-duration: 0.2s;
}
.triSec a>img{
	display: flex;
    position: relative;
	flex-flow: row nowrap;
	transform: translate(1vw, 0.8vw) scale(100%);
	width: 3vw;
	height: 3vw;
	border-radius:20px
}
#Menu{
	width: 100%;
	display: flex;
    position: relative;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
    background-color: #000055;
	padding: 0%;
	margin: 0%;
}
#Menu>button{
	width: 100%;
	display: flex;
    position: relative;
	flex-flow: row wrap;
    background-color: #00000000;
	color: #FFFFFF;
	justify-content: center;
	align-content: center;
	text-align: center;
	font-size: 2vw;
	flex:1;
	padding: 0%;
	margin: 1vw;
	border: solid #5555FF 1vw;
	border-radius: 5vw;
	
	animation-name: BroudsRever;
	animation-duration: 2s;
}
#Menu>button:hover{
	border: solid #FFFFFF 1vw;
	border-radius: 1vw;
	
	animation-name: Brouds;
	animation-duration: 0.2s;
}
#Menu>button:active{
    background-color: #00000055;
	border: double #FFAAAA 1vw;
	border-radius: 6vw;
	
	animation-name: Broudspart2;
	animation-duration: 0.2s;
}
#Menu>button>h3{
	display: flex;
    position: relative;
	justify-content: center;
	align-content: center;
	text-align: center;
}
#Musi{
	width: 100%;
	display: flex;
    position: relative;
	flex-flow: row wrap;
}
.audioSection{
	width: 100%;
	display: flex;
    position: relative;
	flex-flow: column wrap;
    background-color: #0000AA;
	justify-content: center;
	align-content: center;
}
.audioSection>h3{
	width: auto;
	display: flex;
    position: relative;
	flex-flow: column wrap;
	justify-content: center;
	align-content: center;
	border: solid #FFFFFF 0.25vw;
	border-radius: 1vw;
}
.audioParts{
	width: 100%;
	display: flex;
    position: relative;
	flex-flow: column wrap;
	justify-content: center;
	align-content: center;
}
.audioCluster{
	width: 100%;
	display: flex;
    position: relative;
	flex-flow: column nowrap;
	justify-content: center;
	align-content: center;
	padding: 0%;
	margin: 0% auto;
}
.audioCluster>button{
	display: flex;
	flex-flow: row wrap;
    background-color: #00000000;
	justify-content: center;
	align-content: center;
	color: #FFFFFF;
	font-size: 2vw;
	border-radius: 5vw;
	border: solid #5555FF 1vw;
	padding: 0.5vw;
	margin: 0%;

	animation-name: BroudsRever;
	animation-duration: 2s;
}
.audioCluster>button:hover{
	border-radius: 1vw;
	border: solid #0000FF 1vw;

	animation-name: Brouds;
	animation-duration: 0.2s;
}
.audioList{
	display: flex;
	flex-flow: column wrap;
    position: relative;
	width: 100%;
	background-color: #2244AA88;
	justify-content: center;
	align-content: center;
	border-radius: 1vw;
}
.audioSample{
	display: flex;
	flex-flow: row nowrap;
    position: relative;
	width: 100%;
	color: #FFFFFF;
	font-size: 1.5vw;
	padding: 0.3%;
	margin: 0%;
}
.audioSample>a{
	display:flex;
	flex-flow: row nowrap;
	width: 2vw;
	height: 2vw;
	padding: 1%;
	transform: scale(100%);
	animation-name: SizmaxRever;
	text-decoration: none;
	cursor: pointer;
	animation-duration: 2s;
}
.audioSample>a:hover{
	transform: scale(120%);
	
	animation-name: Sizmax;
	animation-duration: 0.2s;
}
.audioSample>a>img{
	display:flex;
	flex-flow: row nowrap;
	transform: translate(-0vw, -0.2vw) scale(100%);
	width: 3vw!important;
	height: 3vw!important;
	border-radius:20px;
}
.audioSample>lable{
	display:flex;
	flex-flow: row nowrap;
    position: relative;
	flex: 7;
	background-color: #2244AA88;
	text-align: left;
	border-radius: 2vw;
	padding: 1%;
}
audio,midi-player{
	display:flex;
	flex-flow: row nowrap;
    position: relative;
	flex: 3!important;
	height: 2vw;
	background-color: #FFFFFF;
	border-radius: 1vw;
	padding: 1%;
}
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;
}
/*------*/
.gris{color:#bbbbbb !important;}
.rojo{color:#ffaaaa !important;}
.morado{color:#ff99ff !important;}
.blanco{color:#ffffff !important;}
.azul{color:#ffffff !important;}