/* 	GLOBAL SETTINGS FOR NAVIGATION UP TO "SMALL DEVICES"
	================================================== */

@media (max-width: 991px) {
	/*section:before {content: "max-width: 991px"; background: blue; position: fixed; top: 40px; z-index: 9999; color: white;}*/

	/* DEFAULT VIEW */
	/* SET THE NAVIGATION TO ABSOLUTE POSITION (NON-FIXED) */
	navigation 											{ position: absolute; left: 0; width: 100% !important;}
	
	/* CENTER THE NAVIGATION ROW */
	 .container navigation .row 						{ margin: auto !important}
	
	/* HIDE THE SMALL LOGO */
	navigation img.small 								{ display: none;}
	
	/* SCROLLED VIEW */
	navigation.affix 									{ width: 100% !important; top: 0;}
	navigation.affix img 								{ max-height: 100%;width: auto;}
	
	/* Hide the default Logo, display the small Logo and hide the toggle-nav-button */
	navigation.affix .text 								{ display: none;}
	navigation.affix img.small 							{ display: block; float: left;}
	
	
}

/* 	GLOBAL SETTINGS UP TO "EXTRA SMALL DEVICES"
	================================================== */
@media (max-width: 767px) {
	/*section:before {content: "max-width: 767px"; background: blue; position: fixed; top: 40px; z-index: 9999;color: white;}*/

	.container navigation .row .col-md-2 				{ width: 50%; float: left; height: 100%;}
	h1 + p.lead 										{ position: inherit; padding: 0;}
	
	
	/* SET ALL CONTAINERS AND ELEMENTS INSIDE TO THEIR MAX-HEIGHT AND NEW WIDTH*/
	.container .row 									{ height: auto;}
	
	.col-md-2,
	.col-md-4,
	.col-md-6,
	.col-md-8,
	.col-md-2.half-size 								{ width: 100%; float: none;}
	.half-size > .row:nth-child(2) > DIV:nth-child(2) 	{ margin-top: 10px;}
	
	/* Top Elements */
	.image-top.text-bottom .image,
	.image-bottom.text-top .text 						{ height: 50%;}
	.image-top.text-bottom .image 						{ bottom: 50%;}
	
	/* Bottom Elements */
	.image-top.text-bottom .text,
	.image-bottom.text-top .image 						{ height: 50%;}
	.image-top.text-bottom .text 						{ top: 50%;}
	
	/* Left Elements */
	DIV.text-left											{ padding: 10px; margin: 0;}
	
	/* Right Elements */
	DIV.text-right											{ padding: 10px !important; margin: 0 !important;}
	
	
	/* Global image width */
	.image-top.text-bottom .image img 					{ max-height: inherit !important; max-width: 100% !important;}
	
	.col-md-2 .image-top.text-bottom .image,
	.col-md-2 .image-top.text-bottom .text,
	.col-md-2 .image-bottom.text-top .image,
	.col-md-2 .image-bottom.text-top .text				{ top: inherit; bottom: inherit; width: 50%; height: 100%;}
	
	.col-md-6.col-lg-6 .image img 						{ /*margin-top: -10%;*/}
	
	
	/* Don´t display the index-navigation */
	.carousel-indicators 								{ display: none !important;}
	
	/* Setting the carousel and Repositioning the icons */
	.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
														  top: 25%;}
	.carousel-control, .carousel-control:hover, .carousel-control:focus {
    													  height: 45px;
														  top: 38%;
														  
														  top: -webkit-calc(50% - 45px / 2);
															top: -moz-calc(50% - 45px / 2);
															top: calc(50% - 45px / 2));
														  
														  
														  width: 20px;}
														  
	.carousel-indicators-numbers				 		{ display: block;}
	.carousel-indicators-numbers li						{ padding: 13px 0;}
														  
	
	
	/* Set padding for sections (and the padding, if the menu is fold out */
	section 											{ padding-top: 50px; }
	section.show 										{ padding-top: 190px;}
	
	/* RESPONSIVE NAVI */
		
	/* Set the menu row and col to new height */
	navigation.affix .row 								{ height: 40px !important; overflow: hidden;}
	navigation.affix .row .col-md-2 					{ width: 100%; height: 40px !important;}
	
	/* set the fold out menu row to new height and show the toggle-nav-button */
	navigation.affix .row.show 							{ height: 180px !important;}
	navigation.affix ul.nav 							{ overflow: hidden; 	position: inherit;}
	navigation.affix .nav-stacked > li 					{ float: none; padding: 0 20px 0 0;}
	navigation.affix button.toggleNav 					{ display: block; }
	
	/* set the fold out menu row to new height especially for detail */
	#detail navigation.affix .row.show 					{ height: 100px !important;}

	/* set footer cols to auto-height */
	footer .col-md-4									{ width: 50%; float: left; height: auto;}
	
	
	/* settings for form elements */
	.form-horizontal .form-group .control-label 		{ float: left; width: 20%;}
	.form-horizontal .form-group .col-sm-8 				{ float: left; width: 80%;}
	
	.half-size > .row:nth-child(2) > DIV:nth-child(2) 	{ margin-top: 10px;}

	/* SET HEIGHT TO AUTO-HEIGHT */
	.auto-height 										{ height: auto !important; }
	
	
	
	/* SPECIAL COL-SETTINGS FOR XMAS-MAILING */
	
	.col-md-2.col-lg-2.xmas {float: left !important; width: 50% !important;}
}


