/* main heading styling */

*:focus {
	outline-color: invert;
	outline-style: solid;
	outline-offset: -2px;
	outline-width: thin;
}

body > h1 {
	position: absolute;
	top: 0;
	font-size: 1rem;
	text-align: center;
	max-height: var(--header-height);
	max-width: var(--body-max-width);
	overflow: hidden;
}

@media screen and (max-width: 70rem) {
	body > h1 {
		display: none;
	}
}


/* accessible skip link */
.skiplink {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1em;
	background-color: black;
	color: white;
	opacity: 0;
}
.skiplink:focus {
	left: 50%;
	transform: translateX(-50%);
	opacity: 1;
}









/* --- */

#header {
	padding: 0;
	z-index: 1234;
}

#header:after {
	position: absolute;
	top: 6rem;
	content: "";
	border-bottom: 1px solid #ddd;
	width: calc(100% - 2 * var(--screen-margin) );
	display: block;
	margin: 0 var(--screen-margin);
	transition: .2s top ease-in-out;
}
.sticky #header:after {
	top: 4rem;
}


#header .header {
	grid-column: screen;
	display: grid;
	/*grid-template-columns: 1fr 4fr;*/
	grid-template-rows:    6rem;
	height: 6rem;
	width: 100%;
	transition: .2s all ease-in-out;
}

@media screen and (max-width: 78rem) {
	#header .header {
		grid-column: screen-start/screen-end;
		grid-template-columns: 1fr 4rem;
		grid-template-rows   : 4rem;
		height: 4rem;
	}
}

.sticky #header {
	box-shadow: 0 0 32px rgba(0,0,0,.067);
}


/* logo */

#logo {
	background-color: var(--head-bgc);
	grid-column: screen-start / page-start;
	z-index: 123;
	height: 6rem;
	transition : all .2s ease-in-out;
}

#logo > a {
	position   : relative;
	top        : 0;
	left       : calc( var(--screen-margin) + 0.25rem);
	display    : inline-block;
	background: transparent url(../img/gmsvision-architekturvisualisierung-logo.svg) center center / 100% auto no-repeat;
	border     : none;
	width      : 12rem;
	height     : 6rem;
	/*text-indent: -1000%; */
	overflow   : hidden;
	transition : all .2s ease-in-out;
	translate: -.125rem .1rem; /* adjust here for visual pairing with the menu button */
}


@media screen and (min-width: 104.001rem) {
	.sticky #logo {
		height: 4rem;
	}
	.sticky #logo a {
		height: 4rem;
		width: 8rem;
		top   : 0;
	}
	.sticky #header .center {
		height: 4rem;
	}
	.sticky #menu {
		height: 4rem;
		margin-top: 0;
	}
	.sticky #nav {
	}
}
@media screen and (max-width: 104rem) {
	#logo {
		width: 100%;
		height: 4rem;
	}
	#logo a {
		top: .5rem;
		height: 3rem;
		translate: 0;
		background-position: center left;
		background-size: auto 1.75rem;
		line-height: 2.25rem;
	}
	#mainMenuOpen + #nav {
		justify-content: space-around;
	}
}

@media screen and (max-width: 104rem) {
	#logo {
	}
	#menu #nav .primary {
		transform: translateX(0);
	}
	#menu #nav .secondary {
		transform: translateX(0);
	}

}

#menu {
  background-color : var(--menu-bgc);
  height           : 6rem;
  width            : 100%;
  grid-column: page-start / screen-end;
  	transition: .2s all ease-in-out;

}
@media screen and (max-width: 104rem) {
	#menu {
		height: 4rem;
	}
	menu a {
		text-align: center;
	}
}



/* header nav layout */

