/* GENERAL */
body {
	background-color: var(--back-color);}

:root {
  --back-color: #0D0D0D;
  --color0: #FFEA98;
  --color1: #FFEA98;
  --color2: #5AEB7D;
  --color3: #5A6EFF;}

::selection {
	background: var(--color1);
	color: var(--back-color);}

body {
	margin: 0;
	border: 0;}

body, h1, h2, h3, h4, p, a, button {
	text-decoration: none;
	margin: 0;
	padding: 0;
	border: 0;}

[contenteditable] {
	outline: 0px solid transparent;}

button {
	cursor: pointer;
	text-decoration: none;
	background-color: transparent;}


/* TRANSITIONS */
* {
    -moz-transition: all 0.2s cubic-bezier(.55,0,.29,.99);
	-webkit-transition: all 0.2s cubic-bezier(.55,0,.29,.99);
	-ms-transition: all 0.2s cubic-bezier(.55,0,.29,.99);
	transition: all 0.2s cubic-bezier(.55,0,.29,.99);}

span {
    -moz-transition: color 0s !important;
	-webkit-transition: color 0s !important;
	-ms-transition: color 0s !important;
	transition: color 0s !important;}

#wrapper {
    -moz-transition: height 0s !important;
	-webkit-transition: height 0s !important;
	-ms-transition: height 0s !important;
	transition: height 0s !important;}

.bar1, .bar2, .bar3, .bar4, .bar5, .bar6, .bar7 {
    -moz-transition: background 0.2s cubic-bezier(.55,0,.29,.99);
	-webkit-transition: background 0.2s cubic-bezier(.55,0,.29,.99);
	-ms-transition: background 0.2s cubic-bezier(.55,0,.29,.99);
	transition: background 0.2s cubic-bezier(.55,0,.29,.99);}

.fontSize {
    -moz-transition: color 0.2s cubic-bezier(.55,0,.29,.99);
	-webkit-transition: color 0.2s cubic-bezier(.55,0,.29,.99);
	-ms-transition: color 0.2s cubic-bezier(.55,0,.29,.99);
	transition: color 0.2s cubic-bezier(.55,0,.29,.99);}

 .circle1, .circle2, .circle3 {
    -moz-transition: all 0.25s cubic-bezier(.55,0,.29,.99);
	-webkit-transition: all 0.25s cubic-bezier(.55,0,.29,.99);
	-ms-transition: all 0.25s cubic-bezier(.55,0,.29,.99);
	transition: all 0.25s cubic-bezier(.55,0,.29,.99);}

 .menuLines div, .menuLines div div, .menuLinesVisible, .menuLines2Visible {
    -moz-transition: all 0.2s cubic-bezier(.55,0,.29,.99), transform 0.5s cubic-bezier(.55,0,.29,.99);
	-webkit-transition: all 0.2s cubic-bezier(.55,0,.29,.99), transform 0.5s cubic-bezier(.55,0,.29,.99);
	-ms-transition: all 0.2s cubic-bezier(.55,0,.29,.99), transform 0.5s cubic-bezier(.55,0,.29,.99);
	transition: all 0.2s cubic-bezier(.55,0,.29,.99), transform 0.5s cubic-bezier(.55,0,.29,.99);}

 .depliant1, .depliant2 {
    -moz-transition: all 0.2s cubic-bezier(.55,0,.29,.99), height 0.5s cubic-bezier(.55,0,.29,.99) !important;
	-webkit-transition: all 0.2s cubic-bezier(.55,0,.29,.99), height 0.5s cubic-bezier(.55,0,.29,.99) !important;
	-ms-transition: all 0.2s cubic-bezier(.55,0,.29,.99), height 0.5s cubic-bezier(.55,0,.29,.99) !important;
	transition: all 0.2s cubic-bezier(.55,0,.29,.99), height 0.5s cubic-bezier(.55,0,.29,.99) !important;}

 .menuLinesMobile, .menuLines {
    -moz-transition: all 0.2s cubic-bezier(.55,0,.29,.99), height 0s cubic-bezier(.55,0,.29,.99) !important;
	-webkit-transition: all 0.2s cubic-bezier(.55,0,.29,.99), height 0s cubic-bezier(.55,0,.29,.99) !important;
	-ms-transition: all 0.2s cubic-bezier(.55,0,.29,.99), height 0s cubic-bezier(.55,0,.29,.99) !important;
	transition: all 0.2s cubic-bezier(.55,0,.29,.99), height 0s cubic-bezier(.55,0,.29,.99) !important;}
