/* Scss Document */
/* Brandcolors */
/* Basic & reset styles */
body {
  margin: 0;
  width: 100%;
  background: #707070;
  font-family: 'Roboto', sans-serif;
  position: relative; }

.img_fluid {
  width: 100%;
  height: auto; }

.active {
  color: #d15152 !important; }

#mCCForm {
  background: #112758;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center; }
  #mCCForm a {
    color: #d15152; }
  #mCCForm #mCCButton {
    background: #42f548;
    color: #112758;
    display: flex;
    justify-content: center;
    align-items: center; }

/* ============================================ */
/* mobile styles, normal document; flow; NO GRID
/* ============================================ */
/* Header styles */
header {
  background-color: #F5F4F4;
  width: 100vw;
  box-shadow: 0px 3px 6px black;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  position: fixed;
  top: 0;
  z-index: 3;
  height: 15vh; }
  header #home-btn {
    width: 80%;
    margin: 0 auto;
    padding: 3vh 0;
    height: 9vh;
    display: block;
    cursor: pointer; }
    header #home-btn img {
      width: 80%;
      max-width: 200px;
      display: block;
      margin: 0 auto; }
  header #arrow {
    content: url("../img/icons/header-arrow.svg");
    width: 10%;
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
    transform: translateY(-1px); }
  header .header_links_list {
    display: none; }
    header .header_links_list li a {
      color: #112758;
      text-decoration: none; }
  header .choose_lang {
    display: none; }

/* Mobile Landing styles */
#landing {
  width: 100%;
  height: -webkit-fill-available;
  background: url("../img/jpeg/mobile-landing.jpg");
  background-size: cover;
  background-position: center center;
  padding: 15vh 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  #landing a .btn {
    display: none; }
  #landing #landing_intro h1 {
    color: #d15152;
    text-align: center;
    font-size: 0.875em;
    font-weight: 700;
    padding: 0 10%; }
  #landing #landing_intro h2 {
    color: #112758;
    text-align: center;
    font-size: 1.875em;
    font-weight: 300;
    padding: 0 10%; }
  #landing #landing_select_mobile {
    width: 100%;
    height: 15vh;
    padding: 0 0 7vh 0;
    background: #112758;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0; }
    #landing #landing_select_mobile button {
      background: #d15152;
      border-radius: 5px;
      box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.16);
      width: 80vw;
      padding: 5% 3%;
      border: none;
      color: #fff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 1em; }
      @media screen and (max-width: 374px) {
        #landing #landing_select_mobile button {
          font-size: 0.75em; } }
  #landing #landing_select_desktop {
    display: none; }

#select_options {
  display: none;
  width: 100%;
  min-height: 80vh;
  background: #112758;
  padding: 20vh 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  #select_options h3 {
    color: #fff;
    text-align: center;
    font-size: 0.875em;
    font-weight: 700; }
  #select_options form {
    padding-bottom: 50px; }
    #select_options form textarea,
    #select_options form input.text,
    #select_options form input[type="text"],
    #select_options form input[type="button"],
    #select_options form input[type="radio"],
    #select_options form input[type="submit"],
    #select_options form .input-checkbox {
      -webkit-appearance: none;
      border-radius: 0; }
    #select_options form .fat {
      border: 1px solid #fff; }
    #select_options form hr {
      border: 0.5px solid #fff; }
    #select_options form .form_item {
      width: 80%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      #select_options form .form_item h4 {
        color: #d15152;
        text-transform: uppercase;
        font-size: 1em;
        font-weight: 700;
        margin: 0.3em;
        margin-left: 0; }
      #select_options form .form_item label {
        color: #fff;
        text-transform: uppercase;
        font-size: 1em;
        font-weight: 700; }
      #select_options form .form_item input[type=radio] {
        width: 20px;
        height: 20px;
        border: 1px solid #d15152;
        background: #F5F4F4;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none; }
      #select_options form .form_item input[type=radio]:checked {
        background: #d15152;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none; }
    #select_options form input[type=submit] {
      display: block;
      content: url("../img/icons/general/search.svg");
      width: 80vw;
      color: #fff;
      background: #d15152;
      border-radius: 5px;
      border: none;
      box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.16);
      margin: 25px auto 50px;
      padding: 5% 3%;
      font-size: 1em; }
    #select_options form input[type=submit]::before {
      content: url("../img/icons/general/search.svg"); }
    #select_options form input[type=submit] {
      outline: none; }

