* {
	margin: 0;
	padding: 0;
	font-family: "Manrope", sans-serif;
}

.djalic {
	height: 85vh;
	background-color: #528585;
}

.djalic h1 {
	font-size: 5rem;
	padding-top: ;
}

@-webkit-keyframes typing {
	from {
		width: 0;
	}
}

.djalic p {
	font-style: italic;
	text-align: center;
	font-size: 2rem;
	width: 32.5em;
	width: 50ch;
	white-space: nowrap;
	overflow: hidden;
	-webkit-animation: typing 5s steps(21, end);
}

.horizontalLine {
	height: 50px;
}

.farmaKlaonice {
	display: flex;
}

.hrFarma {
	height: 4px;
	background-color: rgb(255, 255, 255);
	margin-right: 300px;
}

.hrKlaonice {
	height: 4px;
	background-color: rgb(255, 255, 255);
	margin-right: 400px;
}

.hrMesnica {
	height: 4px;
	background-color: rgb(255, 255, 255);
	margin-right: 400px;
}

.hrRestoran {
	width: 60%;
	height: 4px;
	background-color: rgb(255, 255, 255);
	transition: 2s ease;
}

.hrRestoran:hover {
	width: 33%;
}

.flipFarma:hover .flipFarmaInner {
	transform: rotateY(180deg);
}

.flipFarmaInner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.farmaFront,
.farmaBack {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.farmaFront {
	background-color: #44432fb7;
	color: rgb(255, 255, 255);
}

.farmaBack {
	background-color: #36504ae1;
	color: white;
	transform: rotateY(180deg);
}

.flipKlaonice:hover .flipKlaoniceInner {
	transform: rotateY(180deg);
}

.flipKlaoniceInner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.klaoniceFront,
.klaoniceBack {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.klaoniceFront {
	background-color: #191b22d2;
	color: rgb(255, 255, 255);
}

.klaoniceBack {
	background-color: #1e304b;
	color: rgb(255, 255, 255);
	transform: rotateY(180deg);
}

.flipMesnica:hover .flipMesnicaInner {
	transform: rotateY(180deg);
}

.flipMesnicaInner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.mesnicaFront,
.mesnicaBack {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.mesnicaFront {
	background-color: #183b2ec7;
	color: rgb(255, 255, 255);
}

.mesnicaBack {
	background-color: #8b8882;
	color: rgb(255, 255, 255);
	transform: rotateY(180deg);
}

.flipRestoran:hover .flipRestoranInner {
	transform: rotateY(180deg);
}

.flipRestoranInner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.restoranFront,
.restoranBack {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.restoranFront {
	background-color: #b36273;
	color: rgb(255, 255, 255);
}

.restoranBack {
	background-color: #572828ce;
	color: rgb(255, 255, 255);
	transform: rotateY(180deg);
}

.info {
	width: 100%;
	height: 300px;
	background-color: #0e2b38;
}

.socialPhoto {
	width: 50px;
}

.phonePhoto {
	width: 50px;
}

.messageIcon {
	width: 60px;
}

.telefon {
	margin-top: 53px;
}

@media screen and (max-width: 992px) {
	.flipFarma {
		height: 600px;
	}

	.djalic {
		height: 600px;
	}

	.djalic h1 {
		font-size: 4rem;
	}

	.djalic p {
		font-size: 1.2rem;
	}

	.flipKlaonice {
		height: 600px;
	}

	.flipRestoran {
		height: 600px;
	}

	.flipMesnica {
		height: 600px;
	}
}

@media only screen and (max-width: 2600px) and (min-width: 994px) {
	.farmaKlaonice {
		height: 50vh;
	}
}