@font-face {
  font-family: tex;
  src: url('../fonts/texgyreadventor-regular.otf')format("truetype");
}

@font-face {
  font-family: texbold;
  src: url('../fonts/texgyreadventor-bold.otf')format("truetype");
}

:root {
  --heading: calc(28px + 0.390625vw);
  --h1: calc(25px + 0.390625vw);
  --h2: calc(18px + 0.390625vw);
  --text: calc(14px + 0.390625vw);
  --textmini: calc(11px + 0.390625vw);
  --textminimini: calc(8px + 0.390625vw);
  --textminiminimini: calc(6px + 0.390625vw);
  --font: tex, Dosis, Calibri;
  --fontbold: texbold, Dosis, Calibri;


  --white: white;
  --black: black;
}

/* GENERAL FOR PC*/


html,
body {
  overflow-x: hidden;

  scroll-behavior: smooth !important;
  position: relative;
  font-size: var(--text);
  margin: 0;
  font-family: var(--font);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  /* gap: -1rem; */
  line-height: 23px;
}

li {
  text-decoration: none;
  margin: 0;
  padding: 0;
}

a {
  color: black;
  text-decoration: none;
}

/* LANDING PAGE */


.landing-page {
  /* display: flex;
  flex-direction: column; */
  position: relative;
  height: 100%;
  width: 100%;
  max-height: 100vh;
  box-sizing: border-box;
  scroll-snap-align: start;
  min-height: 100vh;
  margin: 0 0 6rem 0;
}

.menu {
  display: grid;
  justify-content: start;
  grid-template-columns: 0.5fr 1fr 1fr;
  margin: 2rem auto 2rem auto;
  width: 95%;

  /* box-sizing: border-box; */
}

.menu li {
  /* border-right: 0.1rem solid black; */
  list-style: none;
  cursor: pointer;
  color: black;
  /* font-weight: 500; */
  display: flex;
  /* height: auto; */
  flex-direction: column;
  justify-content: center;
}

.menu li a {
  color: black;
  height: fit-content;
}

.menu nav {
  z-index: 2;
  font-family: var(--fontbold);
  display: flex;
  width: min-content;
  justify-content: space-around;
  /* justify-self: end; */
  gap: 3rem;
  /* height: 133px; */
  /* position: relative; */
  /* font-size: 16px; */
  font-size: var(--textmini);
  /* width: fit-content; */

}

.lines {
  font-family: var(--font)
}

.landingbox {
  width: 95%;
  height: 100%;
  margin: auto;
  position: relative;
}

.boxik {
  display: grid;
  grid-template-columns: 0.8fr 1fr 2%;
  height: 70%;
}

.svgbox {
  height: 100%;
  width: 80%;
  display: flex;
  justify-content: end;
}

.svgboxflex {
  display: flex;
  justify-content: end;
}

.line {
  stroke-dasharray: 300;
  stroke: black;
  stroke-width: 5;
}

.svgbox img {
  object-fit: contain;
  right: -6rem;
  height: 100%;
  width: 100%;
  /* max-width: 34.5rem; */

  min-width: 20rem;
  /*width: auto;*/
  align-self: end;
}

.lefthalf {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-content: center; */
}

.lefthalf img {
  /* max-height: 25rem; */
  height: 100%;
  width: 100%;
  /* padding: 0.5% 0; */
  object-fit: contain;
}

