@media (-webkit-min-device-pixel-ratio: 1.5) {
    /* WebKit */
}

@media (min--moz-device-pixel-ratio: 1.5) {
    /* Mozilla */
}

@media (-o-min-device-pixel-ratio: 3/2) {
    /* Opera */
}

@media (min-resolution: 1.5dppx) {
    /* CSS3 */
}
@import url('https://qinum.com/media/1502/googlefontsmontserrat.woff2');



@font-face {
	font-family: "Montserrat";
	src: url('https://qinum.com/media/1528/montserrat-variablefont_wght.ttf') format('woff2-variations');
	font-weight: 600 900;
}

body {
    font-size: 14px;
    font-size: 1.6rem;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: white !important;
    overflow-x: hidden;
    display: none;
    scroll-behavior: smooth;
    text-align: left;
}

p {
    font-family: 'Montserrat', sans-serif;
    color: #475464 !important;
    line-height: 24px;
    width: 100%;
}


.fliesstextkursiv {
    font-size: 1.3em;
    color: #1280ff;
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
}

.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;

}

/**umb_name:uberschrift*/
.uberschrift {
    text-align: left;
    color: #1280ff;
    font-size: 14pt;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;

    pointer-events: none;
    cursor: default;
}



/**umb_name:fliesstext*/
.fliesstext {
    font-size: 1.3em;
    font-family: 'Montserrat', sans-serif;
}

/**umb_name:lesen sie mehr*/
.lesenSieMehr {
    text-align: left;
    color: #073870;
    font-size: 1.3em;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

a:focus {
    outline: 0;
}

html {
    min-height: 100%;
}

/**umb_name:JobsUberschrift*/
.jobsuberschrift {
    text-align: left;
    color: #000;
    font-size: 16pt;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.umb-grid div.container {
    max-width: inherit
}

/*---Anker sollen 100px früher springen---*/
.sprung {
    visibility: hidden;
    height: 0px !important;
    position: absolute;
    margin: -100px;
}


/* --------------Schrifttypen Allgemein-------------- */

@media only screen and (min-width:1px) and (max-width:767px){

    h1{text-align: center;
      color: #073870;
      font-size: 24px;
      font-weight: bold;
        
    }
    }
    
    @media only screen and (min-width:768px) {
    
      h1{text-align: center;
        color: #073870;
        font-size: 26px;
        font-weight: bold;
        
      }
      }
h4 {
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-size: 22pt;
    font-weight: normal;

}


h2 {
    text-align: left;
    color: #252C34;
    font-size: 16pt;
    font-weight: normal;

}

h3 {

    text-align: left;
    color: #1280ff;
    font-size: 14pt;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}

h5 {
    text-align: center;
    color: #D9DBDC;
    text-transform: uppercase;
    font-weight: normal;
    vertical-align: middle;
}

.inactivelink {
    pointer-events: none;
    cursor: default;
}

.teamnamen {
    text-align: center;
    color: #fff;
    font-size: 1.2em;

}


.mehr {
    color: #1280ff;
    font-size: 10pt;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
}

.jobs {
    color: #1280ff;
    font-size: 10pt;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
    display: inline-block;
}

/* --------------CONTENT ARTEN--------------*/
.news {
    background-color: green;
}

/*Dieser Abschnitt ist für die Block-Abschnitte auf der Hauptseite. Ich musste sie viel verschachteln, damit ein 
ordentlicher Abstand in allen Browsern funktioniert.*/

.blog {
    background-color: #D9DBDC;
    margin: 0 auto;
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;

}

.inner {
    padding: 15px;
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    width: 100%;
    min-width: 30px;
    height: 100%;
    margin: 1%;
    position: relative;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    box-sizing: border-box;

}

.inner2 {
    padding: 15px;
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    width: 100%;
    min-width: 30px;
    height: 100%;
    text-align: left;


}

.inner:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.boxtest {

    background: #fff;
    border-radius: 2px;
    display: inline-block;
    width: 100%;
    min-width: 30px;
    height: auto;
    padding: 15px;
    position: relative;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    flex-wrap: wrap;
    box-sizing: border-box;
}


.boxtest2 {

    background: #fff;
    border-radius: 2px;
    width: 100%;
    min-width: 30px;
    height: auto;
    padding: 15px;
    position: relative;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    flex-wrap: wrap;
    box-sizing: border-box;
}


.boxtest3 {

    background: #fff;
    border-radius: 2px;
    width: 100%;
    min-width: 30px;
    padding: 15px;
    position: relative;
    text-align: left;
    /*box-sizing: border-box;*/
}

/* Hier kommen spezifische Blöcke für die Unterseiten*/

.abstand {
    margin: 30px;
}

.inner_kompetenzen {
    padding: 15px;
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    width: 100%;
    min-width: 30px;
    height: 100%;
    margin: 1%;
    position: relative;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    box-sizing: border-box;

}

.inner_kompetenzen2 {
    padding: 15px;
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    width: 100%;
    min-width: 30px;
    height: 100%;
    margin: 1%;
    position: relative;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

.inner_logos {


    border-color: #373D40;
    border-width: thin;
    border-style: solid;
    display: block;
    width: 100%;
    height: 100px;
    position: relative;
    margin: 0 auto;
    background-color: #2B3033;
    padding: auto;

}

.logos {
    background-color: #2B3033;
}

.platzhalter {
    height: 30%;
    min-height: 20px;
}

.platzhalter2 {

    min-height: 20px;
}

/* --------------UNSERE PARTNER AREA--------------*/
div#partner {

    background-color: #1280ff;
    min-height: 200px;
    width: auto;
    text-align: center;
}

/*Smartphones*/
@media only screen and (min-device-width: 320px)and(orientation : landscape) {

    img.partner {
        max-width: 200px;
        width: 60vw;
    }
}

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

    img.partner {
        width: 100%;
        margin: 0px !important;
    }
}

/*Tablets*/
@media only screen and (min-device-width: 600px)and (orientation : landscape) {

    img.partner {
        max-width: 200px;
        width: 60vw;
    }
}

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

    img.partner {
        max-width: 200px;
        width: 90vw;
    }
}

