@charset "utf-8";
/* CSS Document */





/* Float four columns side by side */
.columnauta {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.rowauta {margin: 0 -5px;}

/* Clear floats after the columns */
.rowauta:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 1300px) {
  .columnauta{
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.cardauta {
  
  padding: 10px;
  text-align: center; max-width:450px; 
  
}


.borderauta {
	 border-right:solid 1px rgba(0,0,0, 0.3);
	 border-top: solid 1px rgba(0,0,0, 0.3); padding: 0px 4px 0p;
	
	
	}



.cardautaponuda { 

padding:15px;
  
  
  text-align: center; max-width:400px;
  
}


.cardautaponuda:hover{
	 

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding:15px;
  text-align: center;
  
}	
	
	










.icon {
	color:#222;
	}



.icon:hover {
	
	color:#DBFF70; text-shadow: 0 0 3px black;
	
	}



.ponuda

{

background-color:#DBFF70; 

color:#222; 
padding:4px; 
font-weight:bolder;
font-size:24px;


	}













.naslovna {
	
width:90%;  
align-items: center;
justify-content: center;display: block;
margin-left: auto;
margin-right: auto 	
	
	
	}
















.menidesktop  { position:fixed; width:100%;
	

  top: 0; /* Don't forget this, required for the stickiness */
	
	
	
	
	}

.menimob { display:none;
	  
}


@media screen and (max-width: 900px) {
	
	
	.menimob { display:inline;
	
  
  position:fixed; width:100%;
	

  top: 0; /* Don't forget this, required for the stickiness */
 
	}
	.menidesktop { display:none;
	
 
 
  
}

}


.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.8);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 5%;
  width: 100%;
  text-align: left;
  margin-top: 30px; margin-left:5%;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 32px;
  color: #fefefe;
  display: block;
  transition: 0.3s; font-weight:bold;
}

.overlay a:hover, .overlay a:focus {
  color: #222222; border-bottom:solid 2px #fefefe; background-color: #DBFF70;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}






* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif; margin:0; background-color:#fefefe;
}


/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*meni*/


#menuBackground {
    background:#222222;
    width:100%;
    height:70px;
    text-align: center; 
}
#menuContainer {
    text-align: center;
}
/*Strip the ul of padding and list styling*/
#menuContainer ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

/*Create a horizontal list with spacing*/
#menuContainer li {
    display:inline-block;
    vertical-align: top; 
   
}

/*Style for menu links*/
#menuContainer li a {
    display:block; padding:0 20px;
   
    height:70px;
    text-align:center;
    line-height:70px;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#fefefe;
    background:#222222;
    text-decoration:none; font-size:13px;
    
}

/*Hover state for top level links*/
#menuContainer li:hover a {
    background:#333333; border-bottom:solid 2px #DBFF70; color:white; text-decoration:none;
}





/*Prevent text wrapping*/
#menuContainer li ul li a {
    width:auto;
    min-width:100px;
    padding:0 20px;
}




.active {
  background-color: #333333;
  color: white; border-bottom:solid 2px #DBFF70;
}




.containermeni {
  position: relative;
  text-align: center;
  color: white;
}



.footertext { font-size:14px;
}

.footertext a{ text-decoration:none; color:white; font-size:14px;
	
	
	}

.bg-img {
  /* The image used */
  background-image: url("../images/rent-a-car-beograd.jpg");

  min-height: 680px; margin-top:90px;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
}

/* Add styles to the form container */
.container { background-color:#DBFF70;   float:right; margin-right:20px; margin-top:100px; padding:10px 12px; background:rgba(219, 255, 112, 0.7); 
  

  max-width: 500px; min-height:300px;

}

/* Full-width input fields */
.datum{ border-radius:7px; 
 
  width: 200px;
  padding: 15px;
  margin: 10px 10px 25px 10px;
  border: none;
  background: #fefefe; color:black; 
}

