/* TOPBAR  ############################################################################################################### */
.topBar {
	position: absolute;
	top: 0;
	width: 100%; height: 85px;
	display: grid;
	grid-template-columns: 1fr 11fr 3fr 1fr;
}

@media(max-width: 1050px) {
	.topBar {
		grid-template-columns: var(--mobileGutter) 1fr var(--mobileGutter);
	}
}


/* MENU  ############################################################################################################### */

nav {
	grid-column: 2/4;
	grid-row: 1/2;
	align-self: start;
	z-index: 4;
	height: 100%;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;	
}


nav a {
	height: 100%;  /* 75px */
	display: flex; flex-direction: column; align-items: center; justify-content: flex-end; 	/* выравнивает текст внутри тега а */
	padding: 5px 20px;
	font-size: 0.8rem;
	font-weight: 400;
	color: white;
	letter-spacing: 1px;
	white-space: nowrap;	
	background-color: rgba(255, 255, 255, 0);
	transition: background-color 300ms ease-out; /* для ховера */
}

nav a.active {
	color: black;
	background-color: rgba(255, 255, 255, .5);
}


nav a:not(.active):hover {
	color: var(--gold);
	background-color: rgba(255, 255, 255, .25);
}


@media(max-width: 1050px) {
	nav {
		display: block;
		width: 200px;
		height: 100vh;
		padding-top: 90px;
		position: fixed;
		top: 0;	left: 0;
		background-color: rgba(0, 0, 0, .9);
		transform: translateX(-200px);
		transition: transform 300ms ease-out;
	}

	nav.active {
		transform: translateX(0px);
	}

	nav a {
		height: 40px;
		flex-direction: row;
		justify-content: flex-start;
		padding-left: 30px;
	}
}





/* CALL TO ACTION  ############################################################################################################### */

.callToAction {
	grid-column: 3/4;
	grid-row: 1/2;	
	z-index: 4;
	place-self: end end;
	text-align: right;
}

.callToAction a {
	font-size: 1rem; color: white;
}

.callToAction a:hover {
	color: var(--gold);
	text-decoration: underline;
}

.callToAction i {
	margin-right: .5rem;
}

@media(max-width: 1050px) {
	.callToAction {
		grid-column: 2/3;
		grid-row: 1/2;
	}
}