/*
*
*	playmobil FunPark - 2016 - Menu Styles
*	Author: SECONDRED Newmedia GmbH
*	Web: http://www.secondred.de
*
*/

/* -- Navigation -- */
.inline ul { margin:0; padding:0}
.inline ul li{ float:left; margin:0; padding:0; list-style:none}
.inline ul li a{}
.inline ul li a:hover{}

/* -- Hauptnavi -- */
#mainmenu { 
	position:fixed; left:0;bottom: 0;top: 0; z-index:88; background:#009BE2; padding-bottom:70px;
	background:rgba(0,155,226, 0.95); width:380px; height:auto !important; 
	padding-top:130px; text-align:left; -webkit-transform: translate(-100%, 0%) translateZ(0);
	-moz-transform:  translate3d(-100%, 0px, 0px);-o-transform:  translate3d(-100%, 0px, 0px);-ms-transform:  translate3d(-100%, 0px, 0px); transform:  translate3d(-100%, 0px, 0px);
	-webkit-transition: -webkit-transform 500ms cubic-bezier(0.2, 1, 0.3, 1);-moz-transition: -moz-transform 500ms cubic-bezier(0.2, 1, 0.3, 1);
	-o-transition: -o-transform 500ms cubic-bezier(0.2, 1, 0.3, 1);	transition: transform 500ms cubic-bezier(0.2, 1, 0.3, 1);
	-webkit-perspective: 1000;-webkit-backface-visibility: hidden; min-height: 850px;
	-webkit-transform-style: preserve-3d; 
}

#mainmenu.open {-webkit-transform: none; -moz-transform: none; transform: none;}
#mainmenu ul{ padding-left:0; font-size:20px; font-weight:bold; }
/*
#mainmenu ul li{ 
	padding:0 38px;
	-webkit-transform: translate3d(-270px, 0, 0);-moz-transform: translate3d(-270px, 0, 0);	transform: translate3d(-270px, 0, 0);
	-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);-moz-transition: -webkit-transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
	transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}
#mainmenu ul li a{ text-decoration:none; color:#fff; padding:20px 0 20px 25px;border-bottom:2px solid rgba(255,255,255, 0.3) }
*/
#mainmenu ul li{ padding:0 38px;}
#mainmenu ul li a{ text-decoration:none; color:#fff; padding:20px 0 20px 25px;border-bottom:2px solid rgba(255,255,255, 0.3);}
#mainmenu > ul > li > a{ 
	-webkit-transform: translate3d(-270px, 0, 0);-moz-transform: translate3d(-270px, 0, 0);	transform: translate3d(-270px, 0, 0);
	-webkit-transition: -webkit-transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);-moz-transition: -webkit-transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
	transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);-webkit-perspective: 1000;-webkit-backface-visibility: hidden;
}
@media only screen and (max-height : 850px) and (orientation : landscape) {
    #mainmenu { min-height: 750px }
    #mainmenu ul li a{ padding:15px 0 15px 25px}
}

@media only screen and (max-height : 750px) and (orientation : landscape) {
    #mainmenu { min-height: 660px; padding-top: 110px }
    #mainmenu ul { font-size: 16px }
    #mainmenu ul li a{ padding:12px 0 12px 20px}
}


#mainmenu ul li.header a { padding:20px 0}
#mainmenu > ul > li:last-child > a { border-bottom:0}
#mainmenu > ul > li > ul > li:last-child > a { border-bottom:0}

#mainmenu li.active a,
#mainmenu ul:hover li a{ filter: alpha(opacity=80);opacity: 0.8;}

#mainmenu li.active a.active,
#mainmenu ul li a:hover{ filter: alpha(opacity=100);opacity: 1;}
#ulMainMenue { padding-bottom:40px; max-height: 80vh; }
#ulMainMenue ul { max-height: 70vh; overflow-x: auto}

#ulMainMenue ::-webkit-scrollbar { width: 5px;}
#ulMainMenue ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.1); }
#ulMainMenue ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.5);}

