* {
  box-sizing: border-box;
}

body{
  margin: 20px 50px;
  font-family: Tahoma, fantasy ;
  /*font-size: 110%;*/
}


#glava{
  margin: 0;
  padding: 20px 20px;
  /*padding: 1vw 2vw;*/
  background-color: rgba(240, 170, 60, 0.4);
  font-variant: small-caps;
  font-family: serif;
  border: 4px solid rgb(210, 120, 50);
  border-radius: 10px;
}

#glava1{
  display: inline-block;
  width: 45%;
  margin: 0;
  color: #AF3925;
  font-size: 350%;
  font-weight: bold;
  letter-spacing: 5px;
}

#glava2{
  display: inline-block;
  /*display: none;*/
  width: 40%;
  /*margin: 0 20px;*/
  color: #AF3925;
  font-size: 180%;
  letter-spacing: 5px;
}

#ikona{
  display: inline-block;
  float: right;
  max-width: 6%;
  height: auto;
  position: relative;
  vertical-align: middle;
}


#strana{
  overflow: auto;
  /*border: 2px solid blue;*/
  font-size: 120%;
}

.izbornik {
  /*float: left;*/
  width: 100%;
  text-align: center;
}

.izbornik a {
  /*float: left;*/
  background-color: rgb(240, 190, 160);
  padding: 14px 8px;
  margin: 10px;
  display: inline-block;
  /*width: 23%;*/
  width: 30%;
  color: rgb(200, 0, 0);
  text-decoration: none;
  border-style: none;
  border-radius: 10px;
  box-shadow: 0 5px 4px rgba(0,0,0,0.12), 0 5px 4px rgba(0,0,0,0.24);
}

.izbornik a:hover {
  background-color: rgb(220, 220, 150);
}

.izbornik a.izbornik-odabrani{
  border: 4px solid rgb(210, 120, 50);
}

.centar {
  float: left;
  width: 68%;
  padding: 0 20px;
  /*border: solid 2px tomato;*/
}

.stup-desni {
  float: right;
  background-color: rgba(240, 170, 60, 0.4);
  width: 28%;
  padding: 10px;
  margin: 10px;
  text-align: center;
}

.snimke-1{
  max-width: 95%;
  height: auto;
}

.futer{
  font-size: 80%;
  background-color: #eeaa22;
  text-align: center;
  padding:10px;
  margin-top:7px;
}

.futer-tekst{
  padding: 3%;
  
}

.primjeri {
  width: 85%;
  padding: 3%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border: solid 4px rgb(200, 100, 50);
  border-radius: 10px;
}

.figex{
  display: inline-block;
  margin: 10px;
  padding: 10px;
  max-width: 98%;
  border:3px solid #aabbee;
}

.figex img{
  max-width: 80vw;
}

.solution{
  overflow: auto;
  width: 75%;
  padding: 3%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border: solid 4px rgb(200, 100, 50);
  border-radius: 10px;
}


.snimke-ploca{
  width: 90%;
  padding: 3%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border: solid 4px rgb(200, 100, 50);
  border-radius: 10px;
}

.snimka{
  display: inline-block;
  max-width: 31%;
  height: auto;
  /*margin: 2vw 0 0 1vw;*/
  margin: 14px 5px;
  vertical-align: baseline;
}

.snimka-tab{
  display: inline-block;
  max-width: 46%;
  height: auto;
  margin: 14px 5px;
  vertical-align: baseline;
}

.snimka-img{
  width: 100%;
  height: auto;
  border: solid 4px rgb(200, 100, 50);
  border-radius: 10px;
}

.snimka-txt{
  width: 95%;
  text-align: center;
}

.kontakt {
  width: 85%;
  padding: 3%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border: solid 4px rgb(200, 100, 50);
  border-radius: 10px;
}


/* ------------------------------ */

@media only screen and (max-width: 1100px) {
  /* For tablets - landscape. Originalno: 990px. */
  .izbornik a{
    width: 28%;
    margin: 3px;
    padding: 2px 4px;
  }

  body{
    margin: 10px 20px;
  }
  .primjeri {
    width: 90%;
  }
  .solution{
    width: 90%;
  }

}

@media only screen and (max-width: 850px) {
  /* For tablets - portrait. Originalno: 768px. */
  body{
    margin: 10px 10px;
  }
  #glava{
    padding: 10px 10px;
  }
  #glava1{
    width: 70%;
  }
  #glava2{
    display: none;
  }
  #ikona{
    max-width: 10%;
  }
  .centar, .stup-desni {
    width: 100%;
    padding: 15px;
    margina: 10px 2px;
  }
  .primjeri {
    width: 98%;
  }
  .snimke-ploca{
    width: 99%;
  }
  .snimke-1{
    max-width: 48%;
    float: left;
    padding: 10px;
    /*display: inline-block;*/
  }
  .solution{
    width: 100%;
  }
  .snimka{
    max-width: 45%;
    margin: 5px 5px;
  }
  .snimka-tab{
    max-width: 95%;
    margin: 5px 2px;
  }
}

@media only screen and (max-width: 750px) {
  /* For mobile phones. Originalno: 620px. */
  body{
    margin: 10px 5px;
  }
  #glava1{
    font-size: 250%;
  }
  #ikona{
    max-width: 14%;
  }
  .izbornik a{
    width: 80%;
  }
  .primjeri {
    width: 95%;
  }
  .figex{
    margin: 3px;
    padding: 2px;
  }

 
  .snimke-1{
    max-width: 95%;
  }
  .snimka{
    max-width: 95%;
  }
  .snimka-tab{
    max-width: 95%;
  }
  
}