.datumrez{ border-radius:3px; 
 
  width: 200px;
  padding: 5px;
  margin: 10px 10px 25px 10px;
  
  background: #fefefe; border:solid 1px gray;  
}


.mesto{ border-radius:7px; 
 
  width: 200px;
  padding: 15px;
  margin: 10px 10px 25px 10px;
  border: none;
  background: #fefefe; color:black;
   background-image:url(../images/marker.png); background-repeat:no-repeat; -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	background-position:
    calc(100% - 20px);
  background-size:
   20px 20px,
    12.5em;
}

.mestorez{ border-radius:3px; 
 
  width: 200px;
  padding: 5px;
  margin: 10px 10px 25px 10px;
 
  background: #fefefe; color:black;
   background-image:url(../images/marker.png); background-repeat:no-repeat; -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	background-position:
    calc(100% - 20px);
  background-size:
   20px 20px,
    12.5em;
}


.vreme{ border-radius:7px; 
 
  width: 100px;
  padding: 15px;
  margin: 10px 10px 25px 10px;
  border: none;
  background: #fefefe; color:black; background-image:url(../images/clock.png); background-repeat:no-repeat; -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	background-position:
    calc(100% - 20px);
  background-size:
   20px 20px,
    12.5em;
}

.vremerez{ border-radius:3px; 
 
  width: 100px;
  padding: 5px;
  margin: 10px 10px 25px 10px;
 
  background: #fefefe; color:black; background-image:url(../images/clock.png); background-repeat:no-repeat; -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	background-position:
    calc(100% - 20px);
  background-size:
   20px 20px,
    12.5em;
}

/* Set a style for the submit button */
.btn {
	border-radius:2px;
	background-color: #222222;
  color: #DBFF70;
  width:100%; border:none; height:40px; margin-top:20px;
 
}

.btn:hover {
	
	background-color: #DBFF70 ;
  color:#222222 ; 
 
}
	


.desktopcontent_a  { 


margin-left:15%; 
margin-right:15%; 
margin-top:60px; 
color:#222222;
font-size:20px;
text-align:center;
	
	
	
	
	}




@media screen and (max-width: 900px) {
	
	
	
	.desktopcontent_a { text-align:left; margin-left:10px; margin-right:10px;
	
 
 
  
}

}
	
	
	
	
	.dugmecontent {
		
		background-color:#222222; 
		color:#DBFF70; 
		padding:2px 25px 2px 25px; border-radius:3px; margin-top:60px; font-size:18px; 
		}
		
		.dugmecontent:hover{
		
		background-color:#DBFF70; 
		color:#222; 
		font-weight:bold;
		border:solid 3px #222;
		}
		
		
		
		
		
	.dugmenews {
		
		background-color:#DBFF70; 
		color:#222222; 
		padding:5px ; border-radius:3px; font-size:15px; 
		}
		
		.dugmenews:hover{
		
		background-color:#DBFF70; 
		color:#222; 
		font-weight:bold;
		border:solid 3px #222;
		}	
		
		
		
		
		
		
		
		
		
		
		
		.naslovi  {
			color:#222222;
			 font-size:35px;
			
			
		}
	
	
	
	
	
	.naslovibg{
		background-color:#DBFF70;
		width:100%; padding:20px; color:#222; font-size:24px;
	 
		
		
		
		
	}
	
	.naslovibg1{
		background-color:#DBFF70;
		width:100%; padding:20px; color:#222; font-size:30px; margin-top:50px;
	 
		
		
		
		
	}
	
	
	.footer{
		
		width:90%;  
        align-items: center;
         justify-content: center;display: block;
        margin-left: auto;
       margin-right: auto;
	    background-color:#222222; margin-top:50px; color:#f2f2f2;
		
		
		}
		
		
		.kontaktform{
		
		width:90%;  
        align-items: center;
         justify-content: center;display: block;
        margin-left: auto;
       margin-right: auto;
	    background-color:#fff; margin-top:150px; color:#222;
		
		}
	
	
	.social{
		font-size:36px; padding:4px
		
		}
	
	
	.social:hover { color:#DBFF70;
		
		
		}
	
	
	
	
	
	
	.auta
	{ padding:20px; width:100%; margin-top:20px;
		 
		}
	.dugmeauta {
		
		background-color:#222222; 
		color:#DBFF70; 
		padding:2px 25px 2px 25px; border-radius:3px; font-size:30px; width:100%; 
		}
		
		.dugmeauta:hover{
		
		background-color:#DBFF70; 
		color:#222; 
		font-weight:bold;
		border:solid 3px #222;
		}
		
		
		
		
		.dugmeonline {
		
		background-color:#222222; 
		color:#DBFF70; 
		padding:2px 25px 2px 25px; border-radius:3px; font-size:35px; width:100%; 
		}
		
		.dugmeonline:hover{
		
		background-color:#DBFF70; 
		color:#222; 
		font-weight:bold;
		border:solid 3px #222;
		}
		
		
		
		
		
		
		
		
		
		
		
		
		
		.dugmeautaponuda {
		
		background-color:#222222; 
		color:#DBFF70; 
		padding:2px 25px 2px 25px; border-radius:3px; font-size:20px; width:100%; 
		}
		
		.dugmeautaponuda:hover{
		
		background-color:#DBFF70; 
		color:#222; 
		font-weight:bold;
		border:solid 3px #222;
		}
		
		/* Style inputs */
