* {
   box-sizing: border-box; 	
}
*, ::before, ::after {
  box-sizing: border-box;
}

:root {
  
  --primary-color: rgb(230, 132, 13);
  --fill-svg:rgb(230, 132, 13);
  --black_styled: rgb(15, 15, 15);

  --black: black;
  --white: white;
  --zero-Allposition: var(inset: 0);
  --marginZero: 0;
  --paddingZero: 0;
  --padding-space-desktop: 0 10rem;
  --padding-space-mobile: 0 0rem;
  --padding-center: 0.5rem
  --gap: 2rem;
  --width-small-visibility: 2rem;
  --font-size-header: 1.3rem;
  --dark-shaddow: 5px 5px black;
  --light-shaddow: 5px 5px white;

}

html {
       /* overflow-x: hidden; */
        margin: 0;
        padding: 0;
        scroll-behavior: smooth;
}
/* Animation */
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes slide_translate {
  from {transform: translate(-100%, 0%);}
  to {transform: translateX(0%)}
}
@keyframes reverse_slide_translate  {
  from {transform: translate(0%);}
  to {transform: translateX(-100%)}
}

@keyframes vertical_unfold_translate {
  from {height : 0%; }
  to { height: 100% ;}
}
@keyframes vertical_refract_height {
  from {height: 90vh}
  to {height: 30vh;}
}
@keyframes slide-up {
  from {transform: translateY(100%) ;}
  to {transform: translateY(0%);}
}
/* Animation */
@keyframes slider-right {
  from {transform: translate3d(0px, 0px, 0px);}
  to {transform: translate3d(50vw, 0px, 0px);}
}
@keyframes slider-left {
  from {transform: translate3d(0px, 0px, 0px);}
  to {transform: translate3d(-50vw, 0px, 0px);}
}

@keyframes slide-down {
  from {transform: translateY(-100%);}
  to {transform: translateY(0%)}
}

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

@keyframes scaleUp {
  from {scale: 1;}
  to {scale: 1.2;}
}
@keyframes scaleDown {
  from {scale: 1.2;}
  to {scale: 1;}
}

/* @keyframes rolling3d {
  from {transform:translateX(0px) ;}
  to {transform: translateX(-1900px);} */
/* } */
/* ################## */
body {
      margin: 0;
      padding: 0;	
      z-index: 9999;
      background-color: var(--black_styled);
      color: aliceblue;

}
/* Optimazation */
a,abbr,acronym,address,applet,b,big,blockquote,body,center,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,tt,u,ul,var {
  margin: 0;
  padding: 0;
  /* font: inherit; */
  vertical-align: baseline;
  
}
/* ########################## */
a {
  text-decoration: none;
  color: rgb(255, 255, 255);
}
ul {
  list-style: none;
}
.protest-revolution-regular {
    font-family: "Protest Revolution", sans-serif;
    font-weight: 800;
    font-style: normal;
  }
  
  .lexend-giga-bita {
    font-family: "Lexend Giga", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }
  .karla-bita {
    font-family: "Karla", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }
  
  .kanit-regular {
    font-family: "Kanit", serif;
    font-weight: 400;
    font-style: normal;
  }

.satisfy-regular {
    font-family: "Satisfy", cursive;
    font-weight: 400;
    font-style: normal;
  }
  
  .cinzel-regular {
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  .marcellus-regular {
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-style: normal;
  }
  .bebas-neue-regular {
    font-family: "Bebas Neue", serif;
    font-weight: 400;
    font-style: normal;
  }
  .great-vibes-regular {
    font-family: "Great Vibes", serif;
    font-weight: 600;
    font-style: normal;
  }

  .gruppo-regular {
    font-family: "Gruppo", serif;
    font-weight: 400;
    font-style: normal;
  }
  

.menu-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 0 10rem; */

  gap: 2rem;
  text-decoration: none;

}



.home-visual {

background: url(./Image/OliverPic/15.jpg);
text-align: center;
align-content: center;
font-size: 2rem;
font-family: "Great Vibes", serif;
letter-spacing: 1.5rem;
text-shadow: 3px 3px black;
padding: 15% 0%;
 border: solid var(--primary-color);
 width: 100vw;
 height: 90vh;
background-repeat: no-repeat;
background-position: center;
 background-size:cover;
 display: grid;

 
 padding: 0 35% 0 35%;
}

.menu-side {
  /* margin: 2rem; */
  padding: 0 4rem;
  display: flex;
  flex-direction: row;
  align-items: baseline;

}



 .lang::before {
  content: "🌐";

} 

.lang {
  display: grid;
  color: var(--primary-color);
  position: relative;

  

}
/* .indexLang {  font-size: 2rem;} */

.boxes {
  display: grid;
position: absolute;
height: auto;
  background-color: rgba(0, 0, 0, 0.514);
}
.boxLang {
  /* display: none; */
  /* visibility: hidden; */
  color: black;
  
  background-color: var(--primary-color);
  border-radius: 20%;
  border: none;
  text-align: center;
  font-size: var(--font-size-header);
}


.boxLang:hover {  
  color: var(--primary-color);
  background-color: black;
  transition:  0.3s ease;}
  
#log {background-color: var(--black_styled); fill: white; border-radius: 5%; height: fit-content;}



section {
  display: grid;
  align-items: center;
  justify-content: center;

}
.headers {
  animation: fadeIn 1s ease;
margin: 2rem;
font-size: 1.3rem;

gap: 2rem;
display:flex;
justify-content:center;
}

