/**

#greenroad-1
length: 143.4 pt

#greenroad-2
length: 225.8 pt

#greenroad-3
length: 219.9 pt

#greenroad-4
length: 484.6 pt


*/
#greenroad-0,
#greenroad-1,
#greenroad-2,
#greenroad-3,
#greenroad-4 {
    transition: opacity .25s ease-in-out;
    opacity: 0;
}

/*
#greenroad-0.show,
#greenroad-1.show,
#greenroad-2.show,
#greenroad-3.show,
#greenroad-4.show {
    animation: dash 1.5s linear forwards;
}
*/

/* ----------------------------------------- */
/* ----------------------------------------- */
.office-map-wrap.show-0 #greenroad-0 {
    animation: dash 1.5s linear forwards;
}

/* ----------------------------------------- */
.office-map-wrap.active-0.show-1 #greenroad-1,
.office-map-wrap.active-1.show-1 #greenroad-1 {
    animation: dash 1.5s linear forwards;
}

/* ----------------------------------------- */

.office-map-wrap.active-0.show-2 #greenroad-1 {
    animation: dash 1.5s linear forwards;
}

.office-map-wrap.active-0.show-2 #greenroad-2 {
    animation: dash 1.5s linear forwards;
    animation-delay: 1.5s
}

/* ----------------------------------------- */

.office-map-wrap.active-0.show-3 #greenroad-1 {
    animation: dash 1.5s linear forwards;

}

.office-map-wrap.active-0.show-3 #greenroad-2 {
    animation: dash 1.5s linear forwards;
    animation-delay: 1.5s
}

.office-map-wrap.active-0.show-3 #greenroad-3 {
    animation: dash 1.5s linear forwards;
    animation-delay: 3s
}

/* ----------------------------------------- */

.office-map-wrap.active-0.show-4 #greenroad-1 {
    animation: dash 1.5s linear forwards;
}

.office-map-wrap.active-0.show-4 #greenroad-2 {
    animation: dash 1.5s linear forwards;
    animation-delay: 1.5s
}

.office-map-wrap.active-0.show-4 #greenroad-3 {
    animation: dash 1.5s linear forwards;
    animation-delay: 3s
}

.office-map-wrap.active-0.show-4 #greenroad-4 {
    animation: dash 2.3s linear forwards;
    animation-delay: 4.5s
}

/* ----------------------------------------- */



.office-map-wrap.active-0.show-2 #greenroad-1 {
    animation: dash 1.5s linear forwards;
}

.office-map-wrap.active-0.show-2 #greenroad-2 {
    animation: dash 1.5s linear forwards;
    animation-delay: 1.5s
}

/* ----------------------------------------- */

.office-map-wrap.active-0.show-3 #greenroad-1 {
    animation: dash 1.5s linear forwards;

}

.office-map-wrap.active-0.show-3 #greenroad-2 {
    animation: dash 1.5s linear forwards;
    animation-delay: 1.5s
}

.office-map-wrap.active-0.show-3 #greenroad-3 {
    animation: dash 1.5s linear forwards;
    animation-delay: 3s
}


/* ----------------------------------------- */

.office-map-wrap.active-0.show-4 #greenroad-1 {
    animation: dash 1.5s linear forwards;
}

.office-map-wrap.active-0.show-4 #greenroad-2 {
    animation: dash 1.5s linear forwards;
    animation-delay: 1.5s
}

.office-map-wrap.active-0.show-4 #greenroad-3 {
    animation: dash 1.5s linear forwards;
    animation-delay: 3s
}

.office-map-wrap.active-0.show-4 #greenroad-4 {
    animation: dash 2.3s linear forwards;
    animation-delay: 4.5s
}

/* ----------------------------------------- */




































/* ----------------------------------------- */

.office-map-wrap.active-1.show-2 #greenroad-1 {
    animation: dash 1.5s linear forwards;
}

.office-map-wrap.active-1.show-2 #greenroad-2 {
    animation: dash 1.5s linear forwards;
}

/* ----------------------------------------- */

.office-map-wrap.active-1.show-3 #greenroad-1 {
    animation: dash 1.5s linear forwards;

}

.office-map-wrap.active-1.show-3 #greenroad-2 {
    animation: dash 1.5s linear forwards;
}

.office-map-wrap.active-1.show-3 #greenroad-3 {
    animation: dash 1.5s linear forwards;
    animation-delay: 1.5s
}

