body {
   font-family: 'Montserrat', sans-serif;
   background-color: #fff;
   animation: fadein 1.5s;
   -moz-animation: fadein 1.5s;
   -webkit-animation: fadein 1.5s;
   -o-animation: fadein 1.5s;
}
 
body, html {
   height: 100% 
}

@keyframes fadein {
   from {
      opacity:0;
   }
   to {
      opacity:1;
   }
}
 
@-moz-keyframes fadein {
   from {
      opacity:0;
   }
   to {
   opacity:1;
   }
}

@-webkit-keyframes fadein {
   from {
      opacity:0;
   }
   to {
      opacity:1;
   }
}

@-o-keyframes fadein {
   from {
      opacity:0;
   }
   to {
      opacity: 1;
   }
}

.navbar {
   border-radius: 0;
   border: none;
   margin-bottom: 0;
   padding: 0;
}

.navbar-brand img {
   max-height: 65px;
}

.nav-tran {
   background-color: transparent;
}

.nav-poz {
   background-color: rgba(2, 137, 209, 0.9);
}

.nav-item {
   color: #0288d1;
   font-size: 20px;
   border-bottom: 0;
   letter-spacing: 2px;
   transition: ease-in-out .3s;
   justify-content: right;
}

.nav-item:hover {
   letter-spacing: 5px;
}

.nav-link, .nav-link:hover {
   color: #fff;
}

.closebtn {
   display: none;
}

/* Dropdown Button */
.dropbtn {
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
    border: solid white 1px;
    margin-top: 10px;
    margin-left: 15px;
}

@media only screen and (max-width: 254px) {
   .dropbtn {
      margin-left: 0px;
   }
}


.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(2, 137, 209, 0.6);
    width: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
   background-color: rgba(2, 137, 209, 0.9);
}

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

#nav-mob {
   display: none;
}


@media only screen and (min-width: 768px) {
   #sm-show {
      display: none;
   }

}

@media only screen and (max-width: 768px) {
   #sm-hidden {
      display: none;
   }

   #sm-show {
      display: inline;
   }

   #sm-show button {
      margin-top: 0px;
   }
   
   .navbar-toggler {
      font-size: 25px;
      color: #fff;
   }
   
   .navbar-brand img {
      padding-left: 15px;
      max-height: 40px;
   }
   
   #nav-mob {
      display: inline;  
   }

   #nav-desk {
      display: none;

   }

   .mobile-back {
      background-color: transparent;
   }

   @media only screen and (max-width: 768px) {
      .navbar-brand img {
         max-height: 25px;
      }
   }
   

   @media only screen and (max-width: 768px) { 
   .mobile-back {
      background-color: rgba(2, 137, 209, 0.9);;
      }
   }


   .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      right: 0;
      background-color: #4C5B61;
      overflow-x: hidden;
      padding-top: 10px;
      transition: 0.5s;
   }

   .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #C0C0C0;
      display: block;
      transition: 0.3s;
   }
   
   .closebtn {
      text-align: right;
   }
     
   .fa-times {
      font-size: 25px;
      padding-right: 15px;
   }
   
   .nav-item {
      text-align: center;
      padding-top: 25px;
   }
   
   .sidenav a:hover {
      color: #f1f1f1;
   }

   .nav-item, .nav-item:hover {
      border-bottom: none;
   }
}

@media screen and (max-height: 450px) {
   .sidenav {
      padding-top: 15px;
   }
}

.carousel {
     animation: fadein 5s;
   -moz-animation: fadein 5s;
   -webkit-animation: fadein 5s;
   -o-animation: fadein 5s;
}


@media only screen and (max-width: 540px) {
   .carousel {
      padding-top: 40px;
   }   
}


.carousel-indicators {
   cursor: pointer;
}

.carousel-indicators .active {
   background-color: #0288d1;
}

.carousel-control-prev, .carousel-control-next {
   width: 45%;
}

h1 {
   color: #0288d1;
   font-size: 3.5em;
}

h2 {
   color: #0288d1;
}

h3 {
   color: #0288d1;
}

