@import url('https://www.kaeltech.de/fonts/open-sans/open-sans.css');
* {
    font-family: 'Open Sans', sans-serif;
    /*font-size: 1em;*/
    /*color: #4D4D4D;*/
    font-weight: 300;
    color: rgba(0, 0, 0, 0.8);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto
}

.mobileContent {
    display: none
}

#theContentArea {
    font-size: 1.2em;
}

input,
textarea {
    font-size: 1em
}

a {
    color: #007BC4
}


/*.cituroContainer[floating][buttonPosition="right_bottom"]{margin-bottom: 2em}*/

.footerMaps {
    font-size: 1.1em
}

.footerContent a {
    color: #4D4D4D
}

body,
html {
    padding: 0;
    margin: 0
}

strong,
b {
    font-weight: 400;
}


/*
img.fw{transition: all 1.5s linear;}
img.fw:hover{width:1000px; height:auto;}
*/

img.fw {
    width: 1000px;
    max-width: 100%;
}

.headerSM {
    display: none
}

.tc1 {
    color: #4D4D4D
}

.tc2 {
    color: rgb(4, 127, 191)
}

.tc3 {
    color: rgb(245, 172, 27)
}

.tc4 {
    color: rgb(238, 168, 39)
}

.tc5 {
    color: rgb(189, 146, 84)
}

.bgc1 {
    background-color: #4D4D4D
}

.bgc2 {
    background-color: rgb(4, 127, 191)
}

.bgc3 {
    background-color: rgb(245, 172, 27)
}

.bgc4 {
    background-color: rgb(238, 168, 39)
}

.bgc5 {
    background-color: rgb(189, 146, 84)
}

.bgGray {
    background-color: rgb(233, 233, 233);
    clear: both;
}

a {
    text-decoration: none
}

h1 {
    font-size: 2em;
    font-weight: 400;
    /*margin-bottom: 50px;*/
    text-transform: uppercase;
    line-height: 1.5em
}

h2 {
    font-size: 1.6em;
    font-weight: 400;
    line-height: 1.4em;
    margin: 1.2em 0em 2em 0em;
}

h3 {
    font-size: 1.4em;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 3em;
}

h4 {
    font-size: 1.4em;
    font-weight: 400
}

h5 {
    font-size: 1.2em;
    font-weight: 400
}

.mr10 {
    margin-right: 10px
}

.mr20 {
    margin-right: 10px
}

.mr30 {
    margin-right: 10px
}

.mr40 {
    margin-right: 10px
}

.ml10 {
    margin-left: 10px
}

.ml20 {
    margin-left: 10px
}

.ml30 {
    margin-left: 10px
}

.ml40 {
    margin-left: 10px
}

.mt10 {
    margin-top: 10px
}

.mt20 {
    margin-top: 20px
}

.mt30 {
    margin-top: 30px
}

.mt40 {
    margin-top: 40px
}

.mb10 {
    margin-bottom: 10px
}

.mb20 {
    margin-bottom: 20px
}

.mb30 {
    margin-bottom: 30px
}

.mb40 {
    margin-bottom: 40px
}

#theSite {}

#header,
footer {
    background-color: rgb(233, 233, 233)
}

#header {
    padding: 0px 20px 0px 20px
}

#logo {
    width: 180px;
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px
}


/*footer {position: fixed; bottom: 0px; width: 100%;}*/

footer {}

.footerContent {
    padding: 20px;
}

#header {
    display: flex
}

.hfcLogo,
.hfcNav,
.hfcIcons {
    flex-grow: 1;
    flex-shrink: 1
}

.hfcLogo {
    /*width: 280px;*/
    margin-right: 100px;
}

.hfcNav {
    width: 100%;
}

.hfcIcons {
    width: 300px;
    padding-top: 30px;
    margin-left: 20px
}

.hfcIcons a img {
    width: 32px
}


/*nav*/

.navHoriContainer {
    display: flex;
    justify-content: space-between;
}

.navHoriMainItem {
    flex-grow: 1;
    flex-shrink: 1;
}

.navHoriMainItemContent {
    padding: 38px 0px;
    font-size: 1.2em;
    text-align: center
}

.navHoriMainItemContent:hover {
    background-color: #FFFFFF
}


/*.navHoriMainItem:hover~#contentSubNavFrame{display: block;}*/


/*funktioniert nicht*/

#contentSubNavFrame {
    position: absolute;
    width: 90%;
    margin-left: 5%;
    top: 100px;
    z-index: 2;
    opacity: 1;
    display: none;
    background-color: #FFFFFF;
    border-radius: 10px;
    /*border-bottom: rgb(4, 127, 191) 1px solid;*/
    /*box-shadow:0px 20px 60px 1px rgba(0, 0, 0, 0.4);*/
}