/* ______________________________________________________________________________________________________________________ */
/* TYPOS */
h1 {
	font-family: Audimat3000-Leger;
	color: var(--color1);
	font-weight: normal;
	font-style: normal;
	font-size: 4em;}

button, .btn4, .sources, .ml {
	font-family: Audimat3000-Regulier;
	color: var(--color1);
	font-weight: normal;
	font-style: normal;
	font-size: 1em;}

.btn4 {
	cursor: pointer;
	text-transform: uppercase;
	width: 100%;
	padding: 100px 0;
	text-align: center;}

.sources, .ml {
	cursor: pointer;
	width: 100%;
	padding: 100px 0;
	text-align: center;}

.footer button {
	text-transform: none;}

p {
	font-family: Audimat3000-Leger;
	color: var(--color1);
	font-weight: normal;
	font-style: normal;
	line-height: 1.5em;
	font-size: 1.5em;}

.text-p1-p, .text-p2-p, .text-p3-p, .text-p4-p, .text-p5-p {
	font-size: 1.2em;}

span {
	font-family: Audimat3000-Mi-gras;}

h2, a {
	font-family: Audimat3000-Regulier;
	color: var(--color1);
	font-weight: normal;
	font-style: normal;
	font-size: 1em;}

.menuLines div a, .menuLines2 div a {
	font-family: Audimat3000-Leger;}

h2 {
	font-family: Audimat3000-Mi-gras;
	letter-spacing: .05rem;
	text-transform: uppercase;}

.fontSize {
	font-family: 'GeneralSans-Regular';}

.menuLines a, .menuLinesMobile a, .menuLines2 a {
	font-family: Audimat3000-Regulier;
	color: var(--color1);
	font-weight: normal;
	font-style: normal;
	font-size: 1.5em;}

.m1 a, .m2 a {
	font-family: Audimat3000-Leger;
	color: var(--color1);
	font-weight: normal;
	font-style: normal;
	font-size: 1.2em;}

.legende {
	font-family: Audimat3000-Leger;
	line-height: 1.3em;
	font-size: 1em;}

.a14 a {
	font-family: Audimat3000-Mi-gras !important;} /* CHANGER */

.line4Mobile a {
	font-size: .8em;}

.square1 a, .square2 a, .square3 a, .square4 a, .square5 a, .square6 a, .square7 a {
	font-family: Audimat3000-Mi-gras;
	font-size: 2em;}
/* ______________________________________________________________________________________________________________________ */
/* INTRO */
#wrapper {
	position: relative;
	min-height: 100vh;}

.text-intro {
	padding-top: 140px;
	border-bottom: solid var(--color1) 1px;
	height: auto;
    width: 100%;
	opacity: 0;
	transform: translateY(20px);
	animation: animation1 .5s cubic-bezier(.65,0,.35,1);
	animation-fill-mode: forwards;}

@keyframes animation1 {
	50% {
		opacity: 1;}
	100% {
		opacity: 1;
		transform: translateY(0px);}
}

.text-intro-p {
    width: calc(100% - (100% - 50%) /3 - 100px);
	margin: 50px 50px 25px 50px;}
/* ______________________________________________________________________________________________________________________ */
/* PART1 */
.part1 {
	margin: 0 50px;
	transform: translateY(20px);
	opacity: 0;
	overflow: auto;
	animation: animation1 .5s .1s cubic-bezier(.65,0,.35,1); 
	animation-fill-mode: forwards;}

.p1 {
	height: auto;
    width: 100%;}

