/*------------------------------------------------------------------
[Table of contents]

1. Body
2. Structure
	2.1. Header / #header
	2.2. Left Container / #left-container
	2.3. Right Container / #right-container
	2.4. Footer / #footer
4. Navigation
	4.1. Left navigation / #nav-left
	4.2. Bottom navigation / #nav-bottom 
5. Boxes 
6. Links
6. Headings
7. Content 
8. Lists
9. Images
10. Common classes 
11. Slideshow
12. Responsive Web

-------------------------------------------------------------------

[Color codes]

BACKGROUND
Background: 	#ece9d8 (light yellow)
Header:			#474f49 (grey)
Left content: 	#d2d0c1 (gray yellow)
Right content:	#ece9d8 (light yellow)
Footer:			#474f49 (grey)

TEXT
Navigation:		#5e2836 (dark red)
Footer: 		#ffffff (white)
Content:		#000000 (black)
h1:				#000000 (black)
h2: 			#000000 (black)

-------------------------------------------------------------------

[Typography]

Body copy:			14px Open Sans, Helvetica, Arial, Trebuchet MS, sans-serif;
Heading h1:			20px Open Sans, Helvetica, Arial, Trebuchet MS, sans-serif;
Heading h2:			18px Open Sans, Helvetica, Arial, Trebuchet MS, sans-serif;
Left navigation:	14em Open Sans, Helvetica, Arial, Trebuchet MS, sans-serif;
Bottom navigation:	14em Open Sans, Helvetica, Arial, Trebuchet MS, sans-serif;
Footer:				12px Open Sans, Helvetica, Arial, Trebuchet MS, sans-serif;

-------------------------------------------------------------------*/



/* -----------------------------------*/
/* >>>>>>>>>>>>> Body <<<<<<<<<<<<<<<-*/
/* -----------------------------------*/

html {
	border: 0;
	margin: 0;
	padding: 0;
	font-size: 100%;
}

body {
	border: 0;
	margin: 0;
	padding: 0;
	background-color: #fff;
	color: #000;
	font-family: 'Open Sans', Helvetica, Arial, 'Trebuchet MS', sans-serif;
	font-size: 14px;
	font-weight: 400;
}


/* -----------------------------------*/
/* >>>>>>>>>>> Structure <<<<<<<<<<<<-*/
/* -----------------------------------*/

#parent {padding: 5% 0;}

#child {padding: 3% 0;}

#container {
	width: 900px;
	margin: 0 auto;
}

#container2 {
	width: 750px;
	margin: 0 auto;
}

#header {
	width: 676px;
	height: 24px;
	background-color: #474f49;
	border-bottom: 2px solid #fff;
}

#header_2 {
	width: 900px;
	height: 24px;
	background-color: #474f49;
	border-bottom: 2px solid #fff;
}

#left_container {
	float: left;
	width: 676px;
}

#left_container_2 {
	float: left;
	width: 900px;
}

#right_container {
	float: left;
	width: 160px;
	margin: 21px 0 0 18px;
}

#left_content {
	float: left;
	width: 186px;
	height: 556px;
	background-color: #d2d0c1;
}

#right_content {
	float: left;
	width: 490px;
	height: 556px;
	background-color: #ece9D8;
}

#content {
	width: 676px;
	height: auto;
	background-color: #ece9d8;
}

#content_2 {
	width: 900px;
	height: auto;
	background-color: #ece9d8;
}

#wrapper {
	width: 555px;
	color: #000;
	margin: 0 auto;
	padding: 10px 0 0;
}

#footer {
	clear: both;
	width: 676px;
	height: 30px;
	margin: 0 0 5px;
	line-height: 30px;
	background-color: #474f49;
	color: #fff;
	border-top: 2px solid #fff;
}

#footer_2 {
	clear: both;
	width: 900px;
	height: 30px;
	margin: 0 0 5px;
	line-height: 30px;
	background-color: #474f49;
	color: #fff;
	border-top: 2px solid #fff;
}


