.hidden {display: none;}

body {background: url(../image/back.png);background-repeat: repeat;}

/** TYPOGRAFY **/

h1 {font-size: 34px;}
h2 {font-size: 30px;}
h3 {font-size: 26px;}
h4 {font-size: 22px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Kelly Slab', sans-serif;
	text-transform: uppercase;
}

.boldirano {margin-bottom: 0px;font-weight: 500;}


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

a:hover {color:#333;
	text-decoration: none;}


/*************** HEADER SECTION **************/

/**HOME PAGE**/
.home-header {
    background-image: url(../image/svetisisoje.jpg);
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;}

.home-header-content {
	background-image: linear-gradient(to bottom, transparent 0%, #4c6473 100%);
	padding-bottom: 70px;
    position: absolute;
    width: 100%;
    bottom: 0px;
    -moz- bottom:0px;
    -webkit- bottom:0px;
}

.header-text {
	text-align: center;
	text-shadow: 0px 0px 3px #000;
}

.header-text h1 {
	font-size: 50px;
	color:white;
	text-transform: uppercase;
	font-weight: 700;
}

.header-text h2 {
	font-size: 24px;
	padding-top: 15px;
	color:#fff;
	text-transform: uppercase;
	font-weight: 700;
}

.header-text a {
	color: white;
	font-size: 38px;
}
.header-text i {
	padding-top: 30px;
}

.hide {	display: none; }



/**ALL OTHER PAGES**/

.header {
	background-image: url(../image/panorama.jpg);
	background-size: cover;
	height: 300px;
}

.header-content {
	position: absolute;
	left: 0px;
	width: 300px;
	height: 298px;
	background-color: rgba(76, 100, 115, 0.65);
}

.header-content .header-text h1 {
	font-size: 20px;
	padding: 20px 20px;
}

.linkovi a {
	color:#777;
	display: block;
}

.linkovi a:hover {
	color:#333;
}

.smestaj {
	padding: 10px 0px;
}

.smestaj i {
	font-size: 50px;
    background: #4c6473;
    padding: 20px;
    border-radius: 5px;
    color: #f7f7f7;
}

.smestaj a {
	font-size: 20px;
}

.video {
	padding: 10px;
	text-align: center;
	background: #f1f1f1;
}

video {
	height: 250px;
}

.divider {
	width: 30% !important;
}

/** LOGO **/

.logo i {
	margin-top: 40px;
	font-size: 50px;
	color:#fff;
}


/***kontakt stranica**/

.kontakt_icons {
	font-size: 80px;
	padding: 10px 20px;
	text-align: center;
	color:#4c6473;
	transform: rotate(-5deg);
}

.kontakt_text {
	text-align: center;
	font-size: 16px;
}


/** galerija **/


.masonry {
  line-height: 0;
  display: block;
  -webkit-column-count: 3;
  -webkit-column-gap:   0px;
  -moz-column-count:    3;
  -moz-column-gap:      0px;
  column-count:         3;
  column-gap:           0px;  
}

.thumb {
	margin: 0px 5px 10px 5px;
}


/*** PAGE SECTION****/

#page, #page-foto {	
	background: #f7f7f7;
	padding: 50px;
	width: 75%;
	box-shadow: 0px 0px 15px silver;
    margin: 40px auto 50px;}

#page img {
	display: block;
    margin: 15px auto;
    width: 100%;
}


#page h4 {
	margin: 15px 0px;
}

.title {
	border-bottom: 2px solid silver;
    padding: 10px 20px;
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
}

figcaption {
	text-align: center;
    background: #e4e4e4;
    padding: 5px 0px;
    font-style: italic;
}

.pesma {text-align: center;font-size: 18px;}

/*********** NAVIGATION SECTION **************/

.navigation {
	padding: 0px;
	margin-top: -2px;
	background:#4c6473;
}
.navbar { padding-bottom: 0px; }

