/******************************************************************************************************
    Default Layout 
    For small/phone screeens (width <= 480px).
******************************************************************************************************/    

    html,
    body {
    overflow-x: hidden; }
    
    .mq-small-hide {
    display: none; }
    
    .mq-small-show {
    display: block; }
    
    .mq-small-no-padding {
    padding: 0; }
    
    .box {
    margin: 2px; }
    
    .box.box-breadcrums {
    background: none;
    padding: 0;
    margin: 0 5px; }
    
    .box.dark {
    margin: 4px;
    padding: 5px; }
    
    .social {
    right: 0;
    top: 0; }
    
/**************************************************
    Main
**************************************************/    
    
    main {
    padding: 2px; }
    
    .column-left {
    width: auto;
    float: none; }
        
        .column-left .cell {
        width: 100%; }
    
    .column-right {
    width: auto;
    float: none; }
    
        .column-right .cell {
        width: 100%; }
    
    .column-middle {
    overflow: auto; }
    
    .cell {
    width: 100%; }

/**************************************************
    FORM & Register Account
**************************************************/   
    
    form input {
    width: 60%; }
    
        form input.small {
        width: 30%; }
    
    form .form-buttons .submit-form {
    right: 0; }
    
    /*.choose-form .buttons {
    position: static;
    left: 0; }*/

/**************************************************
    Header
**************************************************/
    
    header .header-bottom {
    /*background-image: url('../user-images/header-small.jpg');*/
    background-position: center top;
    padding: 0; }
    
    .logo {
    width: 100%;
    max-width: 200px;
    margin: 50px 0 0 0; }
    
    .logo a {
    width: 100%;
    height: 60px;
    background-size: 295px;
    background-position: 5px 0; }
        
    .search {
    margin: 0;
    width: 100%; }
    
        .search .button {
        right: 10px;
        top: 10px; }
        
    .mobile-help {
    right: auto; }
    
    .mobile-help .selector.align-dropdown-right ul {
    left: 0; 
    right: auto; }
    
    .mobile-navigation-button {
    padding: 10px; }
        
/**************************************************
    Mobile Cart
**************************************************/

    .mobile-help,
    .mobile-cart {
    display: block; }
    
/**************************************************
    Footer
**************************************************/
    
    footer .group-5 {
    width: 50%; }
    
    footer .group-5:last-child {
    width: 100%; }
    
/**************************************************
    Filter / Top Menu
**************************************************/ 
    
    .filter {
    width: 200px;
    float: right;
    margin-bottom: 0; }

    .top-menu {
    width: 100%;
    margin-bottom: 0; }
    
    .filter .box,
    .top-menu .box {
    margin: 0 4px 4px 4px; }
    
    .filter .filter-button {
    display: block;
    width: 180px;
    text-align: center; }
    
    .filter .filter-left-side,
    .filter .filter-right-side {
    display: none; }
    
    .filter.open {
    width: 100%; }
    
    .filter.open .filter-button {
    width: 100%;
    text-align: left;
    margin: 0 0 5px 0; }
    
    .filter.open .filter-left-side,
    .filter.open .filter-right-side {
    display: block; } 
    
    
    .filter h4 {
    display: none; }
    
    .filter .filter-left-side,
    .filter .filter-right-side {
    padding: 0;
    float: none;
    width: 100%; }
    
    .filter .selector,
    .filter .selector button,
    .filter .selector select,
    .filter .on-off,
    .filter .filter-right-side button {
    width: 100%; }
    
    .filter .selector,
    .filter .on-off,
    .filter .filter-right-side button {
    margin: 0 0 5px 0;
    width: 100%; }
    
    .filter .filter-right-side button {
    margin: 10px 0 0 0; }
    
/**************************************************
    List Filter
**************************************************/     
    
    .list-filter > ul > li {
    float: none;
    width: 100%;
    padding: 0; }
    
/**************************************************
    List Options
**************************************************/
    
    .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; }
            
