/* ---------------------------- */
/*		    Responsive  		*/
/* ---------------------------- */

@media screen and (max-width: 1280px) {
	.container {padding-left : 10px !important; padding-right: 10px !important;}

}


@media screen and (max-width: 1190px) {
	#txt-01 {left: 10%;}
	#txt-02 {left:auto; right: 2%;}

	.btresp, #tel-resp {display:block; transition: all .5s;}
	.nav {position:absolute; right:-300px; width:250px; background:#fff; z-index: 20000; transition: all .5s;}

	.nav-head {right:-250px; width: 200px; padding-right: 20px;}
	.sb-active-head .nav-head {right: 0px; transition: all .5s; text-align: right;}
	.sb-active-head .btresp-head {right: 200px;}
	.sb-active-head #global > header {z-index: 20000;}

	.nav-menu {width: 0px; right: 0px; overflow: hidden; height: auto;}
	.nav-menu li {width: 250px;}
	.sb-active-menu .nav-menu {display:block; width:250px; right: 0px; transition: all .5s;}
	.sb-active-menu .btresp-menu {right: 250px;}
	.sb-active-menu .fixedmenu {z-index: 20000;}

	.nav ul {background: #fff; padding: 0px 0px 10px 0px;}
	.nav ul li {border: none;}
	.nav ul li:nth-child(4) {display: block; margin-left: 20px;}
	.nav ul li:nth-child(5) {margin-left: 20px; margin-top: 5px;}

	.list .left {padding-right: 1%;}
	.list .right {padding-left: 1%;}
	.list i {margin: 0px 10px;}

	#section-marques .container {background:url(../img/bg-marques-01.png) no-repeat center top !important;}

	.white-popup {margin-top: 85px;}
}


@media screen and (max-width: 1100px) {
	#section-home h2 { font-size: 80px; line-height: 60px;}
	#section-home div p {font-size: 24px; line-height: 25px;}
	#home-img {max-width: 120px; height:120px; top: 29%; left: 52%;}

	#section-positionnement .container > p span {display: inline;}

	.list .left, .list .right {display: block; float: none; padding-left: 0px; padding-right: 0px; width: 520px; margin: 0 auto;}
	.list .left {margin-top:70px; margin-right: 15%;}
	.list .right {margin-left: 15%;}

	.visuel {height: auto;}
	.visuel .left {padding-bottom: 20px;}
	.visuel .right {padding-top: 20px; margin-bottom: 40px;}
	.visuel > div {display: block; float: none; text-align: center !important; margin: 0 auto;}
	.visuel .left p {line-height: 50px;}

	footer .f-right {position: absolute; top: 20px; right: 10px;}
	footer ul {width: auto; margin-right: 20px;}
}

@media screen and (max-width: 980px) {
	#section-marques .container {background: none !important; min-height: auto;}
	#section-marques ul li {display: none;}

	#marques-tablette {display: block; width: 100%;}
	#marques-mobile {display: none;}
}

@media screen and (max-width: 860px) {
	#section-home {padding: 10% 0px; margin-top: -30px;}
	#txt-01, #txt-02, #home-img {position: relative; left: auto; right: auto; text-align: center;margin: 20px auto; top:auto;}
	@keyframes bound {
  		from{bottom:10px;}
  		to{bottom:20px;}
	}
	#section-home > p {font-size: 12px;}
}


@media screen and (max-width: 780px) {
    .icon-scroll {font-size:40px;}
	.btscroll {height: 40px;}

	.bloc-ct > p {text-align: center;}
	.bloc-ct {display: block; width: 100%;}
	.ctc {max-width: 320px; margin: 0 auto 40px auto;}
	.ctc h5 {text-align: center;}

	footer {vertical-align: top;}
	footer ul {display: block; margin-bottom: 10px; width: 260px;}
}


@media screen and (max-width: 768px) {
	#section-home {padding-bottom: 20%;}
	#section-home > p {bottom: 10px;  left:10px; text-align: center;}

	#section-home .container2 {margin-top: 12.5%;}

	@keyframes bound {
  		from{bottom:60px;}
  		to{bottom:70px;}
	}
}


@media screen and (max-width: 755px) {
	#section-references li {width: 100px; height: 100px;}

	.list .left, .list .right {width: 100%; margin: 0px;}
	.visuel div:nth-child(1), .visuel div:nth-child(3) {max-width: 100%;}
}


@media screen and (max-width: 720px) {
	#global > header > h1 {font-size: 50px;}

	.mention p {margin: 20px 0px 10px 0px;}
}


@media screen and (max-width: 645px) {
	#global > header {text-align: left !important;}
	.sb-active-head #global > header > p {color: #fff; }
	.sb-active-head #global > header > h1 {color: #fff;}

	.form-inline .form-group {width: 100%;}
}


@media screen and (max-width: 560px) {
	.fixedmenu {position: fixed; top:0; left:0; z-index: 20000;}
    #header {display: none;}
    #section-home {margin-top: 80px;}

	.sb-active-menu #nav-left h3, .sb-active-menu #nav-left p {color: #fff;}

	#section-positionnement h5 {font-size: 25px;}
	#section-positionnement .container > p {font-size: 17px;}
	.bloc-ct p {font-size: 18px;}

	.visuel {margin: 20px auto 0 auto;}
	.visuel p {font-size: 30px; line-height: 25px;}
	.visuel .left p {line-height: 35px;}
	.visuel span {font-size: 60px; line-height: 50px;}
	.visuel div:nth-child(2) {max-width: 200px;}
	.list > div > div {margin-top: 0px;}

	.list p {font-size: 25px;}

	section header {height: 80px;}
	section header h4 {line-height: 60px;}

	#section-marques .container {margin: 0 auto;}
	#marques-tablette {display: none;}
	#marques-mobile {display: block; width: 100%; padding: 0 10px;}
}


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

	section > header > h4 {font-size: 40px !important;}

	.list i {font-size: 55px;}
	.list p {font-size: 20px;}
	.list p span {font-size: 35px;}

	footer .f-right {position: relative; float: none; text-align: center; width: 100%; top: auto; right: auto;}
	footer ul {display: inline-block; width: auto;}
}


@media screen and (max-width: 430px) {
	.icon-scroll {height: 40px;}
	@keyframes bound {
  		from{bottom:45px;}
  		to{bottom:55px;}
	}

	footer .container {padding: 20px 0px;}
	footer ul {text-align:center; width: 100%;}
}


@media screen and (max-width: 400px) {
	#global > header > p {font-size: 20px; line-height: 20px;text-align: left; margin-top: 10px;}
	#global > header > h1 {font-size: 30px; text-align: left;}
	#section-home h2 { font-size: 70px; line-height: 60px;}

	.list p {font-size: 15px;}

	.visuel div:nth-child(2) {max-width: 150px;}
}


@media screen and (max-width: 360px) {
	#section-home h2 { font-size: 60px; line-height: 55px;}
	#section-home div p {font-size: 20px; line-height: 22px;}

	#section-marques > header > h4 {font-size: 35px !important;}

	@keyframes bound {
  		from{bottom:35px;}
  		to{bottom:45px;}
	}
	#section-home > p {font-size: 11px; bottom: 5px;}

	.bloc-ct:nth-child(1), .bloc-ct:nth-child(2) {padding: 0px 10px;}

	footer h3 {font-size: 30px;}

	#marques-mobile { padding: 0px;}
}


@media screen and (max-width: 320px) {
     .bloc-ct:nth-child(2) {padding: 0px;}
}