:root {
  --socialesBar: 90px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100vw;
}

body {
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
}

/* Utils */
.full-viewport {
  display: inline-flex;
  float: left;
  height: 100vh;
  width: 100vw;
}
.kanu-cta {
  transition: all 0.5s;
  cursor: pointer;
}
.kanu-cta:hover {
  text-decoration: none;
  transform: translateY(-5px);
}
.cta-one:hover {
  color: #ffffff;
  background: #003b4a;
}
.vertical {
  display: flex;
  flex-direction: column;
}
a {
  text-decoration: none;
}
.hide {
  display: none;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}
input,
textarea,
select,
button {
  box-sizing: border-box;
  margin: 0;
}
.mobile-hide {
  display: block;
}
.mobile-only {
  display: none;
}

/* ---------------------------------------------- */
/* Main Section */
.main-header {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
}
#header-slider {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
#header-slider .swiper-wrapper {
  display: flex;
  width: (3 * 100) vw; /* Amount of slides * 100 */
}
#header-slider .swiper-slide {
  background-size: cover;
}
#mainSlide-1 {
  background-image: url(../images/main-slider/Header-01.png);
}
#mainSlide-2 {
  background-image: url(../images/main-slider/Header-02.png);
}
#mainSlide-3 {
  background-image: url(../images/main-slider/Header-03.png);
}

/* Header box */
.logo-block {
  position: absolute;
  background: rgba(28, 28, 27, 0.6);
  padding-top: 8vh;
  padding-left: 10vw;
  height: 100vh;
  width: 34vw;
  left: 0;
  top: 0;
}
.logo-block > * {
  display: inline-flex;
  margin-bottom: 30px;
}
.logo {
  width: 14vw;
}
.linea {
  border-left: 2px #cdcece solid;
  height: 30vh;
}
.slogan {
  color: #cdcece;
  letter-spacing: 10pt;
  text-transform: uppercase;
  font-size: 1.2em;
  font-family: "Roboto", sans-serif;
}
.slogan span {
  margin-bottom: 20px;
  font-weight: 900;
}
.slogan span:nth-child(2) {
  font-weight: 400;
}
.logo-block a {
  color: #cdcece;
  border: 1px #cdcece solid;
  display: block;
  height: 45px;
  line-height: 45px;
  width: 22vw;
  text-align: center;
  font-family: "Source Code Pro", monospace;
  letter-spacing: 2pt;
}

/* Socials */
.sociales {
  display: flex;
  align-items: center;
  position: fixed;
  right: 0px;
  top: 0;
  width: var(--socialesBar);
  z-index: 50;
}
.sociales > * {
  text-align: center;
  margin-bottom: 20px;
}
.sociales a img {
  display: inline;
}
.facebook {
  padding: 15px;
}

/*cta-pedido- first*/
.cta-pedidos {
  background: rgb(28, 28, 27);
  display: flex;
  justify-content: center;
  width: var(--socialesBar);
  height: var(--socialesBar);
  align-items: center;
}
.cta-pedidos img {
  width: 35px;
  margin-bottom: 15px;
}
.cta-pedidos span {
  color: #ffffff;
  font-size: 15px;
}

/* Menu */
.menu-container {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 30px;
  right: 13vw;
}
.menu-container a {
  color: #ffffff;
  font-size: .6em;
  font-weight: 600;
  letter-spacing: 3px;
  margin-left: 3vw;
  transition: all 0.5s;
}
.menu-container a:hover {
  color: #ffffff;
  text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.95);
  text-decoration: none;
}

/* Section: About us */
.about-container {
  background: #1a1a1a;
  position: relative;
  z-index: -1;
  display: flex;
  flex-direction: column;
  float: left;
}
.titulo-about-us-container {
  width: 50vw;
}
.titulo-about-us {
  font-family: "Source Code Pro", monospace;
  position: absolute;
  left: 65vw;
  letter-spacing: 20px;
  font-style: italic;
  font-weight: 500;
  color: white;
  font-size: 33pt;
  text-align: left;
  margin-top: 45vh;
}
.subtitle {
  font-family: "Roboto", sans-serif;
  color: #cdcece;
  font-size: 1.3em;
  font-weight: 600;
  position: absolute;
  text-align: center;
  top: 20vh;
  width: 100vw;
  letter-spacing: 14pt;
}
.less {
  font-weight: 900;
}
.more {
  font-weight: 400;
}
.about-us-text {
  font-family: "Roboto", sans-serif;
  color: #cdcece;
  font-size: 16pt;
  font-weight: 200;
  line-height: 25pt;
  position: relative;
  width: 50vw;
  top: 47vh;
  margin-left: 10vw;
}

