/* Small devices (landscape phones, 576px and up)    @media (min-width: 576px) { ... }       */

@font-face{font-family:poppins;src:url(poppins.woff2) format("woff2");font-weight:400;font-style:normal}


*{box-sizing:border-box;transition:ease all .5s}

html{scroll-behavior:smooth}

body{background-color:#fda;color:#333;font-family:poppins;font-size:100%;line-height:2;overflow-x:hidden;margin:0;
background-image:url(../images/bg_bau.jpg);background-size:100%;min-height:95vh}
header{width:100%;min-height:10px;margin:0;padding:5px;background:#444;background:linear-gradient(to bottom,#e71 0,#222 40%,#322 60%,#445 100%);z-index:99;position:fixed;top:0;}
label{display:inline-block;color:#fff;background:#a51;padding:.5rem;margin:5rem 2px 0 0}
nav{text-align:right;width:70%;float:right;margin-top:-5rem;}
li,ul{margin:0;padding:0;list-style:none}
ul{margin-bottom:1rem}
article {margin-top:120px;}
h1,h2,h3,h4,h5,h6{letter-spacing:2px;margin:0;padding:0;color:#111;line-height:initial;font-family:poppins;}
h1{font-size:32px;font-weight:900}
h2{font-size:24px}
h3{font-size:18px}
h4{font-size:16px}
h5{font-size:14px}
h6{font-size:13px}

button{border-radius:8px;padding:0 15px;outline:0;min-width:100px;background:#d84;color:#fff;height:35px;font-size:110%}
button:focus,button:hover{outline:1px dotted red}

input[type=checkbox]{display:none}
input[type=checkbox]:checked~#menu{visibility:visible;opacity:1;margin-top:2rem;margin-left:0}

p{margin:20px;font-weight:300;font-size:15px;line-height:22px}

img{vertical-align:middle;border-style:none}

a{color:#222;text-decoration:none;transition:all .3s ease-in-out}
a:hover{color:#0056b3}

[hidden]{display:none}    /*  eckige klammern  selectoren  */

.seite1 {width:98vw;display:flex;align-items:center;}
.s_titel {width:50%;margin-left:auto;margin-right:auto;text-align:center}
.p_txt {max-width:40%}
.txt_text{width:100%;float:left;font-size:16px;color:#090a0b;text-align:center;margin:0 auto}
.col {display:table-cell;box-sizing:border-box; padding:0.5em; vertical-align:top; text-align:justify; color:#000}
.col:nth-child(1) {width:48%}
.col:nth-child(2) {width:48%; background:#eef; z-index:-1; border-radius:100% 80%}
.col img {max-width:100%}
.col_pic {display:table-cell;box-sizing:border-box; padding:0.5em; vertical-align:top; text-align:justify; color:#000}
.col_pic {width:48%}
.col-sm-4{flex:0 0 33.33%;max-width:33.33%}
.reader_text{width:80%;float:left;color:#fff;font-size:20px;position:absolute;bottom:10px;padding:10px}
.img-fluid{max-width:100%;height:auto}
.container, .maschine, .anfrage, .offerte, .kunde, .kunde_txt, .fuss, .fuss_txt{width:100%;}

.container{padding:0 20px;margin-right:auto;margin-left:auto}
.maschine{padding:0 10px 0 30px;margin-right:auto;margin-left:auto}
.bg_weiss{width:96%;float:left;background-color:#fff;padding:40px;box-shadow:0 6px 70px 1px #fff}
.row{display:block;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}
.anfrage{display:flex;background-color:#e8531f;padding:0;margin:0;text-align:center}
.offerte{float:left;color:#fff;font-size:16px;font-weight:600;padding-top:0}
.kunde{float:left;font-size:26px;color:#001;text-align:center;font-weight:700;padding-top:15px}
.kunde_txt{float:left;font-size:20px;color:#e70;text-align:center;font-weight:700}


.fuss{float:left;background-color:#128;height:15px;line-height:12px}
.fuss_txt{float:left;font-size:10px;text-align:center;color:#ddd;margin:0;padding:4px}
.fuss_txt:hover{color:#0f0}

.drehen{transition:all .5s;display:inline-block;text-rendering:auto;font-size:24px;font-weight:900;color:#fff}
.drehen:hover{transform:rotate(900deg)}

#menu{width:100%;text-align:right;margin-top:-50rem;margin-left:-10rem;visibility:hidden;transition:all 1s;opacity:0}
#menu ul{padding:5px;width:92%;background-color: rgba(55, 55, 55, 0.8);}
#menu li{margin:.2rem;padding:0;border:1px solid #da1;border-radius:12px 12px 4px 4px;text-align:center}
#menu li a{display:block;text-align:left;text-decoration:none;padding:8px;background:0 0;color:#fff;border-radius:4px;font-size:110%}
#menu li a:hover{color:#0f0}

.logo {max-width:130px;max-height:110px;margin:0 30px;padding:0;float:left}
.logo1{max-width:280px;margin:8px 10px;float:left;color:#fff;font-weight:400;line-height:22px;text-shadow:-2px -2px 2px #000}
.logo1 a{color:#fd7}

.banner_section{width:100%;float:left;background-image:url(../images/titel-bg.jpg);background-size:100% 98%;background-repeat:no-repeat;margin-top:-20px;height:74vh;min-height:65vh}
.btn_main{display:none}  

.schatten{margin:0;padding:0;letter-spacing:-1px;color:#da1;text-shadow:-1px -1px 1px #e71,-2px -2px 1px #555,-3px -3px 1px #666,-4px -4px 1px #777,-5px -5px 1px #888,-6px -6px 1px #111,-7px -7px 1px #000}
.schatt-kl{text-shadow:1px 1px 1px #e71, 2px 2px 1px #444, 3px 3px 1px #855}
.symbole{font-size:22px}

.tit_carousel {position:relative; margin-top:-200px; float:right;}
.tit_carousel a{font-size:25px;font-weight:900;color:#fff;;padding:0 15px; background-color:#d41;border-radius:30%;text-align:center}
.tit_carousel a:hover{background-color:#99e}

.client_text,.client_left,.client_right{width:100%;font-size:15px}  
.client_section{width:100%;float:left;padding-bottom:90px}
.client_section_2{width:100%;float:left}
.client_text{width:80%;margin:0 auto;font-size:16px;color:#111;text-align:center;font-weight:500}
.client_main{width:100%;float:left}
.client_left{width:30%;float:left}
.client_right{width:68%;margin:0 6px 0 0;float:left}
.client_img{width:100%;float:left;text-align:center}
.kunde{width:100%;float:left;font-size:26px;color:#001;text-align:center;font-weight:700;padding-top:15px}
.kunde_txt{width:100%;float:left;font-size:20px;color:#e70;text-align:center;font-weight:700}

.col,.col-md,.col-md-3,.col-md-6,.col-md-7,.col-md-8,.col-md-9.col-sm,.col-sm-4{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}
.col{flex-basis:0;flex-grow:1;max-width:100%}


@media (min-width:1020px) {          /*   monitor 1200px und grösser   */
article {position:relative}
#menu{transition:none;visibility:visible;opacity:1;margin-top:80px;margin-left:0}
#menu ul{margin:0 0 0 8%;padding:0;background:0}
#menu li{display:inline-block;margin:0 3px}
#menu li a{width:100%;padding:4px 10px}
nav{padding:1rem}
label{display:none;margin-top:200px;}
input[type=checkbox]:checked~#menu{margin-top:0;margin-left:0}
.breit33{width:32%}  
.btn_main{display:block; width:100%;float:left;margin-top:50px}
.row {display:flex;}
}

@media (min-width:576px) {.col-sm-4{flex:0 0 33.33%;max-width:33.33%}  }

@media (min-width:768px) {
.col-md{flex-basis:0;flex-grow:1;max-width:100%}
.col-md-4{flex:0 0 33.33%;max-width:33.33%}
.col-md-6{flex:0 0 50%;max-width:50%}

}
.carousel-item{position:relative;display:none;align-items:center;width:100%;transition:transform .6s ease;backface-visibility:hidden}
.carousel-inner{width:90%;margin-left:auto;margin-right:auto; overflow: hidden;}

@media screen {.carousel-item{transition:none} }
.carousel{position:relative;margin:50px;}
.carousel h1{color:#fff;text-shadow:3px 5px 5px #000}
.carousel-item-next,
.carousel-item-prev,
.carousel-item.active{display:block}
.carousel-item-next,
.carousel-item-prev{position:absolute;top:0}
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right{transform:translateX(0)}
.active.carousel-item-right, .carousel-item-next{transform:translateX(100%)}
.active.carousel-item-left,  .carousel-item-prev{transform:translateX(-100%)}