ul {
	margin: 0;
}

div#header {
	display: flex;
	justify-content: center;
	div#top {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: $header-height;
	}

	div#toplinks a {
		@extend %button;
		border-radius: 20px 10px 10px 0;
		margin-top: 0.5rem;
		padding: 0.3rem 0.4rem;
		margin-right: 0.5rem;

		@media ($min-desktop-viewport) {
			margin-top: 1rem;
			padding: 0.5rem 0.8rem;
			&::before {
				font-family: FontAwesome;
				margin-right: 0.5rem;
			}

			&.login-link::before, &.account-link::before {
				content: '\f007';
			}

			&.registration::before {
				content: '\f234';
			}

			&.logout::before {
				content: '\f08b';
			}
		}
	}
}

div.gru-nav ul li a {
	font-size: $nav-font-size;
	text-transform: uppercase;
	font-weight: normal;
}

@media ($min-desktop-viewport) {
	.site-nav {
		position: sticky;
		top: $nav-height;
		margin-bottom: -$nav-height;
		z-index: 200;

		.gru-nav-wrapper {
			position: relative;
			top: -$nav-height;
			
			.gru-nav > ul {
				display: flex;

				> li a {
					display: flex;
					border-right: 1px solid white;
					height: $nav-height;
					padding: 0 20px;
					> span {
						margin: auto;
					}
				}
			}
		}
	}
}

div#main-content-wrapper {
	margin-top: 2rem;
}

div#footer{
	display:flex;
	flex-direction: row;
	a {
		text-decoration: underline;
	}
	@media ($min-desktop-viewport) {
		&::before {
			margin: 1rem 2rem;
			content: url(/assets/footer:logo);
		}
	}
}

%cell-links-list {
	li > a {
		border-left: 0 solid $primary-color;
		transition: border-width 200ms;
		&:hover {
			border-left-width: 5px;
		}
	}
	ul li a {
		text-decoration: underline;
	}
}

%button {
   box-shadow: none; 
   transition: none;
   &:hover {
		box-shadow: none;
   }
}

%cancel-button {
	background: $orange;
}

%title {
	a {
		color: white;
	}
}

.form-content--title {
	background: transparent;
	border-bottom: 2px solid $primary-color;
	color: $gray;
	font-size: $fz-1;
}

div.cell.has-asset-picture {
	position: relative;
	z-index: 0;
	h2:first-child {
		padding-left: 4rem;
	}
	picture {
		width: 4rem;
		height: 4rem;
		position: absolute;
		top: 0;
	}
}

@media ($max-mobile-viewport) {
	body.has-header-background .site-header {
		background-image: none;
	}

	div#header div#top {
		height:auto;
		padding-top: 50px;
	}
}