.nav-link {
	color:#fff;
	font-weight: 700;
	padding-bottom: 15px;
    border-bottom: 5px solid #4c6473;
    transition: all ease 300ms;
}

.nav-link:hover {color:#9a9a9a;
border-bottom: 5px solid #fff;
transition: all ease 300ms;}

.navbar-nav { text-align: center; }

.navbar-toggler-icon i {
	color:#fff;
	font-size: 30px;
}

.sticky {
	position: fixed;
	top: 0px;
	z-index: 999;
}

li.dropdown:hover > .dropdown-menu {
    display: block;
}
.dropdown-menu {padding:0px;}
.dropdown-item {padding:10px;font-weight: 700;}

.dropdown-menu a:hover {background:#4c6473;color:white;}


/************* CONTENT HOME PAGE *************/

#content {
	padding: 50px 0px;
}

#content h2 {
	text-align: center;
	font-size: 35px;
}

.homepage img {
	max-height: 300px;
}

.card:hover {
	box-shadow: 0px 0px 10px #757575;
}

.more-news {
	padding:50px 0px;
}


/***** HOME-SECTION DNEVNO ******/

#dnevno {
	background: #ede5d2;
	padding-bottom: 50px;
	box-shadow: 0px 5px 10px silver;
}
#dnevno h3 {
	padding-top: 40px;
}
.datum {
	padding-bottom: 30px;
}

.desavanje {
	padding: 10px;
	margin:10px auto;
	}

.desavanje:after {
	margin:0px auto;
	content: "";
	display: block;
	width: 300px;
	height: 1px;
	background: silver;
}

.vreme {
	font-size: 20px;
	margin-bottom: 0px;
	font-weight: 600;
}

.sluzba {color:#4c6473;
font-size: 17px;}

/****** SECTION MOLITVA *********/

#molitva {
	background:#ede5d2;
	padding:100px 0px;
	box-shadow: 0px -5px 10px silver;
	border-bottom: 2px solid silver;
}


blockquote:before {
	content: open-quote;
    font-size: 80px;
    vertical-align: 35px;
    line-height: 0.1;
}

blockquote {
	margin-top: 30px;
	font-style: italic;
	font-size: 18px;
	padding:20px;
}

blockquote:after {
	content: close-quote;
    font-size: 80px;
    vertical-align: -60px;
    line-height: 0.1;
}

/********* SECTION WITH MAPS *************/

#mapa{
	padding-left: 0px;
	padding-right: 0px;
	position: relative;
}

.lokacija {
    text-align: center;
    width: 100%;
    background: transparent;
    position: absolute;
    top:-25px;
}

.lokacija h3 {
	background: #4c6473;
	color:#fff;
	text-align: center;
	width: 30%;
	padding: 7px 2px;
	margin:0px auto;
	box-shadow: 0px 0px 10px #616161;
}

/******** FUTER HOMEPAGE *******/

#footer {
	background:#4c6473;
	padding:40px 0px;
	color: #fff;
	margin-top: -10px;
}

#footer h5 {
	border-bottom: 1px solid silver;
	padding-bottom: 5px;} 

#footer p {
	font-size: 18px;
	margin-bottom: 5px;}

#footer a { color:#fff; }

#footer a:hover { color:#9a9a9a; }


/***************TIMELINE*******************/

.timeline {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative
}

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

.timeline:not(.timeline--horizontal):before {
	background-color: #ddd;
	bottom: 0;
	content: '';
	left: 50%;
	margin-left: -2px;
	position: absolute;
	top: 0;
	width: 4px;
	z-index: 1
}

.timeline__wrap {
	overflow: hidden;
	position: relative;
	z-index: 2
}

.timeline__item {
	font-size: 16px;
	font-size: 1rem;
	padding: .625rem 2.5rem .625rem 0;
	position: relative;
	width: 50%;
	z-index: 2
}

.timeline__item:after {
	background-color: #fff;
	border: 4px solid #4c6473;
	border-radius: 50%;
	content: '';
	height: 20px;
	position: absolute;
	right: -10px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%;
	width: 20px;
	z-index: 1
}

