/* custom page Fan2créa */ 

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900');
/* font-family: 'Maven Pro', sans-serif; */

@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates:300,400,500,600,700,800');
/* font-family: 'Montserrat Alternates', sans-serif; */

.pink { color: #e31353; }
.black { color: black; }
.white { color: white; }

html, body {  }

body { 
	font-size: 16px; line-height: 22px;
	color: white;
	font-family: 'Maven Pro', sans-serif;
	font-weight: 400;
	margin: 0;
	padding: 0;
	cursor: default;
	background-color: #e31353;
	background-image: 
		url('images/bg-flower-top-left.png'),
		url('images/bg-flower-top-right.png'),
		url('images/bg-ciseaux.png'),
		url('images/bg-flower-middle-right.png'),
		url('images/bg-flower-bottom-left.png'),
		url('images/bg-flower-bottom-right.png'); 
	background-position: 0 0, 100% 0, 0 25%, 100% 55%, 0 85%, 90% 100%;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
a { text-decoration: none; } 
a:hover { color: #e31353 !important; }
a.etiquette { color: black; background-color: white; padding: 0 3px; }
a.etiquette:hover { color: white !important; background-color: black; }
h1 { margin: 0; }
h2 { font-size: 24px; line-height: 28px; font-weight: 500; font-family: 'Montserrat Alternates', sans-serif; margin-top: 40px; }
h3 { font-size: 28px; line-height: 30px; font-weight: 500; font-family: 'Montserrat Alternates', sans-serif; margin-top: 40px; margin-bottom: 10px; }
h4 { font-size: 22px; line-height: 24px; font-weight: 300; font-family: 'Montserrat Alternates', sans-serif; margin-bottom: 5px;}
strong { font-weight: bold; }
strong.medium { font-weight: 500; }

.clear { clear: both; }

#page {
	width: 100%;
    position: relative;
	margin: 0;
}

#content { 
	max-width: 600px; 
	margin: 0 auto; 
	padding: 15px;
}

#logo { margin: 50px 0; }
#logo h1 { text-align: center; }

#content-text  #intro { text-align: center; font-size: 18px; line-height: 22px; margin: 20px 0; }
#content-text  #actu { 
	text-align: center; 
	color: black; 
	border: 3px dotted black; 
	border-left: none; 
	border-right: none; 
	padding: 20px 0;
	margin: 60px 0;
}
#content-text  #actu h3 { font-size: 22px; line-height: 24px; font-weight: 300; margin-top: 0; }
#content-text  #actu strong { font-size: 18px; line-height: 22px; }
#content-text  #actu a.etiquette { color: white; background-color: black; font-size: 18px; line-height: 22px; }
#content-text  #actu a.etiquette:hover { color: black !important; background-color: white; }
#content-text p { margin-top: 0; margin-bottom: 10px; }
#content-text p:last-child { margin-bottom: 0; }
#content-text ul { margin-top: -5px; padding-left: 15px; }
#content-text li { margin: 5px 0; }

.categories#screen-large { display: block; }
.categories#screen-medium { display: none; }
.categories { margin-bottom: 20px; }
.categories  .bloc-photo  { 
	display: flex;
	align-items: top;
	justify-content: left; 
}
.categories .bloc-photo  div { 
	width: 33%;
	margin: 10px;
	display: inline-block;
	background-color: black;
	background-size: cover;  
	background-position: center center; 
}
.categories .bloc-photo div:first-child { margin-left: 0; } 
.categories .bloc-photo div:last-child { margin-right: 0; } 
.categories h4 { font-size: 16px; line-height: 20px; font-weight: normal; text-align: center; margin: 0; padding: 0; }
.categories h4  a { color: white !important; padding: 60px 30px; display: inline-block; }
.categories #travauxmanuels:hover { background-image: url('images/bg-travauxmanuels.jpg'); }
.categories #numerique:hover { background-image: url('images/bg-numerique.jpg'); }
.categories #collaborations:hover { background-image: url('images/bg-collaborations.jpg'); }
.categories #premierspas:hover { background-image: url('images/bg-premierspas.jpg'); }
.categories #inspirations:hover { background-image: url('images/bg-inspirations.jpg'); }
.categories #parents:hover { background-image: url('images/bg-parents.jpg'); }
.categories #realisationspro:hover { background-image: url('images/bg-realisationspro.jpg'); }