/******************************************************************************************************
    Selector
******************************************************************************************************/    
    
    .selector .control {
    display: none; }
    
    .selector .native-control {
    display: block; }
    
    .selector.gray .native-control {
    background-color: #e8e8e8; }
    
/******************************************************************************************************
    Navigation
******************************************************************************************************/ 
    
    .mobile-navigation-button {
    display: block; }
    
    .navigation {
    display: none; }
    
    .navigation.open {
    display: block; }
    
    .navigation h3 {
    display: none; }

    .topnavigation a {
    font-size: 0.9em;
    margin: 0; }

/******************************************************************************************************
    Breadcrums & Social
******************************************************************************************************/ 
    
    .breadcrums {
    padding: 0; }
    
    .social {
    position: static;
    float: right; }
    
/******************************************************************************************************
    Products
******************************************************************************************************/    

    .icon-prev-product-image { background-position: -100px -80px; }
    .icon-next-product-image { background-position: -120px -80px; }
    a.icon-prev-product-image:hover { background-position: -100px -100px; }
    a.icon-next-product-image:hover { background-position: -120px -100px; }

/**************************************************
    Product List Header
**************************************************/    
    
    .product-list-header > p { 
    width: 100%; }
    
    .product-list-header > img {
    display: none; }

    .product-list-header > img.full {
    display: inline;
    width: 100%; }
    
/**************************************************
    Orientations
**************************************************/     

@media (orientation:portrait) {

    .product-list-style-tiles .product-list,
    .product-list-style-thumbs .product-list,
    .product-list-style-list .product-list {
    position: relative; }
        
        .product-list-style-tiles .product-list .image-container,
        .product-list-style-thumbs .product-list .image-container,
        .product-list-style-list .product-list .image-container {
        width: 50%;
        height: 60px;
        display: block;
        float: none;
        text-align: center; }
        
        .product-list-style-tiles .product-list .info,
        .product-list-style-thumbs .product-list .info,
        .product-list-style-list .product-list .info {
        padding: 0 40% 0 0;
        margin: 5px 0 0 0; }

        #overbox .product-list-style-tiles .product-list .info,
        #overbox .product-list-style-thumbs .product-list .info,
        #overbox .product-list-style-list .product-list .info {
        padding: 0 10% 0 0; }
    
        .product-list-style-tiles .product-list .price,
        .product-list-style-tiles .product-list .buttons,
        .product-list-style-thumbs .product-list .price,
        .product-list-style-thumbs .product-list .buttons,
        .product-list-style-list .product-list .price,
        .product-list-style-list .product-list .buttons {
        position: absolute; }
        
        .product-list-style-tiles .product-list .price,
        .product-list-style-thumbs .product-list .price,
        .product-list-style-list .product-list .price {
        top: 0; 
        right: 0; }

        .overbox-content.product-list-style-tiles .product-list .price,
        .overbox-content.product-list-style-thumbs .product-list .price,
        .overbox-content.product-list-style-list .product-list .price {
        right: 10px; }
        
        .product-list-style-tiles .product-list .buttons,
        .product-list-style-thumbs .product-list .buttons,
        .product-list-style-list .product-list .buttons {
        bottom: 0;
        right: 0;
        top: auto;
        width: 40%; }
        
        .product-list-style-tiles .product-list .buttons button,
        .product-list-style-thumbs .product-list .buttons button,
        .product-list-style-list .product-list .buttons button {
        display: block;
        text-align: center;
        /*width: 100%;
        margin: 0 0 5px 0;*/

        width: 70%;
        margin: 0 0 5px 30%;
        }

        .product-list-style-list .product-list .buttons button:first-of-type,
        .product-list-style-tiles .product-list .buttons button:first-of-type {
            margin-right: 0;
        }

        .product-list .buttons .stockqty {
        position: absolute;
        float: left;
        margin: 0;
        left: 0;
        left: -webkit-calc(30% - 30px);
        left: calc(30% - 30px);
        /*top: 40px;*/ }

        .product-list-style-thumbs .product-list .buttons.buybutton-disabled .stockqty {
        top: 5px; }

        #overbox .product-list .stockqty {
        position: absolute; 
        right: 6px;
        bottom: 5px; }
        
        .product-list-style-thumbs .product-list dl dd.item,
        .product-list-style-list .product-list dl dd.item,
        .product-list-style-list .product-list dl dd.manufacturer,
        .product-list-style-list .product-list dl dd.car {
        display: block;
        font-size: 13px; }
        
        .product-list-style-list .product-list dl dt.car {
        display: none; /* Hide by default */
        font-size: 11px;
        text-transform: uppercase;
        float: left;
        line-height: 16px;
        padding: 0 5px 0 0; }
        
        .product-list-style-list .product-list dl dd.item {
        color: #888; }
        
        .product-list-style-list .product-list dl dd.manufacturer,
        .product-list-style-list .product-list dl dt.car {
        font-weight: bold; }
        
        .product-list-style-list .product-list dl dt.item,
        .product-list-style-list .product-list dl dt.manufacturer {
        display: none; }
        
        .product-list-style-list .product-list .info h4 {
            font-size: 16px;
            line-height: 20px;    
        }
        
        .product-list-style-list .box .product-list .price {
            font-size: 26px;
            line-height: 22px;
        }
        
}   
    
