html {
	box-sizing: border-box;
	background: url('../images/backgrounds/hp-sg-fountain-1024.jpg') fixed center;
	background-size: cover;
}
/*header styles*/
header {
	display: grid;
    grid-template-columns: auto;
	justify-content: space-around;
	color: #FFFFFF;
	padding: 35px 100px 0;
	text-align: center;
}
	
.see-through {
	border: 5px solid #000000;
	background-color: rgb(192, 192, 192, 0.8);
	border-radius: 12px;
	padding: 10 0px;
	margin: 10px 0 10px 0;
}
/*
	border: 5px solid #000000;
	background-color: rgb (255, 255, 255,0.9)
	border-radius: 12px;
	padding: 10 0px;
	margin: 10px 0 10px 0;
}*/

header h1
{
	color: #CC3300;
	text-shadow: 2px 2px white;
	font-size: 50px;
}

header h3
{
	color: #CC6600;	
	text-shadow: 2px 2px white;
	font-size: 30px;

}

header nav li{
	margin: 0 15px;
	}

header nav li:first-child{
	margin-left: 0;	
	}

header nav li:last-child{
	margin-right: 0;	
}

/*nav styles*/
 .nav{
	flex-direction: row;
	flex-wrap: wrap;
	 justify-content: space-around;	
	/*display: grid;
 		 grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  		grid-gap: 2rem;*/

}

.button {
	border-radius: 5px;
	padding: .5em .5em;
	text-decoration: none;
	text-align:center;
	margin-bottom: 0em;
	font-size: 1em;
}
.button-home {
	color: #CC3300;
	/*text-shadow: 1px 1px 1px #000000;*/
	background-color: white;
	background-image: url('../images/backgrounds/home.jpg');
	font-weight: bold;
	/*border: .20em solid #008000;
	max-width: 90%;
	height: auto;
	font-size: 1em;*/
}

.button-land {
	color: green;
	background-color: white;
	background-image: url('../images/backgrounds/plan-extract.jpg');
	font-weight: bold;
	/*border: .1em solid #008000;
	max-width: 90%;
    height: auto;*/
   
}

.button-astro {
	color: #CC6600;
	background-color: white;
	background-image: url('../images/backgrounds/29-5-moon4.jpg');
	font-weight: bold;
	/*background-size: cover;
	border: .1em solid #CC6600;
	max-width: 90%;
    height: auto;*/
	

}
.button-web {
	color: #800080;
	background-color: white;
	background-image: url('../images/backgrounds/web.jpg');
	font-weight: bold;
	/*background-size: cover;
	border: .1em solid #800080;
	max-width: 90%;
    height: auto;*/
	

}
.button-photo {
	color: #008000;
	background-color: white;
	background-image: url('../images/backgrounds/meteor.jpg');
	font-weight: bold;
	/*background-size: cover;
	border: .1em solid #008000;
	max-width: 90%;
    height: auto;*/
	

}
.button-link {
	color: #000000;
	background-color: white;
	background-image: url('../images/backgrounds/inks-150-faint.jpeg');
	font-weight: bold;
	/*background-size: auto;
	border: .1em solid #eb5e81;
	max-width: 90%;
    height: auto;*/
	

}
.button-contact {
	color: #FF00FF;
	background-color: white;
	background-image: url('../images/backgrounds/contacts.jpg');
	font-weight: bold;
	/*background-size: cover;
	border: .1em solid #FF00FF;
	max-width: 90%;
    height: auto;*/
	

}

/*href styles*/
a{
	text-decoration: underline;
	color: inherit;
	cursor: pointer;
	opacity: 0.9;
}

a:hover{
	color: #3333CC;
	opacity: 1;
}

/*section headers*/
.section-header {
	display: flex;
	justify-content: space-around;
	list-style-type: none;
	text-decoration: none;
	background-size: cover;
	background-color: #009900;
	border-radius: 10px;
	font-size: 2em;
	font-weight: bold;
	color: #FFFF00;
}

