* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    border: none;
    outline: none;
    box-sizing: content-box;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');


/*movil*/
@media only screen and (max-width:600px){
    
body { /*movil*/
    font-family: 'montserrat';
    background-image: url(../img/background.jpg);
    background-size:contain;
    width:100%;
    height: auto;
    box-sizing:content-box;
}

#marco {/*movil*/
    overflow: hidden;
    background-position: 0 0;
    background-image: url('../img/background_mapa.jpg');
    background-repeat: no-repeat;
    width: 5126px;
    height: 3539px;
    z-index: 10;
}

.popups {/*movil*/
    width: 5126px;
    height: 3539px;
    /*draggable*/
}

.svg {/*movil*/
    cursor: grab;
    background-size: 100% 100%;
}

a:visited {/*movil*/
    color: white;
}

#cerrar {/*movil*/
    background-color: #E9493D;
    top: .3em;
    right: .5em;
    padding: 15px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    line-height: 0.5em;
    text-transform: uppercase;
    font-family: 'arial';
    font-weight: bold;
    position: absolute;
    font-size: 1.5rem;
    color: white;
}

#cerrar:hover {/*movil*/
    background-color: #f58e53;
    color: white;
}

#cerrar:visited {/*movil*/
    color: white;
}

.popup {/*movil*/
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    z-index: 999;
    width: 95%;
    min-height: 90%;
    margin: 2.5%;
    /*font-family: 'Mukta', sans-serif;*/
}

.path {/*movil*/
    fill: rgba(15, 15, 15, 0);
}

.path:hover {/*movil*/
    fill: rgba(61, 75, 80, 0.1);
}

.ocultar {/*movil*/
    display: none !important;
}

.mariachi {/*movil*/
    margin: 0 auto;
    float: center;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    background: rgb(192, 22, 11);
    background: linear-gradient(270deg, rgba(192, 22, 11, 1) 21%, rgba(233, 73, 61, 1) 53%, rgba(186, 14, 3, 1) 76%);
}

#header {/*movil*/
    background-color: rgb(12, 35, 30);
    width:100%;
    height: 70px;
    position: absolute;
}

#header ul {/*movil*/
    list-style-type: none;
    color: white;
    font-family: 'Montserrat', sans-serif;
    list-style-type: none;
    position: absolute;
    right:2.3rem;
    top: 1.7rem;
    font-size: x-small;
    float: left;
}

#header li {/*movil*/
    float: left;
    margin: 0 5px;
}

#header a {/*movil*/
    text-decoration: none;
    color: white;
}

#gob {/*movil*/
    width: 65px;
    margin: 1.5rem 0 0 1.5rem;
}

#banner {/*movil*/
    width: 100%;
    height: 54vh;  
    /*background-image: url("./img/banner_cuadrado.PNG");*/
        background-image: url("../img/banner_cuadrado.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    padding:0;
    align-content: center;
    margin: 40px 0% -3rem 0%;    
}



.espacio {/*movil*/
    background-color: transparent;
    height: 1.2rem;
}

#boton {/*movil*/
    float: center;
    height: 50vh;
    text-align: center;
    background-color: transparent;
}

#boton button {/*movil*/
    width: 50%;
    margin: 10vh auto;
    border-radius: 15px;
    color: white;
    padding: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    background: rgb(192, 22, 11);
    background: linear-gradient(270deg, rgba(192, 22, 11, 1) 21%, rgba(233, 73, 61, 1) 53%, rgba(186, 14, 3, 1) 76%);
    -webkit-box-shadow: -2px -1px 20px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -2px -1px 20px 0px rgba(0, 0, 0, 0.75);
    box-shadow: -2px -1px 20px 0px rgba(0, 0, 0, 0.75);
}

a:visited {/*movil*/
    color: white;
}

#boton button:hover {/*movil*/
    background: rgb(192, 22, 11);
    background: linear-gradient(270deg, rgba(192, 22, 11, 1) 14%, rgba(230, 70, 58, 1) 30%, rgba(233, 73, 61, 1) 72%, rgba(186, 14, 3, 1) 91%);
}





#terminar a {/*movil*/
    text-decoration: none;
    color: white;
}

#creditos {/*movil*/
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
}

