/* ---------------------------------------------- /*
 * Responsive Media Queries
/* ---------------------------------------------- */



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

   /* iPad in landscape */
   
   
 

 }

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

   /* iPad in portrait */
	
	
}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 

  /* iPhone 5 & 5S in landscape */

}



@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 

  /* iPhone 5 & 5S in portrait */
    
    
}


@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 

  /* iPhone 6/7/8 in landscape */

	 .slideshow .placeholder{
		height:200px;
	  }  
	
}



/* For general iPad layouts */
@media only screen and (device-width: 768px) {
 
 /*
 #paralaxSlice1, #paralaxSlice2, #paralaxSlice3, #paralaxSlice4, #paralaxSlice5 {
   background-attachment: scroll;
 }
 */
  
}



/*-----------------------

Extra small devices Phones (<768px) - xs

Small devices Tablets (>= 768px) - sm

Medium devices Desktops (>= 992px) - md

Large devices Desktops (>=1200px) - lg

*/

/*-----------------------*/

@media (min-width: 768px){
 /*
 .modal-dialog {
    width: 850px;
    margin: 30px auto;
 }
 */
}

/*-----------------------*/

@media (max-width: 320px) { 


}


/*-----------------------*/

@media (min-width: 321px) and (max-width: 568px) { 


}



/*------------------------------------*/
/* Extra Small Handy Portrait */
@media (max-width: 767px) { 

	  body{
		padding-top: 61px; 
	  }
	  
	  .slideshow .placeholder{
		height:200px;
	  }  
	  
     .slideshow .inner-bg {
	    padding: 55px 0 10px 0;
      }
	  
	  .slideshow .slideshow-dots{
		 margin-top:55px;
	  }
	  
	  
	  .navbar-default {
       	  
		/* 
		background: lightgreen;
		background: linear-gradient(0deg, #fff 0px, #ddd 80px);  
		background-color: #ffd02b;
		padding-top: 5px !important; 
		height: 35px !important; 
		*/
	  }
	
	  .navbar {
		min-height: 60px;
		margin-bottom: 20px;
	   }

	   .navbar-collapse{
		  background-color:#fff;
	   }

	  .navbar-header {
		min-height: 60px;
		float: none;
		/*background-color: lightgreen;*/
		background: linear-gradient(0deg, #fff 1px, #ddd 100px);	
	   }
	
	  .navbar-toggle{
		  margin-top:13px;
	  }
	
	  .navbar-brand {
		 margin-top:0;
		 padding-top:0;
	  }
		
	  .navbar-brand img{
		 height:50px;
		 margin-top:5px;
	  }
	  
	 .navbar-default .navbar-nav>li>a {
		padding-top: 10px;
		padding-bottom: 10px;	  
	  }
	  
	  /*
	 .slideshow .placeholder{
		height:200px;
	  } 
	  */ 
	
	  
	 #willkommen h1{
		font-size:2.5em;
		line-height:1.2em;
	  }
	  
     #willkommen p{
		 text-align:left;
		 margin-bottom:20px;
		 hyphens: auto;
	 }
	  
	 #willkommen p:last-child{
	     /*margin-bottom:20px;*/
	} 
	  
	  
	section {
	  padding-top:80px;
	  padding-bottom:0px;
	}	  

	 section h2 {
		font-size: 1.4em;
		font-weight: 600;
		padding-bottom: 0px
	  }

	 section h2::before, section h2::after {
	   width: 25px;
	   height: 2px;
	 }  
  
	section h3 {
	  font-size: 1.1em;
	  margin-bottom: 30px;
	  font-weight: 600;
	  line-height: 25px;
	}  


   .ueberuns ul {
	   margin-top:30px;	 
    }

   .ueberuns  ul li:last-child {
     margin-bottom: 0px;
   }

   #service, #faq {
      padding-top: 80px;
   }

	.service .icon-box {
		height:auto;
	}

	.leistungen .icon-box {
		margin-bottom:20px;
		height:auto;	   
    }

    .leistungen h3{
		margin-bottom:30px;
		font-size: 1.2em;
	}


    .faq h4.panel-title{
		display:inline-block;   
	    width:90%;
	}		
	
    .faq .panel-plus-link a{
		display:inline-block;   
	}	

	#datenschutz {
		padding-top:0px;
	}
  
  	#kontakt {
		padding-top:80px;
	}
	
	.kontakt h2{
	   margin-bottom:0px;
	}
		        
	  
	.footer-top ul>li{
		display: inline-block;
		list-style:none;
	}	

	.footer-top ul li a::before { 
	  content: none;
	  margin-right: 0px;
	}

	.footer-top ul>li:after {
		content: " \00b7";
	 }
	
	.footer-top ul>li:last-child:after { 
	   content: none; 
	}

	.footer-top h3 {
		margin-bottom: 0px;
		margin-top:25px;
	}

	.footer-top {
		padding-top:25px;
	}  
  
  
   .leistungsbeschreibung h4{
	  /* padding-top:25px;*/	     
   }
  
  
}

