@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600|Lato:100,300,400&subset=latin-ext');
*{
	margin:0; 
	padding:0; 
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body{
	background-color:#fff;
	height: 100%;
    width: 100%;
}
img{
	max-width:100%;
	height:auto;
	vertical-align: middle;
	}
a img{
	border:none;
}
a{
	outline:none;
	text-decoration:none;
	font-weight:400;
	color:#668cff;
}
p{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:300;
	padding-bottom:10px;
}
p:last-of-type{
	padding-bottom:0;
}
h1{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:200;
	font-size:2.5em;
	line-height:1.2em;
}
h2{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:400;
	color:#444;
	font-size:1.39em;
	line-height:1.1em;
	margin-bottom:10px;
}
h3{
	font-family: 'Lato', sans-serif;
	font-weight:400;
	color:#444;
	font-size:1.34em;
	line-height:1.1em;
	/*margin-bottom:10px;*/
}
strong{
	font-weight:600;
}

.left{
	text-align:left;
}
.center{
	text-align:center;
}
.right{
	text-align:right;
}
.justify{
	text-align:justify;
}

.wrapper-center{
	max-width:1080px;
	width:95%; /* @@ responsive 100% */
	margin:0 auto;
}
.wrapper-center-top{ /* header + home section */
	max-width: 95%;
	margin:0 auto;
	padding: 0 15px 0 15px;
}
.section{
	padding:50px 0;
	width:100%;
	display:block;
 }
.col-sp:after{
	content: '';
	display: block;
	clear: both;
}
[class*='col-dp-'] {
	float:left;
	width:100%;
	padding:20px;
}

.col-dp-10{width: 10%;}
.col-dp-25{width:25%;} .shadow-col .col-dp-25 {width: 22%;}
.col-dp-30{width:30%;} .shadow-col .col-dp-30 {width: 28%;}
.col-dp-33{width: 33.3333333333333%;} .shadow-col .col-dp-33 {width: 30.6666666%;}
.col-dp-50{width:50%;} .shadow-col .col-dp-50 {width: 48%;}
.col-dp-70{width:70%;} .shadow-col .col-dp-70 {width: 68%;}
.col-dp-100{width:100%;}

.shadow-article,.shadow-col [class*='col-dp-']{
	box-shadow: 0 0 17px 0 rgba(0,0,0,.06);
	overflow:hidden;
	background-color: #fff;
}
.col-sp.shadow-col [class*='col-dp-']:not(:first-child):not(:last-child){
  margin-right:2%;
  margin-left:2%;
 
}
.col-sp.shadow-col [class*='col-dp-']:first-child {
  margin-right:2%;
  
}
.col-sp.shadow-col [class*='col-dp-']:last-child {
  margin-left:2%;
   
}
/* --------------------
@@ header
----------------------*/
.header{
	width:100%;
	height:60px;
	position:fixed;
	top:0;
	left:0;
	z-index:2;
	line-height:55px;
}
.header [class*='col-dp-']{
	padding:0;
}
/* ---------------------
@@ navigacija - header 
-----------------------*/
.main-nav{
	width:100%;
}
.main-nav ul{
	list-style-type:none;
	padding:0;
	float:right;
}
.main-nav li{
	display:inline-block;
	margin:0 0 0 15px;
	line-height:30px;
	letter-spacing:1px;
}
.main-nav li:before{
	content:"";
}
.main-nav li a{
	display:block;
	color:#fff;
	text-decoration:none;
	font-family:'Lato', sans-serif;
	font-size:0.8em;
	font-weight:300;
	-webkit-font-smoothing: antialiased;
	border-bottom:solid 1px transparent;
	text-transform:uppercase;
	transition: all 0.3s ease-in-out 0s;
}
.main-nav li a:hover{
	border-bottom:solid 1px #4D79FF;
	color:#99B3FF;
}
.main-nav li a.active {
	color:#99B3FF;
}
.responsive-menu{ /* ne prikazujem responisve menu ... */
	display:none;
}
/* -----------------------
@@ section home
-------------------------- */
.section.home{
	height: 100vh;
	display:table;
	position:relative;
	padding-top:10em;
}
.home .more-link{
	margin-top:30px;
}
.home .home-intro-text{
	z-index:1;
	position:relative;
	padding-right:0px;
	padding-left:0px;
	display:table-cell;
	vertical-align:middle;
	text-align:right;
}
.home .home-intro-text h1{
	font-size:4.5em;
	color:#fff;
}
.home .home-intro-text p{
	letter-spacing:1.5px;
	text-shadow:1px 1px 1px #000;
	color:#fff;
}
.home .overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.75);
}
.home video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  transition: 1s opacity;
  display:block;
}
/* ------------------------
@@ more link
-------------------------- */
.more-link{
	/*position:relative;*/
	line-height:30px;
	display:inline-block;
	margin-top:10px;
	border-radius:1px;
	border:solid 1px #4d79ff;
	outline:0;
	background-color:transparent;
	/*transition: color 0.9s ease-in-out 0.9s, border 0.9s ease-in 0s;*/
	-moz-transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
.more-link a{
	display:block;
	padding:5px 11px;
	font-size:1em;
	letter-spacing:0.5px;
	font-weight:300;
	color:#4D79FF;
	text-decoration:none;
	text-align:center;
	font-family:'Lato', sans-serif;
}
.more-link:hover{
	border:solid 1px #4c4c4c;
}
.more-link a:hover{
	color:#4c4c4c;
}
/* @@ more link - home */
.home .more-link{
	margin-top:30px;
	background-color:#4d79ff;
	-moz-transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
.home .more-link a{
	padding:5px 18px;
	color:#fff;
	font-family:'Source Sans Pro', sans-serif;
}
.home .more-link:hover{
	-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.45);
	box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.45);
}
/*  ------ */
.wrapper-center p{
	font-size:1.21em;
	line-height:1.30em;
	color:#777;
}
.wrapper-center h1{
	text-align:center;
	margin-bottom:45px;
}
.wrapper-center .popup h1{ /* unutar popup-a pomaknuo naslov */
	margin-bottom:20px;
}
.wrapper-center ul{
	list-style-position:inside;
	list-style-type:none;
	margin-left:20px;
	margin-bottom:10px;
	text-align:left;
}
.wrapper-center li:before{
	content:"-\00a0";
}
.wrapper-center li{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:300;
	line-height:1.55em;
	font-size:1.21em;
	color:#777;
}
/* -----------------------
@@ section usluge i proizvodi
-------------------------- */
.section.index{
	background-color:#f4f4f4;
}
.index .heading-1{
	padding-left:10px;
	border-left:solid 6px #668cff;
	/*height:50px;*/
}
.index .heading-2{
	padding-left:10px;
	border-left:solid 6px #809fff;
}
.index .heading-3{
	padding-left:10px;
	border-left:solid 6px #99b3ff;
}
.index [class*='col-dp-'] p {
	font-size:1.085em;
	color:#444;
	line-height:1.25em;
}
.index [class*='col-dp-'] li {
	font-size:1.085em;
	color:#444;
	line-height:1.30em;
}
.index [class*='col-dp-']:hover{
	background-color:#668CFF;
}
.index [class*='col-dp-']:hover a{
	color:#444;
}
.index .popup:hover a{
	color:#668cff;
}
.index [class*='col-dp-']{
	transition: all 0.3s ease-in-out 0s;
}
/* -----------------------
@@ section servis
-------------------------- */
.section.servis{
	background:#fff;
}
/* -----------------------
@@ section software
-------------------------- */
.section.software{
	background-color:#f4f4f4;
}
/* -----------------------
@@ section o-nama
-------------------------- */
.section.o-nama{
	background-color:rgba(0,0,0,0.85);
}
.o-nama .wrapper-center p {
	color:#ddd;
}
.o-nama .wrapper-center li {
	color:#ddd;
}
.o-nama .wrapper-center h1{
	color:#ccc;
}
/* -----------------------
@@ section info
-------------------------- */
.section.info{
	background-color:#fff;
}
/* -----------------------
@@ section footer
------------------------- */
.section.footer{
	background-image:url('../img/footer-back.png');
	background-repeat:no-repeat;
	background-position:right bottom;
	background-size:auto;
	background-color:#f4f4f4;
	display:table;
	text-align:center;
	height:200px;
}
.footer [class*="col-dp-"]  {
	float:none;
	display:table-cell;
	vertical-align:middle;
}
.footer ul{
	list-style-position:outside;
	list-style-type:none;
	margin-left:0px;
}
.footer li:before{
	content:"";
}
.footer p{
	color:#4c4c4c;
	line-height:1.1em;
	font-size:0.96em;
}
.grid-container {
	display: grid;
	grid-row-gap: 10;
	grid-template-rows: auto auto;
  }
