$min-width: 120px;
$maincolor: #6BBE92;  
$secondarycolor: #3E8760;

@mixin transform($value){
  -webkit-transform: ($value);
     -moz-transform: ($value);
      -ms-transform: ($value);
          transform: ($value);
}
@mixin transition($value){
  -webkit-transition: ($value);
     -moz-transition: ($value);
      -ms-transition: ($value);
          transition: ($value);
}

/*  LINES 18 A 33 COMENTADAS PARA CORREGIR ALINEACION DE ITEMS DE MENUS*{
  box-sizing: border-box;
}
body{
  font-family: 'Open Sans', sans-serif;
  background: #374954;
  color: white;
  text-align: center;
}
*/
/*     CODIGO PRELOADER DANY    */
  /* *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}  */
  

.hiddenZ{
  overflow: hidden;
} 




.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #008F39;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #008F39 transparent transparent transparent;
}


.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 

.loader77{
  background-color: #fff; 
  width: 100%;
  height: 100vh;
  display: flex; 
  justify-content:center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  
} 


  /* TERMINA PRELOADER */

#main{
  position: relative;
  list-style: none;
  background: $maincolor;
  font-weight: 400;
  font-size: 0;
  text-transform: uppercase;
  display: inline-block;
  padding: 0;
  margin: 50px auto;
  li{
    font-size: 0.8rem;
    display: inline-block;
    position: relative;
    padding: 15px 20px;
    cursor: pointer;
    z-index: 5;
    min-width: $min-width;
  }  
}
li{
  margin: 0;
}
.drop{
    overflow: hidden;
    list-style: none;
    position: relative;
    padding: 0;
    width: 100%;
    left: 0;
    top: 48px;
    div{
      @include transform(translate(0,-100%));
      @include transition(all 0.5s 0.1s);
      position: relative;
    }
    li{
      display:block;
      padding: 0;
      width: 100%;
      background: $secondarycolor !important;
    }
  }
#marker{
  height: 6px;
  background: $secondarycolor !important;
  position: absolute;
  bottom: 0;
  width: $min-width;
  z-index: 2;
  @include transition(all 0.35s);
}

@for $i from 1 through 4{
  #main li:nth-child(#{$i}){
    &:hover ul div{
     @include transform(translate(0,0)); 
    }
    &:hover ~ #marker{
      @include transform(translate(#{(-1+$i)*$min-width},0));
    }
  }    
}