/**************************************    Mobile Phone     ***********************************/


body { 	background-image: url("/Images/Background.jpg");   }
  
/*   added the above to add Background Colour   8 May 2024 RJS */

* {
 margin:0px;
 padding:0px;
 border:0px;
}


.logo{  
text-align:left ;}

.logo img{
width: 110px;
margin:10px; }

.burger{
position: absolute;  
left: 150px;
top: 10px;
}


.burger button img{
width: 20px;
	}

	

/* top, right, bottom, left */
/* top-bottom / left-right */

/*div p { text-align:left; margin:3%	}*  RJS 23May24 */

li { list-style: none; margin:5px 0px;  } 

ul { margin-bottom:40px; }

a { text-decoration-line: none}

a:hover {  text-transform: capitalize;  color: #ff0000; /* font-family: "Comic Sans MS" */;}

header img{ max-width:width 80px ; border:0px;} 

footer p img { 	display:block; 	margin: o auto;}
footer .logo img { float: right; }

.right{float: right;}

/*.right figure img{ margin: 0 15px; width:360px; border: 15px solid red;}
.right figcaption{ margin: 0 15px; width:360px; border: 15px solid red;} */
.right div p{ margin:0 15px}

figure  {
	text-align: center;		
	}	

figcaption {
	text-align:center;	
	}	

p {
text-align:left; 
margin:3%;
}

/***************************************  "navigationDesktop" ***********************************//* top, right, bottom, left */

.navigationDesktop
	{
	display:block;
	margin-left:20px; 
	margin-bottom: 10px;
	}

nav {
	display: block;
	height:40px; 
	width: 140px;
	margin:auto auto;
	text-align: center;
	}


nav a	{
	display: block;
	color: black;
	}

nav a:hover{
	background:transparent; 
	color:black;
	border-radius:0px 40px 40px 0px;
	}

nav ul{
	list-style: none;
	/* border:solid 2px blue;  */
	}

nav ul li{
	border-radius:0px 40px 40px 0px;
	float: left;
	width: 141px;
	height: 24px;
	line-height: 24px;
	background: white;
	border: 1px solid rgb(119, 172, 233);
	}

nav ul li:hover{
	border-radius:0px 40px 40px 0px;
	float: left;
	width: 141px;
	height: 24px;
	line-height: 24px;
	background: transparent;
	border: 1px solid black}
		
                          
nav{
display: inline ;  
	}

.container{
   		display:grid;
		grid-template-columns:100%;
		grid-auto-rows:minmax(auto, auto);  
      	grid-auto-flow: rows  auto ;
      	grid-gap:5px;
      	 }
      	
.container img{ width:80%; border:10px}

a:active {
		color: #ff0000;  }

a:hover {
		text-transform: capitalize;
		color: #ff0000;
		}


header { 
		overflow:auto;
} 


.menue  {

	width: 50%; 
	margin:5px 0 0 0; }

	


/* top, right, bottom, left */

/**************************************    HUDLE Tablet Screens      *************************************/

@media(min-width:1000px){
.container{
	grid-template-columns:repeat( 2 ,1fr) ;
	grid-auto-rows:minmax(450px, auto);
	}  }

 /**************************************    Laptop Screens             ************************************/

/* @media(min-width:800px){
.container{
      	grid-template-columns:repeat( 3 ,1fr)  ;
      	grid-auto-rows:minmax(450px, auto);
		}   }

/******************************            Desktop Screens       ****************************************/

@media(min-width:1400px)
{

.container	{
      		grid-template-columns:repeat( 4 ,1fr) ;
			grid-auto-rows:minmax(450px, auto);
			grid-row-gap: 5em; 
			} 

/*  grid-row-gap: 5em;
}


/**********************************        End Screens       *********************************************/