/************************* MENU MULTILEVEL *****************************/ 


.container,
.flex-menu,
.flex-menu ul,
.flex-menu ul.active, 
.flex-menu li.has-submenu > a:after,
.menu--sidebar,
.menu--open,
.menu--close  {

  -webkit-transition:all .2s ease-in-out;
     -moz-transition:all .2s ease-in-out;
      -ms-transition:all .2s ease-in-out;
       -o-transition:all .2s ease-in-out;
          transition:all .2s ease-in-out
}

.container, .main-content {
  position:relative;
  height:100%;
  width:100%; 
}

/*.container {right: 0;}*/

 
.row--nav     { 
  justify-content: space-between; 
  align-items: center;
  /*border:1px solid red; */
}
 
.nav-logo img { display: block; margin:0; padding:0; width: 150px; padding:8px 0;  }

.flex-menu  {  
  font-family: var(--font-primary);
  display: flex; 
  list-style: none;
  margin: 0;
  padding:0;
  align-items: center;
}

.flex-menu > li             { margin: 0; } 
.flex-menu > li:first-child { display: none; } /* ocultar el logo en desktop */

.flex-menu li > a { 
  padding:var(--space-s);
  color:hsla(var(--light),.5);
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--h5);
  display: block;
}

.flex-menu li > a.phone,
a.mobile-phone { 
  font-family: var(--font-secondary);
  font-size: var(--h3);
  padding-right: 0;
  color:hsla(var(--brand-third),1);
  font-weight: 600;
}

a.phone span {
  border: 2px solid #30BCD5;
  border-radius: 18px;
  padding-left: 10px;
  padding-right: 10px;
}

a.mobile-phone { display: none; }

.flex-menu li > a:hover.phone,
a:hover.mobile-phone { 
  color:hsla(var(--brand-third-dark),1);
 }

.flex-menu li.has-submenu > a:after {
  content: '';
  background-image: var(--arrow);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: var(--icon-18);
  width:  var(--icon-18);
  margin-left: var(--space-xs);
}

.flex-menu li.has-submenu > a.active:after { transform: rotate(180deg); color:hsla(var(--brand),1); }


.flex-menu li > a:hover, 
.flex-menu li.current > a,
.flex-menu li.current.has-submenu > a:after    { color:hsl(var(--light)); }
 

/* Submenu */
.flex-menu ul { 
  visibility: hidden; 
  opacity: 0; 
  position: absolute; 
  top:110%;
  border-radius:var(--space-s);
  background-color: hsl(var(--light));
  padding:var(--space-s); 
  box-shadow: var(--shadow20);
}

 
.flex-menu ul.active          { visibility: visible; opacity: 1; top:100%; }    /* DO THIS FOR A CLICK VERSION */

.flex-menu ul > li            { width:200px; max-width:200px; display: block; position: relative; margin:0; }
.flex-menu ul > li a          { color:hsla(var(--brand),.6); padding:var(--space-xs); }
.flex-menu ul > li a:hover,
.flex-menu ul > li.current a  { color:hsla(var(--brand),1); background-color:hsla(var(--brand-dark),.1)  }
 
.cd-header {
  position: absolute;
  top: 0;
  left: 0;
  height: 90px;
  width: 100%;
  z-index: 6;
  background: transparent;
  box-shadow: none;
  transition: background-color 0.3s;
  /*transform: translate3d(0, 0, 0);*/
  backface-visibility: hidden;
}


.cd-header.is-fixed .flex-menu li > a            { color:hsla(var(--brand),.6); }
.cd-header.is-fixed .flex-menu li > a:hover, 
.cd-header.is-fixed .flex-menu li.current > a    { color:hsl(var(--brand)); }
 
.cd-header.is-fixed .flex-menu li:last-child a        { color:hsla(var(--brand-second),.8); }
.cd-header.is-fixed .flex-menu li:last-child a:hover  { color:hsl(var(--brand-second-dark));}

.cd-header.is-fixed .nav-logo img { content: url(../images/logos/logo-color.svg) }

.cd-header.is-fixed.flex-menu li > a.phone,
.cd-header.is-fixed a.mobile-phone { font-family: var(--font-secondary);}
 
.cd-header.is-fixed .flex-menu li > a.phone,
.cd-header.is-fixed a.mobile-phone { color:hsla(var(--brand-third),1); }
 
.cd-header.is-fixed .flex-menu li > a:hover.phone,
.cd-header.is-fixed a:hover.mobile-phone { color:hsla(var(--brand-third-dark),1); }


