/* =============================================================================
   PLACEHOLDER Media Queries for Responsive Design.
   These override the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */


}	   
/* =============================================================================
   CSS Mediaqueries Boilerplate
   ========================================================================== */ 
   
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {

#TagRow {background-color: #C60000 ;
font-size:1em;
line-height: 2em;
padding: 10px 0 11px;
}
span.SubNavigationTitle a{display: block;}

span.SubNavigationTitle {
float: none;
display: block;
text-align: center;	
}


#BigListLink a, #BigList h1 {font-weight: 1em; line-height:1.5em}


	nav li a {
		font: 400 11px/1.4 'Open Sans', Helvetica, Arial, sans-serif;
	}
	
	nav#mainNavigation li.firstNavItem {
		display: none;
	}
	nav#mainNavigation li a {
		width: 42%;
		border: 1px solid #dfdfdf;
		font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
	}
 
 	nav#mainNavigation li:last-child a {
 	border: 1px solid #dfdfdf;
 	}
	
}



@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */
  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */
  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */

#BigListLink a, #BigList h1 {font-weight: 1em; line-height:1.5em}
}





/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
   consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){

	#Layout .verticaltelephone.graybox {margin: 0 auto 21px; top: 0px}
	
 	#BigListLink a, #BigList h1 {font-weight: 1em; line-height:1.5em}
	nav li:nth-child(3) a.mainNaviItem link, nav li:nth-child(4) a.mainNaviItem link {
		border-top: 1px solid #fff;
	}

	nav#mainNavigation {margin: 5px auto;}
	
	/* nav#mainNavigation ul li a {
		width: 41%;
		font: 400 12px/1.4 'Open Sans', Helvetica, Verdana, Arial, sans-serif;
		padding-top: 12px;
		padding-bottom: 12px;
		border: 1px solid #dfdfdf;
	}

	nav#mainNavigation ul li:nth-child(even) a {
		border-right: none;
	}

	nav#mainNavigation ul li:nth-child(4) a, nav#mainNavigation ul li:nth-child(5) a {
		border-top: none;
	}

	nav#mainNavigation li.firstNavItem {
	display: none;
	} */
	span.SubNavigationTitle a{display: block;}

span.SubNavigationTitle {
float: none;
display: block;
text-align: center;	
}
}