main {
  animation: fadeIn 1s ease;
  display: grid;
  align-items: center;
  justify-items: center;
}

.allSections {
  /* position: relative; */
  margin: var(--width-small-visibility);
  padding: var(--width-small-visibility);
  display: flex;
  gap: 2rem;
  flex-direction: row;
  scroll-behavior: smooth;
}


.img_story {
  background: url(./Image/OliverPic/OliverB&W.jpg);
  background-position: 50% 30%;
  object-fit: contain;
/* perspective: 50cm; */
border-radius: 3%;
box-shadow: 5px 5px 10px var(--white);
background-size:cover;
width: 35vw;
height: 75vh;
gap: 2rem;
overflow-y: hidden;
position: relative;
/* border: solid transparent; */
/* text-align:center; */
align-content: end;

}

.text-story {
  visibility: hidden;
  overflow: hidden;
text-shadow: 0px 1px black;
background-color: rgba(255, 255, 255, 0.815);
width: 100%;
height: 0%;
max-height: 100%;
text-align: center;
align-content: center;
/* line-height: 1.7rem; */
padding: 2% 10% 2% 10%;
color: var(--black_styled);
font-family: "Protest Revolution", serif;
transition: height  1s;
}

.text-story em {
  font-size: var(--font-size-header);
}


.seasonalMenu {
display: flex;
flex-direction: row;
border-radius: 2%;
padding: 5% 2% 5% 2%;
gap: 1rem;
background-color: var(--primary-color);
box-shadow: 5px 5px var(--white);

border: solid var(--white) 2px;

width: 40vw;
height: fit-content;

}

.catchy {
font-size: var(--font-size-header);
color: var(--black);
font-family: Satisfy;
/* gap: 2rem; */
/* word-spacing: var(--font-size-header); */
}
.catchy button {
  
  box-shadow: 2px 2px black;
    border: none;
border-radius: 10%;
letter-spacing: 5px;
/* background-color: rgb(230, 13, 118); */
/* padding: 1rem; */
/* padding: 2% 25% 2% 25%; */
margin-top: 1.3rem;
text-align: center;


}

#alacarte  {

  box-shadow: 5px 5px black;
  height: auto;
  max-width: 20vw;
  /* margin-top: 10%; */
  max-height: 80vh;
}

/* .catchy p {color: var(--primary-color);} */
#catchymsg1 {cursor: pointer; background: linear-gradient(#fff5de,#ffe9b4); font-family: "Bebas Neue", serif; font-size: 1.2rem; color: white; text-shadow: 2px 1px black; border: none;}
#catchymsg1:hover {scale: 1.05; box-shadow: var(--dark-shaddow);}

#catchymsg2:hover {scale: 1.05;box-shadow: var(--dark-shaddow);}
#catchymsg2{cursor: pointer; background: linear-gradient(#ffded8,#ffc7bd);font-family: "Bebas Neue", serif; font-size: 1.2rem; color: white; text-shadow: 2px 1px black; border: none;}

#catchymsg3:hover {scale: 1.05;  box-shadow: var(--dark-shaddow);}
#catchymsg3 {cursor: pointer; background: linear-gradient(#ffded8,#ffc7bd);  font-family: "Bebas Neue", serif; font-size: 1.2rem;color: black; text-shadow: 1px 1px rgb(0, 0, 0); border: none; line-height: 20px; border-radius: 5%; box-shadow: 2px 2px rgb(255, 255, 255) ; margin: 1rem;}


.findOutCenter {margin: 0;padding: 0; transform: translateY(-50%);}
.findOut {
  font-size: var(--width-small-visibility);
  font-family: Satisfy;
  border: solid rgb(240, 211, 160) 3px;
  background-color: rgb(0, 0, 0);
  box-shadow: 0px 0px 55px var(--primary-color);
  
  color: rgb(248, 255, 222);
  border-radius: 15%;
  margin-bottom: 1rem;
  /* padding: 0% 20% 0% 0%; */
  /* padding: 2rem; */
}
.findOut:hover {
  cursor: pointer;
  background-color:  black;
  color:rgb(230, 13, 118);
}

.findOutCenter {
  display: grid;
  justify-content: center;
}

.rollingNevent {
  /* margin-right: auto; */
  width: 100vw;
  overflow: hidden;

}

.img_box {
 
  display: none;
  /* overflow: hidden; */
  width: fit-content;
  position: relative;
 animation: animaLeft;
  animation-duration: 120s;
  animation-iteration-count:infinite;
  animation-play-state: running;
  animation-delay: 0s;
  animation-timing-function: linear;  
}

 @keyframes animaLeft {
  from {transform: translateX(0%)}
  to{transform: translateX(-100%);}

} 

/* @keyframes animateLeft {

  100% {left: 100vw; opacity: 1;}
} */
.img_thumbnail {
  /* position: relative; */
 width: 25vw;
  height: 50vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 7px;
  border-radius: 12px;
 

  /* transform: skew(335deg) */
}

  .fooDetails {
display: grid;
  justify-content: center;
  padding: 1rem;
  padding-top: 3rem;
  letter-spacing: 5px;
  line-height: 3rem;
 font-family: "Karla";
  font-size: var(--font-size-header);
  border-radius: 2%;
  overflow-x: hidden;
background-color: rgb(240, 211, 160);
  }
  
  .fooMap img{
    width: 300px;
    height: 500px;
    padding: 1rem;
  }

