html {
	background-color: #FFFFFF;
	}
body{
	height: 100%;
	background-color: #E6E6FA;	
	width:auto;
	margin-left: 8%;
	margin-right: 8%;	
	border-left: solid 1px #3f3a35;
	border-right: solid 1px #3f3a35;
	padding-top: 2%;
	}
div.gros{
	margin-left: 28%;	
	width: 29em;
	}
span{
	font-size: small;
	}
#link{
	color: red;
	font-style: italic;	
	}
h4{
	color: black;
	font-family: sans-serif;	
	margin-top: 1%;	
	}
a:link{	
	color: #1E90FF;
	font-size: small;
	text-decoration: none;
	}
a:hover{
	color: #FF0000;
	}
div.menu{
	width: 29em;
	}
div.menu a img{	
	max-width: 15%;	
	border: solid blue 1.5px;	
	}
div#images{
	/*width: 29em;*/	
	}	
[data-tip] {
   position: relative;
   cursor: pointer;    
	}
[data-tip]:hover:after {
   content: attr(data-tip);
   position: fixed;
   margin-left: 390px;
   margin-top: 300px;
   top: 1.5em; 
   left: 0;        
   padding: 5px 8px;
   background: white;
   border: black 1px dotted;  
   color: #000;
   font-family: sans-serif;        
   white-space: nowrap;     
	}
div.blabla{
	padding-top: 1%;
	font-size: small;
	color: black;;
	font-family: sans-serif;	
	width: 29em;
	text-align: justify;
	}
div.blabla img{
	border: none;		
	}
div.new{
	width: 29em;
	}
span#cc{
	color: #1E90FF;	
	}	
.footer{	
	font-size: 1em;	
	margin-top: 2%;	
}
	
	
	---------------------------------------------------------------------
	


@media screen and (max-device-width: 480px){
	body{ 			
		background-color: #E6E6FA;
		border: none;		
		color: black;		
		font-size: smaller;
		margin-left: 0;
		margin-right: 0;							
	}
	div.gros{
		margin-left:5%;	
		width: 25%;
	}	
	.title{		
		font-size: smaller;
		color: black;			
	}
	h4{
		color: black;
		font-family: sans-serif;
		margin-left: 3%;	
	}	
	div#images{	 
	 	max-width: 55%;
	}

	div.blabla{		
		width: 14em;
		font-family: sans-serif;		
		text-align: justify;				
	}
	div.new{
		width: 14em;
		font-size: x-small;	
		text-align: justify;	
	}	
	div.new img{		
		width: 14em;	
	}		
	.footer{
		text-align: left;
		font-size: 0.5em;
		margin-top: 2%;	
		}
	[data-tip] {
    	position: relative;
    	cursor: pointer;    
	}
	[data-tip]:hover:after {
    	content: attr(data-tip);
   	position: fixed;
   	margin-left: 390px;
    	margin-top: 300px;          
   	padding: 1px;
   	background: white;
    	border: black 1px dotted;   
    	top: 1.5em; left: 0;    
    	color: #000;
    	font-family: sans-serif;    
    	font-size: xx-small;    
   	white-space: nowrap;     
	}	
}


@media screen and (max-width: 320px){
	body{ 	   
	   background-color: #E6E6FA;
	   border: none;	
	   color: black;		
		font-size: smaller;
		margin-left: 0;
		margin-right: 0;										
	}
	div.gros{
		margin-left:5%;	
		width: 25%;
	}			 	 
	.title{
		color: black;
		font-size: smaller;			
	}
	h4{
		color: black;
		font-family: sans-serif;		
	}	
	div#images{	 	
	 	max-width: 39%;
	}	
	div.blabla{
		width: 14em;
		font-size: x-small;
		text-align: justify;			
	}
	div.new{
		width: 14em;		
		font-size: x-small;
		text-align: justify;
	}
	div.new img{		
		width: 14em;	
	}
	.footer{
		text-align: left;
		font-size: 0.5em;			
	}	
	[data-tip] {
    	position: relative;
    	cursor: pointer;    
	}
	[data-tip]:hover:after {
    	content: attr(data-tip);
    	position: fixed;
   	margin-left: 55px;
    	margin-top: 150px;          
    	padding: 1px;
    	background: white;
    	border: black 1px dotted;   
    	top: 1.5em; left: 0;    
    	color: #000;
    	font-family: sans-serif;   
    	font-size: xx-small;
    	white-space: nowrap;   
	}							

}

@media screen and (min-width: 321px) and (max-width: 480px){
	body{		
		background-color: #E6E6FA;
		border: none;	
		color: black;		
		font-size: smaller;
		margin-left: 0;
		margin-right: 0;					
	}
	div.gros{
		margin-left:5%;	
		width: 25%;
	}		
	.title{
		color: black;
		font-size: smaller;		
	}
	h4{
		color: black;
		font-family: sans-serif;	
	}	
	
	div#images{	
		 max-width: 45%;
	}	
	div.blabla{
		width: 14em;
		font-size: x-small;
		text-align: justify;					
	}	
	div.new{		
		width: 14em;
		font-size: x-small;
		text-align: justify;	
	}	
	div.new img{		
		width: 14em;	
	}
	.footer{
		text-align: left;
		font-size: 0.5em;	
		margin-top: 2%;		
		}	
	[data-tip] {
    	position: relative;
    	cursor: pointer;    
	}
	[data-tip]:hover:after {
    	content: attr(data-tip);
   	position: fixed;
    	margin-left: 55px;
    	margin-top: 150px;          
    	padding: 1px;
    	background: white;
    	border: black 1px dotted;   
    	top: 1.5em; left: 0;    
    	color: #000;
    	font-family: sans-serif;
    	font-size: xx-small;       
    	white-space: nowrap;        
	}							

}

....................................................................