﻿.dropdown-menucolumna {
   float:right;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  visibility: visible;
  padding: 5px 0;   
  margin: 2px 0 0;
  display: none;
  list-style: none;
  font-size: 14px;     
  background-color: #fff;  /*color del marco hijo*/
  border-radius: 0 0 0 4px;
  background-clip: padding-box;  
  width: 748px;
 
}

.dropdown-menucolumna .dropdown-menucolumna {    
  min-width: 160px;
  padding: 0;
  display: none;
  margin: 2px 0 0 40px;
  list-style: none;
  font-size: 14px;
  opacity: 0;
  background-color:  #fff;   /*color del marco hijo del padre*/
  border-radius: 0 0 0 4px;
  background-clip: padding-box;

}

@media (min-width: 768px) {
  .dropdown-menucolumna {    
    top: 200%;
    left: 0;    
    visibility: hidden;
    float: left;
    display: block;
    min-width: 160px;
    padding: 5px 0;    
    opacity: 0;

  }
  .dropdown-menucolumna:before{
    content: "";
    position: absolute;
    top: -14px;
    left: 3%;
    border-style: solid;
    border-width: 10px;
    border-color: transparent transparent #b21800 transparent; /*color de las flechitas del menu hijo*/
  }  
  .dropdown-menucolumna .dropdown-menucolumna {    
    top: -3px;
    left: 120%;
    display: block;
    float: left;
    z-index: 1000;
    margin: 2px 0 0;
    visibility: hidden;
    opacity: 0;
  }
  .dropdown-menucolumna .dropdown-menucolumna:before{
    content: "";
    position: absolute;
    top: 5px;
    left: -20px;
    border-style: solid;
    border-width: 10px;
    border-color: transparent #b21800 transparent transparent; /*color de las flechitas del menu padre-hijo*/
  }
  .dropdown:hover > .dropdown-menucolumna {
    opacity: 1 ;
    top: 100% ;    
    visibility: visible ;
  }
  .dropdown-menucolumna .dropdown:hover > .dropdown-menucolumna {
    opacity: 1;  
    top: -3px;
    left: 100%;
    padding: 5px 0;
    visibility: visible;

  }

.dropdown-itemcolumna ul a {
    transition: background-color .3s;
    font-size: 1rem;
    color: #0c0c0c;
    display: inline-block;
    padding: 0 15px;
    cursor: pointer;
}

.dropdown-itemcolumna ul a:hover {
   background: #982828;
  color: #fff;
}

.dropdown-itemcolumna {
  float: left;
  display: block;
  padding: 0.25rem 1.5rem;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  font-size: 8;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  float: left;
  margin-right: 2%;
  width: 23%;
}

.dropdown-itemcolumna > .dropdown-item  {
  display: block;
   font-weight: 400;
    padding-top: 1px;
  color: #212529;
  text-align: inherit;
  font-size: 8;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  float: left;
  margin-right: 2%;
  width: 23%;
  color : ;
}


.dropdown-menucolumna .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #0e6e8c;
}
.dropdown-menucolumna > li {
  position: relative;
}
/*Este hace pequeño el menu*/
.dropdown-menucolumna > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  background-color: #fff; /*color de las letras y fondo de los hijos al estar sin accion del Mause*/
  color: #3f444a;
  line-height: 1.42857143;
  white-space: nowrap;
}

/*controla lo que sucede al tener el foco en hijos del menu al señalarlos con el mouse*/
.dropdown-menucolumna > li > a:hover,
.dropdown-menucolumna > li > a:focus,
.dropdown-menucolumna > .active > a,
.dropdown-menucolumna > .active > a:hover,
.dropdown-menucolumna > .active > a:focus {      
  background: #982828;
  color: #fff;
}
.open > .dropdown-menucolumna {  
  display: block;
  opacity: 1;
}