.kontakt input[type=text], select, textarea, email {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

.kontakt input[type=submit] {
  background-color: #DBFF70;
  color: #222;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

.kontakt input[type=submit]:hover {
  background-color: #222;
  color:#DBFF70;
}





/* Style the container/contact section */
.containerkontakt {
  border-radius: 5px;
 
  padding: 10px;
  margin-top:150px;
}

/* Create two columns that float next to eachother */
.columnkontakt {
  float: left;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}




.kontaktleftborder{
	border-left:solid 1px rgba(0,0,0, 0.3); padding:10px;
	
	}


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

.kontaktleftborder{
	border-left:none;
	
	}
	
}






/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columnkontakt, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}




.about { margin-top:50px;
margin-bottom:50px; overflow:auto; width:60%; text-align:left}


.about img {
  float: left;  margin-bottom:50px; max-width:440px; height:auto; margin-right:15px;
  
}


@media screen and (max-width: 600px) {
  .about { margin-top:50px;
margin-bottom:50px; overflow:auto; width:100%; text-align:left;  margin-left:2px; font-size:16px; }

.about img {
  margin-bottom:50px; width:98%; 

}
}
.blog{
	
 
align-items: center;
justify-content: center; margin-left:auto; width:60%;


display: block;
    
    margin-right: auto; margin-top:200px; "





	
	}
	
	.blog img {
  max-width:440px; height:auto;
  
}

@media screen and (max-width: 600px) {
  .blog{
	
 
align-items: center;
justify-content: center; width:100%; margin-left:2px; 

	
	}
	
	.blog img {
  width:95%; height:auto; 
  
}
}

.auta { margin-top:50px;
align-items: center;
justify-content:
center; 
margin-left:auto; 
width:60%;
display: block;
margin-right: auto;
overflow:auto; 
text-align:left;
font-size:24px; }


.auta img {
  float: left;  margin-bottom:50px; width:300px; height:200px; margin-right:15px;
  
}


@media screen and (max-width: 600px) {
  .auta{ margin-top:50px;
margin-bottom:50px; overflow:auto; width:100%; text-align:left;  margin-left:2px; font-size:16px; }

.auta img {
  margin-bottom:50px; width:98%; height:auto; 

}
}



#regForm {
  background-color: #ffffff;
  margin: 100px auto; font-size:12px;
 
  padding: 40px;
  width: 70%;
  min-width: 200px;
}