/* Filterable Portfolio Stylesheet */


/* Simple Reset
------------------------------------------------------------ */
html, body, div, h1, h2, ul, li, dl, dd, dt, p { margin: 0; padding: 0; }
ul { list-style: none; }


/* Import Fonts
------------------------------------------------------------ */
@font-face {
    font-family: 'BazarMedium';
    src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/bazar-webfont.eot');
    src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/bazar-webfont.eot?iefix') format('eot'),
         url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/bazar-webfont.woff') format('woff'),
         url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/bazar-webfont.ttf') format('truetype'),
         url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/bazar-webfont.svg#webfont4U38ahXF') format('svg');
    font-weight: normal;
    font-style: normal;
 
}

/* Custom Classes
------------------------------------------------------------ */
.group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */


/* General Styles
------------------------------------------------------------ */
body { font-size: 87.5%; line-height: 1.5em; font-family: Times New Roman, serif; color: #000; background:#7fb1b0 url(../bg.png);}

#wrap { max-width: 940px; min-height: 900px; margin: 0 auto; padding: 1.5em 20px; overflow: hidden; background: url(../wrap-bg.jpg); -moz-box-shadow: 0 0 5px #000; -ms-box-shadow:0 0 5px #000; -webkit-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; }

h1, h2 { font-weight: normal; }
h1 { font-family: 'Playfair Display', serif; font-size: 3em; line-height: 1em; text-transform: uppercase; text-align: center; padding-top: 1em; margin-bottom: 0.33333em; }
h2 { font-size: 1.5em; line-height: 1em; padding-bottom: 0.5em; border-bottom: 1px solid #aaa; margin-bottom: 0.5em; color: #444; }

a { color: #444; text-decoration: none; -moz-transition: 0.4s all linear; -webkit-transition: 0.4s all linear; -o-transition: 0.4s all linear; transition: 0.4s all linear; outline-color: #aaa; }
a:hover { color: #111; }

.credits { font-size:20px;
	letter-spacing: 6px; text-align: center; color: #444; }


/* Filter */
dl { margin-bottom: 3em; color: #777; }
dt, dd { float: left; }
dt { margin-right: 5px; }
.filter li { float: left; }
.filter li:after { content: ""; }
.filter li:last-child:after { content: ""; }
.filter a { padding: 0 20px; color: #777; text-decoration: none; }
.filter a:hover, .current a { color: #fff; background-color: #333 }

/* Portfolio Items */
.portfolio li { float: left; margin-right: 20px; margin-bottom: 2em; border: 1px solid #E9E9E9;}
.portfolio li:nth-child(4n) { margin-right: 0; }
.portfolio a { display: block; border: 3px solid #fff;  text-decoration: none; }
.portfolio img { width: 210px; height: 130px; display: block; }

#crta
{
	width:100%;
	height:7px;
	background:url(../crta.png) repeat-x top left;
	margin-bottom:20px;
	margin-top:20px;
}
#zvijezda
{
	width:100%;
	height:26px;
	background:url(../feature-line.png) no-repeat;
	margin-bottom:20px;
	margin-top:0px;
}
#logo-crta
{
width:100%;
height:78px;
background:url(../logo-crta.png) no-repeat;
margin-bottom:20px;
margin-top:10px;
}

#header
{
	width:940px;
	margin:0 auto;
	height:auto;
	background: url(../narancasto.jpg);
	-moz-box-shadow: 0 0 0 1px #666; -webkit-box-shadow: 0 0 0 1px #666; box-shadow: 0 0 0 1px #666; -ms-box-shadow: 0 0 0 1px #666;
}
#navigacija
{
	width:80%;
	height:50px;
	margin: 0 auto;
	text-align:center;
}
#navigacija a
{
color: #d7ceb2;
	font: 23px 'BazarMedium';
	letter-spacing: 5px;
	text-shadow: 2px 1px 0px #444;
	-ms-text-shadow: 2px 1px 0px #444;
	text-transform: uppercase;
	text-decoration:none;
}
#navigacija a:hover
{
color:white;
}
#col1 {
	float:left;
	width:25%;
	position:relative;
	overflow:hidden;
}
#col2 {
	float:left;
	width:25%;
	position:relative;
	overflow:hidden;
}
#col3 {
	float:left;
	width:25%;
	position:relative;
	overflow:hidden;
}
#col4 {
	float:left;
	width:25%;
	position:relative;
	overflow:hidden;
}
.intro-text
{
	text-align:center;
	font-size:14px;
	font-style:italic;
	letter-spacing:1px;
	color:#444;
}
#o-meni
{
	width:100%;
	height:auto;

}
#o-meni p
{
	text-align:justify;
	line-height:1.8;
	font-size:12pt;
	color:#333;
	text-indent:35px;
	padding:20px;
	padding-bottom:0px;
}
#reference2
{
	width:100%;
	height:auto;
	background: url(../plavo.jpg);
}
#reference2 ul li
{
	margin-left:20px;
	list-style-type: circle;
	color:#111
}
.referenc
{
	padding:20px;
	width:100%;
	line-height:1.8;
}
.logo
{
	text-decoration:none;
	color: #d7ceb2;
		font: 40px 'BazarMedium';
	letter-spacing: 10px;
	text-shadow: 2px 2px 0px #333;
	-ms-text-shadow: 2px 2px 0px #333;
}
.logo a
{
	text-decoration:none;
	color: #d7ceb2;
		font: 40px 'BazarMedium';
	letter-spacing: 10px;
	text-shadow: 2px 2px 0px #333;
	-ms-text-shadow: 2px 2px 0px #333;
}
#footer
{
	width:940px;
	height:365px;
	background: url(../narancasto.jpg);
	-moz-box-shadow: 0 0 0 1px #666; -webkit-box-shadow: 0 0 0 1px #666; box-shadow: 0 0 0 1px #666; -ms-box-shadow: 0 0 0 1px #666;
	position:absolute;
	z-index:-1;
	margin:0 auto;
	left:50%;
	margin-left:-470px;
	text-align:center;
}
.info
{
	line-height:2;
	font-size:16px;
	color:#333;
}
#back-top { position: fixed; bottom: 50%; margin-left: 50%; left:-521px; }
#back-top a {
    text-decoration: none;
    text-align: center;
    padding-top: 8px;
    font-size: 28px;
    width: 30px;
    height: 33px;
    display: block;
	background:url(../wrap-bg.jpg);
	z-index:-1;
    color: #666;
    -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease;
	border:1px solid #666;
	border-right:none;
}
#back-top a:hover { color: #333;}