.ap-main-nav-container.new {
  padding:0.75em;
  background:rgba(0,0,0,0.1);
  width:100%;
  transition: transform 0.4s ease;
  will-change: transform;
}

.ap-main-nav-container.new:before,
.ap-main-nav-container.new:after {
  content: '';
  position:absolute;
  display:block;
  top:0;
  left:0;
  height:100%;
  width:100%;
  pointer-events:none;
  opacity:1;
  will-change:opacity;
  z-index:-1;
  transition: opacity 0.35s ease, box-shadow 0.35s ease;
}

.ap-main-nav-container.new:before {
  opacity:0;
}
.ap-main-nav-container.new.collapsed:before {
  opacity:1;
}



.ap-main-nav-container:before {
  background: url('https://cdn2.hubspot.net/hubfs/2695976/Squirrels_September2018/Images/ap-banner-bg-1.jpg') center center no-repeat;
  background-size: cover;
}
.ap-main-nav-container:after {
  background: rgba(0,0,0,0.15);
}


.ap-main-nav {
  display:flex;
  align-items:center;
  justify-content: space-between;
  max-width:775px;
  margin:0 auto;
}

#apNavLogo {
  max-height:25px;
  height:55px;
}
.ap-main-nav .nav-item img {
  max-height:25px;
  max-width: initial;
}
.ap-main-nav img.icon {
  max-height:25px;
  height:auto;
}

.ap-main-nav .nav-items {
  display:flex;
  position:relative;
  z-index:1;
}
.ap-main-nav .nav-dropdown {
  position:absolute;
  display:flex;
  flex-wrap:wrap;
  list-style-type:none;
  padding:0.5em;
  margin:0;
  background:white;
  border-radius:3px;
  box-shadow: 0 0 1px rgba(0,40,140,0.1), 0 15px 25px rgba(0,40,140,0.2);
  top:100%;
  left:50%;
  pointer-events:none;
  opacity:0;
  transform:translateX(calc(-50% - 15px));
  will-change: transform, opacity;
  z-index:1;
}

.nav-dropdown.small {
  width:335px;
  flex-wrap:wrap;
}

.ap-main-nav .nav-items .nav-dropdown.active {
  opacity:1;
  pointer-events:all;
  transform:translateX(calc(-50% - 0));
}


.ap-main-nav .nav-item:not(:last-child) {
  margin-right:0.75em;
}
.ap-main-nav .nav-item {
  padding:0.75em;
  text-align:center;
  position:relative;
  transition:background 0.2s ease;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-transform:uppercase;
  color:rgba(255,255,255,0.9);
  letter-spacing: 0.1em;
  font-size:0.8em;
  text-decoration:none;
  font-weight:400;
  cursor:default;
  white-space:nowrap;
}
.ap-main-nav a.nav-item {
  cursor:pointer;
}

.ap-main-nav .nav-item i {
  font-size:1em;
  margin-left:0.5em;
}



.ap-main-nav .nav-item:hover .nav-dropdown {
  opacity:1;
  pointer-events:all;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform:translateX(calc(-50%));
}

.ap-main-nav .nav-items section {
  display:flex;
  width:100%;
}
.ap-main-nav .dropdown-product {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  padding:1em;
  border-radius:5px;
  transform:translateX(-5px);
  opacity:0;
  transition:all 0.45s ease, background 0.2s ease;
  text-align:left;
  cursor:pointer;
  will-change: transform, opacity;
  font-weight:400;
  text-transform:none;
  width:50%;
  text-decoration:none;
}
.ap-main-nav .small .dropdown-product {
  flex-wrap:nowrap;
  white-space:nowrap;
  width:50%;

}



.ap-main-nav .dropdown-product > span {
  margin-left:0.5em;
  color:#404040;
}

.ap-main-nav .dropdown-product:hover {
  background: rgba(0,40,140,0.05)
}
.ap-main-nav .dropdown-product:active {
  background: rgba(0,40,140,0.1)
}
.ap-main-nav .nav-item:hover .dropdown-product {
  transform:translateX(0);
  opacity:1;
}


.ap-main-nav .dropdown-product p{
  font-size:1em;
  margin:0;
  font-weight:200;
  text-transform: none;
  margin-top:0.5em;
  color:#7b7b7b;
}

@keyframes ticcc{
  45% {
    transform:translateY(1px);
  }
}

.ap-main-nav .nav-item:hover {
  color:color:rgba(255,255,255,0.9);
}
.ap-main-nav div.nav-item:hover > span {
  transition: transform 0.15s ease-in-out;
}

.ap-main-nav div.nav-item:hover > span,
.ap-main-nav div.nav-item:hover > i {
  animation: 0.2s ticcc forwards;
}
.small .dropdown-product {

}
.ap-main-nav .nav-dropdown a {
  width:100%;
  padding:0.75em;
  text-decoration: none;
  white-space:nowrap;
  display:block;
  color: #404040;
  transition: all 0.3s ease;
  text-transform: none;
  border-radius:3px;
}
.ap-main-nav .nav-item.try,
.ap-main-nav .nav-item.buy {
  padding: 0.5em 1em;
  border-radius:3px;
  text-align:center;
  align-self:center;
  transition: 0.15s ease;
  will-change: transform, box-shadow;
}
.ap-main-nav .nav-item.try {
  background: white;
  color:#404040;
  box-shadow: 0 2px 4px rgba(0,0,0,0.14);
}
.ap-main-nav .nav-item.buy {
  background: #00ae41;
  color:white;
  /*border:2px solid rgba(255,255,255,0.5);*/
}
@media (max-width: 776px) {
  .ap-main-nav .nav-item.buy {
    background: #00ae41;
    border:none;
  }
}

