/* Catalog */
.catalog { float: none; }

/* Shopping Cart Icon */
.shopping-cart-info { width: 100%; margin: 0; padding: 0 10px; }
    .shopping-cart-info div { display: inline-block; margin: 0; padding: 5px; cursor: pointer; }






/* Index Page -- Initial Page for /Catalog */

.categoryList { width: 100%; }
    .categoryList > div { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: flex-start; }
    .categoryList .category { width: 20%; margin: 0; padding: 10px; min-width: 240px; }

        .categoryList .category .categoryName { background: transparent center center no-repeat; background-size: cover; color: #000; }
            .categoryList .category .categoryName:hover { color: #0094ff; }

        .categoryList .category .categoryImage { display: flex; flex-direction: column; background-position: center center; background-repeat: no-repeat; background-size: cover; }
            .categoryList .category .categoryImage img { opacity: 0; height: 300px; width: 100%; visibility: hidden; }

        .categoryList .category .details { text-align: center; }

@media only screen and (max-width: 1480px) {
    .categoryList .category { width: 25%; }
}

@media only screen and (max-width: 1200px) {
    .categoryList .category { width: 33.333%; }
}

@media only screen and (max-width: 992px) {
    .categoryList .category { width: 50%; }
}

@media only screen and (max-width: 600px) {
    .categoryList .category { width: 100%; }
}






/* Category Details Page */

/*Category : 1st Element Display*/
.categoryDetails .categoryInfo { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: flex-start; padding: 0 10px; }
    .categoryDetails .categoryInfo h1 { margin: 0; padding: 0; width: 100%; }
    .categoryDetails .categoryInfo h2 { margin: 0; padding: 0; width: 100%; }

    .categoryDetails .categoryInfo .catalogImage { padding: 0; margin: 0; width: 300px; }
        .categoryDetails .categoryInfo .catalogImage div { background: transparent center center no-repeat; background-size: cover; }
        .categoryDetails .categoryInfo .catalogImage img { opacity: 0; height: 300px; width: 100%; visibility: hidden; }

    .categoryDetails .categoryInfo .catalogDesc { width: calc(100% - 300px); margin: 0; padding: 0 20px; }

@media only screen and (max-width: 992px) {
    .categoryDetails .categoryInfo .catalogDesc { width: 100%; padding: 0; }
}

/*Product List : 2nd Element Group*/
.categoryDetails .products { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: flex-start; }

    .categoryDetails .products .product { width: 20%; margin: 0; padding: 10px; min-width: 250px; }
        .categoryDetails .products .product .productTitle { width: 100%; margin: 0; padding: 0; }
        .categoryDetails .products .product .productImage { display: flex; flex-direction: column; }

        .categoryDetails .products .product a { background: transparent center center no-repeat; background-size: cover; color: #000; }
            .categoryDetails .products .product a img { display: block; opacity: 0; height: 300px; width: 100%; visibility: hidden; }



@media only screen and (max-width: 1480px) {
    .categoryDetails .products .product { width: 25%; }
}

@media only screen and (max-width: 1200px) {
    .categoryDetails .products .product { width: 33.333%; }
}

@media only screen and (max-width: 992px) {
    .categoryDetails .products .product { width: 50%; }
}

@media only screen and (max-width: 600px) {
    .categoryDetails .products .product { width: 100%; }
}











/* Catalog Product Details Page */
.productDetails .catalogProduct { display: flex; justify-content: flex-start; flex-wrap: wrap; }
    .productDetails .catalogProduct h1 { margin: 0; padding: 0; width: 100%; }
    .productDetails .catalogProduct h2 { margin: 0; padding: 0; width: 100%; }

    .productDetails .catalogProduct .catalogImage { padding: 0; margin: 0; width: 400px; position: relative; }
        .productDetails .catalogProduct .catalogImage .catalogBgImage { background: transparent center center no-repeat; background-size: cover; width: 100%; }
            .productDetails .catalogProduct .catalogImage .catalogBgImage img { width: 100%; opacity: 0; visibility: hidden; margin: 0; padding: 0; }

    .productDetails .catalogProduct .imgDescription { width: 100%; }

    .productDetails .catalogProduct .catalogImage .alternativeImages { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; width: 100%; height: auto; margin-top: -35px; position: relative; z-index: 1; }

        .productDetails .catalogProduct .catalogImage .alternativeImages div { width: 50px; height: 50px; margin: 5px 0.5%; background: transparent center top no-repeat; background-size: cover; }
        .productDetails .catalogProduct .catalogImage .alternativeImages .imgDescription { display: none; }

        .productDetails .catalogProduct .catalogImage .alternativeImages .showDescription { width: 100%; }
            .productDetails .catalogProduct .catalogImage .alternativeImages .showDescription .imgDescription { display: block; }

        .productDetails .catalogProduct .catalogImage .alternativeImages .imgSwap { cursor: pointer; }
            .productDetails .catalogProduct .catalogImage .alternativeImages .imgSwap.active { border: 1px solid #000; }



    .productDetails .catalogProduct .catalogDesc { margin: 0; padding: 0 20px; width: calc(100% - 400px); display: flex; flex-wrap: wrap; justify-content: space-between; }
        .productDetails .catalogProduct .catalogDesc .generalSpecs { width: 100%; }
        .productDetails .catalogProduct .catalogDesc .productSpecs { width: 100%; }

@media only screen and (max-width: 1200px) {
    .productDetails .catalogProduct .catalogImage { width: 250px; }
    .productDetails .catalogProduct .catalogDesc { width: calc(100% - 250px); }
}

@media only screen and (max-width: 768px) {
    .productDetails .catalogProduct .catalogImage { width: 100%; max-width: 400px; margin: 0 auto; }
        .productDetails .catalogProduct .catalogImage .catalogBgImage { background-size: contain; }
    .productDetails .catalogProduct .catalogDesc { width: 100%; padding: 20px 0; }
}






/*Add to Cart and View Cart Buttons*/
.catalog .cart-options { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 10px auto; width: 100%; }
    .catalog .cart-options .model { width: 100%; }
/*.catalog .cart-options .add-to-cart-option input { display: none; }*/
.catalog .generalSpecs .cart-options { flex-direction: column; width: auto; align-items: flex-start; }




/* Shopping Cart List - Check Out Screen */
.check-out { width: 100%; margin: 0 auto; }
    .check-out .product-list { width: 100%; max-width: 1024px; margin: 0 auto; }
.cart-item { display: flex; flex-wrap: wrap; justify-content: space-between; border: 1px solid #e1e1e1; margin: 0 auto 10px; }
    .cart-item .selectProduct { display: none; }

    .cart-item div { padding: 5px; display: flex; align-items: center; flex-wrap: wrap; }

    .cart-item .productImage { width: 150px; height: auto; display: flex; flex-wrap: wrap; }
    .cart-item .productModel { width: 20%; }
        .cart-item .productModel h3 { width: 100%; margin: 0 0 15px; padding: 0; }
        .cart-item .productModel p { width: 100%; margin: 0; padding: 0; }

    .cart-item .productDescription { width: calc(65% - 430px); align-items: flex-start; }

    .cart-item .productStockNumber { display: none; }
    .cart-item .productQuantity { width: 100px; }
        .cart-item .productQuantity label { width: 100%; }
        .cart-item .productQuantity select { width: 100%; padding: 10px; border: 1px solid #e1e1e1; cursor: pointer; }
            .cart-item .productQuantity select:hover { border: 1px solid #aaa; }
        .cart-item .productQuantity input { width:100%; }

    .cart-item .productPrice { width: 120px; text-align: right; justify-content: flex-end; }

    .cart-item .line-item-options { width: 60px; padding: 5px 0; text-align: center; justify-content: center; }
        .cart-item .line-item-options .delete .material-icons { color: #ccc; font-size: 38px; cursor: pointer; }
            .cart-item .line-item-options .delete .material-icons:hover { color: #f00; }

    .cart-item .cartMessage { width: 100%; padding: 0 5px; }

@media only screen and (max-width: 1024px) {
    .cart-item { border: none; margin-bottom: 20px; background-color: #eee; }
        .cart-item div { border-bottom: 1px solid #ccc; padding: 10px; }

        .cart-item .productModel { width: 30%; }
        .cart-item .productDescription { width: calc(70% - 150px); }

        .cart-item .productQuantity { width: calc(40% - 60px); border-bottom: 0; background-color: #f9f9f9; }
        .cart-item .productPrice { width: 60%; border-bottom: 0; background-color: #f9f9f9; }
        .cart-item .line-item-options { border-bottom: 0; background-color: #f9f9f9; }

        .cart-item .cartMessage { border: 0; }
}

@media only screen and (max-width: 768px) {
    .cart-item .productImage { border-bottom: 0; }
    .cart-item .productModel { width: calc(100% - 150px); border-bottom: 0; }
    .cart-item .productDescription { width: 100%; }

    .cart-item .productQuantity { width: 50%; }
    .cart-item .productPrice { width: calc(50% - 60px); }
}





/*Catalog Cart Price*/
.cart-price-info div form { display: flex; flex-direction: column; align-items: flex-end; }
    .cart-price-info div form label { margin: 10px; width: 35%; text-align: right; }
        .cart-price-info div form label:last-of-type { border-top: 1px solid #e1e1e1; padding: 10px 0; }

.cart-price-info ul { margin: 0; padding: 0; }

.discount-code { width: auto; }

    .discount-code .validation-summary-errors { text-align: right; }

    .discount-code .discount-entry { display: flex; flex-direction: column; align-items: flex-end; width: 100%; }
        .discount-code .discount-entry button { margin: 10px 0; }

@media only screen and (max-width: 768px) {
    .cart-price-info div form label { width: 100%; }
}







.purchaseAddress { display: flex; flex-direction: column; width: 100%; max-width: 1024px; margin: 0 auto; }
    .purchaseAddress .previousAddress,
    .purchaseAddress .newAddress { margin-bottom: 20px; }

        .purchaseAddress .previousAddress span { width: 100%; display: inline-block; margin: 10px 0 10px 25px; }

    .purchaseAddress label { display: block; width: 100%; margin-bottom: 20px; position: relative; }
    .purchaseAddress input[type=text],
    .purchaseAddress select { width: 100%; padding: 10px; }

    .purchaseAddress .sameAsBilling { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 20px; }
        .purchaseAddress .sameAsBilling label { width: auto; margin: 0; }
        .purchaseAddress .sameAsBilling input { width: 20px; height: 20px; }

    .purchaseAddress .navigation { width: 100%; text-align: center; }

    .purchaseAddress .field-validation-error { bottom: auto; top: -10px; }

    .purchaseAddress #newAddress { display: inline-block; }
        .purchaseAddress #newAddress + label { display: inline-block; width: auto; }
            .purchaseAddress #newAddress + label + div { display: none; }
        .purchaseAddress #newAddress:checked + label + div { display: block; }






.reviewPurchaseOrder { width: 100%; max-width: 1024px; margin: 0 auto; }
    .reviewPurchaseOrder h2 { width: 100%; }
    .reviewPurchaseOrder form,
    .reviewPurchaseOrder .orderDetails { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
    .reviewPurchaseOrder .shippingAddress,
    .reviewPurchaseOrder .billingAddress { width: 50%; }

    .reviewPurchaseOrder fieldset { padding: 10px 20px 15px; line-height: normal; margin-bottom: 20px; border: 1px solid #ccc; color: #333; width: 98%; margin: 20px auto; }
        .reviewPurchaseOrder fieldset legend { text-align: left; padding: 0 10px; font-weight: 500; color: #333; }


    .reviewPurchaseOrder .navigation { width: 100%; text-align: center; }

@media only screen and (max-width: 768px) {
    .reviewPurchaseOrder .shippingAddress,
    .reviewPurchaseOrder .billingAddress { width: 100%; }

    .reviewPurchaseOrder fieldset { margin-top: 0; }
}

.reviewPurchaseOrder .shippingAddress div,
.reviewPurchaseOrder .billingAddress div { width: 100%; margin: 3px 0; }

    .reviewPurchaseOrder .shippingAddress div:nth-of-type(1),
    .reviewPurchaseOrder .billingAddress div:nth-of-type(1) { margin-bottom: 10px; }

.reviewPurchaseOrder .purchasedProducts { width: 100%; }





.reviewPurchaseOrder .delivery-delay { display: block; width: 100%; text-align: center; color: #f00; padding: 10px; }





.reviewPurchaseOrder .productGrid { width: 100%; margin: 0 auto; }
    .reviewPurchaseOrder .productGrid table { width: 100%; margin: 9px 0 20px 0; border-bottom: 1px solid #ccc; }

        .reviewPurchaseOrder .productGrid table th { text-align: center; padding: 4px 10px; background-color: #333; color: #fff; border-right: 1px solid #5c5c5c; }
            .reviewPurchaseOrder .productGrid table th:nth-of-type(1) { border-right: none; width: 80px; }
            .reviewPurchaseOrder .productGrid table th:last-of-type { border-right: none; }
            .reviewPurchaseOrder .productGrid table th:nth-of-type(2) { text-align: left; }


        .reviewPurchaseOrder .productGrid table td { border-bottom: 1px solid #ccc; border-right: 1px solid #ddd; padding: 0 10px; text-align: center; vertical-align: middle; }
        .reviewPurchaseOrder .productGrid table tr:nth-of-type(odd) td { background-color: #eee; }

        .reviewPurchaseOrder .productGrid table td:nth-of-type(1) { /*display: flex;*/ border-right: 0; padding: 0;  }
            .reviewPurchaseOrder .productGrid table td:nth-of-type(1) img { width: 100%; max-width:80px }

        .reviewPurchaseOrder .productGrid table td p { display: none; margin: 0; padding: 0; }

        .reviewPurchaseOrder .productGrid table td:nth-of-type(2) { text-align: left; }
        .reviewPurchaseOrder .productGrid table td:last-of-type { text-align: right; border-right: 0; }


        .reviewPurchaseOrder .productGrid table tr:nth-of-type(odd) td { background-color: #eee; }
        .reviewPurchaseOrder .productGrid table tr:last-of-type td { border-bottom: none; }


@media only screen and (max-width: 768px) {
    .reviewPurchaseOrder .productGrid table tr { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 10px auto; }
    .reviewPurchaseOrder .productGrid table th { display: none; }
    .reviewPurchaseOrder .productGrid table td { display: flex; align-items: center; justify-content: space-between; width: 50%; height: auto; text-align: left; border-top: 1px solid #ddd; padding: 10px; }

        .reviewPurchaseOrder .productGrid table td p { display: inline-block; text-align: left; }
        .reviewPurchaseOrder .productGrid table td label { display: inline-block; text-align: right; }
            .reviewPurchaseOrder .productGrid table td label span { padding:0 10px; }
            .reviewPurchaseOrder .productGrid table td label:last-of-type span { padding:0; }

                .reviewPurchaseOrder .productGrid table td:nth-of-type(1) { border: none; width: 100%; padding: 10px; }
        .reviewPurchaseOrder .productGrid table td:nth-of-type(2) { width: 100%; }
            .reviewPurchaseOrder .productGrid table td:nth-of-type(2) label { margin: 0; text-align: left; }
        .reviewPurchaseOrder .productGrid table td:nth-of-type(even) { border-right: none; }

        .reviewPurchaseOrder .productGrid table td:nth-of-type(1) img { width: 75%; margin: 0 auto; }
}

@media only screen and (max-width: 600px) {
    .reviewPurchaseOrder .productGrid table td { width: 100%; border-right: 0; }
}


.reviewPurchaseOrder .review-total-payment { display: flex; justify-content: space-between; width: 100%; align-items: flex-start; flex-wrap: wrap; }
    .reviewPurchaseOrder .review-total-payment > div,
    .reviewPurchaseOrder .review-total-payment > form { width: 50%; display: flex; flex-direction: column; }

    .reviewPurchaseOrder .review-total-payment fieldset { margin-top: 0; }

    .reviewPurchaseOrder .review-total-payment .purchase-pricing { text-align: right; width: 280px; margin: 0 0 0 auto; }

        .reviewPurchaseOrder .review-total-payment .purchase-pricing #cif { padding: 0 30px; display:flex; flex-direction:column; }

        .reviewPurchaseOrder .review-total-payment .purchase-pricing fieldset { margin-top: 10px; }

        .reviewPurchaseOrder .review-total-payment .purchase-pricing label { width: 100%; margin: 5px 0; }


    .reviewPurchaseOrder .review-total-payment .purchase-method { width: 450px; }

        .reviewPurchaseOrder .review-total-payment .purchase-method .card-list-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 20px; margin-bottom: 10px; background: transparent url('../../components/ccimg.png') center center no-repeat; }

        .reviewPurchaseOrder .review-total-payment .purchase-method form > div { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; }
        .reviewPurchaseOrder .review-total-payment .purchase-method .cart-payment-field { width: 100%; max-width: 199px; }
            .reviewPurchaseOrder .review-total-payment .purchase-method .cart-payment-field.cart-payment-number { max-width: 100%; }


            .reviewPurchaseOrder .review-total-payment .purchase-method .cart-payment-field.cart-expiration-month,
            .reviewPurchaseOrder .review-total-payment .purchase-method .cart-payment-field.cart-expiration-year,
            .reviewPurchaseOrder .review-total-payment .purchase-method .cart-payment-field.cart-expiration-security-code { width: 33.333%; }

                .reviewPurchaseOrder .review-total-payment .purchase-method .cart-payment-field.cart-expiration-security-code a { position: absolute; left: 45px; top: 0; width: 15px; height: 15px; font-size: 10px; opacity: 0.5; display: flex; justify-content: center; align-content: center; text-decoration: none; color: #000; border: 1px solid #000; background-color: #fff; border-radius: 50px; }
                    .reviewPurchaseOrder .review-total-payment .purchase-method .cart-payment-field.cart-expiration-security-code a:hover { opacity: 1; background-color: #000; color: #fff; }

            .reviewPurchaseOrder .review-total-payment .purchase-method .cart-payment-field.ordermemo { max-width: 100%; }

            .reviewPurchaseOrder .review-total-payment .purchase-method .cart-payment-field + .btn { display: block; margin: 10px auto; }



@media only screen and (max-width: 900px) {
    .reviewPurchaseOrder .review-total-payment .purchase-method { width: 100%; }
}

@media only screen and (max-width: 768px) {    
        .reviewPurchaseOrder .review-total-payment .purchase-method .cart-payment-field,
        .reviewPurchaseOrder .review-total-payment .purchase-method .cart-payment-field.cart-expiration-month,
        .reviewPurchaseOrder .review-total-payment .purchase-method .cart-payment-field.cart-expiration-year,
        .reviewPurchaseOrder .review-total-payment .purchase-method .cart-payment-field.cart-expiration-security-code { max-width: 100%; width: 100%; }
}




.reviewPurchaseOrder .purchase-without-payment-btn { width: 100%; text-align: right; position: relative; top: 290px; right: 20px; }



.receipt .receiptMsg { width: 100%; text-align: left; margin: 5px 0; }
.receipt .orderEmail { width: 100%; text-align: center; margin: 5px 0; }
.receipt .odrderDate { width: 100%; text-align: center; margin: 5px 0; }









.addon-options { display: flex; flex-direction: column; width: 100%; max-width: 1024px; margin: 0 auto; }
.addon-list { padding: 5px; width: 100%; }

.addon-options .addon-item { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 10px; width: 100%; margin-bottom: 30px; }


.addon-options .addon-description { width: 100%; }
.addon-options .addon-price { font-weight: bold; margin: 10px 0; }

.addon-options .addon-elements { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; width: 100%; }

.addon-options .addon-input { width:50%; max-width: 450px; position:relative; }
    .addon-options .addon-input textarea { width: 100%; min-height: 200px; padding: 10px; }

.addon-options .addon-images { display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; padding: 0 10px; position:relative; }
    .addon-options .addon-images .field-validation-error { right:auto; bottom:auto; top:0; }

    .addon-options .addon-images input { margin-top: 5px; width: 180px; }
    .addon-options .addon-images div { width: 100%; max-width: 180px; height: 200px; margin-bottom: 10px; position: relative; overflow: auto; display: flex; justify-content: center; align-items: center; background-color: #eee; padding: 10px; border-radius: 10px; }
        .addon-options .addon-images div:before { content:"Your Image"; display:block; position:absolute; opacity:0.3; }
        .addon-options .addon-images img { width: 100%; margin: 10px auto; border-radius: 10px; }

.addon-options .addon-navigation { width: 100%; text-align: center; }
    .addon-options .addon-navigation .btn { margin: 10px; }

@media only screen and (max-width: 768px) {
    .addon-options .addon-input,
    .addon-options .addon-images { width: 100%; }

    td.addon-grid { display:none !important; }
        td.addon-grid + td { width:100% !important; }
}







.cart-item.addon-item { width: 100%; max-width: 650px; margin: 0 0 5px auto; opacity: 0.8; }


.check-out-addon-title { width: 100%; text-align: right; }