/*! Pushy - v0.9.2 - 2014-9-13
* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
* https://github.com/christophery/pushy/
* by Christopher Yee */

/* Menu Appearance */

.pushy {
	background: #a59f95;
	font-size: 1em;
	height: 100%;
	overflow: auto;
	position: fixed;
	right:0;
	top: 0;
	width: 320px;
	z-index: 9999;

	-webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */
}

.pushy a {
	background: url('/fileadmin/templates/suissedigital/img/css/nav_icons.svg') no-repeat 30px -260px;
	color: #fff;
	display: block;
	line-height: 28px;
	padding: 6px 5px 6px 50px;
	text-decoration: none;
}
.no-svg .pushy a { background-image: url('/fileadmin/templates/suissedigital/img/css/nav_icons.png'); }
.pushy li { text-transform: uppercase; }
.pushy li.has-sub { cursor: pointer; }
.pushy li.has-sub > a { background-position: 30px 14px; }
.pushy li.has-sub.open-dropdown > a { background-position: 30px -124px; }


.pushy a:hover { color: #fff; opacity: 0.8; }
.pushy a.active { color: #fff; }
.pushy a.current { color: #ab513b; }

.pushy ul.level-1 { font: normal 20px/40px 'Avenir Next LT W01 Bold', sans-serif; margin-top: 90px; }
.pushy ul.level-1 li { margin-bottom: 40px; }
.pushy ul.level-2 { font: normal 20px/40px 'AvenirNextLTW01-Regular', sans-serif; }
.pushy ul.level-2 li { 40px; margin-bottom: 0; }
.pushy ul.level-3 { font: normal 16px/40px 'AvenirNextLTW01-Regular', sans-serif; }

.pushy ul ul { display: none;  }

.pushy li.active > ul { display: block; }

/* prevent scrolling of content if pushy is open */
body.pushy-no-scroll { height: 100%; overflow-y:hidden; }

/* social media links */
.pushy ul.pushy-social { margin: 0 auto; width:120px; }
.pushy ul.pushy-social li { float: left; width:25%; }

.pushy ul.pushy-social a {
	display: block;
	width: 20px;
	height: 28px;
	margin: 0 auto;
	padding: 0;
}

.pushy ul.pushy-social a.facebook { background: url('/fileadmin/templates/suissedigital/img/css/icons_pushy/icon_facebook.svg') no-repeat center center; }
.pushy ul.pushy-social a.twitter { background: url('/fileadmin/templates/suissedigital/img/css/icons_pushy/icon_twitter.svg') no-repeat center center; }
.pushy ul.pushy-social a.linkedin { background: url('/fileadmin/templates/suissedigital/img/css/icons_pushy/icon_linkedin.svg') no-repeat center center; }
.pushy ul.pushy-social a.youtube { background: url('/fileadmin/templates/suissedigital/img/css/icons_pushy/icon_youtube.svg') no-repeat center center; margin-top:1px; }

/* language nav */
.pushy ul.pushy-lang { margin:1em auto 2em auto; width:130px; }
.pushy ul.pushy-lang li { float: left; width:25%; }

.pushy ul.pushy-lang a,
.pushy ul.pushy-lang li.passive {
	background: none;
	color: #fff;
	display: block;
	font-family:"Avenir Next LT W01 Bold";
	font-size: 1em;
	line-height: 28px;	
	padding: 0;
	text-align: center;
	text-transform: uppercase;
}

.pushy ul.pushy-lang li.passive:hover { opacity: 0.8; }

/* svg version */
/*.menu-btn {
	position:fixed;
	z-index:1000000000;
	width:24px;
	height:24px;
	top:15px;
	right:15px;
	background:url('../img/css/offcanvas_icon.svg') no-repeat 0 0;
	cursor: pointer;
}
.menu-btn:hover { background-position:0 -24px; }
.pushy-active .menu-btn { background-position:0 -48px; }
.pushy-active .menu-btn:hover { background-position:0 -24px; }*/

/* menu-btn (off-canvas-navigation), css version */

.menu-btn {
	cursor: pointer;
	padding: 0;
	position: fixed;
	top:18px;
	right:15px;
	text-transform: uppercase;
	z-index: 10000;
}


/* burger button */

.burger-btn {
	display: inline-block;
	padding: 0 0 4px;
	position: relative;

	/*transition: 0.25s;*/

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.burger-btn .burger:before,
.burger-btn .burger:after {
	transition: top .25s;
}

.menu-btn:hover .burger:before,
.menu-btn:hover .burger:after {
	/*transition: 0.25s;*/
}

/*
 * hover effect only if .csstransforms is given by modernizer,
 * because this looks a bit nicer in ie8
 */
.csstransforms .menu-btn:hover .burger:before { top: 13px; }
.csstransforms .menu-btn:hover .burger:after { top: -13px; }

.burger {
	/*border-radius: 40px;*/
	background: #a59f95;
	display: block;
	height: 5px;
	position: relative;

	/*transition: 0.5s;*/

	width: 40px;
}

.burger:before,
.burger:after {
	background: #a59f95;
	/*border-radius: 16px;*/
	content: "";
	display: block;
	height: 5px;
	position: absolute;

	/*transition: 0.5s;*/

	width: 40px;
	z-index: -1;
}

.burger:before { top: 10px; }
.burger:after { top: -10px; }

.open:not(.steps) .burger:before,
.open:not(.steps) .burger:after { top: 0 !important; }

.open .burger:before,
.open .burger:after {
	/*transition: 0.5s;*/
}

/**
 * X button
 * only transform if .csstransfrom is given by modernizr
 * otherwise there's a problem in ie8
 */

.csstransforms .open.x .burger { background: transparent; }

.csstransforms .open.x .burger:before {
	background: #fff;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.csstransforms .open.x .burger:after {
	background: #fff;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Menu Movement */

.pushy-right {
	-webkit-transform: translate3d(320px,0,0);
	-moz-transform: translate3d(320px,0,0);
	-ms-transform: translate3d(320px,0,0);
	-o-transform: translate3d(320px,0,0);
	transform: translate3d(320px,0,0);
}

.pushy-open{ 
	-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);
}

.container-push, .push-push {
	-webkit-transform: translate3d(-320px,0,0);
	-moz-transform: translate3d(-320px,0,0);
	-ms-transform: translate3d(-320px,0,0);
	-o-transform: translate3d(-320px,0,0);
	transform: translate3d(-320px,0,0);
}

/* Menu Transitions */

.pushy, #container, .push {
	-webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
	-moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
	-o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
	transition: transform .2s cubic-bezier(.16, .68, .43, .99);
}

/* Site Overlay */

.site-overlay {
	display: none;
}

.pushy-active .site-overlay {
	background-color: rgba(0,0,0,0);
	bottom: 0;
	display: block;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 9998;

	-webkit-animation: fade 500ms; 
	-moz-animation: fade 500ms; 
	-o-animation: fade 500ms;
	animation: fade 500ms;
}

@keyframes fade{
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@-moz-keyframes fade{
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@-webkit-keyframes fade{
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@-o-keyframes fade{
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* media queries for a width to 1119px */
@media only screen and (min-width: 960px) and (max-width: 1119px) {
	.menu-btn { right:5px; }
}

/* media queries for big screens */
@media screen and (min-width: 1600px) {
	.pushy-right {
		-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);
	}
	/*
	#home .pushy-right {
		-webkit-transform: translate3d(320px,0,0);
		-moz-transform: translate3d(320px,0,0);
		-ms-transform: translate3d(320px,0,0);
		-o-transform: translate3d(320px,0,0);
		transform: translate3d(320px,0,0);
	}
	*/
	.menu-btn { display: none; }
	/* only for ie9 and lower, because they can't handle the translate3d property used further up */
	.lt-ie10 .menu-btn { display: block; }
	/* #home .menu-btn { display: block; } */
}

/* media queries for mobile */
@media only screen and (max-width: 767px) {
	.pushy ul.pushy-lang, .pushy ul.pushy-social { width:120px; }
}