@charset "UTF-8";
@-ms-viewport
{
  width: device-width;
}

@viewport
{
  width: device-width;
}
[hidden]
{
  display: none;
}
.close-btn
{
  display:                     block;
  width:                       30px;
  height:                      30px;
  padding:                     0;
  border:                      0;
  outline:                     none;
  background:                  url("../imgs/close-btn.svg") left center no-repeat;
  background-size:             30px;
  overflow:                    hidden;
  white-space:                 nowrap;
  text-indent:                 100%;
  filter:                      progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity:                     1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.no-svg .close-btn
{
  background-image: url("../imgs/close-btn.png");
}
.close-btn:focus, .close-btn:hover
{
  filter:  progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.nav-btn
{
  z-index:                     200;
  display:                     block;
  width:                       40px;
  height:                      40px;
  padding:                     0;
  border:                      0;
  outline:                     none;
  background:                  url("../imgs/icon_menuslide.png") left center no-repeat;
  background-size:             40px;
  overflow:                    hidden;
  white-space:                 nowrap;
  text-indent:                 100%;
  filter:                      progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity:                     0.7;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.no-svg .nav-btn
{
  background-image: url("../imgs/nav-icon.png");
}
.nav-btn:hover, .nav-btn:focus
{
  filter:  progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
#outer-wrap
{
  position: relative;
  overflow: hidden;
  width:    100%;
}
#nav
{
  z-index:  200;
  position: relative;
  overflow: hidden;
  width:    100%;
  color:    #FFF;
  display: none;
}

#nav .close-btn
{
  display: none;
}

#nav .block-title
{
  border:   0;
  clip:     rect(0 0 0 0);
  height:   1px;
  margin:   -1px;
  overflow: hidden;
  padding:  0;
  position: absolute;
  width:    1px;
}

#nav .block
{
  z-index:    2;
  position:   relative;
  padding:    2%;
  background: #eee;
}

#nav ul
{
  *zoom:   1;
  display: block;
}

#nav ul:before, #nav ul:after
{
  content: "";
  display: table;
}

#nav ul:after
{
  clear: both;
}

#nav li
{
  display: block;
  height: 50px;
}
#nav li.bubble_content {
	background: #222;
	box-shadow: 0 0 50px rgba(0,0,0,0.25)inset;
	height: auto;
	padding: 3% 5%;
	margin-bottom: 15px;
}
#nav li.bubble_content ul li {
	height: auto;	
}
#nav li#navigation_login_home a { background-image: url('../imgs/ikon_home_white.png'); background-size: 26px;}
#nav li#navigation_my_entry  a { background-image: url('../imgs/ikon_product_white.png'); background-size: 26px; }
#nav li#navigation_menu a { background-image: url('../imgs/ikon_price_white.png'); background-size: 26px; }
#nav li#navigation_widget a { background-image: url('../imgs/ikon_widget_white.png'); background-size: 26px; }
#nav li#navigation_mini_homepage a { background-image: url('../imgs/ikon_webpage_white.png');background-size: 26px;  }
#nav li#navigation_newsletter a { background-image: url('../imgs/ikon_newsletter_white.png');background-size: 26px;  }
#nav li#navigation_qrcode a { background-image: url('../imgs/ikon_qrcode_white.png'); background-size: 26px; }
#nav li#navigation_manual a { background-image: url('../imgs/ikon_help_white.png'); background-size: 26px; }
#nav li a
{
  	display:     block;
  	color:       #CCC;
  	font-size:   18px;
  	line-height: 50px;
  	outline:     none;
  	text-decoration: none;
  	padding-left: 55px;
  	background-repeat: no-repeat !important;
  	background-position: 12px center !important;
	font-family: "Lucida Sans Unicode", "Lucida Grande", helvetica, sans-serif;
}
#nav ul.submenu li a {
	padding-left: 20px;	
	background-image: url('../imgs/ikon_arrowright_gray.png');
	background-size: 20px;
	background-position: 98% center !important;
	font-size: 14px;
}
#nav li.navigation_header a { 
	background-color: #222; 
	background-image: url('../imgs/logo_white_withjoojoo.png'); 
	background-size: 70%; font-size: 0px; 
	background-position: center center !important;
}
#nav li.login a {
	background-image: url('../imgs/ikon_login_white.png');
	background-size: 26px;
	color: #fff;
}
#nav li.logged_in a {
	text-overflow: ellipsis;
	background-image: url('../imgs/ikon_login_white.png');
	background-size: 26px;
	overflow: hidden;
	white-space: nowrap;	
}
#nav li.logged_in a span.logged_in_as {
	color: #999;
	text-transform: uppercase;
	font-size: 8px;
	margin-right: 5px;	
	letter-spacing: 0.5px;
}
#nav li.logged_in a span.name {
	font-size: 12px;
	color: #fff;	
	font-weight: bold;
}
#nav li.current_language,
#nav li.available_language,
#nav li#navigation_guides,
#nav li#navigation_news,
#nav li#navigation_events {
	height: 30px;
}
#nav li#navigation_login_home {
	clear: both;	
}
#nav li.current_language a,
#nav li.available_language a,
#nav li#navigation_guides a,
#nav li#navigation_news a,
#nav li#navigation_events a{
	background-color: rgba(0,0,0,0.1);
	line-height: 30px;	
	font-size: 11px;
	color: #999;
	padding-left: 38px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