footer {
  display: inline-block;
  text-align: center;
  align-content:center;
  
  width: 100vw;
  height: 40vh;
  /* position:fixed;
  bottom: 0;
left: 0;
right: 0; */
  /* background-color: var(--black_styled); */
  height: fit-content;
} 


.fooPic {display: flex;margin: 1.5rem; flex-direction: row; gap: 3rem; }
.fooPic li {width: 200px;height: 200px;}

.fooLink {display: flex;justify-content: center;margin-bottom: 1rem; flex-direction: row; gap: 3rem; }
.fooLink img {width: 40px;height: 40px; cursor: pointer;}
  .fooLink img:hover { background-color: var(--primary-color)}






















/* #####################################*/
/* Mobile Only 
/* #####################################*/



@media (max-width: 768px) { 


.headers svg {
  position: absolute;
  width: 3rem;
  fill: var(--fill-svg);
  margin-left: 70%;

  
}

.headers svg:hover {
  cursor: pointer;
  opacity: 0.8;
}




.steady {
  /* no longer part of menu-side */
  position: absolute;
 margin: auto;
 padding: auto;
 right: 60%;
 top: 5%;

}

 
.lang {
  display: grid;
  color: var(--primary-color);
  position: relative;
 gap: 10px;
  font-size: 2rem;
}
.indexLang {
  display: none;
  font-size: 2rem;
}

.boxes {

 /* margin-top: 2rem; */
  display: grid;
  position: absolute;
  /* z-index: inherit; */

  background-color: rgba(0, 0, 0, 0.495);
  
}
.boxes button{
  
  color: var(--primary-color);
  background-color: rgb(0, 0, 0);
  border-radius: 20%;
  border: none;
  font-size: 1.5rem;
}

.boxes button:hover{
  color: rgb(230, 13, 118);
  background-color: var(--primary-color);
  transition:  0.8s ease;
 
}

 #buy {
  padding: 0 30% 0 0;
} 
.sections {
display: none;
}

/* ################################################## */

.nested_headers {
  /* margin: 0; */
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-top: 0;
  width: 100vw;
  padding: 2rem;
  background-color: black;
  opacity: 0.9;
  font-family: "Kanit", serif;
  font-weight: 600;
  position: fixed;
  color: var(--primary-color);
  height: fit-content;
  text-decoration: underline;

  
}


/* ############################### */
.nested_headers li {
 
  /* overflow: scroll; */
  padding: 2rem;
  font-size: xx-large;
  cursor: pointer;
  
}

.close_header {
  cursor: pointer;
  background-color: var(--primary-color);
  width: 15vw;
  margin-left: 80%;
  border: solid transparent;
 
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nested_link {

  gap: 1rem;
}
.nested_link img {
  margin: 1rem;
  width: 40px;
  height: 40px;
  background-color: var(--primary-color);
}

.nested_link img:hover {
  border-radius: 100%;
  background-color: aqua;
}
.menu-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0rem;
  gap: 2rem;
}
.menu-side {
  padding: 0 5% 0 0;
}

#log {
  display: none;
}
.home-visual {
  font-family: "Great Vibes", serif;
  letter-spacing: 1.5rem;
  text-shadow: 3px 3px black;
  padding:0%;
  margin: 0%;
   border: solid transparent;
 
   background-position: center;
   background-size:auto;
  
   
  }


.allSections {
  margin: var(--width-small-visibility);
  padding: var(--width-small-visibility);
  display: grid;
  align-items: center;
  justify-items: center;
  margin: 0;
  padding: 0;

  scroll-behavior: smooth;
}




.img_story {
  background: url(./Image/OliverPic/OliverB&W.jpg);
border-radius: 3%;
background-position: 100% 30%;
padding: 2%;
background-size: cover;
width: 100vw;

height: 40vh;
border: none;
align-content:center;
display: flex;
margin: 0.5rem;

}

.text-story {
  visibility: hidden;
  overflow: hidden;
background-color: rgba(255, 255, 255, 0.694);
text-shadow: 1px 0px black;

text-align: center;
align-content: center;
line-height: 1.3rem;
padding: 0 2% 0 2dvi;
color: var(--black_styled);
position: relative;
bottom: auto;
width: 100%;
max-height: 100%;
transition: height  0.6s;
}

.text-story em {
  font-size: 1.3rem;
}

.catchy button {
  width: fit-content;
  height: fit-content;
  /* font-size: 60%; */
  font-size: 1rem;
 
margin: 0;
  padding:3%;
  background-size: contain;
  width: fit-content;
  text-align: center;
  /* margin: 0.5rem; */
}
#catchymsg1 {margin: 3%; padding: 3%; background: linear-gradient(#fff5de,#ffe9b4); font-family: "Bebas Neue", serif; font-size: 1rem; color: white; text-shadow: 2px 1px black; border: none;}
#catchymsg1:hover {scale: 1.05; box-shadow: var(--dark-shaddow);}

#catchymsg2:hover {scale: 1.05;box-shadow: var(--dark-shaddow);}
#catchymsg2{margin: 3%; padding:3%; background: linear-gradient(#ffded8,#ffc7bd);font-family: "Bebas Neue", serif; font-size: 1rem; color: white; text-shadow: 2px 1px black; border: none;}

#catchymsg3:hover {scale: 1.05;  box-shadow: var(--dark-shaddow);}
#catchymsg3 {margin: 3%; padding: 3%; background: linear-gradient(#ffded8,#ffc7bd);  font-family: "Bebas Neue", serif; font-size: 1rem; color: white; text-shadow: 2px 1px black; border: none;}


