/* Media Queries*/

/*----------------------- mobile menu ie 10/11 hack start*/
@media all and (-ms-high-contrast:none) {
#my-menu { 
	display: none
} /* IE10 */
	
*::-ms-backdrop, #my-menu { 
	display: none
} /* IE11 */
}
/*----------------------- mobile menu ie 10/11 hack end*/

/*----------------------- header start*/
@media only screen and (max-width: 1680px) {
.header-wrapper {
   padding: 0 20px;
}
}

@media only screen and (max-width: 1625px) {
#extra-header .no-mobile {  
	display: none;	     
}  
   
#extra-header ul li {
   margin-left: 12px;
}      
}	

@media only screen and (min-width: 950px) and (max-width: 1350px) {
.reviews-link.no-mobile {  
	display: none;	     
} 
} 

@media only screen and (max-width: 1225px) {
.reviews-stars .no-mobile {  
	display: none;	     
} 

#reviews-header {
   margin-left: 20px;
}      
}

@media only screen and (max-width: 1150px) {
#logo-header {	
	padding-top: 29px;
}

#logo-header img {	
   height: 38px;   
}
   
#menu-header {
   margin-top: 30px;
   margin-left: 30px;   
}  
}

@media only screen and (max-width: 1050px) {
#menu-header {
   margin-top: 35px;
   margin-left: 50px;
}
   
.main-menu li {
   padding: 5px 5px 5px 5px;   
	font-size: 1.6rem;   
	font-size: 16px;
	line-height: 1.6rem;
	line-height: 16px;	
}
   
#reviews-header {
   margin-left: 40px;
}    
}

@media only screen and (min-width: 950px) {
#btn-menu {
	display: none;	   
}    
}	

@media only screen and (max-width: 950px) {      
#menu-header {
	display: none;	
} 
} 

@media only screen and (max-width: 560px) {
.reviews-link.no-mobile {  
	display: none;	     
} 
   
#btn-menu {
	margin-left: 0px;  
}    
   
#reviews-header {
   margin-left: 20px;
}    
} 

@media only screen and (max-width: 380px) {
#reviews-header {
	display: none;	
}    
}    

@media only screen and (max-width: 1600px) {  
.margin-header {
   padding-top: 126px;   
}     
}
/*----------------------- header end*/

/*----------------------- breadcrumb start*/
@media only screen and (max-width: 1680px) {  
#breadcrumbs {
   padding-left: 20px;   
}
}  

@media only screen and (max-width: 1600px) {   
.has-subnav .margin-header {
   padding-top: 170px;   
}     
}  

@media only screen and (max-width: 920px) {     
.sub-menu .no-mobile { 
 	display: none;	  
}  
   
#breadcrumbs img {
   margin-right: 5px;   
}   
   
.sub-menu .sub-menu-choose {
   padding-right: 10px;
}        
   
.sub-menu li.sub-menu-choose::after {
   padding-left: 0px;
}  
   
.sub-menu li {
   margin-right: 22px;
}   
   
.sub-menu li:first-of-type {
   margin-right: 15px;   
}     
}  

@media only screen and (max-width: 700px) {   
#breadcrumbs {
   display: none; 
} 
   
.has-subnav .margin-header {
   padding-top: 123px;   
}     
}
/*----------------------- breadcrumb end*/

/*----------------------- sub-nav-plus start*/
@media only screen and (max-width: 1600px) {   
.has-subnav-plus .margin-header {
   padding-top: 212px;   
} 
}  

@media only screen and (max-width: 700px) {   
.has-subnav-plus .margin-header {
   padding-top: 165px;   
}     
   
#sub-nav-plus {
   margin-top: 101px;
   padding-left: 20px;  
}      
}
/*----------------------- sub-nav-plus end*/

/*----------------------- panel home start*/
/*@media only screen and (max-width: 1500px) {  
.panel-title-1 {
	font-size: 2.8rem;
	font-size: 28px;
	line-height: 2.8rem;
	line-height: 28px; 
}

.panel-title-2 {
   margin-top: 6px;
	font-size: 5.0em;
	font-size: 50px;
	line-height: 5.0rem;
	line-height: 50px;
}   
}  */

@media only screen and (max-width: 1530px) {     
.panel-title-1 {
	font-size: 2.2rem;
	font-size: 22px;
	line-height: 2.2rem;
	line-height: 22px; 
}

.panel-title-2 {
   margin-top: 6px;
	font-size: 5.0em;
	font-size: 50px;
	line-height: 5.0rem;
	line-height: 50px;
}     
}  

