/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/




.menu-logo {height: 40px; width: 190px; height: 49px;}


nav {
  padding 0px;
  margin: auto;
  z-index: 80;
  position: fixed;
  width: 100%;
  font-size: 15px;
  background-color: #fff;

}

.menu-structure {
  list-style: none;
  margin: auto;
  padding-left: 0;
  display: flex;
  flex-direction: row;  
  align-items: center;
  justify-content: space-between;

  border: 0px solid red;
}

.menu-item {
  color: #666;
  background: #fff;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
  border: 0px solid red;
  flex-grow: 1;
}
  
.menu-item > a {
  color: #3a3a3a;
  height: 60px;
  border: 0px solid red;
  display: flex;
  align-items: center;
  font-family: 'Kumbh Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
}

.menu-underline:hover {
  background-image: url('https://40367529.fs1.hubspotusercontent-na1.net/hubfs/40367529/Design%20Files/squiggly%20line.png');
  background-repeat: repeat-x;
  background-position: 0% 100%;
}


.menu-underline {
  padding-bottom: 4px;
  margin-bottom: -4px;
  border: 0px solid red;
}





.menu-item:hover,
.menu-item:focus-within {
  cursor: pointer;
}

.menu-item:focus-within a {
  outline: none;
}

.menu-dropdown {
  visibility: hidden;
  opacity: 0;

  position: absolute;
  transition: all 0.5s ease;
  margin-top: -5px;
  margin-left: -10px;
  display: none;
  border: 1px solid #ccc;
  overflow: hidden;
  z-index: 10;

}

.menu-item:hover .menu-dropdown,
.menu-item:focus-within  .menu-dropdown,
.menu-item:hover,
.menu-item:focus {
   visibility: visible;
   opacity: 1;
   display: block;

}

.menu-subitem:hover {
  background-color: #e0d2f1;
}

.menu-subitem {
  white-space: nowrap;
  clear: both;
  width: 100%;
  background-color: #fff;
}

.menu-subitem a {  display: block; padding: 15px; font-family: 'Kumbh Sans', sans-serif; font-weight: 400; font-size: 15px;}



  .mobile-menu {background-color: #ffffff; height: 90px; position: fixed; top: 0; width: 100%; border: 0px solid red; text-align: center;  z-index:5;}
  .mobile-menu-logo {width: 150px; margin-top: 17px;}

#menu {max-width: 1200px; margin: auto;}

.navheightoffset {height: 100px;}

.nav-updownarrow::after {content:'▼'}
.nav-updownarrow {padding-left: 3px; font-size: 7px;}
.menu-item:hover .nav-updownarrow::after {content:'▲'}

.menu-iconsrow {text-align: right;}
.megamenu-icon {width: 50px; margin: 0px 8px;}

/*------------------------------------------------------*/
/*--------------- hamburger menu -----------------------*/
/*------------------------------------------------------*/
#menuToggle input
{  display: none;}

@media (max-width: 800px) {


#menuToggle
{
  display: block;
  position: relative;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  height: 0px;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  transition: color 0.3s ease;
}



#menuToggle input
{
  display: block;
  width: 50px;
  height: 32px;
  position: absolute;
  margin-top: 16px;
  margin-left: 10px;
  cursor: pointer;
  position: fixed; 
/* -- hide the checkbox and place it over the hamburger -- */
  opacity: 0;
  z-index: 10; 
  webkit-touch-callout: none;
}


/* --- hamburger menu ---*/
.hamburger
{
  display: block;
  width: 33px;
  height: 4px;
  position: fixed;
  background: #cdcdcd;
  border-radius: 3px;
  z-index: 5;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}


.hamburger2 {transform-origin: 0% 0%;}
.hamburger3 {transform-origin: 0% 100%;}


.hamburger1 {margin-top: 20px; margin-left: 20px;}
.hamburger2 {margin-top: 29px; margin-left: 20px;}
.hamburger3 {margin-top: 38px; margin-left: 20px;}


/* --- animate hamburger --- */    
#menuToggle input:checked ~ .hamburger
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

#menuToggle input:checked ~ .hamburger2
{ opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}

#menuToggle input:checked ~ .hamburger3
{ transform: rotate(-45deg) translate(0, -1px); }

  
  
  
  
#menu
{
  margin: auto;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0%);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  z-index: 0;

  font-size: 20px;
  max-width: 1200px;
  height: 100vh;
  font-size: 16px;
}


#menuToggle input:checked ~ #menu {transform: none;}


.menu-dropdown {position: relative; visibility: visible; opacity: 0; margin-left: 30px; border: 0px; margin-top: 10px;}
   
.menu-structure {display: block; padding-top: 100px; padding-left: 20px;}
.menu-item > a { height: 30px;}
nav {height: 80px;}    
    
 
  .menu-item, .menu-subitem {padding: .7rem;}
  .menu-subitem a {  display: block;  padding: 0px; }  
  .menu-iconsrow {text-align: left; margin-top: 20px;}
}


/*------------------------------------------------------*/
/*------------------------------------------------------*/





/*-------------------- UNDERLINES ------------------------*/



.nav-menu-on-products, .menu-underline-products:hover {
  background-image: url('https://40367529.fs1.hubspotusercontent-na1.net/hubfs/40367529/Design%20Files/Underlines/menu-hover-products.png');
  background-repeat: no-repeat;
  background-position: 0% 100%;
}

.nav-menu-on-whystorebrand, .menu-underline-whystorebrand:hover {
  background-image: url('https://40367529.fs1.hubspotusercontent-na1.net/hubfs/40367529/Design%20Files/Underlines/menu-hover-whystorebrand.png');
  background-repeat: no-repeat;
  background-position: 0% 100%;
}

.nav-menu-on-wheretofind, .menu-underline-wheretofind:hover {
  background-image: url('https://40367529.fs1.hubspotusercontent-na1.net/hubfs/40367529/Design%20Files/Underlines/menu-hover-wheretofind.png');
  background-repeat: no-repeat;
  background-position: 0% 100%;
}

.nav-menu-on-tools, .menu-underline-tools:hover {
  background-image: url('https://40367529.fs1.hubspotusercontent-na1.net/hubfs/40367529/Design%20Files/Underlines/menu-hover-tools.png');
  background-repeat: no-repeat;
  background-position: 0% 100%;
}

.nav-menu-on-inthenews, .menu-underline-inthenews:hover {
  background-image: url('https://40367529.fs1.hubspotusercontent-na1.net/hubfs/40367529/Design%20Files/Underlines/menu-hover-inthenews.png');
  background-repeat: no-repeat;
  background-position: 0% 100%;
}










#headerbar {
height: 10px;
background: linear-gradient(270deg, rgba(92,174,235,1) 0%, rgba(226,209,246,1) 25%, rgba(250,173,180,1) 50%, rgba(255,180,133,1) 75%, rgba(245,216,117,1) 100%) padding-box,
              linear-gradient(270deg, rgba(92,174,235,1) 0%, rgba(226,209,246,1) 25%, rgba(250,173,180,1) 50%, rgba(255,180,133,1) 75%, rgba(245,216,117,1) 100%) border-box;
 margin: 0px;
}