#contentSubNavFrame a {
    color: rgba(0, 0, 0, 0.8);
}

.contentSubNavContent {
    padding: 20px;
    margin-bottom: 20px;
    opacity: 0
}

.contentSubNavContentContainer {
    display: flex;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0px auto;
}

.contentSubNavContentItem {
    flex-grow: 1;
    flex-shrink: 1;
    background-color: rgb(233, 233, 233);
    display: flex;
    align-items: center;
    /*
    min-width: 24%;
    max-width: 24%;
    */
    padding: 20px;
    border: #F1F1F1 1px solid;
    border-radius: 10px;
    margin-bottom: 20px;
    margin-right: 20px;
    font-weight: 600;
    /*font-size: 1.2em;*/
    color: rgb(4, 127, 191)
}

.contentSubNavContentItem ul {
    list-style: none;
    padding-left: 20px
}

.contentSubNavContentItem ul li {
    margin-bottom: 8px
}

.contentSubNavContentItem ul li ul {
    margin-top: 8px
}

.largeUpper {
    font-size: 1.1em;
    text-transform: uppercase
}

.subNavActive {
    color: rgb(4, 127, 191);
}


/*nav*/

.headerImage img {
    width: 100%;
}

.centeredBlock {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    clear: both;
}

.centeredBlock1m {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px
}

.centeredBlock1m.footerMaps {
    width: 100%;
}

.cBlack h2 {
    text-transform: uppercase;
}

.cBlack h2,
.cBlack * {
    color: black;
}

.contentImage {
    float: right;
    max-width: 40%;
    margin-left: 30px
}

.menuContent {
    line-height: 1.9em;
    margin-bottom: 40px;
    /*font-size:1.1em;*/
}

.fxnw {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px
}

.fx {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


/*simpleselect*/

.simpleselect {
    height: 70px
}

.simpleselect .options {
    width: 290px;
    box-shadow: #CCCCCC 10px 20px 10px;
}

.simpleselect .placeholder,
.simpleselect .options .optgroup .optgroup-label {
    width: 280px;
    padding: 24px 20px
}

.simpleselect .options .option {}


/* /simpleselect*/


/*niceSelect*/

.nice-select {
    width: 50%;
    height: 68px;
    border-radius: 0;
    padding-top: 15px
}

.nice-select .list {
    height: 200px;
    overflow-y: scroll;
}

.flexNewLine {
    height: 1px;
    width: 100%
}

#fAnfrageKlimaanlage {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#fAnfrageKlimaanlage h1,
#fAnfrageKlimaanlage h2,
#fAnfrageKlimaanlage h3,
#fAnfrageKlimaanlage h4 {
    width: 100%;
}

.anfrageBlock {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 100%;
    max-width: 100%;
    border: rgba(106, 113, 122, 0.2) 1px solid;
    margin-bottom: 20px
}

.anfrageBlockContent {
    padding: 20px
}

.anfrageBlock .blocktitle {
    font-size: 1.8em;
    padding: 20px;
    color: #FFFFFF;
    background-color: #4D4D4D;
}


/*Formular Anfrage Klimaanlage*/

.depKA {
    display: none
}

#fKontakt #object_text {
    height: 250px;
    width: 100%;
}

#fAnfrageKlimaanlage .fxffhw,
#fKontakt .fxffhw {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 48%;
    max-width: 48%
}


/*flexFormFieldHalfWidth*/

#fAnfrageKlimaanlage .fxff3e,
#fKontakt .fxff3e {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 31%;
    max-width: 32%
}


/*flexFormField3Elemente*/

#fAnfrageKlimaanlage input,
#fKontakt input {
    padding: 20px;
    margin-bottom: 10px
}

#fAnfrageKlimaanlage .fieldtitle,
#fKontakt .fieldtitle {
    /*font-size: 1.2em;*/
}

#fAnfrageKlimaanlage .fieldtitle2,
#fKontakt .fieldtitle2 {
    /*font-size: 0.9em;*/
    font-style: italic
}

#fAnfrageKlimaanlage .fw,
#fKontakt .fw {
    width: 100%
}

#fAnfrageKlimaanlage .fl,
#simpleselect_object_anrede,
#fKontakt .fl {
    float: left
}

#fAnfrageKlimaanlage .fr,
#fKontakt .fr {
    float: right
}

.buttonAKS {
    padding: 20px;
    background-color: rgb(4, 127, 191);
    color: #FFFFFF;
    font-weight: 600;
    width: 180px;
    float: right;
    text-align: center;
    margin-bottom: 150px
}

