/*movil*/
@media only screen and (max-width:600px) {

    body {/*movil*/
        background-image: url(background.jpg);
        background-size: cover;
        font-size: 1.8rem;
        font-family: 'Montserrat';
        zoom:55%;
        
    }
    #mydiv {/*movil*/
        position: absolute;
        z-index: 9;
        background-color: rgba(50, 44, 11, 0.5);
        text-align: center;
        zoom:65%;
    }
    #mydivheader {/*movil*/
        padding: 0px;
        background-image: url(fondo_movil.jpg);
        background-repeat: no-repeat;
        cursor: move;
        z-index: 9;
        width: 5126px;
        height: 3539px;
        color: #000;
        font-size: 2rem;
    }
    .popups {/*movil*/
        width: 5126px;
        height: 3539px;
        /*contenedos de los botones invisibles*/
    }

#ventana /*adentro nada más*/ {
    text-align: left;/*movil*/

}


.minipopup {/*movil*/
        font-family: 'Montserrat', sans-serif;
        color: white;
        text-align: justify;
        padding: 2.85rem 3.5rem;
        font-size: 2rem;
        font-weight: lighter;
        line-height: 1.8em;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.85);
        position: absolute;
        width: 15%;
        border-radius: 15px;
        height: auto;
        cursor: default;
        
}

    .svg {/*movil*/
        cursor: grab;
        background-size: 100% 100%;
    }
    .svg:active {/*movil*/
    cursor: grabbing;
    }
    
    a:visited {/*movil*/
        color: white;
    }
    #cerrar {/*movil*/
        background-color: #E9493D;
        top: .5em;
        right: .5em;
        padding: 25px;
        -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;
        text-decoration: none;
        font-size: 2.5rem;
        color: white;
    }
    #cerrar:hover {/*movil*/
        background-color: #f58e53;
        color: white;
    }
    #cerrar:visited {/*movil*/
        color: white;
    }
    .path {/*movil*/
        fill: rgba(15, 15, 15, 0);
          transition: 0.5s;
    }
    .path:hover {/*movil*/
        fill: rgba(219, 28, 28, 0.66);        
        cursor: pointer;
        filter: blur(10px);
    }
    .ocultar {/*movil*/
        display: none !important;
    }
    /*pequeñito popup desktop small primero*/
    /*el id es para escritorio y el class para movil*/
    #mariachi {       /*movil*/
        top: 2%;        
        right: 5.55%;        
    }
    
    button {/*movil*/
        background-color: rgb(255, 255, 255);
        padding: 15px;
        width: 60%;
        height: 5%;
        box-sizing: content-box;
        border: 0px solid #000;
        border-radius: 10px;
        font-family: 'Montserrat';
        margin: 2rem auto;
        float: center;
        font-size: 1.1rem;
        text-decoration: none;
    }
    button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    #mariachi img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*metro MOVIL*/
    #metroenm {/*movil*/
        top: 32%;
        left: 53%;
    }
    
    /*metro MOVIL*/
    #metroenm button {/*movil*/
        background-color: rgb(255, 255, 255);
        padding: 15px;
        width: 40%;
        height: 5%;
        border: 0px solid #000;
        border-radius: 10px;
        font-family: 'Montserrat';
        font-size: 1.1rem;
    }
    /*metro MOVIL*/
    #metroenm button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro MOVIL*/
    #metroenm img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*sabado*/
    #sabado {/*movil*/
        top: 19.5%;
        right: 18.55%;
    }
    /*metro MOVIL*/
    #sabado button {/*movil*/
        background-color: rgb(255, 255, 255);
        padding: 15px;
        width: 40%;
        height: 5%;
        border: 0px solid #000;
        border-radius: 10px;
        font-family: 'Montserrat';
        font-size: 1.1rem;
    }
    /*metro MOVIL*/
    #sabado button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro MOVIL*/
    #sabado img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*fiestas*/
    #fiestas { /*movil*/      
        top: 15%;
        left: 45.55%;        
    }
    /*metro MOVIL*/

    /*metro MOVIL*/
    #fiestas button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro MOVIL*/
    #fiestas img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*cerifa*/
    #cerifa {/*movil*/
        top: 20%;
        left: 40.55%;
    }
    /*metro MOVIL*/
    
    
    /*metro MOVIL*/
    #cerifa button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro MOVIL*/
    #cerifa img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*pulqueria*/
    #pulqueria {/*movil*/
       
        top: 38%;
       
        right: 15.55%;
      
    }
    /*metro MOVIL*/

    /*metro MOVIL*/
    #pulqueria button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro MOVIL*/
    #pulqueria img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*cleto */
    #cleto {/*movil*/
       
        bottom: 29%;
        
        left: 11%;
       
    }
    /*metro MOVIL*/

    /*metro MOVIL*/
    #cleto button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro MOVIL*/
    #cleto img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*gatito*/
    #gatito {/*movil*/
       
        top: 55%;       
        left: 12.55%;
        
    }
    /*metro MOVIL*/

    /*metro MOVIL*/
    #gatito button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro MOVIL*/
    #gatito img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*casalupe*/
    #casalupe {/*movil*/
       
        top: 59%;
        left: 9.55%;
        
    }
    /*metro MOVIL*/

  
    #casalupe button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro MOVIL*/
    #casalupe img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*glorieta2*/
    #glorieta2 {/*movil*/
        top: 70%;
       
        left: 15%;
        
    }
    /* MOVIL*/


    #glorieta2 button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /* MOVIL*/
    #glorieta2 img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*angel*/
    #angel {
        /*movil*/
        top: 55%;
        left: 25.55%;
        
    }

    /* MOVIL*/
    #angel button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /* MOVIL*/
    #angel img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*vecindad*/
    #vecindad { /*movil*/ 
        top: 70%;
        left: 32%;
        
    }

    /* MOVIL*/
    #vecindad button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /* MOVIL*/
    #vecindad img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*esquina*/
    #esquina {
    /*movil*/
        top: 42%;
       
        left: 50.55%;
        
    }

    /* MOVIL*/
    #esquina button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /* MOVIL*/
    #esquina img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*cinema*/
    #cinema {/*movil*/
        bottom: 15%;
        right:10%;

       
    }

    /* MOVIL*/
    #cinema button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /* MOVIL*/
    #cinema img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    /*prision */
    #prision {/*movil*/
        top: 2%;
        left: 20.55%;
    }
    button {/*movil*/
        background-color: rgb(255, 255, 255);
        padding: 2rem;
        width: 40%;
        border-radius: 15px;
        font-family: 'Montserrat';
        font-size: 1.8rem;
    }
    #prision button:hover {/*movil*/
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    #prision img {/*movil*/
        width: 50%;
        border-radius: 10px;
    }
    #popup2_prision {/*movil*/
        top: 2%;
        left: 5.55%;
       
    }
    #popup2_retratos {/*movil*/
      
        top: 2%;        
        left: 5.55%;
       
    }
    /*slider*/
    #slider {/*movil*/
        width: 100%;
        position: relative;
        height: 100px;
        /*vh 100% de la altura de la salida*/
        border-radius: 15px;
        -webkit-box-shadow: -1px -1px 24px -5px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: -1px -1px 24px -5px rgba(0, 0, 0, 0.75);
        box-shadow: -1px -1px 24px -5px rgba(0, 0, 0, 0.75);
    }
    #slider img {/*movil*/
        height: 90vh;
        margin: 0;
        cursor: pointer;
    }
    .mySlides figure {/*movil*/
        margin: auto;
        height: auto;
        float: center;
        max-width: 80%;
        background-color: antiquewhite;
        text-align: center;
    }
    .captions {/*movil*/
        background-color: #E9493D;
        width: 100%;
        text-align: center;
        float: center;
        padding: 0.5rem 4rem;
        box-sizing: border-box;
        margin: auto;
        font-weight: normal;
        font-size: 2rem;
        line-height: 2.8rem;
    }
    /*controles next y prev*/
    .next {/*movil*/
        right: 0;
        bottom: -20rem;
        font-size: 5rem;
        z-index: 9999;
        float: left;
        position: absolute;
        padding: 10px;
        background-color: #E9493D;
        border-radius: 5px;
        color: white;
        /*     animation: respirar_R 2s infinite; 
    animation-delay: 500ms;
    animation-direction: alternate;*/
    }
    .prev {/*movil*/
        left: 0;
        bottom: -20rem;
        font-size: 5rem;
        z-index: 9999;
        float: left;
        position: absolute;
        padding: 10px;
        background-color: #E9493D;
        border-radius: 5px;
        color: white;
        /*     animation: respirar_L 2s infinite; 
    animation-delay: 500ms;
    animation-direction: alternate;*/
    }
    .next:hover {/*movil*/
        background-color: #713535;
        cursor: pointer;
    }
    .prev:hover {/*movil*/
        background-color: #713535;
        cursor: pointer;
    }
    .introduccion {/*movil*/
        line-height: 2.8rem;
        font-size: 2rem;
        padding: 2rem;
        box-sizing: border-box;
    }
    .player {/*movil*/
        background-color: rgba(0, 0, 0, 0.0);
        height: auto;
        position: relative;
        margin: 110vh 0 0 0;
        padding: 2vh 15vh;
        font-size: large;
        text-align: center;
    }
    .audio {/*movil*/
        width: 100%;
        height: 10vh;
        margin: 2rem auto;
        position: relative;
        box-sizing: content-box;
        background-color: transparent;
    }
    #retratos {/*movil*/
        top: 25%;
        left: 20.55%;
    }
    #retratos img {/*movil*/
        width: 80%;
    }
    .espacio {/*movil*/
        height: 10vh;
        background-color: transparent;
    }
    #terminar {/*movil*/
        position: absolute;
        right: 3.5rem;
        box-sizing: content-box;
        bottom: 3rem;
        background-color:red ;/*#E9493D*/
        font-size: 3rem;
        color:white;
        font-weight:lighter;
        padding:2rem;
        text-decoration: none;
    }
    
    a{/*movil*/
        text-decoration: none;
        color:white;
    }
    a:visited{text-decoration: none;
    color:white;}
}

