@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");*/
    src: url("../fonts/arial.ttf") format("truetype");
    
}

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

@font-face {
    font-family: "myFlautinFont_00";
    src: url("../fonts/SkaterGirlsRock.ttf") 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;
  color:white;
  /* 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;width: 100%;}

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

.barraUsuario
{
  margin:0 auto;padding:0 0 0 0;  
  background-color:  #d4d4d4;
  color:black;
  border-radius: 15px;
}

.barraUsuarioBloque
{ 
  margin:0 0;padding:10px 0 0 20px;  
  background-color:  #eee;
  color:black;
}


.h1Texto1Taller
{
  font-family: 'myFlautinFont_00';
  font-size: 20px;
  font-weight: normal;
  color:#fff;
  text-shadow: 1.5px 1.5px 0px #000;
  letter-spacing: 1px;
  margin: 0 0;
  padding: 0 0;
}

.h1Texto1Taller00
{
  font-family: 'myFlautinFont_00';
  font-size: 20px;
  font-weight: normal;
  color:#5481b2;
  /*text-shadow: 1.5px 1.5px 0px #000;*/
  letter-spacing: 1px;
  margin: 0 0;
  padding: 0 0;
}

.h1Texto1Taller00_Select
{
  font-family: 'myFlautinFont_00';
  font-size: 17px;
  font-weight: normal;
  color:#5481b2;
  /*text-shadow: 1.5px 1.5px 0px #000;*/
  letter-spacing: 1px;
  margin: 0 0;
  padding: 0 0;
  
   /*-webkit-appearance: button;*/
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px;

   /*background-image: url(flechita.png);
   background-position: center right;
   background-repeat: no-repeat;*/
}

.h1Texto1Taller000
{
  font-family: 'myFlautinFont_00';
  font-size: 28px;
  font-weight: normal;
  color:yellow;
  /*text-shadow: 1.5px 1.5px 0px #000;*/
  letter-spacing: 1px;
  margin: 0 0;
  padding: 0 0;
}

.h1Usuarios
{
  font-family: 'myNewVivaldiFont_00';
  font-size: 22px;
  font-weight: bold;
  color:#fff;
}

.encabezado_00{
    margin: 0 0;padding: 0 0;
    /*height: 80px;*/
    background: -webkit-linear-gradient(90deg, rgba(101,152,208,1),rgba(255,255,255,0.3),rgba(241,95,122,1));
    /*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));*/
}


.encabezadoTaller_00
{
    margin: 0 0;padding: 0 0;
    /*background: rgba(84,129,178,100%);//Azul */
    /*background: rgba(119,99,162,100%);//Morado*/ 
    background: rgba(255,96,128,100%);
    width: 100%;
}

.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;*/
}


.tituloGralTaller{
    padding:0 0 0 0;
    font-family: "myFlautinFont_00";
    text-align: center;
    font-size: 50px;
    font-weight:  normal;
    color:yellow;
    text-shadow: 1px 2px 2px #000;
    letter-spacing: 1px;
    /*-webkit-background-clip: text;
    -webkit-text-fill-color: white;
    -webkit-text-stroke: 1px black;
    */
    /*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 ;
}



.tituloGral{
    padding:0 0 0 0;
    font-family: "myNewVivaldiFont_00";
    text-align: center;
    font-size: 50px;
    font-weight:  bold;
    color:rgba(119,99,162,1);
    background:none;
    /*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:  
  -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{
    text-align: center;
    border:2px #00A3F8 solid;
    background-color:rgba(84,129,178,100%);         
    border-radius: 80px; 
    width: 100%;
    height: 85px;
}

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

.subDivisionInferiorMenu
{
 transform: scale(0.8);   
 /* border:1px solid #bbb;*/
  width:380px;height:70px; 
  background-color: none; 
  text-align: center;
 /* display:flex;*/
  margin: 0 auto;
  padding: 0 0;
}

.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:350px;
 /* height:100%; */
  min-width: 35%;
  background-color: none;
  background: none;
  margin: 0 auto;
  text-align: center;
}

.btnSubDivisionMenu2{
  border-radius: 100%;
/*  border: 2px white solid; */
  
  outline: none !important;
  font-family :arial;  
  font-size: 8px;
  font-weight: normal;
  width:60px;height:60px; 
  
  background:none; /*rgba(255,96,128,100%);*/
  color: #555;
  /*text-shadow: 1px  1px  1px  #fff;*/
  
  text-align: center;
  margin:auto 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;
}

