@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic&subset=latin,latin-ext);

* { box-sizing: border-box; font-family: 'PT Sans', sans-serif; }
html, body { margin: 0; padding: 0; }
body { background: #f5f5f5; color: #5c5c5c; letter-spacing: 1px; padding: 100px 0 20px 0; }
h1, h2, h3, h4 { color: #797062; }
img { border: none; }
.center {
    text-align: center;
}
.hidden { display: none; }

.red { color: #f00; font-style: italic; }

.wrapper { margin: 0 auto; padding: 0 15px; width: 100%; }
@media (min-width: 1200px) {
    .wrapper { max-width: 1140px; width: 1140px; }
}

/* ----------- FORMA ----------------- */

form { margin: 20px auto; width: 100%; }
label { color: #000; display: block; font-size: 15px; font-weight: bold; letter-spacing: 1.5px; margin: 0px 0 8px 0; text-transform: uppercase; width: 100%; }
label span { color: #f00; font-size: 11px; font-weight: normal; margin-left: 10px; vertical-align: top; }
fieldset { border: none; margin: 0; padding: 0; }
legend { color: #7acfdb; font-size: 34px; font-weight: bold; letter-spacing: 2px; padding: 0; text-shadow: 1px 1px rgba(0, 0, 0, 0.4); text-transform: uppercase; }
span.objasnjenje {
    color: #689f38;
    font-size: 12px;
    letter-spacing: 1px;
    margin-left: 5px;
    vertical-align: initial;
}

input[type="text"], textarea{
    background: none repeat scroll 0 0 #f5f5f5;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    color: #696868;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 10px 10px;
    transition: all 200ms linear 0s;
    width: 100%;
}
input[type="text"]:focus, textarea:focus { background: #fff; border-color: #7acfdb; }
input[type="checkbox"], input[type="radio"] { margin-right: 10px; vertical-align: baseline; }
input[type="submit"] {
    background: #7acfdb;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 40px;
    padding: 10px 30px 8px 30px;
    text-transform: uppercase;
    transition: all 200ms linear 0s;
}
input[type="submit"]:hover { background: #000; color: #fff; }
input, select, textarea { margin-bottom: 15px; }
textarea { height: 100px; }
textarea.esej { height: 300px; }
select {
    background: none repeat scroll 0 0 #f5f5f5;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    color: #696868;
    font-size: 13px;
    letter-spacing: .5px;
    padding: 10px 10px;
}
select.ui-datepicker-month, select.ui-datepicker-year { font-size: 12px; padding: 0; }

table { width: 100%; }
.wrapper.smarginom { margin-top: 160px; }
table tr td { padding: 2px 0; text-align: center; }
table tr td:first-of-type { text-align: left; }

.okolo { margin: 25px 0; }

.header { background: #fff; box-shadow: 0 4px 3px -3px rgba(0,0,0,.2); height: 80px; padding: 10px 0; position: fixed; top: 0; width: 100%; z-index: 10000; }
.header .wrapper { align-items: center; display: flex; height: 100%; }
.header .naslov { color: #fe8203; font-size: 21px; font-weight: bold; margin-left: auto; text-align: right; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); text-transform: uppercase; }
.header img { max-height: 40px; }

.desc { background: #7acfdb; box-shadow: 0 4px 3px -3px gray; height: auto; margin: 130px 0 30px 0; padding: 20px 0; }
.desc h1 { color: #fff; font-size: 60px; letter-spacing: 2px; line-height: 60px; margin: 0; text-align: center; text-shadow: 1px 1px rgba(0, 0, 0, 0.4); text-transform: uppercase; }
.desc h1 span { color: #ff530a; }
.forma { background: #fff; border: 1px solid #e1e1e1; border-radius: 3px; padding: 40px; }
.footer { font-size: 12px; height: 20px; padding: 20px 0; text-align: center; }
.footer a { color: #fe8203; }

.opis { background: #f5f5f5; border: 1px solid #e2e2e2; border-radius: 3px; line-height: 1.5; margin-bottom: 30px; padding: 1em; text-align: left; }
.opis a { color: #fe8203; }
div.opis ul li, div.opis ol li { margin: 10px 0; }
span.crveno { color: #f00; }
span.form-error { color: #f00; display: block; margin-bottom: 20px; position: relative; top: -10px; }

.clear { clear: both; height: 0; width: 100%; }

/* form wizard styles */
.prev, .next { background-color:#7acfdb; padding:7px 20px; color:#fff; text-decoration:none; border-radius: 3px; transition: all 200ms linear 0s; }
.prev:hover, .next:hover { background-color:#000; text-decoration:none;}
.prev { float:left;}
.next { float:right;}
#steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;}
#steps li { color:#b0b1b3; float:left; font-size:20px; font-weight: bold; height: 100px; padding: 0 10px 0 0; text-transform: uppercase; width: 16.66%; }
#steps li span { font-size:12px; display:block; font-weight: normal; text-transform: none; }
#steps li.current { color:#000; }
@media (max-width: 767px) {
    #steps li {
        height: auto;
        margin-bottom: 15px;
        width: 100%;
    }
}

.spinner {
  margin: 30px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;

  -webkit-animation: sk-rotate 2.0s infinite linear;
  animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #333;
  border-radius: 100%;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.modal-mask{
	width: 100%;
	height: 100%;
	z-index: 99998;
	padding: 0px;
	margin: 0px;
	background: rgba(0,0,0,0.8);
	position: fixed;
	top: 0px;
	overflow: hidden;
	display:none;
}

.modal{
	background: #fff;
    width: 300px;
    height: 280px;
    position: fixed;
    left: 50%;
	text-align:center;
    top: 50%;
    margin-left: -150px;
    margin-top: -140px;
	padding: 50px 20px;
    z-index: 99999;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px #000;
    box-sizing: border-box;
	display:none;
}

/* -----------------------------------------------------------------------------
   Modal prozor
----------------------------------------------------------------------------- */
#maska {
    animation-duration: 0.6s;
    background-color: #7acfdb;
    color: #fff;
    display: none;
    height: 100%;
    left: 0px;
    opacity: 1;
    overflow-y: auto;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 10001;
}
#kontejner {
    margin: 200px auto 0 auto;
    overflow: hidden;
    position: relative;
    width: 70%;
}
#kontejner h4 {
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 0;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
}
#kontejner p {
    font-size: 18px;
    line-height: 28px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
}


#step5 fieldset div {
    margin-bottom: 20px;
}
#step5 fieldset div:first-of-type {
    margin-bottom: 40px;
}

#step0commands {
    display: none;
}

.lijeva-margina { margin-left: 26px; width: calc(100% - 26px) !important; }

#display_count {
    margin-right: 20px;
}

#display_count, #word_left {
    color: #fe8203;
}