/* -----------------------------------*/
/* >>>>>>>>>>> Navigation <<<<<<<<<<<-*/
/* -----------------------------------*/

#nav-left {width: 186px;}

	#nav-left li {
		padding: 70px 0 0;
		list-style-type: none;
		text-align: center;
	}

		#nav-left li a {
			color: #5e2836;
			font-size: 14px;
			text-decoration: none;
			font-weight: 700;
		}

			#nav-left li a:hover {text-decoration: underline;}

			#nav-left li a:active {text-decoration: underline;}

#nav-bottom {
	padding: 50px 0;
	text-align: center;
}

	#nav-bottom li {
		padding: 0 0 12px;
		list-style-type: none;
	}

		#nav-bottom li a {
			color: #5e2836;
			text-decoration: none;
			font-size: 16px;
		}

			#nav-bottom li a:hover {text-decoration: underline;}


/* -----------------------------------*/
/* >>>>>>>>>>>>> Boxes <<<<<<<<<<<<<<-*/
/* -----------------------------------*/

.box {
	width: 450px;
	margin: 0 auto;
	padding: 85px 0 200px;
}

.box2 {
	text-align: center;
	width: 676px;
	height: auto;
	margin-bottom: 200px;
}

.box3 {
	width: 450px;
	margin: 0 auto;
	padding: 20px 0;
}

.box4 {
	width: 90%;
	height: auto;
	margin: 0 auto;
	padding: 20px 0;
}

.image-center {
	width: 490px;
	height: 262px;
	text-align: center;
	margin-top: 40px;
}

/* -----------------------------------*/
/* >>>>>>>>>>>>> Links <<<<<<<<<<<<<<-*/
/* -----------------------------------*/

a {
	color: #5e2836;
	text-decoration: none;
}

.heading-link {
	font-size: 20pt;
	text-align: center;
}

.mail-link { /* bivši a */
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
}

	.mail-link:hover {color: #5e2836;}

.title-link {font-size: 20pt;}


/* -----------------------------------*/
/* >>>>>>>>>>>> Headers <<<<<<<<<<<<<-*/
/* -----------------------------------*/

h1 {
	color: #000;
	font-size: 20px;
	font-weight: 400;
	text-align: center;
}

	#right_content h1 {
		text-align: right;
		margin: 100px 0 0;
		margin-right: 70px;
 	}

 	#wrapper h1 {
		padding: 50px 0 0;
	}

	.box h1 {
		padding: 10px 0 50px;
 	}

	.box2 h1 {
		padding: 50px 0 80px;
 	}

h2 {
	color: #000;
	font-size: 18px;
	font-weight: 400;
	display: block;
	padding: 0 0 5px;
	text-align: center;
}

	#wrapper h2 {
		padding: 50px 0 0;
	}

	.box h2 {
		margin: 50px 0 0;
 	}

h3 {
	color: #000;
	font-size: 16px;
	font-weight: 400;
	display: block;
	padding: 0 0 5px;
	text-align: center;
}

	.box h3 {
		color: #474f49;
 	}

	.box3 h3 {
		padding: 0 0 50px;
	}

h4 {
	font-style: italic;
	font-size: 16px;
	text-align: center;
	color: #000;
	padding: 85px 0 140px;
}


/* -----------------------------------*/
/* >>>>>>>>>>>> Content <<<<<<<<<<<<<-*/
/* -----------------------------------*/

p {
	color: #000;
	font-size: 16px;
	margin: 0;
	padding: 0 5px 8px;
}

	#wrapper p {
		padding: 20px 0 0;
 	}

.text2 {
	width: 340px;
	color: #000;
	text-align: center;
	font-size: 16px;
	margin: 20px auto 0;
}

.text3 {
	width: 340px;
	color: #000;
	text-align: center;
	font-size: 15px;
	margin: 10px auto 0;
	padding-bottom: 80px;
}

#header p, #header_2 p {
	color: #fff;
	text-align: right;
	font-size: 10pt;
	line-height: 24px;
}


