:root{
    --bgcolor:#EFE2BA;
    --color:#4056a1;
    --color1:#f13c20;
    --color2:#486be0;
    --color3:#c5cbe3;
}
body{
    margin:0;
    font: 16px/1.5em verdana;
}
#logo{
    width:50px;
}
header{
    padding:20px 0; 
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
    background-color:var(--bgcolor);
}
header p{
    box-sizing: border-box;
    margin:0 0 10px 0 ;
    padding:0 20px;
    flex:0 0 100%;
    display: flex;
    justify-content: space-between;
}
header figure{
    margin:0 20px 0 0;
}
header article{
    display: flex;
    flex-direction: column;
}
header article h1{
    margin:0;
    font:bolder 40px verdana;
    color:var(--color);
    word-spacing:  10px;
    text-transform: uppercase;
}
header article h3{
    margin: 13px 0;;
    font:bolder 20px georgia;
    color:var(--color2);
    text-transform: capitalize;
}
header>h3{
    font-family:georgia;
    letter-spacing: .1em;
    word-spacing: .4em;
    flex:0 0 100%;
    text-align: center;
    text-transform:capitalize;
    color:var(--color1);
}
/* menu */
nav{background-color: black;}
nav ul{
    list-style-type:none;
    padding:0;
}
nav>ul{
    margin:0 auto;
    display:flex;
}
nav>ul>li{flex:1;}
nav>ul>li:not(:first-of-type){border-left:2px solid grey;}
@media only screen and (max-width:1400px){
    nav ul{font-size: 16px;}
}
nav a{
    box-sizing: border-box;
    display: block;
    padding:10px;
    width:100%;
    white-space: nowrap;
    text-decoration: none;
    text-transform: capitalize;
    text-align: center;  
    color:#ccc;
    cursor: pointer;
    letter-spacing: 1px;
}
nav ul ul a{white-space: break-spaces;}
nav a:hover{color:#fff;}
nav>ul li{position: relative;}
nav>ul ul{
    /* display: none; */
    position: absolute;
    top:-1000px;
    /* transition: top .2s, opacity .2s .1s; */
    opacity: 0;
    background-color: black;
    z-index:1;
    width: 100%;    
}
.menu-show{
    animation:.2s ease-out 0s 1 normal forwards running menu-in;    
}
.menu-hide{
    animation:.2s ease-in 0s 1 normal forwards running menu-out;   
}
nav ul ul li{border-top:2px solid grey;}

nav>ul a:after{
    content: '';
    display: block;
    height:2px;
    width:0%;
    background-color:var(--color1);
    transition:width .2s;
}
nav>ul a:hover:after{
    width:100%;
}

@keyframes menu-in{
    0%{
        top:-1000px;
        opacity:0;
    }
    1%{
        top:50%;
        opacity:0;
    }
    100%{
        top:100%;
        opacity:1;
    }
}
@keyframes menu-out{
    100%{
        top:-1000px;
        opacity:0;
    }
    99%{
        top:50%;
        opacity:0;
    }
    0%{
        top:100%;
        opacity:1;
    }
}

/* footer */
footer{
    padding:20px;
    text-align: center;
    background-color:var(--bgcolor);
    background-clip: border-box;
}
@media screen and (min-width:1200px){
    body{
        font: 20px/2em verdana;
    }
    #logo{
        width:135px;
    }
}