#nav {
	--nav-gap: .25rem;
	display: grid;
	height   : 100%;
	grid-template-columns:
		[screen-start screen-inset-start page-start]
					var(--page-margin)
					[page-inset-start]
						minmax( var(--page-inset-left-min), var(--page-inset-left-max) )

						[body-outset-start]
							var(--body-outset)
							[body-start]
								var(--body-margin)
								[body-content-start]
									minmax(
										calc( var(--body-content-min) / 2 )
										,
										calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
									)
									[center-line]
									minmax(
										calc( var(--body-content-min) / 2 )
										,
										calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
									)
								[body-content-end]
							var(--body-margin)
							[body-end]
						var(--body-outset)
						[body-outset-end]

						minmax( var(--page-inset-right-min), var(--page-inset-right-max) )
					[page-inset-end]
					var(--page-margin)
				[page-end]
				var(--screen-inset-width)
			[screen-inset-end]
			var(--screen-margin)
		[screen-end];
	;
	padding: 0;
	transition: .2s all ease-in-out;

}
@media screen and (max-width: 70rem) {
	#nav {
		display: none;
	}
}

#nav menu a {
	font-weight: 300;
	font-size: 1.25rem;
}

#nav .primary {
	grid-column: page-start / center-line;
	align-content: center;
	/* margin-top: 1.5rem; */
	/* background: linear-gradient(to bottom,#888 0%,#888 2px,#fff 2px,#fff 100%) */
	width: 100%;
	transform: translateX(-.5rem);
}
#nav menu li > a em {
	display: none;
}

#nav .secondary {
	grid-column: center-line / page-end;
	justify-self: end;
	align-content: center;
	/* margin-right: 2.5rem; */
	/* background: linear-gradient(to bottom,#888 0%,#888 2px,#fff 2px,#fff 100%) */
	transform: translateX(.5rem);
}

#nav .utilities {
	grid-column: page-end / screen-inset-end;
	justify-self: end;
	align-content: center;
	list-style: none;
}
.sticky #nav .utilities {
}
#nav .utilities li {
	display: inline;
}

#nav .utilities li a {
	display: inline-block;
	padding: .25rem;
	text-decoration: none;
	font-size: 0.8rem;
}
#nav .utilities li a:hover {
	color: #009de4;
}


@media (max-width:112rem) {
	#nav .secondary {
		transform: translateX(0);
	}
	#nav .utilities li {
		line-height: .9;
	}
}





/* above header message area */
@media (min-width:60rem) {
	body > aside {
		z-index: 23;
	}
}



#footer {
	bottom : 0;
	padding: 0;
	background-color: var(--foot-bgc);
	color           : var(--foot-col);
}

#footer:before {
	content: "";
	border-top: 1px solid #c8c8c8;
	width: calc(100% - 2 * var(--screen-margin) );
	display: block;
	margin: 0 var(--screen-margin);
}

#footer .center {
	grid-column: screen;
	width: 100%;
	/* max-width: 1600px; */
	margin: 0 auto;
}

/* footer menus */

#footer .menus {
	font-size: 1rem;
	display: flex;
	justify-content: space-between;

}

#footer .menus .center {
}

#footer .menus .center > :nth-child(1){
	text-align: left;
}
#footer .menus .center > :nth-child(2){
	text-align: center;
}
#footer .menus .center > :nth-child(3){
	text-align: right;
}


#footer .menus h2,
#footer .menus h3 {
	/* margin-block-end: .5rem; */
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 300;
	color: inherit;
}
#footer .menus h2 {
	font-size: var(--step-1);
}
#footer .menus p + p {
	margin-block-start:  var(--space-3xs);
}

#footer .menus ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer .menus li {
	margin: 0;
}

#footer .menus a {
	text-decoration: none;
	color: inherit;
}
#footer .menus a:hover {
	color: #fff;
	color: var(--footer-menus-a-hover);
}

#footer .contact {
}

#footer .contact h5 {
	margin-block-start: var(--space-3xs);
	font-size: 1rem;
}

