* {
  scroll-behavior: smooth;
}


body{
  font-family: 'Krub', sans-serif;
  font: 15px/1.5;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
}

/* Svee */
.container{
  width:80%;
  margin:auto;
  overflow:hidden;
}

ul{
  margin:0;
  padding:0;
}



/* Heder */
header{
  background:#ffffff;
  padding-top:30px;
  min-height:40px;
  border-bottom:#DB0914 3px solid;
}


header #branding{
  float:left;
}

header #branding h1{
  color:#DB0914;
  font-family: 'Marck Script', cursive;
  font-size:40px;
  font-weight: bold;
}

header #logo {
  width:280px;
  height:120px;
}

.topnav {
  overflow: hidden;
  float:right;
  margin-top:35px;
}

.topnav a {
  float: left;
  display: block;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #DB0914;
  color: #fff;
}

.poseban {
  color: #DB0914;
}

.poseban:hover {
  color:#ff5c4c;
  transition: 0.2s; 
}

.active:hover {
  color:#fff;
  background-color: #ff5c4c;
  transition: 0.2s;
}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: #DB0914;
    background:#fff;
    padding: 12px 14px;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f4f4f4;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover:not(.active), .dropdown:hover .dropbtn {
  color:#ff5c4c;
  transition: 0.2s; 
}

.dropdown-content a:hover {
    color:#ff5c4c;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Pocetna */
#showcase{
  background:url('../img/pocetna_slika.jpg');
  background-repeat: no-repeat;
  background-size:cover;
  background-attachment: fixed;
  background-position: center;
  text-align:center;
  color:#ffffff;
}



#showcase h1{
  font-size:55px;
  margin-bottom:10px;
  color:#DB0914;
  padding-top:150px;
  font-style: italic;
}

.landing-hero-h1{
  
}

#showcase p{
  font-size:20px;
   color:#DB0914;
   padding-bottom:150px;
}


/* Slogan */

#slogan {
  text-align: center;
  color:#DB0914;
  font-size:2.8em;
  padding-top:70px;
  font-family: 'Krub', sans-serif;
  font-weight: bold;
  font-style: italic;
}


/* O nama */


#o_nama {
  margin-top:110px;
  padding:50px 0;
  background:#DB0914;
}

#o_nama .box {
  text-align:left;
  width:50%;
  float:left;
  font-size:20px;
  color:#f4f4f4;
}

#o_nama .box img {
  max-width:100%;
  max-height: auto;
  margin-top:10px;
  padding-right:110px;
}

#o_nama .box p {
  font-size:16px;
  padding-top:15px;
}



/* Nas Tim */

#boxes2{
  display: block;
}

#boxes22{
  display: none;
}

#boxes22 ul{
  list-style: none;
}

#boxes22 h2{
    text-align:center;
  margin-top:50px;
}

#boxes2 ul {
  list-style: none;
}

#boxes2 h2 {
  text-align:center;
  margin-top:50px;
}

.boxes2-container{
  width: 90%;
  margin: auto;
}

.boxes2-box {
  float:left;
  text-align:center;
}

.boxes2-box1{
  width: 42.5%;
  margin-left: 5%;
}

.boxes2-box1:not(:first-child){
  margin-left: 5%;
}

.boxes2-box2{
  width: 38%;
}

.boxes2-box p {
  font-size:18px;
}

.boxes2-box img {
  width:200px;
  height:200px;
  border-radius:50%;
}


/* Nasi Klijenti */

#klijenti {
  color:#ffffff;
  background:#DB0914;
  padding:60px 0;
}

#klijenti h2 {
  text-align:center;
  padding-bottom:15px;
}

#klijenti h3 {
  font-size:1.1em;
}

#klijenti .box2 h4 {
  padding-top:15px;
}

#klijenti .box2 p:first-letter {
    font-size:4em;
}

#klijenti .box2:first-child {
  width:100%;
  text-align:center;
  float:left;
  display:block;
  padding:30px;
}

#klijenti .box2 {
  width:100%;
  text-align:center;
  float:left;
  display:none;
  font-family: 'Marck Script', cursive;
  font-size:2em;
  padding:30px;
}

#klijenti img {
  border-radius:50%;
}

#klijenti button {
  position: absolute;
  padding:15px;
  background:#DB0914;
  color:#ffffff;
  outline: 0;
  border:0;
  font-size:4em;
  margin-top:50px;
}

#klijenti button:hover {
  color:#ff5c4c;
  transition:0.2s;
  cursor: pointer;
}

#klijenti button:nth-of-type(1) {
  left:20px;
}

#klijenti button:nth-of-type(2) {
  right:20px;
}


/* Kontakt */

#kontakt {
  margin-top:50px;
}

#kontakt h2{
  font-size:25px;
  text-align: center;
}

#kontakt .box h4 {
  font-size:23px;
}

#kontakt .box p {
  font-size:20px;
}

#kontakt .box {
  width:25%;
  float:left;
  margin-top:100px;
}

#kontakt i {
  color:#DB0914;
}

/* Drustvene mreze */

#drustvene_mreze {
  margin-top:100px;
}