#nav li#navigation_guides a,
#nav li#navigation_news a,
#nav li#navigation_events a {
	text-align: center;
	color: #777;
	background-color: #222;
	padding: 0px;	
}
#nav li.current_language a {
	background-color: rgba(255,255,255,0.1);
	color: #fff;	
}
#nav li.bubble_content ul li div a {
	height: auto;
	padding: 0px;
	font-size: 10px;
	line-height: 20px;
	
	text-transform: uppercase;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
#nav li.is-active a
{
  color: #FFF;
  font-weight: bold;
}
#nav .submenu li.is-active a {
	background: #8cc63f;	
}
#nav li.logout_button a,
#nav li#bubble_logout a {
	background: #c00 url('../imgs/ikon_logout_white.png') no-repeat center left;
	background-size: 28px;	
	color: #fff;
	height: 50px;
	line-height: 50px;
	opacity: 1;
	border: 0px;
}
#nav li#bubble_logout {
	margin-bottom: 15px;	
}
#nav li #name {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 5px;	
}
#nav li #address,
.no-touch #nav li #phone {
	font-size: 10px;
	color: #ccc;
	text-transform: uppercase;
	line-height: 1.6;
	margin-bottom: 10px;
}
#nav li #phone span {
	display: none;	
}
.block-title
{
  margin:      0;
  font-size:   1.875em;
  line-height: 1.2em;
  text-align:  center;
  white-space: nowrap;
}
.nav-btn
{
  position: absolute;
  top:      5px;
  left:     10px;
}

