body.pen_loading_spinner #page .pen_wrapper {
	visibility: hidden; /* We cannot use pen_element_hidden nor display:none because of jQuery, such as the jQuery Masonry plugin. */
}
html.no-js body.pen_loading_spinner #page .pen_wrapper,
html.js body.pen_loading_spinner #page .pen_wrapper.pen_hidden {
	animation-delay: 10s;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-name: pen_fade_in;
}
html.js body.pen_loading_spinner #page .pen_wrapper.pen_hidden {
	animation-delay: 30s;
}
@keyframes pen_fade_in {
	from {
		opacity: 0;
		visibility: hidden;
	}
	to {
		opacity: 1;
		visibility: visible;
	}
}
@media print, (prefers-reduced-motion: reduce) {
	#page .pen_loading,
	body.pen_loading_spinner #page .pen_wrapper {
		animation-duration: 1ms;
	}
}
#page .pen_loading {
	animation-name: pen_fade_out;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	background: rgba(0,0,0,0.85);
	border: 0 none;
	color: rgba(255,255,255,0.5);
	cursor: default;
	display: none;
	font-size: 1.5em;
	font-weight: normal;
	height: 100%;
	left: 0;
	max-height: 100%;
	max-width: 100%;
	min-height: 100%;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 200000;
}
body.pen_loading_spinner #page .pen_loading {
	display: block;
}
body.pen_drop_shadow #page .pen_loading {
	text-shadow: 1px 1px 10px rgba(0,0,0,0.25);
}
html.no-js #page .pen_loading {
	animation-delay: 10s;
	speak: none;
}
html.js #page .pen_loading {
	animation-delay: 30s;
}
@keyframes pen_fade_out {
	from {
		opacity: 1;
		visibility: visible;
	}
	to {
		opacity: 0;
		visibility: hidden;
	}
}
#page .pen_loading .pen_icon,
#page .pen_loading .pen_text,
#page .pen_loading .pen_button.pen_stop {
	position: absolute;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%,-50%);
}
#page .pen_loading .pen_icon {
	height: 250px !important;
	width: 250px !important;
}
#page .pen_loading .pen_button.pen_stop {
	font-size: 0.75em;
	opacity: 0.75;
	padding: 0.5rem 2rem !important;
	top: calc( 50% + 175px ) !important;
	transition: opacity .3s;
	width: auto !important;
}
#page .pen_loading .pen_button.pen_stop:focus,
#page .pen_loading .pen_button.pen_stop:hover,
#page .pen_loading .pen_button.pen_stop:active {
	opacity: 1;
}
body:not(.pen_loading_spinner_style_none) #page .pen_loading .pen_icon:before {
	animation: pen_loading 0.5s infinite linear;
	background: transparent;
	border-radius: 50% !important;
	content: '';
	height: 100% !important;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	width: 100% !important;
}
body.pen_loading_spinner_style_1 #page .pen_loading .pen_icon:before {
	border-top: 10px solid rgba(255,255,255,0.1) !important;
	border-right: 10px solid rgba(255,255,255,0.1) !important;
	border-bottom: 10px solid rgba(255,255,255,0.1) !important;
	border-left: 10px solid rgba(255,255,255,0.75) !important;
}
body.pen_loading_spinner_style_2 #page .pen_loading .pen_icon:before {
	border-top: 10px solid rgba(255,255,255,0.1) !important;
	border-right: 10px solid rgba(255,255,255,0.75) !important;
	border-bottom: 10px solid rgba(255,255,255,0.1) !important;
	border-left: 10px solid rgba(255,255,255,0.75) !important;
}
body.pen_loading_spinner_style_3 #page .pen_loading .pen_icon:before {
	border-top: 1px solid rgba(255,255,255,0.1) !important;
	border-right: 1px solid rgba(255,255,255,0.1) !important;
	border-bottom: 1px solid rgba(255,255,255,0.1) !important;
	border-left: 1px solid rgba(255,255,255,0.5) !important;
}
body.pen_loading_spinner_style_4 #page .pen_loading .pen_text {
	font-weight: normal;
}
body.pen_loading_spinner_style_4 #page .pen_loading .pen_icon:before {
	border-top: 1px solid rgba(255,255,255,0.25) !important;
	border-right: 1px solid rgba(255,255,255,0.25) !important;
	border-bottom: 1px solid rgba(255,255,255,0.25) !important;
	border-left: 1px solid rgba(255,255,255,0.75) !important;
}
@keyframes pen_loading {
	0% {
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}