@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=latin-ext');

:root {
	--color-blue: rgb(82, 102, 176);
	--color-blue2: #5266b0;
	--color-blue3: rgb(123, 139, 195);
	--color-green: rgb(183, 217, 105);
	--color-purple: rgb(244, 124, 129);
	--color-gray: rgb(246, 245, 245);
	--color-gray2: #555;
	--color-gray3: #f0efee;
	--color-gray4: #eee;
	--color-gray5: #4d4d4d;
	--color-green1: #a1cd3a;
	--color-red: #f05359;
	--color-text: #000;
	--color-black: #000;
	--color-white: #fff;
	--color-bright: #fff;
	--color-background: #fff;
}

BODY {
	padding:0;
	margin:0;
	margin:0 auto;
	font-family: 'Roboto', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size:16px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #222;
  font-weight:300;
}

::-moz-placeholder { /* Firefox 19+ */
  color: #222;
  font-weight:300;
}

:-ms-input-placeholder { /* IE 10+ */
  color: #222;
  font-weight:300;
}

:-moz-placeholder { /* Firefox 18- */
  color: #222;
  font-weight:300;
}

.fixed {

}

#main a {
	color: var(--color-blue);
}

#main a:visited {
	color: var(--color-blue);
}



#header {
	position:relative;
	z-index:1;
}

#header .headline {
	position:absolute;
	bottom:50px;
	color:var(--color-white);
}

#header .headline h3 {
	font-weight:700;
	font-size:160%;
	line-height:190%;
	letter-spacing: 1px;
	text-transform: uppercase;
}

#header .headline h1 {
	font-weight:100;
	font-size:625%;
	line-height:105px;
	max-width:1000px;
}


#main {
	position:relative;
	margin-top:-30px;
	z-index:10;
	font-size:100% !important;
	font-weight:300;
}

#main li {
	font-size:100%;
}

#main h2 {
	font-size:280%;
	font-weight:500;
}

#main h3 {
	font-size:125%;
	font-weight:900;
	text-transform: uppercase;
	letter-spacing: 0px;
}


#main h4 {
	font-size:100%;
	font-weight:700;
	letter-spacing: 1px;
}

.sbText {
	font-size:100%;
	font-weight:900;
	letter-spacing: 1px;
	color:#111;
}

.sbText:hover {
	text-decoration: none;
	color: var(--color-blue);
}

.content-gallery {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
	align-content: flex-start;

}

.content-gallery-item {
	align-self: center;
	max-width:30%;
}

.content-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding-bottom:10px;
}

#main h6 {
	display:block;
	background: var(--color-blue);
	padding:15px;
	color:var(--color-white) !important;
	font-size:100%;
	font-weight:300px;
}

#main h6:before {
	content: "\f0c6";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: var(--color-white);
    font-size: 112%;
    padding-right: 0.5em;
}

#main h6 a {
	color:var(--color-white) !important;
	font-size:100%;
	font-weight:500;
}

#main p {
	font-size:100%;
	font-weight:300;
}

.top-image {
	outline: dotted 5px #f00;
}

#top-image {
	width:100%;
	max-height:45vh;
	overflow:hidden;
}

@media only screen and (max-width: 800px) {

	#top-image {
		height:480px;
	}
	
	.flexslider .slides img {
		height:280px;
		width:auto;
	}
	
}

.sidebar {
}

.pt30 {
	padding-top:60px;
}

.top-menu {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	margin:0 auto;
}

.box {
	display:block;
	width:100%;
	padding:20px 10px 0px 10px;
	font-size:100%;
	text-align:center;
	min-height:250px;
}

.boxB {
	display:block;
	width:100%;
	padding:20px;
	font-size:140%;
	text-align:center;
}

.boxB > h3 {
	font-size:90% !important;
}

.fs25 {
	font-size:156%;
}

.box2 {
	display:block;
	width:100%;
	padding:20px;
	font-size:100%;
	text-align:center;
	margin-bottom:4px;
}

.blackTXT {
	color:var(--color-black) !important;
}

.active {
	background: var(--color-blue) !important;
	color:var(--color-white) !important;
}


.boxTxt {
	text-decoration: none !important;
}

.box-sb {
	display:block;
	width:100%;
	font-weight:600;
	font-size:100%;
	padding-top:20px;
	padding-bottom:20px;
	text-align:center;
}

.sb-dogodek {
	font-size:100%;
	display:block;
	margin-bottom:40px;
}

.sb-dogodek h3 {
	font-size:110%;
	font-weight:600;
}

.datum-dogodek {
	padding:10px;
	font-size:93%
}

.green:hover {
	background: var(--color-green);
}

.blue:hover {
	background: var(--color-blue3);
}

.red:hover {
	background: var(--color-purple);
	color:var(--color-white);
}

.gray:hover {
	background: var(--color-gray);
}

.box h3 {
	font-size:120%;
	font-weight:900;
	text-transform: uppercase;
	letter-spacing: 0px;
}

.box h4 {
	font-weight:500;
}

.box h5 {
	font-weight:400;
}

