/*FONTS*/
@font-face {
  font-family: 'United Sans Rg Lt';
  src: url('../fonts/UnitedSansReg-Light.eot'); /* IE9 Compat Modes */
  src: url('../fonts/UnitedSansReg-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/UnitedSansReg-Light.woff') format('woff'), /* Modern Browsers */
       url('../fonts/UnitedSansReg-Light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/UnitedSansReg-Light.svg#svg') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  200;
}

@font-face {
  font-family: 'United Sans Rg Bd';
  src: url('../fonts/UnitedSansReg-Bold.eot'); /* IE9 Compat Modes */
  src: url('../fonts/UnitedSansReg-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/UnitedSansReg-Bold.woff') format('woff'), /* Modern Browsers */
       url('../fonts/UnitedSansReg-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/UnitedSansReg-Bold.svg#svg') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  700;
}



h1,h2,h3,h4 {
	font-family: "United Sans Rg Bd";
	font-size: 16px;
	color: #f5f5f5;
}


html { height: 100%;}
body:before {
	content: "";
	display: table;
}
body {
	height: 100%;
	background: #333333;
	font-family: "United Sans Rg Lt", "helvetica", "arial", sans-serif;
	color: #f5f5f5;
	overflow: hidden;
	position: relative;
	font-size: 16px;
	line-height: 18px;
}

/*=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#
 #==========================================================
 #
 # MATER LAYOUT - CONTAINER, HEADER, FOOTER
 #
 #==========================================================
*#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#*/

#header,
#footer {
	position: absolute;
	width: 100%;
	left:0;
	right:0;
	z-index: 1000;
	background: #333333;
}
#big-video-wrap {
	position: absolute;
	overflow: hidden;
	top: 157px;
	bottom: 48px;
	width: 100%;

			transition: top .2s ease-in-out;
	     -o-transition: top .2s ease-in-out; /* Opera */
	   -moz-transition: top .2s ease-in-out; /* Firefox 4 */
	-webkit-transition: top .2s ease-in-out; /* Safari and Chrome */
}

#big-video-wrap #big-video-vid {
	position:relative;
}
#big-video-vid {
	position: relative;
	z-index: -10;
	opacity: 0;
}
.canPlayVideo #big-video-vid {
	display: 'block';
	opacity: 1;
	z-index: 0;
}

#container {
	left: 0;
	right:0;
	top:157px;
	bottom: 48px;
	width: 100%;
	position: absolute;
	overflow: hidden;
	z-index: 800;

			transition: top .2s ease-in-out, bottom .2s ease-in-out;
	     -o-transition: top .2s ease-in-out, bottom .2s ease-in-out; /* Opera */
	   -moz-transition: top .2s ease-in-out, bottom .2s ease-in-out; /* Firefox 4 */
	-webkit-transition: top .2s ease-in-out, bottom .2s ease-in-out; /* Safari and Chrome */
}

/* HEADER */
#header {
	top:0;
	height: 157px;

			transition: height .2s ease-in-out;
	     -o-transition: height .2s ease-in-out; /* Opera */
	   -moz-transition: height .2s ease-in-out; /* Firefox 4 */
	-webkit-transition: height .2s ease-in-out; /* Safari and Chrome */
}
#logo {
	display: block;
	width: 190px;
	height: 114px;
	margin: 28px auto 0;
	background: url("../img/logo.png") no-repeat;
	background-size: contain;
	-ms-behavior: url(css/backgroundsize.min.htc);
			transition: width .2s ease-in-out, height .2s ease-in-out;
	     -o-transition: width .2s ease-in-out, height .2s ease-in-out; /* Opera */
	   -moz-transition: width .2s ease-in-out, height .2s ease-in-out; /* Firefox 4 */
	-webkit-transition: width .2s ease-in-out, height .2s ease-in-out; /* Safari and Chrome */
}


/* FOOTER */     
#footer {
	bottom: 0;
	min-height: 48px;

	font-size: 12px;
	color: #f5f5f5;
}
#footer .footer-container{
	max-width: 840px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
}

#footer a{ color: #f5f5f5; text-decoration: none; }
#footer a:hover{text-decoration: underline; }


#footer .logo {
	float: left;
	display: block;
	margin-top: 14px;
	width: 31px;
	height: 30px;
	background: url("../img/logo-shape.png") no-repeat;
	background-size: contain;
	-ms-behavior: url(css/backgroundsize.min.htc);
}

#footer .link-map {
	float: right;
	display: block;
	margin-top: 9px;
	width: 63px;
	height: 30px;
	background: url("../img/google-map.png") no-repeat;
	background-size: contain;
	-ms-behavior: url(css/backgroundsize.min.htc);

}