/* Mobile Breakpoint ----------- */
@media handheld, only screen and (max-width: 767px) {
	.bigtext span {font-weight: 1em; line-height:1.5em; text-indent: 0; padding: 11px 20px 10px;display: block;}
	nav#mainNavigation li.firstNavItem {
	display: none;
	}
	
	#Content {margin-top: 21px;}
	#TagRow {
	background-color: #C60000;
	font-size:1em;
	line-height: 2em;
	padding: 10px 0 11px;
	}

	.row, .body, .container {
	width: 100%;
	margin-left:0;
	margin-right:0;
	padding-left:0;
	padding-right:0;
	}
	/* kill prefixes and suffixes, otherwise 1-column version breaks */
	.pre_1, .pre_2, .pre_3, .pre_4, .pre_5, .pre_6, .pre_7, .pre_8, .pre_9, .pre_10, .pre_11 {padding-left: 0;}
	.suf_1, .suf_2, .suf_3, .suf_4, .suf_5, .suf_6, .suf_7, .suf_8, .suf_9, .suf_10, .suf_11 {padding-right: 0;}

	/************************************************************************/

	/* cssgrid.net - mobile presets */
	.col_1, .col_2, .col_3, .col_4, .col_5, .col_6,
	.col_7, .col_8, .col_9, .col_10, .col_11, .col_12,.SubNavigationTitle {
		clear: both;
		float: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: 20px;
		padding-right: 20px;
		width: auto;
		width: -moz-available;
	}


	/* Columnal - sub columns */
	.col_2 .col_1, 
	.col_3 .col_2, .col_3 .col_1,
	.col_4 .col_3, .col_4 .col_2, .col_4 .col_1,
	.col_5 .col_4, .col_5 .col_3, .col_5 .col_2, .col_5 .col_1,
	.col_6 .col_5, .col_6 .col_4, .col_6 .col_3, .col_6 .col_2, .col_6 .col_1,
	.col_7 .col_6, .col_7 .col_5, .col_7 .col_4, .col_7 .col_3, .col_7 .col_2, .col_7 .col_1,
	.col_8 .col_7, .col_8 .col_6, .col_8 .col_5, .col_8 .col_4, .col_8 .col_3, .col_8 .col_2, .col_8 .col_1,
	.col_9 .col_1, .col_9 .col_2, .col_9 .col_3, .col_9 .col_4, .col_9 .col_5, .col_9 .col_6, .col_9 .col_7, .col_9 .col_8,
	.col_10 .col_9, .col_10 .col_8, .col_10 .col_7, .col_10 .col_6, .col_10 .col_5, .col_10 .col_4, .col_10 .col_3, .col_10 .col_2, .col_10 .col_1,
	.col_11 .col_10, .col_11 .col_9, .col_11 .col_8, .col_11 .col_7, .col_11 .col_6, .col_11 .col_5, .col_11 .col_4, .col_11 .col_3, .col_11 .col_2, .col_11 .col_1,
	.col_12 .col_11, .col_12 .col_10, .col_12 .col_9, .col_12 .col_8, .col_12 .col_7, .col_12 .col_6, .col_12 .col_5, .col_12 .col_4, .col_12 .col_3, .col_12 .col_2, .col_12 .col_1 {
		padding-left: 0;
		padding-right: 0;
		width: 100%;
	}

	/* .row {width: 100%;} */
	/* Type presets */
	.container h1 {margin:.5em 0 .5em;}
	.container h2 {margin:.5em 0 .535em;}
	.container h3 {margin:.5em 0 .57em;}
	.container h4 {margin:.5em 0 .615em;}
	.container h5 {margin:.5em 0 .67em;}
	.container h6 {margin:.5em 0 .8em;}

	/* .reverse {padding-top: 1em; margin-bottom: 1em;} */

	/* Columnal content control - use on any elements to show/hide content on mobile */
	.mobile-hide {display: none;}
	.mobile-only {display: block;}

	/*****************************************
	   CUSTOM ADDITIONS FOR MOBILE SITE LAYOUT 
	*****************************************/
	
	
	header h1 {
		font-size:2.571em;
		line-height: 1.333em;	
	
	}
	#Logo {
		text-align: center;
	}
	
	a.LogoBadge img {
		height: 64px;
	}

	#page{margin-top: 0;}
	
	#PageName h1  {text-align: center;margin: 0 auto;}
	
	#niederlassung .location{
     float: none;
     width: 100%;
     text-align: center;
     padding-bottom: 10px;
     margin: 0 auto;
     border-bottom: 1px solid #c4c4c4;
     padding-left: 0;
 }
    #niederlassung.container{
        width: auto;
    }
    #niederlassung .location:last-child{
        border-left: 0;
        border-bottom: 0;
    }
     
    #startlinks, #startrechts{
        float: none;
        width: 95%;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center ;
    }
    
    #startlinks h3{
        text-align: center;
    }
    
    #startlinks ul li, #startrechts ul li{
        text-align: left;
    }
    
    #startlinks ul, #startrechts ul{
        margin-left: 10%;
    }
    
    
    #startrechts{
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #808080;
        border-left:0;
    }
    
    #BigContactRow .small em{
        top: 0;
    }
    
    #BigContactRow .col_4{
        width: 90%;
        float: none;
        margin-right: 0;
        text-align: center;
    }
    
    #niederlassung, #fullwidth{
        margin-right: 0;
    }
    
    #BigContactRow h3{
        top: 0;
    }
	
	nav#mainNavigation{height: 100%; padding: 0 20px;}
