/*
Header: 30% prozirno, 
BOJA #770707
Menu:  #ffffff  
over:fa5656
*/

body {font-family: 'Exo 2', sans-serif; font-size: 14px; line-height: 1.6; padding-top: 100px; background-color: #770707; color: #fff;}

ol {padding-top: 10px;}
ol > li {padding-bottom: 10px;}

table.table {background-color: #fff; color: #000;}
form {background-color: #ccc;}
form.kontakt {background-color: transparent;}

a, a:hover, a:focus {color: #770707; text-decoration: none;}

.btn.btn-success {background-color: #770707; border-color: #770707;}

.list-group-item {color: #333;}

.bgB > .container {background-color: rgba(117,7,7,0.8); margin-bottom: 25px;}
.bgB > .container h1 {margin: 20px 0px;}
.bgB > .container a {color: #fff;}

#header {width: 100%; position: absolute; top: 0; z-index: -1;}
#header > .slika {width: 100%; height: 100%; position: relative;}
#header > .slika > img {width: 100%; height: auto;}
#header > .slika > .over {width: 100%; height: 100%; position: absolute; bottom: 0px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiM3NzA3MDciIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNzcwNzA3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  rgba(117,7,7,0) 75%, rgba(117,7,7,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,rgba(117,7,7,0)), color-stop(100%,rgba(117,7,7,1)));
background: -webkit-linear-gradient(top,  rgba(117,7,7,0) 75%,rgba(117,7,7,1) 100%);
background: -o-linear-gradient(top,  rgba(117,7,7,0) 75%,rgba(117,7,7,1) 100%);
background: -ms-linear-gradient(top,  rgba(117,7,7,0) 75%,rgba(117,7,7,1) 100%);
background: linear-gradient(to bottom,  rgba(117,7,7,0) 75%,rgba(117,7,7,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00770707', endColorstr='#770707',GradientType=0 );
}

.navbar {position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; margin-bottom: 0px; padding-top: 25px;}
.navbar-default {background-color: rgba(117,7,7,0.7); border: none;}
.navbar-default .navbar-collapse {border-color: transparent;}
.navbar-default .navbar-nav>li>a {color: #fff; font-weight: 900;}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li.active>a,
.navbar-default .navbar-nav>li.active>a:hover,
.navbar-default .navbar-nav>li.active>a:focus,
.navbar-default .navbar-nav>.open>a, 
.navbar-default .navbar-nav>.open>a:focus, 
.navbar-default .navbar-nav>.open>a:hover {background-color: transparent; color: #fa5656;}
.navbar-nav>li>a {padding: 0px 20px; line-height: 75px;}
.navbar-brand {padding-top: 0px; padding-bottom: 0px; height: 75px; line-height: 75px;}
.navbar-brand img {height: 66px; width: auto;}
.navbar-brand span {color: #fff; font-size: 11px; display: block; margin-top: -7px; font-weight: 900; line-height: 1;}
.dropdown-menu {background-color: rgba(117,7,7,0.8);}
.dropdown-menu>li>a {color: #fff;}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a, 
.dropdown-menu>.active>a:focus, 
.dropdown-menu>.active>a:hover,
.nav-pills>li.active>a, 
.nav-pills>li.active>a:focus, 
.nav-pills>li.active>a:hover   {background-color: transparent; color: #fa5656;}

.carousel {background-color: #770707; margin-top: -150px;}
.carousel-control {background-image: none !important;} 
.carousel-caption {padding: 0px; margin: 0px; position: absolute;}
.carousel-caption.a {top: 400px; left: 100px; text-align: left;}
.carousel-caption.b {top: 200px; left: 600px; text-align: left;}
.carousel-caption.c {top: 300px; left: 300px; text-align: left;}
.carousel-caption > p.a > span {font-size: 40px; background-color: rgba(255,0,0,0.7); color: #fff; font-weight: bold; padding: 5px 15px;}
.carousel-caption > p.b > span {font-size: 30px; font-style: italic;}
.carousel-caption .btn-flat {font-size: 14px; background-color: #fff; border: 1px solid #ff0000; color: #ff0000; padding: 5px;}
#carousel_admin {position: absolute; top: 125px; right: 0px; z-index: 99999;}
/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {opacity: 0; transition-property: opacity;}
.carousel-fade .carousel-inner .active {opacity: 1;}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {left: 0; opacity: 0; z-index: 1;}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {opacity: 1;}
.carousel-fade .carousel-control {z-index: 2;}
/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

#program {min-height: 700px; padding: 50px 0px;}
#program > .container {color: #fff;}
.container.tekst > .row > div {padding: 25px;}
.container.tekst > .row > div.tekst_bg,
.container.tekst2 > .row > div.tekst_bg,
.container.vijest > .row > div.tekst_bg {background-color: rgba(117,7,7,0.8);}
.container.tekst > .row > div.desno,
.container.tekst2 > .row > div.desno {background-color: rgba(200,200,200,0.6);}
.container.tekst > .row h1,
.container.tekst2 > .row h1 {margin: 0px 0px 25px;}
.container.tekst > .row img,
.container.tekst2 > .row img {padding: 2px;}

.tekst_bg h4 > a {color: #fff;}

.thumbnail {background-color: rgba(117,7,7,0.8); border-color: #770707; color: #fff;}
.thumbnail a,
.thumbnail a:hover,
.thumbnail a:focus {color: #fff; text-decoration: none;}

.kontakt .podaci {padding: 50px 15px;}

footer {padding: 25px 0px; color: #fff; border-top: 1px solid #fff;}
footer a {color: #fa5656;}
footer a.footer-logo > img {width: 50%;}
footer .nav-pills a {color: #fff;}
footer .nav-pills a:hover,
footer .nav-pills a:focus {background-color: transparent; color: #fa5656;}

@media screen and (max-width: 992px) {
	.navbar-nav>li>a {padding: 0px 10px;}
}


@media screen and (max-width: 767px) {
	body {padding-top: 50px;}
	#header {display: none;}

	.navbar {padding-top: 0px; height: 50px; border-bottom: 1px solid #fff;}
	.navbar-default {background-color: rgba(117,7,7,1);}
	.navbar-default .navbar-toggle:hover,
	.navbar-default .navbar-toggle:focus {background-color: rgba(117,7,7,1);}
	.navbar-default .navbar-collapse {background-color: rgba(117,7,7,0.9); border-bottom: 1px solid #fff;}
	.navbar-nav>li>a {line-height: 25px;}
	.navbar-brand {height: 50px; line-height: 50px;}
	.navbar-brand img {height: 50px;}

	.navbar-toggle {padding: 10px;}
	.navbar-default .navbar-toggle .icon-bar {background-color: #fff;}

	.navbar-default .navbar-nav .open .dropdown-menu>li>a {color: #fff;}
	.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, 
	.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {color: #fa5656;}

	.navbar-default .navbar-nav .open .dropdown-menu>.active>a, 
	.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus, 
	.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover {background-color: transparent; color: #fa5656;}

	.carousel {margin-top: -50px;}
	.carousel-caption.a,
	.carousel-caption.b,
	.carousel-caption.c {top: 60px; left: 80px;}
	.carousel-caption > p.a > span {font-size: 30px;}
	.carousel-caption > p.b > span {font-size: 25px;}
	.carousel-caption .btn-flat {font-size: 14px;}

	#program {height: auto; min-height: 0px; padding: 0px; padding-top: 50px;}
	#program > .container.tekst > .row > div.desno {background-color: transparent; border-top: 1px solid #fff;}

	footer > .container {padding-top: 50px;}

}