.section-back a:hover{
	color: #FFFF00;
	opacity: 1;
	background-color: #66FF33;
}
.section-back
{
	border-radius: 5px;
	list-style-type: none;
	color: #FFFF00;
	text-decoration: none;
	font-size: 1em;
	font-weight: bold;
	background-color: #009900;
}

/*photo section*/

.photo {

	display: flex;
  flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;	
	padding: 1em;
	box-sizing: border-box;
	color: #990099;
	text-shadow: 2px 2px white;
	font-size: 1.5em;
}

.photo-gallery {
	display: flex;
	flex-direction: row;
	align-content:start;
	
	}

.photo-grid-wrapper {
  /*display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  /*grid-gap: 1rem;*/
  justify-content: space-between;

}

.photo-grid-container 
{
	/*display: grid;
    grid-template-columns: auto auto;*/
	justify-content: space-around;
}
.photo-grid-item {
	padding: 10px;
	font-size: 1em;
	text-align: justify;
}

.photo-image
	{
	  border: 3px solid red;
	/*border-width: 5px;
	border-color: #FF0000;*/
	border-radius: 20px;
	/*padding: 5px;
	margin: 5px;*/
	max-width: 100%;
	height: auto;
	}
	
.photo-article-center 
	{
	color: #990099;
	text-align: center;
	text-shadow: 2px 2px white;
	font-size: 2em;
}
.photo-card {
	border: 4px solid red;
	border-radius: 20px;
	background-color: rgb(255, 255, 255,0.5);
	max-width: 100%;
	height: auto;
	text-align: center;
	font-size: 1rem;
	color: #000000;
	font-weight: bold;
	margin-bottom: 1em;
}

.photo-card-image
	{
	border-radius: 20px; 
	border:4px solid black;
	max-width: 90%;
	transform-origin: 65% 75%;
  /*transition: transform 1s, filter .5s ease-out;
	 transform-origin: 25% 15%;
	 transition: transform .25s, visibility .25s ease-in;*/
     }
     	
     /* https://w3bits.com/css-image-hover-zoom Quick-zoom Container */	
/*     
.photo-card-image:hover
	 {
	 	box-shadow: 10px 10px 20px #FF3300;
		border: 4px solid red;
		 transform: scale(2);
	}
*/
.photo-card:hover {
	box-shadow: 10px 10px 20px #FF3300;
	border: 4px solid red;
}

     /* https://w3bits.com/css-image-hover-zoom Quick-zoom Container */	

.photo-card-image
	{
	border-radius: 20px; 
	border:4px solid black;
	max-width: 90%;
	transform-origin: 65% 75%;
     }
     	
.photo-card-image:hover
	 {
	 	box-shadow: 10px 10px 20px #FF3300;
		border: 4px solid red;
		 transform: scale(2);
	}
	
/* https://w3bits.com/css-image-hover-zoom The Transformation 

/*OLD IMAGES CLASS

.photo-card-image
	{
	  border:4px solid black;
	border-radius: 20px;
	
	padding: 2px;
	rgin: 2px;
	
.photo-card-image
	{
	  border:4px solid black;
	border-radius: 20px;
	/*padding: 2px;
	rgin: 2px;
	max-width: 90%;
	height: auto;
	/*aspect-ratio : 4/3;*/
	}
*/

/*blog section*/
.blog-html {
	box-sizing: border-box;
	background: url('../images/backgrounds/hp-sg-fountain-1024.jpg') fixed center;
	background-size: cover;
	/*opacity: 0.5;*/
}

.blog 
{
	margin: 10px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	padding: 1em;
	/*box-sizing: border-box;*/
	font-size: 1.5em;
	

}

.blog-p
 {
	
	 text-align: center;
	 font-size: 20px;
	font-weight: bold;
	line-height: .9;
	color: #FFFF00;
	text-shadow: 2px 2px 4px #000000;
	/*text-shadow: 2px 2px 0 #bcbcbc, 1px 1px 0 white;*/
}