@media screen and (max-width: 40rem) {
	#footer .menus .center > div:empty {
		display: none;
	}
	#footer address span[itemprop="address"] {
		display: none;
	}
	#footer .menus .center > div:nth-child(1),
	#footer .menus .center > div:nth-child(2),
	#footer .menus .center > div:nth-child(3) {
		text-align: center;
	}

	#footer .contact {
		flex-flow: column;
		gap: 2rem
	}
}




/* social icons */

#social:before {
	content: "";
	border-top: 2px solid #e7e7e7;
	display: block;
	margin: 0 auto var(--space-l) ;
	width: 4rem;
}

#social {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	/*padding: 2em 0;*/
	margin: 6rem 0;
}

#social.logolist ul {
	display: flex;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
#social.logolist li {
	display: inline-block;
	padding: 0 .01rem;
	margin: 0;
}
#social.logolist li a {
	--logo-size: 1.5rem;
	display: block;
	width: var(--logo-size);
	height: var(--logo-size);
	line-height: var(--logo-size);
	opacity: 0.66;
	transition: all 0.1s ease-out;
	overflow: hidden;
	text-indent: 4rem;
	background-repeat: no-repeat;
	background-position: center center;
}
#social.logolist li a:hover {
	opacity: 1;
}

/* icons from here: https://simpleicons.org/ */
#social a[href*="facebook"]  { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook icon</title><path style="fill:%23888888;" d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z"/></svg>'); }
#social a[href*="twitter"]   { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter icon</title><path style="fill:%23888888;"     d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>'); }
#social a[href*="instagram"] { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram icon</title><path style="fill:%23888888;" d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>'); }
#social a[href*="vimeo"]     { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Vimeo icon</title><path style="fill:%23888888;" d="M23.9765 6.4168c-.105 2.338-1.739 5.5429-4.894 9.6088-3.2679 4.247-6.0258 6.3699-8.2898 6.3699-1.409 0-2.578-1.294-3.553-3.881l-1.9179-7.1138c-.719-2.584-1.488-3.878-2.312-3.878-.179 0-.806.378-1.8809 1.132l-1.129-1.457a315.06 315.06 0 003.501-3.1279c1.579-1.368 2.765-2.085 3.5539-2.159 1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.5069.5389 2.45 1.1309 3.674 1.7759 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.8679 3.434-5.7568 6.7619-5.6368 2.4729.06 3.6279 1.664 3.4929 4.7969z"/></svg>'); }
#social a[href*="flickr"]    { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Flickr icon</title><path style="fill:%23888888;" d="M5.334 6.666C2.3884 6.666 0 9.055 0 12c0 2.9456 2.3884 5.334 5.334 5.334 2.9456 0 5.332-2.3884 5.332-5.334 0-2.945-2.3864-5.334-5.332-5.334zm13.332 0c-2.9456 0-5.332 2.389-5.332 5.334 0 2.9456 2.3864 5.334 5.332 5.334C21.6116 17.334 24 14.9456 24 12c0-2.945-2.3884-5.334-5.334-5.334Z"/></svg>'); }
#social a[href*="pinterest"] { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Pinterest icon</title><path style="fill:%23888888;" d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg>'); }
#social a[href*="linkedin"]  { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn icon</title><path style="fill:%23888888;" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>'); }
#social a[href*="youtube"]   { height: var(--logo-size); background-size: var(--logo-size) auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>YouTube icon</title><path style="fill:%23888888;" d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/></svg>'); }



@media screen and (max-width: 70rem) {
	#social.logolist ul {
		gap: .9rem;
	}
	#social.logolist li a {
		margin: 0 auto !important;
		transform: scale(0.75);
	}
}



#back-to-top {
	position: fixed;
	bottom: 0;
	right: 0;
	grid-column: screen-inset-start / screen-inset-end;
	padding: var(--screen-margin);
	font-size: .925rem;
	color: inherit;
	text-decoration: none;
	text-align: right;
	outline: 0;
	opacity: .5;

	&:after {
		content: "↑";
		padding: 0 0 0 .25rem;
	}

	&:hover {
		opacity: .75;
	}
}


