/* Page 332 HTML, XHTML & CSS */
/*										*/
/* Cascade Style Sheet for Cornerstone Website */
/*	          	Ralph Smith	    		*/
/*
/**************************************    Mobile Phone     ***********************************/

* {
	margin:0px;
	padding:0px;
	border:0px;
   }
   
   /*body { background-image:url("../Images/Background.jpg");} */

   #logo img{
	width: 110px;}
  

	#logo button{
	position: absolute;
	  left: 150px;
	  top: 10px;
	}

	#logo button img{ width:20px;}
 

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

   body{
	background-color:#39996B;
	}
  
   
   /* top, right, bottom, left */
   /* top-bottom / left-right */
   
   li { list-style: none; margin:5px 0px;  } 
   
   ul { margin-bottom:20px; }
   
   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;} 
   
   .logo img{ margin:10px; width: 110px; }
   
   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}
   
   /***************************************  "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:#FFFFCC; 
	   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:#FFFFCC;
	   border: 1px solid black;
	   }
   
   nav ul li:hover{
	   border-radius:0px 40px 40px 0px;
	   float: left;
	   width: 141px;
	   height: 24px;
	   line-height: 24px;
	   background:#FFFFCC;
	   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;
			 text-align:center; }
			 
   .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:800px){
   .container{
	   grid-template-columns:repeat( 2 ,1fr) ;
	   grid-auto-rows:minmax(450px, auto);
	   }  }
   
	/**************************************    Laptop Screens             ************************************/
   
   /* @media(min-width:1400px){
   .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);     	 
			   } 
   
   
   div figure img {	
				   display: block;
				   margin: 0 auto;  }	
   figcaption{
			   text-align:center;	}	
   
   }
   
   /**********************************        End Screens       *********************************************/
   
   
   /* top, right, bottom, left */
   /* top-bottom / left-right */
   
   li { list-style: none; margin:5px 0px;  } 
   
   ul { margin-bottom:20px; }
   
   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;} 
   
   .logo img{ margin:10px; width: 110px; }
   
   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}
   
   /***************************************  "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-color:#FFFFCC;  
	   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: #FFFFCC;
	   border: 1px solid black;
	   }
   
   nav ul li:hover{
	   border-radius:0px 40px 40px 0px;
	   float: left;
	   width: 141px;
	   height: 24px;
	   line-height: 24px;
	   background: #FFFFCC;
	   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;
			 text-align:center; }
			 
   .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:800px){
   .container{
	   grid-template-columns:repeat( 2 ,1fr) ;
	   grid-auto-rows:minmax(450px, auto);
	   }  }
   
	/**************************************    Laptop Screens             ************************************/
   
   /* @media(min-width:1400px){
   .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);     	 
			   } 
   
   
   div figure img {	
				   display: block;
				   margin: 0 auto;  }	
   figcaption{
			   text-align:center;	}	
   
   }
   
   /**********************************        End Screens       *********************************************/
   
   
   /* top, right, bottom, left */
   /* top-bottom / left-right */
   
   li { list-style: none; margin:5px 0px;  } 
   
   ul { margin-bottom:20px; }
   
   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;} 
   
   .logo img{ margin:10px; width: 110px; }
   
   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}
   
   /***************************************  "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: #FFFFCC;
	   border: 1px solid black;
	   }
   
   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;
			 text-align:center; }
			 
   .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:800px){
   .container{
	   grid-template-columns:repeat( 2 ,1fr) ;
	   grid-auto-rows:minmax(450px, auto);
	   }  }
   
	/**************************************    Laptop Screens             ************************************/
   
   /* @media(min-width:1400px){
   .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);     	 
			   } 
   
   
   div figure img {	
				   display: block;
				   margin: 0 auto;  }	
   figcaption{
			   text-align:center;	}	
   
   }
   
   /**********************************        End Screens       *********************************************/