/* @group Site Nav
------------------------------------ */

.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transition: all .7s ease;
	z-index: 999;
}
.site-nav * {
	transition: all .7s ease;
}
.site-nav .row {
	max-width: 92.6rem;
}
.site-nav .row .col-12-8 {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
body:is(.error404, .privacy-policy) .site-nav .col-12-8 {
	justify-content: center;
}
/* BTTNS */
.site-nav .anchor-bttn {
	position: relative;
	color: var(--color-neutros-white);
	text-transform: uppercase;
	font-size: 10px;
	line-height: 1.6em;
	letter-spacing: .08em;
}
.site-nav .anchor-bttn.hide {
	opacity: 0;
	pointer-events: none;
}
.site-nav .anchor-bttn i {
	position: absolute;
	left: 50%;
	translate: -50% 0;
	top: calc(100% + .6rem);
	font-size: 1.4rem;
	color: inherit;
	transition: opacity .7s;
}
/* LOGO */
.site-nav .logo {
	padding-block: 1.75rem;
}
.site-nav .logo svg {
	width: 13rem;
	height: auto;
}

/* SCROLL */

body:is(.error404, .privacy-policy) .site-nav,
.pinedHeader .site-nav {
	background-color: var(--color-neutros-white);
}
body:is(.error404, .privacy-policy) .site-nav .anchor-bttn,
.pinedHeader .site-nav .anchor-bttn  {
	color: var(--color-verdes-500, #717859);
}
body:is(.error404, .privacy-policy) .site-nav .logo .inkaterra path,
.pinedHeader .site-nav .logo .inkaterra path {
	fill: #5A6B41;
}
body:is(.error404, .privacy-policy) .site-nav .logo .outpost path,
body:is(.error404, .privacy-policy) .site-nav .logo .since path,
.pinedHeader .site-nav .logo .outpost path,
.pinedHeader .site-nav .logo .since path {
	fill: #31251C;
}
.pinedHeader.scrollhidden .site-nav {
	top: -100%;
}


@media only screen 
and (min-width: 961px) {
	.site-nav .row .col-12-8 {
		align-items: flex-start;
	}
	/* LOGO */
	.site-nav .logo {
		padding-block: 1.7rem 1.3rem;;
	}
	.site-nav .logo svg {
		width: 21.5rem;
	}
	/* BUTTONS */
	.site-nav .anchor-bttn {
		padding-top: 3.6rem;
	}
	.pinedHeader .site-nav .anchor-bttn i {
		top: calc(100% + .8rem);
		opacity: 0;
	}
	/* HOVER */
	.pinedHeader .site-nav .anchor-bttn:hover i {
		opacity: 1;
	}
}
@media only screen 
and (min-width: 0) 
and (max-width: 960px) {
	
}

/* @end */