body > header {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 1000;

	display: flex;
	align-items: center;
	justify-content: center;

	background-color: white;
	border-bottom: 1px solid #e7e7e7;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
	color: #4a4a4a;
	font-family: "Open Sans", sans-serif;

	> nav {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		justify-content: flex-end;

		position: relative;
		width: 100%;

		@media screen and (max-width: 1023px) {
			padding: 0 15px 0 5px;
		}

		@media screen and (min-width: 1024px) {
			max-width: 960px;
			min-height: 77px;
		}

		@media screen and (min-width: 1216px) {
			max-width: 1152px;
		}

		@media screen and (min-width: 1270px) {
			max-width: 1206px;
		}

		.logo {
			> img {
				max-height: 56px;
			}
		}

		a.button {
			-moz-transition: background-color 200ms ease;
			-webkit-transition: background-color 200ms ease;
			background-color: #009ddf;
			border-radius: 4px;
			color: #fff;
			display: inline-block;
			font-size: 14px;
			font-weight: 700;
			letter-spacing: 0;
			margin: 7px 7px;
			padding: 8px 11px;
			text-decoration: none;
			transition:
				background-color 200ms ease,
				box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
			width: auto;
			z-index: 3;

			&:hover {
				background-color: #0094d2;
				border-color: transparent;
				transform: none;
			}
		}

		.menu {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			@media screen and (max-width: 1024px) {
				.hide-small {
					display: none;
				}
			}

			a {
				align-items: center;
				color: #4a4a4a;
				display: flex;
				font-size: 17px;
				line-height: 1.5;
				margin: 0 16px;
				padding: 12px 0;
				position: relative;
				text-decoration: none;
				transition: color 0.3s;

				&:hover,
				&:focus {
					background-color: transparent;
					color: #009ddf;
				}

				&.about {
					background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjNGE0YTRhIiBkPSJNNTA0IDI1NmMwIDEzNi45OTctMTExLjA0MyAyNDgtMjQ4IDI0OFM4IDM5Mi45OTcgOCAyNTZDOCAxMTkuMDgzIDExOS4wNDMgOCAyNTYgOHMyNDggMTExLjA4MyAyNDggMjQ4ek0yNjIuNjU1IDkwYy01NC40OTcgMC04OS4yNTUgMjIuOTU3LTExNi41NDkgNjMuNzU4LTMuNTM2IDUuMjg2LTIuMzUzIDEyLjQxNSAyLjcxNSAxNi4yNThsMzQuNjk5IDI2LjMxYzUuMjA1IDMuOTQ3IDEyLjYyMSAzLjAwOCAxNi42NjUtMi4xMjIgMTcuODY0LTIyLjY1OCAzMC4xMTMtMzUuNzk3IDU3LjMwMy0zNS43OTcgMjAuNDI5IDAgNDUuNjk4IDEzLjE0OCA0NS42OTggMzIuOTU4IDAgMTQuOTc2LTEyLjM2MyAyMi42NjctMzIuNTM0IDMzLjk3NkMyNDcuMTI4IDIzOC41MjggMjE2IDI1NC45NDEgMjE2IDI5NnY0YzAgNi42MjcgNS4zNzMgMTIgMTIgMTJoNTZjNi42MjcgMCAxMi01LjM3MyAxMi0xMnYtMS4zMzNjMC0yOC40NjIgODMuMTg2LTI5LjY0NyA4My4xODYtMTA2LjY2NyAwLTU4LjAwMi02MC4xNjUtMTAyLTExNi41MzEtMTAyek0yNTYgMzM4Yy0yNS4zNjUgMC00NiAyMC42MzUtNDYgNDYgMCAyNS4zNjQgMjAuNjM1IDQ2IDQ2IDQ2czQ2LTIwLjYzNiA0Ni00NmMwLTI1LjM2NS0yMC42MzUtNDYtNDYtNDZ6Ij48L3BhdGg+PC9zdmc+");
					background-repeat: no-repeat;
					height: 20px;
					margin: 0 20px;
					padding: 0;
					transition: filter 0s;
					width: 20px;

					&:hover {
						filter: invert(47%) sepia(92%) saturate(1780%) hue-rotate(170deg)
							brightness(87%) contrast(99%);
					}
				}

				&.selected span:after {
					background-color: #009ddf;
					bottom: -1px;
					content: "";
					height: 2px;
					left: 0;
					position: absolute;
					right: 0;
				}

				> span {
					position: relative;
					text-align: center;
				}
			}
		}
	}
}

