/* popin title */
.popinTitle {
	font-family: verdana, arial, helvetica;
	font-size: 20pt;
	font-weight: bold;
	color: #FFFFFF;
}

/* popin background */
.popin {
    display: none; 			/* Hidden by default */
    position: fixed; 		/* Stay in place */
    z-index: 1; 			/* Sit on top */
    /*padding-top: 70px;   */		/* Location of the box */
    /*padding-left: 100px; */	/* Location of the box */
    left: 0;
    top: 0;
    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.6); 	/* Black w/ opacity */
}

/* popin content */
.popin-content {
    /*position: relative;*/
    background-color: #FDCA03;
    margin: 0;
    padding: 0;
    border: 1px solid #888;
    width: 600px;
    height: 350px;
	position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50% + 300;
}
    
/* Animation : */
/*    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s	*/
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}