<nav class="np-sub-navigation product-bar" style="padding: 0 15px;">
  <div class="np-sub-navigation-content col-xs-12" style="align-items: center; flex-wrap: wrap;">
    <div class="product-bar-text col-xs-12 col-sm-3">
      Browse By Product
    </div>

    <ul class="product-subscriptions col-xs-12 col-sm-9">
      {% assign subscription_levels = current_person.properties.subscription_levels | split: "," %}
    
      {% for subscription_level in subscription_levels %}
      {% assign name_level_pair = subscription_level | split: ":"%}
        {% assign product_sub_level = name_level_pair | slice: 1 | strip %}
          {% include "profile_logo_calculator", product: name_level_pair[0] %}
          {% comment %} <li class="product-subscription">
          </li> {% endcomment %}
      {% endfor %}
    </ul>
  </div>
</nav>

<style>
  .product-bar{
    box-shadow: 0 3px 5px rgba(0,0,0,.1);
  }

  .browse-by-product{
    align-items: center;
    border-bottom: 1px solid grey;
    display: flex;
    flex-direction: row;
    height: 40px;
    justify-content: space-evenly;
    margin: -20px -50px 20px;
    padding: 0 50px 20px;
  }
  
  .product-subscription img{
    height: 25px;
  }

  .product-bar .product-bar-text{
    margin: 20px 0;
    text-align: center;
  }

  .product-bar .product-subscriptions{
    align-items: center;
		display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
		padding: 0;
  }

  .product-bar .product-subscription{
    align-items: center;
		display: flex;
		flex-direction: row;
		height: 35px;
		justify-content: space-between;
    margin: 5px 0;
  }

  @media screen and (min-width: 768px){
    .product-bar .np-sub-navigation-content{
      flex-direction: row;
    }

    .product-bar .product-bar-text{
      margin: 0;
      /* padding-right: 35px; */
      padding-left: 4%;
      /* text-align: right; */
      text-align: left;
    }

    .product-bar .product-subscriptions{
      flex-direction: row;
      justify-content: flex-start;
    }

    .product-bar .product-subscription{
      margin: 0 20px;
    }
  }

  @media screen and (min-width: 64em){
    .product-bar .product-bar-text{
      /* padding-right: 120px; */
      /* padding-right: 4%; */
    }

    /* .product-bar{
      margin-top: 25.5%;
    } */

    .product-bar .product-subscriptions{
      padding-left: 80px;
    }
  }

  /* @media screen and (min-width: 2300px){
    .product-bar{
      margin-top: 21%;
    }
  }

  @media screen and (min-width: 2800px){
    .product-bar{
      margin-top: 18%;
    }
  } */
</style>