/* Section: Products */
#products {
  background: rgb(255, 254, 254);
  flex-direction: column;
  position: relative;
  height: 100vh;
}
#product-slider {
  width: 100vw;
}
#products a {
  align-self: center;
  font-weight: 500;
  text-align: justify;
  text-transform: uppercase;
  background-color: #000000;
}
#products a:hover ~ #botonCeviche {
  opacity: 1;
}
#products a:hover ~ #botonGeishas {
  opacity: 1;
}
#products a:hover ~ #botonMaki {
  opacity: 1;
}
#products a:hover ~ #botonRolls {
  opacity: 1;
}
#products a:hover ~ #botonSushi {
  opacity: 1;
}
#products a:hover ~ #botonTablas {
  opacity: 1;
}
#product-slider.swiper-container {
  flex-direction: column;
  position: relative;
}
#product-slider .swiper-wrapper {
  display: flex;
}
.product.swiper-slide {
  justify-content: center;
  display: flex;
  flex-direction: column;
  position: relative;
}
.product img {
  width: 50vw;
  transition: 0.5s;
}
.product img:hover {
  opacity: .6;
}
.product span {
  font-family: "Source Code Pro", monospace;
  color: #ffffff;
  font-size: 1.5em;
  font-weight: 600;
  text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 11pt;
  text-transform: uppercase;
  position: absolute;
  margin-left: 15vw;
  width: 35vw;
}
.product p {
  font-family: "Source Code Pro", monospace;
  color: #ffffff;
  font-size: 1em;
  font-weight: 600;
  width: 35vw;
  text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 8pt;
  position: absolute;
  margin-top: 13vh;
  margin-left: 15vw;
  opacity: 0;
  transition: .2s;
}
#kanu-font {
  font-family: "Source Code Pro", monospace;
  font-size: 12pt;
  font-weight: 100;
}
#kanu-font:hover {
  background-color: inherit;
}

/* Section: Franquicias */
.franquicias {
  background: #cdcece;
  position: relative;
  height: auto;
}
#franquicias {
  height: 101vh;
}
.franquicias-container {
  position: relative;
  margin: auto auto;
}
.franquicias h2 {
  font-family: "Source Code Pro", monospace;
  color: #535456;
  font-style: italic;
  font-size: 2.2em;
  font-weight: bold;
  letter-spacing: 18pt;
  position: static;
}
.franquicias p {
  font-family: "Roboto", sans-serif;
  color: #535456;
  font-size: 1em;
  font-weight: 400;
  line-height: 22pt;
  width: 510px;
  margin: 3vh 0 2vh 0;
  position: static;
}
.franquicias a {
  color: black;
  font-size: 10pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5pt;
  position: static;
  transition: all 0.5s;
}
.franquicias a:hover {
  padding-left: 5px;
  text-decoration: none;
  color: inherit;
}

/* Section: Eventos */
#eventos {
  background: url(../images/photos/Eventos.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 0;
}
.eventos-container {
  position: relative;
  margin: auto 0;
  margin-left: 10vw;
}
.eventos h2 {
  font-family: "Roboto", sans-serif;
  color: #cdcece;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 2.2em;
  letter-spacing: 15pt;
  position: static;
  top: 32vh;
  left: 10vw;
}
.eventos span {
  font-weight: bold;
}
.eventos p {
  font-family: "Roboto", sans-serif;
  color: #fefefe;
  font-size: 1em;
  width: 510px;
  line-height: 22pt;
  position: static;
  margin: 3vh 0 2vh 0;
}
.eventos a {
  color: #fefefe;
  font-size: 10pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5pt;
  position: static;
  transition: all 0.5s;
}
.eventos a:hover {
  color: #fefefe;
  padding-left: 5px;
  text-decoration: none;
}

/*Section: Contact */
.hide-robot{
  display:none;
}
.contact {
  background: #003b4a;
  color: #cdcece;
  position: relative;
  z-index: 0;
  height: 100vh;
}
.contact-title {
  font-size: 1.5em;
  font-weight: 400;
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 50vw;
  top: 8vh;
  left: 23vw;
}
.contact form {
  position: absolute;
  top: 18vh;
  margin-left: 23vw;
  width: 50vw;
}
#emailForm input,
#emailForm textarea,
#emailForm select,
#emailForm input::placeholder {
  color: #FFF;
}
#emailForm select option {
  color: #003b4a;
  background: transparent;
}
#emailForm input,
#emailForm select,
#emailForm textarea {
  background: transparent;
  border: white thin solid;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  margin-bottom: 10px;
  outline: 0;
  padding: 10px 20px;
}
#emailForm input::placeholder,
#emailForm select,
#emailForm textarea {
  font-family: "Roboto", sans-serif;
  letter-spacing: 4px;
}
#emailForm textarea {
  height: 20vh;
  resize: none;
}
#emailForm button {
  align-self: flex-end;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  letter-spacing: 4px;
  outline: 0;
  transition: all 0.5s;
  width: auto;
  margin-top: 1vh;
  justify-content: center;
}
#emailForm button:hover {
  transform: translateX(5px);
}

