/* ? ////////////////////////////////////////////////////////////////////////// * /
/* ? OD 870 PA NA MANJIM UREDJANIMA SE POJAVLJUJE SCROLLBAR PO X OSI */
/* ? GRESKA JE U #letter ELEMENTU I NJEGOVOM transform i width PROPERTIJU */
/* ? PROBLEM JE RESEN U STYULE.CSS PROERTIJEM overflow-x: hidden, na .pozivnica elementu */
/* ? ////////////////////////////////////////////////////////////////////////// */

/*********************/
/******* WIDTH *******/
/*********************/
@media only screen and (max-width: 2048px) {
	html {
		font-size: 70.5%;
	}
	#flip-card-front {
		transform: scale(1.7);
	}
}

@media only screen and (max-width: 1920px) {
	html {
		font-size: 68.5%;
	}
	#flip-card-front {
		transform: scale(1.4);
	}
}

@media only screen and (max-width: 1700px) {
	html {
		font-size: 65.5%;
	}
	#flip-card-front {
		transform: scale(1);
	}
}

@media only screen and (max-width: 1550px) {
	html {
		font-size: 62.5%;
	}
}

@media only screen and (max-width: 1440px) {
	.sample-slider img {
		height: 220px;
	}
}

@media only screen and (max-width: 1315px) {
	.sample-slider img {
		height: 200px;
	}
}
@media only screen and (max-width: 1200px) {
	.sample-slider img {
		height: 180px;
	}
}

@media only screen and (max-width: 1024px) {
	header .ballons-left,
	header .ballons-right {
		display: none;
	}
	header .ballons-left-mob,
	header .ballons-right-mob {
		display: block;
		position: absolute;
		width: inherit;
		height: inherit;
		object-fit: cover;
	}
	.desktop {
		display: none;
	}
	.scroll-indicator img {
		width: 80px;
	}
	.obavestenje,
	footer {
		background-attachment: unset;
	}
	.sample-slider img {
		height: 180px;
	}
}

@media only screen and (max-width: 900px) {
	.sample-slider img {
		height: 170px;
	}
}

@media only screen and (max-width: 850px) {
	.scroll-indicator {
		bottom: 3rem;
		right: 3rem;
	}
	.scroll-indicator img {
		width: 70px;
	}
}

@media only screen and (max-width: 768px) {
	html {
		font-size: 50.5%;
	}
	header {
		height: 80vh;
	}
	.form-container form {
		width: 90%;
	}
	.obavestenje {
		height: 30vh;
	}
	.sample-slider img {
		height: 160px;
	}
	.form-container h2 {
		font-size: 4.4rem;
	  }
	.btn {
		font-size: 3.4rem;
	}
	  input.form-control, textarea.form-control, select.form-select, .txt-dodatak, .txt-btn, body, footer div p {
		font-size: 2.4rem !important;
	}
	footer {
		height: 15vh;
	}
	footer div {
		max-width: 80%;
		margin: 0 auto;
	}
	.scroll-indicator {
		left: calc(50% - (70px / 2));
		transform: translateX(-50%);
	}
}

@media only screen and (max-width: 640px) {
	html {
		font-size: 42.5%;
	}
}

@media only screen and (max-width: 630px) {
	#flip-card-front {
		transform: scale(0.8);
	}
	.scroll-indicator {
		left: calc(50% - (60px / 2));
		transform: translateX(-50%);
	}
	.scroll-indicator img {
		width: 60px;
	}
	.sample-slider img {
		height: 145px;
	}
}

@media only screen and (max-width: 600px) {
	html {
		font-size: 38.5%;
	}
}

@media only screen and (max-width: 550px) {
	.sample-slider img {
		height: 135px;
	}
}

@media only screen and (max-width: 500px) {
	.sample-slider img {
		height: 125px;
	}
}

@media only screen and (max-width: 480px) {
	html {
		font-size: 33.5%;
	}
	header {
		height: 50vh;
		margin-bottom: -30vh;
	}
	#flip-card-front {
		transform: scale(0.7);
	}
}

@media only screen and (max-width: 450px) {
	.sample-slider img {
		height: 110px;
	}
}

@media only screen and (max-width: 415px) {
	#flip-card-front {
		transform: scale(0.6);
	}
	.sample-slider img {
		height: 100px;
	}
}

@media only screen and (max-width: 350px) {
	#flip-card-front {
		transform: scale(0.55);
	}
	#letter img {
		width: 80%;
	}
}

/**********************/
/******* HEIGHT *******/
/**********************/
@media only screen and (max-height: 1600px) {
	#flip-card-front {
		bottom: 35%;
	}
}

@media only screen and (max-height: 1300px) {
	#flip-card-front {
		bottom: 25%;
	}
}

@media only screen and (max-height: 1080px) {
	#flip-card-front {
		bottom: 20%;
	}
}

@media only screen and (max-height: 900px) {
	#flip-card-front {
		bottom: 15%;
	}
}

@media only screen and (max-height: 768px) {
	#flip-card-front {
		bottom: 10%;
	}
}

@media only screen and (max-height: 660px) {
	#flip-card-front {
		bottom: 4%;
	}
}

@media only screen and (max-height: 600px) {
	#flip-card-front {
		bottom: -6%;
	}
}

@media only screen and (max-height: 480px) {
	#flip-card-front {
		bottom: -20%;
	}
}

@media only screen and (max-height: 350px) {
	#flip-card-front {
		bottom: -60%;
	}
}