@font-face {
    font-family: "Roobert Regular";
    src: url("/Styles/fonts/Roobert-Regular.woff");
}

@font-face {
    font-family: "Roobert Bold";
    src: url("/Styles/fonts/Roobert-Bold.woff");
}

@font-face {
    font-family: "Roobert SemiBold";
    src: url("/Styles/fonts/Roobert-SemiBold.woff");
}

:root {
    --lightblue: #0086ea;
    --btnhoverblue: #1C0087;
    --red: #EE282A;
}

img {
    max-width: 100%;
}

body {
    padding-top: 90px;
}

.validation, .error {
    color: #ff0000;
    display: inline-block;
    font-size: 12px;
    margin: 10px;
}

body div.uwy.userway_p1 .userway_buttons_wrapper {
    top: auto;
    bottom: 13px;
}


/*New Buttons*/

a.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
    background: #BFE1FA;
    color: var(--lightblue);
    font-weight: 700;
    border-radius: 30px;
}

    a.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
        background: var(--lightblue);
        color: white;
    }



    a.button.red {
        color: white;
        background: #de2330;
    }

        a.button.red:hover {
            background: #de2330;
        }




/*Login Page*/
body.loginpage {
    background-image: url(/images/login-background.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding-top: 45px;
    height: 92vh;
}

.logincontainer {
    width: 375px;
    background: white;
    margin: 0 auto;
    padding: 30px;
}

.sso {
    padding: 30px;
    padding-bottom: 0px;
}

.guest {
    padding-top: 10px;
    padding-bottom: 26px;
}


div.login a.button {
    min-width: 185px;
}

table.login.showLogin {
    display: flex;
    justify-content: center;
}



table.login {
    /*margin-top: 100px;*/
    display: none;
}

div.login img {
    width: 255px;
    margin-top: 30px;
}

div.login p {
    font-family: "Roobert Regular";
    color: var(--lightblue);
}

table.login {
    margin: 0 auto;
}

    table.login span.status {
        display: block;
    }

    table.login a {
        font-family: "Roobert Regular";
        color: rgba(0, 0, 0, 0.5);
    }

    table.login td.bottom a {
        color: var(--lightblue);
    }

h1.login-header {
    font-size: 22px;
    font-family: "Roobert Bold";
}


table.login .formElement label {
    font-family: "Roobert Regular";
    font-size: 14px;
}



/*Account Overview*/


h1.account {
    text-align: center;
    font-family: 'Roobert Bold';
}

.accountheader {
    text-align: center;
    padding-bottom: 20px;
}

    .accountheader a {
        font-family: "Roobert Regular";
        padding: 20px;
    }

table.accountform {
    margin: 0 auto;
}

    table.accountform .buttons {
        text-align: center;
    }


/*Order History*/

/*Order History */
table.orders th {
    background-color: #ffffff;
    font-weight: bold;
    color: #000000;
    font-size: 16px;
    border: 1px solid #000000;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    vertical-align: middle;
    height: 40px;
    font-family: 'Roobert Regular';
}

table.orders td {
    vertical-align: middle;
    border: 1px solid #000000;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    height: 40px;
    font-family: 'Roobert Regular';
}

table.orders tr:nth-child(2n+1) td {
    background-color: #dedede;
    font-family: 'Roobert Regular';
}

table.orders div.orderview {
    display: none;
    position: fixed;
    background-color: #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 25px;
    border: 1px solid #888888;
    z-index: 150;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.5);
    font-family: 'Roobert Regular';
}

table.orders {
    margin: 0 auto;
    margin-bottom: 5%;
}

    table.orders div.orderview.visible {
        display: block;
    }

    table.orders div.orderview a.close {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #d7d7d7;
        margin-left: 5px;
        margin-top: 0px;
        line-height: 24px;
        font-size: 24px;
        cursor: pointer;
        text-decoration: none;
    }

    table.orders h3 {
        text-align: center;
        font-size: 22px;
        font-family: "Roobert Bold";
    }



/*Header*/
div.fixedheader {
    position: fixed;
    top: 0px;
    height: 90px;
    width: 100%;
    background-color: #ffffff;
    z-index: 3000;
}


.header-left a.logo img {
    padding-left: 30px;
    padding-top: 10px;
    max-height: 40px;
}



.header-right span {
    color: var(--lightblue);
    margin-top: -4px;
    font-size: 32px;
}

.menu {
    display: flex;
}

.mobile-searchImage {
    display: none;
}

.search input {
    border: 1px solid white;
    /*-webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;*/
    width: 32px;
    font-size: 0px;
    color: #1c0087;
    text-indent: 2px;
    border-radius: 0px;
    vertical-align: bottom;
    cursor: pointer;
}

.search img[src*="magnifying-glass-solid-full.svg"] {
    filter: grayscale(100%) brightness(50%);
    width: 20px;
}



::placeholder {
    font-family: "Roobert Regular";
}

/*SAYT*/
li.sayt-product-content span.sayt-content {
    cursor: pointer;
    display: inline-block;
    margin-top: 10px;
}

li.sayt-product-content img {
    max-width: 40px;
    float: left;
    margin-right: 10px;
}

span.ui-product-header {
    border-bottom: 1px solid #00385a;
    display: block;
    margin-left: 25px;
    margin-right: 25px;
    font-weight: bold;
    line-height: 26px;
}

ul.ui-menu li.ui-menu-item:first-child span.sayt-content {
    color: #185c92;
    font-size: 18px;
    margin-top: 10px;
    cursor: pointer;
}

ul.ui-menu li.ui-menu-item {
    margin-left: 15px;
    margin-right: 15px;
    text-align: left;
    clear: left;
    margin-bottom: 8px;
}

    ul.ui-menu li.ui-menu-item a {
        cursor: pointer;
    }

span.ui-helper-hidden-accessible {
    display: none;
}

ul.ui-menu {
    background-color: #ffffff;
    position: absolute !important;
    padding-top: 10px;
    border: 1px solid #00385a;
}



.menu a {
    text-decoration: none;
}

div.account {
    padding: 0px 5px;
}

.menu a p {
    text-decoration: none;
    font-family: "Roobert Regular";
    font-size: 12px;
    display: grid;
    text-align: center;
    display: none;
}

.menu a p {
    display: none; /* Initially hide the <p> tags */
    position: absolute; /* Position them above the images */
    top: -30px; /* Adjust this value to position the text above the image */
    left: 50%; /* Center the text horizontally */
    transform: translateX(-50%); /* Center alignment */
    color: #6F6F6F; /* Set the text color */
    font-size: 12px; /* Adjust font size as needed */
    white-space: nowrap; /* Prevent text wrapping */
}

.menu a {
    position: relative; /* Ensure the <a> tag is the positioning context for the <p> tag */
}

    .menu a:hover p {
        display: block; /* Show the <p> tag when the user hovers over the <a> tag */
    }


.menu > div {
    padding: 0px 5px;
}





/*header New Updates*/
/* Header Grid Layout */
.header-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Left, Middle, Right */
    align-items: center;
    padding: 12px 20px;
    border-bottom: 3px solid transparent; /* Set a transparent border to define the space */
    border-image: linear-gradient(90deg, #1B0088 0.37%, #F0241F 20.37%, #F0241F 40.37%, #1C0087 50.37%, #0082EC 60.37%, #0082EC 80.37%, #1B0088 100.37%);
    border-image-slice: 1; /* Ensure the gradient fills the border */
}

/* Left Section: Logo */
.header-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

    .header-left a.logo img {
        max-height: 50px;
        padding-left: 0px;
    }

/* Middle Section: Search Bar */
.header-middle {
    display: flex;
    justify-content: center;
    align-items: center;
}