.timeline__item.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	opacity: 0
}

.timeline__item.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn
}

.timeline__item--left {
	left: 0
}

.timeline__item--right {
	left: 50%;
	padding: .625rem 0 .625rem 2.5rem
}

.timeline__item--right:after {
	left: -10px
}

.timeline__item--right .timeline__content:before {
	border-bottom: 10px solid transparent;
	border-right: 12px solid #ccc;
	border-left: none;
	border-top: 10px solid transparent;
	left: -12px
}

.timeline__item--right .timeline__content:after {
	border-bottom: 9px solid transparent;
	border-right: 11px solid #fff;
	border-left: none;
	border-top: 9px solid transparent;
	left: -10px
}

.timeline__content {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 10px;
	color: #333;
	display: block;
	padding: 1.25rem;
	position: relative;
}


.timeline__content:after,
.timeline__content:before {
	content: '';
	height: 0;
	position: absolute;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%;
	width: 0;
}

.timeline__content:before {
	border-bottom: 10px solid transparent;
	border-left: 12px solid #ccc;
	border-top: 10px solid transparent;
	right: -12px;
	z-index: 1
}

.timeline__content:after {
	border-bottom: 9px solid transparent;
	border-left: 11px solid #fff;
	border-top: 9px solid transparent;
	right: -10px;
	z-index: 2
}

.timeline__content h2 {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 .625rem
}

.timeline__content p {
	font-size: .9375rem;
	line-height: 1.5;
	margin-bottom: 10px
}

.timeline--horizontal {
	font-size: 0;
	padding: 0 3.125rem;
	overflow: hidden;
	white-space: nowrap
}

.timeline--horizontal .timeline-divider {
	background-color: #4c6473;
	display: block;
	height: 4px;
	left: 40px;
	position: absolute;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 40px;
	z-index: 1
}

.timeline--horizontal .timeline__items {
	-webkit-transition: all .8s;
	-o-transition: all .8s;
	transition: all .8s;
	will-change: transform
}

.timeline--horizontal .timeline__item {
	display: inline-block;
	left: 0;
	padding: 0 0 2.5rem;
	position: relative;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
	vertical-align: top;
	white-space: normal
}

.timeline--horizontal .timeline__item:after {
	left: 50%;
	right: auto;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: 100%
}

.timeline--horizontal .timeline__item .timeline__item__inner {
	display: table;
	height: 100%;
	width: 100%
}

.timeline--horizontal .timeline__item .timeline__content__wrap {
	display: table-cell;
	margin: 0;
	padding: 0;
	vertical-align: bottom
}

.timeline--horizontal .timeline__item .timeline__content:before {
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: 12px solid #ccc;
	left: 50%;
	right: auto;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	top: 100%
}

.timeline--horizontal .timeline__item .timeline__content:after {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #fff;
	left: 50%;
	right: auto;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	top: 100%
}

.timeline--horizontal .timeline__item--bottom {
	padding: 2.5rem 0 0
}

.timeline--horizontal .timeline__item--bottom:after {
	top: 0
}

.timeline--horizontal .timeline__item--bottom .timeline__content__wrap {
	vertical-align: top
}

.timeline--horizontal .timeline__item--bottom .timeline__content:before {
	border-bottom: 12px solid #ccc;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: none;
	bottom: 100%;
	top: auto
}

.timeline--horizontal .timeline__item--bottom .timeline__content:after {
	border-bottom: 10px solid #fff;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: none;
	bottom: 100%;
	top: auto
}

.timeline-nav-button {
	background-color: #fff;
	border: 2px solid #ddd;
	border-radius: 50px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-box-shadow: none;
	box-shadow: none;
	cursor: pointer;
	display: block;
	height: 40px;
	outline: 0;
	position: absolute;
	text-indent: -9999px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%;
	width: 40px;
	z-index: 10
}

