@font-face {
    font-family: "mymusicfont";
    src: url("../fonts/ECOMPOSER.TTF") format("truetype");
}

@font-face {
    font-family: "mytitlefont";
    src: url("../fonts/SNAP____.TTF") format("truetype");
}

@font-face {
    font-family: "myNewVivaldiFont_00";
    src: url("../fonts/AdobeGurmukhi-Bold.otf") format("truetype");
}

@font-face {
    font-family: "myNewTitleFont";
    src: url("../fonts/SnellRoundhand.ttc") format("truetype");
}

@font-face {
  font-family: 'myClaveSol';
  src:  url('../fonts/clavesol.eot?t2u99k'), 
        url('../fonts/clavesol.eot?t2u99k#iefix') format('embedded-opentype'),
        url('../fonts/clavesol.ttf?t2u99k') format('truetype'),
        url('../fonts/clavesol.woff?t2u99k') format('woff'),
        url('../fonts/clavesol.svg?t2u99k#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'my_Metronomo';
  src:  url('../fonts/metronomo00.eot?t2u99k'),
        url('../fonts/metronomo00.eot?t2u99k#iefix') format('embedded-opentype'),
        url('../fonts/metronomo00.ttf?t2u99k') format('truetype'),
        url('../fonts/metronomo00.woff?t2u99k') format('woff'),
        url('../fonts/metronomo00.svg?t2u99k#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}



@font-face {
  font-family: 'my_Glyphs';
  src:  url('../fonts/my_glyph.eot?t2u99k'),
        url('../fonts/my_glyph.eot?t2u99k#iefix') format('embedded-opentype'),
        url('../fonts/my_glyph.ttf?t2u99k') format('truetype'),
        url('../fonts/my_glyph.woff?t2u99k') format('woff'),
        url('../fonts/my_glyph.svg?t2u99k#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'my_Glyphs' !important; //'my_Metronomo', 'myClaveSol';  //!important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}




.icon-clavesol:before{content: "\e801";}
.icon-metronomo00:before{content: "\e802";}
.icon-oreja00:before{content: "\e803";}
.icon-piano00:before{content: "\e804";}
.icon-stop00:before{content: "\e805";}
.icon-rec00:before{content: "\e806";}
.icon-refresh00:before{content: "\e800";}
.icon-play00:before{content: "\e807";}
.icon-check00:before{content: "\e808";}
.icon-progress00:before{content: "\e809";}
.icon-savedisk00:before{content: "\e80A";}
.icon-book00:before{content: "\e80B";}

.bgrnd1
{margin:0 0 0 0;padding:0 0 0 0;}

.header00
{
  margin:0 auto;padding:0 0 0 0;  
  background-color: none;
  color:black;
}



.encabezado_00{
    margin: 0 0;padding: 0 0;
    /*height: 80px;*/
    background: -webkit-linear-gradient(285deg, rgba(180,182,193,0.3),rgba(201,210,212,0.2),rgba(255,255,255,1));
    /*background: linear-gradient(0deg, rgba(180,182,193,1),rgba(255,255,255,1), rgba(201,210,212,1));*/
}
.encabezado_01{
    margin: 0 0;padding: 0 0;
    //height: 80px;
}

.cuerpoCentral_00{
    margin: 0 0;padding: 0 0;
}


.MenuOpciones_00{
    margin: auto 0;padding: 0 0;
    background-color:none;/*#bbb;*/
}

.tituloGral{
    padding:0 0 0 0;
    font-family: "myNewTitleFont";
    text-align: center;
    font-size: 80px;
    font-weight:  bold;
  /*background: -webkit-linear-gradient(yellow,red);*/
    background: -webkit-linear-gradient(0deg, rgba(255,96,128,1),rgba(255,255,255,0), rgba(119,99,162,1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 0.03px;
     -webkit-text-stroke-color: rgba(119,99,162,1);
     /*text-shadow: 1px 2px 3px #000;
     color: tomato;*/
     margin: 0 auto ;
}

.tituloGral02
{
  padding:0 0 0 0;  
  /*background-color: none;*/
  font-family: "myNewTitleFont";
  color:black;
  text-align: center;
  font-size: 140px;
  font-weight:  bold;
  -webkit-text-fill-color:linear-gradient(0deg, rgba(255,96,128,1),rgba(255,255,255,1), rgba(119,99,162,1)); /*#378c19;*/ 
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  text-shadow: 1px 2px 3px #000;
  margin: 0 auto ;
 /* white-space: nowrap;
  position: absolute;
  top: 15px;bottom: 0;
  left: 0; right: 0;
  margin: 0 auto ;
  */
  opacity: 1;
  transform:scale(0.60) rotate(-360deg);
  
  transition:  transform  0.6s ease-in-out, opacity 0.6s ease-in-out;
  //animation: myFadeIn_00 2s ease-in-out; 
  //transition:  opacity  2s ease-in-out;
  //transition: visibility 3s linear,opacity 3s linear;
  //transition: visibility 3s  ease-in,opacity 3s ease-in;
  //animation: myFadeIn_00 ease 2s 1 normal forwards;
  //animation: opacity 0 ease 2s opacity 1 normal forwards;
  //-webkit-animation: myFadeIn_00 ease 2s;
  //-moz-animation: myFadeIn_00 ease 2s;
  //-o-animation: myFadeIn_00 ease 2s;
  //-ms-animation: myFadeIn_00 ease 2s;
}

tituloGral_1
{
  padding:0 0 0 0;  
  background-color: none;
  font-family: "mytitlefont";
  color:black;
  font-size: 100px;
  font-weight:  normal;
  -webkit-text-fill-color: #378c19; 
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  text-shadow: 1px 2px 3px #000;
  
  white-space: nowrap;
  position: absolute;
  top: 15px;bottom: 0;
  left: 0; right: 0;
  margin: 0 auto;
  
  opacity: 1;
  transform:scale(0.60) rotate(-360deg);
  
  transition:  transform  0.6s ease-in-out, opacity 0.6s ease-in-out;
  //animation: myFadeIn_00 2s ease-in-out; 
  //transition:  opacity  2s ease-in-out;
  //transition: visibility 3s linear,opacity 3s linear;
  //transition: visibility 3s  ease-in,opacity 3s ease-in;
  //animation: myFadeIn_00 ease 2s 1 normal forwards;
  //animation: opacity 0 ease 2s opacity 1 normal forwards;
  //-webkit-animation: myFadeIn_00 ease 2s;
  //-moz-animation: myFadeIn_00 ease 2s;
  //-o-animation: myFadeIn_00 ease 2s;
  //-ms-animation: myFadeIn_00 ease 2s;
}
/*



@keyframes myColorChange_00 {
  from {background-color: red;}
  to {background-color: yellow;}
}

@keyframes myFadeIn_00 {
 from{
     opacity:0;
     transform:scale(0.4)  rotateX(-10deg);  
 } 
 to{
     opacity:1;
     transform: scale(2) rotateX(10deg);
 }
}

@-moz-keyframes myFadeIn_00 {
 from{opacity:0;}
 to{opacity:1;}
}

@-webkit-keyframes myFadeIn_00 {
 from{opacity:0;}
 to{opacity:1;}
}

@-o-keyframes myFadeIn_00 {
 from{opacity:0;}
 to{opacity:1;}
}

@-ms-keyframes myFadeIn_00 {
 from{opacity:0;}
 to{opacity:1;}
}
*/

.tituloCuerpoCentral{
    margin: 0 0 0 0;padding: 0 0 0 0;
    background-color: #eee;
    color: #fff;
}

.tituloMenuOpciones1{
    margin: 0 0 0 0;padding: 0 0 0 0;
    background-color: none;//#138496;
    color: #blue;
}
.tituloMenuOpciones2{
    margin: 0 0 0 0;padding: 0 0 0 0;
    background-color: none;// #f8d7da;
    color: #blue;
}
.tituloMenuOpciones3{
    margin: 0 0 0 0;padding: 0 0 0 0;
    background-color:none;//#b8daff;
    color: #blue;
}

.opcionesSubMenu{
    //float:left;
    //width: 100%;
    height: 96px;
    border-top: none;//3px solid  #fff;
    border-bottom:none;// 3px solid  rgba(242,244,252,1);
    border-left: 1px solid rgba(240,240,240,1);
    border-right: 1px solid rgba(0,0,0,0.25);
    text-align: center;
    /*background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
                linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
                linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
    */              
    background: linear-gradient(0deg, rgba(180,182,193,1),rgba(255,255,255,1), rgba(201,210,212,1))
}

.subDivisionSuperiorMenu
{
  float: left;  
  border:1px solid #bbb;
  width:100%;height:30%; 
  background-color: none; 
  text-align: center;
  margin: 0 auto;
}

.subDivisionInferiorMenu
{
  border:1px solid #bbb;
  width:100%;height:70%; 
  background-color: none; 
  text-align: center;
  display:flex;
}

.tituloSubDivisionSuperiorMenu
{
  font-family :"myNewVivaldiFont_00";  
  font-size: 17px;
  font-weight: bold;
  
   background: -webkit-linear-gradient(rgba(180,182,193,1),rgba(0,0,0,1));
   -webkit-background-clip: text;
   -webkit-text-fill-color: rgba(0,0,0,50%);
     color: #555;
  
  text-shadow: 1px  1px  1px  #fff;
  padding: 3px 0 0 0;
  text-align: center;
  margin:auto;
}


.btnSubDivisionMenu{
  border-radius: 8px;  
  border-top: 1px solid #fff;
  border-right: 1px solid  #aaa;
  border-bottom: 1px solid  #aaa;
  border-left: 1px solid  #fff;
  
  outline: none !important;
  font-family :arial;  
  font-size: 20px;
  font-weight: bold;
  width:100%;height:100%; 
  
  background: none;
  
   background: -webkit-linear-gradient(rgba(180,182,193,1),rgba(0,0,0,1));
   -webkit-background-clip: text;
   -webkit-text-fill-color: rgba(0,0,0,50%);
     color: #555;
  
  text-shadow: 1px  1px  1px  #fff;
  
  text-align: center;
  margin:auto;
}


.subDivisionMenuReproduccion{
  float:left; 
  padding:8px 5px;
  border:none;//1px solid #ccc;
  width:100%;
  height:100%; 
  min-width: 35%;
  background-color: none;
  background: none;
  margin: 0 auto;
  text-align: center;
}

.btnSubDivisionMenu2{
  border-radius: 8px;  
  border-top: 1px solid #fff;
  border-right: 1px solid  #aaa;
  border-bottom: 1px solid  #aaa;
  border-left: 1px solid  #fff;
  
  
  outline: none !important;
  font-family :arial;  
  font-size: 8px;
  font-weight: bold;
  width:100%;height:100%; 
  
  background: none;
  
   background: -webkit-linear-gradient(rgba(180,182,193,1),rgba(0,0,0,1));
   -webkit-background-clip: text;
   -webkit-text-fill-color: rgba(0,0,0,50%);
     color: #555;
  
  text-shadow: 1px  1px  1px  #fff;
  
  text-align: center;
  margin:0 auto;
  padding: 0 0;
}

.btnSubDivisionMenu3,.btnSubDivisionMenu4{
  border-radius: 8px;  
  border-top: 1px solid #fff;
  border-right: 1px solid  #aaa;
  border-bottom: 1px solid  #aaa;
  border-left: 1px solid  #fff;
  
  
  outline: none !important;
  font-family :arial;  
  font-size: 13px;
  font-weight: bold;
  width:100%;height:100%; 
  
  background: none;
  
   background: -webkit-linear-gradient(rgba(180,182,193,1),rgba(0,0,0,1));
   -webkit-background-clip: text;
   -webkit-text-fill-color: rgba(0,0,0,50%);
     color: #555;
  
  text-shadow: 1px  1px  1px  #fff;
  
  text-align: center;
  margin:auto 0;
  padding: 0 0;
}



.subDivisionMenu{
  float:left;
  /*border-radius: 8px;
  border-top: 3px solid rgba(150,150,150,1);
  border-left: 3px solid rgba(150,150,150,1);
  border-bottom: 3px solid rgba(0,0,0,1);
  border-right: 3px solid rgba(0,0,0,1);
  */
  padding:8px 5px;
  border:none;//1px solid #ccc;
  width:50%;
  height:100%; 
  //min-width: 100px;
  background-color: none;
  background: none;
}

.subDivisionMenu01{
  float:left;
  /*border-radius: 8px;
  border-top: 3px solid rgba(150,150,150,1);
  border-left: 3px solid rgba(150,150,150,1);
  border-bottom: 3px solid rgba(0,0,0,1);
  border-right: 3px solid rgba(0,0,0,1);
  */
  padding:8px 2px;
  border:none;//1px solid #ccc;
  width:100%;
  height:100%; 
  //min-width: 100px;
  background-color: none;
  background: none;
}


.subOpcionesMenu{
  
  border-radius: 8px;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  
  margin:5px auto;
  width:42%;height:82%; 
  
  
  background: linear-gradient(0deg, rgba(180,182,193,0.3),rgba(255,255,255,1), rgba(201,210,212,0.3));
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  vertical-align: middle;
}



.subOpcionesMenu2{
  border-radius: 8px;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  margin:5px auto;
  padding:0 0;
  
  width:29%;height:82%; 
  min-width: 50px;
  
  background: linear-gradient(0deg, rgba(180,182,193,0.3),rgba(255,255,255,1), rgba(201,210,212,0.3));
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  vertical-align: middle;
}

.subOpcionesMenu3{
  border-radius: 8px;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  margin:5px auto;
  padding:0 0;
  
  width:10%;height:80%; 
  min-width: 20px;
  
  background: linear-gradient(0deg, rgba(180,182,193,0.3),rgba(255,255,255,1), rgba(201,210,212,0.3));
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  vertical-align: middle;
}

.subOpcionesMenu4{
  
  border-radius: 8px;
  border-top: 1px solid #aaa;
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  
  margin:5px auto;
  width:82%;height:82%; 
  
  
  background: linear-gradient(0deg, rgba(180,182,193,0.3),rgba(255,255,255,1), rgba(201,210,212,0.3));
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  vertical-align: middle;
}


.divSwitchEjercicios
{
  width:70px;
  height: 30px;
  background-color: none;
  margin:0 auto;
  padding: 0 0;
  text-align: center;
}


.whiteKeyOff
{
 width:46px;
 height:135px;
 background-image:url('../images/tecladoPiano/whiteKeyNormal.png');
 min-width:46px;
 text-align:center;
 padding:100px 0 0 0;
 float:left;
}

.whiteKeyOn
{
 width:46px;
 height:135px;
 background-image:url('../images/tecladoPiano/whiteKeyPushed.png');
 min-width:46px;
 text-align:center;
 padding:100px 0 0 0;
 float:left;
}

.blackKeyOff
{
 width:34px;
 height:70px;
 background-image:url('../images/tecladoPiano/blackKeyNormal.png');
 min-width:34px;
 text-align:center;
 padding:0 0;
 float:left;
}


.blackKeyOn
{
 width:34px;
 height:70px;
 background-image:url('../images/tecladoPiano/blackKeyPushed.png');
 min-width:34px;
 text-align:center;
 padding:0 0;
 float:left;
}