.overlay {
    background-color:rgba(0, 0, 0, 0.5);  /* rgba(255, 0, 0, 0.1) */
    position: fixed; /*   */
	width: 100%;
	height: 100%;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    display:none;
	
    z-index:1000; /*     */
}
	
#scrollable {
  position: absolute;
  height: calc(100% - 30px);
  width: 100%;
  overflow-y: auto;
}



.modelBox a{
text-decoration: none;
}


.modelBox{

width: 95%;
min-height: 150px;
max-width: 500px;
margin: 30px auto;
background:lightblue;  /*#f3f3f3;*/
position: relative;
	overflow: auto;

/*padding: 15px 35px;*/
	
border-radius:5px;
box-shadow: 0 2px 5px #000;
border:1px red solid;
}

.infobox{
background:white;
padding:5px 5px 5px 15px;
border-top-right-radius:5px;
border-top-left-radius: 5px;	
	
}
.modelBox p{
clear: both;
color: red;     /*#555555;*/
/* text-align: justify; */
font-size: 20px;
font-family: sans-serif;
	
}
.modelBox p a{
color: #d91900;
font-weight: bold;
}
.modelBox .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.modelBox .x:hover{
cursor: pointer;
}
.close{
color:brown;
font-size: 1.2em;
border-radius: 10px;
margin-left: 10px;
}


@media only screen and (min-width : 700px) {
		.xxxmodelBox{
          width: 45%;
	     }