/* Preloader Transition. 
   Empresas Grupo-O2 - B2B Group 
   ===================================================================================== */

/* PAGE LOADED */
.page-loaded .preloader {
  height: 0;
  visibility: hidden;
}
.page-loaded .preloader span {
  width: 0;
}
.page-loaded .preloader .inner {
  visibility: hidden;
}
.page-loaded .preloader canvas {
  opacity: 0;
  animation: none;
  -webkit-animation: none;
  -moz-animation: none;
}
.page-loaded .preloader img {
  opacity: 0;
}
.page-loaded .navbar,
.page-loaded .bottom-bar,
.page-loaded .left-side,
.page-loaded .right-side {
  opacity: 1;
}
.page-loaded .slide-content .link-holder,
.page-loaded .page-header .container p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.5s;
}
.page-loaded .slide-content h1, .page-loaded .slide-content .h1,
.page-loaded .page-header .container h1,
.page-loaded .page-header .container .h1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.5s;
}
.page-loaded .slider {
  transform: scale(1);
}

/* PRELOADER */
.preloader {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1071;
  transition-delay: 2s;
  overflow: hidden;
}
.preloader span {
  width: 25%;
  height: 100%;
  position: absolute;
  right: 0%;
  top: 0;
  background: #fff;
  transition: all ease 0.7s;
  transition-delay: 0.7s;
}
.preloader span:nth-child(2) {
  right: 25%;
}
.preloader span:nth-child(3) {
  right: 50%;
}
.preloader span:nth-child(4) {
  right: 75%;
}
.preloader .inner {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.preloader .inner canvas {
  display: inline-block;
  background: none;
  border-radius: 50%;
  -webkit-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;
  position: relative;
  z-index: 1;
  transition: all ease 0.5s;
}
.preloader .inner img {
  height: 15px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: all ease 0.5s;
  transition-delay: 0.2s;
}

@-webkit-keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
/* PAGE TRANSITION */
.page-transition {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1071;
  visibility: hidden;
}
.page-transition span {
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #212832;
  transition: all ease 0.5s;
}
.page-transition span:nth-child(2) {
  left: 25%;
}
.page-transition span:nth-child(3) {
  left: 50%;
}
.page-transition span:nth-child(4) {
  left: 75%;
}
.page-transition.active {
  visibility: visible;
}
.page-transition.active span {
  width: 25%;
}