html {
box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: inherit;
}

body {
margin: 0;
padding: 0;
font: normal 16px/normal 'Source Sans Pro', sans-serif;
color: #000;
background-color: #fff;
}
main {
min-height: calc(100vh - 100px);
}
.wrap {
}
.lining {
max-width: 1230px;
padding: 0 40px;
margin: 0 auto;
}

.lining::after,
.blog_border::after,
#navi::after {
content: " ";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

a {
color: #c00;
text-decoration: none;
outline: none;
}
a:hover {
color: #000;
}

img {
display: block;
border: none;
}
#head {
padding: 30px 0;
}
#head h1 {
display: inline-block;
margin: 20px 0 0;
font: 300 50px/normal 'Source Sans Pro', sans-serif;
white-space: nowrap;
}
#head h1 a {
color: #666;
}
#head h1 a:hover {
color: #c00;
}
.home #head h1 {
margin: 40px 0 20px;
}
.home #head h1 a {
color: #000;
}

/*#langnav {
float: right;
height: 100px;
}
#langnav a {
display: inline-block;
width: 40px;
height: 40px;
margin: 35px 0 25px 10px;
font: 400 18px/40px 'Source Sans Pro', sans-serif;
color: #000;
text-align: center;
background-color: #dadada;
border-radius: 3px;
}
#langnav a:hover {
color: #fff;
background-color: #c00;
}
#langnav a.active {
color: #fff;
background-color: #999;
}
#langnav a.active:hover {
background-color: #999;
}
*/

#footer {
height: 70px;
font-size: 14px;
line-height: 70px;
background-color: #dadada;
}
#footer .lining {
margin-top: 30px;
}





/*Home content */


.home .col {
float: left;
width: 30%;
margin-right: 5%;
}
.home #content .col:last-child {
margin-right: 0;
}

.item {
padding: 0 0 15px 0;
margin-bottom: 20px;
color: #000;
background-color: #f4f4f4;
}
.item img {
width: 100%;
}
.item h3 {
margin: 0 0 12px;
padding: 15px;
font: 600 20px/normal 'Source Sans Pro', sans-serif;
text-transform: uppercase;
border-bottom: 1px dotted #999;
padding-bottom: 10px;
}
.item a {
display: block;
padding: 5px 15px;
color: #000;
}
.item a:hover {
color: #C00;
}











/***** main navigation *******/

#top {
background-color: #dadada;
}
#navi {
border-left: 1px solid #f4f4f4;
border-right: 1px solid #f4f4f4;
}
#navmain {
display: flex;
flex-flow: row nowrap;
}
#navmain div {
flex: 1 1 10%;
}
.navitem a {
display: block;
padding: 15px 20px;
font-weight: 700;
line-height: 22px;
text-align: center;
text-transform: uppercase;
color: #000;
white-space: nowrap;
border-left: 1px solid #dadada;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
#navmain div:first-child a {
border-left: none;
}

#navi a:hover {
color: #fff;
background-color: #444;
}
 .navitem.active a {
color: #fff;
background-color: #444;
}

#navmainswitch {
display: none;
padding: 15px 20px 15px 43px;
font-weight: 700;
line-height: 22px;
color: #000;
background: transparent url(../img/menu2.png) no-repeat 20px center;
border-bottom: 1px solid #fff;
text-transform: uppercase;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
#navmainswitch:hover,
#navmainswitch:active {
background: transparent url(../img/menu3.png) no-repeat 20px center;
}


/***** end main navigation *******/

a.trig, .subnav a.trig {
display: block;
padding: 0 0 0 23px;
white-space: nowrap;
background: transparent url(../img/menu2.png) no-repeat left center;
color: #000;
}
a.trig:hover, .subnav a.trig:hover {
color: #c00;
}
a.trigger-textbox {
background: transparent url(../img/menu2.png) no-repeat left center;
}

a.trig.trigger-subnav.close,
a.trig.trigger-textbox.close {
background: url(../img/menu4.png) no-repeat left center;
}