.text-p1 {
	margin-top: 50px;
	margin-bottom: 25px;}

.bl1-p1 {
	float: left;
	border-right: solid var(--color1) 1px;
	padding-bottom: 50px;
    width: 50%;}

.bl2-p1 {
	float: left;
	margin-left: 25px;
    width: calc(50% - 1px - 25px - 6px);}

.bl1, .bl2, .bl3, .bl4, .bl5, .bl6, .bl7 {
	opacity: 0;
	transform: translateY(20px);
	animation: animation1 .5s .1s cubic-bezier(.65,0,.35,1); 
	animation-fill-mode: forwards;}

.bloc0 {
	position: relative;
	border: solid var(--color1) 1px;
	padding-top: 136.5%;
	max-width: calc(100% - 25px);}

.bloc1, .bloc2, .bloc3, .bloc4, .bloc5, .bloc6, .bloc7 {
	position: absolute;
	display: flex;
	background-color: var(--back-color);
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;}

.bloc2 {
	border-bottom: solid var(--color1) 1px;
	height: 50%;
	width: calc(100%);}

.bloc3 {
	border-right: solid var(--color1) 1px;
	height: 100%;
	width: calc(50%);}

.bloc4 {
	border-bottom: solid var(--color1) 1px;
	height: 50%;
	width: calc(100%);}

.bloc5 {
	border-right: solid var(--color1) 1px;
	height: 100%;
	width: calc(50%);}

.bloc6 {
	border-bottom: solid var(--color1) 1px;
	height: 50%;
	width: calc(100%);}

.bloc7 {
	background-color: var(--color1);
	border-right: solid var(--color1) 1px;
	height: 100%;
	width: calc(50%);}

.bloc2-a, .bloc4-a, .bloc6-a {
	margin: 10px 10px auto auto;
	display: block;}

.bloc1-a, .bloc3-a, .bloc5-a {
	margin: auto 10px 10px auto !important;
	display: block;}

.bl1, .bl2, .bl3, .bl4, .bl5, .bl6, .bl7 {
	display: flex;
	height: 75px;
	border-top: solid var(--color1) 1px;}

.bl7 {
	border-bottom: solid var(--color1) 1px;}

.bl1 p, .bl2 p, .bl3 p, .bl4 p, .bl5 p, .bl6 p, .bl7 p {
	display: flex;
	margin: auto 0;
	margin-left: 25px;}

.square1 a, .square2 a, .square3 a, .square4 a, .square5 a, .square6 a, .square7 a {
	display: flex;
	margin: auto;}

.bl1 div, .bl2 div, .bl3 div, .bl4 div, .bl5 div, .bl6 div, .bl7 div {
	display: flex;
	width: 75px;
	height: 75px;
	border-right: solid var(--color1) 1px;}

.separation1 {
	width: 100%;
	height: 0px;
	border-bottom: solid var(--color1) 1px;
	transform: translateY(20px);
	opacity: 0;
	animation: animation1 .5s .1s cubic-bezier(.65,0,.35,1);
	animation-fill-mode: forwards;}
/* ______________________________________________________________________________________________________________________ */
/* PART2 */
.part2 {
	margin: 50px;
	transform: translateY(20px);
	opacity: 0;
	animation: animation1 .5s .2s cubic-bezier(.65,0,.35,1); 
	animation-fill-mode: forwards;}

.p2 {
	height: auto;
    width: 100%;}

.text-p2 {
	margin-bottom: 25px;}

.whiteSpace {
	width: 100%;
	padding-bottom: 50px;
	height: 0px;}
/* ______________________________________________________________________________________________________________________ */
/* FOOTER */
.footer {
	position: absolute;
	bottom: 0;
	border-top: solid var(--color1) 1px;
	background-color: var(--back-color);
	height: 50px;
    width: 100%;
	overflow: hidden;
	transform: translateY(0px);
	opacity: 0;
	animation: animation1 .5s .3s cubic-bezier(.65,0,.35,1); /* CHANGER DELAY */
	animation-fill-mode: forwards;}

