/*---------------------------------
FONTS
-----------------------------------*/
@font-face {
	font-family: "Gotham Light";
	src: url("../fonts/GothamLight/GothamSSm-Light.woff2") format("woff2"),
	url("../fonts/GothamLight/GothamSSm-Light.woff") format("woff");
	font-weight: 300;
}

@font-face {
	font-family: "Gotham Light Italic";
	src: url("../fonts/GothamLightItalic/GothamSSm-LightItalic.woff2") format("woff2"),
	url("../fonts/GothamLightItalic/GothamSSm-LightItalic.woff") format("woff");
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: "Gotham Book";
	src: url("../fonts/GothamBook/GothamSSm-Book.woff2") format("woff2"),
	url("../fonts/GothamBook/GothamSSm-Book.woff") format("woff");
	font-weight: 400;
}

@font-face {
	font-family: "Gotham Book Italic";
	src: url("../fonts/GothamBookItalic/GothamSSm-BookItalic.woff2") format("woff2"),
	url("../fonts/GothamBookItalic/GothamSSm-BookItalic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "Gotham Medium";
	src: url("../fonts/GothamMedium/GothamSSm-Medium.woff2") format("woff2"),
	url("../fonts/GothamMedium/GothamSSm-Medium.woff") format("woff");
	font-weight: 500;
}

@font-face {
	font-family: "Gotham Medium Italic";
	src: url("../fonts/GothamMediumItalic/GothamSSm-MediumItalic.woff2") format("woff2"),
	url("../fonts/GothamMediumItalic/GothamSSm-MediumItalic.woff") format("woff");
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: "Gotham Bold";
	src: url("../fonts/GothamBold/GothamSSm-Bold.woff2") format("woff2"),
	url("../fonts/GothamBold/GothamSSm-Bold.woff") format("woff");
	font-weight: 700;
}

@font-face {
	font-family: "Gotham Bold Italic";
	src: url("../fonts/GothamBoldItalic/GothamSSm-BoldItalic.woff2") format("woff2"),
	url("../fonts/GothamBoldItalic/GothamSSm-BoldItalic.woff") format("woff");
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: "Gotham Black";
	src: url("../fonts/GothamBlack/GothamSSm-Black.woff2") format("woff2"),
	url("../fonts/GothamBlack/GothamSSm-Black.woff") format("woff");
	font-weight: 900;
}

@font-face {
	font-family: "Gotham Black Italic";
	src: url("../fonts/GothamBlackItalic/GothamSSm-BlackItalic.woff2") format("woff2"),
	url("../fonts/GothamBlackItalic/GothamSSm-BlackItalic.woff") format("woff");
	font-weight: 900;
	font-style: italic;
}

/*---------------------------------
COMMON
-----------------------------------*/
html {
	font-size: 70%;
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	background-attachment: fixed;
}

body {
	font-family: "Gotham Book",Arial,sans-serif;
	color: #000000;
	margin: 0;
	padding: 0;
}

.container, .level2 .container.catalogue, .level2 .container.products {
	position: relative;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Gotham Bold",Arial,sans-serif;
	font-style: normal;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

h1 {
	margin: 0 0 1rem 0;
	font-size: 2.5rem;
	text-transform: uppercase;
	letter-spacing: 0;
}

h2 {
	font-size: 2rem;
	line-height: 2.5rem;
	letter-spacing: .02rem;
}

h4 {
	margin: 1rem 0;
	font-size: 1.5rem;
	line-height: 1.7rem;
	text-transform: uppercase;
	letter-spacing: .05rem;
}

h5 {
	font-family: "Gotham Book",Arial,sans-serif;
	margin: 1rem 0;
	font-size: .8rem;
	line-height: 1.4rem;
	text-transform: uppercase;
	letter-spacing: .14rem;
}

a {
	color: #1B4175;
	text-decoration: none;
}

strong {
	font-weight: normal;
	font-family: "Gotham Bold",Arial,sans-serif;
}

p {
	line-height: 1.6rem;
	margin-bottom: 1.5rem;
	letter-spacing: .022rem;
	font-size: 1.1rem;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
}

.level3 div.hidden {
	width: 100%;
}

.hidden-xs {
	display: none;
}

.show-xs {
	display: block;
}


.switchTop {
	right: 15px;
	display: none;
}

.switch {
	position: absolute;
	right: 60px;
	top: 25px;
	z-index: 10;
	margin: 0;
	display: block;
	padding: 0;
}

.bloc .switch {
	display: none;
}

.switch li {
	padding-left: 30px;
	height: 21px;
}

.switch li:first-child {
	background: url("../images/arrow-switch.svg") left center no-repeat;
	background-size: 36%;
	cursor: pointer;
	width: 26px;
}

.intro .switch, .index .switch, .film .switch {
	right: 15px;
}

.switch h5 {
	font-size: 14px;
	margin: 0;
	opacity: 1 !important;
	line-height: 21px;
}

.switch li:last-child {
	margin-top: 10px;
}

.switch a {
	color: #000;
}

.btn {
	background: #1B4175;
	border-radius: 55px;
	padding: 1rem 1.7rem;
	color: #FFFFFF;
	text-transform: none;
	letter-spacing: normal;
}

.level3 .catalogue .btn,.level3 .products .btn {
	display: inline-block;
	margin: 2rem 0;
}

.logo {
	width: 30%;
	padding-left: 5%;
	margin-top: 15px;
}

.arrow {
	font-family: "Gotham Bold",Arial,sans-serif;
	text-transform: uppercase;
	font-size: .8rem;
	text-decoration: underline;
	display: inline-block;
	letter-spacing: .02rem;
}

.arrow-l {
	background-image: url("../images/Arrow-left.png") !important;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	text-decoration: none;
	margin-bottom: 6%;
	text-transform: none;
	padding-left: 40px;
	margin-top: 3%;
}

.back {
	margin-top: 10%;
	margin-bottom: 5%;
	display: block;
}

.text-center {
	text-align: center;
}

.catalogue .back, .products .back {
	left: 0;
	top: 15%;
	margin-left: 5%;
}

.back-home {
	position: absolute;
	top: 20px;
	right: 30px;
	z-index: 2;
}

ul {
	list-style: none;
	padding-left: 0;
}

ul.blocs {
	margin-top: 9%;
}

.level4 .catalogue ul.blocs.col-2, .level4 .products ul.blocs.col-2 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

ul.blocs li {
	display: flex;
	flex-direction: row;
	margin-bottom: 6%;
	width: 100%;
}

ul.blocs div:first-child {
	width: 30%;
	padding-right: 4%;
}

ul.blocs div:last-child {
	width: 57%;
}

ul.blocs div:first-child {
	width: 35%;
	padding-right: 5%;
	max-width: 201px;
}

.listing ul.blocs div:last-child {
	width: 60%;
}

ul.blocs div:last-child .link, .type2 div:last-child .link {
	cursor: pointer;
	margin-top: -4%;
	font-family: "Gotham Bold",Arial,sans-serif;
	background-color: #FFFFFF;
}

.type2 div:last-child .link {
	margin-top: -2%;
}

ul.blocs div:last-child strong:first-of-type {
	font-size: 1.5rem;
	text-transform: uppercase;
	display: block;
	margin-top: 6%;
	margin-bottom: 5%;
	letter-spacing: .03rem;
	line-height: 1.9rem;
}

ul.blocs div:last-child strong:first-of-type span {
	font-size: 1.3rem;
	font-family: "Gotham Book",Arial,sans-serif;
}

ul li {
	display: block;
}

ul.nav, ul.nav-img {
	margin: 0;
}

ul.nav li, ul.nav-img li {
	width: inherit;
	padding: 1.5rem 7rem 1.5rem 0;
	text-transform: uppercase;
	font-family: "Gotham Bold",Arial,sans-serif;
	letter-spacing: .13rem;
	cursor: pointer;
	line-height: 1.5rem;
	font-size: .9rem;

}

ul.nav li {
	border-bottom: 2px solid #000000;
	padding-bottom: 0;
}

ul.nav li a {
	display: block;
	padding-bottom: 1.2rem;
}

ul.nav li a, ul.nav-img li a {
	color: #000000;
}

ul.nav li.active a {
	color: #1B4175;
}

ul.nav li.active {
	border-bottom: 2px solid #1B4175;
}

ul.nav li br {
	display: none;
}

ul.nav-img {
	margin-bottom: 2%;
}

ul.nav-img li {
	border: none;
	padding: .5rem 0 1rem 0;
}

ul.nav-img li img {
	display: inline-block;
	width: 100%;
	height: auto;
	margin-bottom: 0;
	object-fit: contain;
	image-rendering: -webkit-optimize-contrast;
}

ul.nav-img li a span {
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 2px solid #000000;
	display: inline-block;
}

img.illu {
	width: 100%;
	height: auto;
	object-fit: contain;
	image-rendering: -webkit-optimize-contrast;
}

.content-text {
	background-color: #FFFFFF;
	position: relative;
	padding: 6% 5% 4% 5%;
	width: 90%;
}

.listing {
	background: #FFFFFF;
	padding: 5%;
}

.txt-larg .listing {
	padding: 0;
}

.txt-larg .blocs {
	margin-top: 4%;
}

.bloc-content, .level3 .bloc-content, .engagements .bloc-content, .formules .bloc-content, .level4 .bloc-content {
	background-color: #FFFFFF;
	padding: 6% 5% 4% 5%;
	width: 90%;
}


/*---------------------------------
404
-----------------------------------*/
.notfound {
	background-image: url("../images/bg-intro.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: cover;
	background-attachment: fixed;
	width: 100%;
	height: 100vh;
}

.notfound .arrow {
	padding-left: 60px;
}

.notfound .content {
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	position: relative;
}

.notfound .logo {
	padding-left: 0;
	margin-bottom: 2%;
}


/*---------------------------------
INTRO .intro
-----------------------------------*/
.intro {
	background-image: url("../images/bg-intro.jpg");
}

.intro .container {
	height: 96vh;
	padding: 2% 5%;
}

.intro .parag div.title {
	font-family: "Gotham Bold",Arial,sans-serif;
	margin: 0 0 2rem 0;
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: 0.02rem;
}

.intro .parag {
	width: 100%;
	position: static;
	top: 50%;
	left: 50%;
	text-align: center;
	transform-origin: top left;
}

.intro .container .bloc {
	width: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	position: absolute;
	z-index: -1;
}

.intro .container .bloc1 {
	width: 40%;
	opacity: 0;
}

.intro .container > div img {
	width: 100%;
	height: auto;
}

.intro .logo {
	padding-left: 0;
	margin-bottom: 1rem;
	display: block;
}

.intro .parag {
	opacity: 0;
	margin-top: 25%;
	transform-origin: top left;
	z-index: 1;
	text-align: center;
}

.intro .line1, .intro .line2, .intro .line3 {
	opacity: 0;
	width: 90%;
	padding: 0 5%;
}

.intro .line2, .intro .line3 {
	display: none;
}

.intro h5  {
	opacity: 0;
	width: 100%;
	padding: 0;
	margin: 0;
}

.intro .container .btns {
	position: static;
	opacity: 0;
	margin-top: 3%;
}

.intro .btn1, .intro .btn2 {
	margin: 15px auto;
	display: block;
}

#contentPlayer {
	position: absolute;
	bottom: 15%;
	width: 90%;
	opacity: 0;
	z-index: 0;
}

#player {
	display: flex;
	flex-direction: row;
	justify-content : center;
}

#player div {
	text-align: center;
}

