﻿#navbar {
    -skrollr-animation-name: navbar-animation;
}

@-skrollr-keyframes navbar-animation {

    50 {
        transform: translate3d(0, 0px, 0);
    }

    150 {
        transform: translate3d(0, -40px, 0);
    }
}

#navbar-logo {
    -skrollr-animation-name: navbar-logo-animation;
}


@-skrollr-keyframes navbar-logo-animation {

    50 {
        transform: translate3d(0px, 0px, 0) scale3d(1,1,1);
    }

    150 {
        transform: translate3d(-30px, 20px, 0px) scale3d(0.64, 0.64, 1);
    }
}

#navbar-primary {
    -skrollr-animation-name: navbar-primary-animation;
    -skrollr-animation-name: navbar-primary-animation-shadow;
}

@-skrollr-keyframes navbar-primary-animation {

    50 {
        transform:translate3d(0, 0px, 0); 
        max-height: 100%;
    }

    150 {
        transform:translate3d(0px, -10px, 0px); 
        max-height: 80px;
    }

}

@-skrollr-keyframes navbar-primary-animation-shadow {

    150 {
        box-shadow: 0 0px 0px 0px rgba(0,0,0,.2);
    }
    
    160 {
        box-shadow: 0 1px 4px 1px rgba(0,0,0,.2);
    }
}

#navbar-primary-links {
    -skrollr-animation-name: navbar-primary-links-animation;
}

@-skrollr-keyframes navbar-primary-links-animation {

    50 {
        max-height: 100%;
    }

    150 {
        max-height: 80px;
    }
}

#navbar-primary-links a.selected,
#navbar-primary-links a:hover {
    -skrollr-animation-name: navbar-primary-links-selected-animation;
}

@-skrollr-keyframes navbar-primary-links-selected-animation {

    50 {
        border-width: 8px;
    }

    150 {
        border-width: 6px;
    }
}

#navbar-connect{
    -skrollr-animation-name: navbar-connect-animation;
}
    
@-skrollr-keyframes navbar-connect-animation {

    50 {
        transform: translate3d(0, 0px, 0);
    }

    150 {
        transform: translate3d(0, -60px, 0);
    }
}

#navbar-connect-menu{
    -skrollr-animation-name: navbar-connect-menu-animation;
}
    
@-skrollr-keyframes navbar-connect-menu-animation {

    50 {
        margin-top:20px;
        transform: scale3d(1,1,1);
    }

    150 {
        margin-top:60px;
        transform: scale3d(1.2, 1.2, 1.2);
    }
}

#presentation-parallax{
    -skrollr-animation-name: presentation-parallax-animation;
}

@-skrollr-keyframes presentation-parallax-animation{
    
    0 {
        min-height:650px;
    }
    
    650 {
        height:0px;
        min-height:0px;
    }
}