/***************************************************/
/**                                               **/
/** Design by: Korado Vidulin                     **/
/**                                               **/
/** Copyright: Plurato.com × skycam.plurato.com   **/
/**            2016                               **/
/**                                               **/
/***************************************************/


/** Reset CSS-a ************************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,
dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt,
var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, section,
legend, table, caption, tbody, tfoot, thead, tr, th, td { 
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; 
}
a{text-decoration: none;}

/* Paleta boja:

- klase za farbanje texta:
*/
.bijelitext {color: #fff;}
.svjetloplavitext {color:#76b043;}  .bijelapozadina{background-color: #fff;}
.plavitext  {color:rgb(14,75,133);} .plavapozadina{background-color: rgb(14,75,133);}
.crnitext{color: #000;} .crnapozadina{background-color: rgb(156,43,43);}
/** Elementi ***************************************/

html{
	height: 100%; width: 100%;
}
body{
	line-height: 1;
	width:100%;
	height: 100%;
	background-color: #fff;
  font-family: 'Roboto', 'Arial', sans-serif; font-weight: 300;
}

section{
  overflow: hidden;
}
#medjusekcija-1{
  height: 480px;
  background: url('../img/medjusekcija-1.jpg') 50% 0 no-repeat fixed;
  background-size: cover;
}
#medjusekcija-2{
  height: 480px;
  background: url('../img/medjusekcija-2.jpg') 50% 0 no-repeat fixed;
  background-size: cover;
}
.prva{
  width: 100%;
  background: url('../img/bckgrnd-blurred.jpg') 50% 0 no-repeat fixed;
  background-size: cover;
  height: 100%;
  min-height: 600px;
}
.druga{
  z-index: 500;
}
.druga,.cetvrta,.sesta,.osma,.deseta{
    width: 100%;
    background-color:  #fff;
}
.treca,.peta,.sedma,.deveta{
    width: 100%;
    background-color: rgb(14,75,133);
}

.druga, .treca, .cetvrta, .peta, .sesta, .sedma, .osma, .deveta, .deseta{
  padding-bottom: 100px;
}

footer{
  width: 100%;
  min-height: 320px;
  background-color:  #555;
}

table{border: none;}

img {max-width: 100%;}
header{
  z-index: 999;
  width: 100%;
  height: 100px;
  /* border: solid 1px black; */
  position: fixed;
  background-color: rgba(0,0,0,0.8);
}
.logo{
  position: fixed;
}
#fixnav{ 
    box-shadow: 0 1px 8px rgba(0,0,0,0.2);
}
.logo{
  margin-top: 20px;
  height: 64px;
  /* border: solid 1px black; */
  }
.top{
  width: 64px; height: 64px;
  position: fixed;
  bottom:8px; right: 16px;
  opacity: 0.5;
}

.velik, .slikica{
  width: 99%;
}
.wrapper, nav, .head-wrapper{
    width: 1200px;
    margin: auto;
                                                 /*   border: dashed 1px silver;  */
    overflow: hidden;
}
.naslovniwrapper{
  width: 800px;
  margin: auto;
                                                 /*    border: dashed 1px yellow;  */
}
article{
  width: 46%;
  min-height: 80px;
  margin: 18px auto 2px auto;
  padding: 5px 0; 
                                               /*   border: dotted 1px lightgreen; */
}
  .ikona1,.ikona2,.ikona3, .ikona4,.ikona5,.ikona6,.ikona7,.ikona8,
  .blank_icon,.print_icon,
  .one_day,.three_days,.one_week{
          width: 112px;height: 112px;
          background-size: contain;
          background-repeat: no-repeat;
          float: left;
          margin: 20px 20px 0 0;
  }
    .ikona1{
      background-image:  url('../img/jedan.svg');
    }
    .ikona2{
      background-image:  url('../img/dva.svg');
    }
    .ikona3{
      background-image:  url('../img/tri.svg');
    }
   ul li {line-height: 160%;
    margin-bottom: 20px;
    font-size: 120%;}
