@-webkit-keyframes preload {
    /* preloader icons */
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes preload {
    /* preloader icons */
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-ms-keyframes preload {
    /* preloader icons */
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@-o-keyframes preload {
    /* preloader icons */
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes preload {
    /* preloader icons */
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* when in fallback mode (for browsers that don't support transitions) hide anything outside of the Sequence container */
#sequence.sequence-fallback {
    overflow: hidden;
}

#sequence {
    position: relative;
    height: 600px;
    width: 100%; /* Preloader *//* !Preloader */
    /* Frame Animations */
    /* !Frame Animations */
}

#sequence > .sequence-canvas {
    height: 100%;
    width: 100%;
}

#sequence > .sequence-canvas > li {
    position: abslute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#sequence > .sequence-canvas li > * {
    position: absolute;
}

/* pre loader */
#sequence .sequence-preloader {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 999999;
}

#sequence .sequence-preloader img {
    background: #ff9933;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    display: inline-block;
    height: 12px;
    opacity: 0;
    position: relative;
    top: -50%;
    width: 12px;
    -webkit-animation: preload 1s infinite;
    -moz-animation: preload 1s infinite;
    -ms-animation: preload 1s infinite;
    -o-animation: preload 1s infinite;
    animation: preload 1s infinite;
}

#sequence .sequence-preloader .preloading {
    height: 12px;
    margin: 0 auto;
    top: 50%;
    position: relative;
    width: 48px;
}

#sequence .sequence-preloader img:nth-child(2) {
    -webkit-animation-delay: 0.15s;
    -moz-animation-delay: 0.15s;
    -ms-animation-delay: 0.15s;
    -o-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

#sequence .sequence-preloader img:nth-child(3) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

#sequence .sequence-preloader .preloading-complete {
    opacity: 0;
    visibility: hidden;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}

/* ********************************************** slider element */

/* logo aimation **************************** */
#sequence .site-title {
    opacity: 1;
    position: relative;
    left: 0px;
    top: -527px;
    -webkit-transform: rotate(-140deg);
    -moz-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    transform: rotate(-140deg);
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 2.5s;
}

#sequence .animate-in .site-title {
    left: 0;
    opacity: 1;
    top: -66px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 2s;
}

/* header description aimation ************** */
#sequence .header-description {
    left: -1450px;
    opacity: 1;
    position: absolute;
    top: -29px;
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
}

#sequence .animate-in .header-description {
    left: -3px;
    opacity: 1;
    top: -55px;
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
}

/* header features h3 aimation ************** */
#sequence .header-features h3 {
    position: relative;
    opacity: 0;
    left: -2px;
    top: 160px;
}

#sequence .animate-in .header-features h3 {
    opacity: 1;
    left: -2px;
    float: left;
    width: 100%;
    padding: 0;
    top: 90px;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: lightSpeedInRight;
    -moz-animation-name: lightSpeedInRight;
    -o-animation-name: lightSpeedInRight;
    animation-name: lightSpeedInRight;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -ms-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;
}

/* header features 1st paragraph aimation *** */
#sequence .header-features p.first-para {
    position: relative;
    opacity: 0;
    left: -2px;
    top: 100px;
    height: 85px;
}

#sequence .animate-in .header-features p.first-para {
    opacity: 1;
    left: -2px;
    top: 100px;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    -o-animation-delay: 3s;
    animation-delay: 3s;
}

/* header features 2nd paragraph aimation *** */
#sequence .header-features p.second-para {
    position: relative;
    opacity: 0;
    left: 0;
    top: 130px;
}

#sequence .animate-in .header-features p.second-para {
    opacity: 1;
    left: 0;
    top: 100px;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 3.5s;
    -moz-animation-delay: 3.5s;
    -ms-animation-delay: 3.5s;
    -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

/* header button aimation ******************* */
#sequence .purchase-button {
    left: 106px;
    opacity: 0;
    position: absolute;
    top: 403px;
}

#sequence .purchase-button-2 {
    left: 106px;
    opacity: 0;
    position: absolute;
    top: 403px;
}

#sequence .animate-in .purchase-button {
    left: 106px;
    opacity: 1;
    top: 200px;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 5.5s;
    -moz-animation-delay: 5.5s;
    -ms-animation-delay: 5.5s;
    -o-animation-delay: 5.5s;
    animation-delay: 5.5s;
}

#sequence .animate-in .purchase-button-2 {
    left: 310px;
    opacity: 1;
    top: 200px;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 5.5s;
    -moz-animation-delay: 5.5s;
    -ms-animation-delay: 5.5s;
    -o-animation-delay: 5.5s;
    animation-delay: 5.5s;
}