/* Extra-EXTRA small devices */
@media (max-width: 480px) {
	/*section:before {content: "max-width: 480px"; background: red; position: fixed; top: 10px; z-index: 9999;}*/
	
	body 												{ font-size: 95%;}
	/*h1, h2, h3, h4 									{ font-size: 270%;}*/
	
	/* SET ALL CONTAINERS AND ELEMENTS INSIDE TO THEIR MAX-HEIGHT AND NEW WIDTH*/
	.container 											{ width: 320px;}
	
	section .container > .row > .col-md-4.image-top.text-bottom 
														{ height: 320px;	}
														
	section .container > .row > .col-md-2.image-top.text-bottom 
														{ float: left; height: 160px; width: 50%; }

	section .container > .row > .col-md-8 .text 		{ height: 300px;}
	
	.text 												{ height: 300px;}
	
	.col-md-2 											{ /*height: 160px;*/}
	.col-md-4 											{ /*height: 320px;*/}
	.col-md-6 											{ /*height: 320px;*/}
	.col-md-8 											{ /*height: 160px;*/}
	.col-md-2.half-size 								{ /*height: 320px*/}
	
	.col-md-2 .image img 								{ /*width: 300px; max-height: inherit !important;margin-top: -75px;*/}
	.col-md-2 .image-top.text-bottom .image img 		{ /*height: 160px; margin-top: 0;*/}
	.col-md-2 .image-bottom.text-top .image img 		{ /*width: 300px; max-height: inherit !important;margin-top: 0px;*/}
	.col-md-4 .image img { }
	.col-md-4 .image-top.text-bottom .image img 		{ /*height: 160px; max-width: inherit !important;*/}
	.col-md-6 .image img 								{ /*height: 300px; margin-left: -80px; max-width: inherit !important;*/}
	.col-md-6 .image-top.text-bottom .image img 		{ /*height: 160px; max-width: inherit !important;*/}
	.col-md-8 .image img								{ /*width: 300px; max-height: inherit !important;margin-top: -5px;*/}
	.col-md-8 .image-top.text-bottom .image img 		{ /*height: 140px; margin: 0 0 0 -190px; max-width: inherit !important; width: auto;*/}
	
	.col-md-8 .image-top.text-bottom .image,
	.col-md-8 .image-top.text-bottom .text,
	.col-md-8 .image-bottom.text-top .image,
	.col-md-8 .image-bottom.text-top .text 				{ top: inherit; bottom: inherit; width: 50%; height: 100%;}
	

	
	/* DEFAULT VIEW */
	/* SET THE NAVIGATION ROW TO THE HALF HEIGHT OF THE GRID SYSTEM */
	navigation .row 									{ width: 320px; height: 160px !important}
	
	/* SET PADDING FOR SECTION */
	section#home,
	#detail section,
	section#imprint 									{ padding-top: 170px;}
	
	/* SET THE HEIGHT FOR THE TEXTAREA */
	textarea.form-control 								{ height: 50px;}
	
	
	
	/* Setting the carousel and Repositioning the icons */
	.carousel-indicators-numbers				 		{ height: 40px;}
	
}

