html,
body {
  height: 100%;
}
/*HEADER*/
header {
  background-image: url(/images/bg-ETNOBOTANIKA.jpg);
  background-repeat: no-repeat;
  background-position: top center;
}
header .logo {
  height: 120px;
  display: block;
  margin: 0 auto;
}

/*NASLOV*/
h1 {
  color: #c01f56;
  font-weight: 700;
  font-size: 32px;
  /* margin-top: 50px; */
}

/*Naslovna fotka*/
.naslovna {
  width: 100%;
  margin: 30px auto;
}

/* Nagovorna fotka */

.nagovor-slika {
  width: 100%;
}

@media (min-width: 768px) {
  .nagovor-slika {
    width: 80%;
    margin: 0 auto;
  }
}

@media (min-width: 768px) {
  .naslovna {
    width: 80%;
  }

  .mobile-break {
    display: none;
  }
}

.koraki {
  margin-top: 20px;
}
.koraki a {
  display: inline;
  color: #aca996;
  font-weight: 600;
  padding: 0px 10px;
  font-size: 20px;
  pointer-events: none;
}
.koraki a:hover {
  color: #c01f56;
  text-decoration: none;
}
.koraki a.active {
  color: #c01f56;
}
.koraki a.done {
  color: green;
  pointer-events: auto;
}

input[type="submit"] {
  border: none;
  background: none;
  color: #aca996;
  font-weight: 600;
  padding: 0px 10px;
  font-size: 20px;
  pointer-events: none;
}
input[type="button"] {
  border-color: #bbbbbb !important;
  color: #8d8d8d !important;
  cursor: pointer;
  font-weight: 600;
  font-size: 20px;
}
input[type="radio"]:checked ~ input[type="submit"] {
  color: #c01f56;
  pointer-events: auto;
}

/*IZBIRA*/
#image-stack {
  position: relative;
  /*	height: 500px;
	width: 500px;*/
}
#image-stack img {
  /*	position: absolute;*/
  width: 100%;
  top: 0;
  left: 0;
  max-width: 400px;
}

#image-stack-zeljena {
  position: relative;
}
#image-stack-zeljena img {
  position: relative;
  width: 100%;
  max-width: 400px;
}

/*FORMA*/
input {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 3px solid #eaeaea;
}
input:focus {
  outline: none;
}
input:hover {
  border-color: #c01f56;
}
input:active {
  border-color: #c01f56;
}
input:checked {
  border-color: #c01f56;
}

.barvni-krogec {
  cursor: pointer;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: #adaeb2;
  background-position: center;
  background-size: contain;
}
.barvna-slikica {
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 100px;
  height: 100px;
}
/*KORAK 1*/
/*polt*/
#p1 {
  background-image: url(/images/grafike/tan/light.png);
}
#p2 {
  background-image: url(/images/grafike/tan/brown.png);
}
#p3 {
  background-image: url(/images/grafike/tan/dark.png);
}
/*oči*/
#o1 {
  background: #adaeb2;
}
#o2 {
  background: #9d4e2c;
}
#o3 {
  background: #57c1e3;
}
#o4 {
  background: #5cb045;
}

/*KORAK 2*/
/*dolžina*/
#d1 {
  background-image: url(/images/grafike/hair/short.png);
}
#d2 {
  background-image: url(/images/grafike/hair/middle.png);
}
#d3 {
  background-image: url(/images/grafike/hair/long.png);
}

/*KORAK 3*/
/*trenutna barva*/
#t1 {
  background-image: url(/images/grafike/izbirabarve/1.png);
}
#t2 {
  background-image: url(/images/grafike/izbirabarve/2.png);
}
#t3 {
  background-image: url(/images/grafike/izbirabarve/3.png);
}
#t4 {
  background-image: url(/images/grafike/izbirabarve/4.png);
}
#t5 {
  background-image: url(/images/grafike/izbirabarve/5.png);
}
#t6 {
  background-image: url(/images/grafike/izbirabarve/6.png);
}
#t7 {
  background-image: url(/images/grafike/izbirabarve/7.png);
}
#t8 {
  background-image: url(/images/grafike/izbirabarve/8.png);
}

