html {}

body {
   background: transparent;
   padding: 0 !important;
   margin: 0 !important;
}

#naslovna_bg {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1;
   overflow: hidden;
}

#naslovna_sadrzaj {
   position: relative;
   z-index: 2;
   width: 100%;
}

#zastave {
   position: absolute;
   top: 5px;
   right: 200px;
   text-align: right
}

#zastave a img {
   border: 1px solid #000;
   opacity: .7
}

#zastave a:hover img,
#zastave a.aktivan_jezik img {
   border: 1px solid #fff;
   opacity: 1
}

#zastave a {
   color: #fff;
   padding: 1px 3px;
}

.loginbutton {
   background-color: #ffffffa6;
   border: 1px solid #ced4da40;
}

#logo_line {
   max-width: 500px;
}

#logo_line img {
   width: 100%;
}

#screenshots {
   text-align: center;
   padding: 30px 2px 2px;
}

#screenshots a img {
   margin: 2px 0 2px 3px;
   border: 1px solid #000;
   background: #000;
   opacity: 0.8
}

#screenshots a:hover img {
   border: 1px solid #fff;
   opacity: 1
}

#container {
   margin: auto;
   text-align: left;
   max-width: 1200px;
   position: relative;
}

#central {
   display: block;
   max-width: 900px;
   margin: 39px auto auto;
}

#description {
  background-repeat: no-repeat;
  background-size: cover;
  margin: 5% auto;
  padding:20px;
  background-color: #0C1719;
  margin-bottom: 10px;  
  box-shadow: 0 1px 2px 3px rgba(0,0,0,.6);
  border-radius: 0px;
  position: relative;

}

.box {
   display: block;
   float: left;
   width: 295px;
   min-height: 228px;
   padding: 5px;
   border-right: 1px solid #fff
}

.boxOkvir::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(10px);
  backdrop-filter: blur(10px);
  background: url(/img/style/bck-trans.png);
  -webkit-backdrop-filter: blur(10px);
  z-index: -1;
  animation: blurAnimation 20s infinite alternate;
}

@keyframes blurAnimation {
  0% {
  background-position: -200px -200px;
  filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  }
  50% {
  background-position: -200px 0px;
  filter: blur(1px);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  }
  100% {
  background-position: -50px -100px;
   filter: blur(1px);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  }
}

.boxOkvir {
  border-radius: 4px;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #1322259e;
    box-shadow: 0 1px 2px 3px rgb(0 0 0 / 60%);
}

.box a {
   color: #2980b9
}

.server_box {
   display: block;
   float: left;
   width: 296px;
   padding: 5px
}

.hr {
   border-bottom: solid #ccc 1px;
   width: 90%;
   padding: 1px;
   clear: both;
   display: block;
   margin: auto;
}

.logo-centar {
   width: 70%; 
   display: block;
}

.banner-sec{padding-right:0; padding-left: 0px;}

.carousel-inner{border-radius:0 10px 10px 0;}
.carousel-caption{text-align:left; left:5%;}

.login-box{padding: 50px 30px; position:relative; border: 1px solid transparent;
    /*background: url('/img/style/bck-strong.png');*/
    /*border-image: linear-gradient(#08abac,#01698b) 1;*/
    transition: all ease .5s;
 }

