/* A bit custom styling */

.response-page .ui-listview li .ui-btn p {
    color: #0c0505;
    /*  display: none;  could have use in the future */
}

.response-page .ui-listview li .ui-btn .ui-li-aside {
    color: #eee;
}

.hebrew {
    direction: rtl;
}

.inputHebrew {
    direction: rtl !important;
    text-align: right !important;
}



/* this is to corect the split view centering */

.ui-content .ui-listview,
.ui-panel-inner > .ui-listview {
    margin: 1em 0;
}

.splitView {
    width: 4.5em !important;
}

.splitView:after {
    content: "";
    position: absolute;
    display: block;
    width: 42px;
    height: 42px;
    left: 36%;
    top: 39%;
    border-radius: 2em;
}

.ui-listview > li p {
    font-size: .75em;
    font-weight: 400;
    display: block;
    /* margin: .6em 1.6em .6em 0;*/
    margin: 1.5em 1.6em 0 0;
    /* needed to enlarge mafgin right */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    direction: rtl;
    text-align: left;
}
/*  I want to get rid of white space of footer */
#showReceipt div.ui-content{
    min-height: calc(100vh + -223px) !important;
}
div.ui-content{
    min-height: calc(99vh + -217px) !important;
}

/* I want to get rid of white space of footer
.ui-content{
    min-height: calc(100vh - 40px) !important;
}*/

/* For navbar style*/

.ui-bar-a,
.ui-page-theme-a .ui-bar-inherit,
html .ui-bar-a .ui-bar-inherit,
html .ui-body-a .ui-bar-inherit,
html body .ui-group-theme-a .ui-bar-inherit {
    /* background-color: #333030; */
    border-color: #ddd;
    color: #333;
    text-shadow: 0 1px 0 #eee;
    font-weight: 700;
    background-image: url(../../webImages/header.jpg) !important;
}

.ui-header,
.ui-footer {
    border-width: 1px 0;
    border-style: none !important;
    position: relative;
}

/* top title image */

img#img_logo {
    width: 100%;
    height: auto;
    max-height: 111px;
    min-height: 85px;
    margin-bottom: -6px;
    margin-top: -6px;
    z-index: 5;
}

/* ####################################@@@@@@@@@@@@@@ this needs work !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/* this for top slogon*/
span.birconim {
    /*display: none;*/
    z-index: 1;
    position: absolute;
    top: 1.5em;
    font-size: 1em;
    color: #ffffff;
    /* margin: auto; */
    /* width: 50%; */
    /* margin-left: auto; */
    left: 21%;
    z-index: 1;
}

.shilo {
    font-size: 1.3em;
    margin-left: 11px;
    color: #F7A727;
}

.barkatz {
    font-size: 1.3em;
    margin-left: 11px;
}

/* detail button */
button.btn_details {
    background-color: #000000 !important;
    /*  background: linear-gradient(to bottom, rgba(0,0,0,1) 88%,rgba(255,255,255,1) 100%);*/
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 10%, rgba(107, 107, 107, 1) 10%, rgba(0, 0, 0, 1) 79%);
    margin-top: -6px !important;
    border-top-color: #333333 !important;
    border-right-color: #1f1f1f !important;
    /* border-bottom-color: #f9f9f9 !important;*/
    border-bottom-right-radius: .71em !important;
    border-bottom-left-radius: .71em !important;
    border-bottom-color: rgba(250, 250, 250, 0.3803921568627451) !important;
    border-left-color: #1f1f1f !important;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: .8em !important;
    color: #ffffff !important;
    /*margin: 4px 2px;*/
    cursor: default;
    /* padding: 32px 16px;*/
}

.orangeTxt {
    color: #f7a727;
    margin-right: 6px;
}

/* make li rtl*/

ul.ui-grid-a,
ul.ui-grid-b,
ul.ui-grid-c,
ul.ui-grid-d,
ul.ui-grid-solo,
li.ui-block-a,
li.ui-block-b,
li.ui-block-c,
li.ui-block-d,
li.ui-block-e {
    direction: rtl !important;
}


/* For Bircon logo*/

