/** Transitions **/
#resButton div, #resButton.Open div, #r2 .Box { -webkit-transition: all 0.3s linear;
		-moz-transition: all 0.3s linear;
		-o-transition: all 0.3s linear;
		transition: all 0.3s linear }
#r1 .navBackground { -webkit-transition: top 0.3s linear;
		-moz-transition: top 0.3s linear;
		-o-transition: top 0.3s linear;
		transition: top 0.3s linear }
#resRightLeft, #resRightLeft.open { -webkit-transition: right 0.5s ease-out;
		-moz-transition: right 0.5s ease-out;
		-o-transition: right 0.5s ease-out;
		transition: right 0.5s ease-out }
figure > div { -webkit-transition: opacity 0.8s linear;
		-moz-transition: opacity 0.8s linear;
		-o-transition: opacity 0.8s linear;
		transition: opacity 0.8s linear; }
#figureNav li > div { -webkit-transition: background 0.5s ease-in-out;
		-moz-transition: background 0.5s ease-in-out;
		-o-transition: background 0.5s ease-in-out;
		transition: background 0.5s ease-in-out }

/** Responsive Menü **/
#resRightLeft.open { right: 0%; }
#resRightLeft { position: fixed; width: 85%; height: 100%; background: #fff; right: -100%; }

nav { height: 100%; opacity: 0; }
nav a { text-decoration: none; }
nav > div { height: 100%; width: 50%; }
nav > div > .Box div { position: absolute; top: 50%; }
nav > div:nth-of-type(1) a { color: #fff; display: inline-block; }
nav > div:nth-of-type(1) > .Box { position:relative; width: 75%; height: 50%; padding-left: 25%; }
nav > div:nth-of-type(2) > .Box { background: #fff; height: 100%; padding-left: 36%; }
nav > div:nth-of-type(2) li { border-bottom: 1px solid #e1e1e1; padding: 1em 2em 1em 0; }
nav > div:nth-of-type(2) a { color: #000; }
nav > div:nth-of-type(1) a { -webkit-transition: all 0.25s ease-in-out;
		-moz-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out; }
nav > div:nth-of-type(2) li { -webkit-transition: all 0.25s ease-in-out;
		-moz-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out; }
video {	position: fixed; right: 0; top: 0; min-width: 100%; min-height: 100%; width: auto; height: auto;}

/** aktiv bei Klick **/
#resButton div { -webkit-transition: all 0.3s linear;
		-moz-transition: all 0.3s linear;
		-o-transition: all 0.3s linear;
		transition: all 0.3s linear }
#resButton.open div { background: #000;  }
#resButton div:nth-of-type(1) { top: 0; }
#resButton div:nth-of-type(2) { bottom: 0; }
#resButton.open div:nth-of-type(1) { top: 8px; -webkit-transform: rotate(43deg); -moz-transform: rotate(43deg); -o-transform: rotate(43deg); transform: rotate(43deg); }
#resButton.open div:nth-of-type(2) { background: none; }
#resButton.open div:nth-of-type(3) { bottom: 8px; -webkit-transform: rotate(-43deg); -moz-transform: rotate(-43deg); -o-transform: rotate(-43deg); transform: rotate(-43deg); }
#resButton:hover { cursor: pointer; }

@media screen and (max-width: 1300px) {
	nav { font-size: 2em; }
}
@media screen and (min-width: 900px) {
	nav > div:nth-of-type(1) a:hover { font-size: 1.05em; -webkit-transition: all 0.25s ease-in-out;
		-moz-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out; position: relative; margin-left: -.15em; }
	nav > div:nth-of-type(2) li:hover { font-size: 1.05em; -webkit-transition: all 0.25s ease-in-out;
		-moz-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out; position: relative; margin-left: -.05em; }
	.Box.small { display: none; }
}
@media screen and (max-width: 900px) {
	#resButton {    margin: 2em 2.5% 0 0; }
	#r1 .navBackground { top: 0;}
	video, .Box.big { display: none; }
	#resRightLeft {
		top: 5%;
		font-size: 85%;
	}
	
	@media screen and (max-height: 500px) {
		.beratung div {
			top: 75% !important;
		}
	}
}
@media screen and (max-width: 800px) {
	nav { font-size: 1.5em; }
    nav > div:nth-of-type(1) > .Box { width: 85%; padding-left: 15%; }
    nav > div:nth-of-type(2) > .Box { padding-left: 25%; }    
    nav > div > .Box div { line-height: 84px; }
}

@media screen and (max-width: 600px) {
	nav { position: relative; top: 10%; font-size: 1.1em; }
	nav > div { float: none; width: 100%; }
    nav > div:nth-of-type(1) { height: 25%; }
    nav > div:nth-of-type(2) { height: 65%; }    
    nav > div:nth-of-type(1) .Box { float: left; width: 45%; padding-left: 5%; height: 100%; }
    nav > div:nth-of-type(2) > .Box { padding-left: 35%; }
    nav > div:nth-of-type(2) > .Box > div { vertical-align: top; }
    nav > div:nth-of-type(2) > .Box ul { padding-top: 2em; } 
    nav .impressum { display: none; }
    #resRightLeft { width: 100%; font-size: 150%; }
    #r1 .logo { width: 46%; }
    .alignMenue { height: auto !important; padding-top: 2em; }
}
@media screen and (max-width: 500px) {
	#resButton {
		margin: 1.3em 2.5% 0 0;
	}
}