html, body {
    padding: 0;
    height: 100%;
    margin: 0 auto; /*this tells the browser to centre it - Not supported in IE in quirks mode, works for Opera, FF, Safari */
    font-family: 'Aptos', Verdana, Arial;
    font-size: 14px;
}

.PrintOnly {display:none;}

/* this is all the header stuff */

.fixHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    text-align: center;
    z-index: 100;
}

.SDHdr1200SN {
    background-color: White;
    height: 79px;
    padding: 0px;
    border-spacing: 0px;
    border-top:7px solid green;
}


/* flex stuff */
.contentFlex {
    display: flex;
    flex-wrap: wrap;         /* ⬅️ This is **critical** to allow wrapping to a new row */
    flex-direction: row;
    max-width: 1600px;         /* ⬅️ This makes it responsive */
    width: 100%; 
    margin: 0 auto;
    padding-top: 120px;
    min-height: 100vh;
    align-items: flex-start;
  }
  
  .side_contentFlex {
    width: 190px;
    height: 100%;
    background-color: #fff;
    flex-shrink: 0;
    border: 0px solid yellow;
  }
  
  .main_contentFlex {
    padding: 20px;
    flex-direction: column; /* allows vertical stacking */
    flex: 1;
    box-sizing: border-box;
    background-color: #fff;
    text-align: left;
    border: 0px solid red;
  }

  .footerFlex {
    flex-basis: 100%;        /* Forces a new row in the flex container */
    width: 100%;             /* Ensures it fills entire width of container */
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    background-color: whitesmoke;
    text-align: center;
    border-top:3px solid green;
  }

  /* back to normal*/
  .ScotnetHome320 {display:none}

.Breadcrumb {
    color: #000000;
    text-decoration: none;
    background-color: #FFFFFF;
    padding-right: 5px;
    font-size:11px
}

.Breadcrumb:hover {
    color: green;
    text-decoration: underline;
    font-size:11px
}

.RedHold {
    background-color:#ff0000;
    color:white;
    padding:1px 3px 1px 3px;
    border-radius:5px;
    margin:2px; 
    cursor:pointer
}

.AmberHold {
    background-color:#ffbf00;
    color:darkslategrey;
    padding:1px 3px 1px 3px;
    border-radius:5px;
    margin:2px; 
    cursor:pointer
}

.GreenHold {
    background-color:forestgreen;
    color:white;
    padding:1px 3px 1px 3px;
    border-radius:5px;
    margin:2px; 
    cursor:pointer
}

.GrayHold {
    background-color:gray;
    color:white;
    padding:1px 3px 1px 3px;
    border-radius:5px;
    margin:2px; 
    cursor:pointer
}

.PurpleHold {
    background-color:purple;
    color:white;
    padding:1px 3px 1px 3px;
    border-radius:5px;
    margin:2px; 
    cursor:pointer
}

.YellowHold {
    background-color:yellow;
    color:black;
    padding:1px 3px 1px 3px;
    border-radius:5px;
    border:1px solid black;
    margin:2px; 
    font-weight:bold;
    cursor:pointer
}

