.logo{display:inline-block}
@media (max-width: 340px){
 header.fix .logo{display:none}
}
.menu{display:inline-block}

.logo>img{margin: 20px;}
a.logo:hover>img,a.logo:focus>img{filter: hue-rotate(180deg);}

header.fix .logo>img{height:42px;margin:5px 20px 5px 5px;}
@media (max-width: 701px){
 .logo>img{height:42px;margin:5px 20px 5px 5px;}
}

header.fix + main{margin-top:52px} 
@media (min-width: 700px){
 header.fix + main{margin-top:197px} 
}

#headerDiv{margin-left:10px}
nav{display: flex;border-radius:22px;background-color:#432241;}
nav nav{border-radius: 0 15px 15px 15px;}
nav a{display: inline-block;padding: 10px 15px;color:#fff;}
nav a:hover,nav a.cur{
	color:#fff;text-shadow: 0px 0px 1px #ccc;
	background-color:#175967;border-radius: 20px;
}
nav a:hover{background-color:#3E449A;}

nav a:focus,.login a:focus{text-decoration:underline;}

nav>div{width: fit-content;}

header .menu nav > div > nav {
  display: none;text-align:left;
}

header .menu nav > div:hover > nav {
  display: block;
  position: absolute;
  z-index: 2;
  border: solid 1px #fff;
  margin-left: 30px;margin-right: 5px;
}

.menu>a{vertical-align:middle}

header{
 position: relative;z-index: 1;text-align: center;
 background-color: rgba(256,256, 256, .9);
}

header.fix {
  position: fixed;width: 100%;
  border-bottom-color: #ddd;
}

.headerDiv{margin:0 10px}

header .login > a {
  display: block;
  text-align: right;
  max-width: 120px;
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
}
header .login svg {
  height: 20px;
  width: 20px;
  vertical-align: middle;
}

.menu>div{display:inline-block;vertical-align: middle;cursor: default;}

.menuBtn{
 position:relative;top:1px;left:-5px;display:none;height:36px;width:36px;
 background-color:#432241;
}
.loginDiv>ul{
 min-width: 180px;
 border: solid 1px #ddd;
 padding: 5px;
 margin: 0;
 position: absolute;
 background: #fff;
 list-style: none;
 text-align: left;
}
.loginDiv>ul>li{margin-top: 20px;}

.login>a:hover>svg,.login>a:focus>svg{transform: scale(1.1);}

@media (min-width: 701px){
 .menu{
  background-color: #432241;
  width: fit-content;
  margin: auto;
  border-radius: 20px;
 }

 .logo{display:block;width: fit-content;margin:auto;}
 header.fix .logo{display:none}

 .login>a,.lang>a{color:#fff}
 .login>a:hover,.lang>a:hover{color: #fff;text-shadow: 0px 0px 1px #ccc;}
}


@media (min-width: 900px){
 header.fix .logo{display:inline-block}
}

@media (max-width: 700px){
	.menuBtn{display: inline-block;border-radius:10px;}
	.menuBtn:hover{opacity:.7}
	.menuBtn+div{
		position: absolute;top: 50px;width:0;left:5%;
		opacity:0;overflow-x:clip;
		transition:all .2s;
	}
	.menu.a > .menuBtn+div{width:90%;opacity:1;}
	.menu nav{display:block}
}
	.menuBtn::before{
		content:"";position:absolute;top:10px;left:5px;
		display:block;height:15px;width:25px;
		border:solid 1px #fff;
		border-width:1px 0 1px 0;
		transition: all .2s;
		z-index:0;
	}
	.menuBtn::after{
		content:"";position:absolute;top:18px;left:5px;
		display:block;height:1px;width:25px;
		border-top:solid 1px #fff;
		transition: all .2s;
	}
	.menu.a>.menuBtn::before{
		height:0px;border-bottom-width:0;
		top:18px;
		transform:rotate(-45deg);
	}
	.menu.a>.menuBtn::after{
		top:18px;
		transform:rotate(45deg);
	}
/*
	.menuBtn:hover::before{border-width:2px 0 2px 0}
	.menu.a .menuBtn:hover::before{border-width:2px 0 0px 0}
	.menuBtn:hover::after{border-width:2px 0 0px 0}
*/

#arrowUp {
  position: fixed;
  top: -40px;
  right: 2px;
  transition: all .5s;
  font-size: 200%;
  color: #fff;
  text-shadow: -1px -1px 3px #000;
}
#arrowUp.a{top:52%}
#arrowUp:hover{text-shadow: 1px 1px 3px #000;}