@charset "utf-8";
/* CSS Document */


#fond-contener{
	width: 100%;
	height: 1064px;
	margin-top: 200px;
	margin-left: auto;
	margin-right: auto;
	background-color:rgba(255,255,255,0.7);}


#contener{
	width: 1024px;
	height: 1200px;
	margin-top: 20px;
	left: 50%;
	margin-left: -512px;
	position: absolute;

	
}

#cadeaux1-photo{width: 300px;
	height: 300px;
	background-size: cover;
	background-image:url(../images/cadeaux1.jpg);
	position: absolute;
	background-position: center;
	background-position: left;
}
#cadeaux1-titre{
	width: 260px;
	height:50px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color: #FFFFFF;
	padding: 20px;


}

#cadeaux1-overlay{
	width: 260px;
	height: 200px;
	position: absolute;
	left: -300px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 100px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    
}

#cadeaux1-bouton{
	width: 300px;
	height:300px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	color: #FFFFFF;
	clip: rect(0px, 300px, 300px, 0px);

}

#cadeaux1-bouton:hover > #cadeaux1-overlay {
  
	width: 260px;
	height: 200px;
	position: absolute;
	left: 0px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 100px;

    
}





#cadeaux2-photo{width: 300px;
	height: 300px;
	left:362px;
	background-size: cover;
	background-image:url(../images/cadeaux2.jpg);
	position: absolute;
	background-position: center;
	background-position: left;
}
#cadeaux2-titre{
	width: 260px;
	height:50px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color: #FFFFFF;
	padding: 20px;


}

#cadeaux2-overlay{
	width: 260px;
	height: 180px;
	position: absolute;
	left: -300px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 120px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    
}

#cadeaux2-bouton{
	width: 300px;
	height:300px;
	left:362px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	color: #FFFFFF;
	clip: rect(0px, 300px, 300px, 0px);

}

#cadeaux2-bouton:hover > #cadeaux2-overlay {
  
	width: 260px;
	height: 180px;
	position: absolute;
	left: 0px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 120px;

    
}


#cadeaux3-photo{width: 300px;
	height: 300px;
	left:724px;
	background-size: cover;
	background-image:url(../images/cadeaux3.jpg);
	position: absolute;
	background-position: center;
	background-position: left;
}
#cadeaux3-titre{
	width: 260px;
	height:50px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color: #FFFFFF;
	padding: 20px;


}

#cadeaux3-overlay{
	width: 260px;
	height: 200px;
	position: absolute;
	left: -300px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 100px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    
}

#cadeaux3-bouton{
	width: 300px;
	height:300px;
	left:724px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	color: #FFFFFF;
	clip: rect(0px, 300px, 300px, 0px);

}

#cadeaux3-bouton:hover > #cadeaux3-overlay {
  
	width: 260px;
	height: 200px;
	position: absolute;
	left: 0px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 100px;

    
}





#cadeaux4-photo{width: 300px;
	height: 300px;
	top:362px;
	background-size: cover;
	background-image:url(../images/cadeaux4.jpg);
	position: absolute;
	background-position: center;
	background-position: left;
}
#cadeaux4-titre{
	width: 260px;
	height:50px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color: #FFFFFF;
	padding: 20px;


}

#cadeaux4-overlay{
	width: 260px;
	height: 180px;
	position: absolute;
	left: -300px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 120px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    
}

#cadeaux4-bouton{
	width: 300px;
	height:300px;
	top: 362px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	color: #FFFFFF;
	clip: rect(0px, 300px, 300px, 0px);

}

#cadeaux4-bouton:hover > #cadeaux4-overlay {
  
	width: 260px;
	height: 180px;
	position: absolute;
	left: 0px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 120px;

    
}

#cadeaux5-photo{width: 300px;
	height: 300px;
	top:362px;
	left: 362px;
	background-size: cover;
	background-image:url(../images/cadeaux5.jpg);
	position: absolute;
	background-position: center;
	background-position: left;
}
#cadeaux5-titre{
	width: 260px;
	height:50px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color: #FFFFFF;
	padding: 20px;


}

