#sidenav {
    height: 100%;
    width: 0px;
    position: fixed;
    z-index: 1001;
    top: 0;
    right: 0;
    background-color: #fff;
    overflow-x: hidden;
	transition: width 0.8s;
}

#sidenav .closebtn {
    position: absolute;
    top: 0;
    left: 0;
	background-color: #e0e0e0;
	padding:20px;
	padding:1.25rem;
	width: 60px;
	width: 3.75rem;
	height: 60px;
	height: 3.75rem;
  color: #000;
  text-decoration: none;
  background-image:url(../images/menu-close.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30% auto;
  transition: 0.3s;
}

#sidenav .closebtn:hover {
  background-image:url(../images/menu-close.svg);
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.3s;
}

/* Button */
#menu-btn {
	position: fixed;
	right: 20px;
	right: 1.25rem;
	top: 20px;
	top: 2.85rem;
	background-color: #ff1c8e;
	padding: 20px;
	padding: 1.25rem;
	z-index: 999;
	transition: 0.3s;
	background-image:url(../images/menu.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40% auto;
	width:60px;
	width:3.75rem;
	height:60px;
	height:3.75rem;
	border-radius: 50%;
	box-shadow: 0px 8px 10px rgba(0,0,0,0.5);
	box-shadow: 0rem 0.5rem 0.625rem rgba(0,0,0,0.5);
	display: none;
	
}

#menu-btn:hover {
  cursor: pointer;
  background-image:url(../images/menu.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
  width:70px;
  width:4.375rem;
  height:70px;
  height:4.375rem;
	
}

/* Content */
#wrapper {
  -webkit-transform: none;
    transform: none;
    transition: -webkit-transform .8s cubic-bezier(.24,.72,.35,1.01);
    transition: transform .8s cubic-bezier(.24,.72,.35,1.01);
    transition: transform .8s cubic-bezier(.24,.72,.35,1.01),-webkit-transform .8s cubic-bezier(.24,.72,.35,1.01);
  transition-delay: 0s, 0s;
    transition-delay: 0s;
  overflow: hidden;
}

.nav-out{
  -webkit-transform: translateX(-150px) !important;
  transform: translateX(-150px) !important;
  transform: translateX(-150px) !important;

  -webkit-transform: translateX(-9.375rem) !important;
  transform: translateX(-9.375rem) !important;
  transform: translateX(-9.375rem) !important;
}

/* Logo */
#img-nav {
  width: 180px;
  width: 11.25rem;
  height: 180px;
  height: 11.25rem;
  margin: 0 auto;
  margin-top: 40px;
  margin-top: 2.5rem;
  margin-bottom: 40px;
  margin-bottom: 2.5rem;
  padding:30px;
  padding:1.875rem;
  text-align: center;
}

#img-nav img{
  max-width: 150px;
  max-width: 8.1875rem;
  height: auto;
}

#menu {
  height: 100%;
  right: 0;
  top: 0;
}

#sidenav-normal-scroll {opacity: 0;}

.animation {
	transition: all 0.3s linear !important;
	opacity:1 !important;
	transition-delay: 0.5s!important;
}

#menu .sub-menu {display: none;}

#menu .item-has-children > a::after {
  content: '';
  display: block;
  height: 20px;
	height: 1.25rem;
  width: 20px;
	width: 1.25rem;
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
right:5px;
right:0.3125rem;
  background: url("../images/arrow-right.svg") no-repeat center center;
  background-size: 10px 15px;
  background-size: 0.625rem 0.9375rem;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

#menu .item-has-children > a.submenu-open::after {
  -webkit-transform: translateY(-50%) rotate(90deg);
  -moz-transform: translateY(-50%) rotate(90deg);
  -ms-transform: translateY(-50%) rotate(90deg);
  -o-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
}

#menu p {color: #000;}
#menu ul {
	margin:0;
	padding:0px 15px;
	padding:0rem 0.9375rem;
}

#menu ul li ul {
	padding:10px 0px;
	padding:0.625rem 0rem;
}
#menu li {list-style:none;}