.buttonAKS:hover {
    cursor: pointer
}

#akInfo {
    margin-bottom: 10px
}

.dn {
    display: none
}


/* / Formular Anfrage Klimaanlage*/

#kontaktAttachment,
#fileToUpload {
    display: none
}

#kontaktAttachmentContainer {
    display: block;
}

#addAttachmentBlock {
    margin-top: 10px;
    height: 30px;
    margin-bottom: 50px
}

#addAttachmentBlock:hover {
    cursor: pointer
}

#addAttachment,
#addAttachmentText {
    float: left
}

#addAttachmentText {
    margin-left: 10px
}

.circleGray {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    border: #4D4D4D 1px solid
}

.circleGray .charCenter {
    padding-left: 10px
}

.choosenFileGlobal {
    flex-grow: 1;
    flex-shrink: 1;
}

.choosenFile {
    min-width: 80%;
    max-width: 100%
}

.choosenFileSize {
    width: 140px;
    text-align: right
}

.choosenFileType {
    width: 200px;
    overflow-y: hidden
}

.progressArea {
    width: 120px;
    display: none
}

.infoAnhang {
    background-color: red;
    color: #FFFFFF;
    padding: 20px;
    margin-top: 20px;
    display: none
}

.fileContainerDiv {
    margin-bottom: 50px
}

.nice-select.wide {
    border: #4D4D4D 1px solid;
}

span.current {
    color: #4D4D4D;
}

input[type="text"] {
    border: #4D4D4D 1px solid;
}

input[type="text"]::-webkit-input-placeholder {
    color: #4D4D4D;
    line-height: normal
}

input[type="text"]:-moz-placeholder {
    color: #4D4D4D;
}

input[type="text"]::-moz-placeholder {
    color: #4D4D4D;
}

input[type="text"]:-ms-input-placeholder {
    color: #4D4D4D;
}


/*
.phWhite::-webkit-input-placeholder {color:rgb(255,255,255);}
.phWhite::placeholder {color:rgb(255,255,255);}
.phWhite:-moz-placeholder {color:#FFFFFF;}
.phWhite::-moz-placeholder {color:#FFFFFF;}
.phWhite:-ms-input-placeholder {color:#FFFFFF;}
.phWhite::-ms-input-placeholder {color:#FFFFFF;}

.phGray::-webkit-input-placeholder {color:rgb(106,113,122);}
.phGray:-moz-placeholder {color:rgb(106,113,122);}
.phGray::-moz-placeholder {color:rgb(106,113,122);}
.phGray:-ms-input-placeholder {color:rgb(106,113,122);}
.phGray::-ms-input-placeholder {color:rgb(106,113,122);}
*/

.neueZeile {
    clear: both
}

video {
    max-width: 100%
}

.centeredBlock img {
    max-width: 100%
}


/*video*/

.vft {
    max-width: 100%;
    width: 100%;
    height: ;
    margin-bottom: 20px;
    border: #000000 0px solid;
    margin: auto
}

.vft .vftPreview,
.vft video {
    width: 100%;
    height: auto
}

.vft video {
    display: none
}

.vft:hover {
    cursor: pointer
}

.pbtWrapper {
    text-align: center;
    padding-top: 25%;
    width: 100%
}

.pbt {
    width: 60px;
    height: auto;
}

.distContainer {
    display: flex;
    justify-content: space-between;
}

.footerMaps .distContainer {
    justify-content: space-around;
    margin-bottom: 40px
}

.distContainerItem {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 18%;
    max-width: 18%;
}

.distContainerItem h3 {
    color: #FFFFFF;
}

.bgWhite {
    background-color: #FFFFFF;
}

.bgWhiteP20 {
    background-color: #FFFFFF;
    padding: 20px;
}

.fontWhite {
    color: #FFFFFF;
}

.bgWhiteBBgray {
    background-color: #FFFFFF;
    border-bottom: #4D4D4D 3px solid
}

#verwandteThemen {
    margin-bottom: 50px
}

.menuContent.newsList {
    margin-bottom: 80px;
}

.menuContent.newsList img {
    max-width: 30%
}

.contentImage {
    float: right;
    margin-left: 20px;
    margin-top: 10px;
    width: 400px;
}

.maFrame {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.maContainer {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 45%;
    max-width: 48%;
    margin-bottom: 40px
}

.maTextTitle {
    position: relative;
    margin-top: -58px;
    /* width: 100%; */
    background-color: rgba(4, 127, 191, 1);
    height: 43px;
    padding-top: 15px;
    padding-bottom: 1;
    text-align: center;
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 10px;
    color: #FFFFFF;
}


/*mobileNav*/

#mobileMenuBar {
    display: none
}

