/** All baseline division is 16px
    Exp: width 1024px: 1024/16 = 64em
         font-size: 24px/16 = 1.5em
**/
/*overall CSS / 1024px = 64em -----------*/
@media screen 
and (min-width: 64em) {
    #header .top_search {
        display: none;
    }
    #header .quickcart_login {
        display: none;
    }
    .navigation > .widget > .nav-wrap-c > ul {
        display: block !important;
    }    
}
@media screen
and (max-width: 64em) {
    .global_wrap {
        width: 95%;
    }
    .content-container {
        width: 100%;
    }
    #header .top_search {
        display: none;
    }
    #header .quickcart_login {
        display: none;
    }
    #header2 {
        height: 80px;
    }
    #logo{
        margin-left: 0;
    }
    .top_highlighter .top_search {
        width: 240px;
    }
    .header2 .top_search {
        float: left;
    }
    .navigation .nav-wrap-c > ul a {
        font-size: 100%;
    }
    .navigation2 {
        width: 77%;
    }
    .navigation2 > .widget > .nav-wrap-c > ul a {
        padding: 10px 25px 25px;
    }
    .header2 .quickcart_login {
        width: 70%;
    }
    .footer-item {
        width: 18%;
    }
    .footer-item2 {
        width: 21%;
    }
}
/* Smaller than 1016px = 63.5em -----------*/
@media screen 
and (max-width: 63.5em) {
    .mbpgallery-category-box-file {
        margin: 5px 5% !important;
    }
}
/* Smaller than 928px = 58em -----------*/
@media screen 
and (max-width: 58em) {    
    .nav-wrap-c > ul a {
        font-size: 100%;
        padding: 15px 20px;
    }
}
/* Smaller than 848px = 53em -----------*/
@media screen 
and (max-width: 53em) {
    .navigation2 > .widget > .nav-wrap-c > ul a {
        padding: 10px 20px 25px;
    }
    #left {
        width: 12%;
        float: left;
        padding: 10% 4% 5% 5%;
        display: block;
        color: #3a3a3a;
        font-size: 85%;
    }
    #component {
        width: 68%;
        float: left;
        padding: 5% 4% 5%;
        display: block;
        color: #3a3a3a;
        border-left: 1px solid #e3e3e3;
    }    
}

/* Smaller than 768px ~ 896 -----------*/
@media screen
and (min-width: 48em)
and (max-width: 56em) {    
    .quickcart_login {
        width: 65%;
    }    
}

