/******************************************************************************************************
    Default Layout 
    For large screeens (width 769px - 1024px).
******************************************************************************************************/

    .mq-large-hide {
    display: none; }

/**************************************************
    Main
**************************************************/    
    
    .logo {
    width: 40%; }
    
    .search {
    width: 60%; }
    
    .column-left {
    width: 200px; }
    
    .column-right {
    width: 200px; }
    
    .group-1 { width: 100%;    }
    .group-2 { width: 50%;     }
    .group-3 { width: 33.333%; }
    .group-4 { width: 50%;     }
    .group-5 { width: 20%;     }
    .group-6 { width: 50%;     }
    
/**************************************************
    FORM & Register Account
**************************************************/   
    form input,
    form select {
    left: 40%; }
    
    form input {
    width: 60%; }
    
        form input.small {
        width: 30%; }

    form .form-buttons .submit-form {
    right: 0; }
        
    /*.choose-form .buttons {
    position: static;
    left: 0; }*/
    
/******************************************************************************************************
    Product
******************************************************************************************************/ 

/**************************************************
    Product List Header
**************************************************/    
    
    .product-list-header > p { 
    width: 60%; }
    
    .product-list-header > img {
    width: 40%; }

    .product-list-header > img.full {
    width: 100%; }
    
/**************************************************
    Tiles 
    Fix layout issues.
**************************************************/

    .product-list-style-tiles .group-3 .product-list .extra-label {
    display: block;
    line-height: 15px;
    height: 15px; }
    
    .product-list-style-tiles .group-3 .product.tile .footnote {
    height: 20px; }
    
    .product-list-style-tiles .group-3 .product.tile .buttons button {
    width: 100%;
    text-align: center; }
    
    .product-list-style-tiles .group-3 .product.tile .buttons button.gray {
    line-height: 15px;
    margin: 0 0 5px 0; }

/**************************************************
    Thumbnails
    Fix layout issues for width 769-900px.
**************************************************/
    
@media (min-width: 769px) and (max-width: 900px) {
    
    .product-list-style-thumbs .product-list .image-container {
    width: 20%; }
    
    .product-list-style-thumbs .product-list .info {
    width: 50%;
    float: left;
    padding: 0; }
    
        .product-list-style-thumbs .product-list .info dt,
        .product-list-style-thumbs .product-list .info dd {
        line-height: 15px; }
    
    .product-list-style-thumbs .product-list .price {
    top: 0;
    right: 0; }
    
    .product-list-style-thumbs .product-list .buttons {
    width: 100%;
    /*position: static;*/

    position: relative;
    clear: both;
     }
    
        .product-list-style-thumbs .product-list .buttons button {
        float: left;
        width: 35%;
        margin: 5px 0 0 0; }

        .product-list-style-thumbs .product-list .buttons button:first-of-type {
        margin-left: 30%;
        margin-right: 2%;
        width: 33%;
        }

        .product-list-style-thumbs .product-list .buttons .stockqty {
        top: 10px;
        }
    
}

/**************************************************
    List & list options
    Fix layout issues for width 769-900px.
**************************************************/
    