/* this is all the homepage content stuff */

    .CustHomeSliderHolder{
        width:560px;
        float:left;
        margin-right:20px;
    }

     .CustHomeNewSlider{
        width:100%;
        max-width:560px;
      }

    .HomePageTileDiv {
        width:266px; 
        height:150px;
        margin:0 auto;
        margin:0px 0px 20px 0px;
        color:gray;
        border:1px solid lightgray;       
    }

    .HomePageTileImgDiv {
        width:100%;
        height:100%;
        /*height:140px*/
    }

    .HomePageTileText {
        font-weight:bold; 
        color:gray; 
        padding:7px 5px 0px 5px;
        /* 
        height:30px; 
        font-size:11px; */
    }

    .homePageTileImg {
        max-height: 100px;
        max-width: 100px;
    }

    .homePageTileTxt {
        color: red;
        font-size: 14px;
        font-weight: bold;
    }

    h1 {
        font-size: 24px;
        text-decoration: none;
        font-weight: bold;
        margin:3px 3px 5px 3px;
    }

    h2 {
        color: #000000;
        font-size: 18px;
        text-decoration: none;
        font-weight: bold;
        margin: 0px;
        margin-bottom: 2px;
        margin-top: 5px;
    }

    h3 {
        font-size: 16px;
        font-weight: bold;
    }

    img {border: 0px;}

    table {
        border-spacing: 0;
        border-collapse: collapse; 
        color: #000000;
        font-weight: normal;
        text-decoration: none;
    }

    tr {
        padding: 0px;
        margin: 0px;
    }

    td {
        color: #000000;
        font-weight: normal;
        text-decoration: none;
        padding: 0px;
    }


    /* this is the css to get the table to padd now cellpadding on the table is obsolete in html5 */
  
    table.StdTablePadding th, table.StdTablePadding td {
        padding:3px 5px 3px 5px;
        border:1px solid gray;     
    }

    table.StdTablePadding a {
        padding:3px 5px 3px 5px;
    }

    table.StdTablePaddingNoBorder th, table.StdTablePaddingNoBorder td {  
        padding:3px 5px 3px 5px;        
    }

    table.SJDublin/VanRuns/SetServiceLevel.asp th, table.ComTablePadding td {
        padding:2px 5px 2px 5px;
        margin:0px;
        border:1px solid gray;
        vertical-align:top
    }

   table.ComTablePadding a {
        padding:2px 5px 2px 5px;
    }

    table.ComTablePaddingNoBorder th, table.ComTablePaddingNoBorder td, table.ComTablePaddingNoBorder a {
        border-spacing: 0;
        border-collapse: collapse;  
        padding:2px 5px 2px 5px;        
    }

    p {
        color: #000000;
        font-weight: normal;
        text-decoration: none;
    }

    a {
        color: #000000;
        font-weight: normal;
        text-decoration: none;
    }

    a:hover {
        color: green;
        text-decoration: underline;
    }

    .a-NoUnderline {
        text-decoration: none;
    }

    li {
        color: #000000;
        font-weight: normal;
        text-decoration: none;
    }

    li.offer {
        padding: 7px;
        color: #000000;
        font-size: 11px;
        font-weight: normal;
        }

    li.offerPrc {
        padding: 7px;
        color: Red;
        font-size: 14.5px;
        font-weight: bold;
        }

    select {
        font-size: 11px;
        color: #000000;
        font-weight: normal;
        text-decoration: none;
    }

    .SubCat {
        color: #000000;
        text-align: left;
        text-decoration: none;
    }

    .SubCat1 {
        color: #000000;
        text-align: left;
        text-decoration: none;
    }

    .SubCatHdr {
        width: 200px;
        height: 100%;
        color: white;
        font-size: 11px;
        font-weight: bold;
        text-align: left;
        text-decoration: none;
        background-image: url('/images/BlueGrad.gif');
    }

    .txtListPrc {
        color: #000000;
        font-size: 11px;
        text-decoration: none;
    }

    .txtListPrcOver {
        color: #009900;
        font-size: 11px;
        text-decoration: none;
        font-weight: bold;
        cursor: default;
    }

    a:hover.link {
        color: #009900;
        text-decoration: underline;
    }

    .Hdr {
        color: #000000;
        text-decoration: none;
        font-weight: bolder;
        cursor: pointer;
    }

    .BigHdr {
        color: #000000;
        font-size: 15px;
        text-decoration: none;
        font-weight: bolder;
    }

    .BigHdrArial {
        color: #000000;
        font-size: 14px;
        text-decoration: none;
        font-weight: bold;
    }

    .BigHdrArialGreydOut {
        color: silver;
        font-size: 16px;
        text-decoration: none;
        font-weight: bold;
    }

    .BigHdrArialRed {
        color: red;
        font-size: 16px;
        text-decoration: none;
        font-weight: bold;
    }

    .HugeHdr {
        color: #000000;
        font-size: 25px;
        text-decoration: none;
        font-weight: bolder;
    }

    a:hover.Hdr {
        color: #009900;
        text-decoration: underline;
        font-weight: bolder;
        cursor: pointer;
    }

    a:hover.BigHdrArial {
        color: #009900;
        font-size: 14px;
        text-decoration: none;
        font-weight: bold;
    }

    a:hover.BigHdr {
        color: #009900;
        font-size: 15px;
        text-decoration: underline;
        font-weight: bolder;
        cursor: pointer;
    }

    .techspec {
        color: #000000;
        text-decoration: none;
        font-size: 11px;
    }

    a:hover.techspec {
        color: green;
        font-size: 11px;
        text-decoration: underline;
    }