.ap-main-nav .nav-item.try:hover, 
.ap-main-nav .nav-item.buy:hover{
  box-shadow: 0 3px 5px rgba(0,0,0,0.12);
  transform:translateY(-1px);
}

.ap-main-nav .nav-dropdown a:hover {
  background: rgba(56, 184, 76, 0.1);
  color: #303030;
}
.ap-main-nav .nav-dropdown a:active {
  background: rgba(56, 184, 76, 0.15);
  color: #202020;
}

.ap-main-nav .ap-dropdown-icon {
  display:none;
  color:white;
  margin-left:0.5em;
}

.ap-main-nav .arrow-down {
  width: 12px; 
  height: 17px;
  -webkit-filter: invert(0);
  filter: invert(0);
}

@media (max-width: 776px) {
  .ap-main-nav-container {

    padding:0;
  }
  .ap-mobile-nav-toggle {
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-wrap:nowrap;
    width:100%;
    padding:1em;
  }

  .ap-main-nav .ap-dropdown-icon {
    display:block
  }
  
  .ap-main-nav .arrow-down {
  width: 18px; 
  height: 17px;
  -webkit-filter: invert(1);
  filter: invert(1);
}

  .ap-main-nav .nav-dropdown-container {
    width:100%;
    max-height:0;
    overflow:hidden;
    transition: max-height 0.35s ease;
  }
  .ap-main-nav .title-container {
    padding:1em;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .ap-main-nav .title-container:hover {
    background:rgba(0,20,70,0.05);
  }
  .ap-main-nav .nav-item.active .title-container span {
    color: #007FFF;
  }

  .ap-main-nav .nav-item .title-container span {
    transition: color 0.3s ease !important;
  }




  .ap-main-nav .nav-dropdown {
    top:0;
    left:0;
    transform:none;
    opacity:1;
    display:flex;
    width:100%;
    position:relative;
    box-shadow:none;
  }
  .ap-main-nav .nav-item:hover .nav-dropdown {
    transform:none;
  }
  .ap-main-nav .nav-item:hover {
    animation:none;
  }

  .ap-main-nav {
    justify-content:center;
    padding:0;
  }

  .ap-main-nav-container .nav-items {
    display:none;
    position:absolute;
    padding:1em;
    flex-direction:column;
    top:100%;
    left:50%;
    width:90%;
    transform:translateX(-50%);
    box-shadow: 0 6px 9px rgba(0,20,40,0.15);
    background:white;
    border-radius:5px;
  }
  .ap-main-nav-container .nav-item {
    color: #404040;
    flex-wrap:wrap;
    padding:0;
    font-size:0.9em;

  }
  .ap-main-nav-container .nav-item.title-container {
    padding:1em;
  }
  .ap-main-nav .try,
  .ap-main-nav .buy{
    width:100%;
    display:block;
    text-align:center;
    padding:2em;
  }
  .ap-main-nav .buy { margin-top:1.5em; }
  .ap-main-nav .try { margin-top:0.5em; }
  .ap-main-nav .nav-item:not(:last-child) {
    margin-right:0;
    border-bottom: 1px solid rgba(0,20,70,0.1);
  }
  .ap-main-nav-container.active .nav-items {
    display:flex;

  }
  .ap-dropdown-icon {
    will-change:transform;
    transition: transform 0.35s ease;
  }

  .ap-main-nav-container.active .ap-dropdown-icon {
    transform:rotate(-180deg);
  }
  .sq-hamburger {
    display:flex;
  }
  .ap-mobile-nav-toggle a{
    pointer-events:none;
  }
}

.ap-mobile-nav-toggle a{
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-wrap:nowrap;
  z-index:1;
}

.ap-main-nav-container__ditto-refer {
}




.store-modal-container {
  display:flex;
  
  opacity:0;
  pointer-events:none;
  visibility: hidden; 
  
  align-items:center;
  justify-content:center;
  position:fixed;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background: rgba(0,0,0,0.6);
}

.store-modal-container.active {
  opacity:1;
pointer-events:all;
  visibility: visible;
}
.store-modal  {
  opacity:0;
  pointer-events:none;


  position:relative;
  background:white;
  box-shadow: 0 10px 12px rgba(0,0,0,0.15);
  border-radius:10px;
  padding:2em;
  padding-top:0;
  max-width:1000px;
  width:90%;
  text-align:center;
  transform:scale(0.96);
  will-change:transform, opacity;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.store-modal-container.active .store-modal  {

  transform:scale(1);
  opacity:1;
  pointer-events:all;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.store-modal__platforms-container {
  display:flex;
  flex-wrap:wrap;
}
.store-modal__heading {

}

.store-modal__platform {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:2em;
  border:2px solid rgba(0,0,0,0.2);
  width:calc(50% - 1em);
  margin:0.5em;
}

@media (min-width: 776px) {
  .store-modal__platform {
  width:calc(25% - 1em);
  }
}
@media (min-width: 1000px) {
  .store-modal__platform {
  width:calc(25% - 1em);
  }
}
.store-modal a {
  padding:0.5em;
  display:block;
  border-radius:5px;
  align-self:stretch;
}
.store-modal a:hover,
.store-modal a:active,
.store-modal a:focus {
  text-decoration:none;
  color:white;
}

.store-modal--ap a {
  background:#38B84C;
  color:white;
  cursor:pointer;
}
.store-modal--ap a:hover {
  color:white;
}

.store-modal__platform-icon {
  width:40px;
  margin-bottom:1em;
}

.store-modal__platform-name {
  color:#7b7b7b;
  white-space:nowrap;
}



.store-modal__product-icon {
  height:60px;
  margin-top:-30px;
}