.box h6 {
	font-weight:300;
}


.blue {
	background:var(--color-blue2);
	color:var(--color-white);
	 -webkit-transition: 0.6s; /* Safari */
    transition: 0.6s;
}

.green {
	background:var(--color-green1);
	color:var(--color-white);
	 -webkit-transition: 0.6s; /* Safari */
    transition: 0.6s;
}

.boxBlack {
	color:var(--color-black) !important;
}

.boxBlack:hover {
	color:var(--color-black);
}



.red {
	background: var(--color-red);
	color:var(--color-white);
	 -webkit-transition: 0.6s; /* Safari */
    transition: 0.6s;
}

.darkgray {
	background: var(--color-gray2);
	color:var(--color-white);
}

.gray {
	background: var(--color-gray3);
}

.black {
	background:var(--color-black);
}

#novice {
	background:url(/gfx/crtica.png) center center repeat-x;
}

#novice span {
	background:var(--color-bright) !important;
	padding-right:10px;
	font-weight:100;
}


#footer-block {
	color:var(--color-white);
	font-weight:500;
	font-size:88%;
	background:var(--color-black) !important;
}

#footer-block strong {
	font-size:112%;
	font-weight:800;
}

.footer-info {
	color:#4d4d4d;
	display:block;
	margin-bottom:15px;
	margin-top:45px;
}

.footer-info a {
	color:#4d4d4d;
}

.footer-item-logo {
	align-self:flex-start !important;
}

.footer-item {
	padding-left:5px;
	padding-right:5px;
}

.footer-flex {
	display:flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items:center;
	align-content: center;
	flex-direction: row;
}

#footer-block img {
	max-height:180px;
}

#menu {
	display:flex;
	width:100%;
}

#menu .menu-item {
	background:var(--color-black);
}

	#main-menu {
		display:block;
	}

#main-menu {
	display:flex;
	justify-content:space-around;
	flex-direction: row;
	align-items: flex-end;
	align-content: flex-end;
	min-height:80px;
	list-style:none;
	margin:0;
	color:var(--color-white);
	width:100%;
}


.main-menu-item {
	font-size:100%;
	font-weight:400;
	display:block;
	height:30px;
	padding:5px;
	margin:0;
	text-transform: uppercase;
}

.main-menu-item:hover {
	color: var(--color-green) !important;
	text-decoration:none;
}

.main-menu-item:hover a:hover {
	text-decoration:none;
}


#main-menu .main-menu-item a {
	color:var(--color-white);
}

#main-menu .main-menu-item a:hover {
	color: var(--color-green);
}

.active_top a {
	color: var(--color-green) !important;
}


.w100 {
	width:100%;
}

.mt5 {
	margin-top:5px;
}
.mt10 {
	margin-top:10px;
}
.mr10 {
	margin-right:10px;
}

.noviceBox {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;

}

.novica-item {
	width:49%;
	padding:5px;
	padding-left:15px;
	padding-right:15px;
	margin-bottom:15px;
	padding-top:0;
	background:var(--color-gray4);
}

.datum {
	display:block;
    background:var(--color-blue2);
	color:var(--color-white);
	font-size:106%;
	font-weight:400;
	text-align:center;
	width:60px;
	height:75px;
}

.datum span {
	font-weight:900;
	font-size:168%;
	display:block;
	line-height:28px;
	padding-top:12px;
}

@media only screen and (max-width: 1000px) {

	#header .headline {
		bottom:50px;
	}
	
	#header .headline h3 {
		font-weight:700;
		font-size:93%;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	#header .headline h1 {
		font-weight:100;
		font-size:375%;
		max-width:1000px;
	}
}

.searchBox {
	display:none;
	float:left;
}

#searchField {
	width:100%;
	height:50px;
	background: var(--color-green);
	color:var(--color-black);
	font-weight: 300;
	border:0;
	padding-left:10px;
	font-size:112%;
}

.rightMenu {
	position:relative;
}

.menuIcon {
	position:absolute;
	z-index:1000;
	padding-top:10px;
	text-align:center;
	color:var(--color-white);
	width:100%;
	align-content: center;
	align-self: center;
	cursor:pointer;
	display:none;
}

.menuIcon:hover {
	color:var(--color-white);
}


#mobile-menu {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	height:100vh;
	width:100vw;
	background:var(--color-black);
	z-index:532222;
}

#mobile-menu ul {
	padding:0;
	margin:0;
	font-size:156%;
	color:var(--color-white);
	list-style:none;
	width:100vw;
	height:60%;
	display:flex;
	align-content: center;
	align-items: center;
	align-self: center;
	flex-direction:column;
	justify-content:center;
}

#mobile-menu ul li {
	line-height:45px;
}

#mobile-menu ul li a {
	color:#ddd;
	text-transform: uppercase;
}

#mobile-menu ul li a:hover {
	color: var(--color-green);
	text-decoration: none;
}

#footer-logo2 {
	display: none;
}

#footer-logo1 {
	display: block;
}