/* ----------------------------------------- */

.office-map-wrap.active-1.show-4 #greenroad-1 {
    animation: dash 1.5s linear forwards;

}

.office-map-wrap.active-1.show-4 #greenroad-2 {
    animation: dash 1.5s linear forwards;
}

.office-map-wrap.active-1.show-4 #greenroad-3 {
    animation: dash 1.5s linear forwards;
    animation-delay: 1.5s
}

.office-map-wrap.active-1.show-4 #greenroad-4 {
    animation: dash 2.3s linear forwards;
    animation-delay: 3s
}


































/* ----------------------------------------- */

.office-map-wrap.active-2.show-3 #greenroad-3 {
    animation: dash 1.5s linear forwards;
}

/* ----------------------------------------- */

.office-map-wrap.active-2.show-4 #greenroad-3 {
    animation: dash 1.5s linear forwards;
}

.office-map-wrap.active-2.show-4 #greenroad-4 {
    animation: dash 2.3s linear forwards;
    animation-delay: 1.5s
}














/* ----------------------------------------- */

.office-map-wrap.active-3.show-4 #greenroad-4 {
    animation: dash 2.3s linear forwards;
}




/* ----------------------------------------- */

















/*this prevents us from drawing on load ? */
.office-map-wrap.active-0 #greenroad-0 {
    stroke-dashoffset: 0;
    opacity: 1;
}


.office-map-wrap.active-1 #greenroad-0,
.office-map-wrap.active-1 #greenroad-1 {
    stroke-dashoffset: 0;
    opacity: 1;
}

.office-map-wrap.active-2 #greenroad-0,
.office-map-wrap.active-2 #greenroad-1,
.office-map-wrap.active-2 #greenroad-2 {
    stroke-dashoffset: 0;
    opacity: 1;
}

.office-map-wrap.active-3 #greenroad-0,
.office-map-wrap.active-3 #greenroad-1,
.office-map-wrap.active-3 #greenroad-2,
.office-map-wrap.active-3 #greenroad-3 {
    stroke-dashoffset: 0;
    opacity: 1;
}

.office-map-wrap.active-4 #greenroad-0,
.office-map-wrap.active-4 #greenroad-1,
.office-map-wrap.active-4 #greenroad-2,
.office-map-wrap.active-4 #greenroad-3,
.office-map-wrap.active-4 #greenroad-4 {
    stroke-dashoffset: 0;
    opacity: 1;
}


/*
now special cases for IE
*/
.ie .office-map-wrap.show-0 #greenroad-0,
.ie .office-map-wrap.show-1 #greenroad-0,
.ie .office-map-wrap.show-1 #greenroad-1,
.ie .office-map-wrap.show-2 #greenroad-0,
.ie .office-map-wrap.show-2 #greenroad-1,
.ie .office-map-wrap.show-2 #greenroad-2,
.ie .office-map-wrap.show-3 #greenroad-0,
.ie .office-map-wrap.show-3 #greenroad-1,
.ie .office-map-wrap.show-3 #greenroad-2,
.ie .office-map-wrap.show-3 #greenroad-3,
.ie .office-map-wrap.show-4 #greenroad-0,
.ie .office-map-wrap.show-4 #greenroad-1,
.ie .office-map-wrap.show-4 #greenroad-2,
.ie .office-map-wrap.show-4 #greenroad-3,
.ie .office-map-wrap.show-4 #greenroad-4 {
    opacity: 1;
    stroke-dashoffset: 0;
}




#greenroad-0 {
    stroke-dasharray: 269;
    stroke-dashoffset: 269;
}



#greenroad-1 {
    stroke-dasharray: 144;
    stroke-dashoffset: 144;
}

#greenroad-1.on {
    stroke-dashoffset: 0;
}

#greenroad-2 {
    stroke-dasharray: 226;
    stroke-dashoffset: 226;

}

#greenroad-3 {
    stroke-dasharray: 221;
    stroke-dashoffset: 221;

}

#greenroad-4 {
    stroke-dasharray: 485;
    stroke-dashoffset: 485;

}



@keyframes dash {
    0% {
        opacity: 1;
    }
  100% {
      opacity: 1;
      stroke-dashoffset: 0;
  }

}
@-ms-keyframes dash {
    0% {
        opacity: 1;
    }
  100% {
      opacity: 1;
      stroke-dashoffset: 0;
  }

}