.foot1 {
	float: left;
	height: 100%;
	width: 50%;
    border-right: solid var(--color1) 1px;}

.foot2, .foot3, .foot4 {
	float: left;
	height: 100%;
	width: calc((100% - 50%) / 3 - 20px);
    border-right: solid var(--color1) 1px;}

.foot2, .foot4 {
	align-items: center;
	display: flex;}

.foot5 {
	float: left;
	margin: 0px 0;
	height: calc(100%);
	width: calc(50% - 3 * ((100% - 50%) / 3 - 20px) - 4px);}

.foot1 a {
	cursor: text;
	line-height: 50px;
	text-align: left;
	padding-left: 50px;}

.foot1 a span {
	cursor: pointer;}

.footer button {
	width: 100%;
	line-height: 50px;}

.blCircleTheme {
	width: 100%;
	display: flex;
    align-items: center;
	height: calc(100%);}

.circleThemeColor {
	display: block;
	margin: 0 auto;
	z-index: 1;
	opacity: 1;
	cursor: pointer;
	background: linear-gradient(to bottom, var(--color1) 0%, var(--color1) 50%, transparent 50%, transparent 100%);
	border: solid var(--color1) 1px;
    width: 16px;
    height: 16px;
    border-radius: 20px;}

.circleThemeColor:hover {
	transform: rotate(90deg);}
/* ______________________________________________________________________________________________________________________ */
/* MENU */
.menu {
	z-index: 10;
	position: fixed;
	top: 0px;
	overflow: hidden;
	border-bottom: solid var(--color1) 1px;
	background-color: var(--back-color);
	height: 140px;
    width: 100%;}

.menu1 {
	float: left;
	height: 100%;
	width: 50%;
	overflow: hidden;
    border-right: solid var(--color1) 1px;}

.menu2, .menu3, .menu4 {
	float: left;
	height: 100%;
	width: calc((100% - 50%)/3 - 20px);
    border-right: solid var(--color1) 1px;}

.menu2, .menu5 {
	position: relative;}

.menu4 {
	align-items: center;
	display: flex;}

.menu5 {
	float: left;
	height: calc(100% - 50px);
	margin: 25px 0;
	width: calc(50% - 3 * ((100% - 50%)/3 - 20px) - 4px);}

.blCircle1, .blCircle2, .blCircle3 {
	width: 100%;
	display: flex;
    align-items: center;
	height: calc(100% / 3);}

.circle1, .circle2, .circle3 {
	display: block;
	transform: scale(.8);
	margin: 0 auto;
	opacity: .75;
	cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 20px;}

.circle1 {
	z-index: 5;
    background-color: var(--color0);}

.circle2 {
	z-index: 4;
    background-color: var(--color2);}

.circle3 {
	z-index: 3;
    background-color: var(--color3);}

.circle1:hover, .circle2:hover, .circle3:hover {
	transform: scale(1);
	opacity: 1;}

h1 {
	line-height: 140px;
	text-align: left;
	padding-left: 50px;
	opacity: 0;}

button {
	width: 100%;
	line-height: 140px;
	text-transform: uppercase;}

.cross {
	visibility: hidden;
	cursor: pointer;
	position: absolute;
	top: calc(140px / 2);
	transform: translateY(-50%);
	height: 50px;
	width: calc(50% - 50px);
	left: 30px;}

.cross1, .cross2 {
	opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	width: 50px;
	border-top: solid var(--color1) 2px;
	height: 50px;}

.cross1 {
	transform: rotate(0deg) translateY(50%);}

.cross2 {
	transform: rotate(0deg) translateY(50%);}

.ham {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
	top: 50%;
	padding: 10px;
	transform: translate(-50%, -50%);
	display: block;
	left: calc(50% - 50px);
	height: 50px;
	width: 50px;}

.ham1, .ham2, .ham3 {
	width: 100%;
	margin-bottom: calc(50px / 3 + 4px);
	border-top: solid var(--color1) 2px;}

.ham3 {
	width: 50%;}