#player div#pause {
	padding-left: 2%;
	padding-right: 2%;
}

#player img {
	cursor: pointer;
	width: 70% !important;
}



/*---------------------------------
FILM .film
-----------------------------------*/
.container.film {
	margin: 0 auto;
	opacity: 0;
}
.film .logo {
	margin-top: 3%;
}

.film .video-container {
	padding: 2% 5% 0 5%;
	text-align: center;
}

.film .box {
	width: 100%;
	opacity: 0;
}

.film .video-container video {
	width: 100%;
	height: auto;
	margin-bottom: 2rem;
	margin-left: auto;
	margin-right: auto;
}

.film .btn {
	margin: 2% 5% 5% 0;
	display: inline-block;
	float: right;
}

#sound {
	cursor: pointer;
}

/*---------------------------------
HOME .index + catalogue
-----------------------------------*/
.index .item, .level2 .catalogue .item, .index .item, .level2 .products .item {
	width: 65%;
	opacity: 0;
	cursor: pointer;
}

.catalogue #item0, .products #item0 {
	width: 100%;
	padding-bottom: 10%;
}

.index #item5 {
	padding-left: 10%;
	padding-bottom: 1.5rem;
	width: 100%;
	float: left;
}

.index #item5 h1 {
	text-align: left;
}