#phone-header-navigation {
    background-color: rgb(105, 113, 123);
    height: 80px;
    display: none
}

#logoKaeltechMN {
    height: 60px;
    width: auto;
    padding: 10px
}

#buttonMNav {
    padding: 20px
}

.phone-menu-toggle {
    position: absolute;
    z-index: 1;
    width: 100%
}

ul.phone-menu-wrapper.unstyled {
    z-index: 1;
}

.phone-menu-left-side {
    float: left
}

.phone-menu-right-side {
    float: right
}

#mobileNavFrame {
    width: 100%;
    position: absolute;
    left: -100%;
    top: 0;
    z-index: 9999;
    min-height: 100%;
}

#mobileNavFrame .divNavSub,
#mobileNavFrame .divNavItem {
    background-color: #FFFFFF
}

#mobileNavWhiteBG {
    position: absolute;
    z-index: -1;
    background-color: #FFFFFF;
    min-height: 100%;
    width: 95%
}

#hideMobileNav {
    background-color: #F1F1F1;
    border-bottom: #666666 1px solid;
    padding: 20px 10px 20px 10px
}

#hideMobileNav .divCloseMenu {
    width: 30px;
    float: right
}

img#buttonMNav {
    height: 30px;
    width: auto;
    padding-top: 25px;
}

#mobileNavFrame .divNavMain {
    position: absolute;
    width: 95%
}

#mobileNavFrame .divNavItem {
    padding: 20px 10px 20px 10px;
    border-bottom: #CCCCCC 1px solid
}

#mobileNavFrame .divNavItem a {
    text-decoration: none;
    color: #000000
}

#mobileNavFrame .divNavItemActive {
    background-color: #F1F1F1
}

#mobileNavFrame .divOpenNext {
    width: 30px;
    float: right;
    cursor: hand
}

#mobileNavFrame .divOpenPrevious {
    width: 30px;
    float: left;
    cursor: hand
}

#mobileNavFrame .divNavSub {
    background-color: #FFFFFF;
    position: absolute;
    opacity: 100;
    display: block;
    left: -200%;
    width: 95%
}

#mobileNavFrame .divNavSub .divNavItem {}


/*OPC*/


/*
.centeredBlock.opc.opcHidden{display:none; transition: all 3.8s ease-in-out;}
.centeredBlock.opc.opcVisible{transition: all 3.8s ease-in-out;}
.opcVisible h1{color:blue; transition: all 0.8s ease-in-out; }
.opcHidden h1{color:red; transition: all 0.8s ease-in-out;}
*/

.opcHidden {
    opacity: 0.0
}

.opcVisible {
    opacity: 1;
    transition: opacity 1.0s ease-in-out;
    -moz-transition: opacity 1.0s ease-in-out;
    -webkit-transition: opacity 1.0s ease-in-out;
}

@keyframes breathingItem_KF {
    from {
        transform: scale(0.1);
    }
    to {
        transform: scale(1);
    }
}

.breathingItem {
    animation-duration: 0.81s;
    animation-name: breathingItem_KF;
    animation-iteration-count: 1;
    animation-direction: alternate;
}

@media screen and (max-width: 1150px) {
    .navHoriMainItemContent {
        font-size: 1em
    }
}

@media screen and (max-width: 1000px) {
    .mobileContent {
        display: block
    }
    h1 {
        font-size: 2em;
        font-weight: 300;
        margin-bottom: 80px;
        text-transform: uppercase;
        line-height: 1.3em
    }
    #phone-header-navigation {
        display: block
    }
    #mobileMenuBar {
        display: block
    }
    #header {
        display: none
    }
    .fxnw,
    .distContainer {
        flex-wrap: wrap;
    }
    #fAnfrageKlimaanlage .fxffhw {
        min-width: 100%;
        max-width: 100%
    }
    .centeredBlock,
    .centeredBlock1m {
        width: unset;
    }
    .maContainer {
        min-width: 100%;
        max-width: 100%
    }
    .menuContent.newsList img {
        max-width: 100%
    }
    .contentImage {
        float: none;
        width: 100%;
        margin-left: 0px
    }
    .distContainerItem {
        min-width: 100%;
        max-width: 100%
    }
}

@media screen and (max-width: 900px) {
    .menuContent {
        line-height: 1.3em
    }
}

@media screen and (max-width: 500px) {
    h1 {
        font-size: 1.3em;
        font-weight: 400
    }
    h2 {
        font-size: 1.2em
    }
}