#cadeaux5-overlay{
	width: 260px;
	height: 200px;
	position: absolute;
	left: -300px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 100px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    
}

#cadeaux5-bouton{
	width: 300px;
	height:300px;
	top:362px;
	left: 362px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	color: #FFFFFF;
	clip: rect(0px, 300px, 300px, 0px);

}

#cadeaux5-bouton:hover > #cadeaux5-overlay {
  
	width: 260px;
	height: 200px;
	position: absolute;
	left: 0px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 100px;

    
}



#cadeaux6-photo{width: 300px;
	height: 300px;
	top:362px;
	left: 724px;
	background-size: cover;
	background-image:url(../images/cadeaux6.jpg);
	position: absolute;
	background-position: center;
	background-position: left;
}
#cadeaux6-titre{
	width: 260px;
	height:50px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color: #FFFFFF;
	padding: 20px;


}

#cadeaux6-overlay{
	width: 260px;
	height: 180px;
	position: absolute;
	left: -300px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 120px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

#cadeaux6-bouton{
	width: 300px;
	height:300px;
	top:362px;
	left: 724px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	color: #FFFFFF;
	clip: rect(0px, 300px, 300px, 0px);

}

#cadeaux6-bouton:hover > #cadeaux6-overlay {
  
width: 260px;
	height: 180px;
	position: absolute;
	left: 0px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 120px;


    
}






#cadeaux7-photo{width: 300px;
	height: 300px;
	top:724px;
	background-size: cover;
	background-image:url(../images/cadeaux7.jpg);
	position: absolute;
	background-position: center;
	background-position: left;
}
#cadeaux7-titre{
	width: 260px;
	height:50px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color: #FFFFFF;
	padding: 20px;


}

#cadeaux7-overlay{
	width: 260px;
	height: 180px;
	position: absolute;
	left: -300px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 120px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

#cadeaux7-bouton{
	width: 300px;
	height:300px;
	top:724px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	color: #FFFFFF;
	clip: rect(0px, 300px, 300px, 0px);

}

#cadeaux7-bouton:hover > #cadeaux7-overlay {
  
width: 260px;
	height: 180px;
	position: absolute;
	left: 0px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 120px;
    
}





#cadeaux8-photo{width: 300px;
	height: 300px;
	top:724px;
	left: 362px;
	background-size: cover;
	background-image:url(../images/cadeaux8.jpg);
	position: absolute;
	background-position: center;
	background-position: left;
}
#cadeaux8-titre{
	width: 260px;
	height:50px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
	color: #FFFFFF;
	padding: 20px;


}

#cadeaux8-overlay{
	width: 260px;
	height: 200px;
	position: absolute;
	left: -300px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 100px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    
}

#cadeaux8-bouton{
	width: 300px;
	height:300px;
	top:724px;
	left: 362px;
	position: absolute;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	color: #FFFFFF;
	clip: rect(0px, 300px, 300px, 0px);

}

#cadeaux8-bouton:hover > #cadeaux8-overlay {
  
	width: 260px;
	height: 200px;
	position: absolute;
	left: 0px;
	background-color:rgba(143,0,40,1);
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-align: justify;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 100px;

    
}



#offrir{
	width:86px;
	height: 16px;
	top: 250px;
	margin-left:100px;
	background-color:#d0003a;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	padding: 7px;
	position: absolute;
	 -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;

}

#offrir:hover{
	width:86px;
	height: 16px;
	top: 250px;
	margin-left:100px;
	background-color:#ffffff;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #8f0028;
	text-align: center;
	padding: 7px;
	position: absolute;

}

style1{font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	
}







/*/////////////////////////////TABLETTE//////////////////////////////*/



@media only screen and (min-width:650px) and (max-width:1044px) {
	


#contener{
	width: 100%;
	margin-top: 20px;
	left: inherit;
	margin-left: inherit;
	position: absolute;

	
}
	
	
 #cadeaux1-overlay,
 #cadeaux2-overlay,
 #cadeaux3-overlay,
#cadeaux4-overlay,
 #cadeaux5-overlay,
 #cadeaux6-overlay,
 #cadeaux7-overlay,
 #cadeaux8-overlay,
	 #cadeaux9-overlay{
		display:none;
	}


