* { -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family:'FontAwesome', 'typicon';
}
/**********************************************************
 * MENUE MOVEMENT  
 **********************************************************/

.pushy{ 
    font-size: 16px ; font-weight: bold; position: fixed; width: 80px; height: 100%; z-index: 600; overflow: hidden; margin-top: 1px; margin-left: 2px; border:none;float: left; 
	background: rgba(214,32,0,1); background: linear-gradient(to top, rgba(214,32,0,1) 0%, rgba(170,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d20000', endColorstr='#a00000', GradientType=1 );
    box-shadow: 0px 0 6px 0px rgba(0, 0, 0, 0.5);
}

.pushy a{
    display: block; text-decoration: none;  
}

.pushy a:hover{ opacity:1;
}

.pushy-left{ 
    transform: translate3d(-80px,0,0);
}

.pushy-open{
    transform: translate3d(0,0,0);
}

.container-push, .push-push{  
    transform: translate3d(80px,0,0);
}
/**********************************************************
 * MENUE TRANSITIONS 
 **********************************************************/
.pushy, #container, .push{  
    transition: transform .2s cubic-bezier(.16, .68, .43, .99);
    /* improves performance issues on mobile*/
    backface-visibility: hidden; perspective: 1000;
}

/**********************************************************
 * SITE OVERLAY
 **********************************************************/

.site-overlay{
    display: none; height: 100%;
}
.pushy-active .site-overlay{
    display: block; position: fixed; overflow: hidden; z-index: 200; top: 0; right: 0; bottom: 0; left: 80px;
	background: rgba(0,0,0,0); background: linear-gradient(to top, rgba(0,0,0,.4) 0%, rgba(0,0,0,.75) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=1 );
}

/**********************************************************
 * PUSHY- Button
 **********************************************************/

#pushy-on{   
   display: block; position: absolute; overflow: hidden; z-index: 200; margin-top: 0px; margin-left: 0px; border:none;
}
.on-pushy {
	display: block; position: relative; width: 50px; height: 50px; list-style: none; border: none; background-size: contain;
}
a.on-pushy {
 	width:50px; height:50px; top:0px; bottom:0; margin-top: 5px; margin-left: 14px; border:none;
	background-image: url(../img/svg/back.svg); background-color:transparent; background-repeat: no-repeat; background-size: contain;	
	transition: all 0.3s ease-in-out; 
}
a.on-pushy:hover { border: none;
	background-image: url(../img/svg/back2.svg); background-color:transparent; background-repeat: no-repeat; background-size: contain;	
    transform: translateX(4px);
}

/**********************************************************
 * LEFT-MENUE WABBER
 **********************************************************/
/*.menue-nav {
  display: inline-block; width: 50px; height: 50px; margin: 0px auto; padding: 0; 
  border: none; list-style: none; text-decoration: none; text-align: center; float: left;  
}
.menue-nav li {
  display: inline-block; border: none;
}
.menue-nav a {
  display: block;  position: relative; border: none; cursor: pointer;
  transition: 0.3s cubic-bezier(.41, -0.03, .31, 3.0) ;
}
*/

/**********************************************************
 * LEFT MENU BTN
 **********************************************************/

#left-back, #left-btn1, #left-btn2, #left-btn3, #left-btn4, #left-btn5  {   
	display:block; position: relative; z-index: 1200; overflow: hidden; float: left; 
	margin: 0px 0px 0px 0px; width:80px; height:60px; padding: 5px 15px 5px 15px; text-align: center;
	border-bottom: 1px solid rgba(255, 255, 255, .1); border-top: 1px solid rgba(0, 0, 0, .03);
}
/**********************************************************
 * LEFT MENU ICON / WEB-FONT MOVE SVG
 **********************************************************/

a.model-l1{
	margin: 0 auto; overflow: hidden;  background: transparent;  border:none;  
	font-size: 2px; line-height: 49px; color: #A80002; text-align: center; text-decoration:none; opacity:0;  
	text-shadow: 0px 0px rgba(78,0,0,0.0), 0px 0px rgba(78,0,0,0.0); -webkit-font-smoothing: antialiased; 
}
a.model-l1:hover {
	font-size: 14px; line-height: 45px; color:#FFF; opacity:1;
	text-shadow: 2px 1px rgba(78,0,0,0.3), 3px 2px rgba(78,0,0,0.2); -webkit-font-smoothing: antialiased; 
}
a.model-l2{
	margin: 0 auto;  overflow: hidden;  background: transparent;  border:none;  
	font-size: 21px; line-height: 32px; color: #FFF; text-align: center; text-decoration:none; opacity:0; 
	text-shadow: 1px 7px rgba(78,0,0,0.1), 2px 8px rgba(78,0,0,0.1); -webkit-font-smoothing: antialiased; 
}
a.model-l2:hover {
	font-size: 12px; line-height: 43px; color:#FFF; opacity:1;
	text-shadow: 0px 0px rgba(78,0,0,0.4), 1px 1px rgba(78,0,0,0.3); -webkit-font-smoothing: antialiased; 
}


