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

- BACKGROUND
- LAYERED BACKGROUND
- SPLIT BACKGROUND
- LOADING ELEMENTS WRAPPER
- CLOSE BUTTON
- IMAGE
- ICON
- LOADING SENTENCE
- WIDGETS
- INDIVIDUAL ICONS
- ICON ANIMATIONS + SPEED + SIZES
- FADE-OUT + HIDE ANIMATIONS
- LOADING ELEMENTS SLIDE-IN
- PROGRESS BAR
- LOAD PERCENTAGE
- Z-INDEXES
- MISC
*************************************************************/




/*
* BACKGROUND
*************************************************************/
/* background overlay */
.bonfire-pageloader-overlay {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
    opacity:0;
    pointer-events:none;
	background-color:#000;
}
.bonfire-pageloader-overlay-hide {
	opacity:0;
    left:-1000%;
}
/* background color */
.bonfire-pageloader-background {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
/* background image*/
.bonfire-pageloader-background-image {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
    opacity:.2;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}


/*
* LAYERED BACKGROUND
*************************************************************/
/* background color (second layer) */
.bonfire-pl-layered-bg-1,
.bonfire-pl-layered-bg-2 {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
    background-color:#31373C;
}
.bonfire-pl-layered-bg-2 {
    background-color:#22282D;
}


/*
* SPLIT BACKGROUND
*************************************************************/
/* horizontal split wrapper */
.bonfire-pl-split {
    position:fixed;
    z-index:2;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;

    -webkit-transform:scale(1) !important;
    transform:scale(1) !important;
}
/* horizontal split left half */
.bonfire-pl-split.bonfire-pageloader-reposition .bonfire-pl-split-inner,
.bonfire-pl-split .bonfire-pl-split-inner {
    position:absolute;
    background-color:#22282D;
    overflow:hidden;

    -webkit-transform:translateX(0) translateY(0);
    transform:translateX(0) translateY(0);

    -webkit-transition:transform .75s cubic-bezier(0.75, 0.25, 0, 1);
    transition:transform .75s cubic-bezier(0.75, 0.25, 0, 1);
}
.bonfire-pl-split .bonfire-pl-split-inner span {
    position:absolute;
    top:0;
    left:0;
    width:200%;
    height:100%;

    background-position:center;
}
/* horizontal split right half */
.bonfire-pl-split.bonfire-pageloader-reposition .bonfire-pl-split-inner:nth-child(2),
.bonfire-pl-split .bonfire-pl-split-inner:nth-child(2) {
    -webkit-transform:translateX(0);
    transform:translateX(0);
}


/*
* LOADING ELEMENTS WRAPPER
*************************************************************/
.pageloader-elements-wrapper {
    position:fixed;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:100%;
    opacity:1;
}


/*
* CLOSE BUTTON
*************************************************************/
/* close button wrapper */
.pageloader-close {
    position:fixed;
    right:-1000%;
    margin:15px;
    cursor:pointer;
}
.pageloader-close-active {
    right:0;
}
/* close button text */
.pageloader-close-text {
    position:absolute;
    top:50%;
    right:30px;
    padding:15px;
    user-select:none;
    white-space:nowrap;
    
    font-family:'Inter Tight',sans serif;
    font-weight:700;
    font-size:9px;
    line-height:8px;
    color:#fff;
    text-align:right;

    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
}
.pageloader-close-text span {
    display:block;
    opacity:0;

    -webkit-transform:translateX(-10px);
    transform:translateX(-10px);

    -webkit-transition:opacity .75s ease .4s, transform .85s cubic-bezier(.175,.885,.32,1) .35s, color .25s ease;
    transition:opacity .75s ease .4s, transform .85s cubic-bezier(.175,.885,.32,1) .35s, color .25s ease;
}
.pageloader-close-active .pageloader-close-text span {
    opacity:1;

    -webkit-transform:translateX(0);
    transform:translateX(0);
}
/* close button icon */
.pageloader-close-icon {
    width:34px;
    height:34px;
    border-radius:50%;
    opacity:0;

    -webkit-transform:scale(.5);
    transform:scale(.5);

    -webkit-transition:transform .35s cubic-bezier(.175,.885,.32,1.75), opacity .25s ease, background-color .25s ease, outline .25s ease;
    transition:transform .35s cubic-bezier(.175,.885,.32,1.75), opacity .25s ease, background-color .25s ease, outline .25s ease;
}
.pageloader-close-icon,
.pageloader-close:hover .pageloader-close-icon {
    outline:1px solid transparent;
    background-color:transparent;
}
.pageloader-close-icon svg {
    position:absolute;
    top:8px;
    left:8px;
}
.pageloader-close-icon svg path {
    fill:#fff;

    -webkit-transition:fill .25s ease;
    transition:fill .25s ease;
}
.pageloader-close-active .pageloader-close-icon {
    opacity:1;

    -webkit-transform:scale(1);
    transform:scale(1);
}
/* when close button clicked */
.pageloader-close:active .pageloader-close-icon {
    -webkit-transform:scale(.9);
    transform:scale(.9);

    -webkit-transition:transform .15s cubic-bezier(.175,.885,.32,2);
    transition:transform .15s cubic-bezier(.175,.885,.32,2);
}
/* onclick ripple effect (finish, then perhaps add in an update) */
.pageloader-close-icon {
    position:relative;
    z-index:9;
}
.pageloader-close-icon::before {
    content:'';
    position:absolute;
    z-index:-1 !important;
    top:50%;
    left:50%;
    -webkit-transform:translateY(-50%) translateX(-50%);
    transform:translateY(-50%) translateX(-50%);
    width:40px;
    height:40px;
    border:1px solid transparent;
    border-radius:50%;
    opacity:1;
    pointer-events:none;

    -webkit-transition:all 0s ease;
    transition:all 0s ease;
}
.pageloader-close-deactive .pageloader-close-icon::before {
    width:80px;
    height:80px;
    border-color:rgba(255,255,255,0.5);
    opacity:0;

    -webkit-transition:all .5s ease, border-color 0s ease;
    transition:all .5s ease, border-color 0s ease;
}


/*
* IMAGE
*************************************************************/
.pageloader-image-wrapper {
    position:fixed;
    width:100%;
    height:100%;
    display:table;
    top:0;
    left:0;
    opacity:1;
}
.pageloader-image-inner {
    display:table-cell;
}
.pageloader-image {
    position:relative;
    display:inline-block;
}
/* never let the loading image go beyond screen boundaries */
.pageloader-image img {
    max-width:90%;
    min-width:0;
    height:auto;
}
/* fade animation */
@keyframes pulsateAnimation {
    0%  { opacity:1; }
    55%  { opacity:.15; }
    100% { opacity:1; }
}


/*
* ICON
*************************************************************/
.pageloader-icon-wrapper {
    position:fixed;
    top:0;
    left:0;
    display:table;
    width:100%;
    height:100%;
    opacity:1;
}
.pageloader-icon-inner {
    display:table-cell;
}
.pageloader-icon {
    position:relative;
    display:inline-block;
}


/*
* LOADING SENTENCE
*************************************************************/
.pageloader-sentence-wrapper {
    position:fixed;
    top:0;
    left:0;
    display:table;
    width:100%;
    height:100%;
    opacity:1;

	font-family:'Inter Tight',sans serif;
    font-weight:600;
	font-size:14px;
	color:#fff;
	text-align:center;
    cursor:default;
}
.pageloader-sentence-inner {
    display:table-cell;
}
.pageloader-sentence {
    position:relative;
    top:0;
    left:0;
    right:0;
    padding:0;
    overflow:hidden;
    display:none;
}
/* loading sentence slideup animation */
@keyframes loading-elements-slideup {
    0% { transform:translateY(150%); }
    100% { transform:translateY(0); }
}
.pageloader-sentence span {
    position:relative;
    display:block;
    
    animation-duration:1s;
    animation-timing-function:cubic-bezier(0.5, 0.25, 0, 1);
}
/* when load complete, slidedown sentence */
.bonfire-pageloader-hide .pageloader-sentence span {
    -webkit-transform:translateY(150%);
    transform:translateY(150%);
    -webkit-transition:.5s ease;
    transition:.5s ease;
}

/*
* INDIVIDUAL ICONS
*************************************************************/
.pageloader-widgets-wrapper {
    position:relative;
}


/*
* INDIVIDUAL ICONS
*************************************************************/
/* ICON 4, 7, 8 animation */
@keyframes spinBasic {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ICON 1 */
@keyframes loader1rect1 {
    10% {
        height: 6px;
        transform: translateY(0);
    }
    20%,
    40% {
        height: 15px;
        transform: translateY(-4.5px);
    }
    50%,
    100% {
        height: 6px;
        transform: translateY(0);
    }
}
@keyframes loader1rect2 {
    30% {
        height: 6px;
        transform: translateY(0);
    }
    40%,
    60% {
        height: 15px;
        transform: translateY(-4.5px);
    }
    70%,
    100% {
        height: 6px;
        transform: translateY(0);
    }
}
@keyframes loader1rect3 {
    50% {
        height: 6px;
        transform: translateY(0);
    }
    60%,
    80% {
        height: 15px;
        transform: translateY(-4.5px);
    }
    90%,
    100% {
        height: 6px;
        transform: translateY(0);
    }
}
.loader1 rect {
    animation-timing-function: steps(100, end);
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.loader1 rect:nth-child(1) {
    animation-name: loader1rect1;
}
.loader1 rect:nth-child(2) {
    animation-name: loader1rect2;
}
.loader1 rect:nth-child(3) {
    animation-name: loader1rect3;
}

/* ICON 2 */
@keyframes loader2dot1 {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-15px);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes loader2dot2 {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(15px);
    }
    100% {
        transform: translateX(0);
    }
}
.loader2 svg {
    overflow: visible;
}
.loader2 svg circle:first-of-type {
    animation: loader2dot1 .8s linear infinite;
}
.loader2 svg circle:last-of-type {
    left: 0;
    animation: loader2dot2 .8s linear infinite;
}

/* ICON 3 */
@keyframes loader3path {
    10% {
        width: 8px;
        opacity: 1;
    }
    30% {
        width: 23px;
        x: 0;
    }
    50% {
        width: 8px;
        x: 15;
    }
    70% {
        width: 23px;
        x: 15;
    }
    90% {
        width: 8px;
        x: 30;
        opacity: 1;
    }
    100% {
        opacity: 0;
        x: 30;
    }
}
.loader3 svg rect {
    opacity: 0;
    animation: loader3path 2s ease-in-out infinite;
}

/* ICON 4 */
.loader4 svg {
    animation: 2s linear spinBasic infinite;
}

/* ICON 5 */
@keyframes loader5 {
    0% {
        opacity: 1;
        transform: scale(1);
        stroke-width: 2;
    }
    60% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: scale(5);
        stroke-width: 0;
    }
}
.loader5 svg circle {
    transform-origin: center center;
    transform: scale(1);
    animation: loader5 1.5s linear infinite;
}

/* ICON 6 (animations in pageloader.php) */
.loader6 svg {
    overflow: visible;
}
.loader6 circle:first-of-type {
    transform-origin: 5px center;
    animation: loader6dot1 1.5s ease infinite;
}
.loader6 circle:nth-child(2) {
    transform-origin: center;
    animation: loader6dot2 1.5s ease infinite;
}
.loader6 circle:nth-child(3) {
    transform-origin: 35px center;
    animation: loader6dot3 1.5s ease infinite;
}

/* ICON 7 */
.loader7 svg {
  animation: 2s linear spinBasic infinite;
}

/* ICON 8 */
.loader8 svg {
    animation: 2s linear spinBasic infinite;
}

/* ICON 9 */
@keyframes loader9svg {
    0%,
    25% {
        transform: rotate(0deg);
    }
    45%,
    100% {
        transform: rotate(-180deg);
    }
}
@keyframes loader9dot {
    0% {
        transform: rotate(0deg);
    }
    20%,
    50% {
        transform: rotate(180deg);
    }
    70%,
    100% {
        transform: rotate(360deg);
    }
}
.loader9 svg {
    overflow: visible;
    transform-origin: center center;
    animation: 2.5s linear loader9svg infinite;
}
.loader9 svg circle:nth-of-type(2),
.loader9 svg circle:nth-of-type(3) {
    transform-origin: 26.5px center;
    animation: 2.5s linear loader9dot infinite;
}

/* ICON 10 */
@keyframes rotateWithBoost {
    0% {
        transform: rotate(0deg);
    }
    60% {
        transform: rotate(180deg);
    }
    90%,
    100% {
        transform: rotate(360deg);
    }
}
@keyframes loader10dot1 {
    0%,
    45% {
        cx: 6;
        cy: 6;
    }
    55%,
    80% {
        cx: 2;
        cy: 2;
    }
    90%,
    100% {
        cx: 6;
        cy: 6;
    }
}
@keyframes loader10dot2 {
    0%,
    45% {
        cx: 6;
        cy: 24;
    }
    55%,
    80% {
        cx: 2;
        cy: 28;
    }
    90%,
    100% {
        cx: 6;
        cy: 24;
    }
}
@keyframes loader10dot3 {
    0%,
    45% {
        cx: 24;
        cy: 6;
    }
    55%,
    80% {
        cx: 28;
        cy: 2;
    }
    90%,
    100% {
        cx: 24;
        cy: 6;
    }
}
@keyframes loader10dot4 {
    0%,
    45% {
        cx: 24;
        cy: 24;
    }
    55%,
    80% {
        cx: 28;
        cy: 28;
    }
    90%,
    100% {
        cx: 24;
        cy: 24;
    }
}
.loader10 svg {
    overflow: visible;
    animation: 1.5s rotateWithBoost linear infinite;
}
.loader10 svg circle:first-of-type {
    animation: 1.5s loader10dot1 linear infinite;
}
.loader10 svg circle:nth-of-type(2) {
    animation: 1.5s loader10dot2 linear infinite;
}
.loader10 svg circle:nth-of-type(3) {
    animation: 1.5s loader10dot3 linear infinite;
}
.loader10 svg circle:last-of-type {
    animation: 1.5s loader10dot4 linear infinite;
}


/*
* FADE-OUT + HIDE ANIMATIONS
*************************************************************/
/* icon/image hide */
.bonfire-pageloader-hide {
    opacity:0;
    left:-1000%;
}
.bonfire-pageloader-background.bonfire-pageloader-hide,
.bonfire-pl-layered-bg-1.bonfire-pageloader-hide,
.bonfire-pageloader-background-image.bonfire-pageloader-hide {
	opacity:0 !important;
}


/*
* LOADING ELEMENTS SLIDE-IN
*************************************************************/
@keyframes loading-elements-slide-in {
    from {
        opacity:0;
        -webkit-transform:translateY(25px);
        transform:translateY(25px);
        }
    to {
        opacity:1;
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
        }
}


/*
* PROGRESS BAR
*************************************************************/
/* progress bar wrapper */
.pl-progress-wrapper {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    overflow:hidden;
    pointer-events:none;
    box-sizing:border-box;
}
/* animating progress bar */
.pl-progress-bar {
    position:relative;
    width:0;
    min-height:inherit;
    padding:0;
    margin:0;
    box-sizing:border-box;

    background-color:#4B6A87;
}
.animation-15 {
    width:20% !important;
    
    -webkit-transition:1.5s;
    transition:1.5s;
}
.animation-40 {
    width:40% !important;
    
    -webkit-transition:1.5s;
    transition:1.5s;
}
.animation-50 {
    width:75% !important;
    
    -webkit-transition:1s;
    transition:1s;
}
.animation-100 {
    width:96% !important;
    
    -webkit-transition:3s;
    transition:3s;
}
/* when load completes, set progressbar to full width */
.pl-finish {
    width:100% !important;
    
    -webkit-transition:width .75s ease;
    transition:width .75s ease;
}


/*
* LOAD PERCENTAGE
*************************************************************/
/* load percentage display */
.pl-load-percentage {
    position:fixed;
    bottom:15px;
    left:25px;
    font-family:'Inter Tight',sans serif;
    font-weight:400;
    font-size:50px;
    color:#888;
    pointer-events:none;

    /*
    -webkit-text-stroke-width:1px;
    -webkit-text-stroke-color:#666;
    */
}
.pl-fade-out {
    opacity:0;

    -webkit-transform:scale(.9);
    transform:scale(.9);

    -webkit-transition:all .75s ease .5s;
    transition:all .75s ease .5s;
}


/*
* Z-INDEXES
*************************************************************/
.bonfire-pageloader-overlay {
    z-index:99999993;
}
.bonfire-pl-layered-bg-2 {
    z-index:99999994;
}
.bonfire-pageloader-background,
.bonfire-pl-layered-bg-1,
.bonfire-pl-split {
    z-index:99999995;
}
.bonfire-pageloader-background-image {
    z-index:99999996;
}
.pageloader-elements-wrapper {
    z-index:99999998;
}
#nprogress-wrapper,
.pageloader-icon-wrapper,
.pageloader-widgets-wrapper {
    z-index:99999998;
}
.pageloader-image-wrapper {
    z-index:99999999;
}
.pl-load-percentage,
.pageloader-sentence-wrapper {	
    z-index:999999999;
}
.pageloader-close {	
    z-index:9999999999;
}


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