.login-image {background:url('/img/wallpaper.png'); background-position: center; background-size: cover;}
.login-box .copy-text{position:absolute; width:80%; bottom:20px; font-size:13px; text-align:center;}
.login-box .copy-text i{color:#FFF;}
.login-box .copy-text a{color:#FFF;}
.login-box h2{margin-bottom:30px; font-weight:800; font-size:30px; color: #DE6262;}
.login-box h2:after{content:" "; width:100px; height:5px; background:#FFF; display:block; margin-top:20px; border-radius:3px; margin-left:auto;margin-right:auto}

.btn-login{background: #DE6262; color:#fff; font-weight:600;}
.banner-text{width:70%; position:absolute; bottom:40px; padding-left:20px;}
.banner-text h2{color:#fff; font-weight:600;}
.banner-text h2:after{content:" "; width:100px; height:5px; background:#FFF; display:block; margin-top:20px; border-radius:3px;}
.banner-text p{color:#fff;}

.in_senka {
   -webkit-box-shadow: 1px 1px 3px #fff INSET;
   -moz-box-shadow: 1px 1px 3px #fff INSET;
   box-shadow: 1px 1px 3px #fff INSET;
}

.plavi_okvir {
   display: block;
   min-height: 294px;
   padding: 4px;
   margin-top: 4px;
   text-align: justify;
   color: #fff;
   background: rgba(2, 0, 0, 0.8);
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px
}

#login_form {
   font-size: 11px;
   text-align: center
}

#login_form input[type=text],
#login_form input[type=password] {}

#login_form label {
   float: left;
   display: inline-block;
   width: 4em;
   vertical-align: middle;
   font-size: 11px;
   font-weight: bold;
   margin: 5px 0 5px 5px;
}

#popup2 {
   min-height: 1000px;
   position: fixed !important;
}

#dijalog {
   opacity: 1;
   background: #ccc
}

#dijalog input,
#dijalog textarea {
   /*max-width: 230px;*/
   margin-top:4px;
}

.zaobljen {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px
}

.plavo_dugme {
   display: block;
   height: 54px;
   padding: 4px;
   margin-top: 4px;
   background: url(/img/dugme_back.png);
   border: 1px solid #0B326F;
   border-radius: 5px
}

#register_now {
   cursor: pointer
}

.uputstvo {
   width: 655px;
   height: 423px;
   padding: 0 10px 10px 120px
}

.uputstvo h1 {
   clear: left;
   margin: -1px -10px 5px -120px;
   background: #94CDDE;
   border-top: 1px solid #4F81BC;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #94CDDE), color-stop(1, #FFF));
   background: -moz-linear-gradient(top, #94CDDE 0%, #FFF 100%)
}

.uputstvo p {
   margin: 5px 0;
   text-align: justify
}

.uputstvo .slika {
   float: left;
   margin: 0 0 10px -110px
}

#slika_pozadina_naslovna {
   width: 100%;
}

.title {
   font-size: 18px;
   color: #fff;
   margin-left: 5px;
   font-weight: 600;
   height: 20px
}

.whatis {
   font-size: 11px;
   text-align: justify;
   margin: 5px 0;
   color: #fff;
   line-height: 14px
}

#copyright_blok {
   text-align: center;
   margin: auto;
   color: #fff;
   margin-top: 10px;
}

#copyright_blok a {
   color: #FFF1A8
}


/* Lightbox*/

#lightbox {
   background-color: #eee;
   padding: 5px
}

#lightboxDetails {
   font-size: 0.8em;
   padding-top: 0.4em
}

#lightboxCaption {
   float: left
}

#keyboardMsg {
   float: right
}

#closeButton {
   top: 0;
   right: 0
}

#lightbox img {
   border: none;
   clear: both
}

#overlay img {
   border: none
}

#overlay {
   background-image: url(/img/overlay.png)
}

* html #overlay {
   background-color: transparent;
}


/* Shared */

.loginBtn {
   box-sizing: border-box;
   position: relative;
   /* width: 13em;  - apply for fixed size */
   margin: 0.2em;
   padding: 0 15px 0 46px;
   border: none;
   text-align: left;
   line-height: 34px;
   white-space: nowrap;
   border-radius: 0.2em;
   font-size: 16px;
   color: #FFF;
   cursor: pointer;
}

.loginBtn:before {
   content: "";
   box-sizing: border-box;
   position: absolute;
   top: 0;
   left: 0;
   width: 34px;
   height: 100%;
}

.loginBtn:focus {
   outline: none;
}

.loginBtn:active {
   box-shadow: inset 0 0 0 32px rgba(0, 0, 0, 0.1);
}


/* Facebook */

