/****************************************************************************************
* RESPONSIVE DEFINITIONEN
*****************************************************************************************/	

/****************************************************************************************
* ab 768px
*****************************************************************************************/

@media screen and (min-width: 768px) {	
	
	/* Hover + Transition */	
	a:hover 				{color: inherit; text-decoration: underline; 
							 -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: all 200ms ease;}
	.Content a:hover,
	.SubNav a:hover 		{filter: alpha(opacity = 65); -ms-filter: "alpha(opacity = 65)"; opacity: .65; 	
							 -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: all 200ms ease;}	
	
	/* Header Minified Transition */
	.MinifiedTransition,
	.NavBar nav .Cat 		{-webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease;}	
		
}

/****************************************************************************************
* Standard: 820px - 1300px
*****************************************************************************************/

@media screen and (min-width: 1000px) and (max-width: 1300px) {

	body 												{font-size: 15px;}
	header .Logo										{}	
	header												{min-width: 820px;}	
	.Wrap												{width: 100%; max-width: 1024px;}
	
	.NavBarTop .ContactLinks .LinkHotline				{}
	.NavBarTop .ContactLinks .LinkHotline a				{line-height: 2.222;}
	
	.Content  											{padding: 2.5em 0 2.75em 0; width: 100%; position: relative;}

	.Slider,
	.Slider .Slide										{height: 275px;}	
	.Slider .Slide .Wrap 								{margin-top: 2.75em;}
	.Slider .Title 										{font-size: 280%;}
	.Slider .SubTitle 									{width: 80%; font-size: 125%;}
	
	/* Visual */
	.Slider > .Wrap 									{background-position: 92% bottom; background-size: 21em auto;}	
	.RowUSP .Wrap										{background-position: 92% top; background-size: 21em auto;}	
	
}

/****************************************************************************************
 Tablet Portrait (min-width: 768px) and (max-width: 991px)
*****************************************************************************************/

@media screen and (min-width : 768px) and (max-width :  1000px) {


	body 												{width: 100%; font-size: 16px; text-align: center;}		
	header												{min-width: 768px; height: 5.75em;}
	.Wrap												{width: 100%; overflow: hidden; padding: 0 1.5em 0 1.5em;}

	header .Logo,
	#FixNavBar .Logo,
	.NavBar nav											{left: 1.15em;}
	
	header .Logo										{top: 0.25em; width: 23%; height: 3.75em;}
	
	header.Minified 									{height: 3.75em;}
	header.Minified .NavBarTop .MetaNav 				{top: 1.8em;}
	header.Minified .NavBarTop .ContactLinks			{top: 1.8em;}
	header.Minified #MainMenue 							{height: 0;}
	header.Minified #MainMenue .Logo 					{height: 2.25em; width: 7em; top: 0.15em;}
	
	#TopMenue 											{}
	#MainMenue											{}

	.NavBarTop 											{font-size: 80%;}	
	.NavBarTop .MetaNav									{left: auto; right: 27rem; top: 2.5rem;}
	.NavBarTop .MetaNav .OptionalResponsive				{display: none;}	
	.NavBarTop .ContactLinks							{top: 2.5rem;}		
	.NavBarTop .ContactLinks .LinkHotline a				{font-size: 120%; line-height: 2.1333;}
	.NavBarTop .ContactLinks .LinkHotline span:Spacing	{font-size: 120%; line-height: 2.1333;}
	
	footer 												{}	
	footer .FooterRow01 p,
	footer .FooterRow02 p								{font-size: 80%;}	
	
	h1, .h1 											{font-size: 220%;}
	h2, .h2												{font-size: 220%;}
	h3, .h3  											{font-size: 138.889%;}
	
	.RowUSP .h1, .RowUSP .h2, 
	.RowSecurityCheck .h1, .RowSecurityCheck .h2, 
	.RowTelenot .h1, .RowTelenot .h2 					{font-size: 170%;}
	
	.RowTop												{margin-top: 5.75em;}
	.RowUSP	.Col p, 
	.RowUSP	.Col ul										{font-size: 80%;}
	.RowUSP	.OptionalResponsive,
	.RowTelenot	.OptionalResponsive						{display: none;}
	.RowSecurityCheck .ContactLinks .LinkHotline		{width: 100%;}
	.RowGoogleMaps iframe								{height: 20em !important;}
	.RowPartners .Pic									{height: 6.5em;}
	
	.Content  											{padding: 2.5em 0 1.75em 0;}
	.ContentContact .Width33							{width: 50%;}
	.Content404											{padding-bottom: 20em;}
	
	.Slider,
	.Slider .Slide										{height: 335px;}
	.Slider												{margin-top: 5.75em;}			
	.Slider .Slide .Wrap 								{margin-top: 2.75rem;}
	.Slider .Title										{font-size: 258%;}
	.Slider .SubTitle									{font-size: 130%;}
	.Slider ul li										{font-size: 125%;}
	.Slider .LogoRow 									{top: 0.375rem; font-size: 75%;}

	/* Visual */	
	.Slider > .Wrap 									{background-position: 92% bottom; background-size: 19em auto;}	
	.RowUSP .Wrap										{background-position: 92% top; background-size: 19em auto;}	

}