@media only screen and (max-width: 768px) {
   h1 {
      color: #0288d1;
      font-size: 2em;
    }
   
   h2 {
      color: #0288d1;
   }

   h3 {
      font-size: 1.4em;
      color: #0288d1;
   }
   
   h4 {
      font-size: 1.2em;
   }
}

p {
   font-size: 1.1em;
}

section {
   padding-top: 5em;
   padding-bottom: 5em;
}

.kanvas-bar {
   margin-top: 85px;
}

.thumb-bar {
   height: 100%;
   background-color: #0288d1;
}



@media only screen and (max-width: 768px) {
   .kanvas-bar {
      margin-top: 25px;
   }
   
   .thumb-bar {
      background-clip: padding-box; 
      border-top: solid 15px #fff;
   }
}

.head-icon {
   color: #FFFFF2;
   padding: 1em;
}

.head-icon p {
   font-size: 1em;
   color: #FFFFF2;
   margin-bottom: 0;
}

.head-icon h3 {
   color: #FFFFF2;
}

.head-icon a {
   color: #FFFFF2;
   transition: 0.3s;
}

.head-icon a:hover {
   letter-spacing: 2px;
   text-decoration: none;
}

.head-icon i {
   font-size: 50px;
   color: #FFFFF2;
}

@media only screen and (max-width: 990px) {
   .head-icon i {
      font-size: 35px;
   }

   .head-icon p {
      font-size: 0.8em;
   }
}
   
@media only screen and (max-width: 768px) {
   .head-icon i {
      font-size: 50px;
   }
}

#usluge {
   background-color: #f7f6f5;
}

.par1 {
   background-image: url(./img/parallax1.jpg);
   background-size: cover;
   background-attachment: fixed;
   height: auto;
   background-repeat: no-repeat;
   background-position: center;
   border-radius: 0;
}

.par1 .donji {
   padding-top: 400px;
   margin-bottom: -8px;
}


.par2 {
   background-image: url(./img/parallax2.jpg);
   background-size: cover;
   background-attachment: fixed;
   height: auto;
   background-repeat: no-repeat;
   background-position: center;
   border-radius: 0;
}

@media only screen and (max-device-width: 1366px) {
.par1,
.par2 {
    background-attachment: scroll;
   }
}


.par2 .donji {
   padding-top: 400px;
   margin-bottom: -8px;
}

   .par1 .gornji {
      margin-top: -1px;
   }

   .par2 .gornji {
      margin-top: -1px;
   }


@media only screen and (max-width: 300px) {
   .par1 .gornji {
      margin-top: -4px;
   }

   .par2 .gornji {
      margin-top: -4px;
   }
}

@media only screen and (max-width: 768px) {
   .par1 .donji, 
   .par2 .donji {
      padding-top: 200px;
   }
}

#kontakt {
   padding-bottom: 0;
}

#kontakt p {
   text-align: center;
}

.material-icons {
   vertical-align: middle;
}

#kontakt a {
   color: #212529;
   transition: ease-in-out .3s;
}

#kontakt a:hover {
   text-decoration: none;
   color: #212529;
   letter-spacing: 2px;
}

.ik-kont-bg {
   font-size: 2em;
   color: #0288d1;
}

@media only screen and (max-width: 1000px) {
   #kontakt h4 {
      font-size: 1.2em;
   }
}

#b2top {
   display: none;
   position: fixed;
   bottom: 20px;
   right: 30px;
   z-index: 99;
   font-size: 2em;
   border: none;
   outline: none;
   background-color: transparent;
   color: #0288d1;
   cursor: pointer;
   padding: 15px;
}

#b2top i {
   font-size: 2em;
}

.ok {
   list-style: none;
   padding: 0;
}

.okli {
   padding-left: 3em;
}

.okli:before {
   content: "\E876";
   font-family: Material Icons;
   display: inline-block;
   margin-left: -1.3em;
   width: 1.3em;
   padding-top: .5em;
   font-size: 2.2em;
   color: #0288d1;
}

.okli h4 {
   margin-top: -42px;
}

input {
   border-radius: 0;
   width: 100%;
   background:transparent;
   border: solid 1px #0288d1;
}

label {
   padding-top: 15px;
}


textarea {
   border-radius: 0;
   width: 100%;
   background:transparent;
   border: solid 1px #0288d1;
}

