@font-face {
  font-family: 'TEMPSITC';
  src: url('../font/tempsitc.ttf') format('truetype');
}

html {
	font-size: 100%;
}

body {
	background-image: url(../img/papier-recycle-m.jpg);
	background-size: repeat;
}
@media (max-width: 320px) { body {font-size:0.8rem;} }
@media (min-width: 480px) { body {font-size:1.1rem;} }
@media (min-width: 640px) { body {font-size:1.4rem;} }
@media (min-width:960px) { body {font-size:1.7rem;} }
@media (min-width:1100px) { body {font-size:2.2rem;} }

/* règles de bases */

h1 {
  font-size: 1.5em;
  color: #000;
  font-weight:lighter;
  text-align:center;
  display:block;
}
p{
	line-height: 1.2em;
}

ul {
	margin-top: 5px;
	margin-bottom: 15px;
}

ul li {
	margin: 5px 0;
	line-height: 1.1em;
	list-style-type: disc;
	margin-left: 25px;
}

b {
	font-weight: bold;
}

i {
	font-style: italic;
}


/*****************/

	/* pour le header */

#header {
	display: block;
	background-color: #07aeb7;
	font-family: 'TEMPSITC', sans-serif !important;
	font-weight: 800;
}



#header.energies-renouvelables {
	background-color: #A4C783;
}

#header.maison-innovante {
	background-color: #CBBE7E;
}

#header.ligne-bleue-vosges {
	background-color: #8C92D1;
}

#header.zone-rouge {
	background-color: #F04128;
}

#header.bras-chemises {
	background-color: #769C90;
}

#header.cimetiere-militaire {
	background-color: #8760A2;
}

#header.lait-bio {
	background-color: #6DC749;
}

#header.maisons-solaires {
	background-color: #F5862D;
}

#header.plantation-haies {
	background-color: #BBE157;
}

#header.viande-bio{
	background-color: #876F5D;
}

#header.reconstruction {
	background-color: #D5E95F;
}


h2.maison-innovante{
	color: #978840;
}

h2.energies-renouvelables {
	color: #8AB066;
}

h2.ligne-bleue-vosges{
	color: #8C92D1;
}

h2.zone-rouge {
	color: #FF5227;
}
h2.bras-chemises {
	color: #6FA197;
}

h2.cimetiere-militaire {
	color: #7F6DA4;
}

h2.lait-bio {
	color: #5AB038;
}

h2.maisons-solaires {
	color: #F5862D;
}

h2.platnation-haies {
	color: #C1DC77;
}

#header #logo-header {
	position: relative;
	float: right;
	width: 20%;
	height: 100%;
}

#header h1 {
	margin-top: 13%;
	margin-left: 0.5em;
	padding-bottom: 16px;
	text-align: left;
}




	/* pour le corp */

.image {
	display: block;
	width: 100%;
	margin-top: 8%;
	box-shadow: 0px 0px 3px #fff;
}

.descriptionImage {
	text-align:center;
	font-family: 'Ubuntu', sans-serif;
	box-shadow: 0px 0px 6px #000;
	background-color: rgb(255, 255, 255);
	background-color: rgba(255, 255, 255, 0.4);

	font-size: 1em;
}

.descriptionTexte {
	padding: 25px;
	margin-top: 8%;
	font-family: 'Ubuntu', sans-serif;
	box-shadow: 0px 0px 6px #000;
	background-color: rgb(255, 255, 255);
	background-color: rgba(255, 255, 255, 0.4);

	font-size: 1em;
}


.descriptionTexte h2 {
	margin-bottom: 25px;
	font-size: 1.5em;
}

.descriptionImage p {
	padding-top: 1.2em;
	padding-bottom: 1.2em;
	padding-left: 1.2em;
	padding-right: 1.2em;
}

.formuleExplicative {
	padding: 25px;
	margin: 35px 25px;
	font-family: 'Ubuntu', sans-serif;
	background-color: white;

	border: solid 2px gray;


	font-size: 1em;
}

.formuleExplicative bold {
	color : red;
}

.informationComplementaire {
	font-size: 0.9em;
	font-style: italic;
}

h2 {
	color: #07AEB7;
}

iframe {
	margin-top: 25px;
	margin-bottom: 25px;
	width: 100%;
	height: 300px;
}

audio{
	margin-bottom: 20px;
}

/* le p qui entour le a */

p.haute-definition {
	padding-bottom: 0;
}

/* le a */
.haute-def:visited,
.haute-def:hover,
.haute-def:visited,
.haute-def:active,
.haute-def:link {
	color: #07AEB7;
}

	/*Pour le footer*/
#footer {
	width: 100%;
	display: inline;
	font-family: 'Ubuntu', sans-serif;
}

#footer #footer-left-part {
	width: 35%;
	padding-left: 1em;
	padding-top: 1em;
	text-align: left;
	padding-bottom: 1em;
}

#footer #footer-left-part #footer-logo {
	width: 100%;
}

#footer #footer-rigth-part {
	width: 35%;
	padding-right: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
	float: right;
}

#footer #footer-rigth-part #footer-chemise-carte {
	width: 100%;
}

#footer #footer-adress {
	padding-top: 0.5em;
	font-size: 0.75em;
	text-align: center;
}

#div-logo .logo {
	width: 100%;
}