#directorio {/*movil*/
    width: 100%;
    float: center;
    height: auto;
    background-color:rgba(0,0,0,0.7);
    color:white;
    text-align: center;
    padding: 4rem 2rem;
    box-sizing: border-box;
    font-family: montserrat;
}

#form {/*movil*/
    width: 100%;
    font-family: montserrat;
    float: right;
    padding: 2rem;
    box-sizing: border-box;
    height: 100vh;
}

#pie {/*movil*/
    background-color: blueviolet;
    height: 500px;
}

#footer {
    font-family: 'Montserrat', sans-serif;
    background-color: rgb(12, 35, 30);
    padding: 2rem 15%;
    height: 100%;
    color: white;
    box-sizing: border-box;
    display:table-cell;
}

#footer a {
 display:hidden;
    
    
}

#second {/*movil*/
  display:hidden;
}


#first {/*movil*/
display:hidden;
}

#third {/*movil*/
display:hidden;
}

#slider {/*movil*/
    height: 90vh;
    background-color: #FFF5EE;
}

#slider img {/*movil*/
    height: 74vh;
    max-width: 80%;
}

.carrete {/*movil*/
    height: 74vh;
}

.next {/*movil*/
    z-index: 9999;
    position: absolute;
    right: 4rem;
    margin: -30% auto;
    border-radius: 3px 0 0 3px;
    font-size: 5.5rem;
    padding: 10px;
    background-color: #4fad76;
    border-radius: 5px;
    color: white;
}

.prev {/*movil*/
    z-index: 9999;
    position: absolute;
    left: 4rem;
    margin: -30% auto;
    border-radius: 3px 0 0 3px;
    font-size: 5.5rem;
    padding: 10px;
    background-color: #4fad76;
    border-radius: 5px;
    color: white;
}

.next:hover {/*movil*/
    background-color: #1e6613;
    cursor: pointer;
}

.prev:hover {/*movil*/
    background-color: #1e6613;
    cursor: pointer;
}

.captions {/*movil*/
    background-color: #4fad76;
    background-image: url('../img/background.jpg');
    padding: 1.5rem 15rem;
    height: 15vh;
    font-size: 1.1rem;
    text-align: center;
    margin: 0 auto;
    position: relative;
    font-family: 'Montserrat', cursive;
}

#mariachi {/*movil*/
    overflow-y: scroll;
    height: 55vh;
    border: 3px solid #000;
    box-sizing: border-box;
    padding: 10px 55px;
    color: white;
    text-align: justify;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: lighter;
    cursor: default;
}

#fonemas {/*movil*/
    background-color: #E9493D;
    padding: 1.5rem 5rem;
    box-sizing: border-box;
    height: auto;
    line-height: 1.5;
    font-size: 1.1rem;
    text-align: center;
}

#fonemas audio {/*movil*/
    width: 90%;
    margin: 2rem 5%;
    float: center;
    position: relative;
}

.formulario {/*movil*/
    background-color: rgba(192, 22, 11, .8);
    color: white;
    border-radius: 15px;
    font-weight: bold;
    width: 70%;
    margin: 2rem auto;
    padding: 1.5rem;
}

.formulario textarea {/*movil*/
    width: 100%;
    height: 8rem;
}

.formulario input {/*movil*/
    width: 100%;
    height: 2rem;
}

.formulario button {/*movil*/
    width: 20%;
    box-sizing: content-box;
    padding: 5px;
    background-color: white;
    font-family: 'Montserrat';
    font-weight: bold;
}

.redes {/*movil*/
    text-align: center;
}

.redes img {/*movil*/
    margin: 0.5rem;
    width: 2rem;
}
#textopavel {/*movil*/
    width: 100%;
    text-align: justify;
    padding: 2rem 2.5rem;
    box-sizing: border-box;
    margin:-1rem auto;
    color:white;
    font-size:0.9rem;
    font-weight: lighter;
    line-height: 1.5em;
    background-color: rgba(233,73,61,0.75);
}


.recorrido {/*movil*/
    background-color: rgb(12, 35, 30);
    color:white;
    width:80%;
    height:auto;
    padding: 1.4rem .5rem 1.5rem  0.5rem;
    box-sizing: border-box;
    font-size: 1;
    text-align: center;
    margin:1.5rem auto;
    float:center;
    text-decoration: none;
}
    
    a{
        text-decoration: none;
        color:white;
    }
    a:visited{
        text-decoration: none;
        color:white;
    }