.birconLogo {
    width: 95%;
    margin: auto;
    direction: rtl;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
}

.birconImg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;

}

/* Nav Buttons */

.bircon-Nav {
    display: none;
    padding-left: 12px;
    padding-right: 12px;
}

/* For li */

.birkon-smallScreen {
    background-color: #ffffff !important;
    direction: rtl !important;
}

/* will remove the events on show cart items*/
a.notLink.ui-btn {
    pointer-events: none;

}

/* For buy button on Product page*/

.buyBtn {
    display: none;
}
.reviewBtn, .subCatSpan {
    display: none;
}
a.enlargeImg.ui-btn {
    cursor: zoom-in;
}

/* For labels RTL */
label {
    direction: rtl;
}

/* For footer*/

.aFooter {
    font-size: 12px;
    margin-left: 10px;
    text-decoration: none;
    color: #FFFFE0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

A:LINK.aFooter {
    font-size: 12px;
    margin-left: 10px;
    text-decoration: none;
    color: #FFFFE0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

A:VISITED.aFooter {
    font-size: 12px;
    margin-left: 10px;
    text-decoration: none;
    color: #FFFFE0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/* note that A:HOVER isn't supported by all browsers */

A:HOVER.aFooter {
    font-size: 12px;
    margin-left: 10px;
    text-decoration: none;
    color: #f7a727;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.footTxt {
    font-size: 12px;
    color: #FFFFE0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin-left: 20px;
}

.fotterTable {
    position: relative;
    width: 1000px;
    height: 18px left:50%;
    margin-left: -500px;
    bottom: -500px;

}

.bldOrng {
    font-size: 14px;
    color: #F7A727;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    direction: ltr;
    white-space: nowrap;
}

.bldWhite {
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    color: #FFFFE0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
}

/* background color of page */

.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
    background-color: #f8f4f3 !important;
   /*background-color: #d4ccca !important;*/
}
/* background  color of nav buttons top of page */
a#topNav {
    background: white !important;
}
/* make list h2 rtl*/
.enlargeImg h2 {
    direction: rtl;
    /* margin:.45em 0.9em !important;*/
}

/* Bircon List Header product page */

.Bircon_List_Header {
    max-width: 980px !important;
    margin: auto !important;
}

.bircon_list_title {
    text-align: center;
    color: white;
    text-shadow: 1px 1px #464646;
}

.Bircon_product_title {
    line-height: 23px;
    font-size: 0.8em;
    margin: auto;
    direction: rtl;
}

.Bircon_List_Header .ui-bar {
    -webkit-border-top-left-radius: inherit;
    border-top-left-radius: inherit;
    -webkit-border-top-right-radius: inherit;
    border-top-right-radius: inherit;
}

.Bircon_List_Header .ui-body {
    border-top-width: 0px;
    -webkit-border-bottom-left-radius: inherit;
    border-top-left-radius: inherit;
    -webkit-border-bottom-right-radius: inherit;
    border-bottom-right-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 72%, rgba(255, 255, 255, 0.58) 84%, rgba(255, 255, 255, 0) 100%);
    min-height: 109px;
    direction: rtl;
}

.bircon_list_content {
    -webkit-border-top-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
    -webkit-border-top-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.divTable {
    display: table;
    width: 100%;
    line-height: 1em;
    min-height: 110px;
}

.divTableRow {
    display: table-row;
}

.divTableCell {
    /*border: 1px solid #999999;*/
    display: table-cell;
    padding: 3px 3px 0 1px;
    text-align: right;
    vertical-align: top;
    white-space: pre-line;
     min-width: 219px;
   /* min-height: 120px;*/
}
.divPrintCell{
    min-width: auto;
    line-height:  1.5em;
}
/* HEADER FOR PRODUCTS */
.birconCatImg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: auto;
    height: 127px;
    position: absolute;
    left: 0px;
    z-index: 1;
}
h2.Bircon_product_title {
    margin-bottom: 69px;
}
span.headerCost, .Bircon_product_title, .birconim-dimensions {
    position: relative;
    z-index: 10;
}
/* specifacally for cart page*/
#frmAddToCart {
    background-color: #f9f9f9 !important;
}