#menu li a{
  color: #000;
  text-decoration: none;
  display: block;
  width:100%;
  font-size: 22px;
  font-size: 1.3758rem;
  padding: 10px 0px 10px 10px;
  padding: 0.625rem 0rem 0.625rem 0.625rem;
	text-transform: uppercase;
	font-family: 'ProximaNova-Extrabld';
	font-weight: normal;
}

#menu li a:hover{
  background:#ff1c8e;
}


/* style menu items which have a submenu  */
#menu .item-has-children a {position: relative;}


/* 2.Ebene */
#menu ul li ul li a {
	font-size: 17px;
	font-size: 1.0625rem;
	padding: 5px 0px 5px 10px;
	padding: 0.3125rem 0rem 0.3125rem 0.625rem;
	text-transform: none;
	font-family: 'ProximaNova-Regular';
	font-weight: normal;
}

#menu ul li ul li {
	padding-left: 20px;
	padding-left: 1.25rem;
}

#menu ul li ul li:hover {
	background: #ff1c8e;
}

/* Kategorien*/
#menu ul li:first-child ul li:before {
content: "more";
float: left;
font-size: 17px;
font-size: 1.0625rem;
font-weight: normal;
padding: 5px 0px;
padding: 0.3125rem 0rem;
margin-right: 4px;
margin-right: 0.25rem;
letter-spacing: -0.3px;
letter-spacing: -0.01875rem;
}

#menu ul li:first-child ul li:hover:before {
	content:" ";
}

#menu ul li:first-child ul li a {
	font-size: 0px;
	padding: 5px 0px 5px 20px;
	padding: 0.3125rem 0px 0.3125rem 1.25rem;
	text-transform: none;
}

#menu ul li:first-child ul li a:before{
	display:inline-block;
	font-size: 17px;
	font-size: 1.0625rem;
	font-family: 'ProximaNova-Extrabld';
	font-weight: normal;
	font-variant:small-caps;
}

#menu ul li:first-child ul li a:after{
	display:none;
	font-size: 17px;
	font-size: 1.0625rem;
	margin-left: -20px;
	margin-left: -1.25rem;
}

#menu ul li:first-child ul li:hover a:before{
 display:none;
}

#menu ul li:first-child ul li:hover a:after{
 display:inline-block;
}

/*#page14:before {content:"Alle Kategorien";}
#page14:after {content:"Alle Kategorien";}*/

#page2:before {content:"feeling";}
#page3:before {content:"sensations";}
#page4:before {content:"adventure";}
#page5:before {content:"preferences";}
#page6:before {content:"touch";}
#page7:before {content:"wellbeing";}
#page8:before {content:"compatibility";}

#page2:after {content:"For foreplay and sex";}
#page3:after {content:"Stimulating products";}
#page4:after {content:"For anal intercourse";}
#page5:after {content:"For fetish lovers";}
#page6:after {content:"Massage lotions";}
#page7:after {content:"For intimate care";}
#page8:after {content:"For sensitive skin";}



/* 3.Ebene */
#menu ul li ul li ul li a {
  font-weight: 400;
  font-size: 16px;
  padding: 3px 0px 3px 10px;
  text-transform: none;
}


/* Sprachen
* --------------------------------------- */
#sprachen {
  margin:0;
  padding:0;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 40px;
}

.accordion-toggle {
	font-family: 'ProximaNova-Regular';
  cursor: pointer;
  height: 60px;
  background-image: url("../images/arrow-down2.svg");
  background-position: right 15px top 30px;
  background-repeat: no-repeat;
  background-size: 15px 10px;
  background-color: #efefef;
  padding-top: 20px;
  padding-left: 80px;
  font-size: 1.125rem;
  font-size: 18px;
  font-weight: normal;
  transition: 0.3s;
}
.accordion-toggle:hover {
  background-color: #e0e0e0;
}

.accordion-toggle img {
  height: 18px;
  width: 30px;
  margin: 0 5px;
  vertical-align: middle;
}

.accordion-content.default {
  display: block;
}

.accordion-content {
  display: none;
  padding-bottom: 5px;
  padding-top: 10px;
  text-align: left;
}

.accordion-content ul {
  padding-left: 80px;
}

.accordion-content li {
  list-style: none;
  height: 35px;
  width: 100%;
}

