@import url(http://fonts.googleapis.com/css?family=Lato:300);
-webkit-font-smoothing: antialiased;
font-family: 'Lato', sans-serif;
transform-origin: center;
transform: scale(1.00005);
border-left: 18px solid transparent;
border-right: 18px solid transparent;
transition: width 0.3s ease-in-out, border 0.1s linear, border-radius 0.5s ease-in-out;
color: rgba(55, 55, 55, 0);
text-transform: uppercase;
transition: color, font-size 0.3s;
.polygon_top:nth-child(1),
.polygon_top:nth-child(3),
.polygon_bottom:nth-child(4),
.polygon_bottom:nth-child(6) {
.polygon_top:nth-child(1):hover > a,
.polygon_top:nth-child(3):hover > a,
.polygon_bottom:nth-child(4):hover > a,
.polygon_bottom:nth-child(6):hover > a {
.polygon_top:nth-child(1) {
border-bottom: 30px solid #9b59b6;
transform: translateX(-30px) translateY(-15px);
.polygon_top:nth-child(1):hover {
border-radius: 4px 0 0 4px;
border-left: 18px solid #9b59b6;
.polygon_top:nth-child(1) > a {
.polygon_top:nth-child(2) {
border-bottom: 30px solid #d0b2dd;
transform: translateX(12px) translateY(15px);
.polygon_top:nth-child(3) {
border-bottom: 30px solid #b07cc6;
transform: translateX(30px) translateY(-15px);
.polygon_top:nth-child(3):hover {
border-radius: 0 4px 4px 0;
border-right: 18px solid #b07cc6;
.polygon_top:nth-child(3) > a {
.polygon_bottom:nth-child(4) {
border-top: 30px solid #dbc3e5;
transform: translateX(-30px) translateY(15px);
.polygon_bottom:nth-child(4):hover {
border-radius: 4px 0 0 4px;
border-left: 18px solid #dbc3e5;
.polygon_bottom:nth-child(4) > a {
.polygon_bottom:nth-child(5) {
border-top: 30px solid #a66bbe;
transform: translateX(12px) translateY(-15px);
.polygon_bottom:nth-child(6) {
border-top: 30px solid #c6a0d5;
transform: translateX(30px) translateY(15px);
.polygon_bottom:nth-child(6):hover {
border-radius: 0 4px 4px 0;
border-right: 18px solid #c6a0d5;
.polygon_bottom:nth-child(6) > a {