/*** NAVIGATION ***/

.bs_nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: fixed;
    right: 1.563em;
    top: 50%;
    z-index: 999;

    -webkit-transform: translate3d(0,0,0);
       -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
         -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);

    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}

.bs_nav li {
    display: block;
    height: 2.625em;
    margin: 2.5em 0 0 0;
    opacity: 0;
    position: relative;
    right: -3.5em;
    width: 2.625em;

    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
         -o-transition: all 500ms ease;
            transition: all 500ms ease;
}

.bs_nav li:before {
    content: "";
    height: 2.7em;
    left: 48%;
    margin: 0 0 0 -1.5px;
    opacity: 0;
    position: absolute;
    top: -2.5em;
    width: 3px;

    -webkit-transition: all 600ms ease;
       -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
         -o-transition: all 600ms ease;
            transition: all 600ms ease;
}

.bs_nav li:first-child {margin-top: 0;}

.bs_nav li:first-child                     { -webkit-transition-delay: 800ms; transition-delay: 800ms; }
.bs_nav li:first-child + li                { -webkit-transition-delay: 600ms; transition-delay: 600ms; }
.bs_nav li:first-child + li + li           { -webkit-transition-delay: 400ms; transition-delay: 400ms; }
.bs_nav li:first-child + li + li + li      { -webkit-transition-delay: 200ms; transition-delay: 200ms; }
.bs_nav li:first-child + li + li + li + li { -webkit-transition-delay: 000ms; transition-delay: 000ms; }
.bs_nav li:before {
    -webkit-transition-delay: 0ms;
            transition-delay: 0ms;
}

.bs_nav.visible li:first-child                     { -webkit-transition-delay: 000ms; transition-delay: 000ms; }
.bs_nav.visible li:first-child + li                { -webkit-transition-delay: 200ms; transition-delay: 200ms; }
.bs_nav.visible li:first-child + li + li           { -webkit-transition-delay: 400ms; transition-delay: 400ms; }
.bs_nav.visible li:first-child + li + li + li      { -webkit-transition-delay: 600ms; transition-delay: 600ms; }
.bs_nav.visible li:first-child + li + li + li + li { -webkit-transition-delay: 800ms; transition-delay: 800ms; }
.bs_nav.visible li:before {
    -webkit-transition-delay: 400ms;
            transition-delay: 400ms;
}

.bs_nav.visible li {opacity: 1; right: 0;}
.bs_nav.visible li:before {opacity: 1;}

.bs_nav li:first-child:before { display: none; }

.bs_nav li a {
    border: 3px solid #A6C664;
    cursor: pointer;
    display: block;
    overflow: hidden;
    position: absolute;
    height: 2.769em;
    right: 0;
    text-align: center;
    text-decoration: none;
    width: 2.769em;
    white-space: nowrap;

    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
         -o-transition: all 500ms ease;
            transition: all 500ms ease;

    -webkit-border-radius: 1.5em;
            border-radius: 1.5em;
}

.bs_nav li a span {
    display: block;
    font-family: "museo-sans",sans-serif;
    font-weight: 900;
    font-size: 0.813em;
    line-height: 2.95em;
    opacity: 0;
    text-transform: uppercase;

    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
         -o-transition: all 500ms ease;
            transition: all 500ms ease;
}

.bs_nav li a svg {
    opacity: 1;
    position: absolute;
    top: 50%; left: 50%;

    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
         -o-transition: all 500ms ease;
            transition: all 500ms ease;

    -webkit-transform: translateX(-50%) translateY(-50%);
       -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
         -o-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}

