/* Estilos CSS para el Logo_devildrey33 creado por Josep Antoni Bover Comas para codepen.io/devildrey33 */ 

/* Fuente del logo */
@import url('https://fonts.googleapis.com/css?family=Architects+Daughter|Orbitron');

#Logo_devildrey33 {
    position:fixed;
    right:10px;
    bottom:10px;
    width:40px;
    height:40px;
    border-radius:4px;
    border:2px solid #000;
    background-image:radial-gradient(rgba(35, 35, 35, 0.5), rgba(0, 0, 0, 0.95));
    cursor:pointer;
    transition:0.4s cubic-bezier(.33,.05,.69,1.59);
    overflow:hidden;
    padding:10px;
    font-family: 'Orbitron',sans-serif;
    font-size:26px;                 
    text-shadow:1px 1px 1px #000;
    z-index:1000;
}                       

#Logo_devildrey33:hover {
    width:280px;
    border:2px solid rgb(234, 80, 78);
}

#Logo_devildrey33 > img {
    position:absolute;
    right:6px;
    width:48px;
    height:48px;
    top:6px;
}

#Logo_devildrey33 > div {
    bottom:0px;
    margin-top:3px;
    transition:0.4s;
    width:4800px; /* 12 caracters * 400px */ 
}

#Logo_devildrey33:hover > div {                
    bottom:inherit;
}

#Logo_devildrey33:hover > div > span {                
    position:relative;
    opacity:1;
    left:400px;
    animation: AnimacionLogo 0.5s 1 cubic-bezier(.17,-0.42,0,1.15);
    animation-fill-mode:forwards;

}

#Logo_devildrey33 > div > span {
    transition:0.5s cubic-bezier(.17,-0.42,0,1.15);
    opacity:0;
    position: relative;
    display: inline-block;
    color:#FFF;
}            
/* Color rojo del 33 */
#Logo_devildrey33 > div > span:nth-child(11), #Logo_devildrey33 > div > span:nth-child(12) {
    color: rgb(234, 80, 78);
}


#Logo_devildrey33:hover > div > span:nth-child(1)  {    animation-delay: 0.55s;     }
#Logo_devildrey33:hover > div > span:nth-child(2)  {    animation-delay: 0.50s;     }
#Logo_devildrey33:hover > div > span:nth-child(3)  {    animation-delay: 0.45s;     }
#Logo_devildrey33:hover > div > span:nth-child(4)  {    animation-delay: 0.40s;     }
#Logo_devildrey33:hover > div > span:nth-child(5)  {    animation-delay: 0.35s;     }
#Logo_devildrey33:hover > div > span:nth-child(6)  {    animation-delay: 0.30s;     }
#Logo_devildrey33:hover > div > span:nth-child(7)  {    animation-delay: 0.25s;     }
#Logo_devildrey33:hover > div > span:nth-child(8)  {    animation-delay: 0.20s;     }
#Logo_devildrey33:hover > div > span:nth-child(9)  {    animation-delay: 0.15s;     }
#Logo_devildrey33:hover > div > span:nth-child(10) {    animation-delay: 0.10s;     }
#Logo_devildrey33:hover > div > span:nth-child(11) {    animation-delay: 0.05s;     }
#Logo_devildrey33:hover > div > span:nth-child(12) {    animation-delay: 0.0s;     }

@keyframes AnimacionLogo {
    0%   { left:500px;  }
    100% { left:5px;  }
}            

#Logo_devildrey33 > img {
    transition:0.4s;
}

#Logo_devildrey33:hover > img {
    transform: scale(1.5, 1.5);
}