/*KORAK 4*/
/*zeljena barva*/
/*t1*/
#t1z1 {
  background-image: url(/images/grafike/izbirabarve/i1/1.1.png);
}
#t1z2 {
  background-image: url(/images/grafike/izbirabarve/i1/1.2.png);
}
#t1z3 {
  background-image: url(/images/grafike/izbirabarve/i1/1.3.png);
}
#t1z4 {
  background-image: url(/images/grafike/izbirabarve/i1/1.4.png);
}
#t1z5 {
  background-image: url(/images/grafike/izbirabarve/i1/1.5.png);
}
#t1z6 {
  background-image: url(/images/grafike/izbirabarve/i1/1.6.png);
}
#t1z7 {
  background-image: url(/images/grafike/izbirabarve/i1/1.7.png);
}
#t1z8 {
  background-image: url(/images/grafike/izbirabarve/i1/1.8.png);
}
#t1z9 {
  background-image: url(/images/grafike/izbirabarve/i1/1.9.png);
}
#t1z10 {
  background-image: url(/images/grafike/izbirabarve/i1/1.10.png);
}
#t1z11 {
  background-image: url(/images/grafike/izbirabarve/i1/1.11.png);
}

/*t2*/
#t2z1 {
  background-image: url(/images/grafike/izbirabarve/i2/2.1.png);
}
#t2z2 {
  background-image: url(/images/grafike/izbirabarve/i2/2.2.png);
}
#t2z3 {
  background-image: url(/images/grafike/izbirabarve/i2/2.3.png);
}
#t2z4 {
  background-image: url(/images/grafike/izbirabarve/i2/2.4.png);
}
#t2z5 {
  background-image: url(/images/grafike/izbirabarve/i2/2.5.png);
}
#t2z6 {
  background-image: url(/images/grafike/izbirabarve/i2/2.6.png);
}
#t2z7 {
  background-image: url(/images/grafike/izbirabarve/i2/2.7.png);
}
#t2z8 {
  background-image: url(/images/grafike/izbirabarve/i2/2.8.png);
}
#t2z9 {
  background-image: url(/images/grafike/izbirabarve/i2/2.9.png);
}
#t2z10 {
  background-image: url(/images/grafike/izbirabarve/i2/2.10.png);
}
#t2z11 {
  background-image: url(/images/grafike/izbirabarve/i2/2.11.png);
}

/*t3*/
#t3z1 {
  background-image: url(/images/grafike/izbirabarve/i3/3.1.png);
}
#t3z2 {
  background-image: url(/images/grafike/izbirabarve/i3/3.2.png);
}
#t3z3 {
  background-image: url(/images/grafike/izbirabarve/i3/3.3.png);
}
#t3z4 {
  background-image: url(/images/grafike/izbirabarve/i3/3.4.png);
}
#t3z5 {
  background-image: url(/images/grafike/izbirabarve/i3/3.5.png);
}
#t3z6 {
  background-image: url(/images/grafike/izbirabarve/i3/3.6.png);
}
#t3z7 {
  background-image: url(/images/grafike/izbirabarve/i3/3.7.png);
}
#t3z8 {
  background-image: url(/images/grafike/izbirabarve/i3/3.8.png);
}
#t3z9 {
  background-image: url(/images/grafike/izbirabarve/i3/3.9.png);
}
#t3z10 {
  background-image: url(/images/grafike/izbirabarve/i3/3.10.png);
}
#t3z11 {
  background-image: url(/images/grafike/izbirabarve/i3/3.11.png);
}

