/* Header styles
	 ========================================================================== */
.site {
	/* To get the footer to stick to the bottom of the page when not enough content is present,
	   we wrap the vertical section in a flex container (here, .site) and expand the main content
	   container (here, .site-main in front-page.css).
	   For more, check: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
	 */
	display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em 1em;
}

.menu-item {
	padding: 0.75em;
	font-family: 'Roboto Mono', monospace;
	font-weight: 400;
}

/* Mobile */
/* Logo */
.site-branding {
	width: 50%;
	height: 50%;
}

/* span divider between language and page manu items */
#nav-divider {
	display: block;
	width: 90%;
	height: 0.125em;
	background-color: black;
	margin: auto;
}

/* Navigation */
.hamburger-container {
	display: block;
	width: max-content;
	cursor: pointer;
}

.hamburger-bar-1, .hamburger-bar-2, .hamburger-bar-3 {
	width: 35px;
	height: 5px;
	margin: 6px 0;
	background-color: black;
	transition: 0.4s;
}

.change-hamburger .hamburger-bar-1 {
	transform: translate(0, 11px) rotate(-45deg);
}

.change-hamburger .hamburger-bar-2 {
	opacity: 0;
}

.change-hamburger .hamburger-bar-3 {
	transform: translate(0, -11px) rotate(45deg);
}

/* Button for Catalog (EN and ΕΛ) */
#menu-item-563, #menu-item-564 {
	border: 2px solid black;
	margin: 1rem 1rem 0 1rem;
}

/* Desktop */
@media only screen and (min-width: 768px) {
	/* Button for Catalog (EN and ΕΛ) */
	#menu-item-563, #menu-item-564 {
		margin-top: unset;
		margin-bottom: unset;
		margin-left: 1em;
		padding: 0.45rem;
	}

	/* Flip divider orientation */
	#nav-divider {
		display: inline;
		width: 0.125em;
		height: 2em;
		margin-left: 1.5em;
		margin-right: 1.5em;
	}

	.hamburger-container {
		display: none;
	}
}

/* Logo */
@media only screen and (min-width: 768px) {
	.site-branding {
		width: 20%;
		height: 20%;
	}
}