#touch {display:none;}
#touch + label {position:absolute; z-index: 71;}
#hamburger {
	position:absolute;
	z-index:299;
	transition: ease all .5s;
	cursor:pointer;
	width:16px; height:16px;
	border-radius:10px;
	padding:15px;
	left:5px;
	}
	
#hamburger span {
	content:'';
	display:block;
	width:26px;
	height:4px;
	border-radius:3px;
	transition: all 0.4s ease-in-out;
	position:absolute;
	right:10px;
}
@media (pointer: fine) and (hover: hover) { 
	#hamburger:hover span { background-color:var(--c_tert); }
}

 #hamburger span:nth-child(1) {top:12px;}
 #hamburger span:nth-child(2) {top:calc(50% - 2px);right:calc(50%-2px);}
 #hamburger span:nth-child(3) {top:calc(100% - 16px); }

#touch:checked + label #hamburger span:nth-child(1) {
	 transform: rotate(45deg);top:calc(50% - 2px); right:8px;
	 width:30px; }
#touch:checked + label #hamburger span:nth-child(2) {
	 opacity:0;}	 
#touch:checked + label #hamburger span:nth-child(3) {
	 transform:rotate(-45deg);
	 top:calc(50% - 2px); right:8px;
	 width:30px; }	
	 

@media only screen and (max-width: calc(600px - 1px)) {
	#touch + label {
		display:block;
		position:absolute;
		top:16px; left:8px; 
	}
	#hamburger {border:none;}
	#hamburger span { background-color:var(--c_white); }
	
	@media (pointer: fine) and (hover: hover) {
		#touch:checked + label:hover #hamburger span:nth-child(1) 		{transform: rotate(-45deg);	 width:15px; right:calc(50% - 3px); top:12px }
		#touch:checked + label:hover #hamburger span:nth-child(2) 		{transform: rotate(90deg);	 opacity:1; }
		#touch:checked + label:hover #hamburger span:nth-child(3) 		{transform: rotate(45deg);  width:15px;	right:11px; top:12px;}
		 
		#touch:not(:checked) + label:hover #hamburger span:nth-child(1) {transform: rotate(45deg);	 width:15px; right:calc(50% - 3px); top:calc(100% - 16px);}
		#touch:not(:checked) + label:hover #hamburger span:nth-child(2) {transform: rotate(90deg);	 opacity:1; }
		#touch:not(:checked) + label:hover #hamburger span:nth-child(3) {transform: rotate(-45deg);  width:15px;right:11px; top:calc(100% - 16px);}
	}
}

@media only screen and (min-width: 600px) and (max-width: calc(1400px - 1px)) {
	#touch + label { display:block;
		position:fixed;
		top:80px; 
		padding:13px 0px 0px 40px;
	}
	#hamburger {
		position:fixed; left:130px;	
		padding-left: 45px;
		background-color:var(--c_offwhite); 
		box-shadow: 0px 0px 15px black;
	}
	#hamburger span {
		background-color: var(--c_offblack);
		left:auto; right:14px;}
	#hamburger:hover {
		transform:translate(10px,0);
	}

	#touch:checked + label #hamburger{
		left:323px;
	}
	
	@media (pointer: fine) and (hover: hover) {
		#touch:checked + label:hover #hamburger span:nth-child(1) 		{transform:	rotate(-45deg);	 width:15px; top:calc(42% - 2px); right:30px; }
		#touch:checked + label:hover #hamburger span:nth-child(2) 		{opacity:1;}
		#touch:checked + label:hover #hamburger span:nth-child(3) 		{transform: rotate(45deg);	 width:15px; top:calc(58% - 2px); right:30px; }
		 
		#touch:not(:checked) + label:hover #hamburger span:nth-child(1) {transform:rotate(45deg);	 width:15px; top:calc(42% - 2px); right:10px; }
		#touch:not(:checked) + label:hover #hamburger span:nth-child(3) {transform: rotate(-45deg);  width:15px; top:calc(58% - 2px); right:10px; }
	}
}

