@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,100&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300&subset=latin,latin-ext);

/*******************
@@ reset
*******************/
*{margin:0; padding:0; box-sizing: border-box;}

/******************* 
@@ body - html 
******************/
body{
	background:#fff;
	}
img{
	max-width:100%;
	height:auto;
	}
a img{
	border:none;
	}
h1{
	line-height:1.1em; 
	padding-bottom:0.5em;
	font-size:1.3em;
	font-weight:400;
	font-family: 'Roboto', sans-serif;
	color:#333;
	}
small{
	font-size:0.80em;
	color:#333;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:300;
	}
figcaption {
    color: #555;
    font-family: 'Roboto', sans-serif;
    font-size: 0.85em;
    font-style: italic;
    font-weight: 300;
    text-align: left;
	padding-bottom: 0.8em;
	}

/******************* 
@@ box - pravila
******************/
.boxes:after {
    content: "";
    clear: both;
    display: block;
	}
.box {
    float: left;
    width: 100%;
	}
/*
	.box-8 {width: 8.33%;}
    .box-16 {width: 16.66%;}
    .box-25 {width: 25%;}
    .box-33 {width: 33.33%;}  /* width 33% 
    .box-40 {width: 41.66%;} /* width 40% 
    .box-50 {width: 50%;}	/* width 50% 
    .box-60 {width: 58.33%;} /* width 60% 
    .box-8 {width: 66.66%;}
    .box-75 {width: 75%;}
    .box-10 {width: 83.33%;}
    .box-11 {width: 91.66%;}
    .box-100 {width: 100%;}
*/
.box-30 {width: 30%;}
.box-33 {width: 33.33%;}
.box-50 {width: 50%;}
.box-70 {width: 70%;}

.content{
	margin:10px; padding:5px;
	}
/*********************
@@ page width
**********************/
.center-content{
	margin:0 auto;
	max-width:900px;
	}
.clear-fix{
	display:block;
	width:100%;
	clear:both;
	}
	
/******************* 
@@ a href - pravila
******************/
a:link{text-decoration:underline;color:#333;}
a:visited{text-decoration:none;color:#333;}
a:hover{text-decoration:underline;color:#000;}

/******************* 
@@ header
******************/
.header{
	background-image:url('../img/header-back.jpg');
	background-repeat:no-repeat;
	background-position:center center;
	min-height:200px;
	background-size:cover;
	}

/******************* 
@@ navigactija top
******************/
.nav{
	background-color:#F0EEE3;
	}
.nav ul {
	list-style-type:none;
	margin-left:1.5em;
	}
.nav li {
    display:inline;
	font-family: 'Roboto', sans-serif;
	line-height:2.2em;
	font-size:0.85em;
	letter-spacing:1px;
	font-weight:400;
	}
.nav a:link{
	color:#000;
	text-decoration:none;
	text-transform:uppercase;
	}
.nav a:visited{
	color:#333;
	}
.nav a:hover{
	color:#595959;
	}
.nav li:after{content: "\ \ /";}
	
/******************* 
@@ after header
******************/
.after-header{
	background-color:#F1E0B8;
	}
.name h2{
	color:#000;
	font-weight:300;
	line-height:2.3em;
	padding-left:1.0em;
	font-size:1.4em;
	letter-spacing:1px;
	font-family: 'Roboto Condensed', sans-serif;
	}
.name a:link{
	text-decoration:none;
	}

/******************* 
@@ breadcrumbs
******************/
.breadcrumbs a:link{
	text-decoration:none;
	}
.breadcrumbs{
	color:#333;
	font-weight:300;
	line-height:0.80em;
	padding-right:1.0em;
	font-size:0.95em;
	letter-spacing:1px;
	font-family: 'Roboto Condensed', sans-serif;
	font-style:italic;
	padding-bottom:15px;
	text-align:right;
	text-transform:lowercase;
	}

/******************* 
@@ sidebar left
******************/
.sidebar-left p{
	font-family: 'Roboto Condensed', sans-serif;
	color:#595959;
	padding-bottom:10px;
	font-weight:300;
	font-size:1.0em;
	}

/******************* 
@@ content middle
******************/
.content-middle p{
	line-height:1.3em; 
	padding-bottom:0.5em;
	font-size:1.0em;
	font-weight:400;
	font-family: 'Roboto', sans-serif;
	color:#333;
	}
p.upute{
	line-height:1.3em; 
	padding-bottom:0.5em;
	font-size:0.90em;
	font-weight:300;
	font-family: 'Roboto', sans-serif;
	color:#333;
}
p.upute a:link{
	font-weight:400;
}
.content-middle ul{
	margin:2% 0 2% 6%;
	}
.content-middle li{
	list-style-type: decimal;
	line-height:1.5em;
	list-style-position:outside;
	font-size:1.0em;
	font-weight:400;
	font-family: 'Roboto', sans-serif;
	padding-left:10px;
	color:#333;
	}
.content-middle img{
	padding: 6px 8px 6px 0;
	}
.image-center{text-align:center;}
/******************* 
@@ footer
******************/
.footer{
	border-top:solid #F1E0B8 1px;
	}
.footer li{
	display:inline-block;
	text-transform:lowercase;
	font-size:0.80em;
	color:#333;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:300;
}
.footer li:after{content: "\ \ /";}
.footer a{text-decoration:none;}

/******************
@ back to top
*******************/
#toTop {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
	width: 55px;
    height: 55px;
    background-image: url('../img/to-top.png');
    background-repeat: no-repeat;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}
#toTop:hover {
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}
/*******************************************************
@@  media responsive ubacen u shourtcodes.php / plugin
********************************************************/
.media {
    position: relative;
    padding-bottom: 56.25%;
    /*padding-top: 30px;  ovo ti ne treba za novi youtube
	height: 0; 
	overflow: hidden;*/
	}
.media iframe, .media object, .media embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border:none;
	}
	