/*.btnSubDivisionMenu2:hover, */
.btnSubDivisionMenu:hover, .btnSubDivisionMenu3:hover,.btnSubDivisionMenu4:hover{
    /*background:linear-gradient(0deg , rgba(119,99,162,0.35),rgba(255,255,255,1),rgba(225,96,128,0.5));*/
    background:greenyellow;
    border: 3px yellow solid;
}

.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:hover
{
    background:greenyellow;
    border: 3px yellow solid;
}
.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 0 0 15px;
 /* width:42%;height:82%;*/ 
  width:60px;height:60px;
  
  background: yellow;
  /*display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  vertical-align: middle;*/
  float:left;
  border-radius: 100%;
  border: 2px white solid; 
  
  /*outline: none !important;*/
  font-family :arial;  
  font-size: 8px;
  font-weight: normal;
  
  
  background: rgba(255,96,128,100%);
  color: #555;
  /*text-shadow: 1px  1px  1px  #fff;*/
  
  text-align: center;
 
  padding: 0 0;
}



.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;
}

.btnFlautin{
    width:250px;
    height: 60px;
    /*border:1 solid rgba(119,99,162,1);*/
    background-image:url('../images/botones_Flautin_13052021_01.png');/*rgba(119,99,162,1);*/
    /*border-radius: 0 15px 15px 0;*/
    display: table;
    /*margin: 0 auto;*/
    margin:0 auto;
    padding:0 0 0 0;
    text-align:center;
    transform: scale(0.7);
}

.btnFlautin1{
    width:250px;
    height: 60px;
    /*border:1 solid rgba(119,99,162,1);*/
    background-image:url('../images/botones_Flautin_13052021_00.png');/*rgba(119,99,162,1);*/
    /*border-radius: 0 15px 15px 0;*/
    display: table;
    margin: 0 auto;
    //margin:0 0;
    padding:15px 0 0 0;
    text-align:center;
    text-decoration: none;
}

.btnFlautin:hover
{
    transform: scale(0.8);
}

.btnFlautin1:hover
{
    transform: scale(1.1);
    text-decoration: none;
}

.fontBtnFlautin
{
    font-family: 'myFlautinFont_00';
    font-size:25px;
    color:white;
    margin:18px 0 0 0;
    padding: 0 0;
    text-shadow: 0px  0px  2px  #000;
}

.fontBtnFlautin1
{
    font-family: 'myFlautinFont_00';
    font-size:25px;
    color:white;
    margin:18px 0 0 10px;
    padding: 0 0 0 0;
    text-shadow: 0px  0px  2px  #000;
    text-decoration: none;
}

.fontBtnFlautin:hover,.fontBtnFlautin1:hover
{
    text-shadow: 0px  0px  5px  white;
    text-decoration: none;
}

.myPlayCircleWave
{
    width: 150px;
    height:150px;
    background-color: none; /*#f93c6c;*/
    background-image: url('../images/SpeakerPlay_Wave.gif');
    animation:circle-off 800ms linear infinite,circle-Size 2000ms ease-in-out infinite;
    margin:-120px auto 0 auto;
    padding:135px 0 0 0;
    border-radius: 100%;
}

.myPlayCircle
{
    width: 150px;
    height:150px;
    background-color:none; /*#f93c6c;*/
    background-image: url('../images/SpeakerPlay.png');
    animation:circle-off 800ms linear infinite,circle-Size 2000ms ease-in-out infinite;
    margin:-120px auto 0 auto;
    padding:135px 0 0 0;
    border-radius: 100%;
}
    
@keyframes circle-off { 
    100% { 
        opacity:0.7;
    } 
}

@keyframes circle-Size {
     0% {transform:scale(1);}
     12% {transform:scale(0.97);}
    25% {transform:scale(0.95);}
    37% {transform:scale(0.92);}
    50% {transform:scale(0.9);}
    62% {transform:scale(0.92);}
    75% {transform:scale(0.95);}
    87% {transform:scale(0.98);}
   100% {transform:scale(1);}
}


@keyframes circle-off_01 { 
    100% { 
        opacity:0.3;
    } 
}