/* -----------------------------------*/
/* >>>>>>>>>>>>> Lists <<<<<<<<<<<<<<-*/
/* -----------------------------------*/

.cijena-lista {color: #000; font-size: 14px;}

	.cijena-lista li {
		padding-top: 5px;
		padding-bottom: 5px;
		margin-left: 20px;
	}


/* -----------------------------------*/
/* >>>>>>>>>>>>> Images <<<<<<<<<<<<<-*/
/* -----------------------------------*/

.box img .slika {margin: 0 -20px;}

.box2 img {margin: 0 auto;}

.box img, .box3 img {
	text-align: center!important;
	display: block;
	margin: 20px auto 0!important;
}


/* -----------------------------------*/
/* >>>>>>>>> Common classes <<<<<<<<<-*/
/* -----------------------------------*/

.style1 {
	font-size: 12px;
	color: #fff;
}

.style4 {color: #000;}

.italic {font-style: italic;}

.space {margin-bottom: 250px;}

.image-middle {vertical-align: middle;}

.align-center {text-align: center;}

.page-title{display: none;}

.left {
	float: left;
	width: 50%;
	height: 250px;
	text-align: center;
	margin-bottom: 50px;
}


.right {
	float: right;
	width: 50%;
	height: 250px;
	text-align: right;
	vertical-align: middle;
	margin-bottom: 50px;
}

ul {
	margin-left: 25px;
}


/* -----------------------------------*/
/* >>>>>>>>>>>> Slideshow <<<<<<<<<<<-*/
/* -----------------------------------*/

#slideshow1,#slideshow2,#slideshow3,#slideshow4,#slideshow5,#slideshow6,#slideshow7,#slideshow8,#slideshow9,#slideshow10,#slideshow12,#slideshow13,#slideshow14,#slideshow15,#slideshow16,#slideshow17,#slideshow18,#slideshow19,#slideshow20,#slideshow21,#slideshow22,#slideshow23,#slideshow24,#slideshow25,#slideshow26,#slideshow27,#slideshow28,#slideshow29,#slideshow30,#slideshow31,#slideshow32,#slideshow33,#slideshow34,#slideshow35,#slideshow36,#slideshow37,#slideshow38,#slideshow39,#slideshow40,#slideshow41,#slideshow42,#slideshow43,#slideshow46,#slideshow47,#slideshow48,#slideshow49,#slideshow50,#slideshow51,#slideshow52,#slideshow53,#slideshow54,#slideshow55,#slideshow56,#slideshow57,#slideshow58,#slideshow59,#slideshow60,#slideshow61,#slideshow62,#slideshow63,#slideshow64 {
	position: relative;
	width: 350px;
	height: 262px;
	clear: both;
	text-align: center;
	margin: 0 auto;
 }

#slideshow44,#slideshow45,#slideshow11 {
	position: relative;
	width: 262px;
	height: 350px;
	clear: both;
	text-align: center;
	margin: 0 auto;
 }

#slideshow1 IMG,#slideshow2 IMG,#slideshow3 IMG,#slideshow4 IMG,#slideshow5 IMG,#slideshow6 IMG,#slideshow7 IMG,#slideshow8 IMG,#slideshow9 IMG,#slideshow10 IMG,#slideshow11 IMG,#slideshow12 IMG,#slideshow13 IMG,#slideshow14 IMG,#slideshow15 IMG,#slideshow16 IMG,#slideshow17 IMG,#slideshow18 IMG,#slideshow19 IMG,#slideshow20 IMG,#slideshow21 IMG,#slideshow22 IMG,#slideshow23 IMG,#slideshow24 IMG,#slideshow25 IMG,#slideshow26 IMG,#slideshow27 IMG,#slideshow28 IMG,#slideshow29 IMG,#slideshow30 IMG,#slideshow31 IMG,#slideshow32 IMG,#slideshow33 IMG,#slideshow34 IMG,#slideshow35 IMG,#slideshow36 IMG,#slideshow37 IMG,#slideshow38 IMG,#slideshow39 IMG,#slideshow40 IMG,#slideshow41 IMG,#slideshow42 IMG,#slideshow43 IMG,#slideshow44 IMG,#slideshow45 IMG,#slideshow46 IMG,#slideshow47 IMG,#slideshow48 IMG,#slideshow49 IMG,#slideshow50 IMG,#slideshow51 IMG,#slideshow52 IMG,#slideshow53 IMG,#slideshow54 IMG,#slideshow55 IMG,#slideshow56 IMG,#slideshow57 IMG,#slideshow58 IMG,#slideshow59 IMG,#slideshow60 IMG,#slideshow61 IMG,#slideshow62 IMG,#slideshow63 IMG,#slideshow64 IMG {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8;
 }