/*t4*/
#t4z1 {
  background-image: url(/images/grafike/izbirabarve/i4/4.1.png);
}
#t4z2 {
  background-image: url(/images/grafike/izbirabarve/i4/4.2.png);
}
#t4z3 {
  background-image: url(/images/grafike/izbirabarve/i4/4.3.png);
}
#t4z4 {
  background-image: url(/images/grafike/izbirabarve/i4/4.4.png);
}
#t4z5 {
  background-image: url(/images/grafike/izbirabarve/i4/4.5.png);
}
#t4z6 {
  background-image: url(/images/grafike/izbirabarve/i4/4.6.png);
}
#t4z7 {
  background-image: url(/images/grafike/izbirabarve/i4/4.7.png);
}
#t4z8 {
  background-image: url(/images/grafike/izbirabarve/i4/4.8.png);
}
#t4z9 {
  background-image: url(/images/grafike/izbirabarve/i4/4.9.png);
}
#t4z10 {
  background-image: url(/images/grafike/izbirabarve/i4/4.10.png);
}
#t4z11 {
  background-image: url(/images/grafike/izbirabarve/i4/4.11.png);
}

/*t5*/
#t5z1 {
  background-image: url(/images/grafike/izbirabarve/i5/5.1.png);
}
#t5z2 {
  background-image: url(/images/grafike/izbirabarve/i5/5.2.png);
}
#t5z3 {
  background-image: url(/images/grafike/izbirabarve/i5/5.3.png);
}
#t5z4 {
  background-image: url(/images/grafike/izbirabarve/i5/5.4.png);
}
#t5z5 {
  background-image: url(/images/grafike/izbirabarve/i5/5.5.png);
}
#t5z6 {
  background-image: url(/images/grafike/izbirabarve/i5/5.6.png);
}
#t5z7 {
  background-image: url(/images/grafike/izbirabarve/i5/5.7.png);
}
#t5z8 {
  background-image: url(/images/grafike/izbirabarve/i5/5.8.png);
}
#t5z9 {
  background-image: url(/images/grafike/izbirabarve/i5/5.9.png);
}
#t5z10 {
  background-image: url(/images/grafike/izbirabarve/i5/5.10.png);
}
#t5z11 {
  background-image: url(/images/grafike/izbirabarve/i5/5.11.png);
}

/*t6*/
#t6z1 {
  background-image: url(/images/grafike/izbirabarve/i6/6.1.png);
}
#t6z2 {
  background-image: url(/images/grafike/izbirabarve/i6/6.2.png);
}
#t6z3 {
  background-image: url(/images/grafike/izbirabarve/i6/6.3.png);
}
#t6z4 {
  background-image: url(/images/grafike/izbirabarve/i6/6.4.png);
}
#t6z5 {
  background-image: url(/images/grafike/izbirabarve/i6/6.5.png);
}
#t6z6 {
  background-image: url(/images/grafike/izbirabarve/i6/6.6.png);
}
#t6z7 {
  background-image: url(/images/grafike/izbirabarve/i6/6.7.png);
}
#t6z8 {
  background-image: url(/images/grafike/izbirabarve/i6/6.8.png);
}
#t6z9 {
  background-image: url(/images/grafike/izbirabarve/i6/6.9.png);
}
#t6z10 {
  background-image: url(/images/grafike/izbirabarve/i6/6.10.png);
}
#t6z11 {
  background-image: url(/images/grafike/izbirabarve/i6/6.11.png);
}

/*t7*/
#t7z1 {
  background-image: url(/images/grafike/izbirabarve/i7/7.1.png);
}
#t7z2 {
  background-image: url(/images/grafike/izbirabarve/i7/7.2.png);
}
#t7z3 {
  background-image: url(/images/grafike/izbirabarve/i7/7.3.png);
}
#t7z4 {
  background-image: url(/images/grafike/izbirabarve/i7/7.4.png);
}
#t7z5 {
  background-image: url(/images/grafike/izbirabarve/i7/7.5.png);
}
#t7z6 {
  background-image: url(/images/grafike/izbirabarve/i7/7.6.png);
}
#t7z7 {
  background-image: url(/images/grafike/izbirabarve/i7/7.7.png);
}
#t7z8 {
  background-image: url(/images/grafike/izbirabarve/i7/7.8.png);
}
#t7z9 {
  background-image: url(/images/grafike/izbirabarve/i7/7.9.png);
}
#t7z10 {
  background-image: url(/images/grafike/izbirabarve/i7/7.10.png);
}
#t7z11 {
  background-image: url(/images/grafike/izbirabarve/i7/7.11.png);
}

