.Fitem {
  flex-grow: 1;
  font-size: 1.0rem;
  line-height: 1.2em;
  text-align: center;
  /* width: 2rem;
  /*  padding: 1rem 1rem;  */
                                                       /*background:f6f6ee; */
  /*                          border: 3px solid #51aaa3;  */
  color: black;
  margin: 6px;
}
/*  ***********container for flex box of form inputs************************************  */

.Fitem table {
			 padding-left:50px;
			 }
#container {
	box-sizing: border-box;
	max-width: 500px;  /*  was 600px */
  	margin: 1px auto;
		 padding-left:10px;
		 margin-right:15px
	height: auto !important;
	/*background: #F0F0F0; */
    border: 1px #F8F8F8 ; */

	}
#cart_container {
	box-sizing: border-box;
	/*width: 600px;  /*  was 600px */
  	margin: 1px auto;
		padding-left:10px;
		padding-right:10px;
		padding-bottom:50px;
	height: auto !important;
	/* background: #F0F0F0;
    border: 0px #F8F8F8 ; */

	}
	
	
	
	
.imageContainer {
   margin-left:1px;  /* was 36% */
   display: inline-block;
   position: relative;
   text-align: left;  /* center; */
	 color: black;
	 padding: 1px;
	font-size: 15px;
  /*line-height: 1.2em; */
	
							 
}

.paycontainer {
   width: 350px; 

   display: inline-block;
   position: relative;
   text-align: left;  /* center; */
	 color: black;
	 padding: 2px;
	font-size: 15px;
 						 
}
/*  ***********************************************  */




.txtcontainer {
        display: flex;
				 margin-left:2%; 
        align-items: left;  /*  was centre */
        justify-content: left;
				border : 1px solid;
				/*    remove as effects left hand side line up  padding: 15px;  */
      }
      /* .img {
        max-width: 100%
				 padding-left: 10px;
      }
      /*.image {
        flex-basis: 40%
      }*/
			


}

*/
.caption1 {
    /* Make the caption a block so it occupies its own line. */
    display: block;
}



.imageContainer {
   margin-left:25%;  /* was 36% */
   display: inline-block;
   position: relative;
   text-align: left;  /* center; */
	 color: black;
	 padding: 10px;
	
	
							 
}



.float-right {
 float: right;
 width: 300px;
 height: 200px;
 background-color: red;
 margin: 0 0 0.5rem 0.5rem
 }


 				 				 
.BL {
   position: absolute;
   bottom: 8px;
   left: 16px;
}
/*
.logo{
   position: absolute;
   top: 8px;
   left: 16px;
	 transform: translate(50px, 50px); /* 50PX FROM LEFT  50PX FROM TOP */
} */



.center {
   position: absolute;
   top: 50%;
   left: 25%;
   transform: translate(-50%, -50%);
}
/* **************************************************************************** */

.box {
				border: 1px solid #d9d5d4;
				background: #d9d5d4;    
				text-align: center;
				color: #d91c0b ;  /*  black;     was white  */

				font-size:25px;
				font-family:verdana, sans-serif;
				text-decoration:none;
 
				height:38px;
				line-height: 38px;
				
				
				width:100%
				
							
				}


/* **************************************************************************** */
			
											
/*  ****************  menu top  *******************/



/*  *************  start advert overlaytext box  ********************** */

