@media (max-width: 767px) {
  #infoRow{display:none !important;}

  .toggleNav {
    display: block;
    z-index: 1;
    margin: 1em;
  }

  .hidden-md-down {
    display: none;
  }
  .hidden-md-up {
    display: flex;
  }

  .logo img {
      max-height: 8vh;
      margin: 1vh 0px;
  }

  div#page-body {
    padding-top: 80px;
  }

  nav.mainNav {
    display: block;
    height: 100vh;
    /* 100% Full-height */
    width: 80%;
    /* 0 width - change this with JavaScript */
    position: fixed;
    /* Stay in place */
    z-index: 600;
    /* Stay on top */
    top: 0;
    /* Stay at the top */
    left: -80%;
    background-color: var(--bioola-dimm);
    overflow-x: hidden;
    /* Disable horizontal scroll */
    transition: 0.33s;
    /* 0.33 second transition effect to slide in the sidenav */
    padding: 0;
  }


  header.mainHeader{
    position: fixed;
  }

  .parallax.home {
    background: url(../assets/hero_nature.jpg) no-repeat;
    background-position: 78%;
    background-size: cover;
    align-items: center;
    height: 70vh;
  }


  nav.visible {
    left: 0%;
    z-index: 600;
  }

  nav.mainNav ul.primaryNav {
    flex-direction: column;
    padding-top: 1em;
  }

  nav a {
    color: #fff;
    text-decoration: none;
  }

  nav a:active,
  nav a:hover {
    color:var(--bioola-primary);
  }

  nav .toggleNav {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    margin: 1em 1.5em;
  }

  nav.mainNav ul.primaryNav li,
  nav ul.secondaryNav li {
    margin: .5em 1em;
    width: 90%;
    text-align: left;
    font-size: 2em;
  }

  nav ul.secondaryNav {
    display: flex;
    left: .5em;
    position: absolute;
    flex-direction: column;
    list-style: none;
    padding: 0;
  }

  nav ul.secondaryNav li {
    font-size: 1.5em;
    opacity: .8;
 }

 .dropdown-menu {
   background: none;
 }


  .parallax.home h1 {
    font-size: 3em;
    text-align: center;
  }

  .parallax.home {
    text-align: center;
    align-items: flex-end;
  }


  .parallax.home .container {
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.7) 100%);
    padding: 5em 0 2em 0;
    max-width: 100%;
  }


  h2 {
    text-align: center;
    font-size: 2em;
  }
  h2#cont_nature,
  h2#cont_color
  {text-align: left;}

  h2 span {
    display: inline;
  }

  .water, .linseed, .pigments, .carnauba
  {
    margin: 0;

  }

  .linseed p.lead {
    line-height: 133%;
    font-size: 1.2em;
  }

  .philo p {
    width: 100%;
    text-align: center;
  }

  .philo {
    height: auto;
  }

  #cont_nature .row,
  #cont_color .row {
    margin: 0;
  }

  #cont_nature{height: calc(100vh - 79px);}

  .swiper-slide {
         min-height: 40vh;
       }
}