#landing_city_thumbs {
  display: none; }

/* Mobile main resto info styles */
.resto_adress {
  color: #707070;
  font-size: 0.8em; }
  .resto_adress p {
    padding: 1% 0;
    margin: 0; }

.resto_category {
  color: #d15152;
  font-size: 0.8em; }
  .resto_category p {
    padding: 1% 0;
    margin: 0; }

/* Mobile landing contact footer styles */
#page-contact {
  z-index: 1;
  height: -webkit-fit-content;
  display: flex;
  flex-direction: column;
  background-color: #d15152; }
  #page-contact ul {
    text-align: left;
    color: #fff;
    list-style: none;
    font-size: 0.8em;
    line-height: 18px;
    font-weight: 700;
    padding: 10px 5vh; }
    #page-contact ul li a {
      color: #fff;
      text-decoration: none; }
  #page-contact a.btn {
    margin: 5% 5% 0 5%;
    align-self: center;
    background-color: #112758;
    display: flex;
    font-size: 0.8em;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    text-decoration: none;
    width: 80%; }
    #page-contact a.btn svg {
      fill: #d15152; }

/*CLASS FOR COPYRIGHT*/
#copyright {
  z-index: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff; }
  #copyright ul {
    text-align: left;
    list-style: none;
    font-size: 0.9em;
    font-weight: 300;
    padding: 25px 5vh 50px; }
  #copyright p {
    display: none; }

/* ROYALSLIDER */
.royalSlider {
  max-width: 100%;
  height: auto; }
  .royalSlider .rsBullets {
    width: 100%;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    padding: 10px 0; }
    .royalSlider .rsBullets .rsBullet {
      background: rgba(255, 255, 255, 0.7);
      width: 10px;
      height: 10px;
      border-radius: 10px;
      margin: 3px; }
    .royalSlider .rsBullets .rsNavSelected {
      background: #d15152; }

#city_slider {
  max-width: 100%; }

/* prev button */
.prev {
  position: absolute;
  left: 2%;
  top: 45%;
  z-index: 4; }

/* Mobile footer nav styles */
#mobile-footer-navbar {
  height: 7vh;
  width: 100%;
  background: #DEDEDE;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 10%; }

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 0%;
  width: 100%;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  background-color: #112758;
  /* Black fallback color */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center; }
  .overlay ul {
    padding: 0;
    list-style: none;
    padding: 30% 0 15% 0; }
  .overlay .choose_lang {
    color: #fff; }
    .overlay .choose_lang p {
      font-size: 1.0em;
      border-bottom: 0.5px solid #fff;
      padding-bottom: 5px; }
    .overlay .choose_lang #choose_lang_mobile {
      display: flex;
      justify-content: center;
      width: auto; }
      .overlay .choose_lang #choose_lang_mobile li {
        margin: 0 10%; }
      .overlay .choose_lang #choose_lang_mobile li a {
        font-size: 0.9em; }

/* The navigation links inside the overlay */
.overlay a {
  padding: 5%;
  text-decoration: none;
  font-size: 1.2em;
  color: #fff;
  display: block;
  /* Display block instead of inline */
  transition: 0.3s;
  /* Transition effects on hover (color) */ }

#page404 {
  height: 100vh;
  background-image: url("../img/jpeg/404-image.jpg");
  background-repeat: no-repeat;
  background-position: -150px 0px;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  #page404 h1 {
    color: #d15152;
    font-size: 30vw;
    margin: 0; }
  #page404 h2 {
    color: #112758;
    text-align: center;
    padding: 2%;
    width: fit-content;
    background-color: rgba(209, 81, 82, 0.8); }
    @media screen and (max-width: 374px) {
      #page404 h2 {
        font-size: 1.2em; } }
  #page404 a {
    color: #d15152;
    text-decoration: none;
    width: fit-content;
    padding: 10px;
    border-bottom: 2px solid #112758; }

