@charset "UTF-8";
/* Colors */
/* Fonts */
/* --Custom classes-- */
.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  display: none;
}

.wh100 {
  width: 100%;
  height: 100%;
}

.noselect {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* Reset */
.r-m {
  margin: 0;
}

.r-p {
  padding: 0;
}

.r-mp {
  margin: 0;
  padding: 0;
}

/* Default Img As Background */
.d-img {
  background-repeat: no-repeat;
  background-size: cover;
  width: 10rem;
  height: 10rem;
}

/* Flex */
.flex {
  display: flex;
}

/* Grid */
.grid {
  display: grid;
}

/* Justify Content */
.jcc {
  justify-content: center;
}

.jcsa {
  justify-content: space-around;
}

.jcsb {
  justify-content: space-between;
}

/* Align Items */
.aic {
  align-items: center;
}

.aifs {
  align-items: flex-start;
}

.aife {
  align-items: flex-end;
}

/* Sticky class */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

::-webkit-scrollbar {
  width: 0.3rem;
}

::-webkit-scrollbar-button {
  background-color: #000000;
  height: 1rem;
}

::-webkit-scrollbar-thumb {
  background-color: #323232;
  border-radius: 1rem;
}

::-webkit-scrollbar-track-piece {
  background-color: #000000;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body {
  font: 100 1.2em "Segoe UI", sans-serif;
}
body header {
  z-index: 10;
  background-color: #000000;
  height: 8rem;
  position: relative;
}
body header .hamburger-link {
  position: absolute;
  top: 3.5rem;
  right: 5rem;
  display: none;
}
body header .hamburger-link .hamburger {
  width: 3rem;
  height: 0.5rem;
  border-radius: 5rem;
  background-color: white;
}
body header .hamburger-link .hamburger::before, body header .hamburger-link .hamburger::after {
  content: "";
  display: inline-block;
  width: 3rem;
  height: 0.5rem;
  border-radius: 5rem;
  position: absolute;
  top: -1rem;
  background-color: white;
}
body header .hamburger-link .hamburger::after {
  position: absolute;
  top: 1rem;
}
body header .filler-div-menu {
  width: 50rem;
}
body header .logo {
  cursor: pointer;
  background-image: url(/images/logo/Logo-Toki.png);
  width: 8rem;
  height: 8rem;
}
body header .logo-link {
  margin-left: 5rem;
}
body header nav {
  height: 100%;
  padding: 0 4rem;
}
body header nav ul {
  height: 100%;
  list-style: none;
}
body header nav ul a {
  text-decoration: none;
}
body header nav ul a li {
  cursor: pointer;
  font: 100 1.8em "Segoe UI", sans-serif;
  color: #646464;
  position: relative;
  margin: 0 2rem;
  transition: all 0.25s ease-in-out;
}
body header nav ul a li:hover {
  color: whitesmoke;
  transform: translate(0.1rem, -0.1rem);
  text-shadow: -0.1rem 0.1rem 0 #646464;
}
body header nav ul a:focus li {
  color: whitesmoke;
  transform: translate(0.1rem, -0.1rem);
  text-shadow: -0.1rem 0.1rem 0 #646464;
}
body main {
  background-color: whitesmoke;
  min-height: 100vh;
}
body main .hero {
  background-color: #000000;
  position: relative;
  overflow: hidden;
  height: 92vh;
}
body main .hero .scroll-img-link {
  position: absolute;
  bottom: 5vh;
}
body main .hero .scroll-img {
  width: 10rem;
  height: 25rem;
  background-image: url(/images/gifs/scroll-me.gif);
}
body main .hero .hero-backblur {
  position: absolute;
  background-image: url(/images/hero/hero-toki-interieur.png);
  background-position: 0 75%;
  background-attachment: fixed;
  height: 100%;
  width: 100vw;
  filter: blur(0.25rem);
}
body main .hero .hero-img {
  z-index: 1;
  background-image: url(/images/logo/Logo-Toki-Long.png);
  border-radius: 2vw;
  height: 13.65vw;
  width: 35.46vw;
  opacity: 0.9;
  /*
  background-image: url(/images/logo/Logo-Toki.png);
  border-radius: 50rem;
  height: 20rem;
  width: 20rem;
  */
  margin-bottom: 10rem;
  box-shadow: 0 0 100vw #000000;
  -webkit-animation: zoom-in 1s ease-in-out;
          animation: zoom-in 1s ease-in-out;
}
body main .hero .container {
  position: absolute;
  top: 3%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 2;
}
body main .hero .container h1 {
  color: whitesmoke;
  font-size: 4rem;
  text-shadow: 2px 2px 1rem #323232;
  -webkit-animation: zoom-out 1.25s ease-in-out, fade-in 1s ease-in-out;
          animation: zoom-out 1.25s ease-in-out, fade-in 1s ease-in-out;
}
body main section {
  z-index: 2;
  min-height: 100vh;
}
body main section:not(.hero) {
  padding-top: 8rem;
}
body main section#Food {
  padding-top: 20rem;
  background-color: #000000;
}
body main section#Food h1 {
  color: whitesmoke;
  font-size: 5rem;
  width: 100%;
  text-align: center;
}
body main section#Food .food-menu {
  flex-wrap: wrap;
  font-size: 1.6rem;
  list-style: none;
  margin: 5rem;
}
body main section#Food .food-menu .card {
  border-radius: 0.5rem;
  height: 25rem;
  width: 21rem;
  margin: 2rem;
  perspective: 100rem;
}
body main section#Food .food-menu .card .container {
  position: relative;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
body main section#Food .food-menu .card .container .face {
  background-color: whitesmoke;
  flex-direction: column;
  position: absolute;
  border-radius: 0.5rem;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
