@import "nav.css";
@import "shopping-cart.css";
@import "user.css";

html {scroll-behavior: smooth; }
* {margin: 0; padding: 0;}
@font-face {font-family: myFont; src: url(MAIAN.TTF);}
@font-face {
    font-family: 'myFont2';
    src: url('gkr.woff2') format('woff2'),
         url('gkr.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
:root {
    --bezier: all 2s cubic-bezier(0.16, 1, 0.3, 1) ;
    --bezier15:all 1.5s cubic-bezier(0.16,1,0.3,1);
}
body {
    background-color: rgb(248, 248, 248); 
    overflow-x:  hidden;  font-family: 'Josefin Slab', serif;}



.loader { background: #e3f4fd url(/assets/img/loadmeca.gif) no-repeat center center ; height: 100vh; width: 100vw; z-index: 9999; position: fixed; opacity: 1; transition: var(--bezier); display: flex; justify-content: center; align-items: center;}
.loader[position="loaded"] { opacity: 0; transform: scale(0);}
.loader h1 { color: white; font-size: 18px; }



/* IFRAMES */

.login {transition: all 350ms ease-out; margin-left: 1vw; transform: translateY(-100vh); transform-origin: top; position:fixed; width:100%; border:0; z-index:1002; padding:0; height:70vh; margin-top: calc( var(--top) + 2vh ); }
.login[user-visible="true"] {transform: translateY(0); }
.login[slide="true"] { transform: translateX(155px) translateY(-80vh); }
.login[user-visible="true"][slide="true"] { transform: translateY(0) translateX(155px); }

.c_there {position: fixed; height: 100dvh; border:0; margin:0;  transform: translateY(100vh); opacity: 0; z-index: 13; transition: all 450ms ease-out;}
.c_there[position="true"] { transform: translateY( 0 ); opacity: 1; }
.c_there[position="true"][slide="true"] {transform: translateY(0) translateX(100px); opacity: 1;}
@media (min-width: 35em) { .c_there{width: calc( 100vw - 300px - 2vw ); margin-left: calc( 2vw + 300px);  } }
@media (max-width: 35em) { .c_there {margin-left: 2vw; width: 96vw;} }

.c_article {position: fixed; z-index: 13; height: 100%; border:0; margin:0; margin-left: 1vw; transform: translateY(100vh); opacity: 0;  transition: all 450ms ease-out; }
@media (min-width: 35em) { .c_article{width: 300px;   } }
@media (max-width: 35em) { .c_article {margin-left: 0px; width: 100vw;} }
.c_article[position="true"] { transform: translateY(calc( 3em + 2vh )); opacity: 1;}
.c_article[position="true"][slide="true"] {transform: translateY(calc( 3em + 2vh )) translateX(100px); opacity: 1;}

.c_page {position: fixed; background-color: rgba(248, 248, 248,0.8); backdrop-filter: blur(8px); z-index: 10; height: 100%; width: 100%; border:0; margin:0; transform: translateY(100vh); opacity: 0;  transition: all 450ms ease-out;}
.c_page[position="true"] { transform: translateY(0); opacity: 1; }
.c_page[position="true"][slide="true"] {transform: translateY(0) translateX(100px); opacity: 1;}

.c_cont {position: fixed; transition: all 350ms ease-out 0ms; transform: translateX(-100vw); opacity: 0; width:100%; height:100%; z-index:12; background-color: rgba(248, 248, 248,0.8); backdrop-filter: blur(8px);}


.c_cont[position="true"] {transform: translateX(0); opacity: 1 ; }
.c_cont[position="true"][move="lift"] {transform: translateY(-100px); opacity: 1 ; }
.c_cont[position="true"][slide="true"] {transform: translateX(100px); opacity: 1 ; }
.c_cont[position="true"][slide="true"][move="lift"] {transform: translateY(-100px); opacity: 1 ; }

/* SIDE MENU */
.sideMenu {position: fixed; z-index: 2000; transform: translateX(calc(-155px)); transition: var(--bezier15); }
.sideMenu[open="true"] {transform: translateX(0);}

.sideMenuBack {width: 150px; height: 100dvh; background-color:white; }

.sideMenuArrow {position: fixed; top: 0; transition: all 350ms ease-out; margin-left: 150px;  transform: translateY(calc( 3em + 10px ));}

.topArrow {position: absolute; width: 5px; height: 100dvh; transform: translateY( calc( -100dvh + 5px) ); background-color: white; }
.middleArrow {position: relative; clip-path: polygon(0 0, 100% 0, 100% 30%, 0 50%, 100% 70%, 100% 100%, 0 100%);  width: 5px; background-color: white; height: 20px;  transform: translateY(5px);}
.bottomArrow {position: relative; width: 5px; height: 100dvh; transform: translateY(calc( - 5px )); background-color: white; }

.infoxtra {position: fixed; top: 0; z-index: 2000; margin-top: 3em; width: 95%; text-align: right; margin-right: 5px;}
.infoxtra h1 {margin-top: 10px; margin-bottom: 10px;}
.infoxtra a { text-decoration: none; }

.btn_all {display: inline-block; position: relative; cursor: pointer;}
.btn_all::after {content: ''; position: absolute; width: 100%; transform: scaleX(0) translateY( 0px ); height: 1px; bottom: 0; left: 0; background-color: gray; transform-origin: bottom right; transition: transform 0.25s ease-out;}
.btn_all:hover::after {transform: scaleX(1) translateY( 0px ); transform-origin: bottom left;}


/* DRAPS  */

.draps {transition: all 350ms ease-out 0ms; position: fixed; width: 100%; height: 100%; transform: translateY(100vh); transform-origin: bottom; z-index: 12; opacity: 0; background-color: rgba(248, 248, 248,0.8); backdrop-filter: blur(8px); }
.draps[draps-visible="true"] {transition: all 350ms ease-out 0ms; transform: translateY(0vh); opacity: 1;  }
.draps[draps-visible="delayed"] { transition: all 350ms ease-out 350ms; transform: translateY(100vh); opacity: 1;}

.sideDraps { position: fixed; display: flex; width: 100%; height: 100%; transform: translateX(-100vw);  z-index: 20; opacity: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); transition: all 350ms ease-out;}
.sideDraps[draps-visible="true"] {transform: translateX(0); opacity: 1;}

.iframeContentBehindDraps { position: fixed; width: 100%; height: 100%; transform: translateX(-100vw);  z-index: 11; opacity: 0; background: rgba(0, 0, 0, 0.8);backdrop-filter: blur(8px); transition: all 350ms ease-out;}
.iframeContentBehindDraps[draps-visible="true"] {transform: translateX(0); opacity: 0;}

/* @supports (backdrop-filter: blur(8px)) {.draps {backdrop-filter: blur(8px); background: hsl(0 0% 100% / 0.98);}} */

.cinema_draps { position: fixed; width: 100%; height: 100%; transform: translateY(-100vh); transform-origin: bottom; z-index: 1001;opacity: 0; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); transition: all 250ms ease-out;}
.cinema_draps[draps-visible="true"] { transform: translateY(0vh); opacity: 1;}
.cinema_draps.cart { transform: translateY(0vh); opacity: 1;}
.cinema_draps.log { transform: translateY(0vh); opacity: 1;}
.cinema_draps.navig { transform: translateY(0vh); opacity: 1;}





.mega_container {transition: all 450ms ease;  }
.decoContainer { position: fixed; top: 0; transition: all 350ms ease;}

.we_are_arrows {z-index: 5; position: fixed; display: flex; flex-direction: column;  width: 100%; height: 100%; justify-content: center; align-items: center; transition: all 0.6s ease-out;}
.we_are_arrows img { margin-top: auto; transition: all 0.6s ease-out; }
.arrow[visible="false"] {opacity: 0;} 




.intro_img { position: relative; width: 100%; max-height: 100vh; }
.intro_img img {width: 100%; height: 100vh; object-fit: cover; }

.intro_txt { position: absolute; top: 0; width: 100%; height: 100vh; text-align: center; }
.intro_txt h1 { font-size: 18px; color: white; margin-top: 50vh; filter: drop-shadow(0 0 0.75rem black); }


/* THIS IS POP UPS */
.first-page {z-index: 5; position: absolute; width: 100%; height: 100vh; font-family: 'Poppins', sans-serif; transition: all 350ms ease-out;}
.first-page h1 { font-size: 2em; font-weight: 100; font-style: italic; position: absolute; transition: var(--bezier15); }
.first-page p { font-size: 1em; font-weight: 200; position: absolute; transition: var(--bezier15); }
.first-page a { position: absolute; transition: var(--bezier15);}
.first-page .img {position: absolute; z-index: -1; display: flex; overflow: hidden;  transition: var(--bezier15); background-color: rgba(240, 234, 248,1);}
.first-page .div_img {position:absolute; width: 100%; height: 100%; background-color: rgba(240, 234, 248,1);}
.first-page .photo {position:absolute; right: 0; bottom: 0; transition: var(--bezier15);}

.fp-control {z-index: 10; position: absolute;  transition: var(--bezier15);}
.thumbs_container { position: absolute; top: 0; text-align: center; justify-content: center; display: flex;}
.manual-btn { width: 2px; height: 2px; border: 5px solid rgba(255, 255, 255, 0); background-clip: content-box; background-color: rgba(89, 89, 89,0.6); display: block; cursor: pointer; transition: var(--bezier15);}
.manual-btn[status="active"]{width: 50px; height: 2px; border-bottom: 5px solid rgba(255, 255, 255, 0);}
.manual-btn:hover {height: 2px; border-bottom: 5px solid rgba(255, 255, 255, 0);}

:root {--fp-w: 30vw; --fp-x: 50vw;}
@media (min-width: 60em) and (max-width: 80em){ :root {--fp-w: 40vw; } }
@media (min-width: 35em) and (max-width: 60em){ :root {--fp-w: 50vw; } }
@media (max-width: 35em){ :root {--fp-w: 60vw; } }

.first-page.b1 p {opacity: 0 ;transform: translateY(60vh) translateX(32vw); width: 150px;}
.first-page.b1 h1 {opacity: 0;transform: translateY(30vh) translateX(20vw); width: var(--fp-w); line-height: 1em;}
.first-page.b1 a {opacity: 0; transform: translateY(20vh) translateX(20vw);}
.first-page.b1 .img {opacity: 0; width: var(--fp-w); height: 70vh; transform: translateY(20vh) translateX(10vw); border-radius: 5% 0% 0% 0%;}
.first-page.b1 .fp-control {opacity: 0; transform: translateY(85vh) translateX(30vw); }

.first-page.b1 p.appear  {opacity: 1; transform: translateY( 50vh ) translateX(32vw); transition-delay: 500ms;}
.first-page.b1 h1.appear  {opacity: 1;transform: translateY(30vh) translateX( 30vw ); }
.first-page.b1 a.appear  {opacity: 1; transform: translateY(20vh) translateX(35vw);}
.first-page.b1 .img.appear  {opacity: 1; transform: translateX( 40vw ) translateY(20vh);  transition-delay: 350ms;}
.first-page.b1 .fp-control.appear  {opacity: 1; transform:  translateX( 35vw) translateY(85vh); transition-delay: 0.7s;}

.position_1_1 {transform: translateX( calc( var(--fp-w) * 2 ) ); transition: var(--bezier);}
.position_2_1 {transform: translateX(0vw);  transition: var(--bezier);}
.position_3_1 {transform: translateX( calc(  var(--fp-w) * 2 * -1));  transition: var(--bezier);}




:root {--fp2-w: 36vw; --fp2-x: 50vw;}

.first-page.b2 h1 { opacity: 0; transform:  translateX( 35vw) translateY(25vh); width: var(--fp2-w);}
.first-page.b2 h1.appear {opacity: 1;  transform:  translateX( 50vw) translateY(25vh); transition-delay: 250ms;}
@media (max-width: 35em){ .first-page.b2 h1.appear {transform:  translateX( 20vw) translateY(25vh);  width: 70vw } }

.first-page.b2 a {opacity: 0; position: absolute; transform: translateY(15vh) translateX(35vw);}
.first-page.b2 a.appear {opacity: 1; transform: translateY(15vh) translateX(50vw);}
@media (max-width: 35em){ .first-page.b2 a.appear {transform:  translateX( 20vw) translateY(15vh);  } }

.first-page.b2 p { opacity: 0; transform: translateY(50vh);  padding: 15px; }
@media (max-width: 35em) { .first-page.b2 p {background-color: rgba(255, 255, 255, 0.8);} }
.first-page.b2 p.appear {opacity: 1; transition-delay: 550ms;}
@media (min-width: 80em)                       {                         .first-page.b2 p.appear { width: 15vw; transform:  translateX( 61vw) translateY(45vh); } }
@media (min-width: 60em) and (max-width: 80em) { :root {--fp2-w: 40vw; } .first-page.b2 p.appear { width: 20vw; transform:  translateX( 65vw) translateY(45vh);  } }
@media (min-width: 35em) and (max-width: 60em) { :root {--fp2-w: 50vw; } .first-page.b2 p.appear { width: 20vw; transform:  translateX( 75vw) translateY(45vh); } }
@media (max-width: 35em)                       { :root {--fp2-w: 60vw; } .first-page.b2 p.appear { width: 40vw; transform:  translateX( 15vw) translateY(45vh); } }
 


.first-page.b2 .img {opacity: 0; width: var(--fp2-w); height: 60vh; margin-top: 20vh; margin-left: 15vw; filter: saturate(30%) brightness(100%); border-radius: 0% 5% 0% 0%;}
@media (max-width: 35em){ .first-page.b2 .img { margin-left: 25vw;} }
.first-page.b2 .photo {width: var(--fp2-w); height: 60vh; object-fit: cover;}

.first-page.b2 .fp-control {opacity: 0;transform:  translateX( 60vw) translateY(35vh);}
.first-page.b2 .fp-control.appear {opacity: 1; transform: translateX(70vw) translateY(35vh);  transition-delay: 0.7s;}
@media (max-width: 35em){ .first-page.b2 .fp-control.appear { transform: translateX(15vw) translateY(35vh);} }

.first-page.b2 .img.appear {opacity: 1; transform: translateX( 15vw ); }


.position_1_2 {transform: translateX( calc( var(--fp-w) * 2 ) ); transition: all 450ms ease-out 0s;}
.position_2_2 {transform: translateX(0vw);  transition: all 450ms ease-out 250ms;}
.position_3_2 {transform: translateX( calc(  var(--fp-w) * 2 * -1));  transition: all 450ms ease-out 0s;}



:root {--fp3-w: 40vw; --fp3-x: 50vw;}
@media (min-width: 60em) and (max-width: 80em){ :root {--fp3-w: 40vw; } }
@media (min-width: 35em) and (max-width: 60em){ :root {--fp3-w: 50vw; } }
@media (max-width: 35em){ :root {--fp3-w: 60vw; } }

.first-page.b3 h1 { opacity: 0; transform: translateY(35vh) translateX(5vw); }
.first-page.b3 a { opacity: 0; transform: translateY(25vh) translateX(15vw); }
.first-page.b3 p { border-radius: 5% 0% 0% 0%; opacity: 0; transform: translateY(55vh) translateX(23vw); width: 15vw; padding: 15px; }
@media (max-width: 35em) { .first-page.b3 p {background-color: rgba(255, 255, 255, 0.8); width: 30vw;} }
.first-page.b3 .img {opacity: 0; width: var(--fp3-w); height: 60vh; transform: translateY(20vh) translateX(30vw); filter: saturate(30%) brightness(100%); border-radius: 5% 0% 0% 0%;}
.first-page.b3 .photo {width: var(--fp3-w); height: 60vh; object-fit: cover;}
.first-page.b3 .fp-control {opacity: 0; transform: translateY(30vh) translateX(65vw);}

.first-page.b3 h1.appear {opacity: 1; transform: translateY(35vh) translateX(15vw); }
.first-page.b3 a.appear { opacity: 1; transform: translateY(25vh) translateX(25vw); }
.first-page.b3 p.appear {opacity: 1; transform: translateY(45vh) translateX(23vw); transition-delay: 550ms;}
.first-page.b3 .img.appear {opacity: 1; transform: translateY(20vh) translateX(40vw); transition-delay: 250ms;}
.first-page.b3 .fp-control.appear {opacity: 1; transform: translateY(30vh) translateX(65vw);  transition-delay: 0.7s;}

.position_1_3 {transform: translateX( calc( var(--fp-w) * 2 ) ); transition: all 450ms ease-out 0s;}
.position_2_3 {transform: translateX(0vw);  transition: all 450ms ease-out 250ms;}
.position_3_3 {transform: translateX( calc(  var(--fp-w) * 2 * -1));  transition: all 450ms ease-out 0s;}






:root {--fp4-w: 36vw; --fp4-x: 50vw;}
.first-page.b4 h1 { opacity: 0; transform: translateY(25vh) translateX(10vw); width: var(--fp4-w);}
.first-page.b4 h1.appear {opacity: 1; transform: translateY(25vh) translateX( 20vw );  transition-delay: 250ms;}
@media (max-width: 35em){ .first-page.b4 h1.appear { transform: translateY(25vh) translateX(30vw); width: 70vw; } }

.first-page.b4 p { opacity: 0; transform: translateY(50vh) translateX(20vw); padding: 15px; }
@media (min-width: 80em) { .first-page.b4 p { width: 15vw; transform: translateY(50vh) translateX(61vw); }  }
@media (min-width: 60em) and (max-width: 80em){ :root {--fp4-w: 40vw; } .first-page.b4 p { width: 20vw; transform:translateY(50vh) translateX(65vw); } }
@media (min-width: 35em) and (max-width: 60em){ :root {--fp4-w: 50vw; } .first-page.b4 p { width: 20vw; transform:translateY(50vh) translateX(75vw); } }
@media (max-width: 35em){ :root {--fp4-w: 60vw; } .first-page.b4 p { width: 40vw; transform:translateY(50vh) translateX(15vw); } }
.first-page.b4 p.appear {opacity: 1; transform: translateX( 20vw ) translateY( 50vh ); transition-delay: 550ms;}
@media (max-width: 35em) { .first-page.b4 p {background-color: rgba(255, 255, 255, 0.8);} }

.first-page.b4 a { opacity: 0; transform: translateY(15vh) translateX(20vw); position: absolute;}
.first-page.b4 a.appear {opacity: 1; transform: translateY(15vh) translateX( 30vw );}

.first-page.b4 .img {opacity: 0; width: var(--fp4-w); height: 60vh; transform: translateY(20vh) translateX(15vw); filter: saturate(30%) brightness(100%); border-radius: 0% 5% 0% 0%;}
@media (max-width: 35em){ .first-page.b4 .img { transform: translateY(20vh) translateX(25vw);} }
.first-page.b4 .img.appear {opacity: 1; transform: translateY(20vh) translateX( 40vw ); }

.first-page.b4 .photo {width: var(--fp4-w); height: 60vh; object-fit: cover;}
.first-page.b4 .fp-control {opacity: 0; transform: translateY(70vh) translateX(40vw);}
@media (max-width: 35em){ .first-page.b4 .fp-control { transform:translateY(70vh) translateX(30vw); } }
.first-page.b4 .fp-control.appear {opacity: 1; transform: translateY(70vh) translateX( 25vw );  transition-delay: 0.7s;}

.position_1_4 {transform: translateX( calc( var(--fp-w) * 2 ) ); transition: all 450ms ease-out 0s;}
.position_2_4 {transform: translateX(0vw);  transition: all 450ms ease-out 250ms;}
.position_3_4 {transform: translateX( calc(  var(--fp-w) * 2 * -1));  transition: all 450ms ease-out 0s;}






.img, .form_container  { opacity: 1; transition: all 250ms ease-out;}
.whatever svg text {transition: all 1s ease-out;}

#text-path {transition: all 1s ease-out; font-family: myFont;}
#text-path[startOffset]{transition: all 5s ease-out;}
#text-path2 {transition: all 1s ease-out; font-family: myFont;}
#our-text {justify-content: center; object-position: center; transition: all 1s ease-out;}
#our-text2 {justify-content: center; object-position: center; transition: all 1s ease-out;}

.center_cheese, .whatever {position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; top: 0; }

.img_cheese {position: fixed; object-position: center; height: 100vh; transition: all 1.5s ease-out;}
.svg-whatever {height: 100vh; position: fixed; transition: all 1s ease-out; display: flex;  margin:0; object-fit: cover;  object-position: center;} 


.background {position: fixed;top: 0px; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.background[position="true"]{position: absolute; top:1000px;}
.top {transition: all 1s ease-out; position:absolute; margin: 0; width: 100vw; height: 100vh; max-width: 100%; max-height: 100%;}
.img_splash {transition: all 1s ease-out; margin:0; object-fit: cover; height: 100vh; width: 100vw; max-width: 100%; max-height: 100%;}


.l_layer {position: fixed; width: 100%; height: 100dvh; display: flex; align-items:center; justify-content: left; top: 0; transition: all 1s ease-out ;}
.r_layer {position: fixed; width: 100%; height: 100dvh; display: flex; align-items:center; justify-content: right; top: 0; transition: all 1s ease-out;}


.menumove {transition: all 2s cubic-bezier(0.16, 1, 0.3, 1) 0s;}
.menumove[position="true"] {transform: translateX(100px); transition: all 2s cubic-bezier(0.16, 1, 0.3, 1) 0s;}
.menumove[position="delayed"] {transition: all 2s cubic-bezier(0.16, 1, 0.3, 1) 250ms; }

.pagemove {transition: all 2s cubic-bezier(0.16, 1, 0.3, 1);}
.pagemove[position="true"]{transform: translateY(-100px); transition: all 2s cubic-bezier(0.16, 1, 0.3, 1);}
.pagemove[position="delayed"]{transition: all 2s cubic-bezier(0.16, 1, 0.3, 1) 250ms;}

.cartmove {transition: all 2s cubic-bezier(0.16, 1, 0.3, 1);}
.cartmove[position="true"]{transform: translateY(50px);}

.cartmove2{transform: translate(100vw, 0); transition: all 2s cubic-bezier(0.16, 1, 0.3, 1);}
.cartmove2[position="true"]{transform: translate(100vw, 50px);}

.popmove {transition: all 2s cubic-bezier(0.16, 1, 0.3, 1);}
.popmove[position="true"] {transform: translateY(50px);}

.popmove2 {transition: all 2s cubic-bezier(0.16, 1, 0.3, 1);}
.popmove2[position="true"] {transform: translateY(50px);}

.img_l1l {position: fixed;  object-position: left; height: 100vh; width: auto; transition: all 1s ease-out; filter: saturate(50%);}
.img_l2l {position: fixed;  object-position: left; height: 100vh; width: auto;transition: all 1.25s ease-out; filter: saturate(50%);}
.img_l3l {position: fixed;  object-position: left; height: 100vh; width: auto;transition: all 1.5s ease-out; filter: saturate(50%);}

.img_l1r {position: fixed;  object-position: right; height: 100vh; width: auto;transition: all 1s ease-out; filter: saturate(50%);}
.img_l2r {position: fixed;  object-position: right; height: 100vh; width: auto;transition: all 1.25s ease-out; filter: saturate(50%);}
.img_l3r {position: fixed;  object-position: right; height: 100vh; width: auto;transition: all 1.5s ease-out; filter: saturate(50%);}

@media (min-width: 60em) and (max-width: 80em){ .img_l3r, .img_l2r {opacity: 0;} }
@media (min-width: 35em) and (max-width: 60em){ .img_l3r, .img_l2r, .img_l1r, .img_l3l {opacity: 0;} }
@media (max-width: 35em){ .img_l3r, .img_l2r, .img_l1r, .img_l3l, .img_l2l {opacity: 0;} }

@supports (backdrop-filter: blur(8px)) {.top {backdrop-filter: blur(0px); }}



.splash { font-family: 'Crafty Girls', cursive; }
.txt {position: fixed; top: 20%; display: flex; width:100%; z-index: 666;}
.txt_splash_left { margin-right:0.5em; text-align: right; line-height: 0em; color: white; font-size: 6em; font-weight: 100 ; width: 50%;}
.txt_splash_right {transition: all 1s ease-out;  color: white; width: 40%;}

.qui { width: 100%; height: 100vh; z-index: 0;}
.qui2 { width: 100%; height: 100vh; z-index: 0;}
.qui3 { width: 100%; height: 100vh; z-index: 0;}
.quoi {width: 100%; height: 100vh; z-index: -5;}
.quoi_top {display: flex; transition: all 20s ease-out ; line-height: 0em; margin-top: 30%; rotate: 10deg;}
.quoi_middle {display: flex; transition: all 20s ease-out ;rotate: 10deg;}
.quoi_bottom {display: flex; transition: all 20s ease-out ;line-height: 0em;rotate: 10deg;}

.quoi .p1 {transition: all 5s ease-out ; font-size: 6em; margin: 0; font-family: 'Poppins', sans-serif; color: transparent; -webkit-text-stroke: 1px rgb(208,165,176);}
.quoi .p2 {transition: all 5s ease-out ; font-size: 6em; margin: 0; font-family: 'Poppins', sans-serif; color: rgb(208,165,176); -webkit-text-stroke: 1px rgb(208,165,176);}

.separator { position: fixed; top: 0; z-index: 999; width: 100vw; height: 120vh; }

.qui_container { width: 100vw; height: 100vh; z-index: 0; display: flex; align-items: center; align-content: center;}
.fade-in h1 {font-size: 1.5rem; font-weight: 400; position: absolute; transition: all 3s ease-out; backdrop-filter: blur(2px) saturate(0%);  padding-left: 25px;}
.fade-in p {font-size: 1rem; font-weight: 200; position: absolute;  width: 10vw;  transition: all 1s ease-out; backdrop-filter: blur(2px) saturate(0%);  padding-left: 15px;}
.fade-in a {font-size: 1rem; font-weight: 400; position: absolute;  transition: all 1s ease-out; margin-right: 5vw;}
.fade-in {opacity: 0; transition: all 2000ms ease-out; transform: translateY(200px);font-family: myFont; position: relative; width: 100%; display: flex; align-items: center; justify-content: center;}
.fade-in.appear {opacity: 1; transform: translateY(0px);}
.fade-in.appear h1 {transform: translateY(-300%); }
.fade-in.appear a {transform: translateY(300%);}

.fade-in .img {position: relative; z-index: -1; display: flex; overflow: hidden; width: 40vw; height: 60vh;margin-right: 20%; margin-top: 10%;  transition: all 2s ease-out;}

.div_who {position: absolute; width: 15vw; height: 40vh; transition: all 450ms ease-out; transform: translateX(-25%);}
.div_who img {width: 15vw; height: 40vh; object-fit:cover; border-radius: 0% 10% 0% 0%; filter: saturate(30%) brightness(100%); transition: all 2s ease-out; } 
.div_who:hover img {filter: saturate(50%) brightness(150%);}
.container {width: 100%; height: 100vh;  margin: 8em auto; text-align: center; font-family: myFont;}
.container h1 {font-size: 3em; margin-top: 1em;}
.container p {font-size: 1.6em; width: 50%; margin:  0 auto;}
.cutvideo {position: relative; clip-path: url(#OBmask); height: 100%; aspect-ratio: 1 / 1.25; object-fit: cover;}
.bo-container { position: relative; height: 50vh; width: 60vh; margin: 0 auto;}

.qui4 { width: 100vw; height: 100vh; z-index: 0; display: flex; align-items: center; align-content: center;}

.flow {position: absolute; height: 15%; }
.fraise1 {top: 5%; left: 18%; transform: rotate(50deg); filter: drop-shadow(6px 5px 3px rgba(0,0,0,0.3)); animation: fraise1 4s infinite alternate-reverse; transform-origin: top;}
.bfy {bottom: 3%; right: 18%; transform: rotate(30deg); filter: drop-shadow(6px 5px 3px rgba(0,0,0,0.3)); animation: btf 5s infinite alternate-reverse; }
.leaf {bottom: 10%; right: 13%; transform: rotate(-10deg); filter: drop-shadow(6px 5px 3px rgba(0,0,0,0.3)); animation: leaf 3s infinite alternate-reverse; }

.radis {top: 5%; left: 3%; transform: rotate(50deg); filter: drop-shadow(6px 5px 3px rgba(0,0,0,0.3)); animation: fraise1 4s infinite alternate-reverse; transform-origin: top;}
.bfy2 {bottom: 1%; right: 3%; transform: rotate(30deg); filter: drop-shadow(6px 5px 3px rgba(0,0,0,0.3)); animation: btf 5s infinite alternate-reverse; }
.leaf2 {bottom: 10%; right: 1%; transform: rotate(-10deg); filter: drop-shadow(6px 5px 3px rgba(0,0,0,0.3)); animation: leaf 3s infinite alternate-reverse; }

.cutvideo2 {position: relative; clip-path: url(#OBmask2); height: 100%; aspect-ratio: 1 / 1; object-fit: cover; transform: rotate(10deg);}
.logo4vaches { position:absolute; width:80%; left: 50%; transform: translate(-50%, -50%); top: 50%; filter: drop-shadow(6px 5px 3px rgba(0,0,0,0.3));}

.frs_container {width: 90%; display: flex; justify-content: space-around; align-items: center; margin: 0px 5vw;}
@media (max-width:60em) { .frs_container {flex-direction: column;} }

.frs {height: 80%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
@media (min-width:60em) { .frs { width:40%; } }
@media (max-width:60em) { .frs{ width: 90%; } }
.frs_top {width: 80%; height: 80%; position: relative;}
.frs_info {width: 80%; height: 20%; }
.frs_logo_container img {width: 100%; height: 100%; object-fit: cover;}

.new_products h1 { font-size: 1.5em; font-family: 'Poppins', sans-serif; font-weight: 200; }
.new_products p { font-size: 1em; font-family: 'Poppins', sans-serif; font-weight: 100;}
@media (min-width:80em) { .new_products {margin-left: 5vw;} }
@media (min-width: 60em) and (max-width: 80em){ .new_products {margin-left: 5vw;} }
@media (min-width: 35em) and (max-width: 60em){ .new_products {margin-left: 5vw;} }
@media (max-width: 35em) { .new_products {margin-left: 5vw;} }

@media (min-width:80em) { :root {--width:20vw;} }
@media (min-width: 60em) and (max-width: 80em){ :root {--width:28vw;} }
@media (min-width: 35em) and (max-width: 60em){ :root {--width:43vw;} }
@media (max-width: 35em) { :root {--width: 90vw;} }

.sp_pantalon_colum { display: flex; flex-wrap: wrap;}
@media (min-width:80em) { .sp_pantalon_colum {margin-left: 2vw;} }
@media (min-width: 60em) and (max-width: 80em){ .sp_pantalon_colum {margin-left: 2vw;} }
@media (min-width: 35em) and (max-width: 60em){ .sp_pantalon_colum {margin-left: 2vw;} }
@media (max-width: 35em) { .sp_pantalon_colum {margin-left: 5vw;} }


.card { position: relative; transition: var(--bezier); z-index: 1; opacity: 0; transform: translateY(50px);}
.card:hover { cursor: pointer; }
.card:hover .form { opacity: 1;}
.card:hover .p_photo {filter: saturate(100%);}
.card.appear {opacity: 1; transform: translateY(0px);}

.card2 {transition-delay: 300ms;}
.card3 {transition-delay: 600ms;}


@media (min-width:80em) { .card {margin-left: 3vw; margin-top: 5vw;} }
@media (min-width: 60em) and (max-width: 80em){ .card {margin-left: 3vw; margin-top: 5vw;} }
@media (min-width: 35em) and (max-width: 60em){ .card {margin-left: 3vw;  margin-top: 5vw;} }
@media (max-width: 35em) { .card {margin-left: 0vw; margin-top: 10vw;} }

@media (min-width: 80em) {
    .card1 {transition-delay: 0ms;} .card2 {transition-delay: 300ms;} .card3 {transition-delay: 600ms;} .card4 {transition-delay: 900ms;}
    .card5 {transition-delay: 0ms;} .card6 {transition-delay: 300ms;} .card7 {transition-delay: 600ms;} .card8 {transition-delay: 900ms;}
    .card9 {transition-delay: 0ms;} .card10 {transition-delay: 300ms;} .card11 {transition-delay: 600ms;} .card12 {transition-delay: 900ms;}
}

@media (min-width: 60em) and (max-width: 80em) {
    .card1 {transition-delay: 0ms;} .card2 {transition-delay: 300ms;} .card3 {transition-delay: 600ms;}
    .card4 {transition-delay: 0ms;} .card5 {transition-delay: 300ms;} .card6 {transition-delay: 600ms;}
    .card7 {transition-delay: 0ms;} .card8 {transition-delay: 300ms;} .card9 {transition-delay: 600ms;}
    .card10 {transition-delay: 0ms;} .card11 {transition-delay: 300ms;} .card12 {transition-delay: 600ms;}

}
@media (min-width: 35em) and (max-width: 60em){ 
    .card1 {transition-delay: 0ms;} .card2 {transition-delay: 300ms;}
    .card3 {transition-delay: 0ms;} .card4 {transition-delay: 300ms;}
    .card5 {transition-delay: 0ms;} .card6 {transition-delay: 300ms;}
    .card7 {transition-delay: 0ms;} .card8 {transition-delay: 300ms;}
    .card9 {transition-delay: 0ms;} .card10 {transition-delay: 300ms;}
    .card11 {transition-delay: 0ms;} .card12 {transition-delay: 300ms;}
}

.img_container { transition: all 250ms ease-out;}
.hidethis { width: 0.1px; height: 0.1px; visibility: hidden; position: absolute; line-height: 0; }
.p_img { display: flex; width: var(--width); height: var(--width); overflow-x: hidden; overflow-y: hidden; transition: all 250ms ease-out; z-index: 1; }
.p_photo { width: var(--width); height: var(--width); object-fit: cover; object-position: center; transition: all 800ms ease-out; filter: saturate(50%); }
.p_thumbs_container { position: absolute; top: 0; width: var(--width); text-align: center; justify-content: center; display: flex; z-index: 2; }
@media (min-width:80em) { .p_thumbs_container {margin-top: calc(var(--width) - 4vw );} }
@media (min-width: 60em) and (max-width: 80em){ .p_thumbs_container {margin-top: calc(var(--width) - 4vw );} }
@media (min-width: 35em) and (max-width: 60em){ .p_thumbs_container {margin-top: calc(var(--width) - 6vw );} }
@media (max-width: 35em) { .p_thumbs_container {margin-top: calc(var(--width) - 10vw );} }


.p_manual-btn { border: 2px solid white; padding: 5px; display: block; border-radius: 10px; cursor: pointer; opacity: 1; transition: all 250ms ease-out; }
.p_manual-btn:not(:last-child) {margin-right: 15px;}
.p_manual-btn:hover { background-color:rgba(236, 236, 236, 0.8); }
.img, .form_container  { opacity: 1; transition: all 250ms ease-out; }
.form_container {z-index: 4;}
.form { position: relative; display: flex; flex-direction: column; justify-content: space-around; width: var(--width); height: 55px; transition: all 250ms ease-out; background-color: rgba(243, 241, 248, 1); z-index: 4; }
.price_div {display: flex; opacity: 0; transform: translateY(40px); transition: var(--bezier15);} 
.price_div.appear {opacity: 1; transform: translateY(0);}
.price_div h1 {color: black; font-size: 1em; margin: 0; font-weight: 400; margin-left: 5px; }

#title { color: black; font-size: 1.2em; font-weight: 800; margin: 0; margin-left: 5px; }
.titleCard {opacity: 0; transform: translateY(60px); transition: var(--bezier); font-size: 16px;}
.titleCard.appear {opacity: 1; transform: translateY(0);}

.fast-order {position: absolute; width: var(--width); height: 55px;background-color: rgba(255,255,255,0.3);   transition: all 400ms ease-out; backdrop-filter: blur(8px); z-index: 3;}
.fast-order[div-status="open"] {transform: translateY(-55px);}

.three_dots_menu {position: relative; width: 30px; height: 5px; left: calc(var(--width) - 40px ); top: -45px; z-index: 5; transition: all 300ms ease-out; padding: 8px; transform: translate( -8px, -8px);}
.the_dots {width: 5px; height: 5px; border-radius: 50%; background-color: black; position: relative; margin-left: 10px;}
.the_dots::after {position: absolute; display: inline-block ; content:''; width: 5px; height: 5px; border-radius: 50%; background-color: black; translate: 8px 0;}
.the_dots::before {position: absolute; display: inline-block ; content:''; width: 5px; height: 5px; border-radius: 50%; background-color: black; translate: -8px 0;}

.three_dots_menu[button-status="open"] {transform: translate(-8px, -33px);}






@keyframes fraise1 {
    from {filter: drop-shadow(6px 5px 3px rgba(0,0,0,0.3)); transform: rotate(50deg); }
    to {filter: drop-shadow(3px 1px 1px rgba(0,0,0,0.3)); transform: rotate(60deg);}
}
@keyframes btf {
    from {filter: drop-shadow(6px 5px 3px rgba(0,0,0,0.3)); transform: rotate(30deg); }
    to {filter: drop-shadow(3px 1px 1px rgba(0,0,0,0.3)); transform: rotate(35deg);}
}
@keyframes leaf {
    from {filter: drop-shadow(6px 5px 3px rgba(0,0,0,0.3)); transform: rotate(-10deg);}
    to {filter: drop-shadow(3px 1px 1px rgba(0,0,0,0.3)); transform: rotate(0deg);}
}

.media {position: fixed; font-size: 2em;}

@media (max-width: 65em) {
    /* .first-page h1:nth-child(1) {margin-top: 10%; margin-left: 25%;}
    .first-page h1:nth-child(2) {margin-top: calc(10% + 28px); margin-left: 25%;}
    .first-page p {margin-top: 24%; margin-left: 23%;}
    .first-page .img {width: 30vw; height: 80vh; margin-top: 8%; margin-left: 45%}; */
}
@media (max-width: 45em) {
    /* .img_l2r, .img_l2l {opacity: 0;} */
   
}
@media (max-width: 35em) {
    .div_img1 {left: 80vw;}
    .div_img2 {left: 80vw;}
    .div_img3 {left: 80vw;}
    .div_img4 {left: 80vw;}
    .div_img5 {left: 80vw;} 
}





.product_photo_bg {width: 50vw; height: 100vh; position: absolute;}



.index_body { transition: all 450ms ease; }