@media (max-width: 768px) {
  #faq #faq-list a {
    font-size: 18px;
  }
  #faq #faq-list i {
    top: 13px;
  }
}
@media (max-width: 767px) {
  #more-features .box {
    margin-bottom: 20px;
  }
  #more-features .icon {
    float: none;
    text-align: center;
    padding-bottom: 15px;
  }
  #more-features h4, #more-features p {
    margin-left: 0;
    text-align: center;
  }
}
@media (min-width: 769px) {
  #call-to-action .cta-btn-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
@media (max-width: 768px) {
  #advanced-features .advanced-feature-img-right, #advanced-features .advanced-feature-img-left {
    max-width: 50%;
  }
}

@media (max-width: 767px) {
  #advanced-features .advanced-feature-img-right, #advanced-features .advanced-feature-img-left {
    max-width: 100%;
    float: none;
    padding: 0 0 30px 0;
  }
}
@media (min-width: 769px) {
  #features .features-img {
    padding-top: 120px;
    margin-top: -200px;
  }
}
@media (max-width: 768px) {
  #about .about-img {
    height: auto;
  }
  #about .about-img img {
    margin-left: 0;
    padding-bottom: 30px;
  }
}
@media (max-width: 768px) {
  #mobile-nav-toggle {
    display: inline;
  }
}
@media (max-width: 768px) {
  #nav-menu-container {
    //display: none;
  }
}
@media (max-width: 767px) {
  #intro .product-screens .product-screen-1 {
    position: static;
    padding-top: 0;
  }
  #intro .product-screens .product-screen-2, #intro .product-screens .product-screen-3 {
    display: none;
  }
}
@media (max-width: 768px) {
  #intro p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 20px;
  }
}
@media (max-width: 768px) {
  #intro h2 {
    font-size: 28px;
    line-height: 36px;
  }
}
@media (max-width: 768px) {
  #header #logo h1 {
    font-size: 28px;
    margin-top: 0;
  }
  #header #logo img {
    height: 40px;
  }
}
@media (min-width: 1024px) {
  #intro {
    background-attachment: fixed;
  }
 }