.blog-h1
 {
	font-size: 2em;
	/*font-weight: bold;
	line-height: .9;
	color: #FFFF00;*/
	text-shadow: 2px 2px 4px #000000;}

.blog-see-through {
	border: 5px solid #000000;
	background-color: rgb(255, 255, 204, 0.5);
	border-radius: 12px;
	padding: 10 0px;
	margin: 10px 0 10px 0;
}

.blog-photo
	{
	/*margin-left: auto;
	margin-right: auto;
	width: auto;
	display: block;*/
    border-radius: 20px;
	padding: 5px;
	margin: 5px;
	max-width: 90%;
	height: auto;

	}
	/*
	border-radius: 20px;
	padding: 5px;
	margin: 5px;
	max-width: 100%;
	height: auto;*/
}


/*web section*/
	text-shadow: 2px 2px white;
}

/*web section*/
.web 
{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	padding: 1em;
	box-sizing: border-box;
	font-size: 1.5em;
}

.web-p
 {
	margin: 20px;
	font-size: 20px;
	font-weight: bold;
	line-height: .9;
	color: #000000;
	text-shadow: 1px 1px 0 #bcbcbc, 2px 2px 0 white;
}

.web-h1
 {
	font-size: 2em;
	/*font-weight: bold;
	line-height: .9;
	color: #FFFF00;*/
	text-shadow: 2px 2px white;
}

/* links area*/

.links {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	padding: 1em;
	box-sizing: border-box;
	color: #FFFFFF;
	font-size: 1em;
	text-align: center;
}

.a-links
{
	border-radius: 5px;
	margin: 2px;
	padding: 4px;
	list-style-type: none;
	color: #990099;
	text-decoration: none;
	font-size: 1.5em;
	font-weight: bold;
}

a-links:hover{
	color: #FF3300;
	opacity: 1;
}

.links-p
 {
	/*margin: 0;
	font-size: 1em;
	font-weight: bold;
	line-height: .9;*/
	color: #990099;
	text-shadow: 2px 2px white;
}
.links-image
	{
	border-radius: 20px;
	padding: 5px;
	margin: 5px;
	max-width: 100%;
	height: auto;
   }
/* contact area*/

.contacts {
	padding: 1em;
	box-sizing: border-box;
	color:#990099;
	text-shadow: 2px 2px white;

}

.contact-form {
	border-color: #008000;
	display: flex;
	justify-content: center;
	align-content: center;
	font-size: 1em;
	font-weight: bold;
	color: #990099;
	text-shadow: 2px 2px white;
}
/*
td input:not(:placeholder-shown):valid {
	border-left: 1em solid rgb(31 132 87);
}

td input:not(:placeholder-shown):invalid {
	border-left: 1em solid rgb(209 50 81);
}
*/
/*Footer*/

footer{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: #fff;
	background-color: #414a4f;
	font-size: 10px;
}

/*media */
/*@media (min-width: 400px) and (max-width: 800px)*/ 
/*
@media (orientation: portrait)
 {
  .nav button {
	
	flex-direction: column; /*padding: .5em .5em;*/;
	text-decoration: none;
	font-size: 4vh;
	border: 5px;
}
/*
@media  (min-width: 601px) and (max-width: 1200px)
{
	
	  	header nav
	  		{
			display: flex;
			flex-flow: wrap;
			flex-direction: column;
			padding: 4em;
			margin:4em;
			}
			
			 .nav{
					flex-direction: column;
					list-style-type: none;
					flex-flow: wrap;
				}
}
*/
/*
@media  (max-width: 600px)
{
	header
	{
		grid-template-columns: 1fr;
		justify-content: center;
		align-items: center;
		}
		header h1
				{
		 grid-template-columns: 1fr;
		 flex-flow: column wrap;
		justify-content: center;
		font-size: 3em;
		}
	header h3*/
			{
	
	/*font-size: 2em;
			}

	  	header nav
	  		{
			display: flex;
			flex-flow: wrap;
			flex-direction: column;
			padding: 1em;
			}
			
			.nav{
					flex-direction: column;
					list-style-type: none;
					flex-flow: column wrap;
				}

		.button {
					font-size: 1em;
					
				}
		.links {
			/*display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			padding: 1em;
			box-sizing: border-box;
			color: #FFFFFF;
			font-size: 1em;*/
		}

		
}