/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 15, 2019,
    Author     : nIkOlA kAiL cAvA pOpOvIć
*/

@font-face {
    font-family: Metropolis-Regular;
    src: url("../fonts/Metropolis-Regular.otf") format("opentype");
}
@font-face {
    font-family: Metropolis-Regular;
    src: url("../fonts/Metropolis-Thin.otf") format("opentype");
}
@font-face {
    font-family: Metropolis-Regular;
    src: url("../fonts/Metropolis-Light.otf") format("opentype");
}
@font-face {
    font-family: Metropolis-Bold;
    src: url("../fonts/Metropolis-Bold.otf") format("opentype");
}



body{
    font-family: 'Metropolis-Regular', sans-serif;
    letter-spacing: 1px;
    font-size: 16px;
    line-height: 1.75;
    color: #333334;
    font-weight: 400;
    background-color: #ffffff;
    overflow-x: hidden;
    padding-left:30px;
    padding-right:30px;
}

h1, h2, h3{
    margin: 0;
    padding: 0;
}

*:focus {
    outline: 0;
    outline: none;
}

a{
    text-decoration: none !Important;
    color: #3b3b3b;
}

p{
    margin: 0;
    padding: 0;
}


img:focus {
    outline:none !important;
}

/* NAVBAR */

.nav>li>a:hover, .nav>li>a:focus{
    background: none !Important;
    color: #f08000;
}

.navigationtop{
    height: 32px;
    background-color: #fff;
    width: 100%;
    text-align: right;
    padding-right: 5px;
    padding-top: 3px;
}

.navigationtopText{
    line-height: 1.71;
    padding-right: 40px;
    font-size: 14px;
    letter-spacing: 0.9px;
    color: #9c9797;
}

.navigationtopImage{
    padding-left: 20px;
}

.navbar-default {
    border-color: transparent;
    background: none;
}


.navShopingCart{
    margin-right: 15px;
    padding: 14px !important;
}

.navbar-default {
    -webkit-transition: padding .4s;
    -moz-transition: padding .4s;
    transition: padding .4s;
    margin-top: 40px;
}

