/*
	 Substance.lv
	 by Maris Voits
	 http://saigot.com
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,600&subset=latin,cyrillic-ext,latin-ext);


 /*  initialize.css */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* initialize.css */


.rinda {max-width: 1180px; margin: 0 auto; padding: 0 10px;}
.rinda-res {width: 100%;}
.rinda800 {max-width: 800px; margin: 0 auto;}
.rinda845 {max-width: 845px; margin: 0 auto;}

.p-50 {padding:50px}
.pt-50 {padding-top:50px}
.pb-50 {padding-bottom:50px}
.px-50 {padding-left:50px; padding-right:50px}


.mt-30 {margin-top:30px}
.mt-50 {margin-top:50px}
.mt-100 {margin-top:100px}
.mt-150 {margin-top:150px}
.mt-200 {margin-top:200px}
.mt-440 {margin-top:440px}
.mt-480 {margin-top:480px}
.mt-540 {margin-top:540px}
.mt-600 {margin-top:600px}
.mt-630 {margin-top:630px}

.fl {float: left}
.fr {float: right}

.text-right {text-align: right}
.text-center {text-align: center}

.text-justify{text-align: justify}

/* body {font-family: 'Open Sans', sans-serif; color:#fff; font-weight:300; font-size: 18px; line-height: 24px; background-color: #18191f;}
 */
body {font-family: 'Open Sans', sans-serif; color:#18191f; font-weight:300; font-size: 18px; line-height: 24px; background-color: #fff;}

a {color:#fff; text-decoration: none;}

p {margin: 0 0 15px 0}

aheader {margin: 0; padding:0;
	background-color: #fff; height:85px;
}
#header {position: fixed; top:0; width: 100%; z-index: 8000;margin: 0; padding:0;
	background-color: rgba(0,2,10,0.8); height:96px;}

h1#logo {
	font-size: 24px;
	line-height: 96px;
	font-weight: 300;
	padding: 0 0 0 70px;
	text-transform: uppercase;
	width: 190px;
	float: left;
	background: url('img/substance-zime.png') no-repeat 0px 0px;
}

h1, h2 {
	font-size: 24px;
	line-height: 30px;
	font-weight: 300;
	padding: 0;
	margin: 0;
	text-transform: uppercase;
}
.teh {margin-top:15px;
font-size: 80%;
}


/* PROJEKTU APRAKSTI */

.kr-kolona {float: left; width: 24.16%; padding: 0 0 20px 0}
.la-kolona {float: right; width: 70.8%; padding: 15px 20px 20px 0; font-size: 90%}

/*NAVIGACIJA */


.menu_button {display:none}


#navigacija, #valodas {float: right; line-height:100px; font-size:20px}
#navigacija ul, #valodas ul {list-style-type:none; padding: 0}
#navigacija li, #valodas li {display:block;float:left;margin:0;padding:0}
#navigacija a, #valodas a {text-decoration:none; height:96px;display:block; line-height:96px; text-transform: uppercase; margin:0; float:left; color: #b3b3b3}
#navigacija a:hover, #valodas a:hover {text-decoration:none; color: #fff}

#navigacija a {padding:0 30px;}
#navigacija li.active a { color: #fff}

#valodas a {padding:0 10px;}
#valodas li.last a {padding-right: 0px}
#valodas li.active {display: none;}


#navigacija {}
#navigacijaMOB {display:none}


.scrollToTop{
	width:85px; 
	height:85px;
	padding:0px; 
 text-indent: -9999px;
 	background: transparent;
	text-decoration: none;
	position:fixed;
	top:0px;
	right:0px;
	display:none;
	background: url('img/nav-icon-top.png') no-repeat 0px 0px;
	z-index:9999
}

.scrollToTop:hover{
	text-decoration:none;
}


@media (max-width: 1200px) {

}


@media (max-width: 860px) {

h1#logo { margin-left: 25px;
	padding: 0 0 0 75px;
	background: url('img/substance-zime.png') no-repeat 0px 0px;
}

#header {position: absolute; top:0; width: 100%; z-index: 9999;margin: 0; padding:0;
	background-color: rgba(0,2,10,0.6); height:96px;}

#navi-bar {position:absolute;
top:96px;
width: 100%;
overflow:hidden;
display: none;  
height: auto;
 z-index: 1000;
background-color: rgba(0,2,10,0.6); padding: 0 0 20px 0;
 }

#navigacija, #valodas {float: none; display:block; width: 100%; line-height: 40px}
#navigacija ul, #valodas ul {list-style-type:none; padding: 0}
#navigacija li, #valodas li {margin:0; padding:0;  display:block; width: 100% !important;}
#navigacija a, #valodas a {text-decoration:none; display:block; text-transform: uppercase; margin:0; color: #fff;  line-height: 40px; padding:0; height: 40px}
#navigacija a:hover, #valodas a:hover {text-decoration:none; color: #fff; background-color: rgba(0,2,10,0.6);}

#navigacija a {padding:0 30px; width: 100% !important;}
#navigacija li.active a { color: #b3b3b3}

#valodas a {padding:0 10px; text-align: right; width: 90% !important;}
#valodas li.last a {padding-right: 10px}
#valodas li.active {display: none;}


.menu_button {display: block; position: absolute; top:0; right:0;  height:96px; width: 96px;z-index:9999}
.menbut {background: rgba(0,2,10,0.6) url("img/nav-icon-wh.png") no-repeat 50% 50%; height:96px; width: 96px; padding: 0; text-indent: -9999px;display: block;}


/* PROJEKTU APRAKSTI */

.kr-kolona {width: 90%; padding: 20px 20px 0 20px}
.la-kolona {width: 90%; padding: 0 20px}


}



@media (max-width: 400px) {
#navigacijaMOB {display:none}
}