.seasonalMenu {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  /* flex-direction: row; */
  border-radius: 2%;
 /* margin: 1rem; */
width: 90vw;
height: fit-content;
padding: 1rem;

  background-color: var(--primary-color);
  border: solid var(--white) 2px;
  

}
.seasonalMenu button {
  width: 40vw;
}

#alacarte  {
max-width: 60vw;
  width: 20vw;
  height: 20vh;
}

.moreInfo {
  display: grid;
  justify-content: center;
  margin: auto;
}
.findOutCenter {margin: 0;padding: 0; transform: translateY(0%);}

.findOut {
  font-size: var(--width-small-visibility);
  font-family: Satisfy;
  border: solid rgb(240, 211, 160) 3px;
  background-color: rgb(0, 0, 0);
  box-shadow: 0px 0px 55px var(--primary-color);
  
  color: rgb(248, 255, 222);

  margin: 1rem;
}

.rollingNevent {
  width: 100vw;
  overflow: hidden;

}



.img_box {
 
  
  /* overflow: hidden; */
  width: fit-content;
  position: relative;
 animation: animaLeft;
 background-position: center;
  animation-duration: 120s;
  animation-iteration-count:infinite;
  animation-play-state: running;
  animation-delay: 0s;
  animation-timing-function: linear;  
}

 @keyframes animaLeft {
  from {transform: translateX(0%)}
  to{transform: translateX(-100%);}

} 

/* @keyframes animateLeft {

  100% {left: 100vw; opacity: 1;}
} */
.img_thumbnail {
 width: 50vw;
  height: 20vh;
  background-size: auto;
  margin: 7px;
  border-radius: 12px;
  background-position: left;
}


#foocheckItOut {
  font-size: 100%;
  padding: 0% 20% 0% 20%;
  line-height: 20px;
}

footer {
  display: inline-block;
  text-align: center;
  align-content:center;
  width: 100vw;
  height: 40vh;
  background-color: var(--black_styled);
  height: fit-content;
} 


.fooPic {display: flex; flex-direction: row; gap: 1rem;}
.fooPic li {width: 100px;height: 100px;}
.fooDetails {overflow-y: hidden; }
.fooLink {display: flex;justify-content: center;margin: 1rem; flex-direction: row; gap: 3rem; overflow: hidden; }
}






/* #####################################*/

@media screen and (min-width: 768px), (max-width: 1024) {





body {

      z-index: 9999;

}




.svg_btn {
display: none;

}

.sections {
  /* width: 3rem; */
/* outline: none !important; */
display: block;
position: relative;
cursor: pointer;

}

.sections::before{
  
  content: "";
  background-color: black;

	position: absolute;
	bottom: 0;
	right: 50%;
	height: 2px;
	width: 0;
	transition: 0.5s ease ;
  
}
.sections:hover::before, .sections:focus::before {
  width: 50%;
  
 } 

.sections::after{
  content: "";
  background-color: black;

	position: absolute;
	bottom: 0;
	left: 50%;
	height: 2px;
	width: 0;
	transition: 0.5s ease ;
  
}
.sections:hover::after, .sections:focus::after {
  width: 50%;

}

.nested_headers {
  display: none;
  


}



}

/* #####################################*/

@media screen and (min-width: 1025px) {



body {

      /* animation: fadeIn 2s ease-in-out; */
      z-index: 9999;

}

.svg_btn {
        display: none;
}


.sections::before{
  
  content: "";
  background-color: white;
	position: absolute;
	bottom: 0;
	right: 50%;
	height: 2px;
	width: 0;
	transition: 0.5s ease ;
  
}
.sections:hover::before, .sections:focus::before {
  width: 50%;
  
 } 

.sections::after{
  content: "";
  background-color: white;
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 2px;
	width: 0;
	transition: 0.5s ease;
  
}
.sections:hover::after, .sections:focus::after {
  width: 50%;

}

.nested_headers {
  display: none;
}




}





/* ######################OTHER PAGES⚠️###################################################### */

/* Gallery.html */
/* ################## */
/* ######################
CARROUSEL */
.parentBubbles {
  display: grid;
  justify-content: center;
  align-content: center;
  align-items: center;
  /* justify-content: center; */
  gap: 3rem;
  padding: 2% 10% 2% 10%;
}

.composition {border-radius: 5%; border: solid rgb(240, 211, 160) 3px;background-color: rgb(255, 245, 235);  text-align: center;  display: grid; color: rgb(240, 211, 160);padding: 3% 5% 3% 5%;gap: 1rem;font-size:1.5rem; align-content: center;}
 
.pitchCompo{display: grid; text-align: center; flex-direction: column;  align-content: center;}

.particule {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;

}


.carrousel {
  align-items: center;
align-content: center;
display: flex;
justify-content: center;
background-color: #ffffff;
/* padding: 1rem; */
border: solid white 5px;
border-radius: 5%;
position: relative;

}


.carrousel img {
object-fit: cover;
  width: 50vw;
  height: 80vh;
  
}
.carrousel-track {
  display: none;

}



/* left-right button */
.slide-L, .slide-R {
  cursor: pointer;
  position:absolute;
  margin: 2rem;
/* padding: 0 20% 0 20%; */
  top: 50%;
 width: auto;
 padding: 16px;
 color: black;
 /* color: white; */
 transition: 0.2s ease;
 user-select: none;
 border: none;
}
.slide-L:hover, .slide-R:hover {
background-color: rgb(0, 0, 0);
color: aliceblue;
}