.recorrido:hover{/*movil*/
    font-size:larger;
}

}
/*tablet*/
@media only screen and (min-width:601px) and (max-width:1024px){
    
body { /*tablet*/
    font-family: 'montserrat';
    background-image: url(../img/background.jpg);
    background-size:contain;
    width:100%;
    height: auto;
    box-sizing:content-box;
}

#marco {/*tablet*/
    overflow: hidden;
    background-position: 0 0;
    background-image: url('../img/background_mapa.jpg');
    background-repeat: no-repeat;
    width: 5126px;
    height: 3539px;
    z-index: 10;
}

.popups {/*tablet*/
    width: 5126px;
    height: 3539px;
    /*draggable*/
}

.svg {/*tablet*/
    cursor: grab;
    background-size: 100% 100%;
}

a:visited {/*tablet*/
    color: white;
}

#cerrar {/*tablet*/
    background-color: #E9493D;
    top: .3em;
    right: .5em;
    padding: 15px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    line-height: 0.5em;
    text-transform: uppercase;
    font-family: 'arial';
    font-weight: bold;
    position: absolute;
    font-size: 1.5rem;
    color: white;
}

#cerrar:hover {/*tablet*/
    background-color: #f58e53;
    color: white;
}

#cerrar:visited {/*tablet*/
    color: white;
}

.popup {/*tablet*/
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    z-index: 999;
    width: 95%;
    min-height: 90%;
    margin: 2.5%;
    /*font-family: 'Mukta', sans-serif;*/
}

.path {/*tablet*/
    fill: rgba(15, 15, 15, 0);
}

.path:hover {/*tablet*/
    fill: rgba(61, 75, 80, 0.1);
}

.ocultar {/*tablet*/
    display: none !important;
}

.mariachi {/*tablet*/
    margin: 0 auto;
    float: center;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    background: rgb(192, 22, 11);
    background: linear-gradient(270deg, rgba(192, 22, 11, 1) 21%, rgba(233, 73, 61, 1) 53%, rgba(186, 14, 3, 1) 76%);
}

#header {/*tablet*/
    background-color: rgb(12, 35, 30);
    width:100%;
    height: 70px;
    position: absolute;
}

#header ul {/*tablet*/
    list-style-type: none;
    color: white;
    font-family: 'Montserrat', sans-serif;
    list-style-type: none;
    position: absolute;
    right:2.3rem;
    top: 1.7rem;
    font-size: x-small;
    float: left;
}

#header li {/*tablet*/
    float: left;
    margin: 0 5px;
}

#header a {/*tablet*/
    text-decoration: none;
    color: white;
}

#gob {/*tablet*/
    width: 65px;
    margin: 1.5rem 0 0 1.5rem;
}

#banner {/*tablet*/
    width: 100%;
    height: 54vh;    background-image: url("../img/banner.PNG");
    background-size: contain;
    background-repeat: no-repeat;
    padding:0;
    align-content: center;
    margin: 40px 0% -3rem 0%;    
}



.espacio {/*tablet*/
    background-color: transparent;
    height: 1.2rem;
}

#boton {/*tablet*/
    float: center;
    height: 50vh;
    text-align: center;
    background-color: transparent;
}

#boton button {/*tablet*/
    width: 50%;
    margin: 10vh auto;
    border-radius: 15px;
    color: white;
    padding: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    background: rgb(192, 22, 11);
    background: linear-gradient(270deg, rgba(192, 22, 11, 1) 21%, rgba(233, 73, 61, 1) 53%, rgba(186, 14, 3, 1) 76%);
    -webkit-box-shadow: -2px -1px 20px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -2px -1px 20px 0px rgba(0, 0, 0, 0.75);
    box-shadow: -2px -1px 20px 0px rgba(0, 0, 0, 0.75);
}

a:visited {/*tablet*/
    color: white;
}

#boton button:hover {/*tablet*/
    background: rgb(192, 22, 11);
    background: linear-gradient(270deg, rgba(192, 22, 11, 1) 14%, rgba(230, 70, 58, 1) 30%, rgba(233, 73, 61, 1) 72%, rgba(186, 14, 3, 1) 91%);
}