.search {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    .search form {
        width: 100%;
        max-width: 400px;
    }

.header-middle input[type="search"] {
    width: 100%;
    padding: 10px;
    border: NONE;
    border-radius: 20px;
    font-size: 16px;
    background: #F1F1F1;
    font-size: 16px;
}

/* Search Container */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

    .search-container input[type="search"] {
        width: 100%;
        padding: 10px 40px 10px 10px; /* Add padding to the right for the icon */
    }

    .search-container .search-icon {
        position: absolute;
        right: 0px;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 18px;
        display: flex;
        margin-bottom: 0px;
        align-items: center;
        justify-content: center;
    }

    .search-icon img {
        width: 22px;
    }

        .search-container .search-icon:hover {
            color: #1C0087; /* Adjust hover color as needed */
        }

/* Right Section: Icons */
.header-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.menu p {
    color: #6f6f6f;
}

.header-right .menu {
    display: flex;
    gap: 15px;
}

    .header-right .menu div {
        text-align: center;
    }

    .header-right .menu img {
        max-height: 20px;
    }

/* Main Menu Styling */
.mainmenu {
    background-color: #BFE1FA; /* Set background color */
    position: relative; /* Ensure it stays within the header */
    width: 100%; /* Full width */
    padding: 20px 0; /* Add padding for spacing */
}

    .mainmenu .navigation {
        display: flex; /* Arrange items horizontally */
        justify-content: center; /* Center the navigation items */
        list-style: none; /* Remove default list styling */
        margin: 0; /* Remove default margin */
        padding: 0; /* Remove default padding */
    }

        .mainmenu .navigation li {
            margin: 0 15px; /* Add spacing between list items */
        }

        .mainmenu .navigation a {
            text-decoration: none; /* Remove underline */
            color: #000000; /* Default text color */
            font-family: "Roobert Regular"; /* Use the Roobert font */
            font-size: 16px; /* Adjust font size */
            transition: color 0.3s, text-decoration-color 0.3s; /* Smooth hover effect */
            position: relative;
        }

            .mainmenu .navigation a::after {
                content: ""; /* Create the pseudo-element */
                position: absolute;
                left: 0;
                bottom: -8px; /* Adjust the distance from the text */
                width: 0; /* Start with no width */
                height: 3px; /* Set the thickness of the underline */
                background-color: #0086EA; /* Set the underline color */
                transition: width 0.3s ease; /* Add a smooth animation */
            }

            .mainmenu .navigation a:hover::after {
                width: 100%; /* Expand the underline on hover */
            }


/*Home Page Banner*/

.banner-rotator {
    position: relative;
}

    .banner-rotator a.left,
    .banner-rotator a.right,
    .banner-rotator .buttonA {
        display: block;
        position: absolute;
        transform: translate(0,-50%);
        /*background-color: rgba(0,0,0,0.19);*/
        width: 60px;
        height: 100px;
        top: 50%;
        cursor: pointer;
        color: white;
        line-height: 100px;
        font-size: 50px;
        text-align: center;
        z-index: 400;
    }

    .banner-rotator a.left {
        left: 0px;
    }

    .banner-rotator a.right {
        right: 0px;
    }


.hero-slider .slider-content {
    position: absolute;
}

    .hero-slider .slider-content.new {
        right: 20%;
        top: 35%;
    }

        .hero-slider .slider-content.new p {
            color: white;
            font-family: "Roobert Regular";
            font-size: 30px;
            font-weight: 100;
        }

        .hero-slider .slider-content.new span {
            color: red;
        }

.slider-content.choose ul {
    list-style-type: disc;
    padding-left: 50px;
}

.slider-content.choose {
    top: 9%;
    left: 59%;
}

    .slider-content.choose.low h2 {
        margin-bottom: 12px;
    }

    .slider-content.choose.low p {
        color: #fff;
        width: 60%;
        font-size: 28px;
        font-weight: 400;
        font-family: "Roobert Regular";
    }

        .slider-content.choose.low p span {
            color: red
        }

        .slider-content.choose.low p span {
            ont-weight: bold;
            font-family: "Roobert Bold";
        }

.white-hero {
    color: #fff;
    font-size: 31px;
    line-height: 30px;
    padding-bottom: 14px;
}

a#diff-btn {
    /* top: 0; */
    background-color: #ed2b2c;
    padding: 20px 20px;
    border-radius: 50px;
}

.choose h2 {
    color: #fff;
    font-size: 50px;
}

.choose ul li {
    color: #fff;
    font-size: 42px;
    line-height: 48px;
    padding-bottom: 10px;
}

.choose a.bannerbtn {
    background: var(--lightblue);
    text-decoration: none;
    padding: 37px 45px;
    font-family: 'Roobert Regular';
    color: white;
    font-size: 25px;
    height: 0;
    line-height: 0;
    width: 154px;
    transform: none;
    margin-top: 25%;
}

/*Banner Content*/

.slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
    z-index: 400;
    bottom: 25px;
    text-align: center;
}

    .slider-dots span {
        color: #dadada;
        margin: 0px 3px;
    }

        .slider-dots span:hover {
            cursor: pointer;
        }

.desktop-image {
    width: 100%;
}

.mobile-image {
    display: none;
}

.gptw-banner {
    top: 15%;
    left: 10%;
    text-align: left;
    transform: unset;
}

    .gptw-banner h2, .gptw-banner p {
        color: var(--lightblue);
    }

    .gptw-banner .button {
        margin-top: 10px;
        width: 100px;
    }

.gear {
    top: 25%;
    left: 73%;
    text-align: left;
    transform: translate(-50%);
}

p.plans {
    font-size: 14px;
    width: 95%;
}

.holiday {
    top: 19%;
    left: 53%;
    text-align: left;
    transform: none;
}

a.bannerbtn.buttonA {
    margin-left: 0px;
}

.gear h2,
.holiday h2 {
    font-size: 52px;
    font-family: "Roobert Bold";
    color: white;
    margin-bottom: 12px;
}

.gear p,
.holiday p {
    font-family: "Roobert Regular";
    margin-bottom: 12px;
    color: white;
}

.gear a.bannerbtn,
.holiday a.banner-rotator,
.popup a.bannerbtn,
.great a.bannerbtn {
    background: var(--lightblue);
    text-decoration: none;
    padding: 25px 65px;
    font-family: 'Roobert Regular';
    color: white;
    font-size: 16px;
    position: unset;
    height: 0;
    line-height: 0;
    width: 100px;
    transform: none;
    margin: 0 auto;
}

.gear a.bannerbtn {
    margin-left: 0px;
    margin-bottom: 10px;
}

#naicBtn {
    margin-top: 25px;
}

.gear a.bannerbtn:hover,
.popup a.bannerbtn:hover,
.great a.bannerbtn:hover {
    background: var(--btnhoverblue);
    cursor: pointer;
}

.popup {
    top: 28%;
    left: 22%;
    text-align: center;
}

    .popup h2 {
        font-family: 'Roobert Bold';
        margin-bottom: 10px;
        font-size: 56px;
        color: white;
        text-align: left;
    }

    .popup h3 {
        font-family: 'Roobert Bold';
        margin-bottom: 10px;
        font-size: 34px;
        color: white;
    }

    .popup p {
        color: white;
        font-size: 24px;
        font-family: 'Roobert Regular';
    }

.great {
    top: 16%;
    left: 5%;
    text-align: center;
}

    .great h2 {
        font-family: "Roobert Bold";
        font-size: 56px;
        color: var(--lightblue);
        margin-bottom: 10px;
    }

    .great p {
        font-family: 'Roobert Regular';
        font-size: 20px;
        color: var(--lightblue);
    }

.bulk {
    top: 13%;
    left: 42%;
    text-align: center;
}

    .bulk h2 {
        font-family: "Roobert Bold";
        color: white;
        font-size: 38px;
        margin-bottom: 20px;
    }

    .bulk p,
    .ann p {
        font-family: "Roobert Regular";
        color: white;
        font-size: 22px;
    }

    .bulk a.bannerbtnWhite {
        background: var(--lightblue);
        text-decoration: none;
        padding: 25px 65px;
        font-family: 'Roobert Regular';
        color: white;
        font-size: 13px;
        position: unset;
        height: 0;
        line-height: 0;
        width: 100px;
        transform: none;
        margin: 0 auto;
        border: 1px solid white;
    }

        .bulk a.bannerbtnWhite:hover {
            cursor: pointer;
            background: var(--btnhoverblue);
            border: 1px solid var(--btnhoverblue);
        }

.ann h2 {
    font-family: "Roobert Bold";
    font-size: 46px;
    color: white;
    margin-bottom: 10px;
}

