.position
{
 position:relative;
color: #ffffff;
border:0;
display: flex;
width: 100%;
background:0;
cursor:pointer;
font-size: 25px;
backdrop-filter:blur(5px);
background-color:#2c2c2c3a;
border-radius: 2%;
text-align: left;
justify-content: left;
align-items: center;
 margin-top: 3px !important;

padding:0% 3% 0% 0%
  }



  .add, .subtract, .quantity
  {
    position:relative;
    padding-left: 4%  ;
    padding-right: 4%  ;
  margin-top: 0px;

  }

  .textStatusOrder{  display: flex  ;  display: none; }

  .addDish
  {
    position: absolute;
    right: 3%;
      top: 2%;
    font-size: 50px;

    color:  rgb(0, 158, 32);



  }
  .addDish:hover
  {
    position: absolute;
  font-size: 60px;
    color:  #17bd38;
    text-shadow: 2px 2px 5px rgb(0, 0, 0);
    transition      : 1.3s;

  }

.position > .info_about_dish {
    display:contents ;
}
.photosDish
{
border-radius: 2%;
display: flex;
padding-right: 2% !important;
width: 220px;
height:180px;

}
  .position:hover
  {
    transition      : 1.3s;
    backdrop-filter:blur(15px);
    background-color:#2c2c2c3a;
    text-shadow: 2px 2px 5px rgb(0, 0, 0);
color:  #be7f40 !important;

  }

  .info_about_dish
  {
font-size: 15px;
text-align:left;
padding:0% 3% 0 5%
  }


  h3{
    text-align:left;
    padding:5% 0% 0 5%;

    font-size: 30px;
  }
  .orderSummaryBackground {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000000ad;
  z-index:9999
  }

  .orderSummary {
  position:absolute;
top: 2%;
width: 40%;
z-index:9999999 !important;

  transform:translateX(-50%);
  left:50%;
  padding-top:5%;
  border-radius:2%;
  background-color:#5c5c5c3a;
  backdrop-filter:blur(15px);
  text-align:center;
  z-index:998;
  }


  button
  {
    color: #ffffff !important;
  }


  .logoHPPopup
  {
    position: relative;
    width:30%;
    z-index:99
  }



  #contenerOrderInfo {
  position:relative;

  margin-top:4.2%;
  margin-left: 0%;
  margin-bottom:4.2%;
  height:10vh;
  overflow:auto!important;
  border:solid 2px #be8040;

  }


  .totalPayment
  {
    position: relative;
    display: flex;
    font-size: 20px;
margin-top: 2%;
    padding:1% 2% 5% 5%
  }

.boxOrders
{
  transform:translateX(-50%);

  left:50%;
position: relative;
display: flex;
width: 55%;



}




  #contenerImage {
  position:absolute;
  left:30%;
  margin-top:0%;
  margin-bottom:0;
  transform:translateX(-50%);
  width:45%!important;
  height:100%;
  z-index:2
  }


  #ordersForm{
    border-radius: 2%;
  position:absolute;
  background-color:#26262632;
  backdrop-filter:blur(15px);
  left:70%;
  transform:translateX(-50%);
  margin-bottom:0;
  width:30%;
  margin-top:15.2%;
  z-index:22!important
  }

  input {
  padding:1%
  }

  input::placeholder {
  color:#fff
  }

  textarea::placeholder {
  color:#fff
  }

  .textStatus {
  transform:translateX(-50%);
  background-color:#4b4b4b00;
  width:90%;

 margin-top: -12%;
  position:relative;
 text-align: left !important;
border-radius: 2%;
  line-height: 1.6;
  left:50%;

font-size: 20px;

  }

  input,textarea {
    width: 48%;
  text-align:center;
  position:relative;
  display:flex;
  left:50%;
  margin:1.5%;
  transform:translateX(-50%);
  top:2%;
  width:46%;
  font-size:20px;
  background-color:#4d4d4d00;
  color:#fff
  }
  textarea {
width: 48%;
  }

  input:focus {

  border-color:#ffffff;

  }
  input:hover {

    border-color:#ffffff;

    }
    textarea:hover {

      border-color:#ffffff;

      }

  label {
  position:relative;
  text-align:center;
  top:2%;
  margin:1%;
  font-size:18px
  }


  .containerCheck {
  display:block;
  position:relative;
  padding-left:25px;
  margin-bottom:5px;
  cursor:pointer;
  font-size:10px;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  text-align:left
  }

  .containerCheck input {
  position:absolute;
  opacity:0;
  cursor:pointer
  }

  .checkmark {
  position:absolute;
  top:0;
  left:0;
  height:15px;
  width:15px;
  background-color:#eee
  }

  .information {
  position:relative;
  font-size:17px;
  text-align:left;
  padding:1% 2% 5% 5%;

  }
  .background
  {

    font-size: 20px ;
    text-align:left;
    padding:3% 2% 3% 3%;
    background-color: #324932;
  }

  .carImage
  {
    animation-name: goCar;
  animation-duration: 6s;
    width: 22%;
    left: 23%;

    position: relative;
  }

  .carImage:hover

  {
       transform: translateX(50%);
  }

