body, ul {
    margin: 0;
    padding: 0;
}

/* Decor */
body {
    background: #45163E;
}

.drawer {
    position: absolute;
    z-index: 10;
    top: 15px;
    left: -75px;
    padding: .1em 0;
    background: #f7f7f7;
    color: white;
    text-align: center;
    /* Remove 4px gap between <li> */
    font-size: 0;
    height: 615px;
    border:1px solid#ccc;
}

    .drawer li {
        pointer-events: none;
        position: relative;
        display: inline-block;
        vertical-align: middle;
        list-style: none;
        line-height: 73px;
        transform: translateZ(0);
    }

    .drawer a {
        pointer-events: auto;
        position: relative;
        display: block;
        min-width: 5em;
        /*margin-bottom: .4em;*/
        padding: .4em;
        line-height: 60px;
        /* Reset font-size */
        font-size: 24px;
        text-decoration: none;
        color: grey;
        transition: background 0.3s;
    }

        .drawer a:active, .drawer a:focus {
            background: white;
        }

    .drawer i {
        display: block;
        /*margin-bottom: .2em;*/
        font-size: 2em;
    }

    .drawer span {
        font-size: .625em;
        font-family: Raleway;
        font-weight: bold;
        text-transform: uppercase;
    }

    .drawer li:hover ul {
        /* Open the fly-out menu */
        transform: translateX(0);
        background: white;
        color: red;
        /* Enable this if you wish to replicate hoverIntent */
    }

    .drawer > li {
        display: block;
        /* Add a shadow to the top-level link */
        /* Show the shadow when the link is hovered over */
        /* Fly out menus */
    }

        .drawer > li > a {
            background: #f7f7f7;
        }

        .drawer > li:hover {
            z-index: 100;
        }

            /*.drawer > li:hover a {
                background: white;
            }*/
        .drawer > li:nth-child(1n):hover a {
            background: #04b4ed;
            color: white;
            border-bottom: 1px solid#ccc;
        }
        .drawer > li:nth-child(2n):hover a {
            background: #04b4ed;
            color: white;
            border-top: 1px solid#ccc;
            border-bottom: 1px solid#ccc;
        }
        .drawer > li:nth-child(3n):hover a {
            background: #04b4ed;
            color: white;
            border-top: 1px solid#ccc;
            border-bottom: 1px solid#ccc;
        }
        .drawer > li:nth-child(1n):hover ul li a {
            background: #f7f7f7;

        }

        .drawer > li a:hover {
            background: #04b4ed;

        }

            .drawer > li a:hover span {
                color: white;
            }

        .drawer > li > a:after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 100%;
            width: 4px;
            opacity: 0;
            background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
            background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, transparent));
            background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
            background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
            background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
            background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
            transition: opacity 0.01s;
        }

        .drawer > li:hover a:after {
            opacity: 1;
        }

        .drawer > li ul {
            position: absolute;
            /* Stack below the top level */
            /*z-index: -1;*/
            top: -1px;
            left: 100%;
            height: 100%;
            width: auto;
            /*white-space: nowrap;*/
            /* Close the menus */
            transform: translateX(-900%);
            /*background: white;*/
            transition: 0.01s transform;
        }

            .drawer > li ul li {
                height: 73px;
                /*border-top: 1px solid#ccc;
                border-right: 1px solid#ccc;
                border-bottom: 1px solid#ccc;*/
                border:1px solid#ccc;
            }

                .drawer > li ul li img {
                    width: 100%;
                }