/* #mainmenu li.active, */
#mainmenu.open > ul > li > a{-webkit-transform: none; -moz-transform: none; transform: none;}
#mainmenu.open > ul > li:nth-child(1) > a{-webkit-transition-delay: 0.010s; transition-delay: 0.010s;}
#mainmenu.open > ul > li:nth-child(2) > a{-webkit-transition-delay: 0.04s; transition-delay: 0.04s;}
#mainmenu.open > ul > li:nth-child(3) > a{-webkit-transition-delay: 0.055s; transition-delay: 0.055s;}
#mainmenu.open > ul > li:nth-child(4) > a{-webkit-transition-delay: 0.07s; transition-delay: 0.07s;}
#mainmenu.open > ul > li:nth-child(5) > a{-webkit-transition-delay: 0.085s; transition-delay: 0.085s;}
#mainmenu.open > ul > li:nth-child(6) > a{-webkit-transition-delay: 0.1s; transition-delay: 0.1s;}
#mainmenu.open > ul > li:nth-child(7) > a{-webkit-transition-delay: 0.12s; transition-delay: 0.12s;}
#mainmenu.open > ul > li:nth-child(8) > a{-webkit-transition-delay: 0.14s; transition-delay: 0.14s;}
#mainmenu.open > ul > li:nth-child(9) > a{-webkit-transition-delay: 0.16s; transition-delay: 0.16s;}
#mainmenu.open > ul > li > a {-webkit-transition-delay: 0.135s;transition-delay: 0.135s;}

#mainmenu ul.langmenu li { float:left;padding:0; margin-left:10px; }
#mainmenu ul.langmenu li a { border-bottom:0; padding:0;color:#fff;filter: alpha(opacity=50);opacity: 0.5; }
#mainmenu ul.langmenu li a.active {filter: alpha(opacity=100);opacity: 1;}

#mainmenu ul.langmenu li:last-child { padding-left:10px; position:relative;}
/*
#mainmenu ul.langmenu li:last-child:before { 
	width:3px; height:15px; background:#fff; display:block; content:""; left:0; top:4px; position:absolute;
	-webkit-transform: rotate(15deg);-moz-transform: rotate(15deg);-o-transform: rotate(15deg);-ms-transform: rotate(15deg);transform: rotate(15deg);
}
*/
#mainmenu ul.langmenu li:first-child { padding-left:0}
#mainmenu ul.langmenu li:first-child:before { display:none}


#mainmenu ul.langmenu { font-size:16px; padding-left:30px; color:#fff;position: fixed; left: 0;bottom: 30px;}
@media screen and (min-width:0\0) { 
    #mainmenu ul.langmenu { position: absolute}
}

#mainmenu ul.langmenu li.en a,
#mainmenu ul.langmenu li.de a{ height: 25px; display:block;background-position: left center; background-repeat: no-repeat; background-size:contain}

#mainmenu ul.langmenu li.en a span,
#mainmenu ul.langmenu li.de a span{ display: block; padding: 0 0 6px 30px}

#mainmenu ul.langmenu li.en a{ background-image: url(../gfx/lang-en.png)}
#mainmenu ul.langmenu li.de a{ background-image: url(../gfx/lang-de.png)}


@media screen and (max-height: 700px){
	#mainmenu ul.langmenu { /* position:relative; */ bottom:20px}
}

/* Required styles; changing these may break the menu */

.slinky-menu {overflow: hidden;-webkit-transform: translateZ(0);-webkit-transition: all 300ms ease;transform: translateZ(0);transition: all 300ms ease;}
.slinky-menu > ul {left: 0;position: relative;-webkit-transform: translateZ(0);-webkit-transition: all 300ms ease;transform: translateZ(0);transition: all 300ms ease;}

.slinky-menu ul,
.slinky-menu li {list-style: none;margin: 0;}

.slinky-menu ul {width: 100%;}
.slinky-menu a {display: block;}
.slinky-menu li ul {display: none;left: 100%;position: absolute;top: 0;}

.slinky-menu .header {position: relative;}
.slinky-menu h2 ~ a.back {left: 38px;position: absolute;top: 0; right:0}
.slinky-menu h2 {font-size: 1em;margin: 0;text-align: center;}

/* Default theme */
.slinky-menu .header { }
.slinky-menu h2 {color: #FFF; padding:20px 0 20px 30px; font-size:30px;border-bottom:2px solid rgba(255,255,255, 0.3); text-align:left }
.slinky-menu a {}
.slinky-menu a:hover {}
.slinky-menu a.next:after {content: '\276f';margin-left: 1em;float: right;}
.slinky-menu a.back{border-bottom:0 !important; left:38px;}
.slinky-menu a.back:before {content: '\276e';margin-right: 1em;float: left;position: relative;top: 7px;}

/* -- Topmenu -- */
#topmenu { float:right; font-size:16px; font-weight:700; padding-top:25px; padding-right:30px}
#topmenu ul {}
#topmenu ul li{ margin-left:20px}
#topmenu ul li a{ position:relative}

#topmenu > ul > li > a::before,
#topmenu > ul > li > div > a::before{ 
	font-size:30px; margin-right:10px; position:relative; top:7px; display:inline-block; 
	-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 1, 0.3, 1);
	-moz-transition: -webkit-transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 1, 0.3, 1);
	transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}