/*------------------------------------*/
/* Small - Tablet hochkant */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) { 
      
  body{
	padding-top: 121px; 
  }
	
 .navbar {
   /* position: relative;*/
 }	  
	  
 .navbar-default  {
	background: linear-gradient(0deg, #fff 0px, #ddd 140px);
	  
	 /*
	background: DarkOrange;
    background: DarkOrange;
    background-color: #ffd02b;
	padding-top: 5px !important; 
    height: 35px !important; 
	*/
 }

  .slideshow .placeholder{
	height:220px;
  }

 .navbar-header {
   min-height: 60px;
 }

 .navbar-brand {
  height:60px;
 }

 .navbar-brand img{
   height:50px;
   margin-top:0px;
   transform: translateX(-50%);
   left: 50%;
   position: absolute;
  }

  .nav.navbar-nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
  }
  
  ul.navbar-nav {
	  padding-top: 10px;
	  width:100%;
	  text-align:center;
	  float:none !important;
	  display: table;
	  table-layout: fixed;
	  margin: 0 auto;		
  }

  .navbar-default .navbar-nav>li>a {
	padding-top: 15px;
    padding-bottom: 15px;
	padding-right:15px;
	padding-left:15px;
 }

 /*
  .slideshow .placeholder{
	  height:220px;
	}  
 */

	section {
	  padding-top:130px;
	  padding-bottom:0px;
	}	 
	
    #willkommen h1{
	  line-height:1.3em;
    }
	
	
	.leistungen .icon-box {
		margin-bottom:20px;
		height:auto;
    }


   .ueberuns ul {
	   margin-top:30px;	 
    }

   .ueberuns  ul li:last-child {
     margin-bottom: 0px;
   }

	.service .icon-box {
		height:auto;
	}

    .branchen h4{
		margin-top:15px;		
	}

	#kontakt, #referenzen, #branchen, #leistungen, #ueberuns, #projektablauf {
		padding-top:160px;
	}

	.kontakt h2{
		font-size: 1.8em;
	}

	.footer-top ul>li{
		display: inline-block;
		list-style:none;
	}	

	.footer-top ul li a::before { 
	  content: none;
	  margin-right: 0px;
	}

	.footer-top ul>li:after {
		content: " \00b7";
	 }
	
	.footer-top ul>li:last-child:after { 
	   content: none; 
	}

	.footer-top h3 {
		margin-bottom: 0px;
		margin-top:25px;
	}

	.footer-top {
		padding-top:25px;
	}



}


/*------------------------------------*/
/* Medium - Tablet quer */
@media (min-width: 992px) and (max-width: 1199px) and (orientation: landscape) { 

	.navbar-default {
	  background: linear-gradient(0deg, #fff 0px, #ddd 100px);

	  /*
	  background: DeepPink;
	  background-color: #ffd02b;
	  padding-top: 5px !important; 
      height: 35px !important;  
	  */
	}
	
    
    .slideshow .placeholder{
	  height:220px;
	}
	
	.navbar-default .navbar-nav>li>a {
	  padding-right: 10px;
      padding-left: 10px;
	}

   .navbar-brand{
	 padding: 10px 10px;	
   }

	section {
	  padding-top:140px;
	  padding-bottom:0px;
	}	 

    #willkommen h1{
	  line-height:1.3em;
    }

    .leistungen .icon-box {
		height:350px;
		margin-bottom:25px;	   
    }
   
	.leistungen .title {
	  font-size: 16px;
	}
	
	.leistungen .description {
	  line-height: 25px;
	}	
	
	.streifen h3{
	  padding-top:60px;
	  padding-bottom:60px;
	}

    .branchen .infofeld{
		height:375px;
		margin-bottom: 10px;
	}
	
	.branchen .infofeld_2{
		height:auto;
	}
	
	.footer-top li+li {
		margin-top: 1px
	}

}

/*-----------------------*/
/* Large  */
@media (min-width: 1200px){ 
      
	 .navbar-default  {
		/*background: #ffd02b; */
	 }

}


/*-----------------------*/
/* Smartphone Landscape*/
@media (min-width: 768px) and (max-width: 991px) and (orientation: landscape) { 

  body{
	padding-top: 121px; 
  }
	
 .navbar-default  {
	background: linear-gradient(0deg, #fff 0px, #ddd 140px);
 }

 .slideshow .placeholder{
	height:100px;
  }

 .navbar-header {
   min-height: 60px;
 }

 .navbar-brand {
  height:60px;
 }

 .navbar-brand img{
   height:50px;
   margin-top:0px;
   transform: translateX(-50%);
   left: 50%;
   position: absolute;
  }

  .nav.navbar-nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
  }
  
  ul.navbar-nav {
	  padding-top: 10px;
	  width:100%;
	  text-align:center;
	  float:none !important;
	  display: table;
	  table-layout: fixed;
	  margin: 0 auto;		
  }

  .navbar-default .navbar-nav>li>a {
	padding-top: 15px;
    padding-bottom: 15px;
	padding-right:15px;
	padding-left:15px;
 }

	section {
	  padding-top:130px;
	  padding-bottom:0px;
	}	 
	
    #willkommen h1{
	  line-height:1.3em;
    }
	
	.leistungen .icon-box {
		margin-bottom:20px;
		height:auto;
    }

   .ueberuns ul {
	   margin-top:30px;	 
    }

   .ueberuns  ul li:last-child {
     margin-bottom: 0px;
   }

	.service .icon-box {
		height:auto;
	}

    .branchen h4{
		margin-top:15px;		
	}

	#kontakt, #referenzen, #branchen, #leistungen, #ueberuns, #projektablauf {
		padding-top:160px;
	}

	.kontakt h2{
		font-size: 1.8em;
	}

	.footer-top ul>li{
		display: inline-block;
		list-style:none;
	}	

	.footer-top ul li a::before { 
	  content: none;
	  margin-right: 0px;
	}

	.footer-top ul>li:after {
		content: " \00b7";
	 }
	
	.footer-top ul>li:last-child:after { 
	   content: none; 
	}

	.footer-top h3 {
		margin-bottom: 0px;
		margin-top:25px;
	}

	.footer-top {
		padding-top:25px;
	}



}