* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { font-family: 'Quicksand', Arial, Helvetica, sans-serif; }
.left { float: left; }
.right { float: right; }
.cleaner { clear: both; }
.clearfix:after { clear: both; content: ""; display: table; }
.absolute { position: absolute; }
.relative { position: relative; }
.upp { text-transform: uppercase; }
.none { display: none; visibility: visible; }
.txtcenter { text-align: center; }
.txtright { text-align: right; }
.blck { display: block; }
.inbl { display: inline-block; }
.center { margin: 0 auto; }
.middle { vertical-align: middle; }
a { text-decoration: none; }
li { list-style-type: none; }
b { font-weight: 700; }
.bgcolor { background-color: #E30071; }
.color { color: #E30071; }
.wrapper { width: 1250px; margin: 0 auto; padding: 13px 0 !important; }
.p13 { padding: 13px; }
.w67 { width: 67%; }
.w33 { width: 33%; }
.mr20p { margin-right: 20px; }
.mt12p { margin-top: 12px; }
.mt30p { margin-top: 30px; }
.mt40p { margin-top: 40px; }
#logo { width: 412px; }
#content { width: 822px; }
#horaires-tarifs h2 { font-weight: 700; font-size: 30px; line-height: 120%; color: #FFF; padding: 30px 0; }
#avantages { margin: 30px 0 0 0; }
.radius { -webkit-border-radius: 23px; border-radius: 23px; background-color: red; }
.title { font-weight: 700; font-size: 15px; line-height: 120%; color: #E30071; padding: 10px 0; }
#avantages p:not(.title) { font-weight: 700; font-size: 13px; line-height: 120%; color: #3D3C3F; padding: 0 30px; }
#avantages ul li .title:before { content: url(../img/picto-plus.png); padding-right: 10px; }
/*#plan { width: 402px; background: #EBEBEB url(../img/path.png) no-repeat 13px 25px; margin-left: 26px; }*/
#plan { width: 402px; background-color: #EBEBEB; padding: 13px 25px; margin-left: 26px; }
#plan ul { position: relative; top: 28px; left: 53px; }
#plan ul li.da { display: block; background-color: #3B3A3A; color: #fff; font-weight: 700; padding: 5px 10px; }
#plan ul li { display: block; margin-top: 34px; }
#plan ul li.da:first-of-type { margin-top: 0px; }
footer, footer .flex { background-color: #EBEBEB; }
footer a { font-weight: 700; font-size: 20px; color: #666666; }
#tarifs { display: block; background: url(../img/les-tarifs.jpg); width: 372px; height: 294px; }
#tarifs:hover { background: url(../img/les-tarifs-hover.jpg); }
#logo-facebook-header { right: 0px; bottom: 27px; }
header a { color: #E30071; }
#mentions-legales h2 { padding: 30px 0; color: #E30071; }
#mentions-legales p { text-align: justify; line-height: 1.5em; }
#mentions-legales p:last-of-type { margin-bottom: 30px; }
#mentions-legales a { text-decoration: underline; color: #E30071; }

/* flexbox */
.flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; background-color: #FFF; align-items: center; justify-content: center; }
#avantages .flex-item { width: 33%; padding: 30px 0; }
footer .flex-item { width: 20%; padding: 30px 0; }
/* end flexbox */

@media screen and (max-width: 2052px) {
	#slider img { width: 100%; }
}

@media screen and (max-width: 1280px) {
	.wrapper, #tarifs, #tarifs:hover, #horaires-tarifs .left.w50 img { width: 100%; }
	#content { width: 67%; }
	#plan { width: 33%; margin-left: 0px; }
	/*section.wrapper.flex, #plan .flex { display: block; }*/
	#horaires-tarifs .left.w50, #horaires-tarifs .right.w50 { width: calc(50% - 13px); }
	#horaires-tarifs .left.w50 img { max-height: 294px; }
	footer { padding: 13px; }
	#mentions-legales { margin: 0 13px; }
	#logo-facebook-header { display: none; }
}

@media screen and (max-width: 1130px) {
	#content, #plan { width: 100%; }
	footer .flex-item { width: 50%; }
	footer .flex-item:last-child { width: 100%; }
	footer .flex-item:first-child img { display: block; margin: 0 auto; }
	footer .flex-item:last-child a { text-align: center; }
	footer .flex-item:last-child a > img { float: none; text-align: center; }
}

@media screen and (max-width: 822px) {
	#horaires-tarifs .left.w50, #horaires-tarifs .right.w50 { float: none; width: 400px; margin: 13px auto; }
}

@media screen and (max-width: 740px) {
	footer .flex-item { width: 100%; }	
	#logo-facebook-header { top: 27px; }
	footer .flex-item:nth-child(2) a > img { display: block; margin: 0 auto 20px; }
}

@media screen and (max-width: 480px) {
	#logo { width: 100%; }
	img { max-width: 100%; }
	#horaires-tarifs .left.w50, #horaires-tarifs .right.w50 { width: 100%; }
	#avantages .flex-item { width: 50%; }
}

@media screen and (max-width: 320px) {
	#avantages .flex-item { width: 100%; }
}