@font-face {
  font-family: BiomeRegular;
  src: url('../fonts/BiomePro-Regular.otf');
}

@font-face {
  font-family: BiomeLight;
  src: url('../fonts/BiomePro-Light.otf');
}

@font-face {
  font-family: NimbusRegular;
  src: url('../fonts/NimbusSanL-Reg.otf');
}

@font-face {
  font-family: NimbusBold;
  src: url('../fonts/NimbusSanL-Bol.otf');
}


html, body{
    font-family: Nunito;
    font-size: 18px;
}

.no-styling{
    text-decoration: none !important;
    color: initial !important;
}

.page-header{
    z-index: 10;
    background-color: white;
    text-align: center;
}

.page-header-fixed{
    z-index: 10;
    background-color: #ffffff;
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 60px;
    opacity: 0;
    border-top: 1px solid #dedede;
    transition: opacity 0.5s ease-in-out;
}

.align-items-center{
    align-items: center;
}

.page-header-fixed.header-visible{
    opacity: 1;
}

.flex-align-text {
    flex-direction: row;
    align-items: stretch;
    display: flex;
}

.p-0-15p {
    padding: 0px 16.66%;
}

.flex-1 {
    flex: 1;
    margin-top: 60px;
}

.f-s-24{
    font-size: 24px;
}

.f-s-28{
    font-size: 28px;
}