.subnav .active a {
color: #999;
}
.subnav .active a:before {
content: "• ";
}
.subnav a {
display: inline-block;
padding: 5px 0 5px 23px;
font-size: 17px;
color: #000;
background-color: transparent;
}
.subnav a:hover {
color: #c00;
}

/******* podrubrike *******/

.toggle-subnav {
display: none;
padding-top: 15px;
}

.blog_body {
padding-bottom: 2px;
background-color: #f4f4f4;
}
.blog_border {
max-width: 1152px;
margin: 0 auto -4px;
border-left: 2px solid #fff;
}
.blog_display {
display: flex;
flex-flow: row wrap;
}

#navmain div {
}

.imageset {
flex: 0 1 20%;
min-width: 150px;
background-color: #dadada;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imageset:hover {
background-color: #444;
}
.innerheight {
padding: 15%;
}
.imageset img {
width: 100%;
border: 1px solid #f4f4f4;
}
.imageset:hover img {
border: 1px solid #fff;
}




figcaption {
display: none;
/*position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
padding: 30px;
text-align: center;
font-size: 14px;
line-height: normal;
color: #fff;
background-color: #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.imageset:hover figcaption {
display: block;
height: 50%;
background-color: rgba(0, 0, 0, 0.50);*/
}

.pagehead {
position: relative;
padding: 20px 0;
border-top: 1px dotted #ccc;
}
.about .pagehead {
padding: 5px 0;
}
#head h2 {
font-size: 24px;
line-height: normal;
margin: 15px 0 0;
}

/**** articles pagination ****/


.pagination {
padding-top: 25px;
margin-bottom: 15px;
}

.pagination ul {
list-style: none;
margin: 0;
padding: 0;
}

.pagination ul li, .pagination-list li {
display: inline-block;
}
.pagination a {
display: block;
}
.pagination a {
font-size: 30px;
color: #000;
}
.pagination a:hover {
color: #c00;
}
.pagination a:before {
content: "/";
padding: 0 10px;
color: #999;
}
.pagination li:first-child a:before {
display: none;
}

.pagination li.disabled, .pagination-list li.disabled {
display: none;
}
.pagination li.active a, .pagination-list li.active a {
color: #999;
background-color: transparent;
}


/*end articles pagination*/


/**** page navigation ****/

/*.pager.pagenav {
margin-top: 40px;
padding-top: 15px;
border-top: 1px dotted #00529c;
}
.pager.pagenav div {
float: left;
}
.pager.pagenav div:first-child {
margin-right: 20px;
}

.next a, .previous a {
display: inline-block;
width: 34px;
height: 34px;
}
.previous a {
background: #00529c url(../img/pagenav_prev.png) no-repeat left bottom;
}
.next a {
background: #00529c url(../img/pagenav_next.png) no-repeat right bottom;
}
.next a:hover, .previous a:hover {
background-color: #666;
}
*/
/*end page navigation*/


/******* to top *******/
.fixed {
display: none;
height: 40px;
width: 40px;
position: fixed;
bottom: 0;
right: 0;
z-index: 40;
}
.fixed a {
display: block;
float: left;
width: 40px;
height: 40px;
line-height: 20px;
}

#to_top {
background: url(../img/ico_top1.png) no-repeat center center;
}
#to_top:hover {
background: url(../img/ico_top.png) no-repeat center center;
}
/******* end to top *******/

.about {
display: flex;
flex-flow: row wrap;
}
.textcol {
flex: 1 1 50%;
/* flex-grow | flex-shrink | flex-basis */
padding-top: 20px;
border-top: 1px dotted #999;
}
.textcol.left {
padding-right: 30px;
}
.textcol.right {
padding-left: 30px;
}

/*uvodni tekst*/

.toggle-textbox {
display: none;
}

img.squeeze {
width: 100%;
}

h2 {
font-size: 24px;
line-height: normal;
font-weight: 600;
margin: 19px 0;
}
h3 {
font-size: 18px;
line-height: normal;
font-weight: 600;
margin: 0;
}
ul {
margin-top: 10px;
margin-bottom: 10px;
}

