Navigation transition, overriding negations

Question

I am trying to apply an ease in ease out (with a fade) in the navigation as it scrolls between each section of my one page scrolling site. It is currently working on the transition from the first section (welcome) to the second section (mission).

I am using squarespace and am doing custom CSS overrides to the elements I want to change. I can see that there are some negations in squarespace's CSS for the transitions, is there a way for me to override this?

Demo Site

The code is as follows:

body:not(.always-use-overlay-nav) .nav-wrapper nav>div a, 
body:not(.always-use-overlay-nav) .nav-wrapper nav span>div a,
body:not(.always-use-overlay-nav) .nav-wrapper nav>div label,
body:not(.always-use-overlay-nav) .nav-wrapper nav span>div label {
  -webkit-transition: color .1s 0s ease-in-out;
  -moz-transition: color .1s 0s ease-in-out;
  -ms-transition: color .1s 0s ease-in-out;
  -o-transition: color .1s 0s ease-in-out;
  transition: color .1s 0s ease-in-out;}

For some reason all of the transitions are being "crossed-out" when I inspect the element on my site.