/* -------------------------
@@ to top icon
---------------------------*/
#toTop {
    display: none;
    position: fixed;
    bottom: 35px;
    right: 35px;
	width:40px;
    height: 40px;
    background-image: url('../img/to-top.png');
    background-repeat: no-repeat;
	z-index:1;
}
/* -------------------------
@@ pop up content
---------------------------*/
.popup-trigger { 
	cursor: pointer; 
 }
.popup {
	display: none;
	position: absolute; 
	top: 100px; 
	left: 50%; 
	width: 800px; 
	margin-left: -400px; 
	padding: 50px 30px 50px 30px;
	background: #fff; 
	color: #333;
	line-height: 30px; 
	border: 1px solid #f4f4f4; 
	z-index: 3;
	box-shadow: 0 0 17px 0 rgba(0,0,0,.06);
	transition: all 5s linear;
	}
.popup img {
	margin:20px auto 20px auto;
	max-width:80%; /* responsive 100% -> */
	height:auto;
	display:block;
	}
.popup-mobile { /*  break point < 767 // responsive style */
	position: relative; 
	top: 0; 
	left: 0; 
	margin: 30px 0 0; 
	width: 100%; 
	padding:70px 15px 30px 15px; /* dodao */
	}
.popup-btn-close {
	line-height:32px;
	border-radius:50%;
	text-align:center;
	color: #4D79FF; 
	font-family:'Lato', sans-serif;
	font-weight:300;
	font-size: 30px; 
	border:solid 1px #4D79FF;
	width:35px;
	height:35px;
	position: absolute; 
	top: 15px; 
	right: 15px; 
	cursor: pointer;
	}
.popup-btn-close:before{
	content:"\00d7";
	padding-left:1px;
}
.page-cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.2;
}