@media only screen and (min-width: 1100px) {

  .cd-header.is-fixed {
    position: fixed;
    top: -91px;
    background-color: hsla(var(--light),1);
    transition: transform 0.3s;
  }
  
  .cd-header.is-visible {
    /* if the user changes the scrolling direction, we show the header */
    transform: translate3d(0, 100%, 0);
    box-shadow: var(--shadow10);
  }
}
 
 
 
/* Hamburguer */ 

#menu-toggle { display: none; }
.hamburger   { padding:var(--space-m); margin:0; display: none; position: relative; }


.hamburger .line{
  width: 28px;
  height: 3px!important;
  background-color:hsla(var(--light),.5);
  display: block;
  margin: 4px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;

}

.hamburger:hover .line     { background-color:hsla(var(--light),1); }
.hamburger.is-active .line { background-color:hsla(var(--light),1); }
 
/* 
#hamburger:hover .line:nth-child(2), 
#hamburger:hover .line:nth-child(3)       { width: 28px; }
 
#hamburger.is-active .line:nth-child(2)  { width: 20px; opacity: 0; }
#hamburger.is-active .line:nth-child(1)  { width: 28px; transform:translateX(0) translateY(7px) rotate(45deg) } 
#hamburger.is-active .line:nth-child(3)  { width: 28px; transform: translateX(0) translateY(-7px) rotate(-45deg); } */

.menu--open       { display: none; color:hsla(var(--light),.5); cursor: pointer; }
.menu--open:hover { color:hsla(var(--light),1); }

@media only screen and (max-width: 1100px) {

.menu--open   { display: flex; }
a.mobile-phone { display: block; }

/*#menu-toggle  { display: block; position: absolute; right:-15px; z-index:3; }
.hamburger    { display: block; }*/
.nav-logo     { margin:0; padding: 0; } 

.flex-menu > li:first-child     { display: flex; justify-content: space-between; align-items: center; }
.flex-menu > li:first-child img { display: block; margin:0 auto; width: 140px }

.custom--overlay { 
  position:fixed;
  width: 100%;
  height:100%;
  top:0;
  bottom: 0;
  right:0;
  opacity: 0;
  visibility: hidden;
  background-color: hsla(var(--dark),.8)
}

.menu--sidebar.open { right: 0; opacity: 1; z-index: 4; visibility: visible; } 

.flex-menu { 
  flex-direction: column; 
  justify-content:flex-start;
  background:hsla(var(--brand-dark),1); 
  position:absolute;
  width:100%;
  top: 0;
  bottom: 0;
  right: -100%;
  overflow-y: auto;
  align-items: unset;
  /*padding: 0;*/
}

.menu--sidebar.open .flex-menu { right: 0; }

 
/* submenu */

.flex-menu ul { 
  visibility: hidden; 
  opacity: 0; 
  position: absolute; 
  top:110%;
  border-radius:var(--space-s);
  background-color: hsl(var(--light));
  padding:var(--space-s); 
  box-shadow: var(--brand20);
}
.flex-menu ul.active          { visibility: visible; opacity: 1; top:100%; }

.flex-menu ul           { overflow: hidden; 
                          max-height: 0px; 
                          top:0;
                          position: relative;
                          background-color:hsla(var(--dark),.45);
                          box-shadow: none;
                          border-radius:0px;
                          padding:0;
                          margin:0;
                        }

.flex-menu ul.active    { max-height: 990em; top:0; }
/*.flex-menu li > a       { font-size: var(--text-xs); }*/

.flex-menu ul > li      { width:100%; max-width: 100%; }
.flex-menu ul > li a    { padding: var(--space-s) 0 var(--space-s) var(--space-l); color:hsla(var(--light),.7); }
.flex-menu ul > li a:hover,
.flex-menu ul > li.current a  { color:hsl(var(--light)); }

.flex-menu .menu--close {
  color: hsla(var(--light));
  cursor:pointer;
}


} 

@media only screen and (min-width:768px) {
  .mobile-menu, .mobile-brands {
    display: none;
  }

  .desktop-menu {
    font-family: var(--font-primary);
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
  }
  .desktop-menu li {
    margin-bottom: 0;
  }
}

@media only screen and (max-width:768px) {
  .desktop-menu {
    display: none;
  }
  .mobile-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .mobile-brands {
    display: flex;
  }

  .phone-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}