html {
        height: 100%;
        margin: 0;
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body {
        margin: 0;
        height: 100%;
        background-image: url("../images/bucegi.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
}

header {
        width: 100%;
        height: 10%;
        position: fixed;
        top: 0;
        left: 0;
        animation-name: intro;
        animation-duration: 1100ms;
        padding: 0;
        background: #7f9cad;
}

nav {
        height: 100%;
}

ul.menu, ul.sub-menu {
        margin: 0;
        padding: 0;
}

ul.menu {
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
        font-size: 100%;
        left: 51.5%
}

ul.menu>li {
        animation-name: release;
        animation-duration: 500ms;
        height: 100%;
        padding: 0px;
        width: 12%;
        margin: 0;
        float: left;
        text-align: center;
        vertical-align: 50%;
        background:#7f9cad;
}

ul.menu>li>ul.sub-menu{
        position: relative;
        display: none;
}

ul.menu>li>a {
        display:block;
        position: relative;
        bottom: 0;
}

ul.menu>li>a, ul.sub-menu>li>a {
        text-decoration: wavy;
        color:#dbdbdb;
        font-weight: 900;
}



ul.menu>li, ul.menu>li>ul.sub-menu>li {
        position: relative;
        font-weight: lighter;
        list-style-type: none;
}

ul.menu>li:hover ul.sub-menu>li {
        background-color:#2a3342;
        vertical-align: center;
        animation-name: release3;
        animation-duration: 100ms;
}

ul.menu>li:hover ul.sub-menu>li:hover {
        background-color: #3e8e41;
        animation-name: hover2;
        animation-duration: 500ms;
}
ul.menu>li:hover ul.sub-menu {
        animation-name: release2;
        animation-duration: 500ms;
        display: block;
}

ul.menu>li:hover {
        background-color: #223327;
        animation-name: hover;
        animation-duration: 500ms;
}

@keyframes hover {
        0% {background:#7f9cad;}
        100%{background-color: #223327;}
}

@keyframes hover2 {
        0% {background-color:#2a3342;}
        100%{background-color: #3e8e41;}
}

@media only screen and (max-width: 768px) {
        ul.menu {
                float: none;
                position: relative;
                top: 0px;
                left: 0px;
                width: 100%;


        }
        ul.menu>li {
                float: none;
                width: 100%;
                display: block;
        }

        header {
                animation-name: intro-responsive;
                animation-duration: 1500ms;
        }
        ul.menu>li:active ul.menu>li:sub-menu {
                display: block;
        }
        ul.menu>li:hover ul.menu>li:sub-menu:hover {
                display: block;
        }
}

@keyframes intro {
        0% {top:-10%;}
        100%{top:0;}
}
@keyframes intro-responsive {
        0% {top: -150%;}
        100% {top: 0;}
}
@keyframes release {
        0%{background-color: #223327;}
        100% {background:#7f9cad;}
}


@keyframes release2 {
        0%{display: none;}
        100% {display: block;}
}

@keyframes release3 {
        0%{background-color:#2a3342;}
        100% {background-color: #3e8e41;}
}