@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap');

body {background: #fff; color: #7A7A7A; font-family: 'Open Sans', Arial, Tahoma, sans-serif; letter-spacing: 1px; font-size: 18px;}
@media (max-width: 767px) {
  body{text-align: center;}
}
.container{max-width: 1470px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px}
@media(min-width: 1500px) {
  .container {max-width: 1470px; padding-left: 0; padding-right: 0;}
}

a {color: #E30613; transition: 0.5s;}
a:hover, a:active, a:focus {color: #1a1a1a; outline: none; text-decoration: none;}
p {padding: 0; margin: 0 0 30px 0;}
ul{margin-bottom: 30px; list-style: none; padding-left: 0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; margin: 0 0 30px 0; padding: 0; color: #050505; text-transform: uppercase;}

h1{font-size: 22px; font-weight: 900; margin-bottom: 5px; color: #E30613;}
h2{font-size: 40px;}
h3{font-size: 22px;}
@media (min-width: 576px) {
  h2{font-size: 55px;}
  h3{font-size: 25px;}
}

/* Back to top button */
.back-to-top {position: fixed; display: none; background: #fff; color: #E30613; border: 1px solid #E30613; padding: 6px 9px 6px 9px; font-size: 16px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; right: 15px; bottom: 15px; transition: background 0.5s;}
@media (max-width: 767px) {
  .back-to-top {bottom: 15px;}
}
.back-to-top:focus {background: #E30613; color: #fff; outline: none;}
.back-to-top:hover {background: #E30613; color: #fff;}

/* ================
 * SECTION TITLE *
==================*/
.sectionTitle {text-align: center; position: relative; padding-bottom: 20px; margin-bottom: 25px; border-bottom: 1px solid #C2C2C2; }
.sectionTitle h2 {font-size: 35px; margin: 0 0 30px 0; margin-bottom: 35px; position: relative;}
.sectionTitle h2:after{content: ""; display: block; position: absolute; width: 100px; height: 2px; background-color: #000; left: 50%; bottom: -20px; transform: translate(-50%);}
.sectionTitle p {font-size: 22px; font-weight: 300; color: #B2A9A9; max-width: 850px; margin: 0 auto; padding-bottom: 5px; line-height: 120%;}
@media (min-width: 576px) {
  .sectionTitle{margin-bottom: 35px;}
  .sectionTitle h2 {font-size: 55px;}
  .sectionTitle p {font-size: 28px;}
}


/* Buttons */
.btn {transition: .3s ease-out; font-weight: 400; border-width: 1px;}
.btn:focus, .btn:active, .btn:active:focus, button:focus, button:active, button:active:focus {outline: none !important;}
.btn:active, .btn.active {-webkit-box-shadow: none; box-shadow: none;}
.btn-primary {font-size: 16px; position: relative; line-height: 1; letter-spacing: 1px; text-transform: uppercase; border: 0 solid #E30613; font-weight: 400; display: inline-block; padding: 20px 55px 20px 55px; background-color: #E30613; color: #fff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; white-space: normal;}
.btn-primary:focus, .btn-primary.focus, .btn-primary:hover, .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {background-color: #77A01A !important; color: #fff !important; border-color: #E30613 !important; outline: none !important; box-shadow: none !important;}
.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary {pointer-events: none; opacity: .5; background-color: transparent; opacity: .6; border-color: #c5ccda; color: #c5ccda;}

.btn-lg{font-size: 28px !important; padding: 25px 90px 25px 50px;}
.btn-lg:before{font-size: 22px; line-height: 30px; right: 50px;}
.btn-lg:hover:before {right: 40px;}
@media (max-width: 420px) {
  .btn-primary {font-size: 16px; letter-spacing: 1px; padding: 20px 25px 20px 25px; border-radius: 0;}
  .btn-lg{font-size: 22px !important; padding: 25px 25px 25px 25px;}
  .btn-lg:hover:before {right: 20px;}
}


/*
* Top info line
*/
.headerContact{display: none;}
@media (min-width: 768px) {
  .headerContact{background-color: #fff; display: block; padding: 0; border-bottom: 1px solid #C4C4C4;}
  .headerContact .headerContactLeft {padding-top: 8px; padding-bottom: 8px; padding-left: 20px;}
  .headerContact .headerContactLeft .mail{position: relative; padding: 2px 0 2px 30px; margin-right: 42px; display: inline-block; font-size: 16px;}
  .headerContact .headerContactLeft .mail:before, .headerContact .headerContactLeft .phone:before{font-family: "Material Design Icons"; font-size: 20px; color: #707070; display: inline; position: absolute; width: 20px; height: 20px; left: 0;}
  .headerContact .headerContactLeft .mail:before{content: '\F01EE'; top: -1px;}
  .headerContact .headerContactLeft .mail:after{content: ""; display: block; position: absolute; background-color: #C2C2C2; width: 1px; height: 100%; right: -25px; top: 0;}
  .headerContact .headerContactLeft .phone{position: relative; padding: 2px 0 2px 25px; display: inline-block; font-size: 16px;}
  .headerContact .headerContactLeft .phone:before{content: '\F03F2'; top: -1px;}

  .headerContact .headerContactRight{text-align: right; padding-top: 8px; padding-bottom: 0;}


  /* Top line login */
  .login{display: inline-block; text-align: left; position: relative; padding: 3px 10px 0 25px;}
  .login:before{content: ""; position: absolute; display: block; left: 0; top: 0; background: url("../img/iconUser.svg") center center no-repeat; width: 15px; height: 100%;}
  .login a{font-size: 16px; display: inline; line-height: 100%;}

  /* Top line lang */
/*  .langs{position: relative; display: inline-block; cursor: pointer; font-size: 16px; margin-right: 20px; text-transform: uppercase; background-color: #4DC7A0;}
  .langs .dropdown-toggle{position: relative; padding-left: 25px;}
  .langs .dropdown-toggle img{display: inline-block; position: absolute; left: 0; top: 50%; transform: translate(0, -50%);}
  .langs > ul.dropdown-menu{margin: 5px 0 0 0; list-style: none; border: 0 none; box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.06); min-width: 84px;}
  .langs > ul > li{text-align: left; padding: 5px 20px;}
  .langs > ul > li:before{content: ""; display: none;}
  .langs > ul > li a{background-color: #fff; color: #000; display: block; font-size: 14px; padding-left: 25px; position: relative;}
  .langs > ul > li a:hover{background-color: #fff; color: #ed6e25 !important;}
  .langs > ul > li.active{display: none;}
  .langs > ul > li a img{display: inline-block; position: absolute; left: 0; top: 50%; transform: translate(0, -50%);}*/

  .rd-navbar-collapse{display: none;}
}

@media (min-width: 1200px) {
  .headerContact .headerContactLeft {padding-top: 12px;}
  .headerContact .headerContactLeft .mail{padding: 2px 0 2px 30px; font-size: 18px;}
  .headerContact .headerContactLeft .mail:before{font-size: 22px; top: -2px;}

  .headerContact .headerContactRight{text-align: right; font-size: 18px; padding-top: 10px; padding-bottom: 6px;}
}

.headerContactMobile{position: fixed; right: 60px; top: 6px; font-size: 28px; z-index: 999;}
.headerContactMobile a{margin-left: 10px; color: #707070;}
@media (min-width: 768px) {
  .headerContactMobile{display: none;}
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.sticky-wrapper{z-index: 99; position: absolute; width: 100%; height: 60px;}
header {height: 60px; background-color: #fff; transition: all 0.3s; z-index: 997; box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.06);}
@media (min-width: 992px) {
  .sticky-wrapper{height: 60px;}
  header {height: 74px;}
  .is-sticky header {height: 74px;}
}
@media (min-width: 1200px) {
  .sticky-wrapper{height: 100px;}
  header {height: 100px;}
  .is-sticky header {height: 74px;}
}

.logo{padding: 5px 0; display: inline-block; float: left; margin-left: 0; transition: all 0.5s; height: 70px;}
.logo img {width: 100%; height: 100%;}

@media (min-width: 992px) {
  .logo{padding: 5px 0 0 0; height: 80px;}
}
@media (min-width: 1200px) {
  .logo{padding: 14px 0 0 0; height: 100px;}
  .is-sticky .logo{-webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); padding: 0; margin-top: -8px;}
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Container */
#nav-menu-container {margin: 10px 10px 0 0; display: inline-block; float: right; transition: all 0.5s;}
@media (min-width: 992px) {
  #nav-menu-container {margin: 15px 10px 0 0;}
  .is-sticky #nav-menu-container {margin: 15px 10px 0 0;}
}

@media (min-width: 1200px) {
  #nav-menu-container {margin: 30px 10px 0 0;}
  .is-sticky #nav-menu-container {margin: 15px 10px 0 0;}
}
@media (min-width: 1600px) {
  #nav-menu-container {margin: 30px 10px 0 0;}
  .is-sticky #nav-menu-container {margin: 15px 10px 0 0;}
}
@media (max-width: 767px) {
  #nav-menu-container {display: none;}
}

/* Nav Menu Essentials */
.nav-menu{display: inline-block;}
.nav-menu, .nav-menu * {margin: 0; padding: 0; list-style: none;}
.nav-menu > li {display: inline-block;}
.nav-menu li:hover > ul, .nav-menu li.sfHover > ul {display: block;}

/* Nav Menu Arrows */
/*.sf-arrows .sf-with-ul {padding-right: 22px;}
.sf-arrows .sf-with-ul:after {content: "\f107"; position: absolute; right: 8px; font-family: FontAwesome; font-style: normal; font-weight: normal;}
.sf-arrows ul .sf-with-ul:after {content: "\f105";}*/

/* Nav Menu Styling */
@media (min-width: 768px) {
  .nav-menu > li {margin-left: 30px;}
  .nav-menu li:hover > a, .nav-menu > .menu-active > a {color: #E30613;}
  .nav-menu a {padding: 10px 0; letter-spacing: 0; text-decoration: none; text-transform: uppercase; display: inline-block; color: #000; font-weight: 400; font-size: 16px; outline: none;}
}
@media (min-width: 1200px) {
  .nav-menu > li {margin-left: 25px;}
  .nav-menu a {padding: 10px 0; font-size: 16px; letter-spacing: 1px;}
}
@media (min-width: 1600px) {
  .nav-menu > li {margin-left: 35px;}
  .nav-menu a {padding: 10px 0; font-size: 18px; letter-spacing: 2px;}
}

/* Mobile Nav Toggle */
#mobile-nav-toggle {position: fixed; right: 0; top: 0; z-index: 999; margin: 20px 20px 0 0; border: 0; background: none; font-size: 24px; display: none; transition: all 0.4s; outline: none; cursor: pointer;}
#mobile-nav-toggle i {color: #E30613;}
@media (max-width: 767px) {
  #mobile-nav-toggle {display: inline;}
  #mobile-nav-toggle{margin-top: 10px;}
}

/* Mobile Nav Styling */
#mobile-nav {position: fixed; top: 0; padding-top: 80px; bottom: 0; z-index: 9; background: rgba(255, 255, 255, 1); left: -260px; width: 260px; overflow-y: auto; transition: 0.4s;}
#mobile-nav ul {padding: 0; margin: 0; list-style: none;}
#mobile-nav ul li {position: relative;}
#mobile-nav ul li a {color: #E30613; font-size: 16px; overflow: hidden; padding: 10px 22px 10px 35px; position: relative; text-decoration: none; text-transform: uppercase; width: 100%; display: block; outline: none; text-align: left;}
#mobile-nav ul li a:hover {color: #000;}
#mobile-nav ul li li {padding-left: 30px;}
#mobile-nav ul .menu-has-children i {position: absolute; right: 0; z-index: 99; padding: 15px; cursor: pointer; color: #fff;}
#mobile-nav ul .menu-has-children i.mdi-chevron-up {color: #818285;}
#mobile-nav ul .menu-item-active {color: #818285;}
#mobile-body-overly {width: 100%; height: 100%; z-index: 8; top: 0; left: 0; position: fixed; background: rgba(66, 66, 66, 0.2); display: none;}

/* Mobile Nav body classes */
body.mobile-nav-active {overflow: hidden;}
body.mobile-nav-active #mobile-nav {left: 0;}
body.mobile-nav-active #mobile-nav-toggle {color: #fff;}

/*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/

#intro {width: 100%; background: #0093d4 url('/img/intro.jpg') no-repeat center top; background-size: cover; position: relative; text-align: center; padding: 0; min-height: 350px;}
#intro .intro-content {position: absolute; left: 5%; right: 5%; top: 50%; transform: translate(0, -50%); z-index: 1; display: block; margin: 0 auto; text-align: center;}
#intro .intro-content h1 {color: #fff; font-weight: 500; font-size: 30px; line-height: 120%; letter-spacing: 1px; text-transform: none;}
#intro .intro-content p {color: #fff; margin-bottom: 0; font-weight: 400; line-height: 120%;}
@media (min-width: 576px) {
  #intro .intro-content h1 {font-size: 42px;}
}
@media (min-width: 768px) {
  #intro{margin-top: 60px;}
  #intro .intro-content h1 {font-size: 50px;}
  #intro .intro-content p {font-size: 18px;}
}
@media (min-width: 992px) {
  #intro .intro-content h1 {font-size: 72px;}
  #intro .intro-content p {font-size: 24px;}
}
@media (min-width: 1200px) {
  #intro{margin-top: 100px;}
  #intro .intro-content h1{font-size: 90px;}
  #intro .intro-content p {font-size: 24px;}
}

@media (max-width: 767px) {
  .intro.container {max-width: 100%; padding-left: 0; padding-right: 0; left: 0; right: 0;}
}

#intro .intro-content .btn-get-started {font-size: 15px; font-weight: bold; letter-spacing: 1px; display: inline-block; padding: 10px 32px; text-transform: uppercase; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; transition: 0.5s; margin: 10px; color: #fff; background: transparent; border: 2px solid #fff;}
#intro .intro-content .btn-get-started:hover {background: #fff; color: #000;}
#intro #intro-carousel {z-index: 8;}
#intro #intro-carousel::before {content: ''; background-color: rgba(0, 0, 0, 0.4); position: absolute; height: 100%; width: 100%; top: 0; right: 0; left: 0; bottom: 0; z-index: 1;}
#intro #intro-carousel .item {width: 100%; height: 74vh; background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-transition-property: opacity; transition-property: opacity;}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/

section{padding: 100px 0 100px 0;}

/* Icons Section
--------------------------------*/
.icons {padding: 60px 0 0 0; text-align: center;}
.icons ul{width: 100%;}
@media (min-width: 320px) {
  .icons ul li{width: 49%; display: inline-block; margin-bottom: 25px;}
}

@media (min-width: 576px) {
  .icons ul li{width: 31.9%;}
}
@media (min-width: 768px) {
  .icons ul li{width: 23.9%;}
}
@media (min-width: 992px) {
  .icons ul li{width: 19.4%;}
}

/* Slogan Section
--------------------------------*/
.slogan .card{box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); -webkit-box-shadow:  0 0 20px rgba(0, 0, 0, 0.1); -moz-box-shadow:  0 0 20px rgba(0, 0, 0, 0.1); border: 0; padding: 55px 35px; max-width: 800px; margin: 0 auto;}
.slogan .card p{padding: 0; margin: 0; font-weight: 300; text-align: center; font-size: 26px; color: #464545; text-transform: uppercase;}
.slogan .card p strong{color: #000; font-weight: 500;}
.slogan .card p span#typer{color: #464545; font-weight: 500;}
.slogan .card p span.whitespace{white-space: nowrap;}

/* About Section
--------------------------------*/
.about {padding: 60px 0 80px 0; text-align: center;}

.numbers{}
.numbers .number{font-size: 60px; font-weight: 700; color: #464545;}
.numbers p{font-size: 22px; color: #B2A9A9;}


/* Customers Section
--------------------------------*/
.customers {padding: 60px 0 80px 0; text-align: center;}

/* Services Section
--------------------------------*/
.services {padding: 60px 0 40px 0; text-align: center;}
.services .service-block{padding-bottom: 25px;}
.services .service-block img{width: 150px;}
.services .service-block h3 {font-size: 20px; font-weight: 400; margin-bottom: 45px; text-align: center; text-transform: none; position: relative;}
.services .service-block h3:after{content: ""; display: block; position: absolute; width: 90px; height: 1px; background-color: #000; left: 50%; transform: translate(-50%); bottom: -20px;}
.services .service-block p{font-size: 16px; text-align: center; color: #B2A9A9; max-width: 500px; margin: 0 auto;}
@media (min-width: 768px) {
  .services .service-block{padding-bottom: 45px;}
  .services .service-block img{width: 100%;}
  .services .service-block h3{text-align: left;}
  .services .service-block h3:after{left: 0; transform: translate(0); bottom: -20px;}
  .services .service-block p{text-align: left; max-width: none;}
}

/* Contact Section
--------------------------------*/
.contact {padding: 60px 0 0 0; text-align: center;}
.contact .map{background: url("/img/map.png") no-repeat center top; padding-bottom: 250px;}

.contact h3 {margin-bottom: 45px; text-align: center; text-transform: none; position: relative; text-transform: uppercase}
.contact h3:after{content: ""; display: block; position: absolute; width: 60px; height: 1px; background-color: #000; left: 50%; transform: translate(-50%); bottom: -20px;}

.contact a img{vertical-align: baseline;}

.contact .obchodni-rejstrik p{max-width: 600px; margin: 0 auto 45px auto;}

/*
* section footer
* -----------------
*/
footer {padding: 0px 0 0 0; text-align: center;}
footer img{margin-bottom: 25px; max-height: 100px;}
footer h2{font-size: 16px; font-weight: 400;}

@media (max-width: 767px) {
  footer *{text-align: center;}
  footer h3 {text-align: center;}
  footer ul li {display: inline-block;}
}

.copyright {padding: 35px 0 65px 0; font-size: 22px; text-align: center;}
.copyright a:hover {text-decoration: none;}
.copyright p {margin: 0; color: #979797;}
.copyright a {color: #979797;}
.copyright .createdBy {font-size: 14px;}