/*  DARBU IZLASE */
#cycle-loader {
				height:32px;
				left:50%;
				margin:-8px 0 0 -8px;
				position:absolute;
				top:50%;
				width:32px;
				z-index:999;
			}
			
#maximage {display:none;/* Only use this if you fade it in again after the images load */
			position:fixed !important;
			}
#maximage a {display:block; width:100%; height:100%; text-decoration:none; margin-top:85px;
			}
			
	
.in-slide-content { 
				margin:0;
				padding:0;
				position:absolute;
				bottom:50px;
				width:100%;
				z-index:9999; /* Show above .gradient */
				-webkit-font-smoothing:antialiased;
				text-align: center;
			}

.in-slide-content h2 { 
				color:#fff;
				font-size:67px;
				line-height:67px;
				font-weight:600;
	text-transform: uppercase;
	margin:0;
	padding:0 20px;
				text-shadow: 1px 1px 0 #000;
			}

.in-slide-content p { 
				font-size:33px;
				font-weight:300;
				text-shadow: 0.5px 1px 0 #000;
				color:#fff;
	text-transform: uppercase;
				padding:20px;
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 800px) 
{

header {width: 100%; margin: 0; padding: 0 10px;
	background-color: #fff;
}

.in-slide-content {margin:0; padding:0; bottom:10px;}
.in-slide-content h2 { font-size:30px; line-height:35px; text-shadow: 1px 1px 0 #000; padding:0 10px; }
.in-slide-content p { font-size:25px; font-weight:300; text-shadow: 0px 0px 0 #000; }

}



ul.projekti, ul.vacini {
overflow: hidden;
line-height: 0px;
font-size: 0px;
padding: 0px;
margin: 0px;
background: none repeat scroll 0% 0% transparent;
list-style: none outside none;
width: auto;}


.proj_vaks {position: relative; width:25%; float:left; margin:0 !important; padding:0 !important;background: #18191f;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
.proj_vaks img {position: relative;
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin: 0; padding:0;
}
.proj_vaks h4 {display: none;  width:94%; position: absolute; bottom:0; padding: 3%; background: transparent url(img/bg50.png) repeat 0 0; z-index:50;
line-height:25px; text-transform: uppercase; font-size: 20px; text-align:center;}

.proj_vaks:hover h4 {display: block;}

.proj_vaks a {display: block; width: 100%; height:10%; color:#fff; margin:0; padding:0; text-decoration: none}

@media (max-width: 1200px) {
.proj_vaks {width:25%;}
}
@media (max-width: 1024px) {
.proj_vaks {width:33.3%;}
}
@media (max-width: 768px) {
.proj_vaks {width:50%;}
}
@media (max-width: 400px) {
.proj_vaks {width:100%;}
.proj_vaks h4 {display: block;}
}




/* PRESE */

ul.projekti, ul.vacini {		position: absolute;
				top: 0;
				left: 0;
 z-index: 100}
.prese {position: relative; width:14.28%; float:left; margin:0 !important; padding:0 !important;background: #18191f;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
.prese img {position: relative;
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin: 0; padding:0;
}
.prese h4 {display: none;  width:90%; position: absolute; bottom:0; padding: 5%; background: transparent url(img/bg50.png) repeat 0 0; z-index:50;
line-height:20px; text-transform: uppercase; font-size: 20px; color:#fff; text-align:center }

.prese:hover h4 {display: block;}

@media (max-width: 1200px) {
.prese {width:16.66%;}
}
@media (max-width: 1024px) {
.prese {width:20%;}
}
@media (max-width: 768px) {
.prese {width:33.3%;}
}
@media (max-width: 400px) {
.prese {width:50%;}
.prese h4 {display: block;}
}
@media (max-width: 320px) {
.prese {width:100%;}
.prese h4 {display: block;}
}



/* PAR MUMS */

.adrese {text-align: center; }
.h280 {height: 280px; background: #f2f2f2;} /* KARTE */

.kolona-440 {width: 440px}
.kolona-350 {width: 350px}

img.bg {
/* Set rules to fill background */
min-height: 100%;  min-width: 1200px;
/* Set up proportionate scaling */
width: 100%; height: auto;
/* Set up positioning */
position: fixed;
top: 0;
right: 0;
z-index: -1;
}


.bg-dark {
	background-color: rgba(0,2,10,0.6); 
	color: #fff;}

.bg-light {
	background-color: rgba(255,255,255,0.85); 
	color: #000;}

.bg-light a {
	color: #000;}


/*  DARBU IZLASE */





/* PROJEKTU SLAIDERIS */

#wrapper {
				background-color: #18191f;
				width: 100%;
				height: 600px;
				margin: 95px 0 0 0;
				padding: 0;
				overflow: hidden;
				position: relative;
				top: 0;
				left: 0;
			}
			#carousel2 img {
				display: block;
				float: left;
				margin: 0;
				padding: 0
			}
			#prev, #next {
				/*background-color: rgba(255, 255, 255, 0.7);*/
				display: block;
				height: 600px;
				width: 50%;
				top: 0;
				position: absolute;
			}
			#prev:hover, #next:hover {
				background-color: #fff;
				background-color: rgba(255, 255, 255, 0.5);
			}
			#prev {
				left: -600px;
			}
			#next {
				right: -600px;
			}
			#pager {
				margin-left: -410px;
				position: absolute;
				left: 50%;
				bottom: 10px;
			}
			#pager a {
				border: 2px solid #fff;
				border-radius: 10px;
				display: inline-block;
				width: 10px;
				height: 10px;
				margin: 0 5px 0 0;
			}
			#pager a:hover {
				background-color: rgba(255, 255, 255, 0.5);
			}
			#pager a span {
				display: none;
			}
			#pager a.selected {
				background-color: #fff;
			}