#terminar a {/*tablet*/
    text-decoration: none;
    color: white;
}

#creditos {/*tablet*/
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
}

#directorio {/*tablet*/
    width: 100%;
    float: center;
    height: auto;
    background-color:rgba(0,0,0,0.7);
    color:white;
    text-align: center;
    padding: 4rem 2rem;
    box-sizing: border-box;
    font-family: montserrat;
}

#form {/*tablet*/
    width: 100%;
    font-family: montserrat;
    float: right;
    padding: 2rem;
    box-sizing: border-box;
    height: 100vh;
}

#pie {/*tablet*/
    background-color: blueviolet;
    height: 500px;
}

#footer {
    font-family: 'Montserrat', sans-serif;
    background-color: rgb(12, 35, 30);
    padding: 2rem 15%;
    height: 100%;
    color: white;
    box-sizing: border-box;
    display:table-cell;
}

#footer a {
 display:hidden;
    
    
}

#second {/*tablet*/
  display:hidden;
}


#first {/*tablet*/
display:hidden;
}

#third {/*tablet*/
display:hidden;
}

#slider {/*tablet*/
    height: 90vh;
    background-color: #FFF5EE;
}

#slider img {/*tablet*/
    height: 74vh;
    max-width: 80%;
}

.carrete {/*tablet*/
    height: 74vh;
}

.next {/*tablet*/
    z-index: 9999;
    position: absolute;
    right: 4rem;
    margin: -30% auto;
    border-radius: 3px 0 0 3px;
    font-size: 5.5rem;
    padding: 10px;
    background-color: #4fad76;
    border-radius: 5px;
    color: white;
}

.prev {/*tablet*/
    z-index: 9999;
    position: absolute;
    left: 4rem;
    margin: -30% auto;
    border-radius: 3px 0 0 3px;
    font-size: 5.5rem;
    padding: 10px;
    background-color: #4fad76;
    border-radius: 5px;
    color: white;
}

.next:hover {/*tablet*/
    background-color: #1e6613;
    cursor: pointer;
}

.prev:hover {/*tablet*/
    background-color: #1e6613;
    cursor: pointer;
}

.captions {/*tablet*/
    background-color: #4fad76;
    background-image: url('../img/background.jpg');
    padding: 1.5rem 15rem;
    height: 15vh;
    font-size: 1.1rem;
    text-align: center;
    margin: 0 auto;
    position: relative;
    font-family: 'Montserrat', cursive;
}

#mariachi {/*tablet*/
    overflow-y: scroll;
    height: 55vh;
    border: 3px solid #000;
    box-sizing: border-box;
    padding: 10px 55px;
    color: white;
    text-align: justify;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: lighter;
    cursor: default;
}

#fonemas {/*tablet*/
    background-color: #E9493D;
    padding: 1.5rem 5rem;
    box-sizing: border-box;
    height: auto;
    line-height: 1.5;
    font-size: 1.1rem;
    text-align: center;
}

#fonemas audio {/*tablet*/
    width: 90%;
    margin: 2rem 5%;
    float: center;
    position: relative;
}

.formulario {/*tablet*/
    background-color: rgba(192, 22, 11, .8);
    color: white;
    border-radius: 15px;
    font-weight: bold;
    width: 70%;
    margin: 2rem auto;
    padding: 1.5rem;
}

.formulario textarea {/*tablet*/
    width: 100%;
    height: 8rem;
}

.formulario input {/*tablet*/
    width: 100%;
    height: 2rem;
}

.formulario button {/*tablet*/
    width: 20%;
    box-sizing: content-box;
    padding: 5px;
    background-color: white;
    font-family: 'Montserrat';
    font-weight: bold;
}

.redes {/*tablet*/
    text-align: center;
}

.redes img {/*tablet*/
    margin: 0.5rem;
    width: 2rem;
}
#textopavel {/*tablet*/
    width: 100%;
    text-align: justify;
    padding: 2rem 2.5rem;
    box-sizing: border-box;
    margin:-1rem auto;
    color:white;
    font-size:0.9rem;
    font-weight: lighter;
    line-height: 1.5em;
    background-color: rgba(233,73,61,0.75);
}


