@media screen and (max-width: 700px) {
   body{
    /*background-color:rgb(194, 158, 98);*/
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,000000+0,1e1e1e+20,303030+52,000000+80 */
/*background: rgb(255,255,255); /* Old browsers */
/*background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(0,0,0,1) 0%, rgba(30,30,30,1) 20%, rgba(48,48,48,1) 52%, rgba(0,0,0,1) 80%); /* FF3.6-15 */
/*background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(0,0,0,1) 0%,rgba(30,30,30,1) 20%,rgba(48,48,48,1) 52%,rgba(0,0,0,1) 80%); /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(0,0,0,1) 0%,rgba(30,30,30,1) 20%,rgba(48,48,48,1) 52%,rgba(0,0,0,1) 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
      background-image: url(/pictures/ark-wood-table-vertical.png);
      background-size: cover;
    width: 100%;

   }
   .content{
    width: 90%;
    margin: auto;

   }
    button a{
      color: #000000;
    }
    .buttoncontaine a[x-apple-data-detectors]{
      color:inherit !important;
      text-decoration: inherit !important;
      }
      a{
        color: rgb(255, 255, 255);
      }
      .buttoncontainer .bezalohol a{

        color: #000000;
        text-decoration: none;
      }
      
    nav a{
      color: rgb(255, 255, 255);
      display:inline-block;
      font-size: 15px;
      text-decoration: none;
  }
  .logo{
    position:relative;
    display: block;
    margin: auto;
    margin-left: 50px;
    width: 320px;
    height: 70px;
  }
  nav a.now{
      color: rgb(255, 255, 255);
  }
  button{
    color: black;
  }
    
    .callnow{
        text-align: center;
        margin-left: 180px;
        border-radius: 20px;
        background-color:#76a896;
        
    }
    .textleft{
        color: white;
        font-size: 20px;
    }
    .left{
        display: block;
        width: 100%;
        height: 200px;
        /*border: 1px solid white;*/
    }
    .right{
        margin-top: 200px;
        display: block;  
        width: 100%;
        height: 100%;
        border: 1px solid white;
    }
    h1{
      font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 30px;
    }
    .map{
        display: block;
        width: 100%;
    }
    
    .allcontinf{
        /*border: 1px solid rgb(184, 34, 34);*/
        width: 60%;
        margin: auto;
    }
    .all2{
        padding-left: 0px;
    }
   
     #customers {
      font-size: 15px;
      font-family:jost;
     /* border: 1px solid rgba(52, 37, 37, 0);*/
        width: 95%;

    }
    #customers td{
      font-size: 14px;
      color: rgb(255, 255, 255);
      padding: 8px;
    }
    footer{
        position: relative;
        left: 0;
        bottom: 0;
        width: 100%;
        /*background-color: red;*/
        color: rgb(255, 255, 255);
        text-align: center;
        }
      .footer{
        padding-top: 900px;
        color: white;
        width: 100%;
        text-align: center;
      }
      .bezalohol a{
        color: #000000;
      }
      h2{
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        text-align: center;
        font-size: 25px;
        color: white;
      }
      .bezalohol{
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        animation: fadeIn 1s; 
        color:rgb(255, 255, 255);
        font-size: 18px;
        width: 300px;
        height: 50px;
        text-align: center;
        border-radius: 30px;
        box-shadow: #000 5px 5px 5px 5px;
        background-color: #5e3219;
      }
     .black{
      color: black;
      text-decoration: none;
     }
     .buttoncontainer{
      margin: auto;
      /* border: 1px solid black;*/
      width: 300px;
      margin-top: 200px;  
      text-align: center;
  }
  .menubox{
    position:sticky;
    /*border: 1px solid black;*/
    width: 100%;
    height: auto;
}
    .buttoncontainer a{
      color: #000;
      text-decoration: none;
    }
    .logo{
      display: none;
      width: 100%;
      height: 100%;
      display: block;
      margin: auto;
      text-align: center;   
    }
    .locationmap{
      width: 80%;
      /*border: 1px solid black;*/
      margin: auto;
      height: 300px;
  }
  .red{
    background-color: rgb(255, 208, 0);
    padding: 1px;
    margin: 0;
  }
  }
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

.jost-uniquifier {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}
.container{
  width: 80%;
  margin: auto;
}
.menu-item {
display: inline-flex;
align-items: flex-start;
margin-bottom: 20px;
}

.product-image {
flex-shrink: 0;
margin-right: 20px;
}

.product-image img {
width: 120px;
height: 100px;
object-fit: cover;
}

.item-details {
flex-grow: 1;
display: flex;
flex-direction: column;
}

.title {
font-size: 18px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: bold;
margin-bottom: 5px;
margin-top: 5px;
}

.description {
  font-family:Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
margin-bottom: 5px;
margin-top: 5px;
}

.price {
color: rgb(255, 208, 0);
font-size: 16px;
font-weight: bold;
margin-top: 5px;
}

/* Responsive Design */
@media (min-width: 1025px) and (max-width: 1280px) {

.container{
  width: 100%;
  margin: auto;
}
.menu-item {
color: white;
flex-direction: row;
align-items: flex-start;
}

.product-image {
margin-right: 10px;
margin-bottom: 0;
}

.item-details {
flex-grow: 1;
flex-direction: column;
}

}
@media (max-width: 600px) {
.container{
  width: 100%;
  margin: auto;
}
.menu-item {
color: white;
flex-direction: row;
align-items: flex-start;
}

.product-image {
margin-right: 10px;
margin-bottom: 0;
}

.item-details {
flex-grow: 1;
flex-direction: column;
}
}