/* Css Document
----------------------------------------*/
*{ padding: 0px; margin: 0px; } /* Global */

header, footer, nav, section, aside, article{ display: block; } /* Global */

html { 
	background: url(../bg_html.jpg) no-repeat center fixed; 
	-webkit-background-size: cover; /* Chrome et Safari */
	background-size: cover; } /* Global */

h1 { 
	font-size: 14px;
	font-family: "Times New Roman", Times, serif;
	color: #161616; } /* Global */
	
h2 { 
	font-size: 14px;
	font-family: "Times New Roman", Times, serif Arial;
	color: #333333; } /* Global */

h3 { 
	font-size: 17px;
	font-family: "Times New Roman", Times, serif;
	color: #161616; } /* Global */

/* Overall_Header
----------------------------------------*/
#content{
	display: block;
	margin: 10px auto 10px auto;
	padding: 10px 0px 0px 0px;
	width: 1000px;
	font-size: 14px;
	font-family: "Times New Roman", Times, serif;
	color: #111111; } /* Global */
	
@media screen and (max-width: 1200px) { 
	#content{ 
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		width: 100%;
		font-size: 25px; } }

/* Page
----------------------------------------*/
table{ 
	margin: auto;
	width: 100%;
	border-spacing: 0px;
	border-collapse: collapse; } /* Global */
	
td{ 
	vertical-align: middle;
	text-align: center;
	font-size: 14px;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	color: #333333; } /* Global */
	
p{ font-size: 14px; } /* Global */
	
a:link, a:visited, a:active{ 
	color: #333333;
	text-decoration: none; } /* Global */

a:hover{ 
	color: #333333;
	text-decoration: none; } /* Global */
	
@media screen and (max-width: 1200px) { td{ font-size: 25px; } }

/* Page Default et Widget
----------------------------------------*/	
#contentWidget{
	display: table; 
	margin: 0px;
	padding: 0px;
	width: 1000px; }
	
#contentWidget1{
	display: table-cell;
	padding: 10px 10px 10px 10px;
	width: 200px;
	float: left; 
	line-height: normal;
	position: relative; }
	
#contentWidget2{
	display: table-cell;
	padding: 10px 10px 10px 10px;
	width: 760px;
	min-height : 350px;
	float: left; 
	line-height: normal;
	position: relative;
	background-color: rgb(226, 226, 226);
    background-color: rgba(226, 226, 226, 0.7); }

nav{ width: 200px; }

nav ul{ 
	list-style: none;
	text-align: center; }

nav li{
	margin: 10px 0px;
	padding: 0px 10px;
	background-color: rgb(226, 226, 226);
    background-color: rgba(226, 226, 226, 0.7); }
	
nav li a{
	display: block;
	font-size: 17px;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	line-height: 50px;
	text-decoration: none;
	color: #161616; }
	
@media screen and (max-width: 1200px) { #contentWidget{ width: 100%; } }
	
@media screen and (max-width: 1200px) { 
	#contentWidget1{ 
		padding: 0px 0px 0px 0px;
		width: 100%; } }
	
@media screen and (max-width: 1200px) { #contentWidget2{ width: 100%; } }
	
@media screen and (max-width: 1200px) { nav{ width: 100%; } }
	
@media screen and (max-width: 1200px) { 
	nav li{
		margin: 20px 0px 20px 20px;
		padding: 10px 0px; } }
	
@media screen and (max-width: 1200px) { 
	nav li a{
		font-size: 50px;
		line-height: 70px; } }
	
/* Page Projets - Galerie Photos
----------------------------------------*/	
.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px; }

.gallery img {
	width: 100%;
	background-color: rgb(226, 226, 226);
	background-color: rgba(226, 226, 226, 0.7); 
	object-fit: fill;
	position: relative; }

	
@media screen and (max-width: 1200px) { .gallery { grid-template-columns: repeat(1, 1fr); } }

@media screen and (min-width: 1200px) { 
	.gallery img:hover {
		padding: 5px 5px 5px 5px;
		border: 1px solid #ddd;
		z-index: 9;
		transform: scale(2.5);
		transition: transform ease 0.5s; } }
	
/*.gallery img.full {
	position: fixed;
	top: 0; left: 0; z-index: 999;
	width: 100vw; height: 100vh;
	object-fit: fit;
	background: rgba(0, 0, 0, 0.7); }

.gallery img.full:hover {
	z-index: 999;
	transform: none; }*/

/* Overall_Footer
----------------------------------------*/	
footer{
	margin: 20px auto 20px auto;
	padding: 10px 0px;
	width: 1000px;
	Bottom : 20px;
	font-size: 14px;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	color: #ffffff;
	background-color: rgb(120, 120, 120);
    background-color: rgba(120, 120, 120, 0.5); } /* Global */

footer p{ 
	text-align: center;
	font-size: 14px;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	color: #ffffff; }
	
@media screen and (max-width: 1200px) { 
	footer{ 
		margin: 20px 10px 20px 10px;
		width: 100%; } }

@media screen and (max-width: 1200px) { footer p{ font-size: 25px; } }