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

- BACKGROUND
- LAYERED 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
- NPROGRESS INTEGRATION
- 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;
}


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


/*
* CLOSE BUTTON
*************************************************************/
.pageloader-close {	
    position:fixed;
    top:15px;
    right:15px;
    padding:5px 15px;
    opacity:0;
    cursor:pointer;
    pointer-events:none;
    border-radius:3px;

    color:#fff;
    font-family:'Muli',arial,tahoma,verdana;
    font-weight:700;
    font-size:12px;
    text-align:right;

    /*
    -webkit-transform:translateY(-10px) scale(.8);
    transform:translateY(-10px) scale(.8);
    */

    transition:all .5s ease 0s;
    -webkit-transition:all .5s ease 0s;

    /* remove the flickering effect of a tapped link when on a touch device */
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.pageloader-close-active {
    opacity:1;
    pointer-events:auto;

    /*
    -webkit-transform:translateY(0) scale(1);
    transform:translateY(0) scale(1);
    */

    transition:all .5s ease;
    -webkit-transition:all .5s 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:'Muli',arial,tahoma,verdana;
	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;
    display:none;
}


/*
* 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);
        }
}


/*
* NPROGRESS INTEGRATION
*************************************************************/
#nprogress-wrapper {
    position:fixed;
    display:table;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
#nprogress-inner {
    display:table-cell;
}
#nprogress {
    position:relative;
    display:inline-block;
    width:100%;
    overflow:hidden;
}
#nprogress .bar {
    width:100%;
    height:100%;
}


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


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

/*
* LOTTIE ANIMATION
*************************************************************/
.lottie-loader {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

/*
* REDESIGNED CLOSE FUNCTION
*************************************************************/
.pageloader-close-modern {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pageloader-close-modern:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-2px);
}

.pageloader-close-icon {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

.pageloader-close-icon-only {
    padding: 10px 15px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pageloader-close-icon-only .pageloader-close-icon {
    margin: 0;
}

/*
* PROGRESS BAR CENTER AND RTL
*************************************************************/
#nprogress-wrapper.nprogress-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

#nprogress-wrapper[dir="rtl"] #nprogress-inner {
    direction: rtl;
}

#nprogress-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
    color: #333;
    z-index: 10001;
}

/*
* SPLIT LOADER
*************************************************************/
.split-loader {
    position:relative;
    width:60px;
    height:60px;
    margin:0 auto;
}

.split-loader-left,
.split-loader-right {
    position:absolute;
    width:50%;
    height:100%;
    background-color:#9AA366;
    animation:split-loader 1.5s infinite ease-in-out;
}

.split-loader-left {
    left:0;
    border-radius:60px 0 0 60px;
    transform-origin:right center;
}

.split-loader-right {
    right:0;
    border-radius:0 60px 60px 0;
    transform-origin:left center;
    animation-delay:0.75s;
}

@keyframes split-loader {
    0%, 100% {
        transform:scaleX(0);
        opacity:0.5;
    }
    50% {
        transform:scaleX(1);
        opacity:1;
    }
}