html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Lato;
}


sub, sup {font-size: 12px }
.imageWrapper {
    width: 100%;
    height: 95%;
    transition: all 0.5s ease;
    margin: 0 auto;
}

.imageWrapper > img { opacity: 0; }

.imageWrapper.active {
    opacity: 0.5;

}

.imageWrapper.active .image {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
}

.image {
    border: none;
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}

.infoBar {
    bottom: 0;
    width: 100%;
    height: 45px;
    background-color: rgba(135,135,135,1);
    position:fixed;
    text-align: center;
    padding: 12px;
    color:white;
    text-transform: uppercase;
    letter-spacing: 1px;
    display:none;
}

.infoBar .title {
    font-size: 15px;
}

.infoBar .subTitle {
    font-size: 11px;
}

.logo { transition: all 0.5s ease; background-image: url(../img/novoferm_logo.png); background-size:contain; width: 200px; height: 38px; position:absolute; top: 30px; right: 20px;background-repeat:no-repeat;}
.logoTop { }
.mainTitle {
    position:absolute;
    left: 75px;
    top: 30px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #4a4a4a;
}

.mainTitle .title { font-size: 25px; font-weight: bold; margin-bottom: 10px;  }
.mainTitle .subTitle { font-size: 16px;  }
.mainTitle .subTitle .subTitleText {  position: relative; float: left;}