/*  *************  end advert overlaytext box  ********************** */




  button {
    
  /* remove default behavior */
  appearance:none;
  -webkit-appearance:none;

  /* usual styles */
  padding:10px;
  border:none;
  background-color:#3F51B5;
  color:#fff;
  font-weight:600;
  border-radius:5px;
  width:100%;

}
  /*     button to select payment types  ------------------------------------------------*/
	input.yellowbutton {
	width: 100%;
	height:50px;
	padding: 6px;
	margin-top: 20px;
	margin-bottom: 20px;
	cursor: pointer; 

	box-shadow: 6px 6px 5px; #999;
 							-webkit-box-shadow: 6px 6px 5px #999;
 							 -moz-box-shadow: 6px 6px 5px #999;
							  font-weight: bold;
									  background: #EAF0AE;
												 color: #000;
												 	  border-radius: 10px;
													 border: 1px solid #EAF0AE;
													   font-size: 1rem;


														 }
		input.yellowbutton:hover {

					color: #fff;
					background: #ACB557;
					border: 1px solid #ACB557;
					}


		input[type="submit"] {
    white-space: normal;
    float:left;
    text-align: centre;
		}

		
		/*     button to select payment types  ------------------------------------------------*/
	input.brownbutton {
	width: 100%;
	height:50px;
	padding: 6px;
	cursor: pointer; 

	box-shadow: 6px 6px 5px; #999;
 							-webkit-box-shadow: 6px 6px 5px #999;
 							 -moz-box-shadow: 6px 6px 5px #999;
							  font-weight: bold;
									  background: #EAF0AE;
												 color: #000;
												 	  border-radius: 10px;
													 border: 1px solid #EAF0AE;
													   font-size: 1rem;


														 }
		input.brownbutton:hover {

					color: #fff;
					background: #ACB557;
					border: 1px solid #ACB557;
					}

		
		
		
<* -------------------------------------------------------------------------- */


 


.paytable {
					  display: flex;
  					justify-content: center; /* Horizontally centers the table */
 						 align-items: center;     /* Vertically centers the table */
  					 padding 0 10%;
						 }





*********************************************/
/* tables        for checkout cart                            */
/*********************************************/
#myTable {
  font-size: 1.0rem;
  background-color: #F1F1F1;   /*#CCD6E0; /*#DDD2BF;  /* fawn  */
  /*#C99A5D; */
 border-collapse: seperate;  /* collapse;  */
  empty-cells: show;
  border: 2px 7F99B2; /*#003366;  /* #C99A5D  */
  margin: 30px 10px;
	max-width: 500px; 
 /* width: 310px;  */
	 padding: 0;
  padding-left: 10px;
	padding-right: 10px;
}


#myTable td, #myTable th {
  border: 2px solid #000;
  padding: 8px;
}
 

/* header */
#myTable > thead > tr:first-child > th {
  text-align: left;
  color: white;  /* dark blue  */
	font-style: italic;
	font-size: 1.0rem;
		font-weight: bold;
		 background-color: #777  /* #CCD6E0;  /*  NEW  */
  }

#myTable > thead > tr + tr > th {
    font-style: italic;
	  font-size: 1.0rem;
		font-weight: bold;
  	padding: 10px 10px 5px 10px;
  
    text-align: left;
	  background-color: #777 /*#CCD6E0;  /*  light grey#7F99B2;  /*#3f7ea6;/* dark blue  */
		
	  color: white; 
  }

/* body */

#topTable td
	{
  	background-color: #CCD6E0; /*#DDD2BF;  /* fawn  */
  	padding: 5px 5px 5px 15px;
  	text-align: left;
	vertical-align: top;
  	}
#myTable td
	{
  	background-color: #F1F1F1; /* white;  /*#CCD6E0; /*   light grey#DDD2BF;  /* fawn  */
  	padding: 5px 5px 5px 15px;
  	text-align: left;
	vertical-align: top;
	 border: 1px solid black; /*  #003366;  /* #C99A5D  */
	font-size: 1.0rem;
  
  	}

#myTable th 
	{
  	font-size: 1.0rem;
		font-weight: bold;
  	padding: 10px 10px 5px 10px;
  	text-align: left;
	  vertical-align: top;
	  background-color:  #7F99B2; /*  was light grey  #7F99B2;  /*#3f7ea6;/* dark blue  */
	 background-color: #777; /*#CCD6E0;  /*  NEW  */
	  color: white; 
  	}

.custname {

					margin-left: 10%;
					}
					
@media screen and (min-width: 0px) and (max-width: 600px) {
			 					#myTable {
 									max-width: 380px; 
									}
									}