@charset "utf-8";
/* CSS Document */

@media only screen and (max-width: 1400px){
    h1 {font-size: 3em; padding: 10% 20% 10% 10%;}   
    #menu.open:before{width: 84%;height: 75%;left: 10%;top: 10%;}
    .petit-serif {padding: 6% 10%;}
    .petit { font-size: 1em;}
}
@media only screen and (max-width: 1025px){
	#logo-samwassm {width: 160px;height: 60px;right: 30px; bottom: 20px;}
    #menu.open:before{width: 83%;height: 75%;left: 9%;top: 10%;}
    h2 { font-size: 2em;width: 800px;}
    h2:before, h2:after {width: 108%;left: -40px;}
    .titre:before {width: 105.5%;left: -30px;}
    #before-intro { max-height: 55vh;}    
    #all-content {max-width: 920px;}
    #healthy-content {height: 78.6%;} 
    #content02, #content03, #content04, #content05 {width: 100%;margin-left: -35px;}
    .suptitle {left: 19%;}
    .suptitle02 {left: 28%;}
    .suptitle03 {left: 31.3%;}
    .suptitle04 {left: 21%;}
    .icon-title {left: 20px;}
    .chiffres-bkblue {margin: 30px 0;}
    .resume, .resume02, .resume03 {width: 100%; margin: 50px 0 0 0;}
    .infos03 {padding: 90px 5%;}
    .infos04 {padding: 63px 5%;}
    #content-conclusion {max-width: 800px;}
    #content-conclusion h2 {width: 680px;}
    #conclusion-bk {height: auto;}
    .petit { font-size: 1em;}
}
@media only screen and (max-width: 780px){
	#logo-samwassm {width: 140px;height: 42px;right: 30px;bottom: 30px;}
	#logo-samwassm:before { width: 140px;bottom: 50px;}
    #menu.open:before{width: 83%;height: 85%;left: 9%;top: 6%;}
    #menuToggler {top: 2%;right: 20px;}
    #before-intro {max-height: 50vh;}
    h1 {font-size: 2em;padding: 20% 10%;}
    .petit-serif {padding: 14% 10%;font-size: 1em;}
    .petit {bottom: 0;font-size: .8em;padding: 15% 10%;}
    #logo-rms {width: 81px;height: 64px;right: 37px;top: 42px;}
    h2 {width: 600px;padding: 30px;}
    h2:before, h2:after {width: 111%;}
    .titre:before { width: 95%;left: 17px;}
    .icon-title{display: none;}
    .suptitle, .suptitle02, .suptitle03, .suptitle04 {font-size: 1em;padding: 5px 10px;}
    .suptitle {left: 13%;}
    .suptitle02 {left: 24%;}
    .suptitle03 {left: 28%;}
    .suptitle04 {left: 15.5%;}
    .twotiers { float: none;width: 100%;margin: auto;margin-right: auto;}
    .onetiers {float: none;width: 100%;margin: 50px auto;}
    .margintop {margin-top: 20px;}
    .demiL {float: none; width: 100%;}
    .demiR {float: none;width: 100%;}
    #healthy-content {margin: 7% 5%;width: 90%;}
    #icon-healthy {padding: 0;}
    .quote {font-size: 1.5em;}
    .co-benef {padding-top: 0;}
    #content02, #content03, #content04, #content05 {width: 87%;margin-left: 15px;}
    .infos, .infos02{margin: 5% 0; width: 92%}
    .infos03, .infos04{margin: 5% 0; width: 90%}
    .infos-chiffres {padding: 1% 10%;}
    .chiffres-bkblue{width:96%;}
    .chiffres-bkblue:before {width: 94%;height: 84%;}
    .chiffres-bkblue .infos-chiffres { margin-bottom: 30px;}
    .resume-content {width: 90%;height: 170px;margin: 65px 38px;}
    .circle01 {left: 30%;}
    .circle02 {left: 20%;}
    img {max-width: 90%;}
    .bloc-velo-title {font-size: 2.3em;line-height: 1em;}
    .bloc-veloR { min-height: 175px;}
    #content-conclusion {max-width: 650px;padding: 2%;}
    #content-conclusion h2 {width: 420px;}
    #conclusion .titre:before {width: 87%;left: 40px;}
    #conclusion h2:before, #conclusion h2:after {width: 117%;}
    #mentions {font-size: .8em;margin-top: 30px;}
    .reglage-smart01{ width: 90%; margin: auto;}
    .reglage-smart02{float: left; width: 60%; margin-right: 10%;}
    .reglage-smart03{float: left; width: 30%; margin-top: -20px;}
    .reglage-smart04{float: left; width: 50%; margin-right: 5%;}
    .reglage-smart05{float: left; width: 35%; margin-top: 0px;}
    .legendecolor05-assiettes.margintop {margin-top: 0;}
    #btn_rapportlink{top: calc(2% + 58px);right: 20px;}
    #tradchoice {top: calc(15% - 16px);right: 20px;}
}
@media only screen and (max-width: 500px){
	#logo-samwassm {width: 100px;height: 40px;left: 40px; bottom: 10px;}
	#logo-samwassm:before {bottom: 40px;}
    #tradchoice {top: 130px;right: 20px;}
    #rapportlink {padding-top: 80px;}
    #conteneurMenu {padding: 30% 5% 0;font-size: 1.5em;line-height: 1.2em;}
    #menu.open:before{display: none;}
    body {font-size: 16px;line-height: 1.6em;}
    #content-before-intro {max-width: 90%;padding: 10px;}
    #before-intro {max-height: 85vh;}
    #content-before-intro:before {height: 20px;top: -10px;left: 13%;}
    #content-before-intro:after {height: 10px;bottom: 0px;left: 13%;}
	h1 {font-size: 2em;padding: 40% 10% 35%;}
    #logo-rms {left: 13%;width: 71px;height: 54px;}
    .petit-serif {font-size: 1.5em; padding: 30% 10%;}
    .petit {width: 250px;padding: 25% 10%;}
    h2 {width: 270px;padding:30px 10px; font-size: 1.5em;}
    #content {padding: 0 5%;}
    .titre:before {left: 10px;}
    h2:before, h2:after {width: 106%;left: -10px;}
    .suptitle {left: 11%;top: -10%;}
    #healthy {height: 350px; margin-top: 20px;}
    #healthy-content {height: 85%;}
    #healthy-text {font-size: 1.3em;}
    h3{padding-top: 0;}
    .quote {font-size: 1.3em;}
    .marginbottom {margin-bottom: 20px;}
    .onetiers {margin: 20px auto;}
    #btn-alimentation, #btn-mobilite, #btn-contactnature {width: 100%;float: none;font-size: 1.5em;padding: 10% 0;margin: 30px 0 50px;}
    #btn-contactnature{margin-bottom: -20px;}
    #icon-btn-alimentation {width: 57%;top: -18%;left: 22%;}
    #icon-btn-mobilite {width: 40%;top: -11%;left: 30.5%;}
    #choice {padding: 0;}
    .suptitle02 {left: 26%;}
    .infos, .infos02 {margin: 10% 0;}
    img {max-width: 100%;}
    #content02, #content03, #content04, #content05 {width: 83%;}
    .chiffres-bkblue:before {margin: 10px;height: 91%;}
    .decale {padding: 0 0 0 6%;}
    .resume-content {margin: 65px 20px;height: auto;}
    .resume-inside{height: auto;}
    .resume, .resume01, .resume02, .resume03 {height: 250px;}
    #all-content {max-width: 100%;margin: 10% auto;}
    #alimentation, #mobilite, #contactnature {margin-top: 100px;}
    #content02:before, #content04:before {margin-top: -200px;}
    #content03:before {margin-top: -180px;}
    .circle01 {left: 16%;width: 15px;height: 15px;padding: 4px 10px 16px 10px;top: -8px; font-size: 16px;}
    .circle02 {left: 6%;width: 15px;height: 15px;padding: 4px 10px 16px 10px;top: -8px; font-size: 16px;}
    .bloc-velo-all {border: 0;margin-top: 120px;padding: 20px 0 0;}
    .bloc-velo-header {margin: -100px auto 30px;}
    .bloc-veloL {float: none;width: 90%;padding: 5%;margin-bottom: 10px;min-height: 130px;}
    .bloc-veloR {float: none;width: 90%;padding: 5%; margin-bottom: 30px;min-height: 110px;}
    .bloc-veloL:after {background-size: 37px 24px;width: 37px;height: 24px;top: 95%;right: calc(50% - 18px);transform: rotate(90deg);}
    .chiffres {font-size: 3em;}
    .infos02, .infos03, .infos04 {padding: 7% 4%;}
    .infos03, .infos04 {width: 92%;}
    .illus-contactnature {padding: 4% 0 4% 0;width: 100%;}
    #content-conclusion {max-width: 300px;}
    #content-conclusion h2 {width: 200px;}
    #content05 {width: 93%;margin-left: 0px; margin-top: 20px;}
    #conclusion .titre:before {left: 20px;}
    #conclusion {margin-top: 20px;}
    #conclusion h2:before, #conclusion h2:after {width: 109%;}
    #conclusion h2{margin-bottom: 0px;}
    .reglage-smart01{ width: 80%; margin: auto;}
    .reglage-smart02{float: none; width: 100%; margin-right: 0;}
    .reglage-smart03{float: none; width: 100%; margin-top: 0px;}
    .reglage-smart04{float: left; width: 45%; margin:0 7% 0 10%;}
    .reglage-smart05{float: left; width:38%; margin-top: 0px;}
    .reglage-smart06{width: 80%;}
    #btn_rapportlink{top: calc(2% + 58px);right: 20px;}
}
@media only screen and (max-width: 350px){
	h1 {font-size: 2em; padding: 50% 10% 45%;}
	#logo-samwassm {bottom: 10px;}
	#logo-samwassm:before {font-size: 0.8em;}
	.petit {padding: 35% 10%;}
}