.index #item5 h1 span {
	display: none;
}

.index #item2,.index #item4, .level2 .catalogue #item2, .level2 .products #item2 {
	float: right;
}

.index h4, .level2 h4 {
	padding-left: 4%;
	padding-bottom: 2rem;
}

.index .item img, .level2 .catalogue .item img, .index .item video, .level2 .products .item img, .index .item video {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	image-rendering: -webkit-optimize-contrast;
}

.level2 .type2 video {
	position: fixed;
	left: 0;
	top: 0;
	min-width: 100%;
	min-height: 100%;
}

/*---------------------------------
LEVEL2 .level2
-----------------------------------*/
.level2 .container {
	position: static;
}

.level2 h1 {
	padding: 5% 0 0 5%;
}

.level2 .catalogue h1, .level2 .products h1 {
	padding: 0 0 5% 5%;
}

.level2 .catalogue .btn, .level2 .products .btn {
	margin-left: 5%;
}

.level2 .bloc {
}

.level2 .content-text {
	position: relative;
	padding: 6% 5% 4% 5%;
	width: 90%;
}

.level2 video {
	width: 100%;
}


/*---------------------------------
LEVEL3 .level3 / + engagements + formules
-----------------------------------*/
.level3 .container, .engagements .container, .formules .container, .level4 .container {
	position: static;
}