@media (orientation:landscape) {
    
    .group-1 { width: 100%; }
    .group-2 { width: 50%;  }
    .group-3 { width: 100%; }
    .group-4 { width: 50%;  }
    .group-5 { width: 20%;  }
    .group-6 { width: 50%;  }
    /*
    .group-1 .product,
    .group-3 .product-list { 
    position: relative; }
        
        .group-1 .product-list .image-container,
        .group-3 .product-list .image-container {
        width: 50%;
        height: 60px;
        float: left; }
        
        .group-1 .product-list h4,
        .group-3 .product-list h4 {
        text-align: center;
        position: absolute;
        width: 50%; }
        
        .group-1 .product-list h4,
        .group-3 .product-list h4 {
        bottom: 15px; }
        
        .group-1 .product-list h5,
        .group-3 .product-list h5 {
        bottom: 0; }
        
        .group-1 .product-list .footnote,
        .group-3 .product-list .footnote {
        height: auto; }
        
        .group-1 .product-list button,
        .group-3 .product-list button {
        width: 40%;
        text-align: center;
        margin-top: 5px; }
        */
}

/**************************************************
    Product Article
    Fix layout issues for width 769-900px.
**************************************************/
  
    .product .image-container {
    width: 100%;
    height: 150px;
    padding: 0;
    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 .buttons label,
    .product .buttons button {
    width: 40%; }
    
    .product .buttons button {
    text-align: center;
    margin: 0 0 5px 0; }
    
    .product .data dl dt {
    position: static;
    width: 100%; }
    
    .product .data dl dd {
    padding: 0;
    border-top: none; }
    
    /*.product .read-more {
    margin: 0; }*/
    
    .product .details {
    float: none;
    width: 100%; }
    
    .product .data,
    .product .description {
    width: 100%;
    float: none;
    /*padding: 20px 0 0 0;*/ }
    
/******************************************************************************************************
    Text Article
    !article !text !text-article
******************************************************************************************************/

    .text-article .column-1,
    .text-article .column-2 {
    width: 100%; }  
    
/******************************************************************************************************
    Wishlist & Cartlist
    !wishlist !cartlist
******************************************************************************************************/
    
    /*.wishlist-list .article,
    .cartlist-list .article {
    display: none; }
    
    .wishlist-list .price,
    .cartlist-list .price {
    text-align: left; }
    
    .wishlist-list .name,
    .cartlist-list .name {
    padding: 5px 5px 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    
    .wishlist-list .name,
    .wishlist-list .price,
    .wishlist-list .amount,
    .wishlist-list .sum,
    .wishlist-list .operations,
    .cartlist-list .price,
    .cartlist-list .amount,
    .cartlist-list .sum,
    .cartlist-list .operations {
    padding: 5px; }
    
    .wishlist-list .image img {
    max-height: 20px; }
    
    .wishlist-list .image       { width: 20%; }
    .wishlist-list .name        { width: 80%; }
    .wishlist-list .price       { width: 20%;  }
    .wishlist-list .amount      { width: 20%;  }
    .wishlist-list .sum         { width: 20%;  }
    .wishlist-list .operations  { width: 30%;  }
    .wishlist-summery .total    { width: 50%;  }
    .wishlist-summery .sum      { width: 20%;  }
    .wishlist-summery .buttons  { width: 30%;  }*/
    
    .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; }
    
        .wishlist-header .name,
        .cartlist-header .name {
        padding: 5px 5px 0 0; }
        
        .cartlist-list .cartlist-summery .sum,
        .wishlist-list .wishlist-summery .sum {
        padding: 5px; }
    
    .wishlist-list .image       { width: 15%;  }
    .wishlist-list .article     { display: none; }
    .wishlist-list .name        { width: 85%;  }
    .wishlist-list .price       { width: 30%;  }
    .wishlist-list .amount      { width: 25%;  }
    .wishlist-list .sum         { width: 25%;  }
    .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: 35%;  }
    .cartlist-list .amount      { width: 25%;  }
    .cartlist-list .sum         { width: 24%;  }
    .cartlist-list .operations  { width: 16%;  }
    .cartlist-summery .total    { width: 60%;  }
    .cartlist-summery .sum      { width: 24%;  }
    