/*t8*/
#t8z1 {
  background-image: url(/images/grafike/izbirabarve/i8/8.1.png);
}
#t8z2 {
  background-image: url(/images/grafike/izbirabarve/i8/8.2.png);
}
#t8z3 {
  background-image: url(/images/grafike/izbirabarve/i8/8.3.png);
}
#t8z4 {
  background-image: url(/images/grafike/izbirabarve/i8/8.4.png);
}
#t8z5 {
  background-image: url(/images/grafike/izbirabarve/i8/8.5.png);
}
#t8z6 {
  background-image: url(/images/grafike/izbirabarve/i8/8.6.png);
}
#t8z7 {
  background-image: url(/images/grafike/izbirabarve/i8/8.7.png);
}
#t8z8 {
  background-image: url(/images/grafike/izbirabarve/i8/8.8.png);
}
#t8z9 {
  background-image: url(/images/grafike/izbirabarve/i8/8.9.png);
}
#t8z10 {
  background-image: url(/images/grafike/izbirabarve/i8/8.10.png);
}
#t8z11 {
  background-image: url(/images/grafike/izbirabarve/i8/8.11.png);
}

/*FOOTER*/
footer {
  background: #fafafa;
}
footer {
  /* border-top: 1px solid #d1d1d1;*/
  margin-top: 3vh;
  position: relative;
  bottom: 0px;
  width: 100%;
}

footer a:hover {
  text-decoration: none;
}
footer a {
  color: black;
}
.prefooter {
  background: white;
}
.container.main-footer {
  padding: 2vh 0px;
}
.prefooter {
  padding: 2vh 0px;
}
.prefooter .container {
  padding: 0px;
}

input:hover {
  transition: all 0.3s;
}

input.button-next {
  display: inline-block;
  border: 2px solid #c01f56;
  color: #212121;
  border-radius: 16px;
  margin-top: 20px;
  padding: 10px 39px;
  line-height: 1em;
  transition: all 0.3s;
  background: white;
  border-radius: 500px !important;
}
input.button-next:hover {
  background: #c73768;
  border-color: #c01f56 !important;
  color: white !important;
}
form#korak1 p,
form#korak3 p {
  border-bottom: 1px solid #c01f56;
  font-size: 24px;
  color: #1b1b1b;
}

.koraki a {
  display: none;
}

.koraki a.active {
  display: block !important;
}

.zeljena-barva-izbira {
  display: inline-block;
}
.container.izbira.zeljena-barva #image-stack {
  position: relative;
  height: unset;
  width: 400px;
}
.container.izbira.zeljena-barva #image-stack img {
  position: initial !important;
  width: 100%;
  top: 0;
  left: 0;
}
.zeljena-barva-izbira label {
  display: block;
  text-align: center;
}
.container.izbira.zeljena-barva .col-12.col-sm-12.align-self-center {
  margin-top: 3vh;
}
input.button-next {
  text-align: center;
  margin: 0 auto;
  margin-top: 3vh;
}

.prefooter .row {
  display: block !important;
  /* width: 100% !important;
  min-width: 100% !important; */
}

.container.izbira.uvodni-korak .row.justify-content-center,
.container.izbira.nagovor-korak .col-12.col-sm-12.align-self-center {
  text-align: center;
  padding-top: 5%;
}
.container.izbira.uvodni-korak .row.justify-content-center p {
  font-size: 1.7em;
  max-width: 574px;
  width: 100%;
  margin: 0 auto;
}
.container.izbira.uvodni-korak .row.justify-content-center span.nadnaslov {
  color: #c31c54;
  font-size: 1.1em;
  font-weight: 600;
}
.prefooter {
  text-align: center;
}

.prefooter {
  padding-bottom: 1em;
}