#cadeaux1-photo,#cadeaux1-bouton,	
#cadeaux2-photo,	#cadeaux2-bouton,
#cadeaux3-photo,	#cadeaux3-bouton,
#cadeaux4-photo,	#cadeaux4-bouton, 
#cadeaux5-photo,	#cadeaux5-bouton,
#cadeaux6-photo,	#cadeaux6-bouton,
#cadeaux7-photo,#cadeaux7-bouton,
#cadeaux8-photo,#cadeaux8-bouton,
	#cadeaux9-photo, #cadeaux9-bouton{
		width:30%;
		position: absolute;
		left: 0px;
		font-size: auto;
	}


	#cadeaux2-photo,#cadeaux2-bouton,#cadeaux5-photo,#cadeaux5-bouton,#cadeaux8-photo,#cadeaux8-bouton{
	
		margin-left:35%;
	}

	
	#cadeaux3-photo,#cadeaux3-bouton,#cadeaux6-photo,#cadeaux6-bouton{
		margin-left:70%;
	}
	
	
	#cadeaux1-titre,#cadeaux2-titre,#cadeaux3-titre,#cadeaux4-titre,#cadeaux5-titre,#cadeaux6-titre,#cadeaux7-titre,	#cadeaux8-titre,#cadeaux9-titre	{width:90%;
	padding-left:5%;
	padding-right: 5%;}
	
	style1{font-size: 17px;}
	
	#offrir{
	width:86px;
	height: 16px;
	top: 250px;
		left: 50%;
	margin-left:-43px;
	background-color:#d0003a;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	padding: 7px;
	position: absolute;
	 -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;

}

#offrir:hover{
	width:86px;
	height: 16px;
	top: 250px;
	left: 50%;
	margin-left:-43px;
	background-color:#ffffff;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #8f0028;
	text-align: center;
	padding: 7px;
	position: absolute;

}

	
}

/*/////////////////////////////TELEPHONE//////////////////////////////*/
@media only screen and (min-width:400px) and (max-width:650px) {

	
	#fond-contener{
	height: 1300px;}
	
	#contener{
		width: 100%;
		height:1260px;
		margin-left:inherit;
		left:inherit;
	}
	
 #cadeaux1-overlay,
 #cadeaux2-overlay,
 #cadeaux3-overlay,
#cadeaux4-overlay,
 #cadeaux5-overlay,
 #cadeaux6-overlay,
 #cadeaux7-overlay,
 #cadeaux8-overlay,
	 #cadeaux9-overlay{
		display:none;
	}
	
	
#cadeaux1-photo,#cadeaux1-bouton,	
#cadeaux2-photo,	#cadeaux2-bouton,
#cadeaux3-photo,	#cadeaux3-bouton,
#cadeaux4-photo,	#cadeaux4-bouton, 
#cadeaux5-photo,	#cadeaux5-bouton,
#cadeaux6-photo,	#cadeaux6-bouton,
#cadeaux7-photo,#cadeaux7-bouton,
#cadeaux8-photo,#cadeaux8-bouton,
	#cadeaux9-photo, #cadeaux9-bouton{
		width:48%;
		position: absolute;
		left: 0px;
		top:0px;
		font-size: auto;
		background-position:top;
	}


	
		#cadeaux3-photo,#cadeaux3-bouton,#cadeaux4-photo,#cadeaux4-bouton{
		top:320px;
	}
	
			#cadeaux5-photo,#cadeaux5-bouton,#cadeaux6-photo,#cadeaux6-bouton{
		top:640px;
	}
	
				#cadeaux7-photo,#cadeaux7-bouton,#cadeaux8-photo,#cadeaux8-bouton{
		top:960px;
	}
	
	
	
	
	#cadeaux2-photo,#cadeaux2-bouton,#cadeaux4-photo,#cadeaux4-bouton,#cadeaux6-photo,#cadeaux6-bouton,#cadeaux8-photo,#cadeaux8-bouton{
	
		margin-left:52%;
	}

	
	#cadeaux3-photo,#cadeaux3-bouton{
		margin-left:0px;
	}
	
	
	#cadeaux1-titre,#cadeaux2-titre,#cadeaux3-titre,#cadeaux4-titre,#cadeaux5-titre,#cadeaux6-titre,#cadeaux7-titre,	#cadeaux8-titre,#cadeaux9-titre	{width:90%;
	padding-left:5%;
	padding-right: 5%;
	}
	
	style1{font-size: 17px;}
	
	#offrir{
	width:86px;
	height: 16px;
	top: 250px;
		left: 50%;
	margin-left:-43px;
	background-color:#d0003a;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	padding: 7px;
	position: absolute;
	 -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;

}