.accordion-content li a{
	font-family: 'ProximaNova-Regular';
  text-decoration: none;
  display: block;
  color: #000;
  font-weight: normal;
  font-size: 1.125rem;
  font-size: 18px;
  transition: 0.3s;
}

.accordion-content li a:hover{
  color: #ff1c8e;
}

/* GERM-Flagge */
.accordion-content li img {
	height: 18px;
	width: 30px;
	vertical-align: middle;
	margin-right: 10px;
}

/* EU-Flagge */
.accordion-content li:nth-child(2) img {
	height: 20px;
	width: 30px;
}

/* AUS-Flagge */
.accordion-content li:nth-child(3) img {
	height: 15px;
	width: 30px;
}

/* Footer
* --------------------------------------- */

#box2:before{
content:'About S-hande';
display: block;
font-family: 'ProximaNova-Extrabld';
font-weight: normal;
font-size: 25px;
color: #fff;
margin: 0;
padding: 20px 0;
}

#box1:before{
content:'Product Sign';
display: block;
font-family: 'ProximaNova-Extrabld';
font-weight: normal;
font-size: 25px;
color: #fff;
margin: 0;
padding: 20px 0;
}

#headline:after {
content: "Get to know the world of S-hande!";
font-family: 'ProximaNova-Extrabld';
font-weight: normal;
font-size: 25px;
color: #000;
margin: 0;
padding: 20px 0;
display: inline-block;
}

/* Startseite Mehr-Button
* --------------------------------------- */

#startseite #section0 .mehr-entdecken {
  border: 2px solid #fff;
  background: none;
  color: #fff;
  padding: 10px 20px;
  padding: 0.625rem 1.25rem;
  display: inline-block;
  font-weight: normal;
  font-size: 18px;
  font-size: 1.125rem;
  text-transform: uppercase;
  max-width: 390px;
  max-width: 24.375rem;
  width:100%;
}

#startseite #section0 .mehr-entdecken:hover {
	cursor: pointer;
	background:#ff1c8e;
	color:#fff;
	border: 2px solid #ff1c8e;
	content:"";
}

#startseite #section0 .mehr-entdecken::before {
	content:"Premium intimate products for you";
	display: block;
}

#startseite #section0 .mehr-entdecken:hover::before {
	display: none;
}

#startseite #section0 .mehr-entdecken::after {
	content:"discover more";
	display: none;
	text-transform: none;
}

#startseite #section0 .mehr-entdecken:hover::after {
display: block;
}

@media screen and (max-height: 768px) and (orientation: landscape){
#startseite #section0 .mehr-entdecken {
	max-width: 340px !important;
}
	
}

@media screen and (max-height: 480px) and (orientation: landscape){
#startseite #section0 .mehr-entdecken {
	max-width: 300px !important;
}
}

@media screen and (max-width: 768px) and (orientation: portrait){
#startseite #section0 .mehr-entdecken {
	max-width: 340px !important;
}
	#menu-btn{ display: block;    width: 45px;
    height: 45px;
    top: 10px;
    right: 10px;}
	#startseite #logo{ display: block;}
}

@media screen and (max-width: 480px) and (orientation: portrait){
#startseite #section0 .mehr-entdecken {
	max-width: 300px !important;
}
}

/*****************************************************************/

/* Produkte Störer - NEW!*/
#kat1 #prod15-kl::before,
#kat3 #prod9-kl::before {
	background-image: url(../images/stoerer-en.png);
}

.kat1 #produkt1 {background-image: url(../pic/pro1.png);}
#kat1 #section12 #produkt-kat {background-image: url(../images/pjur_aqua_panthenol-new.png);}
#kat3 #section1 #produkt-kat {background-image: url(../images/pjur_back-door_regenerating-new.png);}

#kat6 #section3 #produkt-kat {
    background-image: url(../images/pjur_clean-spray-en.png);
}

/*****************************************************************/


/* Preloader
* --------------------------------------- */

#preloader-text {
content: "Please wait - page is loading."
}

#content-nav-mobile .accordion-toggle::after {
	content: "Retailer Lounge Menu";
	font-family: 'ProximaNova-Extrabld';
}