/*
	Theme Name: 1stwebdesigner HTML5/CSS3 Layout
	Date: March 2013
	Description: Basic HTML5/CSS3 layout built on a responsive framework
	Version: 1.0
	Author: Christian Vasile
	Author URL: http://christianvasile.com
		
*/

/* ===========================
   ======= Body style ======== 
   =========================== */
   

* {
	margin: 0px;
	padding: 0px;
}



body {
	color: #000;
	font-size: 87.5%; /* Base font size: 14px */
	font-family: Calibri;
	margin: 0;
	padding: 0;
	line-height: 1.429;
	text-align: left;
	background-attachment: fixed;
	background-image: url(../images/pozadina.jpg);
	background-repeat: no-repeat;
	background-size:cover
	 }

	
.body {
	clear: both;
	width: 1000px;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
}
	



/* ===========================
   ========= Headings ======== 
   =========================== */
h2 {font-size: 1.571em;}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em}	/* 16px */
h6 {font-size: 1em}		/* 14px */

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
	color: #123C76;
}

/* ===========================
   ======= Anchor style ====== 
   =========================== */
a {
	outline: 0;
	}

a img {
	border: 0px; 
	text-decoration: none;
}

a:link, a:visited {
	color: #123C76;
	padding: 0 1px;
	text-decoration: none;
}