#offrir:hover{
	width:86px;
	height: 16px;
	top: 250px;
	left: 50%;
	margin-left:-43px;
	background-color:#ffffff;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #8f0028;
	text-align: center;
	padding: 7px;
	position: absolute;

}


}



/*/////////////////////////////TELEPHONEbis//////////////////////////////*/

@media only screen and (max-width:400px){
	
	#fond-contener{
	height: 2260px;}
	
	#contener{
		width: 100%;
		height:2220px;
		margin-left:inherit;
		left:inherit;
	}
	
 #cadeaux1-overlay,
 #cadeaux2-overlay,
 #cadeaux3-overlay,
#cadeaux4-overlay,
 #cadeaux5-overlay,
 #cadeaux6-overlay,
 #cadeaux7-overlay,
 #cadeaux8-overlay,
	 #cadeaux9-overlay{
		display:none;
	}
	
	
#cadeaux1-photo,#cadeaux1-bouton,	
#cadeaux2-photo,	#cadeaux2-bouton,
#cadeaux3-photo,	#cadeaux3-bouton,
#cadeaux4-photo,	#cadeaux4-bouton, 
#cadeaux5-photo,	#cadeaux5-bouton,
#cadeaux6-photo,	#cadeaux6-bouton,
#cadeaux7-photo,#cadeaux7-bouton,
#cadeaux8-photo,#cadeaux8-bouton,
	#cadeaux9-photo, #cadeaux9-bouton{
		width:100%;
		position: absolute;
		left: 0px;
		top:0px;
		font-size: auto;
		background-position: top;
		
	}

	#cadeaux2-photo,#cadeaux2-bouton{
		top:320px;
	}
	
		#cadeaux3-photo,#cadeaux3-bouton{
		top:640px;
	}
	
			#cadeaux4-photo,#cadeaux4-bouton{
		top:960px;
	}
	
			#cadeaux5-photo,#cadeaux5-bouton{
		top:1280px;
	}
	
			#cadeaux6-photo,#cadeaux6-bouton{
		top:1600px;
	}
	
			#cadeaux7-photo,#cadeaux7-bouton{
		top:1920px;
	}
	
			#cadeaux8-photo,#cadeaux8-bouton{
		top:2240px;
	}
	
	
		
	
	
	#cadeaux2-photo,#cadeaux2-bouton,#cadeaux4-photo,#cadeaux4-bouton,#cadeaux6-photo,#cadeaux6-bouton,#cadeaux8-photo,#cadeaux8-bouton{
	
		margin-left:0px;
	}

	
	#cadeaux3-photo,#cadeaux3-bouton{
		margin-left:0px;
	}
	
	
	#cadeaux1-titre,#cadeaux2-titre,#cadeaux3-titre,#cadeaux4-titre,#cadeaux5-titre,#cadeaux6-titre,#cadeaux7-titre,	#cadeaux8-titre,#cadeaux9-titre	{width:90%;
	padding-left:5%;
	padding-right: 5%;
	font-size: 13px;}
	
	style1{font-size: 17px;}
	
	#offrir{
	width:86px;
	height: 16px;
	top: 250px;
		left: 50%;
	margin-left:-43px;
	background-color:#d0003a;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	padding: 7px;
	position: absolute;
	 -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;

}

#offrir:hover{
	width:86px;
	height: 16px;
	top: 250px;
	left: 50%;
	margin-left:-43px;
	background-color:#ffffff;	
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #8f0028;
	text-align: center;
	padding: 7px;
	position: absolute;

}


}