/* This is the tiles for tile view of prod cats */
    
    .ProdGroupImage {
        width:500px;
        min-height:calc(500 * 0.5);
        overflow:hidden;
        float:left;
        margin:8px 8px 0px 8px 
    }

    .ProdGroupTile {
        width:250px;
        min-height:calc(250 * 0.365);
        display:inline-block;
        margin:10px;
        border:1px solid silver;
    }

    .ProdGroupTileImg {
        width:100%;
        height:100%;
        overflow:hidden;
    }

/* end of tile view */

/* This is the tiles for tile view of items */

    .TileViewOfferImage {
        height:235px;       
        width:385px;
        display:inline-block;
        text-align:left;
        padding:0px;        
        margin:10px 10px 10px 10px;        
        vertical-align:top;
        overflow:hidden      
    }

    .PlayingCard {
        height:250px;   /* height increased from 230px - DF 17/09/2019 */    
        width:190px;
        padding:0px;
        border-radius:7px;      
        border:1px solid silver;
        margin:5px;
        /* box-shadow:10px 10px 5px #888;
        box-shadow:5px 5px 2px lightgray; */
        overflow:hidden; 
    }

    .PlayingCardImg {
        height:150px;               
        width:100%;        
        overflow:hidden; 
        text-align:center; 
        margin:0 auto; 
        margin-bottom:10px;
        border-radius:7px 7px 0px 0px;
    }
