#the-login-modal {
	/*display: none;*/
	background-color: #363636;
	background-color: rgba(40,40,40,0.8);
	width: 100%;
	height: 100%;
	z-index: 9997;
	cursor: pointer;
	position: fixed;
	top: 0;
	left: 0;
	-webkit-animation-name: animateoverlay;
	-webkit-animation-duration: 0.32s;
	animation-name: animateoverlay;
	animation-duration: 0.32s
}

#hide-x {
	font-size: 1.5rem;
	padding: 0 .3rem;
}
.xbutton {
	float:right;
	margin:-10px;
	color:#fff;
	font-weight:bold;
}

.pop-overlay {
	position: fixed;
	z-index: 9990;
}

.pop-box {
	width: 40%;
	position: absolute;
	left: 30%;
	top: 20%;
	padding: 2rem;
	box-shadow: 1px 1px 3px #000;
	z-index: 9999;
	background-color: #fcfdff;
}
#the-login-modal input[type="submit"] {
    background-color: #823493;
    color: #fff;
    padding: .5rem 1rem .5rem 1rem;
}
#the-login-modal a {
	font-weight: 400;
	font-size: 1rem;
	color: #72a1e5;
}
.pop-box > a:nth-child(5),
#the-login-modal > div.pop-box > a:hover {
	color: red;
}
.round-corners {
	-webkit-border-radius: 1px;
	-khtml-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
}
.pop-box.round-corners {
	text-align: center;
}
#user_login,
#user_pass {
	width: 80%;
	margin: 0 10%;
}
/* Add Animation */
@-webkit-keyframes animateoverlay {
	from {top:-3rem; opacity:0} 
	to {top:0; opacity:1}
}

@keyframes animateoverlay {
	from {top:-3rem; opacity:0}
	to {top:0; opacity:1}
}

@media only screen and (max-width: 1199px) {
	.pop-box {
	    width: 60%;
	    margin: auto;
		left: 20%;
	}
}

@media only screen and (max-width: 999px) {
	.pop-box {
	    width: 70%;
	    margin: auto;
		left: 15%;
	}
}

@media only screen and (max-width: 768px) {
	.pop-box {
	    width: 80%;
		left: 10%;
	}
}

@media only screen and (max-width: 768px) {
	.pop-box {
	    width: 90%;
		left: 6%;
	}
}