@media only screen and (min-width: 320px) and (max-width: 480px) {
 .poruka {
    position: absolute; /* Pozicioniranje apsolutno u odnosu na roditelja */
    top: 80px; /* Podesi prema potrebnoj visini iznad forme */
    left: 0;
    width: 100%;
    padding: 12px;
    background-color: white;
    border: 1px solid #809EC5;
    z-index: 102;
	background-color:#B8D4FA;
    white-space: normal;
    overflow: hidden;
	z-index:10000;
}
#cijena {
    display: none;
}
.cijena {
  position: absolute;
  width:100px;
  height:84px;
  left:60%;
  top:110px;
  background-image: url('../img/cijena.png');
  background-size: 100% 100%;
  z-index:1000;
}
.iznos {
  position: relative;
  width:80%;
  height:26px;
  top:29px;
  left:5px;
  font-size:18px;

  color:#F0FD06;
}
.posalji {
  position: relative;
  width:80.6%;
  height:33px;
  top:12px;
  left:9.8%;
  
}
.posalji1 {
  position: relative;
  width:60%;
  height:auto;
  cursor: hand;
  cursor: pointer;
  left:20%;
  top:115px; 
}
.posalji2 {
  position: relative;
  width:60%;
  height:auto;
  cursor: hand;
  cursor: pointer;
  margin:0 auto;
  top:125px; 
}
.registracija{
  font-size:14px;
  top:40px;
}
 .card{
  position:absolute;
  top:5%;
  left:5%;
  height:90%;
  width:90%;
  background-color:#B4E1F9;
}
.pozicija{
  position:absolute;
  top:20px;
  left:30%;
  height:auto;
  width:auto;
  z-index:10;
}
.card1{
  top:10%;
  left:1%;
  height:35%;
  width:98%;
}
 .vlasnik{
  position:absolute;
  top:86.6%;
  left:12%;
  height:auto;
  width:46%;
  font-size:14px;
  color:white;
  z-index:201;
}
.korisnik {
  position: relative;
  width:auto;
  height:auto;
  font-size:6vw;
  color:white;
  left:10%;
  top:56%;
}
.saldo{
	position:absolute;
	top:176px;
	width:auto;
	font-weight: bold;
	left:140px;
  font-size:5vw;
}
.login{
  width:90%;
  height:34px;
  top:60%;
  left:5%;  
}
.submit_log {
	left:12px;
	width:48px;
	height:30px;
	font-size:4vw;
}
.cao{
  left:176px;
}
#intro .intro-text {
  position: absolute;
  left: -194px;
  top: 90px;
  right: 0;
  height: calc(50% - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

#intro .btn-get-started1 {
  font-size: 6vw;
  left:48%;
  color:#F87D16;
  font-weight: bold;
  padding: 8px 30px;
  border: 4px solid #fff;
}
#intro .btn-get-started {
  font-size: 6vw;
  left:48%;
  font-weight: bold;
  color:#F87D16;
  padding: 8px 30px;
  border: 4px solid #fff;
}
.text, .text1, .text2, .text3, .text4, .text5,  .text6, .text7{
  font-size:4vw;
}
.text2{
  position: relative;
  width:57.6%;
  height:30px;
  top:0;
  left:7%;   
  border:1px solid #C9C7C7;
  border-radius:6px;
  padding-left:12px;
  z-index:101;
}
.text5{
  position: relative;
  width:43.5%;
  height:30px;
  top:0;
  left:5%;  
  border:1px solid #C9C7C7;
  border-radius:6px;
  padding-left:12px;
  z-index:101;
}
.text6{
  position: relative;
  width:43.7%;
  height:30px;
  top:0;
  left:20px;  
  border:1px solid #C9C7C7;
  border-radius:6px;
  padding-left:12px;
  z-index:101;
}
.text7{
  position: relative;
  width:43.7%;
  height:30px;
  top:0;
  left:7.2%;  
  border:1px solid #C9C7C7;
  border-radius:6px;
  padding-left:12px;
  z-index:101;
}
.scrollto img{
  position:absolute;
  top:-130px;
  float:left;
  left:-46px;
  height:90px;
  width:360px;
}
.intro-text p{
  position: absolute;
  left: 180px;
  top: 30px;
  height: calc(50% - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
.text_ss{
	position:relative;
	left:-1px;
	top:-50px;
	padding-left:10px;
	font-family:verdana;
	font-size:3vw;
	color:#7B7B7C;
	height:33px;
	cursor: hand;
    cursor: pointer;
	border:1px solid green;
	width:100.6%;
	border-radius: 8px;
	background-color:#DDDEDF;
}
.reg {
  position: fixed;
  width:98%;
  height:100%;
  top:60px;
  left:1%; 
  display:none;
  z-index:2000;
}
.text3{
  position: relative;
  width:85%;
  height:30px;
  top:2px;
  left:0;
  font-size:4vw;
  line-height: 1;
  border-radius:6px;
  padding-left:12px;
  z-index:101;
}
.reg1 {
  position: relative;
  width:98%;
  height:520px;
  top:200px;
  left:1%; 
  border-radius:0;
  background-color:white;
  z-index:100; 
}
.kolicina {
  position: relative;
  top:0;
}
.boca {
  position: relative;
  width:80.1%;
  height:60%;
  left:1px;
  top:4px;
  margin:0 auto;
}
.text_sub, .text_sub1, .text_sub2{
	font-size:4.6vw;
	z-index:300;
}
.slika img {
	position:absolute;
	top:87px;
	width: 80.6%;
	height: auto;
	left:9.8%;
	border:1px solid green;
	}

.naslov {
  font-size:4vw;
  padding-top:4px;
  text-align:justify;
}
.text_s, .text_su, .text_, .text_ss{
	font-size:5vw;
	text-align:left;
	padding-left:8px;
	height:40px;
	border-radius:8px;
}
.text_su{
  top:0;
}
.text_{
  top:0;
}

.text_ss{
  top:0;
}

.kontrole {
  position: absolute;
  width:80%;
  height:auto;
  color:white;
  left:10%;
  top:110%;
}
.podloga{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
}
.kontrola {
  position: relative;
  width:100%;
  height:60px;
  left:0;
  top:0;
}
.exit {
  top:3px;
  left:88%; 
}
.exit:hover {
  width:32px;
  height:auto;
  top:4px;
  left:88.2%;  
  cursor: pointer;
}

.preuzmi {
  left:100px;
  font-size:6.6vw;
  top:-200px;
}
.home {
  position: absolute;
  left:5%;
  top:4%;
  width:10%;
  height:5%;
  background-image: url('../img/home.png');
  background-size: 100% 100%;
  display:block;
  z-index:1000;
}
.home:hover {
  position: absolute;
  left:4.8%;
  top:3.75%;
  width:11%;
  height:6%;
  background-image: url('../img/home.png');
  background-size: 100% 100%;
  display:block;
  z-index:1000;
}
.upis{
  position: relative;
  width:90%;
  height:5%;
  top:60px;
  margin:auto;  
}
#alertBox{
width:98%;
left:1%;
padding:0;
font-size:4.4vw;
}
.ime, .ime1, .ime2, .ime3, .ime4, .ime5 {
  font-size:4vw;
}
.ime3{
	top:14px;
}
.upis1 {
  width:89.8%;
  height:10.3%;
  top:6%;
  margin:auto;  
}
.upis p {
  font-size:5vw; 
}
.dostavljac{
  position:relative;
  width:98%;
  top:14%;
  margin: auto;
  height:auto;
  background-color:#B4E1F9;
  overflow-x: auto; /* Omogući horizontalni scroll */
  white-space: nowrap; /* Sprječava prelamanje unutar tablice */
}
.naslov1 {
  font-size:6vw;
  z-index:100;
}
.dost{
  position:absolute;
  top:60px;
  height:auto;
  width:99%;
  text-align:center;
  font-size:4vw;
  color:#4373B3;
  z-index:2200;
}
} 	

