@font-face {
    font-family: 'courier_newregular';
    src: url('webfont/cour-webfont.woff2') format('woff2'),
         url('webfont/cour-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


* {
margin: 0;
padding: 0;
font-family: 'courier_newregular';
font-size: 100%;
font: inherit;
}
.page_background{
position: center;

}

.nav-homelink img {
	padding-top: 1px;
	height: 50px;
	border: none;
}
#myImg {
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
	margin-top: 10vh;
}


div.at-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.at-item {
  animation-name: rotate-center;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
}
@keyframes rotate-center {
  0%{
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100%{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


html {
font-size: 100%;
/* scroll-behavior: smooth; */
}

body {
--white: #fff;
--black: #000;

font-family: 'courier_newregular';
color: black;
background-color: #F8F8FF;

/* CHECK FILL AVAILABLE */

/* scroll-snap-type: proximity;
scroll-snap-type: y proximity;
overflow: scroll;
scroll-snap-destination: 0 0; */
/* height: 100vh; */

/* height: -webkit-fill-available; */
}


.section:first-of-type {
margin-top: 60px;
}

.section {
min-height: calc(100vh - 60px);
display: block;
/* height: auto; */
border-bottom: solid 1px var(--black);
/* scroll-snap-align: start; */
/* position: relative; */
/* background: var(--white); */
scroll-margin-top: 60px;

}



.text-l {
font-size: 4.5vw;
line-height: 5vw;
font-weight: 300;
color:#0000FF ;
}

.text-l p {
max-width: 75rem;
max-width: 88vw;
color:var(--black) ;

}

.text-m {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 400;
color: var(--black);
}

p {
	margin-left: 20px;
	margin-top: 20px;
	color:black;
}

table {
	border-collapse:collapse;
	width: 100%;
	position:relative;
	color:black;
	display: table;


}



strong {
font-weight: 500;
/* text-transform: uppercase; */
}

.text-uppercase {
text-transform: none;
}

.text-lowercase {
text-transform: none;
}

a {
color: #0000FF;
text-decoration: none;
}


.body--focusable *:focus {
outline: solid 4px ;
}

*:focus {
outline: none;
}


::selection {
background: #F8F8FF;
color: var(--black);
}

img::selection {
background: var(--black);
}

span.small {
font-size: 1.1rem;
vertical-align: top;
font-weight: 500;
font-variant:small-caps;
}


.verticalcenter {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: transparent;
}

.unzyale {
font-family:Amazonia Beta ;
}

.basebloom {
font-family: Amazonia Beta;


}

.bglogo {
font-size: 90vw;
color: black;
position: fixed;
pointer-events: none;
z-index: -1;
top: 50%;
transform: translateY(-47%);
left: -7vw;
line-height: 3vw;
-webkit-user-select: none ;
-webkit-text-stroke: 0.5px var(--black);;
animation: logoani 6s alternate-reverse infinite linear;
display: flex;
background-color: inherit;
outline: 1px;


}

@keyframes logoani {
from {
	left: -35vw;
}

to {
	left: 5vw
}
}



/* INVERT */



.body--invert .nav-homelink img, .body--invert .contact-logo img {
filter: invert(1);
}

.body--invert .bglogo {
color: transparent;
-webkit-text-stroke: 1px var(#F8F8FF);
display: block;
}

.body--invert .jobs-item-content {
color: var(#F8F8FF);
filter: invert(1);
}

.body--invert .jobs-item-content a {
color: var(--black);
}

.body--invert .jobs-item-content ::selection {
background: rgba(0,0,0,.99);
color: var(--white);
}



.body--invert .jobs-item-title:focus, .body--focusable.body--invert .jobs-item-title:focus {
outline: none;
background: var(#F8F8FF);
color: var(--black);
}

.body--invert ::selection {
background: #F8F8FF;
/* background: rgba(0,0,0,.9); */
color: var(--black);
}

.body--focusable.body--invert *:focus {
outline: solid 4px #F8F8FF;
}






/* NAV */

.nav {
border-bottom: solid 1px var(--black);
height: 60px;
line-height: 60px;
display: flex;
position: fixed;
width: 100%;
z-index: 200;
top: 0;
background: #F8F8FF

}

.nav-homelink {
margin-right: auto;
margin-left: 20px;
}



.nav-link {
margin-right: 20px;
background-color: #F8F8FF;
}

.nav-link--active {
color: #0000FF


}

.nav-hamburger {
display: none;
}

.nav-link--cta {
padding-right: 0px;
}

.nav-link--cta:after {
font-size: 2em;
height: .55em;
padding-bottom: .4em;
position: absolute;
padding-left: 0px;
}



.nav-link--cta.nav-link--active:after {
border-bottom: var(--black) solid 2px;

height: 35px;
width: 40px;
}

.generalclose {
display: none;
}



/* INTRO */

.intro {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
right: 0;
z-index: 500;
transition: all .6s cubic-bezier(0.22, 1, 0.36, 1);
cursor: pointer;
overflow: hidden;
}

.intro--invisible {
opacity: 0;
pointer-events: none;
}

.intro-item {
position: absolute;
height: auto;
filter: contrast(200%);
visibility: hidden;
animation: introshowup 0s forwards;
}

@keyframes introshowup {
from {
	visibility: hidden;
}

to {
	visibility: visible;
}
}






/* ABOUT */

.about {
position: relative;
overflow-x: hidden;
min-height: calc(100vh - 60px);

}


.about .small, .career .small {
margin-top: -1.2vw;
color: transparent
}

.about-scrolldown {

	font-size: 9vw;
	transform: translateX(-50%);
	color: #0000FF;
    margin-left: auto;
    margin-right: auto;
}

.biglink p:after {
content: '→';
font-family: 'courier_newregular';
font-size: 2em;
display: inline;
position: absolute;
margin-top: -2px;
text-indent: .1em;
transition: all .4s cubic-bezier(0.22, 1, 0.36, 1);
}

.biglink:hover p:after {
text-indent: .4em;
}




/* BRANDS */

.brands {
padding: 0px;
background-color: #F8F8FF
}

.brands-list {
display: flex;
}

.brands-list-item {
border-right: solid 1px var(--black);
overflow-x: hidden;
position: relative;

transition: all .1s cubic-bezier(0, 1, 0.36, 1);
}

.brands-list-item:first-of-type {
border-left: none;
}

.brands-list-item:last-of-type {
border-right: none;
}

.brands-list-item-info:hover, .brands-list-item--active .brands-list-item-info, .body--focusable .brands-list-item-info:focus {
background: #F8F8FF;
border-left: solid 1px var(--black);
}

.brands-list-item-info {
transform: rotate(180deg);
writing-mode: vertical-lr;
text-orientation: mixed;
height: calc(100vh - 100px);
padding: 20px 0 20px 0;
font-size: 3vw;
cursor: pointer;
position: relative;
transition: all .4s cubic-bezier(0.22, 1, 0.36, 1);
background: var(white);
border: solid 1px var(--black);
}

.brands-list-item:not(.brands-list-item--inactive) .brands-list-item-info:hover .brands-list-item-info-name, .brands-list-item--active .brands-list-item-info-name {
margin-top: 0px;
}

.brands-list-item-info-name {
position: absolute;
top: 20px;
/* right: 1.8vw; */
right: 2.8vw;
right: 3.3vw;
transition: all .6s cubic-bezier(0.22, 1, 0.36, 1);
color: black;
}

.brands-list-item-info-name span.small {
/* margin-top: 12px;
margin-right: 1.1vw; */
margin-top: 0px;
margin-right: 8px;
}

.brands-list-item-info-number {
/* margin-left: auto; */
position: absolute;
bottom: 20px;
/* right: 1.8vw; */
/* right: 2.8vw; */
right: 3.3vw;
transition: all .6s cubic-bezier(0.22, 1, 0.36, 1) (--white);

}

.brands-list-item-info-name, .brands-list-item-info-number {
    font-weight: 500;
}

.brands-list-item-content {
    position:absolute;
    top: 0px;

    bottom: 0;

	width: auto;
	overflow-y: visible;
	padding: 20px 20px 20px 20px;
}


.brands-list-item-content-main-images {

	-webkit-user-select:none;


	display: flex;
	flex-direction: horizontal;

	position: relative;

	object-fit: scale-down;

	flex-shrink: 1px;
	overflow-x:  auto;
	overflow-y: auto;



}


.brands-list-item-content-main-text {
padding: 20px 20px 20px 20px;
}



.brands-list-item--active .brands-list-item-content {
display:block;
}


.brands-list-item--inactive .brands-list-item-info-name, .brands-list-item--inactive .brands-list-item-info-number {
/* right: 1vw; */
right: 1vw;
}
.responsive {
 width: 100%;
 height: auto;
}
img {
	display: block;
    transform: translate3d(0, 0, 0);
    height: 70vh;
    object-fit: scale-down;
	margin: 3px;
	border: 0.5px solid;
	border-color: black

}

.responsive-img {
height: auto;
width: 50%;
}

/* BRANDS */

.Experimentations {
padding: 0;
}



/* CONTACT */








.apropos {
	font-family: 'otto_attac_typeregular';
}









/* FOOTER */

.footer {
height: 60px;
line-height: 60px;
padding: 0 20px;
text-align: right;
}

.footer a {
margin-right: 20px;
}

.footer a:last-of-type {
margin: 0;
}



/* DEFAULT */
.section--flexible {
padding: 40px 80px 120px 20px;
min-height: initial;
}

.twocolumns {
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
top: 20px;
margin-top: 3em;
width:inherit;

}

.jobs-item .twocolumns {
grid-gap: 0;
}

.twocolumns > div {
grid-column: span 1;
}

.text-m p a {
text-decoration: underline;
}

.text-m p a:hover {
text-decoration: none;
}

.text-l+.twocolumns {
margin-top: 3em;
}

.twocolumns ul {
margin-left: 1em;
margin-bottom: 2rem;
}



/* CAREER */
.career {
/* padding: 0 0 120px 0; */
padding: 0 0 0 0;
}

.career-intro {
/* padding: 40px 80px 160px 20px; */
padding: 80px 80px 160px 20px;
}

.career-nojobs {
padding: .8em 20px;
background: var(--black);
border-top: solid 1px var(#F8F8FF);
border-bottom: solid 1px var(#F8F8FF);
}



.jobs-item {
width: 100%;
/* border-bottom: solid 1px var(--black); */
border-bottom: none;
}

.jobs-item-title {
background: var(--black);
border-top: solid 1px var(#F8F8FF);
border-bottom: solid 1px var(#F8F8FF);
padding: .8em 20px;
cursor: pointer;
transition: all .4s cubic-bezier(0.22, 1, 0.36, 1);
}

.jobs-item-title-arrow {
-webkit-font-smoothing: initial;
float: right;
margin-right: 40px;
transition: all .2s cubic-bezier(0.22, 1, 0.36, 1);
}

.jobs-item--active .jobs-item-title-arrow {
transform: rotate(180deg);
}

.jobs-item + .jobs-item > .jobs-item-title {
border-top: none;
}

.jobs-item:last-of-type .jobs-item-title {
border-bottom: none;
}

.jobs-item-title .small {
/* margin-top: -17px; */
margin-top: -1.1vw;
margin-left: .6vw;
}

.jobs-item-content {
/* padding: 2rem 20px; */
/* padding: 0 20px; */
padding: 0;
/* background: url(../images/line.png) transparent; */
background: var(#F8F8FF);
min-height: 0;
height: 0;
margin-top: 0 !important;
overflow: hidden;
border-bottom: none;
transition: all .4s cubic-bezier(0.22, 1, 0.36, 1);
}

.jobs-item-content strong {
text-transform: uppercase;
}

.jobs-item-content div {
padding: 2rem 20px;
position: relative;
border-right: solid 1px var(--black);
}

/* .jobs-item--active .jobs-item-content div {
} */

.jobs-item-content div+div {
/* border-left: solid 1px var(--white); */
border-right: none;
}


.jobs-item--active + .jobs-item {
border-top: solid 1px var(#F8F8FF);
}

.jobs-item--active .jobs-item-title, .jobs-item-title:hover {
background: var(#F8F8FF);
color: var(--black);
}

.jobs-item--active .jobs-item-content {
height: auto;
min-height: calc(100vh - 60px - 200px);
}

a.jobs-item-content-link {
display: block;
width: calc(100% + 40px);
height: 60px;
line-height: 60px;
margin-left: -20px;
padding: 0 20px;
bottom: 0;
border-top: solid 1px var(--black);
transition: all .4s cubic-bezier(0.22, 1, 0.36, 1);

background: var(--white);
color: var(black) !important;

position: absolute;
bottom: 0;
}

a.jobs-item-content-link:hover {
background: var(--white);
color: var(--black) !important;
}







@media (max-width: 1150px) {
html {
	/* font-size: 70%; */
	font-size: 75%;
}

/* .jobs-item-content {
background-size: auto 24px;
} */

}


@media (max-width: 800px) {
html {
	/* font-size: 50%; */
}

.text-l {
	font-size: 2rem;
	line-height: 2.5rem;
}

.nav {
	position: fixed;
}



.nav-menu {
	width: 100%;
	background: var(--white);
	position: fixed;
	top: -400px;
	padding: 0;
	transition: all .4s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 100;
}

.nav-menu a {
	display: block;
	border-bottom: solid 1px var(--black);
	padding-left: 20px;
	margin-right: 0;
	transition: all .6s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-homelink {
	position: fixed;
	left: -20px;
	padding-left: 20px;
	width: calc(100vw - 60px);
	height: 60px;
	border-bottom: solid 1px var(--black);

	z-index: 200;
}

/* .nav-menu a:hover, .nav-link--active { */
.nav-menu a:hover {
	background: var(--black);
}

.nav-menu--visible {
	top: 60px;
	opacity: 1;
}

.nav-hamburger {
	display: block;
	cursor: pointer;
	background: none;
	border: none;
	font-size: 30px;
	width: 60px;
	right: 0;
	position: fixed;
	height: 60px;


	z-index: 200;
}

.nav-hamburger span {
	transform: initial;
	transition: all .4s cubic-bezier(0.22, 1, 0.36, 1);
	color: var(--black);

	font-feature-settings: "ss01";
	font-size: 2em;
}

.nav-hamburger--active span {
	transform: rotate(45deg);
}

.about, .career-intro {
	padding: 40px 20px 60px 20px;
}

.about h1 p {
	max-width: 100vw;
}


.about-scrolldown {
	font-size: 16vw;
	bottom: 0;
}

.brands {
	border-bottom: none;
}

.brands-list {
	display: block;
}

.brands-list-item {
	width: 100vw !important;
	overflow: none;

	border-bottom: solid 1px var(--white);
	border-right: none;
	height: 20vw;
	min-height: 20vw;

	transition: all .6s cubic-bezier(0.22, 1, 0.36, 1);
}

.brands-list-item-info {
	transform: initial;
	writing-mode: initial;
	text-orientation: mixed;
	height: 10vw;
	width: 100% !important;
}

.brands-list-item-info-name, .brands-list-item--active .brands-list-item-info-name {
	font-size: 6vw;
	right: initial;
	left: 20px;
	margin-top: 0 !important;
	top: 50%;
	transform: translateY(-50%);
}

.brands-list-item-info-name span.small {
	/* margin-top: 2.1vw; */
	margin-top: 1.2vw;
	margin-left: 6px;
}

.brands-list-item-info-number, .brands-list-item--inactive .brands-list-item-info-number {
	right: 20px;
	font-size: 6vw;
	margin-top: 0;
	top: 50%;
	transform: translateY(-50%);
	bottom: initial;
}

.brands-list-item-content {
	position: static;
	width: 100vw !important;
	height: 100vh !important; /*auto*/
	border-left: none;
	border-top: solid 1px var(--black);
}



.brands-list-item--active {
	height: auto;
	min-height: calc(100vh - 100px - 200px);
}

.contact {
	display: block;
}

div.contact-logo img {
	position: static;
	top: initial;
	transform: none;
	max-width: 100%;
}

.contact > div {
	border-right: none !important;
	border-bottom: solid 1px var(#F8F8FF) !important;
}

.contact > div:last-of-type {
	border-bottom: none !important;
}

.twocolumns {
	display: block;
}

.jobs-item-content div {
	border-right: none;
}

.jobs-item-content div+div {
	border-left: none;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

a.jobs-item-content-link, a.jobs-item-content-link:hover {
	background: var(--black) !important;
	color: var(#F8F8FF) !important;
}

.jobs-item-title-arrow {
	display: none;
}

.generalclose {
	display: block;
	position: fixed;
	z-index: 50;
	min-height: 100vh;
	/* height: -webkit-fill-available; */
	width: 100vw;
	top: 0;
	left: 0;
	bottom: 0;
	background: rgba(0,0,0,.7);
	cursor: pointer;
	transition: all .4s cubic-bezier(0.22, 1, 0.36, 1);
	opacity: 0;
	pointer-events: none;
}

.generalclose--visible {
	opacity: 1;
	pointer-events: auto;
}

.nav-link--cta.nav-link--active:after {
	background: transparent;
}

.text-m p {
	max-width: calc(100% - 10px);
}

.bglogo {
	top: initial;
	transform: none;
	height: 100vh;
	line-height: 80vh;
}


@media (max-width: 640px) {
.verticalcenter {
	position: static;
	transform: none;
}


.conteneur1{
    overflow: hidden;
    max-width: 960px;
    margin: 50px auto;
    box-shadow: 0px 15px 10px -5px #777;
}
.d1{
    width: 3840px;
    height: 720px;
    background-color: #EDEDED;
    background-size: contain;
    animation: defilement1 30s linear infinite;
}
@keyframes defilement1{
    0%{transform: translate(0,0);}
    100%{transform: translate(-2880px,0);}
}
.conteneur2{
    max-width: 960px;
    overflow: hidden;
    margin: 50px auto;
    box-shadow: 0px 0px 10px #777;
}
.d2{
    width: 400%;
    height: 0;
    padding-top: 75%;
    background-color: #EDEDED;
    background-size: contain;
    animation: defilement2 30s linear infinite;
}

@keyframes defilement2{
    0%{transform: translate(0,0);}
    100%{transform: translate(-75%,0);}
}

.d1:hover, .d2:hover{
    animation-play-state: paused;
}