.modalDialog {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 16777271;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    }

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.5s 0s, transform 0.5s;
    }

    .modalDialog > div {
		position:relative;
		float:left;
        width: 300px;
		height:auto;
        position: relative;
        margin: 2% auto 0 auto;
        padding: 5px 5% 13px 5%;
        border-radius: 10px;
        background: #fff;
	left: 50%;
	transform: translateX(-50%);
		overflow-x:hidden;
		overflow-y:auto;
    }

.close {
        background: #24939f;
        color: #fff;
        line-height: 25px;
        position: absolute;
        right: 12px;
  		font-family: 'assistant', sans-serif;
		font-size:20px;
        text-align: center;
        top: 15px;
        width: 30px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 5px;	
	text-decoration:none; 
}

.close:hover { 
	background: #24939f; 
	color: #fff;	
	text-decoration:none; 
}

.close a:link{
	color:#fff;
	text-decoration:none;
}

@media screen and (max-width: 1200px) {	
.modalDialog {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 16777271;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
	overflow:auto;
}
	
.modalDialog > div {
		position:relative;
		float:left;
        width: 80%;
		height:auto;
        margin: 2% 0% 0 0%;
        padding: 20px 2% 20px 2%;
        border-radius: 10px;
        background: #fff;
    }
    .close {
        background: #fff;
        color: #24939f;
        line-height: 25px;
        position: absolute;
        right: 12px;
  		font-family: 'assistant', sans-serif;
		font-size:20px;
        text-align: center;
        top: 15px;
        width: 30px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
		z-index:99999;
    }
}	

@media screen and (max-width: 850px) {
	.modalDialog {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    transform: scale(1.0);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    }
	.modalDialog > div {
		position:relative;
		float:left;
        width: 90%;
		height:auto;
        margin: 10% 0% 20px 0%;
        padding: 5px 5% 20px 5%;
        border-radius: 0px;
        background: #fff;
		z-index: 99999;
    }

    .close {
        background: #24939f;
        color: #fff;
        line-height: 25px;
        position: absolute;
        right: 2px;
        text-align: center;
        top: 2px;
        width: 30px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
		z-index:999999;
    }
}