/* footer bottom */

#footer .bottom {
	font-size       : 1rem;
	font-weight     : var(--font-weight-regular);
	padding         : 1.5rem 0 2rem;
	background-color: var(--footer-bottom-bgc);
	color           : var(--footer-bottom-col);
	/*text-shadow     : 0 0 1px #0008;*/
	position        : relative;
	/*top: 2.5rem;*/
}
#footer .bottom a {
	text-decoration: none;
	color: inherit;
}
#footer .bottom a:hover {
	color: var(--footer-menus-a-hover);
}

#footer .bottom .center {
	display: grid;
	grid-template-columns:
		[screen-start]
			var(--screen-margin)
			[screen-inset-start]
				var(--screen-inset-width)
				[page-start]
					var(--page-margin)
					[page-inset-start]
						minmax( var(--page-inset-left-min), var(--page-inset-left-max) )

						[body-outset-start]
							var(--body-outset)
							[body-start]
								var(--body-margin)
								[body-content-start]
									minmax(
										calc( var(--body-content-min) / 2 )
										,
										calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
									)
									[center-line]
									minmax(
										calc( var(--body-content-min) / 2 )
										,
										calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
									)
								[body-content-end]
							var(--body-margin)
							[body-end]
						var(--body-outset)
						[body-outset-end]

						minmax( var(--page-inset-right-min), var(--page-inset-right-max) )
					[page-inset-end]
					var(--page-margin)
				[page-end]
				var(--screen-inset-width)
			[screen-inset-end]
			var(--screen-margin)
		[screen-end];
	;
}

#footer .menus {
	grid-column: page-start / page-end;
	grid-row: 1;
}

#footer .copy {
	grid-column: screen-inset-start / page-start;
	justify-self: start;
	grid-row: 1;
}
#footer .legal {
	grid-column: page-end / screen-inset-end;
	justify-self: end;
	grid-row: 1;
}


@media screen and (max-width: 96rem) {
	#footer .bottom .center {
		grid-template-columns: unset;
		padding: 0 var(--screen-margin);
	}
	#footer .copy {
		grid-column: 1;
	}
	#footer .menus {
		grid-column: 2;
	}
	#footer .legal {
		grid-column: 3;
	}
}

@media screen and (max-width: 70rem) {

	#footer .menus {
		grid-column: unset;
		grid-row: 1;
		flex-flow: column;
	}

	#footer .menus div + div {
		margin-block-start: var(--space-s);
	}

	#footer .copy {
		grid-column: unset;
		justify-self: start;
		grid-row: 3;
	}

	#footer .legal {
		grid-column: unset;
		justify-self: start;
		grid-row: 2;
	}

	#footer .bottom {
		padding: 2rem var(--screen-margin);
		/*font-size: .9rem;*/
		/*font-weight: 500;*/
	}
	#footer .bottom ul {
		gap: .5rem;
	}
	#footer .bottom .center {
		padding: 0;
		grid-template-columns: 1fr;
		grid-template-areas:
			"legal"
			"copy";
	}
	#footer .legal,
	#footer .copy {
		margin-block-start: var(--space-s);
		justify-self: left;
	}
	#footer .copy {
		margin-block-start: var(--space-s);
		display: inline;
	}
	#footer .social {
		margin-block: 2rem;
	}
	#footer .bottom {
		font-size: 1rem;
	}
}


#footer address {
	display: inline;
	font-style: normal;
}
#footer address > * {
	display: inline-flex;
	margin-inline-start: .5rem;
	gap: .5rem;
}
#footer address a {
	display: inline;
}

#footer .bottom ul {
	list-style: none;
}
#footer .bottom li {
	margin: 0;
}
#footer .bottom li a {
	display: inline-block;
	transition: color .1s ease-in-out;
}