.ann {
    top: 9%;
    left: 8%
}




.banner-rotator .hero-slider {
    display: none;
    max-width: 100%;
    position: relative;
}

    .banner-rotator .hero-slider.visible {
        display: block;
    }

.banner-rotator {
    margin-top: 50px;
}

.hero-slider img {
    width: 100%;
}


/*New Updated Hero Styling*/
.hero-text {
    position: absolute; /* Allows precise positioning */
    top: 50%; /* Vertically center the text */
    transform: translateY(-50%); /* Adjust for perfect vertical centering */
    text-align: left; /* Ensure the text is left-aligned */
    font-family: "Roobert Regular"; /* Use the desired font */
    line-height: 1.5; /* Adjust line height for readability */
    display: flex;
    flex-direction: column;
}

    .hero-text.hero-left {
        font-weight: 700;
        color: white; /* Adjust text color as needed */
        left: 15%; /* Position the text 15% from the left */
    }

    .hero-text h2 {
        font-size: 40px;
    }

    .hero-text a.button {
        max-width: 150px;
        text-transform: uppercase;
    }

    .hero-text.hero-left h2 {
        font-weight: 700;
        line-height: 1;
    }

    .hero-text h2 span {
        font-size: 24px;
    }

    .hero-text.hero-right {
        left: unset;
        right: 15%;
    }

        .hero-text.hero-right.hero-choose {
            right: 10%;
        }

    .hero-text.hero-holiday p,
    .hero-text.hero-new-products p {
        font-size: 24px;
        color: white;
        margin-bottom: 2rem;
    }

        .hero-text.hero-holiday p span,
        .hero-text.hero-new-products span {
            color: var(--red);
        }

    .hero-text.hero-new-products a.button {
        background: var(--red);
        color: white;
    }

    .hero-text.hero-tech h3 {
        font-size: 30px;
        color: var(--red);
    }

    .hero-text.hero-tech span {
        color: white;
    }

    .hero-text.hero-choose h2 {
        font-size: 34px;
        font-weight: 700;
        color: white;
    }

    .hero-text.hero-choose ul {
        list-style: disc;
    }

        .hero-text.hero-choose ul li {
            color: white;
            font-size: 32px;
        }
/*Featured Items*/
.featured {
    display: none;
}

    .featured h3 {
        font-family: "Roobert SemiBold";
        font-size: 28px;
        padding-left: 15px;
    }

.slider-wrapper, .related .category {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

    .slider-wrapper .product,
    .related .category .product {
        display: inline-block;
        padding: 0px 20px;
    }

        .slider-wrapper .product .image,
        .related .category .product .image {
            text-align: center;
        }

        .slider-wrapper .product img,
        .related .category .product img {
            width: 200px;
        }

        .slider-wrapper .product .details,
        .related .cateogry .product .details {
            /*border: 1px solid black;*/
            white-space: initial;
            width: 185px;
        }

            .slider-wrapper .product .details p.name a,
            .related .category .product .details p.name a {
                text-decoration: none;
                color: black;
                font-family: "Roobert SemiBold";
                font-size: 18px;
            }

            .slider-wrapper .product .details p.price,
            .related .category .product .details p.price {
                color: black;
                font-family: "Roobert Bold";
                font-size: 16px;
                padding-left: 0px;
                margin-top: 5px;
            }
    /*Scroll Bar*/
    .slider-wrapper::-webkit-scrollbar,
    .related .category::-webkit-scrollbar {
        width: 5px;
        height: 8px;
        background-color: white;
    }

    .slider-wrapper::-webkit-scrollbar-thumb,
    .related .category::-webkit-scrollbar-thumb {
        background: #aaa;
    }



/*Featured Categories*/




.featured-cat h2 {
    font-family: "Roobert Regular";
    font-size: 42px;
    text-align: center;
    margin-top: 1rem;
    color: var(--lightblue);
}

    .featured-cat h2 span {
        font-family: "Roobert SemiBold";
    }


.featured-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 items per row */
    gap: 10px; /* Space between items */
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

.featured-cat-item {
    position: relative;
    overflow: hidden;
}

    .featured-cat-item img {
        width: 100%;
        height: auto;
        display: block;
        transition: opacity 0.3s ease-in-out; /* Smooth transition for hover effect */
    }

    .featured-cat-item .hover-image {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0; /* Initially hidden */
    }

    .featured-cat-item:hover .hover-image {
        opacity: 1; /* Show hover image on hover */
    }

    .featured-cat-item:hover .default-image {
        opacity: 0; /* Hide default image on hover */
    }






/*Contact Form Modal*/


div.contact-modal,
.custom-order-form {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 64, 234, 0.8); /* #0086EA with opacity */
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    overflow-y: auto;
    z-index: 9999; /* Ensure it appears above all other elements */
    display: none; /* Initially hidden */
}

span.close-modal,
span.close-custom-modal {
    font-size: 35px;
    color: white;
    width: 100%;
    display: block;
    text-align: right;
}

    span.close-modal:hover,
    span.close-custom-modal {
        cursor: pointer;
    }

        span.close-modal img,
        span.close-custom-modal img {
            background: #BFE1FA;
            padding: 10px;
            border-radius: 50%;
        }

.contact-modal .formElement textarea {
    height: 100px;
    font-family: "Roobert Regular";
}



.contact-modal .modal-content,
.custom-order-form .custom-modal {
    width: 50%; /* Form content width */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    color: white;
    margin-top: 5%;
    font-family: "Roobert Regular";
}

    .contact-modal .modal-content h2,
    .custom-order-form .custom-modal h2 {
        font-size: 24px;
        margin-bottom: 20px;
        font-weight: 700;
        font-size: 45px;
        text-align: left;
        color: white;
    }

    .contact-modal .modal-content p,
    .custom-order-form .custom-modal p {
        font-size: 20px;
        text-align: left;
        margin-bottom: 20px;
        color: white;
    }

    .contact-modal .modal-content .formElement {
        margin-bottom: 15px;
    }

.contact-div {
    background-image: url(/images/1216-Replacecustombannerv1.png);
    background-size: cover;
    background-position: center;
    height: 750px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20%;
    color: var(--lightblue);
    font-family: "Roobert Regular";
}

.contact-content {
    max-width: 400px;
}

    .contact-content h4 {
        font-size: 45px;
        margin-bottom: 20px;
    }

        .contact-content h4 span {
            font-weight: 700;
        }





.contact-modal .modal-content .formElement input,
.contact-modal .modal-content .formElement textarea,
.custom-order-form .custom-modal .formElement input,
.custom-order-form .custom-modal .formElement textarea {
    border-radius: 20px;
    height: 55px
}


.bottom-contact,
.bottom-custom {
    display: flex;
    justify-content: space-between;
}

.custom-open-btn {
    cursor: pointer;
}




.custom-order-form .custom-modal .formElement {
    margin-bottom: 15px;
}



    .custom-order-form .custom-modal .formElement textarea {
        height: 100px;
    }




.success-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    font-size: 46px;
    font-weight: 700;
    z-index: 1000; /* Ensure it appears above other elements */
}



/*Cookies Bar*/
.cookies-bar {
    /*padding: 20px 10px;*/
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    background: var(--lightblue);
    display: none;
    position: fixed;
    bottom: 0;
    z-index: 1200;
}

.cookies.bar.visible {
    display: block;
}


.cookies-bar p {
    color: white;
    font-family: "Roobert Regular";
    font-size: 12px;
}

.cookiebtns {
    display: flex;
}

    .cookiebtns a {
        text-decoration: none;
        padding: 10px 40px;
        font-family: "Roobert Regular";
        font-size: 12px;
    }

        .cookiebtns a:hover {
            cursor: pointer;
        }

a.pref {
    border: 1px solid white;
    color: white;
    background: var(--lightblue);
    margin-right: 12px;
}

a.accept {
    border: 1px solid white;
    color: var(--lightblue);
    background: white;
}

/*Last Chance AD*/

