@font-face {
  font-family: Roboto;
  src: url("/fonts/Roboto/Roboto-Light.ttf");
}
@font-face{
  font-family: "MarketWeb";
  src:url("/fonts/Market_Web.ttf");
}
@font-face{
  font-family: "HoneyMoon";
  src:url("/fonts/HoneymoonUpBold_PERSONAL.ttf");
}
/* RESTYLING CODE */

.all-in-one{
  background: url("/images/landing-users/fondo\ celu\ principal.jpg") no-repeat center center/cover;
}
.all-in-one .img-container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.elige-promociones-divide p{
  text-align: center;
}
.elige .title{
  display: flex;
  justify-content: center;
  align-items: center;
}
.elige .title img{
  width: 100px;
}
.phone-container{
  padding: 20px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
}
.phone-container .img-phone-container{
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone-container .img-phone-container img{
  width: 90%;
}

.elige{
  background: url("/images/landing-users/fondo\ celu\ elegir.jpg") no-repeat center center/cover;
}
.promociones{
  background: url("/images/landing-users/fondo\ promociones.jpg") no-repeat center center/cover;
}
.divide{
  background: url("/images/landing-users/fondo\ pedi\ la\ cuenta.jpg") no-repeat center center/cover;
}

.wrplay-qr{
  padding: 50px 5% 0 5%;
  display: grid;
  grid-gap: 25px;
  grid-template-columns: 1fr 1fr;
}
.qr{
  display: flex;
}
.wrplay{
  display: flex;
}
.wrplay-qr .text-container{
  text-align: center !important;
  position: relative;
  width: 40%;
}
.wrplay-qr .img-container{
  position: relative;
  display: flex;
  justify-content: flex-end;
  width:60%;
}
.wrplay-qr .img-container img{
  width:100%;
}
/* END RESTYLING */

html{
  scroll-behavior: smooth;
}
.donwloads-footer{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.donwloads-footer a{
  margin: 5px 0;
}
.mobile .icon-menu:before {
  content: "\2630";
  font-size: 30px;
  color:  #ffffff;
}
.mobile .nav-bar-menu{
  font-family:Roboto;
  font-weight: bold;
  background: linear-gradient(180deg, #CC1B1B 102.7%, rgba(255, 0, 0, 0.869792) 0.02%,#FF0000 0.01% );
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
}
.mobile .nav-bar-menu .menu ul li{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 0 20px 0;
}
.mobile .menu-bar{
  padding-top: 10px;
}
.mobile .nav-bar-menu{
  display: none;
  
}
.mobile .nav-bar-mobile .landing-logo{
  flex: 1;
}
.mobile .nav-bar-mobile .menu-bar{
  justify-content: flex-end;
  flex: 1;
}

.mobile .nav-bar-menu .menu ul{
  display: flex;
  flex-flow: column wrap;
  list-style: none;
}
/* .mobile .nav-bar-mobile .nav-bar .menu ul li span{
  display: flex;
  flex-flow: column wrap;
  list-style: none;
} */
.mobile .nav-bar-mobile .nav-bar .menu ul a{
  color: #ffffff;
}
  .background-red {
    background: linear-gradient(180deg, #FF0000 0.01%, rgba(255, 0, 0, 0.869792) 0.02%, #CC1B1B 102.7%);

  }
  .background-red h2 {
    color: #ffffff;
  }
  .background-white {
    background: #ffffff;
    color: #FF0000;
  }
  .background-white h2 {
    color: #FF0000;
  }
  .background-white-grad {
    background: linear-gradient(180deg, #FFFFFF 0%, #E0E0E0 100%);
    color: #FF0000;
  }
  .background-white-grad h2 {
    color: #FF0000;
  }
  h1 {
    font-family: "HoneyMoon";
    font-style: normal;
    font-weight: normal;
    text-align: center;
    color: #FFFFFF;
    text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
  }
  h2 {
    margin: 0;
    padding-bottom: 10px;
    font-family: "HoneyMoon";
    font-style: normal;
    font-weight: normal;
    text-align: center;
  }
  p {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
  }
  .shadow {
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.3);
  }
  .desktop {
    display: none;
  }
  .mobile h1 {
    font-size: 35px;
    line-height: 42px;
  }
  .mobile .nav-bar-mobile {
    display: flex;
    flex-flow: row wrap;
    background: linear-gradient(180deg, #FF0000 0.01%, rgba(255, 0, 0, 0.869792) 0.02%, #CC1B1B 102.7%);
    padding: 5px 10px;
  }
  
  .mobile .nav-bar-mobile img {
    height: 50px;
    padding: 10px 0px;
  }

  .mobile .landing-background {
    height: 230px;
    display: flex;
    justify-content: center;
    background: url("/images/landing-users/foto\ chica\ entera.jpg") no-repeat center center/cover;
  }
  .mobile .background-red {
    display: flex;
    flex-flow: row-reverse wrap;
    align-items: center;
    justify-content: center;
  }
  .mobile .background-white {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
  }
  .mobile p {
    font-size: 14px;
    line-height: 22px;
  }
  .mobile .section {
    padding: 20px;
    display: flex;
    justify-content: space-around;
  }
  .mobile .download-app {
    padding: 20px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  .mobile .download-app .landing-text{
    text-align: center;
  }
  .mobile .img-download{
    margin-top: 10px;
  }
  .mobile .download-app .img-download {
    width: 45%;
    max-width: 160px;
  }
  .mobile .download-app .img-download a {
    width: 100%;
  }
  .mobile .download-app .img-download a img {
    width: 100%;
  
  }
  .mobile .img-phone {
    display: flex;
    flex: 1;
    padding: 10px;
    justify-content: center;
    align-items: center;
  }
  .mobile .img-phone img {
    width: 100%;
    max-width: 230px;
  }
  .mobile .takeaway-delivery {
    justify-content: space-around;
  }
  .mobile .takeaway-delivery p {
    margin: 0 0 20px 0;
    text-align: center;
    color: #707070;
  }
  .mobile .takeaway-delivery .img-phone {
    flex: 1;
  }
  .mobile .takeaway-delivery .texts {
    flex: 1;
    display: flex;
    flex-flow: column wrap;
  }
  @media (min-width: 320px) {
    h2{
      font-size: 35px !important;
    }
    .elige .title img{
      width: 75px;
    }
    .all-in-one{
      margin-top: 10px;
    }
    .all-in-one .img-container img{
      width: 280px;
      height: 244,54px;
    }
    .phone-container .img-phone-container img{
      width: 216px;
      height: 383.64px;
    }
    .wrplay-qr-mobile .img-container img{
      width: 216px;
      height: 383.64px;
    }
    .all-in-one{
      padding: 20px;
      display: flex;
      flex-flow: column;
    }
    .all-in-one h2{
      text-align: left !important;
    }
    .elige-promociones-divide,.wrplay-qr-mobile{
      display: flex;
      flex-flow: column;
    }
    .wrplay-mobile{
      background: url("/images/landing-users/fondo\ promociones.jpg") no-repeat center center/cover;
    }
    .qr-mobile{
      margin-bottom: 10px;
      background: url("/images/landing-users/fondo\ reservas.jpg") no-repeat center center/cover;
    }
    .elige-promociones-divide .elige,
    .elige-promociones-divide .promociones,
    .elige-promociones-divide .divide,
    .wrplay-qr-mobile .wrplay-mobile,
    .wrplay-qr-mobile .qr-mobile{
      margin-top: 10px;
    }
  }
  @media (min-width: 360px) {
    .all-in-one .img-container img{
      width: 320px;
      height: 279.48px;
    }
    .phone-container .img-phone-container img{
      width: 252px;
      height: 447.58px;
    }
    .wrplay-qr-mobile .img-container img{
      width: 252px;
      height: 447.58px;
    }
    .mobile p{
      font-size: 16px;
    }
  }
  @media (min-width: 420px) {
    .all-in-one .img-container img{
      width: 380px;
      height: 331.88px;
    }
    .phone-container .img-phone-container img{
      width: 306px;
      height: 543.49px;
    }
    .wrplay-qr-mobile .img-container img{
      width: 306px;
      height: 543.49px;
    }
    h2{
      font-size: 45px !important;
    }
    .mobile p {
      font-size: 16px;
      line-height: 21px;
    }
    .mobile .landing-background {
      height: 280px;
    }
  }
  @media (min-width: 500px) {
    .mobile p {
      font-size: 18px;
      line-height: 23px;
    }
    .mobile .landing-background {
      height: 350px;
    }
  }
  @media (min-width: 576px) {
    .all-in-one .img-container img{
      width: 536px;
      height: 468.13px;
    }
    .phone-container .img-phone-container img{
      width: 446.4px;
      height: 792.85px;
    }
    .wrplay-qr-mobile .img-container img{
      width: 446.4px;
      height: 792.85px;
    }
    .mobile p {
      font-size: 18px;
      line-height: 26px;
    }
    .mobile .landing-background {
      height: 400px;
    }
  }
  @media (min-width: 992px) {
    .shadow{
      box-shadow: none;
    }
    .all-in-one{
      margin-top: 0px;
    }
    .elige-promociones-divide .elige,
    .elige-promociones-divide .promociones,
    .elige-promociones-divide .divide{
      margin: 0;
    }
    .all-in-one h2{
      align-self: flex-start;
      font-size: 55px !important;
    }
    .all-in-one{
      padding: 50px 10% 30px 10%;
      display: flex;
      flex-flow: column;
    }

    .all-in-one .img-container img{
      width:714.24px;
      height: 623.8px;
    }
    .phone-container .img-phone-container img{
      width:219px;
      height: 390.03px;
    }
    .wrplay-qr .img-container img{
      width:260px;
      height: 385.89px;
    }




    .elige-promociones-divide{
      margin-top: 10px;
      display: grid;
      grid-gap: 10px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: none;
    }
    p {
      font-size: 20px;
    }
    .mobile {
      display: none;
    }
    .desktop {
      display: block;
    }
    .desktop .nav-bar-desktop a:hover{
      transition-duration: 300ms;
      transform: scale(1.1);
    }
    .desktop .landing-logo {
      height: 50px;
      padding-left: 10%;
    }
    .desktop .landing-logo img {
      height: 100%;
    }
    .desktop .download-app {
      padding: 10px;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      background: rgba(0, 0, 0, 0.3);
    }
    .desktop .donwloads{
      display: flex;
      width: 50%;
      align-items: center;
      justify-content: center;
    }
    .desktop .download-app p {
      margin-bottom: 10px;
      color: #ffffff;
    }

    .desktop .download-app .donwloads{
      width: 80%;
    }

    .desktop .download-app .img-download {
      width: 25%;
      max-width: 250px;
    }
    .desktop .download-app .img-download a {
      width: 100%;
    }
    .desktop .download-app .img-download a img {
      width: 100%;
    }

    .desktop .download-app .donwloads .img-download {
      width: 25%;
      margin: 0 25px;
      max-width: 250px;
    }
    .desktop .download-app .donwloads .img-download a {
      width: 100%;
    }
    .desktop .download-app .downloads .img-download a img {
      width: 100%;
    }
    

    .desktop .none {
      height: 10%;
    }
    .desktop .landing-conteiner {
      height: 100vh;
      display: flex;
      flex-flow: column nowrap;
      background: url("/images/landing-users/foto\ chica\ entera.jpg") no-repeat center center/cover;
    }
    .desktop .landing-conteiner .nav-bar-desktop {
      background: linear-gradient(180deg, rgba(255, 0, 0, 0.45) 0.01%, rgba(255, 0, 0, 0.391406) 0.02%, rgba(204, 27, 27, 0.45) 102.7%);
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
      height: 90px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
    }
    .desktop .landing-conteiner .nav-bar-desktop button {
      margin-right: 30px;
      font-family: Roboto;
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 21px;
    }
    .desktop .landing-conteiner .nav-bar-desktop a {
      text-decoration: none;
      margin-right: 30px;
      font-family: Roboto;
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 21px;
    }
    .desktop .landing-conteiner .nav-bar-desktop .contacto {
      color: #ffffff;
    }
    .desktop .landing-conteiner .nav-bar-desktop .restaurantes {
      border: none;
      padding: 5px 20px;
      background: #FFFFFF;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      color: #FF0000;
    }
    .desktop .landing-conteiner .landing-text {
      height: 70%;
      margin-top: 40px;
      display: flex;
      flex-flow: column nowrap;
      align-items: flex-start;
    }
    .desktop .landing-conteiner .landing-text h1 {
      font-size: 55px;
      padding-left: 10%;
    }
    

    .desktop .takeaway-delivery .img-takeaway-delivery img {
      width: 242px;
      height: 395px;
    }

    .desktop .takeaway-delivery {
      padding: 50px 10% 0 10%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
    }
    .desktop .takeaway-delivery .texts {
      display: flex;
      flex-flow: column wrap;
      width: 30%;
      justify-content: center;
    }
    .desktop .wrplay-qr .text-container h2 {
      color: #FF0000;
    }
    .wrplay-qr .text-container p{
      color: #707070;
    }

  }
  @media (min-width: 1200px) {
    .all-in-one .img-container img{
      width:864px;
      height: 754.6px;
    }
    .phone-container .img-phone-container img{
      width:282px;
      height: 500.84px;
    }
    .wrplay-qr .img-container img{
      width:316.5px;
      height: 469.14px;
    }
    .desktop .landing-logo {
      height: 60px;
    }
    h1,.title {
      font-size: 70px;
    }
    .desktop p {
      font-size: 22px;
    }

  }
  @media (min-width: 1600px) {
    .all-in-one .img-container img{
      width:1152px;
      height: 1006.13px;
    }
    .phone-container .img-phone-container img{
      width:402px;
      height: 714px;
    }
    .wrplay-qr .img-container img{
      width:425.5px;
      height: 629.23px;
    }

    .desktop .landing-logo {
      height: 70px;
    }
    .desktop h1,.title {
      font-size: 80px;
    }
    .desktop p {
      font-size: 24px;
    }
    
  }
  @media (min-width: 1900px) {
    .all-in-one .img-container img{
      width:1368px;
      height: 1195px;
    }
    .phone-container .img-phone-container img{
      width:492px;
      height: 873.9px;
    }
    .wrplay-qr .img-container img{
      width:505.5px;
      height: 749.3px;
    }
    
    .desktop .landing-logo {
      height: 80px;
    }
    .desktop h1,.title{
      font-size: 90px;
    }
    .desktop p {
      font-size: 28px;
    }
  }
  /* wait autoprefixer update to allow simple generation of high pixel density media query */
  /*  */