/* smartphones, Android phones, landscape iPhone */ 
@media only screen and (min-width:480px) {
  
} 	
/* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
@media only screen and (min-width:600px) {
 
} 	

/* big landscape tablets, laptops, and desktops */ 
@media only screen and (min-width: 1025px) {
 
 .login{
  position: absolute;
  width:20%;
  height:34px;
  top:20px;
  left:7%;   
  z-index:101;
}
.reg {
  position: fixed;
  width:20%;
  height:540px;
  top:19%;
  left:40%; 
  background-color:white;
  z-index:100;
  font-size:0.75vw;
  display:none;
  z-index:2000;
}
#intro .intro-text {
  position: relative;
  left: 0;
  top: 60px;
  right: 0;
  height: calc(50% - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
.scrollto{
  position:relative;
  top:0px;
  height:20%;
  width:100%;
  left:0;
} 
.scrollto img{
  position:relative;
  top:-40px;
  left:0px;
  height:90px;
  width:420px;
}
#intro .btn-get-started {
left:10px;
top:-70px;
width:320px;
padding-top:0px;
}
#intro .btn-get-started1 {
left:10px;
top:-70px;
width:320px;
padding-top:0px;
}

} 

@media only screen and (min-width: 769px) and (max-width: 1281px) {
  
 .login{
  position: absolute;
  width:20%;
  height:34px;
  top:20px;
  left:7%;   
  z-index:101;
}
.reg {
  position: fixed;
  width:26%;
  height:520px;
  top:23%;
  left:38%;
font-size:5vw;  
  background-color:white;
  z-index:100;
  -webkit-box-shadow: 0px 0px 18px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 18px -3px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 18px -3px rgba(0,0,0,0.75);
  -webkit-border-bottom-right-radius: 12px;
  -webkit-border-bottom-left-radius: 12px;
  -moz-border-radius-bottomright: 12px;
  -moz-border-radius-bottomleft: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  //display:none;
}
#intro .intro-text {
  position: relative;
  left: 0;
  top: 60px;
  right: 0;
  height: calc(50% - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}
.intro-text p{
  left:20px;
  top: 160px;
}
.scrollto{
  position:relative;
  top:0px;
  height:20%;
  width:100%;
  left:0;
} 
.scrollto img{
  position:relative;
  top:-40px;
  left:0px;
  height:90px;
  width:420px;
}
#intro .btn-get-started {
left:10px;
top:-70px;
height:42px;
font-size:2vw;
width:290px;
padding-top:0;
}
#intro .btn-get-started1 {
left:10px;
top:-70px;
height:42px;
font-size:2vw;
height:50px;
width:290px;
padding-top:0;
}
.pozicija{
	position:absolute;
  top:20px;
  left:44%;
  height:auto;
  width:auto;
  z-index:1000;
}
.reg1 {
  width:24%;
  height:420px;
  top:23.6%;
  left:39%; 
  background-color:white;
  z-index:100;
  -webkit-box-shadow: 0px -1px 12px -4px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px -1px 12px -4px rgba(0,0,0,0.75);
  box-shadow: 0px -1px 12px -4px rgba(0,0,0,0.75);
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  display:none;
}

.kolicina {
  top:-220px;
}
.cao{
	position:relative;
	width:68px;
	left:180px;
}
.card{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background-color:#B4E1F9;
}
.card1{
  position:absolute;
  top:30%;
  left:28%;
  height:40%;
  width:44%;
  background-image: url('../img/kartica4.png');
  background-size: 100% 100%;
  z-index:200;
}
.exit {
  position: relative;
  width:30px;
  height:20px;
  top:2%;
  left:89%;   
  background-image: url('../img/exit.gif');
  background-size: 100% 100%;
  z-index:101;
}
.exit:hover {
  width:31px;
  height:20;
  top:2.2%;
  left:89.2%;  
  cursor: pointer;
}
}