@media only screen and (max-width: 1200px) {

	.menuIcon {
		display: block;
	}

	#main-menu {
		display:none;
	}
}

.flex-direction-nav a.flex-disabled {
   display:none;
}

.flex-next, .flex-prev {
	display:none !important;
	visibility: hidden;
}

@media only screen and (max-width: 900px) {

	#footer-logo1 {
		display: none;
	}

	#footer-logo2 {
		display: block;
	}

.footer-item-logo {
	align-self:center !important;
}


	#main-menu {
		display:none;
	}
	
	.icon {
		font-size: 112%;
	}

	#header .headline {
		bottom:50px;
	}

	#header .headline h3 {
		font-weight:700;
		font-size:93%;
		letter-spacing: 1px;
		text-transform: uppercase;
	}

	#header .headline h1 {
		font-weight:100;
		font-size:250%;
		max-width:1000px;
	}

	.novica-item {
		width:100%;
		padding:5px;
		padding-left:15px;
		padding-right:15px;
		margin-bottom:15px;
		padding-top:0;
		background:var(--color-gray4);
	}

}

.mbr {
	display:none;
}

@media only screen and (max-width: 450px) {


	.mbr {
		clear:both;
		display:block;
	}

	.footer-item .logo {
		align-self:flex-start;
	}

	.footer-flex {
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
	}

	.footer-item:nth-child(1) {
		
	}

	.footer-item:nth-child(2) {
		order:3;
		-webkit-flex: 1 1 auto;
		clear:both;
	}

	.novica-item {
		padding-top:0;
	}

	#header .headline h3 {
		font-weight:700;
		font-size:94%;
		line-height:20px;
		letter-spacing: 1px;
		text-transform: uppercase;
		display:none;
	}

	#header .headline h1 {
		font-weight:300;
		font-size:156%;
		line-height:25px;
		max-width:auto;
	}
	
	#footer-block strong {
		padding-top:5px;
		font-size:100%;
		margin-top:10px;
		font-weight:600;
	}
	
	.footer-info {
		color:var(--color-gray5);
		display:block;
		margin-bottom:5px;
		margin-top:5px;
		font-size:81%;
	}
}

.indexGrid {
	display:grid;
	grid-template-columns: repeat(5, 12fr);
	grid-gap:.5rem;
}

.indexGrid > div {
	min-width:180px;	
}

@media only screen and (max-width: 1200px){
	.indexGrid {
		grid-template-columns: 3fr 3fr 3fr;
	}

}

@media only screen and (max-width: 720px){
	.indexGrid {
		grid-template-columns: 6fr 6fr;
	}
}

@media only screen and (max-width: 400px){
	.indexGrid {
		grid-template-columns: 12fr;
	}
}


.black {
	background: var(--color-black);
	color:var(--color-white);
	 -webkit-transition: 0.6s; /* Safari */
    transition: 0.6s;
}

.purple {
	background: #990099;
	color:var(--color-white);
	 -webkit-transition: 0.6s; /* Safari */
    transition: 0.6s;
}

#popup {
	display: none;
	z-index: 35000;
}

#popup .overlay {
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	background: rgba(50, 50, 50, .5);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 35001;
}

#popup a:hover {
}

#popup .window {
	background: var(--color-white);
	box-shadow: 1px 1px 5px #333;
	filter: blur(0);
	left: 50%;
	padding: 2rem;
	position: fixed;
	text-align: center;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	z-index: 35002
}

@media (max-width:768px) {
	#popup .window {
		width: 80%
	}
}

#popup .window .close {
	cursor: pointer;
	font-size: 20px;
	position: absolute;
	right: 10px;
	top: 0
}

#popup .window .close:hover {
	color: var(--color-red);
}

#popup .window h3 {
	color: var(--color-red);
	font-size: 150%;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 43px;
	margin-bottom: 43px;
	position: relative;
	text-align: center
}

#popup .window h3:after {
	background-color: var(--color-background);
	bottom: -36px;
	content: "";
	height: 1px;
	left: 50%;
	margin-left: -53px;
	position: absolute;
	width: 106px
}

#popup .window p {
	color: #68717a;
	font-size: 100%;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 36px;
	margin: 0 auto
}

#popup .window .btn-main {
	background: var(--color-blue);
	border: none;
	border-radius: 0;
	color: #fff;
	padding: 1rem;
	width: 180px
}

#popup .window .btn-main:hover {
	background: var(--color-blue2);
}
/*
	--color-blue: rgb(82, 102, 176);
	--color-blue2: #5266b0;
	--color-blue3: rgb(123, 139, 195);
	--color-green: rgb(183, 217, 105);
	--color-purple: rgb(244, 124, 129);
	--color-gray: rgb(246, 245, 245);
	--color-gray2: #555;
	--color-gray3: #f0efee;
	--color-gray4: #eee;
	--color-gray5: #4d4d4d;
	--color-green1: #a1cd3a;
	--color-red: #f05359;
	--color-text: #000;
	--color-black: #000;
	--color-white: #fff;
	--color-bright: #fff;
	--color-background: #fff;
*/