@media (min-width: 769px) and (max-width: 900px) {
    
    .product-list-style-list .product-list .buttons {
    top: 30px; }
    
    .product-list-style-list .product-list .price {
    top: 0;
    right: 0; }
    
    .product-list-style-list .product-list .info {
    padding: 0 150px 0 0;
    min-height: 60px; }
    
    .list-options {
    margin: 0 0 0 5px;
    padding: 0 0 0 5px;
    border-left: 1px solid #888; }
    
        .list-options:last-child {
        border-left: none; }
        
        .list-options dt { 
        display: none; }
    
}

/**************************************************
    Product Article
    Fix layout issues for width 769-900px.
**************************************************/
    
    .product .details {
    float: none;
    width: 100%; }
    
    .product .price {
    margin: 20px 0 0 0; }
    
@media (min-width: 769px) and (max-width: 900px) {
    
    .product .image-container {
    width: 100%;
    padding: 0;
    height: 200px;
    text-align: center;
    margin-bottom: 30px; }
    
        .box .product .image-container img {
        border: none; }

    .product .image-container div.product-image-selector {
    display: block; }

    .product .image-container div.product-image-thumbnails {
    display: none; }
    
    .product .info {
    float: none;
    width: 100%; }
    
    .product .data,
    .product .description {
    width: 100%;
    float: none;
    /*padding: 20px 0 0 0;*/ }

}

/******************************************************************************************************
    Wishlist
    !wishlist
******************************************************************************************************/

    /*.wishlist-list .image       { width: 10%; }
    .wishlist-list .article     { display: none; }
    .wishlist-list .name        { width: 37%; }
    .wishlist-list .price       { width: 12%; }
    .wishlist-list .amount      { width: 10%; }
    .wishlist-list .sum         { width: 15%; }
    .wishlist-list .operations  { width: 16%; }
    .wishlist-summery .total    { width: 70%; }
    .wishlist-summery .sum      { width: 15%; }
    .wishlist-summery .buttons  { width: 16%; }
    
    .cartlist-list .image       { width: 10%; }
    .cartlist-list .article     { display: none; }
    .cartlist-list .name        { width: 37%; }
    .cartlist-list .price       { width: 12%; }
    .cartlist-list .amount      { width: 10%; }
    .cartlist-list .sum         { width: 15%; }
    .cartlist-list .operations  { width: 16%; }
    .cartlist-summery .total    { width: 70%; }
    .cartlist-summery .sum      { width: 15%; }*/

    .wishlist-list .price,
    .cartlist-list .price {
    text-align: left;
    padding: 0 5px 5px 15%; }
    
    .wishlist-list .image img,
    .cartlist-list .image img {
    max-height: 30px; }
    
    .wishlist-list .name,
    .cartlist-list .name {
    padding: 10px 5px 10px 0; }
    
    .wishlist-list .amount,
    .wishlist-list .sum,
    .wishlist-list .operations,
    .cartlist-list .amount,
    .cartlist-list .sum,
    .cartlist-list .operations {
    padding: 0 5px 5px 5px; }

    .cartlist-summery .sum,
    .wishlist-summery .sum {
    padding: 5px; } 
    
        .wishlist-header .name,
        .cartlist-header .name {
        padding: 5px 5px 0 0; }
    
    .wishlist-list .image       { width: 15%;  }
    /*.wishlist-list .article     { display: none; }*/
    .wishlist-list .name        { width: 85%;  }
    .wishlist-list .price       { width: 35%;  }
    .wishlist-list .amount      { width: 25%;  }
    .wishlist-list .sum         { width: 20%;  }
    .wishlist-list .operations  { width: 20%;  }
    .wishlist-summery .total    { width: 60%;  }
    .wishlist-summery .sum      { width: 20%;  }
    .wishlist-summery .buttons  { width: 20%;  }
    
    .cartlist-list .image       { width: 15%;  }
    /*.cartlist-list .article     { display: none; }*/
    .cartlist-list .name        { width: 85%;  }
    .cartlist-list .price       { width: 37%;  }
    .cartlist-list .amount      { width: 25%;  }
    .cartlist-list .sum         { width: 22%;  }
    .cartlist-list .operations  { width: 16%;  }
    .cartlist-summery .total    { width: 62%;  }
    .cartlist-summery .sum      { width: 22%;  }

.cartlist-summery .total {
    font-size: 11px;
}

    
@media (min-width: 769px) and (max-width: 800px) {
    .wishlist-list .image       { width: 15%;  }
    .wishlist-list .name        { width: 85%;  }
    .wishlist-list .price       { width: 40%;  }
    .wishlist-list .amount      { width: 30%;  }
    .wishlist-list .sum         { width: 30%;  }
    .wishlist-list .operations  { width: 100%; }
    .wishlist-summery .total    { width: 70%;  }
    .wishlist-summery .sum      { width: 30%;  }
    .wishlist-summery .buttons  { width: 0%;  }
}

/******************************************************************************************************
    Checkout
    !checkout
******************************************************************************************************/

.cartlist-summary-deliverytime {
    width: 100%;
    text-align: left;
}

.cartlist-summary-weights span:first-of-type {
    width: 62%;
}

.cartlist-summary-weights span:last-of-type {
    width: 22%;
}

@media (min-width: 769px) and (max-width: 900px) {
    .cartlist-summary-deliverytime {
        width: 100%;
        text-align: right;
    }

    .cartlist-summary-deliverytime span {
    display: block;
    }
}

.id-checkout-agreements.has-estimated-deliverydate {
    float: none;
    width: 100%;
}

/******************************************************************************************************
    Order History
    !order !history !order-history
******************************************************************************************************/

    .order-history .invoice .item          { width: 15%; }
    .order-history .invoice .sum           { width: 15%; }
    
    .order-history .invoice .inner-table .name      { width: 40%; }
    .order-history .invoice .inner-table .sum     { width: 20%; }


@media (min-width: 769px) and (max-width: 900px) {

    .order-history .delivery .item         { width: 30%; }
    .order-history .delivery .date         { width: 30%; }
    .order-history .delivery .amount       { width: 40%; }
    .order-history .delivery .trace        { width: 60%; }
    .order-history .delivery .operations   { width: 40%; }
    
        .order-history .delivery .item,
        .order-history .delivery .date,
        .order-history .delivery .amount,
        .order-history .delivery .name {
        padding: 5px 5px 0 5px; }
        
        .order-history .delivery .trace,
        .order-history .delivery .operations,
        .order-history .delivery .inner-table .total,
        .order-history .delivery .inner-table .amount { 
        padding: 0 5px 5px 5px; }
        
        .order-history .delivery .inner-table .amount {
        text-align: left; }
        
        .order-history .delivery .inner-table .table-header .table-cell {
        padding: 5px; }
        
        /*.order-history .delivery .inner-table .item      { width: 20%; }*/
        .order-history .delivery .inner-table .name      { width: 100%; }
        .order-history .delivery .inner-table .amount    { width: 50%; }
        .order-history .delivery .inner-table .total     { width: 50%; }
    
    .order-history .invoice .item          { width: 30%; }
    .order-history .invoice .invoice-date  { width: 35%; }
    .order-history .invoice .last-date     { width: 35%; }
    .order-history .invoice .sum           { width: 30%; }
    .order-history .invoice .operations    { width: 70%; }
    
        .order-history .invoice .item,
        .order-history .invoice .invoice-date,
        .order-history .invoice .last-date ,
        .order-history .invoice .inner-table .name {
        padding: 5px 5px 0 5px; }
        
        .order-history .invoice .sum,
        .order-history .invoice .operations,
        .order-history .invoice .inner-table .amount,
        .order-history .invoice .inner-table .price {
        padding: 0 5px 5px 5px; }
        
        .order-history .invoice .last-date {
        text-align: right; }
        
        .order-history .invoice .sum,
        .order-history .invoice .inner-table .price {
        text-align: left; }
    
        /*.order-history .invoice .inner-table .item      { width: 20%; }*/
        .order-history .invoice .inner-table .name      { width: 100%; }
        .order-history .invoice .inner-table .price     { width: 30%; }
        .order-history .invoice .inner-table .amount    { width: 30%; }
        .order-history .invoice .inner-table .sum       { width: 40%; }
        
        .order-history .invoice .inner-table .table-header .table-cell {
        padding: 5px; }
    
    

}