.polovina{
  width: 48%;
}
.fullwidth{width: 100%;}
/* Floatanje */
.desni{float: right;}
.lijevi{float: left;}
.stop{clear: both;}
/* Razmaci od gore - promjenjivi u rezponzivnosti */
.top10px{padding-top: 12px;}
.top20px{padding-top: 20px;}
.top40px{padding-top: 40px;}
.top60px{padding-top: 60px;}
.top80px{padding-top: 80px;}
.top100px{padding-top: 100px;}
.top110px{padding-top: 110px;}
.top120px{padding-top: 120px;}
.top140px{padding-top: 140px;}
.top160px{padding-top: 160px;}
.top180px{padding-top: 180px;}
.top200px{padding-top: 200px;}
.top220px{padding-top: 220px;}
.top240px{padding-top: 240px;}
.top260px{padding-top: 260px;}
/* Razmaci od gore - fiksni */
.fixtop20px{padding-top: 30px;} .fixtopmargin20px{margin-top: 20px !important;}
.fixtop40px{padding-top: 40px;} .fixtopmargin50px{margin-top: 50px !important;}
.fixtop60px{padding-top: 60px;} .fixtopmargin60px{margin-top: 60px !important;}
.fixtop80px{padding-top: 80px;} .fixtopmargin80px{margin-top: 80px !important;}
.fixtop100px{padding-top: 100px;}
.fixtop110px{padding-top: 110px;}
.fixtop120px{padding-top: 120px;}
.fixtop140px{padding-top: 140px;}
.fixtop160px{padding-top: 160px;}
/**/.fixtop180px{margin-top: 200px;}
.fixtop200px{padding-top: 200px;}
.fixtop220px{padding-top: 220px;}
.fixtop240px{padding-top: 240px;}
.fixtop260px{padding-top: 260px;}
.fixtop300px{padding-top: 300px;}

table, td, tr{
    vertical-align: middle;
    padding: 0;
    padding-right: 15px;
}

#mala_tablica{
  display: none;
}

a.logac{
 position: fixed;
 background-color: rgba(0,0,0,0.25);
}
a{
  color: #fff;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
  font-size: 150%;
}
p{
  color: #fff;
  line-height: 140%;
  font-size: 130%;
}
.bold{font-weight: 500 !important;} .superbold{font-weight: 700;}
.ogroman{font-size: 200%; line-height: 140%; font-weight: 400;}
h1{
  font-size: 300%;
  line-height: 120%;
  font-weight: 300;
}
h2{
  font-size: 200%;
  line-height: 120%;
  font-weight: 300;
    margin-top: 10px;
}
  .intro{
    background:  url('../img/ilustracija-1.svg') no-repeat 50% 50%;
    width: 100%;
    min-height: 500px;
  }

  h2.slogan{
     z-index: 9;
         }

    @keyframes slide {
      0%    { opacity: 0; }
      6%    { opacity: 1; }
      33%   { opacity: 1; }
      40%   { opacity: 0; }
      100%  { opacity: 0; }
  }
h3{
  font-size: 140%;
  line-height: 200%;
  margin-top: 25px;
  font-weight: 300;
}
h4{
  font-size: 240%;
  line-height: 150%;
  font-weight: 300;
  padding: 10px;
}
.tanki{font-weight: 300 !important;}
hr{width: 100%; height: 1px;
  border: none;
  margin: 20px auto;
  background-color: #fff;
}
small{font-size: 65%; font-weight:300; 
}
.nemabocnihmargina{margin-right: 0; margin-left: 0;}

.sjena{  text-shadow: 1px 2px 5px rgba(0,0,0,0.2);
}
.boxshadow{
  box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
}
.justify{
  text-align: justify;
}
.centrirano{
  text-align: center;
}
.raspored{font-size: 200%;
text-align: center;
}
#nav-trigger{
 display: none;
}

