html {
	scroll-behavior: smooth;
}

/*resava problem body-ja izvan granica browsera-a i uklanja vertikalni scrollbar*/
body {
	overflow-x: hidden;
	margin-left: 0px;
	/*margin-right: -20px;*/
	padding-top: 180px;
}

header {
	width: 100%;
}


#logo{
	max-height: 150px;
	max-width: 118px;
}

/*Responsive images*/
img {
	max-width: 100%;
	height: auto;
}


/*pravi responsive kocke fiksne velicine*/
.usluge p {
	min-height: 50px;
	height: 250px;
	width: 250px;
	margin: auto;
	margin-top: 20px;
	text-align: center;
	/*line-height: 250px;*/
	display: table;
}

/*vertikalno centrira span u p u kocki*/
.usluge p span {
	display: table-cell;
	vertical-align: bottom;
	}

/*Postavlja sliku, centrira je i dodaje animaciju hover*/
#usluge-1 {
	background-image: url("1.jpg");
	transition: transform .2s;
}

	#usluge-1:hover {
		transform: scale(1.1);
	}

#usluge-2 {
	background-image: url("2.jpg");
	background-position: center;
	transition: transform .2s;
}

	#usluge-2:hover {
		transform: scale(1.1);
	}

#usluge-3 {
	background-image: url("3.jpg");
	transition: transform .2s;
}

	#usluge-3:hover {
		transform: scale(1.1);
	}

#usluge-4 {
	background-image: url("4.jpg");
	background-position: center;
	transition: transform .2s;
}

	#usluge-4:hover {
		transform: scale(1.1);
	}

/*CSS za Google Maps*/
	.map-responsive {
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	height: 0;
}

	.map-responsive iframe {
		left: 0;
		top: 0;
		height: 100%;
		width: 99%;
		position: absolute;
	}
		/*Pravi razmak izmedju div elemenata - sekcija sajta*/
	#slajd, #usluge, #o-nama, #kontakt {
	margin-top: 60px;
}

/*Pravi gradient u header-u*/
#logo-naslov {
	background: rgb(255,255,255);
	background: linear-gradient(120deg, rgba(255,255,255,1) 8%, rgba(250,198,229,1) 20%, rgba(2,117,216,1) 100%);
}
/*Centrira naslov "Stomatolog Velickov"*/
#logo-naslov h1, #logo-naslov p{
	margin: auto;
	text-align: center;
}

/*Centrira text u sekcijama o nama i kontakt*/
#usluge-naslov, #o-nama, #kontakt {
	text-align: center;
}

#o-nama h2, #o-nama p{
	padding-top: 3%;
	padding-bottom: 3%;
}

#usluge-naslov{
	display: table;
}

#usluge-naslov h2{
	display: table-cell;
	vertical-align: middle;
}


/*Responsive Typography*/


html {
	font-size: 0.8rem;
}

	/* Small devices (landscape phones, 576px and up)*/
	@media (min-width: 576px) {
		html {
			font-size: 1rem;
		}

		.map-responsive {
			padding-bottom: 30%;
		}

		#usluge-naslov{
			margin-top: 40px;
		}
}

	/* Medium devices (tablets, 768px and up)*/
	@media (min-width: 768px) {
		html {
			font-size: 1.2rem;
		}
		/*Resava problem u redu gde je sekcija o-nama i slika*/
		#o-nama p {
			font-size: 0.8rem;
		}
	}

	/* Large devices (desktops, 992px and up)*/
	@media (min-width: 992px) {
		html {
			font-size: 1.4rem;
		}
		/*Pravi razmak izmedju div elemenata - sekcija sajta*/
		#usluge-naslov, #usluge, #o-nama, #kontakt{
			margin-top: 90px;
		}
/*Resava problem u redu gde je sekcija o-nama i slika*/
			#o-nama p {
				font-size: 0.9rem;
			}
		
	}

	/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	html {
		font-size: 1.6rem;
	}
	/*Pravi razmak izmedju div elemenata - sekcija sajta*/
	#usluge-naslov, #usluge, #o-nama, #kontakt{
		margin-top: 200px;
	}
}
		

	/*Resava problem linkova nakon sto je header fiksiran za vrh*/
	.anchor {
		display: block;
		height: 115px; /*same height as header*/
		margin-top: -115px; /*same height as header*/
		visibility: hidden;
	}

	/*Resava problem header-overflow-a na desnoj strani, kad se browser window smanjuje*/
	.nav-link {
		padding: 0.5rem;
	}
/*Horizontalna linija*/
hr{
	width: 50%;
	margin: auto;
}
/*Dodaje opacity na background-color ispod teksta*/
.carousel-caption {
	background-color: rgba(108, 117, 125, 0.3);
}
/*Pokusaj resenja header overflow-a na malim ekranima*/
@media only screen and (max-width: 600px) {
	body {
		width: 90vw;
		margin: auto;
	}

	header{
		width: 95%;
	}
}

/*Za laptop uredjaje visine 768px*/
@media only screen and (min-height: 650px) and (max-height: 899px){
	#usluge-naslov, #usluge, #o-nama, #kontakt {
		margin-top: 100px;
	}

	#slajd{
		margin-top:0px;
	}
}

/*Za telefone velike rezolucije*/
@media only screen and (max-width: 450px) and (min-height: 450px) and (max-height: 850px){
	#usluge-naslov{
		margin-top: 0px;
	}

	#usluge{
		margin-top: 40px;
	}
}