body main section#Food .food-menu .card .container .front .img {
  height: 100%;
  width: 100%;
}
body main section#Food .food-menu .card .container .back {
  overflow: hidden;
  transform: rotateY(180deg);
  text-shadow: 0 0 0.5rem whitesmoke;
}
body main section#Food .food-menu .card .container .back .cardbackimg {
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  filter: blur(0.5rem);
  scale: 1.1;
}
body main section#Food .food-menu .card .container .back .title {
  font-size: 1.8rem;
  color: #161616;
}
body main section#Food .food-menu .card .container .back .optionContainer {
  justify-items: center;
  padding-top: 1rem;
}
body main section#Food .food-menu .card .container .back .check:checked + label::before {
  content: "→";
  position: absolute;
  transform: translateX(-1.5rem);
}
body main section#Food .food-menu .card .container .back label {
  margin: 0.2rem 2rem;
}
body main section#Food .food-menu .card .container .back .options {
  list-style: none;
  margin: 1.5rem;
  font-weight: 500;
}
body main section#Food .food-menu .card .container .back .options ul {
  list-style: none;
  margin: 0 1.5rem;
}
body main section#Food .food-menu .card .container .back .price {
  color: #000000;
  font-weight: bold;
}
body main section#Food .food-menu .card:hover .container {
  transform: rotateY(180deg) scale(1.1);
}
body main section#Bobba {
  position: relative;
  background-color: #000000;
  color: whitesmoke;
  padding-top: 0;
  padding-bottom: 10rem;
}
body main section#Bobba .bobbalist {
  width: 60vw;
}
body main section#Bobba .bobbalist h1 {
  font-size: 3rem;
  text-decoration: underline;
  margin-top: 3rem;
}
body main section#Bobba .bobbalist .wrapper {
  background-color: #161616;
  color: whitesmoke;
  border-radius: 0 2.5rem 2.5rem 0;
  margin: 5rem 0;
}
body main section#Bobba .bobbalist .wrapper h2 {
  text-align: center;
}
body main section#Bobba .bobbalist .wrapper form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 2rem;
}
body main section#Bobba .bobbalist .wrapper form input[type=radio]:checked + label {
  color: whitesmoke;
  font-weight: bold;
  text-decoration: underline;
}
body main section#Bobba .bobbalist .wrapper form label {
  font: 100 1.2em "Segoe UI", sans-serif;
  font-size: 1.8rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 1rem;
}
body main section#Bobba .bobbaimg {
  width: 40vw;
}
body main section#Bobba .bobbaimg .wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 20%;
  padding: 5rem;
}
body main section#Bobba .bobbaimg .wrapper svg {
  width: 15rem;
  height: 30rem;
}
body main section#About {
  background-color: #000000;
  grid-template-areas: "pic1 who" "what pic2";
  padding-left: 8rem;
  padding-right: 8rem;
}
body main section#About h1 {
  color: whitesmoke;
  font-size: 3.6rem;
  width: 100%;
  text-align: center;
  margin-top: 4rem;
}
body main section#About p {
  color: whitesmoke;
  font-size: 2.4rem;
  text-align: center;
  padding: 1rem 10rem;
}
body main section#About img {
  height: 100%;
}
body main section#About .pic1 {
  grid-area: pic1;
  height: 40rem;
}
body main section#About .pic2 {
  grid-area: pic2;
  height: 50rem;
}
body main section#About .who {
  grid-area: who;
  margin-top: 4rem;
}
body main section#About .who p {
  margin: 0;
}
body main section#About .what {
  grid-area: what;
  margin: 4rem 0;
}
body main section#About .what p {
  margin: 0;
}
body main section#Contact {
  background-color: #000000;
  position: relative;
  overflow: hidden;
  min-height: 50vh;
}
body main section#Contact .contact-backblur {
  z-index: -1;
  position: absolute;
  background-image: url(../images/hero/hero.png);
  background-attachment: fixed;
  background-position: center;
  height: 50vh;
  width: 100vw;
  filter: blur(1rem);
}
body main section#Contact .contact {
  color: whitesmoke;
  padding: 0 1.8rem;
}
body main section#Contact .contact h1 {
  text-decoration: underline;
  font-size: 3.2rem;
}
body main section#Contact .contact p {
  font-size: 2rem;
}
body footer {
  background-color: #000000;
  color: whitesmoke;
  border-top: 1px solid white;
  padding-top: 3rem;
  min-height: 5rem;
  flex-direction: row;
  flex-wrap: wrap;
}
body footer .map-container .map {
  margin-top: 1rem;
  border-radius: 2rem;
  border: none;
  box-shadow: 0 0 1rem #646464;
  width: 30vw;
  height: 30vh;
}
body footer .socials {
  display: flex;
  flex-direction: column;
  width: 30vw;
  height: 10vh;
}
body footer .socials .socials-container {
  margin-top: 1rem;
}
body footer .socials .icon {
  fill: whitesmoke;
  width: 5vw;
  height: 5vw;
}
body footer .btw {
  padding-top: 5rem;
  width: 100vw;
  font-size: 1.4rem;
}
body footer .copy {
  font-size: 1.2rem;
  width: 100vw;
}

/* Special case */
.offline-wip {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
      -ms-user-select: none !important;
          user-select: none !important;
  display: none !important;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(5rem);
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(5rem);
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes zoom-in {
  0% {
    transform: scale(0.9, 0.9);
  }
}
@keyframes zoom-in {
  0% {
    transform: scale(0.9, 0.9);
  }
}
@-webkit-keyframes zoom-out {
  0% {
    transform: scale(1.1, 1.1);
  }
}
@keyframes zoom-out {
  0% {
    transform: scale(1.1, 1.1);
  }
}/*# sourceMappingURL=style.css.map */