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

#menu_bar{
	display: none;
}

header label {
	float: right;
	margin-top: 10px;
	margin-right: 5%;
}


.contenedor{
	display: table;
}

.menu_btn{
	position: absolute;
	width: 100%;
	height: 100vh;
	background-color: #FFFFFF;
	top:0px;
	left: 0;
	transition: all 0s;
	transform: translateX(-100%);
	font-family:   montserratmedium;
	font-size: 1.5em;
	text-align: center;
	padding-top: 100px;
	padding-bottom: 2rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.menu_btn a{
	color: #FFFFFF;
	display: block;
	height: 80px;
	text-decoration: none;
	padding: 15px;
	width: min(calc(100% - 3rem), 20rem);
	max-width: 20rem;
	margin-left: auto;
	margin-right: auto;	
	 -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
	
}











.botones_menu{
  
  padding: 0px 10px;
  margin-top: 1px;
  position: relative;
}

.botones_menu{
  overflow: hidden;
	border-bottom: 0px solid blue;
}

.botones_menu:hover{
	background-color: rgba(0,169,189,0.0);
}

.botones_menu:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: rgba(0,169,189,1.00);
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.botones_menu:hover:after{
  transform: translateX(-50%) scaleX(1);
}

@media (max-width:1023px){
	.menu_btn{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: clamp(1.5rem, 4vh, 2.75rem);
		padding-top: clamp(5.5rem, 11vh, 6.5rem);
		box-sizing: border-box;
	}

	.menu_btn a{
		height: auto;
		min-height: 0;
		margin-top: 0;
		margin-bottom: 0;
		padding: 0 15px 0.625rem;
		flex: 0 0 auto;
	}

	.menu_btn .botones_menu{
		margin-top: 0;
	}
}

#menu_bar:checked ~ .menu_btn {
	transform: translateX(0%)
}











@media (min-width:1024px){
	.menu_btn{
		position: static;
		width: auto;
		height: auto;
		transform: translateX(0%);
		float: right;
		display: flex;
		gap: clamp(1rem, 1.5vw, 1.5rem);
		padding-left: 8px;
		padding-right: 8px;
		background: rgba(255,255,255,0);
		margin-top: -55px;
		margin-right: 5%;
		transition: all 0s;
		
	}
	
	header label {
	display: none;
    }
	
	.menu_btn a{	
		border: none;
		width: max-content;
		max-width: none;
		margin: 0;
		height: 50px;
		padding: 15px 0;
		flex: 0 0 auto;
     }

	.menu_btn .botones_menu{
		padding-left: 0;
		padding-right: 0;
	}

	.menu_btn .botones_menu:focus-visible{
		outline: 2px solid #00a9bd;
		outline-offset: 4px;
	}
	
	.menu_btn{
	padding-top: 0px;
	font-size: 0.8em;
}


.botones_menu:hover{
	background-color: transparent;
}
	

	


}

























a{
  text-decoration: none;
}

#hamburger-1{
	position: absolute;
	z-index: 200;
	top: clamp(1rem, 2.5vw, 1.125rem);
	right: clamp(1rem, 5vw, 3.125rem);
	width: clamp(2.5rem, 10vw, 3.125rem);
	height: clamp(2.5rem, 10vw, 2.5625rem);
}

#lineauno{
	background-color: #FFFFFF;
}
#lineados{
	background-color: #FFFFFF;
}
#lineatres{
	background-color: #FFFFFF;
}

.hamburger .line{
  width: clamp(2rem, 8vw, 2.5rem);
  height: 5px;
  display: block;
  margin: 6px 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{
  cursor: pointer;
}


#hamburger-1.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger-1.is-active .line:nth-child(1){
  -webkit-transform: translateY(11px) rotate(45deg);
  -ms-transform: translateY(11px) rotate(45deg);
  -o-transform: translateY(11px) rotate(45deg);
  transform: translateY(11px) rotate(45deg);
}

#hamburger-1.is-active .line:nth-child(3){
  -webkit-transform: translateY(-11px) rotate(-45deg);
  -ms-transform: translateY(-11px) rotate(-45deg);
  -o-transform: translateY(-11px) rotate(-45deg);
  transform: translateY(-11px) rotate(-45deg);
}