/****************************************************************************************
 Phone: max 767px
*****************************************************************************************/

@media screen and (max-width: 767px) {

	body 												{font-size: 17px;}

	/* Desktop Elemente ausblenden ----------------------------------------------------- */
	
	#TopMenue, 
	#MainMenue,
	#SectionMenue,
	.Slider .LogoRow,
	footer .FooterRow01									{display: none;}

	.Slider												{margin-top: 50px;}
	.RowTop												{margin-top: 50px;}	
	
	header												{position: fixed; height: auto; z-index: 199; overflow: visible;}	
	header.Minified										{height: auto;}	
	.Wrap												{width: 100%; max-width: 767px; overflow: visible; padding: 0 1em 0 1em;}
	.Row												{overflow: visible;}	
	.Outer 												{margin: 0 7px 0 7px;}
	
	#MobileTransBg 										{display: none; position: fixed; width: 100%; height: 100%; overflow: hidden; z-index: 199; 
														 background: url("../img/m_bg_trans.png") repeat left top;}	
														 
	#MobileMenue										{height: 55px; display: block; position: fixed; left: 0; top: 0; margin: 0; width: 100%; background: #fff;
														-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.20); 
													 	-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.20);
													  	box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.20);}		
		
	.MobileClose 										{display: block; position: fixed; top: 0; right: 0; width: 100%; height: 50px; z-index: 201; 
														 text-align: right; background: #161616; color: #fff !important;}
	.MobileClose a 										{display: inline-block; margin-right: 15px; padding: 1.15em 2em 1.8em 1em; color: #fff; text-decoration: none;
														 background: url(/img/icon_close.png) right 13px no-repeat; background-size: 22px auto;}
	
	#MobileMenue .MobileLogo							{display: block; position: absolute; top: 8px; left: 15px; width: 150px; height: 40px; 
														 background: url(/img/logo.gif) no-repeat left top; background-size: auto 100%; z-index: 199;}
	#MobileMenue .MobileLogo span						{display: none;}
	
	#MobileMenue .ContactLinks span						{display: none;}
	#MobileMenue .LinkHotline 							{display: block; position: absolute; top: 18px; right: 60px; width: 40px; height: 40px; margin: 0px auto; z-index: 198;	
														background: url(/img/icon_hotline.png) left top no-repeat; background-size: 28px auto;}	
	#MobileMenue .LinkHotline span						{display: none;}
	
	#MobileMenue .MobileButton							{display: none; display: block; position: absolute; top: 4px; width: 50px; height: 50px; z-index: 200;}
	#MobileMenue .MobileButton a						{display: block; width: 100%; height: 100%;}														 
	#MobileMenue .MobileButtonNav						{right: 8px;}
	#MobileMenue .MobileButtonNav a 					{background: url(/img/m_button_nav.png) no-repeat center center; background-size: 38px 22px;}
	#MobileMenue .MobileButtonNav a span 				{display: none;}										 
														 
	#MobileNav											{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; 
														 background: #fff;}	
	#MobileNav .WrapNav									{position: absolute; top: 50px; left: 0; margin: 0; width: 100%; height: 100%; background: #fff;
														overflow: auto; text-align: left; -webkit-overflow-scrolling: touch;}
	#MobileNav .CatNav									{}	
	#MobileNav .CatNav .Cat								{border-bottom: 1px solid #161616; text-transform: uppercase; font-weight: 700; font-size: 120%;}	
	#MobileNav .CatNav .Cat .CatLink					{display: block; padding: 1.35rem 1rem 1.25rem 1rem; color: #161616; text-decoration: none;}
	
	#MobileNav .ContactLinks 							{background-color: #dfdfdf; padding-left: 1rem; font-size: 115%;}
	#MobileNav .ContactLinks a							{float: left; padding-top: 12px;}
	#MobileNav .ContactLinks .LinkHotline				{width: 100%; font-weight: 900; font-size: 145%; padding-top: 16px; padding-bottom: 14px;}
	#MobileNav .ContactLinks .LinkHotline span.Spacing  {display: none;}
	#MobileNav .ContactLinks .LinkHotline a  			{clear: both;}
	#MobileNav .ContactLinks .LinkHotline span.OptionalResponsive  {display: inline-block;}
	#MobileNav .ContactLinks .LinkMail					{font-weight: 900;}
	#MobileNav .ContactLinks p							{padding-top: 12px; line-height: 1.444;}
	
	#MobileNav .EndList									{background-color: #dfdfdf; height: 250px;}	

	
	.Content											{width: 100%; float: none; padding: 1.55em 0 1.5em 0; margin-bottom: 0;}	
	.Sidebar											{width: 100%; float: none; padding: 0.5em 0 2.5em 0;}	
	.FloatRight											{display: block; float: none;}	
	.FloatLeft											{display: block; float: none;}	
	
	.Col,	
	div.Width25,									
	div.Width33,	
	div.Width50,								
	div.Width66,
	div.Width75											{float: none; width: 100%;}	
	.Width90											{width: 100%}
	.ColPic												{margin-bottom: 0;}
	
	h1, .h1												{font-size: 200%;}
	h2, .h2												{font-size: 200%;}	
	
	.RowUSP .Content									{padding: 1.5em 0 0.5em 0;}
	.RowSecurityCheck .Content 							{padding: 1.5em 0 0.5em 0;}
	.RowTelenot .Content								{padding: 1.5em 0 2.5em 0;}
	.RowPartners .Content								{padding: 1em 0 1em 0;}
	
	.RowUSP .h1, .RowUSP .h2,
	.RowSecurityCheck .h1, .RowSecurityCheck .h2,
	.RowTelenot .h1, .RowTelenot .h2					{font-size: 140%;}

	.RowPartners .Pic									{height: 5.5em;}

	.RowSecurityCheck .h1 .OptionalResponsive			{display: block;}	
	.RowSecurityCheck .ContactLinks .LinkHotline		{width: 100%; margin-bottom: 0.35em;}
	.RowSecurityCheck .ContactLinks .LinkHotline a,
	.RowSecurityCheck .ContactLinks .LinkHotline span.Spacing	{font-size: 110%;}
	
	.RowTelenot .Width66								{width: 66%; float: left;}
	.RowTelenot .Width33								{width: 33%; float: left;}
	.RowTelenot .Width66 .OptionalResponsive			{display: none;}
	
	.RowCertificates .Pic								{height: 6em;}
	
	.Content404											{padding-bottom: 5em;}
	
	.Slider,
	.Slider .Slide										{height: 300px;}
	.Slider .Slide .Wrap								{margin-top: 1.75rem;}
	.Slider > .Wrap										{max-width: 100%;}
	.Slider .Link										{display: none;}
	.Slider .Title										{font-size: 200%; line-height: 1.1555;}
	.Slider .SubTitle									{font-size: 115%; width: 100%;}
	.Slider ul li										{font-size: 120%;}
	
	/* Visual */	
	.Slider > .Wrap 									{background-position: 92% bottom; background-size: 15.5em auto;}	
	.RowUSP .Wrap										{background-position: 92% top; background-size: 15.5em auto;}
	
}

