@charset "UTF-8";

header {
	-webkit-backface-visibility: hidden;
	transform: translateY(0);
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
}

header.slide-down {
	position: fixed;
	background-color: var(--yellow);
	border-bottom: 1px solid var(--yellow);
	transition: transform .6s cubic-bezier(.77,0,.175,1);
	-webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.26);
	-moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.26);
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.26);
	transform: translateY(100%);
}

header .nav {
	background-color: var(--yellow);
}

header .nav a {
	font-family: Montserrat,sans-serif;
	text-transform: uppercase;
	color: var(--black);
	padding: .5rem 1rem;
}

header .nav-link {
	letter-spacing: .1em;
}

header .nav-link:hover,
header .nav-link:focus,
header .nav-link:active,
header .nav-link.active {
	text-decoration: underline;
}

header .nav-link.side-panel-open:hover,
header .nav-link.side-panel-open:focus,
header .nav-link.side-panel-open:active {
	text-decoration: none;
}

header .nav-link.dropdown-toggle:after {
	display: none;
}

header .dropdown-menu {
	background-color: var(--yellow);
	border: 1px solid var(--yellow);
	border-radius: 0;
	-webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.26);
	-moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.26);
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.26);
}

header .dropdown-item:hover,
header .dropdown-item:focus,
header .dropdown-item:active,
header .dropdown-item.active {
	color: var(--white);
	background-color: transparent;
}

header .navbar-mobile .navbar {
	background-color: var(--yellow);
}

header .navbar-mobile .navbar-brand img {
	width: 145px;
}

header .navbar-mobile .nav-link {
	line-height: calc(40px - 1rem);
}

/* XS */
@media only screen and (min-width : 0px) {
	
	header {
		position: fixed
	}
}

/* SM (landscape phones, 576px and up) */
@media (min-width: 480px) { 
	
	header {
		position: fixed
	}
	
}

/* MD (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* LG (desktops, 992px and up) */
@media (min-width: 992px) {
	
	header {
		position: absolute;
	}
		
	header .page-logotype {
		height: 30px;
	}

	header .nav-link {
		letter-spacing: .1em;
		line-height: calc(30px - 1rem);
	}
	
	header .nav a {
		font-size: 11px;
	}
}

/* XL (large desktops, 1200px and up) */
@media (min-width: 1200px) {
		
	header .page-logotype {
		height: 50px;
	}

	header .nav-link {
		letter-spacing: .1em;
		line-height: calc(50px - 1rem);
	}
	
	header .nav a {
		font-size: 12px;
	}

}