/* FONTOVI */
@font-face {
    font-family: MojFont;
    src: url(fonts/PlayfairDisplay-regular.otf);
}

body {
	background-color: #ffffff; 
	font-family: Open Sans;
}
	h2, h3, h4, h5 {font-family: MojFont; }

	
	p {color: #464646;}
	
/* Kraj fontova i boja */		

	a {color: #333333;}
	a:hover {color: #878787;}
	
	ul {margin-left: 0px;}

/* Navigacija */	
.top-bar, .top-bar ul  {
	background: inherit;
	padding: inherit;
}

	.title-bar {
		background-color: inherit;
		color: #878787;
	}
		.menu-icon::after {
			background: #878787;
			box-shadow: 0 7px 0 #878787, 0 14px 0 #878787;
			content: '';
		}

.header-nav, .helpers-nav {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

.helpers-nav.fixed {
    position: fixed;
    top: 0;
    width: 100%;
	z-index:100;
	background-color: rgba(0,0,0,0.85);
	display: block;
    -webkit-animation: fadeIn 2s;
    animation: fadeIn 2s;
}
	.helpers-nav.fixed a {    color: #dcdcdc;}
	.helpers-nav.fixed a:hover {color: #fff;}
	
	.dodatnaMargina {padding-bottom: 50px;}

.social-network, .main-nav, .secondary-nav {
	list-style-type: none;
	margin-bottom: 0px;
}
	.social-network li, .main-nav li, .secondary-nav li {
		display: inline;
		margin-right: 12px;
		margin-left: 12px;
	}
	
	.top-bar .secondary-nav {
		padding: 15px ;
		font-size: 18px;
	}
	
	.social-network, .main-nav {
		height: 35px;
		line-height: 35px;
	}
	
	
/* Logo */	
	.logo h1 {
		padding: 20px;
		font-size: 68px;
		margin-bottom: 0px;
	}
	

section h3 {margin-bottom: 20px;}	
	
/* Glavni postovi */	
	.top-news {
		margin-top: 60px;
		color: #fff;
		box-sizing: border-box;
	}
	
	.news img {margin-bottom: 10px;}
	
		.top-news .top-post {
			height: 560px;
			position: relative;
			padding: 25px;
			margin-right: 2px;
			margin-bottom: 2px;
		}
		.top-news .posts {
			height: 279px;
			position: relative;
			padding: 25px;
			margin-right: 2px;
			margin-bottom: 2px;
		}
		
				.img {
					background-position: 100% 100%;			
				}
				

					.top-news header {
						position: absolute;
						bottom: 0;
					}
					
					.top-news header h2 {
						font-size: 26px;
						margin-top: 0px;
						padding-bottom: 15px;
						font-weight: 600;
						text-shadow: 2px 2px #000;
					}
					.top-news header > span {
						font-size: 12px;
						text-transform: uppercase;
						
					}
					.top-news header a {color: #fff;}
					.top-news header h2::first-letter, .news header h4::first-letter {text-transform: uppercase;}
					h1::first-letter, h2::first-letter, h3::first-letter, h4::first-letter, h5::first-letter, h6::first-letter {text-transform: uppercase;} 
					.top-news header a:hover {color: #fff; cursor: pointer;}
					
/* News */

.box {
		border-top: 1px solid #ccc;
		padding-bottom: 40px;
	}	
	
	.news {
		margin-bottom: 60px;
		margin-top: 60px;
	}
	.news h3 {
		font-size: 22px;
		padding-bottom: 15px;
	}
	
	.news h4 {font-size: 20px; margin-bottom: 5px;}
	.news article p {font-size: 14px;}
	.news footer p {font-size: 12px;}
	
		/* Lijeva strana */
		.news .objava {margin-bottom: 25px;}
		
		.news img {width: 100%; border: 1px solid #ccc; padding: 4px;}
		
		.news .sidebar-img {margin-bottom: 20px;}
		
		/* Desna strana */
		.news ul.kolumna {
			list-style-type: none;
			border-bottom: 1px solid #ccc;
			border-left: 1px solid #ccc;
			margin-left: 0px;
			padding-left: 20px;
			margin-bottom: 20px;
		}
			.kolumna li {
				margin-bottom: 25px;
				padding-bottom: 15px;
			}
			.kolumna li:not(:last-child) {
				border-bottom: 1px solid #ccc;
			}
		
		.news footer p span {
			font-size: 13px;
			color: #878787;
		}
		
		
		.post img {margin-bottom: 30px; border: 1px solid #ccc; padding: 4px;}
		span.datumObjave i::before {
			content: "";
			border-left: 1px solid #ccc;
			padding-left: 8px;
    		margin-left: 8px;
		    height: 12px;
		    display: inline-block;
		}
		
/* Majčinstvo */

	.majcinstvo {margin-top: 40px;}

		.majcinstvo header h5 {
			margin-top: 10px;
			font-size: 18px;
			margin-bottom: 0px;
		}
		.majcinstvo footer span, .ostalo footer span {
			font-size: 13px;
			color: #878787;
		}
		.majcinstvo .post {margin-bottom: 20px;}
	
	
/* Ostalo */
	
	.ostalo {
		margin-top: 40px;
		padding-bottom: 60px;
	}
	
	.ostalo header h6 {
		font-size: 18px;
		margin-bottom: 0px;
	}
	
	.ostalo ul {
		list-style-type: none;
		margin-left: 0px;
	}
		.ostalo ul li {
			margin-bottom: 20px;
		}
	
			
			
/* FOOTER */
.footer {
	background-color: rgba(41,41,41,1);
	padding-top: 10px;	
	font-size: 14px;
}			
	.footer p {color: #ccc;}
	

	span.go-top {
		background-image: url('../images/arrow-up.svg');
		background-repeat: no-repeat;
		background-position: center;
		height: 40px;
		width: 40px;
		display: block;
		position: fixed;
		bottom: 60px;
		right: 20px;
		-webkit-animation: fadeIn 2s;
    	animation: fadeIn 2s;
		background-size: cover;
	}
		span.go-top:hover {cursor: pointer;}
	
	
/* Kontakt */
	#mapa {padding-top: 50px;}
		#kontakt input::placeholder, #kontakt textarea::placeholder {
			color: #878787;
		}
		
		
		
@media only screen and (max-width: 639px) {
	.secondary-nav li a {font-size: 14px;}
	.top-bar .secondary-nav li {
		display: block;	
		padding: 5px;
		margin: 5px;
	}
	.top-bar .secondary-nav li:not(:last-child){
		border-bottom: 1px solid #ccc;
	}
	
	.news ul.kolumna {
			border-bottom: none;
			border-left: none;
			margin-left: 0px;
			padding-left: 0px;
		}
		
}