/* Common */
.logo { padding: 0; margin: 0; list-style: none; width: 125px; height: 133px; position: relative; }
.logo li { padding: 0; margin: 0; font-size: 0; line-height: 0; position: absolute; background: url(/images/logo-sprite.svg) no-repeat; opacity: 1; -moz-opacity: 1; }

/* Default */
/*
.logo li.nth-1 { width: 55px; height: 48px; background-position: 0 0; left: 35px; bottom: 86px; }
.logo li.nth-2 { width: 55px; height: 48px; background-position: -55px 0; left: 0; bottom: 25px; }
.logo li.nth-3 { width: 55px; height: 48px; background-position: -110px 0; left: 35px; top: 55px; }
.logo li.nth-4 { width: 55px; height: 48px; background-position: -165px 0; right: 0; bottom: 25px; }
.logo li.nth-5 { width: 125px; height: 11px; background-position: -220px 0; left: 0; bottom: 12px; }
.logo li.nth-6 { width: 101px; height: 7px; background-position: -220px bottom; right: 12px; bottom: 0; }
*/

.logo li { opacity: 0; -moz-opacity: 0; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); -ms-transform: scale(0.2); }
.logo li.nth-1 { width: 59px; height: 52px; background-position: 0 0; left: 40px; bottom: -48px; }
.logo li.nth-2 { width: 59px; height: 52px; background-position: -59px 0; left: -55px; bottom: -48px; -webkit-transform: scale(0.2) rotate(-45deg); -moz-transform: scale(0.2) rotate(-45deg); -o-transform: scale(0.2) rotate(-45deg); -ms-transform: scale(0.2) rotate(-45deg); }
.logo li.nth-3 { width: 61px; height: 52px; background-position: -118px 0; left: 37px; top: -48px; }
.logo li.nth-4 { width: 61px; height: 52px; background-position: -179px 0; right: -55px; bottom: -48px; -webkit-transform: scale(0.2) rotate(45deg); -moz-transform: scale(0.2) rotate(45deg); -o-transform: scale(0.2) rotate(45deg); -ms-transform: scale(0.2) rotate(45deg); }
.logo li.nth-5 { width: 140px; height: 11px; background-position: -242px 0; left: -125px; bottom: 19px; }
.logo li.nth-6 { width: 111px; height: 7px; background-position: -261px bottom; right: -101px; bottom: 6px; }

/* Mouse over */
.logo.hover li.nth-1, .logo.hover li.nth-2, .logo.hover li.nth-3, .logo.hover li.nth-4 { opacity: 0 !important; -moz-opacity: 0 !important; -webkit-transform: scale(0.2) rotate(-90deg) !important; -moz-transform: scale(0.2) rotate(-90deg) !important; -o-transform: scale(0.2) rotate(-90deg) !important; -ms-transform: scale(0.2) rotate(-90deg) !important; }
.logo.hover li.nth-1 { bottom: 38px !important; }
.logo.hover li.nth-2 { left: 31px !important; bottom: 30px !important; }
.logo.hover li.nth-4 { right: 31px !important; bottom: 30px !important; }
.logo.hover li.nth-5 { bottom: 60px !important; }
.logo.hover li.nth-6 { bottom: 50px !important; }

/* Transition */
.logo li { transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -khtml-transition: all 1s ease-in-out; }