/*
	CSS DOKUMENT ZA WWW.PAMETNA-KUCA.COM
	Autor: Anđelko Levak
	Copyright 2013. Sva prava pridržana.

*/

@font-face {
	font-family: Fibaro;
	src: url("PhontPhreaks Handwriting.ttf") format('truetype');
}
.fibaro {
	font-family:'Fibaro', Arial, sans-serif !important;
	display:inline-block;
	color:#000;
	font-size:64px;
}

body, html { font-size: 100%; padding: 0; margin: 0;}
.clearfix { clear: both;}
.boxL { float: left;}
.boxR { float: right; }
.mt40 { margin-top: 40px !important;}
.mb40 { margin-bottom: 40px !important;}
.mr20 { margin-right: 20px !important;}
.mt20 { margin-top: 20px !important;}
.ml20 { margin-left: 20px !important;}
.mr0 { margin-right: 0px !important; margin-bottom:30px !important;}
.pt20 { padding-top: 20px !important;}
.pt40 { padding-top: 40px !important;}
.pt80 { padding-top: 80px !important;}
.p0 { padding-bottom: 0 !important;  }

body { font-family: Arial, sans-serif; color: #222; background: #fff; }
img { outline: none; border: none;}
input { outline: none; }
a { margin: 0; padding: 0; color: #f26522; text-decoration: none; outline: none;}
a:hover { color: #000; }
.cw960 { margin: 0 auto; padding: 0; width: 960px;}
.cw300 { width: 300px; }
.cw470 { width: 470px; }
.cw620 { width: 620px; }
.ch568 { height: 568px !important; }
.ch608 { height: 608px !important; }
.ch549 { height: 549px !important; }

#headerWrapper {	margin: 0; padding: 0; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 80px; background: #fff; -moz-box-shadow: 0px -3px 20px #888; -webkit-box-shadow: 0px -3px 20px #888; box-shadow: 0px -3px 20px #888; }
#header { margin: 0; padding: 0; float: left; width: 256px; height: auto;}
#header a { margin:0; padding: 0; text-decoration: none; }

#header a h1 { margin-top: 10px; font-weight: 400; text-indent: -9999px; width: 256px; height: 80px; background: url(../images/pametna-kuca-logo.jpg) no-repeat; }

#navigation { margin: 0; padding: 0; float: right; height: 80px;}
#navigation ul.nav { margin: 0; padding: 0; float: left; list-style: none;}
#navigation ul.nav li {  float: left;}
#navigation ul.nav li a{ margin: 0 1px 0 0; padding: 0 20px; font: normal 18px/80px 'Segoe UI', Arial; color: #3f5b75 /*#3d3d3d*/; display: block; text-decoration: none; }
#navigation ul.nav li a:hover { background: #f1f1f1;}

ul.pitanja { margin-bottom: 30px; padding: 0; list-style: none;}
ul.pitanja li { margin: 10px 0; padding-left: 40px;  height: auto; font: bold 14px/30px Century Gothic, Arial; color: #3d3d3d; background: url(../images/strelica30.png) no-repeat left center;}

#content { top: 80px; position: relative; }
#banner { height: auto; /* 315px visina bannera */ text-align: center; background: #d9d9d9; }
#banner img { width: 100%; }

#predstavljanje { margin: 0; padding: 0; background: #fff url(../images/sivi-gradient.jpg) repeat-x left bottom; min-height: 460px; height: auto; width: 100%; }
.pNaglaseni { margin: 10px 0; font: italic 25px/35px Georgia, Arial; color: #000;}
.pNormalni { margin: 20px 0; font: italic 16px/30px Georgia, Arial; color:#6d6d6d;}

#pSlider div { width: 300px; min-height: 400px; height: auto; margin-right: 20px; padding: 0px; background: #fff; display: inline; float: left; -moz-box-shadow: 0px 0px 2px #888; -webkit-box-shadow: 0px 0px 2px #888; box-shadow: 0px 0px 2px #888;}
#pSlider div h3 { margin: 20px 10px; padding: 0; font: bold 18px/20px Century Gothics, Arial; color: #3d3d3d; }
#pSlider div p { margin: 10px; padding: 0; font: italic 14px/18px Georgia, Arial; color: #6d6d6d;}
#onama{ margin-bottom: 20px; width: 100%; height: auto; }

#proizvodi{	margin: 0; padding-bottom: 100px; width: 100%; height: 6800px; border-top: 1px solid #d6d6d6; background: #f1f1f1; }
#pebbleair { margin: 0; padding-top: 50px; width: 100%; height: auto; border-top: 1px solid #d3d3d3;}
#karta { margin: 0; padding: 0; width: 100%; height: 500px; border-top: 1px solid #d3d3d3; }
#footer{ margin: 0; padding: 0; width: 100%; min-height: 100px; height: auto; border-top: 1px solid #d6d6d6;}
#footer #copyright { color: #3f5b75; }

.proizvodiContainer { margin: 0; padding: 10px 0 0 0; position: relative;}
.pbox { border: 1px solid #ccc; background-color: white; padding: 0; margin: 10px 10px 0 0; width: 230px; height: 300px; display: block; float: left; position: relative; overflow: hidden; }
.pbox h2 { margin: 10px; padding: 0; text-align: center; font: bold 14px Century Gothic, Arial; color: #3d3d3d;}
.pbox .item{ width: inherit; height: inherit; /*background: rgba(0,0,0, 0.25);*/ position: absolute; top: 0; left:0; }
.itemButton{
  
  width: 124px;
  height: 30px;
  display: block;
  background: none;
  position: absolute;
  top: 5px;
  right: 5px;
  
}

.kolItem {
  width: 60px; 
  height: 30px;
  line-height: 30px;
  background: white;
  border: solid 1px #4297F5;
  text-align: center;
  font: bold 14px Helvetica;
  color: #F35800;
  border-radius: 4px 0 0 4px;
  float: left;
  display: inline-block;
 }

.addItem { 
  outline: none;
  width: 58px;
  height: 34px;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font: bold 14px Helvetica;
  line-height: 30px;
  text-align: center;
  background: #4297F5;
  border-radius: 0 4px 4px 0;
  float: left;
  display: inline-block;
}
.delItem { margin: 16px 0 0 0; padding: 0; cursor: pointer; }
.viewCart { line-height: 0 !important; position: relative; }
.hideCart{ display: none; }
#kosCount { position: absolute; display: block; font: bold 14px Helvetica; text-align: right; right: 16px; top: 8px; width: 52px; border-radius: 50% 50% 50% 50%; }
.addItem:hover { background: #2F8EEC;}
.addItem img { width: 35px; height: 35px; }

.items { margin: 0; padding: 0; width: 790px; height: 390px; overflow-y: scroll; overflow-x: hidden; }
#cartContainer { width:800px; height: 550px; margin: 0; padding: 0; background: #F9F9F9; display: none; }
.tabsContainer { width: 800px; height: 50px; background: #4297F5; }
ul.tabs { width:795px; margin: 5px 0 0 5px; padding:0; list-style: none; float: left;}
ul.tabs li { margin: 0; padding: 0; float:left; }
ul.tabs li a, ul.tabs li a:visited, ul.tabs li a:active, ul.tabs li a:hover { margin: 5px 5px 0 0; padding: 0 20px; font: 14px/40px Segoe UI, Arial; color: #fff; background: #405C76; display: block; text-decoration: none; }
.selectedTab{ font-weight: normal !important; color: #F35800 !important; background: #fff !important; }
.tabContent { height: 590px; background: #fff !important; clear:both; border-top: 0px solid: #fff; border-left:1px solid #ddd; padding:0px; border-right:1px solid #ddd; padding:0px; border-bottom: 1px solid #ddd; padding:0px; position: relative;}
ul#cartList { margin: 0 0 0 10px; padding: 0; list-style: none; float: left; width: 770px; height: auto; }
ul#cartList li { margin-top: 1px; width: 770px; height: 70px; font: bold 12px Arial; color: #222222; background: #EDEEF0; float: left; }

#cartBagContainer { margin: 0; padding: 0;}
#cartBagContainer h3 { margin: 0; padding: 20px 10px; font: normal 36px/40px Century Gothic, Arial; color: #4297F5; }
.bottomBar { width:797px; left: 0; bottom: 0; position: absolute; padding: 10px 0; background: #f1f1f1; }
#cartPrice { width: 797px; height: 49px; line-height: 49px; color: #999; }
.emptyCart { margin: 0; padding: 30px 0; text-align: center; font: italic 16px Georgia, Arial; color: #999;  }
.noteCart { margin: 0; padding: 0 10px 5px 10px; font: italic 16px Georgia, Arial; color: #999;  }
.pImage { margin: 0 5px; display: block; float: left; }
.pTitle { margin: 0; padding-top: 20px; width: 405px; height: 70px; display: block; float: left; font-weight: bold; }
.pKolicina { margin: 0 0 0 5px; padding: 0; width: 105px; height: 70px; line-height: 70px; display: block; float: left; font-weight: bold;}
.pPrice { margin: 0 10px 0 0; padding: 0; width: 100px; height: 70px; line-height: 70px; text-align: right; display: block; float: left; }
.pDelete { margin: 0 10px 0 0; padding: 0; width: 50px; height: 70px; line-height: 70px; text-align: center; display: block; float: right; }
#cijenaUkupno { color: #F35800; }
.naslovForm { margin: 0; padding: 20px 10px 0px 10px; font: normal 36px/40px Century Gothic, Arial; color: #4297F5; }
#cartForm { position: relative; margin:0 10px 10px 10px; }
label { font: bold 14px/22px Arial; color: #555;}
.cartInput { width: 60%; height: 20px; line-height: 20px; display: block; }
#copyright {  padding: 20px 0; font: bold 14px/22px Arial; text-align: center; }
#socialButtons { margin: 0 auto; padding: 0 0 10px 0; text-align: center; }

#formContainer { margin-top: 208px; width: 210px;}
.emailForm { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; height: 30px; line-height: 30px; margin-left: 12px; padding: 0 4px; width: 197px; display: block; outline: none; }
.formButton {  background: none repeat scroll 0 0 #3EABF7; border-radius: 4px; -ms-border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; color: #FFFFFF; display: block; height: 44px; line-height: 44px; margin: 7px 0 0 12px; text-align: center; text-transform: uppercase; width: 205px; outline: none;  }
.formButton:hover { color: #fff; background: #0098E4; }

/* NOVO */
.textCenter { text-align: center; }
.textJustify { text-align: justify; }
.textWhite { color: #fff!important; }
.leftOneBox { text-align: left !important; width: 620px !important; }
.leftOneBox p { padding: 0 !important; }
.bgray { background: #f1f1f1 !important; }
.bgradgray { background-image: linear-gradient(to bottom, rgb(220, 223, 225) 0px, #fff 17%, #fff 83%, rgb(220, 223, 225) 100%); }
.bgradorange { background-image: linear-gradient(0deg, rgb(249, 141, 81) 0%, rgb(228, 80, 71) 100%); }
.section { padding-bottom: 30px; border-bottom: 1px solid #d3d3d3; overflow: hidden !important;  }
.section  h1 { margin: 0; padding: 20px 0; font: lighter 36px/40px Segoe UI; }
.section .podnaslov { font: 13px/22px Verdana; }
.section .podnaslovBig { font: 18px/22px Segoe UI; }
.section .threeboxes { font-size: 16px; /*height: 16px;*/  margin-bottom: 25px; margin-top: 10px; }
.section .threeboxes div:last-child, .section .threeboxes div:first-child { margin-top: 0px; }
.section .threeboxes div { text-align: center; width: 315px; }
.section .threeboxes div h2 { font: 24px/30px Segoe UI; }
.section .threeboxes div p { font: 13px/22px Verdana; padding: 0 10px; }
.section .alarmRight { display: block; /*height: 147px;*/ margin-bottom: 20px; margin-top: 43px; }

#sliderNav { margin: 0; padding-top: 30px; width: 100%; background: #fff; }
#sliderNav  a { display: block; text-align: center; font: 14px/16px Arial; color: #405A77; padding-bottom: 20px; }
#sliderNav  a :hover { color: #F15F0C; }

#navTab { margin: 0; padding: 0; width: 100%; height: 70px; background: #d9d9d9; }
ul.navigoTabs { float: left; list-style: none outside none; margin: 25px 0 0 0; padding: 0; }
ul.navigoTabs li { margin: 0; padding: 0; float:left; }
ul.navigoTabs li a, ul.navigoTabs li a:visited, ul.tabs li a:active { margin: 5px 1px 0 0; padding: 0 20px; font: 14px/40px Helvetica, Arial; color: #fff; background: #405C76; display: block; text-decoration: none; }
ul.navigoTabs li a:hover { background: #F25800; }
.activeTab{ color: #F26522 !important; background: #fff !important; }

/* ------------------------------------------------------------TOOLTIP ----------------------------------------------------------- */
.tooltip { display: inline; position: relative; }
.tooltip:hover:before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: rgba(0, 145, 255, 0.8) rgba(0, 0, 0, 0);
    border-image: none;
    border-style: solid;
    border-width: 0 6px 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}
.tooltip:hover:after {
    background: none repeat scroll 0 0 rgba(0, 145, 255, 0.8);
    border-radius: 5px;
    top: 60px;
    color: #FFFFFF;
    content: attr(data-tooltip);
    font: 16px Arial;
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    width: 50px;
    z-index: 98;
}
/* ------------------------------------------------------------/TOOLTIP ----------------------------------------------------------- */

/* ------------------------------------------------------------PROIZVODI NAV ----------------------------------------------------------- */
.nav-link {
	color:#3d3d3d;
	font-size:128%;
	margin-right:1%;
	border-right:1px solid grey;
	padding-right:1%;
}
.nav-link:hover {
	color:black;
	text-decoration:underline;
	text-decoration-color:orange;
}
#nav_proizvodi {
	width:100%;
	margin:0 auto;
	padding-top:15px;
	margin-bottom:25px;
	background-color: #F0F0F0;
}
.nav-link:last-child {
	border-right:none;
}
/* ------------------------------------------------------------/PROIZVODI NAV ----------------------------------------------------------- */
#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(243, 89, 1, 0.7);
    width: 50px;
    height: 50px;
    display: none;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(243, 89, 1, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}