.malilijevi{
  float: left;
  width: 48%;
  min-height: 100px;
}
.malidesni{
float: right;
width: 48%;
min-height: 100px;
}
.trecine{
  width: 358px;
  min-height: 240px;                                              /*    border: solid 1px #555;  */
  margin: 30px 0 30px 0;
}
.bezmargine{margin: 0 !important;}
  .desktoprazmak{margin-top: 10px;}

.shade{
  width: 100%; height: 0;                                     /* border: dotted 1px yellow; */
  background-color: rgba(0,0,0,0.7);
  padding: 0;
  margin-top: 100px;
  opacity: 0;
}
#videoshade{
  z-index: 999;
  width: 100%; height: 100%;
  position: fixed;
  top: 0; left: 0;
  background-color: rgba(0,0,0,0.7);
  display: none;
  text-align: center;
}
          iframe{width: 1152px; height: 648px;
        margin: 100px auto auto auto;
          display: block;
        }
a.botun{
  display: block;
  border: solid 2px #fff;
  width: 200px; min-height: 30px;
  padding: 24px 15px;
  top: 80vh;
  position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  color:#fff;
  font-size: 180%;
  background-color: rgba(0,0,0,0.25);
}
  a.botun:visited{color:#fff;}

  .plaviobrub{border: solid 2px #272272 !important;
    color: #009BD9 !important;}
    .plaviobrub:hover{border: none; color:#fff !important;}
  .plavirub{ 
    border: solid 2px #272272; 
    padding: 20px;}

  a.zaproizvode{
  display: block !important;
  width: 200px; height: 44px;
  padding: 60px 20px 10px 20px;
  margin: auto;
  color:#fff;
  font-size: 200%;
  text-align: center;
  }

/******* NAVIGACIJA **************************************************/

nav{
  position: fixed;
/*  border: solid 1px; */
}
  nav li{display: inline;}
  nav ul{ float: right;
      padding:0;
      margin-top:0;
      overflow:hidden;}
  nav a{
  padding: 10px 5px;
  height:auto;
  margin: 28px 0 30px 20px;
  display:block;
  float:left;
  color:white;
  text-decoration: none;
  font-size:18px;
  color: #fff;
  border-bottom: solid 1px transparent;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
                                                      /*  border: solid 1px green; */
  }
  nav a:hover {
  color: rgb(14,75,133); 
/*  border-bottom:solid 3px black; */

  }
  .trenutni{color:#fff;
    border-bottom: solid 1px white;
    -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
} 
.popup {opacity:0;}

.sakrij_na_mobu{display: block;}

#mob_nav{position: fixed;
  top: 10px;
  right: 15px;
  width: 44px;
  height: 44px;
  display: none;
}
nav#mobile_nav{
  position: fixed;
  display: none;
  z-index: 999;
  width: 240px;
  background-color: rgba(0,0,0,0.7);
  top: 64px; right: 0;
}
  nav#mobile_nav a{
    width: 90%;
    text-align: right;
    padding: 10px 1px;
    margin: 10px 0 10px auto;
  }


/******* ANIMACIJE ***************************************************/

