/*************************************************************
[TABLE OF CONTENTS]

1. PageLoader background / #bonfire-pageloader
2. Loading icon + icon properties (speeds, sizes) / .bonfire-pageloader-icon
3. If Jumbo for Smash active, slide it down post-load
*************************************************************/


/*
PageLoader background
*************************************************************/
/* the pageloader background */
#bonfire-pageloader {
	position:fixed;
	z-index:99999998;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	
	/* default background color */
	background-color:#1FB6DB;
}
.bonfire-pageloader-fade {
	opacity:0 !important;
	
	-webkit-transition: all .6s ease;
	-moz-transition: all .6s ease;
	transition: all .6s ease;
}
.bonfire-pageloader-hide {
	display:none;
}

/*
Loading icon + icon properties (speeds, sizes)
*************************************************************/
/* the loading icon */
.bonfire-pageloader-icon {
	width:100px;
	height:100px;
	position:fixed;
	z-index:99999999;
	top:50%;
	left:50%;
	margin-top:-50px;
	margin-left:-50px;
	opacity:1;
	overflow:visible;
}
.bonfire-pageloader-icon-hide {
	opacity:0 !important;
	
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	transition: all .25s ease;
}
.bonfire-pageloader-icon svg {
	width:100px;
	height:100px;

	/* default icon color */
	fill:#fff;
}

/* rotate the icon counter-clockwise */
.pageloader-counterclockwise {
	-webkit-animation:counterclockwise 2s linear infinite;
	-moz-animation:counterclockwise 2s linear infinite;
	animation:counterclockwise 2s linear infinite;
}
@-webkit-keyframes counterclockwise { 100% { -webkit-transform: rotate(-360deg); } }
@-moz-keyframes counterclockwise { 100% { -moz-transform: rotate(-360deg); } }
@keyframes counterclockwise { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

/* rotate the icon clockwise */
.pageloader-clockwise {
	-webkit-animation:clockwise 2s linear infinite;
	-moz-animation:clockwise 2s linear infinite;
	animation:clockwise 2s linear infinite;
}
@-webkit-keyframes clockwise { 100% { -webkit-transform: rotate(360deg); } }
@-moz-keyframes clockwise { 100% { -moz-transform: rotate(360deg); } }
@keyframes clockwise { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* set the icon speeds */
.pageloader-iconspeedslow {
	-webkit-animation-duration:4s !important;
	-moz-animation-duration:4s !important;
	animation-duration:4s !important;
}
.pageloader-iconspeedfast {
	-webkit-animation-duration:1s !important;
	-moz-animation-duration:1s !important;
	animation-duration:1s !important;
}
.pageloader-iconspeednone {
	-webkit-animation-duration:0s !important;
	-moz-animation-duration:0s !important;
	animation-duration:0s !important;
}

/* set the icon sizes */
.pageloader-iconsize25 {
	margin-bottom:-25px;

	-webkit-transform: scale(0.25);
	-moz-transform: scale(0.25);
	transform: scale(0.25);
}
.pageloader-iconsize50 {
	margin-bottom:-15px;

	-webkit-transform: scale(0.50);
	-moz-transform: scale(0.50);
	transform: scale(0.50);
}
.pageloader-iconsize75 {
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
}
.bonfire-pageloader-sentence {
	font-family:'Montserrat',Arial,Tahoma,Verdana;
	font-weight:700;
	font-size:11px;
	color:#B0E6F3;
	text-align:center;
	cursor:default;
	margin-left:-100%;
    margin-right:-100%;
}


/*
If Jumbo for Smash active, slide it down post-load
*************************************************************/
#header-bar {
	z-index:99999999;
	
	-webkit-transform: translateY(-62px);
	-moz-transform: translateY(-62px);
	transform: translateY(-62px);
	
	-webkit-transition: all .65s ease;
	-moz-transition: all .65s ease;
	transition: all .65s ease;
}
.header-bar-active {
	-webkit-transform: translateY(0) !important;
	-moz-transform: translateY(0) !important;
	transform: translateY(0) !important;
}

.site-logo-wrapper, .jumbo-featured-story-tooltip, .jumbo-featured-story-tooltip-text, .jumbo-canvas-tooltip, .jumbo-canvas-tooltip-text, .featured-story-tip { margin-top:0; }

/* hide PageLoader if so specified */
.pageloader-hide { display:none; }


/*
Close PageLoader button
*************************************************************/
.close-pageloader {
	/* remove the flickering effect of a tapped link when on a touch device */
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	
	position:fixed;
	top:15px;
	right:15px;
	opacity:0;
	
	color:#fff;
	font-family:'Montserrat',Arial,Tahoma,Verdana;
	font-weight:700;
	font-size:11px;
	text-align:right;
	
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
	
	-webkit-transition: all .75s ease;
	-moz-transition: all .75s ease;
	transition: all .75s ease;
}
.close-pageloader-active {
	opacity:1;
	
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	transform: translateY(0);
}