.catintro {
margin-top: 22px;
padding-bottom: 20px;
border-bottom: 1px dotted #ccc;
}

.text {
margin: 20px 0 0;
line-height: 140%;
-webkit-perspective:1;
-webkit-columns: 2 300px;
-moz-columns: 2 300px;
columns: 2 300px;
-webkit-column-gap: 4em;
-moz-column-gap: 4em;
column-gap: 4em;
orphans: 2;
widows: 2;
}
.text p, .text_single p {
margin: 0 0 15px;
}
.text_single {
margin: 20px 0 0;
line-height: 140%;
}


/**** video ****/

.video iframe, .video object {
display: block;
margin: auto;
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
margin-bottom: 20px;
}
.video .videoWrapper iframe,
.video .videoWrapper object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


#announcement {
position: relative;
color: #fff;
font-size: 18px;
background: url(../img/trans_blk60.png);
min-height: 175px;
}
.illu {
width: 100%;
}
.desc {
position: absolute;
left: 0;
bottom: 0;
background: url(../img/trans_blk60.png);
}
.desc h3 {
padding: 20px 20px 0;
font-size: 20px;
}
.desc p {
margin: 10px 0 0 0;
padding: 0 20px 20px 20px;
}


.catnav {
padding-bottom: 20px;
margin-top: 40px;
}
.catnav a {
display: inline-block;
color: #000;
}
.catnav a:hover {
color: #c00;
}
.catnav a.prev {
margin-right: 30px;
padding-left: 23px;
background: url(../img/arr_left.png) no-repeat left center;
}
.catnav a.next {
padding-right: 23px;
background: url(../img/arr_right.png) no-repeat right center;
}







/******  media queries  *****/


@media all 
and (max-width : 1024px)
{

#top .lining {
padding: 0;
}
#navi {
border: none;
}
.navitem a {
padding: 15px 22px;
}
.lining {
padding: 0 20px;
}
#head h1 {
margin: 0;
}
.home #head h1 {
margin: 20px 0 10px;
}
.textcol.left {
padding-right: 20px;
}
.textcol.right {
padding-left: 20px;
}

}


@media all 
and (max-width : 1023px)
{

#navmainswitch {
display: block;
}
#navmain {
display: none;
}
.navitem a {
text-align: left;
border-left: none;
border-bottom: 1px solid #999;
}
.imageset {
flex: 0 1 25%;
}
#to_top {
background: rgba(255, 255, 255, 0.65) url(../img/ico_top1.png) no-repeat center center;
}
#to_top:hover {
background: rgba(255, 255, 255, 0.65) url(../img/ico_top.png) no-repeat center center;
}

}


@media all 
and (max-width : 767px)
{

.home .col {
float: left;
width: 32%;
margin-right: 2%;
}
.textcol {
flex: 1 0 100%;
/* flex-grow | flex-shrink | flex-basis */
padding-top: 20px;
border-top: 1px dotted #999;
}

.textcol.left,
.textcol.right {
padding-left: 0;
padding-right: 0;
}
.textcol.right {
border: none;
padding-top: 0;
}
.imageset {
flex: 0 1 33.33%;
}


}



@media all 
and (max-width : 600px)
{

.home .col {
float: none;
width: 100%;
margin-right: 0;
}


}


@media all 
and (max-width : 480px)
{

.imageset {
flex: 0 0 50%;
}

}


@media all 
and (max-width : 479px)
{

#head h1 {
margin: 0;
font-size: 42px;
}
.home #head h1 {
margin: 0;
}
h2, #head h2 {
font-size: 22px;
}
.textcol.left {
padding-top: 0;
}
.catnav a {
display: block;
}
.catnav a.prev {
margin-right: 0;
margin-bottom: 10px;
background: url(../img/arr_left.png) no-repeat left center;
}
.catnav a.next {
padding-right: 0;
padding-left: 23px;
background: url(../img/arr_right.png) no-repeat left center;
}

}

@media all 
and (max-width : 374px)
{

#footer {
font-size: 12px;
}

}