#footer .lang-nav {
	text-align: center;
	font-size: 12px;
	padding: 8px 0 3px;
	margin: 0;
	
	
}
#footer .lang-nav *{
	color: #fff;
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

#footer .details{
	text-align: center;
	margin: 0;
	padding: 3px 60px 3px 40px;
	
	
}


/*=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#
 #==========================================================
 #
 # BUTTONS and UI items
 #
 #==========================================================
*#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#*/
.btn-main {
	position: absolute;
	display: block;
	width: 90px;
	height: 90px;
	margin-top: -60px;
	background: url("../img/storitve-btn.png") no-repeat 0 0;
	background-size: contain;
	-ms-behavior: url(css/backgroundsize.min.htc);

}
.btn-main.storitve:first-child:before {
	position: absolute;
	content: "";
	display: block;
	width: 140px;
	height: 40px;
	left: 50%;
	top: -40px;
	margin-left: -68px;
	background: no-repeat 0 0;
	background-size: contain;
	-ms-behavior: url(css/backgroundsize.min.htc);
}

.btn-main.storitve.de:first-child:before {
	background-image: url("../img/tehnologije-de.png");
}
.btn-main.storitve.si:first-child:before {
	background-image: url("../img/tehnologije-si.png");
}
.btn-main.storitve.en:first-child:before {
	background-image: url("../img/tehnologije-en.png");
}
.btn-main.storitve {
	z-index: 60;
	top:40%;
	left: 15%;

	background-image: url("../img/storitve-btn.png");
	background-size: contain;
	-ms-behavior: url(css/backgroundsize.min.htc);
}
.btn-main.storitve + .btn-main.storitve {
	margin-top: 20px;
}

.slider.text-slider .btn-main.storitve {
	position: static;
	top:auto;
	left: auto;
	margin: 0 auto;
	display: none;
	margin-top: 20px; 
}


.link-open {
	z-index: 10;
	position: absolute;
	display: block;

	width: 51px;
	height: 52px;
	background: url("../img/open-btn.png") no-repeat 0 0;
	background-size: contain;
	-ms-behavior: url(css/backgroundsize.min.htc);
	top:50%;
	left:50%;
	margin-left: -25px;
	margin-top: -25px;

			transition: left .2s ease-in-out, margin-left .2s ease-in-out;
	     -o-transition: left .2s ease-in-out, margin-left .2s ease-in-out; /* Opera */
	   -moz-transition: left .2s ease-in-out, margin-left .2s ease-in-out; /* Firefox 4 */
	-webkit-transition: left .2s ease-in-out, margin-left .2s ease-in-out; /* Safari and Chrome */
}
.active .link-open {
	background-image: url("../img/close-btn.png");
	background-size: contain;
	-ms-behavior: url(css/backgroundsize.min.htc);
	
}
.accordion .slide2.active .link-open,
.accordion .slide3.active .link-open,
.accordion .slide5.active .link-open {
	left:20%;
	margin-left: auto;
}
.accordion .slide4.active .link-open,
.accordion .slide1.active .link-open {
	background-position: -80px -140px;
	
	left:80%;
	margin-left: auto;
}
/*=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#
 #==========================================================
 #
 # CONTENT and PAGES
 #
 #==========================================================
*#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#*/  
.section {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left:0;
	right: 0;
	bottom: 0;

	overflow: hidden;
}
.section .section-body{
	max-width: 960px;
	margin: 0 auto;
	position: relative;
	height: 100%;
}

#big-video-wrap {
	background: url(../video/MVI_0250_1200.gif) no-repeat 50% 50%;
	background-size: cover;

	-ms-behavior: url(css/backgroundsize.min.htc);
}

.canPlayVideo #big-video-wrap {
	background: url(../img/frame1.jpg) no-repeat 50% 50%;
	background-size: cover;
	-ms-behavior: url(css/backgroundsize.min.htc);
}
.page-storitve #big-video-wrap {
	background: none;
}

.section.storitve {
	right: auto;
	z-index: 600;
	
	width: 0;
}





/*=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#
 #==========================================================
 #
 # COMPONENT SLIDER
 #
 #==========================================================
*#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#*/  
.slider> .slides img {
	max-width: 220px;
	height: auto;
}
.slider> .slides {
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 380px;
}
.slider> .slides> li {
	
	position: absolute;
	opacity: 0;
	filter:alpha(opacity=0);

			transition: opacity .3s ease-in-out;
	     -o-transition: opacity .3s ease-in-out; /* Opera */
	   -moz-transition: opacity .3s ease-in-out; /* Firefox 4 */
	-webkit-transition: opacity .3s ease-in-out; /* Safari and Chrome */
}

.slider> .slides> li.active {
	opacity: 1;
	filter:alpha(opacity=100);
}



