/**
 * styles.css
 * logotype web animation
 */



/* logo */

#logo {
    position: relative;
    width: 135px;
    height: 100px;
    padding: 10px;
}
#logo .skew {
    position: absolute;
    width: 135px;
    height: 80px;
    -webkit-transform: skew(-14deg);
       -moz-transform: skew(-14deg);
        -ms-transform: skew(-14deg);
         -o-transform: skew(-14deg);
            transform: skew(-14deg);
}

/* panes */

#logo .pane {
    position: absolute;
    top: 0;
    width: 41px;
    height: 56px;
}
#logo .pane:nth-child(1) {
    left: 0;
}
#logo .pane:nth-child(2) {
    left: 47px;
    -webkit-transform: translateY(12px);
       -moz-transform: translateY(12px);
        -ms-transform: translateY(12px);
         -o-transform: translateY(12px);
            transform: translateY(12px);
}
#logo .pane:nth-child(3) {
    left: 94px;
}



/* faces */

#logo .face {
    position: absolute;
    top: 0;
    left: 0;
    width: 41px;
    height: 56px;
    text-align: center;
    outline: 1px solid transparent;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
#logo .face:nth-child(1) {
    -webkit-animation: face-1 16s linear infinite;
       -moz-animation: face-1 16s linear infinite;
            animation: face-1 16s linear infinite;
}
#logo .face:nth-child(2) {
    -webkit-animation: face-2 16s linear infinite;
       -moz-animation: face-2 16s linear infinite;
            animation: face-2 16s linear infinite;
}



/* colors */

#logo .pane:nth-child(1) .face {
    background-color: #8697AF;
    background: -webkit-linear-gradient(top, #607694, #B0BCCC);
    background:    -moz-linear-gradient(top, #607694, #B0BCCC);
    background:      -o-linear-gradient(top, #607694, #B0BCCC);
    background:         linear-gradient(to bottom, #607694, #B0BCCC);
}
#logo .pane:nth-child(2) .face {
    background-color: #8697AF;
    background: -webkit-linear-gradient(top, #8294AC, #D0D7E0);
    background:    -moz-linear-gradient(top, #8294AC, #D0D7E0);
    background:      -o-linear-gradient(top, #8294AC, #D0D7E0);
    background:         linear-gradient(to bottom, #8294AC, #D0D7E0);
}
#logo .pane:nth-child(3) .face {
    background-color: #8697AF;
    background: -webkit-linear-gradient(top, #607694, #B0BCCC);
    background:    -moz-linear-gradient(top, #607694, #B0BCCC);
    background:      -o-linear-gradient(top, #607694, #B0BCCC);
    background:         linear-gradient(to bottom, #607694, #B0BCCC);
}



/* letters */



#logo .name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 41px;
    height: 44px;
    text-align: center;
    font-weight: bold;
    line-height: 44px;
    font-size: 40px;
    color: #000;
    font-family: "Times New Roman", Times, serif;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
}
#logo .pane:nth-child(2) .name {
    transform: translateY(-12px);
}



/* lines */

#logo .line {
    position: absolute;
    height: 4px;
    background: #B1BDCD;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
#logo .line:nth-child(4) {
    top: 64px;
    left: 0;
    width: 41px;
}
#logo .line:nth-child(5) {
    top: 76px;
    left: 0;
    width: 135px;
}
#logo .line:nth-child(6) {
    top: 64px;
    left: 94px;
    width: 41px;
}



/* keyframes */

@-webkit-keyframes face-1 {
    from  {-webkit-transform: perspective(300px) rotateY(0deg);}
    12.5% {-webkit-transform: perspective(300px) rotateY(-180deg);}
    to    {-webkit-transform: perspective(300px) rotateY(-180deg);}
}
@-moz-keyframes face-1 {
    from  {-moz-transform: perspective(300px) rotateY(0deg);}
    12.5% {-moz-transform: perspective(300px) rotateY(-180deg);}
    to    {-moz-transform: perspective(300px) rotateY(-180deg);}
}
@keyframes face-1 {
    from  {transform: perspective(300px) rotateY(0deg);}
    12.5% {transform: perspective(300px) rotateY(-180deg);}
    to    {transform: perspective(300px) rotateY(-180deg);}
}

@-webkit-keyframes face-2 {
    from  {-webkit-transform: perspective(300px) rotateY(-180deg);}
    12.5% {-webkit-transform: perspective(300px) rotateY(-360deg);}
    to    {-webkit-transform: perspective(300px) rotateY(-360deg);}
}
@-moz-keyframes face-2 {
    from  {-moz-transform: perspective(300px) rotateY(-180deg);}
    12.5% {-moz-transform: perspective(300px) rotateY(-360deg);}
    to    {-moz-transform: perspective(300px) rotateY(-360deg);}
}
@keyframes face-2 {
    from  {transform: perspective(300px) rotateY(-180deg);}
    12.5% {transform: perspective(300px) rotateY(-360deg);}
    to    {transform: perspective(300px) rotateY(-360deg);}
}