.ham:hover .ham3 {
	width: 100%;}
/* ______________________________________________________________________________________________________________________ */
/* SCROLL MENU */
.menuScroll {
	height: 50px !important;}

.ttlScroll {
	line-height: 50px;
	font-family: Audimat3000-Regulier;
	font-size: 1em;}

.buttonScroll {
	line-height: 50px !important;}

.circleScroll:hover {
	transform: scale(.8) !important;}

.circleScrollHide {
	transform: scale(.8) !important;
	z-index: 0;}

.menu5Scroll {
	height: calc(100% - 50px) !important;
	margin: 25px 0 !important;}

.menuLinesScroll {
	height: calc(100vh - 51px) !important;
	top: 51px !important;}

.crossScroll {
	top: calc(50px / 2) !important;}

.crossBarScroll {
	width: 30px;}

.hamScroll {
	padding: 0 10px;}

.ham1Scroll, .ham2Scroll {
	margin: 24% 0;}

.ham1Scroll {
	margin-top: 32%;}

.ham3Scroll {
	opacity: 0;
	visibility: hidden;}
/* ______________________________________________________________________________________________________________________ */
/* MENU LINES */
.menuLines {
	position: fixed;
	top: 141px;
	z-index: 20;
	background-color: var(--back-color);
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	height: calc(100vh - 141px);
	width: 100%;}

.line24, .line25, .line26, .line27, .line211, .line212, .line213 {
	opacity: 0;
	visibility: hidden;}

.left, .left2, .right, .right2 {
	width: 50%;
	height: 100%;}

.left2 {
	position: absolute;
	top: 0px;
	left: 0% !important;}

.right, .right2 {
	position: absolute;
	top: 0px;
	left: calc(50% + 1px) !important;}

.left div, .left2 div, .right div, .right2 div {
	opacity: 0;
	margin-top: 20px;
	overflow: hidden;
	width: 100%;
	height: calc(100% / 7);
	border-right: solid var(--color1) 1px;
	border-bottom: solid var(--color1) 1px;}

.menuLines div div:hover, .menuLines2 div div:hover {
	background-color: var(--color1);}

.menuLines div div:hover a, .menuLines2 div div:hover a {
	color: var(--back-color);}

.ongletActive {
	color: var(--back-color) !important;}

.lineActive {
	background-color: var(--color1);}

.menuLines a, .menuLines2 a {
	display: block;
	cursor: pointer;
	height: 100%;
	transform: translateY(calc(50% - 0.5em));
	margin-left: 50px;}

.menuLinesActive {
	position: fixed;
	opacity: 1;
	visibility: visible;
	top: 141px;
	z-index: 20;
	background-color: var(--back-color);
	height: calc(100vh - 141px);
	overflow: visible;
	width: 100%;}

.active {
	margin-top: 0px !important;
	opacity: 1 !important;}

.active2 {
	transform: translateY(0px) !important;
	opacity: 1 !important;}

.titleActive {
	cursor: default;
	transform: translateX(20px);
	opacity: 0 !important;}

.crossActive {
	visibility: visible;
	left: 50px;}

.cross1Active {
	opacity: 1;
	transform: rotate(45deg) translateY(calc(50% - 01px));}

.cross2Active {
	opacity: 1;
	transform: rotate(-45deg) translateY(calc(50% - 01px));}

.moveLeft {
	z-index: -1;
	margin-top: 0px !important;
	transform: translateX(-200%);}

.moveRight {
	z-index: -1;
	margin-top: 0px !important;
	transform: translateX(200%) !important;}

.moveCenter {
	margin-top: 0px !important;
	opacity: 1 !important;
	transform: translateX(0%) !important;}
/* ______________________________________________________________________________________________________________________ */
/* MENU LINES MOBILE */
.menuLinesMobile {
	opacity: 0;
	visibility: hidden;
	z-index: 20;
	position: fixed;
	top: 101px;
	height: calc(100% - 101px);
	background-color: var(--back-color);
	width: 100%;}