@media only screen and (max-width: 1300px) {  
#panel-small-1,
#panel-small-2 {
   padding: 15px 20px 15px 20px;
}   
   
.panel-title-1 {
	font-size: 1.8rem;
	font-size: 18px;
	line-height: 1.8rem;
	line-height: 18px; 
}

.panel-title-2 {
   margin-top: 6px;
	font-size: 4.5em;
	font-size: 45px;
	line-height: 4.5rem;
	line-height: 45px;
}  
   
#panel-big .btn,
#panel-small-1 .btn,
#panel-small-2 .btn  {   
   padding: 7px 16px;
   font-size: 1.5rem;
   font-size: 15px;
	line-height: 1.5rem;
	line-height: 15px;   
}   
}  

@media only screen and (max-width: 1150px) {  
#panel-small-1,
#panel-small-2 {
   padding: 15px 20px 15px 20px;
}   
   
.panel-title-1 {
	font-size: 1.4rem;
	font-size: 14px;
	line-height: 1.4rem;
	line-height: 14px; 
}

.panel-title-2 {
   margin-top: 6px;
	font-size: 2.3em;
	font-size: 23px;
	line-height: 2.3rem;
	line-height: 23px;
}  
   
#panel-big .btn,
#panel-small-1 .btn,
#panel-small-2 .btn  {    
   padding: 7px 16px;
   font-size: 1.5rem;
   font-size: 15px;
	line-height: 1.5rem;
	line-height: 15px;   
}  
}  

@media only screen and (max-width: 800px) {   
.panel-slider,
.panel-claims {
   float: none;
   width: 100%;  
   margin-left: 0%;
}
   
.panel-title-1,
.panel-slider-title-1 {
	font-size: 2.2rem;
	font-size: 22px;
	line-height: 2.2rem;
	line-height: 22px; 
}

.panel-title-2,
.panel-slider-title-2 {
   margin-top: 6px;
	font-size: 5.0em;
	font-size: 50px;
	line-height: 5.0rem;
	line-height: 50px;
} 
   
#panel-small-1,
#panel-small-2 {
   padding: 20px 9% 20px 9%;
}      
}
/*----------------------- panel home end*/

/*----------------------- willkommen start*/
@media only screen and (max-width: 1200px) {  
#willkommen .circle {
   width: 100px;
   height: 100px;
}

#willkommen .circle > img {
   width: 60px;
   height: 60px;   
}   
   
.icons p {
   margin-top: 15px;
   margin-bottom: 0;
	font-size: 2.0rem;   
	font-size: 20px;
	line-height: 2.0rem;
	line-height: 20px;
}     
}  

@media only screen and (max-width: 810px) {  
#willkommen .circle {
   width: 80px;
   height: 80px;
}

#willkommen .circle > img {
   width: 50px;
   height: 50px;   
}   
   
.icons p {
   margin-top: 12px;
   margin-bottom: 0;
	font-size: 1.8rem;   
	font-size: 18px;
	line-height: 1.8rem;
	line-height: 18px;
}     
} 

@media only screen and (max-width: 650px) {  
#willkommen .circle {
   width: 80px;
   height: 80px;
}

#willkommen .circle > img {
   width: 50px;
   height: 50px;   
}      
   
.icons p {
   margin-top: 15px;
   margin-bottom: 0;
	font-size: 2.0rem;   
	font-size: 20px;
	line-height: 2.0rem;
	line-height: 20px;
}   
      
.icons .one-third.column { 
   width: 30.6666666667%;
} 
   
.icons .column,
.icons .columns {
    margin-left: 4%; 
}
   
.icons .column:first-child,
.icons .columns:first-child {
    margin-left: 0;    
} 
}    

@media only screen and (max-width: 410px) {    
.icons p {
   margin-top: 8px;
   margin-bottom: 0;
	font-size: 1.6rem;   
	font-size: 16px;
	line-height: 1.6rem;
	line-height: 16px;
}   
}    
/*----------------------- willkommen end*/      

/*----------------------- section gute gründe start*/
@media only screen and (max-width: 1220px) {  
.gruende-number {
   width: 50px;
   height: 50px;
   margin-top: 179px;
   padding: 10px;
	font-size: 2.0rem;   
	font-size: 20px;
	line-height: 5.0rem;
	line-height: 50px;
}

.gruende-number::after {
   right: -27px; 
   border-top: 14px solid transparent;
   border-bottom: 14px solid transparent;
   border-right: 14px solid transparent;
   border-left: 14px solid #919700;
}    
}