.to-top-arrow {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.to-top-arrow-link {
    transition: .3s;
    color: #ffffff !important;
    background: #243238;
    font: 26px/58px 'FontAwesome';
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    height: 58px;
    width: 58px;
    cursor: pointer;
}

.to-top-arrow-link:hover {
    background: #bca644;
}

.menu-logo{
    float: left;
    width: 40px;
    margin: 10px;
}

.hover-content {
    padding: 20px 0px;
}

.logo-img {
    width: 200px;
    margin-top: 10px;
}

h1,h2,h3, h4, h5, h6{
    font-weight: 300;
}

.f-w-300{
    font-weight: 300;
}

.f-s-20{
    font-size: 20px;
}

.w-75{
    width: 75%;
    margin: 0 auto;
}

.m-h-500{
    max-height: 500px;
}

.header-menu{
    margin: 25px 0px 25px 0px;
}

.w-90 {
    width: 90%;
}

.page-header-fixed .header-menu {
    margin: 12px 0px;
    display: inline-block;
    float: right;
    margin-right: 50px;
    visibility: hidden;
}

.page-header-fixed.header-visible .header-menu{
    visibility: initial;
}

.menu-item {
    color: #222;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.25em;
    padding: 0px 12px;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: color 0.2s ease-in;
}

.page-header-fixed .menu-item{
    font-size: 14px;
}

.menu-item:hover, .menu-item.active {
    color: #bca644;
}

.slider-container{
    position: relative;
    height: calc(100vh - 243px);
}

.slider-home-1{
    background: url('../img/slider_home1.jpg');
    background-position: 50% 50%;
    height: calc(100vh - 243px);
    background-size: cover;
}

.slider-home-2{
    background: url('../img/slider_home2.jpg');
    background-position: 50% 0px;
    height: calc(100vh - 243px);
    background-size: cover;
}

.slick-dots li button:before {
    font-size: 12px;
}

.slick-dots {
    position: absolute;
    bottom: 45%;
    right: 20px;
    display: block;
    width: initial;
}

.img-full-width {
    width: 100%;
}

.slick-dots li{
    display: block;
}

.slick-dots li button:before {
    opacity: .25;
    color: white;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: white;
}

.f-w-b{
    font-family: NimbusBold;
}

.bg-gray {
    background-color: #EBEBEB;
}

.slider-container-laptop{
    position: relative;
    height: 900px;
    background: url('../img/slider_laptop.png');
    background-position: 50% 50%;
}

.slider-container-technology{
    position: relative;
    height: 600px;
    background: url('../img/systems-1.jpg');
    background-position: 50% 100%;
    background-size: cover;
}

.slider-container-about{
    position: relative;
    height: 700px;
    background: url('../img/slider_about.jpg');
    background-size: cover;
    background-position: 50% 0%;
}

.slider-container-smells{
    position: relative;
    height: 700px;
    background: url('../img/slider_smells.jpg');
    background-size: cover;
    background-position: 25% 0%;
}

.slider-container-contact{
    position: relative;
    height: 500px;
    background: url('../img/kontakt-lumal.jpg');
}

.h-full-center-vertical{
    height: 100%;
    align-items: center;
    justify-content: center;
}

.img-full{
    width: 100%;
    transition: all 0.2s ease-in-out;
}

.img-full-logo{
    width: 100%;
}

.img-full:hover{
    -webkit-filter: brightness(90%);
    cursor: pointer;
}

.slider-header-normal{
    position: absolute;
    margin: 0;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

.slider-header{
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

.text-white{
    color: white;
}

.slider-header h1{
    font-size: 70px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 70px;
    text-shadow: 2px 2px rgba(0,0,0,0.3);
}

.m-b-35{
    margin-bottom: 35px;
}

.m-b-0{
    margin-bottom: 0px !important;
}

.v-none{
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.v-visible{
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

.header-gold{
    color: #bca644;
    font-weight: 300;
    font-size: 32px;
}

.navigation-square{
    border: 2px solid #bca644;
    padding: 20px;
    float: right;
    display: inline-block;
}

.navigation-square a{
    display: block;
    text-decoration: none !important;
    margin-bottom: 5px;
}

.navigation-square a.active{
    color: #bca644;
}

.link-gold{
    color: #222;
    transition: all 0.2s ease-in;
}

.link-gold:focus, .link-gold:hover{
    color: #bca644;
}

.link-arrow-black, .link-arrow-black-permanent{
    color: #bca644;
    cursor: pointer;
}

.link-arrow-black:hover{
    color: #bca644;
    text-decoration: none;
}

.link-arrow-black:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #bca644;
    content: "\f054";
    position: absolute;
    margin-left: 10px;
    font-size: 20px;
    line-height: 34px;
    opacity: 1;
    transition: all 0.3s ease-in;
}

.link-arrow-black-permanent:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #222;
    content: "\f054";
    position: absolute;
    margin-left: 10px;
    font-size: 20px;
    line-height: 34px;
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

.link-arrow-black:hover:after{
    opacity: 1;
    margin-left: 20px;
}

.header-gold a{
    color: #bca644;
}

.arrow-down-icon{
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: auto;
    width: 56px;
    font-size: 64px;
    color: white;
    transition: color 0.2s ease-in;
}

.arrow-down-icon:hover{
    cursor: pointer;
    color: #d4d4d4;
}

.bg-gold{
    background-color: #bca644;
}

.divider-gold-bold{
    height: 3px;
    background-color: #bca644;
    margin-bottom: 40px;
}

.divider-gold{
    height: 1px;
    background-color: #bca644;
    width: 90%;
    margin: 0 auto;
}

.text-white{
    color: #ffffff;
}

.text-gold{
    color: #bca644;
}

.fab.text-gold:hover{
    color: #b5a665;
    transition: color 0.3s ease-in;
}

.m-t-20{
    margin-top: 20px;
}

.m-t-30{
    margin-top: 30px;
}

.m-t-40{
    margin-top: 40px;
}

.m-t-50{
    margin-top: 50px;
}

.m-t-60{
    margin-top: 60px;
}

.m-t-80{
    margin-top: 80px;
}

.m-b-10{
    margin-bottom: 10px;
}

.m-b-20{
    margin-bottom: 20px;
}

.m-b-30{
    margin-bottom: 30px;
}

.m-b-60{
    margin-bottom: 60px;
}

.m-r-20{
    margin-right: 20px;
}

.m-r-30{
    margin-right: 30px;
}

.p-l-r-5-0{
    padding-left: 7px;
    padding-right: 0px;
}

.p-l-r-0-5{
    padding-left: 0px;
    padding-right: 7px;
}

.center-horizontal-vertical{
    width: 80%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 50px;
}

.center-vertical{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px;
}

.text-center{
    text-align: center;
}

.bg-gold-lighter{
    background-color: #e0d18e;
}

.bg-gold-light{
    background-color: #efead7;
}

.border-gold{
    border: 1px solid #bca644!important;
}

.border-gold-l-r{
    border-left: 1px solid #bca644!important;
    border-right: 1px solid #bca644!important;
}

.border-gold-t-b{
    border-top: 1px solid #bca644!important;
    border-bottom: 1px solid #bca644!important;
}

.border-right-gold{
    border-right: 1px solid #bca644!important;
}

.p-60-0{
    padding: 60px 0px;
}

.p-l-r-75{
    padding-left: 75px;
    padding-right: 75px;
}

.p-15-p{
    padding: 0 15%;
}

.p-t-30{
    padding-top: 30px;
}

.p-t-40{
    padding-top: 40px;
}

.p-t-60{
    padding-top: 60px;
}

.p-t-90{
    padding-top: 90px;
}

.p-t-b-45{
    padding-top: 45px;
    padding-bottom: 45px;
}

.p-20{
    padding: 20px;
}

.img-icon{
    width: 80%;
    max-width: 150px;
    margin: 0 auto;
}

.icon-container{
    height: 175px;
}

.p-relative{
    position: relative;
}

.footer-header{
    margin-bottom: 0px;
    margin-top: 12px;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.footer-header.slide-from-left, .button-white.slide-from-left{
    opacity: 1;
}

.div-arrow-left, .div-arrow-right{
    transition: color 0.2s ease-in;
}

.div-arrow-left:hover, .div-arrow-right:hover{
    cursor: pointer;
    color: #ffffff;
}

.div-arrow-left:after {
    content: "";
    position: absolute;
    left: 20px;
    width: 36px;
    height: 38px;
    background: url(/public/img/left-arrow-lumalf.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 16px;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.div-arrow-right:after {
    content: "";
    position: absolute;
    right: 10px;
    width: 36px;
    height: 38px;
    background: url(/public/img/right-arrow-lumalf.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 16px;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.div-arrow-left:hover:after, .div-arrow-right:hover:after{
    opacity: 1;
}

.m-l-50{
    margin-left: 50px;
}

.m-r-50{
    margin-right: 50px;
}

.button-white{
    background: white;
    display: inline-block;
    border: 1px solid #e4e4e4;
    outline: none;
    padding: 15px 50px 15px 20px;
    color: inherit;
    text-decoration: none !important;
    position: relative;
    transition: color 0.3s ease-in;
    opacity: 0;
}

.button-white:after{
    content: "";
    position: absolute;
    right: 10px;
    width: 26px;
    height: 28px;
    background: url(/public/img/arrow-kontaktirajte-nas.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: 16px;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.button-white:hover{
    color: #bca644;
}

.button-white:hover:after{
    opacity: 1;
}

.parallax-about{
    /* The image used */
  background-image: url('../img/officelumal.jpg');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax-about-2{
    /* The image used */
  background-image: url('../img/officelumal-2.jpg');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax-smells{
    /* The image used */
  background-image: url('../img/fragrance-roll-1-min.jpg');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax-smells-2{
    /* The image used */
  background-image: url('../img/fragrance-roll-2-min.jpg');
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax-about-text{
    padding: 120px 25%;
}

.parallax-about-text-2{
    padding: 40px 25%;
}

.p-b-20{
    padding-bottom: 20px;
}

.text-black{
    color: #222 !important;
}

.m-l-10{
    margin-left: 10px;
}

.p-l-r-30{
    padding-left: 30px;
    padding-right: 30px;
}

.m-w-950{
    max-width: 950px;
    margin: 0 auto;
}

.w-30{
    width: 30%;
}

.w-70{
    width: 70%;
}

.p-t-20{
    padding-top: 20px;
}

.p-b-40{
    padding-bottom: 40px;
}

.f-s-14{
    font-size: 14px;
}

.f-s-18{
    font-size: 18px;
}

.f-s-32{
    font-size: 32px;
}

.m-w-500{
    max-width: 500px;
}

.m-w-700{
    max-width: 700px;
}

.nav{
    display: block;
}

.items-m-b-20 li{
    margin-bottom: 20px;
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInUp {
	0% {
		opacity: 0;
		-moz-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInUp {
	0% {
		opacity: 0;
		-o-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}
@-moz-keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(-900px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes pulse{
    0%{
        -webkit-transform:scaleX(1);
        transform:scaleX(1)
    }
    to{
        -webkit-transform:scale3d(1.05,1.05,1.05);
        transform:scale3d(1.05,1.05,1.05)
    }
}

@-webkit-keyframes bounce{
    0%, 100% {
        transform: translateY(0);
    }
    
    50% {
        transform: translateY(-10px);
    }
}



.bounce{
    animation: bounce 1.5s infinite;
}

.pulse{
    transition: transform 0.3s ease-out;
}

.pulse:hover{
    transform: scale(1.05);
}

.mobile-visible{
    display: none;
}

.m-t-neg-40{
    margin-top: -40px;
}

@media screen and (min-width: 2559px) {
    .slider-container-laptop{
        position: relative;
        height: 1400px;
        background: url('../img/slider_laptop.png');
        background-position: 50% 50%;
    }
    
    .slider-container-about{
        position: relative;
        height: 1200px;
        background: url('../img/slider_about.jpg');
        background-size: cover;
        background-position: 50% 0%;
    }
    
    .slider-container-smells{
        position: relative;
        height: 1200px;
        background: url('../img/slider_smells.jpg');
        background-size: cover;
        background-position: 25% 0%;
    }
    
    .slider-container-contact{
        position: relative;
        height: 1000px;
        background: url('../img/kontakt-lumal.jpg');
    }
    
    .w-65-xl{
        max-width: 65%;
        margin: 60px auto 0px auto;
    }
}

@media only screen and (max-width: 1440px) {
    .center-horizontal-vertical {
        min-height: 520px;
    }
}

@media only screen and (max-width: 1200px) {
    .p-p-10 {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    .p-0-15p {
        padding: 0px 8.3%;
    }
    
    .p-15-p{
        padding: 0 5%;
    }
    
    .slider-container-about {
        position: relative;
        height: 700px;
        background: url(../img/slider_about.jpg);
        background-size: cover;
        background-position: 27% 0%;
    }
    
    .m-t-neg-40{
        margin-top: initial;
    }
    
    .navigation-square{
        border: 2px solid #bca644;
        padding: 20px;
        margin: 40px 0px;
        float: none;
        display: block;
    }
}

@media only screen and (max-width: 991px) {
    .center-horizontal-vertical {
        margin: 20px 0px 0px 0px;
        width: 100%;
        min-height: auto;
    }
    
    .bg-gray {
        padding-top: 120px;
        padding-left: 5%;
        padding-right: 5%;
    }
    
    .flex-align-text {
        display: block;
    }
    
    .p-0-15p {
        padding: 0px 5%;
    }
    
    .flex-1 {
        margin-top: initial;
    }
    
    .mobile-m-l-40 {
        margin-left: 40px;
    }
    
    .hover-content-parent {
        margin-bottom: 20px;
    }
    
    .hover-content {
        padding: 20px;
    }
    
    .button-white{
        width: 100%;
        text-align: center;
    }
    
    .button-white:after{
        opacity: 1;
    }
    
    .footer-header {
        float: none !important;
        margin-bottom: 10px;
    }
    
    .mobile-m-b-20{
        margin-bottom: 20px;
    }
    
    .m-l-50{
        margin-left: 0px;
    }
    
    .m-r-50{
        margin-right: 0px;
    }
    
    .m-r-30{
        margin: 0px 20px;
    }
    
    .div-arrow-left, .div-arrow-right{
        text-align: center;
    }
    
    .div-arrow-left .float-left, .div-arrow-right .float-right{
        float: none !important;
    }
    
    .p-l-r-0-5, .p-l-r-5-0 {
        padding-left: 0px;
        padding-right: 0px;
    }
    
    .mobile-text-center{
        text-align: center;
    }
    
    .w-75{
        width: 100% !important;
    }
    
    .f-s-28{
        font-size: 24px;
    }
    
    
    .slider-header-normal {
        top: 50%;
    }
    
    .h-full-center-vertical .justify-content-center, .mobile-border-gold-bottom{
        justify-content: initial !important;
    }
    
    .mobile-border-gold-bottom.border-right-gold{
        border-right: none !important;
        border-bottom: 1px solid #bca644!important;
    }
    
    .p-t-90{
        padding-top: 45px;
    }
    
    .mobile-p-t-15{
        padding-top: 15px;
    }
    
    .mobile-p-t-20{
        padding-top: 20px;
    }
    
    .p-l-r-75 .img-full{
        display: none;
    }
    
    .slider-header h1 {
        font-size: 48px;
    }
    
    .slider-header {
        width: 90%;
    }
    
    .slider-container-about {
        position: relative;
        height: 700px;
        background: url(../img/slider_about.jpg);
        background-size: cover;
        background-position: 35% 0%;
    }
    
    .page-header,.page-header-fixed {
        display: none;
    }
    
    
    .mobile-hidden{
        display: none;
    }
    
    .mobile-visible{
        display: block;
    }
    
    .mobile-logo{
        width: 42px;
    }
    
    .hamburger-icon {
        font-size: 34px;
        padding: 4px 5px 0px 5px;
    }
    
    .navbar{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background-color: white;
        border-bottom: 1px solid #bca644;
        padding: .5rem;
    }
    
    .mobile-m-t-100{
        margin-top: 100px;
    }
    
    .navbar-nav{
        padding-top: 15px;
    }
    
    
    .navbar-light .navbar-nav .nav-link {
        color: #212529;
        padding: 10px 0px 0px 0px;
    }
    
    .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
        color: #bca644;
    }
    
    .fa-4x {
        font-size: 3em;
    }
    
    .w-30{
        width: 100%;
    }
    
    .w-70{
        width: 100%;
    }
    
    .w-30.float-left{
        float: none;
    }
    
    .w-70.float-right{
        float: none;
    }
    
    .slick-dots{
        display: none !important;
    }
    
    .slider-container {
        position: relative;
        height: 100vh;
    }
    
    .slider-home-1{
        background: url('../img/slider_home1.jpg');
        background-position: 50% 50%;
        height: 100vh;
        background-size: cover;
    }
    
    .slider-home-2{
        background: url('../img/slider_home2.jpg');
        background-position: 50% 50%;
        height: 100vh;
        background-size: cover;
        position: relative;
        
    }
    
        .slider-home-2:after{
            position: absolute;
            content : "";
            background: rgba(0,0,0,0.3);
            bottom: 0;
            left: 0;
            right: 0;
            top:0;
        }
    
    .slider-container-technology{
        height: 200px;
    }
    
    .slider-container-technology .text-center {
        padding: 25px;
    }
    
    
    
    .parallax-about-text{
        padding: 120px 25px;
    }
    
    .parallax-about-text-2 {
        padding: 40px 25px;
    }
    
    .p-l-r-75 {
        padding-left: 25px;
        padding-right: 25px;
    }
    
    .w-90 {
        width: initial;
    }
}