/* Smaller than 784px = 49em -----------*/
@media screen   /*quick info + search*/
and (max-width: 49em) {
    #top_highlighter {
        padding: 0;
        height: 10px;
    }
    #top_highlighter .quickcart_login,
    #top_highlighter .top_search,
    #header .item_in_cart,
    #header .total_in_cart,
    #header .cart_total_item,
    #header .button_register,
    #header .login_reset,    
    #header2 .item_in_cart,
    #header2 .total_in_cart,
    #header2 .cart_total_item,
    #header2 .button_register,
    #header2 .login_reset{
        display: none;
    }
    #header2 {
        height: 50px;
    }
    #header #logo, #header .top_search,
    #header .quickcart_login {
        height: 56px;
        overflow: hidden;
        float: left;
    }
    #header .quickcart div, .login_container div {
        border-right: 1px solid #CCCCCC;
        margin: auto;
        float: none;
    }
    #header #logo {
        width: 24%;     
    }
    #header .quickcart_login {
        display: inline;
        width: 50%;
        padding: 5px 0 0 0;
    }
    #header .quickcart .cart_button a,
    #header .login_container .button_login a,
    .navigation .nav-wrap-c .menu-icon,
    .navigation2 > .widget > .nav-wrap-c > .menu-icon{
        width: 100%;   
        display: block;
    }
    #header .quickcart .cart_button a,
    #header .login_container .button_login a,
    .navigation .nav-wrap-c .menu-icon{
        height: 56px;
    }
    #header .quickcart .cart_button a {
        background: url("images/icons/basket.jpg") no-repeat scroll center top transparent;
    }
    #header .quickcart .cart_button a:hover{
        background: url("images/icons/basket_hover.jpg") no-repeat scroll center top transparent;
    }
    #header .login_container .button_login a{
        background: url("images/icons/user.jpg") no-repeat scroll center top transparent;
    }
    #header .login_container .button_login a:hover{
        background: url("images/icons/user_hover.jpg") no-repeat scroll center top transparent;
        background-color: transparent;
    }
    #header .button_setting, .button_logout {
        font-size: 80%;
    }
    .navigation .nav-wrap-c .menu-icon{
        background: url("images/icons/menu.jpg") no-repeat scroll center 3px transparent;
        padding: 0;
        margin: 0;
        border: none;
    }
     .navigation .nav-wrap-c .menu-icon:hover{
        background: url("images/icons/menu_hover.jpg") no-repeat scroll center 3px transparent;
        background-color: transparent;
    }
    
    /**/
    .navigation{
        margin: 0;
        width: 18%;
    }
    #header2 .top_search {
        display: none;
    }    
    #header2 .logo_white,
    #header2 .navigation2,    
    #header2 .quickcart_login{
        padding: 0 2.5%;
    }    
    #header2 .logo_white {
        width: 20%;
    }
    #header2 .navigation2{
        width: 15%;
    }
    #header2 .quickcart_login {
        float: left;
        width: 51%;
    }
    #header2 .login_container,
    #header2 .quickcart {
        width: 47%;
    }
    #header2 .login_container{
        padding-right: 2.5%; 
    }
    #header2 .quickcart {
        padding-left: 2.5%; 
    }
    #header2 .login_container,
    #header2 .quickcart,
    .navigation2 {
        float: right;
    }
    #header2 .cart_button {
        margin: 0 45%;
    }
    #header2 .quickcart div, #header2 .login_container div {
        border-right: none;
        float: none;
        margin: auto;
    }
    #header2 .quickcart .cart_button a,
    #header2 .login_container .button_login a,
    .navigation2 > .widget > .nav-wrap-c > .menu-icon {
        height: 40px;
        display: block;
    }
    #header2 .quickcart .cart_button a,
    #header2 .login_container .button_login a {
        color: transparent;
        font-size: 0;
        width: 100%;
    }
    .header2 .quickcart_login .cart_button a {
        background: url("images/icons/basket_white30.png") no-repeat scroll center top transparent;        
    }
    .header2 .quickcart_login .cart_button a:hover{
        background: url("images/icons/basket_teal30.png") no-repeat scroll center top transparent;
    }
    .header2 .login_container .button_login a{
        background: url("images/icons/user_white30.png") no-repeat scroll center top transparent;
    }
    .header2 .login_container .button_login a:hover{
        background: url("images/icons/user_teal30.png") no-repeat scroll center top transparent;
        background-color: transparent;
    }
    .navigation2 .nav-wrap-c .menu-icon{
        background: url("images/icons/menu_white30.png") no-repeat scroll center top transparent;
        padding: 0;
        margin: 0;
        border: none;
    }
     .navigation2 .nav-wrap-c .menu-icon:hover{
        background: url("images/icons/menu_teal30.png") no-repeat scroll center top transparent;
        background-color: transparent;
    }
    /**/
    
    #header .quickcart .cart_button a:active,
    #header .login_container .button_login a:active,
    #header .navigation > .widget > .nav-wrap-c > .menu-icon.active,
    .header2 .navigation2 > .widget > .nav-wrap-c > .menu-icon.active{
        position: relative;
        top: 1px;
        background-color: transparent;
    }    
    #header .quickcart .cart_button span,
    #header .quickcart .cart_button span:hover,
    #header .login_container .button_login a,
    #header .login_container .button_login a:hover,
    #header .navigation .nav-wrap-c .menu-icon,
    #header .navigation .nav-wrap-c .menu-icon:hover,
    .header2 .navigation2 .nav-wrap-c .menu-icon,
    .header2 .navigation2 .nav-wrap-c .menu-icon:hover{
        color: transparent !important;
        font-size: 0;
    }
    #header .top_search {
        display: none;
    }
    #header .login_container {
        width: 50%;
        display: block;
        float: right;
    }
    #header .quickcart {
        width: 50%;
        display: block;
        float: right;
    }
    .navigation {
        width: 24%;
    }
    /* HOME Main Menu Mobile Navigation -----------*/
	/* nav-wrap */
	.navigation .nav-wrap-c {
            position: relative;
	}

	/* main nav */
	.navigation > .widget > .nav-wrap-c > ul {
            clear: both;
            background: #fff;
            padding: 0;
            position: absolute;
            top: 80px;
            right: 0;
            width: auto;
            z-index: 10000;		
            display: none; /* visibility will be toggled with jquery */
	}
	.navigation > .widget > .nav-wrap-c > ul li {
            clear: both;
            float: none;
            text-align: right;
            margin-right: 0;                           
	}
        .navigation > .widget > .nav-wrap-c > ul li a {
            border-top: 1px #ececec solid;
            padding: 6px 20px 12px;
            font-size: 115%; /* 16px-14/14*100= 14.285714 + 100%   */
            font-weight: 300;
            text-transform: uppercase;
            text-decoration: none;
            color: #3e3e3e;
            display: block;
        }
        .navigation > .widget > .nav-wrap-c > ul li a:first-child {
            border-top: none;
            padding: 12px 20px;
        }
        .navigation > .widget > .nav-wrap-c > ul li a:hover {
            background: #757575;
            color: #fff;
        }
	.navigation > .widget > .nav-wrap-c > ul a, 
	.navigation > .widget > .nav-wrap-c > ul ul a {
            font: inherit;
            background: none;
            display: inline;
            padding: 0;
            border: none;
	}
	.navigation > .widget > .nav-wrap-c > ul a:hover, 
	.navigation > .widget > .nav-wrap-c > ul ul a:hover {
            background: none;
	}
	
	/* dropdown */
	.navigation > .widget > .nav-wrap-c > ul ul {
            width: auto;
            position: static;
            display: block;
            border: none;
            background: transparent;
            min-width: 220px;
	}
	.navigation > .widget > .nav-wrap-c > ul ul li {
            
	}
    
    .navigation > .widget > .nav-wrap-c > ul li .parent-arrow{
            display: none;
    }
        .navigation > .widget > .nav-wrap-c > ul ul li a,
        .navigation > .widget > .nav-wrap-c > ul ul li a:first-child{
            font-size: 100%;
            border-top: 1px #fff solid;
            padding: 18px 35px 18px 10px;                        
            background-color: #e5e5e5;
            color: #3e3e3e;
            display: block;
    }
        .navigation > .widget > .nav-wrap-c > ul ul li a:hover{
            border-top: 1px #ececec solid;
            background-color: #757575;
            color: #fff;
    }
    /* InnerpageHOME Main Menu Mobile Navigation -----------*/
	/* nav-wrap */
	.navigation2 .nav-wrap-c {
            position: relative;
	}

	/* main nav */
	.navigation2 > .widget > .nav-wrap-c > ul {
            clear: both;
            padding: 0;
            position: absolute;
            top: 80px;
            right: 0;
            width: auto;
            z-index: 10000;		
            display: none; /* visibility will be toggled with jquery */
	}
	.navigation2 > .widget > .nav-wrap-c > ul li {
            clear: both;
            float: none;
            text-align: right;
            margin-right: 0;                           
	}
        .navigation2 > .widget > .nav-wrap-c > ul li a {
            border-top: 1px #ececec solid;
            padding: 6px 20px 12px;
            font-size: 115%; /* 16px-14/14*100= 14.285714 + 100%   */
            font-weight: 300;
            text-transform: uppercase;
            text-decoration: none;
            color: #3e3e3e;
            display: block;
        }
        .navigation2 > .widget > .nav-wrap-c > ul li a:first-child {
            border-top: none;
            padding: 12px 20px;
        }
        .navigation2 > .widget > .nav-wrap-c > ul li a:hover {
            background: #757575;
            color: #fff;
        }
	.navigation2 > .widget > .nav-wrap-c > ul a, 
	.navigation2 > .widget > .nav-wrap-c > ul ul a {
            font: inherit;
            background: none;
            display: inline;
            padding: 0;
            border: none;
	}
	.navigation2 > .widget > .nav-wrap-c > ul a:hover, 
	.navigation2 > .widget > .nav-wrap-c > ul ul a:hover {
            background: none;
	}
	
	/* dropdown */
	.navigation2 > .widget > .nav-wrap-c > ul ul {
            width: auto;
            position: static;
            display: block;
            border: none;
            background: transparent;
            min-width: 220px;
	}
	.navigation2 > .widget > .nav-wrap-c > ul ul li {
            
	}
    
    .navigation2 > .widget > .nav-wrap-c > ul li .parent-arrow{
            display: none;
    }
        .navigation2 > .widget > .nav-wrap-c > ul ul li a,
        .navigation2 > .widget > .nav-wrap-c > ul ul li a:first-child{
            font-size: 100%;
            border-top: 1px #fff solid;
            padding: 18px 35px 18px 10px;                        
            background-color: #e5e5e5;
            color: #3e3e3e;
            display: block;
    }
        .navigation2 > .widget > .nav-wrap-c > ul ul li a:hover{
            border-top: 1px #ececec solid;
            background-color: #757575;
            color: #fff;
    }
    .mbpgallery-category-box-file {
            margin: 5px 3% !important;
    }
    .footer-item {
        padding-right: 20px;
    }
    .footer-item, .footer-item2 {
        width: 30%;
        margin: 0;
    }
    .footer_02 {
        display: none;
    }
}
/* Smaller than 640px = 40em -----------*/
@media screen
and (max-width: 40em) {    
    #header #logo {        
        border-right: 1px solid #CCCCCC;
    }
    #header #logo a{
        width: 80%;
        background: url("images/icons/passion_logo_small.jpg") no-repeat scroll center top transparent;
        margin: auto;
    }
    #header #logo a:hover{
        background: url("images/icons/passion_logo_small_hover.jpg") no-repeat scroll center top transparent;
    }
    #logo_white {
        width: 24%;     
    }    
    #logo_white a{
        background: url("http://mobipotcms.com/storage/upload/tanjongbunga/images/tanjong_bunga_small.png") no-repeat scroll center top transparent;
        margin: auto;
    }
    #logo_white a:hover{
        /*background: url("images/icons/passion_logo_small_white_hover30.png") no-repeat scroll center top transparent;*/
    }
    #logo_white {
        height: 40px;
    }
    #header .login_container {
        font-size: 80%;
    }
    .button_user {
        line-height: 1.3em;
    }
    .button_setting {
        display: none;
    }
    .button_logout {
        line-height: 1.5em;
    }
    .button_setting button, .button_logout input {
        display: inline-block;
        font-size: 98%;
        padding: 5px 8px;
        text-transform: uppercase;
        background-color: #333;
        color: #fff;
        border: 1px solid #fff;
        cursor: pointer;
    }
    .button_setting button:hover, .button_logout input:hover {
        background-color: #fff;
        color: #333;
        border: 1px solid #333;
    }
    #header2 .quickcart {
        width: 45%;
        padding-left: 0;
        padding-right: 5%; 
    }    
    #header2 .login_container{
        width: 40%;
        padding-left: 10%;
        padding-right: 0;
    }
    #left {
        display: none;
    }
    #component {
        width: 92%;
        float: none;
        padding: 5% 4% 5%;
        display: block;
        color: #3a3a3a;
        border-left: none;
        overflow: hidden;
    }
    .footer-item {
        padding-right: 20px;
    }
    .footer_01, .footer_04 {
        width: 45%;
        margin: 0;
    }
    .footer_02, .footer_03 {
        display: none;
    }    
}
/* Smaller than 320px = 16em -----------*/
@media screen
and (max-width: 16em) { 
    .footer_01, .footer_02, .footer_03 {
        display: none;
    }
    .footer_04 {
        width: 100%;
    } 
}