body {
	font-family: Garamond, sans-serif;
	text-align: center;
}

/*todo does this do anything */
header {
	padding: 8em 10em 15em;
}

h1 {
	padding-left: 1em;
	font-size: 3em;
	color: #353434;
  	font-weight: 100;

    text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             	 #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             	 #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             	 #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

.header-desc {
	font-size: 20px;
	color: lightgray;
}

h3,
h4 {
	background-color: black;
	color: lightgrey;
	padding: 1em;
	width: 80%;
	margin: -1.1em auto 0;
}

h3 {
	font-size: 2.5em;
}

.dan,
.left{
	text-align: left;
}

.logo {
	width: 12em;
  	height: 13.2em;
	padding: 0 0.5em 0 5%;
}

.image {
	padding: 4em 0 20em;
	background-attachment: fixed;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	margin: 0em -10px 0.1em;
}

.content {
	padding: 0.5em 2em;
}


td {
	padding: 0.1em 0.7em;
}

table {
	margin: 0 auto;
	padding: 1em;
}

iframe {
	width: 100%;
	height: 500px;
}

.links,
footer,
header,
.info {
	display: flex;
	justify-content: space-around;
}

.info details {
	max-width: 30%;
}

.o-nas {
	margin: 30px auto;
	width: 60%;
}

.o-nas summary {
	font-size: 20px;
	font-weight: 900;
}

.ncd-img {
 	width: 80px;
 	margin: 1em  auto -1.1em;
}

#map {
	height: 15em;
	width: 80%;
	border: 2px solid;
	margin: 1em auto 2em;
}

nav a,
footer a {
	text-decoration: none;
	color: lightgray;
}

a:hover {
	color: rgb(57, 97, 211);
}

.text {
	color: black;
	margin-bottom: -10px;
}

.narocanje {
	max-width: 600px;
	margin: -0.5em auto 1em;

}

nav {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	padding: 1em 2em;
	margin-left: -0.6em;
	margin-right: -0.6em;
	background-color: black;
	justify-content: space-between;
	text-align: center;
	z-index: 100;
}


.special {
	background-color: red;
	color: white;
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 0.5em;
	padding: 1em 2em;
	background-color: black;
	justify-content: space-between;
	text-align: center;
	color: #f9e6d8;
}

.author {
	padding-left: 1em;
}

.small-yes {
	display: none;
}

.delovni-cas {
	padding-top: 40px;
	padding-bottom: 40px;
}

#top,
#delovni-cas,
#narocanje,
#kje-smo,
#dodatne-info {
    padding-top: 4em;
    margin-top: -4em;
}

.trees {
	background-image: url(img/trees.png);
}

.sea {
	background-image: url(img/sea.png);
}

.field {
	background-image: url(img/field.png);
}

.peer {
	background-image: url(img/peer.png);
}

.steps {
	background-image: url(img/steps.jpg);
	image-orientation: 90deg;
}



@media screen and (max-width: 640px) {

	nav {
		padding: 1em 0.5em
	}

	nav a {
		padding: 5px;
	}

	.small-no {
		display: none;
	}

	.small-yes {
		display: table;
	}

	.info {
		display: block;
		padding: 0;
	}

	details
	{
		max-width: 80%;
		margin: 1em auto;
	}

	h1 {
		font-size: 2em;
		padding-left: 0;
		max-width: 60%;
	}

	.logo
	{
		padding-left: 0;
	}


	.image {
		max-width: 110%;
		background-attachment: scroll;
	}

	.o-nas {
		width: 90%;
	}

	.o-nas p {
		min-width: 300px;
	}


	.trees {
		background-image: url(img/trees_s.png);
	}

	.sea {
		background-image: url(img/sea_s.png);
	}

	.field {
		background-image: url(img/field_s.png);
	}

	.peer {
		background-image: url(img/peer_s.png);
	}

	.steps {
		background-image: url(img/steps_s.png);
		image-orientation: 90deg;
	}
}