body
{
	font-family: 'Roboto', sans-serif;
	background-color : lavenderblush;
	color: gray;
	text-align : center;
	font-size : large;
}

h1, h2, h3
{
       	color : #fc0d8d;
	font-family: 'Baloo', cursive;
}

h4
{
	color : gray;
	font-family : 'Baloo', cursive;
	font-size : 150%;
}

header
{
	text-align: center;
	background-color : gainsboro;
	padding : 10px;
	margin : -40px -10px 0px -10px ;
	background-image : url("logo_val-de-rose.png");
	background-repeat : no-repeat;
	background-position: right;
	background-size: 300px;
}

.baniere
{
	background-color : snow;
	padding : 10px;
	margin : 20px -10px 0px -10px;
	font-size : medium;
	line-height : 0px;
}

.baniere ul
{
	display : flex;
        align-items : flex-start;
        justify-content: center;
        flex-direction: row;
}

.baniere li
{
	width : 25vw;
        padding : 0px 10px;
        margin : 0px 10px;
}

h1
{
	font-size : 300%;
}

h2, h3
{
	font-size : 200%;
}

a
{
	color : black;
	text-decoration : none;
}

a:hover
{
	color : deeppink;
}

ul
{
	list-style-type : none;
	margin : 0;
	padding : 0;
}

li
{
	display : inline-block;
	padding : 0px 0px;
	margin : 0px;
}

li a
{
	margin : 0px;
	padding : 8px 8px;
	border-radius : 0px;
	transition : background-color 1s, color 1s;
}

li a:hover
{
	background-color : lavenderblush;
}

.accueil
{
	background-image : url("val-de-ruz3.png");
	background-repeat : no-repeat;
	background-size: cover;
	margin : 0px -10px;
	color : deeppink;
	font-weight : 900;
	background-position: center;
	padding : 10px;
}

.accueil p
{
	font-size : x-large;
	color : black;
}

.services ul, .contact ul
{
	display : flex;
	align-items : flex-start;
	justify-content: center;
	flex-direction: row;
}

.services li
{
	width : 25vw;
	height : 275px;
	background-color : gainsboro;
	padding : 10px;
	margin : 10px
}

.contact li
{
	width : 25vw;
	padding : 10px;
	margin : 10px;
	background-color : snow;
	height : 325px;
}


footer
{
	font-size : small;
	text-align : center;
	background-color : silver;
	color : deeppink;
	margin : -10px;
}

@media screen and (max-width:1000px)
{
        .baniere
        {
                display : none;
        }

}

@media screen and (min-width: 600px) and (max-width: 1000px)
{
	h2,h3
	{
		font-size : 4vw;
	}

	h4
	{
		font-size : 3vw;
	}

}

@media screen and (max-width: 600px) {

        li a
        {
                display : block;
        }
        header
        {
                background-position : center;
        }
        h1
        {
                font-size : 10vw;
        }
        h2,h3
        {
                font-size : 7vw;
        }
	h4
	{
		font-size : 7vw;
	}
        .accueil p
        {
                font-size : 7vw;
        }
        .services li
        {
                display : block;
                width : 80vw;
		height : 200px;
        }
	.services ul, .contact ul
	{
		flex-direction: column;
		justify-content: center;
		align-items : center;
	}
	.contact li
	{
		width : 80vw;
		padding : 40px  10px;
		height : 90vw;
	}
}