/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
	display:    none;
	position:   fixed;
	z-index:    1000;
	top:        0;
	left:       0;
	height:     100%;
	width:      100%;
	background: rgb(255, 255, 255)
					url('/assets/img/FhHRx.gif')
					50% 50% no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}


.popup{
	background-color: rgba(0, 0, 0, 0.75);
	color: #333333;
	display: none;
	height: 100%;
	left: 0px;
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 100;
}

.popup-inner{ font-weight: bold; }

.popup-inner{
	background-color: #ffffff;
	border-radius: 3px;
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
	left: 50%;
	max-width: 700px;
	padding: 40px;
	position: absolute;
	text-align: center;
	transform: translate(-50%, -50%);
	top: 50%;
	width: 90%;
	-webkit-transform: translate(-50%, -50%);
}

.popup-close {
	background: rgba(0, 0, 0, 0.8);
	border: 2px solid #ffffff;
	border-radius: 1000px;
	color: #ffffff;
	height: 33px;
	display: inline-block;
	font-family: Arial, Sans-Serif;
	font-size: 17px;
	line-height: 100%;
	padding-left: 2px;
	padding-top: 4px;
	position: absolute;
	right: 0px;
	text-align: center;
	transform: translate(50%, -50%);
	transition: ease 0.25s all;
	top: 0px;
	width: 33px;
	-webkit-transform: translate(50%, -50%);
}

.popup-close:hover{
	background: rgba(0, 0, 0, 1);
	text-decoration: none;
	transform: translate(50%, -50%) rotate(180deg);
	-webkit-transform: translate(50%, -50%) rotate(180deg);
}