/*
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
   
 */

/* saira-100 - latin */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 100;
    src: local(''),
    url('../fonts/saira-v14-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-200 - latin */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 200;
    src: local(''),
    url('../fonts/saira-v14-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-300 - latin */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 300;
    src: local(''),
    url('../fonts/saira-v14-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-regular - latin */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 400;
    src: local(''),
    url('../fonts/saira-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-500 - latin */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 500;
    src: local(''),
    url('../fonts/saira-v14-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-600 - latin */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 600;
    src: local(''),
    url('../fonts/saira-v14-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-700 - latin */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 700;
    src: local(''),
    url('../fonts/saira-v14-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-800 - latin */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 800;
    src: local(''),
    url('../fonts/saira-v14-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-900 - latin */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 900;
    src: local(''),
    url('../fonts/saira-v14-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-100italic - latin */
@font-face {
    font-family: 'Saira';
    font-style: italic;
    font-weight: 100;
    src: local(''),
    url('../fonts/saira-v14-latin-100italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-100italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-300italic - latin */
@font-face {
    font-family: 'Saira';
    font-style: italic;
    font-weight: 300;
    src: local(''),
    url('../fonts/saira-v14-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-200italic - latin */
@font-face {
    font-family: 'Saira';
    font-style: italic;
    font-weight: 200;
    src: local(''),
    url('../fonts/saira-v14-latin-200italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-200italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-italic - latin */
@font-face {
    font-family: 'Saira';
    font-style: italic;
    font-weight: 400;
    src: local(''),
    url('../fonts/saira-v14-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-500italic - latin */
@font-face {
    font-family: 'Saira';
    font-style: italic;
    font-weight: 500;
    src: local(''),
    url('../fonts/saira-v14-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-600italic - latin */
@font-face {
    font-family: 'Saira';
    font-style: italic;
    font-weight: 600;
    src: local(''),
    url('../fonts/saira-v14-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-700italic - latin */
@font-face {
    font-family: 'Saira';
    font-style: italic;
    font-weight: 700;
    src: local(''),
    url('../fonts/saira-v14-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-800italic - latin */
@font-face {
    font-family: 'Saira';
    font-style: italic;
    font-weight: 800;
    src: local(''),
    url('../fonts/saira-v14-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* saira-900italic - latin */
@font-face {
    font-family: 'Saira';
    font-style: italic;
    font-weight: 900;
    src: local(''),
    url('../fonts/saira-v14-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../fonts/saira-v14-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


html, body {
    margin: 0;
    padding: 0;
    font-family: 'Saira', sans-serif;
    text-align: center;
}


/*Allgemeines*/

h1 {font-weight: 400; font-size:40px; color:#0d557d; line-height: 1.2em; margin:auto; text-align:center;}
h2 {font-weight: 300; font-size:22px; color:#0d557d; line-height: 1.2em; margin:auto; padding-bottom:14px; text-align:center;}
h3 {font-weight: 400; font-size:20px; color:#3d3f45; line-height: 1.2em; margin:auto; padding-top:10px; text-transform: uppercase;}
h4 {font-weight: 300; font-size:30px; color:#0d557d; line-height: 1.2em; margin:auto; padding-bottom:14px; text-align:center;}
p {font-weight: 300; font-size:16px; color:#3d3f45; line-height: 1.3em;}
hr{display:block; margin-top:160px; width:60%; margin-left: auto; margin-right:auto; height:1px; background-color: #0d557d; border:0 none;}
.faqs{display:block; margin-top:100px; width:60%; margin-left: auto; margin-right:auto; height:1px; background-color: #0d557d; border:0 none;}
.home{margin-top:60px; margin-bottom:60px;width:100%;}
.line {border-bottom: 1px solid #3d3f45; height:30px; margin-bottom:20px;}

.logo{ position:fixed; width:250px; top:65px; left:40px;}


/* Menü */

.allmenue{ width:100%; position:fixed; display:flex; justify-content:center; align-items: center; height:140px; background-color:#fff; z-index:100; top: 3%; left: 50%; transform: translate(-50%, -50%);}

.bar{display: none; width:25px;}

nav {display:flex; font-size: 16px; margin-top:30px;}

nav a {margin: 0 2px 0 2px;  color:#3d3f45; position: relative; z-index: 200; text-decoration: none; padding:4px 8px; border-radius: 6px; }

nav a:hover {transition: all ease 0.3s; color: #fff; background-color:#f39223; padding:5px 8px; }

nav .vspacer { width: 80px; display: inline-block;}

#active {color: #fff; background-color:#1e668c; padding:5px 10px;}

.menue2 {display:none;}

.side-menue{position:relative; position:fixed; display:flex; justify-content:center; align-items: center; height:140px; }
.side-menue a{position:fixed; right:40px; background-color: #1e668c; color:#fff; border-radius: 6px; }
.side-menue a:hover {background-color: #f39223;}

#myTopnav.menueresponsive {
    flex-direction: column;
    position: absolute;
    font-family: 'Saira', sans-serif;
    left: 50%;
    transform: translate(-50%,-50%);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 500;
    z-index: 30;
    top: 210px;
    background-color: rgba(255,255,255);
    width: 100%;
    margin-top: 80px;
    padding-top: 0px;
    padding-bottom: 30px;
}


/* Content */

.content{ display:block; position:relative; top:140px; width:60%; margin:auto; text-align:left; font-weight: 300; font-size:16px; color:#3d3f45;line-height: 1.3em;}
.content2 { display: flex; justify-content: center;  position:relative; top:140px; width:60%; margin:auto; font-weight: 300; font-size:16px; color:#3d3f45; line-height: 1.3em;}
.content3 { display: flex; justify-content: center; align-items: top; position:relative; top:140px; width:60%; margin:auto; font-weight: 300; font-size:16px; color:#3d3f45; line-height: 1.3em;}
.bausteine{ position:relative; top:40px;}


.clear{clear:both;}

.left{margin-right:20px; max-width:40%; height: auto;}
.right{margin-left:20px; max-width:45%; height: auto;}



li {text-align: left; color:#3d3f45; font-weight: 300;}
::marker {color:#0d557d; content: "+  "; font-size: 1em;}


/*boxes2*/

.boxes{position:relative; display: flex; justify-content: center; align-items: center; margin: 0 auto;}
.boxtext p{max-width:1000px; text-align:left;}
.boxpic{position: relative; max-width: 90%; height: auto; padding-left:30px; padding-top:18px; text-align: right;}
.faqpic{width:300px;margin-left:40px;}
.faqpic-big{width:400px;margin-left:40px;}
.faq14 {margin:16px 40px 0 0; width: 60px; height:60px; }
.bausteinpic{position: relative; text-align: right;}

.text{  flex-basis: 50%; text-align: center; padding:30px; margin:10px 10px 10px 10px; background-color:rgba(206,225,244,0.3);}
.text img{width:65px; margin-bottom:10px;}


/*demos*/


.demos{position:relative; display: flex; justify-content: center; align-items: center; text-align: center;}
.demos a{text-decoration: none; }
.demos img{max-width:310px;}
.demo{margin:15px;}


/*logos*/

.logos{ display: flex; justify-content: center; align-items: center; position:relative; top:140px; width:60%; margin:auto; text-align:left; font-weight: 300; font-size:16px; color:#3d3f45;line-height: 1.3em;}
.logo-manufaktur {padding:10px 20px 10px 20px; width:270px;}
.logo-ids {padding:10px 20px 10px 20px; width:200px;}
.logo-nussbaumer {padding:10px 20px 10px 20px; width:200px;}
.logo-hollu {padding:10px 20px 10px 20px; width:200px;}
.logo-zumtobel {padding:10px 20px 10px 20px; width:200px;}


/* button*/

.button {
    margin-top:20px;
    text-align: center;
    margin:auto;
    width:310px;
    padding:15px 0 15px 0;
    background-color: #f39223;
    text-decoration: none;
    border-radius: 6px;
}

.button a{
    text-decoration: none;color:#fff;}

.button:hover {background-color: #1e668c;}


/* Scroll To Top */

.to-top-button {
    position: fixed;
    cursor: pointer;
    bottom:100px;
    right:100px;
    z-index: 200;
}

.to-top-button img{ width:35px;}


/* Social Media */


.socialmedia{display: flex;}

.fb{
    position: relative;
    width:25px;
    top:10px;
    z-index: 200;
    padding-right:10px;
}

.IN{
    position: relative;
    width:25px;
    top:10px;
    z-index: 200;
    padding-right:10px;
}

.xing{
    position: relative;
    width:25px;
    top:10px;
    z-index: 200;
}

/* Table */

table, td {
    border-collapse: collapse;
    padding: .3em .5em;
    border-left: thin solid #fff;
    border-right: thin solid #fff;
    border-bottom: thin solid #fff;
}

.tableleft{padding-right:50px;}

table {
    margin-left: 1em;}

th, caption {
    color: #fff;
}

.postTable  {
    margin: auto;
    max-width: 800px;
    position: relative;
    border-spacing: 0;
    background-color: white;
    padding:10px;
    font-size: 17px;
    empty-cells: hide;
}

.postTable .left { text-align: left; padding:5px; font-style: italic;}
.postTable .center1 { text-align: center;  color: #444; background-color:rgba(206,225,244,0.5);}
.postTable .center2 { text-align: center;  color: #444; background-color:rgba(158,196,234,0.4);}
.postTable .center3 { text-align: center;  color: #fff; background-color:#f39223;}
.postTable .center4 { text-align: center;  color: #444; background-color:rgba(109,167,222,0.5);}
.postTable .right { text-align: right; font-style: italic; }

th{
    border-collapse: collapse;
    border-bottom: solid 1px #fff;
    padding: .3em .5em;
    font-size: 16px;
    font-style: normal;
    border-bottom: thin solid #fff;
}

tr{
    font-size: 15px;
}

.blue{
    background-color: #1e668c;
}

.orange{
    background-color: #f39223;
}

td {padding:5px;}

.left-headline{text-transform: uppercase;}
.headline{ text-align: center; font-weight: 400;}
.center-headline{ text-align: center; font-weight: 400; background-color: #1e668c;}
.right-headline{text-transform: uppercase; font-weight: 400;}

.sternchen {width:600px; margin:auto; text-align: center;}


/* Anmeldung */

.anmelden{border-radius: 6px; padding:5px;}
.anmelden a{ background-color: #1e668c; color:#fff; border-radius: 6px; padding:2px 6px;}
.anmelden a:hover {background-color: #f39223;}


/* Kontakt */

.box span{
    margin-top:10px;
    display: block;
    font-size:20px;
}

.box1 {
    margin-bottom:40px;
}

.form {
    text-align:center;
    width:530px;
    margin: auto;
    margin-bottom:20px;
}

.form p{
    text-align:left;
    margin-bottom:5px;
    padding-left:2px;
}

.feld {
    font-size:14px;
    width:510px;
    height:40px;
    border:0px;
    padding-left:10px;
    margin-bottom:10px;
    background-color:#fff;
    border:1px solid lightgrey;
    font-family: 'Saira', sans-serif;
}

textarea {
    font-size:14px;
    width:500px;
    padding:8px 10px;
    border:0px;
    background-color:#fff;
    border:1px solid lightgrey;
    margin-bottom:10px;
    font-family: 'Saira', sans-serif;
}

label {
    font-family: 'Saira', sans-serif;
    color:#000000;
    font-size: 11px;
    padding:0px;
    text-align: left;
}

input.submit01 {
    color:#fff;
    background-color: #f39223;
    margin-top:20px;
    font-size: 14px;
    text-align: center;
    padding:4px 10px 4px 10px;
    border: 4px solid #f39223;
    border-radius:6px;
    margin: auto;
    cursor: pointer;
    font-family: 'Saira', sans-serif;
}

input.submit01:hover{
    background-color: #1e668c;
    border: 4px solid #1e668c;
}

.ausgabeerrormessage {
    width:100%;
    color:#000000;
    position: relative;
    text-align: center;
    line-height: 40px;
}

.spamfilter { display: none; }


/* Footer */

footer{background-color: #f0f7fe; max-height:300px; width:100%; position: relative; top:140px;}

.contact{position:relative; display: flex; justify-content:left; margin:0 auto; padding:40px 0 40px 0; font-size:13px; line-height: 1.3em; color:#3d3f45; width:60%}
.contact a{text-decoration: none; color:#3d3f45;}
.contact-left {text-align:left; padding:0 40px 0 0;}
.contact-middle {text-align:left; padding:55px 40px 0 40px;}
.contact-right {text-align:left; padding:55px 40px 0 0;}

.imprint {background-color: #fff; height:40px; position: relative; bottom:0px; color:#3d3f45; font-size: 12px; width: 100%; padding-top:10px; line-height:2.4em;}
.imprint a{color:#3d3f45; text-decoration:none;}


/*Responsive*/

@media only screen and (max-width: 1200px) {
    .bar{position: absolute;
        display: block;
        right: 10px;
        padding-top: 30px;
        margin-right: 20px;
        z-index: 20;}

    .bar img{width:30px;}

    .menue {display: none;}
    .side-menue a{right:80px;}
}


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

    h1 {font-size:34px;}
    h2 {font-size:20px;}
    .content{ width:80%;}
    .content2 { width:80%;}
    .content3 { width:80%;}
    .demos img{max-width:240px;}

    .to-top-button {bottom:42px; right:0px;}
    .contact{width:80%}
}

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

    .content2 { flex-direction: column;}

    .boxes { flex-direction: column;}
    .left{margin-right:0px; max-width:100%; height: auto; margin-bottom:30px;}
    .right{margin-left:0px; max-width:100%; height: auto;}

    .boxpic {max-width: 100%; padding-left: 0px;}

    .demos{flex-direction: column;}
    .demos img{max-width:310px;}
    .demo{margin:15px;}

    h1 {font-size:30px;}
    h2 {font-size:18px;padding-bottom:6px;}
    h4 {font-size:24px;}
    p {font-size:14px; line-height: 1.3em;}
    li {font-size:14px; line-height: 1.3em;}

    .faqpic{max-width:90%; margin-left:0px;}
    .faqpic-big{max-width:90%; margin-left:0px;}

    .bausteinpic {width:80%;   }

    .postTable .left { text-align: left; padding:5px; font-style: italic;}
    th{ padding: .3em .3em; font-size: 13px; line-height: 1.2em;}
    tr{ font-size: 12px; line-height: 1.2em; }
}


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


    .tableleft{padding-right:5px;}
}

@media only screen and (max-width: 700px) {
    h1 {font-size:26px;}
    h3 {font-size:16px;}
    h4 {font-size:22px;}

    .home{margin-top:45px; margin-bottom:40px;}

    footer{max-height:400px;}
    .contact{flex-direction: column;}
    .contact-left {text-align:left; padding-right:0px;}
    .contact-right {text-align:left; padding-left:0px; margin:20px 0 20px 0;}

    .sternchen {width:500px;}

    .newsletter{
        width:180px;
        font-size: 14px;  }
}


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

    .form {width:400px;}
    .feld {width:410px;}
    textarea {width:400px;}

    .menue2 {display:block;}
    .side-menue{display: none;}

}

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

.sternchen {width:400px;}

}

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

    .logos{ flex-direction: column; top:140px; width:80%; margin:auto; text-align:center;}
    .logo-ids {padding:10px 20px 30px 20px; width:160px;}
    .logo-hollu {padding:10px 20px 30px 20px; width:160px;}
    .logo-manufaktur {width:200px;}
    .logo-nussbaumer {width:160px;}
    .logo-zumtobel {width:160px;}

    .form {width:320px;}
    .feld {width:330px;}
    textarea {width:320px;}

    .home{margin-top:35px; margin-bottom:30px;}
    .sternchen {width:300px;}
}

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

    .imprint {line-height:1.4em;}

}

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

    .to-top-button {bottom:42px; right:0px;}
}

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

    .line {border-bottom: 1px solid #3d3f45; height:40px; margin-bottom:20px;}
    .form {width:270px;}
    .feld {width:280px;}
    textarea {width:270px;}
}