html { height:100%; /*animation: bg-color 20s infinite;*/ }
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

/*
#bg-video { position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
	z-index:1;
}
#bg-video video { position: absolute; }
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
    #bg-video video {
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  @media (max-aspect-ratio: 16/9) {
    #bg-video video {
      height: 100%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  */
  
#logo-relac {
  position:fixed;
  top:0;
  bottom:0;
  z-index:9999;
  width: 100%;
  height: 100%;
  display: table;
}
#logo-relac .box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#logo-relac .box img { width: 30%; max-width: 400px; }


#logo-bg {
  position:fixed;
  top:0;
  bottom:0;
  z-index:8;
  width: 100%;
  height: 100%;
  display: table;
}
#logo-bg .box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#logo-bg .box img { width: 30%; max-width: 400px; /*animation: opacity 3s infinite alternate;*/ }
@keyframes opacity {
  0% { opacity: 1.0; }
  100% { opacity: 0.8; }
}
  
  
  #bg-css3-animation-01 {  }
  #bg-css3-animation-01 .bg {
  animation:slide 7s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #F8F9F5 50%, #dee8d9 50%);
  bottom:0;
  left:-50%;
  opacity:.2;
  position:fixed;
  right:-50%;
  top:0;
  z-index:100;
}

  #bg-css3-animation-01 .bg2 {
  animation-direction:alternate-reverse;
  animation-duration:9s;
}

  #bg-css3-animation-01 .bg3 {
  animation-duration:13s;
}

  #bg-css3-animation-02 {  }
  #bg-css3-animation-02 .bg {
  animation:bg-color 10s ease-in-out infinite alternate;
  bottom:0;
  left:-50%;
  opacity:.2;
  position:fixed;
  right:-50%;
  top:0;
  z-index:100;
}


@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}