.left-back, .left-btn1, .left-btn2, .left-btn3, .left-btn4, .left-btn5 { 
	display:block; position:relative; width:50px; height:50px; top:0px; left:0px; right:0; opacity:1; list-style:none; border:none; 
	-webkit-filter: drop-shadow( 1px 2px 2px rgba(0,0,0,.2));
}

a.left-btn1{ background-image: url('../img/svg/back.svg'); background-repeat: no-repeat; background-size: contain; opacity:1;}									
a.left-btn2{ background-image: url('../img/svg/monitor.svg');  background-repeat: no-repeat; background-size: contain; opacity:1; }	
a.left-btn3{ background-image: url('../img/svg/key.svg');   background-repeat: no-repeat; background-size: contain; opacity:1;}					
a.left-btn4{ background-image: url('../img/svg/sidebar.svg');  background-repeat: no-repeat; background-size: contain; opacity:1; }
a.left-btn5{ background-image: url('../img/svg/refresh.svg');  background-repeat: no-repeat; background-size: contain; opacity:1;}

a.left-back:hover { -webkit-filter: drop-shadow( 1px 2px 2px rgba(0,0,0,.3)); } 
a.left-btn1:hover { -webkit-filter: drop-shadow( 1px 2px 2px rgba(0,0,0,.3)); } 
a.left-btn2:hover { -webkit-filter: drop-shadow( 1px 2px 2px rgba(0,0,0,.3)); }
a.left-btn3:hover { -webkit-filter: drop-shadow( 1px 2px 2px rgba(0,0,0,.3)); }
a.left-btn4:hover { -webkit-filter: drop-shadow( 1px 2px 2px rgba(0,0,0,.3)); }
a.left-btn5:hover { -webkit-filter: drop-shadow( 1px 2px 2px rgba(0,0,0,.3)); }

/**********************************************************
 * LEFT MENU BTN Transitions
 **********************************************************/
a.left-back{
	background-image: url(../img/svg/back.svg); background-color:transparent; background-repeat:no-repeat; background-size:contain;	
	transition: all 0.3s ease-in-out; 
}
a.left-back:hover {
	background-image: url(../img/svg/back2.svg); background-color:transparent; background-repeat:no-repeat; background-size:contain;
	transform: translateX(4px);
}

a.left-btn1{
	background-image: url(../img/svg/talk.svg); background-color:transparent; background-repeat:no-repeat; background-size:contain; border:none; 
	transition: all 0.3s ease-in-out;  
}
a.left-btn1:hover {
	background-image: url(../img/svg/talk2.svg); background-color:transparent; background-repeat:no-repeat; background-size:contain; border:none;
	transform: translate(8px,-5px) scale(1.4) rotate(-7deg);
}

a.left-btn2{ 
	transition: all 0.3s ease-in-out; 
}
a.left-btn2:hover { 
	transform: scale(1.3);
}

a.left-btn3 {
	z-index:1900;width:50px;height:50px;top:0;bottom:0;left:0;right:0;  opacity:1; 
	background-image: url(../img/svg/key.svg); background-color:transparent; background-repeat: no-repeat; background-size: contain;
	transition: transform 0.8s ease-in-out;
}
a.left-btn3:hover {
	background-image: url(../img/svg/key2.svg); background-color:transparent; background-repeat: no-repeat; background-size: contain;
	transform: translate(-4px,-4px) scale(1.3) rotate(30deg); opacity:1;	
}

a.left-btn4 {	
	background-image: url(../img/svg/sidebar.svg); background-color:transparent; background-repeat: no-repeat; background-size: contain;
	transition: transform 1.2s ease-in-out; 
}
a.left-btn4:hover {
	transform: scale(1.2) rotate(-360deg);
}

a.left-btn5 {	
	background-image: url(../img/svg/refresh.svg); background-color:transparent; background-repeat: no-repeat; background-size: contain; 
	transition: transform 1.2s ease-in-out; 
}
a.left-btn5:hover {
	transform: scale(1.2) rotate(1080deg);
}