.pocrveni:hover{
  background-color: #76b043;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}
.potamni:hover {
  background-color: #006838;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}

.poplavi:hover{
  background-color: rgb(14,75,133);
  color: #fff;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}

a.botun:hover{
  background-color: rgb(14,75,133);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}

.trecine:hover .shade{
  height: 240px;
  margin-top:0;
  opacity: 1;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
}
.top:hover{
  opacity: 1;
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
}
/******* RESPONZIVNOST ***********************************************/

.mob-separator{
display: none;
}

/* Za manje ekrane tipa manji lapovi, tableti */
@media only screen and (max-width: 1220px){

    .wrapper{
    width: 760px;
    }

    .head-wrapper, nav{
      width: 96%;
    }
    article{
    width: 48%;                                                  
    }
    h3{
    font-size: 140%;
    }

    .ikona1,.ikona2,.ikona3, .ikona4,.ikona5,.ikona6,.ikona7,.ikona8,
    .blank_icon,.print_icon,
    .one_day,.three_days,.one_week{
          width: 100px;height: 100px;
          margin-right: 15px;
        }
    hr.nemabocnihmargina{width: 100%;
    }
    .top120px{
      padding-top: 60px;
    }
    .plavirub{
      border: solid 1px #f8951d;
    }
    iframe{width: 800px; height: 450px;}
    nav a{
  padding: 10px 5px;
  height:auto;
  margin: 28px 0 30px 10px;
  display:block;
  float:left;
  color:white;
  text-decoration: none;
  font-size:18px;

}
/* Za mobitele i portrait tablete */
@media only screen and (max-width: 800px){

    .intro{
      min-height: 420px;
    }
    #velika_tablica{
      display: none;
    }
    #mala_tablica{
      display: block;
    }
    #mala_tablica img{
      float: left;
      width: calc(20% - 4px);
      margin: 2px;
    }
    .wrapper, nav{
    width: 85%;
    }
    .naslovniwrapper{width: 90%;
    }
    hr{
      margin-left: auto; margin-right: auto;
      width: 100%;
    }
   
    article{
      width: 100%;
      min-height: 44px;
      margin: 8px 0 2px 0;    
    }
    .ikona1,.ikona2,.ikona3, .ikona4,.ikona5,.ikona6,.ikona7,.ikona8,
    .blank_icon,.print_icon,
    .one_day,.three_days,.one_week{
          width: 60px;height: 60px;
          margin-right: 20px;
        }
    .top40px{
      padding-top: 15px;
    }
    .fixtop300px{
      padding-top: 160px;
    }
    .sakrij_na_mobu{display: none;}
    .ogroman{font-size: 160%; line-height: 120%;
    }
    h1{font-size: 320%;
    }
    h2{
      font-size: 130%;
    }
       

    h3{font-size: 120%;
      margin-top: 12px;}
    .logo{
    margin-top: 10px;
    height: 44px;
    }
    header{
      height: 64px;
    }
    .fixtop120px {
      padding-top: 80px;
    }
      .fixtop180px{margin-top: 140px;}
    .top10px{
      padding-top: 0;
    }
    /* Paljenje mobilne navigacije */
    #desktop_nav{display: none;}

    #mob_nav{display: block;}

  iframe {width: 90%; height: 320px;}

}

@media only screen and (max-width: 736px){
    .intro{
      min-height: 360px;
    }
  .polovina{
  width: 100%;
}
  .mob-separator{
    display: inline-block;
    height: 10px;
  }
  .justify {text-align: center;}
      .botun{
  display: none !important;
  }
       h2#slide-1, h2#slide-2, h2#slide-3{
    font-size:108%; 
         }
      #mala_tablica img{
            width: calc(25% - 4px);
        }
  
  .prva{
  width: 100%;
  background: url('../img/bckgrnd-blurred-mob.jpg') 50% 0 no-repeat;
  background-size: cover;
  }
  #medjusekcija-1{
  height: 480px;
  background: url('../img/medjusekcija-1-mob.jpg') 50% 0 no-repeat;
  background-size: cover;
  }
  #medjusekcija-2{
  height: 480px;
  background: url('../img/medjusekcija-2-mob.jpg') 50% 0 no-repeat;
  background-size: cover;
  }

}

/* Za mobitele */
@media only screen and (max-width: 480px){

    nav#mobile_nav{
      width: 100%;
  }

    #mala_tablica img{
      width: calc(33.33% - 4px);
    }
  p{font-size: 120%;}
      h1{font-size: 220%;}
    h3{font-size: 120%;
      margin-top: 8px;}
        .cetvrta{
      height: 860px;
    }
    ul.plavitext li{
      font-size: 100%;
      line-height: 110%;
    }
          h2#slide-1, h2#slide-2, h2#slide-3{
  display: none;      }

    .fixtop180px{margin-top: 80px;}

  iframe {width: 90%; height: 240px;}
}
/* Za mobitele */
@media only screen and (max-width: 320px){
  p{font-size: 120%;}
      h3{font-size: 120%;}
      
}