@keyframes circle-Size_01 {
     0% {transform:scale(1);}
     12% {transform:scale(0.97);}
    25% {transform:scale(0.95);}
    37% {transform:scale(0.92);}
    50% {transform:scale(0.9);}
    62% {transform:scale(0.92);}
    75% {transform:scale(0.95);}
    87% {transform:scale(0.98);}
   100% {transform:scale(1);}
}


.circuloLeccionCompleta
{
    width:50px; height: 50px;
    border: 2px solid white;
    background-color: #8aff98;//#70a9e7;
    border-radius: 100%;
    float:left;
    margin:10px 10px  0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
}

.circuloEjercicioAnimado1
{
    width:50px; height: 50px;
    border: 2px solid white;
    background-color: rgba(119,99,162,1);
    border-radius: 100%;
    float:left;
    margin:10px 10px  0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    animation:circle-off_01 500ms linear infinite,circle-Size_01 1000ms ease-in-out infinite;
}



.circuloEjercicio
{
    width:50px; height: 50px;
    border: 2px solid white;
    background-color: rgba(119,99,162,0.3);
    border-radius: 100%;
    float:left;
    margin:10px 10px  0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
}

.circuloEjercicio:hover
{
   background-color: rgba(255,96,128,100%);
   border: 4px solid yellow;
}

.circuloEjercicioRed
{
    width:50px; height: 50px;
    border: 2px solid white;
    background-color: rgba(255,0,0,1);
    border-radius: 100%;
    float:left;
    margin:10px 10px  0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    animation:circle-off_01 500ms linear infinite,circle-Size_01 1000ms ease-in-out infinite;
}


.circuloResultado
{
    width:30px; height: 30px;
    border: 2px solid white;
    background-color: rgba(119,99,162,0.3);
    border-radius: 100%;
    float:left;
    margin:-6px 0 0 2px;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
}

.circuloResultadoRed
{
    width:30px; height: 30px;
    border: 2px solid white;
    background-color: rgba(255,0,0,1);
    border-radius: 100%;
    float:left;
    margin:-6px 0 0 2px;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    /*animation:circle-off_01 500ms linear infinite,circle-Size_01 1000ms ease-in-out infinite;*/
}

.circuloResultadoOrange
{
    width:30px; height: 30px;
    border: 2px solid white;
    background-color: orange;
    border-radius: 100%;
    float:left;
    margin:-6px 0 0 2px;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
   /* animation:circle-off_01 500ms linear infinite,circle-Size_01 1000ms ease-in-out infinite;*/
}

.circuloResultadoPink
{
    width:30px; height: 30px;
    border: 2px solid white;
    background-color: pink;
    border-radius: 100%;
    float:left;
    margin:-6px 0 0 2px;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    /*animation:circle-off_01 500ms linear infinite,circle-Size_01 1000ms ease-in-out infinite;*/
}


.circuloResultadoBlue
{
    width:30px; height: 30px;
    border: 2px solid white;
    background-color: blue;
    border-radius: 100%;
    float:left;
    margin:-6px 0 0 2px;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    /*animation:circle-off_01 500ms linear infinite,circle-Size_01 1000ms ease-in-out infinite;*/
}




.circuloResultadoGreen
{
    width:30px; height: 30px;
    border: 2px solid white;
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:-6px 0 0 2px;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
}



.circuloNivel1
{
    width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 10px 0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/libro01_NORMAL.png');
}

.circuloNivel2
{
    width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 10px 0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/libro02_NORMAL.png');
}
.circuloNivel3
{
    width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/libro03_NORMAL.png');
}

.circuloNivel1Active
{
     width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 10px 0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/libro01_ON.png');
}



.circuloNivelActive2
{
     width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 10px 0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/libro02_ON.png');
}

.circuloNivelActive3
{
     width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 10px 0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/libro03_ON.png');
}
.circuloNivel1:hover,.circuloNivel1:active
{
    background-image: url('../images/libro01_ON.png');
}

.circuloNivel2:hover,.circuloNivel2:active
{
    background-image: url('../images/libro02_ON.png');
}

.circuloNivel3:hover,.circuloNivel3:active
{
    background-image: url('../images/libro03_ON.png');
}