/*escritorios chicos*/
@media only screen and (min-width:601px) {

    
    #lateral {
    position: absolute;
    left:0;
    top:0;
    margin:0;
    padding: 0;
    display: flex;
    z-index: 10;
    width: 27.5%;
    height:100%;
    background-image: url(/img/mini_google.jpg);
        background-size: cover;
    
}

#lateral img{
    height:auto;
    width:100%;
}

    
    body {
        background-image: url(background.jpg);
        background-size: cover;
        overflow: hidden;
        font-size: 1.8rem;
    }
    #mydiv {
        position: absolute;
        z-index: 9;
        background-color: rgba(50, 44, 11, 0.5);
        text-align: center;
        zoom:45%;
    }
    #mydivheader {
        padding: 0px;
        background-image: url(fondo.png);
        background-repeat: no-repeat;
        cursor: move;
        z-index: 9;
        width: 5126px;
        height: 3539px;
        color: #000;
        font-size: 2rem;
    }
    .popups {
        width: 5126px;
        height: 3539px;
        /*contenedos de los botones invisibles*/
    }

#ventana /*adentro nada más*/ {
    text-align: left;
    

}

   


.minipopup {
        font-family: 'Montserrat', sans-serif;
        color: white;
        text-align: justify;
        padding: 2.5rem 3.5rem;
        font-size: 3rem;
        font-weight: lighter;
        line-height: 1.2em;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.7);
        position: absolute;
        width: 16.5%;
        border-radius: 25px;
        height: auto;
        cursor: default;
        
}

    .svg {
        cursor: grab;
        background-size: 100% 100%;
    }
    .svg:active {
    cursor: grabbing;
    }
    
    a:visited {
        color: white;
    }
    #cerrar {
        background-color: #E9493D;
        top: .5em;
        right: .5em;
        padding: 25px;
        -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;
        text-decoration: none;
        font-size: 2.5rem;
        color: white;
    }
    #cerrar:hover {
        background-color: #f58e53;
        color: white;
    }
    #cerrar:visited {
        color: white;
    }
    .path {
        fill: rgba(15, 15, 15, 0);
          transition: 0.5s;
    }
    .path:hover {
        fill: rgba(219, 28, 28, 0.66);        
        cursor: pointer;
        filter: blur(10px);
    }
    .ocultar {
        display: none !important;
    }
    /*pequeñito popup desktop small primero*/
    /*el id es para escritorio y el class para movil*/
    #mariachi {       
        top: 2%;        
        right: 5.55%;        
    }
    button {
        background-color: rgb(255, 255, 255);
        padding: 15px;
        width: 40%;
        height: 5%;
        border: 0px solid #000;
        border-radius: 10px;
        font-family: 'Montserrat';
        margin: 2rem auto;
        font-size: 1.1rem;
        text-decoration: none;
    }
    button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    #mariachi img {
        width: 50%;
        border-radius: 10px;
    }
    /*metro desktop*/
    #metroenm {
        top: 32%;
        left: 53%;
    }
    
    /*metro desktop*/
  
    /*metro desktop*/
    #metroenm img {
        width: 50%;
        border-radius: 10px;
    }
    /*sabado*/
    #sabado {
        top: 19.5%;
        right: 18.55%;
    }
    /*metro desktop*/
  
    /*metro desktop*/
    #sabado img {
        width: 50%;
        border-radius: 10px;
    }
    /*fiestas*/
    #fiestas {       
        top: 15%;
        left: 45.55%;        
    }
    /*metro desktop*/

    /*metro desktop*/
    #fiestas button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro desktop*/
    #fiestas img {
        width: 50%;
        border-radius: 10px;
    }
    /*cerifa*/
    #cerifa {
        top: 20%;
        left: 40.55%;
    }
    /*metro desktop*/
    
    
    /*metro desktop*/
    #cerifa button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro desktop*/
    #cerifa img {
        width: 50%;
        border-radius: 10px;
    }
    /*pulqueria*/
    #pulqueria {
       
        top: 38%;
       
        right: 15.55%;
      
    }
    /*metro desktop*/

    /*metro desktop*/
    #pulqueria button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro desktop*/
    #pulqueria img {
        width: 50%;
        border-radius: 10px;
    }
    /*cleto */
    #cleto {
       
        bottom: 29%;
        
        left: 11%;
       
    }
    /*metro desktop*/

    /*metro desktop*/
    #cleto button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro desktop*/
    #cleto img {
        width: 50%;
        border-radius: 10px;
    }
    /*gatito*/
    #gatito {
       
        top: 55%;       
        left: 12.55%;
        
    }
    /*metro desktop*/

    /*metro desktop*/
    #gatito button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro desktop*/
    #gatito img {
        width: 50%;
        border-radius: 10px;
    }
    /*casalupe*/
    #casalupe {
       
        top: 59%;
        left: 9.55%;
        
    }
    /*metro desktop*/

  
    #casalupe button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /*metro desktop*/
    #casalupe img {
        width: 50%;
        border-radius: 10px;
    }
    /*glorieta2*/
    #glorieta2 {
        top: 70%;
       
        left: 15%;
        
    }
    /* desktop*/


    #glorieta2 button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /* desktop*/
    #glorieta2 img {
        width: 50%;
        border-radius: 10px;
    }
    /*angel*/
    #angel {
        
        top: 50%;
        left: 25.55%;
        
    }

    /* desktop*/
    #angel button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /* desktop*/
    #angel img {
        width: 50%;
        border-radius: 10px;
    }
    /*vecindad*/
    #vecindad {        
        bottom: 10%;
        left: 30%;
        
    }

    /* desktop*/
    #vecindad button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /* desktop*/
    #vecindad img {
        width: 50%;
        border-radius: 10px;
    }
    /*esquina*/
    #esquina {
       
        top: 42%;
       
        left: 50.55%;
        
    }

    /* desktop*/
    #esquina button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /* desktop*/
    #esquina img {
        width: 50%;
        border-radius: 10px;
    }
    /*cinema*/
    #cinema {
        bottom: 10%;
        right: 5%;

       
    }

    /* desktop*/
    #cinema button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    /* desktop*/
    #cinema img {
        width: 50%;
        border-radius: 10px;
    }
    /*prision */
    #prision {
        top: 2%;
        left: 20.55%;
    }
    button {
        background-color: rgb(255, 255, 255);
        padding: 2rem;
        width: 40%;
        border-radius: 15px;
        font-family: 'Montserrat';
        font-size: 1.8rem;
    }
    #prision button:hover {
        background-color: rgb(79, 173, 118);
        color: white;
        cursor: pointer;
    }
    #prision img {
        width: 50%;
        border-radius: 10px;
    }
    #popup2_prision {
        top: 2%;
        left: 5.55%;
       
    }
    #popup2_retratos {
      
        top: 2%;        
        left: 5.55%;
       
    }
    /*slider*/
    #slider {
        width: 100%;
        position: relative;
        height: 100px;
        /*vh 100% de la altura de la salida*/
        border-radius: 15px;
        -webkit-box-shadow: -1px -1px 24px -5px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: -1px -1px 24px -5px rgba(0, 0, 0, 0.75);
        box-shadow: -1px -1px 24px -5px rgba(0, 0, 0, 0.75);
    }
    #slider img {
        height: 90vh;
        margin: 0;
        cursor: pointer;
    }
    .mySlides figure {
        margin: auto;
        height: auto;
        float: center;
        max-width: 80%;
        background-color: antiquewhite;
        text-align: center;
    }
    .captions {
        background-color: #E9493D;
        width: 100%;
        text-align: center;
        float: center;
        padding: 0.5rem 4rem;
        box-sizing: border-box;
        margin: auto;
        font-weight: normal;
        font-size: 2rem;
        line-height: 2.8rem;
    }
    /*controles next y prev*/
    .next {
        right: 0;
        bottom: -20rem;
        font-size: 5rem;
        z-index: 9999;
        float: left;
        position: absolute;
        padding: 10px;
        background-color: #E9493D;
        border-radius: 5px;
        color: white;
        /*     animation: respirar_R 2s infinite; 
    animation-delay: 500ms;
    animation-direction: alternate;*/
    }
    .prev {
        left: 0;
        bottom: -20rem;
        font-size: 5rem;
        z-index: 9999;
        float: left;
        position: absolute;
        padding: 10px;
        background-color: #E9493D;
        border-radius: 5px;
        color: white;
        /*     animation: respirar_L 2s infinite; 
    animation-delay: 500ms;
    animation-direction: alternate;*/
    }
    .next:hover {
        background-color: #713535;
        cursor: pointer;
    }
    .prev:hover {
        background-color: #713535;
        cursor: pointer;
    }
    .introduccion {
        line-height: 2.8rem;
        font-size: 2rem;
        padding: 2rem;
        box-sizing: border-box;
    }
    .player {
        background-color: rgba(0, 0, 0, 0.0);
        height: auto;
        position: relative;
        margin: 110vh 0 0 0;
        padding: 2vh 15vh;
        font-size: large;
        text-align: center;
    }
    .audio {
        width: 100%;
        height: 10vh;
        margin: 2rem auto;
        position: relative;
        box-sizing: content-box;
        background-color: transparent;
    }
    #retratos {
        top: 25%;
        left: 20.55%;
    }
    #retratos img {
        width: 80%;
    }
    .espacio {
        height: 5vh;     
    }
    #terminar {
        position: absolute;
        right: 5rem;
        bottom: 4rem;
        background-color: rgb(101, 8, 8);
        width:10%;
        height:2.6rem;
        padding: 2.5rem;
        box-sizing: content-box;
        text-decoration:none;
        text-align: center;
        margin:1.5rem auto;
        float:center;
        border-radius:15px;
       font-family: 'Montserrat';
        font-size:larger;
    }
    a{
        text-decoration: none;
        
    }
    a:visited{
        text-decoration: none;
    }
}