/******************************* RESET *******************************/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video 
{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
html {overflow-y: scroll;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
ins {background-color:#ff9; color:#000; text-decoration:none;}
mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}
table {border-collapse:collapse; border-spacing:0;}
hr {display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select {vertical-align:middle;}



/******************************* CSS3 FANCY EFFECTS *******************************/


@font-face {
    font-family: 'OpenSans-Light';
    src: url('https://www.lanit.si/fonts/OpenSans-Light.ttf');
    src: url('https://www.lanit.si/fonts/OpenSans') format('embedded-opentype'),
         url('https://www.lanit.si/fonts/OpenSans-Light.ttf') format('truetype'),
    font-weight: light;
    font-style: light;
}

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('https://www.lanit.si/fonts/OpenSans-Regular.ttf');
    src: url('https://www.lanit.si/fonts/OpenSans') format('embedded-opentype'),
         url('https://www.lanit.si/fonts/OpenSans-Regular.ttf') format('truetype'),
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans-Semibold';
    src: url('https://www.lanit.si/fonts/OpenSans-Semibold.ttf');
    src: url('https://www.lanit.si/fonts/OpenSans-Semibold.ttf') format('embedded-opentype'),
    url('https://www.lanit.si/fonts/OpenSans-Semibold.ttf') format('truetype'),
    font-weight: semibold;
    font-style: semibold;
}

@font-face {
    font-family: 'OpenSans-Bold';
    src: url('https://www.lanit.si/fonts/OpenSans-Bold.ttf');
    src: url('https://www.lanit.si/fonts/OpenSans-Bold.ttf') format('embedded-opentype'),
         url('https://www.lanit.si/fonts/OpenSans-Bold.ttf') format('truetype'),
    font-weight: bold;
    font-style: bold;
}

::selection      {background: #b44dce;color:#fff;}
::-moz-selection {background:#b44dce;color:#fff;}

.roundy {-webkit-border-radius:0 0 14px 14px; -moz-border-radius: 0 0 14px 14px; border-radius: 0 0 14px 14px;}

.botleftroundy {-webkit-border-radius:0 0 0 14px; -moz-border-radius: 0 0 0 14px; border-radius: 0 0 0 14px;}

a {  
  outline:none;
 -webkit-transition: color .25s ease-out, text-shadow .25s ease-out;
  -moz-transition: color .25s ease-out, text-shadow .25s ease-out;
  -o-transition: color .25s ease-out, text-shadow .25s ease-out;
  transition: color .25s ease-out, text-shadow .25s ease-out;
}  



/******************************* INDEX, HEADER, FOOTER *******************************/

html {overflow-y:scroll;}

body {
    line-height:18px;
	font-family: 'OpenSans-Regular', Arial, sans-serif;
	color:#3c3c3c;
	font-size:14px;
	background: url(../images/bg.jpg);
}

.wrap {width:960px; margin:0 auto; position:relative;}
header {height:81px; float:left; width:960px; position:relative;}
header h1, header h2 { background: url(../images/stil-sentvid.jpg) no-repeat;left:0; top:0px; width:172px; height:141px; text-indent:-5000px; position:absolute; }
header div {font-family:  'Open Sans', Arial, sans-serif; height:12px; text-align:right; right:0; top:8px; font-size:13px; padding:4px 0 0 0; text-align:center; color:#fff;  position:absolute;}
header div a {  color:#8fc7f6; font-weight:normal;text-decoration:none;}
header div a:hover {text-decoration:none; color:#fff; }
header div a.active {text-decoration:underline;}

a.logo {float:left;}

nav {right:0; bottom:10px; position:absolute;}
nav ul { list-style:none; padding:0 0 0 0; text-align:right;}
nav ul li {padding:0; background:none; display:inline;}
nav ul li a { color:#ffffff; text-decoration:none; padding:0; }
nav ul li a.active { color:#ffde00; text-decoration:none; text-shadow: none; }
nav ul li a:hover { color:#ffde00;text-shadow: none;}
nav ul li.last { background:none;}

footer {  float:left; margin-top:10px; padding:5px 0 20px 0; width:960px; font-size:12px;}
footer p.left { color:#828282; width:450px; float:left; font-size:12px;}
footer p.right { float:right;}
footer p.right img { float:left; margin:0px 0 0 10px;}
footer a { color:#828282;text-decoration:none; float:left;}
footer a:hover { text-decoration:underline;}

.mainmenu {position:absolute; top:89px; right:0px; background:#b44dce;}
.mainmenu ul {padding:0px 24px; margin: 0px; text-align: left;  background:#b44dce; line-height:52px;-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;}
.mainmenu a.first {}
.mainmenu li a {padding:0 17px; font-size:15px;}
.mainmenu li.first {}
.mainmenu nav ul {text-align: left;}

/******************************* BODY OZADJA za INDEX in SUB *******************************/

#bgindex { background: url(../images/stricteta.jpg) bottom center no-repeat; min-height:500px;}
#bgsub { background:#06F; min-height:500px;}

/******************************* INDEX MIDDLE *******************************/

#middle { border:1px solid #c8c8c8; margin-top:30px; float:left; width:958px; position:relative;  height:342px; background:#ccc; }
#middle a { color:#b44dce;}
#middle a:hover { color:#000; text-decoration:underline;}

.tekst h1 { font-weight:700; font-size:42px; padding-bottom:5px; color: #b44dce; line-height:42px; font-style:italic;}
.tekst { left:0; bottom:0; width:419px; height: 302px; padding:30px 40px 10px 30px; z-index:24; background: url(../images/senca.jpg) right top no-repeat #fff; position:absolute; font-size:16px; line-height:24px;}

.image { height:342px; position:absolute; top:0; margin-left:489px;}
.image img { height:342px; width: 469px !important; float:right;}

#boksi { float:left; width:960px; margin-top:20px; font-size:13px;}

.logotipi { float:left; border:1px solid #bbbbbb; color:#3c3c3c; background:#ffffff; padding:15px 10px 5px 10px; width:940px; margin:0 0 20px 0; display:inline; min-height:50px; text-align:center;}
.logotipi img {
	margin:0 0 -15px 0;
}

.box { float:left; border:1px solid #bbbbbb; color:#3c3c3c; background:#ffffff; padding:0; width:468px; margin:20px 20px 20px 0; display:inline; min-height:270px; background: url(../images/zemljevid.jpg) right top no-repeat #fff;;}

.last { margin-right:0; background:#fff;}

.box div { float:left; padding:5px 15px 5px 15px;}

#boksi h3 { font-weight:bold; padding:15px 15px 15px 55px; margin-top:-12px; color:#fff; background: #b44dce;-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
font-size:22px; font-weight:normal; font-style:italic;}

#boksi a {color:#b44dce; text-decoration:underline;}

#boksi a:hover {color:#b44dce;}

.last a {color:#b44dce!important;}

.last a:hover {color:#000 !important;}

#boksi .box h3 {
	background: url(../images/kontakt.jpg) 16px center no-repeat #b44dce;
}
#boksi .last h3 {
	background: url(../images/stranke.jpg) 13px center no-repeat #b44dce;
}



/******************************* SUB MIDDLE *******************************/

#submiddle {float:left; width:960px;background:#ffffff;margin-top:40px; margin-bottom:20px;}
#submiddle h1.title {font-family:'Times New Roman', serif; font-weight:normal; padding:26px 40px 26px 40px; background:#ffde00; color:#000; float:left; width:880px;-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px; margin-top:-12px; font-size:25px; font-style:italic;}


.subimage {width:946px; height:190px; float:left;border:7px solid #ffffff;}
.subimage img {width:946px; height:190px;}

.stasaimage {width:946px; height:350px; float:left;border:7px solid #33322B;}
.stasaimage img {width:946px; height:350px;}

#left { float:left; padding:25px 5px 20px 20px; width:175px; font-size:13px; line-height:18px;}

#left ul { padding:0 0 0 0;font-size:15px;}

#left ul li { padding:0 0 0 0; background:none; float:left; margin:2px 0;}

#left ul li a { background:url(../images/ulli.gif) left 9px no-repeat; text-decoration:none; color:#000; float:left; padding:4px 10px 4px 18px;}

#left ul li a:hover { color:#8fc7f6;}

#left ul li a.active { background:#000; color:#ccc;}

#left h3 { border-bottom:1px dotted #33322B; margin-bottom:10px; padding-bottom:10px;}

#left a {color:#b44dce;}

#left a:hover { color:#000; }

#content { float:left;padding:0 30px 30px 30px; line-height:20px; width:880px; margin:20px 10px; display:inline; min-height:500px; }

#content a { color:#b44dce;}

#content a:hover { color:#999}

#content h1 { padding-bottom:10px;}

#content ul li { padding-bottom:6px;}

#content h3 {font-size:20px;padding-bottom:5px; padding-top:20px;}

/******************************* COMMON STYLES *******************************/

h1 {font-size:20px;}

h2 {font-size:18px; padding: 8px 0 8px 0;}

h3 { font-size:16px; font-weight:normal;}

p { padding:8px 0;}

ul { list-style:none; padding:0 0 0 0;}
ul li { padding:0 0 3px 16px; background:url(../images/ulli.gif) left 5px no-repeat;}

.alterfontlight {font-family:  'OpenSans-Light', Arial, sans-serif; font-weight:normal;}
.alterfontregular {font-family:   'OpenSans-Regular', Arial, sans-serif; font-weight:normal;}
.alterfontbold {font-family:  'OpenSans-Semibold', Arial, sans-serif; font-weight:normal;}
.alterfontbook {font-family:   'OpenSans-Bold', Arial, sans-serif; font-weight:normal;}

.scrollable {
    /* required settings */
    position:relative;
    overflow:hidden;
    width: 830px;
    height:110px;   
	margin-top:20px;
}

.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}

.items div {
    float:left;
    width:880px;
}

/* single scrollable item */
.scrollable img {
    float:left;
    margin:0 8px 0 8px;
	width:150px;
}

/* active item */
.scrollable .active {
    position:relative;
    cursor:default;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */

a.browse {
    display:block;
    width:25px;
    height:60px;
    float:left;
    margin:0px;
    cursor:pointer;
    font-size:1px;
}

/* right */

a.right { clear:right; margin-right: 0px; margin-top:45px;}
a.right:hover {  }
a.right:active { }

/* left */

a.left { margin-left: 0px; margin-top:50px; }
a.left:hover  {  }
a.left:active { }

/* disabled navigational button 

a.disabled {
    visibility:hidden !important;

}*/

/* clearfix za content */



.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

/* End hide from IE-mac */


#headerbg {
	background:#fff;
	height:141px;
}
h1, h2, h3, h4 {
	font-family:'Times New Roman', serif;
}

.title-header {padding:25px 0 0 0; font-family:'Times New Roman', serif; color:#8a8a8a; font-size:40px; font-style:italic;}

.burger {display: none;}
.contact {float:right; margin:20px 0 30px 20px;}

.gal {position: relative; padding: 0 37px;}
.swiper-button-prev:after, .swiper-button-next:after {display: none;}
.swiper-button-prev {left: 0 !important;}
.swiper-button-next {right: 0 !important;}
.swiper-slide {text-align: center;}

#cookie-box {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/******************************* RESPONSIVE *******************************/
@media (min-width: 1001px) {
	.mainmenu ul {display: block !important;}
}

@media (max-width: 1000px) {
	.wrap, #boksi, #middle, header, footer {width: 100%;}
	#headerbg{padding: 0 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	.title-header  {font-size: 30px;}
	
	.mainmenu {width: 100%; left: -15px;}
	.mainmenu ul {display: none; position: absolute; padding: 15px; left: 0; width: 100%; top: 53px; border-radius: 0; z-index: 100;}
	nav ul li {display: inline-block; width: 100%; border-bottom: 1px rgba(255,255,255,0.2) solid;}
	nav ul li:last-child {border-bottom: 0;}
	nav.mainmenu ul li a {font-size: 20px;}
	
	.burger {display: block; float: right; width: 30px;}
	.burger span {width: 100%; display: inline-block; float: left; height: 3px; background: #b44dce; margin: 4px 0;}
	
	#middle {overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	.image {margin-left: 50%;}
	.tekst {width: 50%;}
	.tekst h1 {font-size: 36px;}
	
	.box {width: 49%; margin-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	.box.last {float: right;}
	.box > div {background: #FFF;}
	
	.logotipi {width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 15px 10px;}
	.logotipi img {margin: 0;}
	.logotipi strong {position: relative; top: -15px;}
	
	footer {padding: 0 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	footer p.left {width: 50%;}
	
	#submiddle, #submiddle h1.title {width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	#submiddle h1.title {font-size: 22px;}
	#content {width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding-top: 20px;}
	
	iframe {width: 100%;}
}

@media (max-width: 800px) {
	.box {width: 100%;}
}

@media (max-width: 768px) {
	.title-header {font-size: 22px;}
	#middle {height: auto;}
	.image {position: relative; margin: 0; width: 100%;}
	.image img {width: 100% !important; height: auto !important;}
	.tekst {position: relative; width: 100%; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #FFF; padding: 20px;}
	.tekst h1 {font-size: 28px; line-height: 34px;}
	.contact {width: 100%; margin: 0 0 40px 0;}
	.contact table tr td div, .contact table tr td input.polje, .contact table tr td textarea.tpolje {width: 100%;}
	#submiddle h1.title {padding: 20px 25px;}
	.cboxPhoto {width: 300px !important; height: auto !important;}
	#cboxCurrent {display: none !important;}
}

@media (max-width: 500px) {
	.image {height: 250px;}
	.image img {width: 500px !important; height: auto !important;}
	.title-header {display: none;}
	header h1, header h2 {height: 100px; background-size: auto 117px;}
	#headerbg {height: 118px;}
	.burger {position: relative; top: -76px;}
	.mainmenu {top: 117px;}
	.mainmenu ul {top: 0;}
}

@media (max-width: 480px) {
	#boksi .box:first-child {background-size: 100%; background-position: 0 -65px;}
	#boksi .box:first-child div {width: 100%; margin-top: 200px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
}

@media (max-width: 469px) {
	.image img {width: 469px !important; height: auto !important;}
}

@media (max-width: 455px) {
	.logotipi strong {top: 0; display: inline-block; padding-bottom: 15px;}
	.cboxPhoto {width: 250px !important; height: auto !important;}
}