.box {
	width: 40%;
	height: auto;
	top: 10%;
	left: 50%;
	padding: 20px 5px 10px;
	position: fixed;
	display: inline-block;
	background: #FFF;
	box-shadow: 0 0 10px rgba(0,0,0,.4);
	visibility: hidden;
	z-index: 10;
	
    -webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
         -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    
	-webkit-transition: opacity .7s, top .7s;
	   -moz-transition: opacity .7s, top .7s;
        -ms-transition: opacity .7s, top .7s;
         -o-transition: opacity .7s, top .7s;
            transition: opacity .7s, top .7s;
}

.overlay {
	background-color: rgba(0,0,0,0.4);
	cursor: default;
	opacity: 0;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	visibility: hidden;
	z-index: 1;
    
	-webkit-transition: opacity .7s;
       -moz-transition: opacity .7s;
        -ms-transition: opacity .7s;
         -o-transition: opacity .7s;
            transition: opacity .7s;
}
    .overlay:target {
        visibility: visible;
        opacity: 1;
    }
    .overlay:target+.box {
        top: 40%;
        opacity: 1;
        visibility: visible;
    }

.close {
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAtVJREFUeNrkWT1oVEEQ3nl3ihKEK0REUGJlcU0qLRMCWmkhGAlWipg2prbIXWFhFdJGxFQSiCCilUWIpVY2V1gJCiJocWAhRE3cb3l7HOe+y5udWbPgwrLk3d33s5udmd1nzP/WNttTkzlhEwO8Y4fl8s++7atzvXcdJeHAWbS9VT7q1sWmmgSP7XDz5+6e6e/smtbhwhwq3E/XLdEtoXgRdlGXAOBb3xtmZ/qiefOj6cjwvPxcJB5YwAQ2ODjYxCFYevrQnGmfMx97783KtTvmwtFfbsZiVkILm7gEvklMaGJTDIHEhDY2xRLEmEiBTRICDlEq7GIkFrMJ0PA9fL8qOsWKH4O98tcK2Id7iMUIYxyC/War/ChKfAh79thvlyfsKtBgBaz4GZdeLcnM7RtRBFWzpSHeY5+fu+JxB5qdAetmGyNmbfvRE+c2to2a0BDvV+Dt5gu/sgPNw5m4i6XB8mOptExoiff/mmWZ0VWNQlXt26fPbjx++pSK+FAUEueBlI2dB3IyEZ2JczAhroUO0oRaNXoQJmKKQ9aJLKWJ2PKccyZOZkJytiAO0aiJe682RDHe54r7l+ajT3dFDOlEk1zXahK8gjv7qFgx+wsba+LZ91kaWMAENveigGLFp9jEa/MLw/WOzib+F+IlJigX8bEmKCfxMSYoN/FcE5SjeI4JSile60AzzsTwtcpdTfEgRoZFlx5PA3miE0pky5rifW2jdcYeMbEYMtBCjXN2dlpNPGobdC0T0FZeq7RCBvog+7D1Opqo4mJrXcMEfgdtJW4/ZGDVX6tg03CJqkricsOJTAQ2clc1CqW+3B0XhcR5IPX1OisPcE2kfsERlYnrmkj9iklUC+1nIvVLPpVqtMpE++pld0ssEV9lAtfnvWcv9c4DIRO5vehu1CL5+uX59RMnqUE0NdEsjtgRieSBJViSVpwpsatmbDJV+ZwSO9v2R4ABACLbAbScaFuhAAAAAElFTkSuQmCC);
	height:48px;
	width:48px;
	position:absolute;
	top:-15px;
	right:-15px;
	text-align:center;
	text-decoration:none;
}