@charset "utf-8";
/* CSS Document */

/* SCROLL HOR MENU */

#navbar {
	background-color: #333; /* Black background color */
	position: fixed; /* Make it stick/fixed */
	top: 0; /* Stay on top */
	width: 100%; /* Full width */
	transition: top 0.3s; /* Transition effect when sliding down (and up) */
  }
  
  /* Style the navbar links */
  #navbar a {
	float: left;
	display: block;
	color: white;
	text-align: center;
	padding: 15px;
	text-decoration: none;
  }
  
  #navbar a:hover {
	background-color: #ddd;
	color: black;
  }

div.scrollmenu {
	z-index: 9900;
  background-color: #333;
  background-color: grey;
  background-color: #519fb3;
  background-color: #2E6A79;
  background-color: #282828EE;
  /*background-color: rgb(97, 118, 77);*/
  border-top: dashed 1px lightgray;
  overflow: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  /*position: relative;*/
  /*padding-left: 0.5rem;
  padding-right: 0.5rem;*/
  margin-left: 2rem;
  margin-right: 2rem;

}

.overlay-layer {
	position: absolute;
	width: 98vw;
	margin: auto;
	background-color: rgba(227, 255, 200, 0.444);
}


.left-arrow {
	padding-top: 0.65rem;
	z-index: 9901;
	position: absolute;
	width: 1rem;
	height: 2rem;
	font-size: 1.4rem;;
	color: white;

	position: absolute;

 left: 5px;
}

.right-arrow {
	padding-top: 0.65rem;
	z-index: 9901;
	width: 1rem;
	height: 2rem;
	font-size: 1.4rem;;
	color: white;

	position: absolute;

	right: 5px;

}

div.scrollmenu::-webkit-scrollbar {
	display: none;
  }

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

.text-field-button {
	background-color: #282828EE;
	border-top: solid 1px white;
	overflow: auto;
	white-space: nowrap;
	color: white;
	text-align: center;

	text-decoration: none;
	font-size: 1rem;
}


.menu-top {
	z-index: 9900;
	/*
	background: #FFFFFFEE;
	background: #282828EE;
	background: #282828;
	*/
	/*box-shadow: 3px 3px 15px 3px #00000050;*/
	background: #282828;
	width: 100%;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	/*padding-bottom: 12px;
	padding-top: 12px;*/
	overflow: hidden;

	top: 0; /* Stay on top */
	width: 100%; /* Full width */
	transition: top 0.3s; /* Transition effect when sliding down (and up) */

}

.menu-visualize {
	position:static;
	overflow: hidden;
}

.control {
	background-color: #8b0000FF;
	background-color: #133548FF;
	background-color: #8b0000FF;
	/*background-color: rgb(66, 128, 3);*/
}

.buttonactive {
    background-color: #519fb3;
	background-color: #2E6A79;
    color: white;
	/*
    background-image: linear-gradient(
		#265C69,
		#192932
 );*/
 
}

ul {
	list-style-type: none;
	display: flex;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.control ul {
	/*display: block;*/
}

li {
	float: left;
	width: 20%;
	width: auto;
	text-align: center;
	margin: auto;
}

.menu-top ul li {
	white-space: nowrap;
}

li a,
.dropbtn {

    display: inline-block;
	color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {

	background-color: #2E6A79;
	background-color: #519fb3;
	background-color: #777;
	color: white;
}

li.dropdown {
	display: block;
}

/* Móviles */
@media screen and (max-width : 600px) {
	.menu-top {
		text-align: center;
	}

	.principal-menu {
		text-align: center;
	}

	ul {
		display:inline-block;
		text-align: center;
		margin-bottom: -4px;
	}

	li {
		display: inline-block;
	}

}