/****************************************************************************************
 Phone: max 520px
*****************************************************************************************/

@media screen and (max-width: 520px) {

	body 												{max-width: 520px;}			

	.Col,	
	div.Width20,								
	div.Width33,	
	div.Width50,								
	div.Width66,
	div.Width75											{float: none !important; width: 100% !important;}
	
	.RowUSP .Content									{padding: 3.5em 0 0.5em 0;}
	.RowPartners .Pic									{width: 33%; height: 5.5em;}
	.RowTelenot .ColPic.Width33 img						{width: 50%;}
		
	.RowCertificates .Pic								{height: 7em; width: 50%;}
	
	.Slider,
	.Slider .Slide										{height: 370px;}
	.Slider .Title .OptionalResponsive					{display: block;}	
	
	/* Visual */	
	.Slider > .Wrap 									{background-position: 120% bottom; background-size: 16.5em auto;}	
	.RowUSP .Wrap										{background-position: 120% top; background-size: 16.5em auto;}	

}		

/****************************************************************************************
 Phone: max 500px
*****************************************************************************************/

@media screen and (max-width: 480px) {

	body 												{font-size: 16px;}

}

/****************************************************************************************
 Phone: max 350px
*****************************************************************************************/

@media screen and (max-width: 330px) {	

	body 												{font-size: 14px;}
	footer .Copyright,
	footer .FooterLogo									{float: none; text-align: left;}

	.Slider,
	.Slider .Slide										{height: 330px;}

	.RowCertificates .Pic								{width: 50%;}	
	
}

/****************************************************************************************
 Phone: Landscape Formate
****************************************************************************************/


@media screen and (max-height: 420px) and (orientation: landscape) {
	
	.Slider,
	.Slider .Slide										{height: 350px;}

}

@media screen and (max-height: 380px) and (orientation: landscape) {
	
	.Slider,
	.Slider .Slide										{height: 317px;}

}

@media screen and (max-height: 360px) and (orientation: landscape) {
	
	.Slider,
	.Slider .Slide										{height: 290px;}

}

@media screen and (max-height: 320px) and (orientation: landscape) {
	
	.Slider,
	.Slider .Slide										{height: 260px;}

}