.recorrido {/*tablet*/
    background-color: rgb(12, 35, 30);
    color:white;
    width:80%;
    height:auto;
    padding: 1.4rem .5rem 1.5rem  0.5rem;
    box-sizing: border-box;
    font-size: 1;
    text-align: center;
    margin:1.5rem auto;
    float:center;
    text-decoration: none;
}
    
    a{
        text-decoration: none;
        color:white;
    }
    a:visited{
        text-decoration: none;
        color:white;
    }

.recorrido:hover{/*tablet*/
    font-size:larger;
}

}
/*pc*/
@media only screen and (min-width:1025px){
    
body {
    font-family: 'montserrat';
    background-image: url(../img/background.jpg);
    background-size:cover;
    height: auto;
    
}

#marco {
    overflow: hidden;
    background-position: 0 0;
    background-image: url('../img/background_mapa.jpg');
    background-repeat: no-repeat;
    width: 5126px;
    height: 3539px;
    z-index: 10;
}

.popups {
    width: 5126px;
    height: 3539px;
    /*draggable*/
}

.svg {
    cursor: grab;
    background-size: 100% 100%;
}

a:visited {
    color: white;
}

#cerrar {
    background-color: #E9493D;
    top: .3em;
    right: .5em;
    padding: 15px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    line-height: 0.5em;
    text-transform: uppercase;
    font-family: 'arial';
    font-weight: bold;
    position: absolute;
    font-size: 1.5rem;
    color: white;
}

#cerrar:hover {
    background-color: #f58e53;
    color: white;
}

#cerrar:visited {
    color: white;
}

.popup {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    z-index: 999;
    width: 95%;
    min-height: 90%;
    margin: 2.5%;
    /*font-family: 'Mukta', sans-serif;*/
}

.path {
    fill: rgba(15, 15, 15, 0);
}

.path:hover {
    fill: rgba(61, 75, 80, 0.1);
}

.ocultar {
    display: none !important;
}

.mariachi {
    margin: 0 auto;
    float: center;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    background: rgb(192, 22, 11);
    background: linear-gradient(270deg, rgba(192, 22, 11, 1) 21%, rgba(233, 73, 61, 1) 53%, rgba(186, 14, 3, 1) 76%);
}

#header {
    background-color: rgb(12, 35, 30);
    width: 100%;
    height: 70px;
    position: fixed;
}

#header ul {
    list-style-type: none;
    color: white;
    color: white;
    font-family: 'Montserrat', sans-serif;
    list-style-type: none;
    position: absolute;
    right: 10%;
    top: 20px;
    float: left;
}

#header li {
    float: left;
    margin: 0 5px;
}

#header a {
    text-decoration: none;
    color: white;
}

#gob {
    width: 150px;
    margin: 1rem 0 0 3rem;
}

#banner { /*deskop*/
    width:100%;
    min-height: 100vh;  
    background-image: url("../img/banner.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    padding:0;
    top:70px;
    position:relative;
    float:center;
    margin:0 auto 0rem auto;
    z-index: -1;
    
    
}



.espacio {
    background-color: transparent;
    height: 1.2rem;
}

#boton {
    float: center;
    height: 50vh;
    text-align: center;
    background-color: transparent;
}

#boton button {
    width: 50%;
    margin: 10vh auto;
    border-radius: 15px;
    color: white;
    padding: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    background: rgb(192, 22, 11);
    background: linear-gradient(270deg, rgba(192, 22, 11, 1) 21%, rgba(233, 73, 61, 1) 53%, rgba(186, 14, 3, 1) 76%);
    -webkit-box-shadow: -2px -1px 20px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -2px -1px 20px 0px rgba(0, 0, 0, 0.75);
    box-shadow: -2px -1px 20px 0px rgba(0, 0, 0, 0.75);
}

a:visited {
    color: white;
}
    

#boton button:hover {
    background: rgb(192, 22, 11);
    background: linear-gradient(270deg, rgba(192, 22, 11, 1) 14%, rgba(230, 70, 58, 1) 30%, rgba(233, 73, 61, 1) 72%, rgba(186, 14, 3, 1) 91%);
}





#terminar a {
    text-decoration: none;
    color: white;
}

#creditos {
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
}

