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

@font-face {
    font-family: "myunadfont01";
    src: url("../fonts/ErasITCbyBT-Demi.otf");
}


@font-face {
    font-family: "myfont_000";
    src: url("../fonts/ITCFranklinGothicStd-Book.otf") format("truetype");
}

.panelPpal_00{
  margin: 0 auto; padding: 0 0;
  background-color: #fefefe;
  width: 100%;
}

.panelPpal_01{
  margin:30px auto 0 auto; padding:0 0;
  background-color: #fff;
  width: 352px;
  border-radius: 7px;
  border:1px solid #f93c6c;
  box-shadow:  0px 0px 60px #ccc;
}

.panelPpal_02{
  margin:0 auto; padding: 8px 0 0 0;
  background-color: #f93c6c;
  width: 350px;
  border-radius: 7px;
}

.panelPpal_03{
  margin:0 auto 0 auto; padding: 20px 0 0 0;
  background-color: #fefed9;
  /*height: 200px;*/
  width: 348px;
  border-radius: 7px;
}

.myGridHeaderForms{
   display: grid;
   grid-template-columns: 1fr;
   margin: 0 0;padding: 0 0;
   /*height: 10px;*/
}

.myDivForm0{
  background:none; /*rgba(255,255,255,30%);*/
  display: grid;
  gap:1rem;
  /*grid-auto-rows:350px;*/
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
  padding:14px 0 14px 0;
  width: 97%;
  margin: 0 auto;
  /*box-shadow: 0px 0px 15px #000;*/
}

.myDivForm1{
  max-width: 90%;
  min-width: 350px;
  /*height: 350px;*/
  padding:0 0;
  margin: 0 auto;
  background-color:none; /* rgba(255,255,255,80%);*/
  border-radius:5px;
}

/*
.myDivForm1::before,.myDivForm00::before{
    content:"";
    display:  block;
    background-color: rgba(255,96,128,50%);
    width: 5px;
    height: 100%;
    border-top-left-radius:  3px;
    border-bottom-left-radius: 3px;
    float: left;
}*/

.btnModulos_00{
    color:white;
    font-size: 20px;
    background-color: rgb(0,70,105);
    padding: 5px 10px 5px 10px;
    border-radius:  10px;  
    margin: 5px auto 10px auto;
    width: 500px;
}
.btnModulos_01{
    color:white;
    font-size: 20px;
    background:url('../img/fondoBotones_17032020_00.png');
    background-repeat: no-repeat;
    background-color: rgba(244,172,39,0);
    
    padding: 5px 10px 5px 10px;
    /*border-radius:  10px;*/  
    margin: 5px auto 10px auto;
    width: 531px;
    height: 56px;
}
.btnModulos_02{
    color:white;
    font-size: 20px;
    background-color: rgb(230,124,62);
    padding: 5px 10px 5px 10px;
    border-radius:  10px;  
    margin: 5px auto 10px auto;
    width: 500px;
}
.btnModulos_03{
    color:white;
    font-size: 20px;
    background-color: rgb(195,42,163);
    padding: 5px 10px 5px 10px;
    border-radius:  10px;  
    margin: 5px auto 10px auto;
    width: 500px;
}

.btnModulos_00:hover, .btnModulos_01:hover, .btnModulos_02:hover,.btnModulos_03:hover{
    color:none;
    text-decoration: none;
    /*background-color: rgba(231,175,54,50%);
    margin: 18px auto 5px 20px;*/
    border-radius: none; /*20px;*/
    /*-webkit-box-shadow: 3px 5px 3px 0.35px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 3px 3px 5px 0.35px rgba(0, 0, 0, 0.35);
    box-shadow: 3px 3px 5px 0.35px rgba(0, 0, 0, 0.35);
    transition: border-radius 0.25s ease-in-out, box-shadow 0.25s ease-in-out,background-color 0.25s ease-in-out;
    */
}

.normalHover{
    color:white;
    text-decoration: none;
    font-size: 20px;
}

.normalHover:hover{
    text-decoration: none;
}


button,label{
    font-family: 'Roboto',sans-serif;
 }
 
/* g,line,path {cursor: wait;}
 #divTrack_Hj1_Grp1_Trk1 {cursor: wait;}
*/

.myCursor{
    width: 40px;
    height: 40px;
    position: absolute;
    background-color: none;
    z-index: 100;
}
  