.level3 h1,.engagements h1, .formules h1 {
	padding: 40% 0 5% 5%;
}

.level3 .bloc, .engagements .bloc, .formules .bloc {
}

.level3 .hidden p:first-of-type, .engagements .hidden p:first-of-type, .formules .hidden p:first-of-type {
	margin-top: 0;
}


/*-- FOR SMALL DEVICES --*/
@media screen and (max-height:500px) and (min-width:768px) {
	.index h1 {
		line-height: 2.2rem;
		font-size: 2rem;
	}
}

/*-- FOR SMALL DEVICES --*/
@media screen and (min-width:320px) {
}

/*-- FOR MEDIUM DEVICES --*/
@media screen and (min-width:768px) {

	/*---------------------------------
	COMMON
	-----------------------------------*/
	.hidden-xs {
		display: block;
	}

	.show-xs {
		display: none;
	}

	html {
		font-size: 90%;
	}

	h1 {
		font-size: 4.05rem;
		line-height: 4.1rem;
	}

	.index h1 {
		font-size: 2.5rem;
		line-height: 3rem;
	}

	h2 {
		font-size: 3.7rem;
		line-height: 4rem;
		letter-spacing: 0;
	}

	h4 {
		margin: 1rem 0;
		font-size: .9rem;
		line-height: 1.5rem;
		text-transform: uppercase;
		letter-spacing: .21rem;
	}

	p {
		line-height: 1.5rem;
		margin-bottom: 1.5rem;
		letter-spacing: .02rem;
		font-size: 0.9rem;
	}

	.logo {
		padding-left: 10%;
	}

	.logo, .catalogue .logo, .products .logo {
		width: inherit;
	}

	.level2 .catalogue .btn, .level2 .products .btn {
		margin-left: 0;
	}

	.arrow {
		padding-left : 53px;
		background-image: url("../images/Arrow1.png");
		background-position: left center;
		background-repeat: no-repeat;
		background-size: contain;
		text-decoration: none;
	}

	.switch {
		right: 30px;
		top: 30px;
	}

	.switchTop {
		display: block;
	}

	.intro .switch, .index .switch, .film .switch {
		right: 30px;
	}

	.level2 .switch, .level3 .switch, .level4 .switch, .engagements .switch, .formules .switch {
		display: none;
	}

	.bloc .switch {
		display: block !important;
		right: 65px;
		top: 24px;
	}

	.catalogue .switch {
		right: 65px;
		top: 25px;
		display: block;
	}

	.level2 .arrow-l {
		margin-left: -53px;
	}

	.level4 .catalogue .arrow-l,.level4 .products .arrow-l {
		margin-top: 10%;
		margin-bottom: 3%;
	}

	.catalogue h1, .products h1 {
		margin-bottom: 4%;
	}

	.catalogue h2, .products h2 {
		margin-bottom: 2%;
	}

	ul.nav, ul.nav-img {
		display: flex;
		padding-left: 0;
	}

	.bloc-content {
		display: flex;
		padding: 6% 10% 4% 0;
		width: 100%;
	}

	ul.nav li {
		padding: .5rem 0 0 0;
		margin-right: 4rem;
	}

	ul.nav-img li {
		padding: .5rem 0 0 0;
		margin-right: 4.2rem;
		width: 50%;
	}

	ul.nav li br {
		display: block;
	}

	.back {
		position: absolute;
		left: 11%;
		top: 47%;
		margin-top: 0;
	}

	.type2 .back {
		position: relative;
		top: 0;
		left: -40px;
		margin-bottom: 3%;
	}

	/*---------------------------------
	INTRO .intro
	-----------------------------------*/
	.intro .container {
		height: 100vh;
		width: inherit;
		padding: 0;
		z-index: 9;
	}

	.intro .parag {
		width: 64%;
		margin-top: 0;
		position: absolute;
		transform: translate(-50%,-50%);
		height: 255px;
		z-index: 9;
	}

	.intro .container .bloc1 {
		position: absolute;
		width: 12.95rem;
		left: 10%;
		top: 5%;
	}

	.intro .btn1, .intro .btn2 {
		margin: 2rem auto 0 auto;
		display: inline-block;
	}

	.intro .btn1 {
		margin-right: 2rem;
	}

	#contentPlayer {
		position: absolute;
		width: 100%;
	}

	#player div#pause {
		padding-left: 1.2%;
		padding-right: 1.2%;
	}


	/*---------------------------------
	FILM .film
	-----------------------------------*/
	.film .logo {
		padding-left: 0;
	}

	.film .btn {
		margin-bottom: 0;
		margin-right: 0;
	}

	.film .box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.film .video-container video {
		width: 100%;
		height: auto;
	}

	/*---------------------------------
	HOME .index
	-----------------------------------*/
	.index .container, .level2 .container.catalogue, .level2 .container.products {
		width: 100%;
		max-width: 2600px;
		height: 100vh;
		margin: 0 auto;
		padding: 0;
		position: relative;
		overflow: hidden;
	}

	.index .logo, .level2 .catalogue .logo, .level2 .products .logo {
		position: absolute;
		top: 5%;
		left: 0;
		padding-left: 5%;
		margin-top: 0;
	}

	.index .num {
		font-size: 1.8rem;
	}

	.index h4 {
		margin: 1rem 0;
		font-size: .8rem;
		line-height: 1.2rem;
		letter-spacing: .1rem;
	}

	.index .item, .level2 .catalogue .item, .index .item, .level2 .products .item {
		position: absolute;
	}

	.index h4, .level2 h4 {
		padding-left: 0;
	}

	.index #item2,.index #item4,.index #item5, .level2 .catalogue #item2, .level2 .products #item2 {
		float: none;
	}

	.index #item1 {
		/*max-width: 445px;*/
		width: 27%;
		top: 20%;
		text-align: right;
	}

	.index #item2 {
		/*max-width: 447px;*/
		width: 32%;
		top: 0;
		left: 35%;
	}

	.index #item2 div {
		min-height: 173px;
	}

	.index #item3 {
		/*max-width: 433px;*/
		width: 26%;
		top: 10%;
		right: 0;
		z-index: 1;
	}

	.index #item4 {
		/*max-width: 382px;*/
		width: 23%;
		bottom: -20px;
		right: 20%;
		padding-bottom: 0;
	}

	.index #item4 h4 {
		padding-bottom: 0;
	}

	.index #item5 {
		width: 55%;
		position: absolute;
		bottom: 0;
		left: -200%;
		padding-left: 5%;
	}

	.index #item5 h1 span {
		display: block;
	}

	.level2 video {
		width: 100vw;
		height: 100vh;
		object-fit: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.level2 .catalogue .item, .level2 .products .item {
		padding-bottom: 0;
	}

	.level2 .catalogue #item0, .level2 .products #item0 {
		width: 40%;
		top: 20%;
		left: 5%;
		z-index: 2;
		padding-bottom: 0;
	}

	.level2 .catalogue #item1, .level2 .products #item1 {
		/*max-width: 445px;*/
		width: 30%;
		bottom: 3%;
		left: 25%;
		text-align: right;
	}

	.level2 .catalogue #item1 h4, .level2 .products #item1 h4 {
		padding-bottom: 0;
	}

	.level2 .catalogue #item2, .level2 .products #item2 {
		/*max-width: 447px;*/
		width: 25%;
		top: 11%;
		right: 0;
		z-index: 2;
	}

	.level2 .catalogue #item3, .level2 .products #item3 {
		width: 25%;
		bottom: 0;
		right: 10%;
		padding-bottom: 0;
	}

	.level2 .catalogue #item3 h4, .level2 .products #item3 h4 {
		padding-bottom: 0;
	}

	/*---------------------------------
	LEVEL2 .level2
	-----------------------------------*/
	.level2 .content-text {
		padding: 6% 4% 4% 15%;
		width: 68%;
	}

	.level2 h1 {
		width: 40%;
		margin-bottom: 5%;
		padding: 0 0 0 14%;
	}

	.level2 .catalogue h1, .level2 .products h1 {
		width: 100%;
		padding-left: 0;
		margin-bottom: 7%;
		padding-bottom: 0;
		line-height: 4rem;
	}

	.level2 .bloc {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.level2 .type2 h1 {
		width: 50%;
	}

	.bloc.txt-larg .content-text {
		padding: 4.5% 6% 4% 15%;
		width: 66%;
	}


	/*---------------------------------
	LEVEL3 .level3 / engagements + formules
	-----------------------------------*/
	.level3 .content-text, .formules .content-text, .level4 .content-text {
		padding: 6% 12% 2% 15%;
		width: 60%;
	}

	.level3 .type1-4 .content-text,
	.level3 .type3-1 .content-text,
	.level3 .type3-2 .content-text,
	.level3 .type3-3 .content-text {
		padding-top: 2%;
	}

	.level3 .type3-1 .content-text,
	.level3 .type3-3 .content-text {
		/*min-height: 63vh;*/
	}

	.level3 .type1-4 .content-text .arrow-l,
	.level3 .type3-1 .content-text .arrow-l,
	.level3 .type3-2 .content-text .arrow-l,
	.level3 .type3-3 .content-text .arrow-l {
		margin-left: -53px;
		margin-bottom: 0;
		margin-top: 1%;
	}

	.level3 .type3-2 .content-text .arrow-l {
		margin-bottom: 4%;
	}

	.engagements .content-text {
		padding: 6% 8% 3% 15%;
		width: 64%;
	}

	.engagements li,.formules li {
		padding-right: 0;
	}

	.level3 .bloc-content, .engagements .bloc-content, .formules .bloc-content {
		padding: 2% 15% 4% 0;
		width: 72%;
	}

	.engagements .bloc-content {
		padding-bottom: 10%;
	}

	.level4 .bloc-content {
		padding: 2% 12% 4% 0;
		width: 75%;
	}

	.level3 h1, .engagements h1, .formules h1 {
		width: 40%;
		margin-bottom: 5%;
		padding: 0 0 0 14%;
	}

	.level3 .arrow-l, .engagements .arrow-l, .formules .arrow-l {
		margin-bottom: 4%;
	}

	.level3 .bloc, .engagements .bloc, .formules .bloc, .level4 .bloc {
		position: absolute;
		top: 100%;
		width: 100%;
		z-index: 1;
	}

	.level3 .bloc.type1-4, .engagements .bloc.type1-4, .formules .bloc.type1-4 {
		bottom: -100%;
		top: inherit;
	}

	/* IMG + TXT */
	.bloc-content.img-text div:first-child {
		width: 36%;
	}

	.bloc-content.img-text div:last-child,
	.bloc-content.listing .blocs{
		width: 50%;
		margin-left: 8%;
	}

	.bloc-content.listing {
		padding-top: 0;
		margin-top: 0;
	}

	.bloc-content.listing .blocs{
		margin-left: 44%;
		margin-top: 0;
	}

	/* type1-2 Histoire item 2 */
	.level3 .bloc-content.type1-2 {
		padding-left: 15%;
		width: 49%;
		padding-right: 23%;
	}

	/* liste img txt-larg */
	.bloc.txt-larg li div:first-child {
		width: 21%;
		padding-right: 2%;
	}

	.bloc.txt-larg li div:last-child {
		width: 50%;
	}

	.bloc.txt-larg .blocs.col-2 li div:first-child {
		width: 41%;
		padding-right: 5%;
		max-width: 201px;
	}

	.bloc.txt-larg .blocs.col-2 li div:last-child {
		width: 49%;
		padding-right: 5%;
	}

	.bloc.txt-larg .blocs.col-2 li {
		width: 50%;
	}

	.bloc.txt-larg h1, .bloc.txt-larg h2 {
		clear: both;
	}

}

