@charset "UTF-8";
/* CSS Document */

#header {
background:#DFDFDF;
width:100%;
position:fixed;
z-index: 1000;
margin-top:-100px;
height: 100px;
}

#header:after {
content:"";
clear:both;
display:block;
}

#header .inner {
width:100%;
max-width:921px;
margin: auto;
}


.logo {
padding:1rem 0;
display: block;
width:10%;
float: left;
}

.logo a {
display:block;
margin: auto;
}

nav {
margin: auto;
padding: 2rem 0 1rem;
width:90%;
font-family: 'Oswald', sans-serif;
float: right;
}

nav>ul {
margin:0 auto 1rem;
display: flex;
justify-content: flex-end;
}
nav li {
list-style:none;
margin-right: 2.5%;

}
nav .dropdown {
position:relative;
}
nav li a {
display: block;
text-align: center;
text-decoration: none;
font-size: 20px;
color:#666;
position: relative;
}
nav li a::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #666;
  transition: all 0.3s ease 0s;
}
nav li a:hover {
  cursor: pointer;
  opacity: 1;
}
nav li a:hover::after {
  width: 100%;
}
nav li a.retailer {
font-size: 12px;
line-height: 1.1;
background-color: #FFF;
padding: 0.5rem;
margin-top: -0.25rem;
border-radius: 0.5rem;
}
nav li a.onlineshop{
font-size: 12px;
line-height: 1.1;
background-color: gold;
padding: 0.7rem 1rem;
margin-top: -0.25rem;
border-radius: 0.5rem;
}
nav li a.onlineshop i{
font-size: 20px;
}

nav li ul {
display:none;
}
nav li:hover ul {
display:inline;
}
nav li li {
float:none;
}
nav .dropdown ul {
position:absolute;
left:-1rem;
top:100%;
background:#EEE;
padding:0.5rem 0;
border-bottom:3px solid #34495e;
}
nav .dropdown li{
white-space:nowrap;
}
nav .dropdown li a {
display: block;
text-align: center;
padding:1rem;
font-size:16px;
width:43%;
}

nav li li a::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #666;
  transition: all 0.3s ease 0s;
}
nav li li a:hover {
  cursor: pointer;
  opacity: 1;
}
nav li li a:hover::after {
  width: 185%;
}

#menu-icon {
position:absolute;
right:0;
top:50%;
margin-top:-12px;
margin-right:30px;
display:none;
}
#menu-icon span {
border:2px solid #666;
width:30px;
margin-bottom:5px;
display:block;
-webkit-transition:all .2s;
transition:all .1s;
}

@media only screen and (max-width : 958px ){
  nav >ul>li >a{
  padding:35px 15px;
  }
}
@media only screen and (min-width: 960px) {
  nav {
  display:block!important
  }
}
@media only screen and (max-width: 959px) {
body {
margin-top: 60px;
}
#header {
margin-top:-60px;
height: auto;
}
.logo {
width:60px;
float: none;
margin:0 auto;
}
  nav {
  display:none;
  width:100%;
  clear:both;
  float:none;
  /*max-height:400px;*/
  overflow-y:scroll;
  padding-bottom: 0;
  }
  #menu-icon{
  display:inline;
  top:45px;
  cursor:pointer;
  z-index: 2000;
  }
  #menu-icon.active .first{
  transform:rotate(45deg);
  -webkit-transform:rotate(45deg);
  margin-top:10px;
  }
  #menu-icon.active .second{
  transform:rotate(135deg);
  -webkit-transform:rotate(135deg);
  position:relative;
  top:-9px;
  }
  #menu-icon.active .third{
  display:none;
  }
  nav{
  padding:10px;
  }
  nav ul{
  float:none;
  display:inline;
  background:#DFDFDF;
  margin:0;
  }
  nav li{
  float:none;
  width:100%;
  background:#DFDFDF;
  }
  nav ul li a {
  float:none;
  padding:1rem 0;
  display:block;
  text-align: center;
  }
  
  
nav ul li a.retailer {
font-size: 14px;
line-height:3.0;
background-color: #DFDFDF;
padding-bottom: 3rem;
}

nav ul li a.onlineshop{
font-size: 16px;
line-height: 3.0;
background-color: gold;
padding: 3rem 0;
margin: auto;
width:90%;
}
nav ul li a.onlineshop i{
font-size: 24px;
}



   nav ul li a.retailer br {
   display: none;
   }
  
  #header nav ul ul{
  display:block;
  position:static;
  background:none;
  border:none;
  padding:0;
  }

  #header nav ul ul li a {
   font-size: 16px;
   display: block;
   margin: auto;
  }
  
  
  #header nav a{
  color:#666;
  padding:0.5rem 0;
  }
  #header nav a:hover{
  color:#333;
  }
  /*
  #header nav ul li li a:before{
  content:"- "
  }*/
}