/****************************************/
/*         MEDIA QUERIES           /*
/***************************************/
@media screen and (max-width : 1024px) {
	#section5 .grid img {
		display: block;
		width: 80%;
		margin: 0 auto;
		padding-bottom: 20px;
	}

	#section5 .grid ul {
		display: block;
		width: 80%;
		margin: 0 auto;
		padding-left: 0;
		list-style-type: none;
		line-height: 1.3;
	}
}

@media screen and (max-width : 980px) {
	#section2 .grid .col {
		display: block;
		width: 100%;
	}

	#section2 .grid .col:first-child {
		padding-right: 0;
		padding-bottom: 1em;
	}

	#section2 .grid .col:nth-child(2) {
		padding: 0 0 1em 0;
	}
	
	#section2 .grid .col:nth-child(3) {
		padding: 0 0 1em 0;
	}

	#section2 .grid .col:last-child {
		padding-left: 0;
		padding-bottom: 0;
	}

	#section2 h3.accordion {
		margin-right: 15px;
		cursor: pointer;
	}

	#section2  .accordion:after {
		content: '\02795';
		font-size: 13px;
		color: #777;
		/*float: right;
		margin-left: 5px;*/
		position: absolute;
		right: 0;
		top: 4px;
	}

	#section2 .open .accordion:after {
		content: "\2796";
	}

	#section2 .panel {
		max-height: 0;
		overflow: hidden;
		-moz-transition: max-height 0.2s ease-out;
		-webkit-transition: max-height 0.2s ease-out;
		-ms-transition: max-height 0.2s ease-out;
		-o-transition: max-height 0.2s ease-out;
		transition: max-height 0.2s ease-out;
	}

	#section3 .grid .col{
		padding: 0 !important;
	}

	#section4 .grid .modele,
	#section4 .grid .couleurs {
		display: block;
	}

	#section4 .grid .modele {
		width: 80%;
		margin: 0 auto;
	}

	#section4 .grid .couleurs {
		margin-top: 2em;
	}
}

@media screen and (max-width : 768px) {
	.underline-title {
		padding-top: 1.5em;
	}

	#tab320 .underline-title {
		padding-top: 2em;
	}

	#banniere .underline-title ul.choix {
		display: none;
	}

	#banniere ul.choix.hide {
		display: block;
	}

	#banniere .slogan {
		margin-top: 9vh;
	}

	#section4 .grid .modele {
		width: 100%;
	}

	#section5 .grid img,
	#section5 .grid ul {
		width: 100%;
	}
}

@media screen and (max-width : 670px) {
	header {
		height: 87px;
	}

	header #logo,
	header #icon-mobile {
		width: 90px;
	}

	#navigation ul {
		visibility: hidden;
	}

	#navigation ul li a {
		font-size: 0;
	}

	#navigation-right {
		padding-top: 87px;
	}

	#navigation-right .hide {
		display: block;
	}

	#banniere .wrapper {
		padding-top: 87px;
	}

	#accueil #banniere .slogan {
		margin-top: 26vh;
	}
}

@media screen and (max-width : 660px) {
	#section4.section {
		padding-top: 0em;
	}

	#section4 .wrapper {
		padding: 0;
	}

	#section5 .grid {
		padding: 3.3em 0 0.3em 0;
	}
}

@media screen and (max-width : 544px) {
	header #logo, header #icon-mobile {
		width: 83px;
	}

	header #logo {
		padding-left: 1.5em;
	}

	header #icon-mobile {
		padding-right: 1.5em;
	}

	#tab320 #banniere {
		background-position-x: 80%;
	}

	#banniere .slogan {
		margin-top: 6.8vh;
	}

	.section {
		padding: 3em 1.5em;
	}

	footer {
		padding: 1em 1.5em;
	}
}

@media screen and (max-width : 455px) {
	#section5 .grid ul {
		font-size: 3.34vw;
	}
}