#slideshow1 IMG.active,#slideshow2 IMG.active,#slideshow3 IMG.active,#slideshow4 IMG.active,#slideshow5 IMG.active,#slideshow6 IMG.active,#slideshow7 IMG.active,#slideshow8 IMG.active,#slideshow9 IMG.active,#slideshow10 IMG.active,#slideshow11 IMG.active,#slideshow12 IMG.active,#slideshow13 IMG.active,#slideshow14 IMG.active,#slideshow15 IMG.active,#slideshow16 IMG.active,#slideshow17 IMG.active,#slideshow18 IMG.active,#slideshow19 IMG.active,#slideshow20 IMG.active,#slideshow21 IMG.active,#slideshow22 IMG.active,#slideshow23 IMG.active,#slideshow24 IMG.active,#slideshow25 IMG.active,#slideshow26 IMG.active,#slideshow27 IMG.active,#slideshow28 IMG.active,#slideshow29 IMG.active,#slideshow30 IMG.active,#slideshow31 IMG.active,#slideshow32 IMG.active,#slideshow33 IMG.active,#slideshow34 IMG.active,#slideshow35 IMG.active,#slideshow36 IMG.active,#slideshow37 IMG.active,#slideshow38 IMG.active,#slideshow39 IMG.active,#slideshow40 IMG.active,#slideshow41 IMG.active,#slideshow42 IMG.active,#slideshow43 IMG.active,#slideshow44 IMG.active,#slideshow45 IMG.active,#slideshow46 IMG.active,#slideshow47 IMG.active,#slideshow48 IMG.active,#slideshow49 IMG.active,#slideshow50 IMG.active,#slideshow51 IMG.active,#slideshow52 IMG.active,#slideshow53 IMG.active,#slideshow54 IMG.active,#slideshow55 IMG.active,#slideshow56 IMG.active,#slideshow57 IMG.active,#slideshow58 IMG.active,#slideshow59 IMG.active,#slideshow60 IMG.active,#slideshow61 IMG.active,#slideshow62 IMG.active,#slideshow63 IMG.active,#slideshow64 IMG.active {z-index: 10;}

