@font-face{
    font-family: Roboto;
    src: url('../fonts/Roboto/Roboto-BoldCondensed.ttf'); 
}
@font-face{
    font-family: lato;
    src: url('../fonts/lato/Lato-Light.ttf'); 
}
@font-face{
    font-family: lato-black;
    src: url('../fonts/lato/Lato-Black.ttf'); 
}
@font-face{
    font-family: lato-medium;
    src: url('../fonts/lato/Lato-Medium.ttf'); 
}
/* Style the sidenav links and the dropdown button */
.sidenav{
    --background-color: red;
}
.menu1{
    background-color: #747474;
    color: #FFFFFF;
    width: 250px;
    height: 100%;
    display: block;
    text-align: center;
    letter-spacing: 2px;
}
.menu1 a:hover{
    color: #747474;
}
.menu2{
    background-color: #747474;
    color: #FFFFFF;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    letter-spacing: 2px;
}
.menu2 a:hover{
    color: #747474;
}
.dropdown-btn3{
  text-decoration: none;
  --font-size: 20px;
  display: block;
  border: none;
  letter-spacing: 2px;
  color: #FFFFFF;
  background: none;
  font-weight: bold;
  width:100%;
  cursor: pointer;
  outline: none;
}
.tamano{
    font-size: 20px;
}
.dropdown-btn3:hover{
    --border-bottom: solid;
    --border-bottom-color: white;
    background-color: #747474;
}
.menu3{
    color: #CCCCCC;
    width: 33.3%;
    height: 100%;
    position: absolute;
    --right:20px;
    left:33%; 
	top:72px;
    border: solid;
   --display: none; 
}
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  display: block;
  border: none;
  color: gray;
  background: none;
  font-weight: bold;
  width:220px;
  text-align: left;
  cursor: pointer;
  outline: none;
}
.dropdownsub-btn{
   padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 15px;
  display: block;
  border: none;
  color: gray;
  background: none;
  font-weight: bold;
  width:220px;
  text-align: left;
  cursor: pointer;
  outline: none; 
}
/* On mouse-over */
.sidenav a:hover {
  color: #747474;
}
.dropdown-btn:hover, .dropdownsub-btn:hover
{
    color: #747474;
}
/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
   background-color: #747474;
  color: white;
  --border-bottom: solid;
  --border-bottom-color: #ffffff;
}

.active:hover {
  --background-color: #747474;
  color: white;
}

.active2 {
  --background-color: #747474;
  color: #747474 !important;
  --border-bottom: solid;
  --border-bottom-color: #747474;
}

.active2:hover {
  --background-color: #747474;
  color: #747474;
  --border-bottom: solid;
  --border-bottom-color: white;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
    color: #747474;
    width: 250px;
    position: absolute;
    --right:20px;
    left:250px; 
	top:68px;
    text-align: left;
    padding-left: 30px;
   display: none; 
}
.dropdownsub-btn2{
    color: #777777; 
}
.dropdownsub-btn2:hover
{
    color: #747474;
    --border-bottom: solid;
    --border-bottom-color: #747474;
}
.forzar1
{
    color: white !important;
    text-align: left !important;
}
.fuentelato{
    font-family: lato !important;
    font-style: normal !important;
    font-weight: bolder !important;
}

.fuentelato2{
    font-family: lato !important;
    font-style: normal !important;
    font-weight: bolder !important;
}
.negritas{
    font-family: lato-black !important;
    font-style: normal !important;
}
.negritas2{
    font-family: lato-black !important;
    color: #747474;
}
.mediana{
    font-family: lato-medium !important;
    font-style: normal !important;
}
.mediana2{
    font-family: lato-medium !important;
}
.separa{
    letter-spacing: 1.5px;
}
.dropdown-container2 {
   padding-right: 20px;
   display: none; 
}
.dropdown-containersub
{
   width: 230px;
   position: absolute;
    left:245px; 
	top:-3px;
   display: none;
}
.dropdown-containersub2
{
    --border: solid;
    --border-color: white;
    width: 100%;
    text-align: left;
    padding-left: 44%;
  display: none;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}