#policy {
  padding: 5vh;
  padding-top: 15vh;
  background-color: #F5F4F4; }
  #policy div h5 {
    color: #112758;
    font-size: 1em; }

@supports (display: grid) {
  @media screen and (min-width: 700px) {
    /* Header styles */
    header {
      height: auto;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: 1fr;
      grid-gap: 10px;
      position: fixed; }
      header #home-btn {
        grid-area: 1/2/1/3;
        width: auto;
        margin: 0;
        padding: 3vh 0;
        height: auto;
        display: block;
        cursor: pointer; }
        header #home-btn img {
          width: 100%;
          max-width: 200px;
          display: block;
          margin: 0 auto; }
      header #arrow {
        content: url("../img/icons/header-arrow.svg");
        width: 30%;
        z-index: 2;
        grid-area: 2/2/2/3; }
      header .header_links_list {
        display: flex;
        justify-content: space-around;
        list-style: none;
        grid-area: 1/3/1/6;
        align-self: center; }
        header .header_links_list li a {
          margin: 3%; }
      header .choose_lang {
        display: flex;
        justify-content: center;
        align-items: center;
        grid-area: 1/6/1/7; }
        header .choose_lang ul {
          display: none;
          grid-template-columns: repeat(4, 1fr);
          width: 85%;
          padding: 5%;
          border: 2px solid #112758;
          justify-content: center;
          align-content: center;
          list-style: none;
          padding: 0;
          margin: 0; }
          header .choose_lang ul li {
            width: fit-content;
            height: fit-content;
            padding: 5%;
            justify-self: center; }
          header .choose_lang ul a {
            text-decoration: none;
            color: #112758; }
          header .choose_lang ul #close_lang_desktop {
            padding: 0;
            justify-self: center; }
        header .choose_lang button {
          background-color: transparent;
          color: #d15152;
          padding: 5%;
          border-radius: 90px;
          border: 2px solid #112758;
          outline: none;
          font-size: 1em;
          font-weight: bolder; }
        header .choose_lang #close_lang_desktop {
          cursor: pointer;
          color: #d15152;
          align-self: center;
          padding: 10%; }

    #mobile-footer-navbar {
      display: none; }

    #landing {
      background: url("../img/jpeg/desktop-landing.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      height: 100vh;
      padding: 0;
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: 2fr; }
      #landing #landing_intro {
        height: auto;
        padding-top: 25vh;
        background-color: rgba(255, 255, 255, 0.6);
        grid-area: 1/2/3/6; }
        #landing #landing_intro h1, #landing #landing_intro h2 {
          text-align: left; }
      #landing #landing_select_mobile {
        display: none !important; }
      #landing #landing_select_desktop {
        display: block;
        padding: 0 10%; }
        #landing #landing_select_desktop select {
          width: 100%;
          height: 5vh;
          border: 2px solid #112758; }
        #landing #landing_select_desktop .box {
          width: 100%;
          height: 46px;
          border: 2px solid #112758;
          background-color: #F5F4F4;
          border-radius: 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #112758; }
        #landing #landing_select_desktop #open_options {
          justify-content: space-between;
          cursor: pointer;
          height: 50px; }
          #landing #landing_select_desktop #open_options p {
            margin: 0;
            padding-left: 25px; }
          #landing #landing_select_desktop #open_options img {
            padding: 5%; }
        #landing #landing_select_desktop #load_options {
          display: none;
          margin: 5% 0;
          max-height: 200px;
          overflow-y: scroll;
          border: 2px solid #112758;
          background-color: #F5F4F4;
          border-radius: 10px; }
          #landing #landing_select_desktop #load_options p {
            width: 100%;
            cursor: pointer;
            margin: 0;
            height: 50px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 2px solid #112758; }
            #landing #landing_select_desktop #load_options p a {
              padding-left: 25px;
              text-decoration: none;
              color: #112758; }
          #landing #landing_select_desktop #load_options p:last-child {
            border-bottom: 0px; }
          #landing #landing_select_desktop #load_options p:hover {
            background-color: #DEDEDE; }
            #landing #landing_select_desktop #load_options p:hover a {
              color: #d15152; }
        #landing #landing_select_desktop #load_options::-webkit-scrollbar {
          -webkit-appearance: none; }
        #landing #landing_select_desktop #load_options::-webkit-scrollbar:vertical {
          width: 11px; }
        #landing #landing_select_desktop #load_options::-webkit-scrollbar-thumb {
          border-radius: 8px;
          border: 2px solid white;
          /* should match background, can't be transparent */
          background-color: rgba(0, 0, 0, 0.5); }
      #landing a.btn {
        grid-area: 2/4/2/7;
        margin: 5vh;
        background-color: #d15152;
        display: flex;
        font-size: 0.8em;
        border-radius: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #fff;
        text-decoration: none; }
        #landing a.btn svg {
          fill: #112758; }

    #landing_city_thumbs {
      display: block; }

    #landing_city_thumbs {
      background: #fff; }
      #landing_city_thumbs .resto_list_title {
        padding: 5vh 0;
        width: 100%;
        text-align: center;
        color: #112758; }
        #landing_city_thumbs .resto_list_title svg {
          fill: #d15152; }
      #landing_city_thumbs #landing_city_thumbs_list {
        padding: 0 0 10vh 0;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        grid-template-areas: ". ul ul ul ul .";
        align-items: center; }
        #landing_city_thumbs #landing_city_thumbs_list ul {
          margin-bottom: 40px;
          list-style: none;
          padding-left: 0;
          grid-area: ul;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: auto;
          grid-auto-flow: row;
          grid-gap: 10px; }
          #landing_city_thumbs #landing_city_thumbs_list ul li {
            display: flex;
            flex-direction: column; }
            #landing_city_thumbs #landing_city_thumbs_list ul li h2 {
              margin: 0;
              text-align: center;
              padding: 5%; }
              #landing_city_thumbs #landing_city_thumbs_list ul li h2 a {
                color: #fff;
                font-size: 0.6em;
                text-decoration: none; }
          #landing_city_thumbs #landing_city_thumbs_list ul li:nth-of-type(odd) h2 {
            background: #112758; }
          #landing_city_thumbs #landing_city_thumbs_list ul li:nth-of-type(even) h2 {
            background: #d15152; }

    #copyright {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: 1fr;
      grid-gap: 10px;
      grid-template-areas: ". list list list list ."; }
      #copyright ul {
        display: none; }
        #copyright ul li a {
          color: #d15152;
          text-decoration: none; }
      #copyright p {
        display: block;
        grid-area: list;
        text-align: center; }
        #copyright p a {
          color: #d15152;
          text-decoration: none; }

    #page-contact {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: -webkit-min-content;
      grid-gap: 10px;
      grid-template-areas: ". val val btn btn btn"; }
      #page-contact a {
        grid-area: btn;
        align-self: flex-start; }
      #page-contact ul {
        grid-area: val;
        align-self: center;
        padding: 0; }
      #page-contact a.btn {
        margin: 5vh;
        width: auto; }

    #page404 {
      background-position: center center;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: auto;
      grid-gap: 10px;
      grid-template-areas: ". title title title title ." ". qoute qoute qoute qoute qoute" ". link link link . ."; }
      #page404 h1 {
        grid-area: title;
        font-size: 20vw;
        margin: 0;
        align-self: flex-end;
        justify-self: flex-start; }
      #page404 h2 {
        grid-area: qoute;
        text-align: left; }
      #page404 a {
        grid-area: link;
        align-self: flex-start; }

    #policy {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-areas: ". policy policy policy policy .";
      padding: 0;
      padding-top: 15vh; }
      #policy div {
        grid-area: policy; } }
  @media screen and (min-width: 1024px) {
    header .header_links_list {
      grid-area: 1/4/1/6; }

    #landing #landing_intro {
      grid-area: 1/2/3/4; }
    #landing a.btn {
      grid-area: 2/5/3/7; }

    #page-contact a {
      grid-area: 1/5/1/7; }

    #landing_city_thumbs #landing_city_thumbs_list ul {
      grid-template-columns: repeat(4, 1fr); }
      #landing_city_thumbs #landing_city_thumbs_list ul li a {
        font-size: 0.8em; } }
  @media screen and (device-width: 768px) and (device-height: 1024px) {
    header #arrow {
      width: 20%;
      grid-area: 2/2/2/5; } } }