/* Extra small devices */
@media (min-width: 481px) and (max-width: 767px) {
	/*section:before {content: "max-width: 767px"; background: red; position: fixed; top: 10px; z-index: 9999;}*/
	
	body 												{ font-size: 110%;}
	/*h1, h2, h3, h4 										{ font-size: 270%;	}*/
	
	/* SET ALL CONTAINERS AND ELEMENTS INSIDE TO THEIR MAX-HEIGHT AND NEW WIDTH*/
	.container 											{ width: 360px;}
	
	section .container > .row > .col-md-8.image-top.text-bottom 
														{ height: 360px;	}
														
	section .container > .row > .col-md-8.image-top.text-bottom .image
														{ height: 25%; bottom: 75%;	}
	
	section .container > .row > .col-md-8.image-top.text-bottom .text
														{ top: 25%; height: 75%	}
														
														
	section .container > .row > .col-md-4.image-top.text-bottom 
														{ height: 360px;	}
														
	section .container > .row > .col-md-2.image-top.text-bottom 
														{ /*float: left; height: 180px; width: 50%;*/ height: 180px; }
														
	section .container > .row > .col-md-2.image-top.text-bottom .image 
														{ bottom: inherit !important; float: left; height: 100%; position: inherit !important; width: 50%;}
	section .container > .row > .col-md-2.image-top.text-bottom .text 
														{ top: inherit !important; float: right; height: 100%; position: inherit !important; width: 50%;}

	section .container > .row > .col-md-6 .image 		{/*height: 160px; */}
	section .container > .row > .col-md-8 .image 		{ /*height: 160px;*/}
	.text 												{ height: 340px;}
	
	section .container > .row > .col-md-8 .image .carousel img 	{ height: 340px !important; margin-left: -50% !important; max-width: inherit !important;	}
	section .container > .row > .col-md-6 .image .carousel img 	{ height: 340px !important; margin-left: -20% !important; max-width: inherit !important;	}

		
	.col-md-2 											{ /*height: 180px;*/}
	.col-md-4 											{ /*height: 360px;*/}
	.col-md-6 											{ /*height: 360px;*/}
	.col-md-8 											{ /*height: 360px;*/}
	.col-md-2.half-size 								{ /*height: 360px*/}
	
	
	.col-md-2 .image img { }
	.col-md-4 .image img { }
	.col-md-4 .image-top.text-bottom .image img 		{/*height: 180px; max-width: inherit !important;*/}
	.col-md-6 .image img 								{ /*height: 340px; max-width: inherit !important; margin-left: -90px;*/}
	.col-md-6 .image-top.text-bottom .image img 		{ /*height: 180px; max-width: inherit !important;*/}
	.col-md-8 .image img 								{ /*height: 340px; max-width: inherit !important; margin-left: -175px;*/}
	.col-md-8 .image-top.text-bottom .image img 		{ /*height: 180px; max-width: inherit !important; margin-left: -175px;*/}
	
	.col-md-8 .carousel-inner > .active 				{ /*left: -175px;*/}
	.col-md-8 .carousel-inner img 						{ margin-left: 0px;	}
			
	/* DEFAULT VIEW */
	/* SET THE NAVIGATION ROW TO THE HALF HEIGHT OF THE GRID SYSTEM */
	 navigation .row 									{ width: 360px; height: 180px !important;}
	
	/* SET PADDING FOR SECTION */
	section#home,
	#detail section,
	section#imprint 									{ padding-top: 190px;}
	
	/* SET THE HEIGHT FOR THE TEXTAREA */
	textarea.form-control 								{ height: 90px;}
}