.circuloContenido
{
     width:94px; height: 94px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 10px 0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/pdfICON.png');
}


.circuloContenidoVideo
{
     width:94px; height: 94px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 10px 0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Contenido_Video00.png');
}

.btnBackIcon
{
    border:2px #fff solid;
    background-image: url('../img/myLeft00.png');
    width:50px;height: 50px;
    background-color: rgba(84,129,178,100%);
    border-radius: 100%;
    transform:scale(0.8);
}

.btnBackIcon:hover
{
 transform:scale(1); 
}
.btnHomekIcon
{
   background-image: url('./img/myHome00.png');
   width:50px;height: 50px;
    background-color: rgba(84,129,178,100%);
    border-radius: 100%;
}

.myContenedorToolTips
{
background-color: rgba(255,96,128,100%);
border-radius: 15px;
/*border: 2px solid #005cbf;*/
height: 65px;
width:300px;
margin:0 auto 0  auto;
padding:6px  0 0 0;
position: absolute;
bottom: 33px;
/*box-shadow : 2px  2px  5px  #000 ;*/
animation:texto-On_Off_00 10000ms linear infinite;
}


@keyframes moverPuntero_01 {
    0% {left:10px;bottom: -40px;
         border-top: 50px solid rgba(255,96,128,100%);
         border-left: 15px solid transparent;
         border-right:  15px solid transparent;}
    20% {left:10px;bottom: -40px;
         border-top: 50px solid rgba(255,96,128,100%);
         border-left: 15px solid transparent;
         border-right:  15px solid transparent;}
    21% {left:130px;bottom: -40px;
         border-top: 50px solid rgba(255,96,128,100%);
         border-left: 15px solid transparent;
         border-right:  15px solid transparent;}
    40% {left:130px;bottom: -40px;
         border-top: 50px solid rgba(255,96,128,100%);
         border-left: 15px solid transparent;
         border-right:  15px solid transparent;}
    41% {left:40px;bottom: -120px;z-index: 10;
         border-top: 150px solid rgba(255,96,128,100%);
         border-left: 10px solid transparent;
         border-right:  25px solid transparent;
         }
    60% {left:40px;bottom: -120px;z-index: 10;
         border-top: 150px solid rgba(255,96,128,100%);
         border-left: 10px solid transparent;
         border-right:  25px solid transparent;
         }
    61% {left:40px;bottom: -120px;z-index: 10;
         border-top: 150px solid rgba(255,96,128,100%);
         border-left: 10px solid transparent;
         border-right:  25px solid transparent;
         }
    100% {left:40px;bottom: -120px;z-index: 10;
          border-top: 150px solid rgba(255,96,128,100%);
          border-left: 10px solid transparent;
          border-right:  25px solid transparent;
         }
}


.myContenedorToolTips::after
{   content:"";
    display: block;
    border-top: 50px solid rgba(255,96,128,100%);
    border-left: 15px solid transparent;
    border-right:  15px solid transparent;
    position: absolute;
    bottom: -40px;
    z-index: 10;
    animation: moverPuntero_01 10000ms linear infinite, texto-On_Off_00 10000ms linear infinite;
}

@keyframes texto-On_Off_00 {
    0% {opacity:1;}
    20% {opacity:1;}
    21% {opacity:1;}
    40% {opacity:1;}
    41% {opacity:1;}
    60% {opacity:1;}
    61% {opacity:0;}
    100% {opacity:0;}
}

@keyframes texto-On_Off_01 {
    0% {opacity:1;}
    20% {opacity:1;}
    21% {opacity:0;}
    40% {opacity:0;}
    41% {opacity:0;}
    60% {opacity:0;}
    61% {opacity:0;}
    100% {opacity:0;}
}

@keyframes texto-On_Off_02 {
    0% {opacity:0;}
    20% {opacity:0;}
    21% {opacity:1;}
    40% {opacity:1;}
    41% {opacity:0;}
    60% {opacity:0;}
    61% {opacity:0;}
    100% {opacity:0;}
}

@keyframes texto-On_Off_03 {
    0% {opacity:0;}
    20% {opacity:0;}
    21% {opacity:0;}
    40% {opacity:0;}
    41% {opacity:1;}
    60% {opacity:1;}
    61% {opacity:0;}
    100% {opacity:0;}
}