/* FONDO DEGRADADO: */
.bg1{
/*background: rgba(190,190,190,100%);*/
/*background: -moz-linear-gradient(top,rgba(190,190,190,100%) 0%, rgba(190,190,190,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(190,190,190,100%)), color-stop(100%,rgba(190,190,190,1)));
background: -webkit-linear-gradient(top, rgba(190,190,190,100%) 0%, rgba(190,190,190,1) 100%);
background: -o-linear-gradient(top, rgba(190,190,190,100%) 0%, rgba(190,190,190,1) 100%);
background: -ms-linear-gradient(top, rgba(190,190,190,100%) 0%, rgba(190,190,190,1) 100%);*/
background:linear-gradient(0deg , rgba(190,190,190,100%),rgba(255,255,255,100%) ,rgba(190,190,190,1)); /*linear-gradient(to bottom, rgba(190,190,190,100%) 0%, rgba(190,190,190,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#bebebe', GradientType=0 );*/
  }

/* BOTONES VARIOS: */
.btn_0{
  font-size: 2em;
  font-weight: bold;
  color: #fff;
  width: 300px;
  height: 64px;
  padding-top: 0;
  background-color: none;/* rgb(240,189,67); amarillo*/
  /*background-color: rgb(0,162,255);
  border: 1px solid #00000022;*/
  border-radius: 5px;
  margin: 0 0px 0 0;
  /*float:left;*/
}

.btn1{
  font-size: 2em;
  font-weight: bold;
  color: #fff;
  width: 36px;
  height: 37px;
  padding: 0 0 0 0;
  margin: 0 10px 0 0;
  background-color:rgb(235,122,0);/* rgb(245,90,68); Rojo //rgb(240,189,67);//Amarillo quemao*/
  /*background-color: rgb(120,86,52);//marron
  background-color: rgb(0,162,255);//azul claro*/
  border: 1px solid #00000022;
}
.btn1:hover, .btn2:hover, .btnperf:hover{
 /* background:linear-gradient(0deg , rgba(119,99,162,1),rgba(200,200,200,100%) ,rgba(119,99,162,1));*/
 background:linear-gradient(0deg , rgba(119,99,162,0.35),rgba(255,255,255,1),rgba(225,96,128,0.35));
}
.btn2{
  font-size: 1.5em;
  font-weight: bold;
  color: #000;
  margin-right: 0.5em;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
}
.btnperf{
  font-size: 2em;
  font-weight: bold;
  color: #fff;
  width: 50px;
  height: 50px;
  padding-top: 0;
  background-color: rgb(244,172,39);
  border: 1px solid #00000022;
}
.btncomp0, .btncomp1{
  font-size: 15px;
  width: 24px;
  height: 24px;
  font-weight: normal;
  color: rgb(245,90,68);/*Naranja;   rgb(120,69,14);/*---Marron*/
  box-shadow: none;
  padding: 0 0 0 0;
  text-align: center;
  margin-top: 0;
  text-shadow: 3px 3px 3px rgba(0,0,0,0);
  background-color: white ;/*; rgb(97,216,54);//Azul claro*/
  
  
  /*border: 1px solid #00000022;*/
  
  
}
.btncomp0{
  color: rgb(255,255,255);
  background-color:rgb(245,90,68);/*Naranja  //rgb(240,189,67)---Amarillo; //---Marron rgb(120,69,14);//------rgb(0,162,255);//AzulClaro*/
}

/* FELCHAS NARANJAS: */
.divup {
    background: url('../img/up0.png');
    margin:  -5px 0 5px 0;
    width: 20px;
    height: 10px;
    cursor: pointer;
}
.divup:hover {
    background: url('../img/up1.png');
  }
.divup:active {
    background: url('../img/up2.png');
  }
.divdw {
    background: url('../img/dw0.png');
    margin: 0 0 0 0; /*7px;*/
    width: 20px;
    height: 10px;
    cursor: pointer;
    /*margin-bottom: 25px;*/
}
.divdw:hover {
    background: url('../img/dw1.png');
  }
.divdw:active {
    background: url('../img/dw2.png');
  }
.divma {
    background: url('../img/mas.png');
    margin:  0 7px 0px 15px;
    width: 32px;
    height: 39px;
    cursor: pointer;
    background-repeat: no-repeat;
}
.divma:hover {
    background: url('../img/masm.png');
  }
.divma:active {
    background: url('../img/masn.png');
  }
.divme {
    background: url('../img/menos.png');
    margin: 10px 7px 25px 15px;
    width: 32px;
    height: 22px;
    cursor: pointer;
    background-repeat: no-repeat;
}
.divme:hover {
    background: url('../img/menosm.png');
  }
.divme:active {
    background: url('../img/menosn.png');
  }