.popupWrapper { display: none; z-index:5; width: 100%; height: 100%; margin: 0; padding: 0; position:absolute; left:0; top:0;  }
.popup {  width: 810px; max-width: 800px; height: 465px; margin: 0 auto; margin-top: 15%;}
.popup .popupInner {  position:relative;padding: 15px; border: 1px solid #878787; background-color: white; float: left; }
.popup .productTitle { float:left; position:relative; width:100%;  background-color:#878787; text-align: center; color:white; text-transform:uppercase; letter-spacing: 2px; padding: 7px 0; margin-bottom: 15px; }
.popup .productTitle .productTitle1 { font-size: 16px; padding-bottom: 5px; font-weight: 500; }
.popup .productTitle .productTitle2 { font-size: 12px; font-weight: 400; }
.popup .productImage { float:left; width: 300px; height: 360px;  }
.popup .productImage img {width:100%; }
.popup .productText { margin-left: 15px; position:relative; font-size: 13px; float:left; width: 453px; height: 360px; background-color: #0069b4; color: white; }
.popup .productTextInner { padding: 20px; }
.popup .productTextInner ul { padding-left:16px; margin:0;}
.popup .productTextInner li { margin-bottom: 5px;}
.popup .productContent { height: 275px; overflow: auto; }
.popup .btnProduct { position:absolute; right: 10px; bottom: 10px; color:white; font-size: 12px; letter-spacing: 0.4px}
.popup .btnTech { position:absolute; right: 10px; bottom: 10px; color:white; font-size: 12px; letter-spacing: 0.4px}
.popup .btnBackMulti { position:absolute; left: 10px; bottom: 10px; color:white; font-size: 12px; letter-spacing: 0.4px; cursor:pointer;}
.popup .btnProduct:after{ content: '.'; width: 25px; height: 25px; float: right; border-radius: 10px; background-image:url(../img/Novoferm_Pfeil.svg); margin-left: 9px; margin-top: -4px; }
.popup .btnTech:after{ content: '.'; width: 25px; height: 25px; float: right; border-radius: 10px; background-image:url(../img/Novoferm_Pfeil.svg); margin-left: 9px; margin-top: -4px; }

.popup .btnBackMulti:before{ content: '.'; width: 25px; height: 25px; float: left; border-radius: 10px; background-image:url(../img/Novoferm_Pfeil-back.svg); margin-right: 9px; margin-top: -4px; }
.popup a { color: white; }
.popup .btnClose { position:absolute; width: 20px; height: 20px; right: 0; top: 0; margin-right: -10px; margin-top: -10px; background-image:url(../img/arrow-cross.svg); cursor:pointer; }
.popup .btnClose:hover { background-image:url(../img/arrow-cross-active.svg);  }
.popupCloser { display:none; width: 100%; height: 100%; background-color:red; position:absolute; left: 0; top:0;}
.popup .popupArrowBack { display:none; cursor:pointer; position:absolute; left: 10px; top:0px; background-image: url(../img/arrow-left.svg); width: 25px; height: 25px;}
.popup .popupArrowBack:hover { background-image: url(../img/arrow-left-active.svg); }
.popup .popupArrowForward { display:none;cursor:pointer; position: absolute; right: 10px; top:0px; background-image: url(../img/arrow-right.svg); width: 25px; height: 25px;}
.popup .popupArrowForward:hover { background-image: url(../img/arrow-right-active.svg); }



.popupWrapperMulti {  display: none; z-index:5; width: 100%; height: 100%; margin: 0; padding: 0; position:absolute; left:0; top:0; }
.popupWrapperMulti .productMultiWrapper { width: 768px }
.popupWrapperMulti .productMultiWrapper.multi2 .productMulti { width: 180px; float: left; position: relative; margin-right: 15px; cursor:pointer }
.popupWrapperMulti .productMultiWrapper.multi2 .productMulti:first-child { margin-left: 195px; }
.popupWrapperMulti .productMultiWrapper.multi2 .productMulti:last-child { margin-right: 0px; }
.popupWrapperMulti .productMultiWrapper.multi2 .productMulti img { width: 178px; float: left; position: relative; margin-bottom: 10px; }

.popupWrapperMulti .productMultiWrapper.multi3 .productMulti { width: 180px; float: left; position: relative; margin-right: 15px; cursor:pointer }
.popupWrapperMulti .productMultiWrapper.multi3 .productMulti:first-child { margin-left: 98px; }
.popupWrapperMulti .productMultiWrapper.multi3 .productMulti:last-child { margin-right: 0px; }
.popupWrapperMulti .productMultiWrapper.multi3 .productMulti img { width: 178px; float: left; position: relative; margin-bottom: 10px; }

.popupWrapperMulti .productMultiWrapper.multi4 .productMulti { width: 180px; float: left; position: relative; margin-right: 15px; cursor:pointer }
.popupWrapperMulti .productMultiWrapper.multi4 .productMulti:last-child { margin-right: 0px; }
.popupWrapperMulti .productMultiWrapper.multi4 .productMulti img { width: 178px; float: left; position: relative; margin-bottom: 10px; }

.popupWrapperMulti .productMultiTitle {font-size: 11px; float:left; position:relative; height:42px; background-color:#878787; text-align: center; color:white; text-transform:uppercase; letter-spacing: 1px; padding: 7px 5px;   }



.gebaeudeWrapper { text-align: center; top: 110px;  position:relative; left: 30px; max-width: 1200px; margin:0 auto; }
.gebaeude { width: 33%; float: left; }
.gebaeudeInner { border: 1px solid #878787; padding: 10px; margin-right: 20px; margin-bottom: 20px;  }
.gebaeudeTitle{ height: 50px; background-color: #878787; color: white; text-transform: uppercase; text-align: center; margin-bottom: 10px; display:flex; align-items: center; justify-content: center; }
.gebaeudeImage img { max-width: 100%; }


.gebaeude:hover .gebaeudeTitle { background-color: #0069b4; }

.backBtn { display: none; position: absolute; top: 38px; left: 30px; color: #4a4a4a; text-transform: uppercase; font-size: 14px; }
.backBtn:before { content: ' '; width: 30px; height: 30px; float: left; background-image:url(../img/arrow-back.svg); margin-right: 9px; margin-top: -4px; border: 2px solid white;  border-radius: 50%; }
.backBtn:hover:before { background-image:url(../img/arrow-back-active.svg);  }


.infoBtn { position: relative; float: left; cursor:pointer; }
.infoBtn:before { content: ' '; width: 15px; height: 15px; float: left; background-image:url(../img/icon_info.svg); margin-right: 9px; margin-top: 1px; border: 2px solid white;  border-radius: 50%; }
.infoBtn:hover:before { background-image:url(../img/icon_info_active.svg);  }

.popupInfo { background-color: white; border: 1px solid #878787; margin-top: 30%; position: absolute; top: 0; margin: 0 auto; width: 400px; padding: 10px; font-size: 14px; }

.moreInfoWrapper { position:absolute; right: 0; background-color: #0069b4; color: white; text-transform: uppercase; width: 255px; bottom: 20%; font-size: 13px; letter-spacing: 2px; padding: 10px; text-align: right   }
.moreInfoWrapper .btnClose {  position:absolute; width: 20px; height: 20px; left: 0; top: 0; margin-left: -10px; margin-top: -10px; background-image:url(../img/arrow-cross.svg); cursor:pointer; }
.moreInfoWrapper .btnClose:hover { background-image:url(../img/arrow-cross-active.svg);  }


.imprint { float: right; margin-right: 32px; margin-top:10px; margin-bottom: 20px;}
.imprint a { text-transform: uppercase; letter-spacing: 4px; color: #4a4a4a; font-size:12px; text-decoration:none}

.introText { float: left; text-align: left; margin-bottom: 20px;}


/* Responsive */


/* Große Monitore */
@media only screen and (max-width: 1200px) {
    .mainTitle   { letter-spacing: 3px; }
    .mainTitle  .title { font-size: 20px; }
    .mainTitle  .subTitle { font-size: 12px;  }
    .infoBar {   height: 40px; }
    .infoBar .title {   font-size: 13px; }
    .infoBar .subTitle {   font-size: 10px; }


    .backBtn {  display: none; font-size: 12px; }
    .backBtn:before { margin-top: -5px; }

    .infoBtn:before { margin-top: -2px; }

    .moreInfoWrapper {  width: 240px; bottom: 20%; font-size: 12px;  }


}

/* Mittlere Monitore */
@media only screen and (max-width: 980px) {
    .mainTitle   { letter-spacing: 2px; }
    .mainTitle  .title { font-size: 18px; }
    .mainTitle  .subTitle { font-size: 10px;  }

    .backBtn {  display: none; font-size: 10px; }
    .backBtn:before { margin-top: -6px; }


    .gebaeudeTitle { font-size: 14px; }

    .infoBtn:before { margin-top: -4px; }

    .moreInfoWrapper {  width: 220px; bottom: 20%; font-size: 11px;  }

}

/* Tabletts */
@media only screen and (max-width: 760px) {



}


::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}
::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}
::-webkit-scrollbar-thumb {
    background: #e1e1e1;
    border: 0px none #ffffff;
    border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
    background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
    background: #000000;
}
::-webkit-scrollbar-track {
    background: #666666;
    border: 0px none #ffffff;
    border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
    background: #666666;
}
::-webkit-scrollbar-track:active {
    background: #333333;
}
::-webkit-scrollbar-corner {
    background: transparent;
}