.bs_nav li.active a { background-color: #333; }
.bs_nav li.active a svg { fill: #FFF; }

.bs_nav li#step1 svg { height: 1.313em; }
.bs_nav li#step2 svg { height: 1.25em; }
.bs_nav li#step3 svg { height: 1.438em; }
.bs_nav li#step4 svg { height: 1.35em; }
.bs_nav li#step5 svg { height: 1.4em; }
.bs_nav li#step6 svg { height: 1.313em; }
.bs_nav li#step7 svg { height: 1.25em; }
.bs_nav li#step8 svg { height: 1.438em; }
.bs_nav li#step9 svg { height: 1.35em; }
.bs_nav li#step10 svg { height: 1.4em; }


.bs_nav li#step1:hover a { width: 5em }
.bs_nav li#step2:hover a { width: 1.5em }
.bs_nav li#step3:hover a { width: 12.5em }
.bs_nav li#step4:hover a { width: 10.0em }
.bs_nav li#step5:hover a { width: 11.5em }
.bs_nav li#step6:hover a { width: 5em }
.bs_nav li#step7:hover a { width: 1.5em }
.bs_nav li#step8:hover a { width: 12.5em }
.bs_nav li#step9:hover a { width: 10.0em }
.bs_nav li#step10:hover a { width: 11.5em }

.bs_nav li:hover a span {
    opacity: 1;

    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
         -o-transition: all 500ms ease;
            transition: all 500ms ease;  
}

.bs_nav li:hover a { background-color: #FFF; }

.bs_nav li:hover a svg {
    opacity: 0;

    -webkit-transition: opacity 500ms ease;
       -moz-transition: opacity 500ms ease;
        -ms-transition: opacity 500ms ease;
         -o-transition: opacity 500ms ease;
            transition: opacity 500ms ease;
}


/*=========================
== SideNav styles ==
===========================*/

.sidebar-nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: fixed;
    right: 2em;
    top: 57%;
    z-index: 1;

    -webkit-transform: translate3d(0,0,0);
       -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
         -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);

    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}

@media (max-width: 909px) {
    .hidden-xs {
        display: none!important;
    }
}

.sidebar-nav li {
    display: block;
    height: 1.725em;
    margin: 2.4em 0 0 0;
    opacity: 0;
    position: relative;
    right: -3.5em;
    width: 1.725em;

    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
         -o-transition: all 500ms ease;
            transition: all 500ms ease;
}

.sidebar-nav li:before {
    background-color: #221D5D;
    content: "";
    height: 2.2em;
    left: 44%;
    margin: 0 0 0 -1.5px;
    opacity: 0;
    position: absolute;
    top: -2.2em;
    width: 3px;

    -webkit-transition: all 600ms ease;
       -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
         -o-transition: all 600ms ease;
            transition: all 600ms ease;
}

.sidebar-nav li:first-child {margin-top: 0;}

.sidebar-nav li:first-child                     { -webkit-transition-delay: 800ms; transition-delay: 800ms; }
.sidebar-nav li:first-child + li                { -webkit-transition-delay: 600ms; transition-delay: 600ms; }
.sidebar-nav li:first-child + li + li           { -webkit-transition-delay: 400ms; transition-delay: 400ms; }
.sidebar-nav li:first-child + li + li + li      { -webkit-transition-delay: 200ms; transition-delay: 200ms; }
.sidebar-nav li:first-child + li + li + li + li { -webkit-transition-delay: 000ms; transition-delay: 000ms; }
.sidebar-nav li:before {
    -webkit-transition-delay: 0ms;
            transition-delay: 0ms;
}

.sidebar-nav.visible li:first-child                     { -webkit-transition-delay: 000ms; transition-delay: 000ms; }
.sidebar-nav.visible li:first-child + li                { -webkit-transition-delay: 200ms; transition-delay: 200ms; }
.sidebar-nav.visible li:first-child + li + li           { -webkit-transition-delay: 400ms; transition-delay: 400ms; }
.sidebar-nav.visible li:first-child + li + li + li      { -webkit-transition-delay: 600ms; transition-delay: 600ms; }
.sidebar-nav.visible li:first-child + li + li + li + li { -webkit-transition-delay: 800ms; transition-delay: 800ms; }
.sidebar-nav.visible li:before {
    -webkit-transition-delay: 400ms;
            transition-delay: 400ms;
}

.sidebar-nav.visible li {opacity: 1; right: 0;}
.sidebar-nav.visible li:before {opacity: 1;}

.sidebar-nav li:first-child:before { display: none; }

.sidebar-nav li a {
    border: 3px solid #221D5D;
    cursor: pointer;
    display: block;
    overflow: hidden;
    position: absolute;
    height: 1.969em;
    right: 0;
    text-align: center;
    text-decoration: none;
    width: 1.769em;
    white-space: nowrap;

    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
         -o-transition: all 500ms ease;
            transition: all 500ms ease;

    -webkit-border-radius: 1.5em;
            border-radius: 1.5em;
}

.sidebar-nav li a span {
    color: #221d5d;
    display: block;
    font-family: "museo-sans",sans-serif;
    font-weight: 900;
    font-size: 0.813em;
    line-height: 0.8em;
    opacity: 0;
    text-transform: uppercase;

    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
         -o-transition: all 500ms ease;
            transition: all 500ms ease;
}

.sidebar-nav li a svg {
    opacity: 1;
    position: absolute;
    top: 50%; left: 50%;

    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
         -o-transition: all 500ms ease;
            transition: all 500ms ease;

    -webkit-transform: translateX(-50%) translateY(-50%);
       -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
         -o-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}

.sidebar-nav li.active a { background-color: #807cb7; }
.sidebar-nav li.active a svg { fill: #FFF; }

.sidebar-nav li#section1 svg { height: 1.313em; }
.sidebar-nav li#section2 svg { height: 1.25em; }
.sidebar-nav li#section3 svg { height: 1.438em; }
.sidebar-nav li#section4 svg { height: 1.35em; }
.sidebar-nav li#section5 svg { height: 1.4em; }
.sidebar-nav li#section6 svg { height: 1.313em; }
.sidebar-nav li#section7 svg { height: 1.25em; }
.sidebar-nav li#section8 svg { height: 1.438em; }
.sidebar-nav li#section9 svg { height: 1.35em; }
.sidebar-nav li#section10 svg { height: 1.4em; }

.sidebar-nav li#section1:hover a { width: 11.0em }
.sidebar-nav li#section2:hover a { width: 14.5em }
.sidebar-nav li#section3:hover a { width: 21.5em }
.sidebar-nav li#section4:hover a { width: 12.0em }
.sidebar-nav li#section5:hover a { width: 19.5em }
.sidebar-nav li#section6:hover a { width: 11.0em }
.sidebar-nav li#section7:hover a { width: 9.5em }
.sidebar-nav li#section8:hover a { width: 11.5em }
.sidebar-nav li#section9:hover a { width: 9.0em }
.sidebar-nav li#section10:hover a { width: 15.5em }


.sidebar-nav li:hover a span {
    opacity: 1;

    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
         -o-transition: all 500ms ease;
            transition: all 500ms ease;  
}

.sidebar-nav li:hover a { background-color: #FFF; }

.sidebar-nav li:hover a svg {
    opacity: 0;

    -webkit-transition: opacity 500ms ease;
       -moz-transition: opacity 500ms ease;
        -ms-transition: opacity 500ms ease;
         -o-transition: opacity 500ms ease;
            transition: opacity 500ms ease;
}

/* Sidebar @ About Page */
.sidebar-nav li#sidebar-vision svg{ height: 1.85em; }
.sidebar-nav li#sidebar-about svg { height: 1.75em; }

.sidebar-nav li#sidebar-vision:hover a { width: 10.0em }
.sidebar-nav li#sidebar-about:hover a { width: 11.5em }

/* Sidebar @ Services Page*/
.sidebar-nav li#sidebar-expertise svg{ height: 1.80em; }
.sidebar-nav li#sidebar-services svg { height: 2.15em; }

.sidebar-nav li#sidebar-expertise:hover a { width: 13.0em }
.sidebar-nav li#sidebar-services:hover a { width: 10.5em }

/* Sidebar @ Team Page*/
.sidebar-nav li#sidebar-people svg{ height: 1.80em; }
.sidebar-nav li#sidebar-explore svg { height: 2.15em; }

.sidebar-nav li#sidebar-people:hover a { width: 10.0em }
.sidebar-nav li#sidebar-explore:hover a { width: 8.5em }

/* Sidebar @ Contracts Page*/
.sidebar-nav li#sidebar-contracts svg{ height: 1.80em; }
.sidebar-nav li#sidebar-codes svg { height: 2.15em; }

.sidebar-nav li#sidebar-contracts:hover a { width: 12.5em }
.sidebar-nav li#sidebar-codes:hover a { width: 8.5em }



}