#logo, #logo_bg {
	box-sizing: border-box;
	position:absolute;
	top:20px;left: 50%;
	transform: translate(-50%, 0);
	transition: ease all .5s;
}
#logo img, #logo_bg img{
	transition: ease all .5s;
	width:80px;
	border-radius:80px;
}
#logo {
	cursor:pointer;
	z-index:77;
}
#logo_bg {
	z-index:61;
}
#logo_bg img {
	box-shadow: var(--boxshadow2);
}

@media only screen and (min-width: 600px) and (max-width: calc(1400px - 1px)){
	#logo, #logo_bg {
		left:100px;		
		top:60px;
		position:fixed;
	}
	#touch:checked ~ #logo, #touch:checked ~ #logo_bg {
		left:300px;
	}
	#logo img, #logo_bg img{
		width:110px;	
	}	
}
@media only screen and (min-width: 1400px) {
	#logo, #logo_bg {
		left:150px; top:100px;
	}
	#logo img, #logo_bg img{
		width:160px;
	}	
}

#loginbutton, #profilebutton {
	position:absolute;
	right:20px;
	cursor:pointer;
}
#loginbutton {
	bottom:20px; 	
	height:30px;
}
#profilebutton {
	height:38px;
	width:38px; 
	bottom:18px;
	overflow:hidden;
	transition: 0.15s transform linear;
}

#profilebutton img,  #loginbutton img{
	box-sizing:border-box;
	height:100%; width:100%;	
	/*-webkit-transition: 0.15s -webkit-filter linear;
	-moz-transition: 0.15s -moz-filter linear;
	-moz-transition: 0.15s filter linear;
	-ms-transition: 0.15s -ms-filter linear;
	-o-transition: 0.15s -o-filter linear;*/
	transition: 0.15s filter linear,  0.15s transform linear, 0.15s border-color linear; /*, 0.15s -webkit-filter linear,*/
}

#profilebutton img {
	object-fit:cover;
	border-radius:50%;
	border:2px solid var(--c_offwhite);
}

#loginbutton img{
	filter:invert(1);
}

#profilebutton:hover img{
	border-color: var(--c_tert);
}

#loginbutton:hover img{
	filter: var(--filter_tert);
}
#loginbutton:hover img, #profilebutton:hover img{
	transform:scaleX(-1);
}

label, label * {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#accountmenu { 
 opacity:0;
	overflow:hidden;
	transition: all 0.2s ease-in-out;

	position:absolute; 	z-index:75;
	display:none;

	box-shadow: var(--boxshadow2);

	background-color:var(--c_offblack);
	border-bottom: 2px solid var(--c_grey);
	border-right: 2px solid var(--c_grey);
	border-left: 2px solid var(--c_grey);
	border-radius:0 0 10px 10px;
	right:15px; 
	color:var(--c_offwhite);	
}

#accountmenu li {
	list-style-type:none;
	width:100%;
}
#accountmenu li:not(:has(a)) {
	padding:20px 25px 10px 25px;
}

#accountmenu a {
	transition: all 0.2s ease-in-out;
	display:block; 
	padding:8px 25px;
}
#accountmenu a:hover {
	transition: all 0.2s linear;
	background-color:rgb(0,0,0,.5);
}
#accountmenu li img{
	filter:invert(1);
	height:1.3rem; width:1.3rem;
	transform:translate(0,0.2rem);
	margin-right:10px;
}
#accountmenu ul:first-child {
	color:var(--c_tert);
}
#accountmenu ul:last-child li:last-child a {
	padding-bottom:15px;
}
#settings:hover img {
	transition: all 0.2s linear;
	transform:rotate(180deg) translate(0,-0.2rem);
}
#logout img {
	transform:rotate(180deg);
	transition: all 0.2s linear;
}

#logout:hover img{
	transform:translate(-10px,0.2rem);
}
#accountmenubutton:checked + label #loginbutton img{
	filter:var(--filter_tert);
	transform:scaleX(-1);
}
#accountmenubutton:checked + label #profilebutton img{
	transform:scaleX(-1);
	border-color: var(--c_tert) !important;

}


@media only screen and (max-width: calc(600px - 1px)) {
	#accountmenu {
		box-sizing:border-box;
		width:calc(100% - 2 * 15px);
		text-align:center;	
	}
#accountmenu li:not(:has(a)) {
		padding-left:0; padding-right:0;
	}
}