/*Dektop PC's*/
@media only screen and (min-device-width: 1024px)and (orientation : landscape) {

    img.partner {
        max-width: 200px;
        width: 30vw;
    }
}

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

    img.partner {
        max-width: 180px;
        width: 90vw;
    }
}

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

    img.partner {
        max-width: 250px;
        width: 30vw;
    }
}

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

    img.partner {
        max-width: 250px;
        width: 90vw;
    }
}

.accordion {
    background-color: #1280ff;
    color: #fff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    font-size: 15px;
    outline: none;
    transition: opacity 2s ease-out;

}

.active,
.accordion:hover,
.accordion:active {
    outline: none;
    transition: opacity 2s ease-out;
}

.panel {
    padding: 18px 18px;
    display: none;
    background-color: #1280ff;
    color: white;
    overflow: hidden;
    text-align: left;
    font-size: 1.3em;
    font-family: 'Montserrat', sans-serif;
    transition: opacity 2s ease-out;
}

#accordion .ui-state-focus {
    outline: none;
}


.quote1 {
    text-align: left;
    font-size: 14pt;
    font-weight: bold;
    vertical-align: middle;
}

.quote {
    text-align: left;
    font-size: 14pt;
    font-weight: bold;
    vertical-align: middle;
    min-height: 140px;
    max-height: 200px;
}


.uberschriftneu {
    text-align: center;
    color: #1280ff;
    font-size: 12pt;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    pointer-events: none;
    cursor: default;
}

.blauerbalken {

    background: url(/media/1102/viereck.png) no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;

    color: white;
    padding-top: 15px;
    padding-left: 15px;

}

.blauerbalkendurchsichtig {
    display: flex;
    flex-direction: column;
    padding-top: 15px;
    padding-left: 15px;
}

.blauerbalkendurchsichtig2 {
    background: url(/media/1100/balkenneu.png) no-repeat;
    padding-left: 0px;
    padding-right: 0px;
}

.dreieck {
    background: url(/media/1103/dreieck2.png) no-repeat;
    background-size: cover;
}

@media only screen and (min-width:1px) and (max-width:767px) {
    .balkentext {
        background-size: cover;
        vertical-align: middle;
        margin-top: revert;
        color: white;
        font-size: 12pt;


    }

    .uberschrift {
        text-align: center;
        color: #1280ff;
        font-size: 12pt;
        font-weight: 600;
        font-family: 'Montserrat', sans-serif;
        pointer-events: none;
        cursor: default;
        line-height: 1.0 !important;
    }
}

@media only screen and (min-width :768px) {
    .balkentext {
        background-size: cover;
        vertical-align: middle;
        margin-top: revert;
        color: white;
        font-size: 14pt;


    }

    .uberschrift {
        text-align: center;
        color: #1280ff;
        font-size: 14pt;
        font-weight: 600;
        font-family: 'Montserrat', sans-serif;
        pointer-events: none;
        cursor: default;
    }
}

img.logoprodukt {
    max-width: 200px;
    height: auto;
}

;

p.produktblauschrift {
    text-align: center;
    color: #1280ff;
    font-size: 12pt;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    pointer-events: none;
    cursor: default;
}

@media only screen and (min-width :1px) and (max-width:753px) {
    #produktbildimg-normal {
        max-width: 300px;
        height: auto;
        max-height: 390px;
    }
}

@media only screen and (min-width :754px) and (max-width:1167px) {
    #produktbildimg-normal {
        max-width: 100%;
        height: auto;
        max-height: 390px;
    }
}

@media only screen and (min-width :1168px) {
    #produktbildimg-normal {
        max-width: 300px;
        height: auto;
        max-height: 390px;
    }
}

.kleineralsmd {
    padding-top: 15px;
    color: #1280ff;
    font-size: 12pt;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

@media only screen and (min-width:1px) and (max-width:1700px) {
    .backgroundflyer {
        background-size: cover;
        width: auto;
        height: 400px;
        min-height: 10vh;
        max-height: 400px;
        background-position: right top;
    }
}

@media only screen and (min-width:1701px) {
    .backgroundflyer {
        background-size: cover;
        width: auto;
        height: 500px;
        min-height: 10vh;
        max-height: 500px;
    }
}

.padding-0 {
    padding: 0px !important;
}

/*additional styles for 2-4k solutions*/


/* Hier Styles für 2 und 4k aufloesung */

@media screen and (min-width:1921px) and (max-width:2999px){
    .col-xxxl-5{
    max-width:50vw!important;
    }
    }
    
    @media screen and (min-width:3001px){
      .col-xxxl-5{
      max-width:30vw!important;
      }
      }
    
      @media screen and (min-width:2130px) and (max-width:2500) {
        .col-xxxl-6{
        max-width:60vw!important;
        }
        }
        @media screen and (min-width:2501px) and (max-width:3500){
          .col-xxxl-6{
          max-width:45vw!important;
          }
          }
    
          @media screen and (min-width:3501px) {
            .col-xxxl-6{
            max-width:30vw!important;
            }
            }