/* GENERAL */
	header {
	    flex: 0 0 var(--size-header-height);
	    width: 100%;
	    height: var(--size-header-height);
	    background-color: white;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    flex-wrap: nowrap;
	    padding: 0 0.5em;
	    /* border-bottom: 1px solid var(--color-border); */
	    position: fixed;
	    /* overflow: hidden; */
	    top: 0;
	    z-index: 99;
	    box-shadow: 0 0 150px rgba(95, 90, 120, .15);
	}

	header nav {
	    width: 100%;
	    height: 100%;
	    display: flex;
	    padding: 0 1em 0 0;
	    flex-direction: row;
	    justify-content: flex-start !important;
	    align-items: center;
	    flex-wrap: nowrap;

	}

	header nav ul {
	    list-style-type: none;
	    width: 100%;
	    display: flex;
	    flex-direction: row;
	    justify-content: flex-end;
	    align-items: center;
	    flex-wrap: nowrap;
	    margin: 0;
	    padding: 0 1.5em;
	    height: 100%;
	}

	header nav ul li {
	    display: flex;
	    flex-direction: row;
	    justify-content: center;
	    align-items: center;
	    flex-wrap: nowrap;
	    margin: 0;
	    height: 100%;
	    position: relative;
	    font-size: 1.1rem;
	    /* margin-right: 1em; */
	}

	header nav ul li.active::after {
	    content: '';
	    display: block;
	    width: 0.6rem;
	    height: 0.6rem;
	    border-radius: 50%;
	    position: absolute;
	    bottom: 1rem;
	    left: 50%;
	    transform: translateX(-50%);
	    background-color: var(--color-blue);
	}

	header nav ul li.right {
	    margin-left: auto;
	    /* margin-right: 1em; */
	}

	header nav ul li.spaced {
	    margin-left: 2em;
	    /* margin-right: 1em; */
	}

	header nav a {
	    text-decoration: none;
	    display: flex;
	    flex-direction: row;
	    justify-content: flex-start;
	    align-items: center;
	    flex-wrap: nowrap;
	    padding: 0 2.0em;
	    height: 100%;
	    font-weight: 500;
	    color: var(--color-text);
	    position: relative;
	    font-size: 1em;
	    cursor: pointer;
	}

	header nav a:hover {

	    color: var(--color-link);
	}

	header nav a.button {
	    height: 2.6em;
	    background-color: var(--color-blue);
	    color: white;
	    padding: 0em 1.5em;
	    border-radius: 1.3em;
	    display: flex;
	    flex-direction: row;
	    justify-content: center;
	    align-items: center;
	    flex-wrap: nowrap;
	    font-weight: 600;
	}

	header nav a.button:hover {

	    background-color: var(--color-gray);
	}

	header nav .logo {
	    display: flex;
	    flex-direction: row;
	    justify-content: flex-start;
	    align-items: center;
	    flex-wrap: nowrap;
	    width: 14em;
	    margin-left: 10px;
	    margin-right: 2em;
	    position: relative;
	}

	header nav .logo>div {
	    width: 100%;
	    height: 0;
	    padding-bottom: calc(128 / 615 * 100%);
	    background-image: url('/images/logo.svg?4');
	    background-size: cover;
	}

/* MOBILE LAYOUT */
	.hamburger {
	    display: none;
	    flex-direction: column;
	    gap: 5px;
	    background: none;
	    border: none;
	    cursor: pointer;
	    z-index: 100;
	    padding: 10px;
	    margin-left: auto;
	}
	.hamburger span {
	    width: 28px;
	    height: 3px;
	    background: var(--color-text);
	    border-radius: 3px;
	    transition: all 0.3s ease;
	}
	.hamburger.active span:nth-child(1) {
	    transform: translateY(8px) rotate(45deg);
	}
	.hamburger.active span:nth-child(2) {
	    opacity: 0;
    	transform: scale(0);
	}
	.hamburger.active span:nth-child(3) {
	    transform: translateY(-8px) rotate(-45deg);
	}
	
	@media (max-width: 767px) and (hover: none) and (pointer: coarse),
	(max-width: 767px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 0) {
	    .hamburger {
	        display: flex;
	    }
	    .menu {
		    position: fixed;
		    top: calc(var(--size-header-height) - 2px);
		    left: 0;
		    width: 100vw;
		    height: calc(100vh - var(--size-header-height));
		    background: white;
		    flex-direction: column;
		    justify-content: flex-start;
		    align-items: center;
		    padding-top: 2rem;
		    transform: translateX(-100%);
		    transition: transform 0.35s ease;
		    z-index: 99;
		    overflow-y: auto;
		}
		.menu.active {
		    transform: translateX(0);
		}
		.menu li {
		    width: 100%;
		    justify-content: flex-start;
		    text-align: left;
		    margin: 0 !important;
		    height: auto;
		}
		.menu a {
		    padding: 2rem;
		    width: 100%;
		    font-size: 1.6rem;
		}
		.menu a.button {
		    width: auto;
	    	height: 3.2em;
	    	padding: 0em 2em;
	    	border-radius: 1.6em;
		}
		.menu .spaced {
		    margin-top: 2em !important;
		}
		header nav ul li.active::after {
		    content: '';
		    display: block;
		    width: 0.8rem;
		    height: 0.8rem;
		    border-radius: 50%;
		    position: absolute;
		    bottom: 1rem;
		    left: 0%;
		    top: 50%;
		    transform: translateY(-50%);
		    background-color: var(--color-blue);
		}
	}