/* ==========================================================================
   GENERAL MOBILE STYLE || IPHOHE & IPAD
   ========================================================================== */
#sandwich {
    width: 30px;
    height: 30px;
    background-image: url('/images/site/sandwich.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 90% 90%;
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: none;
}

#mobile-nav {
    width: 200px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 997;
    background-color: #111;
}
    #mobile-nav ul { padding: 0; margin: 0; }
    #mobile-nav li { width: 100%; border-bottom: 1px solid #333; }
    #mobile-nav a { width: 100%; color: #fff; text-decoration: none; padding: 5px 10px; display: block;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */ }
    #mobile-nav a.back { color: #777; }


/* ==========================================================================
   RESPONSIVE || 1040 for Article Width
   ========================================================================== */
 
@media screen and (max-width: 1040px) { 

    /* 2 COLUMN TEMPLATE */
    .main-content { padding-left: 30px; padding-right: 30px; }
    .article, .shop-img { width: 100%; padding-bottom: 40px; }
    .aside, .shop-info { width: 100%; border-left: none; padding-right: 0; }
}

/* ==========================================================================
   RESPONSIVE || IPAD LANDSCAPE
   ========================================================================== */
 
@media screen and (max-width: 900px) { 
    
    /* Hide Top Socials || Hide Main Nav */
    #top-social, #main-nav { display: none; }
    
    /* Show Sandwich */
    #sandwich { display: block; }
    
    /* Make site header prettier */
    #top-head { height: 230px; }
    #top-cart { position: absolute; bottom: 10px; right: 10px; }
        
    /* 2 COLUMN TEMPLATE */
    .main-content { padding-left: 0; padding-right: 0; }
    .main-content iframe { max-width: 100%; }
        
    /* SHOP */
    .main-slider {
	    max-width: 100%;
	    height: auto;
    }
    #shop-gallery a {	    
        width: 120px;
        height: auto;
        margin: 0 10px 10px 0;
    }
    #shop-gallery a img {
	    width: 100%;
	    height: auto;
    }
    
    .shop-info { width: 100%; border-left: none; }
    
    /* Checkout Forms */
    .col-items.checkout-content { padding: 40px 0 0; }
    .col-items.checkout-content .item { width: 50%; }
}


/* ==========================================================================
   RESPONSIVE || IPAD PORTRAIT
   ========================================================================== */
@media screen and (max-width: 768px) { 
    /* Site Header */
    #sandwich { left: 0; }
    #top-cart { right: 0; }
    
    /* COLUMN ITEMS */
    .col-items .item { width: 50%; }
    
    /* Checkout Forms */
    .fieldset { width: 100%; border-bottom: 1px solid #666; padding-bottom: 20px; margin-bottom: 20px; }
    .col-items.checkout-content { }
	.col-items.checkout-content .wrapper { padding: 0 10px; }
    .col-items.checkout-content .item { width: 100%; padding: 0; }
    .item-wrapper .actions input[type="submit"], 
    .col-items.checkout-content .form-actions a.continue-shopping { font-size: 12px; }    
    
    .delivery-note { font-size: 12px; padding: 15px; }
}


/* ==========================================================================
   RESPONSIVE || IPHONE
   ========================================================================== */

@media screen and (max-width: 420px) { 
    
    /* SITE HEADER */
    #sign-in, 
    #member-actions > span,
    #my-account > .myaccount-link, 
    #my-account > span { display: none; }
    
    /* MAIN BANNER */
    .main-banner { height: 350px; }
    .main-banner .slide .txt { margin-top: 90px; }
    .main-banner .slide .txt .cat { font-size: 30px; line-height: 40px; }
    .main-banner .slide .txt .title { font-size: 50px; line-height: 50px; }
    .main-banner .slide .txt .info { font-size: 20px; line-height: 25px; }
    .main-banner .slide .logo { line-height: 350px; }
    
    /* COLUMN ITEMS */
    .col-items .item { width: 100%; }
    
    /* Checkout Forms */
    .fieldset input { width: 100%; }
    #shipping_same_as_billing { width: auto; }
    .col-items.checkout-content .item-wrapper { min-height: 160px; }
    .item-wrapper .img { width: 50px; height: 50px; }
    .item-wrapper .info { padding-left: 80px; }
    .item-wrapper .actions input[type="submit"], 
    .col-items.checkout-content .form-actions a.continue-shopping { width: 100%; }
    
    /* Artical Contents */
    .main-content { padding: 30px 0; }
    h1 { padding: 10px 0; font-size: 22px; }
    
    
    /* Checkout Content */
    .checkout-content { padding: 40px 10px 0; }
    .col-items .wrapper { padding: 0; }
}