@font-face{
	font-family:"titre";
	src: url(font/Roboto-Bold.ttf);
}

@font-face{
	font-family:"texte";
	src: url(font/Roboto-Regular.ttf);
}

body{
	background : #ececec;
}

#page{
	margin-right: auto;
	margin-left: auto;
	background-color: white;
	
}
img{
	max-width: 100%;
	box-sizing: border-box;
}

h1, h2{
	font-family: titre, sans-serif;
}

li{
	text-align: left !important;
}

.content h2{
	text-transform: uppercase;
	color: #626262;
}

.content p, .content li{
	font-family: texte, sans-serif;
	text-align: justify;
}

header{
	background-image: url("img/fond-toilettage-chien.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}


#top{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	color: white;
	text-align: center;
}

#logo{
	box-sizing: content-box;
	height: 150px;
}

section{
	color: #222222;
}

#bloc1{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	    -ms-flex-direction: row-reverse;
	        flex-direction: row-reverse;
	background-color: #222222;
	color: white;
}
	
	
#bloc1 img, #bloc1 .coord{
	width: 50%;
}

.img2{
	margin-bottom: -5px;
}

#redir{
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	    justify-content: space-around;
	background-color: #222222;
}

#redir a{
	padding-top: 20px;
	padding-bottom: 20px;
	text-decoration: none;
	color: white;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	text-align: center;
	font-family: titre;
	font-size: 1.25em;
	-webkit-transition:background-color 250ms;
	transition: background-color 250ms;
}

#redir a:hover{
	background-color: #47C9B8; 
}

footer{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 25px;
	background-color: #222222;
	color: white;
}

.end{
	border-top: 3px solid white;
}

.blank{
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}

#copyr{
	-ms-flex-item-align: end;
	    align-self: flex-end;
	text-align: right;
	color: white;
	opacity: .33;
}

footer{
	padding-bottom: 20px;
}

footer h3{
	font-family: texte;
	margin-top: 16px;
	font-size: 1.75em;
}

footer p{
	color: grey;
	text-align: left;

}

.coord a{
	color: #47C9B8;
	text-decoration: none;
}

.coord a:hover{
	text-decoration: underline;
}

#liens{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}

#liens a{
	margin: 5px;
	fill: white;
	-webkit-transition:500ms;
	transition: 500ms;
	opacity: .75;
}

#fb:hover{
	fill: #3B5998;
	opacity: 1;
	
}

#gplus:hover{
	fill: #DD4B39;
	opacity: 1;
}

.blank{
	height: 100px
}

@media screen and (min-device-width: 769px){
	
	#page{
		max-width: 1024px;
	}
	
	header{
		height: 350px;
	}
	
	#top{
		padding-top: 50px;
		font-size: 1.3em;
	}
	
	#bloc1 img, #bloc1 .coord{
		width: 50%;
	}
	
	section h2{
		margin-top: 50px;
		margin-left: 50px;
		margin-right: 50px;
		font-size: 2em;
	}

	section p, section li{
		margin-left: 50px;
		margin-right: 50px;
		font-size: 1.5em;
	}


	footer{
		padding-right: 50px;
		padding-left: 50px;
	}

	.end{
		margin-right: 10px;
		margin-left: 10px;
	}
}

@media screen and (max-device-width: 768px) and (min-device-width: 451px){
	
	header{
		max-height: 550px;
	}
	
	#top{
		padding-top: 50px;
		font-size: 0.6em;
		margin-right: 5px;
		margin-left: 5px;
	}
	
	#bloc1 img, #bloc1 .coord{
		width: 50%;
	}
	
	#redir{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	
	#redir a{
		width: 100%
	}
	
	section h2{
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
		font-size: 1.25em;
	}

	section p, section li{
		margin-left: 15px;
		margin-right: 15px;
		font-size: 1em;
	}

	
	footer{
		padding-right: 15px;
		padding-left: 15px;
	}

	.end{
		margin-right: 10px;
		margin-left: 10px;
		width: 300px;
	}
}

@media screen and (max-device-width: 450px){
	
	h2{
		text-align: center;
	}
	
	header{
		max-height: 550px;
	}
	
	#top{
		padding-top: 50px;
		font-size: 0.6em;
		margin-right: 5px;
		margin-left: 5px;
	}
	
	#bloc1{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	#bloc1 img, #bloc1 .coord{
		width: 100%;
	}
	
	#redir{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	
	#redir a{
		width: 100%
	}
	
	section h2{
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
		font-size: 1.15em;
	}

	section p, section li{
		margin-left: 15px;
		margin-right: 15px;
		font-size: 1em;
	}

	#imgportrait{
		width: 100%
	}
	
	footer{
		padding-right: 15px;
		padding-left: 15px;
	}

	.end{
		margin-right: 10px;
		margin-left: 10px;
		width: 300px;
	}
}