/******************* 
@@ contact-form
******************/	
#contactus input, textarea, submit{
	border:solid 1px #e2e2e2;
	color:#333;
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	font-size:0.90em;
	}
.text{
	width:100%;
	line-height:2.7em; 
	height: 2.7em; /* ie -> hack */
	padding:5px 0px 5px 0px;
	text-align:left;
	text-indent:5px;
	}
.text-poruka{
	width:100%;
	line-height:1.5em;
	text-align:left;
	text-indent:5px;
	}
#contactus .upload{
    width: 65%;
    margin: auto;
    cursor: pointer;
	font-size:0.8em;
    border: 0;
    height: 30px;
    outline: 0;
	}

.posalji{
	width:60%;
	text-align:center; 
	margin-top:0.95em;
	line-height:2.5em; 
	padding:5px 0px 5px 0px;
	cursor:pointer;
	font-size:2.8em;
	background-color:transparent; /* reset default style */
	}
#contactus .spmhidip{display:none; width:10px; height:3px;}
#contactus .error {
	font-family: 'Roboto', sans-serif;
	color: #CE1209;
	padding-bottom:10px;
	font-size:0.85em;
	}
#contactus input[type="text"]:focus,textarea:focus{
	color: #444444;
	border: 1px solid #d2d2d2;
	}
/******************* 
@@ mobile... style
******************/
@media (max-width: 768px) {
	.box {display:block;width:100%;float:none;}
	.boxes{padding-top:50px;}
	.name h2{padding:0.20em 0 0.20em 1.0em;letter-spacing:inherit;font-size:100%;}
	 h1{font-size:105%;}
	.content-middle p,figcaption {font-size:90%;}
	.sidebar-left{border-top:solid #F1E0B8 1px;}
	.sidebar-left p{text-align:center;font-size:95%;padding-bottom:5px;}
	.content-middle ul{margin-left:10%;}
	.content-middle li{font-size:90%;padding-left:5px;}
	.footer{text-align:center;}
	/* sidebar ide poslije glavnog sadrzaja */
	.reorder{display: flex; display: -webkit-flex; /* Safari */ flex-flow: column;}
	.sidebar-left{order:2;}