@media screen and (min-width: 45.0625em)
{
  .nav-btn
  {
    border:   0;
    clip:     rect(0 0 0 0);
    height:   1px;
    margin:   -1px;
    overflow: hidden;
    padding:  0;
    position: absolute;
    width:    1px;
  }

  #nav .close-btn
  {
    border:   0;
    clip:     rect(0 0 0 0);
    height:   1px;
    margin:   -1px;
    overflow: hidden;
    padding:  0;
    position: absolute;
    width:    1px;
  }

  #nav .block-title
  {
    border:   0;
    clip:     rect(0 0 0 0);
    height:   1px;
    margin:   -1px;
    overflow: hidden;
    padding:  0;
    position: absolute;
    width:    1px;
  }

  #nav ul
  {
    text-align:  center;
    white-space: nowrap;
  }

  #nav li
  {
    display:      inline-block;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  #nav li:last-child
  {
    border-right: none;
  }
}

@media screen and (max-width: 45em)
{
  #nav
  {
    position:    absolute;
    top:         0;
  }

  #nav:not(:target)
  {
    z-index: 1;
    height:  0;
  }

  #nav:target .close-btn
  {
    display: block;
  }

  #nav .close-btn
  {
    position: absolute;
    top:     -40px;
    left:     3%;
  }

  #nav .block
  {
    position: relative;
    padding:  0;
  }

  #nav li
  {
    position:   relative;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  #nav li:last-child
  {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  #nav li ul li,
  #nav li ul li:last-child {
	border: 0px;  
  }
  #nav li.is-active:after
  {
    z-index:       50;
    display:       block;
    content:       "";
    position:      absolute;
    top:           50%;
    right:         -0.03125em;
    margin-top:    -0.625em;
    border-top:    0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right:  0.625em white solid;
  }

  .js-ready #nav
  {
    height:             100%;
    width:              80%;
    background:         #333;
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow:         inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
  }

  .js-ready #nav .block
  {
    background: transparent;
  }

  .js-ready #nav .close-btn
  {
    display: block;
    filter:  progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
  }

  .js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover
  {
    filter:  progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }

  .js-ready #nav
  {
    left: -80%;
  }

  .js-ready #container
  {
    left: 0;
  }

  .js-nav #container
  {
    left: 80%;
  }

  .csstransforms3d.csstransitions.js-ready #nav
  {
    left:                        0;
    -webkit-transform:           translate3d(-100%, 0, 0);
    -moz-transform:              translate3d(-100%, 0, 0);
    -ms-transform:               translate3d(-100%, 0, 0);
    -o-transform:                translate3d(-100%, 0, 0);
    transform:                   translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -o-backface-visibility:      hidden;
    backface-visibility:         hidden;
  }

  .csstransforms3d.csstransitions.js-ready #container
  {
    left:                        0 !important;
    -webkit-transform:           translate3d(0, 0, 0);
    -moz-transform:              translate3d(0, 0, 0);
    -ms-transform:               translate3d(0, 0, 0);
    -o-transform:                translate3d(0, 0, 0);
    transform:                   translate3d(0, 0, 0);
    -webkit-transition:          -webkit-transform 500ms ease;
    -moz-transition:             -moz-transform 500ms ease;
    -o-transition:               -o-transform 500ms ease;
    transition:                  transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -o-backface-visibility:      hidden;
    backface-visibility:         hidden;
  }

  .csstransforms3d.csstransitions.js-nav #container
  {
    -webkit-transform: translate3d(80%, 0, 0) scale3d(1, 1, 1);
    -moz-transform:    translate3d(80%, 0, 0) scale3d(1, 1, 1);
    -ms-transform:     translate3d(80%, 0, 0) scale3d(1, 1, 1);
    -o-transform:      translate3d(80%, 0, 0) scale3d(1, 1, 1);
    transform:         translate3d(80%, 0, 0) scale3d(1, 1, 1);
  }

  .csstransforms3d.csstransitions.js-ready #nav .block
  {
    filter:                   progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity:                  0.7;
    -webkit-transition:       opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition:          opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition:            opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition:               opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform:        translate3d(80%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -moz-transform:           translate3d(80%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -ms-transform:            translate3d(80%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -o-transform:             translate3d(80%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform:                translate3d(80%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin:    50% 0%;
    -ms-transform-origin:     50% 0%;
    -o-transform-origin:      50% 0%;
    transform-origin:         50% 0%;
  }

  .csstransforms3d.csstransitions.js-nav #nav .block
  {
    filter:            progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity:           1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform:    translate3d(0, 0, 0);
    -ms-transform:     translate3d(0, 0, 0);
    -o-transform:      translate3d(0, 0, 0);
    transform:         translate3d(0, 0, 0);
  }
}

@media only screen and (max-width: 720px)
{
  #nav
  {
    display: block;
  }
}