body {overflow-x: clip; font-family: "Noto Sans", sans-serif; font-size: 1.1rem; background-color: var(--bg-color); color: var(--white-color); position: relative; background-image: url(../img/noise.png);
	background-position: 0 0; background-size: auto; height: 100%; width: 100%; animation: fadeInAnimation ease 3s; animation-iteration-count: 1; animation-fill-mode: forwards; min-height: 100vh;}


header {position: fixed; top: 0; left: 0; width: 100%; z-index: 99998; padding: 30px 0; color: #fff; -webkit-transition: all .7s; transition: all .7s; transition-delay: 1s;}
header .row img {max-width: 220px;}
header .logo {width: 170px; height: 32px; margin-left: 12px; background-size: contain; background-repeat: no-repeat; background-position: left; z-index: 998; background-image: url(../img/logo-w.svg); 
    transition: all .2s ease-out .2s;}
header .hidden-logo {transition: all .2s ease-out .5s;}
header.topnav .container-fluid {padding: 0 32px;}
header.topnav .menu-icon {cursor: pointer; position: relative; z-index: 998;}
header.topnav .menu-icon:after {content: "zatvori"; width: max-content; min-width: 70px; position: absolute; 
	line-height: 20px; top: calc(50% - 10px); left: 44px; opacity: 0; -webkit-transition: all .4s; transition: all .4s; -webkit-transition-delay: .4s; transition-delay: .4s;}
header.topnav.open .word, header.topnav.open .menu-icon .char, header.topnav.open .menu-icon:hover .char {opacity: 0;}
header.topnav.open .menu-icon:after {opacity: 1;}
header.topnav .word, header.topnav .menu-icon .char, header.topnav .menu-icon:hover .char {-webkit-transition-delay: .4s; transition-delay: .4s;}
header.topnav .menu-icon .char {margin-left: 1px;}
header.disable-header {z-index: 99997;}
header:before {content: ''; background: url(../img/noise_header.png), linear-gradient(180deg, var(--bg-color), 60%, transparent); position: absolute; width: 100%; height: 100%; display: block; 
    top: 0; z-index: 998; background-repeat: repeat; transition: all .5s ease 0s; opacity: 0;}
header.nav-scroll:before {opacity: 1; transition: all .5s ease 0s;}



.menu-btn {width: 20px; height: 20px; transition-duration: 0.3s; position: relative;} 
.menu-btn .icon {transition-duration: 0.3s; position: absolute; height: 3px; width: 17px; top: 11px; background-color: var(--main-color);} 
.menu-btn .icon:before {transition-duration: 0.3s; position: absolute; width: 20px; height: 3px; background-color: #fff; content: ""; top: -7px; left: 0;} 
.menu-btn .icon:after {transition-duration: 0.3s; position: absolute; width: 20px; height: 3px; background-color: #fff; content: ""; top: 7px; left: 0;} 
.menu-icon:hover .icon {width: 20px}
.menu-icon:hover .icon:before {left: 3px}
.menu-icon:hover .icon:after {left: -3px;}

.menu-icon.open .icon {transition-duration: 0.5s; transform: rotateZ(180deg);} 
.menu-icon.open .icon:before {transform: rotateZ(38deg) scaleX(0.75) translate(5px, 1px);} 
.menu-icon.open .icon:after {transform: rotateZ(-38deg) scaleX(0.75) translate(5px, -1px);} 
.menu-icon:hover {cursor: pointer;}
.menu-icon.open:hover .icon:before {left: 0;}
.menu-icon.open:hover .icon:after {left: 0;}



.intro {height: 100vh; padding-top: 100px;}
.intro h1 {font-size: 42px;}
.intro h1 .span-last {white-space: nowrap; display: block; bottom: -6px; position: relative;}
.intro .section-subtitle {color: #ffffffa0;}

/*.intro .img-wrap {position: absolute; right: 0; left: 0; top: 0; -webkit-mask-image: url(/img/shape/shape19.svg); mask-image: url(/img/shape/shape19.svg); -webkit-mask-position: center center; mask-position: center; 
    -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; text-align: center; z-index: 0; width: 100%; height: auto;}*/
.intro .img-wrap img {width: auto; opacity: .2; filter: grayscale(1); box-shadow: 0 0 150px #fff; pointer-events: none; height: 100vh; object-fit: cover; transition: .4s ease;}

@media only screen and (max-width: 767px) {
    .intro {height: 100svh; min-height: 100svh;}
    .intro .img-wrap img {height: 100svh;}
    .intro h1 {font-size: clamp(2rem, 10.5vw, 2.625rem); line-height: 1.16; letter-spacing: -.045em;}
    .intro h1 .span-last {bottom: 0;}
    .intro .section-subtitle {font-size: clamp(.94rem, 4.5vw, 1.19rem); line-height: 1.42; margin-top: 1rem!important; margin-bottom: 1.5rem!important;}
}

@media only screen and (max-width: 359px) {
    body {font-size: 1rem;}
    h2.section-title,
    h1.section-title {font-size: 2rem; line-height: 1.16; margin-bottom: 1rem;}
    .section-subtitle {font-size: 1rem; line-height: 1.45; margin-bottom: 1rem;}
    span.title-dot {font-size: 1.2em;}
    .intro {padding-top: 72px;}
}


@media only screen and (min-width: 768px) {
    header.topnav .container-fluid {padding: 0 50px;}
    header .logo {width: 220px; height: 54px;}
    
    
    canvas{display: block; vertical-align: bottom;} 
    #particles-js{position:absolute; width: 100%; height: 100%; background-color: transparent; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; z-index: 1; will-change: transform;}
    #particles-js2{position:absolute; z-index: 1; width: 100%; height: 100%; background-color: transparent; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; pointer-events: none; padding-bottom: 100px;}
    #particles-background, #particles-foreground {left: -51%; top: -51%; width: 202%; height: 202%; transform: scale3d(.5,.5,1);}
    #particles-background {background: #2c2d44; background-image: -moz-linear-gradient(45deg,#3f3251 2%,#002025 100%); background-image: -webkit-linear-gradient(45deg,#3f3251 2%,#002025 100%); 
        background-image: linear-gradient(45deg,#3f3251 2%,#002025 100%);}
}


@media only screen and (max-width: 991px) {
    
}