I Am the Alpha

[nospaces][googlefont="Roboto"]
[newclass=".gnhan, .gnval"]margin-left: -57px; width: 200px; height: 1px; background-color: #b66a56; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);[/newclass]
[newclass=".gnmac"]margin-left: -15px; width: 120px; padding: 10px 15px; font-family: roboto; font-size: 12px; font-weight: bold; letter-spacing: 0; color: #fff; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; opacity: 1;[/newclass]
[newclass=".gncods"]position: relative; left: -120px; width: 100px; padding: 5px 10px; background-color: #b66a56; border-bottom: double 3px #101010; opacity: 0; margin-top: 15px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; -webkit-transition-delay: 0.2s; transition-delay: 0.2s;[/newclass]
[newclass=".gncuri"]position: relative; left: -120px; width: 100px; padding: 5px 10px; background-color: #b66a56; border-bottom: double 3px #101010; opacity: 0; margin-top: 15px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; -webkit-transition-delay: 0.4s; transition-delay: 0.4s;[/newclass]
[newclass=".gndog"]position: relative; left: -120px; width: 100px; padding: 5px 10px; background-color: #b66a56; border-bottom: double 3px #101010; opacity: 0; margin-top: 15px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; -webkit-transition-delay: 0.6s; transition-delay: 0.6s;[/newclass]
[newclass=".gndeac"]margin: 70px auto 0; height: 14px; width: 10px; border-radius: 14px; border-top: 5px solid #b66a56; border-right: 5px solid #b66a56; border-left: 5px solid #b66a56; -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; transition: all 1s ease-in-out; -webkit-transition-delay: 1s; transition-delay: 1s; opacity: 0;[/newclass]
[newclass=".gnsole"]margin-right: -320px; width: 270px; height: 350px; border: 25px solid #fefefe; background-color: #fefefe; color: #101010; font-family: helvetica, sans serif; font-size: 10px; line-height: 120%; text-align: justify; overflow: auto; -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; transition: all 1s ease-in-out; -webkit-transition-delay: .4s; transition-delay: .4s; opacity: 0;[/newclass]
[newclass=".gnsole b"]font-family: roboto; text-transform: uppercase; font-weight: bold; font-size: 8px; letter-spacing: .5px; color: #010101;[/newclass]
[newclass=".gnpip:hover .gnhan"]-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);[/newclass]
[newclass=".gnpip:hover .gnval"]-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);[/newclass]
[newclass=".gnpip:hover .gnmac"]color: #fff; opacity: .3;[/newclass]
[newclass=".gnpip:hover .gncods, .gnpip:hover .gncuri, .gnpip:hover .gndog"]left: 0; opacity: 1;[/newclass]
[newclass=".gnpip:hover .gndeac"]opacity: .8;[/newclass]
[newclass=".gnpip:hover .gnsole"]margin-right: 0; opacity: .9;[/newclass]