@keyframes texto-Off_01 {
    0% {opacity:0;}
    1% {opacity:1;}
    80% {opacity:1;}
    81% {opacity:0;}
    100% {opacity:0;}
}

.animarTexto00
{
   animation:texto-On_Off_01 10000ms linear infinite;
}


.animarTexto01
{
   animation:texto-On_Off_02 10000ms linear infinite;
}

.animarTexto02
{
   animation:texto-On_Off_03 10000ms linear infinite;
}

.animarTexto03
{
   animation:texto-Off_01 11000ms  ease-out  1 ;
}

.myContenedorToolTips01
{
background-color: rgba(255,96,128,100%);
border-radius: 15px;
/*border: 2px solid #005cbf;*/
height: 65px;
width:300px;
margin:0 auto 0  auto;
padding:6px  0 0 0;
position: absolute;
bottom: 10px;
left:12px;
opacity:0;
/*box-shadow : 2px  2px  5px  #000 ;*/
/*animation:texto-On_Off_00 10000ms linear infinite;*/
}


.myContenedorToolTips01::after
{   content:"";
    display: block;
    border-top: 25px solid rgba(255,96,128,100%);
    border-left: 0px solid transparent;
    border-right:  15px solid transparent;
    position: absolute;
    bottom: -20px;
    left:10px;
    z-index: 10;
   
    /*animation: texto-On_Off_00 10000ms linear infinite;*/
}

.myContenedorToolTipsPlayEscuchar
{
background-color: rgba(255,96,128,100%);
border-radius: 15px;
height: 65px;
width:300px;
margin:0 auto 0  auto;
padding:6px  0 0 0;
position: absolute;
position:absolute;z-index: 2;left:50%;margin-left:-150px;
bottom: -120px;
opacity:0; 
}

.myContenedorToolTipsPlayEscuchar::after
{
   content:"";
    display: block;
    border-bottom:  75px solid rgba(255,96,128,100%);
    border-left: 10px solid transparent;
    border-right:  10px solid transparent;
    position: absolute;
    bottom: 60px;
    left:120px;
    z-index: 10; 
}

.myContenedorToolTipsGrabarAudio
{
background-color: rgba(255,96,128,100%);
border-radius: 15px;
height: 65px;
width:300px;
margin:0 auto 0  auto;
padding:6px  0 0 0;
position: absolute;
position:absolute;z-index: 2;left:50%;margin-left:-150px;
bottom: -100px;
opacity:0; 
}

.myContenedorToolTipsGrabarAudio::after
{
   content:"";
    display: block;
    border-top:  150px solid rgba(255,96,128,100%);
    border-left: 10px solid transparent;
    border-right:  10px solid transparent;
    position: absolute;
    bottom: -150px;
    left:120px;
    z-index: 10; 
}

.myContenedorToolTipsLimpiarEvaluar
{
background-color: rgba(255,96,128,100%);
border-radius: 15px;
height: 65px;
width:300px;
margin:0 auto 0  auto;
padding:6px  0 0 0;
position: absolute;
position:absolute;z-index: 2;left:50%;margin-left:-150px;
bottom: -170px;
opacity:0;   
}

.myContenedorToolTipsLimpiarEvaluar::after
{
   content:"";
    display: block;
    border-bottom:  130px solid rgba(255,96,128,100%);
    border-left: 10px solid transparent;
    border-right:  10px solid transparent;
    position: absolute;
    bottom: 60px;
    left:50px;
    z-index: 10; 
}

.myContenedorToolTips02
{
background-color: rgba(255,96,128,100%);
border-radius: 15px;
height: 65px;
width:300px;
margin:0 auto 0  auto;
padding:6px  0 0 0;
position: absolute;
position:absolute;z-index: 2;left:50%;margin-left:-50px;
bottom: -80px;
opacity:0;   
}

.myContenedorToolTips02::after
{
  content:"";
    display: block;
    border-bottom:  30px solid rgba(255,96,128,100%);
    border-left: 10px solid transparent;
    border-right:  10px solid transparent;
    position: absolute;
    bottom: 60px;
    left:95px;
    z-index: 10;  
}


.circuloModulo1
{
    width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 10px 0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo01_NORMAL.png');
}