/*.cartTable{
	display: table;
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
   
}
.cartTableRow {
	display: table-row;
}

.cartTableCell {
	display: inline;
	padding: 3px 10px;
    width: 98%;
    direction: rtl;
}*/
#addToCartTable {
    width: 100%;
    border-spacing: 0;
     direction: rtl;    
}
#addToCartTable tbody {
    background-color: #f6f6f6;
}

#addToCartTable td {
    padding: 5px 30px 5px 10px;
    text-align: right;
    width: 50%;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #d2cbcbd1;
}

.emptyCartImg{
    width: 80%;
    max-width: 344px;
    height: auto;
    margin: 32px auto 0 auto;
    display: block
}
.divEmptyCart {
    font-size: calc(.5em + 2.6vw);
    text-align: center;
    margin: 13px 20px 0 0;
     animation: anniEmptyCart 4s infinite 0s ease-in;
}
@keyframes anniEmptyCart{
    0%{
        }
    19%{
        transform: rotate(360deg);
        }
    53%{
        transform: rotate(360deg);
        }
    74%{
        transform: rotate(360deg) scale(1.1);
        }
}
/* for check box lable*/
.ui-btn-icon-left:after {
    right: .5625em;
}

.ui-checkbox .ui-btn,
.ui-radio .ui-btn {
    margin: 0;
    white-space: normal;
    z-index: 2;
    text-align: right;
    padding-right: 3em;
}

input#date,
input#quantity {
    text-align: right;
}

/*8888888888*/
span.dot {
    height: 8px;
    width: 8px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin: 0 3px 0 3px;
}

/* For Nav Panel*/

div#navPanel {
    padding: 0 !important;
    min-height: unset;
    top: 119px;
    background: white;
   /* background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(243,243,243,1) 100%,rgba(237,237,237,1) 100%,rgba(255,255,255,1) 100%);*/
    /*background: linear-gradient(to right, rgb(212, 204, 202) 0%,rgb(246, 246, 246) 100%,rgb(246, 246, 246) 100%,rgba(255,255,255,1) 100%);*/
   /* background: linear-gradient(to right, rgba(242,246,248,1) 0%,rgba(216,225,231,1) 50%,rgb(223, 231, 235) 71%,rgba(224,239,249,1) 100%);*/
   /*background: rgba(255, 255, 255, 0.7215686274509804)*/
    background: linear-gradient(to right, rgba(212, 204, 202, 0.77) 0%,rgb(246, 246, 246) 100%,rgb(246, 246, 246) 100%,rgba(255,255,255,1) 100%);
}
div#navPanel > .ui-panel-inner{
   padding: 0 !important; 
}
#navList li {
    list-style: none;
    border-width: 1px 0 0;
    /* border-style: solid; */
    display: block;
   /* max-width: 200px;*/
    white-space: nowrap;
    direction: rtl;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 2.6em;
    border-bottom: rgba(0, 128, 0, 0.27058823529411763) solid 1px;
}
#navList li a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #000000;
    text-decoration: none;
    letter-spacing: 1px;
    text-shadow: 0 0 1px rgb(255, 255, 255);
    font-size: 1em;
    text-align: right;
    width: 100%;
    margin-right: 6px;
}
#navList li a:hover {
    background: #0000ff3b;
    background: linear-gradient(to right, rgba(249, 249, 249, 0.36) 0%,#e8e8d8 100%,#ffffe9 100%,rgba(255,255,255,1) 100%);
}
/* shopping cart icon*/

.ui-icon-shoppingCart:after {
    background-image: url("../css/images/cart.png");
}

.ui-icon-shoppingCartLrg:after {
    background-image: url("../css/images/cart-lrg.png");
}

/* general container for centering*/
.container {
    max-width: 980px;
    margin: auto;
}

/* show cart specs*/
span.itemChoices {
    position: absolute;
    right: 5px;
    top: 0;
    font-size: 12px;
    width: 100%;
    text-align: right;
    /* direction: rtl;*/
    white-space: nowrap !important;
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: rgba(251, 251, 251, 0.67);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

/* link "buy Button" */
a.byNow {
    clear: right;
}

::placeholder {
    text-align: right;
    color: #dddddd;
}

label:after {
    content: ":";
    font-weight: 700;
}


/* for img popup*/
#imgLrg {
    width: auto;
    height 200px;
}