body > footer {
	border-top: 1px solid #ddd;
	color: #4a4a4a;
	font-size: 14px;

	> div {
		align-items: center;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: center;
		line-height: 20px;
		padding: 20px;
		text-align: center;

		&.links {
			> a {
				color: #222;
				font-weight: 600;
				padding-left: 20px;
				padding-right: 20px;
				position: relative;
				text-decoration: none;
				cursor: pointer;

				&:hover {
					color: #009ddf;
				}
			}
		}

		&.social {
			padding: 0;

			> a {
				background-repeat: no-repeat;
				height: 25px;
				margin: 0 7px;
				transition: filter 0s;
				width: 25px;

				&.facebook {
					background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgY2xhc3M9ImZhLXN2ZWx0ZSBmYi1jb2xvciBzdmVsdGUtMWQxNXljaSIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNNDAwIDMySDQ4QTQ4IDQ4IDAgMCAwIDAgODB2MzUyYTQ4IDQ4IDAgMCAwIDQ4IDQ4aDEzNy4yNVYzMjcuNjloLTYzVjI1Nmg2M3YtNTQuNjRjMC02Mi4xNSAzNy05Ni40OCA5My42Ny05Ni40OCAyNy4xNCAwIDU1LjUyIDQuODQgNTUuNTIgNC44NHY2MWgtMzEuMjdjLTMwLjgxIDAtNDAuNDIgMTkuMTItNDAuNDIgMzguNzNWMjU2aDY4Ljc4bC0xMSA3MS42OWgtNTcuNzhWNDgwSDQwMGE0OCA0OCAwIDAgMCA0OC00OFY4MGE0OCA0OCAwIDAgMC00OC00OHoiPjwvcGF0aD48L3N2Zz4=");
					filter: invert(40%) sepia(19%) saturate(1602%) hue-rotate(183deg)
						brightness(91%) contrast(92%);
				}

				&.linkedin {
					background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgY2xhc3M9ImZhLXN2ZWx0ZSBsaW5rZWRpbi1jb2xvciBzdmVsdGUtMWQxNXljaSIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNNDE2IDMySDMxLjlDMTQuMyAzMiAwIDQ2LjUgMCA2NC4zdjM4My40QzAgNDY1LjUgMTQuMyA0ODAgMzEuOSA0ODBINDE2YzE3LjYgMCAzMi0xNC41IDMyLTMyLjNWNjQuM2MwLTE3LjgtMTQuNC0zMi4zLTMyLTMyLjN6TTEzNS40IDQxNkg2OVYyMDIuMmg2Ni41VjQxNnptLTMzLjItMjQzYy0yMS4zIDAtMzguNS0xNy4zLTM4LjUtMzguNVM4MC45IDk2IDEwMi4yIDk2YzIxLjIgMCAzOC41IDE3LjMgMzguNSAzOC41IDAgMjEuMy0xNy4yIDM4LjUtMzguNSAzOC41em0yODIuMSAyNDNoLTY2LjRWMzEyYzAtMjQuOC0uNS01Ni43LTM0LjUtNTYuNy0zNC42IDAtMzkuOSAyNy0zOS45IDU0LjlWNDE2aC02Ni40VjIwMi4yaDYzLjd2MjkuMmguOWM4LjktMTYuOCAzMC42LTM0LjUgNjIuOS0zNC41IDY3LjIgMCA3OS43IDQ0LjMgNzkuNyAxMDEuOVY0MTZ6Ij48L3BhdGg+PC9zdmc+");
					filter: invert(39%) sepia(46%) saturate(708%) hue-rotate(168deg)
						brightness(97%) contrast(93%);
				}

				&.youtube {
					background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgY2xhc3M9ImZhLXN2ZWx0ZSB5b3UtdHViZS1jb2xvciBzdmVsdGUtMWQxNXljaSIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTg2LjggMjAyLjFsOTUuMiA1NC4xLTk1LjIgNTQuMVYyMDIuMXpNNDQ4IDgwdjM1MmMwIDI2LjUtMjEuNSA0OC00OCA0OEg0OGMtMjYuNSAwLTQ4LTIxLjUtNDgtNDhWODBjMC0yNi41IDIxLjUtNDggNDgtNDhoMzUyYzI2LjUgMCA0OCAyMS41IDQ4IDQ4em0tNDIgMTc2LjNzMC01OS42LTcuNi04OC4yYy00LjItMTUuOC0xNi41LTI4LjItMzIuMi0zMi40QzMzNy45IDEyOCAyMjQgMTI4IDIyNCAxMjhzLTExMy45IDAtMTQyLjIgNy43Yy0xNS43IDQuMi0yOCAxNi42LTMyLjIgMzIuNC03LjYgMjguNS03LjYgODguMi03LjYgODguMnMwIDU5LjYgNy42IDg4LjJjNC4yIDE1LjggMTYuNSAyNy43IDMyLjIgMzEuOUMxMTAuMSAzODQgMjI0IDM4NCAyMjQgMzg0czExMy45IDAgMTQyLjItNy43YzE1LjctNC4yIDI4LTE2LjEgMzIuMi0zMS45IDcuNi0yOC41IDcuNi04OC4xIDcuNi04OC4xeiI+PC9wYXRoPjwvc3ZnPg==");
					filter: invert(20%) sepia(96%) saturate(2663%) hue-rotate(353deg)
						brightness(106%) contrast(84%);
				}
			}
		}
	}
}