#navBar {
  background-color: transparent !important;
}
#navBar .navbar-brand img {
  height: 40px;
}
#navBar .navbar-collapse {
  flex-grow: 0;
}
#navBar .navbar-collapse .WhiteLink {
  color: white;
}
.project {
  margin-top: 60px;
  text-align: center;
}
.project .row div.ProjectItemDiv {
  height: 200px;
  margin-bottom: 10px;
  perspective: 1000px;
}
.project .row div.ProjectItemDiv div.ProjectItemContentDiv {
  display: flex;
  flex-direction: column;
  height: 200px;
  margin-bottom: 10px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.5s;
  overflow: hidden;
}
.project .row div.ProjectItemDiv div.ProjectItemContentDiv img {
  height: 80px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.project .row div.ProjectItemDiv div.ProjectItemContentDiv .Light {
  visibility: hidden;
  position: absolute;
  left: -130%;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(0deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5), hsla(0, 0%, 100%, 0));
  transform: skewX(-25deg);
}
.project .row div.ProjectItemDiv div.ProjectItemContentDiv:hover {
  transform: translateZ(80px);
}
.project .row div.ProjectItemDiv div.ProjectItemContentDiv:hover .Light {
  visibility: visible;
  transition: all 0.5s;
  transform: translateX(230%);
}
.project .row div.ProjectItemDiv:nth-child(1) div.ProjectItemContentDiv {
  background-color: #70c3ff;
}
.project .row div.ProjectItemDiv:nth-child(2) div.ProjectItemContentDiv {
  background-color: #fd6a7f;
}
.project .row div.ProjectItemDiv:nth-child(3) div.ProjectItemContentDiv {
  background-color: #7f8ea0;
}
.project .row .ProjectItemDiv:nth-child(4) div.ProjectItemContentDiv {
  background-color: #89d04f;
}
.project button.More {
  background-color: #cccccccc;
  color: #666666;
}
.project button.More:hover {
  background-color: grey;
  color: white;
}
.Cube {
  margin-top: 100px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}
.Cube .Content {
  position: relative;
  width: 200px;
  height: 200px;
  rotate: 20deg -20deg 0;
  transform-style: preserve-3d;
  transform-origin: center center;
  transform: rotateX(-10deg) rotateY(45deg);
}
.Cube .Content div {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
}
.Cube .Content div.Front {
  background-color: orange;
  transform: translateZ(100px);
}
.Cube .Content div.Back {
  background-color: green;
  transform: translateZ(-100px);
}
.Cube .Content div.Up {
  background-color: darkmagenta;
  transform: rotateX(90deg) translateZ(100px);
}
.Cube .Content div.Down {
  background-color: crimson;
  transform: rotateX(90deg) translateZ(-100px);
}
.Cube .Content div.Left {
  background-color: pink;
  transform: rotateY(90deg) translateZ(-100px);
}
.Cube .Content div.Right {
  background-color: blue;
  transform: rotateY(90deg) translateZ(100px);
}
.Cube .Content:hover {
  transition: all 10s;
  transform: rotateX(-10deg) rotateY(890deg);
  transform: rotateX(890deg) rotateY(450deg);
}