.container.izbira.nagovor-korak .col-12.col-sm-12.align-self-center p {
  font-size: 1.7em;
  max-width: 735px;
  width: 100%;
  margin: 0 auto;
}
div#image-stack img {
  display: block;
  text-align: center;
  margin: 0 auto;
}
.koraki a {
  font-size: 52px;
  font-weight: 300 !important;
}
.koraki {
  margin-top: 0px;
}
.koraki a {
  line-height: 1.2em;
}
h1.text-center {
  font-size: 21px;
}
.container.izbira.zeljena-barva div#image-stack-zeljena img {
  display: block;
  text-align: center;
  margin: 0 auto;
}
.container.izbira .row.justify-content-center div#image-stack-zeljena img {
  text-align: center;
  display: block;
  margin: 0 auto;
}
.share-razdelek {
  text-align: center;
  font-size: 1.2em;
  color: #c31c54;
  font-size: 1.8em;
  font-weight: 600;
  margin-top: 4vh;
}

.at-share-btn-elements {
  text-align: center;
  margin-top: 15px;
}

.desni-prodajni-del,
.levi-prodajni-del {
  width: 50%;
  display: inline-block;
}
.desni-prodajni-del,
.levi-prodajni-del {
  vertical-align: middle;
}
p.potrebujete-besedilo {
  font-weight: 600;
  margin-bottom: 0px;
  font-size: 1.2em;
  border-bottom: 1px solid #c31c54;
  margin-bottom: 8px;
}
p.izdelek {
  font-weight: 600;
  font-size: 1.5em;
  margin-bottom: 0px;
  line-height: 1.6em;
  margin-top: 10px;
}
p.kolicina {
  font-weight: 400;
}
a.oddaj-narocilo-gumb {
  font-weight: 600;
  color: white;
  background: #c31c54;
  padding: 10px 20px;
  border-radius: 500px;
  font-size: 20px;
}
a.oddaj-narocilo-gumb {
  text-align: center;
  margin: 0 auto;
  display: block;
  max-width: fit-content;
  padding: 10px 40px;
  border: 2px solid #c31c54;
  transition: all 0.3s;
}
a.oddaj-narocilo-gumb:hover {
  background: white;
  color: #c31c54;
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  #image-stack {
    position: relative;
    height: unset;
    width: unset;
  }
  #image-stack img {
    position: inherit;
    width: 100%;
    top: 0;
    left: 0;
  }
  #image-stack-zeljena img {
    position: initial;
    width: 100%;
    top: 0;
    left: 0;
  }
  #image-stack-zeljena {
    position: initial;
    height: unset;
    width: unset;
  }
  .col-12.col-sm-6.prva-slika,
  .col-12.col-sm-6.druga-slika {
    width: 50% !important;
    display: inline-block !important;
    max-width: 50% !important;
  }
  .container.izbira.zeljena-barva #image-stack img {
    position: initial;
    width: 100%;
    top: 0;
    left: 0;
  }
  .col-12.col-sm-6.prva-slika {
    padding: 0px;
  }
  .col-12.col-sm-6.druga-slika {
    padding: 0px;
  }
  .container.izbira.zeljena-barva #image-stack {
    position: relative;
    height: unset;
    width: fit-content;
  }
  input#d1,
  input#d2,
  input#d3 {
    width: 32%;
  }

  .koraki a {
    font-size: 36px;
    font-weight: 300 !important;
  }
}
.cestitke {
  display: block;
  margin-top: 30px;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 25px;
}

.dvakoraka {
  display: block;
  margin: 0 auto;
  max-width: fit-content;
  padding-bottom: 20px;
  font-size: 18px;
  color: #c31c54;
  line-height: 30px;
}
.dvakoraka p {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0px;
}
.dvakoraka span {
  color: #c31c54;
  font-size: 24px;
  font-weight: 600;
  width: 30px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  border: 1px solid #c31c54;
  text-align: center;
  border-radius: 100%;
  vertical-align: middle;
  font-style: italic;
  margin-right: 10px;
}