/* KOLORI
tamnobraon - #7E2E2F 
svetlozlatna - #E8D2AB
*/

html {width:100%; height:100%;}

body {
	background: url(../img/back-fountain.png) repeat-x #E5E3E2;
	font-family: 'Roboto Condensed', sans-serif;
	font-size:16px;
	color:#1B1B1B;
	padding-top: 20px;
}

/* MAIN CLASSES
---------------------------------------------- */
.text-brown {color:#7E2E2F}
.section {padding-top:20px}
.bottom-section {padding-top:20px; padding-bottom:20px}
.hidden-xs {display:none}
.hidden-sm {display:block}
.ico-right {margin-left:10px}
.tooltip-inner {font-size:1.2em;}

a, a:hover {color:#7E2E2F}

hr {border-color:#CCC;}

.bigger {font-size:1.2em}

label {font-weight:normal}

.my-fa {margin-right:10px}

/* INTRO
---------------------------------------------- */
.intro {
  background:#1B1B1B url(../img/intro-back.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	height: 100vh;
	width: 100%;
    color: #fff;
	margin-top: -20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro .padded-left {margin-left:20px}
.intro .well {
	background: rgba(0, 0, 0, 0.5);
	color:#fff;
	border:#F0AD4E dotted 2px;	
}
.intro .left {text-align:center}
.intro .right {text-align:center}
.intro ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
.intro .unstyled {border:none; background:none}
.intro h1 {
    color: #fff;
    font-weight: bold;
    font-size: 40px;
    line-height: 60px;
    margin-top: 40px;
}

.intro.content {
    width: 50%;
    height: 50%;
    text-align: center;
    display: block;
}

.intro.content img {
    max-width: 100%;
}

.intro.content .buttons {
    margin-top: 30px;
}
.intro.content .buttons a:first-child {
    margin-right: 10px;
}

@media (max-width: 1023px) {
    .intro.content {
        width: 80%;
        height: 50%;
    }
    .intro h1 {
        font-size: 28px;
        line-height: 50px;
        margin-top: 20px;
    }
}

/* NAVIGATION 
---------------------------------------------- */
.navbar-nav.nav-justified > li {float:none;}

.navbar {
  background-color: #e5e5e5; /* Old browsers */
  background-image:    -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
  background-image:      -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
  background-repeat: repeat-x; /* Repeat the gradient */
  border: 1px solid #ccc;
  border-radius: 5px;
}
.nav-justified > li > a {
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
  text-align: center;
  border-bottom: 1px solid #d5d5d5;
}
.nav-justified > li:last-child > a {
    border-bottom: 0;
}

.navbar-nav.nav-justified > li > a {color:#7E2E2F; font-size:1.1em; line-height:1.8em;}
.navbar-nav.nav-justified > li > a:hover {color:#666}

.header {margin-bottom:25px}

@media (min-width: 768px) {
.navbar-brand {display:none}
.nav-justified > li > a {border-right: 1px solid #d5d5d5; border-left: 1px solid #fff; border-bottom: none;}
.nav-justified > li:first-child > a {border-left: 0;}
.nav-justified > li:last-child > a {border-right: 0;}
.hidden-xs {display:block}
.hidden-sm {display:none !important}
}

/* CAROUSEL 
---------------------------------------------- */
.carousel {height:350px; border-bottom:solid 10px #7E2E2F; border-top:solid 10px #7E2E2F;}
.item, .active, .carousel-inner {height:100%;}
.fill {width:100%; height:100%; background-position:center; background-size:cover;}
.carousel-caption h1 {font-size:3em; text-shadow: 2px 2px 3px rgba(0, 0, 0, 1)}
.carousel-caption .my-btn {margin-top:10px; margin-bottom:15px}
@media (min-width: 1025px) {
.carousel {height:500px;}
}

/* HOMEPAGE 
---------------------------------------------- */
.img-feat {height:200px; width:200px; border:none;}
.img-feat-responsive {display:block; text-align:center}
.important {background:#7E2E2F; color:#fff; font-size:1.2em}
@media (min-width: 768px) {
.img-feat {height:300px; width:300px; border:none;}
}
@media (min-width: 992px) {
.important {background:#7E2E2F; color:#fff; font-size:1.5em}
}

/* FOOTER 
---------------------------------------------- */
.footer {
	margin-top:35px;
	background:#7E2E2F; 
	color:#fff; 
	padding:10px 25px 25px 25px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.footer a, .footer a:hover {color:#fff}
.kursna-lista {background:#fff; padding:15px; margin-top:10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px}

/* BACK TO TOP
---------------------------------------------- */
.backtotop {
  background: #7E2E2F;
  padding: 10px 15px;
  font-size: 18px;
  color:#FFF;
  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
   border:1px solid #FFF;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  transition: background 300ms;
}
.backtotop:hover {
  background: #F0AD4E;
}

/* HEADLINES 
---------------------------------------------- */

.headline {
	padding-bottom: 3px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 30px;
	line-height: 50px;
}
.headline span {
	padding-bottom: 4px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
h3.headline span {
	padding-bottom: 8px;
}

/* SIDEBAR + CENOVNIK
---------------------------------------------- */
.bs-sidebar {
  margin-bottom: 50px;
}
.bs-sidebar.affix {
  position: static;
}
.my-panel.panel-heading {
	background:#7E2E2F;
	color:#FFF;
	font-size:1.2em;
}

.badge {font-size:1.1em; background-color:#7E2E2F; font-weight:normal}


@media (min-width: 992px) {
  .bs-sidebar .nav > .active > ul {
    display: block;
  }
  .bs-sidebar.affix,
  .bs-sidebar.affix-bottom {
    width: 213px;
  }
  .bs-sidebar.affix {
    position: fixed;
    top: 90px;
  }
  .bs-sidebar.affix-bottom {
    position: absolute;
  }
}
@media (min-width: 1200px) {
  .bs-sidebar.affix-bottom,
  .bs-sidebar.affix {
    width: 220px;
  }
}