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;
}

.fixHeaderSpacer {
    height: 120px;
}

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

.LogoImage{
    width:140px; 
    float:right; 
    padding:3px 20px 3px 5px"
}

.DropdownRow{
    width:100%;
    border-top:3px solid rgba(47, 70, 119, 1);
    background-color:#349225;
    background-image:unset;
    height: 35px;
}

/* 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
}


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

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

h3 {
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color:#003366;
}

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 {
    font-weight: normal;
    text-decoration: none;
    margin:0;
    padding:0;
}

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

a:hover {
    color: green;
    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 */


.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
}


 /* ItemInfo stuff  */

 .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    padding:10px;
    box-sizing: border-box;
    width:100%;
}

.flex-container hr {
    width: 100%;
    height: 1px;
    flex: 0 0 100%;
    border: none;
    background-color: #ccc;
}

.item-card {
    flex: 1 1 calc(50% - 20px);
    border: 1px solid black;
    box-sizing: border-box;
}

.item-card img {
    max-width:100%;
}


.VidInfoHolder{
    flex: 1 1 calc(50% - 20px);
    max-width: 50%;
    padding: 20px;
    box-sizing: border-box;
    border:1px solid gray
}

.AlsoAvalableInHolderFlex{
    padding:10px;
    width:250px;
    height:auto;
    background-color:#F5F5F5;
}

.AlsoAvalableInHolderFlex select {
    font-size:16px
}

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

  .PriceBox{
    width:300px;
    height:auto;
    padding:10px;      
    background-color:#F5F5F5;
}


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

.ItemVid {
    /* 1) make it fill the width of its parent */
    width: 100%;
    /* 2) force a 16:9 aspect ratio */
    aspect-ratio: 16 / 9;
    /* 3) ensure the poster/video covers the container */
    object-fit: cover;
    /* center it in case of cropping */
    object-position: center;
    /* remove old max-height rule */
    height: auto;
}


/* Cool Menu Dropdown CSS */

.Burger {display:none}

.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; 
    background-color:unset;
       
}

.dropbtnMnu a{           
    text-decoration:none; 
    font-weight:bold;
    color:white;
    background-color:unset 
}

.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;
    background-color:unset
}

/* 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 */


.HeaderFont {
    font-size:36px;
    color:#2f4677;
    font-weight:bold;
    padding-bottom:5px;
    box-sizing:border-box;
}


/* About Us */
#EK1919 {
    scroll-margin-top: 140px;
}

#NAAS {
    scroll-margin-top: 150px;
}

#FindUs {
    scroll-margin-top: 150px;
}
 /*====================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}


    .ImgHolder,
    .InfoHolder,
    .item-card,
    .VidInfoHolder {
        flex: 1 1 100%;
        max-width:100%;
    }	

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

@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.*/

    
}