#slideshow1 IMG.last-active,#slideshow2 IMG.last-active,#slideshow3 IMG.last-active,#slideshow4 IMG.last-active,#slideshow5 IMG.last-active,#slideshow6 IMG.last-active,#slideshow7 IMG.last-active,#slideshow8 IMG.last-active,#slideshow9 IMG.last-active,#slideshow10 IMG.last-active,#slideshow11 IMG.last-active,#slideshow12 IMG.last-active,#slideshow13 IMG.last-active,#slideshow14 IMG.last-active,#slideshow15 IMG.last-active,#slideshow16 IMG.last-active,#slideshow17 IMG.last-active,#slideshow18 IMG.last-active,#slideshow19 IMG.last-active,#slideshow20 IMG.last-active,#slideshow21 IMG.last-active,#slideshow22 IMG.last-active,#slideshow23 IMG.last-active,#slideshow24 IMG.last-active,#slideshow25 IMG.last-active,#slideshow26 IMG.last-active,#slideshow27 IMG.last-active,#slideshow28 IMG.last-active,#slideshow29 IMG.last-active,#slideshow30 IMG.last-active,#slideshow31 IMG.last-active,#slideshow32 IMG.last-active,#slideshow33 IMG.last-active,#slideshow34 IMG.last-active,#slideshow35 IMG.last-active,#slideshow36 IMG.last-active,#slideshow37 IMG.last-active,#slideshow38 IMG.last-active,#slideshow39 IMG.last-active,#slideshow40 IMG.last-active,#slideshow41 IMG.last-active,#slideshow42 IMG.last-active,#slideshow43 IMG.last-active,#slideshow44 IMG.last-active,#slideshow45 IMG.last-active,#slideshow46 IMG.last-active,#slideshow47 IMG.last-active,#slideshow48 IMG.last-active,#slideshow49 IMG.last-active,#slideshow50 IMG.last-active,#slideshow51 IMG.last-active,#slideshow52 IMG.last-active,#slideshow53 IMG.last-active,#slideshow54 IMG.last-active,#slideshow55 IMG.last-active,#slideshow56 IMG.last-active,#slideshow57 IMG.last-active,#slideshow58 IMG.last-active,#slideshow59 IMG.last-active,#slideshow60 IMG.last-active,#slideshow61 IMG.last-active,#slideshow62 IMG.last-active,#slideshow63 IMG.last-active,#slideshow64 IMG.last-active {z-index: 9;}


/* -----------------------------------*/
/* >>>>>>>>>> Responsive <<<<<<<<<<<<-*/
/* -----------------------------------*/

nav {
	width: 186px;
	height: 556px;
	background-color: #D2D0C1;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 14px;
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

nav ul li {
	padding-top: 70px;
}

nav a{
	font-size: 1em;
}

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}  

nav ul li a {
	text-decoration: none;
	color: #603;
}

nav a:hover, nav a:active {  
    text-decoration: underline;
} 

nav a#pull {  
    display: none;  
}

@media only screen  and (max-width : 1024px) {
	.page-title{display: none;}
	#parent {padding: 0;}

	#child {padding: 0;}

	#container {
		width: 100%;
		margin: 0 auto;
	}

	#container2 {
		width: 100%;
		margin: 0 auto;
	}

	#header {
		width: 100%;
		height: 24px;
		background-color: #474f49;
		border-bottom: 2px solid #fff;
	}

	#left_container {
		float: left;
		width: 100%;
	}

	#right_container {
		float: left;
		width: 160px;
		margin: 21px 0 0 18px;
	}

	#left_content {
		float: left;
		width: 30%;
		height: 556px;
		background-color: #d2d0c1;
	}

	nav {width: 100%;}

	#right_content {
		float: left;
		width: 70%;
		height: 556px;
		background-color: #ece9D8;
	}

		#right_content h1 {
			margin: 0;
			margin-top: 100px;
			text-align: center;
	 	}

	 	.image-center {
			width: 100%;
			height: 262px;
			text-align: center;
			margin-top: 40px;
		}

	#content {
		width: 100%;
		height: auto;
		background-color: #ece9d8;
	}

	#wrapper {
		width: 90%;
		color: #000;
		margin: 0 auto;
		padding: 10px 0 0;
	}

	#footer {
		clear: both;
		width: 100%;
		height: 30px;
		margin: 0 0 5px;
		line-height: 30px;
		background-color: #474f49;
		color: #fff;
		border-top: 2px solid #fff;
	}

}


