*{margin: 0px;padding: 0px;}

body{background: grey;}
#header{width: 100%;height: 80px;background: #FFFFFF;box-shadow:
0px 2px 4px gray;}
#logo{width:200px;height: 80px;float: left;padding-left:40px;}
#navbar{width:1000px;height: 80px;margin: 0px auto;float: right;}
#navbar>li{float: left;list-style: none;width: 190px;height:
80px;border-right:1px solid #534444;border-left: 1px solid #534444;}
li>a{text-decoration: none;color: black;font-family:
cursive;font-size: 20px;line-height: 80px;display: block;text-align: center;}
li>a:hover,
li>a:focus{background: red;color: #333;}
#res_btn{width: 50px;height: 50px;float: right;display: none;}
@media screen and (max-width:1260px){
#logo>img{width:150px;height: 60px;float: left;padding-
left:20px;padding-top: 10px;}
#navbar{width:800px;height: 80px;margin: 0px auto;float:
right;}
#navbar>li{float: left;list-style: none;width:
150px;height: 80px;border-right:1px solid #534444;border-left: 1px solid #534444;}
li>a{text-decoration: none;color: white;font-family:
cursive;font-size: 20px;line-height: 80px;display: block;text-align: center;}
}
@media screen and (max-width:1060px){
#header{width: 100%;height: 80px;background: #333;box-
shadow: 0px 2px 4px gray;position:relative;top:80px;}
#logo{width:100%;height: 90px;float: left;padding-
left:20px;padding-top: 10px;position: absolute;top:-90px;background: white;}
#navbar{width:100%;height: 60px;margin: 0px auto;}
#navbar>li{width: 18%;}
li>a{font-size: 16px;}
}
@media screen and (max-width:768px){
#header{height: 50px;}
#navbar{width:100%;height: 50px;margin: 0px auto;}
#navbar>li{width: 19%;height: 50px;}
li>a{font-size: 16px;line-height: 50px;}
}
@media screen and (max-width: 480px){
#header{height: 0px;}
#navbar{width:100%;height: 50px;margin: 0px auto;margin-
top:-40px;
display: none;}
#navbar>li{float: none;list-style: none;width: 100%;height:
50px;background: #333;border-bottom: 1px solid skyblue;}
li>a{font-size: 16px;line-height: 50px;}
#res_btn{display: block;position: relative;top:-
80px;cursor: pointer;}
}