.righthalf {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.cafediv {
  width: 100%;
  /* height: 68%; */
  /* height: auto; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* flex-direction: column; */
  justify-content: center;
}

.cafediv_1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cafediv img {
  margin: 0 13.3% 0 0;
  width: 77%;
  /* height: 100%; */
  /* flex: 0 0 auto; */
  /* max-width: 20rem; */

}

.landingimagebox {
  display: flex;
  justify-content: end;
  flex: 0 0 auto;
  /* height: 100% */
}


.redbox {
  fill: #CF1E1E;
  position: absolute;
  width: 65%;
  height: 65%;
  z-index: -2;
}



.landingimage {
  object-fit: contain;
  width: 75%;
  min-width: 10rem;
  /* height: min-content; */
  /* margin: 0rem auto; */
  /* flex: 0 0 auto; */
}

.imagebox {
  height: 65%;
  width: 90%;
  margin: auto auto;
  padding: 3% 0;
  box-sizing: border-box;

}

.fillerimg {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  height: min-content;
}

.fillerimg ul {
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.openingtimesbox {
  display: flex;
  /* font-family: var(--fontbold); */
  font-size: var(--h2);
  justify-content: space-between;
  margin: auto 21% auto 0;
  flex: 0 0 auto;
  box-sizing: border-box;
  /* font-size: 1rem; */
  padding-top: 2.2rem;
  /* padding-bottom: 1.1rem; */
}


/*------------ PROGRAM SECTION ------------*/


.programsection {
  width: 100%;
  /* height: 60vh; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 3rem 0;
  /* background-color: antiquewhite; */
  /* box-sizing:border-box; */

}

.svg {
  position: absolute;
  align-self: end;
  /* margin-bottom: 3rem; */
  flex: 0 1 auto;
  left: 0;
  right: 0;
  /* display: flex; */
  /* flex-direction: column; */
  justify-content: end;
  /* width: 85%; */
  /* height: 100%; */
  left: -17.7%;
  top: -0.5%;
  transform: translate(-50%, -50%);
}


.leftprogram {
  display: flex;
  flex-direction: column;
  margin: 30% 0 0 0;
  position: relative;
  /* justify-content: end; */
}

.first_two_weeks {
  position: relative;
}

.programbox {
  width: 80%;
  padding-top: 2rem;
  padding-left: 6rem;
  font-size: var(--text);
  /* font-family: var(--fontbold); */
  position: relative;
}

.program-detail {
  flex: 0 0 auto;
  display: flex;
  z-index: 5;
}

.week {
  margin: 0 0 1rem 0;
}

.detail-name {
  /* flex: 1 0 auto; */
  padding-left: 0.5rem;
  display: flex;
  justify-content: end;
}

.detail-space {
  flex: 15 1 auto;
  border-bottom: 0.1rem solid black;
  /* width: 30%; */
}

.detail-space svg {
  display: flex;
  align-content: center;
  height: 100%;
  flex-direction: column;

}

.detail-date {
  flex: 0 0 content;
  padding-left: 0.5rem;
  padding-right: 0.2rem;

}



.yellowbox {
  /* display: none; */
  fill: yellow;
  position: absolute;
  left: -50%;
  top: -30%;
  z-index: -3;
  height: 130%;
  width: 155%;
  max-height: 11rem;
}


.rightprogram {
  position: relative;
  margin: 0 8.7% 0 0;
  display: flex;
  justify-content: end;
}

.rightprogram img {
  object-fit: contain;
  width: 90%;

}

.footer {
  width: 100%;
  display: flex;
  justify-content: end;
  font-size: var(--textminimini);
}

.footer span {
  /* display: inline-block; */
  margin: 0 10% 3% 10%;
  width: auto;
}









/* MOBILE STYLES */

#mobile-landing {
  height: 100svh;
  /* height: calc(var(--vh, 1vh) * 100); */
  width: 100%;
  padding: 5% 5% 0 5%;
  margin: 0;
  box-sizing: border-box;
  font-family: var(--fontbold);
  min-height: 100svh;
}

.mobilelandingbox {
  box-sizing: border-box;
  display: flex;

  flex-direction: column;
  height: 100%;
}

.upperbox {
  display: flex;
  justify-content: space-between;
}

.lefthalf-m {
  width: 50%;
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.instagramlink {
  width: auto;
  display: flex;
  /* margin: 5% 0 5% 0; */
}

.instagramicon {
  width: 20%;
}


.righthalf-m {
  width: auto;
  position: relative;
  /* padding: 5%; */

}

.contact-m {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
  padding: 0;
}



.logomobile {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logomobile img {
  width: 50%;
  height: 50%;
  object-fit: contain;
  margin: auto;
}





.lowerbox {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
}

.lowerbox .openingtimesbox {
  margin: 0;
  padding: 0;
  flex: 0 1 auto;
}

.lowerbox .openingtimesbox .days {
  padding-right: 1.5rem;
}

.lowerbox .contact-m {
  flex: 0 1 auto;
}



.mobilesvgbox {
  width: auto;
}

.mobilesvgbox img {
  min-width: 0;
  width: 55%;
  max-width: 15rem;

}





.programsection-m {
  font-family: var(--fontbold);
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  width: 100%;
  gap: 0.3rem;
  font-family: var(--fontbold);

}

.programsection-m .svg {
  position: static;
  align-self: end;
  /* margin-bottom: 3rem; */
  flex: 0 1 auto;
  left: 0;
  right: 0;
  display: flex;
  /* flex-direction: column; */
  justify-content: end;
  width: 95%;
  height: auto;
  /* left: -17.7%; */
  /* top: -0.5%; */
  transform: none;
  padding: 1% 0%;
  /* box-sizing: border-box; */
}

.programsection-m .svg svg {
  width: 70%;
}



.programsection-m .rightprogram img {
  object-fit: contain;
  width: 100%;

}

.month {
  right: 0;
  font-size: var(--h1);
  margin: 0 10% 5% 0;
  display: flex;
  justify-content: end;
}

.videomobile {
  height: 100vh;
  width: 100%;
}

.video_embed {
  width: 60%;
  height: 60%;
  opacity: 1;
  z-index: 2;
  visibility: visible;
  background-color: #fff;
  transform: translate(30%, 30%);
}




.cafemobile {
  position: absolute;
  width: 90%;
  right: 9%;
  top: 28%;
}


.redbox-m {
  fill: #CF1E1E;
  position: absolute;
  width: 92%;
  height: 40%;
  left: -20%;
  z-index: -2;
  max-height: 17rem;
}

.imagebox-m {
  margin-top: 1%;
  width: 100%;
  display: flex;
  justify-content: end;
  right: -5%;
  position: relative;
}

.landingimage-m {
  width: 100%;
  position: absolute;
  object-fit: contain;
  max-width: 30rem;
}



.rightprogram-m {
  margin: 0 auto;
  width: 95%;
  position: relative;
  justify-content: start;
}

.rightprogram-m .svg {
  left: 5%;
  top: -7%;
  transform: none;
  width: 75%;
}

.programsection-m .leftprogram {
  margin: 3% 0 0 0;
  padding-left: 2.5%;

}

.programsection-m .programbox {
  width: 100%;
  padding: 0;
  /* font-family: var(--font); */
  font-size: var(--textmini);
  min-height: 40vh;
}

.programsection-m .programbox .week {
  width: 90%;
}


/* .programsection-m .yellowbox {
  left: 30%;
  width: 185%;
  display: none;
} */






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

  .openingtimesbox {
    padding-top: 1.2rem;
  }
}

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

  .openingtimesbox {
    padding-top: 1.6rem;
  }
}

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

  .openingtimesbox {
    padding-top: 1.8rem;
  }
}

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


  .openingtimesbox {
    padding-top: 2.1rem;
  }

  .landing-page {
    min-height: auto;
  }

}

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


  .openingtimesbox {
    padding-top: 2.6rem;
  }

}



@media only screen and (max-width: 1100px) {
  ul {
    line-height: 16px;
    font-size: var(--textmini);
  }

  .openingtimesbox {
    padding-top: 1.9rem;
  }

}