.lastchance {
    position: relative;
    background-image: url(/images/lastchancead-desktop-01.jpg);
    height: 400px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.lastChanceContent {
    position: absolute;
    right: 125px;
    top: 60px;
}

    .lastChanceContent h2 {
        color: var(--lightblue);
        font-family: "Roobert Bold";
        margin-bottom: 20px;
        font-size: 34px;
    }

    .lastChanceContent p {
        font-family: "Roobert Regular";
        color: rgba(0, 0, 0, 0.5);
        margin-bottom: 30px;
    }

        .lastChanceContent p a {
            text-decoration: underline;
            color: rgba(0, 0, 0, 0.5);
        }

    .lastChanceContent a.explorebtn {
        background: var(--lightblue);
        text-decoration: none;
        padding: 10px 65px;
        font-family: 'Roobert Regular';
        color: white;
    }

        .lastChanceContent a.explorebtn:hover {
            cursor: pointer;
            background: var(--btnhoverblue);
        }
/*Footer*/

div.footer {
    clear: both;
    background: var(--btnhoverblue);
}

.custom-hero {
    position: relative;
    background-image: url(/images/custom-hero.jpg);
    height: 150px;
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
    clear: both;
}

.contactusdiv {
    margin-top: 36px;
    text-align: center;
}

.contactusbtn {
    background: var(--lightblue);
    text-decoration: none;
    padding: 15px 35px;
    font-family: 'Roobert Regular';
    color: white;
    font-size: 16px;
    position: unset;
    height: 0;
    line-height: 0;
    width: 100px;
    transform: none;
    margin: 0 auto;
}

    .contactusbtn:hover {
        background: var(--btnhoverblue);
    }



.custom-hero h2 {
    font-size: 28px;
    text-align: center;
    color: white;
    padding-top: 20px;
    font-family: "Roobert Bold";
    margin-bottom: 10px;
    font-family: 24px;
}

.custom-hero p {
    text-align: center;
    color: white;
    font-size: 15px;
    font-family: "Roobert Regular";
    margin-bottom: 20px;
}

.custom-form-content .formElement label {
    color: #8e8e93;
    font-family: "Roobert Regular";
    font-weight: 100;
}

.bottom-container {
    display: grid;
    text-align: center;
}

.custom-form-content .comments textarea {
    font-family: "Roobert Regular";
}

a.customsubmitBTN {
    width: 259px;
    margin: 0 auto;
    margin-top: 10px;
    background: var(--lightblue);
    color: white;
    font-family: "Roobert Regular";
}

    a.customsubmitBTN:hover {
        background: var(--btnhoverblue);
        cursor: pointer;
    }

.middle-footer {
    padding: 30px;
    min-height: 200px;
    padding-top: 60px;
}

.middle-one {
    margin-top: 30px
}

.middle-footer .titlep {
    font-family: "Roobert Bold";
    color: white;
    text-transform: uppercase;
    font-size: 16px;
    padding: 0px;
}

.middle-footer span, .whoDiv span {
    display: flex;
    padding: 5px 0px;
}

.middle-footer svg,
.middle-footer p {
    color: white;
}

.middle-footer p {
    font-family: "Roobert Regular";
    color: white;
    padding: 0px 4px;
    font-size: 13px;
}

.middle-footer a {
    font-family: "Roobert Regular";
    color: white;
    padding: 0px 4px;
    font-size: 13px;
    text-decoration: none;
}

    .middle-footer a:hover {
        cursor: pointer;
        color: white;
    }

.whoDiv span {
    padding: 5px 0px;
}

.whoDiv a {
    text-decoration: none;
    color: white;
    font-size: 13px;
    display: flex;
    font-family: "Roobert Regular";
}

    .whoDiv a:hover,
    .first-half a:hover {
        cursor: pointer;
    }

.middle-footer ul.navigation li {
    float: left;
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

    .middle-footer ul.navigation li a {
        text-decoration: none;
        color: white;
        font-size: 13px;
        font-family: "Roobert Regular";
        padding: 0px;
    }

.bottom-footer {
    padding: 10px 0px;
    background: white;
    text-align: center
}


.first half svg {
    color: var(--lightblue);
}

.first-half a {
    padding: 0px 5px;
    text-decoration: none;
    color: var(--lightblue);
    font-family: "Roobert Regular";
}

.icons a {
    font-size: 20px;
}

.text a {
    font-size: 13px;
}

.first-half, .madewithlove {
    margin: 15px 0px;
}

    .first-half .text a {
        display: inline;
        padding: 0 10px;
        border-left: 1px solid var(--lightblue);
    }

        .first-half .text a:first-child {
            border-left: none;
        }




/*Co Brand Page*/

.cobrand-mobile-slider {
    display: flex
}

    .cobrand-mobile-slider a {
        display: none;
    }

.cobrand-banner {
    position: relative;
    background-image: url(/images/login-background.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 410px;
}

.cobrand-banner-content {
    position: absolute;
    top: 60px;
    left: 60px;
}

    .cobrand-banner-content h2 {
        font-family: "Roobert Bold";
        color: white;
        font-size: 92px;
        margin-bottom: 15px;
    }

    .cobrand-banner-content p {
        font-family: "Roobert Regular";
        color: white;
        font-size: 24px;
    }

.cobannerbtn {
    background: var(--lightblue);
    text-decoration: none;
    padding: 12px 65px;
    font-family: 'Roobert Regular';
    color: white;
    font-size: 16px;
    margin: 0 auto;
}

    .cobannerbtn:hover {
        cursor: pointer;
        background: var(--btnhoverblue);
        color: white;
    }

.cobrand-nav {
    padding: 15px;
    min-height: 30px;
}

.nav-wrapper {
    display: flex;
}

.cobrand-nav a,
.cobrand-nav p {
    text-decoration: none;
    font-size: 16px;
    font-family: "Roobert Regular";
    color: rgba(0, 0, 0, 0.75);
}

.cobrand-nav span {
    color: rgba(0, 0, 0, 0.75);
    padding: 0px 5px;
}

.cobrand-partners h1 {
    color: black;
    font-family: 'Roobert SemiBold';
    font-size: 34px;
    padding: 10px 40px;
    margin-bottom: 10px;
    margin-top: 30px;
}

.cobrand-icons {
    display: flex;
    margin-bottom: 60px;
}

.cobrand-icon img {
    width: 150px;
    border: 1px solid #dadada;
}

.cobrand-icon {
    text-align: center;
    padding: 0px 20px;
}

    .cobrand-icon p {
        font-family: "Roobert Regular";
        font-size: 12px;
        color: black;
    }



/*ERG CAT*/


.erg-hero {
    margin-top: 20px;
}

img.erg-mobile {
    display: none;
}
/*Category*/



/*Filters*/

.slider-nav {
    background: #F1F1F1;
    padding-top: 40%;
    padding-left: 10%;
}

    .slider-nav p {
        color: black;
        text-transform: uppercase;
        margin-bottom: 30px;
        font-weight: 700;
        font-family: 'Roobert Regular';
    }

li.subnav::marker,
li::marker{
    display: none;
    color: #f1f1f1;
}




    .slider-nav div.subnav li {
        display: flex;
        position: relative;
        padding-right: 0px;
        padding-left: 0px;
        cursor: pointer;
    }

.slider-nav li.subnav > a {
    margin-bottom: 10px;
    font-weight: 700;
    font-family: 'Roobert Regular';
}


.slider-nav li a {
    display: flex;
    color: black;
    position: relative;
    min-width: 135px;
    text-decoration: none;
    font-family: 'Roobert Regular';
}


    .slider-nav div.subnav li a {
        text-decoration: none;
        position: relative;
        justify-content: space-around;
        display: flex;
    }
.slider-nav div.subnav li a:hover {
    color: black;
}

    .slider-nav div.subnav li a::after {
        content: "";
        display: block;
        background: #ffffff;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        margin-top: 3px;
        margin-right: 3px;
        border: 1px solid #AEAEAE;
        position: absolute;
        left: 0;
    }



.slider-nav div.subnav li a.selected::after {
    background: #AEAEAE;
}

.slider-nav li.subnav > a::after {
    content: ""
}

.range-wrapper {
    display: block;
    padding-left: 0px;
    max-width: 75%;
    margin-top: 10%;
}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}

.range-wrapper .ui-slider .ui-slider-handle {
    cursor: pointer;
    border-radius: 20px;
}

.ui-state-active, .ui-widget-content .ui-state-active {
    background: #BFE1FA
}


.cat-filter-wrap {
    display: grid;
    grid-template-columns: 250px 1fr 1fr 1fr;
}

.cat-wrapper {
    display: grid;
    grid-column: span 3;
}



div.category {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 95%;
    margin: 0 auto;
    padding-bottom: 30px;
    grid-column: span 3;
}

    div.category .product {
        width: 100%;
        grid-column: span 1;
        text-align: center;
    }

div.pageddl select {
    display: none;
}


.prodcrumbs {
    padding: 30px 40px;
    margin-top: 50px;
    color: rgba(0,0,0,.75);
}

    .prodcrumbs a {
        text-decoration: none;
        font-family: "Roobert Regular";
    }

div.catheader {
    border-bottom: 12px solid transparent;
    border-image: linear-gradient(45deg, #ed2b2c, #2C2B7C, #3B80C2);
    border-image-slice: 1;
}

    div.catheader h1 {
        display: none;
    }

div.pageddl label {
    display: none;
}

div.pageddl {
    padding: 0px 40px;
}

    div.pageddl select {
        width: 250px;
    }

.category .product .details {
    display: flex;
    flex-direction: column;
}

.category .product .imagediv a {
    position: relative;
}

.category .product .details p.name a {
    text-decoration: none;
    color: black;
    font-family: "Roobert Regular";
    font-weight: 700;
    font-size: 16px;
}

.category .product .details p.sku {
    color: black;
    font-family: "Roobert Regular";
    font-size: 14px;
    margin-top: 2px;
}

.category .product .details p.price {
    color: black;
    color: black;
    font-family: "Roobert Regular";
    font-weight: 100;
    font-size: 16px;
}


.category .product .details p.price.strike {
    text-decoration: line-through;
    text-decoration-color: red;
    text-decoration-thickness: 2.5px
}

div.category div.product:nth-child(3n+1) {
    clear: left;
    margin-left: 0px;
}


.category .product {
    border: 10px solid transparent; /* Default border (invisible) */
    transition: border 0.3s ease; /* Smooth transition for the border */
}

    .category .product:hover {
        border: 10px solid #BFE1FA; /* Add the border on hover */
    }

div.product {
    position: relative;
}

    div.product .imagediv img.new {
        width: 55px;
    }

/*Product*/
.imagewrapper {
    position: relative;
}


.category .product img.bottomoverlay {
    position: absolute;
    width: 58%;
}

    .category .product img.bottomoverlay:hover {
        border-image-slice: 0;
    }


img.new {
    position: absolute;
    right: 0;
}

.imagewrapper img.new {
    right: 0;
}

.imagewrapper img.bottomoverlay {
    position: absolute;
    bottom: -17%;
}

div.breadcrumb-product {
    min-height: 15px;
    padding-left: 30px;
}

div.productImage p {
    display: none;
}

div.breadcrumb-product a {
    text-decoration: none;
    color: rgba(0,0,0,0.75);
    font-family: "Roobert Regular";
    padding: 0px 7px;
}

div.prodcont {
    padding-bottom: 40px;
}

.product .details .description ul {
    font-family: 'Roobert Regular';
    color: black;
    list-style: disc;
}

div.product {
    margin-bottom: 40px;
}



/*New Product*/

div.prodcont {
    margin-top: 100px;
    margin-bottom: 50px;
}



h1.prod-title {
    color: #000;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 10px;
}



div.details h3.sku {
    color: #000;
    font-family: 'Roobert Regular';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 10px;
}

div.details p.price {
    color: #000;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


.product .details .description p {
    font-family: 'Roobert Regular';
    color: black;
    font-weight: 100;
}

div.prodopt {
    margin: 20px 0px;
}

    div.prodopt span {
        font-family: 'Roobert Regular';
        padding-right: 15px;
    }

    div.prodopt input[type='checkbox'],
    div.prodopt label {
        display: inline;
    }

.prodopts strong,
.productquantity strong {
    font-weight: 100;
    color: black;
    font-family: 'Roobert Regular';
}

.productquantity input {
    width: 60px;
}

div.quantities {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    margin-top: 10px;
    border-top: 1px solid black;
    padding-top: 15px;
}

.qtyopt {
    display: inline-flex;
}

div.qtyopt span {
    font-family: 'Roobert Regular';
    margin: auto 0;
}

span.option {
    text-align: center;
    width: 36px;
    font-size: 13px;
}

div.qtyopt input {
    width: 50px;
    border: 1px solid #c8c8c8;
    margin-left: 50px;
}

div.gallery {
    display: flex;
    justify-content: center;
}


.productorder, .promoorderarea {
    margin-top: 12px;
}




div.product div.productsOrderArea div.gift {
    text-align: left;
    clear: left;
    padding-top: 12px;
}

div.product div.gift p.heading {
    border-bottom: 2px solid var(--lightblue);
}

    div.product div.gift p.heading a {
        display: inline-block;
        margin-right: 8px;
        border: 2px solid var(--lightblue);
        border-bottom: none;
        text-align: center;
        color: #006aa1;
        padding: 4px 8px;
        width: 90px;
        text-decoration: none;
    }

        div.product div.gift p.heading a.active {
            color: #ffffff;
            background-color: var(--lightblue);
        }

div.product div.personalization {
    margin-bottom: 15px;
}

    div.product div.personalization div.row {
        margin-bottom: 15px;
    }

    div.product div.personalization h3 {
        font-size: 17px;
        margin-bottom: 10px;
        line-height: 22px;
    }

    div.product div.personalization p {
        margin-bottom: 5px;
        font-size: 18px;
        margin-top: 15px;
    }

        div.product div.personalization p a {
            font-size: 14px;
        }

.productcontent .address {
    clear: both;
}

.productcontent table.address {
    width: 100%;
}

    .productcontent table.address td {
        padding: 3px;
    }

.cptn-choice label {
    display: inline-block;
}
/*Product Popup*/
div.cartoverlay {
    display: none;
    position: fixed;
    z-index: 500;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3001;
    background-color: rgba(0, 64, 234, 0.8);
}

div.cartoverlay-content {
    position: fixed;
    width: 62%;
    left: 50%;
    top: 50%;
    max-height: 90%;
    transform: translate(-50%, -50%);
    text-align: center;
    overflow: auto;
    padding: 20px;
}

    div.cartoverlay-content.newhire,
    .cartoverlay-content.newhire p {
        text-align: center;
    }

.newhire div.images {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.newhire div.images,
.newhire div.cart-btns {
    margin-top: 20px;
}

    .newhire div.images img {
        max-height: 180px;
    }

div.cartoverlay-content span#xCloseModal {
    color: var(--lightblue);
    display: flex;
    justify-content: flex-end;
}

    div.cartoverlay-content span#xCloseModal:hover {
        cursor: pointer;
    }

.cartoverlay-content img {
    border: 1px solid #dadada;
}

.cartoverlay-content p {
    color: #fff;
    text-align: left;
    font-family: "Roobert SemiBold";
    font-size: 25px;
}

.cartoverlay-content span {
    color: #fff;
    font-family: "Roobert Regular";
    font-size: 25px;
}

div.cart-btns {
    margin-top: 10%;
    display: flex;
    flex-direction: column;
}



/*Related Items*/
.related h3 {
    font-family: "Roobert SemiBold";
    padding-left: 20px;
    font-size: 32px;
}

.related .category .product .details {
    display: block;
}

/*Cart*/
.empty {
    text-align: center;
}

h1.carthead {
    text-align: center;
    color: black;
    font-size: 33px;
    font-family: "Roobert Regular"
}

div.carthead {
    border-bottom: 2px solid var(--lightblue);
    height: 25px;
}

    div.carthead strong {
        font-family: "Roobert Bold";
        color: black;
    }

.row span {
    font-family: "Roobert Regular";
    color: rgba(0,0,0,0.75);
}

.iteminfo span.cartProdName a {
    text-decoration: none;
}

div.qty {
    text-align: left;
    padding: 10px 0px;
    font-family: 'Roobert Regular';
}

    div.qty input {
        width: 45px;
    }

.carttable .row {
    margin-top: 25px;
    border-bottom: 2px solid var(--lightblue);
    padding: 15px 0px;
}

.carttable span.currency {
    margin-left: 20px;
}

div.removeBtn {
    float: right;
    text-align: right;
}

.cartfooter {
    margin-top: 15px;
}

    .cartfooter .labels p {
        color: black;
        font-family: "Roobert SemiBold";
    }

    .cartfooter .values span {
        color: black;
        font-family: "Roobert Regular";
    }

.cartbuttons input {
    margin-right: 30px;
    margin-bottom: 2%;
    border-radius: 0px;
    width: 300px;
    text-align: center;
    background: white;
    border: 1px solid #d1d1d1;
    font-family: 'Roobert Regular';
    padding: 25px;
}

    .cartbuttons input::placeholder {
        color: var(--lightblue);
    }

.cartBtnStyle {
    background: var(--lightblue);
    text-decoration: none;
    /*padding: 25px 65px;*/
    font-family: 'Roobert Regular';
    color: white;
    font-size: 16px;
    position: unset;
    height: 0;
    line-height: 0;
    transform: none;
    margin: 0 auto;
    border: none;
    text-transform: none;
    /*width: 175px;*/
}

div.cartbuttons {
    margin-top: 65px;
    text-align: right;
}

    div.cartbuttons a,
    div.removeBtn a {
        float: right;
        clear: right;
        width: 145px;
    }

/*Checkout Info*/

div.addresses h2,
div.shippingpage h2 {
    font-family: "Roobert Regular";
    color: black;
    text-align: center;
    font-size: 30px;
}

div.shipto p {
    font-family: "Roobert Regular";
    text-align: center;
    padding: 10px 0px;
    font-size: 14px;
}

div.address {
    /*padding: 0px 50px;*/
}

div.addresses .address .formElement input,
div.addresses .address .formElement select {
    height: 65px;
}

div.address .formElement label,
div.addr label,
.certs .formElement label,
.payment .formElement label {
    font-family: "Roobert Regular";
    font-weight: 100;
}

div.addr {
    text-align: center;
}

    div.addr label {
        display: inline-block;
    }


div.continue {
    text-align: center;
    margin-top: 20px;
}

    div.continue input {
        width: 200px;
    }

div.express-addr h5,
div.date label {
    font-family: "Roobert Bold";
}

div.express-addr ul,
div.date p {
    font-family: "Roobert Regular"
}

div.express-addr .formElement label {
    margin-left: 0px;
}


div.continue-ship {
    width: 200px;
    margin: 0 auto;
}

/*Shipping Options*/
table.shopts {
    margin: 0 auto;
}

    table.shopts tbody tr td {
        display: flex;
    }
/*Summary*/
.cartWrapper h2,
.payment h2 {
    font-family: "Roobert Regular";
    color: black;
    font-size: 30px;
    text-align: center;
}

table.cartTable {
    width: 100%;
}

    table.cartTable tr.cartHeader {
        border-bottom: 1px solid var(--lightblue);
    }

.cartWrapper table tbody tr th {
    font-family: "Roobert Bold";
}

table.cartTable td {
    display: table-cell;
    float: none;
    line-height: 36px;
    height: 36px;
    vertical-align: middle;
    text-align: center;
    padding-bottom: 5px;
    padding-top: 5px;
    font-family: "Roobert Regular";
}

div.checkout table.cartTable tr.cartFooter {
    border-top: 1px solid var(--lightblue);
}

.payment .row a {
    font-family: "Roobert Regular";
}

div.address h2 {
    font-family: "Roobert Regular";
    font-size: 30px;
}

div.addressSummary .formElement label {
    margin-left: 0px;
}


div.addressSummary {
    margin-top: 20px;
    text-align: center;
}
#RfcCurp-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.RfcCurp-lightbox-content {
    background: #fff;      
    padding: 2em;
    border-radius: 8px;
    min-width: 300px;
    max-width 90vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
    position: relative;
}
@media (max-width: 600px) {
    .RfcCurp-lightbox-content {
        width: 95vw;
        max-width:95vw;
        min-width: unset;
        padding: 1em;
        border-radius: 6px;
        margin-top: 5vh;
        margin-bottom: 5vh;
        max-height: 60vh;
        overflow-y: auto;
    }
}
#RfcCurp-lightbox[style*="display: none"] {
    display: none !important;
}
.RfcCurp-lightbox-content ol {
    list-style: decimal inside;
    margin-left: 0;
    padding-left: 0;
}
.RfcCurp-lightbox-content ul {
    list-style: disc inside;
    margin-left: 1.5em;
    padding-left: 0;
}
.RfcCurp-lightbox-content ul li {
    margin-bottom: 0.5em;
}
.RfcCurp-lightbox-content a:last-of-type {
    display: block;
    margin: 2em auto 0 auto;
    text-align: center;
    width: fit-content;
}

/*Confirmation*/
div.confirm {
    margin-bottom: 30px;
}

    div.confirm h3 {
        font-family: "Roobert Regular";
        text-align: center;
    }

    div.confirm table {
        margin: 0 auto;
    }

    div.confirm p {
        text-align: center;
    }



/*Breadcrumbs*/

div.breadcrumb {
    text-align: center;
    min-height: 85px;
}

    div.breadcrumb ol {
        list-style: none;
        counter-reset: item;
        margin-top: 25px;
    }

        div.breadcrumb ol li {
            display: inline-block;
            counter-increment: item;
            margin-bottom: 5px;
            padding-top: 50px;
            position: relative;
            text-align: center;
            width: 100px;
            vertical-align: top;
            margin-left: 25px;
            margin-right: 25px;
            font-weight: bold;
            font-size: 13px;
            line-height: 15px;
            color: #acafb0;
            font-family: 'Roobert Regular';
        }

            div.breadcrumb ol li:after {
                content: counter(item);
                border-radius: 100%;
                background-color: #ffffff;
                border: 3px solid #d1d1d1;
                color: #d1d1d1;
                width: 40px;
                height: 40px;
                font-size: 18px;
                line-height: 40px;
                text-align: center;
                display: inline-block;
                position: absolute;
                top: 0px;
                left: 50%;
                transform: translate(-50%,0);
            }

            div.breadcrumb ol li.active, div.breadcrumb ol li.check, div.breadcrumb ol li.active a, div.breadcrumb ol li.check a {
                color: var(--lightblue);
                text-decoration: none;
                font-family: 'Roobert Regular';
            }

                div.breadcrumb ol li.active:before, div.breadcrumb ol li.check:before {
                    border-top: 3px solid var(--lightblue);
                }

                div.breadcrumb ol li.active:after {
                    border: 3px solid var(--lightblue);
                    color: var(--lightblue);
                }

                div.breadcrumb ol li.check:after {
                    content: "\f00c";
                    font-family: "Font Awesome 5 Free";
                    font-style: normal;
                    font-size: 30px;
                    font-weight: 900;
                    text-decoration: inherit;
                    border: 3px solid var(--lightblue);
                    background-color: var(--lightblue);
                    font-size: 28px;
                    color: #ffffff;
                }

            div.breadcrumb ol li:nth-child(n+2)::before {
                content: '';
                border-top: 3px solid #d1d1d1;
                position: absolute;
                width: 100px;
                height: 1px;
                left: -50px;
                top: 22px;
                transform: translate(-27px,0);
                color: var(--lightblue);
            }


/*Privacy & Terms*/

.privacy strong,
.terms strong {
    font-weight: 100;
    font-family: "Roobert Regular";
}


.returns h1,
.privacy h1 {
    font-family: "Roobert Bold";
}

.privacy p, .privacy ul,
.terms p, .terms ul,
.returns p {
    font-family: "Roobert Regular";
}

.returns strong {
    font-family: 'Roobert Regular';
}



/* Category page */
.category .product .image {
    position: relative;
}

.prod-overlay {
    position: absolute;
    max-width: 80px;
    top: -10px;
    right: -10px;
    border: none;
    z-index: 30;
}

.category .product div.imagediv img.image {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.product .imagediv {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}



/*Privacy & Terms*/

.privacy strong,
.terms strong {
    font-weight: 100;
    font-family: "Roobert Regular";
}


.returns h1,
.privacy h1 {
    font-family: "Roobert Bold";
}

.privacy p, .privacy ul,
.terms p, .terms ul,
.returns p {
    font-family: "Roobert Regular";
}

.returns strong {
    font-family: 'Roobert Regular';
}


.content {
    margin-top: 6rem;
}







/*START OF MEDIA QUERIES */
/*START OF MEDIA QUERIES */
/*START OF MEDIA QUERIES */



.burger,
.close-burger {
    display: none; /* Hide the burger menu and close button by default */
}



@media only screen and (min-width: 1700px) {

    .featured {
        text-align: center;
    }
}



@media only screen and (max-width: 1700px) {
    .slider-content.choose {
        top: 8%;
    }
}

@media only screen and (max-width: 1600px) {



    .choose h2 {
        font-size: 45px;
    }

    .choose ul li {
        font-size: 40px;
    }
}

@media only screen and (max-width: 1440px) {

    .hero-slider .slider-content.new {
        right: 15%;
    }

    .choose h2 {
        font-size: 39px;
    }

    .choose ul li {
        color: #fff;
        font-size: 31px;
        line-height: 30px;
        padding-bottom: 14px;
    }

    .slider-content.choose {
        top: 2%;
        left: 61%;
    }
}



@media (max-width: 1390px) {

    .popup h2 {
        font-size: 50px;
    }

    .popup h3 {
        font-size: 30px;
    }

    .contact-div {
        height: 500px;
        padding-right: 10%;
    }

    .mainmenu .navigation li {
        margin: 0px 8px;
    }

    .hero-text.hero-choose h2 {
        font-size: 30px;
    }

    .hero-text.hero-choose ul li {
        font-size: 28px;
    }

}


/*Ipad Landscape*/
@media only screen and (max-device-width: 1024px) {
    .mainmenu .navigation a {
        font-size: 12px;
    }

    .hero-text h2 {
        font-size: 34px;
    }

        .hero-text h2 span {
            font-size: 20px;
        }

    .hero-text.hero-right {
        right: 10%;
    }

    .hero-text.hero-tech h3 {
        font-size: 24px;
    }

    .hero-text.hero-choose h2 {
        font-size: 22px;
    }

    .hero-text.hero-choose ul li {
        font-size: 20px;
    }


    .popup {
        top: 14%;
    }

        .popup h2 {
            font-size: 41px;
        }

        .popup h3 {
            font-size: 24px;
        }

        .popup p {
            font-size: 13px;
        }

    .slider-wrapper .product .details, .related .cateogry .product .details {
        width: 295px;
    }

    div.product {
        margin-bottom: 80px;
    }

    .cartbuttons input {
        left: 38%;
    }

    .cartfooter {
        margin-right: 20px;
    }

    div.category {
        grid-template-columns: repeat(2, 1fr);
    }
}



@media (max-width: 950px) {
    .mainmenu {
        display: none; /* Hide the main menu by default */
    }


        .mainmenu .navigation {
            flex-direction: column;
            text-align: center;
        }


    .burger {
        display: flex; /* Show the burger menu */
        align-items: center;
        cursor: pointer;
        gap: 5px;
    }

        .burger i {
            font-size: 24px; /* Adjust the size of the burger icon */
            color: #000;
        }


    .close-burger {
        display: none; /* Hide the close button by default */
        align-items: center;
        cursor: pointer;
        gap: 5px;
    }

        .close-burger img {
            width: 24px; /* Adjust the size of the close icon */
        }




    .search {
        width: 50%;
    }
}




/*ipad 11*/
@media only screen and (max-device-width: 834px) and (max-device-height: 1194px) {


    body.loginpage {
        height: 801px;
    }

    .logincontainer {
        height: 100%;
    }

    .mainmenu ul.navigation {
        width: 100%;
    }


    div.login {
        margin-top: 64px;
    }


    /*I Pad Slider*/

    .gear {
        top: 3%;
    }

    .popup {
        left: 17%;
        top: 2%;
    }

    #naicBtn {
        margin-top: 7px;
    }


    .popup h2 {
        font-size: 29px;
    }

    .popup h3 {
        font-size: 14px;
    }

    .popup p {
        font-size: 11px;
    }

    .great {
        left: 2%;
    }

        .great h2 {
            font-size: 44px;
        }

    .bulk {
        left: 43%;
        top: 3%
    }

        .bulk h2 {
            font-size: 20px;
            margin-bottom: 10px;
        }

        .bulk p {
            font-size: 17px;
        }

    .ann h2 {
        font-size: 31px;
    }

    .ann p {
        font-size: 14px;
    }



    div.contact-modal {
        top: 15%;
        width: 61%;
        height: 60%;
    }



    /*I Pad Image Grid*/

    .image-grid .spanwrapper {
        z-index: 500;
        top: 20px;
        right: 39px;
    }

    .cookiebtns a {
        padding: 10px 28px;
    }

    .tile span {
        font-size: 19px;
    }

    .lastChanceContent {
        position: absolute;
        right: 22px;
        top: 108px;
    }


    /*IPad footer*/
    .custom-form-content .comments textarea {
        padding-top: 0px;
    }

    .middle-footer .middle-one {
        width: 175px;
    }

    .bottom-footer {
        border: none;
    }


    .first-half {
        width: 100%;
        text-align: center;
    }

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

    /*I pad category*/
    .category .product .details p.name {
        width: 100%;
    }
    /*I Pad product*/

    div.cartoverlay-content {
        width: 86%;
    }

    div.quantities {
        grid-gap: 5px;
        grid-template-columns: 1fr 1fr;
    }

    /*I pad cart*/
    div.cartbuttons a, div.removeBtn a {
        width: 104px;
    }

    .carttable span.currency {
        margin-left: 0px;
    }

    div.values {
        padding: 0px 15px;
    }

    /*I pad cobrand*/
    .cobrand-icon {
        padding: 0px 7px;
    }


    /*Bread Crumbs*/

    div.breadcrumb ol li {
        width: 75px;
    }

        div.breadcrumb ol li:nth-child(n+2)::before {
            width: 70px;
            height: 1px;
            left: -37px;
        }

    .cartbuttons input {
        left: 17%;
    }
}

@media (max-width: 1200px) {
    .hero-slider.first h2,
    .hero-slider.first p {
    }

    .hero-slider.first .great {
        top: 22%;
        left: 2%;
    }
}


@media only screen and (max-device-width: 810px) and (max-device-height: 1080px) {
}


/*Nexus*/
@media only screen and (max-device-width: 768px) and (max-device-height: 1024px) {
    .choose h2 {
        color: #fff;
        font-size: 19px;
        margin-bottom: 6px;
    }

    .choose ul li {
        color: #fff;
        font-size: 15px;
        line-height: 15px;
        padding-bottom: 7px;
    }

    .choose a.bannerbtn {
        background: var(--lightblue);
        text-decoration: none;
        padding: 22px 32px;
        font-family: 'Roobert Regular';
        color: white;
        font-size: 15px;
        height: 0;
        line-height: 0;
        width: 85px;
        margin-top: 58px;
        margin-left: 50%;
        transform: translateX(-50%);
    }

    .bulk {
        left: 44%;
    }

    .middle-footer {
        display: block;
    }

    .slider-dots {
        bottom: 10px;
        text-align: center;
    }

    div.breadcrumb ol li {
        width: 50px;
    }

        div.breadcrumb ol li:nth-child(n+2)::before {
            width: 38px;
            height: 1px;
            left: -20px;
        }


    .gear h2 {
        font-size: 37px;
    }

    .holiday h2 {
        font-size: 30px;
    }

    .great p {
        font-family: 'Roobert Regular';
        font-size: 14px;
        color: var(--lightblue);
    }
}

/*Landscape*/
@media only screen and (max-device-width: 667px) and (max-device-height: 375px) {
    .slider-content.choose {
        top: 48%;
        left: 0%;
        margin-left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }

    .choose h2 {
        color: #fff;
        font-size: 15px;
        margin-bottom: 6px;
    }

    .choose ul li {
        color: #fff;
        font-size: 13px;
        line-height: 15px;
        padding-bottom: 7px;
    }

    .bulk {
        left: 40%;
        top: 3%;
    }

        .bulk h2 {
            font-size: 16px;
        }

        .bulk p {
            font-size: 15px;
        }

    .cookiebtns a {
        padding: 10px 18px;
    }

    .lastChanceContent {
        right: 0px;
    }

        .lastChanceContent h2 {
            font-size: 22px;
        }

        .lastChanceContent p {
            font-size: 14px;
        }

    .middle-footer {
        display: flex;
        flex-direction: column;
    }

        .middle-footer ul.navigaition li {
            width: 100%;
        }
}


/*Galaxy and Iphone*/
/*@media only screen and (max-device-width: 380px) and (max-device-height: 767px)*/
@media only screen and (max-width: 550px) {

    body {
        padding-top: 50px;
    }

    div.fixedheader {
        height: 57px;
    }


    .logincontainer {
        width: 244px;
    }


    .header-left a.logo img {
        padding-left: 14px;
        width: 133px;
    }

    .menu a p {
        color: white;
    }

    div.login {
        margin-top: 0px;
    }

    .bottom-footer-login {
        padding: 0px;
    }

    div.category {
        grid-template-columns: repeat(1, 1fr);
    }


    .burger {
        margin-top: 5px;
    }

        .burger p {
            display: none;
        }

    .header input[type=search] {
        margin-left: 0px;
    }



    .search-container input[type="search"] {
        display: b; /* Hide the search input by default */
        width: 100%; /* Full width when shown */
        position: absolute;
        top: unset; /* Adjust to appear below the header */
        left: 0;
        z-index: 1000;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 0;
        font-size: 16px;
        background-color: #fff;
    }

    .search-container.active input[type="search"] {
        display: block; /* Show the search input when active */
    }



    .search-container .search-icon {
        cursor: pointer; /* Make the search icon clickable */
        padding: 0px;
    }




    div.cart {
        margin-top: 7px;
    }

    .menu .cart p {
        padding-top: 3px;
        color: white;
    }

    .banner-rotator {
        margin-top: 0px;
    }

    .hero-text {
        top: 55%;
    }

    .slider-dots {
        display: none;
    }


    .hero-text a.button {
        max-width: 100px;
        text-transform: uppercase;
        font-size: 10px;
        padding: 0;
        margin-top: 5px;
    }



    .banner-rotator a {
        font-size: 29px;
    }

        .banner-rotator a.left {
            left: -10px;
            font-size: 20px;
        }

        .banner-rotator a.right {
            right: -10px;
            font-size: 20px;
        }


    .hero-text h2 {
        font-size: 14px;
        margin-bottom: 0;
    }

        .hero-text h2 span {
            font-size: 10px;
        }

    .hero-text.hero-holiday p,
    .hero-text.hero-new-products p{
        font-size: 12px;
        margin-bottom: 0px;
    }


    .hero-text.hero-tech h3 {
        font-size: 12px;
        margin-bottom: 0;
    }

    .hero-text.hero-choose h2 {
        font-size: 12px;
    }

    .hero-text.hero-choose ul {
        margin-bottom: 0px;
    }

        .hero-text.hero-choose ul li {
            font-size: 10px;
        }

    .hero-text.hero-right.hero-choose {
        right: 5%;
    }



    .cat-filter-wrap {
        grid-template-columns: 1fr;
    }

    .slider-nav {
        display: none;
    }


    .slider-wrapper .product, .related .category .product {
        padding: 0px 41px;
    }





    .contact-div {
        height: 300px;
        padding-right: 0;
    }


    .contact-content h4 {
        font-size: 24px;
    }





    div.contact-modal {
        top: 0%;
        width: 100%;
        height: 100%;
        z-index: 5000;
    }

    span.close-modal {
        width: 95%;
        display: block;
        text-align: right;
        margin-right: 24px;
    }


    .cookiebtns {
        margin-top: 13px;
    }

    .tile span {
        font-size: 26px;
    }


    .image-grid .tile {
        grid-column: span 12;
    }

    .lastchance {
        background-position: 50% 61%
    }

    .lastChanceContent {
        left: 0%;
        top: 107px;
        width: 100%;
        text-align: center;
    }

        .lastChanceContent h2 {
            font-size: 31px;
        }

    .custom-hero {
        display: none;
        height: 700px;
        padding: 20px;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 5000;
        height: 100%;
    }



    .mobile-custom-message {
        background: var(--btnhoverblue);
        display: flex;
        padding: 10px 20px;
    }

        .mobile-custom-message p {
            color: white;
            font-size: 13px;
            margin-top: 14px;
            font-family: "Roobert SemiBold";
        }

        .mobile-custom-message span {
            background: var(--lightblue);
            padding: 10px;
            margin-left: 10px;
        }

            .mobile-custom-message span svg {
                color: white;
                font-size: 28px;
            }

    span.mobile-X {
        display: block;
        text-align: right;
    }

        span.mobile-X svg {
            color: var(--lightblue);
            font-size: 22px;
        }

    .middle-one img {
        width: 200px;
        width: 100%;
        /*border-bottom: 8px solid transparent;
        border-image: linear-gradient(45deg, #ed2b2c, #2C2B7C, #3B80C2);
        border-image-slice: 1;*/
    }

    span.icons {
        display: block;
    }



    div.footer {
        display: flex;
        flex-direction: column;
    }




    .bottom-footer {
        border: none;
    }


    .featured-cat-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 items per row */
    }


    .contact-modal .modal-content, .custom-order-form .custom-modal {
        width: 85%;
    }

    .bottom-contact,
    .bottom-custom {
        flex-direction: column;
    }
    /*Product*/
    .product-info h1 {
        font-size: 12px;
    }

    div.cartoverlay-content span#xCloseModal {
        display: none;
    }

    .product-info p,
    .product-info h3 {
        font-size: 12px;
    }

    .productcontent {
        margin-top: 180px;
    }
    /*Featured Items*/
    /*Co Brand*/
    .cobrand-banner {
        background-image: url("/images/cobrand_mobile_background.png");
        background-position: 50% 50%;
    }

    .cobrand-banner-content {
        position: absolute;
        top: 48px;
        left: 60px;
    }

        .cobrand-banner-content h2 {
            font-size: 42px;
        }

        .cobrand-banner-content p {
            font-size: 12px;
        }

    .cobrand-icons {
        display: block;
    }

    .cobrand-mobile-slider {
        position: relative;
        display: block;
    }

        .cobrand-mobile-slider a {
            display: block;
            position: absolute;
            transform: translate(0,-50%);
            background-color: rgba(0,0,0,0.19);
            width: 60px;
            height: 100px;
            top: 50%;
            cursor: pointer;
            color: white;
            line-height: 100px;
            font-size: 50px;
            text-align: center;
            z-index: 400;
        }

            .cobrand-mobile-slider a.left {
                left: 0px;
            }

            .cobrand-mobile-slider a.right {
                right: 0px;
            }

        .cobrand-mobile-slider .cobrand-icon {
            position: absolute;
        }

        .cobrand-mobile-slider .cobrand-icon {
            display: none;
            max-width: 100%;
            position: relative;
        }

            .cobrand-mobile-slider .cobrand-icon.visible {
                display: block;
            }

    /*erg*/

    img.erg-mobile {
        display: block;
    }

    img.erg-desktop {
        display: none;
    }

    /*Cart*/

    div.carthead {
        display: none;
    }

    .cartbuttons input {
        left: 17%;
        position: relative;
        width: 84%;
    }

    div.qty {
        text-align: left;
    }

    div.removeBtn a {
        float: left;
    }



    /*Breadcrumbs*/

    div.content .breadcrumb li {
        width: 55px;
        margin-left: 0;
        margin-right: 0;
    }

    div.breadcrumb ol li:nth-child(n+2)::before {
        width: 22px;
        height: 1px;
        left: 19px;
    }
}


@media only screen and (max-width: 479px) {
    .header input[type=search]:focus, .footer input[type=search]:focus {
        width: 100%;
    }
}