/* Animations */
.animation-start {
    visibility: hidden;
}


.spinner {
    width: 40px;
    height: 40px;
    background-color: #f66e00;
    margin: 25px auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
    0% {
        -webkit-transform: perspective(120px);
    }

    50% {
        -webkit-transform: perspective(120px) rotateY(180deg);
    }

    100% {
        -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
    }
}

@keyframes sk-rotateplane {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }

    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

#mainNav .container .navbar-menu.expanded {
    animation-name: menu-expansion-out;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;  
    /* Other browsers */
    -webkit-animation-name: menu-expansion-out;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-out;  
}

@keyframes menu-expansion-out {
    from {
            visibility:hidden;
            max-height: 0;
    }
    to {
            visibility:visible;
            max-height:900px;
    }
}
/* Other browsers */
@-webkit-keyframes menu-expansion-out {
    from {
            visibility:hidden;
            max-height: 0;
    }
    to {
            visibility:visible;
            max-height:900px;
    }
}

.delay-text {
    visibility: hidden;
    animation-name: delay-menu-text;
    animation-duration: 0.1s;
    animation-delay: 0.2s;
    animation-timing-function: ease-out; 
    animation-fill-mode: forwards; 
    /* Other browsers */
    -webkit-animation-name: delay-menu-text;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-delay: 0.2s;
    -webkit-animation-timing-function: ease-out;  
    -webkit-animation-fill-mode: forwards;
}

@keyframes delay-menu-text {
    from {
            visibility:hidden;
            opacity:0;
    }
    to {
            visibility:visible;
            opacity:1;
    }
}
/* Other browsers */
@-webkit-keyframes delay-menu-text {
    from {
            visibility:hidden;
            opacity:0;
    }
    to {
            visibility:visible;
            opacity:1;
    }
}

.scroll-dots {
    animation-name: scroll-dots-animation;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;  
    /* Other browsers */
    -webkit-animation-name: scroll-dots-animation;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-out;  
}
@keyframes scroll-dots-animation {
    from {transform: translateX(250%);
          opacity: 0;
    }
    to {transform: translateX(0%);
        opacity: 100;
    }
}
/* Other browsers */
@-webkit-keyframes scroll-dots-animation {
    from {transform: translateX(250%);
          opacity: 0;
    }
    to {transform: translateX(0%);
        opacity: 100;
    }
}

.intro-text-animate {
    position: relative;
    opacity: 0;
    animation-name: intro-text-animation;
    animation-duration: 1s;
    animation-delay: 0.25s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    /* Other browsers */
    -webkit-animation-name: intro-text-animation;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.25s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;  
}

@keyframes intro-text-animation {
    from {transform: translateY(40%);
          opacity: 0;
    }

    to {transform: translateY(0%);
        opacity: 1;
    }
} 
/* Other browsers */
@-webkit-keyframes intro-text-animation {
    from {top: 280px;
          opacity: 0;
    }

    to {top: 0px;
        opacity: 1;
    }
} 

.clients-animate {
    visibility: hidden;
    transform: scale(0.5);
    animation-name: clients-animation;
    animation-duration: 0.75s;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
    /* Other browsers */
    -webkit-animation-name: clients-animation;
    -webkit-animation-duration: 0.75s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode:forwards;
}