/* end of  tile view of items */

    .FastGrid {
        max-width:650px; 
        overflow:auto
    }

    td.offer {
        font-size: 11px;
        color: #000000;
        font-weight: normal;
        text-decoration: none;
    }

    td1.offer {
        font-size: 7.5pt;
        text-decoration: none;
        color: #000000;
    }

    td.Header {
        font-weight: Bold;
        font-size: 11px;
        text-decoration: none;
        color: #000000;
    }

    .eshotGOLD {
        font-size: 48px;
        color: #F1D92B;
    }

    .eshotWHITE {
        font-size: 24px;
        color: #FFFFFF;
    }

    .eshotBLACK {
        font-size: 18px;
        color: #000000;
    }

    .fakeLink {
        text-decoration: underline;
        cursor: pointer;
        color: blue;
    }

    .fakeLink2 {
        cursor: pointer;
        color: #990000;
    }

    .fakeLink2:hover {
        text-decoration:underline
    }


    /* this is the style for the blue 20px shading at the top of a cell */
    .BlueGrad {
        height: 20px;
        /*background-image: url('/images/BlueGrad.gif');*/
        background-image: url('/../../../images/Header6.jpg');
        text-decoration: none;
        color: #FFFFFF;
        font-weight: bold;
        text-align: center;
    }

    .WhiteLink {
        text-decoration: none;
        color: #FFFFFF;
        font-weight: bold;
    }

    .NormTextHLink {
        text-decoration: none;
        color: #000000;
    }

    .NormTextHLinkSplash {
        text-decoration: none;
        color: #000000;
        font-size: xx-small;
    }

    .GrayBar200px {
        background-image: url('/Images/GreyBar200.jpg');
        text-align: left;
        width: 200px;
        height: 23px;
        float: left;
        color: #FFFFFF;
        text-align: center;
        padding-top: 0px;
        margin: 0px;
    }

    .GrayBar177px {
        background-image: url('/Images/GrayBar.jpg');
        text-align: left;
        width: 100% /* end of  tile view of items calc(100% - 23px)*/;
        height: 23px;
        float: left;
        color: #FFFFFF;
        text-align: center;
        padding-top: 0px;
        margin: 0px;
    }

    .Scotnet177px {
        background-color:#e20000;
        text-align: left;
        width: 100% /* end of  tile view of items calc(100% - 23px)*/;
        height: 23px;
        float: left;
        color: #FFFFFF;
        text-align: center;
        padding-top: 0px;
        margin: 0px;
    }

    .GreydOutImage {
        filter: alpha(opacity=25);
        moz-opacity: .25;
        opacity: .25;
    }

    .GreydOutDiv {
        filter: alpha(opacity=50);
        moz-opacity: 0.5;
        opacity: 0.5;
    }


    #tdHdrNav {
        height: 35px;
        width: 100%;
        background-image: linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 19%);
        background-image: -o-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -moz-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -ms-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-gradient( linear, left bottom, left top,color-stop(0.23, #F5F5F5), color-stop(0.89, #D5D9D6 ) );
    }

    #tdHdrNavSN {
        height: 35px;
        width: 100%;
        background-image: linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 19%);
        background-image: -o-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -moz-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -ms-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-gradient( linear, left bottom, left top,color-stop(0.23, #F5F5F5), color-stop(0.89, #D5D9D6 ) );
    }

    #tdHdrNavSN {
        height: 35px;
        width: 100%;
        background-image: linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 19%);
        background-image: -o-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -moz-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -ms-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-gradient( linear, left bottom, left top,color-stop(0.23, #F5F5F5), color-stop(0.89, #D5D9D6 ) );
    }

    .tdGrad {
        background-color: #F5F5F5;
        height: 20px;
        width: 100%;
        background-image: linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 19%);
        background-image: -o-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -moz-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -ms-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, #F5F5F5), color-stop(0.89, #D5D9D6 ) );
    }



    .SelectedHdrNav {
        position: relative;
        top: 5px;
        z-index: 2000;
        float: left;
        width: auto;
        height: 27px;
        min-height: 27px;
        line-height: 27px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        padding-left: 5px;
        padding-right: 5px;
        background-image: linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 19%);
        background-image: -o-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -moz-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -ms-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, #F5F5F5), color-stop(0.89, #D5D9D6 ) );
    }

    .HdrNav {
        float: left;
        width: auto;
        height: 25px;
        min-height: 25px;
        line-height: 25px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        padding-left: 5px;
        padding-right: 5px;
        position: static;
    }


    .fixHeaderSpacer {
        height: 120px;
    }

    .ItemInfo_ItemImg {
        max-width: 95%;
        width: 500px; 
        height: auto;
        min-height: 200px;
        max-height:700px;
        float: left;
        vertical-align: top;
        overflow: hidden;
        border:1px solid lightgray; 
        margin-bottom:10px
    }

    .ItemInfo_ItemImgFlex {
        max-width: 95%;
        width: 500px; 
        height: auto;
        min-height: 200px;
        max-height:700px;
        float: left;
        vertical-align: top;
        overflow: hidden;
        border:1px solid lightgray; 
        margin-bottom:10px
    }

    .ItemInfo_Button {
        display: inline-block;
        margin-right: 75px;
    }

    .closeDiv {
        font-size: 18px;
    }

    .DetailedView_Desc {
        border: solid 0px black;
        overflow: hidden;
        zoom: 1;
    }

    .AdvSearch_Cols {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;

        -webkit-column-gap: 25px;
        -moz-column-gap: 25px;
        column-gap: 25px;
    }

    .MenuGrid_Cols {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;

        -webkit-column-gap: 10px;
        -moz-column-gap: 10px;
        column-gap: 10px;
    }


 /* ItemInfo stuff  */
    .AlsoAvalableInHolder{
         margin-bottom:10px;
         margin-left:10px;
         padding:10px;
         min-width:220px;
         height:auto;
         float:left;
         background-color:#F5F5F5;
         border-radius:15px;
    }

    .AlsoAvalableInHolderFlex{
        margin-bottom:10px;
        margin-left:10px;
        padding:10px;
        width:220px;
        height:auto;
        float:left;
        background-color:#F5F5F5;
        border-radius:15px;
        align-self: flex-end;  /* 🔑 This aligns just this item to the bottom */
   }

  .AlsoAvalableInBox {
      padding:2px;
      height:25px;
      width:35px;
      line-height:25px;
      float:left;
      border:1px solid silver;
      text-align:center;
  }

  .ItemInfoDesc{
    width:98%;
    max-width:95%;
    height:auto;
    border:0px solid red
}