.line1Mobile, .line2Mobile, .line3Mobile {
	overflow: hidden;
	height: calc((100% / 16) * 2);
	margin-top: 20px;
	opacity: 0;
	width: 100%;
	border-top: solid var(--color1) 1px;}

.line1Mobile {
	border-top: solid var(--color1) 0px;}

.line3Mobile {
	border-bottom: solid var(--color1) 1px;}

.line4Mobile {
	opacity: 0;
	transform: translateY(20px);
	width: 100%;
	position: fixed;
	bottom: 0px;
	height: 50px;
	border-top: solid var(--color1) 0px;
	border-bottom: solid var(--color1) 0px !important;}

.depliant1, .depliant2 {
	border-top: solid var(--color1) 1px;
	height: 0px;
	opacity: 0;
	width: 100%;}

.depliant1Active {
	height: calc(100% - (3 * (100% / 16) * 2));}

.depliant2Active {
	height: calc(100% - (3 * (100% / 9) * 2));}

.m1 {
	height: calc(100% / 13);
	width: 100%;
	overflow: hidden;}

.m2 {
	height: calc(100% / 6);
	width: 100%;
	overflow: hidden;}

.line1Mobile a, .line2Mobile a, .line3Mobile a {
	cursor: pointer;
	display: inline-block;
	transform: translateY(-50%);
	top: 50%;
	padding: 50px;
	width: calc(100% - 100px);
	position: relative;}

.line4Mobile a {
	display: inline-block;
	visibility: hidden;
	opacity: 0;
	width: calc(75% - 15px);
	margin-left: 15px;
	margin-top: calc((50px/2) - 6px);}

.m1 a, .m2 a {
	cursor: pointer;
	display: inline-block;
	transform: translateY(-50%);
	opacity: 0;
	top: 50%;
	padding: 50px;
	width: calc(100% - 100px);
	position: relative;}

.mActive {
	opacity: 1 !important;
	padding: 80px !important;}

.menuLinesMobileActive {
	opacity: 1;
	visibility: visible;}

.ham1Active {
	width: 50%;}

.ham3Active {
	width: 100% !important;}

.circleMobile {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	height: 50px;
	right: 0px;
	bottom: 0px;
	border-left: solid var(--color1) 1px;
	width: 25%;}

.circleMobileColor {
	cursor: pointer;
	position: absolute;
	transform: scale(.8) translate(-50%, -50%);
	top: 50%;
	left: 50%;
	background: linear-gradient(to bottom, var(--color1) 0%, var(--color1) 50%, transparent 50%, transparent 100%);
	height: 20px;
	margin: 0px !important;
	width: 20px !important;
	border-radius: 20px;
	border: solid var(--color1) 2px;}

.mlMobile {
	cursor: pointer;}
/* ______________________________________________________________________________________________________________________ */
/* GENERAL */
.opacity0 {
	transition: opacity .2s cubic-bezier(.65,0,.35,1); 
	opacity: 0 !important;}

.opacity1 {
	transform: scale(1);
	opacity: 1;}

.circleScroll {
	transform: scale(.8) !important;}

.opacity2 {
	opacity: 1;}

.opacity3 {
	opacity: 1;
	transform: translateY(0px);
	animation: animation2 .2s cubic-bezier(.65,0,.35,1);
	animation-fill-mode: forwards;}

@keyframes animation2 {
	to {
		opacity: 0;}
}

.color-text {
	color: var(--back-color) !important;}

.color-bloc {
	background-color: var(--color1);}

.color-bloc-7 {
	background-color: var(--back-color);}

.memuBorder {
	border-bottom: solid var(--color1) 0px !important;}
/* ______________________________________________________________________________________________________________________ */























































/* ______________________________________________________________________________________________________________________ */
/* RESPONSIVE - MENU */
@media screen and (min-width: 1921px) {

}

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

}