span.productSpan {
    display: none;

}
/* For contact page*/
textarea#contactMsg{
    height: 200px !important;
    direction: rtl;
}
input#contactName{
    direction: rtl;
    text-align: right;
}
/* For our customer page */
img.cusImg {
     margin-left: 25px;
    margin-top: 16px;
    height: 109px;
    width: auto !important;
    display: inline-block;
    box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.39);
    max-width: 50vw;
}

.rain {
    height:100%;
    padding: 26px 0;
    color: #fff;
    /*background: linear-gradient(-45deg, #ffffff, #7ad5ea8c, #02ace099, #a2b84e99);*/
    background: linear-gradient(-45deg, #6f9a33, #7ad5ea8c, #02ace099, #a2b84e99);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s cubic-bezier(0.39, 0.58, 0.57, 1) infinite;
    min-width: 143px;
    min-height: calc(99vh + -217px) !important; /* funny enough but this seems to get rid of the white space*/
    
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

h1,
h6 {
	font-family: 'Open Sans';
	font-weight: 300;
	text-align: center;
	position: absolute;
	top: 45%;
	right: 0;
	left: 0;
}
/* """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
/*
for print order page
img.printImg {
    max-width: 100%;
    height: auto;
}
.LRContainer{
    width: 78%;
    min-width: 713px;
    margin: 1px auto;
    clear: left;
}
.divPrintRight {
    width: 150px;
    float: right;
    clear: right;
}
.divPrintLeft {
    width: 60%;
    float: right;
   
}
.printTable{
    direction: rtl;
}
.printTable td:first-child{
    font-weight: 700;
    min-width: 180px !important;
}
table.printTable td {
    min-width: 200px;
    white-space: normal;
    line-height: 2em;
}
*/

/* """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" */
/*for print order page*/


img.printImg {
    /* max-width: 140px; */
    width: 100%;
}


div.printDivTable:not(:last-of-type) {
    border-bottom: black;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}
div.printDivTable {
   width: auto;
    margin: auto;
}
.divImgPrint{
     transform: translateX(50%);
transition: all 3000ms ease;
    max-width: 152px;
    margin: auto;
}
img.printImg {
    max-width: 100%;
    height: auto;
}
span.printSubTotal {
    padding: 7px 26px;
    box-shadow: inset 0 0 1px 1px #eff0f3;
}
span.printTotal {
    padding: 7px 26px;
    box-shadow: inset 0 0 1px 1px #eff0f3;
    font-weight: 700;
}  
div.divTableCell {
    width: 50%;
    /*max-width: 200px !important;
    min-width: 200px !important;*/
    direction: rtl;
    /* background-color: green; */
}
.printDivTable .divTableCell:nth-child(2) {
    font-weight: 700;
}
.printDivTable .divTableCell:nth-child(2)::after { 
    content: ":";
} 

.divImgPrint H3{
    max-width: 100%;
    text-align: right;
    white-space: normal;
    font-size: 16px;
}

.divFinalPrice{
    padding: 0 !important;
}
/* for fade in out images */
.fadeImag{
    position: absolute;
    top: 0;
    left: 0;
    
}
@keyframes cf4FadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.fadeImag{
    animation-name: cf4FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 9s;
}
#liFadeInOut > a >img:nth-of-type(1) {
  animation-delay: 9s;
}
#liFadeInOut > a >img:nth-of-type(2) {
  animation-delay: 6s;
}
#liFadeInOut > a > img:nth-of-type(3) {
  animation-delay: 3s;
}
/* END::::  fade in out images */
/*
div.printDivTable:not(:last-of-type) {
    border-bottom: black;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}
div.printDivTable {
    margin: auto;
    min-width: 50%;
    width: 600px;
    padding-top: 82px;
}
div.divTableCell {
    width: 200px;
    max-width: 200px !important;
    min-width: 200px !important;
    direction: rtl;

}
.printDivTable .divTableCell:nth-child(2) {
    font-weight: 700;
}
.printDivTable .divTableCell:nth-child(2)::after { 
    content: ":";
} 
.divImgPrint{
    float: right;
    margin-top: -52px;
    max-width: 156px;
}
.divImgPrint H3{
    max-width: 100%;
    text-align: right;
    white-space: normal;
    font-size: 16px;
}
img.printImg {
    max-width: 100%;
    height: auto;
}
*/
/*

.jqm-navmenu-panel {
    visibility: visible;
    position: relative;
    left: 0;
    clip: initial;
    float: left;
    width: 25%;
    background: none;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    transform: none !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow:none;
}
*/