/* Small devices */
@media (min-width: 768px) and (max-width: 991px) {
	/*section:before {content: "(min-width: 768px) and (max-width: 991px)"; background: red; position: fixed; top: 10px; z-index: 9999;}*/
	
	body 												{ font-size: 102%;}
	/*h1, h2, h3, h4 										{ font-size: 210%;}*/
	
	
	/* SET ALL CONTAINERS AND ELEMENTS INSIDE TO THEIR MAX-HEIGHT AND NEW WIDTH*/
	.container .row 									{ height: 365px;}
	.col-md-2 											{ width: 25%; float: left;}
	.col-md-4 											{ width: 50%; float: left;}
	.col-md-6 											{ width: 75%; float: left;}
	
	.half-size .col-md-5		 						{ float: left; width: 50%;}


	/* DEFAULT VIEW */

	
	/* RESPOSITIONING THE SMALL LOGO */
	navigation img.small 								{ padding-top: 25px; }
	
	/* SET THE NAVIGATION ROW TO THE HALF HEIGHT OF THE GRID SYSTEM */
	 navigation .row 									{ width: 740px;	height: 185px !important;}
	
	/* SCROLLED VIEW */
		/* SET THE NAVIGATION ROW TO THE QUARTER HEIGHT OF THE GRID SYSTEM */
	navigation.affix .row 								{ height: 90px !important;	}
	
	/* SET THE MENU COL THE NEW WIDTH (FLOAT THE ITEMS)*/
	navigation.affix .col-md-2 							{ width: 50%;}
	
	/* RESPOSITIONING THE NAVI */
	navigation.affix ul.nav  							{ bottom: 25px;}
	
	/* FLOAT THE NAVIGATION ITEMS*/
	navigation.affix .nav-stacked > li 					{ float: left; }
			
		
	/* SET PADDING FOR SECTION */
	section 											{ padding: 100px 0;}
	
	section#home,
	#detail section,
	section#imprint 									{ padding-top: 195px;}
	
	/* SET THE HEIGHT FOR THE TEXTAREA */
	textarea.form-control 								{ height: 100px;}
}

/* Large Medium Devices */
@media (min-width: 992px) and (max-width: 1199px) {
	/*section:before {content: "(min-width: 992px) and (max-width: 1199px)"; background: red; position: fixed; top: 10px; z-index: 9999;}*/
	
	body 												{ font-size: 105%;}
	
	/* RESPONSIVE NAVIGATION */
	navigation#responsiveNavigation						{ display: none !important; }
	
	
	/* SET NAVIGATION WIDTH AND HEIGHT */
	navigation 											{ width: 172px; height: 384px;}
	
	
	/* SET PADDING FOR SECTION */
	section 											{ padding: 202px 0 0;}
	
	/* SET ALL CONTAINERS AND ELEMENTS INSIDE TO THEIR MAX-HEIGHT*/
  	.container .row 									{ height: 380px;}
	
	/* SET THE HEIGHT FOR THE TEXTAREA */
	textarea.form-control 								{ height: 114px;}
}

/* Large Desktops */
@media (min-width: 1200px) {
	/*section:before {content: "(min-width: 1200px)"; background: red; position: absolute; top: 10px; z-index: 9999;}*/
	
	/* RESPONSIVE NAVIGATION */
	#responsiveNavigation						{ display: none !important; }
	
	/* SET NAVIGATION WIDTH AND HEIGHT */
	navigation 											{ width: 210px; height: 460px;}
		
	/* SET PADDING FOR SECTION */
	section 											{ padding: 240px 0 0;}
	
	/* SET ALL CONTAINERS AND ELEMENTS INSIDE TO THEIR MAX-HEIGHT*/
	.container .row 									{ height: 460px;}
}