@charset "utf-8";
body {
	background-color: #E5E4E2;
	font-family: Geneva, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.4vw;
	text-decoration: none;
	text-align: left;
}

h1, h2 {
	color: #000000;
}

img {
	width: 80%;
	opacity: 0.8;
	/* -webkit-transition: .3s ease-in-out; */
	/* transition: .3s ease-in-out; */
}

img:hover {
    opacity: 0.95;
}

* {
	margin:0;
	padding:0;
}

#drugi {
	background-color:	#E5E4E2;
	border-bottom: 1px solid #c0a66b;
    	height: auto;
    	overflow: auto;
}

#treci {
	
	margin: 0 0 2em 0;
	background-color: #f1f2f2;
    height: auto;
    overflow: auto;
	text-align: center;

}

.mobile {
	margin: auto;
	width: 75%;
	padding: 0.5em;
	text-align: center;
	font-size: 2.8vw;
}

/* Container needed to position the button. Adjust the width as needed */
.container {
  position: relative;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* Make the image responsive */
.container img {
  width: 100%;
  height: auto;
}

/* Style the button and place it in the middle of the container/image */
.container .btn {
  position: absolute;
  top: 92%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #F57636;
  color: white;
  font-size: 2.2vw;
  padding: 0.3vw 3.2vw;
  border: 1px solid #C04000;
  cursor: pointer;
  border-radius: 3vw;
}

.btn:hover {
    background-color: #FBCEB1;
    color: white;
}

.container2 {
  position: relative;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.container2 img {
  width: 100%;
  height: auto;
}

.container2 .btn2 {
  position: absolute;
  top: 113%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #FFFFFF;
  color: black;
  font-size: 2.4vw;
  padding: 0.3vw 2.8vw;
  border: 1px solid #000000;
  cursor: pointer;
  border-radius: 3vw;
}

.btn2:hover {
    background-color: #DEDEDE;
    color: white;
}

.button {
  display: inline-block;
  width: 40%;
  padding: 0.4vw 1vw;
  margin: 1.2vw 1vw 0.1vw 1vw;
  font-size: 3vw;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #ffffff;
  background-color: #960018;
  border: none;
  border-radius: 0.5vw;
  box-shadow: 0 0.3vw #58111a;
}

.button:hover {background-color: #B31B1B}

.button:active {
  background-color: #E04006;
  box-shadow: 0 0.1vw #58111a;
  transform: translateY(4px);
}

.prozor {
    margin: auto;
    width: 75%;
    border: 0.3vw solid #621c1e;
    border-left: 0.4vw solid #960018;
    border-right: 0.4vw solid #960018;
    border-radius: 0.8vw;
	padding: 0.6em 0.2em 1.2em 0.2em;
    text-align: center; 
}

ul {
	width: 8em;
	list-style-type: none;
}

li {
	line-height: 200%;
}

a {
	color: #36454F;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	color:#5F3206;
}

h1 {
	text-align: center;
	padding-top: 0.6em;
	font-size: 3.3vw;
}

h2 {
	text-align: center;
	padding-top:0.3em;
	font-size: 2.4vw;
}

h3 {
	text-align: center;
	font-size: 2.3vw;
    padding-bottom:0.1em;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h4 {
	text-align: center;
	font-size: 2.2vw;
    padding-bottom:0.4em;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.note {
    padding: 0.4em 0.2em 0.2em 0.2em;
    text-align: center;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.note2 {
    padding-left: 1.5em;
	text-align: justify;
}

.note3 {
   padding-top: 0.2em;
   text-align: center;
}

@media screen and (max-width: 450px) {
   h1 {font-size: 6vw;
   padding-top: 1.2em;}
   h2 {font-size: 4.5vw;
   padding-top: 0.2em;
   padding-bottom: 0.8em;}
  .note {font-size: 3vw;}
  .note2 {font-size: 2.7vw;}
  .note3 {font-size: 2.7vw;}
}

@media only screen and (min-width: 451px) and (max-width: 850px) {
   h1 {font-size: 4.8vw;
   padding-top: 1.1em;}
  .note {font-size: 2.4vw;}
  .note2 {font-size: 1.6vw;}
  .note3 {font-size: 1.6vw;}
}

@media only screen and (min-width: 851px) {
  .note {font-size: 2.2vw;}
  .note2 {font-size: 2vw;}
  .note3 {font-size: 2vw;}
} 

#footer {
	padding:1em 0 1em 0;
	background-color: black;
	text-align: center;
	color: #FFFFFF;
	font-size: 2.6vw;
}

#footer a:link {color: #E5E4E2; }
#footer a:visited {color: #fffee0; }
#footer a:hover {color: #E5E4E2; }