.timeline-nav-button:disabled {
	opacity: .5;
	pointer-events: none
}

.timeline-nav-button:before {
	background-position: center center;
	background-repeat: no-repeat;
	content: '';
	display: block;
	height: 14px;
	left: 50%;
	position: absolute;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	top: 50%;
	width: 8px
}

.timeline-nav-button--prev {
	left: 0
}

.timeline-nav-button--prev:before {
	background-image: url(../image/arrow-left.svg)
}

.timeline-nav-button--next {
	right: 0
}

.timeline-nav-button--next:before {
	background-image: url(../image/arrow-right.svg)
}

.timeline--mobile {
	padding: 0
}

.timeline--mobile:before {
	left: 10px!important;
	margin: 0!important
}

.timeline--mobile .timeline__item {
	left: 0;
	padding-left: 40px;
	padding-right: 0;
	width: 100%
}

.timeline--mobile .timeline__item:after {
	left: 2px;
	margin: 0
}

.timeline--mobile .timeline__item .timeline__content:before {
	left: -12px;
	border-bottom: 12px solid transparent;
	border-right: 12px solid #ccc;
	border-left: none;
	border-top: 12px solid transparent
}

.timeline--mobile .timeline__item .timeline__content:after {
	left: -10px;
	border-bottom: 10px solid transparent;
	border-right: 10px solid #fff;
	border-left: none;
	border-top: 10px solid transparent
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
		top: 70px
	}
	100% {
		opacity: 1;
		top: 0
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		top: 70px
	}
	100% {
		opacity: 1;
		top: 0
	}
}

@-webkit-keyframes liftUp {
	0% {
		top: 0
	}
	100% {
		top: -15px
	}
}

@keyframes liftUp {
	0% {
		top: 0
	}
	100% {
		top: -15px
	}
}

/*** COPYRIGHTS *****/

#copyrights {
	text-align: center;
	padding:8px 0px;
	margin:0px;
	background: #273e4c;
}

#copyrights p {
	margin: 0px;
	color: #fff;
}
#copyrights a:hover {
	color:#fff;
}


/**********************RESPONSIV****************************/

/**TABLET**/
@media screen and (min-width:768px) and (max-width:1023px) {

.home-header-content{bottom:-15px;}

.navigation {font-size: 16px;}
.navbar { padding-bottom: 0.5rem; }

.navbar-toggler {width: 100%; text-align: center;}

.navbar-nav {text-align: left;margin-left: 50px;}

.dropdown-menu {display: block;background: #4c6473;border:none;}
	.dropdown-item {
		color: white;
		border-bottom: 1px dashed;
    	}

.homepage img {
    max-height: 400px;
}

.lokacija h3 {
	width: 50%;
}

#footer p {
	font-size: 16px;
}

#footer img {
	padding-top: 20px;
	max-width: 200px;
}

}

/**MOBILE**/
@media screen and (max-width:767px) {

	.home-header-content{bottom:-15px;}

	.navigation {padding:5px;}
	.navbar { padding-bottom: 0.5rem; }

	.navbar-toggler {width: 100%; text-align: center;}

	.navbar-nav {text-align: left;margin-left: 50px;}

	.dropdown-menu {display: block;background: #4c6473;border:none;}
	.dropdown-item {
		color: white;
		border-bottom: 1px dashed;
		font-size: 14px;
    	}

	.header {height: 180px;}

	.header-content {height: 180px;width: 150px;}

	#page, #page-foto {padding: 20px;}

	p, a {font-size: 16px;}

	.nav-link {	font-size: 16px;}

	.header-text i {
		padding-top: 0px;
	}

    #page, #page-foto{	
	width: 100%;}

	.lokacija h3 {
		width: 75%;
    	font-size: 18px;
	}

	video {
    height: 160px;
	}

	.divider {
    width: 70% !important;
	}

	#footer .col-sm-4 {margin-bottom: 30px;}

	#copyrights p { font-size: 11px;}

}