#topmenu > ul > li > a::after,
#topmenu > ul > li > div > a::after{ 
	content: ""; width:40px; height: 40px; border:2px solid #fff; position:absolute; display:block; left:-5px;filter: alpha(opacity=0);opacity: 0;
	-webkt-border-radius:50%;-moz-border-radius:50%;border-radius:50%; top:-10px;
	-webkit-transform: scale(1.3);-moz-transform: scale(1.3);transform: scale(1.3);
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);-moz-transition: -webkit-transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
	transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}
#topmenu ul li a:hover{}
#topmenu > ul > li > a:hover::before,
#topmenu > ul > li > div > a:hover::before {-webkit-transform: scale(0.8);-moz-transform: scale(0.8);transform: scale(0.8);}

#topmenu > ul > li > a:hover::after,
#topmenu > ul > li > div > a:hover::after{-webkit-transform: scale(1);-moz-transform: scale(1);transform: scale(1);filter: alpha(opacity=100);opacity: 1;}

/* -- Logout -- */
#logout {  font-size:16px; font-weight:700; }
#logout a,
#logout button{ position:relative; color: inherit; text-decoration: none; border: 0; background: transparent; cursor: pointer}
#logout button { font-weight: 700;  overflow: visible; font-size: 16px;}

#logout a::before,
#logout button::before{ 
	font-size:30px; margin-right:10px; position:relative; top:7px; display:inline-block; 
	-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 1, 0.3, 1);
	-moz-transition: -webkit-transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 1, 0.3, 1);
	transition: transform 0.3s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.2, 1, 0.3, 1);
}
#logout a:after,
#logout button::after{ 
	content: ""; width:40px; height: 40px; border:2px solid #fff; position:absolute; display:block; left:-5px;filter: alpha(opacity=0);opacity: 0;
	-webkt-border-radius:50%;-moz-border-radius:50%;border-radius:50%; top:-10px;
	-webkit-transform: scale(1.3);-moz-transform: scale(1.3);transform: scale(1.3);
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);-moz-transition: -webkit-transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
	transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}
#logout button::after{ top: 1px}
#logout a:hover{}
#logout a:hover::before,
#logout button:hover::before {-webkit-transform: scale(0.8);-moz-transform: scale(0.8);transform: scale(0.8);}

#logout a:hover::after,
#logout button:hover::after {-webkit-transform: scale(1);-moz-transform: scale(1);transform: scale(1);filter: alpha(opacity=100);opacity: 1;}

/* -- Breadcrumb -- */
#breadcrumb { font-size:15px; margin-bottom:20px; overflow:hidden}
#breadcrumb:before { float:left; font-size:30px; margin-right:20px}
#breadcrumb ul {}
#breadcrumb ul li{ margin-right:10px}
#breadcrumb ul li:before {content:"»"; float:right; margin-left:10px}

#breadcrumb ul li:first-child:before,
#breadcrumb ul li:last-child:before { display:none}

#breadcrumb ul li a{ color:#fff; text-decoration:none}
#breadcrumb ul li a:hover{  text-decoration:underline}

.page-full #breadcrumb{ padding-top:20px; padding-left:50px; padding-bottom:20px}

/* -- Sharebar -- */
#sharebar { font-size:13px}
#sharebar ul {}
#sharebar ul li{ margin-right:5px}
#sharebar ul li a{ 
	color:#fff; text-decoration:none; display:block;width: 16px;height: 16px; border:2px solid #fff; position:relative; top:4px;
	-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; line-height:12px; text-align:center
}
#sharebar ul li a.icon-facebook:before{ font-size:11px; line-height:16px}
#sharebar ul li a.icon-google-plus:before{ font-size:15px; line-height:14px}
#sharebar ul li a.icon-twitter:before{ font-size:11px}


#sharebar ul li a:before { font-size:10px}
#sharebar ul li a span {display:none}
#sharebar ul li a.icon-facebook:hover{ background:#3b5998}
#sharebar ul li a.icon-google-plus:hover{ background:#d34836}
#sharebar ul li a.icon-twitter:hover{ background:#4099FF}

.page-full #sharebar{ padding-right:50px; padding-top:20px}

/* -- Footermenu -- */
#footermenu { font-size:16px; padding-top:40px}
#footermenu ul {}
#footermenu ul li{ margin-right:20px}
#footermenu ul li:last-child { margin-right:0}
#footermenu ul li a{}
#footermenu ul li a:hover{ text-decoration:underline}