/* 	nav#mainNavigation ul li{display: block; width: 100%; margin-top: 6px; } */
	
	#PageName p {padding: 0;text-align: center;	margin:  0px auto 12px;	}
	#HomePageBoxes .redbox {width: 100%; padding-left: 20px; padding-right:  20px;}
	
	.TestiLine .rdqoute{left: 49px;}
	.TestimonialImage {	margin-bottom: 21px;}
	.TestimonialDetailLink {margin: 21px 42px;}
	 li a.listallTestimonials {width: 30px; text-indent: 0;}
	 ul.slidecontrols {margin: 0 auto; width: 200px;}
	footer p{text-align: center;}
	
	.FooterBottom ul{
	display: block;
	margin: 0 auto 21px;
	text-align: center;
	width: 185px;
	}
	.FooterBottom ul.right{
	width: 215px;
	}
	/*
	nav#mainNavigation li:last-child a, nav#mainNavigation li:nth-child(4) a {
		border-right: none;
	}
 
	nav#mainNavigation li:nth-child(5) a, nav#mainNavigation li:nth-child(6) a, nav#mainNavigation li:nth-child(7) a, nav#mainNavigation li:nth-child(8) a {
		border-bottom: none;
	}
	*/
	
	.DateLabel {
		padding: 0.5% 1%;
		margin: 2.9%;
		width: 15%;
		font-size: 0.86em
	}
	
	a.PostTitle { width: 74%; font-size: 0.86em; overflow: hidden; padding-top: 15px; }
	
	#BigList h1 {margin-bottom: 0; height: 42px;}
	#BigContactRow h3 {padding-left: 0;left: 0;}
	#BigContactRow div.tel {margin: 21px auto;}
}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
 	.bigtext span {font-size:1.286em;line-height: 3.278em;padding-left: 20px;display: block;}
 	
 	aside {	margin-top: 42px;	text-align: left;	min-height: 210px;	}	
 	aside#BlogSideBar {margin: 0 0 21px 0 ; }
 	
 	#BigContactRow.graybox{margin: 21px 0 43px;}
  
  	nav#mainNavigation {width: 100%; overflow: hidden;}
  	
  	 ul.BigListItems li a{font-size: 1.286em;line-height: 3.278em;}
  	 
  
  
}	
	

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
	nav#mainNavigation li.firstNavItem {display: none;}
}
 

 
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {


	nav#mainNavigation li.firstNavItem {display: none;}
	nav#mainNavigation li:last-child a {border: medium none;}
 	nav#mainNavigation {width: 100%; overflow: hidden;}
 	#Layout .verticaltelephone a.btn-huge{font-size: 1.2em; font-weight: bold; }
 	
 	#BigList ul.BigListItems li span{font-size: 1.286em;line-height: 3.278em;}

 }
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1023px)
and (orientation : portrait) {

	.verticaltruck,nav#mainNavigation li.firstNavItem {display: none;}
	
	nav#mainNavigation {margin: 5px 0;width: 75%;overflow: hidden;/* padding-left: 24.5%; */}
/* 	nav#mainNavigation ul li a {width: 36.5%;border: 1px solid #DFDFDF;} */
	
	#Layout .verticaltelephone.graybox {margin: 0 auto 42px; top: 0px}
	#Layout .verticaltelephone a.btn-huge{font-size: 1em; font-weight: bold; }
	
	#BigList ul.BigListItems li span{font-size: 1.286em;line-height: 3.278em;}
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1024px) {

	nav#mainNavigation li:last-child a {border:none;}
	nav#mainNavigation{width: 100%; overflow: hidden;}
	nav#mainNavigation ul li a {
	    -moz-transition: all 0.5s ease 0s;
		border: none;
	/* 	border-right: 1px solid #DFDFDF; */
	    font: bold 13px/2em 'Open Sans',Helvetica,Verdana,Arial,sans-serif;
	    width: 10%;
        /* width: 18.5%; */
	}
 	
	
	nav#mainNavigation li.firstNavItem {display: none;}
/* 	nav#mainNavigation ul li:nth-child(even) a {border-right: 1px solid #DFDFDF;} */
	
	nav#mainNavigation ul li a:hover,nav#mainNavigation ul li a:focus,nav#mainNavigation ul li a:hover.current  { 
					cursor: pointer;
					color: #fff;
					font-weight: bolder;
					text-shadow: 0 0 2px rgba(255,0,0,0.5);
					background-color: transparent;
				/* 	background-color:  rgba(3, 4, 3, 0.9); */
				/* 	padding: 3px 10px 17px; */
					position: relative;
				}
					
					
					
				nav#mainNavigation ul li a span.clickme {
				content: "klick mich";
				position: absolute;
				font-weight: 700;
				font-size: 0.86em;
				color: rgba(255,0,0,0);
				top: 30px;
				display: block;
				text-align: center;
				width: 87%;
				background: transparent;
				text-shadow: none;
				/*TRANSISTIONS*/
				-webkit-transition: all 0.5s ease;
				-moz-transition: all 0.5s ease;
	  			-o-transition: all 0.5s ease;
	 			-ms-transition: all 0.5s ease;
	       		 transition: all 0.5s ease;
				}	
					
				
				nav#mainNavigation ul li a:hover span.clickme {
				color: rgba(255,0,0,1);
				top: 23px;
				}	


}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {

/* Styles */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}