*{
	padding:0px;
	margin:0px;
	}


body{
    width: auto;
    margin: 0;
    padding: 0;
	
    height:1500px;	
	font-family: "Trebuchet MS", Arial, Helvetica, Optima, sans-serif;	
	}

#conteneur{
    background-color:#FAFAFA; 
	margin:auto;
	width:890px;
	height:400px;		
    margin-top:100px;
	box-shadow: 7px 7px 5px rgb(140, 140, 140); 
}

.contenu2 a{
    background-image:url(peintures/pecheurs-palluy.jpg); 
    width:170px;
	height:170px;			
	float:left;
	margin-left:30px;
	margin-top:110px;
	transition: all 8s;
	
}

.EXPO a{
    display:block;
	float:left;
	margin-left:600px;
	padding-top:40px;
	font-family:century gothic;
    font-size:40px;	    
	text-decoration:none;
	color:#000;	
     
     }



.contenu2 a:hover{
    background-image:url(peintures/cadrea.jpg); 
	 width:170px;
	height:170px;
	transform: rotate(1080deg);
	border-radius:90%;
	/* transition quand la souris survole */
	
	}
.contenu3 a{
    background-image:url(peintures/LOULOU-palluy.jpg); 
    width:170px;
	height:170px;			
	float:left;
	margin-left:45px;
	margin-top:110px;
		transition: all 6s;
	
}

.contenu3 a:hover{
    background-image:url(peintures/cadreb.jpg); 
	 width:170px;
	height:170px;
	transform: rotate(1080deg);
	border-radius: 50%;
	/* transition quand la souris survole */
	
	}
.contenu4 a{
    background-image:url(peintures/visage-palluy.jpg); 
    width:170px;
	height:170px;			
	float:left;
	margin-left:45px;
	margin-top:110px;
	transition: all 4s;
	
}

.contenu4 a:hover{
    background-image:url(peintures/cadrec.jpg); 
	 width:170px;
	height:170px;
	transform: rotate(1080deg);
	border-radius: 50%;
	/* transition quand la souris survole */
	
	}
.contenu5 a{
    background-image:url(peintures/Clementine-Palluy.jpg); 
    width:170px;
	height:170px;			
	float:left;
	margin-left:45px;
	margin-top:110px;
	transition: all 2s;
	
}

.contenu5 a:hover{
    background-image:url(peintures/cadred.jpg); 
	 width:170px;
	height:170px;
	transform: rotate(1080deg);
	border-radius: 50%;
	/* transition quand la souris survole */
	
	}


.marc a{
    font-family:"Tahoma";
  	font-size: 14px;
	color:#888888;	
	text-decoration:none;
    margin-left:836px;
	float:left;
    display:block;
    padding-top:20px;
	position:fixed;
	opacity:0.4;
}


#menu{
	float:left;
	padding-top:125px;
	padding-left:340px;			
    font-family:"century gothic";
    font-size:20px;	    
    position:relative;   	
	  			   
}



#menu dl{
	height:30px;
	margin:13px; padding:15px;
	display:block;
	float:left;
	
}

#menu dt a{
	width:150px;
	display:block;
	height:18px;
	color:red;
	line-height:0px;
	text-align:center;
	cursor:pointer;
	color:#000;
	text-decoration:none;		
}

dd{
	display:block;
	margin:0;padding:0;
	background-color:#transparent;
		
}

dd ul{
	margin:0; padding:0;
	text-align:center;
	list-style:none;
	
}

dd ul li{
	display:block;
	margin:O; padding:0;
}



dd ul li a{
	color:#000;
	display:block;
	text-decoration:none;
	width:150px;
	height:25px;
	line-height:20px;
	
	
	
	}
dl dd{
	display:none;
	
}
#menu a.lien:hover{
    -webkit-transition: all 1s linear;
    -webkit-transform: scale(1.6);
   -moz-transition: all 1s linear;
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
	font-size:17px;
	color:#FFF;
}	
#menu a.lien1:hover{
	 -webkit-transition: all 1s linear;
    -webkit-transform: scale(1.6);
   -moz-transition: all 1s linear;
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
	font-size:18px;
	color:#FFF;
}
#menu a.lien2:hover{
	 -webkit-transition: all 1s linear;
    -webkit-transform: scale(1.6);
   -moz-transition: all 1s linear;
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
	font-size:19px;
	color:#FFF;
}
	
#menu a.lien3:hover{
	-webkit-transition: all 1s linear;
    -webkit-transform: scale(1.6);
   -moz-transition: all 1s linear;
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
	font-size:20px;
	color:#FFF;
}
#menu a.lien4:hover{
	-webkit-transition: all 1s linear;
    -webkit-transform: scale(1.6);
   -moz-transition: all 1s linear;
   -moz-transform: scale(1.2);
   -ms-transform: scale(1.2);
	font-size:21px;
	color:#FFF;
}

#menu li a{
	text-decoration:none;
	
}
	
	

dl:hover dd{
	display:block;
	
}



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

  
    
    /* 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: 100%;
    }
    
    /* conserver le ratio des images */

    img {
        height: auto;
    }
    
    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
    
    /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

    element1,
    element2 {
        float: none;
        width: auto;
    }
    
    /* masquer les éléments superflus */

    .hide_mobile {
        display: none !important;
    }
    
    /* Un message personnalisé */

    body:before {
        content: "Version mobile du site";
        display: block;
        text-align: center;
        font-style: italic;
        color: #777;
    }

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
  }
  
  
.voeux a{
     font-family:"trebuchet MS";
  	font-size: 20px;
	color:#C8C8C8;	
	text-decoration:none;
    margin-left:28px;
	float:left;
    display:block;
    padding-top:1140px;


} 


.social{
    float:left;
    display:block;
    margin-left:118px;
    padding-top:640px;
 
}