.ItemInfoDescFlex{
    width:98%;
    max-width:95%;
    height:auto;
    border:1px solid red;
    order: 1;
}

.PartsFlex{
    width:300px;
    border:1px solid red;
    order: 2;
}

.HeaderText {
    font-size:28px;
    font-weight:100;
    color:rgba(63,63,63,1);
    text-align:center;
    height:40px;
    text-align:left
}

.btn {
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333333;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    
}

btn:hover {
    text-decoration: none;
}


/* Cool Menu Dropdown CSS to replace JS - Mar 17*/
    .dropholder{
        height:auto;
        width:auto;
        background: black;
        background: linear-gradient(#505050,#D0D0D0);
        margin:0 auto;
        border-radius:3px;
    }

    /* Dropdown Button */
    .dropbtn {
        background:none;
        font-size: 12px;
        border: none;
        cursor: pointer;
        font-weight:bold;
    }

    /* Dropdown Button for the header menus */
    .dropbtnMnu {
        background:none;                
        border: none;
        cursor: pointer;
        font-weight:bold;
        height:25px;
        min-height:25px;
        line-height:25px;
        padding-left:5px;
        padding-right:5px;     
    }

    .dropbtnMnu a{           
        text-decoration:none; 
        font-weight:bold;
    }

    .dropbtnMnu a:hover{
        background:none;                
        text-decoration:none;
        font-weight:bold;
    }

    /* The container <div> - needed to position the dropdown content */
    .dropdown {
        position: relative;
        display: inline-block;
        width:auto
    }

    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
        /*display: none;*/

        position: absolute;
        
        /*background-color: #f9f9f9;*/
        line-height:25px;        
        background-color:white;
        min-width:220px;
        border:1px solid silver;
        text-align:left;

        /*width:200px;*/
        
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        border-bottom:1px solid #D0D0D0; 
        border-left:1px solid #D0D0D0;
        border-right:1px solid #D0D0D0;
        padding:10px;

        max-height:0px;
        opacity:0;
        visibility:hidden;
    
        /* these are the transition settings*/      
        transition-property: max-height, opacity, visibility;
        transition-duration: 0.3s;
        transition-timing-function: ease-in;
        transition-delay: 0.1s;   
    }

    .Cover{
        background-color:gray;
        position:fixed;
        top:0px;
        left:0px;

        width:0px;
        height:0px;        
    }


    /* Links inside the dropdown */
    .dropdown-content a {
        padding: 1px 16px;
        text-decoration: none;
        display: block;
        text-align:left; 
    }

    .Cover:hover{       
        visibility:hidden;
        transition-property: visibility;
        transition-delay: 0.1s;    }


    /* Change color of dropdown links on hover */
    .dropdown-content a:hover {
        /* background-color: #f1f1f1;*/
        text-decoration: underline;
        color:green;
    }

    .dropdown:hover .Cover {        
        width:100%;
        height:100%;
        display:block;
        z-index:99;
        filter:alpha(opacity=4);
        opacity: 0.4;
    }

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
        /*display: block; - use visibility instead....*/
        max-height:800px;
        opacity:1;
        visibility:visible;
        z-index:1000;
    }

    .dropdown:hover .dropbtnMnu {
        background-color:white;
        position:relative;
        top:0px;
        left:0px;
        z-index:1000;
    }

    /* This controls the width of the big dropdown with four cols.  Media query drops the last col when on small screen*/
    .DropdownWidth {width:1100px}

    .DropDownDiv {
        display:inline-block;
        text-align:left;
        vertical-align:top;
        width:200px;
        min-height:220px;
        border-right:1px solid gray;
        padding-left:7px
    }

    /* Change the background color of the dropdown button when the dropdown content is shown */
    .dropdown:hover .dropbtn {
        color:black;
    }

