.gutes-map-header-top-bar,
.gutes-header {
	position:fixed;
	z-index:9;
	width: 100%;
	background-color:#103a5d;
}
.gutes-icon-navigation {
  margin-left: auto;
  display: flex;
}
.gutes-map-icon-bar {
  float: right;
}

/* TOP BAR ICONS */

.gutes-map-icon-navigation {
  margin-left: auto;
  margin-right: auto;
  width: 420px;
}
.gutes-map-icon-bar ul {
  margin-bottom: 0px;
}
.gutes-map-icon-bar ul li {
  display: inline-block;
}
.gutes-map-icon-bar ul li a img {
  width: 48px;
  border-radius: 5px;
  background-color:#ffbd2e;
  transition: 0.25s ease-out;
}
.gutes-map-icon-bar ul li a img:hover {
  background-color:#ffce00;
}
.is-open .gutes-map-icon-bar ul li a img:hover,
.is-open .menu-button:hover {
  background-color:#103a5d;
}
/* TOP BAR ICONS ENDE */

.gutes-header-top-bar,
.gutes-map-header-top-bar {
	color:#fff;
	font-size:16px;
	padding:10px 15px;
}
.gutes-header-top-bar .inside,
.gutes-header-main {
	max-width:1320px;
	margin-left:auto;
	margin-right:auto;
}
.gutes-header-top-bar .inside .reg_log ul,
.gutes-map-header-top-bar .inside .reg_log ul {
  margin-bottom:0px!important;
}
.gutes-header-top-bar .inside .reg_log ul li,
.gutes-map-header-top-bar .inside .reg_log ul li {
  display: inline-block;
  padding: 0px 5px;
}
.gutes-header-top-bar a,
.gutes-map-header-top-bar a{
	color:#fff;
	text-decoration:none;
}
.gutes-header-top-bar .fas,
.gutes-map-header-top-bar .fas {
	margin-right:8px;
}
.gutes-header-main {
    display:flex;
    padding:10px 15px;
}
.gutes-logo {
	width:20%;
}
.gutes-logo img {
	max-width:55px;
}
.gutes-navigation {
    width:80%;
}
.mod_navigation.nav_main {
  float: right;
}
.gutes-navigation .level_1 li {
    display:inline-block;
}
.gutes-navigation .level_1 li a {
	color:var(--color-brand2);
	font-size:20px;
	text-decoration:none;
	padding-right:15px;
	padding-left:15px;
}
.gutes-navigation .level_1 li a:hover {
    text-decoration:underline;
}

/* MOBILE */

@media screen and (max-width:768px) {
	.gutes-header-main {
		padding: 10px 15px;
	}
	.gutes-logo {
    	width: 40%!important;
	}
	.gutes-map-icon-bar {
		display: none;
	}
	.gutes-map-icon-bar.logged-in {
		display: block!important;
	}
	.icon-nav-overlay .gutes-map-icon-bar {
		display:block!important;
	}
}

@media screen and (max-width:1100px) {
	.gutes-logo {
		width:25%;
	}
	.gutes-navigation {
    	display: none;
	}	
}
@media (max-width: 362px){
	.gutes-header-top-bar .inside .reg_log ul li,
	.gutes-map-header-top-bar .inside .reg_log ul li {
		padding: 5px 0px;
	}
}

/* Social icons based on: codepen.io/matchboxhero/pen/onzkC */

[class^="icon--"] {
    font-family: 'FontAwesome'; /* Apply icon font */
    font-style: normal; /* Removes the default italics */
}

[class^="social-button"] {
   	display: inline-flex; /* Display elements inline but turn them into a flex-container */
	align-items: center; /* Centrally align the children vertically */
	justify-content: center; /* Centrally align the children horizontally */
   	height: 3rem; /* Create square */
    width: 3rem; /* Create square */
   	font-size: 1.4rem; /* Increase the default font size */
    color: #ffffff; /* Make icon white */
    border-radius: 50%; /* Create circle */
    text-decoration: none; /* Remove default underline */
    transition: background-color 150ms ease-in-out; /* Transition background colour on hover */
    margin-right: 0.1rem;
}

/*
Start New Code For Menu
*/
/* Menu Button */

.menu-button {
	display: flex; /* Display flex to center the menu icon in the button */
	justify-content: center; /* Align horizontally */
	align-items: center; /* Align vertically */
	width: 48px; /* Button width */
	height: 48px; /* Button height */
	border-radius: 5px; /* Make the button a circle */
	cursor: pointer;
	background-color:var(--color-brand);
	margin-left: 4px;
}

.menu-button:hover {
	background-color:#ffce00;
}

.card__image-container .menu-button {
	margin: 1.5rem;
}

.menu-icon {
	position: relative; /* Give the menu-icon position relative so we can absolutely position children */
    width: 2rem; /* Icon width */
	height: 1.5rem; /* Icon height */
}

.menu-icon span {
    position: absolute; /* Absolutely position all children of the menu-icon */
    height: 0.250rem; /* Height of each line in our menu button */
    width: 100%; /* With of each line */
    background-color: #ffffff; /* Background colour of each line */
    transition: background-color 500ms ease-in-out; /* Transition added for the background colour */
}