.btn-form {
   width: auto;
   padding: 5px 15px;
   float: right;
   background-color: #0288d1;
   color: #FFFFF2;
   letter-spacing: 2px;
   transition: ease-in-out .3s;
   cursor: pointer;
}

.btn-form:hover {
   letter-spacing: 5px;
   text-decoration: none;
   color: color: #FFFFF2;
}

.mapa {
   padding-top: 5em;
}

.slideaniml {
   animation-name: slidel;
   -webkit-animation-name: slidel;
   animation-duration: 1s;
   -webkit-animation-duration: 1s;
   visibility: visible;
}

@keyframes slidel {
   0% {
      opacity: 0;
      transform: translateX(70%);
   }
   100% {
      opacity: 1;
      transform: translateX(0%);
      }
   }
}

@-webkit-keyframes slidel {
   0% {
      opacity: 0;
      -webkit-transform: translateX(70%);
   }
   100% {
      opacity: 1;
      -webkit-transform: translateX(0%);
   }
}

.slideanims {
   visibility:hidden;
}

.slides {
   animation-name: slidemain;
   -webkit-animation-name: slidemain;
   animation-duration: 1s;
   -webkit-animation-duration: 1s;
   visibility: visible;
}

.slideanim {
   visibility:hidden;
}

.slidemain {
   animation-name: slidemain;
   -webkit-animation-name: slidemain;
   animation-duration: 1s;
   -webkit-animation-duration: 1s;
   visibility: visible;
}

@keyframes slidemain {
   0% {
      opacity: 0;
      transform: translateY(70%);
   }
   100% {
      opacity: 1;
      transform: translateY(0%);
   }
}
   
@-webkit-keyframes slidemain {
   0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
   }
   100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
   }
}


#okCookie{
  background-color: rgba(232, 230, 228, 0.8);
  color:#212529;
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  padding:10px;
  font-family:sans-serif;
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
  z-index:10;
  border-radius: 0;
}

#okCookie p {
  margin:0 0 10px 0;
  float:left; 
  padding:5px 0px;
  font-size: .7em;
}

#okCookie #okClose, #okCookie #okCprivacy{
  padding:2px 5px;
  float:right;
  margin-left:10px;
  text-decoration:none;
  border-radius:0px;
  color:white;
}

#okCookie #okClose{
  background-color:#3D5A6C;
  text-shadow:0px 1px 1px #507F2B;
  box-shadow:inset 0px -1px 1px #507F2B;
}

#okCookie #okClose:hover{
  background-color:#7E919D;
}

#okCookie #okCprivacy{
  background-color:#8D9499;
  text-shadow:0px 1px 1px #63666B;
  box-shadow:inset 0px -1px 1px #63666B;
}

#okCookie #okCprivacy:hover{
  background-color:#a0a8ae
}

.okcBeginAnimate{
    -webkit-animation: myfirst 2s; 
    animation: myfirst 2s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* Standard syntax */
@keyframes myfirst {
    from {opacity: 0;}
    to {opacity: 1;}
}



.g-recaptcha {
    text-align: -webkit-right;
   text-align: -moz-right;
   text-align: -o-right;
   text-align: -ms-right;
   margin-bottom: 15px;
}

@media only screen and (max-width: 768px) {

  .g-recaptcha {
    transform:scale(0.77);
    -webkit-transform:scale(0.77);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;"
    margin-bottom: 5px;
  }
}

@media only screen and (max-width: 250px) {
  .g-recaptcha {
    transform:scale(0.6);
    -webkit-transform:scale(0.6);
    transform-origin:0 0;
    -webkit-transform-origin:0 0;"
     text-align: -moz-right;
   text-align: -o-right;
   text-align: -ms-right;
  }
}



footer {
   padding-top: 25px;
   padding-bottom: 25px;
   background-color: #5f5f5f;
   color: #f7f6f5;
}

footer p {
   margin-bottom: 0;
}

footer a {
   color: #f7f6f5;
   transition: ease-in-out .3s;
}  


footer a:hover {
   color: #f7f6f5;
   text-decoration: none;
   letter-spacing: 4px;
}