body {
    background: #e8e8e8 !important;
}
.poster-kontakt {
  background-image: url("../img/ARM_8315.JPG") !important;
  margin: 0 !important;
  padding: 0 !important;
}

.container-utisci {
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 80vh;
  overflow: hidden;
}

.container-utisci h1 {
  color: #333A56;
  text-align: left;
  font-size: 6vh;
  font-family: 'Lobster';
  margin-top: 4vh;
  margin-bottom: 8vh;
  padding: 0;
}

.utisak {
  border-left: 12px solid #e8e8e8;
  border-bottom: 12px solid #e8e8e8;
  height: auto;
 
  
  background: #bdd7e2;
  overflow: hidden;
}
.concrete-utisak {
    
  color: #333A56;
  
  padding: 0 !important;
  overflow: hidden;
   margin-left: 2vh;
  margin-right: 2vh;
  margin-bottom: 4vh;
  font-size: 14pt;
  font-family: 'Judson', serif;
  font-style: italic;
}

.potpis {
  color: #333A56;
  font-weight: bold;
  font-size: 14pt;
  
  
  
  font-family: 'Judson', serif;
  font-style: italic;
}

.levo {
  text-align: center;
}
.desno {
  text-align: center;
}
.sredina {
  text-align: center;
}
.zvezde {
  color: #333A56;
  font-size:30pt;
  text-align: center;
  margin-top:4vh;
  margin-bottom: 4vh;
}

.zadnji {
  font-size: 3vh;
  font-weight: bold;
  text-align: center;

}
.zadnje-zvezde {
  color: grey;

}

.zadnji-potpis {
  font-size: 3vh;
  font-weight: bold;
  text-align: center;
  color: #333A56;
  margin-top:4vh;
}

form{
  font-size: 3vh !important;
}
.btn {
  margin-top: 5%;
  font-size: 2vh;
}

.close {
  width: 10vh !important;
}

#posalji-button {
  float:right !important;
  background-color:#333A56;
  color:white;
}
#utisak-button {
  text-align: center;
  background-color: Transparent;
  border: 2px solid #333A56;
  border-radius: 10%;
  font-style: 'Judson', serif;
  color: #333A56;
  width: 10vw;
  height: 7vh;
}
#utisak-button:hover {
  transition: 0.3s;
  border: 2px solid white;
}
.zadnji-utisak {


  text-align: center;
  color: #333A56;
}
.rating {
    float:left;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:before {
    content: '★ ';
}

.rating > input:checked ~ label {
    color: #f70;
    text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: gold;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);
}

.rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}
input[type=submit] {
    
    display: inline-block !important;
    padding: 6px 12px !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1.42857143 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    -ms-touch-action: manipulation !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    
    height: auto !important;
    width: auto !important;
    margin-top: 5% !important;
    background: #428bca;
    color: white;
    
}

@media only screen and (max-width: 768px) {
  .container-utisci {
    margin-top: 50vh;
  }
  .container-utisci h1 {
      text-align: center;
  }
  .concrete-utisak {
  color: #333A56;
  font-size: 2.6vh;
  font-family: 'Judson', serif;
  font-style: italic;
}

.potpis {
  color: #333A56;
  font-weight: bold;
  font-size: 2.6vh;
  font-family: 'Judson', serif;
  font-style: italic;
}
.zadnji {
  font-size: 4vh;
  font-weight: bold;
  text-align: center;

}
.zadnje-zvezde {
  color: grey;

}



.zadnji-potpis {
  font-size: 4vh;
  font-weight: bold;
  text-align: center;
  color: #333A56;
  margin-top:2vh;
}
}
@media only screen and (min-width: 1920px) {
    .concrete-utisak {
        font-size: 25pt;
    }
    .potpis {
        font-size:25pt;
    }
}
@media only screen and (min-width: 1680px) {
    .concrete-utisak {
        font-size: 20pt;
    }
    .potpis {
        font-size:20pt;
    }
}