@font-face { font-family: 'intro'; src: url('../fonts/intro/intro.otf'); }
@font-face { font-family: 'amarillo'; src: url('../fonts/amarillo.ttf'); }
@font-face { font-family: 'cinzel-black'; src: url('../fonts/Cinzel-Bold.ttf'); }

:root {
	--color-4: #877159;
	--color-5: #5a4b39;
}

body {
	background-color: #ffffff;
	overflow-x: hidden;
	font-family: 'intro', sans-serif;
	color: var(--color-4);
}

a, a.nav-link { text-decoration: none; color: var(--color-4); }
a.nav-link.active, a.nav-link:hover { color: var(--color-4); }

.navbar-toggler {
	background: var(--color-4);
}

.ft-amarillo { font-family: 'amarillo', sans-serif; }
.ft-cinzel-black { font-family: 'cinzel-black', sans-serif; }

.clr-3 { color: #9e866a; }
.clr-4 { color: var(--color-4); }
.bg-3 { background-color: #9e866a; }
.bg-wa { background-color: #309f30; }

.cp-wa-container {
	position: fixed;
	border-radius: 50%;
	background-color: #309f30;
	box-shadow: 2px 2px 3px #999;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
}
	.cp-wa-container i { font-size: 2.5rem; color: #ffffff;  }

/*.banner-header { position: relative; background-image: url('../images/banner-header.jpg'); background-repeat: no-repeat; background-position: center center;  }*/
	.vector-banner-1 { position: absolute; left: 5%; bottom: 0; height: 80%; }
	.title-header { color: #4f3208; font-family: 'intro', sans-serif; text-align: left; }

.template .catalog-item { box-shadow: 5px 4px 20px 0px #d7bfa3; }
.template .catalog-item img {
	width: 100%; 
	object-fit: cover;
	object-position: top;
}

.package .card { background-color: #f3f3f3; color: #333; }

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	.banner-header { background-size: contain; width: 100%; height: 230px; }
		.title-header { position: absolute; right: 10px; bottom: 20%; font-size: 0.8rem; }

	.template .catalog-item img {
		height: 190px;
	}
	
	.cp-wa-container { bottom: 10px; right: 10px; width: 80px; height: 80px; }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.banner-header { background-size: cover; width: 100%; height: 700px; }
		.title-header { position: absolute; left: 55%; bottom: 30%; font-size: 2.5rem; }

	.template .catalog-item img {
		height: 280px;
	}

	.cp-wa-container { bottom: 10px; right: 10px; width: 80px; height: 80px; }
}