#drustvene_mreze ul {
  padding:0;
  text-align:center;
}

#drustvene_mreze h2 {
  font-size:25px;
  text-align: center;
}

#drustvene_mreze li {
  display:inline-block;
  margin:60px 0 auto;
}

#drustvene_mreze a {
  text-decoration: none;
  color:#DB0914;
  font-size:35px;
  padding:20px;
}

#drustvene_mreze a:hover {
  color:#ff5c4c;
  transition: 0.2s;
}


/* Vrati na pocetak */

#vrati_na_pocetak {
  display:block;
  text-align: center;
  margin:120px 0;
}


#vrati_na_pocetak i {
  font-size:55px;
  color:#DB0914;
  text-decoration:none;
}

#vrati_na_pocetak i:hover {
  color:#ff5c4c;
  transition: 0.2s;
}




/* Footer */

footer{
  padding:20px;
  margin-top:119px;
  color:#ffffff;
  background-color:#DB0914;
  text-align: center;
}


footer a {
  text-decoration: none;
  color:#ffffff;
  text-align:center;
}

footer a:hover {
  font-weight:700;
  transition: 0.2s;
}


/* Galerija */

#galerija, #pre_posle {
  margin-top:80px;
}

#galerija .container img {
	width: 30%;
	float: left;
  height: 200px;
  margin:1%;
  border:2px solid #DB0914;
}

#galerija h2, #pre_posle h2 {
  text-align: center;
  padding-top:25px;
  padding:bottom:20px;
}

#pre_posle .rad  {
  width:31%;
  margin:1%;
  float:left;
  text-align: center;
  padding:20px;
}


#pre_posle .rad img {
    max-width:100%;
    max-height:100%;
    float:left;
    border:2px solid #DB0914;
}

#pre_posle .rad p {
  width:250px;
  height:480px;
  font-size:18px;
  text-align: center;
  margin:0 auto;
}


/* Usluge */

.Usluga h2 {
  text-align: center;
  padding:25px;
}

.Usluga .podnaslov {
 font-size:20px;
}

.Usluga p {
  text-align: center;
  padding:25px;
}

 .Usluga hr, #galerija hr, #pre_posle hr {
  width:50px;
  border:3px solid #DB0914;
  margin:0 auto;
}

 .Usluga ul {
  display:block;
}


 .Usluga ul li {
  text-align:center;
  margin:0 auto;
}




/* Dentalni Turizam */

#dentalni_turizam p {
  text-align:center;
  font-size:25px;
  padding:20px;
  line-height:50px;
}

#dentalni_turizam ul {
  font-size:20px;
  padding:20px 40px;
  list-style:none;
}

#dentalni_turizam ul li {
  padding:20px 0;
}

#dentalni_turizam img {
  margin:0 auto;
  display: block;
  max-width:100%;
  max-height:auto;
  border:2px solid #DB0914;
  margin:20px auto;
}

#galerija_turizam img {
  float:left;
  width:31%;
  margin:1%;
  border:1px solid #DB0914;
}





/* Media Queries */
@media(max-width: 1250px){
  header #branding,
  header nav,
  header nav li,
  #newsletter h1,
  #newsletter form,
  #boxes .box,
  #o_nama .box,
  #boxes2 .box,
  #kontakt .box,
  #pre_posle .rad,
  #galerija_turizam img
  {
    float:none;
    text-align:center;
    width:100%;
  }

  header{
    padding-bottom:40px;
  }

  header ul {
    margin-top:40px;
  }


  header .current a{
    color:#DB0914;
    font-weight:bold;
    background:none;
    padding:0;
  }

  header .current a:hover {
    color:#ff5c4c;
  }


  #showcase {
    background-attachment:scroll;
  }

  #showcase h1{
    margin-top:40px;
    font-size:2em;
  }

  #slogan {
    font-size:1.5em;

  }

  #o_nama .box img {
    padding-right:0;
}

  #galerija .container img, #pre_posle .rad img {
    width: 100%;
    margin-top:20px;
    float: none;
    border-top:3px solid #DB0914;
    border-bottom:3px solid #DB0914;
    border-left:0;
    border-right:0;
  }

  #pre_posle .rad p {
    height:120px;
    padding-top:10px;
    width:230px;
  }

  #klijenti .box2 h3 {
    font-size:22px;
  }

  #klijenti .box2 p {
    margin-top:20px;
    font-size:20px;
  }

  #klijenti button {
  font-size:2em;
  padding:0;
}

#klijenti img {
  border-radius:50%;
  width:100px;
  height:100px;
} 

}


@media screen and (max-width: 1000px) {
  .topnav {
    float:none;
  }

  .topnav a, .dropdown .dropbtn {
    display: none;
    float: none;
  }
  .topnav a.icon {
    display: block;
    margin:0 auto;
  }

  .topnav .active {
    display:none;
  }
}

@media screen and (max-width: 1000px) {
  .topnav.responsive {position: relative; float:none;}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: center;
  }

  .boxes2-box {
  float:none;
}

.boxes2-box1{
  width: 90%;
  margin: auto;
  display: block !important;
} 

}