@keyframes goCar {
  0%   { left:-50%;}
  25%  { left:10%;}

}


  .containerCheck {
    display:block;
    position:relative;
    padding-left:25px;
    margin-bottom:12px;
    cursor:pointer;
    font-size:12px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    text-align:left
    }

    .containerCheck input {
    position:absolute;
    opacity:0;
    cursor:pointer
    }

    .checkmark {
    position:absolute;
    top:0;
    left:0;
    height:15px;
    width:15px;
    background-color:#eee
    }

    .containerCheck:hover input ~ .checkmark {
    background-color:#ccc
    }

    .containerCheck input:checked ~ .checkmark {
    background-color:#be8040
    }

    .checkmark:after {
    content:"";
    position:absolute;
    display:none
    }

    .containerCheck input:checked ~ .checkmark:after {
    display:block
    }

    .containerCheck .checkmark:after {
    top:5px;
    left:5px;
    width:5px;
    height:5px;
    background:#fff
    }



  @media(max-width:950px) {
    .boxOrders
    {
      transform:translateX(-50%);
      left:50%;
    position: relative;
    display: flex;

    margin-left: 0%;
    padding: 1%;

    }

    .background
    {
      font-size:16px;

    }

    .carImage
    {


      left: 10%;


    }
    .orderSummary {
      width:50%
      }

  .information {
  position:relative;
  padding-bottom:1%
  }

  #contenerImage {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  margin-top:2%;
  margin-bottom:0;

  width:95%!important;
  height:50%;
  overflow:auto;
  z-index:2
  }



  #contenerOrderInfo {
  margin-top:10%
  }

  #ordersForm {
  position:relative;
  text-align:center;
  background-color:#26262632;
  backdrop-filter:blur(15px);
  left:50%;
  transform:translateX(-50%);
  margin-bottom:0;
  width:60%;
  margin-top:5%
  }

  input,textarea {
  position:relative;
  display:flex;
  left:50%;
  margin:1.5%;
  transform:translateX(-50%);
  top:-5%;
  font-size:16px
  }

  label {
  position:relative;
  top:10%;
  margin:0%;
  font-size:16px
  }

  .textStatus {
    margin-top: 0%;
  position:relative;
  font-size:16px;

  }


  .textContact,.textLocation,.textInformation {

  position:relative;
  margin-left:1.5%;
  margin-right:1.5%;
  margin-top:2%;
  left:0
  }
  .totalPayment
  {

    font-size: 16px !;

  }

  .position
  {
    font-size: 18px;

  }

  .info_about_dish
  {
font-size: 15px;

  }
  h3
  {
    font-size:20px;
  }

  }

  @media(max-width:600px) {



    button
    {
font-size: 9px;
    }
  .orderSummary {
  width:80%
  }

  .background
  {
    font-size:16px;

  }

  .carImage
  {

margin-top: 4%;
width: 60%;
    left: 0%;


  }

  .photosDish
  {


  width: 150px;
  height: 150px;
  }
  .textStatus {
    font-size:17px
  }

  #ordersForm {
    margin-top:5%;

  }

  }

  @media(max-width:450px) {
    .addDish
    {
      position: absolute;
      right: 3%;
      top: 10%;
      font-size: 45px;

      color:  rgb(0, 158, 32);



    }

#ordersForm {
  margin-top:0%;
  width: 100% !important;
}

  }

  @media(max-width:350px) {
  .textStatus {
  font-size:12px!important;
  z-index:9999
  }
  .photosDish
  {

  height: 100px;
  width: 100px;
  }
  .position
  {
    font-size: 15px;

  }
  .position:hover
  {
    font-size: 17px
  }
  .info_about_dish
  {
font-size: 15px;

  }




  }


  @media(max-width:300px) {
  .boxOrders
  {
    transform:translateX(-50%);
    left:50%;
  position: relative;
  display: flex;
width: 100%;
  margin-left: 0%;
  padding: 1%;

  }
 }