@media screen and (max-width: 1790px) {
  #openingHours { margin-left: 10%; }
  #reserveTimeDiv { margin-right: 10%; }
}

@media screen and (max-width: 1650px) {
  .about { margin: 25px; }
  .tuotteet { margin: 25px; }

  #openingHours { margin: 25px; }
  #reserveTimeDiv { margin: 25px; }
}

@media screen and (max-width: 1367px) {
  .about { margin: 10px; }
  .tuotteet { margin: 10px; }

  #openingHours { margin: 10px; }
  #reserveTimeDiv { margin: 10px; }
}

@media screen and (max-width: 1307px) {
  .about { width: 80%; display: block; float: initial; margin: 0 auto; }
  .tuotteet { width: 80%; display: block; float: initial; margin: 0 auto; }

  #openingHours { display: inline-block; margin: 0 auto; }
  #reserveTimeDiv { display: inline-block; margin: 0 auto; }
}

@media screen and (max-width: 1250px) {
  #openingHours { width: 50%; }
  #reserveTimeDiv { width: 50%; }
}

@media screen and (max-width: 1100px) {
  .about { width: 100%; display: block; float: initial; margin: 0; }
  .tuotteet { width: 100%; display: block; float: initial; margin: 0; }

  #about-ourstory_area { width: 75%; padding-left: 12.5%; padding-right: 12.5%; }
  #visting-reserve_area { width: 75%; padding-left: 12.5%; padding-right: 12.5%; }
}

@media screen and (max-width: 870px) {
  .navigation a { margin: 10px; font-size: 20px; }
  #main_wrapper { text-align: justify; }
  .tuotteet { width: 100%; margin-bottom: 25px; }
  #facebook { text-align: center; }

  #openingHours { width: 100%; display: block; float: initial; margin: 0; }
  #reserveTimeDiv { width: 100%; display: block; float: initial; margin: 0; }

  .about h1 { margin: 0 auto; }
  .tuotteet h1 { margin: 0 auto; }
}

@media screen and (max-width: 800px) {
  .column { flex: 50%; max-width: 50%; }
}

@media screen and (max-width: 750px) {
	ul { display: block; }
	nav { font-size: .8em;} 
	nav ul li { display: block; border-bottom: 1px solid #ccc; }
}

@media screen and (max-width: 645px) {
  #about-ourstory_area { width: 90%; padding-left: 5%; padding-right: 5%; }
}

@media screen and (max-width: 600px) {
  
  /*TOGGLABLE NAV FOR MOBILE*/
  .navigation a/*:not(:first-child)*/ {display: none;}
  .navigation select { display: none; }
  .navigation a.icon {
    float: center;
    display: block;
    text-decoration: none;
  }

  .navigation-responsive { 
    width: 100%;
    margin: 0 auto;
    height: auto;
    background-color: rgba(0, 0, 0, 1);
    text-align: center;
    position: fixed;
    padding: 0;
    z-index: 150;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navigation-responsive .icon {
    display: block;
  }

  .navigation-responsive a {
    color: #fff;
    font-family: Montserrat;
    font-size: 18px;
    line-height: auto;
    margin: 6px;
  }

  .navigation-responsive p { display: none; }

  .navigation-responsive select {
    padding: 5px;
    border: solid white 3px;
    border-radius: 5px;
    padding: 5px 20px 5px 5px;
    font-size: 16px;
    color: #fff;
    margin: 10px;
    background: url(../img/arrow-down.jpg) 90% / 45% no-repeat transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .navigation-responsive select:active {
    background-color: #000;
    outline: none;
  }

  .navigation-responsive select:focus {
    background-color: #000;
    outline: none;
  }

  .navigation-responsive select::-ms-expand { 
      display: none; /* hide the default arrow in ie10 and ie11 */
  }

  /*ABOUT US & OUR STORY*/
  
  #about {
    display: none;
  }

  #tuotteet {
    display: none;
  }

  #about-ourstory_area button {
    display: block;
  }
  
  #ppRow {
    display: none;
  }

  #previewPictures button {
    display: block;
  }

  #main_wrapper { width: 100%; }
  #blog_feed { width: 100%; }

  .column { flex: 100%; max-width: 100%; padding: 0; margin: 0; }
  .column img { margin: 0; margin-top: 5px; max-width: 100%; }
}

@media screen and (max-width: 480px) {
  /*#about h1 { width: 40%; }*/
  table.openingHours { width: 100%; border-left: none; border-right: none; }
  #reserveTime { width: 100%; border-left: none; border-right: none; }
  .row { max-width: 100%; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }

  #employee-card { margin-left: 0; margin-right: 0; max-width: 100%; }
}

@media screen and (max-width: 345px) {
  #about-ourstory_area button {
    max-width: 95%;
  }

  #previewPictures button {
    max-width: 95%;
  }
}