.menu-icon span:nth-child(1) {
    top: 0.0625rem; /* Position the first line roughly 1px from the top */
}

.menu-icon span:nth-child(2) {
    top: 0.625rem; /* Position the second line roughly 10px from the top, one on top of the other */
}

.menu-icon span:nth-child(3) {
    top: 1.25rem; /* Position the fourth line roughly 20px from the top */
}

.menu-button:hover span,
.menu-button:focus span,
.menu-button:active span {
    background: #ffffff; /* On hover, make the background-color of the menu icon white */
}

/* Turn the Menu icon into a close icon  */

.menu-icon.is-active span:nth-child(1) {
    opacity: 0; /* Hide the first line */
}

.menu-icon.is-active span:nth-child(2) {
    transform: rotate(45deg); /* Rotate the second line 45 degrees */
}

.menu-icon.is-active span:nth-child(3) {
	top: 0.625rem; /* Position the third line over the second line */
    transform: rotate(-45deg); /* Rotate the third line -45 degrees */
}

/* FULLSCREEN MENU OVERLAY */

.icon-nav-overlay .gutes-map-icon-bar {
	float:none;
}

.fullscreen-menu-container {
	position: fixed; /* Fix the menu to the viewport */
	top: 12.5rem; /* Add the top value to allow the element to animate up over */
	left: 0; /* Position to the left of the viewport */
	z-index: 5; /* Add z-index to make sure the element is always above everything else */
	width: 100vw; /* Cover the whole width of the viewport */
	height: 100vh; /* Cover the whole height of the viewport */
	overflow: scroll; /* Allow scrolling when the content is larger than the viewport */
	background-color: rgba(255,255,255,0.95); /* Semi-transparent white background for the menu-overlay */
	opacity: 0; /* Apply 0 transparency to hide the overlay on load */
	pointer-events: none; /* Stop the elements in the menu-container from being clicked */
	transition: top 500ms ease-in, opacity 300ms ease-in; /* Transition the top and opacity */
}

.fullscreen-menu-container.is-open {
	opacity: 1; /* Transition opacity from 0 to 1 */
	top: 0; /* Transition to the top of the viewport */
	pointer-events: auto; /* Re-add pointer events to elements can be clicked again */
}

.fullscreen-menu-container .menu-button {
	position: absolute; /* Position the button absolutely to the image-cotainer */
	top: 15px;
	right: 15px;
}

.fullscreen-menu {
	text-align: center; /* Apply text-align center to all children */
	padding: 15px; /* Add padding to the content, large at the top to allow for the close button */
}

.fullscreen-menu__image-container {
	width: 320px; /* Make square */
	height: auto; /* Make square */
	content: url("/files/framework/img/gutes_logo.svg"); /* Apply the image as the background */
	background-position: center center; /* Position the image in the middle */
	margin: 1.5rem auto;
}

.fullscreen-menu__title {
	margin: 1.5rem auto 1.5rem auto; /* Position in the horizontal center and remove top and bottom margins */
	font-size: 42px;
	color:var(--color-brand2);
}

@media screen and (max-width:1024px) {
	.fullscreen-menu__title {
		font-size: 32px;
	}
	
	.fullscreen-menu-container.is-open {
		padding-top:25px;
	}	
	
	.fullscreen-menu__image-container {
		width: 220px;
		height: auto;
		margin: inherit;
	}
}

@media screen and (max-width:768px) {
	.fullscreen-menu__title {
		font-size: 24px;
	}
	.fullscreen-menu-container.is-open {
		padding-top:0px;
	}
}

@media screen and (max-width:500px) {
	.fullscreen-menu {
		padding: 15px 15px 15px 15px;
	}
}

.fullscreen-menu__nav {
	margin: 3rem 0; /* Apply top and bottom margin of the navigation */
}

.fullscreen-menu__nav ul {
	list-style: none; /* Remove the dots from list items */
	margin: 0; /* Remove defualt margin */
	padding: 0; /* Remove default padding */
}

.fullscreen-menu__nav a {
	display: block; /* Span the whole width */
	font-size: 1.4rem; /* Increase the default font size */
	padding: 1rem; /* Add padding to the button to increase the click/tap area */
	color: #A2A2A2; /* Apply light grey colour */
	text-decoration: none; /* Remove default underline */
	transition: color 300ms ease-in; /* Add transition for the colour on hover */
}

.fullscreen-menu [class^="social-button"] {
	margin: 0 0.5rem; /* Add a larger margin between the social buttons in the menu overlay */
	height: 3.75rem; /* Increase the size of the social buttons */
    width: 3.75rem; /* Increase the size of the social buttons */
    font-size: 1.5rem; /* Increase the size of the social icon inside the button */
}

@media only screen and (min-width: 46rem) { /* When the viewport is large enough */
	.fullscreen-menu-container {
		display: flex; /* Add display flex to the container */
		justify-content: center; /* Align menu contents to the center horizontally */
	}
	.fullscreen-menu {
		padding: 15px;
		width: 100%;
	}
	.fullscreen-menu__nav {
		margin: 4rem 0; /* Increase the margin between the navigation and other elements in the menu */
	}
	.fullscreen-menu__nav ul {
		display: flex; /* Turn the unordered list into a flex-container */
		justify-content: space-between; /* Share the available space between the list items */
	}
}