@media only screen and (max-width:1025px) {
	#trouver {position: relative; margin-top: -30px;}

}

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

	.no-phone{display: none;}
	

	header{
		position: relative;
		margin-bottom: 40px;
	}

	header nav{
		position: absolute;
		width: 100%;
		height: 40px;
		top: 100%;
		overflow: hidden;
	}

	header nav.open{
		mix-blend-mode: inherit;
		height: auto;
	}

	header nav ul#menu-principal{
		display: block;
	}

		header nav #btn_menu{
			position: absolute;
			display: block;
			width: 30px;
			height: 25px;
			top: 8px;
			right: 10px;
		}

		header nav #btn_menu span{
			position: absolute;
			background: #004b6c;
			width: 30px;
			height: 4px;
			top: 1px;
			left: 0px;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			-webkit-transition: .35s ease-in-out;
			-moz-transition: .35s ease-in-out;
			-o-transition: .35s ease-in-out;
			transition: .35s ease-in-out;
		}

			header nav #btn_menu span.icon01{
				-webkit-transform-origin: center;
				 -moz-transform-origin: center;
				 -o-transform-origin: center;
				 transform-origin: center;
			}

			header nav #btn_menu span.icon02{
				top: 11px;
				-webkit-transform-origin: left center;
				 -moz-transform-origin: left center;
				 -o-transform-origin: left center;
				 transform-origin: left center;
			}

			header nav #btn_menu span.icon03{
				top: 21px;
				-webkit-transform-origin: center;
				 -moz-transform-origin: center;
				 -o-transform-origin: center;
				 transform-origin: center;
			}

			header nav #btn_menu.open span{
				top: 13px;
				left: 0;
			}

			header nav #btn_menu.open span.icon01{
				-webkit-transform: rotate(-45deg);
				-moz-transform: rotate(-45deg);
				-o-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}

			header nav #btn_menu.open span.icon02{
				width: 0px;
				height: 1px;
				left: 50px;
			}

			header nav #btn_menu.open span.icon03{
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}

		header nav .menu-principal-container{
			width: 100%;
			margin-top: 45px;
		}


			header nav .menu-principal-container li{
				display: block;
				width: 100%;
				height: 40px;
				text-align: center;
				margin: 0;
				margin-bottom: 10px;
				letter-spacing: 1px;
			}
	#trouver {margin-top: 0; background-position: 36%; background-size: cover;}
	#a-propos #content #garanties h3{margin-top: 0;}
	#a-propos #content #garanties p{margin-bottom: 30px}

}

@media only screen and (max-width:760px) {
	
	#carousel .carousel-control-prev, #carousel .carousel-control-next{}

	#trouver {}
	#trouver .row{ 
		padding: 15px 60px; 
	}
	#a-propos #content #garanties img{margin-top: 40px;}
	#garanties .title hr, #engagements .title hr{margin: 15px 0; padding: 0;}
	#garanties .item{margin-bottom: 15px; text-transform: uppercase;}
	#engagements .item{margin-top: 30px; text-transform: uppercase;}
	#les-marques #content .marque{width: 100%;}

	footer #logo h1{ line-height: 1.5em; padding: 0;}
	footer #infos #adresses .item{min-width: inherit; margin-bottom: 15px;}
	footer nav li{padding: 0 30px; float: left; width: 50%}

}

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

	.btn{padding: 10px 0;}
	.btn a {line-height: 30px;}

	header #logo{ text-align: center; padding: 30px 0; }
	header #logo svg{  margin: 0; max-width: 90%;}

	#trouver {position: relative; top: 0; padding: 30px 0;}
	#trouver .row{padding: 15px; margin: 0;}

	#trouver h2{font-family: GilroySemiB;font-size: 1.5em; line-height: 1.4em; letter-spacing: 0.15em;}
	#trouver svg, #trouver h2{text-align: center;}
	footer nav li{padding: 0 30px; float: left; width: 100%}

}





























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


body{
	min-width: 100%;
	overflow-x: hidden;
}

.container_12{
	width: 100%;
}

.no_phone{
	display:none;
}

.just_phone{
	display:block;
}




/*----------------------------------------------------------------------------------------------------------
-----------------------------------------------------HEADER------------------------------------------------
----------------------------------------------------------------------------------------------------------*/

	#header #logo {
		margin-top: 60px;
		margin-bottom: 20px;
	}

	#header #logoMFL {
		/*display: none;*/
		margin-top: 60px;
		margin-right: 20px;
	}


/*----------------------------------------------------------------------------------------------------------
-----------------------------------------------------INDEX------------------------------------------------
----------------------------------------------------------------------------------------------------------*/


#accueil #content #garanties h3{
	text-align: left;
}




/*----------------------------------------------------------------------------------------------------------
-----------------------------------------------------A PROPOS------------------------------------------------
----------------------------------------------------------------------------------------------------------*/






/*----------------------------------------------------------------------------------------------------------
-----------------------------------------------------MARQUES------------------------------------------------
----------------------------------------------------------------------------------------------------------*/

#les-marques #content .marque { margin: auto; }


}

@media only screen and (min-width:480px) and (max-width:620px) {
	#header #logoMFL {
		display: none;
	}
}


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


body{
	min-width: 100%;
	overflow-x: hidden;
}

.container_12{
	width: 100%;
}

.no_phone{
	display:none;
}

.just_phone{
	display:block;
}

#accueil #content #lesplus p#plus {
	-webkit-column-count: 1;
	-moz-column-count: 1;
	column-count: 1;
}

}