/*-----------------------------------------------------------------------*/
/*----------- Résolution d'écran comprise entre 1025 et 1280px-----------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/

@media screen and (min-width: 1025px) and (max-width: 1280px){

	/*--------MENU-------*/
	/*-------------------*/

	#menu-container{
		left: 10px;
	}

	/*------CONTENU------*/
	/*-------------------*/

	#container{
		width: 665px;
		left: 285px;
	}

	/*------PAGE PORTFOLIO------*/
	/*--------------------------*/

	ul#portfolio-list li a{
		width: 211px;
		height: 140px;
	}


	ul#portfolio-list li p{
		font-size: 12px;
		width: 211px;
		height: 20px;
		line-height: 20px;
	}

	ul#portfolio-list li img{
		width: 211px;
		height: 140px;
	}

	ul#portfolio-list li h4{
		font-size: 13px;
		padding: 50px 15px 15px 15px;
	}


	/*------------- PAGE SERVICES-------------*/
	/*----------------------------------------*/
	/*----------------------------------------*/


	#bloc-services .services{
		width: 290px;
		margin-right: 25px;
		margin-bottom: 25px;
	}


	#bloc-services .services p{
		margin: 0 0 10px 0;
		
	}


	/*----------ACTUALITÉS----------*/
	/*------------------------------*/

	#container-blog{
		width: 445px;
		left: 285px;
	}

	#sidebar{
		left: 787px;
		width: 200px;
		padding: 10px 10px 50px 10px;
	}


	/*----------FOOTER----------*/
	/*--------------------------*/

	.copyright{
		padding: 25px 0 15px 290px;
		font-size: 13px;
	}

	#back-top{
		margin-left: 375px;
		
	}
}


/*-----------------------------------------------------------------------*/
/*----------- Résolution d'écran comprise entre 800 et 1024px------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/

@media screen and (min-width: 801px) and (max-width: 1024px){

	/*--------MENU-------*/
	/*-------------------*/

	#menu-container{
		width: 200px;
		position: relative;
		left: 10px;
		float: left;
	}

	#menu{
		width: 200px;
	}

	#menu ul span{
		display: none;
	}

	#menu ul{
		padding-left: 45px;
		margin-bottom: 40px;
	}

	#menu li{
		width: 100px;
		padding: 10px 0px;
	}

	#menu li a{
		font-size: 15px;
	}


	/*------CONTENU------*/
	/*-------------------*/

	#container{
		position: absolute;
		width: 490px;
		left: 220px;
		float: left;
	}


	/*------PAGE PORTFOLIO------*/
	/*--------------------------*/

	ul#portfolio-list li{
		width: 100%;
		height: auto;
		margin-right: 0px;
		margin-bottom: 20px;
	}

	ul#portfolio-list li a{
		width: 100%;
		height:100%;
	}

	ul#portfolio-list li p{
		font-size: 13px;
		color: #414141;
		text-align: center;
	}

	ul#portfolio-list li img{
		width: 100%;
		height: auto;
	}

	ul#portfolio-list li h4{
		font-size: 13px;
		padding: 70px 15px 70px 0;
	}


	/*------------- PAGE SERVICES-------------*/
	/*----------------------------------------*/
	/*----------------------------------------*/


	#bloc-services .services{
		width: 210px;
		margin-right: 10px;
		margin-bottom: 10px;
	}


	#bloc-services .services p{
		margin: 0 0 10px 0;
		
	}



	/*------PAGE ACTUALITÉS------*/
	/*---------------------------*/

	#container-blog{
		position: absolute;
		width: 490px;
		left: 220px;
	}

	#sidebar{
		display: none;
	}

	#main-blog img{
		width: 100%;
	}


	/*----------FOOTER----------*/
	/*--------------------------*/

	#footer{
		display: none;
	}
}


/*-----------------------------------------------------------------------*/
/*------------Résolution d'écran inferieure à 800px (Tablette)-----------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/

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

	/*--------MENU-------*/
	/*-------------------*/

	#menu-container{
		width: 100%;
		position: relative;
		top: 0px;
		left: 0px;
		padding: 15px 0;
		float: left;
	}

	#menu{
		width: 100%;
		text-align: center;
		float: left;
		font-size: 12px;
	}

	#menu ul span{
		display: none;
	}

	#menu ul{
		padding-left: 120px;
		margin-bottom: 40px;
	}

	#menu li{
		width: 100px;
		padding: 10px 0px;
		float: left;
		margin-right: 10px;
	}

	#menu li a{
		font-size: 15px;
	}

	#reseaux{
		width: 100%;
		float: left;
	}

	#container{
		left: 0px;
		width: 100%;
		top: 10px;
		float: left;
	}

	#main{
		padding: 10px 0 10px 0;
		margin-bottom: 30px;
	}


/* Titres */
/*----------------------------*/

	#main h1, #main-blog h1, #main p,  #main-blog p{
		margin-left: 15px;
		margin-right: 15px;
	}

	#main h2, #main-blog h2{
		margin-left: 15px;
		margin-right: 15px;
	}

	hr{
		margin-left: 15px;
		margin-right: 15px;
	}

	.hr-2{
		margin-left: 15px;
		margin-right: 15px;
	}

	.ariane{
		margin-left: 15px;
		margin-right: 15px;
	}


	/*------PAGE PORTFOLIO------*/
	/*--------------------------*/

	ul#portfolio-list li{
		width: 100%;
		height: auto;
		margin-right: 0px;
		margin-bottom: 30px;
	}

	ul#portfolio-list li a{
		width: 100%;
		height:150px;
	}

	ul#portfolio-list li p{
		font-size: 13px;
		color: #414141;
		text-align: center;
	}

	ul#portfolio-list li img{
		width: 100%;
		height: auto;
	}

	ul#portfolio-list li h4{
		font-size: 14px;
		padding: 75px 15px 0px 15px;
	}



	/*------PAGE ACTUALITÉS------*/
	/*---------------------------*/

	#container-blog{
		width: 100%;
		left: 0px;
	}

	#main-blog{
		float: left;
		width: 100%;
		padding: 10px 0 10px 0;
	}


	#main-blog img{
		width: 100%;
	}

	.lire-suite{
		margin-left: 15px;
	}


	/* Footer */
	/*--------------------------*/

	#footer{
		display: none;
	}



	/*------------- PAGE SERVICES-------------*/
	/*----------------------------------------*/
	/*----------------------------------------*/


	#bloc-services .services{
		width: 100%;
		margin-right: 0px;
		
	}


	#bloc-services .services p{
		margin: 0 0 10px 0;
		
	}

}



/*-----------------------------------------------------------------------*/
/*---------Résolution d'écran comprise entre 0 et 480px (Mobile)---------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/
/*-----------------------------------------------------------------------*/

@media screen and (min-width:0px) and (max-width: 480px){


	#main h2, #main-blog h2{
		font-size: 15px;
		color: #373737;
		line-height: 32px;
	}


	#menu ul{
		padding-left: 0px;
		width: 100%;
	}

	#menu li{
		width: 100%;
		padding: 5px 0px;
		margin-bottom: 8px;
	}


	/*------------- PAGE SERVICES-------------*/
	/*----------------------------------------*/
	/*----------------------------------------*/


	#bloc-services .services{
		width: 100%;
		margin-right: 0px;
		
	}


	#bloc-services .services p{
		margin: 0 0 10px 0;
		
	}

}