.loginBtn--facebook {
   background-color: #4C69BA;
   background-image: linear-gradient(#4C69BA, #3B55A0);
   /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
   text-shadow: 0 -1px 0 #354C8C;
}

.loginBtn--facebook:before {
   border-right: #364e92 1px solid;
   background: url(/media/img/icon_facebook.png) 6px 6px no-repeat;
}

.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
   background-color: #5B7BD5;
   background-image: linear-gradient(#5B7BD5, #4864B1);
}


/* Google */

.loginBtn--google {
   /*font-family: "Roboto", Roboto, arial, sans-serif;*/
   background: #DD4B39;
}

.loginBtn--google:before {
   border-right: #BB3F30 1px solid;
   background: url(/media/img/icon_google.png) 6px 6px no-repeat;
}

.loginBtn--google:hover,
.loginBtn--google:focus {
   background: #E74B37;
}

@media screen and (max-width: 333px) {
   #lightboxImage {
      width: 300px !important;
   }
}

@media screen and (min-width: 334px) and (max-width: 433px) {
   #lightboxImage {
      width: 400px !important;
   }
}

@media screen and (min-width: 434px) and (max-width: 533px) {
   #lightboxImage {
      width: 500px !important;
   }
}

@media screen and (min-width: 0px) and (max-width: 575px) {
  .login-image {
      background: initial;

  }
  
  .login-image:before {
    content : "";
    position: absolute;
    left    : 0;
    bottom  : 0;
    right:0 ;
    margin:0 auto;
    height  : 1px;
    width   : 90%;  /* or 100px */
    border-bottom:2px solid #0c1719;
  }

  .login-image:after {
    content : "";
    position: absolute;
    left    : 0;
    top  : 0;
    right:0 ;
    margin:0 auto;
    height  : 1px;
    width   : 90%;  /* or 100px */
    border-top:2px solid #0c1719;
  }

  .boxOkvir {
      box-shadow: initial;
  }

  .login-box {
      background: initial;
  }


  .logo-centar{
    margin-bottom: 10px;
  }

}

@media screen and (min-width: 534px) and (max-width: 633px) {
   #lightboxImage {
      width: 600px !important;
   }
}

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

.boxOkvir::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(10px);
  backdrop-filter: blur(10px);
  background: none;
  -webkit-backdrop-filter: blur(10px);
  z-index: -1;
  animation: blurAnimation 20s infinite alternate;
  border-bottom: none;
}

  #body_mod_neulogovan {
      margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  }

   #description .box,
   #description .server_box {
      margin: auto;
      float: none;
      border: none;
      height: auto;
      min-height: 50px;
   }
   .plavi_okvir {
      min-height: 34px;
   }
   #central {
      margin: 0 auto;
   }
   #body_mod_neulogovan,
   #lightboxImage,
   #lightbox,
   #overlay,
   #lightboxDetails {
      max-width: 700px !important;
   }

   .logo-centar {
      margin-top: 8px;
      margin-bottom: 30px;
   }

    #zastave {
      position: absolute;
      top: initial;
      bottom: 10px;
      right: 0;
      left: 0;
      z-index: 10;
      text-align: center;
   }

   #copyright_blok {
    display: none;
   }

}


@media screen and (max-width: 1024px) {
   body {
      background-image: url(/media/img/loginBackground.png);
      background-position: center;
      background-repeat: no-repeat; 
      background-size: cover;
      background-attachment: fixed;
   }
}

@media screen and (min-width: 1025px) {
   html {
      background: #00002A url(/media/img/loginBackground.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
   }
   #slika_pozadina_naslovna {
      background-image: url(/media/img/loginBackground.png);
      background-position: center;
      background-repeat: no-repeat; 
      background-size: cover;
      background-attachment: fixed;
   }
}


.earth {
  width: 340px;
  height: 340px;
  position: fixed;
  bottom: -100px;
  right: -100px;
  overflow: hidden;
  transform: rotateY(0deg) rotate(-15deg);
  border-radius: 50%;
  box-shadow: 0 0 20px 20px #000 inset, 0 0 20px 2px #000;
}

.earth:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: -20px -20px 50px 2px #000 inset;
  border-radius: 50%;
}

.earth > div {
  width: 200%;
  height: 100%;
  animation: spin 30s linear alternate infinite;
  background: url(/img/mapa_sveta.png);
  background-size: cover;
}
@keyframes spin {
  to {
    transform: translateX(-50%);
  }
}