.slider.text-slider {
	position: absolute;
	width: 260px;
	top:50%;
	right: 20px;
	margin-top: -200px;
	z-index: 50;
}

.slider.text-slider h2 {
	font-size: 16px;
	margin-bottom: 40px;
	padding: 0;
}

.slider.text-slider p {
	margin: 0;
	padding: 0;
}

.slider> .slider-nav {
	position: relative;
	z-index: 10;
}




.slider-nav {
	width: 100%;
	margin: 0 auto;
	padding: 0px;
	margin-top: 0px;
	list-style: none;
	white-space: nowrap;
	text-align: center;
}

.slider-nav> li {
	display: inline-block;
	*display: inline;
	*zoom:1;
	margin: 0 6px;
}


.slider-nav> li> a {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	width: 12px;
	height: 12px;
	background: url("../img/sprite.png") no-repeat -310px 0;
}
.slider-nav> li:hover> a,
.slider-nav> li.active> a {
	background-position: -330px 0;
}






.accordion {
	position: relative;
	overflow: hidden;
	
	height: 100%;
	list-style:none;
	padding:0px;

	width:1200px;
	margin: auto;
}
.accordion> *:first-child {
	border-left:0;
}
.accordion> * {
	position: absolute;
	overflow: hidden;
	cursor: pointer;
	background: no-repeat center center;
	background-size: cover;
	-ms-behavior: url(css/backgroundsize.min.htc);
	
	border-left: #0c8ebf 2px solid;

    -webkit-box-sizing: content-box; /* 2 */
	   -moz-box-sizing: content-box;
    		box-sizing: content-box;

}

.accordion> * img {
	display: block;
  	min-width: 100%;
  	min-height: 100%;
  	width: auto;
  	height: auto;
  	position: relative;
}


.accordion .caption {
	width: 282px;
	height: 282px;
	position: absolute;
	top:50%;
	left: 10%;
	margin-top: -141px;
	background: url("../img/details-bg.png") no-repeat 0 0;
	background-size: contain;
	-ms-behavior: url(css/backgroundsize.min.htc);
	text-align: center;
	overflow: hidden;
}
.accordion .slide5 .caption {display: none;}
.accordion .slide1 .caption,
.accordion .slide4 .caption  {left:10%; right: auto;}
.accordion .caption p {
	position: absolute;
	
	top:50%;
	left:20px;
	right:20px;
	margin-top: -10px;

	font-size: 14px;
	line-height: 20px;
}








/*=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#
 #==========================================================
 #
 # Responsive layout
 #
 #==========================================================
*#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#*/

/* Content small */
@media only screen
and (max-width : 520px) {

	body {
		font-size: 12px;
		line-height: 14px;
	}

	#container {top: 80px;}
	#header {height: 80px;}
	#logo {width: 100px;height: 60px; margin-top:10px;}

	.slider> .slides {height: 280px;}
	#big-video-wrap {top: 80px}
	
	#footer,
	#footer .lang-nav {
		font-size: 10px;
		line-height: 12px;
	}


	.slider.text-slider {
		margin-top: -170px;
		width: auto;
		left: 0px;
		right: 0px;
		background: rgba(51,51,51,.6);
		padding: 20px;
	}
	.slider.text-slider .slides li{position: relative;
	}
	.slider.text-slider .slider-nav {display: none;}

	.btn-main.storitve {display: none;}

	.slider.text-slider .btn-main.storitve {display: block;}

	.accordion .caption {
		width: 160px;
		height: 160px;

	}
	.accordion .caption p {
		margin-top: -18px;
		font-size: 11px;
		line-height: 14px;
	}
}

/* Content medium */
@media only screen 
and (max-width : 820px) {
/*and (max-width : 767px) {*/
	#container {top: 80px;}
	#header {height: 80px;}
	#logo {width: 100px;height: 60px; margin-top:10px;}

	.slider> .slides {height: 280px;}
	#big-video-wrap {top: 80px}
	
	#footer,
	#footer .lang-nav {
		font-size: 10px;
		line-height: 12px;
	}

	.slider.text-slider {
		font-size: 13px;
		line-height: 16px;
	}
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 521px)
and (max-width : 767px) {
}



/* Ipads, small desktop ----------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 920px) {
	.slider.text-slider {
		font-size: 13px;
		line-height: 16px;
	}
	.slider> .slides {
		height: 280px;
	}


	.slider.text-slider {
		margin-top: -160px;
	}
	.slider-nav {
		margin-top: 0;
	}

	.accordion .caption {
		width: 220px;
		height: 220px;

	}
	.accordion .caption p {
		margin-top: -16px;
		font-size: 12px;
		line-height: 15px;
	}
}


/* Only desktop ----------- */
@media only screen
and (max-width : 940px) {

}