/*------------------
  Top Bar Changes
------------------*/
header{ float:left; width:100%; height:100px; background:#FFF; position:relative; z-index:99; }
.top-bar{ margin:0 auto; width:100%; max-width:980px; height:90px; padding-bottom:10px; position:relative;}
.top-bar .logo { float:left; width:auto; position:relative; margin:22px 0 0 20px; }
.top-bar .logo .image-logo{ float:left; }
.top-bar .logo p { float:left; margin:48px 0 0 5px; font-size:22px; line-height:22px; color:#5D4337; font-family:milansixty;}
.top-bar .logo img { float:left; width:49px; height:auto; }
/* <nav> */
.top-bar section{ float:right; width:auto; height:auto; overflow:hidden;}
.top-bar .btn-menu{ display:none; }
.top-bar .btn-menu #expanded{ display:block;}
.top-bar .btn-menu #recoil{ display:none;}
.top-bar ul { width:auto; height:21px; position:absolute; bottom:8px; right:0;}
.top-bar ul li { float:left; padding:0 20px; }
.top-bar ul li a{ color:#beb4af; font-family:colognesixty; line-height:21px; font-size:21px; }
.top-bar ul li a:hover,.top-bar .active{ color:#5D4337; }
.top-bar .sort{ float:left; width:auto; height:auto;}

@media only screen and (max-device-width: 800px) and (orientation : landscape) {
header{ float:left; width:100%; height:80px; background:#FFF; position:relative; z-index:99; }
.top-bar{ margin:0 auto; width:100%; max-width:980px; height:74px; padding-bottom:10px; position:relative;}
.top-bar .logo { float:left; width:auto; position:relative; margin:5px 0 0 20px; }
.top-bar .logo .image-logo{ float:left; }
.top-bar .logo p { float:left; margin:48px 0 0 5px; font-size:22px; line-height:22px; color:#5D4337; font-family:milansixty;}
.top-bar .logo img { float:left; width:49px; height:auto; }
/* <nav> */
.top-bar section{ float:right; width:auto; height:auto; overflow:hidden;}
.top-bar .btn-menu{ display:none; }
.top-bar .btn-menu #expanded{ display:block;}
.top-bar .btn-menu #recoil{ display:none;}
.top-bar ul { width:auto; height:21px; position:absolute; bottom:8px; right:15px;}
.top-bar ul li { float:left; padding:0 6px; }
.top-bar ul li a{ color:#beb4af; font-family:colognesixty; line-height:21px; font-size:18px; }
.top-bar ul li a:hover,.top-bar .active{ color:#5D4337; }
.top-bar .sort{ float:left; width:auto; height:auto;}
}


@media only screen and (max-width: 960px) and (orientation : portrait) {
header{ float:left; width:100%; height:190px; background:#FFF; position:relative; z-index:99;}
.top-bar{ margin:0 auto; width:100%; height:190px; position:relative; padding:0;}
.top-bar .logo { float:left; width:100%; position:relative; margin:17px 0 0 0; }
.top-bar .logo .image-logo{ float:none; margin:0 auto; width:72px; }
.top-bar .logo p { float:left; width:100%; margin:5px 0 0 0; font-size:22px; line-height:22px; color:#5D4337; font-family:milansixty; text-align:center;}
.top-bar .logo img { margin:0 auto; width:72px; height:auto; }
/* <nav> */
.top-bar section{ float:left; width:auto; height:auto; overflow:hidden;}
.top-bar .btn-menu{ display:none; }
.top-bar .btn-menu #expanded{ display:block;}
.top-bar .btn-menu #recoil{ display:none;}
.top-bar ul { margin:0 auto; width:728px; height:22px; position:absolute; bottom:8px; left:0; float:left;}
.top-bar ul li { float:left; padding:0 26px 0 26px; }
.top-bar ul li a{ color:#beb4af; font-family:colognesixty; line-height:21px; font-size:21px; }
.top-bar ul li a:hover{ color:#5D4337; }
.top-bar .sort{ float:left; width:auto; height:auto;}
}

@media only screen and (max-width: 480px) and (orientation : portrait) {
header{ float:left; width:100%; height:auto; background:#FFF; position:relative; z-index:99;}
.top-bar {margin:0 auto; width:100%; max-width:400px; height:auto; position:relative; padding:0; }
.top-bar .logo { float:none; width:27px; position:relative; margin:0; position:absolute; top:13px; left:10px;}
.top-bar .logo .image-logo{ float:none; margin:0 auto; width:105px; }
.top-bar .logo p { float:left; width:100%; margin:5px 0 0 0; font-size:26px; line-height:26px; color:#5D4337; font-family:milansixty; text-align:center; display:none;}
.top-bar .logo img { margin:0 auto; width:27px; height:auto; }
/* <nav> */
.top-bar section{ float:left; width:100%; height:auto;}
.top-bar .btn-menu{ float:left; width:100%; height:62px; display:block; }
.top-bar .btn-menu span{ float:left; width:25px; height:20px; font-size:32px;}
.top-bar .btn-menu a{ color:#9A8377; }
.top-bar .btn-menu #expanded{ display:block; float:right; padding:14px 10px 0 0;}
.top-bar .btn-menu #recoil{ display:none; float:right; padding: 14px 10px 14px 10px;}
.top-bar section{ float:none; margin:0 auto; width:304px; height:0; overflow:hidden;}
.top-bar ul { margin:0 auto; width:304px; height:auto; position:relative; bottom:0; left:0; margin:20px 0 20px 0; padding:0;}
.top-bar ul li { float:left; width:143px; height:30px; padding:0; margin:0 4px; border-bottom:1px #B6A69D solid;}
.top-bar ul li a{ float:left; color:#beb4af; font-family:colognesixty; line-height:30px; font-size:18px; width:100%;}
.top-bar ul li a:hover{ color:#5D4337; }
.top-bar .sort{ float:left; width:151px; height:auto;}
}