/* Font Families */
.navbar-brand {
	font-family: "Federo", sans-serif;
	font-size: 24pt;
}

h1,
h2,
h3 {
	font-family: "Source Serif 4", serif;
	font-weight: 700;
}

p {
	font-family: "Source Serif 4", serif;
	/*font-family: "Amiko", sans-serif;*/
}

p.lead {
	font-family: "Amiko", sans-serif;
	font-weight: 400;
}

button,
.btn {
	font-family: "Amiko", sans-serif !important;
	font-weight: 700 !important;
}

.portfolio-item h5 {
	font-family: "Source Serif 4", serif;
	font-weight: 700;
}

.fa-ul li {
	font-family: "Source Serif 4", serif;
	line-height: 2rem;
}

/* Font Sizes */
h2 {
	font-size: 2.5rem;
}

/* Colors */
:root {
	--dark: #1A1A1A;
	--light: #FCEDEA;
	--yellow: #FEB400;
	--orange: #E06900;
	--light-blue: #A1C1DA;
	--blue: #00A5C6;
}

/* Backgrounds */
.bg-blue {
	background-color: var(--blue);
}

.bg-dark {
	background-color: var(--dark) !important;
}

.bg-light {
	background-color: var(--light) !important;
}

.bg-light-blue {
	background-color: var(--light-blue);
}

.bg-orange {
	background-color: var(--orange);
}

.bg-yellow {
	background-color: var(--yellow);
}

.bg-light-blue-gradient {
	background: linear-gradient(to left, #A1C1DA, #CFE1EE, #F1F8FB);
}

.bg-yellow-gradient {
	background: linear-gradient(to left, #FEB400, #FFD86F, #FFF3CC);
}

.overlay-content {
	z-index: 2;
}

.bg-gradient-desert-landscape-overlay {
	background-image:
		linear-gradient(to left, rgba(224, 105, 0, 0.8), rgba(255, 181, 102, 0.6), rgba(255, 235, 218, 0.8)),
		url('/assets/img/site/desert-landscape-phoenix.png');
		background-size: cover;
		background-position: center;
		z-index: 1;
}

.bg-gradient-light-blue-clouds-overlay {
	background-image:
		linear-gradient(to left, rgba(161, 193, 218, 0.8), rgba(207, 225, 238, 0.6), rgba(241, 248, 251, 0.8)),
		url('/assets/img/site/clouds-hero-bg.png');
	background-size: cover;
	background-position: center;
	z-index: 1;
}

.bg-gradient-yellow-sunflower-overlay {
	background-image: 
		linear-gradient(to left, rgba(254, 180, 0, 0.7), rgba(255, 216, 111, 0.7), rgba(255, 243, 204, 0.8)), 
		url('/assets/img/site/sunflower-hero-bg.jpg');
	background-size: cover;
	background-position: center;
	z-index: 1;
}

/* Display */
h1.display-1 {
	font-weight: 700;
}

/* Font Colors */
.text-light {
	color: var(--light) !important;
}

.text-light-blue {
	color: var(--light-blue);
}

.text-orange {
	color: var(--orange);
}

.text-yellow {
	color: var(--yellow);
}

/* Buttons */
.btn {
	transition: 0.1s linear;
}
	.btn:hover {
		filter: brightness(1.1);
	}

.btn-blue {
	background-color: var(--blue);
}
	.btn-blue:hover {
		background-color: var(--blue);
	}

.btn-light-blue {
	background-color: var(--light-blue);
	box-shadow: 2px 2px var(--blue);
}
	.btn-light-blue:hover {
		background-color: var(--light-blue);
	}
	
.btn-orange {
	background-color: var(--orange);
}
	.btn-orange:hover {
		background-color: var(--orange);
	}

.btn-yellow {
	background-color: var(--yellow);
	box-shadow: 2px 2px var(--orange);
}
	.btn-yellow:hover {
		background-color: var(--yellow);
	}
	
/* Containers */
.container {
	max-width: 1000px;
}

/* Cards */
.service-card {
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	border-top: 5px solid var(--yellow);
	border-bottom: 5px solid var(--orange);
	transition: 0.2s linear;
}
	.service-card:hover {
		box-shadow: 5px 5px 10px #ccc;
	}
	
.portfolio-item {
	cursor: pointer;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	box-shadow: 2px 2px 5px #ccc;
	trasition: 0.3s ease-in-out;
}
	.portfolio-item:hover {
		box-shadow: 5px 5px 10px #ccc;
	}

.portfolio-item .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(254, 180, 0, 0.7);
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
	.portfolio-item:hover .overlay {
		opacity: 1;
	}

.portfolio-item .overlay h5 {
	margin: 0;
	font-size: 1.5rem;
	text-align: center;
	color: #fff;
}

.product-price {
	font-size: 0.8rem;
	font-family: "Amiko", sans-serif;
}

.product-price span {
	font-size: 2.5rem;
	display: block;
}

/* Decor */
.rounded-30 {
	border-radius: 30px;
}

.rounded-50 {
	border-radius: 50px;
}

img.wavy {
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
	border-top: 5px solid var(--yellow);
	border-bottom: 5px solid var(--orange);
}