body
{
background-image: url("DSC_0033.JPG");
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
text-align: center;
color: white;
font-family:arial;
background-attachment: fixed;
font-family: arial;
width: 100%;
margin:0px;

}
#content{
	background-color: rgba(55, 55, 55, 0.8);
	
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	opacity: 1;
	display: flex;
	flex-wrap: wrap;
	font-size: 2em;
	margin-top: 10px;
	margin-bottom: 30px;
}

#titre{
	width: 100%;
	font-size: 2em;
	margin-top: 30px;
	margin-bottom: 0px;
			font: century gotic;
font-variant: small-caps;
}

.soustitre{
	margin-bottom: 50px;
	font-size: 0.5em;

width: 100%;
}
.logo{
	font-weight: bold;
	color: #3877ec;
	
}

#neuch{

margin:auto;
padding: 20px;
font: century gotic;
font-variant: small-caps;
}
#hauterive{

margin:auto;
padding: 20px;
font: century gotic;
font-variant: small-caps;
}
img
{
border: none;
max-height: 300px;
margin:1px;
}

img:hover{
border: solid white 1px;
margin:0px;
}

@media (max-width: 700px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;

	}
	#titre{
		font-size: 1.5em;
		
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
	max-width: 95%;
	max-height: 200px;
	height: auto;
	}
}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}