* {
  padding: 0;
  margin: 0;
  box-sizing: content-box;
}
html,
body {
  height: 100%;
  font-family: 'Roboto Slab', sans-serif;
  color: #333333;
}

.grey-c { color: #212121 }
.grey-bg { background: #212121 }
.blue-gray-c { color: #263238 }
.blue-gray-bg { background: #263238 }
.deep-orange-c { color: #bf360c }
.deep-orange-bg { background: #bf360c }
.indigo-c { color: #1a237e }
.indigo-bg { background: #1a237e }
.green-c { color: #0d5302 }
.green-bg { background: #0d5302 }
.red-c { color: #b0120a }
.red-bg { background: #b0120a }
.brown-c { color: #3e2723 }
.brown-bg { background: #3e2723 }
.purple-c { color: #4a148c }
.purple-bg { background: #4a148c }


.bg {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#bg-left {
  position: absolute;
  width: 50%;
  height: 100%;
  transition: background 1s ease;
}
#bg-right {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 100%;
}

header {
  display: none;
}


nav {
  position: fixed;
  left: calc(50% - 500px);
  top: calc(50% - 180px);
  width: 280px;
  text-align: right;
}
nav .item {
  cursor: pointer;
  font-size: 38px;
  color: white;
  font-weight: 300;
  padding-right: 18px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 10px;
  text-transform: uppercase;
  transition: background 0.7s ease;
  border-radius: 60px 0 0 60px;
}
nav .item:hover,
nav .item2:hover {
  background: rgba(255,255,255,.1);
}
nav .item.active {
  background: white;
  color: #333;
}
nav .item2 {
  font-size: 18px;
  color: white;
  font-weight: 300;
  padding-right: 18px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 2px;
  text-transform: uppercase;
  transition: background 0.7s ease, color 0.7s ease;
  border-radius: 60px 0 0 60px;
}
nav .item2 a,
nav .item2 a:hover,
nav .item2 a:visited,
nav .item2 a:active {
  text-decoration: none;
}
nav .item2 a,
nav .item2 a:visited,
nav .item2 a:active {
  color: white;
}
nav .fa {
  margin-left: 6px;
}


.container {
  max-width: 1000px;
  margin: 0 auto;
}
.content{
  margin-left: 280px;
  background: white;
  position: relative;
}


._tab {
  padding: 26px 18px;
}


._tab {
  display: none;
}
._tab.active {
  display: block;
}



footer {
  padding: 50px 18px 26px;
  text-align: center;
}


#_nt p{
  text-align: justify;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 20px;
}
#_nt p a,
#_nt p a:visited{
  color: #777;
  text-decoration: none;
}
#_nt p a:hover{
  text-decoration: underline;
}


#_onama .panel {
  margin-bottom: 30px;
  min-height: 150px;
}
#_onama img {
  width: 100%;
  border-radius: 10px;
}
#_onama .image {
  position: absolute;
  width: 150px;
}
#_onama .text {
  margin-left: 170px;
}
#_onama h2 {
  padding-top: 10px;
  margin-bottom: 20px;
}
#_onama p {
  text-align: justify;
  font-size: 20px;
  font-weight: 300;
}
#_onama .ex h3 {
  margin-bottom:  6px;
}
#_onama .ex p {
  font-size: 15px;
  margin-bottom: 6px;
}
#_onama .ex span {
  font-weight: normal;
}


#_foto .okvir {
  margin-bottom: 30px;
}
#_foto h3 {
  cursor: pointer;
  padding: 3px 0 3px 10px;
  font-size: 26px;
  font-weight: 300;
  transition: background 0.7s ease;
  border-radius: 10px;
}
#_foto h3:hover,
#_foto h3.active {
  background: #e8eaf6;
}
#_foto h3 span {
  display: inline-block;
  min-width: 140px;
}
#_foto h3 .fa {
  margin-left: 6px;
  display: none;
}
#_foto div:not(.okvir) {
  text-align: center;
}
.imgPanel {
	margin:2px 0px;
  display: inline-block;
	width:168px;
	height:168px;
	cursor:pointer;
}
.imgPanelImageCell {
	display: table-cell;
	vertical-align: middle;
	max-height:inherit;
	max-width:inherit;
	height:inherit;
	width:inherit;
}
.imgPanelImage {
	text-align:center;
	margin:4px;
	width:160px;
	max-width:160px;
	height:160px;
	max-height:160px;
}
.inPanel {
	max-height:inherit;
	max-width:inherit;
  border-radius: 10px;
}
.imgPanel:hover .inPanel {
	box-shadow: 0 0 4px #444;
}