@media screen and (max-width: 1500px) {
    h1 {
		line-height: 100px;
		font-size: 3em;}
    .menu button {
		line-height: 100px;
		font-size: .8em;}
    .btn4, .ml, .sources {
		font-size: .8em;}
    .menu {
		height: 100px;}
	.menu5 {
		height: calc(100% - 20px);
		margin: 10px 0;}
    .text-intro {
		padding-top: 100px;}
	.cross {
		top: calc(100px / 2);}
	.menuLines, .menuLines2 {
		height: calc(100vh - 101px);
		top: 101px;}
}

@media screen and (max-width: 1200px) {
	.ham {
		left: 50%;
		opacity: 1;
		visibility: visible;}
	.menu button, .menu3, .menu4 {
		opacity: 0;
		width: 0px;
		visibility: hidden;}
	.menu2 {
		width: 25%;}
	.menu5 {
		height: 100%;
		margin: 0;
		font-size: 0;
		width: calc(25% - 4px);}
	.blCircle1, .blCircle2, .blCircle3 {
		float: right;
		text-align: right;
		height: 100%;
		width: 20px;
		margin-left: 15px;}
	.blCircle1 {
		margin-right: 50px;}
	.menuLines, .menuLines2 {
		visibility: hidden;
		opacity: 0;}
}

@media screen and (max-width: 1100px) {
    h1 {
		font-size: 2.5em;}
}

@media screen and (max-width: 950px) {
    h1 {
		padding-left: 20px;
		font-size: 2em;}
	.blCircle1 {
		margin-right: 20px;}
	.line1Mobile a, .line2Mobile a, .line3Mobile a, .m1 a, .m2 a {
		width: calc(100% - 40px);
		padding: 20px;}
	.mActive {
		padding: 50px !important;}
	.cross {
		left: 0px;}
	.crossActive {
		left: 20px;}
}

@media screen and (max-width: 800px) {
    h1 {
		line-height: 75px;}
    .menu button {
		line-height: 75px;}
    .menu {
		height: 75px;}
    .text-intro {
		padding-top: 75px;}
	.ham {
		height: 30px;}
	.ham1Active {
		width: 100%;}
	.hamScroll {
		height: 50px;}
	.ham1, .ham2, .ham3 {
		margin-bottom: calc(30px / 3 + 2px);}
	.menuLines, .menuLinesMobile {
		height: calc(100% - 76px);
		top: 76px;}
	.cross {
		top: calc(75px / 2);}
}

@media screen and (max-width: 700px) {
    h1 {
		padding-left: 15px;
		font-size: 1.5em;}
	.ttlScroll {
		font-family: Audimat3000-Leger;
		font-size: 1.5em;}
	.blCircle1, .blCircle2, .blCircle3 {
		margin-left: 0px;
		width: calc((100% - 30px) / 3);}
	.blCircle1 {
		margin-right: 15px;}
	.line4Mobile {
		border-top: solid var(--color1) 1px;}
	.line4Mobile a, .circleMobile {
		visibility: visible;
		opacity: 1;}
	.line1Mobile a, .line2Mobile a, .line3Mobile a, .m1 a, .m2 a {
		width: calc(100% - 30px);
		padding: 15px;}
	.mActive {
		padding: 45px !important;}
	.crossActive {
		left: 15px;}
	.line1Mobile, .line2Mobile, .line3Mobile {
		height: calc(((100% - 148px) / 16) * 2);}
}

@media screen and (max-width: 500px) {
    h1 {
		line-height: 50px;}
    .menu button {
		line-height: 50px;}
    .menu {
		height: 50px;}
    .text-intro {
		padding-top: 50px;}
	.circle1, .circle2, .circle3 {
		transform: scale(.6);}
	.circle1:hover, .circle2:hover, .circle3:hover {
		transform: scale(.6);}
	.ham {
		width: 30px;
		height: 30px;}
	.ham1, .ham2, .ham3 {
		margin: 9px 0;}
	.ham3 {
		visibility: hidden;
		opacity: 0;}
	.cross {
		top: calc(50px / 2);}
	.menuLines, .menuLinesMobile {
		height: calc(100% - 51px);
		top: 51px;}
	.cross1, .cross2 {
		width: 30px;}
	.circleMobileColor {
		left: calc(50% - 3px);
		top: calc(50% - 3px);
		transform: scale(.6) translate(-50%, -50%) !important;}
	.m1 a, .m2 a {
		font-size: 1em;}
	.circleScrollHide, .circleScroll, .circleScroll:hover {
		transform: scale(.6) !important;}
}
/* __________________________________________________________________________________________________ */
/* RESPONSIVE - CONTENT */
@media screen and (min-width: 1921px) {

}

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

}