@media only screen and (max-width : 660px) {
	.page-title{display: none;}
	#parent {padding: 0;}

	#child {padding: 0;}

	#container {
		width: 100%;
		margin: 0 auto;
	}

	#container2 {
		width: 100%;
		margin: 0 auto;
	}

	#header {
		width: 100%;
		height: 24px;
		background-color: #474f49;
		border-bottom: 2px solid #fff;
	}

	#left_container {
		float: left;
		width: 100%;
	}

	#right_container {
		float: left;
		width: 160px;
		margin: 21px 0 0 18px;
	}

	#left_content {
		width: 100%;
		height: auto;
		background-color: #d2d0c1;
	}

	nav {
		width: 100%;
		height: auto;
	}

	nav ul {
		width: 100%;
		display: block;
		height: auto;
	}

	nav li {
		padding: 0;
		width: 50%;
		height: 40px;
		line-height: 40px;
		float: left;
		position: relative;
	}

	nav ul li{
		padding: 0;
	}

	nav li a {
		display: block;
		border-bottom: 1px solid #603;
		border-right: 1px solid #603;
		box-sizing:border-box;
	}

	nav li a:hover, nav a:active {  
    	background-color: #603;  
    	color: #fff;
    	text-decoration: none;
	} 

	nav li:nth-child(2) a {
		border-right: 0;
	}

	nav li:nth-child(4) a {
		border-right: 0;
	}

	nav li:nth-child(6) a {
		border-right: 0;
	}


	nav a {
		text-align: left;
		width: 100%;
		text-indent: 30px;
	}

	#right_content {
		width: 100%;
		height: 556px;
		background-color: #ece9D8;
	}

		#right_content h1 {
			margin: 0;
			margin-top: 100px;
			text-align: center;
	 	}

	 	.image-center {
			width: 100%;
			height: auto;
			text-align: center;
			margin-top: 40px;
		}

		.image-middle {
			max-width: 100%;
			height: auto;
		}

	#content {
		width: 100%;
		height: auto;
		background-color: #ece9d8;
	}

	#wrapper {
		width: 90%;
		color: #000;
		margin: 0 auto;
		padding: 10px 0 0;
	}

	#footer {
		clear: both;
		width: 100%;
		margin: 0;
		padding: 0;
		height: auto;
		background-color: #474f49;
		color: #fff;
		border-top: 2px solid #fff;
	}
	#footer .align-center{
    	margin: 10px 10px 0px 10px;
    	padding-bottom: 10px;
    	line-height: 25px;
    }
}

@media only screen and (max-width: 480px) {
	html,body { 
    	height:100%;
	}

	#left_container{
		height:100vh;
		background-color: #ece9D8;
	}

	#header{
		height: 50px;
		border-bottom: 0;
	}
	#header p {
		display: none;
	}

	#content {height: auto;}

	.heading-link{display: none;}
	.page-title{
		display: block;
	}
	.page-title{
		height: 50px;
		line-height: 50px;
	}

	.page-title a{
		color: #fff;
	}
	nav{
		border-bottom: 0;
		background-color: #474f49;
	}

	nav ul{
		display: none;
		height: auto;
	}

	nav ul li a {
		color: #fff; 
	}
	nav a#pull {  
        display: block;  
        background-color: #603;  
        color: #fff;
        width: 100%;  
        height: 50px;
        line-height: 50px;
        text-decoration: none;
        position: relative;  
    }
    nav a#pull:after {  
        content:"";  
        background: url('../img/nav-icon.png') no-repeat;  
        width: 30px;  
        height: 30px;  
        display: inline-block;   
        float: right;
        margin-top: 15px;
        margin-right: 10px;
    } 

    #right_content{
		height: auto;
	}

	.image-center, .image-middle{
		padding: 0;
		margin: 0;
		display: block;
    	margin: auto;
    	height: auto;
    	max-height: 100%;
    	width: auto;
    	width: 100%;
	}

    .image-center a{;
    	width: 100%;
    }
    #footer{
    	position: fixed;
    	bottom: 0;
    	margin-bottom: 0;
    	border: 0;
    }

    #footer .align-center{
    	padding: 0;
    	margin: 10px 10px 10px 10px;
    	line-height: 17px;
    }
}

@media only screen and (max-width : 420px) { 
	#header p {
		display: none;
	} 

	#left_container{
		width: 100%;
	}

	.box3{
		width: 100%;
	}

	.box3 img{
		width: 90%;
	}

	.text3{
		width: 90%;
	}
    nav li {  
        display: block;  
        float: none;  
        width: 100%;  
    }  
    nav li a {  
          
        border-right: none;
    }  
}