css Custom CSS only loads when I am in the Custom CSS panel.

Site URL: http://www.oacp.squarespace.com

So I have a lot of custom CSS I have written for this site. but for some reason unless I am physically in the custom CSS coding page of squarespace it won't load the CSS. It isn't a lot complex CSS, just changing colors and hover states of stuff. Here is the custom code I have so far:

#header {
  background-color: hsl(217, 49%, 24%) !important;
}

#headerNav a:hover {
  opacity: .5 !important;
  color: white !important;
  transition: .2s !important;
}

.folder-toggle[ data-href="/about-us"]:hover {
  opacity: .5 !important;
  color: white !important;
  transition: .2s !important;
}
.folder-toggle[ data-href="/training-events"]:hover {
  opacity: .5 !important;
  color: white !important;
  transition: .2s !important;
}
.folder-toggle[ data-href="/resources"]:hover {
  opacity: .5 !important;
  color: white !important;
  transition: .2s !important;
}
.folder-toggle[ data-href="/corporate-partners"]:hover {
  opacity: .5 !important;
  color: white !important;
  transition: .2s !important;
}
.folder-toggle[ data-href="/directory"]:hover {
  opacity: .5 !important;
  color: white !important;
  transition: .2s !important;
}
#preFooter {
  display: none;
}
#footer a {
  color: hsl(26, 89%, 47%);
 }

#footer a:hover {
  opacity: .5;
  transition: .2s;
}
#page {
  max-width: 1200px !important;
}
#siteInfo span {
  padding: 10px;
}

The password for the website is OMAG since I haven't bought a domain yet. 

@paul2009 - if you get a chance can you help me out with this?

I figured it out. I was calling the wrong tag for the folders.