a:hover, a:active {
	color: #0882D9;
	text-decoration: none;
}
.mainHeader {
	background-attachment: scroll;
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.mainHeader img {
	padding-top: 2%;
	margin-left: 5%;
	padding-bottom:2%;
}


/* ===========================
   ===== Main Navigation ===== 
   =========================== */
   #jezici{
	float: right;
}
.mainHeader nav {
	background: #666;
	font-size: 1.143em;
	height: 40px;
	line-height: 30px;
	margin: 0 auto 30px auto;
	text-align: center;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
	
.mainHeader nav ul {
	list-style: none;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-left: 2%;
}

.mainHeader nav ul li {
	float: left; 
	display: inline; 
}

	
.mainHeader nav a:link, .mainHeader nav a:visited {
	color: #fff;
	display: inline-block;
	height: 30px;
	padding: 5px 23px;
	text-decoration: none;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
	color: #fff;
	text-shadow: none !important;
	background-color: #0882D9;
}
	
.mainHeader nav li a {
	
}


/* ===========================
   ======= Content Area ====== 
   =========================== */

.mainContent{
	overflow: hidden;
	line-height: 25px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.content {
	width: 74%;
	float: left;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}

.content_home {
	width: 100%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}
.content_home .work {
	width: 100%;
	margin-left: 0.5%;
	margin-top: 2%;
}
.mainContent .content_home .work img {
	width: 23%;
	height: 25%;
	box-shadow: 2px 2px 5px #888888;
	margin-left: 10px;
	margin-bottom: 2%;
}


.topcontent_home {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-bottom: 3%;
	padding-top: 3%;
	padding-bottom: 3%;
	padding-right: 3%;
	padding-left: 3%;
	background-color: #FFF;
	opacity: 0.8;
	box-shadow: 2px 2px 5px #888888;
}

.topcontent {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-bottom: 3%;
	padding-top: 3%;
	padding-bottom: 3%;
	padding-right: 3%;
	padding-left: 3%;
	background-color: #FFF;
	opacity: 0.8;
	box-shadow: 2px 2px 5px #888888;
}



.bottomcontent {
	background-color: #8A9BB5;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 3% 5%;
	margin-bottom: 3%;
}

.post-info {
	font-style: italic;
	color: #F00;
	font-size: 85%;
}

/* ===========================
   ======== Sidebar ========== 
   =========================== */

.top-sidebar {
	width: 24%;
	float: left;
	margin-bottom: 2%;
	margin-left: 2%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #123C76;
}

.top-sidebar article a img {
	height: 100%;
	width: 100%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
}
.middle-sidebar {
	width: 24%;
	float: left;
	margin-bottom: 2%;
	margin-left: 2%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #123C76;
	
	
}
.middle-sidebar article a img {
	height: 100%;
	width: 100%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
}
.bottom-sidebar {
	width: 24%;
	float: left;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
	 margin-bottom: 2%;
	margin-left: 2%;
}

.bottom-sidebar article a img {
	height: 100%;
	width: 100%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;	
}
/* ===========================
   ========= Footer ========== 
   =========================== */

.mainFooter {
	background-color: #024A94;
	opacity: 0.8;
}

.mainFooter p {
	padding-left: 12%;
	padding-bottom: 2%;
	padding-top: 2%;
	color: #FFF;
}


/* Forms */


		form {
		}
		
			form label {
				display: block;
			}
		
			form input[type="text"],
			form input[type="password"],
			form select,
			form textarea {
	display: block;
	width: 90%;
	padding: 0.75em;
	background: none;
	border: solid 2px rgba(185,186,187,0.25);
	color: #FFF;
	border-radius: 0.5em;
	outline: none;
	background-color: #123C76;
	-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
	appearance: none;
	opacity: 0.7;
	-moz-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
	transition: all 0.2s ease-in-out, color 0.2s ease-in-out;
			}

				form input[type="text"]:hover,
				form input[type="password"]:hover,
				form select:hover,
				form textarea:hover {
				}

				form input[type="text"]:focus,
				form input[type="password"]:focus,
				form select:focus,
				form textarea:focus {
					border-color: #9ac8e9;
				}

			form input[type="text"],
			form input[type="password"],
			form select {
				line-height: 1em;
			}
				
			form textarea {
				min-height: 8em;
			}

			form .formerize-placeholder {
	           color: #FFF !important;
			}

			form ::-webkit-input-placeholder {
				 color: #FFF !important;
			}

			form :-moz-placeholder {
				 color: #FFF !important;
			}

			form ::-moz-placeholder {
				 color: #FFF !important;
			}

			form :-ms-input-placeholder {
				 color: #FFF !important;
			}

			form ::-moz-focus-inner {
				border: 0;
			}
			
	/* Tables */
	
		table {
			width: 100%;
		}
		
			table.default {
				width: 100%;
			}
			
				table.default tbody tr:nth-child(2n+2) {
					background: #f4f4f4;
				}
				
				table.default td {
					padding: 0.5em 1em 0.5em 1em;
				}
				
				table.default th {
					text-align: left;
					font-weight: 900;
					padding: 0.5em 1em 0.5em 1em;
				}
			
				table.default thead {
					background: #444;
					color: #fff;
				}
				
				table.default tfoot {
					background: #eee;
				}
				
				table.default tbody {
				}

	/* Buttons */
		
		.button {
			background-color: #333;
			border: 0;
			border-radius: 3.5em;
			color: #fff;
			cursor: pointer;
			display: inline-block;
			height: 3.5em;
			line-height: 3.5em;
			outline: 0;
			padding: 0 2em 0 2em;
			position: relative;
			text-align: center;
			text-decoration: none;

			-moz-appearance: none;
			-webkit-appearance: none;
			-o-appearance: none;
			-ms-appearance: none;
			appearance: none;

			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			-ms-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
		}

			.button.down {
				width: 5em;
				height: 5em;
				line-height: 4.5em;
				padding: 0;
				background-image: url('images/dark-arrow.svg');
				background-position: center center;
				background-repeat: no-repeat;
				text-indent: -10em;
				overflow: hidden;
			}
			
				.button.down.anchored {
					bottom: 0;
					border-bottom: 0;
					border-radius: 3em 3em 0 0;
					height: 4.5em;
					margin-left: -2.5em;
				}
			
			.button.anchored {
				position: absolute;
				left: 50%;
			}
			
			.button:hover {
	background-color: #123C76;
			}
			
			.button:active {
				background-color: #88b583;
			}

			.button.style2 {
				background-color: transparent;
				border: solid 2px #e5e6e7;
				color: inherit;
			}

				.button.style2:hover {
					background-color: rgba(145,146,147,0.035);
				}
				
				.button.style2.down {
					background-image: url('images/arrow.svg');
				}
				
			
/* ===========================
   ====== Media Queries ====== 
   =========================== */

@media only screen and (min-width : 150px) and (max-width : 780px)
{
	.body {
		clear: both; 
		margin: 0 auto; 
		width: 90%;
		font-size: 90%;
	}
	
	.mainHeader nav {
		background: #666;
		font-size: 1.143em;
		height: 160px;
		line-height: 30px;
		margin-bottom: 0;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
		
	.mainHeader nav ul {
		list-style: none; 
		margin: 0 auto;
		padding-left: 0;
		width: 100%;
		float: left;
	}
	
	.mainHeader nav li {
		margin-left: 0 auto;
		width: 100%;
	}
	
	.mainHeader nav a:link, .mainHeader nav a:visited {
		color: #FFF;
		display: block;
		height: 30px;
		padding: 5px 0;
		text-decoration: none;
	}
	
	.mainHeader nav a:active, .mainHeader nav a:hover,
	.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
		background: #CF5C3F;
		color: #fff;
		text-shadow: none !important;
	}
		
	.mainHeader nav li a {
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
			
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
	
	.mainHeader img {
	width: 100%;
	height: auto;
	margin-top: 3%;
	margin-left: 0 auto;
	}
	
	.mainContent {
	overflow: hidden;
	line-height: 25px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-top: 4%;
	margin-bottom: 2%;
	

	}
	
	.topcontent {
		background-color: #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		padding: 2% 5%;
		margin-bottom: 4%;
	}
		
	.bottomcontent {
		background-color: #FFF;	
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		padding: 2% 5%;
	}

	
	.content {
		width: 100%;
		float: left;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
	}	


	.post-info {
		display: none;
	}
	
	.top-sidebar {
		width: 86%;
		float: left;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		background-color: #FFF;	
		margin-top: 4%;
		margin-left: 0;
		padding: 0 7%;
		margin-bottom: 0;		
	}

	
	.top-sidebar p {
		width: 90%;
	}

	.middle-sidebar {
		width: 86%;
		float: left;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		background-color: #FFF;	
		margin-top: 4%;
		margin-left: 0;
		padding: 0 7%;
		margin-bottom: 0;	
	}
	
	.middle-sidebar p {
		width: 90%;
	}
	
	.bottom-sidebar {
		width: 86%;
		float: left;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;	
		background-color: #FFF;	
		margin-top: 4%;
		margin-left: 0%;
		padding: 0 7%;
		margin-bottom: 1%;
	}

	
	.bottom-sidebar p {
		width: 90%;
	}
		
	.mainFooter {
	width: 100%;
	background-color: #09F;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	color: #FFF;
	margin-top: 2%;
	margin-right: 0;
	margin-bottom: 2%;
	margin-left: 0;
	clear: both;
	}
	
	.mainFooter p {
	width: 86%;
	margin-top: 2%;
	margin-right: auto;
	margin-bottom: 2%;
	margin-left: auto;
	}
	.nivoSlider {
	position:relative;
	width:100%;
	height:auto;
	overflow: hidden;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	max-width: none;
}
.nivo-main-image {
	display: block !important;
	position: relative !important; 
	width: 100% !important;
}