body{
  background-color: #3399ff;
}

.slogan{
  color: #FFF;
  font-size: 1.0rem;
}

.footer-bottom:before{
  background-color: #ffd700;
  position:absolute;
  top:-50px;
  left:0px;
  content:"";
  width:100%;
  min-height: 200px;
  z-index: -1;
  -ms-transform: skew(0deg,3deg); /* IE 9 */
  -webkit-transform: skew(0deg,3deg); /* Safari */
  transform: skew(0deg,3deg); /* Standard syntax */
}

.footer-bottom {
  position: absolute;
  bottom: 0;
  top: 300px;
  width: 100%;

  transition: top 1.5s ease 0s;
  top: 100vh;

  background-color: #ffd700;
}

.footer-bottom p,
.footer-bottom a{
  color: #FFF;
  font-size: 1.2rem;
}

.footer-bottom a{
  text-decoration: underline;
}

.rotate {
  transform: rotate(-180deg);
  /*transform: rotate(180deg);*/
  transition: .3s;
}
.rotate-reset {
  transform: rotate(0deg);
  transition: .3s;
}