.navbar-default .navbar-brand {
    font-size: 2em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.navbar-default.navbar-shrink {
    padding: 0 0;
    background: #ffffff;
    border-bottom: 1px solid #efeff3;
    margin-top: 0px;
}

.navbar-default.navbar-shrink .navbar-brand {
    font-size: 1.5em;
}

.navbar-default .navbar-nav>li>a {
    color: #ffffff;
    font-weight: normal;
    transition: .3s;
    font-size: 16px;
}

.navbar-default .navbar-nav>li>a:hover {
    color: #f08000;
}

.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand{
    margin-left: 15px;
    margin-top: -10px;
width: auto;

}

.navbar-second{
    background-color: #ffffff;
}

.navbarTitle{
    padding-right: 40px !important;
}

.activeNav a{
    color: #f08000 !important;
}


.navbar-default.navbar-second .navbar-nav>li>a{
    color: #10151c;
}

nav.navbar.bootsnav{
    background-color: transparent;
    border-bottom: none;
    padding-bottom: 10px;
}

nav.navbar.bootsnav ul.nav > li > a{
    color: white;
    font-weight: normal;
}

.navbar-default.navbar-shrink {
    padding: 0 0;
    background: #ffffff!Important;
    border-bottom: 1px solid #efeff3;
    margin-top: 0px;
}

/* END OF NAVBAR */

/* LANDING PAGE */
.header{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 50vh;
}

.productHeader{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 38vh;
}

.headerImageBottom{
    position: absolute;
    max-width: 100%;
}


.headerImageUp{
    position: absolute;
    max-width: 100%;
}

.landingSubTitle{
    color: #000000;
    font-weight: 100;
    font-size: 16px;
}

.landingTitle{
    font-size: 33px;
    font-weight: 300;
    color: #000000;
}

.banner .landingSubTitle1{
    color: #ffffff;
    margin-top: 25vh;
    font-weight: bold;
    font-size: 16px;
}

.banner .landingTitle{
    font-size: 55px;
    font-weight: 300;
    color: #ffffff;
    margin-top: 10px;
}

.productTitleSection{
    padding-left:36px;
    border-left:solid 0.5px #000000;
}
.productCard{
    color:white;
    padding-top: 250px;
    padding-bottom: 40px;
    background-size: cover;
    height: 390px;
}

.productSubTitle{
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.9px;
    color: #ffffff;
}
.productTitle{
    font-size: 31px;
    font-weight: normal;
    letter-spacing: 0.9px;
    color: #ffffff;
}
.productBorder{
    max-width:40%;
    margin:0 auto;
    border-top: solid 0.5px #ffffff;padding-bottom:5px;
    transition: 0.2s;
}

.backgroundGray{
    background-color: #efefef;
}
.backgroundWhite{
    background-color: #fff;
}
.backgroundDarkGray{
    background-color: #242424;
    color:white;
}

.landingSubTitleInverted{
    color: white;
    font-weight: 100;
    font-size: 16px;
}

.landingTitleInverted{
    font-size: 34px;
    font-weight: 300;
    color: white;
}

.aboutTitleSection{
    padding-left:36px;
    border-left:solid 0.5px #ffffff;
    margin-bottom:70px;
}

.aboutLandingCard{
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.referenceBigCard{
    color:white;
    margin-bottom:20px;
}
.referenceSmallCard{
    color:white;
    margin-bottom:20px;
}

.referenceBigCard img{
    width:100%;
}
.referenceSmallCard img{
    width:100%;
    height:250px;
}

.referenceTitle{
    margin-left:20px;
    font-size: 16px;
    color: #ffffff;
    border-bottom:1px solid white;
    transition: 1s;
    position: absolute;
    bottom: 20px;
    margin-right: 10px;
    line-height: 1.1;
}

.newsCard{
    box-shadow: 0 2px 10px 0 #e4e4e4;
    border: 1px solid #d7d1d1;
    margin-bottom: 20px;
    transition: .3s;
}

.newsCard:hover{
    box-shadow: 0 2px 10px 7px #e4e4e4;
}

.newsTitleCard{
    background-color:white;
    font-size: 16px;
    letter-spacing: -0.1px;
    color: #000000;
    padding-left:20px;
    height: 94px;
}
.newsCard img{
    height:250px;
    width:100%;
}
.newsDate{
    padding-top:14px;
    padding-bottom:7px;
    font-size: 12px;
}
.newsTitle{
    padding-bottom:20px;
    line-height: normal;
}

.aboutText{
    padding-bottom:30px;
    line-height: normal;
}

.productTitleProductSubpage{
    font-size: 36px;
    margin-top: 20vh;
    color: white;
}
.productSubTitle{
    font-size: 14px;
    font-weight: bold;
}
.breadcrumbContainer{
    margin-top: 20px;
}
.breadcrumbContainer a{
    font-size: 16px;
    letter-spacing: 0.5px;
    color:white;
}
.toUpperCase{
    text-transform: uppercase;
}
.technicalDataTitles p{
    font-family: 'Metropolis-Bold', sans-serif;
    padding-bottom:10px;
    padding-left:40px;
}
.technicalData p{
    padding-bottom:10px;
}
.technicalDataTitlesMobile p{
    font-family: 'Metropolis-Bold', sans-serif;
    padding-bottom:10px;
    padding-left:40px;
    display:block;
}

.technicalDataTitlesMobile, .technicalDataMobile{
    display:none;
}
.technicalDataTitles span{
    padding-left: 40px;
    display: block;
}
.technicalDataSpan{
    font-family: 'Metropolis-Bold', sans-serif;
    padding-left: 40px;

}
.productOptions a{
    padding-left:30px;
    padding-right:30px;
    padding-top:20px;
    padding-bottom:20px;
}
.activeProduct{
    background-color: white;
    border-top: solid 2px #176ea8;
    color:#176ea8!important;
    font-family: 'Metropolis-Bold', sans-serif;
}
.productDescription{
    padding-bottom:30px;
}
.soundAbsorptionTable>tbody>tr>th, .soundAbsorptionTable>tbody>tr>td{
    border-top:none;
}
.tableProductBold{
    font-family: 'Metropolis-Bold', sans-serif;
}
.ShowOnMobile .tableProductBold{
    border-right: 1px solid black;
}
.tableADVBold{
    border-top:solid 0.5px #979797;
}
.tableADVBold th{
    font-family: 'Metropolis-Bold', sans-serif;
}

.downloadTable>tbody>tr>th, .downloadTable>tbody>tr>td{
    border-top:none;
    cursor: pointer;
    color:#176ea8;
}
.basePanelWrapper{
    margin-top:30px;
}
.basePanelWrapper img{
    display: inline-block;
    width:105px;
    height:105px;
    margin-left:20px;
    margin-top:10px;
}
.palleteButton{
    font-family: 'Metropolis-Thin', sans-serif;
    padding-bottom:17px;
    text-decoration: underline;
    font-size: 14px;
    letter-spacing: 0.9px;
    width:100%;
    padding-top: 10px;
}
.basePanel{
    margin-left:36px;
    padding-left: 50px;
}
.optionButtonWrapper a{
    padding-top:18px;
    padding-bottom:18px;
    padding-left: 24px;
    display: block;
}
.optionActive{
    background-color: #efefef;
}
.innerContainer{
    margin: 0 auto;
    float: none;
    max-width: 900px;
}
.logoHide{
    display:none!Important;
}
.logoMobile{
    margin-left:-15px;
}
.productCard:hover .productBorder{
    max-width:70%;
}
.referenceBigCard:hover .referenceTitle{
    padding-left:20px;
    padding-right:20px;
}
.referenceSmallCard:hover .referenceTitle{
    padding-left:20px;
    padding-right:20px;
}
.gallery{
    display: grid;grid-gap: 15px;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.gallery > div > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activeNav{
    font-weight:900!important;
    text-decoration: underline!important;
}

.galleryCaption{
    font-size: 11px;
    color: #000000;
    position: absolute;
    bottom: 0px;
    width: 105px;
    text-align: center;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.09) 16%, rgba(255, 255, 255, 0.81));
    margin-left: -42.5px;
    text-align: center;
}

.slick-prev {
    padding: 23px 23px;
    border: 1px solid #9b9b9b;
    transition: .5s;
    left: -55px;
}
.slick-next {
    padding: 23px 23px;
    border: 1px solid #9b9b9b;
    transition: .5s;
    right: -55px;
}

.slick-prev:before, .slick-next:before{
    color: black!important;
}
div.scrollmenu {
    overflow: hidden;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    font-size:16px!important;
}

div.scrollmenu a:hover {
    background-color: #ccc;
}

.referenceBigCard {
    position: relative;
}
.referenceBigCard .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px;
    height: 100%;
    display: block;
    background: rgba(0, 0, 0, .4);
    margin-left: 15px;
}