@keyframes clients-animation {
    from {
          opacity: 0;
    }

    to {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
} 

/* Other browsers */
@-webkit-keyframes clients-animation {
    from {
          opacity: 0;
    }

    to {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
} 
.account {
	animation-name: account-animation;
	animation-duration: .75s;
    animation-fill-mode:forwards;
    /* Other browsers */
    -webkit-animation-name: account-animation;
	-webkit-animation-duration: .75s;
    -webkit-animation-fill-mode:forwards;
}

@keyframes account-animation {
	0% {
        visibility: hidden;
        opacity: 0;
		transform: translateY(-40%);
		animation-timing-function: ease-in;
	}
	33% {
        visibility: visible;
        opacity: 1;
		transform: translateY(-5%);
		animation-timing-function: ease-in;
	}
	
    100% {
        visibility: visible;
        opacity: 1;
		transform: translateY(0%);
		animation-timing-function: ease-in;
	}

 
}
/* Other browsers */

@-webkit-keyframes account-animation {
	0% {
        visibility: hidden;
        opacity: 0;
		transform: translateY(-40%);
		animation-timing-function: ease-in;
	}
	33% {
        visibility: visible;
        opacity: 1;
		transform: translateY(-5%);
		animation-timing-function: ease-in;
	}
    100% {
        visibility: visible;
        opacity: 1;
		transform: translateY(0%);
		animation-timing-function: ease-in;
	}
}

.account-text {
    visibility: hidden;
    animation-name: account-text-animation;
    animation-duration: 0.75s;
    
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
    /* Other browsers */
    -webkit-animation-name: account-text-animation;
    -webkit-animation-duration: 0.75s;
    
    -webkit-animation-fill-mode:forwards;
	-webkit-animation-timing-function: ease-out;
}

@keyframes account-text-animation {
    from {
        transform: translateX(-40%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

/* Other browsers */
@-webkit-keyframes account-text-animation {
    from {
        transform: translateX(-40%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

.events {
    visibility: hidden;
	animation-name: events-animation;
    animation-duration: 0.75s;
	animation-delay: 0.4s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
    /* Other browsers */
    -webkit-animation-name: events-animation;
    -webkit-animation-duration: 0.75s;
	-webkit-animation-delay: 0.4s;
    -webkit-animation-fill-mode:forwards;
	-webkit-animation-timing-function: ease-out;
}


@keyframes events-animation {
    from {
        transform: translateY(-120%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

/* Other browsers */
@-webkit-keyframes events-animation {
    from {
        transform: translateY(-120%);
        opacity: 0;
    }
    to {
        visibility: visible;
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

.events-text {
    visibility: hidden;
    animation-name: events-text-animation;
    animation-duration: 0.75s;
    animation-delay: 0.4s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
    /* Other browsers */
    -webkit-animation-name: events-text-animation;
    -webkit-animation-duration: 0.75s;
    -webkit-animation-delay: 0.4s;
    -webkit-animation-fill-mode:forwards;
	-webkit-animation-timing-function: ease-out;
}

@keyframes events-text-animation {
    from {
        transform: translateX(40%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

/* Other browsers */
@-webkit-keyframes events-text-animation {
    from {
        transform: translateX(40%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}


.promote {
    visibility: hidden;
	animation-name: promote-animation;
	animation-duration: 0.75s;
	animation-delay: 1.15s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
    /* Other browsers */
    -webkit-animation-name: promote-animation;
	-webkit-animation-duration: 0.75s;
	-webkit-animation-delay: 1.15s;
    -webkit-animation-fill-mode:forwards;
	-webkit-animation-timing-function: ease-out;
}


@keyframes promote-animation {
    from {
        transform: translateY(-120%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

/* Other browsers */
@-webkit-keyframes promote-animation {
    from {
        transform: translateY(-120%);
        opacity: 0;
    }
    to {
        visibility: visible;
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

.promote-text {
    visibility: hidden;
    animation-name: promote-text-animation;
    animation-duration: 0.75s;
    animation-delay: 1.15s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
    /* Other browsers */
    -webkit-animation-name: promote-text-animation;
    -webkit-animation-duration: 0.75s;
    -webkit-animation-delay: 1.15s;
    -webkit-animation-fill-mode:forwards;
	-webkit-animation-timing-function: ease-out;
}

@keyframes promote-text-animation {
    from {
        transform: translateX(-40%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

/* Other browsers */
@-webkit-keyframes promote-text-animation {
    from {
        transform: translateX(-40%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

.monitor {
    visibility: hidden;
	animation-name: monitor-animation;
	animation-duration: 0.75s;
	animation-delay: 1.9s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
    /* Other browsers */
    -webkit-animation-name: monitor-animation;
	-webkit-animation-duration: 0.75s;
	-webkit-animation-delay: 1.9s;
    -webkit-animation-fill-mode:forwards;
	-webkit-animation-timing-function: ease-out;
}


@keyframes monitor-animation {
    from {
        transform: translateY(-120%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

/* Other browsers */
@-webkit-keyframes monitor-animation {
    from {
        transform: translateY(-120%);
        opacity: 0;
    }
    to {
        visibility: visible;
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

.monitor-text {
    visibility: hidden;
    animation-name: monitor-text-animation;
    animation-duration: 0.75s;
    animation-delay: 1.9s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
    /* Other browsers */
    -webkit-animation-name: monitor-text-animation;
    -webkit-animation-duration: 0.75s;
    -webkit-animation-delay: 1.9s;
    -webkit-animation-fill-mode:forwards;
	-webkit-animation-timing-function: ease-out;
}

@keyframes monitor-text-animation {
    from {
        transform: translateX(40%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

/* Other browsers */
@-webkit-keyframes monitor-text-animation {
    from {
        transform: translateX(40%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

.marketing {
    visibility: hidden;
	animation-name: marketing-animation;
	animation-duration: 0.75s;
	animation-delay: 2.65s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
    /* Other browsers */
    -webkit-animation-name: marketing-animation;
	-webkit-animation-duration: 0.75s;
	-webkit-animation-delay: 2.65s;
    -webkit-animation-fill-mode:forwards;
	-webkit-animation-timing-function: ease-out;
}


@keyframes marketing-animation {
    from {
        transform: translateY(-120%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

/* Other browsers */
@-webkit-keyframes marketing-animation {
    from {
        transform: translateY(-120%);
        opacity: 0;
    }
    to {
        visibility: visible;
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}


.marketing-text {
    visibility: hidden;
    animation-name: marketing-text-animation;
    animation-duration: 0.75s;
    animation-delay: 2.65s;
    animation-fill-mode:forwards;
	animation-timing-function: ease-out;
    /* Other browsers */
    -webkit-animation-name: marketing-text-animation;
    -webkit-animation-duration: 0.75s;
    -webkit-animation-delay: 2.65s;
    -webkit-animation-fill-mode:forwards;
	-webkit-animation-timing-function: ease-out;
}

@keyframes marketing-text-animation {
    from {
        transform: translateX(-40%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}

/* Other browsers */
@-webkit-keyframes marketing-text-animation {
    from {
        transform: translateX(-40%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }
}



.timeline-animate {
    height: 0%;
    visibility: visible;
    animation-name: timeline-animation;
    animation-duration: 3.4s;
    animation-fill-mode:forwards;
    /* Other browsers */
    -webkit-animation-name: timeline-animation;
    -webkit-animation-duration: 3.4s;
    -webkit-animation-fill-mode:forwards;
}

@keyframes timeline-animation {
    0% {
        height: 0%;
        animation-timing-function: ease-out;
    }
    25% {
        height: 25%;
        animation-timing-function: ease-out;
    }
    50% {
        height: 50%;
        animation-timing-function: ease-out;
    }
    75% {
        height: 75%;
        animation-timing-function: ease-out;
    }
    100% {
        height: 100%;
        animation-timing-function: ease-out;
    }
}

@-webkit-keyframes timeline-animation {
    0% {
        height: 0%;
        animation-timing-function: ease-out;
    }
    25% {
        height: 25%;
        animation-timing-function: ease-out;
    }
    50% {
        height: 50%;
        animation-timing-function: ease-out;
    }
    75% {
        height: 75%;
        animation-timing-function: ease-out;
    }
    100% {
        height: 100%;
        animation-timing-function: ease-out;
    }
}

.feature-1 {
    visibility: hidden;
    animation-name: feature-1-animation;
    animation-duration: .75s;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
    /* Other browsers */
    -webkit-animation-name: feature-1-animation;
    -webkit-animation-duration: .75s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode:forwards;
}

@keyframes feature-1-animation {
    from {
        opacity: 0;
        transform: translateX(-30%);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateX(0%);
    }
}
/* Other browsers */
@-webkit-keyframes feature-1-animation {
    from {
        opacity: 0;
        transform: translateX(-30%);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateX(0%);
    }
}

.feature-2 {
    visibility: hidden;
    animation-name: feature-2-animation;
    animation-duration: .75s;
    animation-delay: 0.75s;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
    /* Other browsers */
    -webkit-animation-name: feature-2-animation;
    -webkit-animation-duration: .75s;
    -webkit-animation-delay: 0.75s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode:forwards;
}

@keyframes feature-2-animation {
    from {
        opacity: 0;
        transform: translateX(30%);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateX(0%);
    }
}
/* Other browsers */
@-webkit-keyframes feature-2-animation {
    from {
        opacity: 0;
        transform: translateX(30%);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateX(0%);
    }
}

.feature-3 {
    visibility: hidden;
    animation-name: feature-3-animation;
    animation-duration: .75s;
    animation-delay: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode:forwards;
    /* Other browsers */
    -webkit-animation-name: feature-3-animation;
    -webkit-animation-duration: .75s;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode:forwards;
}

@keyframes feature-3-animation {
    from {
        opacity: 0;
        transform: translateX(-30%);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateX(0%);
    }
}
/* Other browsers */
@-webkit-keyframes feature-3-animation {
    from {
        opacity: 0;
        transform: translateX(-30%);
    }
    to {
        opacity: 1;
        visibility: visible;
        transform: translateX(0%);
    }
}


.repeating-progress-animation {
    animation-name: progress-bar-animation;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode:both;
    /* Other browsers */
    -webkit-animation-name: progress-bar-animation;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-fill-mode:both; /* Safari 4.0 - 8.0 */
    
}

.progress-animation {
    animation-name: progress-bar-animation;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    /* Other browsers */
    -webkit-animation-name: progress-bar-animation;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */

}

@keyframes progress-bar-animation {
    0% {
        width: 0%;
        left:0;
        right:auto;
    }

    50% {
        width: 100%;
    }
     100% {
        width: 0%;
        left:auto;
        right:0;
    }
} 
/* Other browsers */
@-webkit-keyframes progress-bar-animation {
    0% {
        width: 0%;
    }

    50% {
        width: 100%;
    }
     100% {
        width: 0%;
        left:auto;
        right:0;
    }
} 

 
 .dashboard-nav.collapsed-add{
     transition: width 0.25s linear;
     width: 200px;
 }
 
.dashboard-nav.collapsed-add-active{
     width: 48px;
     overflow: hidden;
 }
 
.dashboard-nav.collapsed-remove{
     transition: width 0.15s linear;
     width: 48px;
     overflow: hidden;
 }
 
.dashboard-nav.collapsed-remove-active{
     width: 200px;
 }