/* 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
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.throbber-shade {
    display:    none;
    position:   absolute;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
}
.throbber-shade {
    z-index:    1000;
    background: #fff;
    opacity: 0.65;
}
.throbber-shade:before {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -10px;
	font-size: 20px;
	height: 20px;
	width: 20px;
	display: block;
	line-height: 20px;
    text-align: center;
	content: "\231b";
    font-family: 'Glyphicons Halflings';
    color: #0039a6;
    -webkit-animation: throbber-spin 4s linear infinite;
    -moz-animation: throbber-spin 4s linear infinite;
    animation: throbber-spin 4s linear infinite;
}
.throbber-shade:after {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -7px 0 0 -3px;
	height: 0;
	width: 0;
	display: block;
	border-width: 7px 3px;
	border-style: solid;
	border-top-color: rgba(255,160,0,1);
	border-bottom-color: rgba(0,0,0,0);
	border-left-color: rgba(0,0,0,0);
	border-right-color: rgba(0,0,0,0);
	content: "";
    -webkit-animation: throbber-sand 4s linear infinite;
    -moz-animation: throbber-sand 4s linear infinite;
    animation: throbber-sand 4s linear infinite;
}
@-moz-keyframes throbber-spin {
	0% {
    -webkit-transform: rotate(0deg);
    }
    40% {
    -webkit-transform: rotate(0deg);
    }
    50% {
    -webkit-transform: rotate(180deg);
    }
    90% {
    -webkit-transform: rotate(180deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes throbber-spin {
	0% {
    -webkit-transform: rotate(0deg);
    }
    40% {
    -webkit-transform: rotate(0deg);
    }
    50% {
    -webkit-transform: rotate(180deg);
    }
    90% {
    -webkit-transform: rotate(180deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    }
}
@keyframes throbber-spin {
	0% {
    -webkit-transform: rotate(0deg);
    }
    40% {
    -webkit-transform: rotate(0deg);
    }
    50% {
    -webkit-transform: rotate(180deg);
    }
    90% {
    -webkit-transform: rotate(180deg);
    }
    100% {
    -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes throbber-sand {
	0% {
    -webkit-transform: rotate(0deg);
    border-top-color: rgba(255,160,0,1);
	border-bottom-color: rgba(0,0,0,0);
    }
    40% {
    -webkit-transform: rotate(0deg);
    border-top-color: rgba(0,0,0,0);
	border-bottom-color: rgba(255,160,0,1);
    }
    50% {
    -webkit-transform: rotate(180deg);
    border-top-color: rgba(0,0,0,0);
	border-bottom-color: rgba(255,160,0,1);
    }
    90% {
    -webkit-transform: rotate(180deg);
    border-top-color: rgba(255,160,0,1);
	border-bottom-color: rgba(0,0,0,0);
    }
    100% {
    -webkit-transform: rotate(360deg);
    border-top-color: rgba(255,160,0,1);
	border-bottom-color: rgba(0,0,0,0);
    }
}
@-webkit-keyframes throbber-sand {
	0% {
    -webkit-transform: rotate(0deg);
    border-top-color: rgba(255,160,0,1);
	border-bottom-color: rgba(0,0,0,0);
    }
    40% {
    -webkit-transform: rotate(0deg);
    border-top-color: rgba(0,0,0,0);
	border-bottom-color: rgba(255,160,0,1);
    }
    50% {
    -webkit-transform: rotate(180deg);
    border-top-color: rgba(0,0,0,0);
	border-bottom-color: rgba(255,160,0,1);
    }
    90% {
    -webkit-transform: rotate(180deg);
    border-top-color: rgba(255,160,0,1);
	border-bottom-color: rgba(0,0,0,0);
    }
    100% {
    -webkit-transform: rotate(360deg);
    border-top-color: rgba(255,160,0,1);
	border-bottom-color: rgba(0,0,0,0);
    }
}
@keyframes throbber-sand {
	0% {
    -webkit-transform: rotate(0deg);
    border-top-color: rgba(255,160,0,1);
	border-bottom-color: rgba(0,0,0,0);
    }
    40% {
    -webkit-transform: rotate(0deg);
    border-top-color: rgba(0,0,0,0);
	border-bottom-color: rgba(255,160,0,1);
    }
    50% {
    -webkit-transform: rotate(180deg);
    border-top-color: rgba(0,0,0,0);
	border-bottom-color: rgba(255,160,0,1);
    }
    90% {
    -webkit-transform: rotate(180deg);
    border-top-color: rgba(255,160,0,1);
	border-bottom-color: rgba(0,0,0,0);
    }
    100% {
    -webkit-transform: rotate(360deg);
    border-top-color: rgba(255,160,0,1);
	border-bottom-color: rgba(0,0,0,0);
    }
}

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

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

.throbber-shade > div {
    height: 100%;
    display: table;
    width: 100%;
}

.throbber-shade > div > h1 {
    padding-top: 50px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}