﻿
* {box-sizing: border-box;}


body 
	{
	margin: 0;
	padding: 0;	
	color: black;
	text-align:justify;
	font-size:135%;
	}
	
.banner

	{
	background-color: Maroon;
	color: white;
	padding-top :20px;
	text-align:center;
	font-family: times new roman;
	} 
	
.titre 
	{
	font-size: 200%;
	}


.navbar
	{
	display: inline-block;
	padding-bottom: 20px;
	}
 
 .navbar a 
	{
	padding:4px 20px ;
	text-decoration: none;
	color:white;
	}

 .navbar a:hover
	{
	background-color: white;
	border-radius:5px;
	color:maroon;
	}
	
 .actif 
	{
	border-top: 2px solid white;
	border-bottom: 2px solid white;
   	}
	
	
.contenant 
	{
	width: 80%;
	max-width: 1600px;
	margin: 0 auto;
	font-family: garamond;
	animation:opac 1s}@keyframes opac{from{opacity:0} to{opacity:1}
	}


.left
	{
	float: left;	
	width: 36%;
	text-align:right; 
	}

.middle 
	{
	float: left;
	width:8%;
	}

.right 
	{
	float: left;
	width: 55%;
	}


select 
	{
	background: white;
	border: 1px solid maroon;
	width:50%;
	}



.footer 
	{
	background-color: maroon;
	color:white;
	margin: auto; 
	width: 100%; 
	padding: 25px 0px 10px 0px;
	clear: left;
	text-align : center;
	}



.bouton 
	{
	background-color:Maroon;
	padding:5px 25px ;
	color:white;
	border-radius:5px;
	cursor: pointer;
	}


.a_bouton
	{
	text-decoration:none;	
	}

	
a.lien:link, a.lien:visited  
	{
	padding:5px 10px ;
	color:maroon;
	border-radius:5px;
	} 


.fade 
	{
	animation-name: fade;
	animation-duration: 3s;
	}

@keyframes fade 
	{
	from {opacity: 0} 
	to {opacity: 1}
	}	


a.lien:hover 
	{
	color: black;
	background-color:#ddd;
	}
	
	
.zoom 
	{
	transition: transform 1s; /* Animation */
	width: 300px;
	height: 500px;
	}


.zoom:hover 
	{
	-ms-transform: scale(2); /* IE 9 */
	-webkit-transform: scale(2); /* Safari 3-8 */
	transform: scale(2); 
	}