@media screen and (max-width: 1500px) {
	p {
		font-size: 1.2em;}
}

@media screen and (max-width: 1200px) {
	.text-intro-p {
		width: auto;}
	.bl2-p1 {
		float: right;
		width: calc(50% - 1px - 25px);}
}

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

}

@media screen and (max-width: 950px) {
	.text-intro-p {
		margin: 50px 20px 25px 20px;}
	.part1, .part2, .part3, .part4 {
		margin: 50px 20px;}
	.part1 {
		overflow: visible;}
	.bl1-p1, .bl2-p1 {
		float: none;
		margin: 0;
		width: 100%;
		padding-bottom: 0px;
		border-right: solid var(--color1) 0px;}
	.bloc0 {
		max-width: calc(100%);}
	.text-p1 {
		margin-top: 0;}
	.bl2-p1 .text-p1 {
		margin-top: 50px;}
	.bl1-p5, .bl3-p5 {
		width: 50%;}
	.bl2-p5, .bl4-p5 {
		float: right;
		border-right: solid var(--color1) 0px;
		width: calc(50% - 1px);}
	.bl3-p5 h2, .bl4-p5 h2 {
		display: none;}
	.bl1-p5 a, .bl2-p5 a, .bl3-p5 a, .bl4-p5 a {
		width: calc(100% - 40px);
		margin: 0 20px;}
}

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

}

@media screen and (max-width: 700px) {
	.text-intro-p {
		margin: 50px 15px 25px 15px;}
	.part1, .part2, .part3, .part4, .part5 {
		margin-right: 15px;
		margin-left: 15px;}
}

@media screen and (max-width: 500px) {
	.text-intro-p {
		margin: 25px 15px;}
	p, .p2 a, .p3 a, .text-p1-p, .text-p2-p, .text-p3-p, .text-p4-p, .text-p5-p  {
		font-size: 1em;}
	.square1, .square2, .square3, .square4, .square5, .square6, .square7 {
		width: 50px !important;
		height: 50px !important;}
	.square1 a, .square2 a, .square3 a, .square4 a, .square5 a, .square6 a, .square7 a {
		font-size: 1.5em;}
	.bl1, .bl2, .bl3, .bl4, .bl5, .bl6, .bl7 {
		height: 50px;}
}
/* __________________________________________________________________________________________________ */
/* RESPONSIVE - FOOTER */
@media screen and (min-width: 1921px) {

}

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

}

@media screen and (max-width: 1500px) {
    .foot1 a, .foot2 a, .foot3 button, .foot4 a {
		font-size: .8em;}
}

@media screen and (max-width: 1200px) {
	.foot2, .foot3, .foot4 {
		width: calc((50%/3) - 1px);}
	.foot4 {
		border-right: solid var(--color1) 0px;}
	.foot5 {
		width: 0px;}
	.circleTheme {
		opacity: 0;
		visibility: hidden;
		width: 0px;}
	.circleThemeColor {
		opacity: 0;
		visibility: hidden;}
}

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

}

@media screen and (max-width: 950px) {
	.foot1 a {
		padding-left: 20px;}
}

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

}

@media screen and (max-width: 700px) {
	.foot2, .foot3 {
		width: calc((50%)/2 - 1px);}
	.foot3 {
		border-right: solid var(--color1) 0px;}
	.foot4, .foot4 a {
		width: 0px;
		opacity: 0;
		visibility: hidden;}	
	.foot1 a {
		padding-left: 15px;}
}

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

}
/* __________________________________________________________________________________________________ */