@media only screen and (min-width:960px) and (max-width:1599px) /* for all screen larger then 1024px (devices and browsers) */{

    div#main_container{ margin-left: 0 !important;}
}
@media only screen and (min-width:960px) and (max-width:1199px) /* for all screen larger then 1024px (devices and browsers) */{
}


@media only screen and (min-width: 768px) and (max-width: 959px)/* for all device larger then 768px (devices and browsers) */ {
    #home{ left: 0;  padding-bottom: 260px;  width: 98%; background: url("/images/site/banner_mob2.png") 0 0 no-repeat; height: 640px;  background-size:contain}
    #home_content {  position: absolute;width: 75%;right: 2%;bottom: 2%;top: auto;background: url(/images/site/lower_img.jpg);  background-size: cover;padding: 20px;box-shadow: 0 0 20px #000;}
    #home_content ul {list-style: none;text-align: center;float: right;position: relative;width: 100%;}
    #home_content ul li {display: inline-block;min-width: 130px; vertical-align: top;}
    #home_content ul li p {font-size: 12px;}
    #header{background-size: 100%;}
    #header ul li#nav2{margin-right: 36%;}
    #header ul li#nav3 {margin-right: 7%;}
    #header ul {left: 3%;width: 94%;top: 20%;}
    #home_content h2{font-size: 26px;}
    #footer_location{width: 33%;  background-size: 100%;}
    #footer_menu{width: 21%;  background-size: 100%;}
    #footer_hours{width: 41%; background-size: 100%;}
    #footer_contents{height: 88px;}
    #header_logo{  width: 170px;background-size: 100%;}
    #home_content p img {position: absolute;width: 100px;left: 18%;top: -10%;margin-left: -75px;}
    #header ul li#nav1{margin-left: 20px;}

    #main_content {width: 63%; padding-left: 2%;}
    #main_secondary {width: 32%; background-size: 100%; margin-right: 2%;}
    #main_secondary_content{width: 95%;}
    .fb_iframe_widget {width: 94% !important;overflow: hidden;}
    #main_secondary:before {content: " ";display: block;background: url("/images/site/sec_nav_top.jpg") no-repeat;position: relative;width: 100%;height: 40px;background-size: 100%;}
    #main_secondary:after {content: " ";display: block; position: relative;width: 100%;height: 100px;background: url("/images/site/sec_nav_btm.jpg"); background-size: 100%;bottom: -5px;}
    #wrapper{padding-top: 40px;}
    #wrapper img{max-width: 100%;}
    div#main_container{ margin-left: 0 !important;}

    .shop_page .shop_item{  width: 26%; float: none;display: inline-block;vertical-align: top;}
    #main_secondary ul li{padding-bottom: 5px;}

    .shop_detail .shop_item{width: 33%; height: auto;}
    .shop_detail .shop_item img{margin-bottom: 25px;}
    .shop_detail .shop_text{width: 60%;}
    h1{font-size: 21px;}
}

