/** 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 {
        width: 100%;
    }
    .navigation .nav-wrap-c > ul a {
        font-size: 100%;
    }
    .navigation2 {
        width: 70%;
		padding-left: 40px;
		float: right;
    }
    .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: right;
        padding: 5% 4% 5%;
        display: block;
        color: #3a3a3a;
        border-left: 1px solid #e3e3e3;
    }    
	
	.sidebar h3:before
	{
	left: -50px;
	}
	
	.sidebar span
	{
	left: -50px;
	width: 150px;
	}
	
	
	
}

/* 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 {
        min-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 .logo_white,
    #header2 .navigation2,    
    #header2 .quickcart_login{
        padding: 0 2.5%;
    }    
    #header2 .logo_white {
        width: 20%;
    }
    #header2 .navigation2{
        width: 15%;
		margin-top: 10px;
    }
    #header2 .quickcart_login {
        
        width: 20%;
    }
    #header2 .login_container,
    #header2 .quickcart {
        width: 47%;
    }
    #header2 .login_container{
        padding-right: 2.5%; 
    }
    #header2 .quickcart {
        padding-left: 2.5%; 
    }
	
	#header2 .navigation2 {
        float: right;
    }
	
    #header2 .quickcart {
        float: right;
    }
	
	#header2 .login_container
      {
        float: left;
    }
	
    #header2 .cart_button {
        margin: 0 45%;
    }
    #header2 .quickcart div, #header2 .login_container div {
        border-right: none;
        float: none;
        margin: auto;
    }
	
	.button_login
	{
	display:none;
	}
	
	.cart_button{
	padding-top: 10px;
	}
	
	
    #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 */
			background: white;
	}
	.navigation2 > .widget > .nav-wrap-c > ul li {
            clear: both;
            float: none;
            text-align: right;
            margin-right: 0;         
			border-bottom: 1px solid rgb(218, 218, 218);
                  
	}
        .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;
			color: black;
        }
        .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: 50%; 		
    }    
    #logo_white a{
        width: 100%;
        background: url("http://meikasteel.com/template/pro/meikasteel/meika/css/images/mobile_logo.png") no-repeat scroll center top transparent;
        margin: auto;
    }
   /* #logo_white a:hover{
        background: url("http://meikasteel.com/template/pro/meikasteel/meika/css/images/mobile_logo.png") no-repeat scroll center top transparent;
    }*/
    #logo_white {
		height: 40px;
		margin: auto;
		width: 150px;
    }
	
	.slogan
	{
	font-size: 1.8em;
	}
	
	#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: 70%;
		padding-left: 0;
		padding-top: 8px;
    }    
    #header2 .login_container{
        display:none;
		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%;
    } 
}


/************************************************************************************
    COLUMN
    *************************************************************************************/
    .col {
      float: left;
      margin-left: 3.2%;
      margin-bottom: 10px;
    }
    .fullwidth .col {
      float: none;
      margin-left: 0;
    }
    /* grid4 col */
    .grid4 .col {
      width: 22.6%;
    }
    /* grid3 col */
    .grid3 .col {
      width: 31.2%;
    }
    /* grid2 col */
    .grid2 .col {
      width: 48.4%;
    }
    /* clear col */
    .grid4 .col:nth-of-type(4n+1),
    .grid3 .col:nth-of-type(3n+1),
    .grid2 .col:nth-of-type(2n+1) {
      margin-left: 0;
      clear: left;
    }
    /************************************************************************************
    MEDIA QUERIES
    *************************************************************************************/
    /* reset cols to 3-column */
    @media screen and (max-width: 740px) {
      /* grid4 */
      .grid4 .col {
        width: 31.2%;
      }
      .grid4 .col:nth-of-type(4n+1) {
        margin-left: 3.2%;
        clear: none;
      }
      .grid4 .col:nth-of-type(3n+1) {
        margin-left: 0;
        clear: left;
      }
    }
    /* reset cols to 2-column */
    @media screen and (max-width: 600px) {
      /* grid4 */
      .grid4 .col {
        width: 48.4%;
      }
      .grid4 .col:nth-of-type(3n+1) {
        margin-left: 3.2%;
        clear: none;
      }
      .grid4 .col:nth-of-type(2n+1) {
        margin-left: 0;
        clear: left;
      }
      /* grid3 */
      .grid3 .col {
        width: 48.4%;
      }
      .grid3 .col:nth-of-type(3n+1) {
        margin-left: 3.2%;
        clear: none;
      }
      .grid3 .col:nth-of-type(2n+1) {
        margin-left: 0;
        clear: left;
      }
    }
    /* reset cols to fullwidth */
    @media screen and (max-width: 400px) {
      /* grid4 */
      .col {
        width: 100% !important;
        margin-left: 0 !important;
        clear: none !important;
      }
    }
	
.col img
{
width: 100% !important;
width: 100% !important;
border-radius: 10px;
}

.col 
{
text-align: center !important;
}

@media screen and (max-width: 64em)  {
	 
	.nav-wrap-c > ul {
		display:block;
	}
}