#directorio {
    width: 50%;
    float: left;
    height: 100vh;
    text-align: center;
    padding: 2rem;
    box-sizing: border-box;
    font-family: montserrat;
}

#form {
    width: 50%;
    font-family: montserrat;
    float: right;
    padding: 2rem;
    box-sizing: border-box;
    height: 100vh;
}

#pie {
    background-color: blueviolet;
    height: 500px;
}

#footer {
    font-family: 'Montserrat', sans-serif;
    background-color: rgb(12, 35, 30);
    padding: 2rem 8%;
    height: 90vh;
    color: white;
    box-sizing: border-box;
}

#footer a {
    text-decoration: none;
    color: white;
}

#second {
    width: 20%;
    float: center;
    margin: auto;
    padding: 1.5rem;
}

#first {
    width: 20%;
    float: left;
    margin: auto;
    padding: 1.5rem;
}

#third {
    width: 20%;
    float: right;
    margin: auto;
    padding: 1.5rem;
}

#slider {
    height: 90vh;
    background-color: #FFF5EE;
}

#slider img {
    height: 74vh;
    max-width: 80%;
}

.carrete {
    height: 74vh;
}

.next {
    z-index: 9999;
    position: absolute;
    right: 4rem;
    margin: -30% auto;
    border-radius: 3px 0 0 3px;
    font-size: 5.5rem;
    padding: 10px;
    background-color: #4fad76;
    border-radius: 5px;
    color: white;
}

.prev {
    z-index: 9999;
    position: absolute;
    left: 4rem;
    margin: -30% auto;
    border-radius: 3px 0 0 3px;
    font-size: 5.5rem;
    padding: 10px;
    background-color: #4fad76;
    border-radius: 5px;
    color: white;
}

.next:hover {
    background-color: #1e6613;
    cursor: pointer;
}

.prev:hover {
    background-color: #1e6613;
    cursor: pointer;
}

.captions {
    background-color: #4fad76;
    background-image: url('../img/background.jpg');
    padding: 1.5rem 15rem;
    height: 15vh;
    font-size: 1.1rem;
    text-align: center;
    margin: 0 auto;
    position: relative;
    font-family: 'Montserrat', cursive;
}

#mariachi {
    overflow-y: scroll;
    height: 55vh;
    border: 3px solid #000;
    box-sizing: border-box;
    padding: 10px 55px;
    color: white;
    text-align: justify;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: lighter;
    cursor: default;
}

#fonemas {
    background-color: #E9493D;
    padding: 1.5rem 5rem;
    box-sizing: border-box;
    height: auto;
    line-height: 1.5;
    font-size: 1.1rem;
    text-align: center;
}

#fonemas audio {
    width: 90%;
    margin: 2rem 5%;
    float: center;
    position: relative;
}

.formulario {
    background-color: rgba(192, 22, 11, .8);
    color: white;
    border-radius: 15px;
    font-weight: bold;
    width: 70%;
    margin: 2rem auto;
    padding: 1.5rem;
}

.formulario textarea {
    width: 100%;
    height: 8rem;
}

.formulario input {
    width: 100%;
    height: 2rem;
}

.formulario button {
    width: 20%;
    box-sizing: content-box;
    padding: 5px;
    background-color: white;
    font-family: 'Montserrat';
    font-weight: bold;
}

.redes {
    text-align: center;
}

.redes img {
    margin: 0.5rem;
    width: 2rem;
}
#textopavel {
    width: 75%;
    box-sizing: content-box;
    position:relative;
    text-align: justify;
   
    margin:0em auto;
    z-index: -1;
    color:white;
    font-size:1.2rem;
    font-weight: lighter;
    line-height: 1.8em;
    background-color: rgba(233,73,61,0.75);
}
    #textopavel p{
        padding: 0rem 6rem 8rem 6rem;
    }

#textopavel h1{
    text-align: center;
}

.recorrido {
    background-color: rgb(12, 35, 30);
    font-size:x-large;
    width:20%;
    height:1.4rem;
    padding: 2.5rem;
    box-sizing: content-box;
    text-align: center;
    margin:1rem auto;
    position: relative;
    float:center;
    color:white;
    border-radius:15px;
    } 
    .recorrido:visited{
        color:white !important;
        text-decoration:none;
    }

.recorrido:hover{
    font-size:larger;
}
}