@media screen and (max-width: 767px)/* max-width 767px, Only for mobile device */{
    #wrapper img{max-width: 100%;}
    #home{ left: 0;  padding-bottom: 260px;  width: 98%; background: url("/images/site/banner_mob2.png") 0 0 no-repeat;   background-size:contain}
    #home_content {  position: absolute;width: 75%;right: 5%;bottom: 2%;top: auto;background: url(/images/site/lower_img.jpg);padding: 20px;box-shadow: 0 0 20px #000;}
    #home_content ul {list-style: none;text-align: center;float: right;position: relative;width: 100%;}
    #home_content ul li {display: inline-block;min-width: 130px; vertical-align: top;}
    #home_content ul li p {font-size: 12px;}
    #header{background-size: 100%;}
    #home_content h2{font-size: 26px;}

    #header_logo{  width: 170px;background-size: 100%;}
    #home_content p img {position: absolute;width: 100px;left: 18%;top: -10%;margin-left: -75px;}

    div#footer_info {position: relative;display: block;width: 100%;float: none; padding: 20px; box-sizing: border-box}
    #footer{ height: auto; overflow: hidden;}
    #footer_contents{height: auto; text-align: center;}
    #footer_location {width: 50%;background-size: 100%;float: none;display: inline-block;}
    #footer_menu {width: 30%;background-size: 100%;display: inline-block;float: none;vertical-align: top;   background-position: 10px 0;}
    #footer_social {position: relative;float: none;width: 26%;z-index: 99;display: inline-block;vertical-align: top;padding-left: 5%;}
    div#footer_social ul li {display: inline-block;padding-top: 5%;padding-right: 5%;}
    #footer_hours {width: 50%;float: none;background-size: 100%;display: inline-block;}

    /* Mobile Menu */   
    #header{background: none;}
    #header ul{display: none;}
    .mobile_nav{ width:64%; float:right; padding:0; padding-top: 20px; margin:0; display:block; position:relative; right:0; top:0; height:100%; background:none; z-index:0;  -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }    
    .mobile_nav li{  margin:0; background:none; list-style:none; position: relative; padding: 12px 20px;}
    .mobile_nav li span{ font-size: 20px; padding: 25px 20px 10px 20px; display: block; color: #bb993a; text-transform: uppercase; }
    .mobile_nav li a{  font-family: "Fondamento", cursive;font-size: 16px;color: #B7FF98;padding: 20px 0;text-transform: uppercase;}
    .mobile_nav li a:hover{ color: #fff;}
    .mobile_nav li a.active{ color:#e9f07f !important; text-decoration: none;}
    .mobile_menu_icon{ display:block !important; z-index: 999;   background: url(/images/site/menu.png) no-repeat center center; }
    ul.sub_menu{ display:none; padding:10px 5px; background:#322414; max-height: 180px; overflow-y: scroll;}
    ul.sub_menu li a{ font-size:14px; padding:0 10px 0 25px; border-bottom: none; color: #fff; text-transform: none; letter-spacing: 0; line-height: 26px;}     
    ul.sub_menu li a.current{ background: #dfbb02;}
    ul.sub_menu li a:hover{  color: #fff;}
    ul.sub_menu li a span{ padding: 0 0 2px; margin: 0 0 2px; color: #726960; font-size: 16px; border-bottom: 1px solid #423930;}
    .mobile_nav li a.have_sub_menu{ /*background-image: url(/images/site/plus.png); background-position: 90% center; background-repeat: no-repeat;*/ position: relative; }
    .mobile_nav li a.have_sub_menu.active{ background: #322920; color: #a39c94;}
    .mobile_nav li em.level_1:after{ position: absolute; content: ''; width: 12px; height: 2px; left: 45%; top: 15px; background: #bb993a;}
    .mobile_nav li em.level_1:before{ position: absolute; content: ''; width: 12px; height: 2px; left: 45%; top: 15px; background: #bb993a; transform: translateY(0px) rotate(90deg); -moz-transform: translateY(0px) rotate(90deg); -webkit-transform: translateY(0px) rotate(90deg); -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
    .mobile_nav li em.level_1.active:before{ transform: translateY(0px) rotate(0deg); -moz-transform: translateY(0px) rotate(0deg); -webkit-transform: translateY(0px) rotate(0deg); opacity: 0;}
    .mobile_nav li em.level_1.active{ /*background-image: url(/images/site/minus.png);*/}
    .mobile_menu_icon{ display:none;}
    .mobile_menu_block{ display: block; padding: 5px 0 0 0; position: relative; z-index: 99;}
    .mobile_menu{ position:relative; width:100%; z-index:9;}       
    .mobile_nav li.links_top{ background: #6a5f52; padding: 10px 0;}
    .mobile_nav li.links_top a{ text-transform: uppercase; border: none; padding: 5px 20px;}    
    .mobile_menu_icon span {position: absolute; top: 50%; left: 22px; display: block; padding: 0; width: 16px; height: 2px; background-color: #F2F3F1; font-size: 0px; -webkit-touch-callout: none;
        -webkit-user-select: none; -khtml-user-select: none;  -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: background-color 0.3s; transition: background-color 0.3s;}
    .mobile_menu_icon span:after {position: absolute; left: 0px; width: 100%; height: 100%; background: #F2F3F1; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; top: 0;}
    .mobile_menu_icon span:before{position: absolute; left: 0px; width: 100%; height: 100%; background: #F2F3F1; content: ''; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; top: 0;}
    .mobile_menu_icon span:after { -webkit-transform: translateY(250%); transform: translateY(250%);}
    .mobile_menu_icon span:before {-webkit-transform: translateY(-250%); transform: translateY(-250%);}
    .mobile_menu_icon.active span{-webkit-background: none; 	-moz-background: none; 	-ms-background: none; 	-o-background: none;	background: none;}
    .mobile_menu_icon.active span:before{-webkit-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg);   background: #81BF2C;}
    .mobile_menu_icon.active span:after{-webkit-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); top: 0;   background: #81BF2C;}
    #main_container{ position: absolute; left: 0; top:0; width: 100%; -webkit-box-shadow: 0.5em 0 0.5em 0.25em rgba(0, 0, 0, 0.25); -moz-box-shadow: 0.5em 0 0.5em 0.25em rgba(0, 0, 0, 0.25); box-shadow: 0.5em 0 0.5em 0.25em rgba(0, 0, 0, 0.25); /*overflow: hidden;*/ z-index: 2;  background: url(/images/site/bkg_rptr.jpg) center top; height: auto;}

    #wrapper{padding-top: 40px;}
    #main_content {width: 80%; float: none; display: block; margin: 0 auto; padding-bottom: 50px;}
    #main_secondary {width: 80%; background-size: 100%;  float: none; display: block; margin: 0 auto;}
    #main_secondary_content{width: 95%;}
    .fb_iframe_widget {width: 250px !important;overflow: hidden; float: none; margin: 0 auto}
    #main_secondary:before {content: " ";display: block;background: url("/images/site/sec_nav_top.jpg") no-repeat;position: relative;width: 100%;height: 40px;background-size: 100%;}
    #main_secondary:after {content: " ";display: block; position: relative;width: 100%;height: 100px;background: url("/images/site/sec_nav_btm.jpg");  background-size: 100% 100%;}

    #main_content h4{margin-bottom: 10px;}
    #main_secondary ul li{padding-bottom: 5px;}
    .shop_page .shop_item{  width: 26%; float: none;display: inline-block;vertical-align: top;}
    #main_content a{font-size: 14px;}

    .shop_detail .shop_item{width: 33%; height: auto; margin-right: 7%;}
    .shop_detail .shop_item img{margin-bottom: 25px;}
    .shop_detail .shop_text{width: 60%;  color: #fff;   font-family: "franklin-gothic-urw", sans-serif;}
    h1{font-size: 21px;}
    
    /* Back to top */
    #totop {bottom: -60px; cursor: pointer; height: 50px; padding: 0; position: fixed; right: 2%; display:block; width: 50px; z-index: 2147483647;}
    #totop img{ display: block; max-width: 50px;}
    div#footer_info p a{display: inline !important; color: #fff; font-size: 13px;}
}

@media screen and (max-width: 640px){
    #home{  height: 460px;}
    #home_content{  background-size: auto 100%;}
    #home_content ul li{min-width: 140px;}
    #home_content p img {width: 100px;left: 50%;top: -30%;margin-left: -40px;}

    #footer_location {width: 74%;background-position: 20px 0px;}
    #footer_menu{margin: 0 auto; width: 40%;}
    #footer_hours{ height: 40px;}
    div#footer_info {position: relative;display: block;width: 100%;float: none;padding: 5%;box-sizing: border-box;text-align: center;}
    div#footer_info br{ display: none;}
    div#footer_info p{font-size: 13px;}
    div#footer_info p a {display: block;}
    #main_content a{font-size: 13px;}
    .shop_page .shop_item {width: 43%;float: none;display: inline-block;vertical-align: top;margin-right: 3%; margin-left: 3%;height: auto;margin-bottom: 6%;}
    #main_container.shop_page br{display: none;}
    .shop_page h1{ margin-left: 3%;}

}

@media screen and (max-width: 480px)/* max-width 480px, Only for mobile device */{

    #footer_location{width: 94%;}
    #footer_menu{width: 60%;   background-position: 21px 0;}
    #footer_hours{  width: 90%;  background-position: 12px 0px;}
    #footer_social ul li{padding-bottom: 5px;}
    #footer_social ul li a{margin-top: 0;}
    #footer_info p{float: none}
    #header_logo {width: 150px;background-size: 100%;left: 33%;}

    #main_content {width: 90%;}
    #main_secondary {width: 90%;}

    .shop_detail .shop_item {width: 63%;height: auto;margin: 0 auto;float: none;}
    .shop_detail .shop_text {width: 89%;float: none;margin: 0 auto;}
    

}