@media screen and (max-width:1555px) {
	.index #item2 div {
		min-height: auto;
	}
}

/*-- FOR LARGE DEVICES --*/
@media screen and (min-width:1140px) {

	.intro .container .bloc {
		width: 28%;
	}

}

/*-- FOR XLARGE DEVICES --*/
@media screen and (min-width:1600px) {
	html {
		font-size: 100%;
	}

	.index h1 {
		font-size: 4rem;
		line-height: 4.3rem;
	}

	.level2 .catalogue #item0, .level2 .products #item0 {
		width: 40%;
	}

	.level2 .catalogue #item0, .level2 .products #item0 {
		width: 40%;
		top: 20%;
		left: 5%;
		z-index: 2;
	}

	.level2 .catalogue #item1, .level2 .products #item1 {
		width: 31%;
		bottom: 5%;
	}

	.level2 .catalogue #item2, .level2 .products #item2 {
		/*max-width: 447px;*/
		width: 25%;
		top: 11%;
		z-index: 2;
	}

	.intro .parag div.title {
		margin: 0 0 2.3rem 0;
		font-size: 2rem;
		letter-spacing: 0.1rem;
	}

	.level2 .catalogue #item3, .level2 .products #item3 {
		width: 25%;
	}

	.index .num {
		font-size: 2.5rem;
	}

	.index h4 {
		margin: 1rem 0;
		font-size: .9rem;
		line-height: 1.5rem;
		letter-spacing: .21rem;
	}

	h5 {
		font-size: 1rem;
		line-height: 1.5rem;
	}


}

