.serImg {
 border-radius: 5px;
 cursor: pointer;
 transition: 0.3s;
}
.serImg:hover {opacity: 0.7;}

.modal {
 display: none;
 position: fixed; /* Stay in place */
 z-index: 9999; /* Sit on top */
 padding-top: 100px; /* Location of the box */
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
 transition: 0.8s;
 opacity: 0;
}

.modal-content {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 550px;
 border-radius: 5px;
}




@media only screen and (max-width: 700px){
 .modal-content {
 width: 100%;
 }
}


.close {

 position: absolute;
    top: 75px;
    right: 550px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;
}
.close:hover,
.close:focus {
 color: #bbb;
 text-decoration: none;
 cursor: pointer;
}

.close_block{
	width: 100%;
	height: 10%;
}