.circuloModulo2
{
    width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 10px 0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo02_NORMAL.png');
}
.circuloModulo3
{
    width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo03_NORMAL.png');
}

.circuloModulo4
{
    width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:8px  0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo04_NORMAL.png');
}

.circuloModulo5
{
    width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:8px 0 0 8px;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo05_NORMAL.png');
}


.circuloModulo6
{
    width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:8px 0 0 8px;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo06_NORMAL.png');
}


.circuloModulo7
{
    width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:8px 0 0 8px;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo07_NORMAL.png');
}


.circuloModulo1Active
{
     width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 10px 0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo01_ON.png');
}



.circuloModuloActive2
{
     width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 10px 0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo02_ON.png');
}

.circuloModuloActive3
{
     width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:0 10px 0 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo03_ON.png');
}


.circuloModuloActive4
{
     width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:8px 0;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo04_ON.png');
}

.circuloModuloActive5
{
     width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:8px 0 0 8px;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo05_ON.png');
}

.circuloModuloActive6
{
     width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:8px 0 0 8px;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo06_ON.png');
}

.circuloModuloActive7
{
     width:94px; height: 93px;
    /*border: 2px solid white;*/
    background-color: rgba(0,255,0,1);
    border-radius: 100%;
    float:left;
    margin:8px 0 0 8px;
    padding:0 0 0 0;
    text-align: center;
    box-shadow : 2px  2px  5px  #000 ;
    background-image: url('../images/Modulo07_ON.png');
}


.circuloModulo1:hover,.circuloModulo1:active
{
    background-image: url('../images/Modulo01_ON.png');
}

.circuloModulo2:hover,.circuloModulo2:active
{
    background-image: url('../images/Modulo02_ON.png');
}

.circuloModulo3:hover,.circuloModulo3:active
{
    background-image: url('../images/Modulo03_ON.png');
}

.circuloModulo4:hover,.circuloModulo4:active
{
    background-image: url('../images/Modulo04_ON.png');
}


.circuloModulo5:hover,.circuloModulo5:active
{
    background-image: url('../images/Modulo05_ON.png');
}

.circuloModulo6:hover,.circuloModulo6:active
{
    background-image: url('../images/Modulo06_ON.png');
}


.circuloModulo7:hover,.circuloModulo7:active
{
    background-image: url('../images/Modulo07_ON.png');
}

.panelVideoContenido00
{
  position: absolute; 
  left: 0; 
  right: 0; 
  margin: 20px auto 0 auto;
  padding: 20px 0 0 0;
  width: 90%; /* Need a specific value to work */
  max-width: 860px;
  /*min-width: 21.875 rem;*/
  height: 95%;
  max-height: 492px;
  background: rgba(0,0,0,35%);
  z-index: 1;
}


.panelVideoContenido01
{
    margin: 0 auto;padding:0 0;
    width: 95%;
    max-width: 840px;
    height: 95%;
    max-height: 472px;
    background: rgba(0,0,0,90%); 
    text-align: center;
}

.circuloX00
{
    display: block;
    width: 40px;height: 40px;
    border-radius: 100%;
    position: absolute;
    bottom: 95%;
    left:97%;
    z-index: 1;   
    background: #555;
    border: 2px solid #bbb;
    background-image: url('../images/iconoX00.png');
}

.btnPlusBPM00
{
    background: rgba(255,96,128,100%);
    border: 2px solid #fff; 
    border-radius: 45%;
    width: 60px;
    height: 26px;
    position: absolute;
    z-index: -1;
    left:20px;
    top:2px;
    color:#fff;
    text-align: center;
    padding: 0 0;
}

.btnLessBPM00
{
    background: rgba(255,96,128,100%);
    border: 2px solid #fff; 
    border-radius: 45%;
    width: 60px;
    height: 26px;
    position: absolute;
    z-index: -1;
    left:20px;
    top:30px;
    color:#fff;
    text-align: center;
    padding: 0 0;
}

.txtBtnPlus
{
    color: #fff;
    font-family: arial; //'myFlautinFont_00';
    font-size: 30px;
    padding: 0 0;
    position:absolute;top:-11px;left:36px;
}

.txtBtnLess
{
    color: #fff;
    font-family: arial; //'myFlautinFont_00';
    font-size: 40px;
    padding: 0 0;
    position:absolute;top:-20px;left:36px;
}