@media (max-width: 400px) {
    .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
******************************************************************************************************/

    .checkout.address form {
    width: 100%; }
    
    .checkout a.on-off {
    float: none;
    width: 100%;
    height: auto;
    text-align: left;
    margin: 5px;
    position: static;
    padding: 5px; }
        
        .checkout a.on-off img {
        float: left;
        pointer-events: none;
        margin: 0 10px 0 0;
        max-height: 20px; }
        
        .checkout a.on-off h3 {
        margin: 0;
        padding: 0 10px;
        position: static;
        bottom: auto;
        width: auto;
        line-height: 20px;
        pointer-events: none; }  
        
    .checkout.summery dl dt {
    width: 60%; }

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

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

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

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

    .id-checkout-agreements.has-estimated-deliverydate {
    float: none;
    width: 100%;
    }
    
/******************************************************************************************************
    My Pages
    !my-pages !mypages
******************************************************************************************************/    
    
    .my-pages .order-list .date       { width: 40%; }
    .my-pages .order-list .order      { width: 60%; }
    .my-pages .order-list .status     { width: 60%; }
    .my-pages .order-list .sum        { width: 40%; }
    .my-pages .order-list .table-row .date { text-align: right; }
    
    .my-pages .order-list .date,
    .my-pages .order-list .order {
    padding: 5px 5px 0 5px; }
    
    .my-pages .order-list .status,
    .my-pages .order-list .sum {
    padding: 0 5px 5px 5px; }
  
/******************************************************************************************************
    Order History
    !order !history !order-history
******************************************************************************************************/
    
    .order-history .order-info dl {
    width: 100%; }
    
    /*.order-history .order .item    { width: 30%; }*/
    .order-history .order .name    { width: 100%; }
    .order-history .order .price   { width: 30%; }
    .order-history .order .amount  { width: 30%; }
    .order-history .order .sum     { width: 40%; }
    .order-history .order .label   { width: 60%; }
    .order-history .order .value   { width: 40%; }

    .order-history .order .table-cell.status { display: block; line-height: 8px; }
    .order-history .order .name .status    { display: none; }
    
        /*.order-history .order .item,*/
        .order-history .order .name {
        padding: 5px 5px 0 5px; }
        
        .order-history .order .price,
        .order-history .order .amount,
        .order-history .order .sum { 
        padding: 0 5px 5px 5px; }
        
        .order-history .order .price,
        .order-history .order .amount {
        text-align: left; }
    
    .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; }