.modal {
	-webkit-transition: all 250ms ease;
	-moz-transition: all 250ms ease;
	-ms-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	transition: all 250ms ease;
	box-sizing: border-box;
	padding: 0px;
	background-color: #fff;
	color: #333;
	border-radius: 3px;
	width: 100%;
	max-width:800px;
	margin:0 auto;
	text-align:center;
	display: none;
	opacity: 0;
	position: fixed;
	top: 5%;
	bottom:inherit;
	z-index: 999;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
	overflow:inherit;
}
.modal .modal-body { z-index:99; padding:20px 15px; background:#fff; }
.modal.visible {
	opacity: 1;
}
.modal .close-modal:focus {
	outline: none;
}
#modal-background.visible {
	opacity: 1;
}
.modal:before {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.75);
    z-index: 1;
}

@media only screen and (max-width: 767px) {
	.modal { left:5px; right:5px; top:5px; bottom:5px; width:auto; }
	.popup_principals_img img { width:110px; }	
}
@media only screen and (max-width: 359px) {
	.popup_principals_img img { width:80px; margin:0px 10px 5px 0; }	
	.principals a.close { top:0 !important; }
	.modal .modal-body { padding:10px;}
}