.slide-R{
  right: 0;
  /* border-radius: ; */
}

.dot {
  /* cursor: pointer; */
  height: 15px;
  width: 15px;
  margin: 0 2px;
  
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.dot-2 {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;}


.fade {
  animation-name: fadeIn;
  animation-duration: 500ms;
}

.carrousel-track-2 {
  display: none;
}



.prev {cursor: pointer; user-select: none; background-color: #bbbbbbdd;position: relative;height: fit-content;width: fit-content;font-size: 3rem;transform: translateX(100%);border-radius: 10%;}
.next {cursor: pointer; user-select: none; background-color: #bbbbbbdd;position: relative;height: fit-content;width: fit-content;font-size: 3rem;transform: translateX(-100%);border-radius: 10%;}

.prev2 {cursor: pointer; user-select: none; background-color: rgb(228, 228, 164);position: relative; height: fit-content;width: fit-content;font-size: 3rem;transform: translateX(0%);border-radius: 10%; padding: 1rem;}
.next2 {cursor: pointer; user-select: none; background-color: rgb(228, 228, 164);position: relative; height: fit-content;width: fit-content;font-size: 3rem;transform: translateX(0%);border-radius: 10%; padding: 1rem;}




@media screen and (max-width: 768px) {
  .parentBubbles {
    display: grid;
    gap: 2rem;
    padding: 0;
    margin: 1rem;
    padding: 0%;

  }
  .carrousel img {
    width: 70vw;
    height: 40vh;
    z-index: -1;
  }
.composition {border-radius: 0%;border: solid rgb(240, 211, 160) 3px;background-color: rgb(255, 245, 235);  text-align: center; align-content: center;  display: grid; color: rgb(240, 211, 160);padding: 3% 0% 3% 0%;gap: 1rem;font-size:1.2em;width: 100vw}

.pitchCompo{display: flex; text-align: center; flex-direction: column; padding: 2%;}

.prev2 {cursor: pointer; user-select: none; background-color: rgb(228, 228, 164);position: relative; height: fit-content;width: fit-content;font-size: 2rem;transform: translateX(0%);border-radius: 10%; padding: 1rem;margin-right: auto;}
.next2 {cursor: pointer; user-select: none; background-color: rgb(228, 228, 164);position: relative; height: fit-content;width: fit-content;font-size: 2rem;transform: translateX(0%);border-radius: 10%; padding: 1rem;margin-left: auto;}

}




/* ############################################
########################################### */

/* Services */
.subheader1 h1 {
  vertical-align: inherit;
  text-align: center;
  font-family: "Great Vibes", serif;
 color: white;
 text-shadow: 2px 2px black;
}

/* h1 {
  vertical-align:auto;
} */
.subheader1 {

  background-image: url(./Image/OliverPic/10.jpg);
  background-repeat: no-repeat;
  letter-spacing: 1rem;
  font-size: var(--font-size-header);

  padding: 10% 0;
  width:100vw;
  height: 30vh;
  background-size:cover;
 z-index: -1;

}



.svg-img-event {
  margin: auto;
  width: 100px;
  height: 100px;
  background-image: url('./Image/Favicon/Offer/calendar-days-solid.svg');
  fill: rgb(230, 13, 118);
  background-repeat: no-repeat;
 
 
}
.svg-img-dinner {
  margin: auto;
   width: 100px;
  height: 100px;
  background-image: url('./Image/Favicon/Offer/champagne-glasses-solid.svg');
  fill: var(--primary-color);
  background-repeat: no-repeat;
}
.svg-img-classes { 

  margin: auto;
  width: 100px;
  height: 100px;
  background-image: url('./Image/Favicon/Offer/kitchen-set-solid.svg');
  fill: gold;
  background-repeat: no-repeat;
}

.return {
  display: none;
  cursor: pointer;
  background: url(./Image/Favicon/Navigation/arrow-left-solid.svg);
  width: 50px;
  background-size: cover;
  border-radius: 15px;
  position: relative;
  top: 4rem;
  background-color: rgb(228, 228, 164);
  box-shadow: 0px 0px 35px gold;
  margin-right: auto;
  margin-left: 20%;
  height: 50px;
}
.serviceDesktop {
  display: flex;
  flex-direction: row;
  align-content: center;
  padding: 0 3% 0 3%;
}

@keyframes opacify {
  50% {opacity: 0.5;}
}


.super-type1:hover {cursor: pointer;}
.super-type1 {  margin: 1rem;}
.super-type2:hover {cursor: pointer;}
.super-type3:hover {cursor: pointer;}
.type2 {opacity: 0.6;}
.type3 {opacity: 0.6;}


.type1 h2 {color: rgb(230, 13, 118); text-align: center; text-shadow: 1px 1px rgb(0, 0, 0);font-size: 2.5rem; padding: 1rem;}
.type1 {
  font-size: 1.1rem;
  padding: 3% 10% 3% 10%;
  line-height: 25px;

  box-sizing: border-box;
  /* border: solid rgb(230, 13, 118) 5px; */
  border-radius: 2%;
  width: 100%;
  height: auto;
  display: grid;
  text-align: start;
  font-family: "Karla", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  /* justify-items: center; */
  background-color: rgb(235, 245, 235);
  color: black;
}

.filter-blur {
  filter: blur(4px)!important; 
}

.type2 { 

  margin: 2rem;
  font-size: 1.1rem;
width: 60%;
  padding: 3% 7% 3% 7%;
  
  line-height: 25px;
  box-sizing: border-box;
  /* border: solid var(--primary-color) 5px; */
  border-radius: 2%;
  width: fit-content;
  height: auto;
  display: grid;
  text-align: start;
  font-family: "Karla", serif;
  font-weight: 400;
  font-optical-sizing: auto;
  /* justify-items: center; */
  background-color: rgb(245, 245, 235);
  color: black;
}
.type2 h2{color: var(--primary-color); text-align: center; text-shadow: 0.7px 0.7px var(--primary-color);}
.type2 button {background-color: var(--primary-color);}

.type3 {
  margin: 2rem;
  padding: 3% 7% 3% 7%;

  font-size: 1.1rem;

 line-height: 25px;
  box-sizing: border-box;
  /* border: solid gold 5px; */
  border-radius: 2%;
  width: fit-content;
  height: auto;
  display: grid;
  text-align: start;
  font-family: "Karla", serif;
  font-weight: 500;
  font-optical-sizing: auto;
  /* justify-items: center; */
  background-color: rgb(248, 255, 222);
  color: black;
}
.type3 h2{color: gold; text-align: center; text-shadow: 0.7px 0.7px gold;}
.type3 button {background-color: gold;}

.CTA1 {
  text-align: center;
  margin: 2rem;
  background-color: rgb(235, 245, 235);
  color: #f9a292;
  text-shadow: 1px 1px #BBBB;
  border: none;
  box-shadow: none;
  font-family: "Karla", serif;
  border-radius: 5%;
  padding: 3% 7% 3% 7%;
  /* width: inherit; */
  height: auto;
  display: grid;
  text-align: center;
}
.CTA1 .catchy {background-color: rgb(230, 13, 118); color: black; border: solid transparent;}

.CTA2 {
  text-align: center;
  margin: 2rem;
  background-color:rgb(245, 245, 235);
  color: var(--primary-color);
  border: none;
  box-shadow: 0px 0px 25px rgb(245, 245, 235);
  font-family: "Lexend Giga", serif;
  font-weight: 300;
  font-optical-sizing: auto;
  border-radius: 5%;
  padding: 3% 7% 3% 7%;
  /* width: inherit; */
  height: auto;
  display: grid;
  text-align: center;
  text-shadow: 0.7px 0.7px var(--primary-color);
}
.CTA2 .catchy {background-color: var(--primary-color); color: black; border: solid transparent;}

.CTA3 {
  text-align: center;
  margin: 2rem;
  background-color:rgb(248, 255, 222);
  color: gold;
  border: none;
  box-shadow: 0px 0px 25px rgb(245, 255, 205);
  border-radius: 5%;
  padding: 3% 7% 3% 7%;
  font-family: "Lexend Giga", serif;
  font-weight: 300;
  font-optical-sizing: auto;
  /* width: infherit; */
  height: auto;
  display: grid;
  text-align: center;
  text-shadow: 0.7px 0.7px gold;

}
.CTA3 .catchy {background-color: gold; color: black; border: solid transparent;}

@media screen and (max-width: 768px) {
  /* ############################################
########################################### */

/* Services Mobile */


.serviceDesktop {display: grid; text-align: center;}
.subheader1 h1 {
  text-align: center;
  vertical-align: inherit;
 
  color: white;
  text-shadow: 2px 2px black;
}

/* h1 {
  vertical-align:auto;
} */
.subheader1 {

  background-image: url(./Image/OliverPic/10.jpg);
  background-repeat: no-repeat;
  padding: 15% 0;
  
  width:100vw;
  height: 20vh;
  background-size:cover;
 z-index: -1;
  /* object-fit: c; */
}

.svg-img-event {
  width: 100px;
  height: 100px;
  background-image: url('./Image/Favicon/Offer/calendar-days-solid.svg');
  fill: red;
  background-repeat: no-repeat;
 
}

.super-type1:hover {cursor: pointer; pointer-events: none;}
.super-type2:hover {cursor: pointer; pointer-events: none;}
.super-type3:hover {cursor: pointer; pointer-events: none;}

.type1 h2 {color: rgb(230, 13, 118); text-align: center;}
.super-type1 {margin: 2rem;}
.type1 {
  pointer-events: none;
  padding: 2rem;
 line-height: 25px;
  box-sizing: border-box;
  border-radius: 2%;
  width: 100vw;
  height: auto;
  text-align: start;
  /* justify-items: center; */
  background-color: white;
  color: black;

}
.type1 button{
  background-color: rgb(230, 13, 118);
}

.type2 { 

  pointer-events: none;
  padding: 2rem;
 line-height: 25px;
  box-sizing: border-box;
  border-radius: 2%;
  width: 100vw;
  /* #### HIDE */
  height: 30vh;
  overflow-y: hidden;
/* ///////////// */
  display: grid;
  text-align: start;
  background-color: white;
  color: black;
}
.type2 h2{text-align: center;}

.type3 {
  pointer-events: none;
  /* margin: 2rem; */
  padding: 2rem;
 line-height: 25px;
  box-sizing: border-box;
  border-radius: 2%;
  width: 100vw;
  /* #### HIDE */
  height: 30vh;
  overflow-y: hidden;
/* ////////////// */

  display: grid;
  text-align: start;
  /* justify-items: center; */
  background-color: white;
  color: black;
}
.type3 h2{color: gold; text-align: center; }

.CTA1 {
  text-align: center;

  margin: 2rem;
  background-color: white;
  color: rgb(230, 13, 118);
  width: 80vw;
  border-radius: 15%;
}
.CTA1 .catchy {background-color: rgb(230, 13, 118); color: black;}

/* .CTA1 h3 {color: rgb(117, 117, 212);} */
.CTA2 {
  text-align: center;

  margin: 2rem;
  background-color: white;
  color: black;
  width: 80vw;
  border: solid var(--primary-color);
  border-radius: 15%;
color: var(--primary-color);

}

.CTA2 .catchy {background-color: var(--primary-color); color: black;}
.CTA3 {
  text-align: center;

  margin: 2rem;
  background-color: white;
  color: black;
  width: 80vw;
  border: solid gold;
  border-radius: 15%;
  color: gold;
}
.CTA3 .catchy {background-color: gold; color: black;}

}
















/* #############################################
############################################## */

/* PrivCourse */

.subheader2 h1 {vertical-align: inherit; text-align: center; color: white;}
.subheader2 {
  background-image: url(./Image/OliverPic/10.jpg);
  font-family: "Great Vibes", serif;
  letter-spacing: 1rem;
font-size: var(--font-size-header);
  background-repeat: no-repeat;
  padding: 10% 0;
  width:100vw;
  height: 40vh;
  background-size: cover;
 z-index: -1;
  /* object-fit: c; */
}


.photoNpost {
  display: flex;
  gap: 2rem;
  width: 90vw;
  margin-top: 2rem;
  height: auto;

}
.photoCourse {
  display: grid;
  /* width: 40vw; */
  /* background-color: rgb(255, 255, 255); */
  width: fit-content;
  padding: 2% 2% 2% 2%;


}


.carrousel-course {
    position: relative;
    margin: auto;   
   /* border: var(--primary-color) solid;  */
   border-radius: 5%;
}

.carrousel-course img {
  width: 35vw;
  height: 65vh;
  border-radius: 5%;
  /* border: rgb(230, 13, 118) soli 4px; */
}

.carrousel-auto {
  display: none;

}

.allDots {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
}
.form-pay {
  padding: 1rem;
  background: url(./Image/OliverPic/comingUpSoon.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: white;
  border: solid white 5px;
  width: 40vw;
  height: auto;
  
}

/* .participant {
  display: flex;
} */
.proceed {
  display: flex;
  flex-wrap: wrap;
  margin: 1rem;
  gap: 2rem;
}
.proceed .cartBtn {
  font-size: var(--font-size-header);
  color: var(--black);
    border: none;
  border-radius: 5%;
  background-color: #d73a3a;
  color: white;
  padding: 2% 15% 2% 15%;
  margin: 0.5rem;
  cursor: pointer;
}

.proceed .paypal {
  padding: 5% 50% 5% 50%;
  width: 70vw;
  background: url(./Image/Favicon/Purchase/paypal-brands-solid.svg);
  background-repeat: no-repeat;
  background-position: center;
  border: solid transparent;
  border-radius: 3%;
  background-color:rgb(94, 105, 222);
}

.proceed .visa {
  background: url(./Image/Favicon/Purchase/credit-card-solid.svg);
  padding: 5% 50% 5% 50%;
  width: 70vw;
  background-repeat: no-repeat;
  background-position: center; 
  border: solid transparent;
  border-radius: 3%;
  background-color: var(--primary-color);
}


.revealPrice {
  font-size: var(--font-size-header);
  color: #d73a3a;
  letter-spacing: 5px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}


.info-supp {
  font-family: "Karla", serif;;
  margin-top: 3rem;
  width: 50vw;
  border: solid var(--primary-color) 2px;
  color: black;
  background-color: white;
  display: grid;
  text-align: start;
  padding: 3% 3% 3% 3%;
}
.info-supp h2 {
  text-decoration: underline;
}
hr {color: black;}
.info-supp  li {font-size: var(--font-size-header);
}
.info-supp  p {font-size: var(--font-size-header);
}

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

.subheader2 h1 {vertical-align: inherit; text-align: center; font-family: Cinzel; color: white;} 
.subheader2 {
  background-image: url(./Image/Chef&Restaurant/pexels-goumbik-952478.jpg);
  background-repeat: no-repeat;
  padding: 45% 0;
  width:80vw;
  height: 50vh;
  background-size: cover;
 z-index: -1;
}
  

.photoNpost {
  display: grid;
  width: 90vw;
  margin-top: 2rem;
  height: auto;
  /* background-color: rgb(255, 255, 255); */
}

.photoCourse {
  display: grid;
  /* width: 40vw; */
  /* background-color: rgb(255, 255, 255); */
  width: fit-content;
  padding: 2% 2% 2% 2%;


}


.carrousel-course {
  position: relative;
  margin: auto;   
 border: var(--primary-color) solid; 
 border-radius: 5%;
}

.carrousel-course img {
width: 80vw;
height: 65vh;
border-radius: 5%;
}

.carrousel-auto {
display: none;

}



.form-pay {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  background-color: white;
  width: 80vw;
  height: auto;
  color: black;
  margin-top: 2rem;
  padding: 3% 10% 3% 10%;
}

.participant {
  display: flex;
}
.proceed {
  display: flex;
  flex-wrap: wrap;
  /* padding: 10% % 0 5%; */
  margin: 1rem;
  gap: 1rem;
}
.proceed button {
  padding: 0 10% 0 10%;
  /* width: 10vw; */
  /* height: 5vh; */
}

.proceed .paypal {
  padding: 5% 50% 5% 50%;
  width: 70vw;
}

.proceed .visa {

  padding: 5% 50% 5% 50%;
  width: 70vw;
}

.info-supp {
  width: 80vw;
  border: solid var(--primary-color) 2px;
  color: black;
  background-color: white;
  display: grid;
  text-align: start;
  padding: 5% 10% 3% 5%;
}
.info-supp h2 {
  text-decoration: underline;
}
hr {color: black;}
/* .info-supp p {font-size: 1rem;
} */
}



/* #######################################
"########################################" */
/* Contact */
.subheader3 h1 {
  vertical-align: inherit;
  text-align: center;
  text-shadow: 2px 2px black;
  font-family: "Great Vibes", serif;

}
.subheader3 {
  background: url(./Image/OliverPic/28.jpg);
  letter-spacing: 1rem;
  font-size: var(--font-size-header);
  display: grid;
  width:100vw;
  height: 30vh;
  align-items: center;
  padding: 0 0;
  background-size: cover;

}

.fooDivide {
  display: flex;
  justify-content: center;
  margin: 1rem;
  gap: 1rem;
  border-radius: 3%;
  color: black;
  
  }
  .qrcode {display: flex;margin-left: auto; margin-right: auto;}
  .qrcode img{
    width: 200px;
    height: 200px;
    border-radius: 3%;
  }

  .photo_gallery  {
    padding: 1rem;
      gap: 20px;
      display: flex;
      flex-wrap: wrap;
      /* padding: 0 5% 0 5%; */
    
     }
     .box1 {object-fit: cover; width: 300px; height: 300px; box-shadow: 5px 5px white; border-radius: 2%;} 
    .box2 {object-fit: cover;width: 300px;height: 500px; box-shadow: 5px 5px white;border-radius: 2%;}
    .box6 {object-fit: cover;width: 300px;height: 300px; background-position: 50% 100%; border-radius: 2%; box-shadow: 0 0 25px white} 
      
    .reperes {
      display: grid;
      gap: 20px;
      margin: 0;
      justify-content: start;
    }
    
    .fooContact {
      display: grid;
        justify-content: center;
        padding: 1rem;
        padding-top: 3rem;
        letter-spacing: 5px;
        line-height: 3rem;
       font-family: "Karla";
        font-size: var(--font-size-header);
        border-radius: 2%;
     
      background-color: rgb(240, 211, 160);
        }

        .designForm{ display: grid; gap: 1rem; }
.designForm input { width: 20vw; border-bottom: solid blueviolet 4px; ; border-radius: 30px; padding: 0.5rem;}
.designForm textarea {border-bottom: solid blueviolet 4px; ; border-radius: 30px; padding: 0.5rem;}
.designForm button {font-size: 1rem; padding: 0.5rem;border: solid var(--color-V-03) 2px; border-radius: 30px; color: white; text-align: center; box-shadow: 0px 0px 10px var(--color-P-03); background-color: #000000; cursor: pointer;}

@media screen and (max-width: 768px) {
.subheader3 h1 {
  vertical-align: inherit;
  text-align: center;
  font-family: 'Great Vibes';
  padding: 1% 20%;
}
.subheader3 {
  background: url(./Image/OliverPic/28.jpg);
  width:100vw;
  height: 20vh;
  background-size: cover;

}

.fooDivide {
  display: flex;
  justify-content: center;
  margin: 1rem;
  gap: 1rem;
  width: 100vw;
  border-radius: 3%;
  color: black;
  
  }

  .fooContact {
    display: grid;
      justify-content: center;
      padding: 1rem;
      padding-top: 0rem;
      letter-spacing: normal;
      line-height: 2rem;
     font-family: "Karla";
      font-size: var(--font-size-header);
      border-radius: 2%;
      
    background-color: rgb(240, 211, 160);
      }
  .qrcode {display: flex;margin-left: auto; margin-right: auto;}
  .qrcode img{
    width:100px;
    height: 100px;
    border-radius: 3%;
  }

  .designForm{ display: grid; gap: 1rem; }
  .designForm input { width: 70vw; border-bottom: solid blueviolet 4px; ; border-radius: 30px; padding: 0.5rem;}
  .designForm textarea {border-bottom: solid blueviolet 4px; ; border-radius: 30px; padding: 0.5rem; height: 30vh;}
  .designForm button {font-size: 1rem; padding: 0.5rem;border: solid var(--color-V-03) 2px; border-radius: 30px; color: white; text-align: center; box-shadow: 0px 0px 10px var(--color-P-03); background-color: #000000; cursor: pointer;}
  

  .photo_gallery  {
    display: none;
      /* padding: 0 5% 0 5%; */
    
     }
     .box1 {object-fit: cover; width: 120px; height: 100px; box-shadow: 5px 5px white; border-radius: 2%;} 
    .box2 {object-fit: cover;width: 120px;height: 200px; box-shadow: 5px 5px white;border-radius: 2%;}
    .box6 {object-fit: cover;width: 120px;height: 100px; background-position: 50% 100%; border-radius: 2%; box-shadow: 0 0 25px white} 
      
    .reperes {
      display: grid;
      gap: 20px;
      margin: 0;
      justify-content: center;

}

}
/* ###################################
##################################### */
/* ContentTools for client Psycho */
/* Alignment styles for images, videos and iframes in editable regions */