/* End of Menu Dropdown CSS */

    .CustHomePanel{
        width:250px;
        float:right;
        text-align:center;
        margin:0 auto;
        background-color:#f6f6f6;
        padding-bottom:20px
    }

   .blurb {
        margin:10px; 
        padding:5px 10px 5px 10px; 
        float:left; 
        width:260px; 
        height:80px; 
        border:1px solid gray; 
        border-radius:10px
    }

/* Start of transition stuff*/

    .fadeItIn {
        opacity:0;

    /* these are the transition settings*/
        animation: fadein;
        animation-duration: 3s;
        animation-delay: 0s;
        animation-fill-mode:forwards;
    }

    @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

/* End of transition stuff*/

    .ProductsTable2 {
        width:660px;
        max-width: 660px;
        height:250px;
        white-space:nowrap;
        overflow-x:auto;
        overflow-y:hidden;        
    }

    #MainImg1, #MainImg{
        max-width:100%;  
        max-height:450px;
		min-height:370px;
    }


    .PriceBox{
        width:300px;
        height:auto;
        float:left;
        margin-left:10px;
        margin-bottom:10px;
        padding:10px;      
        border-radius:15px;
        background-color:#F5F5F5;
    }

    .PriceBoxFlex {
        width:300px;
        height:auto;
        float:left;
        margin:10px;
        padding:10px;      
        border-radius:15px;
        background-color:#F5F5F5;
    }
    
    .HeaderFont {font-size:36px}
    .Burger {display:none}

    #EK1919 {
        scroll-margin-top: 140px; /* adjust as needed */
      }

      #FindUs {
        scroll-margin-top: 150px; /* adjust as needed */
      }
 /*====================different screen css=======================*/


 @media only screen and (min-width : 768px) and (max-width : 1024px) {
    .HeaderFont {font-size:36px}
    .Burger {display:block}

    .Christmas {display:none}
    .FeaturedItem {display:none}
    .DropdownWidth {width:800px}
    .DropDownDiv {width:190px;}

	.AlsoBought{
		max-width:650px;
	}
}


