nav {
    width: 100%;
    background: rgba(186,186,186, 0.8);
    height: 70px;
    position: static;
    z-index: 1;
}

    nav #brand img {
        float: left;
        display: block;
        margin-top: 15px;
        margin-left: 20px;
        width: 220px;
        line-height: 70px;
        font-weight: bold;
    }

    nav #brand img {
        color: #fff;        
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        cursor: pointer;
    }

        nav #brand img:hover {
            color: #777777;
        }

#toggle {
    position: absolute;
    right: 20px;
    top: 14px;
    z-index: 999;
    width: 40px;
    height: 40px;
    cursor: pointer;
    float: right;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    visibility: hidden;
    opacity: 0;
}

    #toggle .span {
        height: 7px;
        background: #a8005b;
        border-radius: 2px;
        margin: 5px auto;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        backface-visibility: hidden;
    }

    #toggle.on #one {
        -moz-transform: rotate(45deg) translateX(6px) translateY(6px);
        -webkit-transform: rotate(45deg) translateX(6px) translateY(6px);
        -o-transform: rotate(45deg) translateX(6px) translateY(6px);
        -ms-transform: rotate(45deg) translateX(6px) translateY(6px);
        transform: rotate(45deg) translateX(6px) translateY(6px);
    }

    #toggle.on #two {
        opacity: 0;
    }

    #toggle.on #three {
        -moz-transform: rotate(-45deg) translateX(10px) translateY(-12px);
        -webkit-transform: rotate(-45deg) translateX(10px) translateY(-12px);
        -o-transform: rotate(-45deg) translateX(10px) translateY(-12px);
        -ms-transform: rotate(-45deg) translateX(10px) translateY(-12px);
        transform: rotate(-45deg) translateX(10px) translateY(-12px);
    }

#resize {
    z-index: 1;
    position: absolute;
    top: 0px;
    background: #ddd;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    display: table;
}

    #resize #menu {
        height: 50px;
        display: table-cell;
        vertical-align: middle;
    }

        #resize #menu li {
            display: block;
            text-align: center;
            padding: 20px 0;
            text-align: center;
            font-size: 50px;
            min-height: 50px;
            font-weight: bold;
            cursor: pointer;
            -webkit-transition: all 0.3s ease-out;
            -moz-transition: all 0.3s ease-out;
            -ms-transition: all 0.3s ease-out;
            -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
        }

            /*#resize #menu li a {
                color: #a8005b;
            }*/

            #resize #menu li:hover {
                /*background: #a8005b;*/
                background: #f1f1f1;
            }

                #resize #menu li:hover a {
                    /*color: #fff;*/
                    -webkit-transition: all 0.3s ease-out;
                    -moz-transition: all 0.3s ease-out;
                    -ms-transition: all 0.3s ease-out;
                    -o-transition: all 0.3s ease-out;
                    transition: all 0.3s ease-out;
                }

    #resize.active {
        visibility: visible;
        opacity: 0.99;
    }

@media (max-width:300px) {
    nav #brand img {
        width: 60vw;
    }
}

@media (max-width:800px) {
    #toggle {
        visibility: visible;
        opacity: 1;
    }

    nav #menu {
        display: none;
    }
}

@media (min-width:800px) {
    #resize {
        visibility: hidden !important;
    }
}