/*-----------------------------------------------------------PC----------------------------------------------------------------------------*/
 body{
     background-color: #000000;
     font-family: arial;
}
 .accion{
     margin: 1em 0 0 0;
     display: inline-block;
     font-size: 1.3em;
     padding: 3px 1em 3px 1em;
     border-radius: 3px;
     background-color: red;
     color: #fff!important;
}
 .accion:hover{
     color: #000!important;
}
 #Contenedor-principal{
     border: 10px solid #F9CD05;
     background: #000000;
     width: 900px;
     height: auto;
     margin: 0 auto;
     margin-bottom: 5em!important;
}
 #informacion h1,h2,h3,h4,h5{
     color: red;
}
 #Cabecera{
     width: 100%;
     height:150px;
     float: left;
     background: #000000 url(../imagenes/encabezado1.jpg) no-repeat;
     background-size: 100% auto;
}
 .icons-responsive{
     display: none;
}
 .telefonos {
     width: 50%;
     height: 50px;
     color: #F9CD05;
     text-align: center;
     float: left;
     font-size: 1.2em;
}
 .telefonos h1{
     font-size: 1em;
     color: #F9CD05;
     margin-top: 0px;
     font-weight: lighter;
}
 .telefonos a{
     color: #ffffff;
     font-size: 1.3em;
     font-style: italic;
}
 .tel{
     text-decoration: none;
     color: #ffffff;
     text-align: center;
     font-size: 1.3em;
     font-style: italic;
}
 #menu{
     margin-left: 15px;
}
 .boton-menu{
     border: solid #F9CD05 2px;
     width: 140px;
     padding: 2px;
     text-align: center;
     font-size: 1em;
     color: #ffffff;
     background: transparent;
     float: left;
     margin-right: 5px;
     cursor: pointer;
}
 .boton-menu:hover{
     border: solid transparent 2px;
     font-size: 0.9em;
}
 .boton-contacto{
     border: solid red 2px;
     width: 140px;
     padding: 2px;
     text-align: center;
     font-size: 1em;
     color: #000000;
     font-weight: bold;
     background: #F9CD05;
     float: left;
     margin-right: 5px;
     cursor: pointer;
}
 .boton-contacto:hover{
     border: solid transparent 3px;
     font-size: 0.9em;
}
/*banner*/
 #banner{
     margin-bottom: 20px;
     margin-top: 250px;
}
 .rslides {
     position: relative;
     list-style: none;
     overflow: hidden;
     width: 100%;
     padding: 0;
     margin: 0;
}
 .rslides li {
     -webkit-backface-visibility: hidden;
     position: absolute;
     display: none;
     width: 100%;
     left: 0;
     top: 0;
}
 .rslides li:first-child {
     position: relative;
     display: block;
     float: left;
}
 .rslides img {
     display: block;
     height: auto;
     float: left;
     width: 100%;
     border: 0;
}
/*fin-banner*/
 .files{
     width: 90%;
     margin-right: 5%;
     margin-left: 5%;
     height: 45px;
     text-align: center;
     margin-bottom: 45px;
}
 .files-bottom{
     margin-bottom: 30px;
}
 .social-col{
     background: #FDCD65;
     width: 20%;
     float: left;
}
 .social-col img{
     height: 50px;
     margin: 10px;
     border-radius: 50%;
     background: #ffffff;
}
 .social-col img:hover{
     -webkit-box-shadow: 4px 6px 44px -12px rgba(0,0,0,0.75);
     -moz-box-shadow: 4px 6px 44px -12px rgba(0,0,0,0.75);
     box-shadow: 4px 6px 44px -12px rgba(0,0,0,0.75);
}
 .tarjetas-col{
     background: #cccccc;
     width: 100%;
     float: left;
     -moz-transition: all 3s;
     -webkit-transition: all 3s;
     -o-transition: all 3s;
     -ms-transition: all 3s;
     transition: all 3s;
}
 .tarjetas-col:hover{
     background: #ffffff;
     -moz-transition: all 3s;
     -webkit-transition: all 3s;
     -o-transition: all 3s;
     -ms-transition: all 3s;
     transition: all 3s;
}
 .tarjetas-col img{
     height: 50px;
     margin: 10px;
}
 .seleccionar-col{
     background: #F9CD05 url(../imagenes/titulo%201.jpg) no-repeat;
     background-size: 100% auto;
     background-position: center;
     width: 100%;
     height: 70px;
     float: left;
     -moz-transition: all 1s;
     -webkit-transition: all 1s;
     -o-transition: all 1s;
     -ms-transition: all 1s;
     transition: all 1s;
}
 .seleccionar-col:hover{
     background: #F9CD05 url(../imagenes/titulo%202.jpg) no-repeat;
     background-size: 100% auto;
     background-position: center;
     -moz-transition: all 1s;
     -webkit-transition: all 1s;
     -o-transition: all 1s;
     -ms-transition: all 1s;
     transition: all 1s;
}
 .seleccionar-col a{
     color: #000000;
     text-decoration: none;
     font-size: 2em;
     transform:translateX(100%);
}
 #informacion{
     background: #FEFF99;
     border: 10px solid #F9CD05;
     width: 87.9%;
     margin: 5%;
     text-align: center;
     font-weight: bold;
     margin-bottom: 20px;
     margin-top: 0px;
}
 #informacion a{
     color: #000000;
     text-decoration: none;
}
 #informacion strong{
     font-weight: bold;
}
 #fotter{
     text-align: center;
     width: 100%;
     padding-bottom: 20px;
     font-style: italic;
}
 #fotter h1{
     color: #F1B924;
     font-size: 0.8em;
}
 #fotter h5{
     color: #F1B924;
     font-size: 0.8em;
}
 #fotter a{
     color: #F1B924;
     font-size: 0.8em;
     text-decoration: none;
}
 .audio{
     width: 100px;
}
/*imagenes*/
 #albumes{
     background: #000000;
     width:800px;
     height: auto;
     margin:0 auto;
     margin-top: 250px;
     margin-bottom: 20px;
}
 #botones-de-cambio{
     margin-left: 28px;
     margin-top: 10px;
}
 .boton-uno{
     border: solid #F9CD05 2px;
     width: 120px;
     padding: 2px;
     text-align: center;
     font-size: 1em;
     color: #ffffff;
     background: transparent;
     float: left;
     margin-right: 5px;
     cursor: pointer;
}
 .boton-uno:hover{
     border: solid transparent 2px;
     font-size: 0.9em;
}
 .imagen-mariachi1{
     width:600px;
     height: 300px;
     margin-top: 30px;
     margin-left: 98px;
}
/*fin de imagenes*/
 #videos{
     border: 10px solid #676767;
     background: #000000;
     width:800px;
     height: auto;
     margin:0 auto;
     padding-top: 35px;
     padding-bottom: 35px;
     margin-top: 250px;
     margin-bottom: 35px;
}
 #Lista{
     width:50%;
     height:auto;
     float: left;
     padding-top: 6px;
}
 #Lista br{
    display: none;
}
 .videos-musicales{
     width:90%;
     height: auto;
     border: solid red 2px;
     text-align: center;
     font-size: 1em;
     color: #000000;
     font-weight: bold;
     background: #F9CD05;
     cursor: pointer;
     float:right;
     margin-top: 5px;
     margin-bottom:5px;
     margin-right: 5px;
     margin-left: 5px;
}
 .lista-de-videos{
     width:90%;
     height: auto;
     border: solid red 2px;
     text-align: center;
     font-size: 1em;
     color: #ffffff;
     background: transparent;
     cursor: pointer;
     float:right;
     margin-top: 5px;
     margin-bottom:5px;
     margin-right: 5px;
     margin-left: 5px;
}
 .lista-de-videos:hover{
     border: solid transparent 3px;
     font-size: 0.9em;
}
 .lista-de-videos a{
     text-decoration: none;
     color: #ffffff;
}
 #Reproductor{
     width:50%;
     height:auto;
     float: right;
     text-align: center;
}
 #Reproductor h3{
     color: red;
     font-size: 1em;
     border: 2px solid #ffffff;
     width: auto;
     margin-right: 5%;
     margin-left: 5%;
}
 #Reproductor h1{
     color: red;
     font-size: 1em;
     border: 2px solid #ffffff;
     width: auto;
     margin-right: 5%;
     margin-left: 5%;
}
 .video{
     width: 90%;
     margin-top: 0px;
     margin-bottom: 30px;
     margin-right: 5%;
     margin-left: 5%;
     height: 300px;
}
/*Musica*/
 #musica{
     border: 10px solid #F9CD05;
     background: #000000;
     width:800px;
     height: 400px;
     margin:0 auto;
     margin-top: 250px;
     margin-bottom: 20px;
}
 #reconocimientos{
     border: 10px solid #676767;
     background: #000000;
     width:800px;
     height: auto;
     margin:0 auto;
     margin-top: 250px;
     margin-bottom: 20px;
     padding-bottom: 30px;
}
 .imagen-reconocimiento{
     width:90%;
     height: auto;
     margin-top: 30px;
     margin-left: 5%;
     margin-right: 5%;
}
 #botones-de-bandera{
     margin-left: 40px;
     margin-top: 10px;
}
 .boton-verde{
     width: 140px;
     padding: 1px;
     text-align: center;
     font-size: 1em;
     color: #ffffff;
     background:green;
     float: left;
     margin-right: 5px;
     cursor: pointer;
     border: none;
}
 .boton-blanco{
     width: 140px;
     padding: 1px;
     text-align: center;
     font-size: 1em;
     color: red;
     background: white;
     float: left;
     margin-right: 5px;
     cursor: pointer;
     border: none;
}
 .boton-rojo{
     width: 140px;
     padding: 1px;
     text-align: center;
     font-size: 1em;
     color: #ffffff;
     background: red;
     float: left;
     margin-right: 5px;
     cursor: pointer;
     border: none;
}
/* form de contacto*/
 #contacto{
     color: #ffffff;
     text-align: center;
     padding-top: 250px;
     padding-bottom: 30px;
     margin-bottom: 30px;
     min-height: auto;
     width: 90%;
     margin-right: 5%;
     margin-left: 5%;
}
 .contacto-input{
     width:260px;
     height: 20px;
}
 .contacto-input-textarea{
     width:260px;
     height: 100px;
}
/*pagina responsiva menu*/
 .icons-menu{
     width: 60px;
     padding: 10px;
}
/*pagina musica*/
 #musica{
     border: 10px solid #F9CD05;
     background: #000000;
     width:800px;
     height: auto;
     margin:0 auto;
     padding-top: 35px;
     padding-bottom: 35px;
     margin-top: 250px;
     margin-bottom: 35px;
}
 .cont-musica{
     width: 50%;
     float: left;
     text-align: center;
}
 .graduacion1{
     margin-left: 25%;
     margin-right: 25%;
}
 .graduacion{
     margin-left: 25%;
     margin-right: 25%;
}
 .graduacion img{
     width: 1000px;
}
 .botones-musica img{
     width: 90%;
     opacity: 0.8;
     margin-bottom: 30px;
     -webkit-box-shadow: -1px 1px 58px -6px rgba(255,255,255,1);
     -moz-box-shadow: -1px 1px 58px -6px rgba(255,255,255,1);
     box-shadow: -1px 1px 58px -6px rgba(255,255,255,1);
     -moz-transition: all 1s;
     -webkit-transition: all 1s;
     -o-transition: all 1s;
     -ms-transition: all 1s;
     transition: all 1s;
}
 .botones-musica img:hover{
     opacity: 1.0;
     -webkit-box-shadow: -1px 1px 24px -2px rgba(255,255,255,1);
     -moz-box-shadow: -1px 1px 24px -2px rgba(255,255,255,1);
     box-shadow: -1px 1px 24px -2px rgba(255,255,255,1);
     -moz-transition: all 1s;
     -webkit-transition: all 1s;
     -o-transition: all 1s;
     -ms-transition: all 1s;
     transition: all 1s;
}
 .audios-musica{
     width: 100%;
     text-align: center;
     font-size: 1.2em;
     font-weight: bold;
}
 .audios-musica a{
     color: #F9CD05;
     text-decoration: none;
     font-family: 'Shadows Into Light Two', cursive;
}
 .audios-musica img{
     width: 100%;
}
/*CONTACTO*/
 #contacto{
     border: 10px solid #F9CD05;
     background: #000000;
     width:800px;
     height: auto;
     margin:0 auto;
     padding-top: 35px;
     padding-bottom: 35px;
     margin-top: 250px;
     margin-bottom: 35px;
     color: #F9CD05;
     text-decoration: none;
     font-family: 'Shadows Into Light Two', cursive;
     font-size: 1em;
     font-weight: bold;
}
 .bloque-contacto{
     width:44%;
     height:auto;
     float: left;
     padding: 2%;
     text-align: left;
     color: red;
}
 .img-contacto{
     width: 100%;
     height: 200px;
     margin-top: 17px;
}
 .input-contacto{
     width:240px;
     height: 20px;
     float: right;
}
 .textarea-contacto{
     width:240px;
     height: 100px;
     float: right;
}
 .keywords{
     width: 100% 
}
 .cont-keywords{
     width: 46%;
     float: left;
     line-height: 20px;
     padding-right: 2%;
     font-size: 0.8em;
     text-align: center;
     color: #ffffff;
}
 .cont-keywords ul{
     list-style: none;
     list-style-position: inherit;
}
 .cont-keywords a{
     color: #ffffff;
     text-decoration: none;
}
 .cont-keywords a:hover{
     text-decoration: underline;
}
 .tablaprecios{
     text-align: center;
     width: 100%;
     min-width: 300px;
     background-color: #F9CD05;
}
 .tablaprecios td{
     border:1px solid #000;
}
/*-----------------------------------------------------------TABLET----------------------------------------------------------------------------*/
 @media (max-width:1000px) and (min-width:699px ){
     #Contenedor-principal{
         border: 10px solid #F9CD05;
         background: #000000;
         width: 600px;
         height: auto;
         margin: 0 auto;
         margin-bottom: 5em!important;
    }
     .icons-responsive{
         display: inline;
         width: 70px;
         float: right;
         margin: 10px;
         margin-left: 0px;
         background: #F9CD05;
    }
     #menu{
         display: none;
    }
     .telefonos h1{
         margin-top: 0;
    }
     #videos{
         width:500px;
         margin-bottom: 30px;
    }
     #musica{
         width:500px;
    }
    /*CONTACTO*/
     #contacto{
         width:500px;
    }
     .bloque-contacto{
         width:94%;
         height:auto;
         float: left;
         padding: 2%;
         text-align: left;
         color: red;
    }
     .img-contacto{
         width: 100%;
         height: auto;
    }
    /**/
     .audios-musica img{
         width: 100%;
    }
     #reconocimientos{
         width:500px;
    }
     .boton-verde{
         margin-bottom: 10px;
    }
     .boton-blanco{
         margin-bottom: 10px;
    }
     .boton-rojo{
         margin-bottom: 10px;
    }
     #albumes{
         background: #000000;
         width:500px;
         height: auto;
         margin:0 auto;
         margin-top: 250px;
         margin-bottom: 20px;
    }
}
/*-----------------------------------------------------------SMARTPHONE----------------------------------------------------------------------------*/
 @media (max-width:700px) and (min-width:0px ){
     #Contenedor-principal{
         border: 10px solid #F9CD05;
         background: #000000;
         width: 90%;
         height: auto;
         margin: 0 auto;
         margin-bottom: 5em!important;
    }
     #Cabecera{
         width: 100%;
         height:90px;
         float: left;
         background: #000000 url(../imagenes/encabezado1.jpg) no-repeat;
         background-size: 100% auto;
         background-position: left top;
    }
     .icons-responsive{
         display: inline;
         width: 60px;
         float: right;
         margin: 10px;
         margin-left: 0px;
         background: #F9CD05;
    }
     #menu{
         display: none;
    }
     #videos{
         width:100%;
         border: 0px;
         margin-top: 220px;
         margin-bottom: 0px;
    }
     #musica{
         width:100%;
         border: 0px;
         margin-top: 260px;
         margin-bottom: 0px;
    }
    /*CONTACTO*/
     #contacto{
         width:100%;
         border: 0px;
         background: #000000;
         height: auto;
         margin:0 auto;
         padding-top: 100px;
         padding-bottom: 0px;
         margin-bottom: 0px;
         color: #F9CD05;
         text-decoration: none;
         font-family: 'Shadows Into Light Two', cursive;
         font-size: 1em;
         font-weight: bold;
    }
     .bloque-contacto{
         width:100%;
         padding: 0px;
         padding-bottom: 0px;
    }
     .img-contacto{
         width: 100%;
         height: auto;
    }
     .audios-musica img{
         width: 100%;
    }
     .cont-musica{
         width: 100%;
         float: left;
         text-align: center;
    }
     .graduacion1{
         margin-left: 0px;
         margin-right: 0px;
    }
     .graduacion{
         margin-left: 0px;
         margin-right: 0px;
    }
     #Lista{
         width:100%;
         height:auto;
         float: left;
         padding-top: 0px;
    }
     #Reproductor{
         width:100%;
         height:auto;
         float: left;
    }
     #reconocimientos{
         width:100%;
         border: 0px;
         font-size: 1em;
         padding: 0px;
    }
     #botones-de-bandera{
         margin-left: 0px;
         padding-top: 30px;
    }
     .boton-verde{
         width: 80%;
         margin-right: 10%;
         margin-left: 10%;
         margin-bottom: 10px;
         text-align: center;
         float: inherit;
    }
     .boton-blanco{
         width: 80%;
         margin-right: 10%;
         margin-left: 10%;
         margin-bottom: 10px;
         text-align: center;
         float: right;
    }
     .boton-rojo{
         width: 80%;
         margin-right: 10%;
         margin-left: 10%;
         margin-bottom: 10px;
         text-align: center;
         float: right;
    }
     .files img{
         max-width: 90%;
    }
     .seleccionar-col{
         background: #F9CD05 url(../imagenes/text4.png) no-repeat;
         background-size: 150px auto;
         background-position: center;
         width: 100%;
         height: 50px;
         float: left;
    }
     .seleccionar-col:hover{
         background: #F9CD05 url(../imagenes/text4.png) no-repeat;
         background-size: 150px auto;
         background-position: center;
         width: 100%;
         height: 50px;
         float: left;
    }
     #informacion{
         background: #FEFF99;
         border: 0px solid #F9CD05;
         width: 100%;
         margin: 0%;
         text-align: center;
         font-weight: bold;
         margin-bottom: 20px;
         margin-top: 0px;
         padding-bottom: 15px;
         padding-top: 15px;
    }
     #fotter{
         text-align: center;
         width: 100%;
         padding-bottom: 20px;
         font-style: italic;
         font-size: 0.7em;
    }
     .telefonos{
         width: 100%;
         height: 50px;
         color: #F9CD05;
         text-align: center;
         float: left;
         font-size: 1.2em;
         margin-top: 15px;
         margin-bottom: 20px;
    }
     .telefonos h1{
         margin-top: 0px;
         font-size: 1.2em;
    }
     .telefonos a{
         color: #ffffff;
         font-size: 1.1em;
    }
     .tel{
         text-decoration: none;
         color: #ffffff;
         text-align: center;
         font-size: 1.3em;
         font-style: italic;
         background: red;
         padding: 3px;
         border: red 10px groove;
         border-radius: 15px;
         text-shadow: 0px 0px 5px #000000;
    }
     .tarjetas-col img{
         width: 90%;
         height: auto;
         margin: 10px;
    }
     .files{
         margin-bottom: 30px;
    }
     .social-col{
         background: transparent;
    }
     .social-col img{
         width: 40px;
         height: 40px;
         border: 1px solid #ffffff;
         border-radius: 50px;
    }
     #contacto{
         color: #ffffff;
         text-align: center;
         padding-top: 250px;
         padding-bottom: 30px;
         margin-bottom: 30px;
         min-height: auto;
         width: 90%;
         margin-right: 5%;
         margin-left: 5%;
    }
     .contacto-input{
         width:80%;
         height: 20px;
    }
     .contacto-input-textarea{
         width:80%;
         height: 100px;
    }
     #albumes{
         background: #000000;
         width:95%;
         height: auto;
         margin:0 auto;
         margin-top: 250px;
         margin-bottom: 20px;
    }
     .cont-keywords{
         width: 90%;
         padding-right: 10%;
         text-align: center;
    }
     .tablaprecios{
         font-size: .6em;
         text-align: center;
         width: 100%;
         min-width: 100px;
         background-color: #F9CD05;
    }
     .tablaprecios td{
         border:1px solid #000;
    }
}
/*-----------------------------------------------------------MENU DE NAVEGACIÓN----------------------------------------------------------------------------*/
 #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {
     margin: 0;
     padding: 0;
     border: 0;
     list-style: none;
     line-height: 1;
     display: block;
     position: relative;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
 #cssmenu:after, #cssmenu > ul:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}
 #cssmenu #menu-button {
     display: none;
}
 #cssmenu {
     font-family: Montserrat, sans-serif;
     background: #000;
     display: inline-block;
     float: left;
     width: 100%;
}
 #cssmenu > ul > li {
     float: left;
}
 #cssmenu.align-center > ul {
     font-size: 0;
     text-align: center;
}
 #cssmenu.align-center > ul > li {
     display: inline-block;
     float: none;
}
 #cssmenu.align-center ul ul {
     text-align: left;
}
 #cssmenu.align-right > ul > li {
     float: right;
}
 #cssmenu > ul > li > a {
     text-align: center;
     padding: 5px 1.5em 5px 1.5em;
     font-size: 12px;
     letter-spacing: 1px;
     text-decoration: none;
     color: #dddddd;
     font-weight: 700;
     text-transform: uppercase;
     border: solid 2px #F9CD05;
     margin: 5px;
     width: 170px;
}
 #cssmenu > ul > li:hover > a {
     color: #ffffff;
}
 #cssmenu > ul > li.has-sub > a {
     padding-right: 30px;
}
 #cssmenu > ul > li.has-sub > a:after {
     position: absolute;
     top: 22px;
     right: 11px;
     width: 8px;
     height: 2px;
     display: block;
     background: #dddddd;
     content: '';
}
 #cssmenu > ul > li.has-sub > a:before {
     position: absolute;
     top: 19px;
     right: 14px;
     display: block;
     width: 2px;
     height: 8px;
     background: #dddddd;
     content: '';
     -webkit-transition: all .25s ease;
     -moz-transition: all .25s ease;
     -ms-transition: all .25s ease;
     -o-transition: all .25s ease;
     transition: all .25s ease;
}
 #cssmenu > ul > li.has-sub:hover > a:before {
     top: 23px;
     height: 0;
}
 #cssmenu ul ul {
     position: absolute;
     left: -9999px;
}
 #cssmenu.align-right ul ul {
     text-align: right;
}
 #cssmenu ul ul li {
     height: 0;
     -webkit-transition: all .25s ease;
     -moz-transition: all .25s ease;
     -ms-transition: all .25s ease;
     -o-transition: all .25s ease;
     transition: all .25s ease;
}
 #cssmenu li:hover > ul {
     left: auto;
}
 #cssmenu.align-right li:hover > ul {
     left: auto;
     right: 0;
}
 #cssmenu li:hover > ul > li {
     height: 35px;
}
 #cssmenu ul ul ul {
     margin-left: 100%;
     top: 0;
}
 #cssmenu.align-right ul ul ul {
     margin-left: 0;
     margin-right: 100%;
}
 #cssmenu ul ul li a {
     border-bottom: 1px solid rgba(150, 150, 150, 0.15);
     padding: 11px 15px;
     width: 170px;
     font-size: 12px;
     text-decoration: none;
     color: #dddddd;
     font-weight: 400;
     background: #333333;
}
 #cssmenu ul ul li:last-child > a, #cssmenu ul ul li.last-item > a {
     border-bottom: 0;
}
 #cssmenu ul ul li:hover > a, #cssmenu ul ul li a:hover {
     color: #ffffff;
}
 #cssmenu ul ul li.has-sub > a:after {
     position: absolute;
     top: 16px;
     right: 11px;
     width: 8px;
     height: 2px;
     display: block;
     background: #dddddd;
     content: '';
}
 #cssmenu.align-right ul ul li.has-sub > a:after {
     right: auto;
     left: 11px;
}
 #cssmenu ul ul li.has-sub > a:before {
     position: absolute;
     top: 13px;
     right: 14px;
     display: block;
     width: 2px;
     height: 8px;
     background: #dddddd;
     content: '';
     -webkit-transition: all .25s ease;
     -moz-transition: all .25s ease;
     -ms-transition: all .25s ease;
     -o-transition: all .25s ease;
     transition: all .25s ease;
}
 #cssmenu.align-right ul ul li.has-sub > a:before {
     right: auto;
     left: 14px;
}
 #cssmenu ul ul > li.has-sub:hover > a:before {
     top: 17px;
     height: 0;
}
 @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
     #cssmenu {
         width: 100%;
         margin-bottom: 1em;
    }
     #cssmenu ul {
         width: 100%;
         display: none;
    }
     #cssmenu.align-center > ul {
         text-align: left;
    }
     #cssmenu ul li {
         width: 100%;
         border-top: 1px solid rgba(120, 120, 120, 0.2);
    }
     #cssmenu ul ul li, #cssmenu li:hover > ul > li {
         height: auto;
    }
     #cssmenu ul li a, #cssmenu ul ul li a {
         width: 100%;
         border-bottom: 0;
    }
     #cssmenu > ul > li {
         float: none;
    }
     #cssmenu ul ul li a {
         padding-left: 25px;
    }
     #cssmenu ul ul ul li a {
         padding-left: 35px;
    }
     #cssmenu ul ul li a {
         color: #dddddd;
         background: none;
    }
     #cssmenu ul ul li:hover > a, #cssmenu ul ul li.active > a {
         color: #ffffff;
    }
     #cssmenu ul ul, #cssmenu ul ul ul, #cssmenu.align-right ul ul {
         position: relative;
         left: 0;
         width: 100%;
         margin: 0;
         text-align: left;
    }
     #cssmenu > ul > li.has-sub > a:after, #cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before {
         display: none;
    }
     #cssmenu #menu-button {
         display: block;
         padding: 17px;
         color: #dddddd;
         cursor: pointer;
         font-size: 12px;
         text-transform: uppercase;
         font-weight: 700;
    }
     #cssmenu #menu-button:after {
         position: absolute;
         top: 22px;
         right: 17px;
         display: block;
         height: 4px;
         width: 20px;
         border-top: 2px solid #dddddd;
         border-bottom: 2px solid #dddddd;
         content: '';
    }
     #cssmenu #menu-button:before {
         position: absolute;
         top: 16px;
         right: 17px;
         display: block;
         height: 2px;
         width: 20px;
         background: #dddddd;
         content: '';
    }
     #cssmenu #menu-button.menu-opened:after {
         top: 23px;
         border: 0;
         height: 2px;
         width: 15px;
         background: #ffffff;
         -webkit-transform: rotate(45deg);
         -moz-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
         transform: rotate(45deg);
    }
     #cssmenu #menu-button.menu-opened:before {
         top: 23px;
         background: #ffffff;
         width: 15px;
         -webkit-transform: rotate(-45deg);
         -moz-transform: rotate(-45deg);
         -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
         transform: rotate(-45deg);
    }
     #cssmenu .submenu-button {
         position: absolute;
         z-index: 99;
         right: 0;
         top: 0;
         display: block;
         border-left: 1px solid rgba(120, 120, 120, 0.2);
         height: 46px;
         width: 46px;
         cursor: pointer;
    }
     #cssmenu .submenu-button.submenu-opened {
         background: #262626;
    }
     #cssmenu ul ul .submenu-button {
         height: 34px;
         width: 34px;
    }
     #cssmenu .submenu-button:after {
         position: absolute;
         top: 22px;
         right: 19px;
         width: 8px;
         height: 2px;
         display: block;
         background: #dddddd;
         content: '';
    }
     #cssmenu ul ul .submenu-button:after {
         top: 15px;
         right: 13px;
    }
     #cssmenu .submenu-button.submenu-opened:after {
         background: #ffffff;
    }
     #cssmenu .submenu-button:before {
         position: absolute;
         top: 19px;
         right: 22px;
         display: block;
         width: 2px;
         height: 8px;
         background: #dddddd;
         content: '';
    }
     #cssmenu ul ul .submenu-button:before {
         top: 12px;
         right: 16px;
    }
     #cssmenu .submenu-button.submenu-opened:before {
         display: none;
    }
}
/*actualizacion 2023*/
 body{
     background: #670f06 
}
 #Contenedor-principal {
     max-width: 1000px;
     width: 100%;
     border:0;
     margin-top: -2em;
     margin-bottom: -1em!important;
     box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.33);
     -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.33);
     -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.33);
}
 #cssmenu > ul{
     display: inline-block;
     align-items: center!important;
}
 #cssmenu{
     display: flex;
    /* para utilizar flexbox */
     justify-content: center;
    /* para centrar horizontalmente los elementos */
     align-items: center;
    /* para centrar verticalmente los elementos */
}
 #Cabecera {
     width: 100%;
     min-height: 200px;
}
 .telefonos {
     background: #F9CD05;
     padding-top: 1em 
}
 #cssmenu {
     background: #FAE748;
     box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.33);
     -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.33);
     -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.33);
}
 .telefonos h1 {
     color: #000;
     font-size: 17px;
     text-transform: uppercase;
     font-weight: bold;
     letter-spacing: 4px;
}
 .telefonos {
     color: #000;
     font-size: 17px;
     text-transform: uppercase;
     font-weight: bold;
     letter-spacing: 4px;
}
 .telefonos h2 {
     color: #000;
     font-size: 17px;
     text-transform: uppercase;
     font-weight: bold;
     letter-spacing: 4px;
}
 #cssmenu ul li a {
     color: #000;
     font-size: 1em;
     border: 0;
     padding: 1em 0 
}
 #cssmenu ul li a:hover{
     color: #000;
     text-decoration: underline 
}
 .telefonos a {
     color: #fff!important;
     text-transform: uppercase!important;
     background: #000!important;
     padding: 5px 1em!important;
     border-radius: 20px!important;
     font-size: 21px!important;
}
 .breadcrumbs {
     background: #000;
     padding: 1em 0;
     font-size: 20px;
     display: inline-block;
     margin-bottom: 0!important;
}
 .breadcrumbs a {
     color: #fff 
}
 .breadcrumbs {
     color: #F9CD05 
}
 .breadcrumb_last {
     color: #F9CD05 
}
 #informacion {
     width: 100%;
     border: 0;
     margin: 0;
     display: inline-block 
}
 #banner{
     margin: 0 
}
 #informacion h2 {
     color: #670F06;
     font-size: 2em;
     width: 780px;
     margin: 0 auto 
}
 .accion {
     background: #8E0F02;
     color: #fff;
     text-transform: uppercase;
     padding: 5px 1em;
     border-radius: 20px;
     font-size: 20px!important;
     min-width: 230px;
     margin: 10px 10px!important;
     font-weight: normal;
     text-align: center 
}
 .accion:hover{
     color: #fff!important;
     background: #000 
}
 #informacion p {
     width: 780px;
     margin: 0 auto;
     padding: 1em 0;
     font-size: 18px;
     font-weight: lighter!important 
}
 #informacion img {
     border-radius: 10px;
     width: 230px!important 
}
 iframe {
     border-radius: 10px;
     border: 8px solid #8E0F02;
     margin-bottom: 5em!important 
}
 .video {
     height: 220px 
}
 .tablaprecios {
     width: 500px;
     margin: 0 auto;
     background: #fff;
     font-size: 18px;
     margin-top: 1em 
}
 .tablaprecios td{
     margin: 0;
     border: 1px solid #eee 
}
 h3 {
     font-size: 20px;
     color: #000 
}
 h4 {
     color: #8E0F02 
}
 .tarjetas-col {
     width: 100%!important;
     background: #fff 
}
 .files-bottom{
     margin-bottom: 0;
}
 .files-bottom img{
     background-position: 59% 
}
 .files{
     width:100%;
     margin: 0 
}
 #cssmenu #menu-button:before{
     background:#000000;
}
 #cssmenu #menu-button:after{
     border-top: 2px solid #000000;
     border-bottom: 2px solid #000000;
}
 #cssmenu #menu-button.menu-opened:before{
     background:#000000!important;
}
 #cssmenu #menu-button.menu-opened:after{
     background:#000000!important;
}
 #Contenedor-principal {
     background: #f9cd05 
}
 .cont-keywords {
     color: #000!important;
     font-size: 17px!important;
     font-weight: normal!important;
     line-height: 1.5em!important 
}
 .cont-keywords strong strong {
     font-weight: normal!important;
}
 strong .cont-keywords strong {
     font-weight: normal!important;
}
 .cont-keywords a {
     color: #000!important;
     font-weight: bold!important;
     font-size: 17px!important;
     line-height: 1.5em!important 
}
 #keywords > .cont-keywords ul > li strong {
     font-weight: normal!important;
     line-height: 1.5em!important 
}
 #fotter h1, h5, p {
     color: #000!important;
     font-size: 18px!important;
     font-weight: bold!important;
     line-height: 1.5em!important 
}
 .fanpage h2 {
     color: #000!important;
     font-size: 1.5em!important;
     line-height: 2em!important 
}
 #buss-box-facebook{
     left:1em!important;
}
 #buss-box-facebook img {
     width: 30px;
     height: 30px;
     margin-right: 20px;
     padding: 8px;
     background: #000!important;
     box-shadow: -2px 3px 5px 0px rgba(0,0,0,0.25)!important;
     -webkit-box-shadow: -2px 3px 5px 0px rgba(0,0,0,0.25)!important;
     -moz-box-shadow: -2px 3px 5px 0px rgba(0,0,0,0.25)!important;
}
 .breadcrumbs {
     background: #f9cd05!important;
     color: #000!important;
     padding: 5px 0!important;
     font-size: 15px!important 
}
 .breadcrumb_last {
     color: #670F06!important 
}
 .breadcrumbs a {
     color: #000!important;
     font-size: 15px!important;
     font-weight: normal!important;
}
 #videos {
     width: 100%!important;
     border: 0!important;
     padding: 2em 0!important;
     display: inline-block!important;
     margin: 0!important;
     background: #670F06 
}
 #Lista {
     margin: 0!important;
     display: inline-block!important;
     padding: 0 0 3em 0!important 
}
 .lista-de-videos {
     margin: 0!important;
     display: inline-block;
     border: 0;
     width: 100%;
}
 .lista-de-videos:hover {
     margin: 0!important;
     display: inline-block;
     border: 0;
}
 .lista-de-videos a{
     display: inline-block;
     font-size: 17px;
     padding: 5px 0;
     border-radius: 100px;
     width: 100%;
     max-width: 280px;
     margin: 7px 0!important;
     background: #FAE748;
     color: #000;
     font-weight: bold 
}
 .lista-de-videos a:hover{
     background: #fff;
     color: #670F06 
}
 .videos-musicales {
     display: inline-block;
     font-size: 1.5em;
     padding: 5px 0;
     width: 100%;
     margin: 10px 0!important;
     color: #fff;
     float: inherit;
     background: transparent;
     border: 0 
}
 #Reproductor {
     margin: 0!important;
     display: inline-block!important ;
     padding: 0 0 3em 0!important 
}
 #Reproductor h1 {
     display: inline-block;
     font-size: 1.5em;
     padding: 5px 0;
     width: 100%;
     margin: 10px 0!important;
     color: #fff;
     float: inherit;
     background: transparent;
     border: 0 
}
 #Reproductor h3 {
     display: inline-block;
     font-size: 1.5em;
     padding: 5px 0;
     width: 100%;
     margin: 10px 0!important;
     color: #fff;
     float: inherit;
     background: transparent;
     border: 0 
}
 #Reproductor iframe{
     max-width: 340px;
     margin: 0!important 
}
 #Reproductor .tel {
     background: #8E0F02;
     color: #fff!important;
     text-transform: uppercase;
     padding: 5px 1em;
     border-radius: 20px;
     font-size: 20px!important;
     min-width: 230px;
     margin: 10px 10px!important;
     font-weight: normal;
     text-align: center;
     display: inline-block;
     margin-top: 30px!important 
}
 #Reproductor .tel:hover {
     background: #000;
}
 #contacto {
     width: 100%!important;
     border: 0!important;
     padding: 2em 0!important;
     display: inline-block!important;
     margin: 0!important;
     background: #eee;
     font-family: arial 
}
 h2 {
     color: #670f06 
}
 .input-contacto {
     border-radius: 5px;
     border: 1px solid #bbb;
     font-size: 18px;
     padding: 5px 1em 
}
 .textarea-contacto {
     border-radius: 5px;
     border: 1px solid #bbb;
     font-size: 18px;
     padding: 5px 1em 
}
 .img-contacto {
     height: auto!important;
     border-radius: 200px 
}
 #contacto .tel {
     background: #8E0F02;
     color: #fff!important;
     text-shadow:none!important;
     text-transform: uppercase;
     padding: 5px 1em;
     border-radius: 20px;
     font-size: 20px!important;
     min-width: 230px;
     margin: 10px 10px!important;
     font-weight: normal;
     text-align: center;
     font-style: normal!important 
}
 #contacto .tel:hover{
     background: #000 
}
 .boton-contacto {
     background: #F9CD05;
     color: #000!important;
     text-transform: uppercase;
     padding: 5px 1em;
     border-radius: 20px;
     font-size: 20px!important;
     min-width: 230px;
     margin: 10px 10px!important;
     font-weight: normal;
     text-align: center;
     font-style: normal!important;
     border:0!important;
}
 .boton-contacto:hover{
     background: #000!important;
     color: #fff!important 
}
 #fotter {
     background: #F9CD05;
     width: 100%;
     margin: 0 auto;
     max-width: 1000px 
}
 @media (max-width: 992px) {
     #informacion h2 {
         color: #670F06;
         font-size: 20px;
         width: 100%;
         margin: 0 auto 
    }
     #informacion p {
         width: 100%;
         margin: 0 auto;
         padding: 1em 0;
         font-size: 18px;
         font-weight: lighter 
    }
     #cssmenu > ul{
         display: none;
         align-items: center!important;
    }
     #cssmenu{
         display: inline;
        /* para utilizar flexbox */
         justify-content: center;
        /* para centrar horizontalmente los elementos */
         align-items: center;
        /* para centrar verticalmente los elementos */
    }
     #Cabecera {
         width: 100%;
         min-height: 100px;
    }
     #cssmenu ul ul li a{
         background:#FAE748!important;
         color:#000!important 
    }
     #cssmenu ul ul{
         margin-left:0!important 
    }
     #cssmenu ul li{
         border-top:0!important 
    }
     #cssmenu ul{
         width: 100% !important;
    }
     #cssmenu #menu-button{
         color:#000;
    }
     #cssmenu #menu-button {
         color: #000;
    }
     #cssmenu{
         margin: 0 
    }
     .telefonos {
         margin: 0!important;
         padding: 0 0!important;
         height: auto!important 
    }
     .telefonos a {
         border: 0;
         display: inline-block;
         margin: 1em 0 
    }
     #Cabecera {
         height: auto!important;
         margin: 0!important;
         padding: 0!important;
         display: inline-block!important;
    }
     .open > li > a {
         margin-left: 0!important;
         width: 100%!important;
         display: inline-block!important 
    }
     #cssmenu > ul > li.has-sub > a {
         margin-left: 1em!important 
    }
     iframe {
         max-width:280px!important;
    }
     .video {
         height: 180px 
    }
     #fotter h1, h5, p, a {
         color: #000!important;
         font-size: 15px!important;
         font-weight: bold!important;
         line-height: 1.5em!important 
    }
     .tablaprecios {
         width: 100%;
         margin: 0 auto;
         background: #fff;
         font-size: 14px;
         margin-top: 1em 
    }
     #Reproductor .tel {
         border: 0!important;
    }
     #Lista {
         margin: -0!important;
    }
     #Reproductor .tel {
         text-shadow: none!important 
    }
     #contacto .tel {
         border: none;
         font-weight: normal!important 
    }
     .img-contacto {
         width: 90%;
         float: center 
    }
     .bloque-contacto {
         text-align: center 
    }
     .bloque-contacto p {
         width: auto!important;
         display: inline-block 
    }
     .bloque-contacto input, textarea{
         margin: 0!important;
         display: inline-block!important;
         width: 100%!important;
         max-width: 280px!important;
         float: inherit!important 
    }
}
/*menu navegacion*/
 .breadcrumbs{
     padding: 1em 0 0 0;
     width: 100%;
     background: #000;
     text-align: center;
     color: #ffffff;
}
 .breadcrumbs a{
     color: #F9CD05;
     text-decoration: none;
}
 .breadcrumbs a:hover{
     text-decoration: underline;
}
 #cssmenu ul ul li a {
     width: 270px;
     font-size: 12px;
     text-decoration: none;
     font-weight: 400;
     text-transform: uppercase;
     background: #000000;
     text-align: center;
     padding: 5px 1.5em 5px 1.5em;
     font-size: 12px;
     letter-spacing: 1px;
     text-decoration: none;
     color: #dddddd;
     font-weight: 700;
     border: solid 2px #F9CD05;
     min-height: 50px;
}
 #cssmenu ul ul{
     max-height: 250px;
     overflow-y: scroll;
     margin-left: 5px;
}
 #cssmenu > ul > li.has-sub > a::before{
     display: none!important;
}
 #cssmenu > ul > li.has-sub > a::after{
     display: none!important;
}
 blockquote{
     margin: 2em 15px!important;
}
 #fotter h1 {
     color: #F1B924;
     font-weight: lighter;
     font-size: 15px;
}
 #fotter h2 {
     color: #F1B924;
     font-weight: lighter;
     font-size: 15px;
}
 #fotter h3 {
     color: #F1B924;
     font-weight: lighter;
     font-size: 15px;
}
 #fotter h4 {
     color: #F1B924;
     font-weight: lighter;
     font-size: 15px;
}
 #fotter h5 {
     color: #F1B924;
     font-weight: lighter;
     font-size: 15px;
}
 #fotter p {
     color: #F1B924;
     font-size: 15px;
}
 .cont-keywords{
     padding-bottom: 3em;
}
 @media (max-width:1000px) and (min-width:0px ){
     #cssmenu ul {
         width: 97.5%!important;
    }
     #cssmenu ul ul {
         max-height: none !important;
         height: auto !important;
         overflow-y: visible !important;
         margin-left: 0 !important;
         display: block !important;
    }
     #cssmenu ul ul li a {
         width: 100%;
         margin: 0;
         padding: 10px 0;
         border: none;
         border-top: 1px solid rgba(120, 120, 120, 0.2);
         min-height: auto!important;
    }
     .submenu-button{
         display: none!important;
    }
     #cssmenu ul{
         width: 100% !important;
    }
}
/**/
 .video {
     margin-bottom: 1em!important 
}
 #audio-player {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 1000;
     text-align: center;
}
 #play-button {
     width: 50px;
     height: 50px;
     cursor: pointer;
     border-radius: 50%;
     box-shadow: 0 0 12px rgba(0,0,0,0.4);
     transition: transform 0.2s;
}
 #play-button:hover {
     transform: scale(1.1);
}
 #audio-player::after {
     content: "🎵 Da clic para escuchar";
     display: block;
     background-color: #000;
     color: #fff;
     padding: 6px 12px;
     border-radius: 20px;
     font-size: 13px;
     margin-top: 8px;
     font-family: sans-serif;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
 .cenefaprincipal{
     width:100%;
     height:auto 
}
 .telefonos span {
     color: #000;
     font-size: 14px;
     text-transform: uppercase;
     font-weight: bold;
     letter-spacing: 4px;
     line-height:1.5em 
}
 #buss-box-facebook img {
     background: transparent!important;
}
 #buss-box-facebook img {
     -webkit-box-shadow:none!important;
}
 #musica {
     width: 100%;
     border: 0;
     display: inline-block;
     margin: 0 
}
 #informacion h1 {
     color: #670F06!important;
     font-size: 2em!important;
     width: 780px!important;
     margin: 0 auto!important;
}
 @media screen and (max-width: 600px) {
     #Contenedor-principal{
         margin-top:0!important 
    }
     .telefonos span {
         margin-top: 0px!important;
    }
     #buss-box-facebook img {
         background: transparent!important;
    }
     #buss-box-facebook img {
         -webkit-box-shadow:none!important;
    }
     #informacion h1 {
         color: #670F06!important;
         font-size: 20px!important;
         width: 100%!important;
         margin: 0 auto!important;
    }
}
/*bubles*/
 .social-bubbles {
     position: fixed;
     top: 40%;
     right: 0;
     display: flex;
     flex-direction: column;
     z-index: 8888;
}
 #cssmenu {
     z-index: 9999;
     position: relative;
    /* o fixed si lo quieres fijo */
}
 .social-bubbles a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 48px;
     height: 48px;
     margin: 5px 0;
     background-color: #fff;
     border-radius: 50%;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
     transition: transform 0.3s;
     text-decoration: none;
}
 .social-bubbles a:hover {
     transform: scale(1.1);
}
 .social-bubbles img {
     width: 40px;
     height: 40px;
}
/*navidad*/
 #stuffToShow {
     display:none;
     position:fixed;
     bottom:0px;
     right:0px;
     background:#11CE58;
     width: 280px;
     font-size: 1.1em;
     color: #545d6b;
     z-index: 30001;
     -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
     -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
     box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
}
 #stuffToShow h3{
     background:#383345;
     color: #fff;
     padding: 1.5em;
     font-size: 1.1em;
}
 #checkboxLabel{
     position:fixed;
     bottom:5px;
     right:10px;
     z-index: 30000;
}
 #checkboxLabel img{
     width: 80px;
     height: 80px;
}
 #checkbox {
     opacity:0.01;
}
 #checkbox:checked + #stuffToShow {
     display:block;
}
 .enviar{
     padding:0!important;
     background: #4BAF4F!important;
     color: #ffffff!important;
     font-size: .8em!important;
     text-shadow: none!important;
     border: 1px solid #ffffff!important;
     width: 100px!important;
     font-weight: bold!important;
}
 .enviar:hover{
     background: #37A75F!important;
}
 #close{
     width: 20px;
     height: 20px;
     float: left;
}
 #close img{
     margin-top: -1em;
     margin-left: -1em;
     background: #fff;
     border-radius: 50px;
}
/*compartir*/
 #buss-box-facebook{
     float: left;
     height: auto;
     width: 200px;
     bottom: -1em;
     position: fixed;
     z-index: 2000;
     padding-bottom: 2em;
}
 #buss-box-facebook img{
     float: left;
     height: 42px;
     margin-right: .8em;
     width: auto;
     background: #fff;
     border-radius: 4px;
     -webkit-box-shadow: 1px 10px 7px 0px rgba(0,0,0,0.75);
     -moz-box-shadow: 1px 10px 7px 0px rgba(0,0,0,0.75);
     box-shadow: 1px 10px 7px 0px rgba(0,0,0,0.75);
}
/*faqs*/
 .faq {
     max-width: 700px;
     margin: 2rem auto;
     font-family: Arial, sans-serif;
     border-radius: 8px;
     overflow: hidden;
}
 .faq dt {
     background-color: #fff8d1;
    /* amarillo claro */
     color: #000;
     padding: 1rem 1.5rem;
     margin: 0;
     cursor: pointer;
     border-bottom: 1px solid #e3c000;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-weight: bold;
     transition: background 0.3s ease;
}
 .faq dt:hover {
     background-color: #fff2a8;
}
 .faq dt .toggle-icon {
     background-color: #aa0000;
    /* rojo vino */
     color: #fff;
     width: 32px;
     height: 32px;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     flex-shrink: 0;
}
 .faq dd {
     background-color: #fff;
     color: #333;
     margin: 0;
     padding: 1rem 1.5rem;
     display: none;
     border-bottom: 1px solid #eee;
}
/*detalles*/
 #informacion h2 {
     color: #a01506;
     font-size: 1.5em 
}
 @media screen and (max-width: 600px) {
     #informacion h2 {
         font-size: 1.2em!important 
    }
     #informacion h1 {
         font-size: 1.5em!important 
    }
    

#videos {
  display: flex!important;
  flex-direction: column!important;
}

#Lista {
  order: 1!important;
}

#Reproductor {
  order: 2!important;
}

 @media screen and (max-width: 600px) {
  #Lista {
    order: 2!important;
  }

  #Reproductor {
    order: 1!important;
  }
}