#links  { 
	margin-top: 40px; 
	display: flex;
    justify-content: center;
}
#links  .icon { 
	width: 60px; 
	height: 60px; 
	border-radius: 50%; 
	text-align: center; 
	margin: 10px;	
	background: black;
}
#links  .icon:first-child { margin-left: 0; }
#links .icon:hover { background: white; }
#links .icon img { 
	filter: invert(1);
	-webkit-filter: invert(1);
}
#links .icon:hover img { 
	filter: invert(0);
	-webkit-filter: invert(0);
}
#links  img { width: 100%; }

#menu { margin-top: 15px; text-align: center; color: white; }
#menu ul { padding: 0; margin: 0; }
#menu ul li { display: inline; padding: 0 5px; border-left: 1px solid white; }
#menu ul li:first-child { padding-left: 0; border-left: 0; }
#menu a { color: white !important; text-decoration: none; }
#menu a:hover { text-decoration: underline black; text-underline-position: under; }

#footer { padding: 20px; text-align: center; color: black; font-size: 14px; }

/* RESPONSIVE */
@media (max-width: 1000px) {
	body { 
		background-image: 
			url('images/bg-flower-top-left.png'),
			url('images/bg-flower-top-right.png'),
			url('images/bg-ciseaux.png'),
			url('images/bg-flower-middle-right.png'),
			url('images/bg-flower-bottom-left.png'),
			url('images/bg-flower-bottom-right.png'); 
		background-position: 0 0, 100% 0, -5px 22%, 100% 50%, 0 85%, 90% 100%;
		background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
		background-size: 30%, 28%, 18%, 12%, 9%, 20%; 
	}
	#content { max-width: 70%; }
}
@media (max-width: 800px) {
	.categories#screen-large { display: none; }
	.categories#screen-medium { display: block; }
	.categories .bloc-photo  div { width: 50%; }
}
@media (max-width: 600px) {
-	body { 
		background-image: 
			url('images/bg-flower-top-left.png'),
			url('images/bg-flower-top-right.png'),
			url('images/bg-ciseaux.png'),
			url('images/bg-flower-middle-right.png'),
			url('images/bg-flower-bottom-left.png'),
			url('images/bg-flower-bottom-right.png'); 
		background-position: 0 0, 100% 0, 0 32%, 100% 50%, 0 75%, 90% 100%;
		background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
		background-size: 30%, 28%, 18%, 12%, 9%, 20%; 
	}
	.categories .bloc-photo  div { margin: 5px; background-position: top 10% center; }
	.categories h4 { font-size: 14px; line-height: 18px; }
	.categories h4 a { padding: 40px 25px; }
}
@media (max-width: 450px) {
	body { 
		background-image: 
			url('images/bg-flower-top-left.png'),
			url('images/bg-flower-top-right_responsive.png'),
			url('images/bg-ciseaux.png'),
			url('images/bg-flower-middle-right.png');
		background-position: 0 0, 100% 0, -5px 15%, 100% 48%;
		background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
		background-size: 35%, 30%, 22%, 16%; 
	}	
	#content { max-width: 100%; margin: 0; padding: 25px; }
	#logo { margin: 20px 20px 0 20px; }
	#logo img { width: 40%; }
	.categories  .bloc-photo  { display: block; }
	.categories .bloc-photo  div { display: block; width: 100%; margin: 10px 0; }
	.categories .bloc-photo  div:hover { background-image: none; }
	.categories h4 a { padding: 30px 10px; }
	#links  .icon { width: 50px; height: 50px; margin: 5px; }
	#links  .icon .btn-text { padding-top: 12px; }
	#links  a { font-size: 12px; }
	#menu ul li { display: block; margin: 3px 0; border-left: 0; }
}