.linean{height: 7px;background-color: #f4ac27;}

/* MEGA MENU: */
.megamenu-li {
  position: static;
}
.megamenu {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  padding: 15px;
}
.dropdown-toggle{
  color: rgb(107,68,24) !important;  
  /*color: rgb(13,88,131) !important;*/
  font-size: 20px;
  margin-left: 20px;
}
.dropdown-toggle:hover{
  text-shadow: 0px 0px 4px rgb(107,68,24);  
  /*text-shadow: 0px 0px 4px rgb(13,88,131);*/
}
.figimg{
  width: 64px;
  height: 64px;
  margin: 0px 1px 0px 1px;
  display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
}
.figimg:hover{
  background-color: rgba(0,0,0,0.1);
}
.figimgtam{
  max-height: 62px;
  max-width: 62px;
}
.activ{
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #F55EA4;
  width: 50px;
  height: 50px;
  font-size: 2em;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10px;
}
.activ:hover{
  background-color:  #EB7A00;
}



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


/* QUITA FLECHAS DE INPUT NUMBER: */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] { -moz-appearance:textfield; }

.divSeccionOpcionesTranspose01{
  margin: 0;padding: 2px;
  width: 98%;
  height: 30px;
  background: rgba(255,255,255, 0.2);
  border-radius: 10px;
}


.divSeccionOpcionesTranspose02{
  margin: 0;padding: 2px;
  width: 98%;
  height: 149px;
  background: rgba(255,255,255, 0.2);
  border-radius: 10px;
}



.divMenuTranspose{
  margin: auto; padding: 0;
  position: relative;
  background: rgba(245, 67, 126, 1);
  width:280px;
  height:190px;
  top:-100px;left:-295px;right: 0;bottom: 0;
  border-radius: 10px;
  border:2px rgb(9, 84, 197) solid;
  text-align: center;
 /* background-image: url('../images/verdetalles00.svg');
  opacity:0;*/
  visibility: hidden;
  z-index: 1;
  box-shadow: 3px 3px 3px  #000 ;
}
/*
.divMostrarMenuTranspose{
  margin: 0; padding: 0;
}

.divMostrarMenuTranspose:hover .divMenuTranspose{
  animation-duration: 1s;
  animation-name: mostrarLupaVerDetalles;
  animation-fill-mode: forwards;
  /*animation-iteration-count: 1;
  animation-direction: alternate;
  animation-play-state:running;*/
/*}

@keyframes mostrarLupaVerDetalles {
 from {
   opacity:0;
 }
 to {
   opacity:1;
 }
}
*/
.hTranspose{
  margin: 0;padding: 0;
  color: white;
  font-size: 20px;
}

.hTranspose01{
  margin: 0;padding: 0;
  color: black;
  font-size: 20px;
}

.Btn_Trompeta{
 margin: 0;padding: 0;
 width: 50px;height: 50px;
 background-color: #f93c6c; 
 border: #fff 2px solid;
 border-radius: 100%;
 background-image: url("../images/IconoTrompeta00.svg");
 background-repeat: no-repeat;
}

.Btn_Trombon{
  margin: 0;padding: 0;
  width: 50px;height: 50px;
  background-color: #f93c6c; 
  border: #fff 2px solid;
  border-radius: 100%;
  background-image: url("../images/IconoTrombon00.svg");
  background-repeat: no-repeat;
 }

 .Btn_SaxoAlto{
  margin: 0;padding: 0;
  width: 50px;height: 50px;
  background-color: #f93c6c; 
  border: #fff 2px solid;
  border-radius: 100%;
  background-image: url("../images/IconoSaxo00.svg");
  background-repeat: no-repeat;
 }

 .Btn_SaxoTenor{
  margin: 0;padding: 0;
  width: 50px;height: 50px;
  background-color: #f93c6c; 
  border: #fff 2px solid;
  border-radius: 100%;
  background-image: url("../images/IconoSaxo00.svg");
  background-repeat: no-repeat;
 }

 .Btn_Clarinete{
  margin: 0;padding: 0;
  width: 50px;height: 50px;
  background-color: #f93c6c; 
  border: #fff 2px solid;
  border-radius: 100%;
  background-image: url("../images/IconoClarinete00.svg");
  background-repeat: no-repeat;
 }

 .Btn_Violin{
  margin: 0;padding: 0;
  width: 50px;height: 50px;
  background-color: #f93c6c; 
  border: #fff 2px solid;
  border-radius: 100%;
  background-image: url("../images/IconoViolin00.svg");
  background-repeat: no-repeat;
 }

 .Btn_Viola{
  margin: 0;padding: 0;
  width: 50px;height: 50px;
  background-color: #f93c6c; 
  border: #fff 2px solid;
  border-radius: 100%;
  background-image: url("../images/IconoViola00.svg");
  background-repeat: no-repeat;
 }

 .Btn_Chello{
  margin: 0;padding: 0;
  width: 50px;height: 50px;
  background-color: #f93c6c; 
  border: #fff 2px solid;
  border-radius: 100%;
  background-image: url("../images/IconoChello00.svg");
  background-repeat: no-repeat;
 }