/* ? ////////////////////////////////////////////////////////////////////////// * /
/* ? 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;
	}

	.form-container form {
		width: 60%;
	}
}

@media only screen and (max-width: 1024px) {
	header .ballons-left,
	header .ballons-right {
		z-index: 1;
	}

	.timeline h1 {
		font-size: 7rem;
	}

	.desktop {
		display: none;
	}

	.scroll-indicator img {
		width: 80px;
	}

	.obavestenje,
	footer {
		background-attachment: unset;
	}

	.sample-slider img {
		height: 180px;
	}
}

@media only screen and (max-width: 992px) {
	header .content h1 {
		font-size: 12rem;
	}

	.countdown {
		width: 825px;
	}

	.countdown .figure {
		height: 95px;
		width: 70px;
	}

	.countdown .figure>span {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		font: normal 5.94em/99px 'Lato';
		font-weight: 700;
		color: var(--primary-color);
	}

	.form-container form {
		width: 70%;
	}
}

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

@media only screen and (max-width: 850px) {
	header .content h1 {
		font-size: 11rem;
	}

	.countdown {
        width: 750px;
    }

	.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;
	}

	header .ballons-left,
	header .ballons-right {
		height: inherit;
	}

	.countdown {
		width: 600px;
	}

	.countdown .figure {
		height: 65px;
		width: 50px;
	}

	.countdown .figure>span {
		font: normal 2.94em/67px 'Lato';
	}

	.entry .year p {
		font-size: 1.8rem;
	}

	.form-container h2 {
		font-size: 2.2rem;
	}

	input.form-control,
	textarea.form-control,
	select.form-select,
	.form-label,
	.txt-dodatak,
	.txt-btn {
		font-size: 2rem;
	}

	.form-container form {
		width: 80%;
	}

	.obavestenje {
		height: 30vh;
	}

	.sample-slider img {
		height: 160px;
	}

	.form-container h2 {
		font-size: 4.4rem;
	}

	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%;
	}

	.entry .year p {
		font-size: 2rem;
	}
}

@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%;
	}

	.countdown {
        width: 550px;
    }
}

@media only screen and (max-width: 580px) {
	header .content h1 {
		font-size: 10rem;
	}

	.countdown {
		width: 400px;
	}

	.countdown .figure {
		height: 35px;
		width: 35px;
		margin-right: 2px;
	}

	.countdown .figure>span {
		font: normal 1.94em/36px 'Lato';
	}
}

@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);
	}

	.entry .icon {
		bottom: 25px;
	}

	.entry .icon img {
		width: 80px;
	}
}

@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%;
	}
}