#outerfooter > #footermenu ul { margin:  0 auto}
/* -- SocialMedia Menü im Footer -- */
#socialmenu { color:#fff; width:110px; overflow:hidden }
#socialmenu ul {}
#socialmenu ul li{ margin-left:10px}
#socialmenu ul li a{ 
	border:2px solid #fff;width: 26px;height: 26px; display:block; text-align:center; line-height:26px;
	-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;
}
#socialmenu ul li a:hover{}

#socialmenu ul li a span { display:none}
#socialmenu ul li a.icon-facebook { font-size:20px; line-height:34px}
#socialmenu ul li a.icon-facebook:hover{ background:#3b5998}

#socialmenu ul li a.icon-youtube { font-size:14px}
#socialmenu ul li a.icon-youtube:hover{ background:#c4302b}

#socialmenu ul li a.icon-instagram { font-size:14px}
#socialmenu ul li a.icon-instagram:hover{ background:#8a3ab9}


/* -- Sprachmenü im Footer -- */
#langmenu {color:#fff;float:left; width:135px; overflow:hidden }
#langmenu:before {  display: none}
#langmenu ul { font-weight:bold}
#langmenu ul li{ margin-right:10px}
#langmenu ul li a{filter: alpha(opacity=50);opacity: 0.5; color: #fff}
#langmenu ul li a.active{ filter: alpha(opacity=100);opacity: 1;}
#langmenu ul li a:hover{}

#langmenu ul li.en a,
#langmenu ul li.de a{ height: 25px; display:block;background-position: left center; background-repeat: no-repeat; background-size:contain}

#langmenu ul li.en a span,
#langmenu ul li.de a span{ display: block; padding: 0 0 6px 30px}

#langmenu ul li.en a{ background-image: url(../gfx/lang-en.png)}
#langmenu ul li.de a{ background-image: url(../gfx/lang-de.png)}

#langmenu li:last-child { padding-left:10px; position:relative;}
/*
#langmenu li:last-child:before { 
	width:3px; height:15px; background:#fff; display:block; content:""; left:-1px; top:4px; position:absolute;
	-webkit-transform: rotate(15deg);-moz-transform: rotate(15deg);-o-transform: rotate(15deg);-ms-transform: rotate(15deg);transform: rotate(15deg);
}
*/
#langmenu li:first-child{ padding-left:0}
#langmenu li:first-child:before { display:none;}

/* -- Filter für Medien -- */
#mediafilter {color:#fff; overflow:hidden; padding-right:40px; position:relative; z-index:2 }
#mediafilter ul { font-weight:bold}
#mediafilter ul li{ margin-right:10px}
#mediafilter ul li a{ 
	font-size:40px; text-decoration:none; color:#fff; line-height:40px; width:40px; height:40px; 
	-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; display:block
}
#mediafilter ul li a span { display:none; cursor:pointer}
#mediafilter ul li a.active{ color:#F07D00}
#mediafilter ul li a:hover{color:#F07D00; background:rgba(255,255,255,0.7);}

/* -- Filter für Medien -- */
#mobifilter { text-align:left; margin:10px 30px; position:relative; z-index:4}

#mediafilter-mobi {color:#fff; overflow:hidden; padding-right:40px; position:relative; z-index:2 }
#mediafilter-mobi ul { font-weight:bold; padding-top:2px}
#mediafilter-mobi ul li{ margin-right:10px}
#mediafilter-mobi ul li a{ 
	font-size:40px; text-decoration:none; color:#fff; line-height:40px; width:40px; height:40px; 
	-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%; display:block
}
#mediafilter-mobi ul li a span { display:none; cursor:pointer}
#mediafilter-mobi ul li a.active{ color:#F07D00}
#mediafilter-mobi ul li a:hover{color:#FFD500;}

/* -- Custom Colors -- */
.content-part.brightyellow #sharebar,
.content-part.brightyellow #breadcrumb,
.content-part.brightyellow #sharebar a,
.content-part.brightyellow #breadcrumb a,
.content-part.yellow #sharebar,
.content-part.yellow #breadcrumb,
.content-part.yellow #sharebar a,
.content-part.yellow #breadcrumb a{ color:#F07D00; border-color:#F07D00}

.content-part.brightyellow #sharebar a:hover,
.content-part.brightyellow #breadcrumb a:hover,
.content-part.yellow #sharebar a:hover,
.content-part.yellow #breadcrumb a:hover{ color:#fff; border-color:#fff}