@media only screen and (min-width : 250px) and (max-width : 767px) {
    .HeaderFont {font-size:24px}
    .Burger {display:block}
    .main_contentFlex { padding: 0px;}
    .NoDisplayOnPhone {display: none;}
    .side_contentFlex {display:none}

    .ItemInfo_ItemImg {
        width: 95%;
        max-width: 95%;
        float:none;
        margin: 0 auto;
    }

    .PriceBox {
        float:none;      
        margin:0 auto;
        margin-bottom: 10px !important;
    }

    .AlsoAvalableInHolder{
        float:none;
        text-align:center;
        margin:0 auto;
        width:95%;
        max-width:300px;
        min-height:45px;
    }



   #divStage320{        
        position:relative;        
        width:95%;
        text-align:center;
        margin:0 auto;
        display:block;
        height:85px;                        
    }

    .ScotnetHome320 {
        display:block;
    }

    #divStage320 img.opaque {
      opacity:1;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);   
    }

    #divStage320 img.fullOpaque {
      opacity:0;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
    }

    #divStage320 img {
      position:absolute;
      left:0;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
      opacity:0;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);  
    }

    .HomePageTileDiv {
        width:95%;
        height:auto;
        margin:0 auto;
        margin-bottom:10px;
        border:0px
    }

    #ItemImage {max-width:290px;}           
    .Breadcrumb {display:none;}
    table.MobileViewChoice {display:none;}
       
    .ShopDesc {
        font-size:9.5px;
        text-align:left;
    }

    .ShopImg {
        width:58px;
        height:46px;
    }

    #tdHdrNav {display:none;}
    #tdHdrNavSN {display:block;}
   
    .SDHdr1870 {background-image: url('/images/HEADER320.png');}   
     
    .SDHdrHdrContent {display:none;}    
   
    #tdHdrNav320{
        display:table-cell;
        padding-left:10px;
        height:30px;
        width:100%;
        text-align:center;
        background-image: linear-gradient(bottom, #F5F5F5 50%, #D5D9D6  19%);
        background-image: -o-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6  89%);
        background-image: -moz-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6  89%);
        background-image: -webkit-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6  89%);
        background-image: -ms-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6  89%);

        background-image: -webkit-gradient(
	        linear,
	        left bottom,
	        left top,color-stop(0.23, #F5F5F5),
	        color-stop(0.89, #D5D9D6 ));
    }

    .menuDiv {
	    position: absolute;
	    width: 220px;
	    background-color: #F5F5F5;
	    border: 1px solid gray;
	    font: normal 11px Verdana;
	    line-height: 16px;
	    z-index: 100;
	    display: none;
	    padding-bottom: 5px;
	    text-align:left;
        overflow: hidden;
        border-bottom-right-radius:5px;
        border-bottom-left-radius:5px;
    }

    .SDHdrHdrContent320 {display:block;}

    .SDHdr2 {
	    color: #00A400;
	    font-size: 22px;
	    font-family: Arial, Helvetica, sans-serif;
    }
    .SDHdr2a {
	    color: #FFFFFF;
	    font-size:16.5px;
	    font-family:Arial, Helvetica, sans-serif;
	    font-weight:lighter;
    }
    .SDHdr3 {
	    color: #FFFFFF;
	    font-size:10px;
	    font-family:Arial, Helvetica, sans-serif;
	    font-weight:bold;
    }

    #activeTabHold {
	    width:250px;
	    /*left:10px;
	    top:25%;
	    */
	    margin-left:-125px;
	    top:600px;
	    padding:5px;
	    background-color: #fff;
	    color:#000;
	    border:2px solid #000;
	    text-align:center;
	    filter: alpha(opacity=100);
	    opacity: 1.0;
	    z-index: 1001;
	    position:absolute;	
	    display:none;
	    /*box-shadow:10px 10px 5px gray;*/
	    border-radius:15px;	
    }

    .ItemInfo_Button{
        display:inline-block;
        margin-right:10px;
    }

    .closeDiv {font-size:12px;}

    .DetailedView_Desc{
        width:300px;
        float:left;
        border:solid 0px black;
    }

    .AdvSearch_Cols{
        -webkit-column-count:1;
        -moz-column-count:1;
        column-count:1; 
    }

    .SubCat {
	    color: #000000;
	    font-size: 16px;
	    text-align: left;
	    text-decoration: none;
	    display:block;
	    padding-left:15px;	
    }

     .chkoutPayDetails {margin-top:0px;}
  
      /* form on checkout page ID */
      #Details {width:320px;}
  
      .chkoutDiv{
        padding-left:5px;
        padding-right:5px;  
        padding-top:10px;
      }
  
      .SubCatBasket {font-size:11px;}
      table.PhoneOnly {display:table;}
      #ProductsTable2 {width:310px;}
      #CustHomeNewSlider {display:none;}

      #olRecipes{
        column-count:1;
        -moz-column-count: 1;
        -webkit-column-count: 1;
      }

    .homePageTile {width: 300px;}

    .CustHomePanel {float:none;}

    .ulFoot li {        
        color:Gray;
        height:25px;
        line-height:25px;
    }

    .SiteFooter {
        width:95%;
        margin-top:10px
    }

    .basketTable {
        max-width:250px;
    }

    
}

@media print {
    .NoPrint {display: none;}
    .PrintOnly {display:block;}
    .side_content {display: none;}
    .side_contentFlex {display: none;}
    td, th, a, b {color: black;}
     
     /* body {filter: grayscale(100%);  future-proof }  if printing as PDF this makes whole an image, and removes a href's etc.*/

    
}