@media only screen and (max-width: 1050px) {  
.slider-col-left {   
   width: 20%;
   margin-right: 0px; 
   margin-left: 5%;
}

.slider-col-right {
   width: 75%;
}
   
.gruende-number {
   width: 50px;
   height: 50px;
   margin-top: 120px;
   padding: 5px;
	font-size: 4.0rem;   
	font-size: 40px;
	line-height: 4.0rem;
	line-height: 40px;
}

.gruende-number::after {
   right: -18px; 
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-right: 10px solid transparent;
   border-left: 10px solid #919700;
}
   
.slide-wrapper img {
   height: 100px; 
}   

.slider-container p {
   margin-top: 0;
	font-size: 1.8rem;
	font-size: 18px;
	line-height: 2.2rem;
	line-height: 22px;
}       
}

@media only screen and (max-width: 600px) {  
.slider-col-left {   
   width: 20%;
   margin-right: 0px; 
   margin-left: 0%;
}

.slider-col-right {
   width: 80%;
}
   
.slide-wrapper img {
   height: 130px;
}   
   
.gruende-number {
   width: 50px;
   height: 50px;
   margin-top: 143px;
   padding: 10px;
	font-size: 4.0rem;   
	font-size: 40px;
	line-height: 4.0rem;
	line-height: 40px;
}

.gruende-number::after {
   right: -27px; 
   border-top: 14px solid transparent;
   border-bottom: 14px solid transparent;
   border-right: 14px solid transparent;
   border-left: 14px solid #919700;
}    
}

@media only screen and (max-width: 480px) {  
.gruende-number {
   width: 32px;
   height: 32px;
   margin-top: 155px;
   padding: 8px;
	font-size: 3.0rem;   
	font-size: 30px;
	line-height: 3.0rem;
	line-height: 30px;
}

.gruende-number::after {
   right: -18px; 
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-right: 10px solid transparent;
   border-left: 10px solid #919700;
}  
   
.slider-container p {
   margin-top: 0;
	font-size: 1.7rem;
	font-size: 17px;
	line-height: 2.1rem;
	line-height: 21px;
}   
}   
/*----------------------- section gute gründe end*/

/*----------------------- section news-section start*/
@media only screen and (max-width: 1050px) {   
.news-section .one-half.column { 
   width: 100%;
   margin-left: 0;
}
   
.news-section h3 { 
   margin-top: 5px;
}     
   
.news-section .text-top {
   margin-top: 10px;
   margin-bottom: 0px;
}      
}

@media only screen and (max-width: 650px) {   
.news-section .one-half.column { 
   width: 100%;
   margin-left: 0;
}
   
.news-section h3 { 
   margin-top: 15px;
}  
   
.margin-mobile { 
   margin-top: 50px;
}     
}
/*----------------------- section news-section end*/

/*----------------------- section garagen-zubehör start*/
@media only screen and (min-width: 550px) {   
.ul-sub-nav-plus {  
} 
 
.select-zubehoehr {
   display: none;  
}
}    

@media only screen and (max-width: 549px) {   
#sub-nav-plus {
   padding-right: 20px;      
} 
   
.ul-sub-nav-plus {
   display: none;    
} 
    
:target {
    display: block;
    position: relative;
    top: -170px;
    visibility: hidden;
}     
} 
/*----------------------- section garagen-zubehör end*/

/*----------------------- cta-conceptor start*/
@media only screen and (max-width: 820px) {   
.cta-conceptor .title {
	margin-bottom: 15px;
	font-size: 4.0rem;
	font-size: 40px;
	line-height: 4.2rem;
	line-height: 42px;
}
   
.cta-conceptor .sub-title {
   margin-top: 0;
	margin-bottom: 20px;
	font-size: 2.8rem;
	font-size: 28px;
	line-height: 3.5rem;
	line-height: 35px;
}   
} 
/*----------------------- cta-conceptor end*/

/*----------------------- cta-anruf start*/
@media only screen and (max-width: 1300px) {   
.cta-anruf-icon {
   float: none;
   width: 90px;
   margin-bottom: 20px;
}

.cta-anruf-icon img {
   width: 55px;     
}

.cta-anruf-wrapper {
   float: none;  
   width: 80%;   
}

.cta-anruf-text {
	font-size: 2.2rem;
	font-size: 22px;
	line-height: 2.2rem;
	line-height: 22px;
}

.cta-anruf-phone {
   margin-top: 5px;
   margin-bottom: 5px;
	font-size: 3.6rem;
	font-size: 36px;
	line-height: 3.6rem;
	line-height: 36px; 
}
}   
/*----------------------- cta-anruf end*/