.referenceSmallCard {
    position: relative;
}
.referenceSmallCard .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 305px;
    height: 100%;
    display: block;
    background: rgba(0, 0, 0, .4);
    margin-left: 15px;
}

.hiddenOnMobile{
    display:block;
}
.ShowOnMobile{
    display:none;
}
.galleryImages{
    width: 100%;
    height: 120px;
}
#moveLeft{
    margin-left: -5px;
}
.nav-scroller-btn{
    background: white;
}
.nav-scroller-btn svg{
    margin-top:5px;
}
.categoryProductTitle{
    font-size:20px;
    padding-bottom:10px;
    padding-left:0px;
}
.productCategoryCard{
    margin-bottom:20px;
    padding: 30px 20px 30px 20px;
    border-radius: 2px;
    box-shadow: 0 2px 10px 0 #e4e4e4;
    background-color: #ffffff;
}
.owl-nav{
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.owl-next, .owl-prev{
    margin: 15px!Important;
    padding: 4px 7px!Important;
    display: inline-block!Important;
    cursor: pointer!Important;
    border-radius: 3px!Important;
}
.productDescription p img{
    margin:0 auto;
}















/*END OF LANDING PAGE */
/* LOGIN */

.loginBody{
    background-position: center;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
}

.loginCard{
    background-color: #ffffff;
    padding: 40px;
    width: 400px;
    margin: 0 auto;
    margin-top: 30vh;
}

.loginImage{
    margin-bottom: 20px;
}

.loginInput{
    margin-bottom: 20px;
    margin-top: 20px;
}

.loginLink{
    padding-top: 10px;
    color: #333333;
    font-size: 12px;
}



.noPaddingAlways{
    padding:0px!Important;
}

.noPaddingLeft{
    padding-left:0px!Important;
}
.noPaddingRight{
    padding-right:0px!Important;
}



@media (min-width: 1440px){
    .container {
        width: 1370px;
    }
}

.fancybox-caption{
    bottom: 40px!important;
    background:none!important;
    font-size:30px!important;
}

.aboutTitle{
    font-family: 'Metropolis-Bold', sans-serif;
    font-size: 24px;
    font-weight: bold;
}
.aboutCard div{
    padding-bottom:10px;
}
.aboutCard div img{
    padding-right:10px;
}
.aboutCard{
    padding-top:20px;
    padding-bottom:20px;
}
.aboutinfoCard span{
    font-family: 'Metropolis-Bold', sans-serif;
}
.aboutinfoCard{
    padding-top:15px;
}
.employeeTitle{
    font-family: 'Metropolis-Bold', sans-serif;
    font-size: 24px;
    color: #121010;
}
.emplyeeInfoSection{
    padding-top:5px;
}
.emplyeeInfoSection img{
    padding-right:15px;
}

#correction1{
    margin-top: 160px;
}

.navbarHeaderCorrection{
    position: absolute;
    width: 100%;
    margin-top: 44px;
}