/* SMALL */
@media screen and (max-width:768px) {
	.index #item2 div {
		min-height: auto !important;
	}

	.level2 .back {
		margin-top: 0;
	}

	img.illu {
		width: 112%;
		margin-left: -6%;
	}

	.level2 .type1 h1, .level2 .type4 h1 {
		margin-top: 35%;
	}

	.level2 .type1 .content-text, .level2 .type4 .content-text {
		height: 40vh;
	}

	html {
		background-size: 100%;
		background-attachment: inherit;
	}

	.intro {
		background-size: cover;
		background-attachment: fixed;
		background-position: right bottom;
	}

	.content-text.hidden-xs + .bloc-content .arrow-l{
		margin-top: 9%;
	}

	.content-text.hidden-xs + .bloc-content {
		padding-top: 0;
	}


}

/* GERMAN */
.de .switch {
	display: none !important;
}

@media screen and (max-height:500px) and (min-width:768px) {
	.index #item1 {
		width: 22%;
	}
	.index #item2 {
		width: 29%;
	}
	.index #item3 {
		width: 24%;
	}
	.index #item4 {
		right: 15%;
	}
	.index #item5 {
		padding-left: 24%;
	}
	.index h1 {
		font-size: 1.7rem;
		line-height: 2.2rem;
	}
}




.de ul.blocs div:last-child .link {
	width: auto;
}