/* nexus aimation ************************** */
#sequence .nexus {
    position: fixed;
    opacity: 0;
    bottom: 0;
}

#sequence .animate-in .nexus {
    position: fixed;
    opacity: 1;
    bottom: 0;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceInUp;
    -moz-animation-name: bounceInUp;
    -o-animation-name: bounceInUp;
    animation-name: bounceInUp;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -ms-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -ms-animation-delay: 4s;
    -o-animation-delay: 4s;
    animation-delay: 4s;
}

/* responsive fix */
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    #sequence .purchase-button {
        left: 0;
        top: 300px;
    }

    #sequence .animate-in .purchase-button {
        left: 0;
        top: 300px;
    }

    #sequence .header-features h3 {
        top: 85px;
    }

    #sequence .animate-in .header-features h3 {
        top: 85px;
    }

    #sequence .header-features p.first-para {
        top: 90px;
    }

    #sequence .animate-in .header-features p.first-para {
        top: 90px;
    }

    #sequence .header-features p.second-para {
        top: 90px;
    }

    #sequence .animate-in .header-features p.second-para {
        top: 90px;
    }

    #sequence .nexus {
        left: 0;
        top: 330px;
    }

    #sequence .animate-in .nexus {
        left: 0;
        top: 330px;
    }


}

/* Animations from http://daneden.github.io/animate.css/ */
/* *************************************** keyframes */
@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
    }
    70% {
        -webkit-transform: scale(.9);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes bounceIn {
    0% {
        opacity: 0;
        -moz-transform: scale(.3);
    }
    50% {
        opacity: 1;
        -moz-transform: scale(1.05);
    }
    70% {
        -moz-transform: scale(.9);
    }
    100% {
        -moz-transform: scale(1);
    }
}

@-o-keyframes bounceIn {
    0% {
        opacity: 0;
        -o-transform: scale(.3);
    }
    50% {
        opacity: 1;
        -o-transform: scale(1.05);
    }
    70% {
        -o-transform: scale(.9);
    }
    100% {
        -o-transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(.9);
    }
    100% {
        transform: scale(1);
    }
}

/****************************/
@-webkit-keyframes lightSpeedInLeft {
    0% {
        -webkit-transform: translateX(-100%) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: translateX(20%) skewX(30deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@-moz-keyframes lightSpeedInLeft {
    0% {
        -moz-transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -moz-transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }
    80% {
        -moz-transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }
    100% {
        -moz-transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@-o-keyframes lightSpeedInLeft {
    0% {
        -o-transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -o-transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }
    80% {
        -o-transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }
    100% {
        -o-transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@keyframes lightSpeedInLeft {
    0% {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    60% {
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }
    80% {
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }
    100% {
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

/****************************/
@-webkit-keyframes lightSpeedInRight {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@-moz-keyframes lightSpeedInRight {
    0% {
        -moz-transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -moz-transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }
    80% {
        -moz-transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }
    100% {
        -moz-transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@-o-keyframes lightSpeedInRight {
    0% {
        -o-transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    60% {
        -o-transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }
    80% {
        -o-transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }
    100% {
        -o-transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

@keyframes lightSpeedInRight {
    0% {
        transform: translateX(100%) skewX(-30deg);
        opacity: 0;
    }
    60% {
        transform: translateX(-20%) skewX(30deg);
        opacity: 1;
    }
    80% {
        transform: translateX(0%) skewX(-15deg);
        opacity: 1;
    }
    100% {
        transform: translateX(0%) skewX(0deg);
        opacity: 1;
    }
}

/*************************************/
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/************************************/
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes fadeInRight {
    0% {
        opacity: 0;
        -o-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/***************************************/
@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(1000px);
    }
    60% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
    }
    80% {
        -webkit-transform: translateY(10px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes bounceInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(2000px);
    }
    60% {
        opacity: 1;
        -moz-transform: translateY(-30px);
    }
    80% {
        -moz-transform: translateY(10px);
    }
    100% {
        -moz-transform: translateY(0);
    }
}

@-o-keyframes bounceInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(2000px);
    }
    60% {
        opacity: 1;
        -o-transform: translateY(-30px);
    }
    80% {
        -o-transform: translateY(10px);
    }
    100% {
        -o-transform: translateY(0);
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }
    60% {
        opacity: 1;
        transform: translateY(-30px);
    }
    80% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}

.new-content {
    position: relative;
    opacity: 0;
}

.new-content {
    opacity: 1;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -ms-animation-delay: 5s;
    -o-animation-delay: 5s;
    animation-delay: 5s;
}