﻿body{
	margin:0px;
	padding:0px;
	background-color:#FEF9FD;
	background-image:url('../images/background_site.jpg');
	background-attachment:fixed;
	
	background-size:cover;
}
#container {
    position: relative;
    width: 100%;
}

@media screen and (max-width: 4000px) {
	#background-top{
	   	width:1280px;
	}
	#slogancentre{
		top:350px;
		left:480px;
	}
	#coordonnees{
		top:550px;
		right:80px;
	}
	#aide{
		font-size:3em;
	} 
	#service{
		font-size:1.3em;
	}
	#local{
		font-size:2em;
		padding-top:20px;
	}
	#tel{
		font-size:2em;
	} 
	#mail{
		font-size:1.5em;
	}
	.button1{
		top:200px;
		border-radius: 5px;
		padding:10px;
		width:250px;
		font-size:1em;
	}
	.button2{
		top:260px;
		border-radius: 5px;
		padding:10px;
		width:250px;
		font-size:1em;
	}
	.button3{
		top:320px;
		border-radius: 5px;
		padding:10px;
		width:250px;
		font-size:1em;
	}
	#logo{
		width:350px;
		top:40px;
		right:2%;
	}
	#sp{
		width:150px;
		top:450px;
		left:2%;
	}
	#ci{
		width:100px;
		top:400px;
		right:12%;
	}
	#footer{
		padding:1%;
	}
	.acces{
		border-radius: 5px;
		padding:10px;
		width:250px;
		font-size:1em;
		margin-right:2px;
	}
}

@media screen and (max-width: 1280px) {
	#background-top{
	   	width:800px;
	}
	#slogancentre{
		top:80px;
		left:80px;
	}
	#coordonnees{
		top:480px;
		right:60px;
	}
	#aide{
		font-size:3em;
	} 
	#service{
		font-size:1.3em;
	}
	#local{
		font-size:2em;
		padding-top:20px;
	}
	#tel{
		font-size:2em;
	} 
	#mail{
		font-size:1.5em;
	}
	.button1{
		top:200px;
		border-radius: 5px;
		padding:10px;
		width:250px;
		font-size:1em;
	}
	.button2{
		top:260px;
		border-radius: 5px;
		padding:10px;
		width:250px;
		font-size:1em;
	}
	.button3{
		top:320px;
		border-radius: 5px;
		padding:10px;
		width:250px;
		font-size:1em;
	}
	#logo{
		width:350px;
		top:40px;
		right:2%;
	}
	#sp{
		width:150px;
		top:260px;
		left:2%;
	}
	#ci{
		width:100px;
		top:370px;
		right:15%;
	}
	#footer{
		padding:1%;
	}
	.acces{
		border-radius: 5px;
		padding:10px;
		width:180px;
		font-size:1em;
		margin-right:2px;
	}
}
@media screen and (max-width: 800px) {
	#background-top{
	   	width:360px;
	}
	#slogancentre{
		top:40px;
		left:50px;
	}
	#coordonnees{
		top:200px;
		right:40px;
	}
	#aide{
		font-size:1em;
	} 
	#service{
		font-size:0.5em;
	}
	#local{
		font-size:0.6em;
		padding-top:10px;
	}
	#tel{
		font-size:1em;
	} 
	#mail{
		font-size:0.7em;
	}
	.button1{
		top:60px; 
		border-radius: 2px;
		padding:5px;
		width:150px;
		font-size:0.8em;
	}
	.button2{
		top:90px; 
		border-radius: 2px;
		padding:5px;
		width:150px;
		font-size:0.8em;
	}
	.button3{
		top:120px; 
		border-radius: 2px;
		padding:5px;
		width:150px;
		font-size:0.8em;
	}
	#logo{
		width:150px;
		top:5px;
		right:5%;
	}
	#sp{
		width:50px;
		top:130px;
		left:5%;
	}
	#ci{
		width:30px;
		top:150px;
		right:22%;
	}
	.acces{
		border-radius: 5px;
		padding:2px;
		width:150px;
		font-size:0.8em;
		margin-right:30px;
	}
}


#background-top{
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%,0%);
    background-color:white;
}
#background-top img{
	width:100%;
}
#button{
	background-color:#B22A62;
	position:absolute;
	right:5%;
	color:white;
	text-align:center;
	font-family: "Julius Sans One", sans-serif;
	font-style: normal;
}
#button:hover{
	background-color: #FBF0FA;
	cursor:pointer;
	color:#B22A62
}
#logo{
	position:absolute;
}
#sp{
	position:absolute;
}
#ci{
	position:absolute;
}

#slogancentre{
	position:absolute;
	color:white;
	text-align:center;
}
#coordonnees{
	position:absolute;
	color: #B22A62;
	text-align:center;
}

#aide{
	font-family: "Marck Script", cursive;
} 
h1{
	font-family: "Marck Script", cursive;
	margin-left:2%;
} 

#service{
	font-family: "Julius Sans One", sans-serif;	
}
#tel{
	font-family: "Julius Sans One", sans-serif;	
	color:#B22A62;
}
#local{
	font-family: "Montserrat Alternates", sans-serif;
}
#mail{
	font-family: "Montserrat Alternates", sans-serif;
	color:#B22A62;
}
#contenu{
	//height:500px;
	font-family: "Montserrat Alternates", sans-serif;
}
a{
	color:#B22A62;
	text-decoration:none;
}
a:hover{
	color:#fff;
	background-color:#B22A62
}
#intranet{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
}
.acces{
	background-color:#B22A62;
	color:white;
	text-align:center;
	font-family: "Julius Sans One", sans-serif;
	font-style: normal;
	float:left;
}
.acces:hover{
	background-color: #FBF0FA;
	cursor:pointer;
	color:#B22A62
}

#contenu p{
	margin-left:5%;
	margin-right:5%;
	text-align:justify;
	margin-bottom:50px;
}
#footer{
	background-color:#B22A62;
	color:white;
	font-family: "Julius Sans One", sans-serif;
	font-style: normal;
	text-align:center;
	padding-top:50px;
	padding-bottom:50px;
	//width:100%
}