@media screen and (max-width:640px) {

.modal{
	width:100%; 
	height:100%; 
	background: rgba(0,0,0,.3);
	position:fixed;
	top:0;
	left:0;
	display:none;
}
#titulo{
	width:95%; 
	text-align:justify;
	font-family: Arial,Georgia, Times New Roman, serif;
	font-size:120%;
	color:white;
	font-weight: bold;
	
}
.ventana{
	width:100%;
	height:95%;
	text-align:center;
	position:absolute;
	top:5%;
	left:10px;
	margin-left:-0%;
	}
.boton-cerrar{
padding:3px 10px;
border:1px solid rgba(0,0,0,0.4);
text-shadow:0 -1px 0 rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius:0.3em;
background:orange;
color:white;
float:right;
font-weight:bold;
cursor:pointer;
font-size:20px;
}



#mimg{
width:95%;
height:350px;

}


.modal-image{
    

            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.9);
        }

        .modal-content-img{
            margin: auto;
            display: block;
            max-width: 100%;
            max-height: 95%;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

       

        .modal-nav{
            display: flex;
            justify-content: center;
        }

    
}


@media screen and (max-width:1919px) and (min-width:1024px) {
.modal{
	width:100%; 
	height:100%; 
	background: rgba(0,0,0,.3);
	position:fixed;
	top:0;
	left:0;
	display:none;
}
#titulo{
	width:70%;  
	text-align:justify;
	font-family: Arial,Georgia, Times New Roman, serif;
	font-size:150%;
	color:white;
	font-weight: bold;
	
}
.ventana{
	width:100%;
	height:95%;
	text-align:center;
	position:absolute;
	top:5%;
	left:10px;
	margin-left:-0%;
	}
.boton-cerrar{
padding:3px 10px;
border:1px solid rgba(0,0,0,0.4);
text-shadow:0 -1px 0 rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius:0.3em;
background:orange;
color:white;
float:right;
font-weight:bold;
cursor:pointer;
font-size:20px;
}



#mimg{
width:50%;
height:500px;

}


.modal-image{
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.9);
        }

        .modal-content-img{
            margin: auto;
            display: block;
            max-width: 100%;
            max-height: 95%;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

       

        .modal-nav{
            display: flex;
            justify-content: center;
        }

}

@media screen and (max-width:1024px) and (min-width:640px) {

.modal{
	width:100%; 
	height:100%; 
	background: rgba(0,0,0,.3);
	position:fixed;
	top:0;
	left:0;
	display:none;
}
#titulo{
	width:90%;  
	text-align:justify;
	font-family: Arial,Georgia, Times New Roman, serif;
	font-size:150%;
	color:white;
	font-weight: bold;
	
}
.ventana{
	width:100%;
	height:95%;
	text-align:center;
	position:absolute;
	top:5%;
	left:10px;
	margin-left:-0%;
	}
.boton-cerrar{
padding:3px 10px;
border:1px solid rgba(0,0,0,0.4);
text-shadow:0 -1px 0 rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius:0.3em;
background:orange;
color:white;
float:right;
font-weight:bold;
cursor:pointer;
font-size:20px;
}



#mimg{
width:90%;
height:500px;

}


.modal-image{
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.9);
        }

        .modal-content-img{
            margin: auto;
            display: block;
            max-width: 100%;
            max-height: 95%;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

       

        .modal-nav{
            display: flex;
            justify-content: center;
        }    
    
}

@media only screen and (min-width: 1920px)
{
.modal{
	width:100%; 
	height:100%; 
	background: rgba(0,0,0,.3);
	position:fixed;
	top:0;
	left:0;
	display:none;
}
#titulo{
	width:90%;  
	text-align:justify;
	font-family: Arial,Georgia, Times New Roman, serif;
	font-size:180%;
	color:white;
	font-weight: bold;
	
}
.ventana{
	width:100%;
	height:95%;
	text-align:center;
	position:absolute;
	top:5%;
	left:10px;
	margin-left:-0%;
	}
.boton-cerrar{
padding:3px 10px;
border:1px solid rgba(0,0,0,0.4);
text-shadow:0 -1px 0 rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius:0.3em;
background:orange;
color:white;
float:right;
font-weight:bold;
cursor:pointer;
font-size:20px;
}



#mimg{
width:60%;
height:800px;

}


.modal-image{
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.9);
        }

        .modal-content-img{
            margin: auto;
            display: block;
            max-width: 100%;
            max-height: 95%;
            animation-name: zoom;
            animation-duration: 0.6s;
        }

       

        .modal-nav{
            display: flex;
            justify-content: center;
        }    
    
    
    
}