/* Section: Sucursales */
#sucursales-container {
  align-items:center ;
  position: relative;
  background: #1a1a1a;
  color: #7c7c7c;
  display: block;
  height: 100vh;
  z-index: 0;
}
#sucursales-container h2 {
  font-size: 40pt;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 10px;
  margin-top: 13vh;
}
#sucursales h3 {
  font-size: 1.3em;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 10pt;
  margin-bottom: 10px;
}
#sucursales article {
  margin: 5vh 0 9vh 33vw;
  width: 50vw;
}
#sucursales span {
  line-height: 25pt;
  letter-spacing: 1pt;
}
#sucursales img {
  height: 50%;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display:block;
}
.carousel{
  margin-top: 20px;
}
.carousel-inner{
  height: 320px;
}
.carousel-control-prev {
  margin-left: 13vw;
}
.carousel-control-next {
  margin-right: 15vw;
}

/* Footer */
footer {
  align-items: center;
  background: #003b4a;
  color: #cdcece;
  display: flex;
  float: left;
  flex-direction: column;
  height: 35vh;
  justify-content: center;
  position: relative;
  width: 100vw;
}
.footer-init {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  margin-top: 8vh;
  margin-bottom: 3vh;
  margin-left: 7vw;
}
.footer-init h3 {
  text-transform: uppercase;
  padding-right: 9vw;
  padding-bottom: 1vh;
  font-size: 14pt;
  font-weight: 500;
  letter-spacing: 3pt;
  color: #2c7081;
}
.footer-init h4 {
  font-size: 14pt;
  letter-spacing: 6pt;
}
.newsletter {
  display: inline-flex;
  align-items: flex-start;
}
.newsletter input {
  color: #FFF;
  background: transparent;
  border: white thin solid;
  font-family: "Roboto", sans-serif;
  outline: 0;
  padding: 10px;
  letter-spacing: 4px;
  width: 40vw;
  height: 3vh;
}
.newsletter button {
  align-self: flex-end;
  background: none;
  border: 0;
  color: #2c7081;
  cursor: pointer;
  display: flex;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 4px;
  outline: 0;
  transition: all 0.5s;
  width: auto;
  margin-bottom: 7px;
  margin-left: 1vw;
  transition: 0.5s;
}
.newsletter button:hover {
  transform: translateX(5px);
}
.newsletter img {
  position: relative;
  width: 1vw;
}
.footer-end {
  position: relative;
  justify-content: center;
  align-items: center;
  display: block;
}
.footer-end hr {
  width: 100vw;
  border: .5px solid;
  border-color: #025469;
  margin: 0;
}
footer h6 {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 2pt;
  text-align: center;
  margin: 0;
}

/*----------RESPONSIVE----------*/

@media (min-width: 1151px) {
  /*MENU*/
  .menu-container {
    right: 10vw;
  }
  .contact {
    background-size: 60%;
    z-index: 0;
    height: 100vh;
  }
  /*CONTACT*/
  .contact-title {
    top: 17vh;
    left: 24vw;
  }
  .contact form {
    top: 27vh;
    margin-left: 24vw;
  }
  /*SUCURSALES*/
  #sucursales-container {
    height: 80vh;
  }
  footer {
    height: 27vh;
  }
}

@media (min-width: 1279px) {
  /*HEADER-BOX*/
  .logo-block a {
    width: 18vw;
    letter-spacing: 2pt;
  }
  /*ABOUT-US*/
  .subtitle {
    margin-left: 2vw;
  }
  /*CONTACT*/
  .contact-title {
    width: 40vw;
    top: 17vh;
    left: 29vw;
  }
  .contact form {
    top: 27vh;
    margin-left: 29vw;
    width: 40vw;
  }
  /*SUCURSALES*/
  #sucursales article {
    margin: 5vh 0 0 36vw;
  }
  /*FOOTER*/
  .footer-init {
    margin-left: 14vw;
  }
}

@media (min-width: 1439px) {
  /*CONTACT*/
  .contact {
    height: 90vh;
  }
  /*SUCURSALES*/
  #sucursales article {
    margin: 5vh 0 0 37.5vw;
  }
  /*FOOTER*/
  footer {
    height: 24vh;
  }
  .footer-init {
    margin-left: 18vw;
  }
}

@media (min-width: 1599px) {
  /* Menu */
  .menu-container {
    right: 9vw;
  }
  /*HEADER-BOX*/
  .logo-block a {
    width: 18vw;
    letter-spacing: 4pt;
  }
  .slogan {
    letter-spacing: 15pt;
  }
  /*SUCURSALES*/
  #sucursales article {
    margin: 5vh 0 0 39vw;
  }
}

@media (min-width: 1679px) {
  /*FOOTER*/
  footer {
    height: 22vh;
  }
}