@media screen and (max-width : 400px) {
	#banniere .slogan {
		margin-top: 6vh;
	}
}

@media screen and (max-width : 370px) {
	#banniere .slogan {
		margin-top: 5vh;
	}

	#section4 .couleurs span {
		width: 40px;
		height: 40px;
	}

	footer p,
	footer a {
		font-size: 93%;
	}
}

@media screen and (max-width : 1366px) and (min-width : 1025px) {
	#section7 .grid h3 {
		padding-bottom: 0.5em;
	}
}

@media screen and (max-width : 1024px) and (min-width : 813px) {
	#section7 .grid h3 {
		padding-bottom: 0.7em;
	}
}

@media screen and (max-width : 812px) and (min-width : 769px) {
	#section7 .grid h3 {
		padding-bottom: 0.8em;
	}
}

@media screen and (max-width : 768px) and (min-width : 737px) {
	#section7 .grid h3 {
		padding-bottom: 0.2em;
	}
}

@media screen and (max-width : 736px) and (min-width : 376px) {
	#section7 .grid h3 {
		padding-bottom: 0.7em;
	}
}

@media screen and (max-width : 375px) and (min-width : 361px) {
	#section7 .grid h3 {
		padding-bottom: 0.5em;
	}
}

@media screen and (max-width : 360px) {
	#section7 .grid h3 {
		padding-bottom: 0;
	}
}

@media screen and (max-width : 1300px) and (min-width : 769px) {
	h2,
	#banniere .slogan p {
		font-size: 4.15vw;
	}
}

@media screen and (max-width : 768px) and (min-width : 541px) {
	h2,
	#banniere .slogan p {
		font-size: 7vw;
	}

	#banniere .slogan {
		width: 90%;
	}

	#accueil #banniere .slogan {
		width: 100%;
	}

	#banniere ul.choix li a {
		font-size: 3.45vw;
	}
}

@media screen and (max-width : 540px) {
	h2,
	#banniere .slogan p {
		font-size: 9vw;
	}

	#banniere .slogan {
		width: 100%;
	}

	#accueil #banniere .slogan {
		margin-top: 5vh;
	}

	#accueil #banniere .slogan p {
		font-size: 11vw;
	}

	#banniere ul.choix li a {
		font-size: 5vw;
	}
}

@media screen and (max-width : 359px) {
	#accueil #banniere .slogan {
		margin-top: 4vh;
	}

	#banniere ul.choix li {
		padding: 0.5em 0;
	}
}


@media screen and (max-width : 736px) and (min-width : 321px) {
	#banniere {
		background-position-x: 25%;
	}

	#tab320s #banniere {
		background-position-x: 21.5%;
	}
	#tab320cs #banniere {
		background-position-x: 21.5%;
	}
}

@media screen and (min-height : 1200px) {
	#banniere .slogan {
		margin-top: 14.5vh;
	}

	#accueil #banniere .slogan {
		margin-top: 35vh;
	}
}

@media screen and (max-height : 570px) {
	#banniere ul.choix li {
		padding: 0.5em 0;
	}
}

@media screen and (max-height : 520px) {
	#navigation-right ul li {
		padding: 0.8em 0;
	}
}

@media screen and (max-height : 479px) {
	h2,
	#banniere .slogan p {
		font-size: 5vw;
	}

	#navigation-right ul li {
		padding: 0.5em 0;
		font-size: 80%;
	}

	.underline-title {
		padding-top: 1em !important;
	}

	#banniere ul.choix li {
		padding: 0.2em 0;
	}

	#banniere ul.choix li a {
		font-size: 2.45vw;
	}

	#banniere .slogan {
		margin-top: 25vh;
	}

	#accueil #banniere .slogan {
		margin-top: 8vh;
	}

	#accueil #banniere .slogan p {
		font-size: 7vw;
	}
}

@media screen and (max-height : 400px) {
	.underline-title {
		padding-top: 0.5em;
	}
}