/* Template © admotion*/


html 
{
   height:			100%;
}


body
{
   height:			100%;
   margin:			0px;
   padding:			0px;
   font-family:		'Open Sans', sans-serif;
   font-weight:		400;
   font-size:		16px;
   color:			#8f8f8e;
   line-height:		160%;
   letter-spacing:	0.06em;
    background: url(../images/metall_bg.jpg) top left;
}


#system-message { margin: 0px; }
/* bootstrap import */



img {
    width: auto\9;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
.nav > li > a:hover, .nav > li > a:focus {text-decoration: none;background-color: transparent;}
.nav > li > a {display: block;}
li { line-height: normal;}
.nav {list-style: none; padding: 0; margin: 0;}
table {border-collapse: collapse;border-spacing: 0;}
ul.unstyled, ol.unstyled { list-style: none;}

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

strong { font-weight: 700; }

#desktop { display: block; }
#mobile { display: none; }

#left { width: 68%; float: left; margin-right: 4%; position: relative; }
#right { width: 28%; float: right; }


#balubear { width: 212px; position: absolute; bottom: -121px; left: -163px; z-index: 999; }

#container-header { background: rgba(0,0,0,0.2);  }
#header { width: 70%; margin: 0 auto; position: relative; z-index: 999; }

#logo { position: absolute; width: 450px; margin-left: -30px; }
#button { width: 440px; position: absolute; right: 5%; top: 50px; z-index: 997; }


#container-inhalt {  background: rgba(255,255,255,0.6); padding: 180px 0 100px;  }
#inhalt {  width: 70%; margin: 0 auto; position: relative; }


.responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.responsive-video { position: relative; padding-bottom: 56.25%; padding-top: 0px; height: 0; overflow: hidden; }


#sprechblase { position: absolute; width: 370px;z-index: 10;right: -230px;margin-top: -200px;transition: 0.2s;}
#sprechblase:hover {transform: scale(1.1);}

#box { box-sizing: border-box; float: left; width: 30%; margin-right: 5%; overflow: hidden; position: relative; }
.nomarg { margin-right: 0 !important; }
#preis { position: absolute; top:-20px; left: 20px; background: rgba(40,106,183,0.75); padding: 30px 50px 10px 10px; color: #fff; font-size: 20px;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg); }

#box img {max-width: none; width: 100%;}

#blau { background: #286ab7; padding: 20px; min-height: 175px; }

.produkteteaser { width: 62%; margin-right: 10%; float: left;}

.balugaertner {float: left; width: 14%; position: relative; z-index: 996; margin-top: -30px;}



#bestellung { background: #286ab7; padding: 5px 15px; color: #fff; position: absolute; left: 170px; top: 0; transition: 0.2s; }
#bestellung:hover { -moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1); transition: 0.2s; }
#bestellung a { color: #fff; }

#anfrage { background: #286ab7; padding: 5px 15px; color: #fff; position: absolute; left: 300px; top: 0; transition: 0.2s; }
#anfrage:hover { -moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1); transition: 0.2s; }
#anfrage a { color: #fff; }




#row-l { width: 15%; float: left; margin-bottom: 0px;}
#row-r { width: 80%; float: right; }



hr { border: 1px solid #fff;  margin: 50px 0; }


#telefon { width: 30px; float: left; margin-left: calc(50% - 155px); margin-right: 40px; margin-top: 15px;}
#email { width: 30px; float: left;margin-top: 15px;}





#container-footer { background: rgba(0,0,0,0.4); }

#footer { width: 70%; margin: 0 auto; color: #fff; padding: 40px 0; }
#footer a {color: #fff; }
#footer a:hover {color: #286ab7; }
#adresse { box-sizing: border-box; float: left; width: 30%; margin-right: 5%; overflow: hidden; position: relative; }
#impressum { box-sizing: border-box; float: left; width: 40%; margin-right: 5%; overflow: hidden; position: relative; }
#kanton { box-sizing: border-box; float: right; width: 15%; margin-right: 0%; overflow: hidden; position: relative; }

.showroom { float: left; width: 23%; margin: 0 2% 2% 0; }




h1 { margin: 0px 0px 25px 0px; padding: 0px; font-size: 35px; line-height: 130%; font-weight: 700; color: #286ab7;}
h2 { margin: 0px 0px 25px 0px; padding: 0px; font-size: 25px; line-height: 130%; font-weight: 300; }
h3 { margin: 0px 0px 10px 0px; padding: 0px; font-size: 20px; line-height: 130%; font-weight: 700; color: #286ab7; }
h5 { margin: 150px 0px 25px 0px; padding: 0px; font-size: 25px; line-height: 130%; font-weight: 700; }


h2.home { margin: 0px; padding: 0px; font-size: 25px; line-height: 130%; font-weight: 400; color: #fff; }
h2.home a { color: #fff; }
h2.home a:hover { color: #fff; }


a.anfrage { background: rgba(255,255,255,0.3); padding: 10px 20px; color: #fff; margin: 40px 0 20px -20px;display: inline-block; transition: 0.2s; font-size: 18px; }
a.anfrage:hover { color: #286ab7; background: #fff; transition: 0.2s;  }

a.offerte { background: #286ab7; padding: 20px 30px; color: #fff; display: inline-block; transition: 0.2s; font-size: 25px; font-weight: 700;}
a.offerte:hover { color: #286ab7; background: #fff; transition: 0.2s;  }

a { text-decoration: none; outline: none; color: #286ab7;  }
a:hover { text-decoration: none; color: #000; }
a:focus { text-decoration: none; outline: none; }

p { margin: 0; }

#webdesign  { margin-top: -145px; background: #000 url(../images/webdesign-admotion.png); position: absolute; right: 0px; width: 25px; height: 91px;}
#webdesign p  { margin: 0px; }
#webdesign a  { width: 25px; height: 91px; display: block; }


.clear { line-height: 0; }





#scrollup {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #286ab7;
    color: white;
    cursor: pointer;
    padding: 7px 2px;
    width: 30px;
}
#scrollup:hover { background-color: #000;}









 /* -------  Widgetkit ----------*/

.uk-overlay img {min-width: 100%;}
.uk-overlay {width: 100%;}
.uk-scope * + p { margin: 0;}
.uk-scope p { margin: 0;}

.uk-scope a { text-decoration: none; outline: none; color: #286ab7;  }
.uk-scope a:hover { text-decoration: none; color: #000; }
.uk-scope a:focus { text-decoration: none; outline: none; }

.uk-scope h2 { margin: 0px 0px 10px 0px; padding: 0px; font-size: 20px; line-height: 130%; font-weight: 700; color: #286ab7; }

h3.uk-h3 {
 font-family: 'Open Sans', sans-serif !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: normal !important;
    font-weight: 700 !important;
    text-transform: none;
    color: #fff !important;
    background: #286ab7;
    padding: 15px 15px 15px;
    min-height: auto;
}
.interesse h3.uk-h3:hover {  color: #286ab7 !important;  background: #fff !important;}
.interesse h3.uk-h3 { font-weight: 300 !important; }
.interesse h3.uk-h3 a { display: block; }

/*
.produkte div:nth-child(6) h3.uk-h3 {background: #009dd7;}
.produkte-grid div:nth-child(8) h3.uk-h3 {background: #009dd7;}
.produkte-grid div:nth-child(13) h3.uk-h3 {background: #009dd7;}
.produkte-grid div:nth-child(6) h3.uk-h3 {background: #009dd7;}

/* .interesse div:nth-child(3) h3.uk-h3 {background: #009dd7;} */

.uk-scope .uk-lightbox { background: rgba(255,255,255,0.8);}
.uk-scope .uk-overlay-primary { background: rgba(255,255,255,.8); }
.uk-scope .uk-icon { color: #286ab7;}
.uk-scope .uk-icon:active { color: #286ab7;}
.uk-scope .uk-icon:focus { color: #286ab7;}
.uk-scope .uk-icon:hover { color: #8f8f8e;}

.uk-scope .uk-lightbox-toolbar {  background: rgba(0,0,0,0);}
.uk-scope .uk-lightbox-button {background: rgba(0,0,0,0);}



.uk-icon.uk-slidenav-previous.uk-slidenav svg { width: 50px; height: 50px;}
.uk-icon.uk-slidenav-next.uk-slidenav svg { width: 50px; height: 50px;}

div .uk-scope .uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
    width: unset !important;
    height: unset !important;
    padding: 0px 25px !important;
    margin: 15px 0px !important;

}

.produkte-grid .uk-margin {  margin: 0px !important; }
.produkte-grid .uk-panel {  position: relative; color: #fff; }

.hellblau {padding: 5px 20px 20px; }

.produkte-grid div:nth-child(8) .uk-panel  {background: #286ab7;}
.produkte-grid div:nth-child(13) .uk-panel {background: #286ab7;}
.produkte-grid div:nth-child(6) .uk-panel {background: #286ab7;}

.uk-panel-title {

    margin-top: 0;
    font-size: 20px;
    line-height: normal;
    font-weight: 700;
    text-transform: none;
    color: #fff;
    background: #286ab7;
    padding: 15px 15px 15px;
    min-height: auto;

}

.uk-panel-teaser, .uk-panel-title { margin-bottom: 0px; }

.uk-overlay-panel { background: rgba(255,255,255,0.7); color: #8f8f8e; text-align: left !important;}

.uk-flex-center { -ms-flex-pack: left; -webkit-justify-content: left;  justify-content: left; }

.uk-overlay.uk-overlay-hover div.uk-overlay-panel.uk-overlay-fade.uk-flex.uk-flex-center.uk-flex-middle.uk-text-center div { position: absolute; bottom: 10px;width: 100%; }

.uk-modal-caption { color: #286ab7; }


.uk-slidenav-contrast { color: #286ab7; }
.uk-slidenav-contrast:hover { color: #8f8f8e; }
.uk-light .uk-slidenav { color: #d4d4d4 !important; }
.uk-light .uk-slidenav:hover { color: #286ab7 !important; }



.uk-scope .uk-accordion-title::before { display: none; }

.uk-accordion-content { padding: 0 0 40px; }
.uk-scope .uk-accordion-title, .uk-scope .uk-accordion-title:focus {
    margin-top: 0; font-weight: 700 !important;
    margin-bottom: 20px;
    padding: 10px 10px 7px;
    background: #8f8f8e url(../images/plus-neg.png) 99% center no-repeat;
    background-size: 20px 20px;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    color: #fff; transition: 0.2s;
}
.uk-scope .uk-accordion-title:hover, .uk-scope .uk-accordion-title:active {  background: #286ab7 url(../images/plus-neg.png) 99.2% center no-repeat; background-size: 25px 25px; transition: 0.2s; color: #fff; }

.uk-scope li.uk-open .uk-accordion-title {
    margin-top: 0;
    margin-bottom: 20px;
    padding: 10px 10px 7px;
    background: #286ab7 url(../images/minus-neg.png) 99% center no-repeat;
    background-size: 20px 20px;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    color: #fff;
}







 /* -------  Cookie Hint ----------*/

#redim-cookiehint { display: none; 
    box-shadow: 0 -5px 5px -5px #333;
    background-color: rgba(0,0,0,0.7);
    z-index: 9999999;
    bottom: 0px;
    text-align: left;
    padding: 30px;
    width: 500px;
    right: 5%;
}
#redim-cookiehint .cookiebuttons .btn:hover {
    background-color: #fff;
    color: #286ab7;
}
#redim-cookiehint .cookiebuttons .btn {
    padding: 10px 20px !important;
    border-radius: 0px !important;
    color: #fff;
    background-color: #286ab7;
    font-size: 15px;
    line-height: 16px;
    margin-top: 2px;
    margin-bottom: 2px;
    cursor: pointer;  border: 0px; text-shadow: none; background-image: none;  font-family: 'Open Sans', sans-serif; 
}
#redim-cookiehint .cookiebuttons {
    margin-top: 20px;
    display: inline-block;
    float: left;
}













@media(max-width:1950px){
        .balugaertner { margin-top: 1px; }

}


@media(max-width:1750px){
        #box { width: 46%; margin-right: 4%; margin-top: 4%; }
    #impressum img { width: 100px;}
    .balugaertner {float: none; width: 200px; margin-top: 13px; }

    
    #telefon {position: absolute; margin: 0; right: -50px; top: 14px;}
    #email {position: absolute; margin: 0; right: -100px; top: 14px;}
}


@media(max-width:1400px){

    #telefon { width: 30px; float: right; margin-left: 40px; margin-right: 40px; margin-top: 15px; position: relative; z-index: 998; top: 0; right: 0;}
    #email { width: 30px; float: right;margin-top: 15px;position: relative; z-index: 998; top: 0; right: 0;}
}
    
@media(max-width:1250px){
    
    #sprechblase {width: 270px; position: relative; text-align: right; right: auto; margin-top: -75px;}

    
    .balugaertner {  float: right;  width: 300px;  margin-top: -805px;}
    
    #row-l { width: 20%; float: left; margin-bottom: 0px;}
    #row-r { width: 75%; float: right; }

    
    #header { width: 80%; margin: 0 auto; }
    #inhalt {  width: 80%; margin: 0 auto; position: relative; }
    #footer { width: 80%; margin: 0 auto; color: #fff; padding: 20px 0 60px; }

    #balubear { width: 100px; left: -80px; bottom: 15px; }
    .produkteteaser { width:auto; margin-right: 0;}

    

    #adresse { box-sizing: border-box; float: left; width: 30%; margin-right: 5%; overflow: hidden; position: relative; }
    #impressum { box-sizing: border-box; float: left; width: 65%; margin-right: 0%; overflow: hidden; position: relative; }
        #impressum img { width: 200px;}

    #kanton { box-sizing: border-box; float: left; width: 100%; margin-right: 0%; margin-top: 40px; overflow: hidden; position: relative; }
        #kanton img { float: left !important; margin-right: 20px; margin-left: 0; }

    .showroom { width: 48%; margin: 0 2% 2% 0; }
    
    #box { min-height: 625px;}
}




@media(max-width:1000px){
    .interesse h3.uk-h3 { font-size: 16px !important; }
    h5 { margin: 100px 0px 25px 0px; padding: 0px; font-size: 20px; line-height: 130%; font-weight: 700; }

        #button {  width: 350px; }   
    
        #impressum img { width: 100px;}
        #impressum img { width: 100px;}

    .reverse-row {flex-direction: column-reverse;}
    
        
.balugaertner {
    float: right;
    width: 250px;
    margin-top: -762px;
}


}

@media(max-width:800px)
{        #box { min-height: auto;}

    #balubear { display: none; }
    #box { min-height: 597px;}
}


@media(max-width:786px){
        
    
    #row-l { width: 50%; float: none; margin-bottom: 20px;}
    #row-r { width: 100%; float: none; }
    
    #box { width: 100%; margin-right: 0%; margin-top: 4%; min-height: auto;}

    body { font-size: 15px; }
    
    #left { width: 100%; float: none; margin-right: 0%; position: relative; }
    #right { width: 50%; float: none; margin-bottom: 4%; }
    
    #header { width: 90%; margin: 0 auto; }
    #inhalt {  width: 90%; margin: 0 auto; position: relative; }
    #footer { width: 90%; margin: 0 auto; color: #fff; padding: 20px 0 20px; position: relative; }
    
    #logo { width: 360px; margin-left: 0px;}
    #container-inhalt {  padding: 100px 0;  }
    
.balugaertner {
    float: none;
    width: 250px;
    margin-top: 40px; margin-left: calc(50% - 155px);
}
    
    #adresse { float: none; width: 100%; margin-right: 0%; }
    #impressum { float: none; width: 100%; margin-right: 0%; margin-top: 40px; }
    #impressum img { width: 120px; }
    #kanton { float: none; width:151px; margin-right: 0%; margin-top: 20px; position: absolute; top: 0; right: 0; }
      #kanton img { float: right!important; margin-right: 0px; margin-left: 0px; margin-top: 30px !important;width: 30px; }
      #kanton p:first-child img { width: 80%; margin-top: 0 !important; }

    
    #desktop { display: none; }
    #mobile { display: block; }   

    #container-header { background: rgba(0,0,0,0.3);  }
    
    #redim-cookiehint { display: none; 
        box-shadow: 0 -5px 5px -5px #333;
        background-color: rgba(0,0,0,0.7);
        z-index: 9999999;
        bottom: 0px;
        text-align: left;
        padding: 30px;
        width: 90%;
        right: 5%;
    }
        
    #button { position: static; width: 84%;padding: 40px 0px 20px 20px;margin: 0 auto; }   

}

@media(max-width:500px){
    .showroom { float: none; width: auto; margin: 0 0 2% 0; }
     #telefon { width: 25px; position: absolute; margin: 0px;  z-index: 1112; right: 40px; top: 80px;}
    #email { width: 25px; position: absolute; ;margin: 0; z-index: 1112;right: 90px;top: 80px;}
}


@media(max-width:450px){
        #logo { width: 100%; z-index: 1111; }    
}

@media(max-width:350px){

    #kanton { float: none; width:110px; }
}