/*----------------------- section news start*/
@media only screen and (max-width: 650px) {   
.news-item {
   width: 100%;
   margin-bottom: 50px;
   padding-bottom: 35px;
}
}   
/*----------------------- section news end*/

/*----------------------- box vorteile start*/
@media only screen and (max-width: 1320px) {  
.box-vorteile {
   padding: 28px 40px;
}
   
.box-vorteile .icon::before { 
   top: -5px;
   left: 0;   
   width: 30px;
   height: 30px;
}
   
.box-vorteile .ul-icons li {
   margin-bottom: 30px;
   padding-left: 46px;
	font-size: 2.0rem;   
	font-size: 20px;
	line-height: 2.5rem;
	line-height: 25px;	
}   
}  

@media only screen and (max-width: 650px) {  
.box-vorteile {
   padding: 20px 20px;
}  
   
.box-vorteile .ul-icons {
   margin-top: 22px;
}   
   
.box-vorteile .ul-icons li {
   margin-bottom: 24px;
}    
}    
/*----------------------- box vorteile end*/

/*----------------------- produkte start*/
@media only screen and (max-width: 1300px) {  
.produkte .four.columns {
   width: 21%;   
}  
   
.produkte .four.columns:last-of-type {
   width: 50%;   
}  
} 

@media only screen and (max-width: 900px) { 
.produkte .four.columns,
.produkte .four.columns:last-of-type {
   width: 100%; 
   margin-left: 0;
}    
   
 .produkte .margin-top-only-mobile {
   margin-top: 30px;
}     
}    
/*----------------------- produkte end*/

/*----------------------- fonts start*/
@media only screen and (max-width: 820px) {   
h1, 
h2 {
	margin-bottom: 15px;
	font-size: 4.0rem;
	font-size: 40px;
	line-height: 4.2rem;
	line-height: 42px;
}
   
h3 {
	margin-bottom: 20px;
	font-size: 2.8rem;
	font-size: 28px;
	line-height: 3.5rem;
	line-height: 35px;
}   
} 
/*----------------------- fonts end*/

/*----------------------- title start*/
@media only screen and (max-width: 820px) {   
.hatch span::after {
   height: 34px;
   margin-left: 16px;
   overflow: hidden;
   content: "\a0";
   background-image: url("../images/hatch.png");
   background-repeat: repeat-x;
   background-position: 0px 5px;
}
}   

@media only screen and (max-width: 900px) {  
.title {
   margin-bottom: 30px;
}   
}  

@media only screen and (max-width: 650px) {   
.hatch span::after {
   background-image: none;
}
}     
/*----------------------- title end*/

/*----------------------- double-columns start*/
@media only screen and (max-width: 1300px) {  
.double-columns .one-half.column {
   width: 100%;
   margin-left: 0;
} 
 .double-columns .one-half.column h3 {
    margin-top: 15px;
    margin-bottom: 15px;
}     
   
.double-columns .one-half.column img {
   width: 100%;
}    
}   
 
@media only screen and (max-width: 650px) {     
.double-columns .no-mobile {
   display: none;   
}    
}     
/*----------------------- double-columns end*/

/*----------------------- 4 columns > 2 columns start*/
@media only screen and (max-width: 650px) { 
.four-columns-to-two-columns .three.columns {
   width: 48%;
   margin-left: 4%;      
}
   
.four-columns-to-two-columns .columns:first-child {
    margin-left: 0; 
}   
   
.four-columns-to-two-columns .columns:nth-of-type(3)  {
    margin-left: 0; 
} 
}     
/*----------------------- 4 columns > 2 columns end*/

/*----------------------- misc start*/
@media only screen and (max-width: 1450px) { 
img.shadow-concrete-right,
img.shadow-concrete { 
   display: none;
} 
} 

@media only screen and (max-width: 1150px) {  
  
.inner-top-100 {
	padding-top: 60px;
}    
   
.inner-bottom-100 {
	padding-bottom: 60px;
}   
   
.no-margin-mobile {
   margin-top: 0;
   margin-bottom: 0;      
}     
   
.inner-60 {
	padding-top: 20px;
	padding-bottom: 20px;
} 
} 

