body{
  background-color: #2f2f2f;
  color:white;
  animation: myswitchtodark 1s;
}

@keyframes myswitchtodark {
  from {background-color: #ffffff;}
  to {background-color: #2f2f2f;}
}


.bg-lightgrey {
 /* background-color: #2f2f2f;*/
}

#hero-4 {
 /* background-color: #2f2f2f;*/
  padding-top: 20px;
}

.sbox-1 p, .sbox-5 p, .sbox-6 p, .sbox-7 p {
  color:white;
}
.steelblue-color, .steelblue-color h2, .steelblue-color h3, .steelblue-color h4, .steelblue-color h5, .steelblue-color h6, .steelblue-color p, .steelblue-color a, .steelblue-color li, .steelblue-color i, .white-color .steelblue-color, .steelblue-color span {
  color: white;
}

.grey-color, .grey-color h2, .grey-color h3, .grey-color h4, .grey-color h5, .grey-color h6, .grey-color p, .grey-color a, .grey-color li, .grey-color i, .grey-color span {
  color: white;
}

.primary-color, .primary-color h2, .primary-color h3, .primary-color h4, .primary-color h5, .primary-color h6, .primary-color p, .primary-color a, .primary-color li, .primary-color i, .primary-color span {
  color: white;
  text-transform:none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: white;
}

a {
  color: white;
}

.foo-socials a {
  color: white;
}

.navbar.bg-tra {
  padding: 20px 0;
  background-color: white;
}

.footer-links li a:hover {
  color: white !important;
  text-decoration: underline;
}