@font-face {
font-family: "Roboto";
src: local(Roboto Thin), url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../fonts/roboto/Roboto-Thin.woff") format("woff");
font-weight: 100;
}
@font-face {
font-family: "Roboto";
src: local(Roboto Light), url("../fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../fonts/roboto/Roboto-Light.woff") format("woff");
font-weight: 300;
}
@font-face {
font-family: "Roboto";
src: local(Roboto Regular), url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../fonts/roboto/Roboto-Regular.woff") format("woff");
font-weight: 400;
}
@font-face {
font-family: "Roboto";
src: local(Roboto Medium), url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../fonts/roboto/Roboto-Medium.woff") format("woff");
font-weight: 500;
}
@font-face {
font-family: "Roboto";
src: local(Roboto Bold), url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../fonts/roboto/Roboto-Bold.woff") format("woff");
font-weight: 700;
}
@font-face {
font-family: "Montserrat";
src: local(Montserrat Thin), url("../fonts/montserrat/Montserrat-Thin.ttf") format("ttf");
font-weight: 100;
}
@font-face {
font-family: "Montserrat";
src: local(Montserrat ExtraLight), url("../fonts/montserrat/Montserrat-ExtraLight.ttf") format("ttf");
font-weight: 200;
}
@font-face {
font-family: "Montserrat";
src: local(Montserrat Light), url("../fonts/montserrat/Montserrat-Light.ttf") format("ttf");
font-weight: 300;
}
@font-face {
font-family: "Montserrat";
src: local(Montserrat Regular), url("../fonts/montserrat/Montserrat-Regular.ttf") format("ttf");
font-weight: 400;
}
@font-face {
font-family: "Montserrat";
src: local(Montserrat Medium), url("../fonts/montserrat/Montserrat-Medium.ttf") format("ttf");
font-weight: 500;
}
@font-face {
font-family: "Montserrat";
src: local(Montserrat SemiBold), url("../fonts/montserrat/Montserrat-SemiBold.ttf") format("ttf");
font-weight: 600;
}
@font-face {
font-family: "Montserrat";
src: local(Montserrat Bold), url("../fonts/montserrat/Montserrat-Bold.ttf") format("ttf");
font-weight: 700;
}
@font-face {
font-family: "Montserrat";
src: local(Montserrat ExtraBold), url("../fonts/montserrat/Montserrat-ExtraBold.ttf") format("ttf");
font-weight: 800;
}
@font-face {
font-family: "Montserrat";
src: local(Montserrat Black), url("../fonts/montserrat/Montserrat-Black.ttf") format("ttf");
font-weight: 900;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
line-height: 1;
font-family: "Montserrat", "Roboto", sans-serif;
}
html,
body {
min-height: 100%;
height: 100%;
position: relative;
}
body {
background: #fff;
}
a,
a:link:hover,
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: #0074D9;
}
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.hidden {
display: none;
}
::selection {
color: #f0f0f0;
background-color: #000000;
}
/* SITE */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: inherit;
font-size: inherit;
line-height: inherit;
margin: 0;
}
.demoWindow {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: table;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, 0.95);
}
.demoWindow .demoBox {
display: table-cell;
vertical-align: middle;
}
.demoWindow .demoBox #demo {
margin: auto;
width: 100%;
height: 100%;
max-width: 640px;
max-height: 360px;
background: #000;
position: relative;
}
.demoWindow .demoBox #demo:after {
content: 'JIŽ BRZY';
position: absolute;
display: block;
left: 50%;
top: 50%;
color: #999;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.site-header {
height: 80px;
width: 100%;
position: absolute;
top: 0;
background: transparent;
z-index: 10;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-ms-transition: background .5s;
-o-transition: background .5s;
transition: background .5s;
}
.site-header .header-container {
max-width: 1140px;
padding: 0 30px;
margin: auto;
height: 100%;
}
.site-header .header-container .header-logo {
float: left;
height: 64px;
margin: 14px 0;
}
.site-header .header-container .header-logo img {
height: 54px;
}
.site-header .header-container .header-menu {
float: right;
margin: 20px 0;
}
.site-header .header-container .header-menu .menu-item {
float: left;
line-height: 24px;
color: #ddd;
padding: 8px 16px;
margin: 0 8px;
cursor: pointer;
font-size: 16px;
font-weight: 300;
border-radius: 20px;
}
.site-header .header-container .header-menu .menu-item:hover {
color: #fff;
}
.site-content .parallax-window {
position: relative;
}
.site-content .parallax-window.parallax-mobile {
z-index: -99;
}
.site-content .parallax-window.parallax-full {
height: 100vh;
}
.site-content .parallax-window.parallax-reduced {
height: 400px;
}
.site-content .parallax-window.parallax-darker {
background: rgba(0, 0, 0, 0.8);
}
.site-content .section.section-home {
background: rgba(54, 58, 64, 0.8);
}
.site-content .parallax-window:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
}
.site-content .section.section-white {
background: #fff;
}
.site-content .section.section-gray {
background: #f2f2f2;
}
.site-content .section.section-blac {
background: #111;
color: #fff;
}
.site-content .section .section-container {
padding: 128px 30px;
max-width: 1140px;
margin: auto;
position: relative;
}
.site-content .section .section-container-small {
padding: 64px 30px;
max-width: 1140px;
margin: auto;
position: relative;
}
.site-content .section.section-home .section-container-home {
display: table;
height: 100%;
width: 100%;
max-width: 1140px;
margin: auto;
padding: 0 30px;
position: relative;
}
.site-content .section.section-home .section-container-home .section-content {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}
.site-content .section.section-home .section-container-home .section-content .title {
font-size: 64px;
letter-spacing: 2px;
}
.site-content .section.section-home .section-container-home .section-content .sub-title {
font-size: 24px;
font-weight: 300;
margin-bottom: 16px;
}
.site-content .section.section-home .section-container-home .section-content .desc {
font-size: 17px;
font-weight: 200;
}
.site-content .section.section-home .section-container-home .home-scroll-down {
position: absolute;
width: 100%;
left: 0;
bottom: 24px;
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-size: 32px;
}
.site-content .section.section-home .section-container-home .home-scroll-down i {
cursor: pointer;
position: relative;
}
.site-content .section.section-about .middle-aligner {
position: relative;
}
.site-content .section.section-about .middle-aligner .text {
float: left;
width: 60%;
padding: 0 32px;
}
.site-content .section.section-about .middle-aligner .text .title {
font-size: 30px;
margin-bottom: 24px;
font-weight: 500;
color: #36393F;
}
.site-content .section.section-about .middle-aligner .text .desc {
color: #646d7D;
font-size: 17px;
font-weight: 300;
}
.site-content .section.section-about .middle-aligner .text .desc p {
margin-bottom: 8px;
}
.site-content .section.section-about .middle-aligner .image-wrap {
position: absolute;
width: 40%;
left: 60%;
padding: 0 32px;
height: 100%;
}
.site-content .section.section-about .middle-aligner .image-wrap .image-centerer {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.site-content .section.section-about .middle-aligner .image-wrap .image-centerer .image {
display: table-cell;
vertical-align: middle;
}
.site-content .section.section-about .middle-aligner .image-wrap .image-centerer .image img {
width: 287px;
}
.site-content .section.section-monitoring .middle-aligner {
position: relative;
}
.site-content .section.section-monitoring .middle-aligner .text {
float: left;
width: 50%;
padding: 0 32px;
}
.site-content .section.section-monitoring .middle-aligner .text .title {
font-size: 30px;
margin-bottom: 24px;
font-weight: 500;
color: #36393F;
}
.site-content .section.section-monitoring .middle-aligner .text .desc {
color: #646d7D;
font-size: 17px;
font-weight: 300;
}
.site-content .section.section-monitoring .middle-aligner .text .desc p {
margin-bottom: 8px;
}
.site-content .section.section-monitoring .middle-aligner .image-wrap {
position: absolute;
width: 40%;
left: 50%;
padding: 0 32px;
height: 100%;
}
.site-content .section.section-monitoring .middle-aligner .image-wrap .image-centerer {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
.site-content .section.section-monitoring .middle-aligner .image-wrap .image-centerer .image {
display: table-cell;
vertical-align: middle;
}
.site-content .section.section-monitoring .middle-aligner .image-wrap .image-centerer .image img {
width: 420px;
}
.site-content .section.section-advantages .container-advantages {
padding: 0 30px;
max-width: 1140px;
width: 100%;
height: 100%;
margin: auto;
display: table;
}
.site-content .section.section-advantages .container-advantages .container-content {
display: table-cell;
vertical-align: middle;
}
.site-content .section.section-advantages .container-advantages .container-content .advantage {
color: #fff;
float: left;
width: 33.33333%;
padding: 0 32px;
}
.site-content .section.section-advantages .container-advantages .container-content .advantage .title {
margin-bottom: 16px;
padding-bottom: 16px;
text-transform: uppercase;
font-weight: 500;
position: relative;
font-size: 20px;
}
.site-content .section.section-advantages .container-advantages .container-content .advantage .title i {
margin-right: 8px;
}
.site-content .section.section-advantages .container-advantages .container-content .advantage .title:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 128px;
height: 1px;
background: #555;
}
.site-content .section.section-advantages .container-advantages .container-content .advantage .content {
font-size: 15px;
font-weight: 300;
}
.site-content .section.section-showcase .content-container {
position: relative;
}
.site-content .section.section-showcase .content-container .image {
width: 60%;
float: left;
padding: 0 30px;
}
.site-content .section.section-showcase .content-container .image img {
display: block;
margin: auto;
max-width: 100%;
}
.site-content .section.section-showcase .content-container .text-wrap {
position: absolute;
left: 60%;
height: 100%;
width: 40%;
padding: 0 30px;
}
.site-content .section.section-showcase .content-container .text-wrap .text-centerer {
display: table;
height: 100%;
width: 100%;
}
.site-content .section.section-showcase .content-container .text-wrap .text-centerer .text {
display: table-cell;
vertical-align: middle;
color: #646d7D;
font-size: 18px;
font-weight: 300;
}
.site-content .section.section-showcase .content-container .text-wrap .text-centerer .text p {
margin-bottom: 12px;
}
.site-content .section.section-showcase .content-container {
position: relative;
}
.site-content .section.section-showcase .content-container .image {
width: 60%;
float: left;
padding: 0 30px;
}
.site-content .section.section-showcase .content-container .image img {
display: block;
margin: auto;
max-width: 100%;
}
.site-content .section.section-showcase .content-container .text-wrap {
position: absolute;
left: 60%;
height: 100%;
width: 40%;
padding: 0 30px;
}
.site-content .section.section-showcase .content-container .text-wrap .text-centerer {
display: table;
height: 100%;
width: 100%;
}
.site-content .section.section-showcase .content-container .text-wrap .text-centerer .text {
display: table-cell;
vertical-align: middle;
color: #646d7D;
font-size: 18px;
font-weight: 300;
}
.site-content .section.section-showcase .content-container .text-wrap .text-centerer .text p {
margin-bottom: 12px;
}
.site-content .section.section-norm .section-container-small {
    margin-top: 60px;
    border-top: 1px solid black;
}
.site-content .section.section-norm .content-container {
position: relative;
}
.site-content .section.section-norm .content-container .image {
width: 60%;
float: left;
padding: 0 30px;
}
.site-content .section.section-norm .content-container .image img {
width: 220px;
display: block;
margin: auto;
max-width: 100%;
}
.site-content .section.section-norm .content-container .text-wrap {
position: absolute;
left: 60%;
height: 100%;
width: 40%;
padding: 0 30px;
}
.site-content .section.section-norm .content-container .text-wrap .text-centerer {
display: table;
height: 100%;
width: 100%;
}
.site-content .section.section-norm .content-container .text-wrap .text-centerer .text {
display: table-cell;
vertical-align: middle;
color: #646d7D;
font-size: 18px;
font-weight: 300;
}
.site-content .section.section-norm .content-container .text-wrap .text-centerer .text p {
margin-bottom: 12px;
}
.site-content .section.section-norm .content-container .text-wrap .text-centerer .title {
font-size: 30px;
margin-bottom: 24px;
font-weight: 500;
color: #36393F;
}

.site-content .section.section-production .container-production {
padding: 0 30px;
max-width: 1140px;
width: 100%;
height: 100%;
margin: auto;
display: table;
}
.site-content .section.section-production .container-production .container-content {
display: table-cell;
vertical-align: middle;
}
.site-content .section.section-production .container-production .container-content .title {
text-align: center;
margin-bottom: 24px;
text-transform: uppercase;
font-weight: 500;
position: relative;
font-size: 20px;
color: #fff;
}
.site-content .section.section-production .container-production .container-content .demo {
text-align: center;
}
.site-content .section.section-production .container-production .container-content .demo .openDemo {
color: #fff;
background: rgba(73, 82, 99, 0.7);
display: inline-block;
padding: 16px 32px;
border-radius: 25px;
font-size: 18px;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
-webkit-transition: .2s;
-moz-transition: .2s;
-ms-transition: .2s;
-o-transition: .2s;
transition: .2s;
}
.site-content .section.section-production .container-production .container-content .demo .openDemo:hover {
background: rgba(65, 73, 89, 0.85);
}
.site-content .section.section-production .container-production .container-content .demo .openDemo:active {
background: rgba(58, 65, 79, 0.85);
}
.site-content .section.section-companies {
    background: #252b2d;
}
.site-content .section.section-companies .title {
font-size: 32px;
margin-bottom: 24px;
font-weight: 300;
color: #fff;
text-align: center;
}
.site-content .section.section-companies .companies {
text-align: center;
}
.site-content .section.section-companies .companies .company {
margin: 0 16px;
display: inline-block;
vertical-align: middle;
}
.site-content .section.section-companies .companies .company img {
filter: grayscale(60%);
}
.site-content .section.section-footer {
background: #2a3033;
}
.site-content .section.section-footer .part {
float: left;
width: 33.33333%;
text-align: center;
}
.site-content .section.section-footer .part.l {
padding-right: 48px;
}
.site-content .section.section-footer .part.m {
padding: 0 48px;
}
.site-content .section.section-footer .part.r {
padding-left: 48px;
}
.site-content .section.section-footer .part .title {
color: #fff;
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 16px;
}
.site-content .section.section-footer .part .content {
color: #ddd;
}
.site-content .section.section-footer .part .content.bio {
font-size: 15px;
font-weight: 300;
letter-spacing: 1px;
}
.site-content .section.section-footer .part .content.social a {
display: inline-block;
font-size: 24px;
width: 32px;
line-height: 32px;
text-align: center;
color: #ddd;
background: #252b2d;
margin: 0 2px;
}
.site-content .section.section-footer .part .content.social a:hover {
color: #fff;
}
.site-content .section.section-footer .part .content.contact .line {
font-weight: 300;
font-size: 15px;
margin-bottom: 8px;
letter-spacing: 1px;
}
.site-content .section.section-copyright {
background: #252b2d;
}
.site-content .section.section-copyright .container-copyright {
padding: 12px 30px;
max-width: 1140px;
margin: auto;
position: relative;
}
.site-content .section.section-copyright .container-copyright .text {
font-size: 12px;
font-weight: 300;
color: #ccc;
}
.site-content .section.section-copyright .container-copyright .text a {
color: #ccc;
}
.site-content .section.section-copyright .container-copyright .text a:hover {
text-decoration: underline;
}
@media screen and (max-width: 992px) {
.site-header .header-container .header-menu .menu-item {
padding: 8px;
}
.site-header .header-container .header-logo {
height: 32px;
margin: 24px 0;
}
.site-header .header-container .header-logo img {
height: 32px;
}
.site-content .section.section-about .middle-aligner .text {
width: 70%;
padding: 0 16px;
}
.site-content .section.section-about .middle-aligner .text .title {
font-size: 28px;
margin-bottom: 16px;
}
.site-content .section.section-about .middle-aligner .text .desc {
font-size: 16px;
}
.site-content .section.section-about .middle-aligner .image-wrap {
width: 30%;
left: 70%;
}
.site-content .section.section-about .middle-aligner .image-wrap .image-centerer .image img {
width: 100%;
}
.site-content .section.section-monitoring .middle-aligner .text {
width: 50%;
padding: 0 16px;
}
.site-content .section.section-monitoring .middle-aligner .text .title {
margin-bottom: 16px;
}
.site-content .section.section-monitoring .middle-aligner .text .desc {
font-size: 16px;
}
.site-content .section.section-monitoring .middle-aligner .image-wrap {
width: 50%;
left: 50%;
}
.site-content .section.section-monitoring .middle-aligner .image-wrap .image-centerer .image img {
width: 100%;
}
.site-content .section.section-advantages .container-advantages .container-content .advantage {
padding: 0 16px;
}
.site-content .section.section-showcase .content-container .text-wrap {
position: relative;
float: left;
width: 40%;
left: 0;
padding: 0 16px;
}
.site-content .section.section-showcase .content-container .text-wrap .text-centerer .text {
font-size: 16px;
}
.site-content .section.section-norm .content-container .text-wrap {
position: relative;
float: left;
width: 40%;
left: 0;
padding: 0 16px;
}
.site-content .section.section-norm .content-container .text-wrap .text-centerer .text {
font-size: 16px;
}
.site-content .section.section-companies .title {
font-size: 28px;
}
.site-content .section.section-footer .part.l {
padding-right: 16px;
}
.site-content .section.section-footer .part.m {
padding: 0 16px;
}
.site-content .section.section-footer .part.r {
padding-left: 16px;
}
.site-content .section.section-footer .part .title {
font-size: 14px;
}
}
@media screen and (max-width: 768px) {
.site-header .header-container .header-menu {
margin: 28px 0;
}
.site-header .header-container .header-menu .menu-item {
padding: 0;
font-size: 15px;
}
.site-content .section .section-container-small {
padding: 48px 16px;
}
.site-content .section.section-home .section-container-home .section-content .title {
font-size: 48px;
}
.site-content .section.section-home .section-container-home .section-content .sub-title {
font-size: 16px;
margin-bottom: 8px;
}
.site-content .section.section-home .section-container-home .section-content .desc {
font-size: 14px;
}
.site-content .section.section-about .middle-aligner .text {
width: 100%;
}
.site-content .section.section-about .middle-aligner .text .title {
font-size: 24px;
}
.site-content .section.section-about .middle-aligner .text .desc {
font-size: 15px;
}
.site-content .section.section-about .middle-aligner .image-wrap {
display: none;
}
.site-content .section.section-monitoring .middle-aligner .text {
width: 100%;
}
.site-content .section.section-monitoring .middle-aligner .text .desc {
font-size: 15px;
}
.site-content .section.section-monitoring .middle-aligner .image-wrap {
width: 100%;
position: static;
}
.site-content .section.section-advantages .container-advantages {
padding: 0 16px;
}
.site-content .section.section-advantages .container-advantages .container-content .advantage {
padding: 0 8px;
}
.site-content .section.section-advantages .container-advantages .container-content .advantage .title {
font-size: 18px;
margin-bottom: 8px;
padding-bottom: 8px;
}
.site-content .section.section-advantages .container-advantages .container-content .advantage .title i {
display: none;
}
.site-content .section.section-advantages .container-advantages .container-content .advantage .content {
font-size: 14px;
}
.site-content .section.section-showcase .content-container .image {
width: 100%;
padding: 0 64px;
margin-bottom: 32px;
}
.site-content .section.section-showcase .content-container .text-wrap {
width: 100%;
}
.site-content .section.section-norm .content-container .image {
width: 100%;
padding: 0 64px;
margin-bottom: 32px;
}
.site-content .section.section-norm .content-container .text-wrap {
width: 100%;
}
.site-content .section.section-companies .title {
font-size: 24px;
}
.site-content .section.section-footer .part.l {
padding-right: 8px;
}
.site-content .section.section-footer .part.m {
padding: 0 8px;
}
.site-content .section.section-footer .part.r {
padding-left: 8px;
}
}
@media screen and (max-width: 576px) {
.site-header .header-container .header-menu {
display: none;
}
.site-content .section.section-advantages .container-advantages .container-content .advantage {
width: 100%;
margin-bottom: 32px;
}
.site-content .section.section-advantages .container-advantages .container-content .advantage:nth-child(3) {
margin-bottom: 0;
}
.site-content .section.section-showcase .content-container .image {
padding: 0 32px;
}
.site-content .section.section-norm .content-container .image {
padding: 0 32px;
}
.site-content .section.section-production .container-production .container-content .title {
font-size: 18px;
margin-bottom: 16px;
}
.site-content .section.section-production .container-production .container-content .demo .openDemo {
font-size: 16px;
border-radius: 24px;
}
.site-content .section.section-footer .part {
width: 100%;
margin-bottom: 32px;
}
.site-content .section.section-footer .part.l,
.site-content .section.section-footer .part.m,
.site-content .section.section-footer .part.r {
padding: 0 8px;
}
.site-content .section.section-footer .part:nth-child(3) {
margin-bottom: 0;
}
.site-content .section.section-footer .part .title {
margin-bottom: 8px;
}
.site-content .section.section-footer .part .content.bio {
font-size: 14px;
}
}
@media screen and (max-width: 420px) {
.site-content .section .section-container-small {
padding: 32px 16px;
}
.site-content .section.section-about .middle-aligner .text {
padding: 0;
}
.site-content .section.section-monitoring .middle-aligner .text {
padding: 0;
}
.site-content .section.section-advantages .container-advantages .container-content .advantage {
padding: 0;
}
.site-content .section.section-showcase .content-container .image {
padding: 0 16px;
}
.site-content .section.section-showcase .content-container .text-wrap {
padding: 0;
}
.site-content .section.section-norm .content-container .image {
padding: 0 16px;
}
.site-content .section.section-norm .content-container .text-wrap {
padding: 0;
}
.site-content .section.section-production .container-production {
padding: 0 16px;
}
.site-content .section.section-companies .companies .company img {
max-width: 100%;
}
.site-content .section.section-footer .part.l,
.site-content .section.section-footer .part.m,
.site-content .section.section-footer .part.r {
padding: 0;
}
}