/* # Header, Main Menu
================================ */

header{
  width: 100%;
  position: fixed;
  z-index: 10;
  
}

.navbar {
	opacity: 1;
	margin-bottom: 0;
	background-color: rgba(255,255,255,0.9);
	transition: all 0.2s ease-out;
  	display: flex;
  	backdrop-filter: blur(6px) brightness(1.5);
    font-family: 'Montserrat',sans-serif;
    font-weight: 600;
}

#navbar{
  float: right;
  display: flex;
  /* margin-top: 30px; */
  transition: 0.3s;
}

#main-navbar{
    height: 126px;
    transition: 0.3s;
}

/* Aqui es donde se hace la animación del menu y saca el nav deslizable y cambian las barritas y así */

#menu-chk:checked ~ #navbar{
	transform: translate(0%) !important;
} 

#menu-chk:checked ~ label{
	/* right: 105px; */
	transition: 0.3s;
} 

#menu-chk:checked ~ label div:nth-child(1){
	transform: rotate(45deg) translateY(10px) translateX(2px);
	transition: 0.3s;
} 

#menu-chk:checked ~ label div:nth-child(2){
	display: none;
	/* width: 0px;
	transition: 0.3s; */
} 

#menu-chk:checked ~ label div:nth-child(3){
	transform: rotate(-45deg) translateY(-8px);
	transition: 0.3s;
} 

@media (max-width:900px) {

	#navbar{ 
		position: fixed;
		display: flex;
		flex-flow: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		transform: translateX(120%);
		transition: 250ms ease-in-out;
		width: 100%;
		height: 100vh;
		top: 0;
		right: 0;
		font-size: 14pt;
		margin: auto;
		margin-right: auto;
		background-color: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(1px);
		z-index: 10;
	}

	#navbar a{
		width: 100%;
		text-align: center;
		margin-top: 15px;
		margin-bottom: 15px;
        justify-content: center;
        font-size: 1.4em !important;
	}
	
}


.navbar-header img{
  width: 280px;
  object-fit: contain;
  transition: 0.3s;
}

.navbar-container {
	position: relative;
}

#navbar a {
	font-size: 18px;
	text-transform: uppercase;
	color: var(--text);
	transition: all 0.2s ease-out;
  	position: relative;
  	text-decoration: none;
    display: flex;
	cursor: pointer;
}


/*Boton Sandwich*/
header label {
    width: 30px;
    height: 28px;
    display: flex;
    flex-flow: wrap;
    justify-items: center;
    position: absolute;
    top: 40px;
    right: 35px;
    transform: scale(1.4);
    transition: 0.3s;
    z-index: 11;
    cursor: pointer;
	user-select: none;
	display: none;
}

header label div {
    width: 30px;
    height: 1px;
    transition: 0.4s;
    background-color: #444444;
}

@media (max-width: 800px) {
    header label {
        display: flex;
    }
}

@media (max-width: 900px) {
    header label {
        top: 30px;
        right: 40px;
    }
	.navbar-header img{
		width: 200px;
		margin-left: 15px;
        margin-top: 10px;
	}
}

.navbar-scroll {
	opacity: 1;
}


@media (min-width: 768px) {
	#navbar {
		height: 100px;
	}

	#navbar > a {
		padding: 0;
		margin-top: 20px;
		margin-left: 50px;
		line-height: 70px;
	}

	/* Navbar when scrolled */

	.navbar-scroll {
		height: 70px;
		background-color: rgba(255,255,255,1);
		transition: 0.3s;
	}

	.navbar-scroll > a {
		opacity: 1;
		padding: 0;
		margin-top: 0;
	}
}

/* # Hover Link Effect
================================ */
@media (min-width: 768px) {
	#navbar > a:not(.header-icon)::after {
		position: absolute;
		margin-top: 50px;
    	/* margin-left: -100%; */
		width: 100%;
		height: 1px;
		background: #2e1c05;
		content: "";
		opacity: 0;
		transition: height 0.3s, opacity 0.3s, transform 0.3s;
		transform: translateY(-10px);
	}

	#navbar > a:hover::after,
	#navbar > a:focus::after {
		height: 2px;
		opacity: 1;
		transform: translateY(0px);
	}

    #navbar > a.header-icon:hover{
        filter: brightness(3);
    }
}

.header-icon{
    margin-top: 8px !important;
}