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

- BACKGROUND + ICON
- ICON ANIMATIONS + SPEED + SIZES
- FADE-OUT + HIDE ANIMATIONS
- LOADING SENTENCE
- MISC
*************************************************************/


/*
* BACKGROUND + ICON
*************************************************************/
/* the background */
.bonfire-pageloader-background {
	position:fixed;
	z-index:99999997;
	top:0;
	left:0;
	width:100%;
	height:100%;
    width:100vw;
	height:100vh;
	margin:0;
	padding:0;
	
	/* default background color */
	background-color:#1FB6DB;
}
/* the loading icon */
.bonfire-pageloader-icon-wrapper {
    display:table;
    width:100%;
    height:100%;
    position:fixed;
    z-index:99999999;
    top:0;
    left:0;
    opacity:1;
}
.bonfire-pageloader-icon {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.bonfire-pageloader-icon svg {
	/* default icon color */
	fill:#fff;
}
.bonfire-pageloader-icon .icon-wrapper {
	padding:10px;
}
/* never let the loaidng image go beyond screen boundaries */
.bonfire-pageloader-icon-wrapper img {
    max-width:90%;
    min-width:0;
    height:auto;
}


/*
* ICON ANIMATIONS + SPEED + SIZES
*************************************************************/
/* rotate the icon clockwise */
.pageloader-clockwise {
	animation:clockwise 2s linear infinite;
	-moz-animation:clockwise 2s linear infinite;
	-webkit-animation:clockwise 2s linear infinite;
}
@keyframes clockwise { 100% { transform:rotate(360deg); } }
@-moz-keyframes clockwise { 100% { -moz-transform:rotate(360deg); } }
@-webkit-keyframes clockwise { 100% { -webkit-transform:rotate(360deg); } }
/* fade animation */
@keyframes fadeAnimation {
  0%   { opacity:1; }
  50%  { opacity:.15; }
  100% { opacity:1; }
}
@-moz-keyframes fadeAnimation {
  0%   { opacity:1; }
  50%  { opacity:.15; }
  100% { opacity:1; }
}
@-webkit-keyframes fadeAnimation {
  0%   { opacity:1; }
  50%  { opacity:.15; }
  100% { opacity:1; }
}
.pageloader-animate-fade {
    animation:fadeAnimation 1.5s infinite;
    -moz-animation:fadeAnimation 1.5s infinite;
    -webkit-animation:fadeAnimation 1.5s infinite;
}
/* icon speeds */
.pageloader-iconspeedslow {
	animation-duration:2.5s;
	-moz-animation-duration:2.5s;
	-webkit-animation-duration:2.5s;
}
.pageloader-iconspeedfast {
	animation-duration:1s;
	-moz-animation-duration:1s;
	-webkit-animation-duration:1s;
}
.pageloader-iconspeednone {
	animation-duration:0s;
	-moz-animation-duration:0s;
	-webkit-animation-duration:0s;
}
/* icon sizes */
.pageloader-iconsize100 svg {
	width:100px;
	height:100px;
}
.pageloader-iconsize75 svg {
	width:75px;
	height:75px;
}
.pageloader-iconsize50 svg {
	width:50px;
	height:50px;
}
.pageloader-iconsize25 svg {
	width:25px;
	height:25px;
}


/*
* FADE-OUT + HIDE ANIMATIONS
*************************************************************/
/* icon/image hide */
.bonfire-pageloader-icon-hide {
    opacity:0;
    left:-1000%;
}
/* background fade-out/hide */
.bonfire-pageloader-hide {
    opacity:0 !important;
    left:-1000% !important;
}


/*
* LOADING SENTENCE
*************************************************************/
.bonfire-pageloader-sentence {
	font-family:'Roboto',arial,tahoma,verdana;
	font-weight:300;
	font-size:14px;
	color:#B0E6F3;
	text-align:center;
	cursor:default;
}


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