@media only screen and (max-width: 650px) {   
.margin-top-only-mobile {
   margin-top: 30px;
}   
   
.no-mobile {
   display: none;      
}   
   
.title {
   margin-bottom: 10px;
}  
   
.divider-45 {
	position: relative;
	height: 2px;
	margin-top: 25px;
	margin-bottom: 25px;
	width: 100%;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #AFAFAF;
}   
   
.mb-100 {
	margin-bottom: 50px;
}  
   
.inner-60 {
	padding-top: 20px;
	padding-bottom: 20px;
}      
   
.inner-100 {
	padding-top: 20px;
	padding-bottom: 20px;
}   
   
.inner-bottom-100 {
	padding-bottom: 45px;
}   
   
.only-mobile {
   display: block;
} 
   
.shadow-big {   
   -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}  
   
.drop-shadow-big {
   filter: none;
}    
   
.box-frame {
	display: block;   
} 

.map-size {
   margin-top: 20px;
   margin-bottom: 0;
   margin-left: auto;
   margin-right: auto;
}   
}    
   
@media only screen and (max-width: 1600px) {
.icon-corner {
   width: 23px;
   height: 23px;
   background-image: url("../images/image-more-small.png");
} 
}    
/*----------------------- misc end*/

/*----------------------- form start*/
@media only screen and (max-width: 950px) {
.uploadButton {
	font-size: 1.2rem;
	font-size: 12px;
}

.clear-form  {
   float: none;
}   
   
.submit {
   float: none;   
   margin-top: 15px; 
   width: 100%;
}   
}

@media only screen and (max-width: 750px) {
#form-angebot .four.columns  {
   width: 100%;
   margin-left: 0;
} 
   
.box-frame-form  {
   margin-bottom: 15px;
}  
}   
/*----------------------- form end*/

/*----------------------- news-article start*/
@media only screen and (max-width: 950px) {
#news-article .five.columns,
#news-article .seven.columns {
   width: 100%;
   margin-left: 0%; 
}
}   
/*----------------------- news-article end*/

/*----------------------- footer start*/
@media only screen and (max-width: 1150px) {
.footer-social-media .circle {
   width: 60px;
   height: 60px;
   border: 2px solid #c2c2c2;
}

.footer-social-media .circle > img {
   height: 20px;   
}

.footer-siegel ul li img {
   height: 60px;
}    
}

@media only screen and (max-width: 890px) {
#footer {
	padding-top: 0px;
	padding-bottom: 25px;
}
   
.footer-top {
	padding-top: 22px;
	padding-bottom: 22px;   
}   
   
.footer-bottom {
	padding-top: 0px;
	padding-bottom: 13px;  
}   

.footer-left {
   float: none;
}
   
.footer-right {
   float: none;
}   
   
.footer-menu {
   float: none;
   padding-bottom: 0px;
   text-align: center;      
}

.footer-menu ul {
   display: inline-block;     
   margin-bottom: 0px;      
}   
    
.footer-menu li {
	float: left;   
	margin-right: 15px; 
   padding-left: 15px; 	
}   
   
.footer-menu li:last-of-type {
	margin-right: 0px;  
}  
   
.footer-social-media {
   margin-top: 20px;
   text-align: center;     
}  
  
.footer-social-media ul {
   display: inline-block;  
}

.footer-social-media ul li {
	float: left;   
	margin-right: 10px; 
   padding-left: 10px; 
}  
   
.footer-social-media li:last-of-type {
	margin-right: 0px;  
}      
   
.footer-siegel {
   text-align: center;     
}  
  
.footer-siegel ul {
   display: inline-block;  
}

.footer-siegel ul li {
	float: left;   
	margin-right: 10px; 
   padding-left: 10px; 
}  
   
.footer-siegel li:last-of-type {
	margin-right: 0px;  
}   
   
.footer-siegel ul li:first-of-type {
   margin-right: 40px;
}
   
.footer-bottom {
	margin-top: 20px;
	padding-bottom: 30px;    
}   
         
#footer p {
	text-align: center;     
}  
   
#footer p.align-right {
   float: none;
	text-align: center;    
} 
  
.manufactor {
   padding-top: 15px; 
}    
}

@media only screen and (max-width: 600px) {
.footer-menu {
   float: none;
}

.footer-menu ul {
   display: inline-block;      
}   
    
.footer-menu li {
	float: none;   
   display: inline-block;   
	margin-right: 15px; 
   padding-left: 15px; 	     
} 
}

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

.footer-siegel ul li img {
   height: 35px;
}  
   
.footer-siegel ul li {
   margin-right: 2px;
}   
}

@media only screen and (max-width: 420px) {
.footer-menu li {
	margin-right: 5px; 
   padding-left: 5px;
	font-size: 1.5rem;   
	font-size: 15px;
	line-height: 1.5rem;
	line-height: 15px;  
}    
}
/*----------------------- footer end*/