/*  breakpoint is 28em (448px). to make lables set be on right on larger screens. */
@media (min-width: 28em) {
    .ui-field-contain > label {
        float: right !important;
        /*  width: 20%;
    margin: .5em 2% 0 0;*/
    }
    
    .birconCatImg {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: auto;
        height: auto;
        height: 153px;
        position: relative;
    }
    h2.Bircon_product_title {
        margin-bottom: 0px;
    }
    p.discriptionTxt{
        font-size: 17px;
    }
    
}

/* First (now second) breakpoint is 48em (768px). 3 column layout. Tiles 250x250 pixels incl. margin at the breakpoint. */

@media (min-width: 48em) {
    .response-page .ui-content {
        padding: .5625em;
        /* 9px */
    }

    .response-page .ui-listview li {
        float: right;
        width: 30.9333%;
        /* 33.3333% incl. 2 x 1.2% margin */
        height: 14.5em;
        /* 232p */
        margin: .5625em 1.2%;
    }

    .response-page .ui-listview li > .ui-btn {
        -webkit-box-sizing: border-box;
        /* include padding and border in height so we can set it to 100% */
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: 100%;
    }

    .response-page .ui-listview li.ui-li-has-thumb .ui-li-thumb {
        height: auto;
        /* To keep aspect ratio. */
        max-width: 100%;
        max-height: none;
    }

    /* Make all list items and anchors inherit the border-radius from the UL. */
    .response-page .ui-listview li,
    .response-page .ui-listview li .ui-btn,
    .response-page .ui-listview .ui-li-thumb {
        -webkit-border-radius: inherit;
        border-radius: inherit;
    }

    /* Hide the icon */
    .response-page .ui-listview .ui-btn-icon-right:after {
        display: none;
    }

    /* For buy button on Product page*/
    .buyBtn ,.reviewBtn {
        position: absolute;
        bottom: -16px;
        left: 0;
        text-align: right;
        padding-right: 39px;
        /*    background-color: #ffffff !important;*/
        display: block;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.88) 66%, rgb(255, 255, 255) 78%, rgba(255, 255, 255, 1) 100%);
    }

    .buyBtn:after,.reviewBtn:after {
        content: URL('../css/images/arr_r.png') !important;
        position: absolute;
        bottom: 11px;
        right: 10px;
        background-color: #adadad;
        width: 22px;
        height: 22px;
        border-radius: 1em;
    }

    /* Make text wrap. */
    .response-page .ui-listview h2,
    .response-page .ui-listview p {
        white-space: normal;
        overflow: visible;
        position: absolute;
        left: 0;
        right: 0;
    }

    /* Text position */
    .response-page .ui-listview h2 {
        font-size: 1.25em;
        margin: 0;
        /*padding: .125em 1em;*/
        bottom: 50%;
    }

    .response-page .ui-listview p {
        font-size: 1em;
        margin: 0;
        /*padding: 0 1.25em;*/
        min-height: 50%;
        bottom: 0;
    }

    /* Semi transparent background and different position if there is a thumb. The button has overflow hidden so we don't need to set border-radius. */
    .ui-listview .ui-li-has-thumb h2,
    .ui-listview .ui-li-has-thumb p {
        background: #111;
        /*background: rgba(0,0,0,.8);*/
        /*  background-color: rgba(112, 190, 230, 0.38);*/
        /*background-color: rgba(215, 240, 249, 0.67);*/
        background-color: rgba(244, 241, 241, 0.79);
    }

    .ui-listview .ui-li-has-thumb h2 {
        bottom: 22.5%;
        font-size: 19px !important;
        white-space: nowrap !important;
        direction: rtl;
        text-align: center !important;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .ui-listview .ui-li-has-thumb p {
        min-height: 22.5%;
        max-height: 22.5%;
        flex: 1;
        display: flex;
        justify-content: center;
        flex-direction: column;
        direction: rtl !important;
        text-align: right !important;
        text-align: center !important;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    /* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
    .response-page .ui-listview .ui-li-aside {
        padding: .125em .625em;
        width: auto;
        min-height: 0;
        top: 0;
        left: auto;
        bottom: auto;
        /* Custom styling. */
        background: #990099;
        background: rgba(153, 0, 153, .85);
        -webkit-border-top-right-radius: inherit;
        border-top-right-radius: inherit;
        -webkit-border-bottom-left-radius: inherit;
        border-bottom-left-radius: inherit;
        -webkit-border-bottom-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* If you want to add shadow, don't kill the focus style. */
    .response-page .ui-listview li {
        -moz-box-shadow: 0px 0px 9px #111;
        -webkit-box-shadow: 0px 0px 9px #111;
        box-shadow: 0px 0px 9px #111;
    }

    /* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
    .response-page .ui-listview li > .ui-btn:hover {
        -moz-box-shadow: 0px 0px 12px #33ccff;
        -webkit-box-shadow: 0px 0px 12px #33ccff;
        box-shadow: 0px 0px 12px #33ccff;
    }

    /* Animate focus and hover style, and resizing. */
    .response-page .ui-listview li,
    .response-page .ui-listview .ui-btn {
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        transition: all 500ms ease;
    }

    /* this is for better product display*/
    li.productLi {
        height: 20em !important;
    }

    h2.productH2 {
        display: none !important;
    }

    p.productP {
        display: none !important;
    }

    .productSpan {
        display: block !important;
        direction: rtl;
        max-width: 135px;
        position: absolute;
        bottom: 12px;
        right: 50%;
        text-overflow: ellipsis;
        overflow: hidden;
        font-weight: 700;
        z-index: 11;
        cursor: pointer;
    }

    button.productBtn {
        background-color: rgba(248, 248, 248, 0.30196078431372547) !important;
    }
    
    /* this is for better sub-category  display*/
    li.subCatLi{
        height: 20em !important;
    }
     li.subCatLi p {
        display: block !important;
        bottom: 36px !important;
    }
    .subCatSpan{
        display: block !important;
        direction: rtl;
        max-width: 143px;
        position: absolute;
        bottom: 5px;
        right: 35%;
        text-overflow: ellipsis;
        overflow: hidden;
        font-weight: 700;
        z-index: 11;
        cursor: pointer; 
    }
    button.reviewBtn {
        background-color: rgba(248, 248, 248, 0.30196078431372547) !important;
    }
    .subCatLi,.subCatLi > a {
        cursor: default;
    }
    /* For Bircon logo*/
    .birconLogo {
        width: 95%;
        margin: auto;
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        transition: all 500ms ease;
    }

    .birconImg {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-height: 220px;
    }

    /* for slogan*/
    span.birconim {
        left: 29%;
    }

    .birkon-img {
        width: 100%;
    }
    /* Nav Buttons */
    .bircon-Nav {
        margin-left: 2px;
        display: inline-block;
        padding-left: 5px;
        padding-right: 5px;
        direction: rtl;
    }

    /* For panel */
    div#navPanel {
        top: 132px;
        width: 19em !important;
    }
    div#navPanel > .ui-panel-inner{
   padding: 0 !important; 
}
  
    /*#navList li a{
        position: relative;
        display: inline-block;
        outline: none;
        color: #000000;
        text-decoration: none;
        letter-spacing: 1px;
        text-shadow: 0 0 1px rgb(255, 255, 255);
        font-size: 1.2em;
        text-align: right;
        width: 100%;
        margin-right: 6px;
    } 
    
    #navList li a::after {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 1px;
	background: rgba(50, 124, 187, 0.45098039215686275);
	content: '';
	opacity: 0;
	-webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
	transition: height 0.3s, opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

 #navList li  a:hover::after,
 #navList li  a:focus::after {
	height: 5px;
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}*/


    /* For split view remove the split*/
    .splitView {
        display: none !important;
        /*  media 63 willinherent*/
    }

    .enlargeImg {
        margin: 0 !important;
    }

    /* split view on veiw cart items*/
    .ui-btn > h2,
    .ui-btn > p {
        /*background-color: #f6f6f6 !important;*/
        background-color:rgba(246, 246, 246, 0.3215686274509804) !important;
    }


    /* for add to shopping cart*/


    /* ==========================  */

    .cartTable {
        display: table;
        max-width: 980px;
        width: 100%;
        margin: 0 auto;

    }

    .cartTableRow {
        display: table-row;
    }

    /*.cartTableCell {
	display: inline;
	padding: 3px 10px;
    width: 98%;
    direction: rtl;
}*/

    /* ==========================  */

    .cartTableCell {
        display: table-cell;
        padding: 3px 10px;
        direction: rtl;
    }

    .rightCell {
        width: 60%;
    }

    .leftCell {
        width: 40%
    }

    /* show cart Images*/
    img.cartImg {
        max-height: none !important;
        max-width: none !important;
        width: 49% !important;
        height: auto !important
    }

    /* check out page part one make divs side by side*/
    .divRight {
        width: 40%;
        float: right;
    }

    .divLeft {
        width: 60%;
        float: right;
        clear: left;
    }

    .clearFloat {
        clear: both;
    }

