body {
   font-family: 'Raleway', sans-serif;

   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('imagenes/Big-data.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   height: 100vh;
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;

   font-weight: 300;
}
 .all {
   display: flex;
   perspective: 10px;
   transform: perspective(300px) rotateX(20deg);
   will-change: perspective;
   perspective-origin: center center;
   transition: all 1.3s ease-out;
   justify-content: center;
   transform-style: preserve-3d;
}
 .all:hover {
   perspective: 1000px;
   transition: all 1.3s ease-in;
   transform: perspective(10000px) rotateX(0deg);
}
 .all:hover .text {
   opacity: 1;
}
 .all:hover > div {
   opacity: 1;
   transition-delay: 0s;
}

 .all:hover > .escondido {
   opacity: 0;
   transition-delay: 0s;
}


 .all:hover .explainer {
   opacity: 0;
}
 .left, .center, .right, .lefter, .righter,.lefterlefter, .lefterlefterlefter, .righterrighter, .righterrighterrighter{

 /*Tamano del  menu */

   width: 150px;
   height: 100px;
   transform-style: preserve-3d;
   border-radius: 10px;
   border: 1px solid #fff;
   box-shadow: 0 0 20px 5px rgba(206, 206, 217, .4);
   opacity: 0;
   transition: all 0.3s ease;
   transition-delay: 1s;
   position: relative;
   background-position: center center;
   background-size: contain;
   background-repeat: no-repeat;
   background-color:#718b9f;
   cursor: pointer;
   background-blend-mode: color-burn;
}
 .left:hover, .center:hover, .right:hover, .lefter:hover, .righter:hover, .lefterlefter:hover, .lefterlefterlefter:hover, .righterrighter:hover, .righterrighterrighter:hover{
   box-shadow: 0 0 30px 10px rgba(206, 206, 217, .6);
   background-color: #ccf;
}
 .text {
   transform: translateY(30px);
   opacity: 0;
   transition: all 0.3s ease;
   bottom: 0;
   left: 5px;
   position: absolute;
   will-change: transform;
   color: #fff;
   text-shadow: 0 0 5px rgba(100, 100, 255, .6);
}


 /*logos de las paginas agregadas  */
.lefterlefterlefter{
   transform: translateX(-60px) translateZ(-50px) rotateY(-10deg);
   background-image: url('imagenes/avanzaLoop.png');
}

 .lefterlefter {
   transform: translateX(-60px) translateZ(-50px) rotateY(-10deg);
    background-image: url('imagenes/aduanet-logo.png');
}
 .lefter {
   transform: translateX(-60px) translateZ(-50px) rotateY(-10deg);
  background-image: url('imagenes/logo_globalpcnet.png');

}
 .left {
   transform: translateX(-30px) translateZ(-25px) rotateY(-5deg);
   background-image: url('imagenes/webex.png');
}
 .center {
   opacity: 1;
background-image: url('imagenes/avanzaLoop.png');
}
 .right {
   transform: translateX(30px) translateZ(-25px) rotateY(5deg);
   background-image: url('imagenes/correo.png');

}
 .righter {
   transform: translateX(60px) translateZ(-50px) rotateY(10deg);
background-image: url('imagenes/econtaLogo.png');
}
 .righterrighter {
   transform: translateX(60px) translateZ(-50px) rotateY(10deg);

background-image: url('imagenes/aconta.jpg');
}

.righterrighterrighter {
   transform: translateX(60px) translateZ(-50px) rotateY(10deg);
   background-image: url('imagenes/eGlobal.png');
}

 .explainer {
   font-weight: 300;
   font-size: 2rem;
   color: #fff;
   transition: all 0.6s ease;
   width: 100%;
   height: 100%;
   background-color: #718b9f;
   background-image: radial-gradient(circle at center top, #cce, #718b9f);
   border-radius: 10px;
   text-shadow: 0 0 10px rgba(206, 206, 217,.8);
   display: flex;
   justify-content: center;
   align-items: center;
}
 .ref {
   background-color: #000;
   background-image: linear-gradient(to bottom, #d80, #c00);
   border-radius: 3px;
   padding: 7px 10px;
   position: absolute;
   font-size: 16px;
   bottom: 10px;
   right: 10px;
   color: #fff;
   text-decoration: none;
   text-shadow: 0 0 3px rgba(0, 0, 0, .4);
}
 .ref::first-letter {
   font-size: 12px;
}
 

 p {
  text-transform: uppercase;
  letter-spacing: 0.5em;
  display: inline-block;


  padding: 0em 0em;
  position: absolute;
  top: 6%;
  left: 50%;
  width: 40em;
  margin: 0 0 0 -18em;
}
p span {
  font: 900 3em/0 "Oswald", sans-serif;  letter-spacing: 1;
  padding: 0.15em 0 0.225em;

  text-shadow: 0 0 80px rgba(255, 255, 255, 0.2);
  /* Clip Background Image */
  background: url('imagenes/rayas.jpg') repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  /* Animate Background Image */
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 60s linear infinite;
  /* Activate hardware acceleration for smoother animations */
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}
/* Animate Background Image */
@-webkit-keyframes aitf {
  0% {
    background-position: 0% 52%;
  }
  100% {
    background-position: 100% 60%;
  }
}