#_info h2 {
  margin-bottom: 20px;  
}
#_info p{
  text-align: justify;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 20px;
}
#_info table {
  width: 100%;
  border-spacing: 0;
  font-size: 28px;
  text-align: center;
  margin-bottom: 40px;
  border: 1px solid #dfdfdf;
}
#_info table.t2 td {
  width: 50%;
  padding: 12px 0;
}
#_info table.t3 td {
  width: 33.3333%;
  padding: 12px 0;
}

#_info td,
#_info td a {
  transition: color 0.5s ease, background 0.5s ease;
}
#_info table a,
#_info table a:hover,
#_info table a:visited,
#_info table a:active {
  text-decoration: none;
}
#_info table a.fb {
  color: #3b5998;
}
#_info table td.fb:hover {
  background: #3b5998;
}
#_info table td.fb:hover a {
  color: white;
}
#_info table a.yt {
  color: #cc181e;
}
#_info table td.yt:hover {
  background: #cc181e;  
}
#_info table td.yt:hover a {
  color: white;
} 
#_info table a.wp {
  color: #4a148c;
}
#_info table td.wp:hover {
  background: #4a148c;
}
#_info table td.wp:hover a {
  color: white;
}
#_info .link,
#_info .link:visited,
#_info .link:active {
  font-weight: normal;
  text-decoration: none;
  color: #4a148c;
}
#_info .link:hover {
  text-decoration: underline;
}








.carousel{
  margin-bottom:15px;
}
.carousel-caption{
  text-shadow: 1px 1px 2px black;
}
.carousel-caption h2{
  font-weight:300 !important;
}
.carousel-caption h3{
  font-weight:300 !important;
}









@media screen and (max-width: 1000px) {
  nav {
    display: none;
  }
  #bg-left {
    width: 100%;
  }
  #bg-right {
    display: none;
  }
  .content {
    margin-left: 0;
  }
  .container {
    max-width: 720px;
    padding-top: 60px;
  }
  header {
    display: block;
    position: fixed;
    width: 720px;
    top: 0;
    left: calc(50% - 360px);
    z-index: 50;
    transition: background 1s ease;
   	outline:none;
  	-webkit-tap-highlight-color:transparent;
  }
  header table {
    width: 100%;
    border-spacing: 0;
    text-align: center;
    height: 60px;
    font-size: 38px;
    color: white;
   	outline:none;
  	-webkit-tap-highlight-color:transparent;
  }
  header table td {
    width: 25%;
    cursor: pointer;
    transition: color 0.7s ease;
   	outline:none;
  	-webkit-tap-highlight-color:transparent;
  }
  header table td.active {
    background: white;
    color: #333;
  }
}
@media screen and (max-width: 720px) {
  header {
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 50;
  }
  #_nt p{
    font-size: 16px;
  }

  #_onama .panel {
    margin-bottom: 20px;
    min-height: 100px;
  }
  #_onama .image {
    width: 90px;
  }
  #_onama .text {
    margin-left: 100px;
  }
  #_onama h2 {
    padding-top: 0;
    margin-bottom: 3px;
  }
  #_onama p {
    font-size: 16px;
  }
  #_onama .ex p {
    font-size: 13px;
  }
  
  #_foto .okvir {
    margin-bottom: 20px;
  }
  #_foto h3 {
    font-size: 16px;
  }
  #_foto h3 span {
    min-width: 90px;
  }
  .imgPanel {
	  width:152px;
	  height:152px;
  }
  .imgPanelImage {
	  width:144px;
	  max-width:144px;
	  height:144px;
	  max-height:144px;
  }
  
  #_info p{
    font-size: 16px;
  }
  #_info table {
    font-size: 19px;
  }
}