/*
    for print order page  
*/
div.printDivTable:not(:last-of-type) {
    border-bottom: black;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}
div.printDivTable {
    /* clear: right; */
    /* float: left; */
    margin: auto;
    min-width: 50%;
    width: 600px;
    padding: 82px 0 12px 0;
}
div.divTableCell {
    width: 200px;
    max-width: 200px !important;
    min-width: 200px !important;
    direction: rtl;
    /* background-color: green; */
}
.printDivTable .divTableCell:nth-child(2) {
    font-weight: 700;
}
.printDivTable .divTableCell:nth-child(2)::after { 
    content: ":";
} 
.divImgPrint{
    float: right;
    margin-top: -52px;
    max-width: 156px;
   transform: translateX(50%);
transition: all 3000ms ease;
}
.divImgPrint H3{
    max-width: 100%;
    text-align: right;
    white-space: normal;
    font-size: 16px;
}
img.printImg {
    max-width: 100%;
    height: auto;
}


}

/* Second breakpoint is 63.75em (1020px). 4 column layout. Tiles will be 250x250 pixels incl. margin again at the breakpoint. */

@media (min-width: 63.75em) {
    .response-page .ui-content {
        padding: .625em;
        /* 10px */
    }

    /* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
	By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
    .response-page .ui-listview {
        max-width: 62.5em;
        /* 1000px */
        margin: 0 auto;
    }

    /* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
	but we stick to percentage values for demo purposes. */
    .response-page .ui-listview li {
        width: 23%;
        height: 230px;
        margin: .625em 1%;
    }
/* there is alot of writing for cart conternts so I made it wider*/
    li.cartContents {
    float: right;
    width: 30.9333% !important;
    height: 14.5em !important;
    margin: .5625em 1.2%;
    }
    /* For Bircon logo*/
    .birconLogo {
        width: 980px;
        margin: auto;
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        transition: all 500ms ease;
    }

    .birconImg {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    /* for slogan*/
    span.birconim {
     /*   left: 36%;
        top: 1.9em;*/
        top: 0.9em;
        font-size: 1.5em;
        text-align: center;
    }


    /* Nav Buttons */
    .bircon-Nav {
        padding-left: 13px;
        padding-right: 13px;
    }

    /* For panel */
    div#navPanel {
        top: 145px;
    }


    /* for acesss */
    .btn_accessibility {
        overflow: hidden;
        position: fixed !important;
        right: auto !important;
        left: 20px !important;
        top: 48px !important;
    }


}

/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */